/* ============================================================
   STAN Partners x Siena - Chainlit pixel-replica
   ------------------------------------------------------------
   Werkt samen met:
     - public/theme.json  -> shadcn tokens (light + dark)
     - public/enhance.js  -> injecteert agent-pill, welkom,
                             en de complete login-shell
   ============================================================ */

/* ---------- Brand tokens (HSL triples) --------------------- */
:root {
    --stan-blue: 207 100% 32%;
    --stan-blue-700: 207 100% 27%;
    --stan-blue-800: 207 100% 22%;
    --stan-blue-50: 207 60% 96%;
    --stan-blue-100: 207 70% 90%;
    --stan-olive: 57 100% 20%;
    --stan-stone: 35 6% 42%;
    --stan-stone-50: 40 33% 97%;
    --stan-stone-100: 30 18% 92%;
    --stan-stone-200: 30 14% 86%;
    --stan-stone-300: 30 10% 70%;
    --stan-stone-500: 30 7% 53%;
    --stan-stone-700: 30 7% 32%;
    --stan-stone-900: 30 8% 14%;

    --canvas-gradient: linear-gradient(180deg,
        hsl(var(--stan-blue-50)) 0%,
        hsl(207 50% 97%) 50%,
        hsl(var(--background)) 100%);

    --shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.04), 0 2px 8px rgba(20, 30, 50, 0.04);
    --shadow-md: 0 4px 16px rgba(20, 30, 50, 0.06), 0 12px 32px rgba(20, 30, 50, 0.06);
}

/* ---------- Dark mode uitgeschakeld ------------------------ */
/* De app is light-only. We verbergen Chainlit's thema-toggle (#theme-toggle)
   zodat gebruikers niet naar dark kunnen switchen. theme.json zet de
   'dark'-tokens bovendien gelijk aan 'light', zodat een sessie die eerder op
   dark is gezet (opgeslagen in localStorage) tóch licht rendert. */
#theme-toggle {
    display: none !important;
}

/* ---------- Type rhythm ------------------------------------ */
html, body, #root {
    font-family: var(--font-sans, 'Open Sans', Verdana, system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .prose h1, .prose h2, .prose h3, .prose h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.005em;
}
h1, h2, h3, h4, h5, h6, strong, b {
    color: hsl(30 8% 14%);
}
html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6,
html.dark strong, html.dark b {
    color: inherit;
}

/* ---------- Main canvas: zachte STAN-blauwe gradient ------- */
main,
[data-testid="main"],
.bg-background {
    background: var(--canvas-gradient) !important;
}

/* ============================================================
   HEADER -- left: Siena agent pill + subtitle
   ============================================================ */
header,
[data-testid="app-header"] {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 86, 161, 0.10) !important;
    backdrop-filter: none !important;
    height: 56px;
    padding: 0 20px !important;
}

.siena-agent-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: 8px;
}
.siena-agent-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    font-weight: 700;
    font-size: 13px;
    color: hsl(var(--stan-stone-900));
}
.siena-agent-pill img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.siena-agent-subtitle {
    color: hsl(var(--stan-stone-500));
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

header button {
    width: 32px;
    height: 32px;
    border-radius: 8px !important;
    transition: background 120ms ease;
}
header button:hover {
    background-color: hsl(var(--muted)) !important;
}

/* ============================================================
   SIDEBAR -- warm-witte achtergrond, alleen actief = blauw
   ============================================================ */
.bg-sidebar,
[data-sidebar="sidebar"] {
    background-color: hsl(var(--sidebar-background)) !important;
    border-right: 1px solid hsl(var(--sidebar-border));
    padding: 16px 12px !important;
}
.text-sidebar-foreground,
[data-sidebar="sidebar"] {
    color: hsl(var(--sidebar-foreground)) !important;
}

/* ----- Sidebar items compact (overschrijft Chainlit Tailwind) ----- */

/* Menu-container: geen gap tussen items */
[data-sidebar="sidebar"] [data-sidebar="menu"],
[data-sidebar="sidebar"] [data-sidebar="group-content"] {
    gap: 1px !important;
    row-gap: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Overschrijf Tailwind space-y-* (margin-top op opvolgende kinderen) */
[data-sidebar="sidebar"] [data-sidebar="menu"] > * + *,
[data-sidebar="sidebar"] [data-sidebar="group-content"] > * + *,
[data-sidebar="sidebar"] [data-sidebar="menu-item"] + [data-sidebar="menu-item"] {
    margin-top: 1px !important;
}

/* List-items zelf: geen extra padding/margin */
[data-sidebar="sidebar"] [data-sidebar="menu-item"],
[data-sidebar="sidebar"] [data-sidebar="menu"] > li {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
}

/* De daadwerkelijke klikbare knop: vaste hoogte 32px */
[data-sidebar="sidebar"] [data-sidebar="menu-button"],
[data-sidebar="sidebar"] [data-sidebar="menu-item"] > a,
[data-sidebar="sidebar"] [data-sidebar="menu-item"] > button {
    background-color: transparent !important;
    color: hsl(30 8% 14%) !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    transition: background 120ms ease, color 120ms ease;
}

/* Eventuele inner-spans / icons binnen de knop niet uitrekken */
[data-sidebar="sidebar"] [data-sidebar="menu-button"] > * {
    margin: 0 !important;
}

/* Menu-action ("..." op hover) compacter */
[data-sidebar="menu-action"] {
    height: 24px !important;
    width: 24px !important;
    padding: 4px !important;
    top: 4px !important;
}

/* Group spacing -- groepen netjes onder elkaar */
[data-sidebar="sidebar"] [data-sidebar="group"] {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}
[data-sidebar="menu-button"]:hover,
[data-sidebar="menu-item"] > a:hover,
[data-sidebar="menu-item"] > button:hover {
    background-color: hsl(var(--stan-stone-100)) !important;
    color: hsl(var(--stan-blue)) !important;
}
[data-sidebar="menu-button"][data-active="true"],
[data-sidebar="menu-item"][data-active="true"] > a,
[data-sidebar="menu-item"][data-active="true"] > button,
[data-active="true"] [data-sidebar="menu-button"] {
    background-color: hsl(var(--stan-blue)) !important;
    color: #ffffff !important;
}
[data-sidebar="menu-button"][data-active="true"] *,
[data-active="true"] [data-sidebar="menu-button"] * {
    color: #ffffff !important;
}

[data-sidebar="menu-button"] .bg-gradient-to-l {
    display: none !important;
}

.bg-sidebar-accent { background-color: hsl(var(--sidebar-accent)) !important; }
.text-sidebar-accent-foreground { color: hsl(var(--sidebar-accent-foreground)) !important; }
.border-sidebar-border { border-color: hsl(var(--sidebar-border)) !important; }
.ring-sidebar-ring { --tw-ring-color: hsl(var(--sidebar-ring)) !important; }

[data-sidebar="group-label"] {
    color: hsl(var(--stan-stone-500)) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 14px 10px 4px !important;
    height: auto !important;
    margin: 0 !important;
}

/* ============================================================
   WELKOM -- door enhance.js geinjecteerd #siena-welcome
   ============================================================ */
#siena-welcome {
    text-align: center;
    padding: 80px 24px 16px;
    max-width: 920px;
    margin: 0 auto;
    width: 100%;
}
#siena-welcome .siena-hero {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin: 0 auto 24px;
    background: hsl(var(--stan-blue));
    overflow: hidden;
    box-shadow: 0 8px 28px hsl(var(--stan-blue) / 0.22);
    flex-shrink: 0;
}
#siena-welcome .siena-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
#siena-welcome .siena-eyebrow {
    color: hsl(var(--stan-blue));
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
#siena-welcome h1 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 800;
    color: hsl(var(--stan-stone-900));
    letter-spacing: -0.01em;
    line-height: 1.15;
}
#siena-welcome p {
    color: hsl(var(--stan-stone-700));
    font-size: 15px;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.55;
}

/* ============================================================
   STARTER chips -- capsules met blauwe hover
   ============================================================ */
[data-testid="starter-prompt"],
button[data-starter],
.cl-starter,
button[class*="starter"] {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--stan-stone-900)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 999px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 9px 16px !important;
    box-shadow: 0 1px 1px rgba(18, 25, 38, 0.03);
    transition: all 120ms ease;
}
[data-testid="starter-prompt"]:hover,
button[data-starter]:hover,
.cl-starter:hover,
button[class*="starter"]:hover {
    border-color: hsl(var(--stan-blue)) !important;
    color: hsl(var(--stan-blue)) !important;
    box-shadow: 0 2px 10px hsl(var(--stan-blue) / 0.10);
}

/* ============================================================
   COMPOSER -- witte kaart, ronde STAN-blauwe send-knop
   ------------------------------------------------------------
   Alleen de BUITENSTE wrapper krijgt de witte-card stijl + ring
   op focus. Inner elementen (#chat-input, textarea, contenteditable)
   blijven volledig transparant -- geen tweede border, geen pill,
   geen focus-bar om de tekst.
   ============================================================ */

/* Outer composer card -- pak de wrapper, niet de input zelf */
#message-composer,
[data-testid="chat-input"]:not(#message-composer *) {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-md) !important;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Inner input-element: ALTIJD transparant, geen eigen card */
#chat-input,
#message-composer #chat-input,
[data-testid="chat-input"] #chat-input,
#message-composer textarea,
#chat-input textarea,
[data-testid="chat-input"] textarea,
#message-composer [contenteditable],
#message-composer [role="textbox"] {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: hsl(var(--foreground)) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Alle binnenste elementen behalve de send-knop: geen eigen
   border/outline/shadow. Voorkomt het "inner pill" focusring
   binnen de buitenste composer-kaart. */
#message-composer div,
#message-composer span,
#message-composer textarea,
#message-composer [contenteditable],
#message-composer [role="textbox"],
#chat-input div,
#chat-input span,
#chat-input textarea,
#chat-input [contenteditable],
#chat-input [role="textbox"],
[data-testid="chat-input"] div,
[data-testid="chat-input"] span,
[data-testid="chat-input"] textarea,
[data-testid="chat-input"] [contenteditable],
[data-testid="chat-input"] [role="textbox"] {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    --tw-ring-shadow: 0 0 transparent !important;
    --tw-ring-offset-shadow: 0 0 transparent !important;
    --tw-ring-width: 0 !important;
    --tw-ring-offset-width: 0 !important;
    --tw-ring-color: transparent !important;
}

/* Send-knop: gehouden styling */
#message-composer button[type="submit"],
.cl-send-button,
[data-testid="submit-button"] {
    background-color: hsl(var(--stan-blue)) !important;
    box-shadow: 0 2px 6px hsl(var(--stan-blue) / 0.25) !important;
}

/* ALLE focus states binnen composer (focus, focus-visible,
   focus-within) op descendants worden uitgeschakeld. Alleen de
   buitenste composer-wrapper reageert op focus-within (blauwe
   border + outer ring), descendants nooit. */
#message-composer *:focus,
#message-composer *:focus-visible,
#message-composer *:focus-within,
#chat-input *:focus,
#chat-input *:focus-visible,
#chat-input *:focus-within,
[data-testid="chat-input"] *:focus,
[data-testid="chat-input"] *:focus-visible,
[data-testid="chat-input"] *:focus-within {
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-color: transparent !important;
    --tw-ring-shadow: 0 0 transparent !important;
    --tw-ring-offset-shadow: 0 0 transparent !important;
    --tw-ring-width: 0 !important;
    --tw-ring-offset-width: 0 !important;
}

/* Send-knop mag wel een focus ring voor keyboard-gebruikers */
#message-composer button:focus-visible,
[data-testid="submit-button"]:focus-visible {
    outline: 2px solid hsl(var(--stan-blue)) !important;
    outline-offset: 2px !important;
    box-shadow: 0 2px 6px hsl(var(--stan-blue) / 0.25) !important;
}
/* Alleen outer composer reageert op focus-within met blauwe ring */
#message-composer:focus-within,
[data-testid="chat-input"]:not(#message-composer *):focus-within {
    border-color: hsl(var(--stan-blue)) !important;
    box-shadow: 0 0 0 3px hsl(var(--stan-blue) / 0.15),
                var(--shadow-md) !important;
}

/* Inner #chat-input mag NOOIT focus-within ring krijgen */
#message-composer #chat-input:focus-within,
#message-composer #chat-input:focus,
[data-testid="chat-input"] #chat-input:focus-within,
#chat-input:focus-within,
#chat-input:focus {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
#message-composer textarea::placeholder,
#chat-input textarea::placeholder,
[data-testid="chat-input"] textarea::placeholder {
    color: hsl(var(--stan-stone-500)) !important;
    opacity: 0.9;
}
#message-composer button svg,
#message-composer svg {
    color: hsl(var(--foreground));
    stroke: currentColor;
}
#message-composer button:hover {
    background-color: hsl(var(--muted)) !important;
}

#message-composer button[type="submit"],
.cl-send-button,
[data-testid="submit-button"] {
    background-color: hsl(var(--stan-blue)) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    width: 38px !important;
    height: 38px !important;
    box-shadow: 0 2px 6px hsl(var(--stan-blue) / 0.25) !important;
    transition: background 120ms ease, transform 120ms ease;
}
#message-composer button[type="submit"]:hover,
.cl-send-button:hover,
[data-testid="submit-button"]:hover {
    background-color: hsl(var(--stan-blue-700)) !important;
}
#message-composer button[type="submit"] svg,
.cl-send-button svg,
[data-testid="submit-button"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ============================================================
   MESSAGES
   ============================================================ */
.bg-accent.rounded-3xl,
[data-step-type="user_message"] > div,
[data-message-author="user"] {
    background-color: hsl(var(--stan-blue)) !important;
    color: #ffffff !important;
    border-radius: 18px 18px 4px 18px !important;
    box-shadow: 0 1px 2px rgba(0, 86, 161, 0.15);
}
.bg-accent.rounded-3xl,
.bg-accent.rounded-3xl p,
.bg-accent.rounded-3xl span,
.bg-accent.rounded-3xl li,
.bg-accent.rounded-3xl a,
.bg-accent.rounded-3xl code,
.bg-accent.rounded-3xl strong,
.bg-accent.rounded-3xl b,
.bg-accent.rounded-3xl h1,
.bg-accent.rounded-3xl h2,
.bg-accent.rounded-3xl h3 {
    color: #ffffff !important;
}

[data-step-type="assistant_message"] > div,
[data-message-author="assistant"] {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 4px 18px 18px 18px !important;
    padding: 14px 18px !important;
    box-shadow: var(--shadow-sm);
}

/* ----- Tool-/proces-stappen (cl.Step) -------------------------
   Rustig op de achtergrond; alleen de LOPENDE stap komt subtiel naar
   voren (zachte blauwe tint + leesbaar label + lichte pulse). Het label
   van een lopende stap krijgt van Chainlit de class .loading-shimmer
   (transparante tekst gevuld met een bijna-witte gradient -> vrijwel
   onleesbaar op de lichte kaart). Die overschrijven we naar een vaste,
   leesbare STAN-blauwe tekst. ----- */
[data-step-type="tool"],
[data-step-type="run"] {
    background-color: hsl(207 18% 97%) !important;
    border: 1px solid hsl(207 16% 89%) !important;
    border-left: 3px solid hsl(var(--stan-blue) / 0.30) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: hsl(var(--stan-stone-700)) !important;
    padding: 6px 12px 6px 13px !important;
    margin: 4px 0 !important;
}
[data-step-type="tool"] strong,
[data-step-type="run"] strong,
[data-step-type="tool"] b,
[data-step-type="run"] b {
    color: hsl(var(--stan-stone-900)) !important;
    font-weight: 700 !important;
}

/* Stap-label (Chainlit rendert het als <p id="step-...">) goed leesbaar */
[data-step-type="tool"] [id^="step-"],
[data-step-type="run"] [id^="step-"] {
    color: hsl(var(--stan-stone-700)) !important;
}

/* LOPENDE stap: kaart komt subtiel naar voren + zachte pulse. */
[data-step-type="tool"]:has(.loading-shimmer),
[data-step-type="run"]:has(.loading-shimmer) {
    background-color: hsl(var(--stan-blue-50)) !important;
    border-left-color: hsl(var(--stan-blue)) !important;
    animation: siena-step-pulse 1.8s ease-in-out infinite;
}

/* Fix de onleesbare shimmer: vaste, leesbare STAN-blauwe labeltekst.
   Staat NA de label-kleurregel hierboven, zodat blauw wint bij 'lopend'. */
[data-step-type="tool"] .loading-shimmer,
[data-step-type="run"] .loading-shimmer {
    background: none !important;
    -webkit-text-fill-color: hsl(var(--stan-blue)) !important;
    color: hsl(var(--stan-blue)) !important;
    animation: none !important;
}

/* Zachte 'ademende' glow rond de actieve stap. prefers-reduced-motion
   wordt al globaal afgevangen onderaan dit bestand. */
@keyframes siena-step-pulse {
    0%, 100% { box-shadow: 0 0 0 0 hsl(var(--stan-blue) / 0); }
    50%      { box-shadow: 0 0 0 3px hsl(var(--stan-blue) / 0.10); }
}

[data-step-type="assistant_message"] h1,
[data-step-type="assistant_message"] h2,
[data-step-type="assistant_message"] h3,
[data-step-type="assistant_message"] h4 {
    color: hsl(var(--stan-blue)) !important;
}

[data-step-type="assistant_message"] blockquote {
    background: hsl(var(--stan-blue-50)) !important;
    border-left: 3px solid hsl(var(--stan-blue)) !important;
    padding: 8px 12px !important;
    border-radius: 0 6px 6px 0 !important;
    margin: 0 0 12px !important;
    font-size: 14px !important;
    color: hsl(var(--stan-stone-900)) !important;
}
[data-step-type="assistant_message"] blockquote strong {
    color: hsl(var(--stan-blue)) !important;
}

/* Zelfde blockquote-styling gespiegeld naar de blauwe user-bubble (quote &
   vraag door -- zie enhance.js): zonder dit ziet een geciteerd Siena-fragment
   er in het verzonden gebruikersbericht kaal/onopgemaakt uit. Specificiteit
   moet hoger zijn dan ".bg-accent.rounded-3xl p { color: #fff !important }"
   hierboven (dat forceert alle tekst in de bubble wit) -- vandaar de extra
   "blockquote"/"blockquote p" in de selector i.p.v. alleen ".bg-accent". */
.bg-accent.rounded-3xl blockquote {
    background: hsl(var(--stan-blue-50)) !important;
    border-left: 3px solid hsl(var(--stan-blue)) !important;
    padding: 8px 12px !important;
    border-radius: 0 6px 6px 0 !important;
    margin: 0 0 12px !important;
    font-size: 14px !important;
}
.bg-accent.rounded-3xl blockquote,
.bg-accent.rounded-3xl blockquote p {
    color: hsl(var(--stan-stone-900)) !important;
}
.bg-accent.rounded-3xl blockquote strong {
    color: hsl(var(--stan-blue)) !important;
}

/* ============================================================
   QUOTE & VRAAG DOOR -- floating knopje bij tekstselectie in een
   Siena-antwoord (zie enhance.js: initQuoteAndFollowUp). Altijd
   in de DOM aanwezig zodra voor het eerst nodig; zichtbaarheid
   via opacity/pointer-events i.p.v. display, zodat
   getBoundingClientRect() in JS altijd een echte breedte/hoogte
   teruggeeft om 'm mee te positioneren.
   ============================================================ */
#siena-quote-btn {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    background: hsl(var(--stan-blue));
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}
#siena-quote-btn.siena-quote-btn--visible {
    opacity: 1;
    pointer-events: auto;
}
#siena-quote-btn:hover {
    background: hsl(var(--stan-blue-700));
}

/* Chipje boven de composer met de geciteerde tekst (zie enhance.js:
   ensureQuoteChip). De echte quote-tekst gaat pas in de textarea op het
   moment van versturen (interceptSend) -- deze chip is puur de zichtbare
   referentie zolang je nog typt. Volledig afgeronde kaart (i.p.v. een
   accentrand-banner), consistent met hoe een citaat-referentie in bekende
   chat-UI's oogt. */
/* #message-composer div/span (regel hierboven bij "geen eigen
   border/outline/shadow") forceert background-color:transparent op ELKE
   div/span binnen de composer -- inclusief deze chip, die ook een div is.
   #message-composer div heeft toevallig hogere specificiteit (1 ID + 1 type)
   dan een los #siena-quote-chip (1 ID), dus wint die reset ondanks
   !important op beide. Dubbel geselecteerd op #message-composer
   #siena-quote-chip (2 ID's) om dat gegarandeerd te verslaan. */
#message-composer #siena-quote-chip,
#siena-quote-chip {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: hsl(var(--stan-blue-50)) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
    color: hsl(var(--stan-stone-700)) !important;
}
#message-composer #siena-quote-chip .siena-quote-chip-text,
#siena-quote-chip .siena-quote-chip-text {
    flex: 1 1 auto !important;
    /* Cruciaal: zonder min-width:0 gebruikt een flex-item de intrinsieke
       (volledige) tekstbreedte als ondergrens, waardoor overflow/ellipsis
       niet inzet en de tekst in een krappe ouder juist volledig dichtknijpt
       i.p.v. netjes af te kappen -- dit was de daadwerkelijke oorzaak van
       "wel het kruisje, niet de tekst". */
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: hsl(var(--stan-stone-700)) !important;
}
#siena-quote-chip .siena-quote-chip-close {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: hsl(var(--stan-stone-500));
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
#siena-quote-chip .siena-quote-chip-close:hover {
    color: hsl(var(--stan-blue));
}

[data-testid="message-avatar"] img,
.message-avatar img {
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(18, 25, 38, 0.10);
}

/* ----- Avatar-maat: gelijk aan Chainlit's eigen avatars (h-8 w-8 = 32px),
   zodat de gebruiker-avatar exact zo groot is als de assistent-avatar
   en de "D" in de header. ----- */
:root {
    --siena-msg-avatar-size: 32px;
}
.siena-msg-avatar {
    width: var(--siena-msg-avatar-size);
    height: var(--siena-msg-avatar-size);
}

/* De gebruiker-avatar wordt als sibling NÁ de blauwe bubble geplaatst,
   binnen Chainlit's bestaande flex-rij. We raken die rij niet aan; de
   avatar krijgt alleen wat ruimte links en lijnt boven uit met de bubble
   (gespiegeld t.o.v. de assistent, die links zijn avatar heeft).
   Zelfde ronde vorm/grootte/kleur als Chainlit's header-avatar:
   initiaal wit op --primary (STAN-blauw). */
.siena-msg-avatar {
    flex: 0 0 auto;
    align-self: center;
    margin-left: 16px;  /* gap tot de balk -- gelijk aan gap-4 (16px) aan de assistent-kant */
    margin-right: 12px; /* ruimte tot de container-rand, zodat de avatar niet vastplakt */
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: hsl(var(--primary));
    border: 1px solid hsl(var(--border));
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
    box-shadow: 0 2px 6px rgba(18, 25, 38, 0.10);
}
.siena-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 50%;
}

/* ============================================================
   LOGIN SHELL -- volledige custom overlay over Chainlit's
   default login-DOM. Pixel-replica van de design-mock.
   ============================================================ */

/* Shell ligt opake bovenop Chainlit's default DOM.
   #root krijgt pointer-events:none zodat klikken naar de shell gaan.
   De shell zelf is interactief. */
body.siena-has-login-shell #root {
    pointer-events: none !important;
}
body.siena-has-login-shell #siena-login-shell {
    pointer-events: auto !important;
}

#siena-login-shell {
    position: fixed;
    inset: 0;
    background: hsl(var(--stan-blue));
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    z-index: 9999;
    color: #ffffff;
    font-family: 'Open Sans', Verdana, system-ui, sans-serif;
}

/* Witte wave aan de onderzijde */
#siena-login-shell .siena-login-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32%;
    background: hsl(40 33% 98%);
    clip-path: polygon(
        0% 35%,
        20% 5%,
        45% 18%,
        70% 8%,
        100% 25%,
        100% 100%,
        0% 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* ---------- Linker helft ---------- */
#siena-login-shell .siena-login-left {
    position: relative;
    z-index: 2;
    padding: 48px 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#siena-login-shell .siena-login-logo {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    height: 36px;
    width: auto;
    object-fit: contain;
    margin-bottom: 56px;
    align-self: flex-start;
    display: block;
}

#siena-login-shell .siena-login-content {
    margin: auto 0;
    max-width: 460px;
    width: 100%;
}

#siena-login-shell .siena-login-eyebrow {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

#siena-login-shell h1 {
    margin: 0 0 20px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    max-width: 460px;
    text-wrap: balance;
    letter-spacing: -0.01em;
}

#siena-login-shell p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.55;
    max-width: 420px;
    margin: 0 0 32px;
}

/* TOEGANG-kaart */
#siena-login-shell .siena-login-card {
    background: #ffffff;
    color: hsl(var(--stan-stone-900));
    padding: 24px;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 360px;
}

#siena-login-shell .siena-toegang-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: hsl(var(--stan-stone-700));
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Microsoft-knop in de kaart */
#siena-login-shell .siena-ms-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 16px;
    background: #ffffff;
    color: hsl(var(--stan-stone-900));
    border: 1px solid hsl(var(--stan-stone-300));
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms ease;
}
#siena-login-shell .siena-ms-btn:hover {
    border-color: hsl(var(--stan-blue));
    background: hsl(var(--stan-blue-50));
}
#siena-login-shell .siena-ms-btn:focus-visible {
    outline: 2px solid hsl(var(--stan-blue));
    outline-offset: 2px;
}
#siena-login-shell .siena-ms-logo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    width: 16px;
    height: 16px;
}
#siena-login-shell .siena-ms-logo i {
    display: block;
}
#siena-login-shell .siena-ms-logo i:nth-child(1) { background: #F25022; }
#siena-login-shell .siena-ms-logo i:nth-child(2) { background: #7FBA00; }
#siena-login-shell .siena-ms-logo i:nth-child(3) { background: #00A4EF; }
#siena-login-shell .siena-ms-logo i:nth-child(4) { background: #FFB900; }

/* ---------- Rechter helft ---------- */
#siena-login-shell .siena-login-right {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 60px;
}

#siena-login-shell .siena-portrait-frame {
    width: 460px;
    max-width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.30);
    position: relative;
    z-index: 2;
}
#siena-login-shell .siena-portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    filter: none;
}

#siena-login-shell .siena-name-card {
    position: absolute;
    bottom: 80px;
    right: 64px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    max-width: 220px;
    z-index: 3;
    pointer-events: none;
}
#siena-login-shell .siena-name-card .nm {
    font-weight: 800;
    color: hsl(var(--stan-blue));
    font-size: 14px;
}
#siena-login-shell .siena-name-card .role {
    color: hsl(var(--stan-stone-700));
    font-size: 12px;
    margin-top: 2px;
}

/* Responsive: vouw 2 kolommen om naar 1 kolom op kleinere schermen */
@media (max-width: 900px) {
    #siena-login-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    #siena-login-shell .siena-login-left {
        padding: 32px 24px;
    }
    #siena-login-shell .siena-login-right {
        display: none;
    }
    #siena-login-shell h1 {
        font-size: 26px;
    }
}

/* ============================================================
   Code blocks
   ============================================================ */
pre, code {
    font-family: var(--font-mono) !important;
}
pre {
    background-color: hsl(210 25% 96%) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
}
code:not(pre code) {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--stan-blue)) !important;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.92em;
}

/* ============================================================
   Watermark / Chainlit-attributie verbergen
   ============================================================ */
#watermark,
.watermark,
a[href*="chainlit.io"],
a[href*="github.com/Chainlit"] {
    display: none !important;
    visibility: hidden !important;
}

/* ============================================================
   AI-DISCLOSURE LABEL -- permanent, niet-dismissible label dat
   zichtbaar maakt dat dit een AI-bot is, geen mens (compliance-eis,
   EU AI Act art. 50/52). Element wordt geinjecteerd door enhance.js
   (#siena-ai-disclosure) in dezelfde flex-rij als Chainlit's eigen
   (hierboven verborgen) watermark, vlak onder de composer.
   BEWUST GEEN position:fixed in een hoek: die rij heeft, nu het
   watermark weg is, geen gereserveerde hoogte meer, dus een fixed
   badge zou bij een lagere/hogere composer (bv. multiline invoer,
   kleine viewport) over de composer of send-knop heen kunnen vallen.
   In-flow meeliften met align-self sluit dat structureel uit.
   Rechtsonder op desktop; linksonder op smalle/mobiele schermen
   (dezelfde rij, alleen rechts i.p.v. links uitgelijnd), zodat het
   nooit over het invoerveld/de send-knop valt.
   ============================================================ */
#siena-ai-disclosure {
    align-self: flex-end;
    margin-top: 2px;
    padding: 2px 4px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
    color: hsl(var(--stan-stone-700));
    pointer-events: none;
    white-space: nowrap;
}

@media (max-width: 640px) {
    #siena-ai-disclosure {
        align-self: flex-start;
        font-size: 10px;
    }
}

/* ============================================================
   Dark mode
   ============================================================ */
html.dark,
html.dark body,
html.dark #root,
html.dark main,
html.dark .bg-background {
    background-color: hsl(210 30% 9%) !important;
}
html.dark main,
html.dark [data-testid="main"],
html.dark .bg-background {
    background: linear-gradient(180deg, hsl(210 30% 10%) 0%, hsl(210 28% 11%) 100%) !important;
}
html.dark #siena-ai-disclosure {
    color: hsl(210 15% 78%);
}

/* ============================================================
   Toegankelijkheid -- focus-ring alleen op echt-interactieve
   elementen, niet op textareas/inputs (die hebben een eigen
   focus-state via hun composer-wrapper).
   ============================================================ */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:focus-visible:not(textarea):not(input) {
    outline: 2px solid hsl(var(--stan-blue)) !important;
    outline-offset: 2px;
    border-radius: 6px;
}
textarea:focus,
textarea:focus-visible,
input:focus,
input:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}