/* ============================================================================
DoxAI — Dark theme with red accent.
Award-winning means: restraint, hierarchy, motion that respects intent,
contrast that reads at a glance, focus rings that never disappear.
============================================================================ */
:root,
[data-theme="dark"] {
/* Surfaces: layered blacks, never pure #000 (kills contrast on OLED). */
--surface-0: #0a0a0c;
--surface-1: #111116;
--surface-2: #16161d;
--surface-3: #1c1c25;
--surface-4: #25252f;
--hairline: #2a2a35;
/* Type. Inter or system; we let the OS pick its best UI font. */
--text-primary: #f3f3f5;
--text-secondary: #a8a8b3;
--text-tertiary: #6b6b78;
--text-disabled: #4a4a55;
/* Accent — a red that's saturated but not screaming. */
--accent-50: #fff1f2;
--accent-200: #fecdd3;
--accent-400: #fb7185;
--accent-500: #ef4444; /* primary */
--accent-600: #dc2626; /* hover */
--accent-700: #b91c1c; /* active */
--accent-rgb: 239, 68, 68; /* used for theme-aware rgba(...) */
--accent-glow: rgba(var(--accent-rgb), .35);
--success: #22c55e;
--success-rgb: 34, 197, 94;
--warning: #f59e0b;
--warning-rgb: 245, 158, 11;
--danger: #ef4444;
--danger-rgb: 239, 68, 68;
/* Tinted accent overlays — used by hover states and bubble bgs. */
--accent-tint-04: rgba(var(--accent-rgb), .04);
--accent-tint-06: rgba(var(--accent-rgb), .06);
--accent-tint-12: rgba(var(--accent-rgb), .12);
--accent-tint-16: rgba(var(--accent-rgb), .16);
--accent-tint-32: rgba(var(--accent-rgb), .32);
--body-bg: var(--surface-0);
--body-pattern: none;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 22px;
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow-md: 0 6px 18px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
--shadow-lg: 0 18px 48px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
--shadow-accent: 0 0 0 3px var(--accent-glow);
--ease-out: cubic-bezier(.2,.8,.2,1);
--ease-in-out: cubic-bezier(.65,.05,.36,1);
--sidebar-w: 272px;
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}
/* =========================================================================
LIGHT THEME — toggled via .
The accent shifts from red to blue and the surfaces invert. Body picks up
a soft dot-grid pattern in the accent color so the page still has texture
instead of feeling like a blank canvas.
========================================================================= */
[data-theme="light"] {
--surface-0: #ffffff;
--surface-1: #fbfcfe;
--surface-2: #f4f6fa;
--surface-3: #eaeef4;
--surface-4: #dde3ec;
--hairline: #e2e8f0;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-tertiary: #94a3b8;
--text-disabled: #cbd5e1;
/* Blue accent — saturated, professional, distinct from typical link blue. */
--accent-50: #eff6ff;
--accent-200: #bfdbfe;
--accent-400: #60a5fa;
--accent-500: #3b82f6;
--accent-600: #2563eb;
--accent-700: #1d4ed8;
--accent-rgb: 59, 130, 246;
--accent-glow: rgba(var(--accent-rgb), .25);
--success: #16a34a;
--success-rgb: 22, 163, 74;
--warning: #d97706;
--warning-rgb: 217, 119, 6;
--danger: #dc2626;
--danger-rgb: 220, 38, 38;
/* Lighter shadows on light surfaces so cards lift without bruising. */
--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
--shadow-md: 0 6px 18px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
--shadow-lg: 0 18px 48px rgba(15, 23, 42, .14), 0 4px 12px rgba(15, 23, 42, .06);
/* Soft blue dot grid behind the whole app — every 24px, tiny and quiet. */
--body-bg: #f7f9fc;
--body-pattern:
radial-gradient(circle at 1px 1px, rgba(var(--accent-rgb), .12) 1px, transparent 1.5px);
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
height: 100%;
/* var(--body-pattern) sits ON TOP of var(--body-bg). On dark theme the
pattern is `none` so only the solid color shows; on light theme the
layered radial-gradient paints the dot grid. background-attachment
fixed keeps the pattern stable while the page scrolls. */
background: var(--body-pattern), var(--body-bg);
background-size: 24px 24px, auto;
background-attachment: fixed;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 14.5px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
a { color: var(--accent-400); text-decoration: none; }
a:hover {
color: var(--accent-500);
text-decoration: none;
cursor: pointer;
}
.shadow-hover:hover {
-webkit-box-shadow: 5px 5px 44px 5px rgba(0,0,0,0.26);
box-shadow: 5px 5px 44px 5px rgba(0,0,0,0.26);
}
h1, h2, h3, h4 { color: var(--text-primary); margin: 0 0 .6em; letter-spacing: -0.01em; font-weight: 600; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
::selection { background: var(--accent-500); color: white; }
/* --- Focus ring -------------------------------------------------------- */
:focus-visible {
outline: none;
box-shadow: var(--shadow-accent);
border-color: var(--accent-500) !important;
}
/* --- App shell --------------------------------------------------------- */
.app-shell {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
min-height: 100vh;
}
/* The mobile top bar is hidden on desktop. */
.topbar { display: none; }
.drawer-overlay { display: none; }
.sidebar {
background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%);
border-right: 1px solid var(--hairline);
display: flex;
flex-direction: column;
padding: 22px 14px 18px;
position: sticky; top: 0; height: 100vh;
z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 22px; }
.brand-mark {
width: 28px; height: 28px; border-radius: 8px;
background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
box-shadow: 0 4px 12px rgba(var(--accent-rgb), .4);
position: relative;
}
.brand-mark::after {
content: ""; position: absolute; inset: 5px;
background: var(--surface-0); border-radius: 4px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.brand-tagline { color: var(--text-tertiary); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
/* Workspace switcher */
.ws-switcher { position: relative; margin: 4px 0 18px; }
.ws-switcher-button {
width: 100%; display: flex; justify-content: space-between; align-items: center;
background: var(--surface-2); border: 1px solid var(--hairline);
border-radius: var(--radius-md); padding: 10px 12px;
color: var(--text-primary); cursor: pointer; transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
text-align: left;
}
.ws-switcher-button:hover { border-color: var(--accent-500); background: var(--surface-3); }
.ws-label { display: block; font-size: .67rem; color: var(--text-tertiary); letter-spacing: .08em; text-transform: uppercase; }
.ws-name { display: block; font-weight: 600; }
.ws-caret { color: var(--text-secondary); }
.ws-menu {
position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10;
background: var(--surface-2); border: 1px solid var(--hairline);
border-radius: var(--radius-md); padding: 6px; box-shadow: var(--shadow-md);
max-height: 320px; overflow-y: auto;
}
.ws-menu-item {
display: block; width: 100%; text-align: left;
background: transparent; border: 0; color: var(--text-primary);
padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
transition: background .12s var(--ease-out);
}
.ws-menu-item:hover { background: var(--surface-3); }
.ws-menu-item.active { background: var(--accent-tint-12); color: var(--accent-400); }
.ws-menu-name { display: block; font-weight: 500; }
.ws-menu-meta { display: block; font-size: .72rem; color: var(--text-tertiary); }
.ws-menu-divider { height: 1px; background: var(--hairline); margin: 4px 0; }
/* Nav */
.nav-section { margin: 18px 8px 6px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
display: flex; align-items: center; gap: 10px;
color: var(--text-secondary); padding: 9px 12px;
border-radius: var(--radius-md); transition: background .14s var(--ease-out), color .14s var(--ease-out);
font-weight: 500; position: relative;
}
.nav-item:hover { background: var(--surface-2); color: var(--text-primary); text-decoration: none; }
.nav-item.active {
background: linear-gradient(90deg, var(--accent-tint-16), rgba(var(--accent-rgb), 0));
color: var(--text-primary);
}
.nav-item.active::before {
content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
background: var(--accent-500); border-radius: 0 3px 3px 0;
}
.nav-item .icon { font-size: 1rem; opacity: .85; width: 20px; text-align: center; }
.sidebar-footer {
margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hairline);
display: flex; align-items: center; justify-content: space-between; gap: 10px;
color: var(--text-tertiary); font-size: .82rem;
}
.user-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.sidebar-footer-row {
display: flex; align-items: center; justify-content: space-between;
width: 100%; gap: 8px; margin-bottom: 6px;
}
/* --- Theme toggle ------------------------------------------------------ */
.theme-toggle {
display: inline-flex; align-items: center; gap: 8px;
background: var(--surface-2); color: var(--text-secondary);
border: 1px solid var(--hairline); border-radius: 999px;
padding: 6px 12px; cursor: pointer;
font: inherit; font-size: .82rem; font-weight: 500;
transition: background .15s var(--ease-out), color .15s var(--ease-out),
border-color .15s var(--ease-out), transform .08s var(--ease-out);
}
.theme-toggle:hover {
background: var(--surface-3); color: var(--text-primary);
border-color: var(--accent-500);
}
.theme-toggle:active { transform: scale(.96); }
.theme-toggle-icon { display: inline-flex; line-height: 0; color: var(--accent-500); }
.theme-toggle-label { display: inline-block; }
.topbar-trailing { display: flex; align-items: center; gap: 6px; }
.topbar-trailing .theme-toggle {
width: 36px; height: 36px; padding: 0;
border-radius: var(--radius-md);
justify-content: center;
}
.topbar-trailing .theme-toggle-label { display: none; }
/* In the sidebar footer the toggle is icon-only too — keep the row tidy. */
.sidebar-footer-row .theme-toggle {
width: 32px; height: 32px; padding: 0;
border-radius: 50%;
justify-content: center;
}
.sidebar-footer-row .theme-toggle-label { display: none; }
/* Main content.
`min-width: 0` is the magic incantation that lets a CSS-grid child shrink
below its intrinsic content width — without it, an inner table's natural
width stretches the cell and `overflow-x: auto` on `.table-wrap` never
engages because there's nothing for it to clip against. */
.content {
padding: 28px clamp(20px, 4vw, 56px);
max-width: 1400px;
width: 100%;
min-width: 0;
}
/* --- Buttons ----------------------------------------------------------- */
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px; border-radius: var(--radius-md);
font-weight: 600; font-size: .9rem; cursor: pointer;
border: 1px solid transparent;
transition: transform .08s var(--ease-out), background .15s var(--ease-out),
border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
text-decoration: none;
}
.btn-primary {
background: var(--accent-500); color: white;
box-shadow: 0 6px 14px var(--accent-tint-32);
}
.btn-primary:hover { background: var(--accent-600); transform: translateY(-1px); text-decoration: none; }
.btn-primary:active { background: var(--accent-700); transform: translateY(0); }
.btn-secondary { background: var(--surface-3); color: var(--text-primary); border-color: var(--hairline); }
.btn-secondary:hover { background: var(--surface-4); border-color: var(--accent-500); text-decoration: none; }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(var(--danger-rgb), .4); }
.btn-danger:hover { background: rgba(var(--danger-rgb), .1); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text-primary); text-decoration: none; }
.btn-link {
background: transparent; border: 0; color: var(--accent-400);
padding: 0; cursor: pointer; font: inherit;
}
.btn-link:hover { color: var(--accent-500); text-decoration: underline; }
/* --- Forms -------------------------------------------------------------
Every control gets the dark-with-red-accent treatment. We cover every
the HTML spec defines, custom-style the controls
browsers render inconsistently (checkbox, radio, select, file, range),
and explicitly invert the date-picker indicator so it's visible on dark.
----------------------------------------------------------------------- */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group label { font-size: .82rem; color: var(--text-secondary); font-weight: 500; }
/* Text-like inputs and textarea/select. Listing every text-y type explicitly
beats `input:not([type=checkbox])...` because selector specificity stays
predictable and IDE autocomplete doesn't lie to you.
`input:not([type])` catches bare elements (Blazor's @bind without
type=...) which browsers treat as text but CSS [type=text] does not match. */
.form-control,
input:not([type]),
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], input[type=url],
input[type=date], input[type=time], input[type=datetime-local],
input[type=month], input[type=week],
textarea, select {
width: 100%; padding: 10px 12px;
background: var(--surface-2); color: var(--text-primary);
border: 1px solid var(--hairline); border-radius: var(--radius-md);
font: inherit;
transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out),
background .15s var(--ease-out);
}
.form-control:hover,
input:not([type]):hover,
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover,
input[type=number]:hover, input[type=search]:hover, input[type=tel]:hover,
input[type=url]:hover, input[type=date]:hover, input[type=time]:hover,
textarea:hover, select:hover { border-color: var(--surface-4); }
.form-control:focus, input:focus, textarea:focus, select:focus {
outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-glow);
}
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
.help { font-size: .78rem; color: var(--text-tertiary); }
.form-error { color: var(--danger); font-size: .82rem; }
/* Textarea-specific tweaks: minimum height, vertical-only resize. */
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
/* --- Custom select chevron --------------------------------------------
The native arrow is OS-dependent and ugly on dark; we draw our own. */
select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
padding-right: 36px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
cursor: pointer;
}
select:focus {
background-image: url("data:image/svg+xml;utf8,");
}
/* Native option lists honor the OS dark mode automatically in most browsers,
but Firefox needs a hint. */
select option { background: var(--surface-2); color: var(--text-primary); }
/* --- Checkboxes & radios ----------------------------------------------
Reset the native rendering and draw a 18px square / circle that fills
with accent-red when checked. The check mark is an embedded SVG so it
works in every browser and respects the surrounding font color. */
input[type=checkbox], input[type=radio] {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
width: 18px; height: 18px;
margin: 0; padding: 0;
background: var(--surface-2);
border: 1px solid var(--hairline);
cursor: pointer;
transition: background .12s var(--ease-out), border-color .12s var(--ease-out);
flex-shrink: 0; vertical-align: middle;
display: inline-block;
position: relative;
}
input[type=checkbox] { border-radius: 4px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: var(--accent-500); }
input[type=checkbox]:checked, input[type=radio]:checked {
background-color: var(--accent-500);
border-color: var(--accent-500);
}
input[type=checkbox]:checked {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
}
input[type=radio]:checked::after {
content: ""; position: absolute;
inset: 4px; border-radius: 50%; background: white;
}
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
box-shadow: 0 0 0 3px var(--accent-glow);
outline: none;
}
input[type=checkbox]:indeterminate {
background: var(--accent-500); border-color: var(--accent-500);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
}
/* --- File input --------------------------------------------------------
Styling directly is limited; the file-selector-button
pseudo-element gives us the inner button. */
input[type=file] {
width: 100%; padding: 0;
background: var(--surface-2); color: var(--text-secondary);
border: 1px solid var(--hairline); border-radius: var(--radius-md);
font: inherit; cursor: pointer; overflow: hidden;
}
input[type=file]::file-selector-button {
background: var(--accent-500); color: white; font: inherit; font-weight: 600;
border: 0; padding: 10px 16px; margin-right: 12px;
cursor: pointer;
transition: background .12s var(--ease-out);
}
input[type=file]::file-selector-button:hover { background: var(--accent-600); }
/* --- Range slider ------------------------------------------------------
Tracks need WebKit + Firefox prefixes — no shorthand exists yet. */
input[type=range] {
width: 100%;
appearance: none; -webkit-appearance: none;
height: 22px; /* hit area */
background: transparent; cursor: pointer;
padding: 0;
}
input[type=range]::-webkit-slider-runnable-track {
height: 4px; border-radius: 999px;
background: var(--surface-3);
}
input[type=range]::-moz-range-track {
height: 4px; border-radius: 999px;
background: var(--surface-3);
}
input[type=range]::-webkit-slider-thumb {
appearance: none; -webkit-appearance: none;
width: 18px; height: 18px;
margin-top: -7px; /* center on the 4px track */
background: var(--accent-500);
border: 2px solid var(--surface-0);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,.4);
transition: transform .1s var(--ease-out);
}
input[type=range]::-moz-range-thumb {
width: 18px; height: 18px;
background: var(--accent-500);
border: 2px solid var(--surface-0);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.1); }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-glow); }
input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-glow); }
/* --- Color picker ------------------------------------------------------ */
input[type=color] {
width: 48px; height: 38px;
padding: 4px; cursor: pointer;
background: var(--surface-2);
border: 1px solid var(--hairline); border-radius: var(--radius-md);
}
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: var(--radius-sm); }
/* --- Date / time picker indicator -------------------------------------
The native calendar/clock icon is dark-on-dark by default; invert it. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=week]::-webkit-calendar-picker-indicator {
filter: invert(.7);
cursor: pointer; opacity: .8;
transition: opacity .12s var(--ease-out);
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* --- Number arrow buttons --------------------------------------------
The default spinners on Chromium look painted-on. Tone them down so
they only appear on hover/focus. */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: .35; cursor: pointer;
transition: opacity .12s var(--ease-out);
}
input[type=number]:hover::-webkit-inner-spin-button,
input[type=number]:focus::-webkit-inner-spin-button { opacity: 1; }
/* --- Search input cancel button --------------------------------------- */
input[type=search]::-webkit-search-cancel-button {
appearance: none; -webkit-appearance: none;
width: 14px; height: 14px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
cursor: pointer;
}
/* --- Disabled state ---------------------------------------------------- */
input:disabled, textarea:disabled, select:disabled {
opacity: .55; cursor: not-allowed;
background: var(--surface-1);
}
input[type=checkbox]:disabled, input[type=radio]:disabled {
background: var(--surface-3); border-color: var(--hairline);
}
/* --- Read-only --------------------------------------------------------- */
input:read-only, textarea:read-only {
background: var(--surface-1); color: var(--text-secondary);
}
/* --- Autofill (Chromium) ---------------------------------------------
Chromium paints autofilled fields a bright yellow that destroys the dark
theme. The trick is an inset shadow that visually overrides the fill. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill {
-webkit-text-fill-color: var(--text-primary);
-webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
caret-color: var(--text-primary);
transition: background-color 5000s ease-in-out 0s; /* defeat the default fill animation */
}
/* --- Switch (toggle) ---------------------------------------------------
Optional: any checkbox with .switch becomes a pill toggle. */
input[type=checkbox].switch {
width: 38px; height: 22px; border-radius: 999px;
background: var(--surface-3); border-color: var(--hairline);
position: relative; cursor: pointer;
background-image: none;
}
input[type=checkbox].switch::after {
content: ""; position: absolute;
top: 2px; left: 2px; width: 16px; height: 16px;
background: white; border-radius: 50%;
transition: transform .18s var(--ease-out);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
input[type=checkbox].switch:checked {
background-color: var(--accent-500);
background-image: none;
}
input[type=checkbox].switch:checked::after { transform: translateX(16px); }
/* --- Cards ------------------------------------------------------------- */
.card {
background: var(--surface-1); border: 1px solid var(--hairline);
border-radius: var(--radius-lg); padding: 20px;
transition: border-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.card.hover:hover { border-color: var(--accent-500); transform: translateY(-1px); }
.card-title { font-size: 1rem; font-weight: 600; margin: 0 0 4px; }
.card-meta { color: var(--text-tertiary); font-size: .82rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
/* --- Workspace card: discrete corner-delete + action row -------------- */
.ws-card { position: relative; }
.ws-card-actions {
margin-top: 14px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.ws-card-delete {
position: absolute;
top: 10px; right: 10px;
width: 26px; height: 26px;
border-radius: 50%;
background: transparent;
border: 1px solid transparent;
color: var(--text-tertiary);
font-size: 1.05rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity .15s var(--ease-out), background .15s var(--ease-out),
color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.ws-card:hover .ws-card-delete,
.ws-card-delete:focus-visible { opacity: 1; }
.ws-card-delete:hover {
background: rgba(var(--danger-rgb), .12);
color: var(--danger);
border-color: rgba(var(--danger-rgb), .25);
}
/* Touch devices have no meaningful hover — keep the delete affordance
visible at low opacity so users know it's there, snap to full on press. */
@media (hover: none) {
.ws-card-delete { opacity: .55; }
.ws-card-delete:active { opacity: 1; }
}
/* --- Tables ------------------------------------------------------------ */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
.table th { font-weight: 600; color: var(--text-secondary); background: var(--surface-1); position: sticky; top: 0; }
.table tbody tr { transition: background .12s var(--ease-out); }
.table tbody tr:hover { background: var(--surface-2); }
.table-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* table-wrap turns any table into a horizontally-scrollable surface when its
content is wider than the parent. The two key bits:
- `width:100%; max-width:100%` so the wrap NEVER grows past its container.
- `min-width:0` (defensively) plus `overflow-x:auto` to engage scrolling.
- `min-width:max-content` on the inner forces the table to keep its
natural column widths, which produces overflow that the wrap clips and
scrolls instead of letting columns squish into each other.
The fade-edge indicator is omitted on purpose — the older `::after` +
`position:sticky` + `float:right` shim could intercept the scroll itself
on some mobile browsers. */
.table-wrap {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-md);
/* A subtle mask creates the "more content offscreen" hint without using
absolutely-positioned children that interfere with touch scrolling. */
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
}
.table-wrap > table { min-width: max-content; }
/* --- Badges ------------------------------------------------------------ */
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px; font-size: .72rem; font-weight: 600;
border-radius: 999px; background: var(--surface-3);
color: var(--text-secondary); letter-spacing: .03em;
}
.badge.accent { background: rgba(var(--accent-rgb), .14); color: var(--accent-400); }
.badge.success { background: rgba(var(--success-rgb), .14); color: var(--success); }
.badge.warn { background: rgba(var(--warning-rgb), .14); color: var(--warning); }
.badge.danger { background: rgba(var(--danger-rgb), .18); color: var(--danger); }
/* --- Page header ------------------------------------------------------- */
.page-header {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: 24px;
}
.page-title h1 { margin-bottom: 4px; }
.page-title .crumbs { color: var(--text-tertiary); font-size: .85rem; }
/* --- Empty state ------------------------------------------------------- */
.empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 60px 20px; text-align: center; color: var(--text-secondary);
border: 1px dashed var(--hairline); border-radius: var(--radius-lg);
background: var(--surface-1);
}
.empty .empty-mark {
width: 56px; height: 56px; border-radius: 50%;
background: var(--accent-tint-12); color: var(--accent-500);
display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; margin-bottom: 14px;
}
/* --- Chat -------------------------------------------------------------- */
.chat-shell { display: grid; grid-template-columns: 280px 1fr; gap: 24px; height: calc(100vh - 56px); }
.chat-list-pane { display: flex; flex-direction: column; min-height: 0; }
.chat-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.chat-new-fab {
width: 36px; height: 36px; border-radius: 50%;
padding: 0; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center;
}
/* flex:1 + min-height:0 lets overflow-y actually clip when the list runs long.
Without flex:1 the list takes its content height and never scrolls — just
pushes past the parent's bounds. */
.chat-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding-right: 4px; }
.chat-list-item {
display: block; padding: 10px 12px; border-radius: var(--radius-md);
color: var(--text-secondary); border: 1px solid transparent; cursor: pointer;
transition: background .12s var(--ease-out), border-color .12s var(--ease-out);
background: transparent; text-decoration: none;
}
.chat-list-item:hover { background: var(--surface-2); color: var(--text-primary); text-decoration: none; }
.chat-list-item.active {
background: var(--surface-2); border-color: var(--accent-500); color: var(--text-primary);
box-shadow: inset 3px 0 0 var(--accent-500);
}
.chat-list-title { display: block; font-weight: 500; }
.chat-list-meta { display: block; font-size: .72rem; color: var(--text-tertiary); margin-top: 2px; }
.chat-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; max-width: 100%; }
.chat-header {
display: flex; align-items: center; gap: 10px;
padding-bottom: 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 16px;
}
.chat-header-meta { flex: 1; min-width: 0; }
.chat-header-meta h2 {
font-size: 1.05rem; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-header-badges { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.chat-header-actions { display: flex; gap: 6px; flex-shrink: 0; }
.chat-back {
display: none; /* desktop hides this; mobile shows it */
width: 38px; height: 38px; border-radius: var(--radius-md);
align-items: center; justify-content: center; flex-shrink: 0;
color: var(--text-primary); background: var(--surface-2);
border: 1px solid var(--hairline); font-size: 1.1rem;
text-decoration: none; transition: background .12s var(--ease-out);
}
.chat-back:hover { background: var(--surface-3); text-decoration: none; }
.chat-stream { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 14px; padding-right: 6px; }
.message { display: flex; gap: 12px; max-width: 80%; }
.message.user { align-self: flex-end; flex-direction: row-reverse; }
.message .avatar {
width: 30px; height: 30px; border-radius: 50%;
background: var(--surface-3); color: var(--text-secondary);
display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0;
}
.message.user .avatar { background: var(--accent-500); color: white; }
.message .bubble {
padding: 12px 14px; border-radius: var(--radius-lg);
background: var(--surface-2); border: 1px solid var(--hairline);
line-height: 1.55;
/* `overflow-wrap: anywhere` lets long unbreakable runs (URLs, filenames
like "(11.pdf") wrap inside the bubble; `min-width: 0` is the flex
safety valve that allows the bubble to actually shrink to its
container instead of inflating to its longest token. */
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
position: relative;
}
.message.user .bubble {
background: linear-gradient(140deg, var(--accent-tint-16), var(--accent-tint-06));
border-color: rgba(var(--accent-rgb), .35);
}
.message-actions { position: absolute; top: 4px; right: 6px; opacity: 0; transition: opacity .12s var(--ease-out); }
.message:hover .message-actions { opacity: 1; }
/* Touch devices don't have meaningful hover — show actions persistently. */
@media (hover: none) {
.message-actions { opacity: .55; }
.message-actions:active { opacity: 1; }
}
.chat-composer {
display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--hairline);
min-width: 0;
}
/* Without `min-width: 0` flex items refuse to shrink below their intrinsic
content width — a textarea picks up the placeholder size as min-content and
on a phone that easily exceeds the viewport, pushing the Send button past
the right edge. Both children get the override. */
.chat-composer > * { min-width: 0; }
.chat-composer textarea {
flex: 1; min-height: 52px; max-height: 200px; resize: vertical;
min-width: 0;
}
/* --- Markdown body ----------------------------------------------------- */
/* Scoped to .markdown-body so we don't bleed into navigation/admin tables. */
.markdown-body { color: inherit; }
.markdown-body > *:first-child { margin-top: 0; }
.markdown-body > *:last-child { margin-bottom: 0; }
.markdown-body p { margin: 0 0 .55em; }
.markdown-body strong { color: var(--text-primary); font-weight: 600; }
.markdown-body em { color: var(--text-primary); }
.markdown-body a { color: var(--accent-400); text-decoration: underline; text-underline-offset: 2px; }
.markdown-body a:hover { color: var(--accent-500); }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
margin: .9em 0 .35em; line-height: 1.3; font-weight: 600;
}
.markdown-body h1 { font-size: 1.18rem; }
.markdown-body h2 { font-size: 1.08rem; }
.markdown-body h3 { font-size: 1.0rem; }
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: .95rem; color: var(--text-secondary); }
.markdown-body ul, .markdown-body ol { margin: 0 0 .55em; padding-left: 1.25rem; }
.markdown-body li { margin: .15em 0; }
.markdown-body li > p { margin: 0; }
.markdown-body blockquote {
margin: .5em 0; padding: .35em .9em;
border-left: 3px solid var(--accent-500);
background: var(--accent-tint-06);
color: var(--text-secondary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.markdown-body hr {
border: 0; border-top: 1px solid var(--hairline); margin: 1em 0;
}
.markdown-body code {
font-family: var(--font-mono); font-size: .87em;
padding: 1px 6px; border-radius: 4px;
background: var(--surface-3); color: var(--accent-400);
border: 1px solid var(--hairline);
}
.markdown-body pre {
margin: .55em 0;
padding: 12px 14px;
background: var(--surface-0); color: var(--text-primary);
border: 1px solid var(--hairline); border-radius: var(--radius-md);
overflow-x: auto;
font-family: var(--font-mono); font-size: .85rem; line-height: 1.5;
}
.markdown-body pre code {
background: transparent; border: 0; padding: 0;
color: inherit; font-size: inherit;
}
.markdown-body table {
width: 100%; border-collapse: collapse; margin: .55em 0;
font-size: .9rem;
}
.markdown-body th, .markdown-body td {
border: 1px solid var(--hairline);
padding: 6px 10px;
text-align: left;
}
.markdown-body th { background: var(--surface-2); font-weight: 600; }
.markdown-body tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
.markdown-body input[type=checkbox] { /* task list checkboxes */
margin-right: 6px; vertical-align: middle;
}
/* User-bubble accent — keep code/blockquote contrast on the red-tinted bg. */
.message.user .bubble .markdown-body code { background: rgba(0,0,0,.3); }
.message.user .bubble .markdown-body pre { background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.08); }
.message.user .bubble .markdown-body blockquote { background: rgba(0,0,0,.2); }
/* --- Citation chip ----------------------------------------------------- */
.citation-chip-wrap { position: relative; display: inline-block; }
.citation-chip {
display: inline-flex; align-items: center;
background: var(--accent-tint-12); color: var(--accent-500);
border: 1px solid rgba(var(--accent-rgb), .35);
border-radius: 999px;
padding: 1px 8px; margin: 0 2px;
font-size: .72rem; font-weight: 600; line-height: 1.5;
font-family: var(--font-sans);
cursor: pointer; user-select: none;
vertical-align: baseline;
transition: background .12s var(--ease-out), color .12s var(--ease-out);
}
.citation-chip:hover { background: var(--accent-500); color: white; }
.citation-chip:focus-visible { outline: none; box-shadow: var(--shadow-accent); }
.citation-chip-missing { background: var(--surface-3); color: var(--text-tertiary); border-color: var(--hairline); }
.citation-pop {
position: absolute; left: 0; top: calc(100% + 6px);
width: min(360px, 80vw);
background: var(--surface-1); color: var(--text-primary);
border: 1px solid var(--hairline); border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: 12px 14px;
font-size: .85rem; line-height: 1.5;
z-index: 30;
display: flex; flex-direction: column; gap: 8px;
white-space: normal;
}
.citation-pop-head {
display: flex; flex-direction: column; gap: 2px;
padding-bottom: 6px; border-bottom: 1px solid var(--hairline);
}
.citation-pop-head strong { font-size: .9rem; }
.citation-pop-meta { color: var(--text-tertiary); font-size: .75rem; }
.citation-pop-body { color: var(--text-secondary); max-height: 220px; overflow-y: auto; }
/* User-bubble background is red-tinted; flip the chip styling so it stays readable. */
.message.user .citation-chip { background: rgba(255,255,255,.18); color: white; border-color: rgba(255,255,255,.35); }
.message.user .citation-chip:hover { background: white; color: var(--accent-700); }
/* --- Suggestion chips -------------------------------------------------- */
.bubble-stack { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.suggestion-row {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 2px;
}
.suggestion-chip {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--hairline);
border-radius: 999px;
padding: 6px 12px;
font-size: .8rem; font-weight: 500;
cursor: pointer; text-align: left;
transition: background .12s var(--ease-out), color .12s var(--ease-out),
border-color .12s var(--ease-out);
max-width: 100%;
white-space: normal;
}
.suggestion-chip:hover {
background: var(--accent-tint-12);
color: var(--accent-500);
border-color: var(--accent-500);
}
.suggestion-chip:disabled { opacity: .5; cursor: not-allowed; }
/* --- Settings drawer --------------------------------------------------- */
.drawer-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,.5);
z-index: 80; animation: fadeIn .15s var(--ease-out);
}
.drawer {
position: fixed; top: 0; right: 0; width: min(420px, 100%);
/* Explicit height pinned to the *dynamic* viewport (tracks the visible
area as the mobile URL bar collapses/expands). top + bottom would
resolve against the layout viewport, which on mobile is taller than
the visible area — pushing the bottom of the drawer offscreen and
leaving overflow-y nothing to clip against. svh as a fallback for
browsers that haven't shipped dvh; layered values pick the best. */
height: 100vh;
height: 100svh;
height: 100dvh;
background: var(--surface-1); border-left: 1px solid var(--hairline);
z-index: 81; box-shadow: var(--shadow-lg);
animation: slideInRight .22s var(--ease-out);
/* The drawer itself is just a frame; the inside splits into a fixed
header and a flex:1 body. Keeps the close X always visible while the
body scrolls. */
display: flex; flex-direction: column;
overflow: hidden; /* the body owns the scroll */
}
/* Drawer header — non-scrolling top bar with the title and a guaranteed
one-tap close. flex-shrink:0 so it never collapses when the body grows. */
.drawer-header {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 16px 22px;
background: var(--surface-1);
border-bottom: 1px solid var(--hairline);
flex-shrink: 0;
}
.drawer-header h2 { margin: 0; font-size: 1.1rem; }
/* Body holds the scrolling content. min-height:0 is the magic flex
incantation that lets a flex:1 child actually shrink below its content
height so overflow-y can do its job. */
.drawer-body {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 18px 22px 22px;
}
/* Footer is always visible at the bottom (Cancel / Save row). Drawers
that don't use a footer simply put the buttons inside .drawer-body. */
.drawer-footer {
flex-shrink: 0;
padding: 12px 22px;
border-top: 1px solid var(--hairline);
display: flex; gap: 8px; justify-content: flex-end;
background: var(--surface-1);
}
.drawer-close {
width: 36px; height: 36px; border-radius: 50%;
background: transparent; border: 0;
color: var(--text-secondary); font-size: 1.4rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0;
transition: background .12s var(--ease-out), color .12s var(--ease-out);
}
.drawer-close:hover { background: var(--surface-3); color: var(--text-primary); }
.drawer-close:focus-visible { box-shadow: var(--shadow-accent); outline: none; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideInRight { from { transform: translateX(100%) } to { transform: translateX(0) } }
/* --- Auth pages -------------------------------------------------------- */
.auth-shell {
min-height: 100vh; display: grid; place-items: center;
background:
radial-gradient(1200px 600px at 80% -10%, rgba(var(--accent-rgb), .18), transparent 60%),
radial-gradient(900px 500px at 0% 110%, rgba(var(--accent-rgb), .10), transparent 60%),
var(--surface-0);
padding: 24px;
}
.auth-card {
background: var(--surface-1); border: 1px solid var(--hairline);
border-radius: var(--radius-xl); padding: 36px;
width: min(420px, 100%);
box-shadow: var(--shadow-lg);
}
.auth-card h1 { font-size: 1.6rem; }
.auth-card .lead { color: var(--text-secondary); margin-bottom: 24px; }
.auth-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
/* --- Drag & drop upload zone ------------------------------------------- */
.dropzone { cursor:pointer; }
.dropzone:hover { color: var(--accent-400)}
.dropzone .hint { color: var(--text-tertiary); font-size: .85rem; }
/* --- Validation -------------------------------------------------------- */
.validation-summary { background: rgba(var(--danger-rgb), .08); border: 1px solid rgba(var(--danger-rgb), .3);
border-radius: var(--radius-md); padding: 10px 14px; color: var(--accent-400); margin-bottom: 14px; }
/* --- Scrollbar (modern, subtle) ---------------------------------------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--surface-4); background-clip: padding-box; }
/* Workspace detail two-card grid — stacks on small screens. */
.ws-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
/* ============================================================================
RESPONSIVE — mobile-first overrides applied below 900px.
The shape of the page changes substantially on phones:
- the sidebar becomes a slide-in drawer behind a hamburger;
- the chat surface becomes master-detail (list OR chat, never both);
- tables get horizontal-scroll affordances;
- grids stack;
- tap targets grow to 44px+;
- the chat composer sticks to the bottom of the viewport.
============================================================================ */
@media (max-width: 900px) {
:root { --topbar-h: 56px; }
/* Last-resort guard against horizontal overflow. Any rogue child wider
than the viewport gets clipped here instead of letting the user
horizontally pan the entire page — a behavior that's especially
jarring on the chat surface. */
html, body { overflow-x: hidden; max-width: 100vw; }
/* App shell ----------------------------------------------------------- */
.app-shell { grid-template-columns: 1fr; max-width: 100vw; overflow-x: hidden; }
/* Top bar — visible only on mobile. Centers the brand, hamburger on left.
z-index: 50 so it sits above the drawer overlay (35) and the drawer (40),
which keeps the hamburger reachable while the drawer is open. */
.topbar {
display: flex; align-items: center; justify-content: space-between;
position: sticky; top: 0; z-index: 50;
height: var(--topbar-h);
padding: 0 14px;
background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
border-bottom: 1px solid var(--hairline);
}
.topbar-burger {
background: transparent; border: 0; padding: 6px; cursor: pointer;
width: 36px; height: 36px;
display: inline-flex; flex-direction: column; gap: 4px;
align-items: center; justify-content: center;
border-radius: var(--radius-md);
transition: background .12s var(--ease-out);
}
.topbar-burger:hover { background: var(--surface-2); }
.topbar-burger > span {
display: block; width: 18px; height: 2px;
background: var(--text-primary); border-radius: 2px;
transition: transform .25s var(--ease-out), opacity .15s var(--ease-out);
}
/* Hamburger morphs to an X when the drawer is open. */
.app-shell.drawer-open .topbar-burger > span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.app-shell.drawer-open .topbar-burger > span:nth-child(2) { opacity: 0; }
.app-shell.drawer-open .topbar-burger > span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.topbar-brand {
display: flex; align-items: center; gap: 8px;
font-weight: 700; letter-spacing: -.01em;
}
.topbar-brand .brand-mark { width: 22px; height: 22px; border-radius: 6px; }
.topbar-brand .brand-mark::after { inset: 4px; border-radius: 3px; }
/* Sidebar becomes a slide-in drawer that lives BELOW the topbar so the
hamburger and brand always stay visible above it. */
.sidebar {
position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
width: min(82vw, 320px); height: calc(100vh - var(--topbar-h));
transform: translateX(-100%);
transition: transform .26s var(--ease-out);
box-shadow: 0 0 0 transparent;
z-index: 40;
padding-top: 18px;
}
.app-shell.drawer-open .sidebar {
transform: translateX(0);
box-shadow: var(--shadow-lg);
}
/* Hide the in-sidebar brand on mobile — the topbar already shows it. */
.sidebar > .brand { display: none; }
/* Backdrop dims the page behind the open drawer. */
.drawer-overlay {
display: block;
position: fixed; inset: 0; z-index: 35;
background: rgba(0, 0, 0, .55);
opacity: 0; pointer-events: none;
transition: opacity .2s var(--ease-out);
}
.app-shell.drawer-open .drawer-overlay {
opacity: 1; pointer-events: auto;
}
/* Content padding tightens; nothing should run edge-to-edge on phones
because the topbar's hairline already provides the boundary. */
.content { padding: 18px 16px 28px; }
/* Page header packs vertically on phones. */
.page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
.page-header h1 { font-size: 1.45rem; }
.page-title .crumbs { font-size: .8rem; }
/* Grids stack. */
.grid-3 { grid-template-columns: 1fr; }
.ws-detail-grid { grid-template-columns: 1fr; }
/* Chat — master/detail navigation -------------------------------------
Pinned to the viewport with position: fixed so it bypasses every
parent-layout concern (.content padding, .app-shell min-height,
100vh-vs-100dvh URL-bar quirks). Top: topbar height; bottom: 0 of the
*layout viewport* — which on mobile browsers tracks the visible area
(URL bar collapse/expand) automatically.
z-index sits below the topbar (50) and the drawer (40) so those
always overlay the chat. */
.chat-shell {
position: fixed;
top: var(--topbar-h);
left: 0;
right: 0;
bottom: 0;
height: auto; /* top + bottom determine height */
grid-template-columns: 1fr;
margin: 0;
padding: 0;
gap: 0;
background: var(--surface-0);
z-index: 10;
overflow: hidden;
}
.chat-list-pane,
.chat-pane {
padding: 12px 14px 0;
min-height: 0; /* flex children with overflow need this */
}
/* When no chat is selected: list takes the full viewport, pane is hidden. */
.chat-shell:not(.has-chat) .chat-pane { display: none; }
/* When a chat IS selected: pane takes the full viewport, list is hidden. */
.chat-shell.has-chat .chat-list-pane { display: none; }
.chat-back { display: inline-flex; }
.chat-header { padding-bottom: 10px; margin-bottom: 10px; }
.chat-header-meta h2 { font-size: 1rem; }
.chat-header-actions { gap: 4px; }
.chat-stream { padding: 0 4px 8px 0; }
.message { max-width: 92%; }
/* Composer is the last flex child of chat-pane; chat-stream above it
has flex:1 + overflow-y:auto, so the composer naturally pins to the
bottom without `position: sticky` and without negative margins. */
.chat-composer {
position: static;
margin: 0 -14px;
padding: 10px 14px env(safe-area-inset-bottom, 10px);
background: var(--surface-0);
border-top: 1px solid var(--hairline);
border-bottom: 0;
flex-shrink: 0;
}
.chat-composer textarea { min-height: 44px; max-height: 120px; }
/* Table affordance: highlight the scroll mask so it reads clearly. */
.table-wrap::after { width: 28px; }
/* On phones the drawer fills the screen for thumb-friendly scrolling.
Header / body / footer keep their roles; the body's safe-area-aware
padding-bottom keeps the last button clear of the iOS home-indicator
gesture bar. */
.drawer { width: 100%; max-width: 100vw; }
.drawer-header { padding: 14px 18px; }
.drawer-body { padding: 18px 18px 8px; }
.drawer-footer {
padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
}
/* Auth screens — let the card breathe on tiny screens. */
.auth-card { padding: 24px 22px; border-radius: var(--radius-lg); }
/* Buttons get a touch-friendly minimum. */
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
min-height: 40px; padding: 9px 14px;
}
/* Workspace switcher should never overflow the drawer on phones. */
.ws-menu { max-height: 60vh; }
}
/* Honor reduced-motion preferences — drawer slides in instantly, message
bubbles don't transform on hover, etc. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}