:root { color-scheme: dark; --bg: #0b0b0f; --bg-color: var(--bg); --bg-2: #111118; --bg-3: #1a1a2e; --bg-hover: rgba(255, 255, 255, 0.06); --panel: #141420; --panel-bg: #17171d; --input-bg: #101015; --panel-border: #232334; --border-color: #2e3a50; --border: #333333; --accent: #7c9bff; --accent-color: var(--accent); --text: #f1f1f6; --text-primary: #e2e8f0; --text-secondary: #b0b8d0; --text-tertiary: #64748b; --text-color: var(--text-primary); --muted: #a5a5b5; --text-muted: var(--muted); --success: #3ddc97; --error: #ff6b6b; --bg-secondary: var(--bg-3); --surface-1: var(--panel); --surface-2: var(--bg-2); --surface-3: #222222; --surface-4: #2a2a2a; /* RGB triple (no alpha) so translucent surfaces like .conversation-overlay can flip tint via rgba(var(--overlay-tint), X) while keeping their own per-element opacity. Root-caused 2026-08-28: these surfaces were still hardcoded rgba(11,11,15,X) after the first light-theme pass because the hex-based color audit that drove that pass doesn't see rgba() literals — meanwhile several *text* colors inside the same components (e.g. .conv-overlay-title) had already been converted to --text-primary, so in light mode that produced near-black text on a near-black surface. */ --overlay-tint: 11, 11, 15; } /* Light theme — opt-in via [data-theme="light"] on ; dark (above) stays the default so unauthenticated/no-preference sessions render exactly as before. */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f5f9; --bg-2: #eceef4; --bg-3: #ffffff; --bg-hover: rgba(15, 23, 42, 0.05); --panel: #ffffff; --panel-bg: #ffffff; --input-bg: #eef0f6; --panel-border: #e2e8f0; --border-color: #dbe2ee; --border: #dbe2ee; --accent: #4f63d2; --text: #14161f; --text-primary: #1f2430; --text-secondary: #4b5468; --text-tertiary: #6b7488; --muted: #5a687d; --success: #128a5e; --error: #d64545; --surface-3: #eef0f6; --surface-4: #e4e7f0; --overlay-tint: 255, 255, 255; } /* One-off light-theme text-color overrides for classes that hardcode a hex accent tuned for the dark background above. #a78bfa (light violet) reads fine on dark surfaces but drops well below WCAG AA contrast on light ones -- darkened here to the same hue family instead of the CSS-variable flip the rest of the theme uses, since these are one-off accent colors rather than the shared text/surface palette. */ :root[data-theme="light"] .pipeline-status, :root[data-theme="light"] .pipeline-summary-toggle, :root[data-theme="light"] .pipeline-steps, :root[data-theme="light"] .preview-execution-status.completed, :root[data-theme="light"] .assistant-meta-routing, :root[data-theme="light"] .conversation-overlay-text.is-user { color: #6d28d9; } * { box-sizing: border-box; } .hidden { display: none !important; } .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; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: "Inter", system-ui, sans-serif; } #root { height: 100%; display: flex; flex-direction: column; position: relative; } .modal-root { position: fixed; inset: 0; background: rgba(7, 7, 14, 0.78); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; pointer-events: auto; } .modal-root.hidden { display: none !important; } .account-page { flex: 1; padding: 0 48px 60px; max-width: 1200px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 28px; /* body.mosaic-enabled collapses #root (this element's parent) to its topbar's natural height and hides overflow at the body level (see the comment at the body.mosaic-enabled rule) — that's correct for the mosaic workspace, but #account-page is also a child of #root and gets caught in the same collapse with no scroll fallback anywhere in the chain, silently clipping account content below the fold instead of scrolling to it. Bounding this element to the viewport and giving it its own scroll fixes that regardless of mosaic state. */ min-height: 0; max-height: 100vh; overflow-y: auto; } .account-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .account-header h2 { margin: 0 0 6px; font-size: 28px; } .account-subtitle { margin: 0; color: var(--muted); font-size: 14px; } .account-section { padding: 20px; border: 1px solid var(--panel-border); border-radius: 18px; background: var(--panel); display: flex; flex-direction: column; gap: 16px; } .account-section-header h3 { margin: 0 0 6px; font-size: 18px; } .account-section-header p { margin: 0; color: var(--muted); font-size: 13px; } .account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .account-card { background: rgba(10, 10, 16, 0.45); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .account-preferences { gap: 16px; } .account-toggle { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--text); } .account-toggle input[type="checkbox"] { margin-top: 4px; width: 16px; height: 16px; } .account-toggle strong { display: block; margin-bottom: 4px; font-size: 14px; } .account-field, .account-metric { display: flex; flex-direction: column; gap: 6px; } .account-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); } .account-value { font-size: 15px; font-weight: 600; } .account-field.compact { gap: 8px; } .account-select { border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(10, 10, 16, 0.6); color: var(--text); padding: 8px 10px; font-size: 13px; } .account-details { border: 1px dashed rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 12px 16px; background: rgba(10, 10, 16, 0.3); } .account-details summary { cursor: pointer; font-size: 13px; color: var(--muted); } .account-user-id { margin-top: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .account-action-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .account-action-row.align-between { justify-content: space-between; } .overage-return { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 14px; border: 1px solid rgba(108, 240, 213, 0.28); border-radius: 14px; background: rgba(108, 240, 213, 0.07); } .overage-return.hidden { display: none; } .overage-return strong, .overage-return span { display: block; } .overage-return strong { color: var(--text); font-size: 13px; } .overage-return span { margin-top: 3px; color: var(--muted); font-size: 12px; } .ghost-button.small { padding: 6px 10px; font-size: 12px; } .ghost-button.subtle { opacity: 0.8; } .account-session-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .account-table-wrapper { border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; } .account-table { width: 100%; border-collapse: collapse; font-size: 13px; } .account-table th, .account-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .account-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); background: rgba(10, 10, 16, 0.6); } .account-table tr:last-child td { border-bottom: none; } .account-table-actions { display: flex; flex-wrap: wrap; gap: 8px; } .account-empty { padding: 18px; color: var(--muted); font-size: 13px; text-align: center; } .account-muted { color: var(--muted); font-size: 12px; } .account-footer { margin-bottom: 20px; } .billing-dashboard-grid { align-items: stretch; } .billing-summary-card, .billing-usage-card { min-height: 100%; } .billing-usage-meter { width: 100%; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .billing-usage-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #5eead4, #818cf8); transition: width 180ms ease; } /* Overage card */ .overage-card { border: 1px solid rgba(255, 255, 255, 0.06); } .overage-header-field { display: flex; justify-content: space-between; align-items: center; } .overage-description { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); margin: 4px 0 8px; line-height: 1.4; } .overage-value { color: #fbbf24; } .overage-toggle-label { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; flex-shrink: 0; } .overage-toggle-checkbox { opacity: 0; width: 0; height: 0; position: absolute; } .overage-toggle-switch { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.12); border-radius: 20px; transition: background 150ms ease; } .overage-toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 150ms ease; } .overage-toggle-checkbox:checked + .overage-toggle-switch { background: #818cf8; } .overage-toggle-checkbox:checked + .overage-toggle-switch::after { transform: translateX(16px); } .billing-upgrade-options { display: flex; flex-direction: column; gap: 10px; } .billing-plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .billing-plan-option { border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(10, 10, 16, 0.55); color: var(--text); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; } .billing-plan-option:hover { border-color: rgba(129, 140, 248, 0.65); } .billing-plan-option.is-current-plan { border-color: rgba(94, 234, 212, 0.8); box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.4); } .billing-plan-name { font-size: 14px; font-weight: 700; } .billing-plan-copy { font-size: 12px; color: var(--muted); line-height: 1.35; } .ghost-button.danger { border-color: rgba(255, 107, 107, 0.5); color: var(--error); } @media (max-width: 720px) { .account-page { padding: 24px; } .account-header { flex-direction: column; align-items: flex-start; } } .modal-panel, .auth-card { width: min(420px, 100%); background: var(--bg-3); border: 1px solid var(--panel-border); border-radius: 20px; padding: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); text-align: center; position: relative; z-index: 1; } .toast { position: fixed; right: 24px; bottom: 24px; background: var(--bg-3); border: 1px solid var(--panel-border); color: var(--text); padding: 12px 16px; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); max-width: 320px; font-size: 13px; z-index: 120; } .toast.error { border-color: rgba(255, 107, 107, 0.4); color: var(--error); } @media (max-width: 640px) { /* right: 24px + max-width: 320px needs 344px of viewport — narrower phones (~320-360px wide) would clip the toast's left edge off-screen. Span with symmetric margins instead of a fixed max-width so it always fits. */ .toast { left: 16px; right: 16px; max-width: none; } } .auth-card h2, .modal-panel h2 { margin: 0 0 8px; font-size: 20px; } .auth-subtitle { margin: 0 0 20px; color: var(--muted); font-size: 13px; } .auth-stack { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 24px 0; } /* Every provider gets the same slot */ .auth-slot { width: 100%; display: flex; justify-content: center; } .auth-btn { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: var(--bg-3); color: var(--text); padding: 12px 16px; font-size: 14px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .auth-btn:hover { border-color: rgba(124, 155, 255, 0.6); background: var(--bg-3); } /* Unified button geometry */ .auth-btn, .auth-slot iframe { width: 100%; max-width: 360px; height: 48px; border-radius: 12px; font-size: 15px; } /* Google container rules */ .auth-slot[data-provider="google"] { position: relative; min-height: 48px; } #google-signin { width: 100%; display: flex; justify-content: center; } .auth-slot[data-provider="google"] button[disabled] { opacity: 0.5; cursor: not-allowed; } .auth-helper { margin: 8px auto 0; width: 100%; max-width: 360px; font-size: 12px; color: var(--muted); text-align: center; min-height: 16px; } .auth-helper[data-active='false'] { display: none; } /* --- Google auth skeleton --- */ .auth-slot[data-provider="google"]:has(#google-signin:empty)::before { content: ""; display: block; width: 100%; max-width: 360px; height: 48px; border-radius: 12px; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.12) 37%, rgba(255, 255, 255, 0.06) 63% ); background-size: 400% 100%; animation: auth-skeleton 1.2s ease-in-out infinite; margin: 0 auto; } @keyframes auth-skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* Ensure iframe never collapses */ #google-signin iframe { width: 100%; height: 48px; border-radius: 12px; } /* Optional provider styling */ .auth-slot[data-provider="apple"] .auth-btn { background: var(--bg-2); color: var(--text); } .auth-slot[data-provider="email"] .auth-btn { background: rgba(255, 255, 255, 0.06); } .auth-slot[data-provider="guest"] .auth-btn { background: rgba(95, 160, 255, 0.14); border-color: rgba(95, 160, 255, 0.35); } .email-auth { display: flex; gap: 8px; width: 100%; max-width: 360px; } .email-input { flex: 1; height: 48px; padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text); } .email-sent { width: 100%; max-width: 360px; text-align: center; font-size: 14px; opacity: 0.9; } .newsletter { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 12px; color: var(--muted); text-align: left; } .auth-legal-links { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: 11px; color: var(--muted); } .auth-legal-links a { color: #60a5fa; text-decoration: none; } .auth-legal-links a:hover { text-decoration: underline; } .modal-panel h3 { margin: 0 0 8px; font-size: 18px; } .modal-panel p { margin: 0 0 16px; color: var(--muted); font-size: 13px; } .modal-input { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 16px; } .modal-input input { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: var(--text); } .modal-input textarea { min-height: 120px; padding: 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: var(--text); resize: vertical; font: inherit; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; } .modal-actions button { border-radius: 10px; border: 1px solid transparent; padding: 8px 14px; font-size: 13px; cursor: pointer; } .modal-actions .secondary { background: var(--bg-3); color: var(--text); border-color: var(--panel-border); } .modal-actions .secondary:hover { border-color: rgba(124, 155, 255, 0.6); } .modal-actions .danger { background: #2a1416; color: #ffb5b5; border-color: rgba(255, 107, 107, 0.6); } .modal-actions .danger:hover { background: #351719; } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); } .auth-form { display: grid; gap: 10px; } .auth-form input { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); background: var(--input-bg); color: var(--text); padding: 12px 14px; font-size: 14px; } .auth-form button { border-radius: 12px; border: none; background: var(--accent); color: #0b0b0f; padding: 12px 16px; font-weight: 600; cursor: pointer; transition: filter 0.2s ease; } .auth-form button:hover { filter: brightness(1.1); } .auth-form button:disabled { cursor: not-allowed; filter: grayscale(0.4); } .auth-hint { margin: 14px 0 0; font-size: 12px; color: var(--muted); } .auth-notice { margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 12px; background: rgba(61, 220, 151, 0.14); color: var(--success); } .auth-notice.error { background: rgba(255, 107, 107, 0.14); color: var(--error); } #top-bar { padding: 10px 24px; background: var(--bg-2); border-bottom: 1px solid var(--panel-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* pdco-logo.svg is baked with a fixed light fill (#e2e8f0) for the dark #top-bar background -- it isn't currentColor-driven, so it can't adapt to [data-theme="light"] the way CSS-variable text can. Rather than maintain a second light-mode logo asset, pin a small dark backdrop behind it so the mark always renders exactly as it does in dark mode, regardless of theme. */ .logo-mark { background: #111118; border-radius: 8px; padding: 3px; } .top-bar-actions { display: flex; align-items: center; gap: 12px; } #top-bar h1 { margin: 0; font-size: 18px; } #status-label { display: none; } /* ── Chrome density ───────────────────────────────────────────────────────── Normal density spends 171px before any module renders (top bar 61 + thread dock 36 + mosaic toolbar 47 + gaps) - 19% of a 900px viewport, 22% of a 768px laptop. Focused density collapses the two toolbars and compacts the header to ~32px, handing that space back to the modules. What focused density must NEVER do is strand anyone: PR #715 shipped a collapsed state that hid the thread list AND the only "new thread" button, and had to be deleted in #717. So #chrome-focused-nav re-exposes both the module toggles and + new thread inside the compact bar, and the density control itself stays visible in both states. */ .chrome-focused-nav { display: none; align-items: center; gap: 6px; } body.chrome-focused .chrome-focused-nav { display: flex; } .chrome-focused-btn { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--panel-border); border-radius: 7px; background: var(--bg-3); color: var(--text); font: 600 12px/1 'IBM Plex Sans', 'Segoe UI', sans-serif; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .chrome-focused-btn:hover { border-color: var(--accent, #6ea8fe); } .chrome-focused-plus { padding: 0 6px; } /* Mirrors .mosaic-chip.is-attention/.has-console-update: in focused/collapsed chrome density the module toolbar (and its Console chip) is display:none until this button's dropdown is expanded, so a new-console-output pulse needs a visible target that survives collapse — this button is it. */ #chromeModulesBtn.is-attention, #chromeModulesBtn.has-console-update { border-color: rgba(34, 211, 238, 0.72); background: linear-gradient(180deg, rgba(34, 211, 238, 0.16), rgba(34, 211, 238, 0.08)); color: #f8feff; box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.16), 0 0 18px rgba(34, 211, 238, 0.18); } #chromeModulesBtn.is-attention { animation: mosaic-chip-attention 1.4s ease-in-out infinite; } .chrome-focused-count { min-width: 15px; padding: 0 4px; border-radius: 999px; background: var(--panel-border); font-size: 11px; text-align: center; } .chrome-focused-caret { font-size: 9px; opacity: 0.7; } /* The density control is the escape hatch, so it is present at both densities and only rotates to show which way it will move. */ .chrome-density-toggle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 4px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s, transform 0.18s; } .chrome-density-toggle:hover { color: var(--text); border-color: var(--panel-border); } body.chrome-focused .chrome-density-toggle { transform: rotate(180deg); } /* ── Focused density: collapse ─────────────────────────────────────────── */ body.chrome-focused #top-bar { padding: 4px 24px; } body.chrome-focused #top-bar h1, body.chrome-focused #top-bar .brand-divider, body.chrome-focused #voice-mode-toggle, body.chrome-focused #conversation-mode-toggle, body.chrome-focused #topBarPublicResearchButton, body.chrome-focused #topBarColonyButton, body.chrome-focused .logo-mark { display: none; } body.chrome-focused .user-trigger { padding-top: 0; padding-bottom: 0; } body.chrome-focused .user-avatar { width: 24px; height: 24px; font-size: 10px; } body.chrome-focused .user-meta { line-height: 1.05; } body.chrome-focused #creditBadge { padding-top: 2px; padding-bottom: 2px; } body.chrome-focused #thread-dock { display: none !important; } body.chrome-focused #mosaic-toolbar { display: none; } /* Peeking re-shows the REAL toolbar rather than a duplicate set of chips, so toggling a module from focused density runs exactly the same handlers. */ body.chrome-focused.chrome-modules-peek #mosaic-toolbar { display: flex; } /* Studio Shell (non-mosaic) sizes #workspace off a hardcoded 100px of chrome; with both toolbars gone only the compact header remains. */ body.chrome-focused #workspace { height: calc(100vh - 32px); } /* ── Voice & Conversation Mode Buttons (desktop) ────────────────────────── */ .mobile-voice-toggle { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--panel-border); background: var(--bg-3); font-size: 15px; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .mobile-voice-toggle svg { width: 28px; height: 28px; display: block; pointer-events: none; } .mobile-voice-toggle:hover { background: #28283a; border-color: rgba(168, 85, 247, 0.4); } .mobile-voice-toggle[aria-pressed="true"] { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.5); } /* Companion has a new thought — pulses amber until user opens Converse */ .mobile-voice-toggle.has-companion-thought { border-color: rgba(251, 191, 36, 0.7); box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5); animation: companion-thought-pulse 2s ease-in-out infinite; } @keyframes companion-thought-pulse { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); } 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5); } } .credit-badge { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--panel-border); background: var(--bg-2); color: var(--text); font-size: 12px; cursor: pointer; } .credit-badge .icon { font-size: 12px; } .credit-badge .count { color: var(--text); } /* Fuel-gauge dial for the top-bar credit badge (simple + advanced mode share this one header, so this one rule covers both). Green fill = remaining, red fill grows clockwise as credits are used -- fixed semantic colors, independent of the badge-soft/firm/hard tone classes (those still drive the pill border, unrelated). Exact remaining/total numbers live in #credit-panel, revealed on click. Scoped to the #creditBadge instance only -- the generic .credit-badge .icon rule above still serves the overage/earn badges' text-glyph icons. */ #creditBadge .icon { display: inline-block; width: 16px; height: 16px; font-size: 0; border-radius: 50%; background: conic-gradient(var(--error) calc(var(--credit-used-pct, 0) * 360deg), var(--success) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); flex: none; } #creditBadge .count { color: inherit; font-variant-numeric: tabular-nums; font-weight: 700; } /* F (full, 0% used) and E (<=5% remaining) get their own fixed color, independent of tone -- the letter itself already carries the state. */ #creditBadge.credit-full .count { color: var(--success); } #creditBadge.credit-empty .count { color: var(--error); } .credit-badge:hover .credit-badge-tooltip { opacity: 1; transform: translateY(0); pointer-events: auto; } .credit-badge-tooltip { position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg-2); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--muted); font-size: 11px; padding: 6px 8px; border-radius: 8px; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease; white-space: nowrap; z-index: 10; } .credit-badge.badge-soft { border-color: rgba(250, 204, 21, 0.6); color: #fde047; } .credit-badge.badge-firm { border-color: rgba(251, 146, 60, 0.7); color: #fdba74; } .credit-badge.badge-hard { border-color: rgba(248, 113, 113, 0.8); color: #fca5a5; } .credit-badge.overage-badge { border-color: rgba(45, 212, 191, 0.55); background: rgba(20, 184, 166, 0.08); color: #99f6e4; } .credit-badge.overage-badge .count { color: inherit; } /* Inside #credit-panel (see index.html) rather than a second permanent top-bar pill — the badge keeps its pill styling but sits in-flow as a popover row instead of floating in the header. */ .credit-panel-overage { margin-top: 10px; cursor: default; } .user-menu { position: relative; display: inline-block; } .user-trigger { background: none; border: none; color: #cfd6ff; font-size: 14px; font-weight: 500; cursor: pointer; padding: 4px 6px; display: inline-flex; align-items: center; gap: 8px; } .user-trigger:hover { color: var(--text); } .user-avatar { width: 32px; height: 32px; border-radius: 999px; background: rgba(99, 102, 241, 0.2); border: 1px solid rgba(99, 102, 241, 0.5); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: #e6e8ff; } .user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .user-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.1; } .user-name { font-size: 13px; font-weight: 600; color: inherit; } .user-plan { font-size: 11px; color: rgba(214, 219, 255, 0.8); } .chevron { margin-left: 4px; font-size: 12px; opacity: 0.7; } .user-dropdown { position: absolute; right: 0; top: 28px; min-width: 220px; background: #0f1117; border: 1px solid #1f2330; border-radius: 10px; padding: 6px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); display: none; z-index: 1000; } .user-menu:hover .user-dropdown { display: block; } .menu-item { width: 100%; text-align: left; background: none; border: none; color: #d6dbff; padding: 8px 10px; font-size: 13px; border-radius: 6px; cursor: pointer; } .menu-item:hover { background: rgba(79, 140, 255, 0.12); } .menu-divider { height: 1px; margin: 6px 0; background: #1f2330; } .menu-item.danger { color: #ff9a9a; } .menu-item.danger:hover { background: rgba(255, 90, 90, 0.12); } .credit-panel { position: absolute; right: 24px; top: 70px; width: 280px; background: var(--bg-2); border: 1px solid var(--panel-border); border-radius: 12px; padding: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); z-index: 20; } .credit-panel.hidden { display: none; } .credit-panel-header { font-weight: 600; font-size: 14px; margin-bottom: 12px; } .credit-meter { position: relative; display: grid; gap: 6px; } .credit-meter .bar { background: #0b0b14; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); height: 22px; overflow: hidden; } .credit-meter .fill { height: 100%; background: linear-gradient(90deg, rgba(124, 155, 255, 0.4), rgba(124, 155, 255, 0.9)); width: 0%; transition: width 0.3s ease; } .credit-meter .label { display: flex; align-items: center; justify-content: flex-end; font-size: 11px; color: var(--text); letter-spacing: 0.02em; } .credit-panel-meta { margin-top: 12px; font-size: 12px; color: var(--muted); display: grid; gap: 4px; } .credit-session { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: grid; gap: 8px; font-size: 12px; color: var(--muted); } .credit-session-title { font-weight: 600; color: var(--text); } .credit-session-metrics { display: grid; gap: 6px; } .credit-session-metrics div { display: flex; justify-content: space-between; gap: 8px; } .credit-session-previous { font-size: 11px; color: #d7defb; } .credit-session-previous.hidden { display: none; } .credit-panel-callout { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(124, 155, 255, 0.1); border: 1px solid rgba(124, 155, 255, 0.3); font-size: 12px; color: #d7defb; } .credit-panel-nudge { margin-top: 10px; font-size: 12px; color: var(--muted); } .credit-panel-nudge.hidden, .credit-panel-callout.hidden, .usage-nudge.hidden { display: none; } #workspace { flex: 1; display: grid; /* chat | split1 | companion | split2 | secondary */ grid-template-columns: minmax(0, 1.3fr) 6px 320px 6px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "tabbar tabbar tabbar tabbar tabbar" "chat split1 companion split2 secondary"; gap: 16px 0; padding: 16px; /* 64px top bar + 36px persistent thread dock (moved out of #chat-panel). */ height: calc(100vh - 100px); } #workspace-tab-bar { grid-area: tabbar; } #left-pane { grid-area: chat; } /* now holds chat only - see Task 5 */ #agent-panel { grid-area: companion; } #col-splitter { grid-area: split1; } #col-splitter-2 { grid-area: split2; } #secondary-column { grid-area: secondary; display: flex; flex-direction: column; min-height: 0; } @media (min-width: 1366px) { #workspace-tab-bar { display: none; } } #secondary-tab-bar { display: flex; } .secondary-tab-button { background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); color: var(--muted); padding: 6px 10px; cursor: pointer; border-radius: 6px; margin-right: 4px; } .secondary-tab-button.is-active { background: rgba(255, 255, 255, 0.08); color: var(--text); } .secondary-drawer-toggle { display: none; } /* tablet-landscape only - Task 5 */ /* Column splitter between left and right panes */ .col-splitter { grid-row: 2; grid-column: 2; width: 6px; cursor: col-resize; background: rgba(255, 255, 255, 0.08); border-radius: 999px; margin: 0 5px; transition: background 0.15s; z-index: 10; } .col-splitter:hover, .col-splitter.dragging { background: rgba(96, 165, 250, 0.4); } .workspace-tab-bar { grid-column: 1 / -1; /* span all columns including splitter */ display: flex; gap: 8px; padding: 8px 12px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel); } .workspace-tab-button { border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); padding: 6px 10px; min-width: 42px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; } .workspace-tab-button.is-active { border-color: var(--panel-border); background: rgba(255, 255, 255, 0.09); } .workspace-tab-button.has-console-update { border-color: rgba(56, 189, 248, 0.7); background: rgba(14, 165, 233, 0.16); color: #e0f7ff; box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12), 0 0 18px rgba(56, 189, 248, 0.16); } .workspace-tab-button.has-console-update::after { content: ""; position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 999px; background: #67e8f9; box-shadow: 0 0 10px rgba(103, 232, 249, 0.9); } #left-pane { display: flex; flex-direction: column; height: 100%; gap: 8px; min-height: 0; min-width: 0; overflow: hidden; } #workspace[data-workspace-panel="agent"] { grid-template-columns: minmax(0, 1fr) 6px minmax(260px, 0.72fr); grid-template-areas: "tabbar tabbar tabbar" "chat split2 secondary"; } #workspace[data-workspace-panel="agent"] #chat-panel, #workspace[data-workspace-panel="agent"] #left-pane-splitter, #workspace[data-workspace-panel="agent"] #col-splitter { display: none !important; } #workspace[data-workspace-panel="agent"] #left-pane, #workspace[data-workspace-panel="agent"] #agent-panel, #workspace[data-workspace-panel="agent"] #agent-personality-section, #workspace[data-workspace-panel="agent"] #agent-active-display { min-height: 0; } #workspace[data-workspace-panel="agent"] #agent-panel { flex: 1 1 auto; height: 100%; overflow: hidden; } #workspace[data-workspace-panel="agent"] #agent-console-render { min-height: 0; } #workspace[data-workspace-panel="agent"][data-secondary-tab="companion"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabbar" "chat"; } #workspace[data-workspace-panel="agent"][data-secondary-tab="companion"] #secondary-column, #workspace[data-workspace-panel="agent"][data-secondary-tab="companion"] #col-splitter-2 { display: none !important; } #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabbar" "chat"; } #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #chat-panel, #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #left-pane-splitter, #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #col-splitter, #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #secondary-column, #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #col-splitter-2 { display: none !important; } #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #agent-panel, #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #agent-personality-section, #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #agent-active-display, #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #agent-console-render { min-height: 0; } #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #agent-panel { flex: 1 1 auto; height: 100%; overflow: hidden; } .agents-panel { flex: 1; } .agents-panel-body { display: flex; flex-direction: column; gap: 12px; } .agents-layout { display: flex; gap: 20px; min-height: 0; } .agents-graph-column { flex: 1; } .agents-side-column { width: 300px; min-width: 0; transition: width 200ms ease, opacity 200ms ease; overflow: hidden; } .agents-side-column.is-collapsed { width: 0; opacity: 0; } .agents-side-toggle { align-self: flex-start; padding: 8px 10px; font-size: 12px; border-radius: 6px; border: 1px solid var(--panel-border); background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; } .agents-box { padding: 8px; background: var(--bg-2); border: 1px solid var(--border); min-height: 90px; max-height: 360px; resize: vertical; overflow: auto; margin-bottom: 12px; } .agents-autogen-button { align-self: flex-start; padding: 8px 12px; border: 1px solid rgba(251, 146, 60, 0.5); background: rgba(251, 146, 60, 0.1); color: #fb923c; font-weight: 600; font-size: 12px; border-radius: 6px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .agents-autogen-button:hover { background: rgba(251, 146, 60, 0.2); border-color: rgba(251, 146, 60, 0.8); } .agents-run-button { align-self: flex-start; padding: 8px 12px; border: none; background: #00afff; color: #000; font-weight: 700; border-radius: 6px; } #chat-panel { flex: 1 1 0; min-height: 160px; position: relative; /* Lets the send button react to the panel's own rendered width (a resized mosaic tile, a popped-out module window) instead of only the viewport — see the @container rule near .chat-send-btn. */ container-type: inline-size; container-name: chat-panel; } #agent-panel { flex: 1 1 0; min-height: 0; overflow: visible; } #secondary-column { display: flex; flex-direction: column; height: 100%; gap: 8px; min-height: 0; min-width: 0; } /* Emphasis: the focused panel grows, others shrink */ #left-pane .panel, #secondary-column .panel { flex: 1 1 0; transition: flex 0.2s ease; overflow: hidden; } #secondary-column .panel.is-emphasized { flex: 4 1 0; } /* Left pane: ~60/40 split — both panels stay usable regardless of active tab */ #left-pane .panel.is-emphasized { flex: 3 1 0; } #left-pane .panel:not(.is-emphasized):not(.hidden) { flex: 2 1 0; min-height: 120px; } /* Splitter drag state */ #left-pane .splitter.dragging, #secondary-column .splitter.dragging { background: rgba(96, 165, 250, 0.4); } #left-pane .panel:not(.is-emphasized):not(.hidden), #secondary-column .panel:not(.is-emphasized):not(.hidden) { flex: 1 1 0; min-height: 120px; } .panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; } /* Individuated Studio Shell */ #workspace.studio-shell { grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: 1fr; grid-template-areas: "studio-sidebar studio-stage"; gap: 12px; padding: 12px; min-height: 0; } .studio-sidebar { grid-area: studio-sidebar; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 12px; border: 1px solid var(--panel-border); border-radius: 10px; background: rgba(10, 13, 22, 0.92); } .studio-sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgba(241, 245, 249, 0.92); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .studio-sidebar-icon, .studio-sidebar-open { border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(255, 255, 255, 0.05); color: var(--text); border-radius: 7px; cursor: pointer; } .studio-sidebar-icon { width: 28px; height: 28px; } .studio-sidebar-open { position: fixed; left: 12px; top: 76px; z-index: 220; padding: 8px 10px; font-size: 12px; } .studio-module-nav, .studio-layout-controls { display: flex; flex-direction: column; gap: 7px; } .studio-layout-controls { padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, 0.14); } .studio-module-button, .studio-layout-button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.035); color: rgba(226, 232, 240, 0.84); text-align: left; cursor: pointer; position: relative; } .studio-layout-button { justify-content: center; min-height: 32px; font-size: 12px; } .studio-module-button:hover, .studio-layout-button:hover, .studio-module-button.is-active, .studio-layout-button.is-active { border-color: rgba(125, 211, 252, 0.46); background: rgba(14, 165, 233, 0.13); color: var(--text); } .studio-module-button.has-console-update { border-color: rgba(56, 189, 248, 0.62); background: rgba(14, 165, 233, 0.14); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.1); } .studio-module-button.has-console-update::after { content: ""; position: absolute; right: 10px; width: 7px; height: 7px; border-radius: 999px; background: #67e8f9; box-shadow: 0 0 12px rgba(103, 232, 249, 0.82); } .studio-module-stage { grid-area: studio-stage; display: grid; gap: 12px; min-width: 0; min-height: 0; } #workspace[data-studio-layout="focus"] .studio-module-stage { grid-template-columns: minmax(0, 1fr); } #workspace[data-studio-layout="split"] .studio-module-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); } #workspace[data-studio-layout="grid"] .studio-module-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } .studio-module-panel { grid-area: auto !important; min-height: 0; min-width: 0; overflow: hidden; } .studio-module-panel.hidden, .studio-legacy-hidden, #workspace.studio-shell #workspace-tab-bar, #workspace.studio-shell #secondary-tab-bar, #workspace.studio-shell #left-pane, #workspace.studio-shell #secondary-column, #workspace.studio-shell #left-pane-splitter, #workspace.studio-shell #splitter, #workspace.studio-shell #col-splitter, #workspace.studio-shell #col-splitter-2 { display: none !important; } .studio-panel-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } .studio-panel-switcher { max-width: 132px; min-height: 28px; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 7px; background: rgba(15, 23, 42, 0.86); color: var(--text); font-size: 12px; } .voice-panel { position: relative; } .voice-panel-body, .voice-panel-overlay-anchor { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* Without display:flex the empty placeholder (height:100%) consumed every pixel of voice-panel-body and the anchor below it collapsed to 0×0 — leaving the docked overlay (position:absolute; inset:0 inside the anchor) with no visible area. Pop-out worked because .is-popped uses width/height:100% inside a fresh window body. */ .voice-panel-body { display: flex; flex-direction: column; } /* Show the placeholder OR the overlay, never both. The anchor still hosts the overlay; hiding it when the overlay is .hidden keeps the empty state click-targets reachable. */ #voice-panel .voice-panel-body:has(.conversation-overlay.hidden) .voice-panel-overlay-anchor { display: none; } #voice-panel .voice-panel-body:has(.conversation-overlay:not(.hidden)) .voice-panel-empty { display: none; } .voice-panel-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; color: rgba(226, 232, 240, 0.86); text-align: center; } .voice-panel-empty h2 { margin: 0; font-size: 22px; letter-spacing: 0; } .voice-panel-empty p { max-width: 420px; margin: 0; color: var(--muted); line-height: 1.5; } .voice-panel-mark { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid rgba(125, 211, 252, 0.35); border-radius: 50%; background: rgba(14, 165, 233, 0.12); color: #bae6fd; font-weight: 700; } #voice-panel .conversation-overlay:not(.is-floating):not(.is-popped) { position: absolute; inset: 0; border-radius: 0; } .studio-sidebar-collapsed { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "studio-stage" !important; } .studio-sidebar-collapsed .studio-sidebar { display: none; } .studio-popout-body { margin: 0; height: 100vh; background: #070a12; color: var(--text); overflow: hidden; } .studio-popout-body .is-popped-module { width: 100vw; height: 100vh; border: none; border-radius: 0; } /* Defense in depth: app.js strips `.is-floating` before adopting a panel into a pop-out window, but if a stray in-page "float" state (mosaicBoot.js's Create-tile float, `position:fixed; width:480px; height:560px; bottom/right: 24px`) ever survives the adopt, force the pop-out window to still win — same-specificity rules would otherwise fall back to source order and pin the panel to a small corner card instead of filling the window. */ .studio-popout-body .is-popped-module.is-floating { position: static !important; inset: auto !important; width: 100vw !important; height: 100vh !important; bottom: auto !important; right: auto !important; } /* render() in initStudioModuleShell adds `hidden` to popped panels after popOutModule moves them to the new window. Inside mosaic, the panel was kept visible by `#mosaic-host [data-panel-host] > .panel`, but that ancestor selector no longer matches after adoptNode strips the panel from the mosaic tree. Force the popped panel to render. */ .studio-popout-body .studio-module-panel, .studio-popout-body .is-popped-module { display: flex !important; } @media (max-width: 1099px) { #workspace.studio-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "studio-stage"; padding-top: 52px; } .studio-sidebar { position: fixed; top: 64px; left: 12px; bottom: 12px; width: min(280px, calc(100vw - 24px)); z-index: 230; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); } #workspace[data-studio-layout="split"] .studio-module-stage, #workspace[data-studio-layout="grid"] .studio-module-stage { grid-template-columns: minmax(0, 1fr); } } .panel-header { padding: 12px 16px; border-bottom: 1px solid var(--panel-border); font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .panel-header-title { display: flex; align-items: center; gap: 8px; } .panel-header-actions { display: flex; align-items: center; gap: 8px; } .icon-button { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 16px; padding: 6px; } .ui-icon { width: 15px; height: 15px; display: inline-block; vertical-align: middle; } .icon-button:hover { color: var(--text); } .icon-button:disabled { cursor: not-allowed; opacity: 0.4; } .icon-button.copied { color: #4ade80; } .panel-header-label { font-size: 12px; font-weight: 500; color: var(--muted); } .panel-body { padding: 16px; overflow-y: auto; flex: 1; min-height: 0; } /* Thread-switch loading bar -- app.js toggles .hidden on _switchToThread. Classic top-loading-bar pattern: a 2px strip with a sliding gradient, overlaid rather than pushing layout so it never shifts the messages underneath. */ .thread-switch-indicator { position: absolute; left: 0; right: 0; height: 2px; overflow: hidden; z-index: 5; background: color-mix(in srgb, var(--accent) 15%, transparent); } .thread-switch-indicator::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--accent); animation: thread-switch-sweep 1.1s ease-in-out infinite; } .thread-switch-indicator.hidden { display: none; } @keyframes thread-switch-sweep { 0% { left: -40%; } 100% { left: 100%; } } @media (prefers-reduced-motion: reduce) { .thread-switch-indicator::after { animation: none; left: 0; width: 100%; } } .panel-footer { padding: 0; border-top: 1px solid var(--panel-border); display: flex; flex-direction: column; gap: 0; align-items: stretch; flex: 0 0 auto; } .context-mode-control { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; } .context-mode-control select { background: var(--bg-2); border: 1px solid var(--panel-border); color: var(--text); border-radius: 8px; padding: 4px 8px; font-size: 12px; } /* Discipline pills and source chips */ .library-disciplines-wrapper { position: relative; display: inline-flex; align-items: center; gap: 6px; } .library-disciplines { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; } .discipline-pill { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 500; background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--panel-border); transition: opacity 0.3s; } .discipline-pill.dimmed { opacity: 0.4; } .attachment-pill.library-source .pill-remove { display: none; } .attachment-pill.library-source { border-left: 3px solid var(--genre-color, rgba(255,255,255,0.3)); } .attachment-pill.library-source.dimmed { opacity: 0.4; } .attachment-pill.user-attachment .pill-icon { margin-right: 4px; } .source-manifest { margin-top: 8px; font-size: 0.85rem; color: var(--text-secondary); } .source-manifest summary { cursor: pointer; font-weight: 500; } .source-manifest ul { list-style: none; padding-left: 0; margin-top: 4px; } .source-manifest li { padding: 2px 0; } .source-manifest a { color: #9fd3ff; text-decoration: none; } .source-manifest a:hover { text-decoration: underline; } .source-manifest-author { color: var(--muted); } .source-manifest-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 6px; border-radius: 999px; border: 1px solid rgba(159,211,255,0.24); color: #9fd3ff; font-size: 0.72rem; line-height: 1.4; } .library-mode-btn { display: inline-flex; align-items: center; justify-content: center; background: #0f1118; border: 1px solid rgba(127, 174, 212, 0.22); color: #a9c7e3; border-radius: 8px; width: 38px; height: 34px; padding: 0; font: 600 11px/1 'IBM Plex Sans', 'Segoe UI', sans-serif; letter-spacing: 0.03em; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s, opacity 0.15s; } .library-mode-btn:hover:not(:disabled) { border-color: rgba(169, 199, 227, 0.5); color: #e6edf5; } .library-mode-btn.is-active { color: #e6edf5; border-color: rgba(127, 174, 212, 0.55); background: radial-gradient(circle at top left, rgba(127, 174, 212, 0.18), transparent 42%), linear-gradient(180deg, rgba(15, 22, 33, 0.98), rgba(10, 14, 20, 0.98)); box-shadow: 0 0 0 1px rgba(127, 174, 212, 0.14), 0 8px 18px rgba(3, 7, 12, 0.28); } .library-mode-btn:disabled { opacity: 0.45; cursor: not-allowed; } .library-mode-icon { width: 18px; height: 18px; display: block; object-fit: contain; flex-shrink: 0; } .creativity-mode-pill-group { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; background: rgba(11, 14, 22, 0.88); border: 1px solid rgba(116, 134, 168, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } .creativity-mode-pill { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid rgba(110, 127, 160, 0.18); background: rgba(18, 22, 32, 0.96); color: #8ea6c7; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s; } .creativity-mode-pill[hidden] { display: none; } .creativity-mode-pill:hover { border-color: rgba(164, 191, 224, 0.42); color: #e9f2fb; transform: translateY(-1px); } .creativity-mode-pill.is-active { color: #f6fbff; border-color: rgba(127, 174, 212, 0.55); background: radial-gradient(circle at 30% 25%, rgba(127, 174, 212, 0.22), transparent 52%), linear-gradient(180deg, rgba(19, 28, 40, 0.98), rgba(13, 18, 27, 0.98)); box-shadow: 0 0 0 1px rgba(127, 174, 212, 0.12), 0 7px 18px rgba(3, 7, 12, 0.26); } .creativity-mode-pill:focus-visible, .library-mode-btn:focus-visible { outline: 2px solid rgba(164, 191, 224, 0.55); outline-offset: 2px; } .creativity-mode-pill-icon { font-size: 13px; line-height: 1; pointer-events: none; } .creativity-mode-pill-icon-svg { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; } .creativity-mode-pill-icon-svg svg { display: block; } .library-dropdown-label { flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: left; display: inline-flex; align-items: center; gap: 5px; } .library-dropdown-caret { font-size: 9px; opacity: 0.6; flex-shrink: 0; } .library-dropdown-panel { position: fixed; min-width: 380px; max-width: 520px; max-height: min(460px, 55vh); background: var(--bg-2); border: 1px solid rgba(124, 155, 255, 0.2); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); z-index: 9000; display: flex; flex-direction: column; overflow: hidden; } .library-dropdown-panel.hidden { display: none; } .library-dropdown-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid rgba(124, 155, 255, 0.1); background: rgba(17, 17, 27, 0.95); } .library-filter-btn { background: transparent; border: 1px solid rgba(100, 100, 140, 0.3); color: var(--muted); border-radius: 12px; padding: 2px 10px; font-size: 10px; font-weight: 500; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .library-filter-btn:hover { background: rgba(124, 155, 255, 0.1); border-color: rgba(124, 155, 255, 0.3); } .library-filter-btn.active { background: rgba(124, 155, 255, 0.2); border-color: rgba(124, 155, 255, 0.5); color: var(--text-primary); } .library-dropdown-list { overflow-y: auto; flex: 1; padding: 4px; } .library-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; background: transparent; border: none; border-left: 3px solid transparent; color: var(--text); font-size: 12px; cursor: pointer; text-align: left; border-radius: 6px; transition: background 0.1s; } .library-dropdown-item:hover { background: rgba(124, 155, 255, 0.1); } .library-genre-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .library-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .library-item-genre { font-size: 9px; padding: 1px 6px; border-radius: 8px; border: 1px solid; white-space: nowrap; flex-shrink: 0; font-weight: 500; letter-spacing: 0.02em; } .library-item-tokens { font-size: 10px; color: var(--muted); white-space: nowrap; flex-shrink: 0; } /* ─── Agent Profile Editor Modal ───────────────────────────────────────── */ .ape-modal { width: min(520px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: var(--bg-3); border: 1px solid var(--border-color); border-radius: 14px; box-shadow: 0 20px 80px rgba(0,0,0,0.45); color: var(--text-primary); overflow: hidden; } .ape-header { padding: 16px 20px; border-bottom: 1px solid #1f2a3d; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ape-title { font-size: 16px; font-weight: 700; color: var(--text); } .ape-subtitle { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .ape-close-btn { border: none; background: transparent; color: var(--text-secondary); font-size: 20px; cursor: pointer; padding: 4px; line-height: 1; } .ape-close-btn:hover { color: var(--text-primary); } .ape-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; overflow-y: auto; min-height: 0; } .ape-row { display: flex; gap: 12px; } .ape-row-thirds { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .ape-field { display: flex; flex-direction: column; gap: 4px; flex: 1; } .ape-field-wide { flex: 1.6; } .ape-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } .ape-hint { font-weight: 400; text-transform: none; color: var(--text-tertiary); letter-spacing: 0; } .ape-input, .ape-select, .ape-textarea { background: #091222; border: 1px solid #28425f; color: var(--text-primary); padding: 8px 10px; border-radius: 8px; font-size: 13px; font-family: inherit; transition: border-color 0.15s; width: 100%; box-sizing: border-box; } .ape-textarea { resize: vertical; line-height: 1.5; min-height: 60px; } .ape-input:focus, .ape-select:focus, .ape-textarea:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2); } .ape-select { cursor: pointer; appearance: auto; } .ape-footer { padding: 12px 20px; border-top: 1px solid #1f2a3d; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ape-footer-hint { font-size: 11px; color: var(--text-tertiary); } .ape-footer-actions { display: flex; gap: 8px; } .ape-btn { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .ape-btn-cancel { border: 1px solid var(--border-color); background: var(--bg-2); color: var(--text-primary); } .ape-btn-cancel:hover { background: var(--bg-3); border-color: #475569; } .ape-btn-save { border: none; background: #4f46e5; color: #fff; } .ape-btn-save:hover { background: #4338ca; } .ape-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ape-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; min-height: 42px; background: #091222; border: 1px solid #28425f; border-radius: 8px; align-items: center; } .ape-chips:focus-within { border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2); } .ape-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; background: rgba(79, 70, 229, 0.18); border: 1px solid rgba(79, 70, 229, 0.45); color: #c7d2fe; border-radius: 999px; font-size: 12px; line-height: 1; text-transform: lowercase; letter-spacing: 0.1px; } .ape-chip-x { border: none; background: transparent; color: #c7d2fe; font-size: 14px; line-height: 1; padding: 0 2px; cursor: pointer; opacity: 0.7; } .ape-chip-x:hover { opacity: 1; color: #fff; } .ape-chip-input { flex: 1; min-width: 140px; background: transparent; border: none; color: var(--text-primary); font-family: inherit; font-size: 13px; padding: 4px; } .ape-chip-input:focus { outline: none; } .ape-suggest-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ape-suggest-chip { padding: 3px 9px; background: transparent; border: 1px dashed var(--border-color); color: var(--text-secondary); border-radius: 999px; font-size: 11px; cursor: pointer; text-transform: lowercase; transition: all 0.15s; } .ape-suggest-chip:hover { border-color: #4f46e5; color: #c7d2fe; background: rgba(79, 70, 229, 0.08); } .ape-helper-text { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; line-height: 1.4; } .pipeline-status { font-family: 'Courier New', monospace; font-size: 12px; color: #a78bfa; letter-spacing: 0.5px; opacity: 0.9; } .pipeline-dropdown { margin-top: 8px; border: 1px solid rgba(167, 139, 250, 0.15); border-radius: 6px; overflow: hidden; } .pipeline-summary-toggle { cursor: pointer; padding: 4px 10px; font-size: 11px; font-family: 'Courier New', monospace; color: #a78bfa; background: rgba(167, 139, 250, 0.06); user-select: none; list-style: none; } .pipeline-summary-toggle::-webkit-details-marker { display: none; } .pipeline-summary-toggle::before { content: '▸ '; } details[open] > .pipeline-summary-toggle::before { content: '▾ '; } .pipeline-content { padding: 8px 10px; background: rgba(0, 0, 0, 0.2); } .pipeline-steps { font-family: 'Courier New', monospace; font-size: 11px; color: #a78bfa; margin: 0; white-space: pre-wrap; line-height: 1.6; } .pipeline-step { display: block; } .pipeline-ms { color: rgba(167, 139, 250, 0.4); font-size: 10px; } .pipeline-cost { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(167, 139, 250, 0.1); font-family: 'Courier New', monospace; font-size: 11px; color: var(--text-secondary); line-height: 1.6; } .pipeline-cost-label { color: var(--text-tertiary); } .pipeline-savings { color: #34d399; font-weight: 600; } .pipeline-hlsf { margin-top: 6px; font-family: 'Courier New', monospace; font-size: 11px; color: #f0abfc; } .quick-reply-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .quick-reply-btn { background: rgba(99, 102, 241, 0.12); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.25); border-radius: 16px; padding: 5px 14px; font-size: 13px; cursor: pointer; transition: background 0.15s, border-color 0.15s; white-space: nowrap; } .quick-reply-btn:hover { background: rgba(99, 102, 241, 0.25); border-color: #6366f1; } .recommended-prompt-strip { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; padding: 10px 12px 12px; border: 1px solid rgba(124, 155, 255, 0.18); border-radius: 12px; background: linear-gradient(180deg, rgba(17, 20, 36, 0.96), rgba(13, 16, 28, 0.96)); } .recommended-prompt-strip.hidden { display: none; } .recommended-prompt-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .recommended-prompt-heading { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .recommended-prompt-title { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-primary); text-transform: uppercase; } .recommended-prompt-subtitle { font-size: 11px; color: var(--muted); } /* Collapse chevron for this strip alone — deliberately NOT shared with #chatControlsRow's own toggle (see the doc comment on _buildRecommendedPromptHeader, app.js) so it still works when that row is hidden in Simple Mode. */ .recommended-prompt-collapse { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 2px 4px; } .recommended-prompt-collapse:hover { color: var(--text); } .recommended-prompt-collapse svg { width: 12px; height: 12px; display: block; pointer-events: none; transition: transform 0.2s ease; } .recommended-prompt-strip.is-collapsed .recommended-prompt-collapse svg { transform: rotate(-90deg); } .recommended-prompt-strip.is-collapsed .recommended-prompt-bar { display: none; } .recommended-prompt-bar { display: flex; flex-wrap: wrap; gap: 8px; } .recommended-prompt-btn { appearance: none; border: 1px solid rgba(124, 155, 255, 0.24); background: rgba(99, 102, 241, 0.12); color: #c7d2fe; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; line-height: 1; cursor: pointer; transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease; white-space: nowrap; } .recommended-prompt-btn:hover { transform: translateY(-1px); border-color: rgba(124, 155, 255, 0.55); background: rgba(99, 102, 241, 0.22); } .recommended-prompt-btn.is-question { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.25); color: #99f6d2; } .recommended-prompt-btn.is-code { background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.28); color: #fdba74; } .recommended-prompt-btn.is-debug { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.28); color: #fca5a5; } .recommended-prompt-btn.is-info { background: rgba(14, 165, 233, 0.12); border-color: rgba(14, 165, 233, 0.28); color: #7dd3fc; } .recommended-prompt-btn.is-creative { background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.28); color: #d8b4fe; } .recommended-prompt-btn.is-library { background: rgba(124, 155, 255, 0.12); border-color: rgba(124, 155, 255, 0.30); color: #a5b4fc; } .recommended-prompt-btn.is-library:hover { background: rgba(124, 155, 255, 0.22); border-color: rgba(124, 155, 255, 0.55); } .contextual-action-btn { background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); border-radius: 6px; padding: 5px 14px; font-size: 13px; cursor: pointer; margin-left: 6px; transition: background 0.15s, border-color 0.15s; } .contextual-action-btn:hover { background: rgba(52, 211, 153, 0.25); border-color: #34d399; } .contextual-action-btn:disabled { opacity: 0.5; cursor: wait; } .chat-controls-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ─── Controls Row Collapse Toggle (desktop) ─────────────────────────── */ .controls-row-toggle { display: none; /* hidden by default — shown via JS when disciplines/sources exist */ align-items: center; gap: 4px; background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 2px 4px; font-size: 0.8rem; line-height: 1; flex-shrink: 0; transition: color 0.2s; } .controls-row-toggle:hover { color: var(--text); } .controls-row-chevron { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease; font-size: 0.9rem; } .controls-row-chevron svg, .chevron svg { width: 12px; height: 12px; display: block; pointer-events: none; } .chat-controls-row.collapsed .controls-row-chevron { transform: rotate(-90deg); } .controls-row-summary { font-size: 0.72rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; } .controls-row-content { display: contents; /* flows children into parent flex — no extra wrapper when expanded */ } .chat-controls-row.collapsed .controls-row-content { display: none; } .chat-controls-row.collapsed { flex-wrap: nowrap; gap: 6px; } .chat-controls-row.collapsed .controls-row-summary { display: inline; } .controls-row-collapsed-hidden { display: none !important; } /* On mobile, never show the toggle — mobile has its own layout */ @media (max-width: 768px) { .controls-row-toggle { display: none !important; } .chat-controls-row.collapsed .controls-row-content { display: contents; } } .plan-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .plan-approve-btn { background: #a78bfa; color: #fff; border: none; border-radius: 6px; padding: 6px 16px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s; } .plan-approve-btn:hover { background: #8b5cf6; } .console-output-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, 0.14); } .console-output-open-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 12px; border: 1px solid rgba(56, 189, 248, 0.48); border-radius: 7px; background: rgba(14, 165, 233, 0.14); color: #e0f7ff; font-size: 13px; font-weight: 700; cursor: pointer; } .console-output-open-btn:hover, .console-output-open-btn:focus-visible { border-color: rgba(103, 232, 249, 0.82); background: rgba(14, 165, 233, 0.22); outline: none; } /* Default Mode inline console (app.js dockConsoleOutputInline): the one real #output-panel re-parented into the assistant turn that produced output. A fixed, viewport-relative height so the sandbox iframe (flex:1 1 auto inside .panel-body) has real room to lay out in a normal-flow chat column; the panel is otherwise exactly the Console module, chrome and all. */ .default-mode-inline-console { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, 0.14); } body.default-mode-enabled .default-mode-inline-console #output-panel.is-inline-in-turn { display: flex; flex-direction: column; height: min(62vh, 560px); min-height: 280px; flex: none; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 10px; overflow: hidden; background: var(--bg-2, #0f1526); } /* .hidden is `display:none !important` (top of this file); the Studio Shell render skips module hiding while Default Mode owns the workspace, but any stray .hidden / [hidden] must not be able to blank a docked console. */ body.default-mode-enabled .default-mode-inline-console #output-panel.is-inline-in-turn.hidden, body.default-mode-enabled .default-mode-inline-console #output-panel.is-inline-in-turn[hidden] { display: flex !important; } .console-output-action-hint { color: rgba(186, 230, 253, 0.72); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .plan-edit-btn { background: transparent; color: var(--muted); border: 1px solid var(--panel-border); border-radius: 6px; padding: 6px 16px; font-size: 13px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .plan-edit-btn:hover { border-color: var(--text); color: var(--text); } .pricing-body { padding: 20px 20px 24px; } .pricing-intro { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; } .pricing-section { margin-bottom: 18px; } .pricing-section:last-child { margin-bottom: 0; } .pricing-section h3 { margin: 0 0 10px; font-size: 14px; } .pricing-section ul { margin: 0; padding-left: 18px; color: #e2e2ef; line-height: 1.5; font-size: 13px; } .pricing-sublist { margin-top: 10px; } .pricing-card { border: 1px solid rgba(124, 155, 255, 0.3); background: rgba(124, 155, 255, 0.08); padding: 12px 14px; border-radius: 10px; } .pricing-card + .pricing-card { margin-top: 12px; } .pricing-card p { margin: 0 0 8px; font-size: 13px; } .pricing-math { margin: 0; color: #c9d4ff; } .pricing-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .tier-card { border: 1px solid var(--panel-border); background: var(--bg-2); border-radius: 10px; padding: 12px 12px 14px; } .tier-header { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 8px; font-size: 13px; } .tier-badge { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #a9b8ff; background: rgba(124, 155, 255, 0.12); padding: 2px 6px; border-radius: 999px; } .tier-card ul { padding-left: 16px; margin: 0 0 8px; font-size: 12.5px; } .tier-note { margin: 0; color: var(--muted); font-size: 12px; } .tier-cta { margin-top: 10px; width: 100%; border-radius: 8px; border: 1px solid rgba(124, 155, 255, 0.4); background: rgba(124, 155, 255, 0.18); color: #d9e4ff; padding: 8px 10px; font-size: 12px; cursor: pointer; } .tier-cta:hover { background: rgba(124, 155, 255, 0.28); } .pricing-table { border: 1px solid var(--panel-border); border-radius: 10px; overflow: hidden; margin-top: 10px; } .pricing-table-row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 8px 12px; font-size: 12.5px; border-bottom: 1px solid var(--panel-border); } .pricing-table.two-col .pricing-table-row { grid-template-columns: 1fr 1fr; } .pricing-table-row:last-child { border-bottom: none; } .pricing-table-header { background: #1a1a27; font-weight: 600; color: var(--muted); } .pricing-callout { margin: 10px 0 6px; padding: 10px 12px; border-radius: 8px; background: rgba(61, 220, 151, 0.12); border: 1px solid rgba(61, 220, 151, 0.3); font-size: 12.5px; } .pricing-warning { margin: 6px 0 0; padding: 8px 12px; border-radius: 8px; background: rgba(255, 107, 107, 0.12); border: 1px solid rgba(255, 107, 107, 0.3); font-size: 12.5px; } .pricing-code { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(148, 163, 184, 0.3); color: var(--text-primary); font-size: 12px; line-height: 1.5; white-space: pre-wrap; } .pricing-muted { margin: 6px 0 0; color: var(--muted); font-size: 12px; } .pricing-modal { position: fixed; inset: 0; background: rgba(10, 12, 20, 0.75); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 32px; z-index: 60; } .pricing-modal.hidden { display: none; } .pricing-modal-panel { width: min(1100px, 92vw); max-height: 90vh; background: var(--bg-2); border: 1px solid var(--panel-border); border-radius: 18px; box-shadow: 0 24px 60px rgba(4, 10, 24, 0.5); display: flex; flex-direction: column; overflow: hidden; } .pricing-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 14px; border-bottom: 1px solid var(--panel-border); } .pricing-modal-header h2 { margin: 0 0 6px; font-size: 1.2rem; } .pricing-modal-subtitle { margin: 0; font-size: 0.85rem; color: var(--muted); } .pricing-modal-actions { display: inline-flex; gap: 8px; flex-shrink: 0; } .pricing-modal-body { overflow-y: auto; padding: 0 24px 24px; } .pricing-modal-body.collapsed { display: none; } #chat-form { flex: 0 0 auto; display: flex; flex-direction: column; padding: 12px 16px; gap: 6px; } /* .chat-controls-row has to fit the context select plus the response-mode pills on one line. Its width tracks #chat-panel at a fixed 34px offset (#chat-form padding), and the panel is a mosaic tile whose width the viewport does not predict -- hence the container query rather than a media query. Under ~309px of panel the row wrapped to a second line and cost 38px of composer height (40px -> 78px). Dropping the visible label first buys ~49px, holding one line down to ~287px; the select keeps aria-label="Context Mode" and the