/* * Design system for the RAG assistant: a calm, dark-first "reading room" — * grounded answers on the left, the cited source document on the right. * Theme is a `data-theme` attribute on , flipped by the theme_controller * Stimulus controller and mirrored into localStorage. */ :root { --bg: #0e1319; --panel: #0a0e13; --line: #1d2733; --text: #d7e0e6; --muted: #71828e; --faint: #44545f; --teal: #38c0cb; --tealdim: #1a545e; --hlbg: #0c2c33; --hltext: #b9e9ee; --card: #121924; --usertext: #8fa3b0; --track: #16202a; --body-text: #bfcbd4; --danger: #e0796b; color-scheme: dark; } :root[data-theme="light"] { --bg: #f7f9fa; --panel: #eef2f4; --line: #dde4e8; --text: #2a333a; --muted: #71828e; --faint: #93a4ae; --teal: #0e8794; --tealdim: #9fd0d5; --hlbg: #d8eef0; --hltext: #0d4a51; --card: #ffffff; --usertext: #4d626f; --track: #dde4e8; --body-text: #3d4a54; --danger: #b3392a; color-scheme: light; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 13.5px/1.6 Archivo, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--teal); text-decoration: none; } a:hover { color: var(--text); } button, input, textarea { font-family: inherit; color: inherit; } ::placeholder { color: var(--faint); } .mono { font-family: "IBM Plex Mono", monospace; } /* Keep native scrolling behavior while removing the detached overlay thumbs that some browsers place on the left edge of nested scroll containers. */ .app-shell, .doc-scroll, .lib-scroll, .chat-scroll { scrollbar-width: none; -ms-overflow-style: none; } .app-shell::-webkit-scrollbar, .doc-scroll::-webkit-scrollbar, .lib-scroll::-webkit-scrollbar, .chat-scroll::-webkit-scrollbar { display: none; } @keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } /* ---------- app shell / top bar ---------- */ .app-shell { height: 100vh; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; } .topbar { display: flex; align-items: center; gap: 24px; padding: 0 20px; height: 52px; border-bottom: 1px solid var(--line); flex: none; } .topbar-brand { font: 600 13px "IBM Plex Mono", monospace; letter-spacing: .04em; color: var(--text); white-space: nowrap; } .topbar-brand .dot { color: var(--teal); } .topbar-nav { display: flex; gap: 18px; font: 500 11px "IBM Plex Mono", monospace; color: var(--muted); } .topbar-nav a { color: var(--muted); padding-bottom: 2px; border-bottom: 1px solid transparent; } .topbar-nav a:hover { color: var(--text); } .topbar-nav a.is-active { color: var(--text); border-bottom-color: var(--teal); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; } .theme-toggle { position: relative; width: 54px; height: 28px; color: var(--faint); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 1.5%); } .theme-toggle:hover { border-color: var(--muted); } .theme-toggle:focus-visible { outline: 2px solid var(--tealdim); outline-offset: 2px; } .theme-toggle-thumb { position: absolute; z-index: 1; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); box-shadow: 0 2px 6px rgb(0 0 0 / 30%); transition: transform 160ms ease; } .theme-toggle-icon { position: absolute; z-index: 2; top: 5px; width: 16px; height: 16px; pointer-events: none; transition: color 160ms ease; } .theme-toggle-icon svg { display: block; width: 16px; height: 16px; } .theme-toggle-moon { left: 5px; color: var(--bg); } .theme-toggle-sun { right: 5px; color: var(--faint); } .theme-toggle[data-theme-state="light"] .theme-toggle-thumb { transform: translateX(26px); } .theme-toggle[data-theme-state="light"] .theme-toggle-moon { color: var(--faint); } .theme-toggle[data-theme-state="light"] .theme-toggle-sun { color: #fff; } @media (prefers-reduced-motion: reduce) { .theme-toggle-thumb, .theme-toggle-icon { transition: none; } } .topbar-user { font: 400 10.5px "IBM Plex Mono", monospace; color: var(--faint); white-space: nowrap; } .topbar-user form { display: inline; margin-left: 8px; } .topbar-user button.link-button { font: 400 10.5px "IBM Plex Mono", monospace; color: var(--faint); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; } .topbar-user button.link-button:hover { color: var(--text); } .flash { font: 500 11px "IBM Plex Mono", monospace; padding: 8px 20px; border-bottom: 1px solid var(--line); } .flash-notice { color: var(--teal); } .flash-alert { color: var(--danger); } /* ---------- generic page chrome (non reading-room screens) ---------- */ .page { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 28px 24px 48px; } .page--narrow { max-width: 360px; } .page--home { max-width: 720px; padding-top: 64px; } .home-kicker { font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .14em; color: var(--teal); margin-bottom: 14px; } .home-title { font: 600 clamp(30px, 6vw, 52px)/1.05 Archivo, sans-serif; letter-spacing: -.035em; margin: 0; max-width: 12ch; } .home-lede { color: var(--body-text); font-size: 16px; line-height: 1.7; max-width: 58ch; margin: 24px 0 32px; } .home-panel { padding: 24px; } .home-panel p { color: var(--body-text); } .home-prompts { margin: 0 0 24px; } .home-prompts.list-plain li { font-family: "IBM Plex Mono", monospace; color: var(--muted); padding: 7px 0 7px 1.8em; position: relative; } .home-prompts.list-plain li::before { content: ">"; color: var(--teal); position: absolute; left: .1em; } .home-chat-action { padding-top: 12px; } .home-links { display: flex; gap: 10px; margin-top: 22px; font: 500 10.5px "IBM Plex Mono", monospace; color: var(--faint); } .page-title { font: 600 18px Archivo, sans-serif; margin: 0 0 4px; } .section-title { font: 600 14px Archivo, sans-serif; margin: 8px 0 14px; } .page-actions { margin: 14px 0 22px; } .page-sub { font: 400 12px "IBM Plex Mono", monospace; color: var(--muted); margin: 0 0 22px; } .page-crumbs { font: 500 10.5px "IBM Plex Mono", monospace; color: var(--muted); display: flex; gap: 10px; align-items: center; margin-bottom: 18px; } .page-crumbs a { color: var(--muted); } .page-crumbs a:hover { color: var(--teal); } .card { background: var(--card); border: 1px solid var(--line); border-radius: 4px; } .btn { font: 600 10.5px "IBM Plex Mono", monospace; color: var(--bg); background: var(--teal); border: 1px solid var(--teal); border-radius: 2px; padding: 8px 14px; cursor: pointer; display: inline-block; } .btn:hover { color: var(--bg); opacity: .88; } .btn-ghost { color: var(--muted); background: none; border: 1px solid var(--line); } .btn-ghost:hover { color: var(--text); border-color: var(--muted); } .btn-danger { color: var(--danger); background: none; border: 1px solid var(--line); } .btn-danger:hover { border-color: var(--danger); } .field { margin: 0 0 14px; } .field label { display: block; font: 500 10.5px "IBM Plex Mono", monospace; color: var(--muted); letter-spacing: .04em; margin-bottom: 6px; } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="file"], .field textarea { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 3px; color: var(--text); font: 400 12.5px "IBM Plex Mono", monospace; padding: 9px 11px; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--tealdim); } .field textarea { resize: vertical; } .fieldset { border: 1px solid var(--line); border-radius: 4px; padding: 14px; margin: 0 0 16px; } .fieldset legend { font: 500 10.5px "IBM Plex Mono", monospace; color: var(--muted); padding: 0 6px; } .errors { color: var(--danger); font: 400 12px "IBM Plex Mono", monospace; margin: 0 0 14px; padding-left: 18px; } .table { width: 100%; border-collapse: collapse; font: 400 12.5px Archivo, sans-serif; } .table th { text-align: left; font: 500 10px "IBM Plex Mono", monospace; color: var(--muted); letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--line); } .table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .list-plain { list-style: none; margin: 0; padding: 0; } .list-plain li { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; } .list-plain li:last-child { border-bottom: none; } .list-plain .meta { font: 400 10.5px "IBM Plex Mono", monospace; color: var(--faint); } .stat-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; } .stat-tile { min-width: 130px; padding: 12px 16px; } .stat-tile .label { font: 500 10px "IBM Plex Mono", monospace; color: var(--muted); letter-spacing: .04em; } .stat-tile .value { font: 600 20px Archivo, sans-serif; margin-top: 4px; } .result-card { padding: 12px 14px; margin-bottom: 10px; } .result-card .meta { font: 400 10.5px "IBM Plex Mono", monospace; color: var(--muted); } .result-card p { font: 400 13px/1.6 Archivo, sans-serif; color: var(--body-text); margin: 6px 0 0; } .search-intro { max-width: 68ch; margin: 8px 0 18px; color: var(--body-text); font-size: 14px; line-height: 1.65; } .search-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 760px; margin-bottom: 22px; } .search-guide > div { padding: 14px 16px; } .search-guide > div + div { border-left: 1px solid var(--line); } .search-guide strong { display: block; margin-bottom: 4px; color: var(--text); font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .04em; text-transform: uppercase; } .search-guide span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.55; } .empty-state { color: var(--muted); font: 400 13px Archivo, sans-serif; } /* ---------- reading room (conversation show) ---------- */ .rr { flex: 1; display: flex; min-height: 0; } .rr-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .rr-doc-pane { flex: 1.08; background: var(--panel); } .rr-doc-pane turbo-frame { display: flex; flex-direction: column; min-height: 0; flex: 1; } .doc-pane-content { display: flex; flex-direction: column; min-height: 0; flex: 1; } .rr-chat-pane { flex: 1; border-right: 1px solid var(--line); } /* -- doc pane: shared toolbar -- */ .doc-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 20px 10px; flex: none; } .doc-back { font: 500 10px "IBM Plex Mono", monospace; color: var(--muted); background: none; border: none; padding: 0; cursor: pointer; } .doc-back:hover { color: var(--teal); } .doc-header { font: 500 10px "IBM Plex Mono", monospace; color: var(--muted); letter-spacing: .06em; } .doc-simbar { margin: 0 20px; height: 2px; background: var(--track); flex: none; } .doc-simbar-fill { height: 2px; background: var(--teal); } .doc-scroll { flex: 1; overflow-y: auto; padding: 16px 20px 24px; min-height: 0; } .doc-para { font: 400 13.5px/1.75 Archivo, sans-serif; margin: 0 0 12px; color: var(--muted); } .doc-para--hl { background: var(--hlbg); color: var(--hltext); padding: 8px 12px; outline: 1px solid var(--tealdim); } .doc-meta-row { padding: 0 20px 14px; font: 400 10.5px "IBM Plex Mono", monospace; color: var(--faint); flex: none; } .doc-meta-row .error { color: var(--danger); display: block; margin-top: 6px; } .doc-meta-row .doc-delete { margin-top: 10px; } /* -- doc pane: library -- */ .lib-header { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 20px 10px; flex: none; } .lib-header .lib-title { font: 500 10px "IBM Plex Mono", monospace; color: var(--muted); letter-spacing: .1em; } .lib-header .lib-upload { font: 500 10px "IBM Plex Mono", monospace; color: var(--teal); cursor: pointer; } .lib-header .lib-upload:hover { color: var(--text); } .lib-scroll { flex: 1; overflow-y: auto; padding: 4px 20px 24px; display: flex; flex-direction: column; gap: 8px; min-height: 0; } .lib-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 3px; padding: 11px 14px; cursor: pointer; background: var(--card); } .lib-row:hover { border-color: var(--tealdim); } .lib-row--processing { opacity: .55; cursor: default; } .lib-row--processing:hover { border-color: var(--line); } .lib-row-title { font: 500 12.5px Archivo, sans-serif; color: var(--text); flex: 1; } .lib-row-type { font: 400 10px "IBM Plex Mono", monospace; color: var(--faint); width: 34px; } .lib-row-status { font: 500 10px "IBM Plex Mono", monospace; width: 76px; } .lib-row-status--ready { color: var(--teal); } .lib-row-status--other { color: var(--muted); } .lib-row-chunks { font: 400 10px "IBM Plex Mono", monospace; color: var(--faint); width: 70px; text-align: right; } /* ---------- chat pane ---------- */ .chat-scroll { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; min-height: 0; } .msg { display: flex; flex-direction: column; } .msg-user { align-self: flex-end; max-width: 85%; font: 500 12px/1.6 "IBM Plex Mono", monospace; color: var(--usertext); border: 1px solid var(--line); border-radius: 3px; padding: 8px 12px; background: var(--card); } .msg-user--pending { display: flex; align-items: center; gap: 10px; border-color: var(--tealdim); } .msg-pending-status { color: var(--teal); font: 500 8.5px "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; animation: pulse 1.2s infinite; } .msg-assistant { display: flex; flex-direction: column; gap: 8px; max-width: min(94%, 70ch); } .msg-body { font: 400 13.5px/1.75 Archivo, sans-serif; color: var(--body-text); } .msg-body > :first-child { margin-top: 0; } .msg-body > :last-child { margin-bottom: 0; } .msg-body p { margin: 0 0 .9em; } .msg-body strong { color: var(--text); font-weight: 600; } .msg-body em { color: var(--text); } .msg-body ol, .msg-body ul { margin: .3em 0 1em; padding-left: 1.45em; } .msg-body li { padding-left: .2em; } .msg-body li + li { margin-top: .55em; } .msg-body li > p { margin-bottom: .45em; } .msg-body h2, .msg-body h3, .msg-body h4 { color: var(--text); font: 600 13.5px/1.5 Archivo, sans-serif; margin: 1.1em 0 .45em; } .msg-body blockquote { margin: .8em 0; padding-left: 12px; border-left: 2px solid var(--tealdim); color: var(--muted); } .msg-body code { font: 400 .9em "IBM Plex Mono", monospace; color: var(--hltext); background: var(--hlbg); padding: 1px 4px; border-radius: 2px; } .msg-body pre { overflow-x: auto; margin: .8em 0 1em; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); } .msg-body pre code { padding: 0; background: none; } .msg-sources { display: flex; align-items: center; gap: 5px; margin-top: 10px; } .msg-sources-label { margin-right: 3px; font: 500 9px "IBM Plex Mono", monospace; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; } .msg-typing { font: 500 12px "IBM Plex Mono", monospace; color: var(--teal); } .msg-typing span { animation: pulse 1.2s infinite; } .msg-typing span:nth-child(2) { animation-delay: .2s; } .msg-typing span:nth-child(3) { animation-delay: .4s; } .cite-chip { font: 600 9.5px "IBM Plex Mono", monospace; border-radius: 2px; padding: 1px 5px; cursor: pointer; vertical-align: 2px; margin: 0 1px; background: var(--hlbg); color: var(--teal); border: 1px solid var(--tealdim); } .cite-chip:hover { color: var(--teal); border-color: var(--teal); } .cite-chip.is-active { background: var(--teal); color: var(--bg); border-color: var(--teal); } .cite-chip.is-active:hover { color: var(--bg); } .msg-trace { font: 400 10px "IBM Plex Mono", monospace; color: var(--faint); } /* -- composer -- */ .composer-wrap { flex: none; padding: 14px 22px 18px; border-top: 1px solid var(--line); } .composer { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); padding: 2px 4px 2px 12px; } .composer:focus-within { border-color: var(--tealdim); } .composer-prompt { font: 500 12px "IBM Plex Mono", monospace; color: var(--teal); } .composer input[type="text"] { flex: 1; min-width: 0; background: none; border: none; outline: none; font: 400 12.5px "IBM Plex Mono", monospace; color: var(--text); padding: 11px 0; } .composer-send { font: 600 10.5px "IBM Plex Mono", monospace; color: var(--bg); background: var(--teal); border: 1px solid var(--teal); border-radius: 3px; min-width: 86px; padding: 9px 16px; cursor: pointer; margin: 4px; box-shadow: 0 1px 0 rgb(255 255 255 / 16%) inset, 0 1px 3px rgb(0 0 0 / 22%); transition: background-color 120ms ease, color 120ms ease, transform 120ms ease, opacity 120ms ease; } .composer-send:hover:not(:disabled) { opacity: .88; } .composer-send:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 2px rgb(0 0 0 / 18%) inset; } .composer-send:focus-visible { outline: 2px solid var(--tealdim); outline-offset: 2px; } .composer-send:disabled { cursor: wait; opacity: .72; } .composer-send.is-sending { color: var(--teal); background: var(--hlbg); border-color: var(--tealdim); box-shadow: none; } .composer-hint { font: 400 9.5px "IBM Plex Mono", monospace; color: var(--faint); margin-top: 7px; } /* ---------- narrow screens: stack the reading room ---------- */ @media (max-width: 900px) { .rr { flex-direction: column; } .rr-chat-pane { flex: 1; min-height: 0; border-right: none; border-bottom: 1px solid var(--line); } .rr-doc-pane { flex: none; max-height: 42vh; } .search-guide { grid-template-columns: 1fr; } .search-guide > div + div { border-left: none; border-top: 1px solid var(--line); } }