/* Mycroft Portal v2 -- Stylesheet * * Design tokens from Council of Elrond consultation: * - Primary: #22A7F0 (Mycroft Blue) * - Accent: #FFC300 (Gold) * - Typography: Inter (body), Fira Code (code) * - Icons: Lucide (inline SVG) * - Layout: Bottom nav mobile, icon-rail desktop * * Docs view uses a mobile-first approach: document list is the * default view on mobile, tapping a doc switches to detail view * with a back button. */ /* === CSS Custom Properties (Design Tokens) === */ :root { /* Colors -- Light Mode (default) — Provost/cockpit grey palette */ --color-primary: #22A7F0; --color-primary-dark: #0f7fc4; --color-primary-light: #e8f4fb; --color-secondary: #005B91; --color-accent: #FFC300; --color-accent-dark: #E0AB00; /* Part A: grey (NOT white) light palette */ --color-bg: #c3cdd8; /* backdrop field base — never used directly on body; body uses the CSS gradient */ --orb-backdrop: #c3cdd8; /* light mode: matches light body gradient top stop — orb sits on grey field, no box */ --color-surface: #F1F3F4; --color-surface-hover: #E9ECEF; --color-border: #D6DADC; --color-border-light: #D6DADC; --color-text: #1c2733; --color-text-secondary: #4a5a6b; --color-text-muted: #6C7A89; /* Chat bubble colors — on dark glass panel, text must be light */ --color-bubble-user: #22A7F0; --color-bubble-user-text: #FFFFFF; --color-bubble-ai: rgba(255,255,255,0.10); --color-bubble-ai-text: #e8f0f8; --color-success: #22C55E; --color-warning: #F59E0B; --color-danger: #EF4444; /* Typography — Noto Sans per farm brand (fallback chain: Segoe UI → Inter → Helvetica Neue → Arial) */ --font-body: 'Noto Sans', 'Segoe UI', 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-code: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; /* Layout */ --header-height: 56px; --bottomnav-height: 56px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; /* T32: af-card drop shadow — visible on both light and dark backgrounds */ --af-card-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.14); } /* === Dark Mode === */ [data-theme="dark"] { --color-primary: #22A7F0; --color-primary-dark: #78C3EE; --color-primary-light: #1a3a4a; --color-secondary: #78C3EE; --color-bg: #1c2733; --orb-backdrop: #16212e; /* dark mode: EXACT match to dark body gradient darkest stop — byte-identical to wall */ --color-surface: #1a2430; --color-surface-hover: #243040; --color-border: #2d3d4e; --color-border-light: #243040; --color-text: #E0E0E0; --color-text-secondary: #AAAAAA; --color-text-muted: #777777; /* T32: af-card drop shadow — heavier for dark mode visibility */ --af-card-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35); /* Dark mode chat on dark glass — still readable */ --color-bubble-user: #1B8BC7; --color-bubble-user-text: #FFFFFF; --color-bubble-ai: rgba(255,255,255,0.07); --color-bubble-ai-text: #c8d8ea; } /* === Base Reset & Typography === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; /* Match the app backdrop so the area revealed when the mobile keyboard opens (below ) is never the browser's default WHITE. The product owner 2026-07-23: "white patch appearing from the bottom" on input focus. */ background: var(--color-bg); } body { font-family: var(--font-body); font-size: var(--font-size-base); line-height: 1.6; color: var(--color-text); /* Part B: 3D depth backdrop field — light mode silver-blue depth field */ background: radial-gradient(1300px 900px at 16% 6%, rgba(34,167,240,0.22), transparent 60%), radial-gradient(1100px 820px at 88% 94%, rgba(64,219,176,0.18), transparent 60%), radial-gradient(1000px 760px at 60% 48%, rgba(44,62,80,0.10), transparent 70%), linear-gradient(160deg, #c3cdd8 0%, #b6c3d1 45%, #aeb9c6 100%); background-attachment: fixed; overflow: hidden; height: 100vh; /* fallback */ height: 100dvh; /* dynamic viewport — see #app note */ width: 100vw; } /* Part B: Dark mode backdrop field — same radial glows over dark navy base */ [data-theme="dark"] body { background: radial-gradient(1300px 900px at 16% 6%, rgba(34,167,240,0.22), transparent 60%), radial-gradient(1100px 820px at 88% 94%, rgba(64,219,176,0.18), transparent 60%), radial-gradient(1000px 760px at 60% 48%, rgba(44,62,80,0.10), transparent 70%), linear-gradient(160deg, #16212e 0%, #10212e 100%); background-attachment: fixed; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } code, pre { font-family: var(--font-code); font-size: var(--font-size-sm); } pre { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: var(--space-4); overflow-x: auto; margin: var(--space-4) 0; } code:not(pre code) { background: var(--color-surface); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; } /* === App Layout === */ #app { display: flex; height: 100vh; /* fallback */ height: 100dvh; /* mobile Chrome: track the DYNAMIC viewport (URL bar + keyboard) so the app is exactly the VISIBLE height — 100vh is the URL-bar-HIDDEN (large) height, which made the fixed composer land below the visible bottom (gap) and the header shift off-screen on send. The product owner 2026-07-24. */ width: 100vw; overflow: hidden; background: transparent; } .theme-toggle { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: none; border: 1px solid var(--color-border-light); color: var(--color-text-secondary); cursor: pointer; font: inherit; font-size: var(--font-size-sm); width: 100%; transition: all var(--transition-fast); } .theme-toggle:hover { background: var(--color-surface-hover); } .theme-toggle svg { width: 16px; height: 16px; } /* --- Main Content --- */ .main-content { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100vh; /* fallback */ height: 100dvh; /* dynamic viewport — see #app note */ overflow: hidden; min-width: 0; width: 100%; /* Transparent — the body backdrop field shows through */ background: transparent; } /* Portal v2: no sidebar — the chat canvas is a single focused column, centered on the page, full screen width up to a comfortable reading max-width. */ .main-content > .view { width: 100%; margin: 0 auto; } .view { display: none; flex: 1; overflow: hidden; flex-direction: column; } .view.active { display: flex; } /* Removed views (terminal, tasks folded into chat): never show regardless of .active */ .view--removed, .view--removed.active { display: none !important; } /* Terminal overlay — floats over the working area while #view-chat stays active. Mirrors the panel-full pattern (position:fixed, z-index between stage and modals). Left edge starts at 56px (icon-rail width) so the rail stays visible + clickable. Hidden by default via .view--removed; toggled by .terminal-overlay-open class (added/removed by openTerminalOverlay / closeTerminalOverlay in app.js). */ #view-terminal.terminal-overlay-open { display: flex !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 56px !important; /* icon-rail width — keep rail visible */ width: auto !important; height: auto !important; flex-direction: column !important; z-index: 200; /* above orb(2), stage(4), panel-full(50), below modals(1000) */ background: rgba(14, 20, 30, 0.97); border-left: 1px solid rgba(34, 167, 240, 0.40); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); overflow: hidden; } /* On mobile (rail hidden), terminal overlay goes edge-to-edge */ @media (max-width: 768px) { #view-terminal.terminal-overlay-open { left: 0 !important; } } /* Close button inside the terminal overlay header */ .terminal-overlay-close { display: flex; align-items: center; justify-content: flex-end; padding: var(--space-2) var(--space-4); border-bottom: 1px solid rgba(34, 167, 240, 0.20); gap: var(--space-3); flex-shrink: 0; } .terminal-overlay-close-btn { background: none; border: 1px solid rgba(34, 167, 240, 0.35); border-radius: var(--radius-md); color: var(--color-text-muted); cursor: pointer; padding: var(--space-1) var(--space-3); font-size: var(--font-size-sm); font-family: var(--font-body); display: flex; align-items: center; gap: var(--space-2); transition: background 160ms, border-color 160ms, color 160ms; } .terminal-overlay-close-btn:hover { background: rgba(34, 167, 240, 0.12); border-color: rgba(34, 167, 240, 0.60); color: var(--color-text); } /* --- Mobile Header --- */ .mobile-header { display: none; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-border); min-height: var(--header-height); } .mobile-header .sidebar-portrait { width: 32px; height: 32px; } .mobile-header .sidebar-title { font-size: var(--font-size-base); } /* --- Bottom Nav (Mobile) --- */ .bottom-nav { display: none; background: var(--color-surface); border-top: 1px solid var(--color-border); min-height: var(--bottomnav-height); } .bottom-nav-inner { display: flex; justify-content: space-around; align-items: center; height: 100%; } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-2); color: var(--color-text-muted); cursor: pointer; border: none; background: none; font: inherit; font-size: var(--font-size-xs); min-width: 44px; min-height: 44px; justify-content: center; transition: color var(--transition-fast); } .bottom-nav-item.active { color: var(--color-primary); } .bottom-nav-item svg { width: 22px; height: 22px; } /* === Chat View === */ .chat-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .chat-header { padding: var(--space-2) var(--space-4); padding-left: 80px; /* Room for the orb on the left */ display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); /* A GRADIENT FADE, NOT A BAR, AND NOT NOTHING EITHER. Opaque in the page's own base colour at the very top, through ~70% at the midpoint, to fully transparent by the bottom of the header's own box. No border, no divider, no hard edge anywhere -- transcript scrolling up simply fades out of visibility instead of meeting a line. Flat `transparent` (what this was) is the other failure: the icons then sit on whatever message happens to be behind them and stop being legible. The opaque top of this fade is the ground they stand on. The extra bottom padding is load-bearing, not spacing: the fade needs vertical room to happen BELOW the icon row, or it compresses into a visible band right behind the icons -- which is the "there is something there" this replaces. */ background: none; padding-bottom: var(--space-6, 32px); color: #e8f0f8; min-height: 48px; /* An OVERLAY, not a flow item. Absolutely positioned over the scroller so the transcript passes underneath and fades, rather than starting below a reserved strip. .chat-messages reserves matching padding-top so the first message is never born underneath it. z-index sits above the composer (151) and the minimap (100) but below modals (200): any dropdown opened from a header icon lives inside this element, and a child's z-index cannot escape its parent's stacking context -- so the header itself has to outrank anything it must appear over. */ position: absolute; top: 0; left: 0; right: 0; z-index: 160; } /* ---- Option A shell: robot-eyes header ---- */ /* Wrapper: agent name only (name-only after #58 — the eyes/orb live in #orbHero and travel into chat via the orb-chat-docked CSS transform, NOT through this element). Sits in grid COLUMN 1, LEFT-aligned on every width. NOTE (#58 guardrail): the orb target is #orbHero (position:absolute, centered in orb-chat-docked) and is unaffected by this element's grid placement — moving the NAME left does not move the orb. */ .robot-eyes-header { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; text-align: left; /* Keep the header click-through active for tap-to-raise (#89) — no pointer-events override; canvas is a plain element, clicks bubble up */ } /* Dot + name row: inline flex row below (formerly: below the eyes canvas) */ .companion-name-row { display: flex; flex-direction: row; align-items: center; gap: 6px; position: relative; /* stacking context; z-index:1 keeps it above any future siblings */ z-index: 1; } /* Agent name (name-only after #58 — header eyes + orb retired): Noto Sans ≥16px, white — WCAG AA on dark header */ .robot-eyes-header .companion-badge-name { font-family: var(--font-body, 'Noto Sans', sans-serif); font-size: 1.25rem; font-weight: 600; /* NOT italic (reverted by request). It used to be, mirrored from the plain .companion-badge-name rule below -- but italic's rightward glyph slant pushed the trailing letter past this element's max-width, and overflow:hidden clipped it (e.g. "Cujo" losing its final "o") even on names nowhere near actually needing truncation. font-style is set explicitly here (not just left to inherit 'normal') because this selector is the more specific of the two, so it's the one that actually governs the header instance -- an italic left set on the plain rule would otherwise silently win here via specificity if this block didn't say otherwise. */ font-style: normal; color: #FFFFFF; /* White — passes AA on dark header */ white-space: nowrap; /* Raised with the font size. This cap plus text-overflow:ellipsis is what stops a long agent name pushing the header layout around, so it has to grow in step -- left at 200px, a name that fitted at 1rem starts truncating at 1.25rem for no reason the reader can see. */ max-width: 260px; overflow: hidden; text-overflow: ellipsis; } /* Belt-and-suspenders: ID-level specificity (1,1,0) overrides any cascade reset */ .robot-eyes-header #companionName { color: #FFFFFF; } [data-theme="light"] .robot-eyes-header .companion-badge-name { color: #22A7F0; /* Mycroft Blue passes AA on light header too */ } @media (max-width: 768px) { .robot-eyes-header { justify-self: start; align-items: flex-start; } } /* ---- / Option A shell ---- */ .chat-header-title { font-size: var(--font-size-base); font-weight: 600; color: #e8f0f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Chat header left column: identity badge + companion bar ---- */ /* Identity badge: compact pill — colored ball + agent name (direct child of .chat-header grid, col-1) */ .companion-badge { grid-column: 1; margin-bottom: 2px; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; background: rgba(44,62,80,0.70); /* Navy semi-transparent */ border: 1px solid rgba(34,167,240,0.25); border-radius: 20px; padding: 3px 10px 3px 5px; max-width: 100%; overflow: hidden; } [data-theme="light"] .companion-badge { background: rgba(44,62,80,0.12); border-color: rgba(34,167,240,0.30); } /* Colored ball — background-color set dynamically by initAgentName() */ .companion-badge-ball { display: inline-block; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; /* Fallback color until JS sets it */ background-color: #22A7F0; } /* Agent name label */ .companion-badge-name { font-family: var(--font-body, 'Noto Sans', sans-serif); font-size: 0.78rem; font-weight: 600; /* NOT italic (reverted by request -- see .robot-eyes-header .companion-badge-name's own comment for why: italic clipped the trailing letter of short names against this element's overflow box). The only place this class currently renders is nested inside .robot-eyes-header, where that more specific rule already governs and wins by specificity -- kept in sync here anyway in case anything ever renders this class on its own. */ font-style: normal; color: #e8f0f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } [data-theme="light"] .companion-badge-name { color: #2C3E50; } /* ---- Companion bar (inc1a): 4 app-icon buttons in col-1 of the chat header ---- */ /* Fix B: wrap bar in a grouped rail container so it reads as a deliberate launcher. Hidden by default (splash S0 state); revealed in chat via .orb-chat-docked on #view-chat, which enterChat() adds and enterSplash() removes — no inline style needed. */ .companion-bar { display: none; /* splash: hidden; enterChat() reveals via .orb-chat-docked */ flex-direction: row; align-items: center; gap: 8px; /* Fix B: wider inter-icon spacing */ /* Grouped container: faint rounded pill */ background: rgba(34,167,240,0.08); border: 1px solid rgba(34,167,240,0.22); border-radius: 10px; padding: 3px 6px; /* Stays within col-1; no overflow into center/right columns */ overflow: hidden; flex-shrink: 0; } /* Chat state: orb docked to header band → show the companion bar */ .orb-chat-docked .companion-bar { display: flex; } [data-theme="dark"] .companion-bar { background: rgba(34,167,240,0.10); border-color: rgba(34,167,240,0.28); } .app-icon-btn { display: flex; align-items: center; justify-content: center; width: 36px; /* Fix B: enlarged from 32px */ height: 36px; padding: 0; border: none; border-radius: 7px; background: none; /* Fix B: lifted resting contrast — was 0.55 opacity muted, now clearly visible */ color: rgba(232,240,248,0.78); cursor: pointer; flex-shrink: 0; transition: background var(--transition-fast, 120ms ease), color var(--transition-fast, 120ms ease); font-family: var(--font-body, 'Noto Sans', sans-serif); } /* Fix B: light-mode resting icon contrast */ [data-theme="light"] .app-icon-btn { color: rgba(44,62,80,0.72); } .app-icon-btn svg { width: 20px; /* Fix B: enlarged from 18px */ height: 20px; pointer-events: none; } .app-icon-btn:hover { background: rgba(34,167,240,0.16); color: #e8f0f8; } [data-theme="dark"] .app-icon-btn:hover { background: rgba(34,167,240,0.20); } [data-theme="light"] .app-icon-btn:hover { background: rgba(34,167,240,0.18); color: #1c2733; } /* Active state: solid Mycroft Blue pill — unmistakably active (Fix A) */ .app-icon-btn.active { background: #22A7F0; color: #fff; /* Secondary cue: bottom border accent so state never relies on color alone */ box-shadow: 0 2px 0 0 rgba(255,255,255,0.55), inset 0 0 0 1px rgba(255,255,255,0.20); } [data-theme="dark"] .app-icon-btn.active { background: #22A7F0; color: #fff; box-shadow: 0 2px 0 0 rgba(255,255,255,0.40), inset 0 0 0 1px rgba(255,255,255,0.15); } /* ---- Media player (T64 + T-player) — adaptive media transport, top-right of the chat header ---- Absorbed the old Universal Remote (#urControls, formerly in the companion bar): same button/icon classes, same show/hide-on-media-activity behavior, now with prev/next track transport added alongside play/pause/mute/volume. */ /* Persistent control bar (customer feedback 2026-07-19: "should persist and not disappear, always stay") — display:none is the pre-load state only; initUniversalRemote() adds .ur-visible at page load and never removes it again. Idle (nothing loaded) reads via disabled controls below, not via hiding the bar. */ #mediaPlayer { display: none; flex-direction: row; align-items: center; gap: 4px; flex-shrink: 0; } #mediaPlayer.ur-visible { display: flex; } /* Hidden per the product owner 2026-07-23: the media player has no purpose until the audio-emit feature (daemon ui.card.audio, cm-sandbox) is wired — that work is deferred — and the bar was overlapping the "Companion" header name on mobile + eating space. This supersedes the 2026-07-19 "player always visible" directive per the customer's new call. REVERSIBLE: delete this one rule to restore the player once audio emit ships. */ #mediaPlayer, #mediaPlayer.ur-visible { display: none !important; } /* Vertical divider between app icons and the remote */ .ur-divider { width: 1px; height: 22px; background: rgba(34,167,240,0.35); border-radius: 1px; margin: 0 2px; flex-shrink: 0; } /* Remote action buttons — match app-icon-btn sizing/shape */ .ur-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 7px; background: none; color: rgba(232,240,248,0.78); cursor: pointer; flex-shrink: 0; transition: background var(--transition-fast, 120ms ease), color var(--transition-fast, 120ms ease); font-family: var(--font-body, 'Noto Sans', sans-serif); } [data-theme="light"] .ur-btn { color: rgba(44,62,80,0.72); } .ur-btn:hover { background: rgba(34,167,240,0.16); color: #e8f0f8; } [data-theme="light"] .ur-btn:hover { background: rgba(34,167,240,0.18); color: #1c2733; } .ur-btn svg { width: 16px; height: 16px; pointer-events: none; } /* Prev/next: disabled when there's no adjacent track to step to (single/no audio track in the transcript) — see _syncTrackButtons() in face-integration.js */ .ur-btn:disabled { color: rgba(232,240,248,0.28); cursor: default; pointer-events: none; } [data-theme="light"] .ur-btn:disabled { color: rgba(44,62,80,0.25); } /* Play/Pause icon toggling: show play when paused, pause when playing */ #urPlayPause .ur-icon-pause { display: none; } #urPlayPause .ur-icon-play { display: block; } #urPlayPause.ur-playing .ur-icon-pause { display: block; } #urPlayPause.ur-playing .ur-icon-play { display: none; } /* Mute icon toggling: show unmuted icon by default, muted icon when muted */ #urMute .ur-icon-muted { display: none; } #urMute .ur-icon-unmuted { display: block; } #urMute.ur-muted .ur-icon-muted { display: block; } #urMute.ur-muted .ur-icon-unmuted { display: none; } /* Volume slider — compact inline range input */ .ur-volume { -webkit-appearance: none; appearance: none; width: 68px; height: 4px; border-radius: 2px; background: rgba(34,167,240,0.30); outline: none; cursor: pointer; flex-shrink: 0; accent-color: #22A7F0; /* Provide non-color cue (label + border) per brand: never color-only state */ border: 1px solid rgba(34,167,240,0.22); } .ur-volume::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #22A7F0; cursor: pointer; } .ur-volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #22A7F0; border: none; cursor: pointer; } [data-theme="light"] .ur-volume { background: rgba(34,167,240,0.22); } /* Idle player (nothing loaded) — greyed to match .ur-btn:disabled instead of the whole bar hiding (customer feedback 2026-07-19). */ .ur-volume:disabled { opacity: 0.4; cursor: default; } /* Center column: panel toggle + status stacked vertically. grid-column:2 pins this to the centered `auto` grid column so the chevrons sit on the SAME row as the name (defect c) and are horizontally CENTERED in the header bar (defect b). Previously robot-eyes-header spanned 1/-1 and shoved this onto a 2nd row landing ~left. */ .chat-header-center { display: flex; flex-direction: row; align-items: center; gap: 12px; } /* T89 (2c): Chat header must sit above the spotlight overlay (z:150) and the pinned input (z:151) so the maximize control is NEVER covered. position:relative is needed for z-index to take effect. */ #view-chat .chat-container .chat-header { /* MUST repeat the overlay positioning from the base .chat-header rule. This selector is more specific, so a bare `position: relative` here silently defeats the base rule's `position: absolute` -- the header goes back to being a flow item, the transcript starts below it instead of scrolling under it, and .chat-messages' matching padding-top then reserves space for a header that is not overlaying anything: a dead strip at the top with the fade painted over it. */ position: absolute; top: 0; left: 0; right: 0; z-index: 200; } /* Agent status display — center of chat header */ .agent-status-display { font-size: var(--font-size-xs); color: rgba(200,215,230,0.70); white-space: nowrap; text-align: center; min-height: 14px; letter-spacing: 0.01em; transition: opacity var(--transition-normal); } .agent-status-display:empty { /* idle: invisible AND zero vertical footprint so the empty status span never forces the header taller than the single chevron row (defect c — reclaim the wasted double-height). When status has text it renders normally below the chevrons. */ opacity: 0; min-height: 0; height: 0; margin: 0; overflow: hidden; } .session-selector { font-size: var(--font-size-sm); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; } .chat-messages { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); /* T-input-occlusion fix: 140px was a guess at the fixed .chat-input-area's real rendered height + the typing-indicator's reserved space. Measured live it was NOT enough (input real height + raise-wrapper + glow exceeds 140px on real viewports), so the last message's bottom edge rendered UNDER the input. --chat-input-clearance is now computed live by updateChatLayoutClearance() in app.js from actual getBoundingClientRect() numbers (input top vs. chat-messages bottom, plus the typing indicator's own height) and kept in sync on resize / panel-level change / show-typing. 140px stays as the pre-JS fallback so layout isn't broken before first paint. */ padding-bottom: var(--chat-input-clearance, 140px) !important; /* Top reserve for the header, which is now an absolutely-positioned overlay rather than a flow item -- without this the first message is born underneath it instead of below it. The value is the header's own height (48px min + its vertical padding) plus its fade, so a message has cleared the gradient entirely before it reaches the icons. Deliberately NOT tight: the fade is meant to catch a message on its way past, not to be the exact line where content starts. */ padding-top: 104px; display: flex; flex-direction: column; align-items: center; /* Bottom-anchor (the product owner 2026-07-23): short/first message sits at the BOTTOM, transcript grows upward (iMessage-style). Implemented via the `::before` spacer with margin-top:auto (below) — NOT justify-content:flex-end, which BREAKS upward scrolling once content overflows: flex-end pushes the top of the content out of the scrollable area and it becomes unreachable (the product owner 2026-07-24: "unable to go up"). The auto-margin spacer bottom-anchors when short and collapses to 0 when content overflows, so scroll-to-top works. */ gap: var(--space-4); background: transparent; min-height: 120px; } /* Bottom-anchor spacer (replaces justify-content:flex-end — see .chat-messages note). margin-top:auto absorbs free space ABOVE the transcript when it's shorter than the viewport (pushing messages to the bottom), and collapses to 0 once content overflows so the user can scroll all the way to the top. */ .chat-messages::before { content: ''; margin-top: auto; } .chat-messages::after { display: none; } /* ========================================================= Portal v2: Chat Date Minimap (DeepSeek style) ========================================================= */ /* Outer: sized to the transcript pane, pointer-events:none ALWAYS -- must never block clicks on messages behind it, far from the ticks. Centered with top:0;bottom:0;display:flex;align-items:center rather than the previous top:50%;transform:translateY(-50%) -- that transform is harmless on its own today (nothing here is position:fixed) but is exactly the pattern that silently breaks a position:fixed DESCENDANT's containing block if one is ever added inside this stack later. Avoiding the pattern now means that trap can't recur. */ .chat-minimap-outer { position: absolute; top: 0; bottom: 0; right: 8px; display: flex; align-items: center; z-index: 100; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .chat-minimap-outer.minimap-visible { opacity: 1; } /* Middle: sized to just popup + gap + strip (NOT the full outer height/ width) -- this is the ONE element with real hover detection. Because the gap between the popup and the strip is INSIDE this box, moving the cursor across that gap never fires mouseleave on either side, which is what caused the popup to flicker shut when this was two separate hoverable elements. */ .chat-minimap-hover-region { display: flex; align-items: center; gap: 10px; pointer-events: auto; } .chat-history-panel { display: flex; flex-direction: column; gap: 2px; /* CLOSED STATE IS width:0, NOT just opacity:0 -- and width/padding are NOT in the transition list below (they snap instantly, opacity/ transform still animate for the fade). This is load-bearing, not cosmetic: before this, the panel reserved its full 340px of layout width even while invisible, which made .chat-minimap-hover-region's real hit-testing box (pointer-events:auto) a ~350px-wide invisible strip sitting over the message transcript -- hovering anywhere in that dead zone (nowhere near the actual tick strip) silently opened the popup, AND intercepted clicks meant for messages underneath before they ever reached them. That was the "very easy to mistap, opens when I'm nowhere near the strip" bug. Collapsing width to 0 when closed means the hover-region's box IS the tick strip's real box -- hovering only opens it when the cursor is actually over the strip, and there's no invisible click-eating area left. Width snapping (not transitioning) matters too: a slow width transition means the hit-box lags behind the mouse while opening, so a fast mouse move from strip toward the popup can end up briefly outside the (still-growing) box mid-transition and self-cancel via mouseleave -- snapping avoids that race entirely. */ width: 0; max-height: 60vh; /* Split, not `overflow: hidden` -- that killed vertical scrolling inside the day list entirely (found live: "there's no scroll on the minimap anymore"). overflow-x stays hidden so content doesn't peek out sideways while width is animating/collapsed; overflow-y stays auto so the list scrolls once it's open and taller than max-height. */ overflow-x: hidden; overflow-y: auto; padding: 0; box-sizing: border-box; border-radius: 16px; /* Same frosted-glass tint as .chat-input-wrapper (the composer) -- sheen gradient + translucent navy + blur, not a flat dark fill. */ background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0) 100%), rgba(20, 30, 44, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); opacity: 0; pointer-events: none; transform: translateX(6px); transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.2, 0, 0, 1); /* Modern inset scrollbar -- thin, rounded, only visible where it overlaps content rather than reserving a hard gutter (Firefox); WebKit gets the equivalent via the rules below since it doesn't support `scrollbar-width`/`scrollbar-color`. */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; } .chat-history-panel::-webkit-scrollbar { width: 6px; } .chat-history-panel::-webkit-scrollbar-track { background: transparent; } .chat-history-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; } .chat-history-panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); } [data-theme="light"] .chat-history-panel { /* Same tint .chat-input-wrapper uses in light theme -- see its own comment: "night has a tint day doesn't", pale cool-blue instead of flat white so the sheen gradient actually shows. */ background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.12) 45%, rgba(255,255,255,0) 100%), rgba(232,240,248,0.72); border-color: rgba(44,62,80,0.16); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12); scrollbar-color: rgba(0, 0, 0, 0.18) transparent; } [data-theme="light"] .chat-history-panel::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); } [data-theme="light"] .chat-history-panel::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.32); } /* :hover reveal for mouse users -- pure CSS, no JS state needed since a real hover state already exists natively. Touch has no hover at all, so ChatMinimap.jsx tracks an explicit tap-opened `popupOpen` boolean and applies .popup-open here as the touch equivalent of :hover -- same visual result, different trigger. */ .chat-minimap-hover-region:hover .chat-history-panel, .chat-minimap-hover-region.popup-open .chat-history-panel { width: 340px; padding: 8px; opacity: 1; pointer-events: auto; transform: translateX(0); } /* Explicit close override after a jump. :hover can't be cleared from JS, so a jump click adds this class for a moment to force the panel shut even while the cursor is still physically resting over the strip -- otherwise "click a day, it should jump AND close" only half-worked: the jump happened but the popup stayed open under an unmoved cursor. Cleared again on the next real mouseenter/tap-open so hovering still works afterward. */ .chat-minimap-hover-region.force-closed .chat-history-panel { width: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; } .chat-history-item { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 6px; cursor: pointer; } .chat-history-item:hover { background: rgba(255, 255, 255, 0.06); } .chat-history-item-preview { font-size: 0.82rem; font-weight: 500; color: rgba(225, 232, 240, 0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-history-item-date { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(200, 215, 230, 0.5); white-space: nowrap; } .chat-history-item-active { background: rgba(255, 255, 255, 0.05); } .chat-history-item-active .chat-history-item-preview, .chat-history-item-active .chat-history-item-date { color: var(--color-primary); } [data-theme="light"] .chat-history-item:hover { background: rgba(0, 0, 0, 0.04); } [data-theme="light"] .chat-history-item-preview { color: rgba(30, 40, 50, 0.88); } [data-theme="light"] .chat-history-item-date { color: rgba(40, 50, 60, 0.5); } [data-theme="light"] .chat-history-item-active { background: rgba(0, 0, 0, 0.035); } .chat-minimap-strip { display: flex; flex-direction: column; height: 50vh; justify-content: space-evenly; align-items: flex-end; } .minimap-item { pointer-events: auto; /* Make item clickable */ display: flex; align-items: center; justify-content: flex-end; gap: 8px; /* Real click/tap target is bigger than the visible marker -- the 6x2px marker alone is a mistap magnet, especially on touch. Padding widens the hit box without changing how big the marker looks. */ padding: 8px 4px; cursor: pointer; /* Each tick is React-keyed by date, so when the sliding window moves (scrolling further into history), ticks that leave the window unmount and ticks entering it mount as BRAND NEW elements -- there's no shared element to transform-animate a slide on. What CAN be animated is each new tick settling into place on mount, which is what actually reads as "smooth" here: the active highlight staying centered while the ticks around it visibly ease in, instead of popping in instantly on every window shift. */ animation: minimapTickIn 0.28s cubic-bezier(0.2, 0, 0, 1) both; } @keyframes minimapTickIn { from { opacity: 0; transform: translateX(4px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .minimap-item { animation: none; } } .minimap-marker { width: 6px; height: 2px; background: rgba(255, 255, 255, 0.2); border-radius: 1px; transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); } [data-theme="light"] .minimap-marker { background: rgba(0, 0, 0, 0.2); } /* Hover effects. The floating per-tick date label (.minimap-label) that used to live here was removed by request -- the hover popup (.chat-history-panel) already shows the date alongside a real preview, so a second floating date bubble next to the strip was redundant. */ .minimap-item:hover .minimap-marker, .minimap-item.active .minimap-marker { width: 12px; height: 4px; border-radius: 2px; background: var(--color-primary); } /* Enabled on mobile now (was previously hidden entirely below 600px) -- the tick strip is a thin column near the edge either way, so at narrow widths the real overlap risk is the POPUP, not the strip. Clamp its width to the viewport instead of hiding the whole feature. */ @media (max-width: 600px) { .chat-minimap-hover-region:hover .chat-history-panel, .chat-minimap-hover-region.popup-open .chat-history-panel { width: min(280px, calc(100vw - 48px)); } /* .chat-minimap-outer centers itself with top:0;bottom:0 over its WHOLE positioning ancestor, which includes the space the fixed composer sits over -- on a short mobile viewport that centered box is tall enough that its bottom ticks land visually under the composer. Insetting bottom by the same live clearance the composer itself reserves keeps the whole strip's centered box above it, same fix pattern as the jump-to-bottom button and typing indicator already use for the same reason. */ .chat-minimap-outer { bottom: var(--chat-input-clearance, 140px); } } /* Floating jump-to-bottom button. Unlike .chat-minimap this stays visible on mobile -- it's a single small control bottom-center, not a label strip that needs the width the minimap does, so there's no overlap to avoid. */ .jump-to-bottom-btn { /* MUST be position:fixed, not absolute. The previous z-index bump (90 -> 110) did nothing, because it was the wrong axis entirely: .chat-input-area (the composer) is position:fixed at the PAGE ROOT with z-index:151, while this button lived inside .chat-container (#view-chat .chat-container: position:relative, z-index:3 -- its OWN, separate, lower stacking context). No z-index given to a descendant can ever out-rank a sibling stacking context sitting higher at the root -- the button was structurally trapped behind the composer, at the exact bottom-center screen position they both occupy, on every single render, not just when the minimap popup happened to be open. Fixed by escaping to position:fixed at the root (same tier as the composer) with a z-index that actually competes. Anchor is --typing-offset, NOT --chat-input-clearance -- these are two different live-measured properties (layoutClearance.js) and picking the wrong one caused two separate real regressions here. --chat-input-clearance = gap + typingHeight + 24: it deliberately reserves room for the composer AND the typing indicator floating above it, which is why anchoring to it (even halved) left the button sitting well above the actual composer edge instead of close to it. --typing-offset = gap + 12: exactly "12px above the composer's real top edge", the SAME anchor .typing-indicator itself uses to sit right above the composer -- which is precisely where this button belongs too, and it tracks the composer's real current height (draft wrapping, staged attachments, the voice/listening bar) the same way the old fallback-140px guess never did. */ position: fixed; left: 50%; bottom: calc(var(--typing-offset, 106px) + 8px); transform: translateX(-50%) translateY(8px); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20, 30, 44, 0.95); color: rgba(200, 215, 230, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); cursor: pointer; z-index: 155; /* above .chat-input-area (151), the actual competing tier */ opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 0, 0, 1), bottom 0.2s ease; } .jump-to-bottom-btn.jump-to-bottom-visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .jump-to-bottom-btn:hover { background: rgba(30, 42, 58, 0.98); } [data-theme="light"] .jump-to-bottom-btn { background: rgba(255, 255, 255, 0.95); color: rgba(40, 50, 60, 0.9); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.05); } [data-theme="light"] .jump-to-bottom-btn:hover { background: rgba(245, 246, 248, 0.98); } /* MUST NOT be `display: flex`. The bubble sits inside an unnamed wrapper div that would then be a row-flex item and shrink-wrap to the bubble's max-content width. The bubble's percentage max-width is (correctly) ignored while that width is computed, then resolved against it afterwards — so the bubble ends up capped at 70% of a width derived from the bubble itself, and short text wraps for no reason. Both passes are spec-correct; the artifact is emergent. Keep this a block box. Right-alignment of user bubbles comes from `.message.user .message-bubble`'s `margin-left: auto`, NOT from the now-inert `flex-direction: row-reverse` below. */ .message { display: block; gap: 0; width: 100%; max-width: 800px; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .message.user { align-self: flex-end; } .message.assistant { align-self: flex-start; } /* Portal v2: avatars removed — sender differentiation is via layout offset only */ .message-bubble { padding: var(--space-3) var(--space-4); /* All four corners equal — matches the WhatsApp reference the product owner supplied (edge-traced: uniform radius, no tail, no distinct corner). The previous 4px squared corner on the sender's side was the single thing making these not read as WhatsApp. */ border-radius: 18px; line-height: 1.5; word-break: break-word; width: fit-content; position: relative; } .message-bubble::after { content: ''; display: table; clear: both; } .message.user .message-bubble { background: var(--color-primary, #22a7f0); color: #ffffff; /* B: cap user bubbles so they read as chat bubbles, not full-width blocks */ max-width: 80%; margin-left: auto; /* push bubble to right within the message container */ } .message.assistant .message-bubble { background: var(--color-bubble-ai); color: var(--color-bubble-ai-text); /* Subtle border on the glass panel */ border: 1px solid rgba(255,255,255,0.08); max-width: 80%; } .copy-button { appearance: none; position: relative; border: 1px solid transparent; background: transparent; color: var(--color-text-secondary, #6b7280); width: 28px; height: 28px; padding: 5px; border-radius: 7px; display: inline-grid; place-items: center; cursor: pointer; opacity: .72; box-shadow: none; transition: opacity 120ms ease, color 120ms ease, background 120ms ease, border-color 120ms ease; } .copy-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .copy-button:hover, .copy-button:focus-visible { opacity: 1; color: var(--color-primary, #22A7F0); background: rgba(34, 167, 240, .1); border-color: rgba(34, 167, 240, .22); } .copy-button:focus-visible { outline: 2px solid var(--color-primary, #22A7F0); outline-offset: 2px; } .copy-button.is-copied { opacity: 1; color: #16835d; background: rgba(22, 131, 93, .1); } .copy-button.is-failed { opacity: 1; color: var(--color-danger, #dc2626); background: rgba(220, 38, 38, .1); } .message-bubble.has-message-actions { padding-right: 42px; } .message-actions { position: absolute; z-index: 4; top: 5px; right: 5px; } .message-actions__trigger { appearance: none; width: 28px; height: 28px; padding: 5px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: rgba(20,30,44,.26); color: currentColor; cursor: pointer; opacity: 0; transition: opacity 120ms ease, background 120ms ease, transform 120ms ease; } .message-actions__trigger svg, .message-actions__item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .message:hover .message-actions__trigger, .message:focus-within .message-actions__trigger, .message-actions.is-open .message-actions__trigger { opacity: 1; } .message-actions__trigger:hover, .message-actions__trigger:focus-visible { background: rgba(20,30,44,.42); } .message-actions__trigger:focus-visible, .message-actions__item:focus-visible { outline: 2px solid var(--color-primary, #22A7F0); outline-offset: 2px; } .message-actions__menu { position: absolute; top: 32px; right: 0; width: 148px; padding: 5px; border: 1px solid var(--color-border, rgba(128,128,128,.24)); border-radius: 10px; background: var(--color-surface, #fff); color: var(--color-text, #1f2937); box-shadow: 0 10px 28px rgba(0,0,0,.2); } .message.assistant .message-actions__menu { right: auto; left: 0; } .message-actions.opens-up .message-actions__menu { top: auto; bottom: 32px; } .message-actions__item { appearance: none; width: 100%; min-height: 38px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: var(--font-size-sm, .875rem); text-align: left; cursor: pointer; } .message-actions__item:hover { background: var(--color-surface-hover, #f3f4f6); } .message-actions__item.is-copied { color: #16835d; } .message-actions__item.is-failed { color: var(--color-danger, #dc2626); } .message-code-shell { position: relative; margin: 10px 0; } .message-code-block { margin: 0; padding-top: 48px; } .message-code-copy { position: absolute; z-index: 1; top: 8px; right: 8px; background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .08); } @media (hover: none), (pointer: coarse) { .message-bubble.has-message-actions { padding-right: var(--space-4); } .message:hover .message-actions__trigger, .message:focus-within .message-actions__trigger { opacity: 0; pointer-events: none; } .message-actions.is-open .message-actions__trigger, .message .message-actions__trigger:focus-visible { opacity: 1; pointer-events: auto; } } @media (hover: none), (max-width: 768px) { .message-actions__trigger { min-width: 34px; min-height: 34px; } } @media (hover: none), (pointer: coarse) { .message-code-copy::before, .af-markdown__code-copy::before { content: ''; position: absolute; inset: -8px; } } /* Portal v2: System log messages — centered plain-text, no bubble */ .message.system-trigger { align-self: center !important; max-width: 90%; animation: none; } .message.system-trigger .message-bubble { display: none; /* bubble suppressed — system-log-entry replaces it */ } /* System log entry: centered, quiet, plain-text */ .system-log-entry { text-align: center; padding: 6px 0; } .system-log-text { color: rgba(160, 175, 190, 0.7); font-size: 0.85rem; font-style: italic; line-height: 1.5; } .system-log-tag { font-size: 0.68rem; color: rgba(140, 155, 170, 0.45); display: block; margin-top: 3px; letter-spacing: 0.3px; } [data-theme="light"] .system-log-text { color: rgba(60, 80, 100, 0.55); } [data-theme="light"] .system-log-tag { color: rgba(60, 80, 100, 0.4); } #chatMessages:not(.show-system-events) .is-system-event, #chatMessages:not(.show-system-events) .is-system-reply { display: none !important; } /* Metadata footer inside message bubbles (model info, context, session) */ /* #40 — routing footer hidden for normal users; visible only in observability mode */ .message-footer { display: none; font-size: var(--font-size-xs); color: rgba(200,215,230,0.55); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid rgba(255,255,255,0.10); font-family: var(--font-code); line-height: 1.4; opacity: 0.85; } /* Show footer when observability mode is active (set by ui.debug.firehose beat) */ html[data-observability] .message-footer { display: block; } [data-theme="dark"] .message-footer { border-top-color: rgba(255, 255, 255, 0.10); } .date-divider { text-align: center; font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.05); padding: 4px 12px; border-radius: 12px; margin: var(--space-2) auto; width: fit-content; text-transform: uppercase; letter-spacing: 0.5px; } /* WhatsApp-style timestamp: sits bottom-right INSIDE the bubble, on the same line as the last line of text when it fits. Achieved with a paired technique — see .message-time-spacer below: 1. .message-time-spacer is an invisible inline run of the same text, placed at the true end of the message's text flow. It reserves exactly the horizontal room the real timestamp needs. If the last line has space, the spacer (and the gap it creates) sits at the end of that line. If the last line is already full (long word / full- width line), the spacer — being ordinary inline content — wraps to its own line, which is what keeps the real timestamp from ever overlapping text. 2. .message-time-inline is the real, visible timestamp. It is absolutely positioned to the bubble's bottom-right (the bubble is `position: relative`), so it always renders into the gap the spacer reserved rather than needing float/clear layout. */ .message-time-inline { font-size: 0.65rem; /* 0.7 on BOTH bubble types — was 0.5 here with a 0.7 override for user bubbles only, which read as white on the blue fill but collapsed to #93989F on the grey one: dimmer than its own body text. One value, both sides. */ color: rgba(255, 255, 255, 0.7); line-height: 1; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; position: absolute; /* Offsets resolve against the bubble's PADDING box, so `0` would sit flush on the border — eating the bubble's padding and spilling past the corner arc (measured: 5.2px past a 16px radius). Inset by the bubble's own padding so the timestamp lands on the CONTENT box edge, exactly where .message-time-spacer reserved room for it. */ right: var(--space-4); bottom: var(--space-3); pointer-events: none; } .message-time-spacer { visibility: hidden; font-size: 0.65rem; margin-left: 12px; } .message-time { font-size: 13px; color: rgba(200,215,230,0.88); margin-top: var(--space-1); margin-bottom: var(--space-1); } .message.user .message-time { text-align: right; } /* T-typing-below-input fix: was a normal-flow sibling AFTER .chat-messages inside .chat-container (a flex column). .chat-messages has flex:1, so this auto-height item got squeezed in right after it, landing in the same 140px reserved clear-zone that .chat-messages's padding-bottom keeps free for the fixed .chat-input-area (position:fixed; bottom:0) — i.e. visually "below/behind the input box". Fix: take it out of flow with position:absolute, anchored to the BOTTOM of .chat-container (which is position:relative — see "#view-chat .chat-container" — and fills the viewport height below the orb). T-typing-position fix (round 2): the fixed 106px offset was measured against the WRONG (too-small) 140px clear-zone above, so once that clear-zone was too small the last message rendered lower than expected and the fixed-106px indicator ended up ABOVE the last message instead of after it. --typing-offset is now computed by the same updateChatLayoutClearance() JS routine that sizes --chat-input-clearance, so the two stay geometrically consistent: typing bottom clears the input top by 12px (comfortably over the 8px pass bar), and the clear-zone reserves enough extra room above that for the indicator's own height, so the indicator's top always lands below the last message's bottom. 106px is the pre-JS fallback only. */ .typing-indicator { display: none; position: absolute; left: var(--space-5); bottom: var(--typing-offset, 106px); z-index: 5; padding: var(--space-3) var(--space-4); background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-sm); gap: 4px; } .typing-indicator.active { display: flex; } .typing-dot { width: 8px; height: 8px; background: var(--color-text-muted); border-radius: var(--radius-full); animation: typingBounce 1.2s infinite ease-in-out; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes typingBounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } } /* Chat Input */ .chat-input-area { padding: var(--space-3) var(--space-5); position: fixed; bottom: 0; left: 0; right: 0; z-index: 151; /* above spotlight(150) and panel-full(50) */ /* SOLID and OPAQUE, deliberately -- two earlier passes both left something of a message still visible behind the composer and got pushed back on: 1. Flat `transparent` let a scrolled-through message show PERFECTLY CRISP, unobscured. 2. A blurred, translucent tint (backdrop-filter, with or without an added gradient fill) still let a bright bubble show through as a soft blur -- explicitly rejected: "there is clearly something behind the composer... nothing should be behind it", not "it should be blurred". Only a fully opaque fill guarantees nothing behind ever shows, blurred or otherwise -- so this trades the glass/blur look for actually satisfying that requirement. Same navy as the composer pill's own tint, just alpha 1 instead of 0.55, so it still reads as the same surface, just solid. A THIRD complaint followed this: a flat opaque rectangle butting straight up against the animated page-background gradient reads as an "ugly bar" -- a hard-edged slab, not a graceful surface. Fixed WITHOUT reintroducing any transparency (the fill itself stays 100% opaque, still hides everything behind it) by feathering the EDGE instead: a soft upward box-shadow in the same color, blurred well past the element's own box. A shadow is purely a paint effect outside the element's box -- it cannot let anything behind the element show through the element itself, so this softens the seam without compromising "nothing visible behind it" at all. */ /* NO BACKGROUND ON THIS WRAPPER. It is a positioning box, not a surface. Everything visible down here belongs to .chat-input-wrapper -- the frosted pill -- which floats directly on the transcript with nothing but its own translucent fill and blur between it and the messages. This is the whole difference between a floating composer and a footer bar, and every previous attempt failed by treating the wrapper as something that needed a fill: transparent let messages scroll through perfectly crisp, a backdrop-blur left them as a ghost, an opaque slab read as a hard bar, and repainting the page's own backdrop here still left a rectangle whose gradient could not stay aligned with body's. The answer is that there is nothing to paint. Messages scrolling past are softened by the PILL's blur where they pass under it, and are simply visible either side of it, which is what "floating" means. If a fill ever reappears on this selector, the bar is back. */ background: none; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .chat-input-wrapper { display: flex; align-items: flex-end; gap: var(--space-2); /* Frosted-glass fill (the product owner 2026-07-24). Same tint + light sheen as the phone bar so laptop reads as glass at rest too — the sheen gradient makes it look glassy even when there's no content behind to blur; the 0.55 translucent navy + blur(12px) below do the rest. ONLY the fill is shared with mobile — desktop keeps its own rounded box / border / width. */ background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0) 100%), rgba(20, 30, 44, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); border-radius: 24px; padding: var(--space-2) var(--space-3); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); width: 100%; /* 92vw keeps a margin at every window size; the 1200px ceiling stops the line length running away on an ultrawide. .chat-input-area's own side padding sits outside this. */ /* No cap: .chat-input-area and .chat-messages both pad their sides with --space-5, so a full-width composer lines up with where the message bubbles start. Matching a number would drift the moment that token changes; sharing the token cannot. */ max-width: none; pointer-events: auto; } .chat-input-wrapper:focus-within { border-color: rgba(34, 167, 240, 0.6); box-shadow: 0 0 0 4px rgba(34, 167, 240, 0.1); } .chat-input-wrapper:focus-within { /* the product owner 2026-07-24: the old bright-white 38px glow was harsh. A soft shadow + a thin Mycroft-blue ring reads as "focused" without glaring. */ border-color: rgba(34, 167, 240, 0.55); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(34, 167, 240, 0.30); } .chat-input { flex: 1; border: none; background: none; resize: none; font: inherit; font-size: var(--font-size-base); /* Part E+F: light text on dark glass panel; 2-row height */ color: #e8f0f8; line-height: 1.5; max-height: 120px; /* Single comfortable line by default (matches the 44px action buttons), so the placeholder/text sits at the SAME vertical center as the icons (the product owner 2026-07-24: text was higher than the icons). The old 48px/14px-top reserved 2 lines and top-aligned the single line, making it float high. Symmetric 10px top/bottom centers the single line; the JS auto-grow + align-items:flex-end keep the buttons at the bottom as it grows. */ min-height: 44px; outline: none; /* No blue focus ring AND no grey tap-flash on mobile: the textarea's default -webkit-tap-highlight-color painted a highlight on touch (the product owner 2026-07-24 "I don't like the highlight, remove it"). transparent kills it everywhere; the wrapper already carries the only intentional focus cue. */ -webkit-tap-highlight-color: transparent; padding: 10px 0 10px var(--space-2); } .chat-input::placeholder { color: rgba(200,215,230,0.50); } .chat-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); border: none; cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; /* Part F: 44px touch target */ color: rgba(200,215,230,0.65); background: none; } .chat-btn:hover { background: rgba(255,255,255,0.10); color: var(--color-primary); } .chat-btn.send-btn { background: var(--color-primary); color: white; } .chat-btn.send-btn:hover { background: var(--color-primary-dark); } .chat-btn.send-btn.stop-btn, .chat-btn.send-btn.stop-btn:hover { background: var(--color-danger); } .chat-btn.send-btn.stop-btn:hover:not(:disabled) { filter: brightness(0.9); } .chat-btn.send-btn.stop-btn svg { width: 20px; height: 20px; } .chat-btn.send-btn:disabled { opacity: 0.5; cursor: not-allowed; } .chat-btn svg { width: 18px; height: 18px; } .voice-btn.recording { background: var(--color-danger); color: white; animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } } /* === GPT-voice-mode-style "Listening" bar === Replaces .chat-input-wrapper's contents while isListening (App.jsx). The waveform is a looping keyframe animation rather than a mic-level meter, but App.jsx only mounts it after LiveKit confirms microphone publication. The pre-capture Connecting state uses the static dot below. */ .listening-bar { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-3); /* matches .chat-input's vertical rhythm so the pill doesn't jump height when it swaps in for the textarea */ min-height: 44px; animation: listening-bar-enter 160ms ease-out; } @keyframes listening-bar-enter { from { opacity: 0.72; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } .listening-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); border: none; cursor: pointer; flex-shrink: 0; background: rgba(255, 255, 255, 0.92); color: #14202c; transition: all var(--transition-fast); } .listening-btn:hover { background: #ffffff; } .listening-btn svg { width: 18px; height: 18px; } .listening-btn-spacer { width: 44px; height: 44px; flex-shrink: 0; } .listening-center { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex: 1; min-width: 0; } .listening-label { color: rgba(232, 240, 248, 0.85); font-size: var(--font-size-base); white-space: nowrap; } /* Deliberately compact: this is an autoplay recovery affordance, not another voice control, and only exists while LiveKit says playback is blocked. */ .listening-enable-sound { border: 0; border-radius: var(--radius-full); padding: 3px 7px; background: rgba(34, 167, 240, 0.18); color: #8dd8ff; font: inherit; font-size: 11px; cursor: pointer; } .listening-connecting-dot { box-sizing: border-box; width: 9px; height: 9px; border-radius: 50%; background: #22A7F0; box-shadow: 0 0 8px rgba(34, 167, 240, 0.45); opacity: 0.7; } /* Capture has stopped here, so the waveform must stay gone. A small progress ring communicates delivery/transcription work without resembling live mic activity or changing the bar's dimensions. */ .listening-bar--finishing .listening-connecting-dot { background: transparent; border: 2px solid rgba(34, 167, 240, 0.28); border-top-color: #22A7F0; box-shadow: none; opacity: 1; animation: listening-finish-spin 800ms linear infinite; } .listening-bar--finishing .listening-label { color: rgba(232, 240, 248, 0.95); } @keyframes listening-finish-spin { to { transform: rotate(360deg); } } .listening-waveform { display: flex; align-items: center; gap: 6px; height: 24px; } /* the product owner 2026-07-24: the old 7 white vertical bars scaling in height were a dead ringer for ChatGPT's voice equalizer. Redesigned as brand-blue glowing DOTS that bob up and down in a wave — reads as the companion's own signature, not a GPT clone (different shape: dots not bars; different motion: vertical bob + glow, not height-scale; different color: Mycroft Blue, not white). */ .listening-waveform span { display: block; width: 7px; height: 7px; border-radius: 50%; background: #22A7F0; box-shadow: 0 0 8px rgba(34, 167, 240, 0.65); animation: listening-wave 1.3s ease-in-out infinite; } .listening-waveform span:nth-child(1) { animation-delay: 0s; } .listening-waveform span:nth-child(2) { animation-delay: 0.1s; } .listening-waveform span:nth-child(3) { animation-delay: 0.2s; } .listening-waveform span:nth-child(4) { animation-delay: 0.3s; } .listening-waveform span:nth-child(5) { animation-delay: 0.2s; } .listening-waveform span:nth-child(6) { animation-delay: 0.1s; } .listening-waveform span:nth-child(7) { animation-delay: 0s; } @keyframes listening-wave { 0%, 100% { transform: translateY(4px) scale(0.7); opacity: 0.45; } 50% { transform: translateY(-6px) scale(1.15); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .listening-bar, .listening-bar--finishing .listening-connecting-dot { animation: none; } .listening-waveform span { animation: none; transform: none; opacity: 0.8; } } /* Voice "reply incoming" dots — the same blue listening dots, shrunk to sit inside the typing-bubble shell (the product owner 2026-07-24: "same blue bubbles as listening, much smaller, fit these in the typing bubble"). Gentler bob so it stays inside the small bubble. Colour + round shape inherited from .listening-waveform span above. */ .listening-waveform--mini { gap: 4px; height: 12px; } .listening-waveform--mini span { width: 5px; height: 5px; box-shadow: 0 0 6px rgba(34, 167, 240, 0.6); animation: listening-wave-mini 1.1s ease-in-out infinite; } @keyframes listening-wave-mini { 0%, 100% { transform: translateY(2px) scale(0.7); opacity: 0.5; } 50% { transform: translateY(-3px) scale(1.1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .listening-waveform--mini span { animation: none; transform: none; opacity: 0.85; } } /* The voice variant of the bubble hugs the small dots a touch tighter. */ .typing-indicator--voice { padding: 8px 12px; } /* Context Meter */ .context-meter { /* Hidden — the product owner 2026-07-24 flagged this thin bar under the composer as an ugly "bottom patch". It's an agent context-usage meter, not user-facing. Reversible (delete this display:none to restore). */ display: none; height: 3px; background: rgba(255,255,255,0.12); border-radius: 2px; margin-top: var(--space-2); overflow: hidden; } .context-meter-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease, background-color 0.3s ease; width: 0%; background: var(--color-success); } .context-meter-fill.warn { background: var(--color-warning); } .context-meter-fill.high { background: #F97316; } /* Orange — 75-90% usage */ .context-meter-fill.danger { background: var(--color-danger); } .context-label { font-size: var(--font-size-xs); color: rgba(200,215,230,0.55); text-align: right; margin-top: 2px; } /* === Docs View (Merged Wiki + Documents) === */ .docs-container { flex: 1; display: flex; overflow: hidden; } /* Collapsible category groups using native

*/ .docs-category-group { margin-bottom: var(--space-3); } .docs-category-group > summary { font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: var(--space-2); padding: var(--space-2); cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-2); user-select: none; border-radius: var(--radius-sm); transition: background var(--transition-fast); } .docs-category-group > summary:hover { background: var(--color-surface-hover); } /* Custom disclosure triangle */ .docs-category-group > summary::before { content: ''; display: inline-block; width: 0; height: 0; border-left: 5px solid var(--color-text-muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--transition-fast); flex-shrink: 0; } .docs-category-group[open] > summary::before { transform: rotate(90deg); } /* Remove default marker in WebKit/Blink */ .docs-category-group > summary::-webkit-details-marker { display: none; } /* Doc links inside categories */ .doc-link { display: block; padding: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); border: none; background: none; width: 100%; text-align: left; font: inherit; font-size: var(--font-size-sm); } .doc-link:hover { background: var(--color-surface-hover); color: var(--color-text); } .doc-link.active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; } /* Doc content area */ .docs-content { flex: 1; overflow-y: auto; padding: var(--space-6) var(--space-8); max-width: 900px; } /* Back button for mobile doc detail navigation */ .docs-back-btn { display: none; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); font-size: var(--font-size-sm); color: var(--color-primary); background: var(--color-primary-light); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: var(--font-size-sm); font-weight: 500; transition: all var(--transition-fast); } .docs-back-btn:hover { background: var(--color-primary); color: white; } /* Rendered doc content typography */ .docs-content h1 { font-size: var(--font-size-2xl); margin-bottom: var(--space-4); } .docs-content h2 { font-size: var(--font-size-xl); margin: var(--space-6) 0 var(--space-3); border-bottom: 1px solid var(--color-border-light); padding-bottom: var(--space-2); } .docs-content h3 { font-size: var(--font-size-lg); margin: var(--space-4) 0 var(--space-2); } .docs-content p { margin-bottom: var(--space-3); } .docs-content ul, .docs-content ol { margin-bottom: var(--space-3); padding-left: var(--space-6); } .docs-content li { margin-bottom: var(--space-1); } .docs-content table { border-collapse: collapse; width: 100%; margin: var(--space-4) 0; } .docs-content th, .docs-content td { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); text-align: left; font-size: var(--font-size-sm); } .docs-content th { background: var(--color-surface); font-weight: 600; } .docs-content strong { color: var(--color-text); } .docs-content blockquote { border-left: 3px solid var(--color-primary); padding-left: var(--space-4); margin: var(--space-4) 0; color: var(--color-text-secondary); } .docs-empty { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--color-text-muted); font-size: var(--font-size-lg); padding: var(--space-8); text-align: center; } /* === Images View === */ .images-container { flex: 1; overflow-y: auto; padding: var(--space-6); } .images-header { margin-bottom: var(--space-6); } .images-header h2 { font-size: var(--font-size-xl); font-weight: 600; } .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); } .image-card { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border-light); transition: transform var(--transition-fast), box-shadow var(--transition-fast); background: var(--color-surface); } .image-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .image-card img { width: 100%; height: 160px; object-fit: cover; display: block; } .image-card-info { padding: var(--space-3); } .image-card-name { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); } .image-card-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-1); } .images-empty { text-align: center; color: var(--color-text-muted); padding: var(--space-10); font-size: var(--font-size-lg); } /* === Terminal View === */ .terminal-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: var(--space-4); } .terminal-output { flex: 1; background: #1a1a2e; color: #0faf0f; font-family: var(--font-code); font-size: var(--font-size-sm); padding: var(--space-4); border-radius: var(--radius-md); overflow-y: auto; line-height: 1.6; white-space: pre-wrap; word-break: break-all; margin: 0; } .terminal-status { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; font-size: var(--font-size-sm); color: var(--color-text-muted); } .terminal-status-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-success); } .terminal-status-dot.disconnected { background: var(--color-danger); } /* === Responsive (Mobile) === */ @media (max-width: 768px) { .sidebar { display: none; } .mobile-header { display: flex; } .main-content { height: 100vh; } /* Docs: hide desktop sidebar, show mobile list instead */ .docs-sidebar { display: none; } .docs-mobile-list { display: flex; flex-direction: column; } /* By default on mobile: doc content is hidden, mobile list is shown. When a doc is selected, the JS adds .mobile-visible to content and .hidden to mobile-list to swap them. */ .docs-content { display: none; padding: var(--space-4); } .docs-content.mobile-visible { display: flex; flex-direction: column; flex: 1; overflow-y: auto; } .docs-mobile-list.hidden { display: none; } /* Show back button on mobile */ .docs-back-btn { display: inline-block; } .chat-messages { padding: var(--space-3); } .message { max-width: 95%; } .chat-input-area { /* the product owner 2026-07-23: NO gaps — full width, flush to the bottom and both sides. No side padding, no bottom safe-area gap; push it all the way down. */ padding: 0; left: 0; } .chat-input-wrapper { /* full-bleed bar: no rounding, spans edge to edge, flush at the bottom. Internal padding (base rule) keeps text/icons comfortable; safe-area bottom padding extends the bar through the home-indicator strip. The product owner 2026-07-24: at low opacity the bar dissolved into the chat. Opacity alone can't separate it (bar color ≈ page bg, so it blends against empty gaps between bubbles). So DEFINE the bar: a hairline top divider + a soft upward shadow lift it off the messages, and a more solid background. Still full-bleed / flush — no side gaps, no box outline. */ /* the product owner 2026-07-24: rounded all corners now. Glass-at-rest fix: a backdrop-blur only shows when there's CONTENT behind it to blur — at rest the bar sits over flat page bg, so the blur is invisible and it looked un-glassy (only felt glassy when a message color scrolled behind). So paint a subtle top-down light SHEEN onto the bar itself, layered over the 0.55 translucent fill — that reads as frosted glass regardless of what's behind it, and the backdrop-blur still adds the real refraction when a bubble passes under. */ border-radius: 16px; max-width: none; border: none; border-top: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0) 100%), rgba(20, 30, 44, 0.55); box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.34); padding-bottom: calc(var(--space-2, 8px) + env(safe-area-inset-bottom, 0px)); } .chat-input-wrapper:focus-within { /* Mobile: NO highlight at all on focus — no ring, no glow, no border tint. Explicitly reset border-color too so nothing (incl. a stale cached desktop rule) can paint a cyan edge. (the product owner 2026-07-24) */ box-shadow: none; border-color: transparent; } .chat-input-wrapper, .chat-input, .chat-btn { -webkit-tap-highlight-color: transparent; } } /* === Utility === */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Pygments highlight compat */ .highlight { background: transparent; } /* ========== Session Picker ========== */ .session-picker-wrapper { position: relative; display: none; } [data-debug] .session-picker-wrapper { display: inline-block; } .session-indicator { font-size: var(--font-size-sm); padding: var(--space-1) var(--space-3); border: 1px solid rgba(34,167,240,0.40); border-radius: var(--radius-sm); background: rgba(255,255,255,0.08); color: #c8d8ea; cursor: pointer; white-space: nowrap; } .session-indicator:hover { background: rgba(255,255,255,0.14); } .session-dropdown { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 220px; max-height: 300px; overflow-y: auto; background: rgba(20,30,44,0.92); border: 1px solid rgba(34,167,240,0.50); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.40); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 100; padding: var(--space-1) 0; } .session-dropdown.visible { display: block; } .session-option { display: block; width: 100%; padding: var(--space-2) var(--space-3); border: none; background: transparent; color: #c8d8ea; font-size: var(--font-size-sm); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .session-option:hover { background: rgba(255,255,255,0.10); } .session-option.active { font-weight: 600; color: var(--color-primary); } /* === Tasks View === */ .tasks-container { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .tasks-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .tasks-header h2 { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-text); margin: 0; } .tasks-content { flex: 1; overflow-y: auto; padding: var(--space-6); } .tasks-loading, .tasks-error, .tasks-empty { text-align: center; padding: var(--space-10) var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-lg); } .tasks-error { color: var(--color-danger); } .tasks-empty { font-size: var(--font-size-xl); } /* Task sections */ .task-section { margin-bottom: var(--space-8); } .task-section-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-border-light); } .task-section-overdue .task-section-title { color: var(--color-danger); } .task-section-today .task-section-title { color: var(--color-warning); } .task-list { display: flex; flex-direction: column; gap: var(--space-3); } /* Task cards */ .task-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); transition: all var(--transition-fast); } .task-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); } .task-card-overdue { border-left: 4px solid var(--color-danger); } .task-card-today { border-left: 4px solid var(--color-warning); } .task-card-upcoming { border-left: 4px solid var(--color-primary); } .task-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-2); } .task-card-title { font-size: var(--font-size-base); font-weight: 600; color: var(--color-text); flex: 1; line-height: 1.4; } .task-card-actions { display: flex; gap: var(--space-2); flex-shrink: 0; } .task-action-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-light); background: var(--color-bg); color: var(--color-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); padding: 0; } .task-action-btn:hover { background: var(--color-surface-hover); border-color: var(--color-border); } .task-action-btn svg { width: 16px; height: 16px; } .task-action-complete:hover { background: var(--color-success); border-color: var(--color-success); color: white; } .task-action-delete:hover { background: var(--color-danger); border-color: var(--color-danger); color: white; } .task-action-snooze-wrapper { position: relative; } .snooze-menu { position: absolute; top: 100%; right: 0; margin-top: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-2); display: none; flex-direction: column; gap: var(--space-1); z-index: 100; min-width: 140px; } .snooze-menu.visible { display: flex; } .snooze-menu button { padding: var(--space-2) var(--space-3); border: none; background: none; color: var(--color-text); text-align: left; cursor: pointer; border-radius: var(--radius-sm); font-size: var(--font-size-sm); white-space: nowrap; transition: background var(--transition-fast); } .snooze-menu button:hover { background: var(--color-surface-hover); } .task-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2); font-size: var(--font-size-sm); } .task-meta-item { color: var(--color-text-secondary); display: flex; align-items: center; gap: var(--space-1); } .task-meta-due { font-weight: 500; } .task-meta-project { color: var(--color-primary); } .task-card-description { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.5; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border-light); } /* New Task Modal */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-4); } .modal.visible { display: flex; } .modal-content { background: var(--color-bg); border-radius: var(--radius-lg); max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } .modal-header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; } .modal-header h3 { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); margin: 0; } .modal-close { width: 32px; height: 32px; border-radius: var(--radius-sm); border: none; background: none; color: var(--color-text-secondary); font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .modal-close:hover { background: var(--color-surface-hover); color: var(--color-text); } .modal-content form { padding: var(--space-6); } .form-group { margin-bottom: var(--space-5); } .form-group label { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); } .form-hint { margin: 0 0 var(--space-5); font-size: var(--font-size-sm); color: var(--color-text-secondary); } .form-input { width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); /* Use the input SURFACE, not --color-bg. --color-bg is the backdrop FIELD base (#c3cdd8 blue-grey in light — its own comment says "never used directly"); as an input fill it read as the ugly muddy grey the product owner flagged (2026-07-24). --color-surface is a clean near-white in light (#F1F3F4) / dark surface in night (#1a2430). */ background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: var(--font-size-base); transition: border-color var(--transition-fast); } .form-input:focus { outline: none; border-color: var(--color-primary); } .form-input::placeholder { color: var(--color-text-muted); } textarea.form-input { resize: vertical; font-family: inherit; } /* T30: dark-mode native select popup — color-scheme tells the OS to render the dropdown list in dark mode, matching the portal theme. */ [data-theme="dark"] select.form-input { color-scheme: dark; } [data-theme="light"] select.form-input { color-scheme: light; } .modal-footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--color-border-light); } .btn { padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--font-size-base); font-weight: 600; cursor: pointer; transition: all var(--transition-fast); border: none; display: inline-flex; align-items: center; gap: var(--space-2); } .btn-primary { background: var(--color-primary); color: white; } .btn-primary:hover { background: var(--color-primary-dark); } .btn-secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); } .btn-secondary:hover { background: var(--color-surface-hover); } /* Mobile responsiveness for tasks */ @media (max-width: 768px) { .tasks-header { padding: var(--space-4); flex-direction: column; align-items: stretch; gap: var(--space-3); } .tasks-header h2 { font-size: var(--font-size-xl); } .tasks-content { padding: var(--space-4); } .task-card-header { flex-direction: column; align-items: stretch; } .task-card-actions { justify-content: flex-end; } .modal-content { margin: var(--space-4); } } /* ========== Account Management ========== */ .account-container { padding: var(--space-6); max-width: 1100px; margin: 0 auto; /* T31: two-column grid on desktop; account-header spans both columns */ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; } .account-header { /* T31: header spans the full grid width */ grid-column: 1 / -1; margin-bottom: var(--space-6); } .account-header h2 { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-text); } .account-section-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-4); } .account-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); } .list-items { margin-bottom: var(--space-4); } .list-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: var(--space-3); background: var(--color-bg); } .list-item-content { flex: 1; } .list-item-title { font-weight: 500; color: var(--color-text); margin-bottom: var(--space-1); } .list-item-subtitle { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.5; } .list-item-actions { display: flex; gap: var(--space-2); } .list-empty { padding: var(--space-5); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); } .badge { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .badge-primary { background: rgba(34, 167, 240, 0.15); color: var(--color-primary); } .btn-icon { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: var(--font-size-lg); padding: var(--space-2); transition: color var(--transition-fast); line-height: 1; } .btn-icon:hover { color: var(--color-primary); } .btn-danger { color: #EF4444; } .btn-danger:hover { color: #DC2626; } .add-item-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border-light); } .checkbox-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text); cursor: pointer; } .checkbox-label input[type="checkbox"] { cursor: pointer; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .account-error { padding: var(--space-6); text-align: center; color: #EF4444; font-size: var(--font-size-lg); } /* Toast notifications */ .toast { position: fixed; bottom: var(--space-6); right: var(--space-6); background: var(--color-surface); color: var(--color-text); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: 1px solid var(--color-border); opacity: 0; transform: translateY(20px); transition: all var(--transition-normal); z-index: 10000; } .toast.visible { opacity: 1; transform: translateY(0); } /* Mobile responsiveness for account */ @media (max-width: 768px) { .account-container { padding: var(--space-4); /* T31: revert to single column on mobile */ grid-template-columns: 1fr; } .account-header h2 { font-size: var(--font-size-xl); } .form-row { grid-template-columns: 1fr; } .list-item { flex-direction: column; align-items: flex-start; gap: var(--space-3); } .list-item-actions { align-self: flex-end; } .toast { bottom: var(--space-4); right: var(--space-4); left: var(--space-4); } } /* === Settings modal — Text size scale buttons (font scale) === */ .account-scale-btns { display: flex; gap: var(--space-2); align-items: center; } /* Account view scale buttons share appearance with icon-rail scale buttons */ .account-scale-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; font: inherit; transition: background var(--transition-fast), color var(--transition-fast); } .account-scale-btn:hover { background: var(--color-surface-raised); color: var(--color-primary); } .account-scale-btn:disabled { opacity: 0.35; cursor: not-allowed; } .account-scale-btn:disabled:hover { background: var(--color-surface); color: var(--color-text); } .account-scale-reset { font-weight: 600; } /* === Debug Settings view === */ .debug-toggle-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 36px; padding: var(--space-1) var(--space-3); border: 2px solid var(--color-border); border-radius: var(--radius-sm); background: rgba(44,62,80,0.55); /* OFF: muted navy-grey track */ color: var(--color-text); /* H: was color-text-muted (~3.5:1 dark, fails AA); color-text gives ≥9:1 dark, ≥5:1 light */ font: inherit; font-size: 14px; /* ≥14px so On/Off label is readable */ font-weight: 600; cursor: pointer; letter-spacing: 0.03em; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .debug-toggle-btn:hover { background: var(--color-surface-raised); border-color: var(--color-primary); color: var(--color-primary); } /* ON state: filled Mycroft Blue track — unmistakably active */ .debug-toggle-btn.debug-toggle-on { background: #22A7F0; /* Mycroft Blue filled */ border-color: #22A7F0; color: #fff; font-weight: 700; } .debug-info-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); } .debug-info-row:last-of-type { border-bottom: none; } .debug-info-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 500; white-space: nowrap; } .debug-info-value { font-size: var(--font-size-sm); /* E: brighter value text for readability */ color: var(--color-text); font-family: 'Fira Code', monospace; word-break: break-all; text-align: right; font-weight: 500; opacity: 1; } /* === Bottom-nav theme toggle button === */ /* Inherits .bottom-nav-item sizing/tap-targets; no extra sizing needed */ .bottom-nav-theme-btn { /* Explicit color to match nav icons; no special overrides — inherits all .bottom-nav-item styles */ color: var(--color-text-muted); } .bottom-nav-theme-btn:hover, .bottom-nav-theme-btn:active { color: var(--color-primary); } /* === Unified Chat: Source Badges === */ .source-badge { display: inline-flex; align-items: center; gap: 2px; /* C: quieter — smaller font, lower opacity, reduced visual weight */ font-size: 11px; font-weight: 400; padding: 0px 4px; border-radius: var(--radius-full); vertical-align: middle; margin-left: 5px; line-height: 1.4; letter-spacing: 0.01em; opacity: 0.55; } .source-badge.voice { background: rgba(34, 197, 94, 0.15); color: #16A34A; } [data-theme="dark"] .source-badge.voice { background: rgba(34, 197, 94, 0.2); color: #4ADE80; } .source-badge.portal { background: rgba(100, 100, 100, 0.12); color: #666; } [data-theme="dark"] .source-badge.portal { background: rgba(180, 180, 180, 0.20); color: #ccc; opacity: 0.9; /* raise from base 0.55 → effective text ~7:1 contrast on dark panel */ } .source-badge.terminal { background: rgba(100, 100, 100, 0.12); color: #666; } [data-theme="dark"] .source-badge.terminal { background: rgba(160, 160, 160, 0.15); color: #999; } .source-badge.agent { background: rgba(147, 51, 234, 0.15); color: #7C3AED; } [data-theme="dark"] .source-badge.agent { background: rgba(147, 51, 234, 0.2); color: #A78BFA; } .source-badge.unknown { background: rgba(100, 100, 100, 0.1); color: #999; } /* Card reopen affordance — generalizes the old T29 video-only replay chip to every ui.card.* verb (image/video/web/pdf/markdown/audio/contact/file/form). Customer directive 2026-07-16 ("why is the text aligned to 'View' and not to 'Time'... it should align well with that"): "View" shares the message's LAST TEXT LINE with the timestamp — text, View and the clock all on one row, e.g. "Here's a form to fill out. [View] 09:16 PM" — with NO added text line for it. MECHANISM: inline placement, inserted into the DOM immediately BEFORE .message-time-spacer (see app.js), i.e. as ordinary text-flow content at the true end of the message. This mirrors .message-time-spacer / .message-time-inline's own paired technique exactly: the button is a normal inline box participating in the SAME line-box computation as the text and the spacer, so the browser's own wrap decides whether it fits on the last line (and the reserved timestamp gap after it) or wraps — there is no reserved-space or float hack for the button itself, and no second box whose position can go stale relative to the text. THIS REPLACES an earlier `float: right` + first-child placement (pinned top-right of the bubble). That version knocked .message-time-inline OFF the last text line — floating the button out of the text flow left the timestamp with no text to tuck onto, so it dropped to its own row (measured: text row y-centre 106 vs. timestamp row y-centre 152, a 46px drop). Inline-before-the-spacer placement is what restores the tuck: the button now participates in exactly the flow the spacer/timestamp pair already reserves room against. */ .card-replay-affordance { display: inline-block; vertical-align: baseline; margin: 0 0 0 var(--space-2); padding: 1px var(--space-2); border: 1px solid var(--color-primary); border-radius: var(--radius-full); background: transparent; color: var(--color-primary); font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .card-replay-affordance:hover { background: var(--color-primary); color: #fff; } [data-theme="dark"] .card-replay-affordance { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); } [data-theme="dark"] .card-replay-affordance:hover { background: var(--color-primary); color: #fff; } /* × on an inline card collapses it to this same pill in place (Target 2, customer feedback 2026-07-19: "what happened to the View" / "when I hit close (x) it goes away completely, maybe when closed bring back the view button?") -- see _collapseToViewPill in face-integration.js. It replaces the .af-card node directly inside .message-inline-card, so it's the sole occupant of that slot rather than sitting inline after bubble text; only the left margin (meant for that text-flow placement) is zeroed. */ .card-replay-affordance--inline { margin-left: 0; } /* === Unified Chat: Search Bar === */ .chat-header-right { display: flex; align-items: center; gap: var(--space-2); justify-self: end; } .chat-search-wrapper { display: flex; align-items: center; position: relative; } .chat-search-toggle { background: none; border: none; color: rgba(200,215,230,0.60); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); display: flex; align-items: center; transition: color var(--transition-fast); } .chat-search-toggle:hover { color: var(--color-primary); } .chat-search-input { width: 180px; padding: 4px 8px; font-size: var(--font-size-sm); border: 1px solid rgba(34,167,240,0.40); border-radius: var(--radius-sm); background: rgba(255,255,255,0.08); color: #e8f0f8; outline: none; transition: border-color var(--transition-fast); font-family: var(--font-body); } .chat-search-input:focus { border-color: var(--color-primary); } .chat-search-input::placeholder { color: rgba(200,215,230,0.45); } .chat-search-clear { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 1.1rem; padding: 2px 6px; line-height: 1; transition: color var(--transition-fast); } .chat-search-clear:hover { color: var(--color-danger); } /* === Unified Chat: Loading Spinner === */ .chat-load-more { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); } .chat-spinner { width: 18px; height: 18px; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* === Unified Chat: Voice message play hint === */ .voice-hint { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 4px; } /* === Unified Chat: Inline attachment === */ .message-attachment { margin-top: 6px; max-width: 100%; } .message-attachment img { max-width: 280px; max-height: 200px; border-radius: var(--radius-sm); cursor: pointer; } .message-attachment a { color: var(--color-primary); font-size: var(--font-size-sm); text-decoration: underline; } /* === Unified Chat: Search result highlight === */ .search-highlight { background: rgba(255, 195, 0, 0.3); border-radius: 2px; padding: 0 1px; } [data-theme="dark"] .search-highlight { background: rgba(255, 195, 0, 0.2); } /* === Mobile adjustments for search === */ @media (max-width: 768px) { .chat-search-input { width: 120px; } .chat-header-right { gap: var(--space-1); } } /* =================================================================== Agent Face integration — T4 Styles for the orb bar, card mount, and face card shell. Uses face CSS tokens (--af-*) where available, falls back to portal tokens for surfaces that render before face CSS loads. =================================================================== */ /* --- Chat face bar: orb + card mount row above the chat container --- */ .chat-face-bar { display: flex; align-items: flex-start; gap: 16px; padding: 12px 20px 0; background: var(--color-bg, #fff); border-bottom: 1px solid var(--color-border-light, #e5e7eb); flex-wrap: wrap; min-height: 0; /* Collapse to zero height when empty (no cards mounted yet) */ } /* Only show the bar if the orb canvas or a card is present */ #chat-face-bar:empty { display: none; padding: 0; border-bottom: none; } /* --- Orb wrapper: transparent, no well, no mask (orb halo self-fades) --- */ .chat-orb-wrap { width: 96px; height: 96px; border-radius: 50%; /* Transparent: the orb canvas clears to transparent each frame and composites onto whatever is behind the wrapper. No navy well — no dark disc on white. */ background: transparent; flex-shrink: 0; /* No mask: the atmospheric halo ends at rgba(...,0) so it self-fades cleanly. A hard radial mask would clip the soft glow edge — removed. */ } .chat-orb-wrap canvas { width: 100%; height: 100%; display: block; border-radius: 50%; } /* --- Card mount: beat-driven cards appear here --- */ .chat-card-mount { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; } /* --- Agent Face card shell (af-card) -------------------------------- The face library builds cards with these classes. The portal styles them here to match the portal theme while consuming face tokens. -------------------------------------------------------------------- */ .af-card { background: var(--af-surface, var(--color-surface)); border: 1px solid var(--af-border, var(--color-border)); border-radius: var(--af-radius, var(--radius-md)); box-shadow: var(--af-card-shadow, var(--shadow-md)); overflow: hidden; max-width: 380px; width: 100%; font-family: var(--af-font, var(--font-body)); font-size: var(--af-font-size-body, var(--font-size-base)); } /* --- Inline-with-reply cards (T-inline-cards, customer directive 2026-07-18/19) image/web/markdown/pdf/video card beats render as a permanent sibling of .message-bubble, inside the assistant message's bare wrapper div (see appendMessage/createMessageElement in app.js) -- NOT routed to #portalAppStage/a modal, and not gated behind a "View" replay button. Left-alignment is free (.message.assistant{align-self:flex-start} above); this block only adds spacing and caps the stage-sized af-card variants (media/video/web/pdf/markdown normally sized for a centered modal) back down to the same compact ~380-400px width the already-inline audio/ contact/file/form cards use, so every inline card reads as one family. */ .message-inline-card { margin-top: 6px; /* Customer feedback 2026-07-19 ("cards are not aligned with the other normal messages"): the earlier margin-left (var(--space-3)) pushed every inline card ~24px right of the assistant .message-bubble's left edge -- measured off a screenshot: bubble left x ~24-26px, card left x ~48-50px. Cards are a sibling of the bubble in the same bare message wrapper (see comment above), so they must share its left edge exactly; removed so the card's left border lines up flush with the message text above/below it, same as any normal assistant message. */ /* Sibling-containment half of the 2026-07-24 Windows stacking fix (see the .af-card isolation comment, ~3323): each inline card already gets its own isolated stacking context, but isolating only the card and not its transcript slot still lets an engine that mis-orders layers reach past the slot boundary to a sibling. Isolating the SLOT too means a neighboring inline card's header can never be reached by this card's internal paint order, full stop -- same technique as .stage's isolation below (~4155), applied one level further in for the plain-transcript (non-stage) card path. */ isolation: isolate; } .message-inline-card .af-card { margin: 0; /* Match the reply bubble's background (var(--color-bubble-ai)) so an inline card reads as part of the reply, not a separate opaque surface (the product owner 2026-07-24). Header made transparent below so the whole card is one tone. */ background: var(--color-bubble-ai); border-color: transparent; } .message-inline-card .af-card__header { background: transparent; } .message-inline-card .af-card--media, .message-inline-card .af-card--video, .message-inline-card .af-card--web, .message-inline-card .af-card--pdf, .message-inline-card .af-card--markdown { max-width: 380px; width: 100%; } /* Web/pdf cards default to a tall iframe; compact them for an inline transcript card. Web cards intentionally have no fullscreen control. */ .message-inline-card .af-card--web iframe { height: 240px; } .message-inline-card .af-card--pdf:not(.af-card--fullscreen) iframe { height: 280px; } /* Compact/modern chrome (customer feedback 2026-07-19: "the bar and button on the cards is very big and ugly, keep it modern"). Was a loud full- saturation accent-fill band (~25-30% of card height on a typical inline card); now a slim subtle surface strip -- Mycroft Blue only reappears as a restrained accent on the title chip below, not a full-bleed fill. */ .af-card__header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--af-border, var(--color-border-light)); background: var(--af-surface, var(--color-surface)); color: var(--af-text, var(--color-text)); } /* Type label ("Web"/"PDF"/etc.) -- was a bold heading-sized line reversed out of the full-blue header; now a small caption chip, accent used sparingly. */ .af-card__title { font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-primary, #22A7F0); padding: 2px 8px; border-radius: var(--radius-full, 9999px); background: rgba(34, 167, 240, 0.12); } .af-card__dismiss { background: none; border: none; cursor: pointer; color: var(--af-accent-contrast, #fff); /* Phase 1 fix C: rem so dismiss button scales with A−/A/A+ root font-size */ font-size: 1.125rem; /* ≈18px at default 16px root */ line-height: 1; padding: 0 2px; opacity: 0.75; } .af-card__dismiss:hover { opacity: 1; } .af-card__body { padding: 12px; color: var(--af-text, var(--color-text)); /* Stacking guard, UNCONDITIONAL not fullscreen-only (customer report 2026-07-24, Windows: a photo card's image painted over its own ×/⛶ controls AND over a neighboring markdown card's header -- see the .af-card isolation comment below for the full root-cause reasoning). Previously this guard existed only under .af-card--fullscreen (~3509), which left the INLINE state relying on implicit stacking (position:absolute controls vs. static body content) -- correct per spec, but with no explicit z-index of its own the body's stacking order was one GPU-compositing quirk away from flipping on some Chromium/Windows driver combos. Giving every body its own low z-index, always, means the controls' z-index:10 (.af-card__controls) never has to win by implication -- it's an explicit ordered pair in every state. */ position: relative; z-index: 1; } .af-card__desc { margin-bottom: 10px; font-size: var(--font-size-sm); color: var(--af-text-muted, var(--color-text-secondary)); } /* EmoteController card (Portal v2) — native trigger-button grid, no iframe */ .af-emote__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .af-emote__btn { padding: 12px 10px; border-radius: var(--radius-md, 10px); border: 1px solid var(--color-border-light, rgba(0,0,0,0.1)); background: var(--color-surface, #fff); color: var(--color-text); font-weight: 600; font-size: var(--font-size-sm, 0.875rem); letter-spacing: 0.02em; cursor: pointer; transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease; } .af-emote__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); } .af-emote__btn:active { transform: translateY(0); } .af-emote__btn--joy { border-color: #f4c542; } .af-emote__btn--surprise { border-color: #22a7f0; } .af-emote__btn--skeptical { border-color: #9b59b6; } .af-emote__btn--thinking { border-color: #2ecc71; } /* Form card fields */ .af-card__form { display: flex; flex-direction: column; gap: 10px; } .af-card__field { display: flex; flex-direction: column; gap: 4px; } .af-card__field-label { font-size: var(--font-size-sm); font-weight: 500; color: var(--af-text, var(--color-text)); } .af-card__input { padding: 8px 10px; border: 1px solid var(--af-border, var(--color-border)); border-radius: 6px; background: var(--af-bg, var(--color-bg)); color: var(--af-text, var(--color-text)); font: inherit; font-size: var(--font-size-sm); outline: none; transition: border-color 150ms ease; } .af-card__input:focus { border-color: var(--af-accent, var(--color-primary)); } .af-card__submit { padding: 9px 14px; background: var(--af-accent, var(--color-primary)); color: var(--af-accent-contrast, #fff); border: none; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; transition: opacity 150ms ease; align-self: flex-start; } .af-card__submit:hover { opacity: 0.88; } /* File card download link -- compact/modern chrome (customer directive 2026-07-19: "File -> Has a bad big looking ugly button"). Was a big solid Mycroft-Blue filled block; now a small outline/ghost control consistent with the rest of the compact card chrome (.af-card__ctrl, the web card's link-out CTA below) -- a secondary action, not a loud full-bleed button. */ .af-card__download { display: inline-block; padding: 5px 12px; background: transparent; color: var(--color-primary, #22A7F0); border: 1px solid rgba(34, 167, 240, 0.45); border-radius: var(--radius-md, 6px); font-weight: 600; font-size: 0.8125rem; text-decoration: none; transition: opacity 150ms ease, background 150ms ease; } .af-card__download:hover { background: rgba(34, 167, 240, 0.12); text-decoration: none; } /* Image card */ .af-card__image { display: block; max-width: 100%; height: auto; border-radius: 4px; } .af-card__caption { margin-top: 8px; font-size: var(--font-size-sm); color: var(--af-text-muted, var(--color-text-muted)); } /* --- Card control cluster (T19a) ---------------------------------------- Absolutely-positioned top-right cluster of icon buttons: fullscreen, reduce (pip), and dismiss. Appears at rest on video cards; appears on hover for lib cards. Semi-transparent so it doesn't dominate the card chrome but stays legible in both light and dark themes. ---------------------------------------------------------------------- */ .af-card { position: relative; /* anchor for the absolutely-positioned cluster */ /* Root-cause hardening (customer report 2026-07-24, Windows: expanded photo card's image painted over its own controls AND over a neighboring markdown card's header; does not reproduce on this Linux sandbox). .af-card--fullscreen carries BOTH `transform` and `backdrop-filter` (~3437/3454), each of which already creates a stacking context by the ordinary cascade -- the media img inside .af-card__body has neither, so on paper the controls' z-index:10 (.af-card__controls) already wins. But that correctness was IMPLICIT, riding entirely on which specific properties happen to be set on which element -- exactly the shape of thing that trips GPU-compositing layer-order bugs on some Chromium/Windows driver combos (backdrop-filter stacking is a known trouble spot). `isolation: isolate` makes every card its OWN stacking context explicitly and unconditionally, independent of transform/backdrop-filter/z-index happening to be present -- media and controls are then ALWAYS ordered relative to each other only, by their own z-index (body:1 / controls:10, see .af-card__body and .af-card__controls), and can never be reshuffled by a paint-order disagreement with content outside the card. This also contains the card from painting over a SIBLING card's header: isolation stops this card's stacking context from ever interleaving with a neighbor's (see .message-inline-card below for the sibling-containment half of this fix). */ isolation: isolate; } .af-card__controls { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; z-index: 10; /* Compact/modern chrome (customer feedback 2026-07-19): was an oversized dark rounded pill capsule around the two glyphs; the header behind it is opaque on its own now (see .af-card__header), so the cluster no longer needs its own background/blur/pill to stay legible -- each button gets its own small ghost hover state instead (.af-card__ctrl). */ background: transparent; border-radius: 0; padding: 0; /* Controls are always interactive — pointer-events:none was the hit-target bug: touch devices (iOS Safari) have no :hover so the controls were permanently non-tappable, and on desktop the browser's hit-test state doesn't refresh when pointer-events changes while the cursor is stationary, so the cached hit target (the header) won the click even though hover had fired. Fix: always auto; opacity handles discoverability (0.65 at rest, 1 on hover). */ opacity: 0.65; transition: opacity 150ms ease; } /* Full opacity on hover */ .af-card:hover .af-card__controls { opacity: 1; } /* Always visible on video card — video has no header and needs persistent controls */ .af-card--video .af-card__controls { opacity: 1; pointer-events: auto; } /* In fullscreen/reduced modes the cluster is always visible regardless of hover */ .af-card--fullscreen .af-card__controls, .af-card--reduced .af-card__controls { opacity: 1; pointer-events: auto; } /* --- One control per state (customer report 2026-07-24: on Windows the expanded photo card's × / ⛶ were both present, and the ⛶ duplicated the ×'s job of collapsing back to inline) -------------------------------------- Inline (not fullscreen) = ⛶ only; expanded (fullscreen) = × only. Applies uniformly to every card type through the shared .af-card__ctrl-- classes (cardShell in face/src/cards/base.js + buildInlineCardChrome in inlineCardBuilders.js both emit the same class names). The ⛶ rule is unconditional: a fullscreen card never shows it. The × rule is scoped with :has() to cards that HAVE a ⛶ control at all — form/file are the NO-EXPAND variant (rewireCardShellForInlineNoExpand deletes ⛶ outright, vanilla:2449) and keep their single × as their only control; without the :has() scope this rule would hide it too and leave those two card types with no control at all. */ .af-card--fullscreen .af-card__ctrl--fullscreen { display: none; } .af-card:not(.af-card--fullscreen):has(.af-card__ctrl--fullscreen) .af-card__ctrl--dismiss { display: none; } /* Small ghost icon buttons (compact/modern chrome, customer feedback 2026-07-19) -- was a bigger glyph reversed white-on-blue inside the dark pill; now a compact icon-sized hit target tinted with the card's own text color at rest and the Mycroft Blue accent on hover, so it reads correctly against the now-subtle (non-solid-color) header on both themes. ⚠️ 2026-07-24 correction: the theme-matched ghost treatment above was right for a card whose controls always sit on an OPAQUE header -- it silently assumed that backing. It breaks for image/video cards, where the header goes transparent in fullscreen (`.af-card--fullscreen .af-card__header`) and the controls float directly over arbitrary photo/video content: a `background:none` + muted-gray glyph can vanish against a bright region of the photo (this was misread the first time as a z-index/stacking bug -- z-index/click-target were already correct; the actual defect is contrast, no backing at all behind the glyph). Fix: a persistent (not hover-only) dark translucent scrim behind every control, same in inline and expanded states and for every card type (shared class, not per-kind) -- reads over bright OR dark media alike, independent of page theme. */ .af-card__ctrl { background: rgba(20, 30, 44, 0.55); border: none; cursor: pointer; color: #fff; font-size: 0.8125rem; /* ≈13px — compact glyph, was ≈15px */ line-height: 1; width: 22px; height: 22px; padding: 0; border-radius: var(--radius-md, 6px); opacity: 0.75; transition: opacity 120ms ease, background 120ms ease, color 120ms ease; display: flex; align-items: center; justify-content: center; } .af-card__ctrl:hover { opacity: 1; background: rgba(34, 167, 240, 0.85); color: #fff; } .af-copy-icon { position: relative; display: block; width: 12px; height: 12px; } .af-copy-icon::before, .af-copy-icon::after { content: ''; position: absolute; width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 2px; } .af-copy-icon::before { top: 0; left: 0; } .af-copy-icon::after { right: 0; bottom: 0; background: inherit; } .af-copy-icon--status { width: auto; height: auto; font-size: 0.875rem; font-weight: 800; line-height: 1; } .af-copy-icon--status::before, .af-copy-icon--status::after { content: none; } .af-markdown__copy-card.is-copied, .af-markdown__code-copy.is-copied { color: #16835d; } .af-markdown__copy-card.is-failed, .af-markdown__code-copy.is-failed { color: var(--color-danger, #dc2626); } .af-card__ctrl.af-markdown__copy-card.copy-button { width: 22px; height: 22px; padding: 4px; border: 0; background: rgba(20, 30, 44, 0.55); color: #fff; opacity: .75; box-shadow: none; } .af-card__ctrl.af-markdown__copy-card.copy-button:hover, .af-card__ctrl.af-markdown__copy-card.copy-button:focus-visible { color: #fff; background: rgba(34, 167, 240, 0.85); opacity: 1; } .af-card__ctrl.af-markdown__copy-card.copy-button.is-copied { color: #fff; background: #16835d; opacity: 1; } .af-card__ctrl.af-markdown__copy-card.copy-button.is-failed { color: #fff; background: var(--color-danger, #dc2626); opacity: 1; } @media (hover: none), (pointer: coarse) { .af-card__controls { top: 0; right: 0; gap: 0; } .af-card__ctrl, .af-card__ctrl.af-markdown__copy-card.copy-button { position: relative; isolation: isolate; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; opacity: 1; } .af-card__ctrl:hover, .af-card__ctrl.af-markdown__copy-card.copy-button:hover, .af-card__ctrl.af-markdown__copy-card.copy-button:focus-visible { background: transparent; } .af-card__ctrl::before { content: ''; position: absolute; width: 22px; height: 22px; border-radius: var(--radius-md, 6px); background: rgba(20, 30, 44, 0.55); pointer-events: none; z-index: -1; } .af-card__ctrl:hover::before, .af-card__ctrl:focus-visible::before { background: rgba(34, 167, 240, 0.85); } .af-card__ctrl:focus-visible { outline: none; } .af-card__ctrl:focus-visible::before { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 4px var(--color-primary, #22A7F0); } .af-card__ctrl.af-markdown__copy-card.copy-button.is-copied, .af-card__ctrl.af-markdown__copy-card.copy-button.is-failed { background: transparent; } .af-card__ctrl.af-markdown__copy-card.copy-button.is-copied::before { background: #16835d; } .af-card__ctrl.af-markdown__copy-card.copy-button.is-failed::before { background: var(--color-danger, #dc2626); } .af-card__ctrl > * { position: relative; z-index: 1; } } /* --- Card size states (T19a) ------------------------------------------ */ /* Expanded: escapes any parent overflow/clip; opens at the SAME centered modal size as the media library / settings modal (customer directive 2026-07-20 -- expanded cards were covering the whole viewport, ask was to match the orb/settings modal footprint instead). Sizing/surface treatment intentionally mirrors .proto-library (style.css ~6494-6511). */ .af-card--fullscreen { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; z-index: 9999 !important; width: min(880px, 92vw) !important; height: min(620px, 82vh) !important; max-width: none !important; border-radius: var(--radius-lg, 14px) !important; margin: 0 !important; /* Expanded card == the composer's glass (the product owner 2026-07-24: "when expanded I want it to match like how the composer is"). Same sheen + 0.55 navy fill as .chat-input-wrapper; light mode overrides to the light composer fill. */ background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0) 100%), rgba(20, 30, 44, 0.55) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: 0 20px 48px rgba(0,0,0,0.35) !important; } /* Expanded card in day mode = the light composer fill (tinted glass + sheen). */ [data-theme="light"] .af-card--fullscreen { background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.12) 45%, rgba(255,255,255,0) 100%), rgba(232,240,248,0.72) !important; border-color: rgba(44,62,80,0.16) !important; } /* Header strip transparent in fullscreen so the card is one uniform glass surface like the composer, not a card with an opaque title bar. */ .af-card--fullscreen .af-card__header { background: transparent !important; border-bottom-color: rgba(255,255,255,0.12) !important; } [data-theme="light"] .af-card--fullscreen .af-card__header { border-bottom-color: rgba(44,62,80,0.14) !important; } /* Dimming backdrop behind the modal-sized card -- at 880x620 the rest of the page must not show through undimmed, same tint/blur as .proto-library-active (rgba(12,20,30,0.55) + blur(4px)). NOTE: this was previously a CSS-only `.af-card--fullscreen::before` with `position:fixed; inset:0`, on the theory that a negative z-index child would sit behind the card but still cover the full viewport. That's wrong: .af-card--fullscreen itself has `backdrop-filter` AND `transform`, and either one makes the element the *containing block* for its own `position:fixed` descendants (CSS Transforms/Filter Effects spec). So the ::before's `inset:0` was resolving against the 880x620 CARD box, not the viewport -- the dim/blur only ever covered the card itself, never the rest of the page. A fixed child of a transformed/filtered ancestor can never escape it, so this needed a real DOM element instead: a `.af-fullscreen-backdrop` div appended directly to (a SIBLING of the card, not a descendant), created/removed by face-integration.js (_ensureFullscreenBackdrop / _removeFullscreenBackdrop) whenever a card enters/exits `.af-card--fullscreen`. Since has no transform/filter, `inset:0` here is the real viewport. */ .af-fullscreen-backdrop { position: fixed; inset: 0; background: rgba(12, 20, 30, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 9998; /* below the card's 9999 so the card stays on top */ } /* In fullscreen the body fills the remaining space and the video fills it */ .af-card--fullscreen .af-card__body, .af-card--fullscreen .af-card__body--video { height: 100%; display: flex; align-items: stretch; padding: 0; } /* Stacking guard (customer screenshot, Windows, 2026-07-24): an expanded photo card painted OVER the control cluster, hiding the × / ⛶ under the image, and (2026-07-24 follow-up report) over a neighboring markdown card's header too. .af-card__controls is position:absolute + z-index:10 and SHOULD already win against the (non-positioned) media content by the ordinary cascade -- but .af-card--fullscreen also carries `transform` + `backdrop-filter`, and a full-bleed /