:root {
  --bg: #f6f7f9; --card: #ffffff; --line: #e3e6eb; --text: #1b1f24; --sub: #66707a;
  --acc: #3b5bdb; --acc-bg: #edf2ff; --acc-text: #ffffff; --hl: #ffe066; --hl-text: #1b1f24;
  --ai: #6741d9; --ai-bg: #f5f2ff; --ai-line: #d0bfff; --alert: #c92a2a; --alert-bg: #fff5f5;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05); --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111317; --card: #1a1d22; --line: #2d323a; --text: #e7e9ec; --sub: #9aa4af;
    --acc: #7d9bff; --acc-bg: #1f2a4d; --acc-text: #0b1020; --hl: #6b5800; --hl-text: #fff4c2;
    --ai: #b69cff; --ai-bg: #211b38; --ai-line: #45367d; --alert: #ffa8a8; --alert-bg: #3b1d1d; --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111317; --card: #1a1d22; --line: #2d323a; --text: #e7e9ec; --sub: #9aa4af;
  --acc: #7d9bff; --acc-bg: #1f2a4d; --acc-text: #0b1020; --hl: #6b5800; --hl-text: #fff4c2;
  --ai: #b69cff; --ai-bg: #211b38; --ai-line: #45367d; --alert: #ffa8a8; --alert-bg: #3b1d1d; --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color: var(--acc); }
code, kbd { font-family: ui-monospace, Consolas, monospace; font-size: .9em; }
kbd { border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--sub); background: var(--card); }
.muted { color: var(--sub); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn { appearance: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--acc); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-icon { padding: 6px 10px; }
.btn-ai, .btn-primary { background: var(--acc); border-color: var(--acc); color: var(--acc-text); }
.btn-ai:hover, .btn-primary:hover { filter: brightness(1.08); }

select, input[type="text"], input[type="date"] { font: inherit; font-size: 14px; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }

/* Top bar and filters stay at the top together while the results scroll */
.masthead { position: sticky; top: 0; z-index: 10; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(16, 24, 40, .06); }
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.logo { margin: 0; font-weight: 700; font-size: 18px; color: var(--acc); text-decoration: none; }
.viewswitch { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.viewswitch button { appearance: none; border: 0; background: none; color: var(--sub); font: inherit; font-size: 13px; padding: 3px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.viewswitch button:hover { color: var(--text); }
.viewswitch button[aria-pressed="true"] { background: var(--card); color: var(--acc); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, .15); }
.searchbox { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.searchbox:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-bg); }
.searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.searchicon { color: var(--sub); }
body[data-view="assist"] .topbar .viewswitch { margin-right: auto; }
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); width: 280px; display: grid; gap: 10px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.menu-panel label { display: grid; gap: 4px; font-size: 13px; color: var(--sub); }
.menu-link { font-size: 14px; }

.filters { display: grid; gap: 8px; padding: 0 16px 10px; }
.chiprow { display: flex; gap: 6px; align-items: center; min-width: 0; }
.chips, .filter-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips { flex: 1; min-width: 0; }
.filterpanel { display: grid; gap: 8px; }
.filtertoggle { display: none; }
.chip { appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--sub); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--acc); color: var(--text); }
.chip.on { background: var(--acc-bg); border-color: var(--acc); color: var(--acc); font-weight: 600; }
.filter-row select { border-radius: 999px; font-size: 13px; padding: 4px 10px; }
.customdates { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--sub); }
.dirpicker { position: relative; }
.dirpicker input { width: 240px; border-radius: 999px; font-size: 13px; padding: 4px 28px 4px 12px; }
.dirclear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--sub); cursor: pointer; font-size: 16px; }
.dirlist { position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); width: min(560px, 90vw); max-height: 320px; overflow: auto; margin: 0; padding: 4px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.dirlist li { padding: 6px 10px; border-radius: 6px; font-size: 13px; word-break: break-all; }
.dirlist li[data-i] { cursor: pointer; }
.dirlist li.active, .dirlist li[data-i]:hover { background: var(--acc-bg); }
.morepanel { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; padding-top: 4px; }
.morepanel label { display: grid; gap: 3px; font-size: 12px; color: var(--sub); }
.morepanel label.check { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text); }

.content { max-width: 920px; margin: 0 auto; padding: 14px 16px 40px; }
.status { min-height: 1.2em; margin: 0 0 10px; font-size: 13px; color: var(--sub); }
.welcome { text-align: center; padding: 60px 10px; }
.welcome h1 { margin: 0 0 10px; font-size: 24px; font-weight: 600; }

.aibox { margin-bottom: 14px; padding: 14px 16px; background: linear-gradient(180deg, var(--ai-bg), var(--card)); border: 1px solid var(--ai-line); border-radius: var(--radius); }
.aihead { margin: 0 0 6px; font-size: 13px; color: var(--ai); letter-spacing: .02em; text-transform: uppercase; }
.aihead .muted { text-transform: none; letter-spacing: 0; }
.aitext p { margin: 0 0 8px; }
.aitext ul { margin: 0 0 8px; padding-left: 20px; }
.aitext .cite { font-size: .85em; font-weight: 600; color: var(--ai); text-decoration: none; }
.aisources { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.aisources li { font-size: 12px; background: var(--card); border: 1px solid var(--ai-line); border-radius: 6px; padding: 2px 8px; }
.aisources a { color: var(--ai); text-decoration: none; }

.results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.result { display: flex; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.result.selected { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc-bg); }
.badge { flex-shrink: 0; width: 38px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #868e96; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.k-pdf { background: #e03131; } .k-word { background: #1971c2; } .k-excel { background: #2f9e44; }
.k-powerpoint { background: #e8590c; } .k-mail { background: #f08c00; } .k-note { background: #7048e8; }
.k-markdown { background: #c2255c; }
.k-image { background: #0c8599; } .k-archive { background: #5f3dc4; } .k-html { background: #364fc7; }
.rbody { flex: 1; min-width: 0; }
.rtitle { font-size: 16px; font-weight: 600; text-decoration: none; word-break: break-word; }
.rtitle:hover { text-decoration: underline; }
.rmeta { margin: 1px 0 4px; font-size: 12.5px; color: var(--sub); word-break: break-word; }
.crumbs + .facts::before { content: "·"; margin: 0 .55em; }
.drive { display: inline-block; margin-right: 7px; padding: 0 8px; border-radius: 999px; background: var(--acc-bg); color: var(--acc); font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; vertical-align: 1px; }
.copies { appearance: none; margin-left: 8px; padding: 0 8px; border: 1px dashed var(--sub); border-radius: 999px; background: none; color: var(--sub); font: inherit; font-size: 11.5px; line-height: 1.5; cursor: pointer; white-space: nowrap; }
.copies:hover { border-color: var(--acc); color: var(--acc); }
.rsnippet { font-size: 14px; word-break: break-word; white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
mark { background: var(--hl); color: var(--hl-text); border-radius: 2px; padding: 0 1px; }
.ractions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ractions a, .ractions button { appearance: none; font: inherit; font-size: 12.5px; color: var(--acc); background: var(--acc-bg); border: 1px solid transparent; border-radius: 6px; padding: 2px 10px; text-decoration: none; cursor: pointer; }
.ractions a:hover, .ractions button:hover { border-color: var(--acc); }
.loadmore { margin: 16px 0; text-align: center; }
.footer { padding: 0 16px 24px; text-align: center; font-size: 12px; color: var(--sub); }

/* Werkplek: a compact list; from 1000px wide filters, list and document side by side */
body[data-view="werk"] .results { gap: 4px; }
body[data-view="werk"] .result { gap: 10px; padding: 8px 10px; cursor: pointer; }
body[data-view="werk"] .result:hover { border-color: var(--acc); }
body[data-view="werk"] .badge { width: 30px; height: 34px; font-size: 9px; }
body[data-view="werk"] .rtitle { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-view="werk"] .rmeta { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; white-space: nowrap; }
body[data-view="werk"] .rmeta > * { flex-shrink: 0; margin: 0; }
body[data-view="werk"] .rmeta .facts { order: 2; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-view="werk"] .rsnippet { font-size: 12.5px; color: var(--sub); -webkit-line-clamp: 2; line-clamp: 2; }
body[data-view="werk"] .ractions, body[data-view="werk"] .crumbs { display: none; }
body[data-view="werk"] .crumbs + .facts::before { content: none; }
body[data-layout="split"] { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body[data-layout="split"] .masthead { box-shadow: none; }
body[data-layout="split"] .content { flex: 1; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: 236px minmax(300px, 400px) minmax(0, 1fr); }
.sidepane { overflow: auto; background: var(--card); border-right: 1px solid var(--line); }
body[data-layout="split"] .listpane { overflow: auto; padding: 10px 10px 24px; border-right: 1px solid var(--line); }
body[data-layout="split"] .welcome { padding: 40px 6px; }
body[data-layout="split"] .welcome h1 { font-size: 19px; }
.docpane { min-width: 0; min-height: 0; display: flex; background: var(--card); }
.docpane .viewer { flex: 1; }
.docempty { margin: auto; padding: 24px; text-align: center; line-height: 1.9; }
.sidepane .filters { padding: 14px 12px 20px; gap: 12px; }
.sidepane .chips { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.sidepane .chip { text-align: left; border-radius: 8px; }
.sidepane .filter-row, .sidepane .morepanel { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.sidepane .filter-row select { border-radius: 8px; }
.sidepane .customdates { flex-wrap: wrap; }
.sidepane .dirpicker input, .sidepane .morepanel input[type="text"] { width: 100%; border-radius: 8px; }
.sidepane .dirlist { width: 100%; }
.sidepane .filtertoggle { display: none; }

/* Document viewer: a dialog, or the right column of the Werkplek */
.preview { width: min(980px, 96vw); height: 90vh; max-height: 90vh; padding: 0; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 14px; }
.preview[open] { display: flex; }
.preview::backdrop { background: rgba(10, 12, 16, .55); }
.viewer { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pvhead { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pvtitlebox { flex: 1 1 240px; min-width: 0; }
.pvtitlebox h2 { margin: 0; font-size: 16px; word-break: break-word; }
.pvpathline { margin: 3px 0 0; font-size: 12px; word-break: break-all; }
.pvtools { display: flex; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; gap: 6px; align-items: center; }
.pvbody { flex: 1; overflow: auto; padding: 16px 20px; white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.6; }
.pvbody:focus { outline: none; }
.pvbody mark.current { outline: 2px solid var(--acc); }
.pvtabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.pvtab { appearance: none; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--sub); font: inherit; font-size: 13px; padding: 7px 10px; cursor: pointer; }
.pvtab:hover { color: var(--text); }
.pvtab[aria-selected="true"] { color: var(--acc); border-bottom-color: var(--acc); font-weight: 600; }
.pvnote { margin: 0; padding: 8px 16px; font-size: 13px; color: var(--alert); background: var(--alert-bg); }
.pvsummary { flex-shrink: 0; max-height: 42%; overflow: auto; margin: 10px 16px 0; padding: 10px 14px; background: linear-gradient(180deg, var(--ai-bg), var(--card)); border: 1px solid var(--ai-line); border-radius: var(--radius); font-size: 14px; }
.pvsummary .aihead { display: flex; align-items: center; gap: 6px; }
.pvsumclose { margin-left: auto; border: 0; background: none; color: var(--sub); font-size: 18px; line-height: 1; cursor: pointer; }
.pvorig { flex: 1; min-height: 0; display: flex; background: var(--bg); }
.pvorig iframe, .pvorig > div { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.pvorig > p { margin: 16px 20px; }
.pvimage { margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Assistent */
body[data-view="assist"] .content { max-width: 860px; padding-bottom: 0; }
.chatpane { display: flex; flex-direction: column; min-height: calc(100vh - 90px); }
.chatlog { flex: 1; display: grid; gap: 18px; align-content: start; padding-bottom: 12px; }
.chatintro { text-align: center; padding: 48px 10px 16px; }
.chatintro h1 { margin: 0 0 10px; font-size: 24px; font-weight: 600; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.turn { display: grid; gap: 8px; }
.bubble { justify-self: end; max-width: 85%; margin: 0; padding: 8px 14px; background: var(--acc); color: var(--acc-text); border-radius: 16px 16px 4px 16px; white-space: pre-wrap; word-break: break-word; }
.reply { padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; box-shadow: var(--shadow); }
.turnstatus { margin: 0 0 6px; font-size: 13px; }
.turnfilters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; font-size: 12.5px; }
.fchip { padding: 1px 9px; border-radius: 999px; background: var(--acc-bg); color: var(--acc); font-weight: 600; }
.flink { margin-left: 6px; }
.fnote { flex-basis: 100%; margin: 2px 0 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.card a { display: flex; gap: 10px; align-items: flex-start; height: 100%; padding: 8px 10px; color: var(--text); text-decoration: none; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.card a:hover { border-color: var(--ai); }
.card .badge { width: 28px; height: 32px; font-size: 9px; }
.cardbody { min-width: 0; display: grid; gap: 2px; }
.cardtitle { font-size: 13.5px; font-weight: 600; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.cardnum { margin-right: 5px; color: var(--ai); }
.cardmeta { font-size: 11.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatform { position: sticky; bottom: 0; display: grid; gap: 6px; padding: 18px 0 14px; background: linear-gradient(to bottom, transparent, var(--bg) 16px); }
.chatform textarea { width: 100%; min-height: 52px; max-height: 40vh; resize: vertical; font: inherit; font-size: 15px; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.chatform textarea:focus { outline: 0; border-color: var(--ai); box-shadow: 0 0 0 3px var(--ai-bg); }
.chatactions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.chatactions .muted { margin-right: auto; font-size: 12px; }

.login-page { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-card { width: min(380px, 100%); padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.login-card .logo { font-size: 26px; }
.login-form { display: grid; gap: 8px; margin-top: 16px; }
.login-form input { font: inherit; font-size: 16px; padding: 9px 12px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.login-form .btn { justify-content: center; margin-top: 6px; padding: 9px; }
.alert { padding: 8px 12px; font-size: 14px; color: var(--alert); background: var(--alert-bg); border-radius: 8px; }

/* Phone: search bar plus one scrollable row of buttons; the other filters behind "Filters" */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .topbar .logo { display: none; }
  .viewswitch { min-width: 0; margin-right: auto; overflow-x: auto; scrollbar-width: none; }
  .viewswitch button { padding: 3px 9px; font-size: 12.5px; }
  .btn-icon { padding: 6px 9px; }
  .btn-ai .label { display: none; }
  .searchbox { order: 5; flex-basis: 100%; }
  .hint { display: none; }
  .filters { padding: 0 12px 8px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filtertoggle { display: inline-flex; flex-shrink: 0; }
  .filterpanel { display: none; }
  .filters.open .filterpanel { display: grid; }
  .dirpicker input { width: 180px; }
  .content { padding: 12px; }
  .result { gap: 10px; padding: 10px 12px; }
  .badge { width: 32px; height: 38px; }
  .preview { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .pvhead { padding-right: 56px; }
  #pvclose { position: absolute; top: 10px; right: 10px; }
  .pvsummary { max-height: 50%; }
  .chatpane { min-height: calc(100vh - 70px); }
  .bubble { max-width: 92%; }
  .cards { grid-template-columns: 1fr; }
}