/* ============================================================================ ChatCSI — College of Staten Island assistant ---------------------------------------------------------------------------- Everything here is namespaced under .chatcsi so it cannot leak into the rest of the admin panel. Layout and components are Tailwind + DaisyUI; this file holds only what utility classes cannot express: * the self-hosted webfaces * the brand tokens * markdown prose, which arrives as a MarkupString and so can never carry utility classes * the waterline, the one piece of motion in the product ========================================================================= */ /* ── Typefaces ─────────────────────────────────────────────────────────────── Self-hosted: campus networks may block third-party font CDNs. Every stack falls back to Arial, which is the College's own published brand face, so a blocked or missing file degrades to the right thing rather than to Times. */ @font-face { font-family: 'Archivo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url('../fonts/archivo-latin-standard-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Public Sans Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/public-sans-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Public Sans Variable'; font-style: italic; font-display: swap; font-weight: 100 900; src: url('../fonts/public-sans-latin-wght-italic.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Brand tokens ────────────────────────────────────────────────────────── */ /* Two selectors, not one: the citation popover is appended to rather than into the transcript (chatcsi.js explains why), so it sits outside .chatcsi. A var() that resolves to nothing is invalid at computed-value time, so `background` fell back to transparent and the host line to inherited ink — a popover that was not there. Everything else that uses these tokens lives inside .chatcsi. */ .chatcsi, .chatcsi-cite-popover { /* Pantone 292 C and 431 C are the College's two mandated colours. The navies are darkened from 292's own hue so the whole surface stays one family, and the canvas is that same hue desaturated almost to white. */ --csi-harbor-950: #06202f; --csi-harbor-900: #0b2a3d; --csi-harbor-800: #17384c; --csi-harbor-700: #24485e; --csi-sky: #79bde8; --csi-sky-soft: #d3e8f7; /* Pantone 431 C. The previous #6a737b was a third-party approximation and measured 4.41:1 on the fog canvas — under AA for body text, and this token carries the empty-state subtitle, the disclaimer and the reasoning summary. #5b6770 is the real 431 C and measures 5.38:1. */ --csi-dolphin: #5b6770; --csi-fog: #f2f5f7; --csi-ink: #10212b; /* Secondary ink for prose asides (blockquote, reasoning body). One value, not the three near-identical greys these had drifted into. */ --csi-ink-2: #3c4a54; --csi-line: #dde5ea; --csi-display: 'Archivo Variable', Arial, Helvetica, sans-serif; --csi-body: 'Public Sans Variable', Arial, Helvetica, sans-serif; --csi-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-family: var(--csi-body); color: var(--csi-ink); } /* The wordmark and the empty-state headline — the only display type in the product. Set expanded and heavy: the register is terminal signage, not editorial. */ .chatcsi-display { font-family: var(--csi-display); font-stretch: 118%; font-weight: 700; letter-spacing: -0.015em; } .chatcsi-rail { background: var(--csi-harbor-950); color: #cfe0ea; } .chatcsi-rail-item:hover { background: var(--csi-harbor-800); } .chatcsi-rail-item.is-active { background: var(--csi-harbor-700); color: #fff; box-shadow: inset 2px 0 0 var(--csi-sky); } .chatcsi-header { background: var(--csi-harbor-900); color: #eaf4fb; } .chatcsi-canvas { background: var(--csi-fog); } /* ── The waterline ─────────────────────────────────────────────────────────── The rule under the header. Flat when idle; a swell travels along it while the model is generating. It is both the brand mark and the only generation indicator, which is why it is the one place motion is spent. */ .chatcsi-waterline { position: relative; height: 3px; overflow: hidden; flex: none; /* Was a 2px #d3e8f7 hairline, which measured 1.15:1 against the canvas below it — the signature element was invisible in every screenshot. Sky at real strength, falling off downward so it reads as a waterline rather than a border. */ background: linear-gradient(180deg, rgb(121 189 232 / 65%), rgb(121 189 232 / 22%)); } .chatcsi-waterline::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); /* The old #ffffff mid-stop was a blown pixel at 2px rather than a glint. */ background: linear-gradient(90deg, transparent 0%, var(--csi-sky) 40%, #eaf6ff 50%, var(--csi-sky) 60%, transparent 100%); } /* 2.1s across a ~2000px viewport read as a flicker, not a swell. */ .chatcsi-waterline.is-live::after { animation: chatcsi-swell 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite; } @keyframes chatcsi-swell { to { transform: translateX(100%); } } /* ── Streaming caret ─────────────────────────────────────────────────────── */ .chatcsi-caret { display: inline-block; width: 0.45em; height: 1em; margin-left: 0.1em; vertical-align: text-bottom; background: var(--csi-sky); animation: chatcsi-blink 1s steps(2) infinite; } @keyframes chatcsi-blink { 50% { opacity: 0; } } /* Clipped rather than display:none, so the element keeps its accessible name and stays keyboard-focusable. Tailwind's .sr-only isn't in the compiled output — nothing else uses it. */ .chatcsi-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* The Attach control's input is visually hidden, so its focus ring has to come from the label. */ .chatcsi-composer label:focus-within { outline: 2px solid var(--csi-harbor-900); outline-offset: 2px; box-shadow: 0 0 0 4px rgb(121 189 232 / 55%); } /* ── Message column ──────────────────────────────────────────────────────── */ /* Replaces the old "CSI" avatar. The avatar indented every answer 44px off the column grid and was illegible at 9.6px; this marks the same boundary, keeps the prose flush, and doubles as the generation indicator — the swell runs on the answer being written rather than up in the header. */ .chatcsi-turn-rule { position: relative; height: 2px; width: 4.5rem; margin-bottom: 1.1rem; overflow: hidden; border-radius: 999px; background: var(--csi-sky); } .chatcsi-turn-rule.is-live { width: 100%; } .chatcsi-turn-rule.is-live::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent 0%, #eaf6ff 50%, transparent 100%); animation: chatcsi-swell 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite; } /* A real third surface. White-on-fog was a 1.06:1 step held together only by a hairline, so the boundary between a question and its answer — the thing a transcript exists to show — barely registered. Tinted from the navy so it stays in the family. */ .chatcsi-user-bubble { background: rgb(11 42 61 / 6%); border: 0; border-radius: 1.15rem 1.15rem 0.4rem 1.15rem; box-shadow: none; } /* The user's own turn renders through the same markdown pipeline as the answers, but inside an 80% pill rather than the full column — so the measure cap, the display type scale and the outer block margins all have to come back off. */ .chatcsi-user-prose { font-size: 1rem; } .chatcsi-user-prose > * { max-width: none; } .chatcsi-user-prose :is(h1, h2, h3, h4) { font-family: inherit; font-size: 1.05em; font-weight: 700; letter-spacing: 0; margin: 0.8em 0 0.3em; } .chatcsi-user-prose > :first-child { margin-top: 0; } .chatcsi-user-prose > :last-child { margin-bottom: 0; } .chatcsi-user-prose p { margin: 0.6em 0; } .chatcsi-mark { background: var(--csi-harbor-900); color: var(--csi-sky); font-family: var(--csi-display); font-stretch: 118%; font-weight: 700; } .chatcsi-composer { background: #fff; border: 1px solid var(--csi-line); border-radius: 1.25rem; /* Cast upward, toward the transcript the composer overlaps — a downward shadow threw it off the bottom of the viewport where nothing could receive it. */ box-shadow: 0 -1px 20px -8px rgb(6 32 47 / 16%), 0 1px 2px rgb(6 32 47 / 8%); transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* The textarea grows with its content; the page never shows two scrollbars. */ .chatcsi-input { resize: none; outline: none; border: 0; background: transparent; font-family: inherit; font-size: 1rem; line-height: 1.5; /* Viewport-relative so the composer can't outgrow a short or 200%-zoomed window. */ max-height: min(14rem, 30vh); } .chatcsi-input::placeholder { color: #5c6670; opacity: 1; } .chatcsi-input:focus { outline: none; box-shadow: none; } /* ── Keyboard focus ──────────────────────────────────────────────────────── */ /* Sky alone measures 1.87:1 on the fog canvas and 2.05:1 on white — below the 3:1 minimum for a focus indicator on the entire light half of the app. A navy ring carries the contrast (13.6:1 on fog) and a sky halo keeps it on-brand and visible against dark surfaces too. No border-radius here: it used to override .rounded-full and visibly square off the send button. */ .chatcsi :focus-visible { outline: 2px solid var(--csi-harbor-900); outline-offset: 2px; box-shadow: 0 0 0 4px rgb(121 189 232 / 55%); } /* On the navy rail and header the relationship inverts: sky is the high-contrast half. */ .chatcsi-rail :focus-visible, .chatcsi-header :focus-visible { outline-color: var(--csi-sky); box-shadow: 0 0 0 4px rgb(6 32 47 / 65%); } /* The composer already signals focus on its container; a second ring on the textarea inside it drew a rounded rectangle floating within the rounded rectangle. */ .chatcsi-input:focus-visible { outline: none; box-shadow: none; } .chatcsi-composer:focus-within { border-color: var(--csi-sky); box-shadow: 0 0 0 3px rgb(121 189 232 / 22%), 0 -1px 20px -8px rgb(6 32 47 / 16%); } /* ── Markdown prose ────────────────────────────────────────────────────────── Assistant output is rendered to HTML and injected as a MarkupString, so it cannot carry utility classes and has to be styled by element. The class name .csi-markdown is also the hook the syntax-highlighting script queries — keep it in step if it is ever renamed. */ .csi-markdown { font-size: 1.0625rem; line-height: 1.62; } /* Cap the measure on text blocks only — not the container — so code blocks and tables keep the full column width while prose stays inside a comfortable line length. The column was running to ~82 characters, past the point where the eye reliably finds the next line. */ .csi-markdown > p, .csi-markdown > ul, .csi-markdown > ol, .csi-markdown > blockquote, .csi-markdown > h1, .csi-markdown > h2, .csi-markdown > h3, .csi-markdown > h4 { max-width: 68ch; } .csi-markdown > :first-child { margin-top: 0; } .csi-markdown > :last-child { margin-bottom: 0; } /* Em-based so the rhythm rescales with the type size. The old fixed values put less space between paragraphs (10.4px) than within them (26.4px line box), which erased block boundaries. */ .csi-markdown p { margin: 1em 0; } .csi-markdown strong { font-weight: 700; } .csi-markdown em { font-style: italic; } .csi-markdown a { color: #1b6ea8; text-decoration: underline; text-underline-offset: 2px; } .csi-markdown a:hover { color: #14547f; } .csi-markdown ul, .csi-markdown ol { margin: 1.15em 0; padding-left: 1.35rem; } .csi-markdown ul { list-style: disc; } .csi-markdown ol { list-style: decimal; } .csi-markdown li { margin: 0.4em 0; } .csi-markdown li > p { margin: 0.3em 0; } /* Archivo was rendering here at its default 100% width while the wordmark uses 118%, so the same face read as two different ones and headings were indistinguishable from bold body text. */ .csi-markdown h1, .csi-markdown h2, .csi-markdown h3, .csi-markdown h4 { font-family: var(--csi-display); font-stretch: 112%; font-weight: 700; margin: 2.1em 0 0.4em; line-height: 1.25; letter-spacing: -0.004em; } /* A heading owns the block beneath it; no double gap. */ .csi-markdown :is(h1, h2, h3, h4) + * { margin-top: 0; } .csi-markdown h1 { font-size: 1.5rem; } .csi-markdown h2 { font-size: 1.28rem; } .csi-markdown h3 { font-size: 1.1rem; } .csi-markdown h4 { font-size: 1rem; } .csi-markdown blockquote { border-left: 3px solid var(--csi-sky); padding: 0.1rem 0.9rem; margin: 1.4em 0; color: var(--csi-ink-2); } .csi-markdown hr { border-color: var(--csi-line); margin: 1rem 0; } .csi-markdown code { font-family: var(--csi-mono); font-size: 0.85em; background: rgb(106 115 123 / 14%); padding: 0.1em 0.35em; border-radius: 0.25rem; } /* display:table, not block: block removes the table role from the accessibility tree, so row and column navigation disappears. Horizontal scrolling moves to a wrapper the post-render pass adds. */ .csi-markdown table { display: table; width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.92em; } .csi-markdown th, .csi-markdown td { border: 0; border-bottom: 1px solid var(--csi-line); padding: 0.5rem 0.7rem; text-align: left; } /* The header band used to be var(--csi-fog) — the exact colour of the surface behind it, so it wasn't a band at all. A rule reads as structure without adding a fill. */ .csi-markdown th { background: transparent; border-bottom: 2px solid var(--csi-harbor-900); font-size: 0.78em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--csi-dolphin); } .csi-markdown tr:last-child td { border-bottom: 0; } .csi-table-scroll { overflow-x: auto; margin: 1.4em 0; } .csi-table-scroll > table { margin: 0; } /* ── Code blocks ───────────────────────────────────────────────────────────── Deliberately dark against the light canvas, and hard-coded rather than theme-derived so the colours hold whichever DaisyUI theme is active. */ .csi-markdown pre { position: relative; background: var(--csi-harbor-950); color: #e6e8ec; padding: 1.6rem 0.9rem 0.75rem; border-radius: 0.6rem; margin: 0.75rem 0; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; border: 1px solid rgb(121 189 232 / 18%); } .csi-markdown pre code, .csi-markdown pre code.hljs { background: transparent !important; padding: 0 !important; border-radius: 0 !important; color: inherit !important; font-size: inherit !important; } /* Language pill (left) and copy button (right), both drawn by the post-render script. */ .csi-markdown pre::before { content: attr(data-lang); position: absolute; top: 0.4rem; left: 0.75rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--csi-sky); opacity: 0.7; font-family: var(--csi-mono); pointer-events: none; } .csi-copy-btn { position: absolute; top: 0.3rem; right: 0.45rem; background: rgb(121 189 232 / 10%); color: #cfe0ea; border: 1px solid rgb(121 189 232 / 22%); border-radius: 0.3rem; padding: 0.18rem 0.5rem; font-size: 0.7rem; line-height: 1; cursor: pointer; opacity: 0.5; transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .csi-markdown pre:hover .csi-copy-btn { opacity: 1; } .csi-copy-btn:hover { background: rgb(121 189 232 / 22%); color: #fff; } .csi-copy-btn:focus-visible { outline: 2px solid var(--csi-sky); outline-offset: 1px; opacity: 1; } .csi-copy-btn.csi-copied { color: #8fd6a8; opacity: 1; background: rgb(143 214 168 / 14%); border-color: rgb(143 214 168 / 35%); } /* Self-contained syntax palette. highlight.js tags the spans; supplying our own colours means code stays readable even when its theme stylesheet never loads. */ .csi-markdown .hljs-comment, .csi-markdown .hljs-quote { color: #7d8fa0; font-style: italic; } .csi-markdown .hljs-keyword, .csi-markdown .hljs-selector-tag { color: #d3a0ec; } .csi-markdown .hljs-built_in, .csi-markdown .hljs-type, .csi-markdown .hljs-class .hljs-title { color: #6fd3d8; } .csi-markdown .hljs-string, .csi-markdown .hljs-attr, .csi-markdown .hljs-symbol, .csi-markdown .hljs-bullet { color: #a5d6a7; } .csi-markdown .hljs-number, .csi-markdown .hljs-literal { color: #f0b26b; } .csi-markdown .hljs-title, .csi-markdown .hljs-section, .csi-markdown .hljs-name { color: var(--csi-sky); } .csi-markdown .hljs-variable, .csi-markdown .hljs-template-variable { color: #f2969b; } .csi-markdown .hljs-meta, .csi-markdown .hljs-meta .hljs-keyword { color: #f0b26b; } .csi-markdown .hljs-deletion { color: #f2969b; } .csi-markdown .hljs-addition { color: #a5d6a7; } .csi-markdown .hljs-emphasis { font-style: italic; } .csi-markdown .hljs-strong { font-weight: 700; } .csi-markdown .hljs-tag, .csi-markdown .hljs-regexp, .csi-markdown .hljs-link { color: #6fd3d8; } .csi-markdown .hljs-attribute { color: #f0b26b; } .csi-markdown .hljs-params { color: #e6e8ec; } /* ── Reasoning disclosure ────────────────────────────────────────────────── */ .chatcsi-thinking { border-left: 2px solid var(--csi-sky-soft); color: #47555f; font-size: 0.9rem; } .chatcsi-thinking summary { cursor: pointer; color: var(--csi-dolphin); font-size: 0.8rem; letter-spacing: 0.02em; list-style: none; } .chatcsi-thinking summary::-webkit-details-marker { display: none; } /* The markup carries transition-transform but no rule ever rotated it, so the chevron pointed the same way open or closed — the only state indicator the disclosure has. */ .chatcsi-thinking summary i { transition: transform 0.15s ease; } .chatcsi-thinking[open] > summary i { transform: rotate(90deg); } /* Collapsed, the border left a ~20px sky stub floating beside the summary and pushed it out of alignment with the prose below. */ .chatcsi-thinking:not([open]) { border-left-color: transparent; padding-left: 0; } .chatcsi-thinking > div { color: var(--csi-ink-2); } /* ── Composer toolbar ────────────────────────────────────────────────────── */ /* Attach, Think longer, Search the web and Send need 346px between them, and a 375px phone leaves the row 319px. Below that the labels fold away and the icons carry it, the way every chat composer does on a phone. Each control has its own aria-label, so nothing is lost to a screen reader. A media query rather than a Tailwind variant: this project's `screens` config mixes units, which makes Tailwind refuse to generate arbitrary max-* variants at all. */ @media (max-width: 26rem) { .chatcsi-tool-label { display: none; } } /* ── Citations ───────────────────────────────────────────────────────────── */ /* A small pill rather than a bracketed number: it reads as a reference at a glance, and it gives a one-digit link a hit target big enough to actually click. Sky-tinted so it belongs to the brand without competing with the prose it sits inside. */ .csi-cite { display: inline-block; min-width: 1.25em; margin: 0 0.12em; padding: 0 0.32em; border-radius: 0.4em; background: var(--csi-sky-soft); color: var(--csi-harbor-900); font-size: 0.78em; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: 0.12em; transition: background 0.12s ease, color 0.12s ease; } .csi-cite:hover, .csi-cite:focus-visible { background: var(--csi-harbor-900); color: var(--csi-sky); text-decoration: none; } /* Lives on , not in the transcript: the transcript scrolls and clips, and a tooltip that disappears at the edge of its own scroll container is worse than no tooltip. Positioned by chatcsi.js, which also flips it below the citation when there is no room above. */ .chatcsi-cite-popover { position: fixed; z-index: 60; max-width: min(22rem, calc(100vw - 2rem)); padding: 0.5rem 0.65rem; border-radius: 0.6rem; background: var(--csi-harbor-900); color: #fff; font-size: 0.8rem; line-height: 1.4; box-shadow: 0 8px 24px rgb(6 32 47 / 28%); opacity: 0; pointer-events: none; transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease; } .chatcsi-cite-popover.is-open { opacity: 1; transform: translateY(0); } .chatcsi-cite-title { display: block; overflow-wrap: anywhere; } .chatcsi-cite-host { display: block; margin-top: 0.2rem; color: var(--csi-sky); font-size: 0.72rem; } @media (prefers-reduced-motion: reduce) { .chatcsi-cite-popover { transition: none; transform: none; } } /* ── Web sources ─────────────────────────────────────────────────────────── */ /* Sits under the user's own turn, right-aligned with it, and stays quiet: it is provenance for the answer below, not part of the conversation. */ .chatcsi-sources { color: var(--csi-dolphin); text-align: left; } .chatcsi-sources summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 0.5rem; } .chatcsi-sources summary::-webkit-details-marker { display: none; } .chatcsi-sources summary:hover { background: var(--csi-sky-soft); color: var(--csi-harbor-900); } .chatcsi-sources a { color: var(--csi-ink-2); } /* Long URLs and long titles both overflow the 80% column otherwise. */ .chatcsi-sources li span { overflow-wrap: anywhere; } /* ── Empty-state openers ────────────────────────────────────────────────── Left-aligned rows of equal width, not centred pills: a real question runs to sixty characters, and centring three of them at three different widths turns the middle of the page into a ragged staircase. Quiet by default — they are an offer, and the composer below is still the thing to look at. */ .chatcsi-suggestion { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.7rem 0.9rem; text-align: left; background: #fff; border: 1px solid var(--csi-line); border-radius: 0.85rem; color: var(--csi-ink-2); font-size: 0.9375rem; line-height: 1.4; transition: border-color 0.15s ease, color 0.15s ease; } .chatcsi-suggestion:hover { border-color: var(--csi-sky); color: var(--csi-ink); } /* Sky measures 2.05:1 on white, well under the 3:1 a meaningful graphic needs. Both icons are decorative and aria-hidden: the topic icon repeats what the question already says, and the arrow repeats what a button already does. Nothing here is the only carrier of anything. */ .chatcsi-suggestion-icon { flex: none; width: 1rem; text-align: center; color: var(--csi-sky); } .chatcsi-suggestion-go { flex: none; margin-left: auto; font-size: 0.75rem; color: var(--csi-dolphin); opacity: 0.4; transition: opacity 0.15s ease; } .chatcsi-suggestion:hover .chatcsi-suggestion-go { opacity: 1; } /* ── Scrollbars ──────────────────────────────────────────────────────────── */ .csi-markdown pre, .csi-table-scroll { scrollbar-width: thin; scrollbar-color: rgb(121 189 232 / 35%) transparent; } .csi-markdown pre::-webkit-scrollbar, .csi-table-scroll::-webkit-scrollbar { height: 8px; } .csi-markdown pre::-webkit-scrollbar-thumb, .csi-table-scroll::-webkit-scrollbar-thumb { background: rgb(121 189 232 / 30%); border-radius: 999px; } .chatcsi-scroll { scrollbar-width: thin; scrollbar-color: var(--csi-line) transparent; } .chatcsi-scroll::-webkit-scrollbar { width: 10px; } .chatcsi-scroll::-webkit-scrollbar-thumb { background: var(--csi-line); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; } .chatcsi-rail.chatcsi-scroll { scrollbar-color: var(--csi-harbor-700) transparent; } .chatcsi-rail.chatcsi-scroll::-webkit-scrollbar-thumb { background: var(--csi-harbor-700); background-clip: content-box; } /* ── Reduced motion ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .chatcsi-waterline.is-live::after { animation: none; transform: none; opacity: 0.55; } .chatcsi-caret { animation: none; } /* DaisyUI builds its spinner from a mask-image SVG whose keyframes live inside the SVG, so a page-level media query can't reach them — replace the mask rather than stopping it. */ .chatcsi .loading { animation: none; mask-image: none; -webkit-mask-image: none; background: currentColor; border-radius: 999px; opacity: 0.5; } .chatcsi-rail { transition: none; } .chatcsi-turn-rule.is-live::after { animation: none; transform: none; opacity: 0.55; } }