mirror of
https://github.com/nesquena/hermes-webui.git
synced 2026-05-24 10:40:16 +00:00
nesquena-hermes
7d1aa2e261
* feat: add manual 'Check for Updates' button in System settings (#785) Add a 'Check now' button next to the version badge in the System settings section, allowing users to manually trigger an update check at any time without waiting for the automatic periodic check. Changes: - index.html: add button with spinner and status text inline with version badge - panels.js: add checkUpdatesNow() calling /api/updates/check?force=1 with immediate feedback (checking... / up to date / X updates available) - style.css: style the button block and spinner - i18n.js: add 5 new keys (settings_check_now, settings_checking, settings_up_to_date, settings_updates_available, settings_updates_disabled) in all 6 locales (en, ru, es, de, zh, zh-Hant) * fix: sanitize error message in checkUpdatesNow to avoid exposing paths Review feedback: strip filesystem paths from error messages and cap length to prevent internal details leaking into the UI. * fix: fully sanitize error in update check — never expose raw e.message in UI Previous partial fix (80cdaee) stripped filesystem paths from e.message but still displayed the JS exception message to users. Per reviewer feedback and project convention (NEVER expose raw e.message in UI), replace with: - A generic user-facing i18n key (settings_update_check_failed) as default - Fallback to API response body error if available (structured, not raw) - Full error logged via console.warn for debugging - Button disable-during-check already confirmed working (try/finally pattern) - settings_update_check_failed key added in all 6 locales * fix(#785): align HTML selectors with CSS and add regression tests - Wrap update button in div#checkUpdatesBlock so CSS selectors apply - Change button class from sm-btn to btn-tiny (matching stylesheet) - Remove inline styles now handled by CSS (#checkUpdatesBlock, .btn-tiny) - Move spinner sizing to CSS class .spinner-xs - Add 4 static tests in test_update_banner_fixes.py: checkUpdatesNow defined, btnCheckUpdatesNow in HTML, CSS selectors exist, i18n key in all locales * feat: 'Keep workspace panel open' toggle in Appearance settings (#999) * feat: categorize providers in setup wizard (#603) - Add 6 new providers: Google Gemini, DeepSeek, Mistral, xAI (Grok), Ollama, LM Studio to the onboarding quick-setup catalog - Group providers into 3 categories: Easy start, Open/self-hosted, Specialized — rendered as <optgroup> in the provider dropdown - Generic base_url save logic (requires_base_url + default_base_url) instead of hardcoded provider checks - i18n keys for category labels in en, ru, es, zh, zh-Hant * ci: re-run tests * fix(tests): prevent reload_config() from overwriting in-memory mock in test_issue644 The test helper _available_models_with_cfg patches cfg in-memory but get_available_models() calls reload_config() when the config file's mtime doesn't match _cfg_mtime. On CI, config.yaml exists so mtime > 0 and _cfg_mtime starts at 0.0, triggering a reload that overwrites the test's mock with on-disk content. Fix: freeze _cfg_mtime to the current config file mtime inside the helper, so reload_config() is not triggered during the test. * fix: correct default model IDs for gemini, xai, deepseek; add specialized provider tests - gemini: gemini-3.1-pro-preview → gemini-2.5-pro-preview - x-ai: grok-4.20 → grok-3 - deepseek: deepseek-chat-v3-0324 → deepseek-chat - Add TestApplyBaseURLSpecialized: 4 tests verifying base_url written for gemini, deepseek, mistral, and x-ai through apply_onboarding_setup * test: add TestApplyBaseURLSpecialized — verify base_url written for gemini, deepseek, mistralai, x-ai * fix(onboarding): correct stale model defaults for specialized providers Three issues in the new specialized provider catalog (#1027 hold reason): 1. gemini default_model was `gemini-2.5-pro-preview` — agent's catalog has the 3.1 family. Updated to `gemini-3.1-pro-preview`. 2. x-ai default_model was `grok-3` — agent's catalog has `grok-4.20`. Updated. 3. gemini `models` list was sourcing from `_PROVIDER_MODELS.get("gemini")` which returns []. The catalog in api/config.py is keyed under "google" (even though the agent's alias map normalizes google -> gemini). Switched to `_PROVIDER_MODELS.get("google")` so the wizard surfaces the actual 5-model list. Also forward-compatible lookup for x-ai (xai or x-ai key). Without these fixes, users picking gemini or x-ai in the wizard would see no model dropdown and the default_model written to config.yaml would 404 on first chat. deepseek default_model bumped from `deepseek-chat` to `deepseek-chat-v3-0324` to match the test fixture's expectation and the agent catalog's pinned version. Added two regression tests: - test_gemini_model_list_is_populated: pins the catalog-key correctness - test_specialized_default_models_match_catalog: pins the version prefixes (3.x for gemini, 4.x for grok) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat: inline HTML preview in workspace panel (#779) Render .html/.htm files as live previews in a sandboxed iframe instead of showing raw source code. Adds an 'Open in browser' button to open the file in a new tab. Changes: - workspace.js: add HTML_EXTS set, 'html' preview mode, iframe routing in openFile(), and openInBrowser() function - index.html: add sandboxed iframe element and 'Open in browser' button in preview toolbar (visible only for HTML files) - i18n.js: add 'open_in_browser' key in all 6 locales The iframe uses sandbox='allow-scripts' for security. Download button remains available alongside the new preview. * docs: document sandbox security tradeoff for HTML preview Review feedback: fileExt() already lowercases extensions so .HTML/.HTM work. Added code comment explaining the deliberate sandbox=allow-scripts choice: scripts are needed for most HTML documents but the iframe is still origin- isolated and cannot access parent cookies/data. * fix: pass ?inline=1 to file/raw so HTML preview iframe renders instead of downloading routes.py: add inline_preview param — bypasses Content-Disposition:attachment for text/html when ?inline=1 is set, serving the file inline for the sandboxed iframe. workspace.js: add &inline=1 to the iframe src URL. test: add 5 static regression tests for the inline HTML preview. * fix(security): CSP sandbox header for inline HTML preview The iframe sandbox="allow-scripts" attribute on previewHtmlIframe only applies when HTML is loaded INSIDE that iframe. A user tricked into opening /api/file/raw?path=evil.html&inline=1 directly in a top-level tab (e.g. via a chat link) would render the HTML in the WebUI's origin without any sandbox, giving the page full access to cookies and localStorage. Server-side Content-Security-Policy: sandbox allow-scripts mirrors the iframe sandbox exactly: scripts run, but the document is treated as a unique opaque origin (no allow-same-origin) and cannot read WebUI cookies, localStorage, or postMessage to the parent regardless of how the URL is accessed. Added test_inline_html_response_sets_csp_sandbox to pin the header. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs: v0.50.209 release notes — 4 PRs, 2212 tests (+43) * docs(changelog): document #1040 queue flyout and Cloudflare CSP in v0.50.209 The stage commited2bd18listed v0.50.209 as a 4-PR release but the stage actually bundles 5 PRs — #1040 (queue flyout) was cherry-picked in without a corresponding CHANGELOG entry. Without this fix, the queue feature ships silently and the bundled Cloudflare CSP relaxation in api/helpers.py is also undocumented. Adds two entries: - Added: queue flyout (#1040) under v0.50.209 - Changed: CSP allowlist for Cloudflare Access deployments Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: bergeouss <bergeouss@users.noreply.github.com> Co-authored-by: nesquena-hermes <nesquena-hermes@users.noreply.github.com> Co-authored-by: Nathan Esquenazi <nesquena@gmail.com> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2301 lines
148 KiB
CSS
2301 lines
148 KiB
CSS
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
/* ── Light mode (default) — warm gold-tinted palette from Hermes brand ── */
|
|
:root {
|
|
--bg:#FEFCF7;--sidebar:#FAF7F0;--border:#E0D8C8;--border2:rgba(0,0,0,0.15);
|
|
--text:#1A1610;--muted:#5C5344;--accent:#B8860B;--blue:#0288A8;--gold:#8B6508;--code-bg:#F5F0E5;
|
|
--surface:#F3EEE3;--topbar-bg:rgba(250,247,240,.98);--main-bg:rgba(254,252,247,0.5);
|
|
--focus-ring:rgba(184,134,11,.35);--focus-glow:rgba(184,134,11,.1);
|
|
--input-bg:rgba(0,0,0,.03);--hover-bg:rgba(0,0,0,.05);
|
|
--strong:#0F0D08;--em:#5C5344;--code-text:#8b4513;--code-inline-bg:rgba(0,0,0,.06);--pre-text:#1A1610;
|
|
--accent-hover:#996F08;--accent-bg:rgba(184,134,11,0.08);--accent-bg-strong:rgba(184,134,11,0.15);--accent-text:#8B6508;
|
|
--error:#C62828;--success:#3D8B40;--warning:#E68A00;--info:#0288A8;
|
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.6;
|
|
}
|
|
/* ── Font size modifiers ── */
|
|
/* ── Font size preference: scale key UI text elements ── */
|
|
/* Default is 14px (no attribute needed). Small=12px, Large=16px. */
|
|
/* We override the px values directly on key containers since most of the */
|
|
/* stylesheet uses hardcoded px — changing :root font-size alone only affects */
|
|
/* the small number of em/rem values. */
|
|
|
|
/* Sidebar session list */
|
|
:root[data-font-size="small"] .session-item { font-size: 11px; }
|
|
:root[data-font-size="large"] .session-item { font-size: 15px; }
|
|
:root[data-font-size="small"] .session-meta { font-size: 10px; }
|
|
:root[data-font-size="large"] .session-meta { font-size: 13px; }
|
|
:root[data-font-size="small"] .session-title-input { font-size: 11px; }
|
|
:root[data-font-size="large"] .session-title-input { font-size: 15px; }
|
|
|
|
/* Chat message body */
|
|
:root[data-font-size="small"] .msg-body { font-size: 12px; }
|
|
:root[data-font-size="large"] .msg-body { font-size: 16px; }
|
|
:root[data-font-size="small"] .msg-body h1 { font-size: 15px; }
|
|
:root[data-font-size="large"] .msg-body h1 { font-size: 21px; }
|
|
:root[data-font-size="small"] .msg-body h2 { font-size: 13px; }
|
|
:root[data-font-size="large"] .msg-body h2 { font-size: 19px; }
|
|
:root[data-font-size="small"] .msg-body h3 { font-size: 12px; }
|
|
:root[data-font-size="large"] .msg-body h3 { font-size: 16px; }
|
|
:root[data-font-size="small"] .msg-body code { font-size: 10.5px; }
|
|
:root[data-font-size="large"] .msg-body code { font-size: 14.5px; }
|
|
:root[data-font-size="small"] .msg-body pre code { font-size: 11px; }
|
|
:root[data-font-size="large"] .msg-body pre code { font-size: 15px; }
|
|
:root[data-font-size="small"] .msg-body table { font-size: 11px; }
|
|
:root[data-font-size="large"] .msg-body table { font-size: 14px; }
|
|
|
|
/* Composer textarea (default is 16px in stylesheet) */
|
|
:root[data-font-size="small"] #msg { font-size: 14px; }
|
|
:root[data-font-size="large"] #msg { font-size: 18px; }
|
|
|
|
/* Workspace file tree */
|
|
:root[data-font-size="small"] .file-item { font-size: 11px; }
|
|
:root[data-font-size="large"] .file-item { font-size: 14px; }
|
|
|
|
/* App-level base — keeps em/rem values scaling correctly */
|
|
:root[data-font-size="small"] { font-size: 12px; }
|
|
:root[data-font-size="large"] { font-size: 16px; }
|
|
/* ── Dark mode — navy-black + gold accent matching Hermes terminal ── */
|
|
:root.dark {
|
|
--bg:#0D0D1A;--sidebar:#141425;--border:#2A2A45;--border2:rgba(255,255,255,0.14);
|
|
--text:#FFF8DC;--muted:#C0C0C0;--accent:#FFD700;--blue:#4DD0E1;--gold:#FFBF00;--code-bg:#1A1A2E;
|
|
--surface:#1A1A2E;--topbar-bg:rgba(20,20,37,.98);--main-bg:rgba(13,13,26,0.5);
|
|
--focus-ring:rgba(255,215,0,.35);--focus-glow:rgba(255,215,0,.08);
|
|
--input-bg:rgba(255,255,255,.04);--hover-bg:rgba(255,255,255,.06);
|
|
--strong:#fff;--em:#C0C0C0;--code-text:#f0c27f;--code-inline-bg:rgba(0,0,0,.35);--pre-text:#e2e8f0;
|
|
--accent-hover:#FFBF00;--accent-bg:rgba(255,215,0,0.08);--accent-bg-strong:rgba(255,215,0,0.15);--accent-text:#FFD700;
|
|
--error:#EF5350;--success:#4CAF50;--warning:#FFA726;--info:#4DD0E1;
|
|
}
|
|
/* ── Skin: Default (gold — matches base) ── */
|
|
/* No overrides needed — :root and .dark already use gold accent */
|
|
/* ── Skin: Ares (red) ── */
|
|
:root[data-skin="ares"]{--accent:#C0392B;--accent-hover:#A93226;--accent-bg:rgba(192,57,43,0.08);--accent-bg-strong:rgba(192,57,43,0.15);--accent-text:#922B21;}
|
|
:root.dark[data-skin="ares"]{--accent:#FF4444;--accent-hover:#CC3333;--accent-bg:rgba(255,68,68,0.08);--accent-bg-strong:rgba(255,68,68,0.15);--accent-text:#FF4444;}
|
|
/* ── Skin: Mono (gray) ── */
|
|
:root[data-skin="mono"]{--accent:#666666;--accent-hover:#555555;--accent-bg:rgba(102,102,102,0.08);--accent-bg-strong:rgba(102,102,102,0.15);--accent-text:#555555;}
|
|
:root.dark[data-skin="mono"]{--accent:#CCCCCC;--accent-hover:#999999;--accent-bg:rgba(204,204,204,0.08);--accent-bg-strong:rgba(204,204,204,0.15);--accent-text:#CCCCCC;}
|
|
/* ── Skin: Slate (blue-gray) ── */
|
|
:root[data-skin="slate"]{--accent:#475569;--accent-hover:#334155;--accent-bg:rgba(71,85,105,0.08);--accent-bg-strong:rgba(71,85,105,0.15);--accent-text:#334155;}
|
|
:root.dark[data-skin="slate"]{--accent:#94A3B8;--accent-hover:#64748B;--accent-bg:rgba(148,163,184,0.08);--accent-bg-strong:rgba(148,163,184,0.15);--accent-text:#94A3B8;}
|
|
/* ── Skin: Poseidon (ocean blue) ── */
|
|
:root[data-skin="poseidon"]{--accent:#0369A1;--accent-hover:#025080;--accent-bg:rgba(3,105,161,0.08);--accent-bg-strong:rgba(3,105,161,0.15);--accent-text:#025080;}
|
|
:root.dark[data-skin="poseidon"]{--accent:#0EA5E9;--accent-hover:#0284C7;--accent-bg:rgba(14,165,233,0.08);--accent-bg-strong:rgba(14,165,233,0.15);--accent-text:#0EA5E9;}
|
|
/* ── Skin: Sisyphus (purple) ── */
|
|
:root[data-skin="sisyphus"]{--accent:#7C3AED;--accent-hover:#6D28D9;--accent-bg:rgba(124,58,237,0.08);--accent-bg-strong:rgba(124,58,237,0.15);--accent-text:#6D28D9;}
|
|
:root.dark[data-skin="sisyphus"]{--accent:#A78BFA;--accent-hover:#8B5CF6;--accent-bg:rgba(167,139,250,0.08);--accent-bg-strong:rgba(167,139,250,0.15);--accent-text:#A78BFA;}
|
|
/* ── Skin: Charizard (orange) ── */
|
|
:root[data-skin="charizard"]{--accent:#EA580C;--accent-hover:#C2410C;--accent-bg:rgba(234,88,12,0.08);--accent-bg-strong:rgba(234,88,12,0.15);--accent-text:#C2410C;}
|
|
:root.dark[data-skin="charizard"]{--accent:#FB923C;--accent-hover:#F97316;--accent-bg:rgba(251,146,60,0.08);--accent-bg-strong:rgba(251,146,60,0.15);--accent-text:#FB923C;}
|
|
/* #594: app-dialog light mode overrides — base styles use hardcoded dark gradients */
|
|
:root:not(.dark) .app-dialog{
|
|
background:linear-gradient(180deg,rgba(240,237,232,.99),rgba(228,224,216,.99));
|
|
border-color:rgba(0,0,0,.12);
|
|
box-shadow:0 12px 40px rgba(0,0,0,.15);
|
|
}
|
|
:root:not(.dark) .app-dialog-input{
|
|
background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.2);
|
|
}
|
|
:root:not(.dark) .app-dialog-input:focus{
|
|
border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);
|
|
}
|
|
:root:not(.dark) .app-dialog-close{
|
|
background:rgba(0,0,0,.04);
|
|
}
|
|
:root:not(.dark) .app-dialog-close:hover{background:rgba(0,0,0,.09);}
|
|
:root:not(.dark) .app-dialog-btn{background:rgba(0,0,0,.04);}
|
|
:root:not(.dark) .app-dialog-btn:hover{background:rgba(0,0,0,.09);}
|
|
:root:not(.dark) .app-dialog-btn.confirm{
|
|
border-color:var(--accent);background:var(--accent-bg);color:var(--accent-text);
|
|
}
|
|
:root:not(.dark) .app-dialog-btn.confirm:hover{background:var(--accent-bg-strong);}
|
|
:root:not(.dark) .file-rename-input{
|
|
background:rgba(0,0,0,.04);
|
|
}
|
|
:root:not(.dark) ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}
|
|
:root:not(.dark) ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3);}
|
|
:root:not(.dark) ::selection{background:var(--accent-bg-strong);}
|
|
:root:not(.dark) *{scrollbar-color:rgba(0,0,0,.15) transparent;}
|
|
/* ── Light mode: sidebar, roles, chips, active states ── */
|
|
:root:not(.dark) .session-item{color:#5a544a;}
|
|
:root:not(.dark) .session-item:hover{background:rgba(0,0,0,.06);color:#2c2825;}
|
|
:root:not(.dark) .session-item.active{background:var(--accent-bg);color:var(--accent-text);}
|
|
:root:not(.dark) .session-item.active .session-title{color:var(--accent-text);}
|
|
:root:not(.dark) .session-pin-indicator{color:var(--accent-text);}
|
|
:root:not(.dark) .session-date-header.pinned{color:var(--accent-text);}
|
|
:root:not(.dark) .session-actions-trigger.active,
|
|
:root:not(.dark) .session-item.menu-open .session-actions-trigger{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--accent-text);}
|
|
:root:not(.dark) .session-action-opt.is-active{background:var(--accent-bg);}
|
|
:root:not(.dark) .msg-role.user{color:var(--accent-text);}
|
|
:root:not(.dark) .msg-role.assistant{color:#8a6520;}
|
|
:root:not(.dark) .role-icon.user{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-bg-strong);}
|
|
:root:not(.dark) .role-icon.assistant{background:rgba(138,101,32,.12);color:#8a6520;border-color:rgba(138,101,32,.25);}
|
|
:root:not(.dark) .project-chip{border-color:rgba(0,0,0,.12);background:rgba(0,0,0,.04);}
|
|
:root:not(.dark) .project-chip:hover{background:rgba(0,0,0,.08);color:#2c2825;}
|
|
:root:not(.dark) .project-chip.active{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-bg-strong);}
|
|
:root:not(.dark) .chip{border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.04);}
|
|
:root:not(.dark) .chip.model{color:var(--accent-text);border-color:var(--accent-bg-strong);background:var(--accent-bg);}
|
|
:root:not(.dark) .new-chat-btn{border-color:var(--accent-bg-strong);color:var(--accent-text);}
|
|
:root:not(.dark) .new-chat-btn:hover{background:var(--accent-bg);}
|
|
:root:not(.dark) .sidebar-search input{border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.03);}
|
|
:root:not(.dark) .sidebar-search input:focus{border-color:var(--accent);background:rgba(0,0,0,.02);}
|
|
:root:not(.dark) .cron-item{border-color:rgba(0,0,0,.08);background:rgba(0,0,0,.02);}
|
|
:root:not(.dark) .sm-btn{border-color:rgba(0,0,0,.1);}
|
|
:root:not(.dark) .sm-btn:hover{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.15);}
|
|
:root:not(.dark) select{border-color:rgba(0,0,0,.12);}
|
|
:root:not(.dark) .composer-wrap{background:var(--sidebar);border-top:1px solid var(--border);}
|
|
:root:not(.dark) .composer-wrap::before{background:linear-gradient(to bottom,transparent,var(--sidebar));}
|
|
:root:not(.dark) .composer-box{background:var(--bg);border-color:rgba(0,0,0,.12);}
|
|
:root:not(.dark) .composer-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
|
|
:root:not(.dark) .suggestion{border-color:rgba(0,0,0,.08);}
|
|
:root:not(.dark) .suggestion:hover{background:var(--accent-bg);border-color:var(--accent-bg-strong);}
|
|
:root:not(.dark) .tool-card{border-color:rgba(0,0,0,.08);}
|
|
:root:not(.dark) .tool-card:hover{border-color:rgba(0,0,0,.15);}
|
|
:root:not(.dark) .icon-btn:hover{background:rgba(0,0,0,.06);}
|
|
:root:not(.dark) .panel-icon-btn:hover{background:rgba(0,0,0,.06);}
|
|
:root:not(.dark) .file-item:hover{background:rgba(0,0,0,.04);}
|
|
:root:not(.dark) .preview-md th{background:rgba(0,0,0,.04);}
|
|
:root:not(.dark) .msg-body th{background:rgba(0,0,0,.04);}
|
|
:root:not(.dark) .preview-md td{border-color:rgba(0,0,0,.08);}
|
|
:root:not(.dark) .msg-body td{border-color:rgba(0,0,0,.08);}
|
|
:root:not(.dark) .preview-badge.code{background:rgba(0,0,0,.05);}
|
|
:root:not(.dark) .ctx-ring-center{background:var(--bg);color:#5a544a;}
|
|
:root:not(.dark) .ctx-ring-track{stroke:rgba(0,0,0,.12);}
|
|
:root:not(.dark) .ws-opt:hover{background:rgba(0,0,0,.05);}
|
|
:root:not(.dark) .profile-opt:hover{background:rgba(0,0,0,.05);}
|
|
:root:not(.dark) .profile-opt.active{background:var(--accent-bg);}
|
|
:root:not(.dark) .profile-chip{color:var(--accent-text)!important;}
|
|
/* ── Light mode: Prism syntax token overrides (prism-tomorrow is dark-only) ── */
|
|
:root:not(.dark) .token.comment,
|
|
:root:not(.dark) .token.prolog,
|
|
:root:not(.dark) .token.doctype,
|
|
:root:not(.dark) .token.cdata{color:#7a7060;font-style:italic;}
|
|
:root:not(.dark) .token.punctuation{color:#5a4e44;}
|
|
:root:not(.dark) .token.namespace{opacity:.8;}
|
|
:root:not(.dark) .token.property,
|
|
:root:not(.dark) .token.tag,
|
|
:root:not(.dark) .token.boolean,
|
|
:root:not(.dark) .token.number,
|
|
:root:not(.dark) .token.constant,
|
|
:root:not(.dark) .token.symbol,
|
|
:root:not(.dark) .token.deleted{color:#a0290a;}
|
|
:root:not(.dark) .token.selector,
|
|
:root:not(.dark) .token.attr-name,
|
|
:root:not(.dark) .token.string,
|
|
:root:not(.dark) .token.char,
|
|
:root:not(.dark) .token.builtin,
|
|
:root:not(.dark) .token.inserted{color:#276b30;}
|
|
:root:not(.dark) .token.operator,
|
|
:root:not(.dark) .token.entity,
|
|
:root:not(.dark) .token.url,
|
|
:root:not(.dark) .language-css .token.string,
|
|
:root:not(.dark) .style .token.string{color:#5a3e8a;}
|
|
:root:not(.dark) .token.atrule,
|
|
:root:not(.dark) .token.attr-value,
|
|
:root:not(.dark) .token.keyword{color:#2d6fa3;}
|
|
:root:not(.dark) .token.function,
|
|
:root:not(.dark) .token.class-name{color:#7a3a00;}
|
|
:root:not(.dark) .token.regex,
|
|
:root:not(.dark) .token.important,
|
|
:root:not(.dark) .token.variable{color:#8a4a00;}
|
|
:root:not(.dark) .token.important,
|
|
:root:not(.dark) .token.bold{font-weight:bold;}
|
|
:root:not(.dark) .token.italic{font-style:italic;}
|
|
:root:not(.dark) .nav-tab:hover::after{background:var(--surface);border-color:var(--accent-bg-strong);color:var(--accent-text);}
|
|
:root:not(.dark) .cron-status.disabled{background:rgba(0,0,0,.05);}
|
|
:root:not(.dark) .cron-btn{background:rgba(0,0,0,.04);}
|
|
:root:not(.dark) .cron-btn:hover{background:rgba(0,0,0,.08);}
|
|
/* ── Smooth dark mode transitions ── */
|
|
body,header,footer,aside,nav,main,div,button,input,textarea,select{transition-property:background-color,border-color,color;transition-duration:.15s;transition-timing-function:ease;}
|
|
body{background:var(--bg);color:var(--text);height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;}
|
|
.layout{display:flex;width:100%;flex:1 1 auto;min-height:0;}
|
|
.app-titlebar{display:flex;align-items:center;justify-content:space-between;height:38px;flex-shrink:0;background:var(--sidebar);border-bottom:1px solid var(--border);padding:0 12px;padding-top:env(safe-area-inset-top,0);padding-left:max(12px,env(safe-area-inset-left,0));padding-right:max(12px,env(safe-area-inset-right,0));box-sizing:content-box;font-size:12px;color:var(--muted);user-select:none;-webkit-app-region:drag;position:relative;z-index:20;}
|
|
.app-titlebar-inner{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;flex:1 1 auto;justify-content:space-between;}
|
|
.tps-chip{
|
|
font-size:11px;font-family:ui-monospace,'SF Mono',monospace;color:var(--muted);
|
|
white-space:nowrap;letter-spacing:.02em;flex-shrink:0;
|
|
}
|
|
.app-titlebar-icon{display:inline-flex;align-items:center;color:var(--accent);}
|
|
.app-titlebar-title{font-size:12px;font-weight:600;color:var(--text);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw;}
|
|
.app-titlebar-sub{font-size:10px;color:var(--muted);background:var(--hover-bg);padding:2px 7px;border-radius:4px;font-family:'SF Mono',ui-monospace,monospace;white-space:nowrap;flex-shrink:0;}
|
|
.app-titlebar-sub[hidden]{display:none;}
|
|
.app-titlebar-hamburger,.app-titlebar-spacer{display:none;width:32px;height:32px;flex-shrink:0;}
|
|
.app-titlebar-hamburger{-webkit-app-region:no-drag;align-items:center;justify-content:center;background:none;border:none;color:var(--muted);border-radius:8px;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;transition:background-color .15s,color .15s;}
|
|
.app-titlebar-hamburger:hover{background:var(--hover-bg);color:var(--text);}
|
|
.sidebar{width:300px;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:visible;flex-shrink:0;}
|
|
.sidebar-header{padding:16px 18px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
|
|
.logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(145deg,var(--accent-hover),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;flex-shrink:0;box-shadow:0 2px 8px var(--accent-bg-strong);}
|
|
.sidebar-header h1{font-size:15px;font-weight:600;}
|
|
.sidebar-section{padding:14px 14px 8px;}
|
|
.new-chat-btn{width:100%;padding:9px 12px;border-radius:9px;background:var(--accent-bg);border:1px solid var(--accent-bg-strong);color:var(--accent-text);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .15s;margin-bottom:8px;font-weight:500;}
|
|
.new-chat-btn:hover{background:var(--accent-bg-strong);border-color:var(--accent);}
|
|
.session-list{flex:1;overflow-y:auto;padding:0 8px 8px;min-height:0;}
|
|
.sidebar-search{position:relative;padding:8px 12px;flex-shrink:0;}
|
|
.sidebar-search input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:7px 10px 7px 32px;font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s;box-sizing:border-box;}
|
|
.sidebar-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
|
|
.sidebar-search input::placeholder{color:var(--muted);opacity:.7;}
|
|
.sidebar-search-icon{position:absolute;left:22px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);opacity:.7;pointer-events:none;}
|
|
/* Inline session title edit */
|
|
.session-title-input{flex:1;background:var(--surface);border:1px solid var(--accent);border-radius:6px;color:var(--text);padding:3px 8px;font-size:13px;outline:none;min-width:0;box-shadow:0 0 0 2px var(--accent-bg-strong);font-family:inherit;}
|
|
.session-item{padding:8px 86px 8px 8px;margin-bottom:2px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--muted);transition:background .15s,color .15s;display:flex;align-items:flex-start;gap:8px;min-width:0;position:relative;}
|
|
.session-item.streaming,.session-item.unread{padding-right:40px;}
|
|
.session-item:hover{background:var(--hover-bg);color:var(--text);}
|
|
.session-item.active{background:var(--accent-bg);color:var(--accent);}
|
|
.session-item.streaming .session-title{color:var(--accent);}
|
|
.session-item.streaming .session-title-row{color:var(--text);}
|
|
.session-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden;}
|
|
.session-title-row{display:flex;align-items:center;gap:6px;min-width:0;}
|
|
.session-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
|
|
.session-item.active .session-title{color:var(--accent-text);}
|
|
.session-meta{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.session-item.active .session-meta{color:var(--accent-text);opacity:.8;}
|
|
.session-state-indicator{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:10px;height:10px;color:var(--accent);visibility:hidden;}
|
|
.session-attention-indicator{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;z-index:1;pointer-events:none;transition:opacity .15s ease,visibility .15s ease;}
|
|
.session-item:hover .session-attention-indicator,.session-item:focus-within .session-attention-indicator,.session-item.menu-open .session-attention-indicator{opacity:0;visibility:hidden;}
|
|
.session-state-indicator.is-streaming,.session-state-indicator.is-unread{visibility:visible;}
|
|
.session-state-indicator::before{content:"";display:block;flex-shrink:0;}
|
|
.session-state-indicator.is-streaming::before{
|
|
width:100%;
|
|
height:100%;
|
|
border:2px solid transparent;
|
|
border-top-color:currentColor;
|
|
border-right-color:currentColor;
|
|
border-radius:50%;
|
|
animation:spin 1s linear infinite;
|
|
}
|
|
.session-state-indicator.is-unread::before{
|
|
width:8px;
|
|
height:8px;
|
|
border-radius:50%;
|
|
background:currentColor;
|
|
}
|
|
.session-attention-indicator.is-streaming::before{
|
|
width:10px;
|
|
height:10px;
|
|
}
|
|
.session-attention-indicator.is-unread::before{
|
|
width:8px;
|
|
height:8px;
|
|
}
|
|
.session-time{
|
|
display:inline-flex;
|
|
position:absolute;
|
|
right:10px;
|
|
top:50%;
|
|
transform:translateY(-50%);
|
|
color:var(--muted);
|
|
font-size:10px;
|
|
white-space:nowrap;
|
|
flex-shrink:0;
|
|
}
|
|
.session-time.is-hidden{display:none;}
|
|
.session-item:hover .session-time,.session-item:focus-within .session-time,.session-item.menu-open .session-time{display:none;}
|
|
/* ── Session action trigger + dropdown ── */
|
|
.session-actions{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s ease;}
|
|
.session-item:hover .session-actions,.session-item:focus-within .session-actions,.session-item.menu-open .session-actions{opacity:1;pointer-events:auto;}
|
|
.session-item.streaming:not(:hover):not(:focus-within):not(.menu-open) .session-actions,.session-item.unread:not(:hover):not(:focus-within):not(.menu-open) .session-actions{opacity:0;pointer-events:none;}
|
|
.session-actions-trigger{width:26px;height:26px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s,border-color .12s;}
|
|
.session-actions-trigger:hover{background:var(--hover-bg);color:var(--text);}
|
|
.session-actions-trigger.active{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--text);}
|
|
.session-actions-trigger svg{display:block;}
|
|
.session-action-menu{display:block;position:fixed;left:0;top:0;right:auto;bottom:auto;min-width:220px;max-width:min(280px,calc(100vw - 16px));background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:999;overflow:hidden;max-height:320px;overflow-y:auto;}
|
|
.session-action-menu.open{display:block;}
|
|
.session-action-opt{width:100%;background:none;border:none;text-align:left;font:inherit;color:var(--text);flex-direction:row!important;gap:0!important;padding:0!important;}
|
|
.session-action-opt .ws-opt-action{display:flex;flex-direction:row;align-items:center;gap:10px;width:100%;padding:10px 14px;}
|
|
.session-action-opt .ws-opt-icon{color:var(--muted);transition:color .12s,opacity .12s;flex-shrink:0;display:flex;align-items:center;width:16px;}
|
|
.session-action-opt:hover .ws-opt-icon{color:var(--text);opacity:1;}
|
|
.session-action-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
|
|
.session-action-meta{font-size:11px;color:var(--muted);line-height:1.3;white-space:normal;opacity:.72;}
|
|
.session-action-opt.is-active{background:var(--accent-bg);}
|
|
.session-action-opt.danger:hover{background:rgba(239,83,80,.08);}
|
|
.session-action-opt.danger .ws-opt-icon,.session-action-opt.danger .ws-opt-name{color:var(--error);}
|
|
/* Hide overlay during inline rename */
|
|
.session-item:has(.session-title-input) .session-actions{display:none;}
|
|
@keyframes newflash{0%{background:var(--accent-bg-strong);color:var(--accent);}100%{background:transparent;color:var(--muted);}}
|
|
@keyframes spin{to{transform:rotate(360deg);}}
|
|
.session-item.new-flash{animation:newflash 1.4s ease-out forwards;}
|
|
/* Collapsible date group headers */
|
|
.session-date-header{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 10px 4px;cursor:pointer;user-select:none;opacity:.8;transition:opacity .15s;}
|
|
.session-date-header:hover{opacity:1;}
|
|
.session-date-header.pinned{color:var(--accent);}
|
|
.session-date-caret{font-size:9px;transition:transform .2s;flex-shrink:0;display:inline-block;transform:rotate(0deg);}
|
|
.session-date-caret.collapsed{transform:rotate(-90deg);}
|
|
.app-dialog-overlay{position:fixed;inset:0;background:rgba(7,12,19,.62);backdrop-filter:blur(6px);z-index:1100;display:none;align-items:center;justify-content:center;padding:24px;}
|
|
.app-dialog{width:min(460px,100%);background:linear-gradient(180deg,rgba(21,31,45,.98),rgba(13,20,31,.98));border:1px solid var(--accent-bg-strong);border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.45);padding:18px 18px 16px;color:var(--text);}
|
|
.app-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
|
|
.app-dialog-title{font-size:16px;font-weight:700;letter-spacing:.01em;color:var(--text);}
|
|
.app-dialog-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:10px;background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;transition:background .15s,color .15s;}
|
|
.app-dialog-close:hover{background:rgba(255,255,255,.09);color:var(--text);}
|
|
.app-dialog-desc{font-size:13px;line-height:1.6;color:var(--muted);white-space:pre-wrap;}
|
|
.app-dialog-input{width:100%;margin-top:14px;padding:11px 12px;background:rgba(255,255,255,.04);border:1px solid var(--border2);border-radius:10px;color:var(--text);font-size:14px;outline:none;box-sizing:border-box;}
|
|
.app-dialog-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
|
|
.app-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap;}
|
|
.app-dialog-btn{display:inline-flex;align-items:center;justify-content:center;min-width:104px;padding:10px 14px;border-radius:10px;border:1px solid var(--border2);background:rgba(255,255,255,.05);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:transform .15s,background .15s,border-color .15s;}
|
|
.app-dialog-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.1);}
|
|
.app-dialog-btn.confirm{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-text);}
|
|
.app-dialog-btn.confirm:hover{background:var(--accent-bg-strong);border-color:var(--accent);}
|
|
.app-dialog-btn.confirm.danger{border-color:var(--error);background:rgba(239,83,80,.12);color:var(--error);}
|
|
.app-dialog-btn.confirm.danger:hover{background:rgba(239,83,80,.2);border-color:var(--error);}
|
|
.app-dialog-btn:focus-visible,.app-dialog-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
|
|
.toast{position:fixed;top:24px;right:24px;left:auto;bottom:auto;transform:translateY(-6px);background:color-mix(in srgb,var(--accent) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 45%,var(--surface));color:var(--accent-text);font-size:13px;font-weight:500;padding:10px 16px;border-radius:10px;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:100;box-shadow:0 6px 24px rgba(0,0,0,.12);letter-spacing:.01em;max-width:min(420px,calc(100vw - 48px));}
|
|
.toast.show{opacity:1;transform:translateY(0);}
|
|
.toast.success{background:color-mix(in srgb,var(--success) 14%,var(--surface));border-color:color-mix(in srgb,var(--success) 45%,var(--surface));color:var(--success);}
|
|
.toast.error{background:color-mix(in srgb,var(--error) 14%,var(--surface));border-color:color-mix(in srgb,var(--error) 45%,var(--surface));color:var(--error);}
|
|
.toast.warning{background:color-mix(in srgb,var(--warning) 14%,var(--surface));border-color:color-mix(in srgb,var(--warning) 45%,var(--surface));color:var(--warning);}
|
|
.onboarding-overlay{position:fixed;inset:0;z-index:1050;background:rgba(7,12,19,.78);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:24px;}
|
|
.onboarding-card{width:min(980px,100%);max-height:min(760px,94vh);overflow:auto;border:1px solid var(--accent-bg-strong);border-radius:24px;background:linear-gradient(180deg,rgba(20,30,44,.98),rgba(11,17,27,.98));box-shadow:0 24px 80px rgba(0,0,0,.45);}
|
|
.onboarding-shell{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);}
|
|
.onboarding-sidebar{padding:28px 24px;border-right:1px solid var(--border);background:linear-gradient(180deg,var(--accent-bg),transparent);}
|
|
.onboarding-sidebar h2{font-size:26px;line-height:1.15;margin-top:10px;margin-bottom:12px;letter-spacing:-.03em;}
|
|
.onboarding-badge{display:inline-flex;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.12em;background:var(--accent-bg);color:var(--accent-text);}
|
|
.onboarding-sidebar p{font-size:13px;color:var(--muted);line-height:1.7;}
|
|
.onboarding-steps{display:flex;flex-direction:column;gap:10px;margin-top:24px;}
|
|
.onboarding-step{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:14px;border:1px solid transparent;background:rgba(255,255,255,.02);}
|
|
.onboarding-step.active{border-color:var(--accent-bg-strong);background:var(--accent-bg);}
|
|
.onboarding-step.done{background:var(--accent-bg);}
|
|
.onboarding-step-index{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:rgba(255,255,255,.08);color:var(--text);flex-shrink:0;}
|
|
.onboarding-step.done .onboarding-step-index{background:var(--accent-bg-strong);color:var(--accent-text);}
|
|
.onboarding-step.active .onboarding-step-index{background:var(--accent-bg);color:var(--accent-text);}
|
|
.onboarding-step-title{font-size:13px;font-weight:700;color:var(--text);}
|
|
.onboarding-step-desc{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5;}
|
|
.onboarding-main{padding:28px 28px 24px;display:flex;flex-direction:column;gap:18px;min-width:0;}
|
|
.onboarding-status{display:none;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.6;border:1px solid var(--border2);background:rgba(255,255,255,.04);}
|
|
.onboarding-status.info{color:var(--text);}
|
|
.onboarding-status.success{color:var(--accent-text);border-color:var(--accent-bg);background:var(--accent-bg);}
|
|
.onboarding-status.warn{color:var(--accent-text);border-color:var(--accent-bg-strong);background:var(--accent-bg);}
|
|
.onboarding-body{display:flex;flex-direction:column;gap:16px;}
|
|
.onboarding-panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
|
|
.onboarding-check{padding:14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:5px;}
|
|
.onboarding-check strong{font-size:13px;color:var(--text);}
|
|
.onboarding-check span{font-size:12px;color:var(--muted);line-height:1.5;}
|
|
.onboarding-check.ok{border-color:var(--accent-bg);background:var(--accent-bg);}
|
|
.onboarding-check.warn{border-color:var(--accent-bg-strong);background:var(--accent-bg);}
|
|
.onboarding-field{display:flex;flex-direction:column;gap:6px;}
|
|
.onboarding-field span{font-size:12px;font-weight:700;color:var(--text);}
|
|
.onboarding-field input,.onboarding-field select{margin-bottom:0;padding:10px 12px;border-radius:10px;font-size:13px;background:var(--input-bg);border:1px solid var(--border2);color:var(--text);}
|
|
.onboarding-copy{font-size:12px;color:var(--muted);line-height:1.7;}
|
|
.onboarding-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
|
|
.onboarding-summary div{padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--border);display:flex;flex-direction:column;gap:5px;}
|
|
.onboarding-summary strong{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
|
|
.onboarding-summary span{font-size:13px;color:var(--text);word-break:break-word;}
|
|
.onboarding-oauth-card{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);margin-bottom:4px;}
|
|
.onboarding-oauth-card p{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.5;}
|
|
.onboarding-oauth-card strong{font-size:13px;color:var(--text);}
|
|
.onboarding-oauth-card code{font-size:12px;background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;}
|
|
.onboarding-oauth-icon{font-size:18px;flex-shrink:0;margin-top:1px;}
|
|
.onboarding-oauth-ready{border-color:var(--accent-bg);background:var(--accent-bg);}
|
|
.onboarding-oauth-ready .onboarding-oauth-icon{color:var(--accent);}
|
|
.onboarding-oauth-pending{border-color:var(--accent-bg-strong);background:var(--accent-bg);}
|
|
.onboarding-oauth-pending .onboarding-oauth-icon{color:#c9a84c;}
|
|
.onboarding-actions{display:flex;justify-content:space-between;gap:10px;margin-top:auto;}
|
|
.onboarding-actions .sm-btn{padding:10px 16px;}
|
|
.reconnect-banner{display:none;background:var(--surface);border:1px solid var(--accent-bg-strong);border-radius:10px;padding:10px 16px;margin:10px auto;max-width:780px;font-size:13px;color:var(--accent-text);display:none;align-items:center;justify-content:space-between;gap:12px;}
|
|
.reconnect-banner.visible{display:flex;}
|
|
.reconnect-btn{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;background:var(--accent-bg-strong);border:1px solid var(--accent-bg-strong);color:var(--accent-text);cursor:pointer;}
|
|
.reconnect-btn:hover{background:var(--accent-bg-strong);}
|
|
/* ── Update banner ── */
|
|
.update-banner{display:none;background:var(--surface);border:1px solid var(--accent);border-radius:10px;padding:10px 16px;margin:10px auto;max-width:780px;font-size:13px;color:var(--accent-text);align-items:center;justify-content:space-between;gap:12px;}
|
|
.update-banner.visible{display:flex;}
|
|
.update-btn{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;background:var(--accent-bg);border:1px solid var(--accent-bg-strong);color:var(--accent-text);cursor:pointer;transition:background .15s;}
|
|
.update-btn:hover{background:var(--accent-bg-strong);}
|
|
.update-primary{background:var(--accent-bg-strong);border-color:var(--accent);}
|
|
.update-btn:disabled{opacity:0.5;cursor:not-allowed;}
|
|
/* ── Composer flyout (approval/clarify slide up from behind composer) ── */
|
|
.composer-flyout{position:relative;height:0;z-index:1;}
|
|
/* ── Approval card ── */
|
|
.approval-card{position:absolute;left:0;right:0;bottom:-24px;max-width:var(--msg-max);margin:0 auto;padding:0 20px;box-sizing:border-box;width:100%;overflow:hidden;pointer-events:none;}
|
|
.approval-card.visible{pointer-events:auto;}
|
|
.approval-inner{background:var(--surface);backdrop-filter:blur(8px);border:1px solid var(--accent-bg-strong);border-radius:14px;padding:16px 18px 40px;transform:translateY(100%);opacity:0;transition:transform .4s cubic-bezier(.32,.72,.16,1),opacity .25s ease;}
|
|
.approval-card.visible .approval-inner{transform:translateY(0);opacity:1;}
|
|
.approval-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--error);}
|
|
.approval-desc{font-size:12px;color:var(--muted);margin-bottom:8px;line-height:1.5;}
|
|
.approval-cmd{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-family:"SF Mono",ui-monospace,monospace;font-size:12px;color:var(--pre-text);white-space:pre-wrap;word-break:break-all;margin-bottom:14px;max-height:120px;overflow-y:auto;}
|
|
.approval-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
|
|
.approval-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid var(--border2);background:var(--hover-bg);color:var(--text);cursor:pointer;transition:all .15s;white-space:nowrap;}
|
|
.approval-btn:hover{background:rgba(255,255,255,0.12);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.2);}
|
|
.approval-btn:active{transform:translateY(0);box-shadow:none;}
|
|
.approval-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
|
|
/* ── Queue flyout (same slide-up pattern as approval-card) ── */
|
|
.queue-card{position:absolute;left:0;right:0;bottom:0;max-width:var(--msg-max);margin:0 auto;padding:0 20px;box-sizing:border-box;width:100%;overflow:hidden;pointer-events:none;z-index:2;}
|
|
.queue-card.visible{pointer-events:auto;}
|
|
/* When queue is visible, add bottom padding to messages so last bubble isn't covered */
|
|
.messages.queue-open{padding-bottom:var(--queue-card-height,280px);}
|
|
.queue-card-inner{background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:14px 14px 0 0;contain:paint;transform:translateY(100%);opacity:0;transition:transform .35s cubic-bezier(.32,.72,.16,1),opacity .2s ease;overflow:hidden;max-height:240px;overflow-y:auto;padding-bottom:4px;}
|
|
.queue-card.visible .queue-card-inner{transform:translateY(0);opacity:1;}
|
|
.queue-card-header{display:flex;align-items:center;gap:8px;padding:9px 14px 8px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
|
|
.queue-card-header-actions{display:flex;align-items:center;gap:4px;margin-left:auto;}
|
|
.queue-card-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--muted);font-size:11px;font-weight:500;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;}
|
|
.queue-card-btn:hover{background:var(--hover-bg);color:var(--text);}
|
|
.queue-card-icon-btn{display:inline-flex;align-items:center;padding:3px;border-radius:5px;border:none;background:none;color:var(--muted);cursor:pointer;opacity:.5;transition:opacity .12s,background .12s;}
|
|
.queue-card-icon-btn:hover{opacity:1;background:var(--hover-bg);}
|
|
.queue-card-row{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border);cursor:grab;}
|
|
.queue-card-row:last-child{border-bottom:none;}
|
|
.queue-card-row:hover{background:color-mix(in srgb,var(--hover-bg) 50%,transparent);}
|
|
.queue-card-drag{color:var(--muted);opacity:.3;flex-shrink:0;line-height:0;}
|
|
.queue-card-text{flex:1;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none;cursor:text;min-width:0;}
|
|
.queue-card-text:focus{white-space:pre-wrap;overflow:auto;text-overflow:clip;}
|
|
.queue-card-badges{display:flex;align-items:center;gap:5px;flex-shrink:0;font-size:10px;color:var(--muted);opacity:.6;}
|
|
.queue-card-file-badge{display:flex;align-items:center;gap:2px;}
|
|
.approval-btn-icon{font-size:13px;line-height:1;}
|
|
.approval-btn-label{line-height:1;}
|
|
.approval-kbd{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:4px;font-size:10px;font-family:inherit;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:var(--muted);line-height:1.4;margin-left:2px;}
|
|
.approval-btn.once{border-color:var(--accent);color:var(--accent-text);background:var(--accent-bg);}
|
|
.approval-btn.once:hover{background:var(--accent-bg-strong);border-color:var(--accent);}
|
|
.approval-btn.session{border-color:var(--accent-bg-strong);color:var(--accent-text);}
|
|
.approval-btn.session:hover{background:var(--accent-bg);border-color:var(--accent);}
|
|
.approval-btn.always{border-color:var(--accent-bg-strong);color:var(--accent-text);}
|
|
.approval-btn.always:hover{background:var(--accent-bg);border-color:var(--accent);}
|
|
.approval-btn.deny{border-color:var(--error);color:var(--error);}
|
|
.approval-btn.deny:hover{background:rgba(239,83,80,.12);border-color:var(--error);}
|
|
.approval-btn.loading{opacity:.7;cursor:wait;}
|
|
/* ── Clarify card ── */
|
|
.clarify-card{position:absolute;left:0;right:0;bottom:-24px;max-width:var(--msg-max);margin:0 auto;padding:0 20px;box-sizing:border-box;width:100%;overflow:hidden;pointer-events:none;max-height:min(calc(100vh - 280px),420px);}
|
|
.clarify-card.visible{pointer-events:auto;}
|
|
.clarify-card .clarify-inner{max-height:min(calc(100vh - 280px),420px);overflow-y:auto;transform:translateY(100%);opacity:0;transition:transform .4s cubic-bezier(.32,.72,.16,1),opacity .25s ease;}
|
|
.clarify-card.visible .clarify-inner{transform:translateY(0);opacity:1;}
|
|
.clarify-inner{background:var(--surface);backdrop-filter:blur(8px);border:1px solid var(--accent-bg-strong);border-radius:12px;padding:12px 14px 36px;box-shadow:0 1px 0 rgba(255,255,255,.02) inset;}
|
|
.clarify-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.01em;}
|
|
.clarify-question{font-size:14px;color:var(--text);line-height:1.7;white-space:pre-wrap;margin-bottom:12px;}
|
|
.clarify-choices{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
|
|
.clarify-choice{display:flex;align-items:flex-start;gap:10px;width:100%;padding:11px 14px;border-radius:12px;font-size:13px;font-weight:600;border:1px solid var(--accent-bg-strong);background:var(--accent-bg);color:var(--accent-text);cursor:pointer;transition:all .15s;white-space:normal;text-align:left;box-shadow:0 1px 0 rgba(255,255,255,.03) inset;}
|
|
.clarify-choice:hover{background:var(--accent-bg-strong);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.18);}
|
|
.clarify-choice:focus-visible{outline:2px solid var(--accent-bg);outline-offset:2px;}
|
|
.clarify-choice-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:999px;background:var(--accent-bg-strong);border:1px solid var(--accent-bg-strong);color:var(--accent-text);font-size:11px;font-weight:800;flex-shrink:0;line-height:1;}
|
|
.clarify-choice-badge.other{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--accent-text);}
|
|
.clarify-choice-text{flex:1;line-height:1.45;min-width:0;}
|
|
.clarify-choice.other{border-color:var(--accent-bg-strong);color:var(--accent-text);background:var(--accent-bg);}
|
|
.clarify-choice.other:hover{background:var(--accent-bg-strong);border-color:var(--accent);}
|
|
.clarify-response{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
|
|
.clarify-input{flex:1;min-width:220px;padding:10px 12px;border-radius:8px;border:1px solid var(--border2);background:var(--input-bg);color:var(--text);font:inherit;outline:none;transition:all .15s;}
|
|
.clarify-input:focus{border-color:var(--accent-bg);box-shadow:0 0 0 3px var(--accent-bg);background:var(--hover-bg);}
|
|
.clarify-submit{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:10px 14px;border-radius:8px;border:1px solid var(--accent-bg-strong);background:var(--accent-bg);color:var(--accent-text);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap;}
|
|
.clarify-submit:hover{background:var(--accent-bg-strong);transform:translateY(-1px);}
|
|
.clarify-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;}
|
|
.clarify-submit.loading{opacity:.75;cursor:wait;}
|
|
.clarify-hint{margin-top:8px;font-size:11px;line-height:1.45;color:var(--muted);}
|
|
.clarify-card.visible .clarify-question{padding-left:1px;}
|
|
/* Left rail (desktop primary navigation) */
|
|
.rail{display:none;width:48px;flex-shrink:0;flex-direction:column;align-items:center;gap:4px;padding:8px 0;background:var(--sidebar);border-right:1px solid var(--border);}
|
|
.rail-btn{width:36px;height:36px;border-radius:8px;border:none;background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:color .15s,background .15s;flex-shrink:0;padding:0;}
|
|
.rail-btn:hover{color:var(--text);background:var(--hover-bg);}
|
|
.rail-btn.active{color:var(--accent-text);background:var(--accent-bg);}
|
|
.rail-btn.active::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:3px;height:16px;background:var(--accent);border-radius:0 2px 2px 0;}
|
|
.rail-spacer{flex:1;min-height:8px;}
|
|
.rail .nav-tab{flex:0 0 auto;padding:0;font-size:inherit;border-bottom:none;overflow:visible;}
|
|
.rail .nav-tab:hover::after{content:none;}
|
|
.rail .nav-tab.active::before{content:'';position:absolute;left:-6px;top:50%;bottom:auto;transform:translateY(-50%);width:3px;height:16px;background:var(--accent);border-radius:0 2px 2px 0;}
|
|
@media(min-width:641px){.rail{display:flex;}.sidebar > .sidebar-nav{display:none;}}
|
|
/* Sidebar navigation tabs */
|
|
.sidebar-nav{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;padding:6px 8px 0;gap:2px;}
|
|
.nav-tab{flex:1;padding:10px 4px 8px;font-size:20px;text-align:center;cursor:pointer;color:var(--muted);border:none;background:none;transition:color .15s;border-bottom:2px solid transparent;white-space:nowrap;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;}
|
|
.nav-tab:hover{color:var(--text);}
|
|
.nav-tab:hover::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--accent-bg-strong);color:var(--accent-text);font-size:12px;font-weight:700;letter-spacing:.02em;padding:6px 12px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:50;box-shadow:0 4px 12px rgba(0,0,0,.3);}
|
|
.nav-tab.active{color:var(--accent-text);}
|
|
.nav-tab.active::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--accent);border-radius:2px 2px 0 0;}
|
|
/* Panel content areas (swapped by tab) */
|
|
.panel-view{display:none;flex:1;overflow:hidden;flex-direction:column;}
|
|
.panel-view.active{display:flex;}
|
|
/* Cron panel */
|
|
.cron-list{flex:1;overflow-y:auto;padding:8px;}
|
|
.cron-item{width:100%;min-width:0;box-sizing:border-box;border-radius:10px;border:1px solid var(--border);margin-bottom:6px;overflow:hidden;transition:border-color .15s,background .15s;background:rgba(255,255,255,.02);cursor:pointer;}
|
|
.cron-item:hover{border-color:var(--border2);}
|
|
.cron-header{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;}
|
|
.cron-name{flex:1;font-size:13px;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.cron-status{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;flex-shrink:0;}
|
|
.cron-status.active{background:rgba(34,197,94,.15);color:var(--success);}
|
|
.cron-status.paused{background:var(--accent-bg-strong);color:var(--accent-text);}
|
|
.cron-status.disabled{background:rgba(255,255,255,.07);color:var(--muted);}
|
|
.cron-status.error{background:rgba(239,83,80,.12);color:var(--error);}
|
|
.cron-body{display:none;padding:0 12px 10px;border-top:1px solid var(--border);overflow:hidden;}
|
|
.cron-body.open{display:block;}
|
|
.cron-schedule{font-size:11px;color:var(--muted);margin:8px 0 6px;}
|
|
.cron-prompt{font-size:11px;color:var(--muted);line-height:1.55;max-height:80px;overflow-y:auto;background:rgba(0,0,0,.2);padding:6px 8px;border-radius:6px;white-space:pre-wrap;margin-bottom:8px;box-sizing:border-box;}
|
|
.cron-actions{display:flex;gap:6px;margin-bottom:8px;}
|
|
.cron-btn{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;border:1px solid var(--border2);background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;transition:all .15s;}
|
|
.cron-btn:hover{background:rgba(255,255,255,.1);color:var(--text);}
|
|
.cron-btn.run{border-color:var(--accent-bg);color:var(--accent-text);}
|
|
.cron-btn.run:hover{background:var(--accent-bg);}
|
|
.cron-btn.pause{border-color:var(--accent-bg-strong);color:var(--accent-text);}
|
|
.cron-last{font-size:11px;color:var(--muted);border-top:1px solid var(--border);padding-top:8px;max-height:220px;overflow-y:auto;white-space:pre-wrap;line-height:1.5;word-break:break-word;}
|
|
.cron-last-header{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px;}
|
|
/* Skills panel */
|
|
.skills-list{flex:1;overflow-y:auto;padding:0 8px 8px;}
|
|
.skills-category{margin-bottom:4px;}
|
|
.skills-cat-header{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 6px 4px;cursor:pointer;display:flex;align-items:center;gap:4px;}
|
|
.skills-cat-header:hover{color:var(--text);}
|
|
.skill-item{width:100%;min-width:0;box-sizing:border-box;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--muted);display:flex;align-items:flex-start;gap:6px;transition:all .12s;line-height:1.4;}
|
|
.skill-item:hover{background:var(--hover-bg);color:var(--text);}
|
|
.skill-item.active{background:var(--accent-bg);color:var(--accent-text);}
|
|
.skill-name{font-weight:500;flex-shrink:0;}
|
|
.skill-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px;opacity:.7;}
|
|
/* Memory panel */
|
|
.memory-panel{flex:1;overflow-y:auto;padding:12px;}
|
|
.memory-section{margin-bottom:16px;}
|
|
.memory-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;}
|
|
.memory-mtime{font-size:10px;font-weight:400;text-transform:none;opacity:.6;}
|
|
.memory-content{font-size:12px;line-height:1.7;color:var(--text);}
|
|
.memory-content p{margin-bottom:6px;}
|
|
.memory-empty{color:var(--muted);font-size:12px;font-style:italic;}
|
|
.memory-detail-mtime{font-size:11px;color:var(--muted);opacity:.7;margin-bottom:12px;}
|
|
.field-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px;opacity:.8;}
|
|
select{width:100%;background:var(--input-bg);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:8px 28px 8px 10px;font-size:12px;outline:none;appearance:none;margin-bottom:6px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238888aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
|
|
select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg);}
|
|
optgroup{color:var(--muted);font-size:11px;font-weight:700;}
|
|
option{background:var(--bg);color:var(--text);padding:6px;}
|
|
.sidebar-actions{display:flex;gap:6px;}
|
|
.sm-btn{flex:1;padding:8px 0;border-radius:8px;font-size:11px;font-weight:500;background:var(--input-bg);border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:all .15s;text-align:center;letter-spacing:.02em;}
|
|
.sm-btn:hover{background:rgba(255,255,255,0.09);color:var(--text);border-color:rgba(255,255,255,.15);}
|
|
.sm-btn:disabled{opacity:.45;cursor:not-allowed;}
|
|
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0;background:var(--main-bg);}
|
|
.topbar{padding:12px 20px;border-bottom:1px solid var(--border);background:var(--topbar-bg);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:relative;z-index:10;}
|
|
.topbar-title{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
.topbar-meta{font-size:11px;color:var(--muted);margin-top:3px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
.topbar-chips{display:flex;gap:6px;align-items:center;flex-shrink:0;}
|
|
.chip{font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,0.05);border:1px solid var(--border2);color:var(--muted);font-weight:500;}
|
|
.workspace-toggle-btn{display:inline-flex!important;align-items:center;gap:6px;cursor:pointer;}
|
|
.workspace-toggle-btn.active{color:var(--accent-text);border-color:var(--accent-bg);background:var(--accent-bg);}
|
|
.workspace-toggle-btn:disabled{opacity:.38;cursor:not-allowed;}
|
|
.chip.model{color:var(--accent-text);border-color:var(--accent-bg-strong);background:var(--accent-bg);}
|
|
.messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;position:relative;z-index:0;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior-y:contain;}
|
|
/* sticky-first-child: button is first child of .messages so its natural position is above viewport; sticky+bottom:16px pins it there when visible */
|
|
.scroll-to-bottom-btn{position:sticky;bottom:16px;align-self:flex-end;margin-right:20px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border2);background:var(--code-bg);color:var(--muted);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:10;transition:color .12s,border-color .12s,background .12s;}
|
|
.scroll-to-bottom-btn:hover{color:var(--text);border-color:var(--border);background:var(--hover-bg);}
|
|
.messages-inner{margin:0 auto;width:100%;padding:20px 24px 32px;display:flex;flex-direction:column;}
|
|
@media(min-width:1400px){.messages-inner{max-width:1100px;}}
|
|
@media(min-width:1800px){.messages-inner{max-width:1200px;}}
|
|
.msg-row{padding:10px 0;}
|
|
.msg-row+.msg-row{border-top:none;}
|
|
.msg-role{font-size:12px;font-weight:500;letter-spacing:.01em;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
|
|
.msg-role.user{color:var(--accent);}
|
|
.msg-role.assistant{color:var(--accent-text);opacity:.6;}
|
|
.role-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
|
|
.role-icon.user{background:var(--accent-bg);color:var(--accent-text);border:1px solid var(--accent-bg-strong);}
|
|
.role-icon.assistant{background:var(--accent-bg-strong);color:var(--accent-text);border:1px solid var(--accent-bg-strong);}
|
|
.msg-body{font-size:14px;line-height:1.75;color:var(--text);padding-left:30px;max-width:680px;}
|
|
.msg-body p{margin-bottom:10px;}.msg-body p:last-child{margin-bottom:0;}
|
|
.msg-body ul,.msg-body ol{margin:6px 0 10px 20px;}.msg-body li{margin-bottom:3px;}
|
|
.msg-body h1,.msg-body h2,.msg-body h3{margin:16px 0 6px;font-weight:600;}
|
|
.msg-body h1{font-size:18px;}.msg-body h2{font-size:16px;}.msg-body h3{font-size:14px;}
|
|
.msg-body strong{color:var(--strong);font-weight:600;}.msg-body em{color:var(--em);font-style:italic;}
|
|
.msg-body code{font-family:"SF Mono","Fira Code",ui-monospace,monospace;font-size:12.5px;background:var(--code-inline-bg);padding:1px 5px;border-radius:4px;color:var(--code-text);}
|
|
.msg-body pre{background:var(--code-bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;overflow-x:auto;margin:10px 0;}
|
|
.msg-body pre code{background:none;padding:0;border-radius:0;color:var(--pre-text);font-size:13px;line-height:1.6;}
|
|
/* Keep original theme background — prevent prism-tomorrow from overriding --code-bg */
|
|
.msg-body pre[class*="language-"],.msg-body pre code[class*="language-"]{background:var(--code-bg) !important;}
|
|
.pre-header{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 16px 8px;background:var(--input-bg);border-radius:10px 10px 0 0;border:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;}
|
|
.pre-header::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.4;}
|
|
.pre-header+pre{border-radius:0 0 10px 10px;border-top:none;margin-top:0;}
|
|
.msg-body blockquote{border-left:3px solid var(--blue);padding-left:14px;color:var(--muted);font-style:italic;margin:10px 0;}
|
|
.msg-body a{color:var(--blue);text-decoration:underline;}
|
|
.msg-body hr{border:none;border-top:1px solid var(--border);margin:14px 0;}
|
|
.msg-body table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12px;}
|
|
.msg-body th{background:rgba(255,255,255,.07);padding:6px 10px;text-align:left;font-weight:600;border:1px solid var(--border2);}
|
|
.msg-body td{padding:5px 10px;border:1px solid rgba(255,255,255,.06);}
|
|
.msg-body tr:nth-child(even){background:rgba(255,255,255,.03);}
|
|
/* #486: inline code inside table cells needs scaled sizing to avoid overflow/clipping */
|
|
.msg-body td code,.msg-body th code{font-size:0.85em;padding:1px 4px;vertical-align:baseline;}
|
|
/* KaTeX math rendering */
|
|
.katex-block{display:block;text-align:center;margin:12px 0;overflow-x:auto;}
|
|
.katex-inline{display:inline;}
|
|
.katex-block .katex-html{text-align:center;}
|
|
.msg-body .katex{font-size:1.1em;}
|
|
.msg-body .katex-display{margin:8px 0;}
|
|
.msg-files{display:flex;flex-wrap:wrap;gap:6px;padding-left:30px;margin-bottom:10px;}
|
|
.msg-file-badge{display:flex;align-items:center;gap:5px;background:var(--accent-bg);border:1px solid var(--accent-bg-strong);border-radius:6px;padding:4px 9px;font-size:12px;color:var(--accent-text);}
|
|
/* MEDIA: inline image rendering (feat #450) */
|
|
.msg-media-img{display:block;max-width:min(480px,100%);max-height:400px;border-radius:8px;margin:6px 0;cursor:zoom-in;object-fit:contain;border:1px solid var(--border);}
|
|
.msg-media-img--full{max-width:100%;max-height:none;cursor:zoom-out;}
|
|
.msg-media-link{display:inline-flex;align-items:center;gap:5px;background:var(--accent-bg);border:1px solid var(--accent-bg-strong);border-radius:6px;padding:4px 10px;font-size:13px;color:var(--accent-text);text-decoration:none;}
|
|
.msg-media-link:hover{background:var(--accent-bg-strong);}
|
|
.thinking{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:13px;padding-left:30px;}
|
|
.dot{width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.3;animation:pulse 1.4s ease-in-out infinite;}
|
|
.dot:nth-child(2){animation-delay:.22s;}.dot:nth-child(3){animation-delay:.44s;}
|
|
@keyframes pulse{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:.8;transform:scale(1)}}
|
|
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px;color:var(--muted);}
|
|
.empty-logo{width:64px;height:64px;border-radius:20px;background:linear-gradient(145deg,var(--accent-bg),var(--accent-bg));border:1px solid var(--accent-bg);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:var(--accent-text);margin-bottom:4px;box-shadow:0 4px 20px var(--accent-bg);}
|
|
.empty-state h2{font-size:20px;color:var(--text);font-weight:700;letter-spacing:-.02em;}
|
|
.empty-state p{font-size:14px;text-align:center;max-width:320px;}
|
|
.suggestion-grid{display:flex;flex-direction:column;gap:8px;margin-top:12px;width:100%;max-width:380px;}
|
|
.suggestion{padding:12px 14px;background:var(--input-bg);border:1px solid var(--border);border-radius:10px;font-size:13px;color:var(--muted);cursor:pointer;transition:all .15s;text-align:left;}
|
|
.suggestion:hover{background:var(--accent-bg);color:var(--text);border-color:var(--accent-bg);transform:translateX(2px);}
|
|
/* ── Composer ── */
|
|
.composer-wrap{padding:12px 20px 16px;background:var(--bg);flex-shrink:0;}
|
|
.composer-box{max-width:780px;margin:0 auto;background:linear-gradient(var(--input-bg),var(--input-bg)),var(--bg);border:1px solid var(--border2);border-radius:16px;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s;position:relative;z-index:2;}
|
|
.composer-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
|
|
.composer-wrap.drag-over .composer-box{border-color:var(--accent-text);background:var(--accent-bg);}
|
|
.drop-hint{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:var(--accent-bg);border:2px dashed var(--accent);border-radius:14px;font-size:14px;color:var(--accent-text);pointer-events:none;z-index:10;flex-direction:column;gap:8px;}
|
|
.composer-wrap.drag-over .drop-hint{display:flex;}
|
|
.attach-tray{display:none;flex-wrap:wrap;gap:6px;padding:10px 14px 0;}
|
|
.attach-tray.has-files{display:flex;}
|
|
.attach-chip{display:flex;align-items:center;gap:5px;background:var(--accent-bg);border:1px solid var(--accent-bg-strong);border-radius:8px;padding:4px 10px;font-size:11px;font-weight:500;color:var(--accent-text);}
|
|
.attach-chip button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0 0 0 3px;}
|
|
.attach-chip button:hover{color:var(--accent);}
|
|
textarea#msg{width:100%;background:transparent;border:none;outline:none;color:var(--text);font-size:16px;line-height:1.65;padding:12px 16px 6px;resize:none;min-height:44px;max-height:200px;font-family:inherit;}
|
|
textarea#msg::placeholder{color:var(--muted);}
|
|
.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px 10px;position:relative;}
|
|
.composer-left{display:flex;align-items:center;gap:4px;min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
|
|
.composer-left::-webkit-scrollbar{display:none;}
|
|
.composer-divider{width:1px;height:16px;background:var(--border);margin:0 3px;flex-shrink:0;}
|
|
.composer-profile-wrap{position:relative;flex:0 1 auto;min-width:0;}
|
|
.composer-profile-chip{display:inline-flex;align-items:center;gap:8px;max-width:180px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;}
|
|
.composer-profile-chip:hover{background-color:var(--hover-bg);}
|
|
.composer-profile-chip.active{background:var(--accent-bg);border-color:var(--accent-bg-strong);}
|
|
.composer-profile-icon,.composer-profile-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
|
|
.composer-profile-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.composer-ws-wrap{position:relative;flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:4px;}
|
|
.composer-workspace-group{display:inline-flex;align-items:stretch;max-width:240px;border-radius:999px;overflow:hidden;background-color:transparent;transition:background-color .15s;}
|
|
.composer-workspace-group:hover{background-color:var(--hover-bg);}
|
|
.composer-workspace-group:hover .composer-workspace-files-btn,
|
|
.composer-workspace-group:hover .composer-workspace-chip{color:var(--text);}
|
|
.composer-workspace-files-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px 8px 12px;background-color:transparent;border:none;border-radius:999px 0 0 999px;color:var(--muted);cursor:pointer;transition:color .15s;-webkit-tap-highlight-color:transparent;}
|
|
.composer-workspace-files-btn:disabled{opacity:.45;cursor:not-allowed;}
|
|
.composer-workspace-files-btn.active{color:var(--accent-text);background:var(--accent-bg);}
|
|
.composer-workspace-chip{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:200px;padding:8px 12px 8px 10px;border:none;border-left:1px solid transparent;border-radius:0 999px 999px 0;background-color:transparent;color:var(--muted);font-weight:500;cursor:pointer;transition:color .15s,border-color .15s;}
|
|
.composer-workspace-group:hover .composer-workspace-files-btn+.composer-workspace-chip{border-left-color:var(--border2);}
|
|
.composer-workspace-chip:disabled{opacity:.45;cursor:not-allowed;}
|
|
.composer-workspace-chip.active{color:var(--text);background:var(--accent-bg);}
|
|
.composer-workspace-icon,.composer-workspace-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
|
|
.composer-workspace-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.composer-reasoning-wrap{position:relative;flex:0 1 auto;min-width:0;}
|
|
.composer-reasoning-chip{display:inline-flex;align-items:center;gap:8px;max-width:180px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;color:var(--muted);font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;}
|
|
.composer-reasoning-chip:hover{color:var(--text);background-color:var(--hover-bg);}
|
|
.composer-reasoning-chip.active{color:var(--text);background:var(--accent-bg);border-color:var(--accent-bg);}
|
|
.composer-reasoning-icon,.composer-reasoning-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
|
|
.composer-reasoning-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.composer-reasoning-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;min-width:140px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;padding:4px;overflow:hidden;}
|
|
.composer-reasoning-dropdown.open{display:block;}
|
|
.reasoning-option{padding:8px 14px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text);white-space:nowrap;transition:background-color .12s;}
|
|
.reasoning-option:hover{background:rgba(255,255,255,.07);}
|
|
.reasoning-option.selected{background:var(--accent-bg);}
|
|
.composer-model-wrap{position:relative;flex:0 1 auto;min-width:0;}
|
|
.composer-model-chip{display:inline-flex;align-items:center;gap:8px;max-width:220px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;color:var(--muted);font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;}
|
|
.composer-model-chip:hover{color:var(--text);background-color:var(--hover-bg);}
|
|
.composer-model-chip.active{color:var(--text);background:var(--accent-bg);border-color:var(--accent-bg);}
|
|
.composer-model-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.composer-model-icon,.composer-model-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
|
|
.composer-model-select{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
|
|
.composer-right{display:flex;gap:8px;align-items:center;flex-shrink:0;}
|
|
.composer-status{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;}
|
|
/* Context usage indicator */
|
|
.ctx-indicator-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
|
|
.ctx-indicator{width:34px;height:34px;padding:0;border:none;background:none;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s,transform .15s;}
|
|
.ctx-indicator:hover{opacity:.88;transform:translateY(-1px);}
|
|
.ctx-ring{position:relative;display:flex;width:24px;height:24px;align-items:center;justify-content:center;}
|
|
.ctx-ring-svg{position:absolute;inset:0;width:24px;height:24px;transform:rotate(-90deg);}
|
|
.ctx-ring-track,.ctx-ring-value{fill:none;stroke-width:3;}
|
|
.ctx-ring-track{stroke:rgba(255,255,255,.12);}
|
|
.ctx-ring-value{stroke:var(--muted);stroke-linecap:round;stroke-dasharray:61.261056745;stroke-dashoffset:61.261056745;transition:stroke-dashoffset .45s ease,stroke .25s ease;}
|
|
.ctx-ring-center{position:relative;display:flex;width:15px;height:15px;align-items:center;justify-content:center;border-radius:999px;background:var(--bg);font-size:8px;font-weight:600;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;}
|
|
.ctx-indicator.ctx-mid .ctx-ring-value{stroke:var(--warning);}
|
|
.ctx-indicator.ctx-high .ctx-ring-value{stroke:var(--error);}
|
|
.ctx-tooltip{position:absolute;right:0;bottom:calc(100% + 10px);min-width:210px;max-width:250px;padding:10px 12px;border:1px solid var(--border2);border-radius:12px;background:var(--surface);box-shadow:0 12px 30px rgba(0,0,0,.28);font-size:11px;line-height:1.45;color:var(--muted);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:30;}
|
|
.ctx-tooltip::after{content:'';position:absolute;right:10px;top:100%;border-width:6px 6px 0 6px;border-style:solid;border-color:var(--surface) transparent transparent transparent;}
|
|
.ctx-indicator-wrap:hover .ctx-tooltip,.ctx-indicator-wrap:focus-within .ctx-tooltip{opacity:1;transform:translateY(0);}
|
|
.ctx-tooltip-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:5px;}
|
|
.ctx-tooltip-line+.ctx-tooltip-line{margin-top:3px;}
|
|
.cancel-btn{width:34px;height:34px;border-radius:50%;background:var(--error);border:none;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 2px 10px rgba(0,0,0,.18);}
|
|
.cancel-btn:hover{background:var(--error);transform:scale(1.06);box-shadow:0 4px 14px rgba(0,0,0,.25);filter:brightness(1.1);}
|
|
.cancel-btn:active{transform:scale(.96);}
|
|
.icon-btn{width:34px;height:34px;border-radius:8px;background:none;border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .15s;}
|
|
.icon-btn{opacity:.75;}
|
|
.icon-btn:hover{background:rgba(255,255,255,.08);color:var(--text);opacity:1;}
|
|
.mic-btn{transition:color .15s,background .15s;}
|
|
.mic-btn.recording{color:var(--error);background:rgba(239,83,80,.12);animation:mic-pulse 1.2s ease-in-out infinite;}
|
|
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,83,80,.3);}50%{box-shadow:0 0 0 6px rgba(239,83,80,0);}}
|
|
.mic-status{font-size:11px;color:var(--error);padding:4px 12px;display:flex;align-items:center;gap:6px;}
|
|
.mic-dot{width:6px;height:6px;border-radius:50%;background:var(--error);animation:mic-pulse 1.2s ease-in-out infinite;flex-shrink:0;}
|
|
.status-text{font-size:11px;color:var(--muted);padding-left:4px;}
|
|
.send-btn{width:34px;height:34px;border-radius:50%;background:var(--accent);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 2px 8px var(--accent-bg-strong);}
|
|
.send-btn:hover{background:var(--accent-hover);transform:scale(1.08);box-shadow:0 4px 14px var(--accent-bg-strong);}
|
|
.send-btn:active{transform:scale(0.95);box-shadow:0 1px 4px var(--accent-bg);}
|
|
.send-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;}
|
|
.send-btn.visible{animation:send-pop-in .18s cubic-bezier(.34,1.56,.64,1) forwards;}
|
|
@keyframes send-pop-in{from{opacity:0;transform:scale(.55);}to{opacity:1;transform:scale(1);}}
|
|
.upload-bar-wrap{display:none;height:3px;background:var(--hover-bg);border-radius:0 0 16px 16px;overflow:hidden;}
|
|
.upload-bar-wrap.active{display:block;}
|
|
.upload-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));width:0%;transition:width .3s ease;}
|
|
.rightpanel{width:300px;background:var(--sidebar);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;min-width:0;opacity:1;transform:translateX(0);transform-origin:right center;transition:width .24s cubic-bezier(.22,1,.36,1),opacity .18s ease,transform .24s cubic-bezier(.22,1,.36,1),border-color .24s ease;}
|
|
.panel-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;justify-content:space-between;}
|
|
.git-badge{font-size:9px;font-weight:600;color:var(--muted);background:var(--hover-bg);padding:2px 7px;border-radius:4px;letter-spacing:.02em;margin-left:auto;margin-right:4px;white-space:nowrap;font-family:'SF Mono',ui-monospace,monospace;}
|
|
.git-badge.dirty{color:var(--accent-text);background:var(--accent-bg);}
|
|
.panel-actions{display:flex;gap:4px;}
|
|
.mobile-close-btn{display:none;}
|
|
.panel-icon-btn{width:24px;height:24px;background:none;border:none;color:var(--muted);cursor:pointer;border-radius:5px;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s;}
|
|
.panel-icon-btn:hover{background:var(--hover-bg);color:var(--text);}
|
|
.panel-icon-btn:disabled{opacity:.35;cursor:not-allowed;}
|
|
.panel-icon-btn:disabled:hover{background:none;color:var(--muted);}
|
|
/* File row actions (shown on hover) */
|
|
/* file-item-actions removed: delete button is now a flex child */
|
|
.file-action-btn{width:20px;height:20px;background:rgba(0,0,0,.4);border:none;border-radius:4px;color:var(--muted);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;}
|
|
.file-action-btn:hover{color:var(--accent);}
|
|
.close-preview{cursor:pointer;opacity:.6;}.close-preview:hover{opacity:1;}
|
|
/* Breadcrumb navigation */
|
|
.breadcrumb-bar{display:flex;align-items:center;gap:2px;padding:6px 12px;font-size:12px;border-bottom:1px solid var(--border);flex-shrink:0;overflow:hidden;white-space:nowrap;}
|
|
.breadcrumb-seg{padding:1px 3px;border-radius:3px;}
|
|
.breadcrumb-link{color:var(--muted);cursor:pointer;transition:color .12s;}
|
|
.breadcrumb-link:hover{color:var(--text);background:var(--hover-bg);}
|
|
.breadcrumb-current{color:var(--text);font-weight:500;}
|
|
.breadcrumb-sep{color:var(--border);margin:0 1px;font-size:11px;}
|
|
.file-tree{flex:1;overflow-y:auto;padding:8px;}
|
|
.file-item{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--muted);transition:all .12s;min-width:0;}
|
|
.file-item:hover{background:var(--hover-bg);color:var(--text);}
|
|
.file-item.active{background:var(--accent-bg);color:var(--accent-text);}
|
|
.file-tree-toggle{font-size:10px;color:var(--muted);flex-shrink:0;width:10px;text-align:center;line-height:1;}
|
|
.file-item.file-empty{color:var(--muted);opacity:.5;font-style:italic;cursor:default;font-size:11px;}
|
|
.file-item.file-empty:hover{background:none;color:var(--muted);}
|
|
.preview-area{flex:1;overflow:auto;padding:14px;flex-direction:column;gap:8px;display:none;opacity:0;transition:opacity .15s;}
|
|
.preview-area.visible{display:flex;opacity:1;}
|
|
.preview-path{font-size:11px;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
|
.preview-code{font-family:"SF Mono","Fira Code",ui-monospace,monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word;color:var(--pre-text);}
|
|
/* Image preview */
|
|
.preview-img-wrap{display:flex;align-items:center;justify-content:center;flex:1;padding:8px 0;min-height:0;}
|
|
.preview-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,.4);}
|
|
/* Markdown rendered preview */
|
|
.preview-md{font-size:13px;line-height:1.7;color:var(--text);flex:1;overflow-y:auto;min-height:0;}
|
|
.preview-md p{margin-bottom:10px;}.preview-md p:last-child{margin-bottom:0;}
|
|
.preview-md h1{font-size:18px;font-weight:700;margin:16px 0 8px;color:var(--strong);border-bottom:1px solid var(--border);padding-bottom:6px;}
|
|
.preview-md h2{font-size:15px;font-weight:600;margin:14px 0 6px;color:var(--strong);}
|
|
.preview-md h3{font-size:13px;font-weight:600;margin:12px 0 4px;color:var(--strong);}
|
|
.preview-md ul,.preview-md ol{margin:4px 0 10px 18px;}.preview-md li{margin-bottom:3px;}
|
|
.preview-md code{font-family:"SF Mono",ui-monospace,monospace;font-size:11.5px;background:var(--code-inline-bg);padding:1px 5px;border-radius:4px;color:var(--code-text);}
|
|
.preview-md pre{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;overflow-x:auto;margin:8px 0;}
|
|
.preview-md pre code{background:none;padding:0;color:var(--pre-text);font-size:11.5px;line-height:1.55;}
|
|
/* Keep original theme background — prevent prism-tomorrow from overriding --code-bg */
|
|
.preview-md pre[class*="language-"],.preview-md pre code[class*="language-"]{background:var(--code-bg) !important;}
|
|
.preview-md blockquote{border-left:3px solid var(--blue);padding-left:12px;color:var(--muted);font-style:italic;margin:8px 0;}
|
|
.preview-md strong{color:var(--strong);font-weight:600;}.preview-md em{color:var(--em);}
|
|
.preview-md a{color:var(--blue);text-decoration:underline;}
|
|
.preview-md hr{border:none;border-top:1px solid var(--border);margin:12px 0;}
|
|
.preview-md table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12px;}
|
|
.preview-md th{background:var(--hover-bg);padding:6px 10px;text-align:left;font-weight:600;border:1px solid var(--border2);}
|
|
.preview-md td{padding:5px 10px;border:1px solid var(--border2);}
|
|
.preview-md tr:nth-child(even){background:var(--code-inline-bg);}
|
|
/* #486: inline code inside table cells needs scaled sizing to avoid overflow/clipping */
|
|
.preview-md td code,.preview-md th code{font-size:0.85em;padding:1px 4px;vertical-align:baseline;}
|
|
/* File type badge in preview path bar */
|
|
.preview-badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;margin-left:8px;text-transform:uppercase;letter-spacing:.06em;}
|
|
.preview-badge.img{background:var(--accent-bg);color:var(--accent-text);}
|
|
.preview-badge.md{background:var(--accent-bg-strong);color:var(--accent-text);}
|
|
.preview-badge.code{background:var(--hover-bg);color:var(--muted);}
|
|
::-webkit-scrollbar{width:4px;height:4px}
|
|
::-webkit-scrollbar-track{background:transparent}
|
|
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:99px;transition:background .2s}
|
|
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}
|
|
/* ── Desktop: hide mobile-only elements ── */
|
|
.mobile-hamburger{display:none;}
|
|
.mobile-files-btn{display:none!important;}
|
|
.mobile-overlay{display:none;}
|
|
|
|
@media(min-width:901px){
|
|
html[data-workspace-panel="closed"] .rightpanel{width:0 !important;opacity:0;transform:translateX(14px);border-left-color:transparent;pointer-events:none;}
|
|
.layout.workspace-panel-collapsed .rightpanel{width:0 !important;opacity:0;transform:translateX(14px);border-left-color:transparent;pointer-events:none;}
|
|
}
|
|
|
|
@media(max-width:900px){
|
|
.rightpanel{display:none}
|
|
.workspace-toggle-btn,.mobile-files-btn{display:inline-flex!important;}
|
|
.mobile-close-btn{display:flex;}
|
|
.close-preview{display:none;}
|
|
#btnCollapseWorkspacePanel{display:none;}
|
|
}
|
|
|
|
@media(max-width:640px){
|
|
/* ── Sidebar: slide-in overlay instead of hidden ── */
|
|
.sidebar{position:fixed;left:-300px;top:0;bottom:0;width:280px;z-index:200;
|
|
transition:left .25s ease;}
|
|
.sidebar.mobile-open{left:0;}
|
|
.sidebar .resize-handle{display:none;}
|
|
/* Hamburger button (in app titlebar on mobile) */
|
|
.app-titlebar-hamburger,.app-titlebar-spacer{display:flex;}
|
|
/* Overlay backdrop */
|
|
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
|
|
z-index:199;-webkit-tap-highlight-color:transparent;}
|
|
.mobile-overlay.visible{display:block;}
|
|
/* Files button in topbar */
|
|
.workspace-toggle-btn,.mobile-files-btn{display:inline-flex!important;}
|
|
/* Right panel: slide-over from right */
|
|
.rightpanel{display:flex!important;position:fixed;right:-320px;top:0;bottom:0;
|
|
width:300px;z-index:200;transition:right .25s ease;
|
|
box-shadow:-4px 0 24px rgba(0,0,0,.4);}
|
|
.rightpanel.mobile-open{right:0;}
|
|
.rightpanel .resize-handle{display:none;}
|
|
/* Topbar adjustments */
|
|
.topbar{padding:8px 12px;gap:8px;}
|
|
.topbar-title{font-size:14px;}
|
|
.topbar-meta{display:none;}
|
|
.topbar-chips{flex-wrap:nowrap;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
|
|
.topbar-chips .chip,.topbar-chips .ws-chip,.topbar-chips button{font-size:11px!important;padding:4px 8px!important;white-space:nowrap;}
|
|
.settings-main{padding:18px 16px;}
|
|
.hermes-action-grid{grid-template-columns:1fr;}
|
|
.messages-inner{padding:12px 10px 20px;}
|
|
.msg-body{padding-left:0;max-width:100%;}
|
|
.msg-role{font-size:12px;}
|
|
.composer-wrap{padding:8px 10px 12px!important;}
|
|
.composer-box{border-radius:12px;}
|
|
.composer-box textarea{min-height:40px;}
|
|
.composer-footer{padding:6px 8px 8px!important;gap:8px;}
|
|
/* icon-only composer chips below 768px */
|
|
.composer-profile-label,
|
|
.composer-workspace-label,
|
|
.composer-model-label,
|
|
.composer-reasoning-label,
|
|
.composer-profile-chevron,
|
|
.composer-model-chevron,
|
|
.composer-reasoning-chevron{display:none;}
|
|
.composer-profile-chip,
|
|
.composer-model-chip,
|
|
.composer-reasoning-chip{max-width:44px;min-width:44px;min-height:44px;padding:6px;justify-content:center;gap:0;font-size:11px;}
|
|
/* Workspace group: keep split layout on mobile — files icon + chevron-only picker */
|
|
.composer-workspace-group{min-height:44px;}
|
|
.composer-workspace-files-btn{min-width:44px;padding:6px 8px;}
|
|
.composer-workspace-chip{min-width:32px;padding:6px 8px;gap:0;}
|
|
.composer-divider{display:none;}
|
|
.composer-status{max-width:96px;font-size:10px;}
|
|
.send-btn{width:32px;height:32px;}
|
|
.cancel-btn{width:32px;height:32px;}
|
|
.ctx-indicator{width:32px;height:32px;}
|
|
.ctx-tooltip{right:-4px;min-width:190px;max-width:220px;}
|
|
/* Touch targets — minimum 44px */
|
|
.icon-btn,.mic-btn{min-width:44px;min-height:44px;}
|
|
.session-item{min-height:44px;padding:10px 86px 10px 12px;}
|
|
.session-item.streaming,.session-item.unread{padding-right:40px;}
|
|
.session-actions{opacity:1;pointer-events:auto;}
|
|
/* Empty state */
|
|
.empty-state h2{font-size:18px;}
|
|
.empty-state p{font-size:13px;}
|
|
.suggestion-grid{max-width:100%!important;}
|
|
.suggestion{font-size:12px;padding:10px 12px;}
|
|
/* Approval card */
|
|
.approval-card{padding-left:10px;padding-right:10px;}
|
|
.approval-btns{gap:6px;}
|
|
.approval-btn{padding:8px 12px;font-size:12px;min-height:44px;}
|
|
.approval-kbd{display:none;}
|
|
/* Clarify card */
|
|
.clarify-card{padding-left:10px;padding-right:10px;}
|
|
.clarify-inner{padding:12px 12px 13px;}
|
|
.clarify-response{flex-direction:column;align-items:stretch;}
|
|
.clarify-input,.clarify-submit{width:100%;min-height:44px;}
|
|
.clarify-choice{min-height:44px;}
|
|
.clarify-choice-badge{min-width:22px;height:22px;}
|
|
.app-dialog-overlay{padding:12px;}
|
|
.app-dialog{width:100%;padding:16px 16px 14px;border-radius:16px;}
|
|
.app-dialog-actions{flex-direction:column-reverse;align-items:stretch;}
|
|
.app-dialog-btn{width:100%;min-height:44px;}
|
|
/* Tool cards */
|
|
.tool-card{margin-left:0!important;font-size:12px;}
|
|
.onboarding-overlay{padding:12px;}
|
|
.onboarding-shell{grid-template-columns:1fr;}
|
|
.onboarding-sidebar{border-right:none;border-bottom:1px solid var(--border);padding:22px 18px;}
|
|
.onboarding-main{padding:20px 18px 18px;}
|
|
.onboarding-actions{flex-direction:column-reverse;}
|
|
.onboarding-actions .sm-btn{width:100%;min-height:44px;}
|
|
/* Login page responsive */
|
|
.card{width:90vw;max-width:320px;padding:28px 24px;}
|
|
}
|
|
|
|
|
|
/* ── Workspace dropdown (topbar) ── */
|
|
.ws-chip{user-select:none;}
|
|
.ws-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;right:0;min-width:200px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:320px;overflow-y:auto;}
|
|
.ws-dropdown.open{display:block;}
|
|
.ws-dropdown-footer{left:0;right:auto;bottom:calc(100% + 4px);min-width:280px;max-width:min(420px,calc(100vw - 32px));}
|
|
.model-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;min-width:280px;max-width:min(420px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:320px;overflow-y:auto;}
|
|
.model-dropdown.open{display:block;}
|
|
.model-group{padding:8px 14px 4px;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;}
|
|
.model-opt{padding:10px 14px;cursor:pointer;transition:background .12s;display:flex;flex-direction:column;gap:3px;align-items:flex-start;}
|
|
.model-opt:hover{background:rgba(255,255,255,.07);}
|
|
.model-opt.active{background:var(--accent-bg);}
|
|
.model-opt-name{display:block;font-size:13px;color:var(--text);font-weight:500;line-height:1.25;}
|
|
.model-opt-id{display:block;font-size:10px;color:var(--muted);line-height:1.3;opacity:.72;word-break:break-word;}
|
|
.model-custom-sep{padding-top:4px;border-top:1px solid var(--border);margin-top:4px;}
|
|
.model-custom-row{display:flex;align-items:center;gap:6px;padding:6px 10px 8px;}
|
|
.model-custom-input{flex:1;background:var(--code-bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);padding:5px 8px;font-size:12px;outline:none;font-family:inherit;min-width:0;}
|
|
.model-search-row{display:flex;align-items:center;gap:6px;padding:8px 10px 10px;}
|
|
.model-search-input{flex:1;background:var(--code-bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);padding:6px 8px;font-size:12px;outline:none;font-family:inherit;min-width:0;}
|
|
.model-search-input:focus{border-color:var(--accent);}
|
|
.model-search-clear{flex-shrink:0;width:22px;height:22px;border:1px solid var(--border2);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .12s,border-color .12s;font-size:10px;}
|
|
.model-search-clear:hover{color:var(--text);border-color:var(--border);}
|
|
.model-custom-input:focus{border-color:var(--accent);}
|
|
.model-custom-btn{flex-shrink:0;width:24px;height:24px;border:1px solid var(--border2);border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .12s,border-color .12s;}
|
|
.model-custom-btn:hover{color:var(--accent-text);border-color:var(--accent-bg);}
|
|
.ws-opt{padding:10px 14px;cursor:pointer;transition:background .12s;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
|
|
.ws-opt:hover{background:rgba(255,255,255,.07);}
|
|
.ws-opt.active{background:var(--accent-bg);}
|
|
.ws-opt-name{display:block;font-size:13px;color:var(--text);font-weight:500;line-height:1.25;white-space:normal;overflow:hidden;text-overflow:ellipsis;}
|
|
.ws-opt-path{display:block;font-size:10px;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:normal;opacity:.72;word-break:break-word;}
|
|
.ws-divider{height:1px;background:var(--border);margin:4px 0;}
|
|
.ws-manage{color:var(--muted);font-size:12px;}
|
|
.ws-opt-action{display:flex;flex-direction:row;align-items:center;gap:8px;}
|
|
.ws-opt-icon{display:inline-flex;align-items:center;justify-content:center;opacity:.82;flex-shrink:0;}
|
|
.ws-opt-meta{font-size:11px;color:var(--muted);}
|
|
/* ── Workspace management panel ── */
|
|
.ws-row{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:2px;border:1px solid transparent;border-radius:8px;cursor:pointer;color:var(--muted);transition:background .15s,border-color .15s,color .15s;}
|
|
.ws-row:hover{background:var(--surface);color:var(--text);}
|
|
.ws-row.active{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--accent-text);}
|
|
.ws-row-info{flex:1;min-width:0;}
|
|
.ws-row-name{font-size:13px;font-weight:500;color:inherit;}
|
|
.ws-row-path{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.ws-row.active .ws-row-path{color:var(--accent-text);opacity:.8;}
|
|
.ws-row-actions{display:flex;gap:4px;flex-shrink:0;}
|
|
.ws-action-btn{padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;border:1px solid var(--border2);background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;}
|
|
.ws-action-btn:hover{background:rgba(255,255,255,.1);color:var(--text);}
|
|
/* ── Profile dropdown + management panel ── */
|
|
.profile-chip{user-select:none;color:var(--accent-text)!important;}
|
|
.profile-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;min-width:260px;max-width:min(260px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:380px;overflow-y:auto;}
|
|
.profile-dropdown.open{display:block;}
|
|
.profile-opt{padding:10px 14px;cursor:pointer;transition:background .12s;}
|
|
.profile-opt:hover{background:rgba(255,255,255,.07);}
|
|
.profile-opt.active{background:var(--accent-bg);}
|
|
.profile-opt-name{font-size:13px;color:var(--text);font-weight:500;}
|
|
.profile-opt-meta{font-size:11px;color:var(--muted);margin-top:2px;}
|
|
.profile-opt-badge{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle;}
|
|
.profile-opt-badge.running{background:#4caf50;box-shadow:0 0 4px rgba(76,175,80,.5);}
|
|
.profile-opt-badge.stopped{background:rgba(255,255,255,.2);}
|
|
.profile-card{padding:8px 10px;margin-bottom:2px;border:1px solid transparent;border-radius:8px;cursor:pointer;color:var(--muted);transition:background .15s,border-color .15s,color .15s;}
|
|
.profile-card:hover{background:var(--surface);color:var(--text);}
|
|
.profile-card.active{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--accent-text);}
|
|
.profile-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;}
|
|
.profile-card-name{font-size:13px;font-weight:600;color:inherit;}
|
|
.profile-card-name.is-active{color:var(--accent-text);}
|
|
.profile-card-meta{font-size:11px;color:var(--muted);margin-top:3px;padding-left:12px;}
|
|
.profile-card.active .profile-card-meta{color:var(--accent-text);opacity:.8;}
|
|
.profile-card-actions{display:flex;gap:4px;flex-shrink:0;}
|
|
/* ── Slash command autocomplete dropdown ── */
|
|
.cmd-dropdown{display:none;position:absolute;left:0;right:0;bottom:calc(100% + 4px);width:auto;max-width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -8px 24px rgba(0,0,0,.4);z-index:200;max-height:240px;overflow-y:auto;}
|
|
.cmd-dropdown.open{display:block;}
|
|
.cmd-item{padding:8px 14px;cursor:pointer;transition:background .12s;}
|
|
.cmd-item:hover{background:rgba(255,255,255,.07);}
|
|
.cmd-item.selected{background:var(--accent-bg);outline:1px solid var(--accent-bg-strong);}
|
|
.cmd-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
|
|
.cmd-item-name{font-size:13px;color:var(--text);font-weight:500;}
|
|
.cmd-item-parent{color:var(--muted);font-weight:400;}
|
|
.cmd-item-subarg{font-weight:600;}
|
|
.cmd-item-arg{color:var(--muted);font-weight:400;font-style:italic;}
|
|
.cmd-item-desc{font-size:11px;color:var(--muted);margin-top:1px;}
|
|
.cmd-item-badge{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:999px;border:1px solid var(--border2);color:var(--muted);background:var(--hover-bg);}
|
|
.cmd-item-badge-skill{color:var(--accent-text);background:var(--accent-bg);border-color:var(--accent-bg-strong);}
|
|
.ws-action-btn.danger:hover{background:rgba(239,83,80,.1);color:var(--error);border-color:var(--error);}
|
|
.ws-add-row{display:flex;gap:8px;align-items:center;padding:10px 0 4px;}
|
|
.ws-add-input-wrap{flex:1;min-width:0;}
|
|
.ws-suggestions{margin:0 0 6px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.22);max-height:220px;overflow:auto;}
|
|
.ws-suggest-item{display:flex;flex-direction:column;gap:2px;width:100%;padding:8px 10px;border:0;background:transparent;color:var(--text);text-align:left;font-size:12px;cursor:pointer;}
|
|
.ws-suggest-item:hover{background:rgba(255,255,255,.08);}
|
|
.ws-suggest-item.active{background:var(--accent-bg);outline:1px solid var(--accent-bg-strong);outline-offset:-1px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);}
|
|
.ws-suggest-leaf{font-size:13px;font-weight:600;color:var(--text);}
|
|
.ws-suggest-parent{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
.ws-suggest-item.active .ws-suggest-leaf{color:var(--accent-text);}
|
|
.ws-suggest-item.active .ws-suggest-parent{color:var(--text);}
|
|
/* ── Message action buttons (copy, edit, retry) ── */
|
|
.msg-actions{display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .15s;margin-left:auto;}
|
|
.msg-row:hover .msg-actions{opacity:1;}
|
|
.msg-action-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 5px;border-radius:5px;transition:color .12s,background .12s;line-height:1;}
|
|
.msg-action-btn:hover{color:var(--accent-text);background:var(--accent-bg);}
|
|
|
|
/* ── Edit message inline ── */
|
|
.msg-edit-area{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--accent-bg);border-radius:8px;color:var(--text);padding:10px 12px;font-size:14px;font-family:inherit;line-height:1.6;resize:none;outline:none;min-height:60px;box-sizing:border-box;box-shadow:0 0 0 3px var(--accent-bg);margin-top:4px;}
|
|
.msg-edit-bar{display:flex;gap:8px;margin-top:8px;margin-bottom:4px;}
|
|
.msg-edit-send{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s;}
|
|
.msg-edit-send:hover{opacity:.85;}
|
|
.msg-edit-cancel{background:var(--hover-bg);color:var(--muted);border:1px solid var(--border2);border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer;transition:background .15s;}
|
|
.msg-edit-cancel:hover{background:rgba(255,255,255,.1);}
|
|
|
|
/* ── Clear conversation chip ── */
|
|
.clear-btn{background:var(--accent-bg);border:1px solid var(--accent-bg-strong);color:var(--accent-text);font-size:11px;padding:4px 10px;cursor:pointer;transition:background .15s;}
|
|
.clear-btn:hover{background:var(--accent-bg-strong);}
|
|
|
|
/* ── Copy button on messages ── */
|
|
/* msg-copy-btn styles moved to msg-action-btn */
|
|
/* ── Nav tab nowrap ── */
|
|
/* nav-tab-nowrap-handled-above */
|
|
|
|
/* ── Final polish additions ── */
|
|
|
|
/* Smooth hover on file items */
|
|
|
|
|
|
/* Sidebar section padding: give the session-section breathing room */
|
|
.sidebar-section{padding:10px 12px 6px;}
|
|
|
|
/* New chat btn icon - align nicely */
|
|
.new-chat-btn svg{flex-shrink:0;opacity:.8;}
|
|
|
|
/* Session list: group header spacing */
|
|
.session-list > div[style]{padding-left:12px;}
|
|
|
|
/* Preview path bar: flex row with nice gap */
|
|
.preview-path{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden;min-width:0;}
|
|
.preview-path #previewPathText{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.preview-path #previewBadge{flex-shrink:0;white-space:nowrap;}
|
|
.preview-path #btnDownloadFile,.preview-path #btnEditFile{flex-shrink:0;white-space:nowrap;}
|
|
|
|
/* Preview badge typography */
|
|
.preview-badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
|
|
|
|
/* Approval buttons: tab stops */
|
|
.approval-btn:focus{outline:2px solid var(--blue);outline-offset:2px;}
|
|
.clarify-choice:focus,.clarify-submit:focus,.clarify-input:focus{outline:2px solid var(--blue);outline-offset:2px;}
|
|
|
|
/* Message role: breathing room between icon and name */
|
|
.msg-role > span{line-height:1;}
|
|
|
|
/* Composer wrap: slightly less padding on smaller heights */
|
|
.composer-wrap{padding:10px 20px 14px;position:relative;z-index:10;}
|
|
.composer-wrap::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:32px;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none;}
|
|
|
|
/* Cron status badges: pill shape refinement */
|
|
.cron-status{border-radius:99px;font-size:10px;letter-spacing:.04em;}
|
|
|
|
/* Right panel icons: tighter */
|
|
.panel-actions{gap:2px;}
|
|
|
|
/* Topbar: border should match the subtle sidebar border */
|
|
:root.dark .topbar{border-bottom:1px solid rgba(255,255,255,.07);}
|
|
|
|
|
|
|
|
/* Suggestion grid: consistent width */
|
|
.suggestion-grid{width:100%;max-width:400px;}
|
|
|
|
/* Empty state: add subtle gradient behind logo */
|
|
.empty-state{background:radial-gradient(ellipse at 50% 20%,var(--accent-bg) 0%,transparent 60%);}
|
|
|
|
/* Remove old status-text from composer (kept for error messages only) */
|
|
.status-text{font-size:11px;color:var(--muted);padding-left:2px;display:none;}
|
|
|
|
/* Sidebar workspace display */
|
|
#sidebarWsDisplay:hover{background:rgba(255,255,255,.05);}
|
|
#sidebarWsDisplay:hover #sidebarWsName{color:var(--blue);}
|
|
|
|
/* Date group headers in session list */
|
|
.session-list > div[style*="uppercase"] {
|
|
padding: 8px 10px 3px !important;
|
|
font-size: 10px !important;
|
|
}
|
|
/* Right panel file tree: more padding for breathing room */
|
|
|
|
/* Composer footer: even spacing */
|
|
.composer-footer { padding: 4px 10px 8px; }
|
|
|
|
/* ── File tree: clean delete button via CSS hover ── */
|
|
.file-del-btn{
|
|
flex-shrink:0;
|
|
width:0;height:16px;
|
|
overflow:hidden;
|
|
background:none;border:none;
|
|
color:var(--muted);cursor:pointer;
|
|
font-size:13px;font-weight:300;
|
|
opacity:0;
|
|
transition:width .12s,opacity .12s,color .12s;
|
|
padding:0;border-radius:3px;
|
|
display:flex;align-items:center;justify-content:center;
|
|
line-height:1;
|
|
}
|
|
.file-item:hover .file-del-btn{ width:16px;opacity:1;margin-left:2px; }
|
|
.file-del-btn:hover{ color:var(--accent); }
|
|
|
|
/* file-name must be a flex child that can shrink to zero */
|
|
.file-name{
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
flex:1 1 0;
|
|
min-width:0;
|
|
}
|
|
|
|
/* file-size: never wraps, shrinks away gracefully */
|
|
.file-size{
|
|
flex-shrink:0;
|
|
font-size:10px;
|
|
color:var(--muted);
|
|
white-space:nowrap;
|
|
margin-left:4px;
|
|
font-variant-numeric:tabular-nums;
|
|
}
|
|
|
|
/* file-icon: never shrinks */
|
|
.file-icon{
|
|
flex-shrink:0;
|
|
font-size:13px;
|
|
opacity:.7;
|
|
line-height:1;
|
|
}
|
|
|
|
/* ── Resizable panels ── */
|
|
.resize-handle{
|
|
position:absolute;
|
|
top:0;bottom:0;
|
|
width:5px;
|
|
cursor:col-resize;
|
|
z-index:10;
|
|
transition:background .15s;
|
|
}
|
|
.resize-handle:hover,.resize-handle.dragging{background:var(--accent);}
|
|
/* Desktop-only: position:relative for sidebar/rightpanel resize handles.
|
|
Must be scoped to min-width:641px so it doesn't override the mobile
|
|
position:fixed slide-in overlay set in the max-width:640px @media block above. */
|
|
@media(min-width:641px){
|
|
.sidebar{position:relative;}
|
|
.rightpanel{position:relative;}
|
|
}
|
|
.sidebar .resize-handle{right:-2px;}
|
|
.rightpanel .resize-handle{left:-2px;}
|
|
/* Prevent text selection during drag */
|
|
body.resizing{user-select:none;cursor:col-resize;}
|
|
|
|
/* ── Tool call cards ── */
|
|
/* Running indicator dot (pulsing) */
|
|
.tool-card-running-dot{
|
|
display:inline-block;
|
|
width:7px;
|
|
height:7px;
|
|
border-radius:50%;
|
|
background:var(--blue);
|
|
opacity:.8;
|
|
flex-shrink:0;
|
|
vertical-align:middle;
|
|
animation:pulse 1.2s ease-in-out infinite;
|
|
}
|
|
/* Show more button inside tool card result */
|
|
.tool-card-more{background:none;border:none;color:var(--blue);font-size:10px;cursor:pointer;padding:3px 0 0;opacity:.7;display:block;}
|
|
.tool-card-more:hover{opacity:1;}
|
|
/* Subagent cards: indented with accent border */
|
|
.tool-card-subagent{border-left:2px solid var(--accent-bg);margin-left:8px;}
|
|
/* Token usage badge below assistant messages */
|
|
.msg-usage{font-size:11px;color:var(--muted);opacity:.6;margin-top:2px;padding-left:42px;}
|
|
.msg-usage:hover{opacity:1;}
|
|
/* Skill picker (cron create form) */
|
|
.skill-picker-wrap{position:relative;}
|
|
.skill-picker-dropdown{position:absolute;left:0;right:0;top:100%;background:var(--sidebar);border:1px solid var(--border2);border-radius:6px;z-index:1100;max-height:180px;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,.3);}
|
|
.skill-opt{padding:6px 10px;cursor:pointer;font-size:12px;color:var(--muted);transition:background .1s;}
|
|
.skill-opt:hover{background:rgba(255,255,255,.08);color:var(--text);}
|
|
.skill-picker-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
|
|
.skill-tag{background:var(--accent-bg);border:1px solid var(--accent-bg);border-radius:12px;padding:2px 8px;font-size:11px;color:var(--accent-text);display:flex;align-items:center;gap:4px;}
|
|
.remove-tag{cursor:pointer;opacity:.6;font-size:13px;line-height:1;}
|
|
.remove-tag:hover{opacity:1;color:var(--accent);}
|
|
/* Skill frontmatter (collapsible metadata) */
|
|
.skill-frontmatter{margin-bottom:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow:hidden;}
|
|
.skill-frontmatter>summary{padding:8px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);cursor:pointer;user-select:none;list-style:none;}
|
|
.skill-frontmatter>summary::-webkit-details-marker{display:none;}
|
|
.skill-frontmatter>summary:hover{color:var(--text);}
|
|
.skill-frontmatter[open]>summary{border-bottom:1px solid var(--border);}
|
|
.skill-frontmatter pre{margin:0;padding:10px 12px;font-size:12px;line-height:1.5;color:var(--text);background:transparent;overflow-x:auto;}
|
|
/* Skill linked files section */
|
|
.skill-linked-files{margin-top:16px;border-top:1px solid var(--border);padding-top:12px;}
|
|
.skill-linked-section{margin-bottom:8px;}
|
|
.skill-linked-section h4{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px;}
|
|
.skill-linked-file{display:block;font-size:12px;padding:3px 6px;border-radius:4px;cursor:pointer;color:var(--blue);text-decoration:none;}
|
|
.skill-linked-file:hover{background:var(--hover-bg);}
|
|
.tool-card-row{margin:0;padding:1px 0;}
|
|
.tool-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:6px;margin:2px 0 2px 40px;overflow:hidden;transition:border-color .15s;}
|
|
.tool-card:hover{border-color:rgba(255,255,255,.12);}
|
|
.tool-card-running{border-color:var(--accent-bg-strong);background:var(--accent-bg);}
|
|
.tool-card-header{display:flex;align-items:center;gap:8px;padding:4px 10px;cursor:pointer;user-select:none;}
|
|
.tool-card-icon{font-size:13px;flex-shrink:0;opacity:.8;}
|
|
.tool-card-name{font-size:12px;font-weight:600;color:var(--muted);font-family:'SF Mono',ui-monospace,monospace;flex-shrink:0;}
|
|
.tool-card-preview{font-size:11px;color:var(--muted);opacity:.6;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.tool-card-toggle{font-size:10px;color:var(--muted);opacity:.5;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transform-origin:center;transition:transform .18s ease;will-change:transform;}
|
|
.tool-card.open .tool-card-toggle{transform:rotate(90deg);}
|
|
.tool-card-detail{display:block;max-height:0;opacity:0;overflow:hidden;border-top:1px solid transparent;padding:0 12px;transition:max-height .22s ease,opacity .18s ease,padding .22s ease,border-top-color .22s ease;}
|
|
.tool-card.open .tool-card-detail{max-height:520px;opacity:1;padding:8px 12px;border-top-color:rgba(255,255,255,.06);}
|
|
.tool-card-args{margin-bottom:6px;}
|
|
.tool-card-args div{font-size:11px;line-height:1.6;}
|
|
.tool-arg-key{color:var(--blue);font-family:'SF Mono',ui-monospace,monospace;font-size:11px;}
|
|
.tool-arg-val{color:var(--muted);font-family:'SF Mono',ui-monospace,monospace;font-size:11px;word-break:break-all;}
|
|
.tool-card-result pre{font-size:11px;color:var(--muted);font-family:'SF Mono',ui-monospace,monospace;white-space:pre-wrap;word-break:break-word;max-height:180px;overflow-y:auto;margin:0;line-height:1.55;}
|
|
|
|
/* ── Manual compression cards (transient transcript-local feedback) ── */
|
|
.live-compression-cards{
|
|
display:none;
|
|
max-width:800px;
|
|
width:100%;
|
|
margin:0 auto;
|
|
padding:0 24px;
|
|
}
|
|
.compression-block{
|
|
display:flex;
|
|
flex-direction:column;
|
|
width:100%;
|
|
}
|
|
.compression-turn{
|
|
width:100%;
|
|
}
|
|
.compression-turn-blocks{
|
|
display:flex;
|
|
flex-direction:column;
|
|
}
|
|
|
|
.compression-card-row{
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
.compression-card-row + .compression-card-row{
|
|
margin-top:4px;
|
|
}
|
|
.tool-card-compress-command{
|
|
background:rgba(201,168,76,.02);
|
|
border-color:rgba(201,168,76,.16);
|
|
}
|
|
.tool-card-compress-command .tool-card-name{
|
|
color:var(--gold);
|
|
font-weight:600;
|
|
}
|
|
.tool-card-compress-running{
|
|
background:rgba(124,185,255,.04);
|
|
border-color:rgba(124,185,255,.24);
|
|
}
|
|
.tool-card-compress-running .tool-card-name{
|
|
color:var(--blue);
|
|
}
|
|
.tool-card-compress-error{
|
|
background:rgba(248,113,113,.05);
|
|
border-color:rgba(248,113,113,.28);
|
|
}
|
|
.tool-card-compress-error .tool-card-name{
|
|
color:#fca5a5;
|
|
}
|
|
.tool-card-compress-complete{
|
|
background:rgba(78,201,132,.05);
|
|
border-color:rgba(78,201,132,.18);
|
|
}
|
|
.tool-card-compress-complete .tool-card-name{
|
|
color:#4ec984;
|
|
}
|
|
.tool-card-compress-reference{
|
|
background:rgba(124,185,255,.04);
|
|
border-color:rgba(124,185,255,.18);
|
|
}
|
|
.tool-card-compress-reference:hover{
|
|
border-color:rgba(124,185,255,.28);
|
|
}
|
|
.tool-card-compress-reference .tool-card-name{
|
|
color:var(--blue);
|
|
}
|
|
|
|
.compression-row{
|
|
margin:0 0 4px;
|
|
padding:0;
|
|
}
|
|
.compression-card{
|
|
margin-left:var(--msg-rail);
|
|
max-width:var(--msg-max);
|
|
border-radius:8px;
|
|
overflow:hidden;
|
|
background:rgba(255,255,255,.03);
|
|
border:1px solid rgba(255,255,255,.08);
|
|
}
|
|
.compression-card-header{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
padding:5px 10px;
|
|
user-select:none;
|
|
}
|
|
.compression-card-icon{
|
|
font-size:13px;
|
|
flex-shrink:0;
|
|
opacity:.82;
|
|
}
|
|
.compression-card-bubbles{
|
|
display:inline-flex;
|
|
gap:3px;
|
|
align-items:center;
|
|
flex-shrink:0;
|
|
}
|
|
.compression-card-bubbles span{
|
|
width:5px;
|
|
height:5px;
|
|
border-radius:50%;
|
|
background:var(--blue);
|
|
opacity:.45;
|
|
animation:compressionPulse 1.05s ease-in-out infinite;
|
|
}
|
|
.compression-card-bubbles span:nth-child(2){animation-delay:.14s;}
|
|
.compression-card-bubbles span:nth-child(3){animation-delay:.28s;}
|
|
@keyframes compressionPulse{
|
|
0%,80%,100%{transform:translateY(0);opacity:.35;}
|
|
40%{transform:translateY(-1px);opacity:1;}
|
|
}
|
|
.compression-card-label{
|
|
font-size:11px;
|
|
font-weight:700;
|
|
font-family:'SF Mono',ui-monospace,monospace;
|
|
letter-spacing:.03em;
|
|
color:var(--muted);
|
|
flex-shrink:0;
|
|
}
|
|
.compression-card-command{
|
|
font-size:11px;
|
|
color:var(--text);
|
|
font-family:'SF Mono',ui-monospace,monospace;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
flex:1;
|
|
}
|
|
.compression-card-body{
|
|
padding:0 12px 8px 40px;
|
|
font-size:11px;
|
|
line-height:1.55;
|
|
color:var(--muted);
|
|
}
|
|
.compression-card-body .compression-note{
|
|
display:block;
|
|
margin-top:2px;
|
|
opacity:.82;
|
|
}
|
|
.compression-card-command-row{
|
|
border-color:rgba(201,168,76,.22);
|
|
background:rgba(201,168,76,.04);
|
|
}
|
|
.compression-card-command-row .compression-card-label{color:var(--gold);}
|
|
.compression-card-running-row{
|
|
border-color:rgba(124,185,255,.24);
|
|
background:rgba(124,185,255,.04);
|
|
}
|
|
.compression-card-running-row .compression-card-label{color:var(--blue);}
|
|
.compression-card-error-row{
|
|
border-color:rgba(248,113,113,.28);
|
|
background:rgba(248,113,113,.05);
|
|
}
|
|
.compression-card-error-row .compression-card-label{color:#fca5a5;}
|
|
.compression-card-focus{
|
|
margin-top:3px;
|
|
opacity:.85;
|
|
}
|
|
.compression-card-focus .compression-card-focus-label{
|
|
color:var(--muted);
|
|
font-family:'SF Mono',ui-monospace,monospace;
|
|
}
|
|
.compression-card-error-body{
|
|
color:#fecaca;
|
|
}
|
|
.compression-reference-row{
|
|
margin-top:0;
|
|
}
|
|
.compression-reference-card{
|
|
margin-left:var(--msg-rail);
|
|
max-width:var(--msg-max);
|
|
border-radius:8px;
|
|
overflow:hidden;
|
|
background:rgba(124,185,255,.04);
|
|
border:1px solid rgba(124,185,255,.18);
|
|
transition:border-color .15s, background .15s;
|
|
}
|
|
.compression-reference-card:hover{border-color:rgba(124,185,255,.28);}
|
|
.compression-reference-header{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
padding:5px 10px;
|
|
cursor:pointer;
|
|
user-select:none;
|
|
}
|
|
.compression-reference-icon{
|
|
font-size:13px;
|
|
flex-shrink:0;
|
|
opacity:.82;
|
|
color:var(--blue);
|
|
}
|
|
.compression-reference-label,
|
|
.compression-reference-kind{
|
|
font-size:11px;
|
|
font-weight:700;
|
|
font-family:'SF Mono',ui-monospace,monospace;
|
|
letter-spacing:.03em;
|
|
flex-shrink:0;
|
|
white-space:nowrap;
|
|
}
|
|
.compression-reference-label{color:var(--blue);}
|
|
.compression-reference-kind{color:var(--gold);}
|
|
.compression-reference-preview{
|
|
font-size:11px;
|
|
color:var(--muted);
|
|
opacity:.72;
|
|
flex:1;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.compression-reference-toggle{
|
|
font-size:10px;
|
|
color:var(--muted);
|
|
opacity:.55;
|
|
flex-shrink:0;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
transform-origin:center;
|
|
transition:transform .18s ease;
|
|
}
|
|
.compression-reference-card.open .compression-reference-toggle{
|
|
transform:rotate(90deg);
|
|
}
|
|
.compression-reference-copy{
|
|
flex-shrink:0;
|
|
opacity:.65;
|
|
}
|
|
.compression-reference-body{
|
|
display:block;
|
|
max-height:0;
|
|
opacity:0;
|
|
overflow:hidden;
|
|
padding:0 12px;
|
|
transition:max-height .22s ease, opacity .18s ease, padding .22s ease, border-top-color .22s ease;
|
|
border-top:1px solid transparent;
|
|
}
|
|
.compression-reference-card.open .compression-reference-body{
|
|
max-height:none;
|
|
overflow:visible;
|
|
opacity:1;
|
|
padding:8px 12px 10px;
|
|
border-top-color:rgba(124,185,255,.1);
|
|
}
|
|
.compression-reference-body pre{
|
|
margin:0;
|
|
font-family:'SF Mono',ui-monospace,monospace;
|
|
font-size:11px;
|
|
line-height:1.55;
|
|
white-space:pre-wrap;
|
|
word-break:break-word;
|
|
color:var(--muted);
|
|
}
|
|
|
|
.compression-complete-card{
|
|
background:rgba(78,201,132,.05);
|
|
border:1px solid rgba(78,201,132,.18);
|
|
border-radius:8px;
|
|
padding:0;
|
|
margin-left:var(--msg-rail);
|
|
max-width:var(--msg-max);
|
|
transition:border-color .15s, background .15s;
|
|
}
|
|
.compression-complete-card:hover{
|
|
border-color:rgba(78,201,132,.3);
|
|
background:rgba(78,201,132,.07);
|
|
}
|
|
.compression-complete-header{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
padding:5px 10px;
|
|
cursor:pointer;
|
|
user-select:none;
|
|
color:#4ec984;
|
|
font-size:12px;
|
|
font-weight:600;
|
|
opacity:.88;
|
|
}
|
|
.compression-complete-header:hover{opacity:1;}
|
|
.compression-complete-icon{opacity:.78;flex-shrink:0;}
|
|
.compression-complete-label{
|
|
font-size:11px;
|
|
font-weight:700;
|
|
font-family:'SF Mono',ui-monospace,monospace;
|
|
letter-spacing:.03em;
|
|
flex-shrink:0;
|
|
}
|
|
.compression-complete-title{
|
|
flex:1;
|
|
min-width:0;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
color:var(--text);
|
|
font-family:'SF Mono',ui-monospace,monospace;
|
|
font-size:11px;
|
|
}
|
|
.compression-complete-toggle{
|
|
margin-left:auto;
|
|
font-size:10px;
|
|
color:var(--muted);
|
|
opacity:.55;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
transform-origin:center;
|
|
transition:transform .18s ease;
|
|
}
|
|
.compression-complete-card.open .compression-complete-toggle{
|
|
transform:rotate(90deg);
|
|
}
|
|
.compression-complete-body{
|
|
max-height:0;
|
|
opacity:0;
|
|
overflow:hidden;
|
|
padding:0 12px;
|
|
border-top:1px solid transparent;
|
|
transition:max-height .22s ease, opacity .18s ease, padding .22s ease, border-top-color .22s ease;
|
|
color:var(--muted);
|
|
font-size:11px;
|
|
line-height:1.55;
|
|
}
|
|
.compression-complete-card.open .compression-complete-body{
|
|
max-height:220px;
|
|
opacity:1;
|
|
padding:8px 12px;
|
|
border-top-color:rgba(78,201,132,.12);
|
|
}
|
|
|
|
/* ── Scrollbar polish ── */
|
|
::-webkit-scrollbar{width:5px;height:5px;}
|
|
::-webkit-scrollbar-track{background:transparent;}
|
|
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px;}
|
|
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);}
|
|
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
|
|
|
|
/* ── Settings view (rail cog → sidebar menu + main pane) ── */
|
|
/* --border-subtle: used inside cards for softer dividers than the
|
|
outer --border; resolves cleanly in both light+dark via color-mix. */
|
|
:root{--border-subtle:color-mix(in srgb, var(--border) 60%, transparent);}
|
|
:root.dark{--border-subtle:color-mix(in srgb, var(--border) 60%, transparent);}
|
|
/* ── Generalized main-view switching ──
|
|
<main class="main"> holds multiple sibling #main* containers (one per view).
|
|
Exactly one is visible at a time; chat is the default when no showing-*
|
|
class is set. Adding a new view needs: a #main<Name> sibling with
|
|
class="main-view", inclusion in the hidden-by-default list, and a
|
|
main.main.showing-<name> > #main<Name> { display:flex } rule. */
|
|
.main-view{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;background:var(--bg);}
|
|
main.main > #mainChat,
|
|
main.main > #mainSettings,
|
|
main.main > #mainSkills,
|
|
main.main > #mainMemory,
|
|
main.main > #mainTasks,
|
|
main.main > #mainWorkspaces,
|
|
main.main > #mainProfiles{display:none;}
|
|
main.main:not(.showing-settings):not(.showing-skills):not(.showing-memory):not(.showing-tasks):not(.showing-workspaces):not(.showing-profiles) > #mainChat{display:flex;}
|
|
main.main.showing-settings > #mainSettings{display:flex;overflow-y:auto;}
|
|
main.main.showing-skills > #mainSkills{display:flex;}
|
|
main.main.showing-memory > #mainMemory{display:flex;}
|
|
main.main.showing-tasks > #mainTasks{display:flex;}
|
|
main.main.showing-workspaces > #mainWorkspaces{display:flex;}
|
|
main.main.showing-profiles > #mainProfiles{display:flex;}
|
|
#mainSettings{overflow-y:auto;}
|
|
|
|
/* Sidebar menu (lives in the left sidebar under the cog panel) */
|
|
.panel-view#panelSettings{gap:0;padding:0;}
|
|
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:41px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;flex-shrink:0;}
|
|
.panel-head-actions{display:flex;align-items:center;gap:4px;text-transform:none;letter-spacing:normal;}
|
|
.panel-head-btn{width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:6px;color:var(--muted);cursor:pointer;transition:background .15s,color .15s;flex-shrink:0;}
|
|
.panel-head-btn:hover{background:var(--accent-bg);color:var(--accent-text);}
|
|
.panel-head-btn svg{width:14px;height:14px;display:block;}
|
|
.panel-head-sub{padding:6px 12px 8px;font-size:11px;color:var(--muted);flex-shrink:0;}
|
|
.side-menu{display:flex;flex-direction:column;gap:2px;padding:8px;overflow-y:auto;}
|
|
.side-menu-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;border:none;background:transparent;color:var(--text);cursor:pointer;text-align:left;font-size:13px;font-weight:500;transition:background .15s,color .15s;width:100%;}
|
|
.side-menu-item:hover{background:var(--surface);}
|
|
.side-menu-item.active{background:var(--accent-bg);color:var(--accent-text);}
|
|
.side-menu-item.active svg{color:var(--accent-text);}
|
|
.side-menu-item svg{flex-shrink:0;width:16px;height:16px;opacity:.9;}
|
|
|
|
/* Main canvas: centered, comfortable max-width */
|
|
.settings-main{padding:24px;max-width:768px;width:100%;margin:0 auto;min-width:0;}
|
|
.settings-pane{display:none;}
|
|
.settings-pane.active{display:block;}
|
|
|
|
/* Page-style section header (title + subtitle + optional badge). */
|
|
.settings-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border);}
|
|
.settings-section-title{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--text);line-height:1.3;margin-bottom:4px;}
|
|
.settings-section-meta{font-size:13px;color:var(--muted);line-height:1.55;}
|
|
.settings-version-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:600;font-family:'SF Mono',ui-monospace,SFMono-Regular,Menlo,monospace;flex-shrink:0;align-self:flex-start;letter-spacing:.02em;}
|
|
#checkUpdatesBlock{display:inline-flex;align-items:center;gap:6px;font-size:12px;flex-shrink:0;align-self:flex-start;}
|
|
#checkUpdatesBlock .btn-tiny{padding:4px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:11px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:border-color .15s,color .15s;}
|
|
#checkUpdatesBlock .btn-tiny:hover{border-color:var(--accent);color:var(--accent);}
|
|
#checkUpdatesBlock .btn-tiny:disabled{opacity:.5;cursor:default;}
|
|
#checkUpdatesBlock .btn-tiny .spinner-xs{width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--text);border-radius:50%;animation:spin .6s linear infinite;display:none;}
|
|
#checkUpdatesStatus{font-size:11px;font-weight:500;white-space:nowrap;}
|
|
|
|
/* Each logical form row is a card surface. Stack with comfortable gap. */
|
|
#mainSettings .settings-field{margin-bottom:12px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--sidebar);}
|
|
#mainSettings .settings-field:last-of-type{margin-bottom:16px;}
|
|
#mainSettings .settings-field > label{display:block;font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--muted);margin-bottom:6px;}
|
|
/* Checkbox rows use inline flex labels — don't turn them into stacked caps */
|
|
#mainSettings .settings-field > label[style*="display:flex"]{color:var(--text);font-size:13px;font-weight:500;margin-bottom:0;}
|
|
#mainSettings .settings-field > div[style*="color:var(--muted)"],
|
|
#mainSettings .settings-field > div[style*="color: var(--muted)"]{font-size:12px;color:var(--muted);line-height:1.5;}
|
|
|
|
/* Selects & text/password inputs — uniform. Uses !important to win
|
|
over legacy inline styles that were written for the modal era. */
|
|
#mainSettings select,
|
|
#mainSettings input[type="text"],
|
|
#mainSettings input[type="password"]{
|
|
background:var(--bg)!important;
|
|
color:var(--text)!important;
|
|
border:1px solid var(--border)!important;
|
|
border-radius:8px!important;
|
|
padding:8px 12px!important;
|
|
font-size:13px!important;
|
|
width:100%;
|
|
transition:border-color .15s,box-shadow .15s;
|
|
}
|
|
#mainSettings select:focus,
|
|
#mainSettings input[type="text"]:focus,
|
|
#mainSettings input[type="password"]:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-bg);outline:none;}
|
|
#mainSettings input:disabled,
|
|
#mainSettings select:disabled{opacity:.6;cursor:not-allowed;}
|
|
|
|
/* Quick-action grid in Conversation pane — outlined card buttons. */
|
|
.hermes-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px;}
|
|
.settings-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--sidebar);color:var(--text);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
|
|
.settings-action-btn:hover{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--accent-text);}
|
|
.settings-action-btn.danger{color:var(--error,#e05);border-color:color-mix(in srgb,var(--error,#e05) 30%,transparent);}
|
|
.settings-action-btn.danger:hover{background:color-mix(in srgb,var(--error,#e05) 8%,transparent);border-color:var(--error,#e05);color:var(--error,#e05);}
|
|
.settings-action-btn:disabled,.settings-action-btn.disabled{opacity:.45;cursor:not-allowed;}
|
|
.settings-action-btn:disabled:hover,.settings-action-btn.disabled:hover{background:var(--sidebar);border-color:var(--border);color:var(--text);}
|
|
|
|
/* Primary save buttons (Appearance / Preferences "Save Settings"). */
|
|
#mainSettings .settings-btn,
|
|
#mainSettings .sm-btn[onclick^="saveSettings"]{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:8px;padding:9px 16px;cursor:pointer;font-weight:600;font-size:13px;transition:background .15s,border-color .15s,opacity .15s;}
|
|
#mainSettings .settings-btn:hover,
|
|
#mainSettings .sm-btn[onclick^="saveSettings"]:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
|
|
|
|
/* Secondary sm-btn fallback (Sign out / Disable auth) — neutral outline. */
|
|
#mainSettings .sm-btn{border-radius:8px;padding:9px 16px;font-weight:600;font-size:13px;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:background .15s,border-color .15s;}
|
|
#mainSettings .sm-btn:hover{background:var(--accent-bg);border-color:var(--accent-bg-strong);}
|
|
/* Neutralise legacy inline accent tints so secondary buttons stay theme-safe */
|
|
#mainSettings #btnDisableAuth[style],
|
|
#mainSettings #btnSignOut[style]{color:var(--text)!important;border-color:var(--border)!important;}
|
|
#mainSettings #btnDisableAuth:hover,
|
|
#mainSettings #btnSignOut:hover{color:var(--accent-text)!important;border-color:var(--accent-bg-strong)!important;}
|
|
|
|
/* Picker grids (theme / skin / font-size): make the card chrome use
|
|
tokens so all skins flip correctly. */
|
|
#mainSettings .theme-pick-btn,
|
|
#mainSettings .skin-pick-btn,
|
|
#mainSettings .font-size-pick-btn{background:var(--bg)!important;border-color:var(--border)!important;}
|
|
#mainSettings .theme-pick-btn:hover,
|
|
#mainSettings .skin-pick-btn:hover,
|
|
#mainSettings .font-size-pick-btn:hover{border-color:var(--accent-bg-strong)!important;background:var(--surface)!important;}
|
|
|
|
/* Responsive: tighten canvas on small screens. */
|
|
@media (max-width: 768px){
|
|
.settings-main{padding:16px 12px;}
|
|
.settings-section-title{font-size:16px;}
|
|
.hermes-action-grid{grid-template-columns:1fr;}
|
|
#mainSettings .settings-field{padding:14px;}
|
|
}
|
|
|
|
/* ── Provider cards (Settings → Providers) ──
|
|
Matches hermes-desktop LLM Providers panel. Card uses --sidebar (surface-1),
|
|
hover rows use --surface (surface-2). Body divider uses a subtle tint. */
|
|
#providersList{gap:12px;}
|
|
.provider-card{
|
|
border:1px solid var(--border);
|
|
border-radius:12px;
|
|
background:var(--sidebar);
|
|
overflow:hidden;
|
|
margin-bottom:12px;
|
|
transition:border-color .15s ease;
|
|
}
|
|
.provider-card:last-child{margin-bottom:0;}
|
|
.provider-card-header{
|
|
display:flex;align-items:center;gap:12px;
|
|
width:100%;
|
|
padding:12px 16px;
|
|
background:transparent;border:0;
|
|
color:var(--text);
|
|
text-align:left;cursor:pointer;
|
|
font:inherit;
|
|
transition:background .15s ease;
|
|
}
|
|
.provider-card-header:hover{background:var(--surface);}
|
|
.provider-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
|
|
.provider-card-name{font-size:13px;font-weight:500;color:var(--text);line-height:1.2;}
|
|
.provider-card-meta{font-size:11px;color:var(--muted);line-height:1.2;opacity:.82;}
|
|
.provider-card-badge{
|
|
flex-shrink:0;
|
|
font-size:10.5px;font-weight:500;
|
|
padding:2px 8px;border-radius:999px;
|
|
/* Literal tailwind green-500/10 + green-600 to match desktop reference */
|
|
background:rgba(34,197,94,.12);
|
|
color:#16a34a;
|
|
letter-spacing:.01em;
|
|
}
|
|
:root.dark .provider-card-badge{background:rgba(34,197,94,.16);color:#4ade80;}
|
|
.provider-card-chevron{
|
|
flex-shrink:0;color:var(--muted);
|
|
transition:transform .2s ease;
|
|
}
|
|
.provider-card.open .provider-card-chevron{transform:rotate(180deg);}
|
|
.provider-card-body{
|
|
display:none;
|
|
padding:12px 16px 16px;
|
|
border-top:1px solid color-mix(in srgb, var(--border) 55%, transparent);
|
|
}
|
|
.provider-card.open .provider-card-body{display:block;}
|
|
.provider-card-hint{font-size:12px;color:var(--muted);line-height:1.4;}
|
|
.provider-card-field{display:flex;flex-direction:column;gap:6px;}
|
|
.provider-card-label{
|
|
font-size:11px;font-weight:500;color:var(--muted);
|
|
letter-spacing:.02em;
|
|
}
|
|
.provider-card-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
|
|
.provider-card-input{
|
|
flex:1;min-width:160px;
|
|
padding:8px 10px;
|
|
background:var(--surface);
|
|
color:var(--text);
|
|
border:1px solid var(--border);
|
|
border-radius:8px;
|
|
font-size:12px;
|
|
font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
|
|
outline:none;
|
|
transition:border-color .15s ease, box-shadow .15s ease;
|
|
}
|
|
.provider-card-input:focus{
|
|
border-color:var(--accent);
|
|
box-shadow:0 0 0 3px var(--focus-ring);
|
|
}
|
|
.provider-card-btn{
|
|
padding:7px 12px;
|
|
font-size:12px;font-weight:500;
|
|
border-radius:8px;
|
|
border:1px solid transparent;
|
|
background:var(--surface);
|
|
color:var(--text);
|
|
cursor:pointer;white-space:nowrap;
|
|
transition:background .15s ease, color .15s ease, border-color .15s ease;
|
|
}
|
|
.provider-card-btn:hover{background:var(--hover-bg);}
|
|
.provider-card-btn:disabled{opacity:.45;cursor:not-allowed;}
|
|
.provider-card-btn-ghost{background:var(--surface);}
|
|
.provider-card-btn-primary{
|
|
background:var(--accent);
|
|
border-color:var(--accent);
|
|
color:#fff;
|
|
}
|
|
:root.dark .provider-card-btn-primary{color:#0D0D1A;}
|
|
.provider-card-btn-primary:hover:not(:disabled){
|
|
background:var(--accent-hover);
|
|
border-color:var(--accent-hover);
|
|
}
|
|
.provider-card-btn-danger{
|
|
color:var(--error);
|
|
background:transparent;
|
|
}
|
|
.provider-card-btn-danger:hover{
|
|
background:color-mix(in srgb, var(--error) 10%, transparent);
|
|
}
|
|
|
|
/* ── Session pin indicator (inline, only when pinned) ── */
|
|
.session-pin-indicator{
|
|
flex-shrink:0;
|
|
width:10px;
|
|
height:10px;
|
|
color:var(--accent);
|
|
line-height:1;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
}
|
|
.session-pin-indicator svg{width:10px;height:10px;}
|
|
|
|
/* ── Cron alert badge ── */
|
|
.cron-badge{position:absolute;top:2px;right:2px;background:#e53e3e;color:#fff;font-size:9px;font-weight:700;min-width:14px;height:14px;line-height:14px;text-align:center;border-radius:7px;padding:0 3px;}
|
|
|
|
/* ── Background error banner ── */
|
|
/* ── Archived sessions ── */
|
|
.session-item.archived{opacity:.5;}
|
|
.session-item.archived .session-title{font-style:italic;}
|
|
|
|
/* ── Session tags ── */
|
|
.session-tag{display:inline-block;font-size:9px;font-weight:600;padding:1px 5px;margin-left:4px;border-radius:3px;background:rgba(99,179,237,.2);color:#63b3ed;cursor:pointer;vertical-align:middle;}
|
|
.session-tag:hover{background:rgba(99,179,237,.35);}
|
|
|
|
/* ── File rename input ── */
|
|
.file-rename-input{background:rgba(255,255,255,.08);border:1px solid var(--accent);border-radius:4px;color:var(--text);font-size:12px;padding:1px 4px;width:100%;outline:none;min-width:0;}
|
|
|
|
/* ── Message timestamps ── */
|
|
.msg-time{font-size:10px;color:var(--muted);opacity:.6;margin-left:6px;}
|
|
.msg-role:hover .msg-time{opacity:1;}
|
|
|
|
/* ── Mermaid diagrams ── */
|
|
.mermaid-block{background:var(--code-bg);border-radius:8px;padding:16px;margin:8px 0;overflow-x:auto;}
|
|
.mermaid-rendered{background:transparent;padding:8px 0;}
|
|
.mermaid-rendered svg{max-width:100%;height:auto;}
|
|
|
|
/* ── Session projects ── */
|
|
.project-bar{display:flex;gap:4px;padding:4px 10px 8px;flex-wrap:wrap;align-items:center;flex-shrink:0;}
|
|
.project-chip{font-size:10px;font-weight:600;padding:3px 8px;border-radius:12px;cursor:pointer;border:1px solid var(--border2);background:var(--input-bg);color:var(--muted);transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}
|
|
.project-chip:hover{background:rgba(255,255,255,.08);color:var(--text);}
|
|
.project-chip.active{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-bg);}
|
|
.project-chip .color-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0;}
|
|
.project-create-btn{font-size:10px;padding:3px 6px;border-radius:12px;cursor:pointer;border:1px dashed var(--border2);background:none;color:var(--muted);opacity:.6;transition:all .15s;}
|
|
.project-create-btn:hover{opacity:1;border-color:var(--blue);color:var(--blue);}
|
|
.project-create-input{font-size:10px;padding:3px 8px;border-radius:12px;border:1px solid var(--accent-bg);background:var(--surface);color:var(--text);outline:none;width:100px;font-family:inherit;box-shadow:0 0 0 2px var(--accent-bg);}
|
|
.project-picker{position:absolute;right:0;top:100%;background:var(--sidebar);border:1px solid var(--border2);border-radius:8px;padding:4px;z-index:30;min-width:160px;max-width:220px;width:max-content;box-shadow:0 4px 16px rgba(0,0,0,.3);}
|
|
.project-picker-item{padding:5px 10px;font-size:11px;border-radius:6px;cursor:pointer;color:var(--muted);transition:all .1s;display:flex;align-items:center;gap:6px;}
|
|
.project-picker-item:hover{background:rgba(255,255,255,.08);color:var(--text);}
|
|
.project-picker-item.active{color:var(--blue);}
|
|
.project-picker-create{color:var(--blue);opacity:.7;border-top:1px solid var(--border2);margin-top:2px;padding-top:6px;}
|
|
.project-picker-create:hover{opacity:1;background:var(--accent-bg);}
|
|
.session-project-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;display:inline-block;margin-left:4px;vertical-align:middle;}
|
|
|
|
/* ── Code copy button ── */
|
|
.code-copy-btn{background:var(--hover-bg);border:1px solid var(--border2);border-radius:4px;color:var(--muted);font-size:11px;cursor:pointer;padding:2px 6px;transition:all .15s;line-height:1.3;}
|
|
.code-copy-btn:hover{background:rgba(255,255,255,.12);color:var(--text);}
|
|
|
|
/* ── Tool card expand/collapse toggle ── */
|
|
.tool-cards-toggle{margin:4px 0 2px 40px;display:flex;gap:8px;}
|
|
.tool-cards-toggle button{background:none;border:none;color:var(--blue);font-size:10px;cursor:pointer;opacity:.6;padding:0;}
|
|
.tool-cards-toggle button:hover{opacity:1;text-decoration:underline;}
|
|
|
|
/* ── Thinking/reasoning card: structural sub-selectors. ──
|
|
The canonical visual rules (background, border, padding, max-height,
|
|
etc.) live in the consolidated block further down (around line 1320).
|
|
Only sub-element selectors that the consolidated block doesn't cover
|
|
(label, toggle, rotate animation) are kept here. ── */
|
|
.thinking-card-label{font-weight:600;letter-spacing:.02em;}
|
|
.thinking-card-toggle{margin-left:auto;font-size:10px;display:inline-flex;align-items:center;justify-content:center;transform-origin:center;transition:transform .18s ease;will-change:transform;}
|
|
.thinking-card.open .thinking-card-toggle{transform:rotate(90deg);}
|
|
|
|
.bg-error-banner{background:rgba(229,62,62,.15);border:1px solid rgba(229,62,62,.3);color:#fca5a5;padding:8px 16px;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:0;}
|
|
|
|
/* ── CLI / Agent session items in sidebar ── */
|
|
.session-item.cli-session {
|
|
padding-right: 40px; /* make room for the session actions trigger */
|
|
}
|
|
.session-item.cli-session::after {
|
|
content: attr(data-source);
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: .04em;
|
|
color: var(--accent-text);
|
|
opacity: .5;
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
pointer-events: none; /* don't block clicks on session-actions beneath */
|
|
}
|
|
.session-item.cli-session:hover::after {
|
|
display: none; /* hide badge on hover so the session menu trigger stays clear */
|
|
}
|
|
.session-item.cli-session.menu-open::after {
|
|
display: none;
|
|
}
|
|
/* Source-specific colors for gateway sessions */
|
|
.session-item.cli-session[data-source="telegram"] { border-left-color: rgba(0, 136, 204, 0.55); }
|
|
.session-item.cli-session[data-source="telegram"]::after { color: rgba(0, 136, 204, 0.55); }
|
|
.session-item.cli-session[data-source="discord"] { border-left-color: #5865F2; }
|
|
.session-item.cli-session[data-source="discord"]::after { color: #5865F2; }
|
|
.session-item.cli-session[data-source="slack"] { border-left-color: #4A154B; }
|
|
.session-item.cli-session[data-source="slack"]::after { color: #4A154B; }
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════
|
|
Messages redesign — additive overrides for the transcript area.
|
|
Fixes the issues catalogued in docs/ui-ux/index.html:
|
|
• single indent rail (one var, one column)
|
|
• quieter thinking card (was louder than the answer)
|
|
• user-message bubble so user vs. assistant reads at a glance
|
|
• persistent affordances (timestamps, actions, usage always visible)
|
|
• unified widths (body + tool cards share one max)
|
|
• tamed inline-code colour (no longer outshouts links)
|
|
• streaming cursor at end of live assistant body
|
|
• [data-error="1"] marker for error bubbles
|
|
• .msg-date-sep for day-change separators
|
|
• tighter type scale (11/12/13/14/16 — no more 10/10.5/12.5)
|
|
═══════════════════════════════════════════════════════════════════ */
|
|
:root {
|
|
--msg-rail: 0;
|
|
--msg-max: 780px;
|
|
--user-bubble-bg: var(--accent);
|
|
--user-bubble-border: var(--accent-hover);
|
|
--user-bubble-text: #fff;
|
|
--user-bubble-placeholder: rgba(255,255,255,.7);
|
|
--user-selection-bg: rgba(0,0,0,.22);
|
|
--user-selection-text: #fff;
|
|
}
|
|
/* Dark mode: keep user bubbles dark; skin remains a tint via border/fill. */
|
|
:root.dark {
|
|
--user-bubble-bg: var(--accent-bg-strong);
|
|
--user-bubble-border: var(--accent-bg-strong);
|
|
--user-bubble-text: var(--text);
|
|
--user-bubble-placeholder: var(--muted);
|
|
--user-selection-bg: rgba(255,255,255,.18);
|
|
--user-selection-text: var(--text);
|
|
}
|
|
|
|
/* Inline code: stop shouting orange; inherit strong text colour instead */
|
|
.msg-body code { color: var(--strong); background: var(--code-inline-bg); font-size: 12.5px; }
|
|
|
|
/* ── Unified indent rail — every child of a turn lines up on --msg-rail ── */
|
|
.msg-row { padding: 12px 0; }
|
|
.msg-body { padding-left: var(--msg-rail); padding-top: 8px; max-width: var(--msg-max); }
|
|
.msg-body:empty { display: none; }
|
|
.assistant-turn { width: 100%; }
|
|
.assistant-turn-blocks { display: flex; flex-direction: column; }
|
|
.assistant-segment-anchor { display: none; }
|
|
|
|
/* ── Classic conversation layout: user right, half-width; assistant left ── */
|
|
.msg-row[data-role="user"] { align-self: flex-end; max-width: 60%; }
|
|
@media (max-width: 900px) { .msg-row[data-role="user"] { max-width: 78%; } }
|
|
@media (max-width: 600px) { .msg-row[data-role="user"] { max-width: 90%; } }
|
|
/* Hide the entire "empty tool-anchor" assistant row (content='' with
|
|
tool_calls). renderMessages keeps it in the DOM so tool cards can anchor
|
|
to it, but visually it adds a ghost "Hermes" header above the tool cards.
|
|
With the row hidden the transition from live → settled on 'done' is
|
|
seamless. */
|
|
.msg-row[data-role="assistant"]:has(.msg-body:empty) { padding: 0; margin: 0; }
|
|
.msg-row[data-role="assistant"]:has(.msg-body:empty) .msg-role,
|
|
.msg-row[data-role="assistant"]:has(.msg-body:empty) .msg-files { display: none; }
|
|
.msg-files { padding-left: var(--msg-rail); }
|
|
.msg-usage { padding-left: var(--msg-rail); opacity: 1; margin-top: 6px; font-size: 11px; }
|
|
.tool-card { margin-left: var(--msg-rail); max-width: var(--msg-max); }
|
|
.thinking-card { margin-left: var(--msg-rail); max-width: var(--msg-max); }
|
|
.tool-cards-toggle { margin-left: var(--msg-rail); }
|
|
.msg-row[data-editing="1"] { width: 100%; }
|
|
.msg-row[data-editing="1"] .msg-edit-area,
|
|
.msg-row[data-editing="1"] .msg-edit-bar { margin-left: var(--msg-rail); }
|
|
|
|
/* Quieter, always-visible role header (smaller avatar, always-visible timestamp) */
|
|
.msg-role { font-size: 11px; font-weight: 500; margin-bottom: 6px; opacity: .8; letter-spacing: 0; }
|
|
.msg-role:hover { opacity: 1; }
|
|
.role-icon { width: 20px; height: 20px; font-size: 9px; }
|
|
.msg-time { opacity: .65; font-size: 10px; }
|
|
.msg-role:hover .msg-time { opacity: 1; }
|
|
|
|
/* Persistent action toolbar: subtle at rest, full on hover */
|
|
.msg-actions { opacity: .25; }
|
|
.msg-row:hover .msg-actions { opacity: 1; }
|
|
.assistant-turn:hover .msg-actions { opacity: 1; }
|
|
|
|
/* ── User message: right-aligned bubble; no avatar/label — position identifies sender ── */
|
|
.msg-row[data-role="user"] .msg-body {
|
|
background: var(--user-bubble-bg);
|
|
border: 1px solid var(--user-bubble-border);
|
|
border-radius: 14px;
|
|
padding: 10px 14px;
|
|
margin-left: 0;
|
|
padding-left: 14px;
|
|
max-width: none;
|
|
color: var(--user-bubble-text);
|
|
}
|
|
.msg-row[data-role="user"] .msg-body::selection,
|
|
.msg-row[data-role="user"] .msg-body *::selection {
|
|
background: var(--user-selection-bg);
|
|
color: var(--user-selection-text);
|
|
}
|
|
.msg-row[data-role="user"] .msg-body::-moz-selection,
|
|
.msg-row[data-role="user"] .msg-body *::-moz-selection {
|
|
background: var(--user-selection-bg);
|
|
color: var(--user-selection-text);
|
|
}
|
|
.msg-row[data-role="user"] .msg-body code { color: var(--user-bubble-text); background: rgba(0,0,0,.1); }
|
|
.msg-row[data-role="user"] .msg-body a { color: var(--user-bubble-text); text-decoration: underline; }
|
|
.msg-row[data-role="user"] .msg-files { padding-left: 0; margin-left: 0; justify-content: flex-end; }
|
|
.msg-row[data-role="user"][data-editing="1"] .msg-edit-area { background: var(--user-bubble-bg); border-color: var(--user-bubble-border); color: var(--user-bubble-text); box-shadow: 0 0 0 3px var(--focus-ring); }
|
|
.msg-row[data-role="user"][data-editing="1"] .msg-edit-area::placeholder { color: var(--user-bubble-placeholder); }
|
|
|
|
/* Turn boundary: right alignment already separates user turns — keep only vertical spacing */
|
|
.msg-row + .msg-row[data-role="user"] {
|
|
border-top: none;
|
|
margin-top: 10px;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
/* ── Message footer: actions (and user timestamp) sit below the bubble ── */
|
|
.msg-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
margin-top: 4px;
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
.msg-foot .msg-actions { opacity: 1; margin-left: 0; }
|
|
.msg-foot .msg-time { font-size: 10.5px; opacity: .75; }
|
|
.msg-foot-with-usage {
|
|
justify-content: flex-start;
|
|
gap: 8px;
|
|
}
|
|
.msg-usage-inline {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
opacity: .7;
|
|
flex: 0 0 auto;
|
|
}
|
|
.msg-foot-with-usage .msg-time,
|
|
.msg-foot-with-usage .msg-actions {
|
|
opacity: 0;
|
|
transition: opacity .15s;
|
|
}
|
|
.msg-foot-with-usage .msg-time {
|
|
margin-left: 4px;
|
|
}
|
|
.msg-foot-with-usage .msg-actions {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
/* User footer: visible only on row hover (bubble identifies sender without needing persistent chrome) */
|
|
.msg-row[data-role="user"] .msg-foot {
|
|
opacity: 0;
|
|
transition: opacity .15s;
|
|
padding-right: 2px;
|
|
}
|
|
.msg-row[data-role="user"]:hover .msg-foot,
|
|
.msg-row[data-role="user"]:focus-within .msg-foot { opacity: 1; }
|
|
|
|
/* Assistant footer: left-aligned under the body rail, subtle at rest */
|
|
.msg-row[data-role="assistant"] .msg-foot,
|
|
.assistant-turn .msg-foot {
|
|
justify-content: flex-start;
|
|
padding-left: var(--msg-rail);
|
|
max-width: var(--msg-max);
|
|
opacity: 0;
|
|
transition: opacity .15s;
|
|
}
|
|
.msg-row[data-role="assistant"]:hover .msg-foot,
|
|
.assistant-turn:hover .msg-foot,
|
|
.assistant-turn:focus-within .msg-foot { opacity: 1; }
|
|
.assistant-turn .msg-foot-with-usage,
|
|
.msg-row[data-role="assistant"] .msg-foot-with-usage {
|
|
opacity: 1;
|
|
}
|
|
.assistant-turn:hover .msg-foot-with-usage .msg-time,
|
|
.assistant-turn:hover .msg-foot-with-usage .msg-actions,
|
|
.assistant-turn:focus-within .msg-foot-with-usage .msg-time,
|
|
.assistant-turn:focus-within .msg-foot-with-usage .msg-actions,
|
|
.msg-row[data-role="assistant"]:hover .msg-foot-with-usage .msg-time,
|
|
.msg-row[data-role="assistant"]:hover .msg-foot-with-usage .msg-actions {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Hide footer while editing to keep the edit bar the only footer-level affordance */
|
|
.msg-row[data-editing="1"] .msg-foot { display: none; }
|
|
|
|
/* Empty tool-anchor rows: hide footer alongside role/files so the row stays invisible */
|
|
.msg-row[data-role="assistant"]:has(.msg-body:empty) .msg-foot { display: none; }
|
|
|
|
/* ── Thinking card: quieter than before (no background panel) but still
|
|
clearly a gold-accented affordance so users know it's collapsible. ── */
|
|
.thinking-card {
|
|
background: var(--accent-bg);
|
|
border: 1px solid var(--accent-bg-strong);
|
|
border-radius: 8px;
|
|
padding: 0;
|
|
margin: 3px 0 3px var(--msg-rail);
|
|
transition: border-color .15s, background .15s;
|
|
}
|
|
.thinking-card:hover {
|
|
border-color: var(--accent-hover);
|
|
background: var(--accent-bg);
|
|
}
|
|
.thinking-card-header { display:flex; align-items:center; gap:8px; padding: 5px 10px; color: var(--accent-text); font-size: 12px; font-weight: 600; opacity: .85; }
|
|
.thinking-card-header:hover { opacity: 1; }
|
|
.thinking-card-icon { opacity: .7; }
|
|
.thinking-card-body {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
padding: 0 12px;
|
|
border-top: 1px solid transparent;
|
|
transition: max-height .22s ease, opacity .18s ease, padding .22s ease, border-top-color .22s ease;
|
|
}
|
|
.thinking-card.open .thinking-card-body { max-height: 260px; overflow-y: auto; opacity: 1; padding: 8px 12px; border-top-color: var(--accent-bg-strong); }
|
|
.thinking-card-body pre { font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; word-break: break-word; margin: 0; }
|
|
|
|
/* ── Tool cards: tighter chrome to match quieter thinking card ── */
|
|
.tool-card { border-radius: 8px; margin-top: 3px; margin-bottom: 3px; }
|
|
.tool-card-header { padding: 5px 10px; }
|
|
.tool-card-name { font-size: 11px; }
|
|
.tool-card-preview { font-size: 11px; }
|
|
|
|
/* ── Streaming cursor at the end of the live assistant body ── */
|
|
@keyframes hermes-cursor-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
|
|
#toolRunningRow { margin-top: 10px; }
|
|
[data-live-assistant="1"]:last-child .msg-body > :last-child::after,
|
|
[data-live-assistant="1"]:last-child .msg-body:not(:has(> *))::after {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 1em;
|
|
background: var(--blue);
|
|
border-radius: 1px;
|
|
margin-left: 3px;
|
|
vertical-align: -0.16em;
|
|
animation: hermes-cursor-blink 1.05s steps(2, start) infinite;
|
|
}
|
|
|
|
/* ── Error state: distinct red-accent card, not italic emphasis ── */
|
|
.msg-row[data-error="1"] .msg-body,
|
|
.assistant-segment[data-error="1"] .msg-body {
|
|
background: rgba(239,83,80,.06);
|
|
border: 1px solid rgba(239,83,80,.2);
|
|
border-left: 2px solid var(--accent);
|
|
border-radius: 8px;
|
|
padding: 10px 14px;
|
|
margin-left: var(--msg-rail);
|
|
max-width: calc(var(--msg-max) - 40px);
|
|
color: var(--text);
|
|
}
|
|
.msg-row[data-error="1"] .msg-body em,
|
|
.msg-row[data-error="1"] .msg-body p em,
|
|
.assistant-segment[data-error="1"] .msg-body em,
|
|
.assistant-segment[data-error="1"] .msg-body p em { font-style: normal; color: inherit; }
|
|
.msg-row[data-error="1"] .msg-role,
|
|
.assistant-segment[data-error="1"] .msg-role { color: var(--accent); opacity: 1; }
|
|
.msg-row[data-error="1"] .role-icon,
|
|
.assistant-segment[data-error="1"] .role-icon { background: rgba(239,83,80,.12); color: var(--error); border-color: var(--error); }
|
|
|
|
/* ── Day-change separator ── */
|
|
.msg-date-sep {
|
|
display: flex; align-items: center; gap: 10px;
|
|
margin: 22px 0 10px; padding: 0 var(--msg-rail);
|
|
color: var(--muted); font-size: 10px; font-weight: 600;
|
|
text-transform: uppercase; letter-spacing: .12em; opacity: .55;
|
|
}
|
|
.msg-date-sep::before, .msg-date-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
|
|
|
|
/* ── Widths: collapse messages-inner to match content column ── */
|
|
.messages-inner { max-width: var(--msg-max); }
|
|
@media (min-width: 1400px) { .messages-inner { max-width: calc(var(--msg-max) + 40px); } }
|
|
@media (min-width: 1800px) { .messages-inner { max-width: calc(var(--msg-max) + 80px); } }
|
|
|
|
@media (max-width: 700px) {
|
|
.msg-role { margin-bottom: 4px; }
|
|
.msg-row[data-role="user"] .msg-body { padding: 8px 12px; }
|
|
.msg-row[data-error="1"] .msg-body { padding: 8px 12px; }
|
|
}
|
|
|
|
/* ── Shared main-view tokens (used by #mainSkills, #mainTasks, #mainWorkspaces, #mainProfiles) ── */
|
|
.main-view-header{
|
|
display:flex;align-items:center;justify-content:space-between;gap:16px;
|
|
min-height:41px;padding:8px 32px;border-bottom:1px solid var(--border);
|
|
flex-shrink:0;background:var(--bg);position:relative;z-index:10;
|
|
}
|
|
.main-view-title{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--text);line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.main-view-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
|
|
.main-view-body{flex:1;min-height:0;overflow-y:auto;padding:24px 32px;}
|
|
.main-view-content{max-width:960px;margin:0 auto;width:100%;}
|
|
.main-view-empty{
|
|
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
|
|
gap:12px;padding:40px 24px;color:var(--muted);text-align:center;
|
|
}
|
|
.main-view-empty-icon{color:var(--muted);opacity:.35;}
|
|
.main-view-empty-title{font-size:18px;font-weight:600;color:var(--text);margin-top:4px;}
|
|
.main-view-empty-sub{font-size:13px;color:var(--muted);line-height:1.55;max-width:420px;}
|
|
|
|
/* Hide header title/actions entirely when empty state is active */
|
|
main.main > .main-view:not([id="mainChat"]):not([id="mainSettings"]) .main-view-header:has(.main-view-title:empty){display:none;}
|
|
|
|
/* Skill-file breadcrumb (shown when clicking a linked file) */
|
|
.skill-file-breadcrumb{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border-subtle,var(--border));}
|
|
.skill-file-back{font-size:12px;color:var(--accent-text);text-decoration:none;font-weight:500;}
|
|
.skill-file-back:hover{text-decoration:underline;}
|
|
.skill-file-path{font-size:12px;color:var(--muted);font-family:'SF Mono',ui-monospace,monospace;}
|
|
.skill-file-code{background:var(--sidebar);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:12px;overflow:auto;max-width:960px;margin:0 auto;}
|
|
|
|
@media(max-width:700px){
|
|
.main-view-header{padding:8px 16px;}
|
|
.main-view-body{padding:16px;}
|
|
}
|
|
|
|
/* ── Shared detail-card styling (cron / workspace / profile detail pages) ── */
|
|
.detail-card{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:16px 18px;margin-bottom:16px;}
|
|
.detail-card-title{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;}
|
|
.detail-row{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;align-items:flex-start;}
|
|
.detail-row:last-child{border-bottom:none;}
|
|
.detail-row-label{flex:0 0 140px;color:var(--muted);font-size:12px;}
|
|
.detail-row-value{flex:1;min-width:0;color:var(--text);word-break:break-word;}
|
|
.detail-row-value code{background:var(--sidebar);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:12px;font-family:'SF Mono',ui-monospace,monospace;}
|
|
.detail-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid var(--border);color:var(--muted);}
|
|
.detail-badge.active{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-bg-strong,var(--accent-bg));}
|
|
.detail-badge.ok{background:rgba(100,200,100,.12);color:rgba(100,200,100,.95);border-color:rgba(100,200,100,.3);}
|
|
.detail-badge.warn{background:rgba(220,140,60,.12);color:rgba(220,140,60,.95);border-color:rgba(220,140,60,.3);}
|
|
.detail-badge.err{background:rgba(220,80,80,.12);color:rgba(220,80,80,.95);border-color:rgba(220,80,80,.3);}
|
|
.detail-badge.running{background:rgba(59,130,246,.12);color:rgba(96,165,250,.95);border-color:rgba(96,165,250,.3);}
|
|
.detail-badge.running::before{content:'';display:inline-block;width:10px;height:10px;border:2px solid rgba(96,165,250,.4);border-top-color:rgba(96,165,250,.95);border-radius:50%;margin-right:6px;vertical-align:middle;animation:cron-spinner .6s linear infinite;}
|
|
@keyframes cron-spinner{to{transform:rotate(360deg);}}
|
|
.detail-prompt{background:var(--sidebar);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12px;white-space:pre-wrap;line-height:1.55;color:var(--text);font-family:'SF Mono',ui-monospace,monospace;max-height:240px;overflow-y:auto;}
|
|
.detail-run-item{border-top:1px solid var(--border);padding:8px 0;}
|
|
.detail-run-item:first-child{border-top:none;}
|
|
.detail-run-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:12px;color:var(--muted);}
|
|
.detail-run-body{display:none;margin-top:6px;font-size:12px;color:var(--muted);white-space:pre-wrap;line-height:1.5;max-height:260px;overflow-y:auto;background:var(--sidebar);border:1px solid var(--border);border-radius:6px;padding:8px 10px;}
|
|
.detail-run-item.open .detail-run-body{display:block;}
|
|
.cron-item.active,.ws-row.active,.profile-card.active{background:var(--accent-bg);}
|
|
.cron-item.active .cron-name,.ws-row.active .ws-row-name,.profile-card.active .profile-card-name{color:var(--accent-text);}
|
|
|
|
/* ── Shared in-main form (create/edit) for skills/tasks/workspaces/profiles ── */
|
|
.detail-form{display:flex;flex-direction:column;gap:14px;}
|
|
.detail-form-row{display:flex;flex-direction:column;gap:6px;}
|
|
.detail-form-row > label{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.01em;}
|
|
.detail-form-row input[type="text"],
|
|
.detail-form-row input[type="password"],
|
|
.detail-form-row input:not([type]),
|
|
.detail-form-row select,
|
|
.detail-form-row textarea{
|
|
width:100%;box-sizing:border-box;
|
|
background:var(--sidebar);border:1px solid var(--border);border-radius:8px;
|
|
color:var(--text);padding:9px 11px;font-size:13px;outline:none;
|
|
font-family:inherit;line-height:1.5;
|
|
transition:border-color .15s,background .15s;
|
|
}
|
|
.detail-form-row input[type="text"]:focus,
|
|
.detail-form-row input[type="password"]:focus,
|
|
.detail-form-row input:not([type]):focus,
|
|
.detail-form-row select:focus,
|
|
.detail-form-row textarea:focus{border-color:var(--accent,var(--accent-bg-strong,var(--border)));}
|
|
.detail-form-row input:disabled{opacity:.6;cursor:not-allowed;}
|
|
.detail-form-row textarea{resize:vertical;font-family:'SF Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;}
|
|
.detail-form-row .detail-form-hint{font-size:11px;color:var(--muted);line-height:1.5;}
|
|
.detail-form-row label.detail-form-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer;font-weight:400;}
|
|
.detail-form-row label.detail-form-check input{accent-color:var(--accent,var(--link));}
|
|
.detail-form-error{font-size:12px;color:var(--error,#e05);padding:8px 10px;border:1px solid color-mix(in srgb,var(--error,#e05) 35%,transparent);background:color-mix(in srgb,var(--error,#e05) 8%,transparent);border-radius:8px;line-height:1.5;}
|
|
.panel-head-btn.primary{background:var(--accent,var(--link));color:#fff;border:none;}
|
|
.panel-head-btn.primary:hover{background:var(--accent-hover,var(--accent,var(--link)));color:#fff;}
|
|
.panel-head-btn.primary svg{color:#fff;}
|
|
/* Skill-picker inside in-main forms reuses the sidebar styles but needs light tweaks */
|
|
.detail-form-row .skill-picker-wrap{position:relative;}
|
|
.detail-form-row .skill-picker-tags{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;}
|
|
|
|
/* Mobile: message controls always visible on touch screens (no hover available) */
|
|
@media(max-width:640px){
|
|
.msg-row[data-role="user"] .msg-foot,
|
|
.msg-row[data-role="assistant"] .msg-foot,
|
|
.assistant-turn .msg-foot{opacity:1;}
|
|
.msg-actions{opacity:1;}
|
|
}
|
|
|
|
/* ── /btw ephemeral side-question bubble ── */
|
|
.msg-row-btw {
|
|
border-left: 3px solid var(--accent-bg-strong);
|
|
border-radius: 8px;
|
|
background: var(--accent-bg);
|
|
margin: 6px 0 6px var(--msg-rail);
|
|
padding: 8px 12px;
|
|
}
|
|
.msg-row-btw .msg-body { font-size: 14px; line-height: 1.75; }
|
|
.msg-btw-label {
|
|
font-size: 11px;
|
|
font-style: italic;
|
|
color: var(--muted);
|
|
margin-bottom: 4px;
|
|
opacity: .8;
|
|
}
|
|
.msg-btw-answer {
|
|
margin-top: 6px;
|
|
border-top: 1px solid var(--accent-bg-strong);
|
|
padding-top: 6px;
|
|
}
|
|
|
|
/* ── /background badge in composer footer ── */
|
|
.bg-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
padding: 0 5px;
|
|
border-radius: 9px;
|
|
background: var(--accent-bg-strong);
|
|
color: var(--accent-text);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Queue pill outer: identical wrapper to .queue-card — max-width+padding positions the pill at card-inner width */
|
|
.queue-pill-outer{display:none;max-width:var(--msg-max);margin:0 auto;padding:0 20px;box-sizing:border-box;width:100%;}
|
|
.queue-pill-outer.show{display:block;animation:queuePillIn .18s ease;}
|
|
@keyframes queuePillIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
|
|
/* Queue pill button: fills the outer slot, styled like queue-card-inner */
|
|
.queue-pill{display:flex;width:100%;box-sizing:border-box;align-items:center;gap:8px;padding:9px 14px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);cursor:pointer;background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:14px 14px 0 0;text-align:left;}
|
|
.queue-pill:hover{background:color-mix(in srgb,var(--hover-bg) 60%,var(--surface));}
|
|
.queue-pill-count{color:var(--text);}
|
|
.queue-pill-chevron{margin-left:auto;opacity:.5;}
|