/* ========================================================================== JARVIS Voice App - Cyberpunk Terminal Green Theme Medium intensity: new palette + fonts + HUD flourishes, still readable. ========================================================================== */ :root { --bg-base: #050a05; --bg-panel: #0a140a; --bg-elevated: #102010; --phosphor-bright: #00ff66; --phosphor-mid: #00cc4f; --phosphor-dim: #008833; --phosphor-glow: rgba(0, 255, 102, 0.55); --phosphor-faint: rgba(0, 255, 102, 0.15); --warning: #ffaa00; --error: #ff3344; --text-primary: #d0ffd0; --text-dim: #66aa66; --border-faint: #1a3d1a; --font-display: 'Orbitron', 'Arial Black', sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace; --bracket-size: 14px; --bracket-thickness: 2px; } /* --------------------------------------------------------------------------- Reset + base --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { /* 100dvh = dynamic viewport height. On iOS Safari this excludes the URL bar correctly; 100vh would leak content behind the home indicator. Fallback to 100% for any browser without dvh support. */ height: 100%; height: 100dvh; overflow: hidden; } /* Document-scrolling pages opt out of the viewport lock above. That lock is correct for the chat shell (fixed HUD, internal scroll panes) but silently clips any normal document: anything below the fold becomes unreachable with no scrollbar to hint at it. Dashboard pages set . */ html.doc-scroll, html.doc-scroll body { height: auto; min-height: 100%; overflow: visible; } body { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; color: var(--text-primary); background: var(--bg-base); /* Subtle CRT scan lines on the whole background */ background-image: linear-gradient( rgba(0, 255, 102, 0.025) 1px, transparent 1px ); background-size: 100% 3px; display: flex; flex-direction: column; /* Safe area insets: respect iPhone notch + home indicator */ padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; /* Prevent iOS from auto-resizing text on landscape rotation */ -webkit-text-size-adjust: 100%; } /* Slow sweeping scan line overlay */ .scanline { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent 0%, var(--phosphor-glow) 50%, transparent 100% ); z-index: 100; pointer-events: none; animation: sweep 8s linear infinite; opacity: 0.4; } @keyframes sweep { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } } /* --------------------------------------------------------------------------- HUD frame primitives (corner brackets) --------------------------------------------------------------------------- */ .hud-frame { position: relative; background: var(--bg-panel); border: 1px solid var(--border-faint); } .bracket { position: absolute; width: var(--bracket-size); height: var(--bracket-size); pointer-events: none; z-index: 2; } .bracket-tl { top: -1px; left: -1px; border-top: var(--bracket-thickness) solid var(--phosphor-bright); border-left: var(--bracket-thickness) solid var(--phosphor-bright); } .bracket-tr { top: -1px; right: -1px; border-top: var(--bracket-thickness) solid var(--phosphor-bright); border-right: var(--bracket-thickness) solid var(--phosphor-bright); } .bracket-bl { bottom: -1px; left: -1px; border-bottom: var(--bracket-thickness) solid var(--phosphor-bright); border-left: var(--bracket-thickness) solid var(--phosphor-bright); } .bracket-br { bottom: -1px; right: -1px; border-bottom: var(--bracket-thickness) solid var(--phosphor-bright); border-right: var(--bracket-thickness) solid var(--phosphor-bright); } /* --------------------------------------------------------------------------- Header --------------------------------------------------------------------------- */ header.hud-frame { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 8px 4px 8px; } .brand { display: flex; align-items: baseline; gap: 8px; } .brand-prefix { color: var(--phosphor-bright); font-weight: 700; font-size: 18px; text-shadow: 0 0 8px var(--phosphor-glow); } .brand-title { font-family: var(--font-display); font-weight: 900; font-size: 20px; letter-spacing: 0.15em; color: var(--phosphor-bright); text-shadow: 0 0 10px var(--phosphor-glow); } .brand-mode { font-family: var(--font-mono); font-size: 11px; color: var(--phosphor-dim); letter-spacing: 0.1em; } .header-controls { display: flex; align-items: center; gap: 8px; } /* --------------------------------------------------------------------------- Buttons (terminal style with > prefix) --------------------------------------------------------------------------- */ .hud-btn { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--phosphor-mid); background: var(--bg-elevated); border: 1px solid var(--phosphor-dim); padding: 6px 12px; cursor: pointer; transition: all 120ms ease-out; } .hud-btn:hover, .hud-btn:focus-visible { color: var(--phosphor-bright); border-color: var(--phosphor-bright); background: var(--bg-panel); text-shadow: 0 0 6px var(--phosphor-glow); box-shadow: 0 0 12px var(--phosphor-faint); outline: none; } .hud-btn:active { background: var(--phosphor-dim); color: var(--bg-base); } .hud-btn:disabled { opacity: 0.4; cursor: not-allowed; } .hud-btn-primary { border-color: var(--phosphor-bright); color: var(--phosphor-bright); } .hud-btn-danger { border-color: var(--error); color: var(--error); } .hud-btn-danger:hover, .hud-btn-danger:focus-visible { color: var(--error); border-color: var(--error); text-shadow: 0 0 6px rgba(255, 51, 68, 0.6); box-shadow: 0 0 12px rgba(255, 51, 68, 0.2); } .hud-icon-btn { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--phosphor-mid); background: transparent; border: 1px solid var(--phosphor-dim); padding: 6px 10px; cursor: pointer; transition: all 120ms ease-out; } .hud-icon-btn:hover, .hud-icon-btn:focus-visible { color: var(--phosphor-bright); border-color: var(--phosphor-bright); text-shadow: 0 0 6px var(--phosphor-glow); outline: none; } .hud-icon-btn[aria-pressed="true"] { color: var(--phosphor-bright); background: var(--bg-elevated); border-color: var(--phosphor-bright); box-shadow: 0 0 8px var(--phosphor-faint); } .mic-btn.recording { color: var(--warning); border-color: var(--warning); animation: mic-pulse 0.8s ease-in-out infinite; } @keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 4px rgba(255, 170, 0, 0.3); } 50% { box-shadow: 0 0 16px rgba(255, 170, 0, 0.8); } } /* --------------------------------------------------------------------------- Voice select dropdown --------------------------------------------------------------------------- */ .hud-select { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--phosphor-mid); background: var(--bg-elevated); border: 1px solid var(--phosphor-dim); padding: 5px 8px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; background-size: 8px; padding-right: 24px; } .hud-select:hover, .hud-select:focus-visible { color: var(--phosphor-bright); border-color: var(--phosphor-bright); outline: none; } /* --------------------------------------------------------------------------- Visualizer stage --------------------------------------------------------------------------- */ .viz-stage { position: relative; margin: 4px 8px; padding: 16px; height: 220px; display: flex; align-items: center; justify-content: center; transition: height 240ms ease-out, padding 240ms ease-out; } .viz-stage.compact { height: 90px; padding: 4px; } #viz { width: 100%; height: 100%; max-width: 600px; display: block; } .viz-status { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--phosphor-dim); text-transform: uppercase; pointer-events: none; } /* --------------------------------------------------------------------------- Messages area --------------------------------------------------------------------------- */ .messages-frame { flex: 1 1 auto; margin: 4px 8px; padding: 16px; overflow-y: auto; min-height: 0; /* Smooth momentum scrolling on iOS */ -webkit-overflow-scrolling: touch; } #messages-inner { display: flex; flex-direction: column; gap: 12px; } .msg { padding: 8px 12px; border-left: 2px solid var(--phosphor-dim); background: var(--bg-elevated); font-family: var(--font-mono); white-space: pre-wrap; word-wrap: break-word; max-width: 90%; line-height: 1.55; } .msg.user { align-self: flex-end; border-left: none; border-right: 2px solid var(--phosphor-bright); color: var(--phosphor-bright); } .msg.jarvis { align-self: flex-start; border-left-color: var(--phosphor-bright); color: var(--text-primary); } .msg.jarvis::before { content: '> '; color: var(--phosphor-bright); font-weight: 700; } .msg.thinking { color: var(--phosphor-dim); font-style: italic; } .msg.thinking::after { content: ' ...'; animation: think-dots 1.5s steps(4, end) infinite; } .msg.system { align-self: center; border: 1px solid var(--phosphor-dim); color: var(--phosphor-mid); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; padding: 4px 10px; max-width: 100%; } .msg.error { align-self: center; border: 1px solid var(--error); color: var(--error); font-size: 12px; background: rgba(255, 51, 68, 0.05); max-width: 100%; } @keyframes think-dots { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } } /* --------------------------------------------------------------------------- Proposal panel --------------------------------------------------------------------------- */ .proposal-panel { margin: 4px 8px; padding: 12px 16px; border: 1px solid var(--phosphor-bright); box-shadow: 0 0 16px var(--phosphor-faint); animation: panel-in 240ms ease-out; } @keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .proposal-header { margin-bottom: 10px; } .proposal-title { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; color: var(--phosphor-bright); text-shadow: 0 0 8px var(--phosphor-glow); word-break: break-all; /* long file paths shouldn't overflow the panel */ } .proposal-title.proposal-title-new { /* Deliberately using the existing add-color from the diff palette so "new file" reads visually the same as "all-add lines below". */ color: var(--diff-add-fg, #7fff7f); text-shadow: 0 0 8px rgba(127, 255, 127, 0.4); } .proposal-title.proposal-title-update { /* Warning-tinted so UPDATE reads as more consequential than CREATE. */ color: var(--warning, #ffb000); text-shadow: 0 0 8px rgba(255, 176, 0, 0.4); } .proposal-diff { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--text-primary); background: var(--bg-base); border: 1px solid var(--border-faint); padding: 10px; max-height: 320px; overflow: auto; white-space: pre; margin-bottom: 12px; } .proposal-actions { display: flex; gap: 8px; justify-content: flex-end; } /* Color diff lines (applied by app.js when rendering) */ .proposal-diff .diff-add { color: var(--phosphor-bright); } .proposal-diff .diff-remove { color: var(--error); } .proposal-diff .diff-meta { color: var(--phosphor-dim); } .proposal-diff .diff-hunk { color: var(--warning); } /* --------------------------------------------------------------------------- Footer + chat form --------------------------------------------------------------------------- */ .footer-frame { margin: 4px 8px 8px 8px; padding: 12px 16px; } #chat-form { display: flex; gap: 8px; align-items: flex-end; } #input { flex: 1 1 auto; width: 100%; min-width: 0; font-family: var(--font-mono); /* 16px minimum prevents iOS Safari from zooming on focus */ font-size: 16px; line-height: 1.5; color: var(--phosphor-bright); background: var(--bg-base); border: 1px solid var(--phosphor-dim); padding: 8px 10px; resize: none; max-height: 128px; caret-color: var(--phosphor-bright); } #input::placeholder { color: var(--phosphor-dim); letter-spacing: 0.05em; } #input:focus-visible { outline: none; border-color: var(--phosphor-bright); box-shadow: 0 0 12px var(--phosphor-faint); } #input:disabled { opacity: 0.5; } .hud-status { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--phosphor-dim); min-height: 14px; } .hud-status.status-error { color: var(--error); } .hud-status.status-warn { color: var(--warning); } .hud-status.status-ok { color: var(--phosphor-bright); } /* --------------------------------------------------------------------------- Scrollbars (subtle terminal style) --------------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--phosphor-dim); border: 1px solid var(--bg-base); } ::-webkit-scrollbar-thumb:hover { background: var(--phosphor-mid); } /* --------------------------------------------------------------------------- Mobile tweaks --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Phone (portrait) — tightened spacing, smaller chrome, prevent overflow --------------------------------------------------------------------------- */ @media (max-width: 600px) { body { font-size: 13px; } /* Header: keep it on ONE line, never wrap */ header.hud-frame { padding: 6px 10px; margin: 4px 4px 2px 4px; flex-wrap: nowrap; gap: 6px; min-width: 0; } .brand { gap: 4px; min-width: 0; flex: 0 1 auto; overflow: hidden; } .brand-prefix { font-size: 14px; } .brand-title { font-size: 14px; letter-spacing: 0.1em; } .brand-mode { display: none; } .header-controls { gap: 4px; flex: 0 0 auto; } .hud-btn, .hud-icon-btn { padding: 4px 6px; font-size: 9px; letter-spacing: 0.05em; } .hud-select { padding: 4px 6px; padding-right: 18px; font-size: 9px; background-size: 6px; background-position: right 6px center; } /* Visualizer: smaller so the chat has room */ .viz-stage { height: 150px; padding: 4px; margin: 2px 4px; } .viz-stage.compact { height: 60px; } .viz-status { font-size: 9px; bottom: 4px; } /* Messages: thinner margins */ .messages-frame { padding: 8px; margin: 2px 4px; } .msg { padding: 6px 10px; } /* Proposal panel */ .proposal-panel { padding: 8px 10px; margin: 2px 4px; } .proposal-diff { font-size: 10px; max-height: 200px; padding: 8px; } /* Footer: compact, respect home indicator */ .footer-frame { padding: 8px 10px; margin: 2px 4px 4px 4px; } #chat-form { gap: 6px; } #input { padding: 6px 8px; } .hud-status { font-size: 10px; margin-top: 6px; letter-spacing: 0.05em; } } /* Very narrow phones (e.g. iPhone SE at 375px) */ @media (max-width: 380px) { .brand-title { font-size: 12px; } .hud-btn, .hud-icon-btn, .hud-select { font-size: 8px; padding: 3px 5px; } .viz-stage { height: 130px; } } /* Landscape orientation: hide the viz so the chat is usable */ @media (max-height: 480px) and (orientation: landscape) { .viz-stage { display: none; } header.hud-frame { padding: 4px 8px; margin: 2px 4px 0 4px; } } /* =========================================================================== Login page (Phase 6 form-based auth) =========================================================================== */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 16px; } .login-stage { width: 100%; max-width: 360px; } .login-card { position: relative; background: var(--bg-panel); padding: 28px 22px 22px; border: 1px solid var(--border-faint); } .login-brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border-faint); } .login-card .brand-title { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: 0.15em; color: var(--phosphor-bright); } .login-card .brand-mode { font-family: var(--font-mono); font-size: 10px; color: var(--phosphor-dim); letter-spacing: 0.1em; } .login-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--phosphor-dim); margin: 14px 0 4px; } .login-input { width: 100%; background: var(--bg-elevated); border: 1px solid var(--border-faint); color: var(--text-primary); font-family: var(--font-mono); font-size: 16px; /* 16px prevents iOS zoom-on-focus */ padding: 10px 12px; outline: none; transition: border-color 0.15s ease; } .login-input:focus { border-color: var(--phosphor-mid); box-shadow: 0 0 0 1px var(--phosphor-dim) inset; } .login-input[readonly] { color: var(--text-dim); background: var(--bg-base); } .login-error { margin-top: 14px; padding: 8px 10px; border: 1px solid var(--error); color: var(--error); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; background: rgba(255, 51, 68, 0.08); } .login-submit { margin-top: 18px; width: 100%; padding: 12px; font-size: 13px; letter-spacing: 0.15em; } .login-status { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-faint); font-family: var(--font-mono); font-size: 10px; color: var(--phosphor-dim); letter-spacing: 0.1em; text-align: center; } /* Tiny LOGOUT button in main app header */ .hud-btn-logout { font-size: 9px; padding: 2px 6px; opacity: 0.7; } .hud-btn-logout:hover { opacity: 1; } /* Phase 3: tap-to-start trigger for ?action=morning / ?action=evening */ .msg.action-trigger { background: rgba(0, 255, 102, 0.10); border: 1px solid var(--phosphor-mid); color: var(--phosphor-bright); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.15em; text-align: center; padding: 18px 14px; margin: 12px 8px; animation: trigger-pulse 1.4s ease-in-out infinite; transition: transform 0.1s ease; } .msg.action-trigger:hover { transform: scale(1.02); } .msg.action-trigger:active { transform: scale(0.98); } @keyframes trigger-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 102, 0.0); } 50% { box-shadow: 0 0 18px 2px rgba(0, 255, 102, 0.35); } } /* =========================================================================== Settings panel (Phase 4: notifications + scheduled briefs) =========================================================================== */ .hud-btn-settings { font-size: 9px; padding: 2px 6px; } .settings-panel { position: relative; margin: 4px 8px; padding: 14px 16px 16px; background: var(--bg-panel); border: 1px solid var(--border-faint); max-height: 70dvh; overflow-y: auto; } .settings-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--border-faint); } .settings-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.15em; color: var(--phosphor-bright); } .settings-section { padding: 12px 0; border-bottom: 1px solid var(--border-faint); } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0; } .settings-label { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-primary); } .settings-sublabel { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } .settings-state { font-family: var(--font-mono); font-size: 10px; color: var(--phosphor-dim); letter-spacing: 0.05em; } .settings-hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 8px; line-height: 1.4; } .settings-wide { width: 100%; margin-top: 8px; padding: 10px; } .settings-time { background: var(--bg-elevated); border: 1px solid var(--border-faint); color: var(--text-primary); font-family: var(--font-mono); font-size: 16px; /* prevents iOS zoom */ padding: 6px 10px; } .settings-toggle { width: 22px; height: 22px; accent-color: var(--phosphor-mid); } .settings-actions { display: flex; gap: 10px; margin-top: 14px; } .settings-actions .hud-btn { flex: 1; padding: 10px; } .settings-status { margin-top: 12px; font-family: var(--font-mono); font-size: 10px; color: var(--phosphor-dim); letter-spacing: 0.06em; text-align: center; min-height: 1.2em; } /* Engagement controls in the CFG panel */ .settings-select { font-size: 11px; padding: 4px 8px; max-width: 60%; } /* In-app snooze affordance under the morning action trigger */ .msg.action-snooze { text-align: center; color: var(--text-dim); border: 1px dashed var(--border-faint); padding: 6px 10px; margin: 6px auto; max-width: 60%; letter-spacing: 0.08em; transition: color 0.15s ease, border-color 0.15s ease; } .msg.action-snooze:hover { color: var(--phosphor-mid); border-color: var(--phosphor-dim); } /* =========================================================================== Suggestion Engine — Improvement Queue panel =========================================================================== */ .suggestions-panel { margin: 4px 8px; padding: 12px 16px 14px; border: 1px solid var(--phosphor-dim); animation: panel-in 240ms ease-out; max-height: 52dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .hud-btn-suggestions { font-size: 9px; padding: 2px 6px; } .hud-btn-audit { font-size: 9px; padding: 2px 6px; /* Same warning tint as an UPDATE proposal -- audit items are pending-review, not a routine action. */ color: var(--warning, #ffb000); border-color: var(--warning, #ffb000); text-shadow: 0 0 6px rgba(255, 176, 0, 0.4); } .hud-btn-audit:hover, .hud-btn-audit:focus-visible { background: rgba(255, 176, 0, 0.1); } .audit-count { margin-left: 4px; opacity: 0.75; } .suggestions-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border-faint); } .suggestions-title { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.15em; color: var(--phosphor-bright); text-shadow: 0 0 6px var(--phosphor-glow); } .suggestions-hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 10px; letter-spacing: 0.04em; text-align: center; } /* Individual suggestion card */ .suggestion-card { background: var(--bg-elevated); border: 1px solid var(--border-faint); padding: 10px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; transition: border-color 120ms ease-out; } .suggestion-card:last-child { margin-bottom: 0; } .suggestion-card:hover { border-color: var(--phosphor-dim); } .suggestion-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .suggestion-ordinal { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--phosphor-dim); flex-shrink: 0; } .suggestion-title { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-primary); flex: 1 1 auto; } .suggestion-score { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--phosphor-bright); letter-spacing: 0.05em; flex-shrink: 0; background: var(--bg-base); border: 1px solid var(--phosphor-dim); padding: 2px 6px; } .suggestion-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); line-height: 1.45; } .suggestion-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; } .suggestion-category { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--phosphor-dim); border: 1px solid var(--border-faint); padding: 2px 6px; } .suggestion-approve-btn { font-size: 11px; padding: 5px 12px; letter-spacing: 0.08em; } .suggestion-approve-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Loading / empty state inside the panel */ .suggestions-loading { font-family: var(--font-mono); font-size: 11px; color: var(--phosphor-dim); text-align: center; padding: 12px 0; letter-spacing: 0.06em; } @media (max-width: 600px) { .suggestions-panel { padding: 8px 10px 10px; margin: 2px 4px; max-height: 58dvh; } .suggestion-card { padding: 8px 10px; gap: 4px; } .suggestion-title { font-size: 11px; } .suggestion-desc { font-size: 10px; } }