/* Aanvullende stijlen bovenop Tailwind (CDN). Kleuren via de 'brand'-tinten uit base.html. */

html, body { height: 100%; }

.badge { display: inline-flex; align-items: center; gap: .4rem; border-width: 1px; border-radius: 9999px;
  padding: .2rem .65rem; font-size: .75rem; font-weight: 500; white-space: nowrap; }

/* Mobiel: in de bovenbalk alleen het statusbolletje (tekst in de tooltip). */
@media (max-width: 639px) { header .badge { padding: .4rem; gap: 0; } }

.nav-link { border-radius: .5rem; padding: .4rem .75rem; color: #475569; font-weight: 500; transition: background .15s; }
.nav-link:hover { background: #f1f5f9; color: #0f172a; }
.nav-active { color: #0f172a; background: #f1f5f9; }

.menu-item { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; font-size: .875rem; color: #334155; }
.menu-item:hover { background: #f8fafc; }
#user-menu summary::-webkit-details-marker { display: none; }

.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06); }

.btn-primary { display: inline-flex; align-items: center; gap: .5rem; border-radius: .75rem; padding: .6rem 1rem;
  font-size: .875rem; font-weight: 600; color: #fff; background: var(--brand);
  box-shadow: 0 1px 2px rgba(15,23,42,.1); transition: filter .15s, transform .15s; }
.btn-primary:hover { filter: brightness(.92); }
.btn-ghost { border-radius: .5rem; padding: .35rem .7rem; font-size: .8rem; font-weight: 500; color: #475569; border: 1px solid #e2e8f0; }

.agent-tile { display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06); transition: transform .2s, box-shadow .2s, border-color .2s; }
.agent-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, #e2e8f0);
  box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 16px 32px -8px color-mix(in srgb, var(--accent) 30%, transparent); }

.empty-state { border: 1px dashed #cbd5e1; border-radius: 1rem; background: #fff; padding: 2.5rem 1.5rem; text-align: center; }

.login-bg { background:
  radial-gradient(60rem 30rem at 10% -10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%),
  radial-gradient(50rem 30rem at 110% 110%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 60%); }

/* ---------- Agentpagina ---------- */
/* Kruisje om een opname uit de lijst te verwijderen (zichtbaar bij hover, zie recording.html). */
.conv-delete { font-size: .75rem; line-height: 1; }
.conv-item { display: block; border-radius: .6rem; padding: .55rem .75rem; color: #334155; transition: background .15s; }
.conv-item:hover { background: #f1f5f9; }
.conv-active { background: color-mix(in srgb, var(--accent) 10%, #fff); color: #0f172a; font-weight: 500;
  box-shadow: inset 3px 0 0 var(--accent); }

.quick-action { border: 1px solid #e2e8f0; background: #fff; border-radius: 9999px; padding: .3rem .75rem;
  font-size: .78rem; color: #475569; transition: all .15s; text-align: left; }
.quick-action:hover { border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, #fff); }

.composer { background: #fff; border: 1px solid #e2e8f0; border-radius: 1.1rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -6px rgba(15,23,42,.10); transition: border-color .15s, box-shadow .15s; }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, #e2e8f0);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), 0 8px 24px -6px rgba(15,23,42,.10); }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; width: 2.25rem;
  border-radius: .6rem; color: #64748b; transition: background .15s, color .15s; }
.icon-btn:hover, .icon-btn.active { background: #f1f5f9; color: #0f172a; }

.setting { display: flex; flex-direction: column; gap: .25rem; font-size: .72rem; font-weight: 600; color: #64748b; }
.setting select, .setting input, .setting textarea { border: 1px solid #e2e8f0; border-radius: .5rem; padding: .4rem .6rem;
  font-size: .85rem; font-weight: 400; color: #0f172a; background: #fff; }
.setting select:focus, .setting input:focus, .setting textarea:focus { outline: none; border-color: var(--accent); }
.setting textarea { resize: vertical; }

.chip { display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; border: 1px solid #e2e8f0;
  background: #f8fafc; border-radius: .6rem; padding: .3rem .4rem .3rem .55rem; font-size: .78rem; color: #334155; }
.chip button { display: grid; place-items: center; height: 1.15rem; width: 1.15rem; border-radius: 9999px; color: #94a3b8; }
.chip button:hover { background: #e2e8f0; color: #0f172a; }
.chip-ext { border-radius: .3rem; padding: .05rem .3rem; font-size: .62rem; font-weight: 700; color: #fff; text-transform: uppercase; }

.msg-user { margin-left: auto; max-width: 85%; background: var(--accent); color: #fff; border-radius: 1.1rem 1.1rem .3rem 1.1rem;
  padding: .7rem 1rem; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.msg-user-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; margin-top: .4rem; }
.msg-tag { display: inline-flex; align-items: center; gap: .3rem; background: #fff; border: 1px solid #e2e8f0;
  border-radius: .45rem; padding: .15rem .45rem; font-size: .72rem; color: #475569; }

.msg-assistant { background: #fff; border: 1px solid #e2e8f0; border-radius: .3rem 1.1rem 1.1rem 1.1rem;
  padding: 1.1rem 1.35rem; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05); min-width: 0; }

.msg-actions { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
.msg-actions button, .msg-actions a { display: inline-flex; align-items: center; gap: .35rem; border-radius: .5rem;
  padding: .3rem .55rem; font-size: .75rem; font-weight: 500; color: #64748b; transition: background .15s, color .15s; }
.msg-actions button:hover, .msg-actions a:hover { background: #f1f5f9; color: #0f172a; }
/* 'hidden' moet ook werken voor knoppen in deze balk (de regel hierboven weegt zwaarder dan .hidden). */
.msg-actions .hidden { display: none; }
.feedback-choice { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #e2e8f0; border-radius: .65rem; background: #fff; padding: .35rem .6rem; font-size: .72rem; color: #475569; transition: background .15s, border-color .15s, color .15s; }
.feedback-choice:hover { border-color: color-mix(in srgb, var(--brand) 35%, #e2e8f0); background: #faf7f8; }
.feedback-choice.is-selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, #fff); color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 10%, transparent); }

.typing { display: inline-flex; gap: .3rem; padding: .35rem 0; }
.typing span { height: .5rem; width: .5rem; border-radius: 9999px; background: var(--accent); opacity: .35;
  animation: typing 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } }

.streaming-cursor::after { content: ""; display: inline-block; width: .5rem; height: 1rem; margin-left: 2px;
  vertical-align: -2px; background: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Markdown-weergave (selectors zonder :where zodat ze winnen van de typography-plugin) */
.prose { max-width: none; }
.prose h1 { font-size: 1.6rem; line-height: 1.25; margin: .3em 0 .5em; }
.prose h2 { font-size: 1.2rem; margin: 1.5em 0 .5em; }
.prose h3 { font-size: 1.02rem; margin: 1.3em 0 .4em; }
.prose blockquote { font-style: normal; font-weight: 400; color: #475569; border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, #fff); border-radius: 0 .5rem .5rem 0; padding: .35rem 1rem; font-size: .9em; }
.prose blockquote p::before, .prose blockquote p::after { content: none !important; }
.prose blockquote p { margin: .4em 0; }
.prose hr { margin: 1.6em 0; }
.prose code::before, .prose code::after { content: none !important; }
.prose code { background: #f1f5f9; padding: .1rem .3rem; border-radius: .3rem; font-weight: 500; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

/* Snelstart: één horizontaal scrollbare rij */
.quick-row { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  mask-image: linear-gradient(to right, #000 92%, transparent); }
.quick-row::-webkit-scrollbar { display: none; }
.quick-row .quick-action { white-space: nowrap; flex-shrink: 0; }

.admin-table { width: 100%; font-size: .875rem; }
.admin-table th:first-child, .admin-table td:first-child { padding-left: 1.5rem; }
.admin-table th:last-child, .admin-table td:last-child { padding-right: 1.5rem; }
.admin-table th { padding: .7rem 1rem; text-align: left; font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #94a3b8; background: #f8fafc; }
.admin-table td { padding: .85rem 1rem; border-top: 1px solid #f1f5f9; color: #334155; }
/* Uitklaplijst in het beheer: kop + ongeveer 5 regels, daarna verticaal (en zo nodig horizontaal) scrollen. */
.admin-dropdown { max-height: 19rem; overflow: auto; border-top: 1px solid #f1f5f9; }
.admin-dropdown thead th { position: sticky; top: 0; z-index: 1; }
details[data-admin-dropdown] > summary::-webkit-details-marker { display: none; }
.group-chip { display: inline-block; margin: .1rem .25rem .1rem 0; border-radius: .4rem; background: #f1f5f9;
  padding: .1rem .45rem; font-size: .72rem; font-weight: 500; color: #475569; }

/* ---------- Beheer: compacte gebruiksanalyse ---------- */
.admin-tab { position: relative; flex-shrink: 0; padding: .85rem .8rem; font-size: .875rem; font-weight: 500; color: #64748b; }
.admin-tab:hover { color: #0f172a; }
.admin-tab.is-active { color: var(--brand); font-weight: 650; }
.admin-tab.is-active::after { position: absolute; right: .65rem; bottom: -1px; left: .65rem; height: 2px; border-radius: 2px 2px 0 0; background: var(--brand); content: ""; }
.usage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; cursor: pointer; list-style: none; padding: .85rem .5rem; }
.usage-row::-webkit-details-marker { display: none; }
.usage-row:hover { background: #fafafa; }
.usage-detail-body { margin: 0 .5rem .8rem 3.75rem; border-radius: .75rem; background: #f8fafc; padding: .85rem 1rem; }

@media (max-width: 520px) {
  .usage-row { gap: .5rem; padding-inline: .15rem; }
  .usage-detail-body { margin-left: .15rem; }
}

.toast { pointer-events: auto; display: flex; align-items: center; gap: .5rem; border-radius: .75rem; padding: .65rem 1rem;
  font-size: .875rem; color: #fff; background: #0f172a; box-shadow: 0 10px 30px rgba(15,23,42,.25);
  animation: toast-in .2s ease-out; }
.toast-error { background: #b91c1c; }
.toast { max-width: min(32rem, calc(100vw - 2rem)); }
.toast strong { overflow-wrap: anywhere; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Gespreksverslag (opnemen/uploaden) ---------- */
.report-type { display: block; cursor: pointer; border: 1px solid #e2e8f0; border-radius: .9rem; background: #fff;
  padding: .8rem .9rem; transition: border-color .15s, box-shadow .15s, background .15s; }
.report-type:hover { border-color: color-mix(in srgb, var(--accent) 40%, #e2e8f0); }
.report-type:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.report-type:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Voortgang van een opname: vier stappen naast elkaar (onder elkaar op een smal scherm). */
.stepper { display: grid; grid-template-columns: 1fr; gap: .75rem; list-style: none; margin-left: 0; padding: 0; }
@media (min-width: 640px) { .stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { display: flex; align-items: flex-start; gap: .65rem; border-radius: .8rem; padding: .7rem .8rem;
  border: 1px solid #e2e8f0; background: #f8fafc; color: #94a3b8; transition: background .2s, color .2s, border-color .2s; }
.step-text { display: block; min-width: 0; }
.step-title { display: block; font-size: .85rem; font-weight: 600; }
.step-sub { display: block; font-size: .7rem; color: #94a3b8; overflow-wrap: anywhere; }
.step-dot { position: relative; display: grid; place-items: center; margin-top: .05rem; height: 1.4rem; width: 1.4rem;
  flex-shrink: 0; border-radius: 9999px; border: 2px solid #cbd5e1; background: #fff; font-size: .7rem; font-weight: 700;
  line-height: 1; color: #94a3b8; }
.step[data-state="active"] { border-color: color-mix(in srgb, var(--accent) 35%, #e2e8f0);
  background: color-mix(in srgb, var(--accent) 7%, #fff); color: #0f172a; }
.step[data-state="active"] .step-dot { border-color: var(--accent); border-top-color: transparent; color: transparent;
  animation: spin .8s linear infinite; }
.step[data-state="done"] { background: #fff; color: #0f172a; }
.step[data-state="done"] .step-dot { border-color: #10b981; background: #10b981; color: transparent; }
.step[data-state="done"] .step-dot::after { content: ""; position: absolute; left: .4rem; top: .2rem; width: .3rem; height: .6rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.step[data-state="error"] { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.step[data-state="error"] .step-dot { border-color: #dc2626; background: #dc2626; color: #fff; }
.step[data-state="cancelled"] { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.step[data-state="cancelled"] .step-dot { border-color: #d97706; background: #fff; color: #d97706; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Tabbladen van een opname, als mappen op het witte vlak eronder: het actieve tabblad is wit en
   loopt zonder rand over in het vlak; de andere zijn grijs. */
.res-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: 0 .75rem; }
.res-tab { position: relative; z-index: 1; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0;
  border-radius: .7rem .7rem 0 0; padding: .6rem 1rem; font-size: .875rem; font-weight: 500; color: #64748b;
  background: #f1f5f9; transition: color .15s, background .15s; }
.res-tab:hover { color: #0f172a; background: #e2e8f0; }
.res-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.res-tab[aria-selected="true"] { z-index: 2; border-color: #e2e8f0; background: #fff; color: #0f172a; font-weight: 650;
  box-shadow: inset 0 3px 0 var(--accent); }
.res-tab[aria-selected="true"]::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px;
  background: #fff; }
.res-card { position: relative; border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06); }
@media (min-width: 640px) { .res-card { padding: 1.5rem; } }

.seg { display: grid; grid-template-columns: 4.2rem 1fr; gap: .75rem; padding: .7rem 1rem; }
.seg-time { font-family: ui-monospace, monospace; font-size: .75rem; color: #64748b; text-align: left; padding-top: .15rem; }
.seg-time:hover { color: var(--accent); text-decoration: underline; }
.seg-name { display: inline-block; margin-bottom: .15rem; border-radius: .4rem; padding: .05rem .45rem;
  font-size: .72rem; font-weight: 600; }

/* ---------- Tabellen in antwoorden ---------- */
/* Niets mag buiten het witte vlak vallen: brede tabellen en codeblokken scrollen horizontaal
   binnen het antwoord, lange woorden en links breken af. */
.prose table { display: block; max-width: 100%; overflow-x: auto; font-size: .9em; }
.prose th { background: #f8fafc; }
.prose th, .prose td { min-width: 6rem; }
.prose pre { max-width: 100%; overflow-x: auto; }
.prose p, .prose li { overflow-wrap: break-word; }
.prose a, .prose :not(pre) > code { overflow-wrap: anywhere; }
.msg-assistant { max-width: 100%; overflow-x: auto; }

/* ---------- OneDrive-kiezer en opslagvenster ---------- */
.od-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem;
  background: rgba(15,23,42,.45); }
.od-dialog { display: flex; flex-direction: column; width: 100%; max-width: 40rem; max-height: min(42rem, calc(100vh - 2rem));
  background: #fff; border-radius: 1rem; box-shadow: 0 24px 48px -12px rgba(15,23,42,.35); overflow: hidden; }
.od-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1rem .5rem 1.25rem; }
.od-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 0 1.25rem .5rem; }
.od-tabs { display: inline-flex; gap: .25rem; background: #f1f5f9; border-radius: .6rem; padding: .2rem; }
.od-tab { border-radius: .45rem; padding: .3rem .7rem; font-size: .8rem; font-weight: 500; color: #475569; }
.od-tab-active { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.od-search { flex: 1 1 12rem; min-width: 0; border: 1px solid #e2e8f0; border-radius: .6rem; padding: .4rem .7rem; font-size: .85rem; }
.od-name { flex-basis: 11rem; }
.od-search:focus { outline: none; border-color: var(--accent); }
.od-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .25rem 1.25rem .5rem; border-bottom: 1px solid #f1f5f9; }
.od-crumb { border-radius: .4rem; padding: .1rem .35rem; font-size: .8rem; color: #475569; }
.od-crumb:hover { background: #f1f5f9; color: #0f172a; }
.od-list { flex: 1; min-height: 12rem; overflow-y: auto; padding: .35rem .5rem; }
.od-row { display: flex; width: 100%; align-items: center; gap: .65rem; border-radius: .6rem; padding: .55rem .75rem; }
.od-row:hover { background: #f8fafc; }
.od-row-chosen { background: color-mix(in srgb, var(--accent) 10%, #fff); box-shadow: inset 3px 0 0 var(--accent); }
.od-row-disabled { opacity: .5; cursor: not-allowed; }
.od-newfolder { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem 1.25rem; border-top: 1px solid #f1f5f9; }
.od-newfolder.hidden { display: none; }
.od-savebar { display: flex; gap: .5rem; padding: .75rem 1.25rem 0; border-top: 1px solid #f1f5f9; }
.od-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border-top: 1px solid #f1f5f9; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; filter: none; }

/* ---------- "Powered by" (besluit B-25): bescheiden en gedempt ---------- */
.powered-by { font-size: 11px; color: #94a3b8; }