(not inside a .container) — pin it to the same 72rem content column as everything else so it never renders as a full-viewport band. The chat page's panel sits inside .chat-shell's container, so this selector only hits the direct-child placement. */ .app-main > .steering-panel { width: calc(100% - 2.5rem); max-width: 69.5rem; margin-inline: auto; } /* ---------- Global tuning page (phase 27) ---------- */ /* /tuning.html: create / edit / delete steering notes without a chat conversation. Full-container width (owner instruction 2026-09-12: "match the width of the RAG page for all other pages" — the phase-27 capped-column discipline is superseded): the shell rides the .container's 72rem frame like the RAG page, and the form and the note list span its FULL width (no skinny lists). Every interactive target is >=44px; text pairs reuse the Phase-08 AA palette (dark ink on brand 5.2:1, brand-ink/brand-soft 6.9:1, ok 10.6:1, err 9.1:1, ink-soft >=6.9:1). No filter: blur, no CDN, system font stack. */ .tuning-shell { display: flex; flex-direction: column; gap: 1.25rem; flex: 1; } /* Create form — the composer's surface as a vertical card: labeled textarea (visually-hidden label; the placeholder carries the visible hint) + the brand "Add note" button (dark ink on brand: 5.2:1 — never white on brand, 3.7:1, fails). */ #tune-form { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.9rem 1rem 1rem; } #tune-form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); } #tune-note { width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink); background: transparent; border: 0; padding: 0.2rem 0.1rem; resize: vertical; min-height: 4.6rem; } #tune-note::placeholder { color: var(--ink-soft); } #tune-save { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.4rem 1.2rem; border: 0; border-radius: var(--radius-sm); background: var(--brand); color: var(--bg); /* dark ink on brand: 5.2:1 */ font: inherit; font-weight: 700; cursor: pointer; } #tune-save:hover:not(:disabled) { background: var(--brand-hover); } #tune-save:disabled { opacity: 0.6; cursor: wait; } /* Notes list — the phase-15 steering panel's language at full column width: rows are flex (text flexes + ellipsizes, actions shrink-0) with a bottom divider (the last row keeps none). */ .tuning-panel { background: var(--surface); border: 1px solid var(--brand-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.9rem 1.1rem 1rem; } .tuning-panel-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); } .tuning-list { list-style: none; margin: 0.65rem 0 0; padding: 0; display: flex; flex-direction: column; } .tuning-note { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); } .tuning-note:last-child { border-bottom: 0; } /* The note text is the row's flex citizen: it takes every spare pixel and ellipsizes (the full text is one Edit away — the inline form). */ .tuning-note-text { color: var(--ink); font-size: 0.9rem; line-height: 1.45; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Row actions: icon + label, >=44px, shrink-0. Edit = brand pair on hover (brand-ink/brand-soft 6.9:1); Delete = err pair on hover (9.1:1), consistent with .steering-delete. */ .tuning-edit, .tuning-delete { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 44px; min-width: 44px; flex: 0 0 auto; padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font: inherit; font-weight: 600; font-size: 0.82rem; white-space: nowrap; cursor: pointer; } .tuning-edit svg, .tuning-delete svg { width: 14px; height: 14px; display: block; } .tuning-edit:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-soft); } .tuning-delete:hover:not(:disabled) { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); } .tuning-edit:disabled, .tuning-delete:disabled { opacity: 0.5; cursor: wait; } /* Inline edit: the row swaps to a vertical card — the text span is hidden and replaced by the .tuning-edit-form (textarea pre-filled + Save/Cancel, reusing the phase-15 .tune-save/.tune-cancel styles); the row-level Edit/Delete buttons step aside for the form's own. */ .tuning-note.is-editing { flex-direction: column; align-items: stretch; gap: 0.5rem; background: var(--surface); border: 1px solid var(--brand-soft); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; } .tuning-note.is-editing .tuning-note-text, .tuning-note.is-editing .tuning-edit, .tuning-note.is-editing .tuning-delete { display: none; } .tuning-edit-form { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .tuning-edit-input { font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.6rem; resize: vertical; min-height: 2.6rem; } .tuning-edit-input::placeholder { color: var(--ink-soft); } .tuning-edit-form-actions { display: flex; gap: 0.5rem; } /* Per-action status pills (role=status / role=alert), the phase-15 pairs: ok 10.6:1, err 9.1:1. */ .tuning-saved { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid color-mix(in srgb, var(--ok-ink) 35%, transparent); border-radius: var(--radius-sm); padding: 0.45rem 0.8rem; font-size: 0.85rem; font-weight: 600; } .tuning-error { background: var(--err-bg); color: var(--err-ink); border: 1px solid var(--err-line); border-radius: var(--radius-sm); padding: 0.45rem 0.8rem; font-size: 0.85rem; font-weight: 600; } #tune-empty { margin: 0.65rem 0 0; color: var(--ink-soft); font-size: 0.88rem; font-style: italic; text-align: center; } /* typing indicator */ /* align-items: center — the dots stay vertically centered when the phase-87 "Ns" hint (a full text line) makes the row taller; with only the three 8px dots the centering is a visual no-op. */ .typing { display: inline-flex; align-items: center; gap: 5px; padding: 0.9rem 1rem; } .typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); opacity: 0.5; animation: typing 1.2s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: 0.15s; } .typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } } /* Phase 87 (TODO.md L5): the visible pre-token elapsed hint — the 10s thinking clock promoted from aria-only to sighted users. ink-soft on the bubble surface (the AA pairing), small mono like every status line. Plain text: no animation, no motion opt-out. The span is a sibling of the dots inside the same .typing bubble, so it resets the dot geometry (.typing span) it would otherwise inherit. The selector MUST stay ".typing span.typing-elapsed": a bare ".typing-elapsed" (0,1,0) LOSES the specificity war to the dot rule ".typing span" (0,1,1) — every reset below (width/height/border- radius/background/opacity/animation) would be overridden and the hint would render as an 8×8px bouncing dot with the "Ns" text wrapping one character per line (phase-87 regression, 2026-09). */ .typing span.typing-elapsed { width: auto; height: auto; border-radius: 0; background: none; opacity: 1; animation: none; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); margin-left: 0.5rem; } @media (prefers-reduced-motion: reduce) { .typing span { animation: none; opacity: 0.7; } /* Phase 87 (TODO.md L5): the elapsed hint is plain text, not motion — it keeps full opacity (the AA pairing) under reduced motion. */ .typing span.typing-elapsed { opacity: 1; } /* Phase 17 thinking block: the chevron stills (no rotation motion). */ details.thinking summary::before { transition: none; } /* Phase 117 tool-calls disclosure: the same chevron, the same still. */ .tool-calls-summary::before { transition: none; } } /* Phase 117 (owner request 2026-09-15, live-mockup-confirmed — the phase-109 D16 dot cue replaced by a BRAIN-WAVE; the owner picked the ECG over the first equalizer mock): a compact trace (P bump, QRS spike, T bump — 49px wide, 8px flat tails; the middle is never rescaled) in index.html as a static SVG. .bw-ghost is the always-visible dim trace (the shape reads even when the sweep is between peaks); .bw-pulse is the same path in brand with a 42/140 stroke-dash segment that TRAVELS the path — the classic heart-monitor draw (the bwdraw keyframe below). Still the phase-109 D16 contract: visible for the ENTIRE active turn (send → terminal frame), its hidden attribute owned solely by app.js's setUiState (shown iff inFlight — hidden by construction in every terminal state, PLAN §7.4). DECORATIVE (aria-hidden in index.html): #send-status carries the state's meaning, so contrast is N/A here (§7.2 "text + color, never color alone" — the state TEXT stays in #send-status). The container is 44px = .send-btn min-height (house cross-reference — keep in lockstep), the trace centered against the button. The NEW bwdraw family is deliberate: the phase-109 "reuse the typing animation" pin is superseded by the owner's redesign. The loader sits LEFT of the button in the markup (index.html) so its appearance/disappearance never shifts the button. */ .turn-loader { display: inline-flex; align-items: center; /* center the trace against the button */ width: auto; height: 44px; /* = .send-btn min-height (44px) — keep in lockstep */ background: none; border-radius: 0; opacity: 1; align-self: flex-end; /* the composer row is flex-end aligned */ animation: none; /* the sweep carries the motion, not the container */ } .turn-loader svg { width: 49px; height: 32px; overflow: visible; /* the QRS spike (y=3) may exceed the box top */ } .turn-loader .bw-ghost { fill: none; stroke: var(--ink-soft); stroke-opacity: 0.3; /* the dim always-visible trace */ stroke-width: 2; } .turn-loader .bw-pulse { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; /* The sweep: a 42/140 bright segment on the pathLength-normalized path — the dash cycle (42 + 98) equals the normalized length, so the bwdraw loop is seamless (no visible restart point). */ stroke-dasharray: 42 98; animation: bwdraw 0.9s linear infinite; } @keyframes bwdraw { from { stroke-dashoffset: 140; } to { stroke-dashoffset: 0; } } /* Phase 117: reduced motion — the sweep is STILLED (the full trace shows static, no travel — §7.2 house law), never HIDDEN: visibility is owned by the JS hidden attribute in setUiState (D16), not by CSS. This override MUST sit AFTER the main rules above: equal specificity, and the later rule wins the cascade — a media block placed before the main rule would lose the cascade and the sweep would keep traveling under reduced motion (the phase-109 cascade pitfall, carried over). */ @media (prefers-reduced-motion: reduce) { .turn-loader .bw-pulse { animation: none; stroke-dasharray: none; } } /* ---------- Empty state & suggestions ---------- */ .empty-state { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.5rem 1.75rem; text-align: center; margin-top: 1rem; } .empty-state-glyph { color: var(--brand-ink); width: 44px; height: 44px; margin-inline: auto; } .empty-state-glyph svg { width: 44px; height: 44px; display: block; } .empty-state-title { margin: 0.8rem 0 0.4rem; font-size: 1.5rem; color: var(--ink); } .empty-state-sub { margin: 0 auto 1.25rem; max-width: 34rem; color: var(--ink-soft); } .empty-state-sub code { font-family: var(--mono); font-size: 0.85em; background: var(--brand-soft); padding: 0.1em 0.35em; border-radius: 5px; } .suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; list-style: none; margin: 0; padding: 0; } /* The shared chip pill — both chip rows (the onboarding row in the empty state and the "Maybe try" row under a deflected bubble) reuse it. Phase 104 (owner 2026-09-12, A1): a chip is ONE line at every viewport width — `white-space: nowrap` stops a 400-char question from wrapping the pill into a multi-line "chonk"; `overflow: hidden` zeroes the flex item's automatic minimum size (min-width:auto would pin the item to the full text width), so `max-width: 100%` binds and `text-overflow: ellipsis` clips the text at the row edge — in the desktop wrap row 100% is the chat column, in the ≤640px row (nowrap + overflow-x: auto) 100% is the VISIBLE width and the row scrolls. That clipping is the phase-07 overflow fix the old "Maybe try" chip override used to carry (min-width:0 + max-width: 100%) — now fully subsumed here and deleted, provenance folded into this comment so the history lives with the contract. The full text stays one hover away (the title tooltip, phase 104 task 02). */ .suggestion-chip { font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 1rem; min-height: 44px; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-width: 0; } .suggestion-chip:hover { background: var(--brand-soft); } .suggestion-chip:active { transform: scale(0.98); } /* ---------- Composer ---------- */ /* Phase 52 (2026-08-30, TODO.md L3): the composer is PINNED to the viewport bottom. The page scrolls at the document level and `.chat-shell` (the centered reading column — 72rem, the .container width at every viewport) is the composer's sticky containing block, so the box sticks to the bottom edge of the viewport at every scroll position and settles back into its normal flow position (above the footer) once the document bottom is reached. Before this, a long conversation put the composer below the fold while phase 42 forbids auto-scrolling a streaming reply — the Stop control could literally not be reached ("it runs away from the user as they try to click stop"). The pin is TWO rules working together — sticky alone is not enough (owner revision 2026-08-30: "the chat message-input textarea should be at the bottom of the screen"). `position: sticky` can only pull the box UP to the viewport's bottom edge while the document overflows; it never pushes it DOWN, so on an empty/short chat the box still sat mid-screen. `.messages { flex: 1 1 auto }` supplies the missing half: it puts the box's resting position at the bottom of the full-height column, and sticky takes over the moment the conversation overflows. The offset is the notch-aware safe-area inset (`env()` resolves to 0, or falls back to 0 where unsupported, so the box sits flush with the viewport bottom; ≤640px keeps its own `main { padding-bottom: env(safe-area-inset-bottom) }`). CSS-only by design: no DOM change, no JS, and NO new scroll call site (the phase-42 never-auto-scroll contract stays intact — `scrollReveal` is still the one page scroll in app.js). The solid `--surface` background, border, radius and shadow are kept so messages scrolling behind the pinned box never show through it, and no z-index is added: DOM order already paints the composer over `.messages`, it never overlaps the sticky header (z 20) and stays under the z-1000 document modal. Phase 65 (2026-09-01, `TODO.md` L3, owner-locked A1): the pin now belongs to the .chat-bottom wrapper (rule below) — the row + this form are ONE sticky unit; this composer's own sticky declaration is kept, redundant inside the wrapper but pinned as a computed style by tests/e2e/test_pinned_composer.py. */ /* Phase 65 (owner-locked A1, 2026-09-01, `TODO.md` L3): the pinned bottom cluster — the .chat-actions row + the #composer form as ONE sticky unit (A1): the pills are literally always at the bottom of the screen, even while the reader is scrolled up through a long conversation (the rejected in-flow alternative would scroll away). The sticky range is the .chat-shell containing block (the wrapper's parent) — the same range the composer used to have alone — and the .messages flex-grow still rests the WHOLE unit at the screen bottom on short chats (the wrapper is the last shell child, so the grow pushes it down). The shell's 1rem gap applies only ABOVE the unit, from .messages — the 0.5rem gap here is the row↔composer spacing INSIDE it. No z-index: the phase-12 sticky header (z 20) and the phase-46 dropdown always stay on top, and at the document bottom the unit settles back into flow above the footer (the composer's opaque surface keeps messages hidden where the box overlaps them). The composer's own sticky rule below stays — redundant here (its containing block is the wrapper, so it cannot shift within the unit), pinned by tests/e2e/test_pinned_composer.py. */ .chat-bottom { display: flex; flex-direction: column; gap: 0.5rem; position: sticky; bottom: env(safe-area-inset-bottom, 0); } /* Phase 88: pre-boot, the composer cluster is NOT sticky. The sticky promotion (a compositor layer) is deferred out of the first layout commit — on real Android, the cluster's sticky layer born at first commit was eating the hamburger's click (owner bug report 2026-09-08; the client-side switch into chat — same layer, born on a settled page — always worked). app.js adds .chat-booted two frames after boot settles; no-JS keeps the cluster static, which in the only no-JS state (empty, 100dvh document) sits exactly where the pin would. */ #view-chat:not(.chat-booted) .chat-bottom, #view-chat:not(.chat-booted) .composer { position: static; } /* Phase 104 (owner 2026-09-12, A4): the question-length counter — right-aligned above the composer, a child of the .chat-bottom sticky unit (between the actions row and the form), hidden until 80% of the 4,000-char cap (app.js updateCharCount). It sits on the APP background behind the transparent .chat-bottom unit, so both pairings are verified against --bg: --ink-soft on --bg = 8.6:1 (≥4.5:1, WCAG AA) and the .is-max state's --err-ink on --bg = 10.4:1 (AA). The .is-max state ALSO changes the copy ("— character limit") — text + color, never color alone (B3). */ .char-count { margin: 0; text-align: right; font-size: 0.75rem; line-height: 1.2; color: var(--ink-soft); } .char-count.is-max { color: var(--err-ink); } /* Phase 123 (task 02, TODO L6): the ATTACH PREVIEW STRIP — the selected image ABOVE the input row (thumbnail ≤48px + the filename + the remove button): a surface card in the .chat-bottom stack, between the char-count line and the composer. The name is ellipsized (AA-safe --ink on --surface = 13.8:1) — a long filename never widens the strip; the thumbnail is a fixed 48px cover box (the preview crops, the bubble shows the whole image); the remove button keeps the 44px touch target (PLAN §7.1) with a destructive hover (--err-ink on --err-bg = 9.3:1 — text + color, never color alone, B3). Hidden by default (the global [hidden] rule) — revealed only while a file is attached, cleared with the send so the strip never lingers into a turn. */ .attach-preview { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.45rem; padding: 0.35rem 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); } .attach-preview-img { flex: none; width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); } .attach-preview-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; color: var(--ink); } .attach-preview-remove { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; min-height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); cursor: pointer; padding: 0; } .attach-preview-remove svg { width: 18px; height: 18px; } .attach-preview-remove:hover { background: var(--err-bg); color: var(--err-ink); } .composer { display: flex; align-items: flex-end; gap: 0.6rem; position: sticky; bottom: env(safe-area-inset-bottom, 0); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.6rem; } .composer:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); } .composer textarea { flex: 1; font: inherit; color: var(--ink); border: 0; resize: none; max-height: 12rem; padding: 0.55rem 0.5rem; background: transparent; } .composer textarea::placeholder { color: var(--ink-soft); } /* Phase 123 (task 02, TODO L6): the composer's ATTACH CONTROL — the paperclip glyph button LEFT of the input. Hidden in the markup until app.js reveals it from the config's images flag (the global [hidden] rule keeps it out of the flag-off DOM — A5's default-off contract). A neutral cut of the .send-btn family: the same 44px hit target + radius + the global :focus-visible ring (PLAN §7.2); surface fill with a muted hover step (the icon: --ink-soft on --surface = 5.1:1, hover --brand-ink on --brand-soft = 12.4:1 — both past the 3:1 non-text floor). */ .attach-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-soft); cursor: pointer; padding: 0; } .attach-btn svg { width: 20px; height: 20px; } .attach-btn:hover { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-ink); } .send-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 84px; min-height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--brand); /* Dark ink on brand (5.2:1) — never white on brand (3.7:1, fails). */ color: var(--bg); font: inherit; font-weight: 700; cursor: pointer; padding-inline: 1rem; } .send-btn:hover:not(:disabled) { background: var(--brand-hover); } .send-btn:disabled { background: var(--brand-busy); cursor: not-allowed; } /* Phase 48 (2026-08-29, TODO.md L3): the in-flight Stop treatment — one button, two roles. --brand-stop (the brand darkened 75% toward --bg; the built-in default mixes to ≈ (187, 50, 73)) with a white label = 5.8:1 (WCAG AA); the hover step (--brand at 55% toward --bg) holds 8.5:1. white is the ONE literal allowed outside :root — the dark bg ink on the stop fill is only ≈3.4:1 (fails AA). Same radius/height/ hit target as the Send state and the shared :focus-visible ring — the .is-stop class rides the same .send-btn element, and the later rules win the hover specificity tie. */ .send-btn.is-stop { background: var(--brand-stop); color: #fff; } .send-btn.is-stop:hover { background: color-mix(in srgb, var(--brand) 55%, var(--bg)); } /* Busy spinner: dark arc (--bg) on the --brand-busy button ≈ 11.3:1 (well above the 9:1 floor the phase-48 note pinned for the arc). */ .spinner { width: 16px; height: 16px; border: 2.5px solid color-mix(in srgb, var(--bg) 30%, transparent); border-top-color: var(--bg); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } } /* ---------- Banners ---------- */ .kb-banner { display: flex; align-items: center; gap: 0.5rem; background: var(--accent-bg); color: var(--accent-ink); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font-size: 0.92rem; font-weight: 600; } .kb-banner.is-error { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); } .kb-banner svg { width: 18px; height: 18px; flex: 0 0 auto; display: block; } /* Phase 53 (task 05): the stale-saved-chat banner — the .kb-banner FAMILY (the section carries both classes: same flex row, accent tokens — accent-ink on accent-bg 9.5:1 — 18px glyph), but the leading mark is the REDO glyph, distinct from the warning triangle. It sits directly after #kb-banner in .chat-shell, so when both are visible the empty-KB banner keeps the top slot and the stale banner stacks directly below (the flex column's gap spaces them). The text takes the row; the Regenerate pill right-aligns (margin-left: auto) and the row wraps only when it must. The pill is the EXACT brand-pill family of Save/Share: solid --brand, --bg text (5.2:1, AA), borderless, 999px radius, ≥44px target, hover lightens the brand fill; the 16px redo glyph is the phase-49 Retry asset. The ≤640px block below makes the pill a full-width row. */ .stale-banner { flex-wrap: wrap; } .stale-banner > span { flex: 1 1 auto; } .stale-regenerate { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; margin-left: auto; padding: 0.5rem 0.9rem; border-radius: 999px; border: 0; background: var(--brand); color: var(--bg); font: inherit; font-weight: 700; font-size: 0.95rem; white-space: nowrap; cursor: pointer; } .stale-regenerate:hover { background: var(--brand-hover); color: var(--bg); } .stale-regenerate:disabled { opacity: 0.6; cursor: wait; } .stale-regenerate svg { width: 16px; height: 16px; display: block; } /* Phase 111 (task 01): the banner Retry button — the same pill treatment as .stale-regenerate (brand fill, ≥44px, 999px radius, redo glyph) so the banner's action reads as the same component family. The kb-banner flex row + gap already handles inline spacing after #kb-banner-text. */ .banner-retry { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; margin-left: auto; padding: 0.5rem 0.9rem; border-radius: 999px; border: 0; background: var(--brand); color: var(--bg); font: inherit; font-weight: 700; font-size: 0.95rem; white-space: nowrap; cursor: pointer; } .banner-retry:hover { background: var(--brand-hover); color: var(--bg); } .banner-retry:disabled { opacity: 0.6; cursor: wait; } .banner-retry svg { width: 16px; height: 16px; display: block; } /* Phase 55 (task 04): the share-success toast (TODO.md L5). Top-right, just under the sticky header (--header-h + a small offset — the variable already steps 64px → 58px at ≤640px), z-index 1000 (the modal overlay contract — above the header's 20 and the skip-link's 100). VISUAL ONLY (A4 owner-locked): the node ships aria-hidden from app.js — #send-status stays the a11y announcer (no double screen-reader read). Solid brand fill: --bg text on --brand = 5.2:1 (AA — the .new-chat-btn family); rounded, shadowed, one line of text that wraps under the small max-width. Hidden by default (opacity 0 + pointer-events: none — it never intercepts clicks when idle); .toast.is-visible (toggled by showToast) runs the entry: slide-down + fade (translateY(-8px) → 0, 200ms). */ .toast { position: fixed; top: calc(var(--header-h) + 0.75rem); right: 1rem; z-index: 1000; max-width: min(22rem, calc(100vw - 2rem)); padding: 0.6rem 1rem; border-radius: var(--radius-sm); background: var(--brand); color: var(--bg); font-size: 0.92rem; font-weight: 600; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 200ms ease, transform 200ms ease; } .toast.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { /* No slide: BOTH states rest at transform: none (the .is-visible rule would otherwise out-specify the bare .toast); the opacity fade remains (120ms). */ .toast, .toast.is-visible { transform: none; } .toast { transition: opacity 120ms ease; } } /* ---------- Login page (phase 16) ---------- */ /* Centered card in the standard frame: one admin, one password. */ .login-shell { display: flex; justify-content: center; flex: 1; } .login-card { width: 100%; max-width: 26rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem 2rem 2.25rem; } .login-card h1 { margin: 0 0 0.4rem; font-size: 1.6rem; } .login-sub { margin: 0 0 1.5rem; color: var(--ink-soft); } #login-form { display: flex; flex-direction: column; gap: 0.75rem; } #login-password { font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; min-height: 44px; } #login-password:focus-visible { border-color: var(--brand); } /* Brand button: dark ink on brand 5.2:1 (never white on brand). */ .login-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--brand); color: var(--bg); font: inherit; font-weight: 700; cursor: pointer; padding-inline: 1rem; } .login-submit:hover:not(:disabled) { background: var(--brand-hover); } .login-submit:disabled { opacity: 0.6; cursor: wait; } /* Login failure (role=alert): err pair ≈9.1:1. */ .login-error { margin: 0.9rem 0 0; background: var(--err-bg); color: var(--err-ink); border: 1px solid var(--err-line); border-radius: var(--radius-sm); padding: 0.5rem 0.8rem; font-size: 0.9rem; font-weight: 600; } /* ---------- Sources page ---------- */ .sources-shell { display: flex; flex-direction: column; gap: 1.25rem; flex: 1; } /* Phase 93 task 03 (TODO.md L3): "the header and description of each page needs a background - the grid makes it hard to read." Every page's h1 + description sits on a solid surface panel — the house card language (var(--surface) fill, itself tab-controlled, so a monochrome theme grays it automatically; the 1px --line border; the house radius). No new color literal, no blur (the phase-08 perf anchor). One rule covers the six shell views' .page-head (Global Tuning, Knowledge base, Git sources, Saved chats, Access tokens, Theme) + doc-edit.html, and the shared page's head (its h1 + lede are wrapped in the same class in shared.html). #view-chat carries no .page-head — its head is the navbar (audited, unchanged). The History page-head keeps its flex row (scoped below — the padding lives on the flex container, not the children). */ .page-head { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; } .page-head h1 { margin: 0 0 0.25rem; font-size: 1.7rem; } .page-head-row { display: flex; align-items: center; gap: 1rem; } .page-sub { margin: 0; color: var(--ink-soft); } .page-sub code { font-family: var(--mono); font-size: 0.85em; background: var(--brand-soft); padding: 0.1em 0.35em; border-radius: 5px; } /* ---------- Sync button (Sources page) ---------- */ .sync-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font: inherit; font-weight: 600; font-size: 0.95rem; white-space: nowrap; cursor: pointer; flex-shrink: 0; } .sync-btn:hover { background: var(--brand-soft); color: var(--brand-ink); } .sync-btn:disabled { opacity: 0.6; cursor: wait; } .sync-btn.is-error { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); } .sync-btn.is-error:hover { background: var(--err-bg); color: var(--err-ink); } .sync-icon { width: 16px; height: 16px; display: block; flex: 0 0 auto; } .sync-btn .sync-icon.is-spinning { animation: spin 1s linear infinite; } @media (prefers-reduced-motion: reduce) { .sync-btn .sync-icon.is-spinning { animation: none; } } /* Phase 64: the live-file label ("Syncing… (n/m)" / "Importing (n/m)") — a long source/relative/path ellipsizes inside the pill; the full path lives in the button title + #sync-result (the aria-live announcer). */ .sync-label { display: inline-block; max-width: min(16rem, 40vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* Last-result announcer — soft ink, small mono */ .sync-result { display: block; color: var(--ink-soft); font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; padding-block: 0.5rem; } /* Sync failure modal — lazily created by sources.js, appended to . Error surface: --err-bg with --err-line border, title in --ink, error text in --err-ink (9.1:1 on --err-bg). Backdrop dims with --bg at 82%. z-index 1000 (same overlay contract as doc-modal). */ .sync-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: color-mix(in srgb, var(--bg) 82%, transparent); visibility: hidden; opacity: 0; transition: opacity 120ms ease; } .sync-modal-backdrop.is-open { visibility: visible; opacity: 1; } .sync-modal { position: relative; width: 100%; max-width: 28rem; background: var(--err-bg); border: 1px solid var(--err-line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.1rem 3rem 1.25rem 1.25rem; } #sync-modal-title { margin: 0 0 0.6rem; font-size: 1.1rem; color: var(--ink); } #sync-modal-error { margin: 0 0 1rem; font-family: var(--mono); font-size: 0.9rem; color: var(--err-ink); overflow-wrap: anywhere; } .sync-modal-close { position: absolute; top: 0.3rem; right: 0.3rem; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border-radius: 999px; border: 1px solid var(--err-line); background: transparent; color: var(--err-ink); font-size: 1.2rem; line-height: 1; cursor: pointer; } .sync-modal-close:hover { background: color-mix(in srgb, var(--err-line) 15%, transparent); } @media (prefers-reduced-motion: reduce) { .sync-modal-backdrop { transition: none; } } .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem; } .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.15rem; } /* Mono stat values — technical readout (phase 08). */ .stat-value { font-family: var(--mono); font-size: 2rem; font-weight: 800; color: var(--brand-ink); line-height: 1.1; } .stat-value-sm { font-size: 1.15rem; font-weight: 700; } .stat-label { color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; } /* Phase 16: anonymous sign-in gate — the designed replacement for the catalog (stat cards + table) until the admin signs in. */ .sources-gate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.5rem 1.75rem; } .sources-gate-glyph { color: var(--brand-ink); width: 44px; height: 44px; } .sources-gate-glyph svg { width: 44px; height: 44px; display: block; } .sources-gate h2 { margin: 0.6rem 0 0.3rem; font-size: 1.4rem; } .sources-gate-sub { margin: 0 auto; max-width: 30rem; color: var(--ink-soft); } .sources-gate-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 0.75rem; padding: 0.5rem 1.4rem; border-radius: 999px; background: var(--brand); color: var(--bg); /* dark ink on brand: 5.2:1 */ font-weight: 700; text-decoration: none; } .sources-gate-link:hover { background: var(--brand-hover); } /* Phase 79 (task 05): the in-app token gate — the gate surface of the two token-only pages (the shell + the document viewer, one shared .auth-gate markup each). A body-level FIXED overlay (the body-level doc-modal precedent): while visible it is the only CONTENT-level interactive surface — assets/token-gate.js locks the root (#main, inert) so focus and keyboard traversal stay inside the gate (WCAG, the inert-pair contract). Stacking (phase 85, TODO.md L3): z-index 15 — ABOVE all app content (static) but BELOW the sticky header (20) and its mobile dropdown (21, inside the header's stacking context): the unauthenticated visitor keeps a reachable hamburger + menu while the gate still covers and locks the app content (#main stays inert — the lock is JS, not z-order — phase 79). The skip-link (100) and the 1000-family overlays (doc-modal, sync backdrop) are unaffected — all above 15; the doc-modal can only be opened from the unlocked app anyway. Solid --bg: the canvas + grid texture live on (the body stays transparent), so the overlay reads as the app's own surface — no blur (the phase-08 perf anchor). The centered card reuses the #sources-gate visual language (surface card + hairline + glyph + heading + sub + action) in a tighter column. */ .auth-gate { position: fixed; inset: 0; z-index: 15; display: flex; /* the card is the only in-flow child — margin: auto centers it */ overflow-y: auto; /* short viewports: the card scrolls fully into view */ background: var(--bg); } /* Explicit (the global [hidden] rule already wins — this is the documented, testable contract for the skeleton). */ .auth-gate[hidden] { display: none; } .auth-gate-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; /* margin:auto centers AND stays scrollable on overflow (the flex centering pitfall: align/justify center would clip the top of a taller-than-viewport card). */ margin: auto; width: min(28rem, calc(100vw - 2rem)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.5rem 1.75rem; } .auth-gate-glyph { color: var(--brand-ink); width: 44px; height: 44px; } .auth-gate-glyph svg { width: 44px; height: 44px; display: block; } .auth-gate h2 { margin: 0.6rem 0 0.3rem; font-size: 1.4rem; } .auth-gate-sub { margin: 0; max-width: 24rem; color: var(--ink-soft); } /* The token form: mono input (the token is code — the house mono language), a visible focus ring (WCAG — the 3px :focus-visible outline at offset 0 + the brand border), and the house submit button (the .tune-save language: dark ink on brand, 5.2:1). Both targets are ≥44px (the touch-target contract). */ .auth-gate form { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; margin-top: 0.9rem; } .auth-gate input { font-family: var(--mono); font-size: 0.95rem; color: var(--ink); /* 16.7:1 on --bg */ background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.65rem 0.8rem; min-height: 44px; width: 100%; } .auth-gate input::placeholder { color: var(--ink-soft); } .auth-gate input:focus-visible { outline-offset: 0; border-color: var(--brand); } .auth-gate-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.4rem 1.1rem; border: 0; border-radius: var(--radius-sm); background: var(--brand); color: var(--bg); /* dark ink on brand: 5.2:1 */ font: inherit; font-weight: 700; cursor: pointer; } .auth-gate-submit:hover:not(:disabled) { background: var(--brand-hover); } .auth-gate-submit:disabled { opacity: 0.6; cursor: wait; } /* The one-line error (role=alert) — the rose/danger family the house alerts use (--err-ink on --err-bg, 9.3:1). */ .auth-gate-error { margin: 0.75rem 0 0; background: var(--err-bg); color: var(--err-ink); border: 1px solid var(--err-line); border-radius: var(--radius-sm); padding: 0.45rem 0.8rem; } /* The secondary "Sign in as admin" link reuses the .sources-gate-link pill language (its own margin-top: 0.75rem applies) — the guest's other door: the admin password login (the static ?next=/ is the no-JS fallback). */ /* Phase 86: the card is the containing block for the position:absolute .visually-hidden elements it hosts (the table