ede1a5fc50
* Polish workspace panel behavior and app dialogs * Replace remaining emoji UI glyphs with Lucide icons * Redesign composer footer around model and context controls Move the model selector into the composer footer, replace the linear context pill with a compact circular badge plus tooltip, and remove the redundant topbar model pill. Design credit and inspiration: Theo / T3 Code. Reference implementation: https://github.com/pingdotgg/t3code/ * Remove obsolete activity bar Drop the old activity bar, keep turn-scoped state in the composer footer, and route remaining non-chat status messages through toasts. This leaves live tool cards and the message timeline as the primary progress UI, with the composer owning stop/cancel and brief turn status. * Move workspace and model switching into composer footer * Move profile switching into composer footer * Refactor Hermes control center UI * Redesign control center settings modal layout Widen the modal to 860px, simplify the tab list to icon+label rows, stretch the tab column's divider to full height, lock the panel to a fixed height so switching tabs no longer resizes the outer shell, and always open on the Conversation tab. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Put session item actions in a dropdown * Use Hermes mark in sidebar control button * Reset control center section on close * Drop session-item left border indicator Remove the left-border accent used for active, CLI, and project rows — each state already has a dedicated cue (gold fill, cli badge, project dot), so the border was redundant. Fully round the row, add 2px bottom spacing between rows, and strip the matching JS/CSS overrides. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Increase session search input vertical padding Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Normalise odd pixel values across UI Snap padding, gap, and border-radius values to the 2/4/6/8/10/12 grid across composer chips, sidebar panels, cron list, settings, approval buttons, dropdowns, and inline message edit — eliminating the 7/9/11px drift that was making sibling elements feel subtly misaligned. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Add missing #btnMobileFiles button and .mobile-files-btn CSS (for mobile QA suite) The mobile layout regression suite (test_mobile_layout.py) requires: - #btnMobileFiles onclick=toggleMobileFiles() in topbar chips - .mobile-files-btn CSS rules for responsive show/hide at 640/900px breakpoints Also adds max-width guard to .profile-dropdown to prevent clipping at narrow viewports. * Improve composer footer mobile responsiveness and UX - Collapse composer chips to icon-only at <=400px viewports - Add model chip icon (CPU) so it remains tappable when labels are hidden - Show send button always (disabled state when empty, hidden during streaming) - Show context usage indicator on session load, not just after streaming - Add cancel status fallback timeout to prevent stale "Cancelling..." text - Update tests to match new send button and busy state behavior * Fix duplicate files button and broken workspace close on mobile Remove redundant #btnMobileFiles button that duplicated #btnWorkspacePanelToggle in the mobile topbar. Fix workspace panel close button calling undefined closeMobileFiles() — now calls closeWorkspacePanel(). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix model chip icon vertical alignment in composer footer Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix workspace toggle button hidden on desktop by conflicting CSS class Remove mobile-files-btn class from #btnWorkspacePanelToggle — its display:none!important rule was overriding workspace-toggle-btn visibility on non-mobile viewports. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix session actions dots button inaccessible on mobile sidebar Always show the session actions trigger on mobile (no hover state on touch devices) and restore right padding so text truncates with ellipsis before the dots icon. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix composer footer manage links not opening sidebar panel The "Manage profiles" and "Manage workspaces" links in the composer footer dropdowns called switchPanel() which only changes the active panel content but doesn't open the sidebar. Replaced with mobileSwitchPanel() which also opens the sidebar so the panel is actually visible. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Widen icon-only composer chips breakpoint from 400px to 768px Move the icon-only chip styling up into the existing max-width:768px media query so chips collapse to icon-only on tablets too, preventing composer footer overflow on mid-size screens. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix composer-left vertical scrollbar by setting overflow-y:hidden When overflow-x is set to auto, the CSS spec implicitly changes overflow-y from visible to auto, allowing a vertical scrollbar to appear from slight chip padding/border overflow. Explicitly set overflow-y:hidden to prevent this. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: resolve rebase conflicts and fix control center test assertions - Resolved 4 conflicts during rebase onto master (workspace.js, boot.js, index.html, test_sprint34.py) - Fixed test_sprint34.py: _controlSection -> _settingsSection, cc-tab -> settings-tabs (matching actual implementation) - Fixed quoting syntax error in test assertion Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: update version badge in System tab to v0.49.4 * docs: update README and CHANGELOG for v0.50.0 UI refresh, bump version badge --------- Co-authored-by: Aron Prins <pwf.aron@gmail.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Nathan Esquenazi <nesquena@gmail.com>
1042 lines
84 KiB
CSS
1042 lines
84 KiB
CSS
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--bg:#1a1a2e;--sidebar:#16213e;--border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.14);
|
|
--text:#e8e8f0;--muted:#8888aa;--accent:#e94560;--blue:#7cb9ff;--gold:#c9a84c;--code-bg:#0d1117;
|
|
--surface:#1a2535;--topbar-bg:rgba(22,33,62,.98);--main-bg:rgba(26,26,46,0.5);
|
|
--focus-ring:rgba(124,185,255,.35);--focus-glow:rgba(124,185,255,.08);
|
|
--input-bg:rgba(255,255,255,.04);--hover-bg:rgba(255,255,255,.06);
|
|
--strong:#fff;--em:#c9c9e8;--code-text:#f0c27f;--code-inline-bg:rgba(0,0,0,.35);--pre-text:#e2e8f0;
|
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.6;
|
|
}
|
|
/* ── Slate theme ── */
|
|
:root[data-theme="slate"]{
|
|
--bg:#2b2d30;--sidebar:#25272b;--border:rgba(255,255,255,0.09);--border2:rgba(255,255,255,0.16);
|
|
--text:#d4d4d8;--muted:#8a8a9a;--accent:#e06c75;--blue:#82aaff;--gold:#d4a85a;--code-bg:#1e2023;
|
|
--surface:#2f3134;--topbar-bg:rgba(37,39,43,.98);--main-bg:rgba(43,45,48,0.5);
|
|
--focus-ring:rgba(130,170,255,.35);--focus-glow:rgba(130,170,255,.08);
|
|
--strong:#f0f0f3;--em:#b0b0c0;--code-text:#dca06a;--code-inline-bg:rgba(0,0,0,.3);--pre-text:#d0d0d6;
|
|
}
|
|
/* ── Light theme ── */
|
|
:root[data-theme="light"]{
|
|
--bg:#f0ede8;--sidebar:#e4e0d8;--border:rgba(0,0,0,0.09);--border2:rgba(0,0,0,0.15);
|
|
--text:#2c2825;--muted:#7a746a;--accent:#b5451b;--blue:#2d6fa3;--gold:#8a6520;--code-bg:#ddd8d0;
|
|
--surface:#e0dcd4;--topbar-bg:rgba(228,224,216,.98);--main-bg:rgba(240,237,232,0.5);
|
|
--focus-ring:rgba(45,111,163,.35);--focus-glow:rgba(45,111,163,.1);
|
|
--input-bg:rgba(0,0,0,.03);--hover-bg:rgba(0,0,0,.05);
|
|
--strong:#1a1715;--em:#5a544a;--code-text:#8b4513;--code-inline-bg:rgba(0,0,0,.06);--pre-text:#2c2825;
|
|
}
|
|
:root[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}
|
|
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3);}
|
|
:root[data-theme="light"] ::selection{background:rgba(45,111,163,.2);}
|
|
:root[data-theme="light"] *{scrollbar-color:rgba(0,0,0,.15) transparent;}
|
|
:root[data-theme="light"] .settings-overlay{background:rgba(0,0,0,.3);}
|
|
/* ── Light theme: sidebar, roles, chips, active states ── */
|
|
:root[data-theme="light"] .session-item{color:#5a544a;}
|
|
:root[data-theme="light"] .session-item:hover{background:rgba(0,0,0,.06);color:#2c2825;}
|
|
:root[data-theme="light"] .session-item.active{background:rgba(45,111,163,.1);color:#1a5a8a;}
|
|
:root[data-theme="light"] .session-pin-indicator{color:#996b15;}
|
|
:root[data-theme="light"] .session-date-header.pinned{color:#996b15;}
|
|
:root[data-theme="light"] .session-actions-trigger.active,
|
|
:root[data-theme="light"] .session-item.menu-open .session-actions-trigger{background:rgba(45,111,163,.12);border-color:rgba(45,111,163,.22);color:#1a5a8a;}
|
|
:root[data-theme="light"] .session-action-opt.is-active{background:rgba(45,111,163,.1);}
|
|
:root[data-theme="light"] .msg-role.user{color:#2d6fa3;}
|
|
:root[data-theme="light"] .msg-role.assistant{color:#8a6520;}
|
|
:root[data-theme="light"] .role-icon.user{background:rgba(45,111,163,.12);color:#2d6fa3;border-color:rgba(45,111,163,.25);}
|
|
:root[data-theme="light"] .role-icon.assistant{background:rgba(138,101,32,.12);color:#8a6520;border-color:rgba(138,101,32,.25);}
|
|
:root[data-theme="light"] .project-chip{border-color:rgba(0,0,0,.12);background:rgba(0,0,0,.04);}
|
|
:root[data-theme="light"] .project-chip:hover{background:rgba(0,0,0,.08);color:#2c2825;}
|
|
:root[data-theme="light"] .project-chip.active{background:rgba(45,111,163,.1);color:#1a5a8a;border-color:rgba(45,111,163,.3);}
|
|
:root[data-theme="light"] .chip{border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.04);}
|
|
:root[data-theme="light"] .chip.model{color:#2d6fa3;border-color:rgba(45,111,163,.3);background:rgba(45,111,163,.08);}
|
|
:root[data-theme="light"] .new-chat-btn{border-color:rgba(45,111,163,.25);color:#2d6fa3;}
|
|
:root[data-theme="light"] .new-chat-btn:hover{background:rgba(45,111,163,.08);}
|
|
:root[data-theme="light"] .session-search input{border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.03);}
|
|
:root[data-theme="light"] .session-search input:focus{border-color:rgba(45,111,163,.4);background:rgba(0,0,0,.02);}
|
|
:root[data-theme="light"] .cron-item{border-color:rgba(0,0,0,.08);background:rgba(0,0,0,.02);}
|
|
:root[data-theme="light"] .sm-btn{border-color:rgba(0,0,0,.1);}
|
|
:root[data-theme="light"] .sm-btn:hover{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.15);}
|
|
:root[data-theme="light"] select{border-color:rgba(0,0,0,.12);}
|
|
:root[data-theme="light"] .composer-box{border-color:rgba(0,0,0,.12);}
|
|
:root[data-theme="light"] .composer-box:focus-within{border-color:rgba(45,111,163,.5);box-shadow:0 0 0 3px rgba(45,111,163,.08);}
|
|
:root[data-theme="light"] .suggestion{border-color:rgba(0,0,0,.08);}
|
|
:root[data-theme="light"] .suggestion:hover{background:rgba(45,111,163,.06);border-color:rgba(45,111,163,.2);}
|
|
:root[data-theme="light"] .tool-card{border-color:rgba(0,0,0,.08);}
|
|
:root[data-theme="light"] .tool-card:hover{border-color:rgba(0,0,0,.15);}
|
|
:root[data-theme="light"] .icon-btn:hover{background:rgba(0,0,0,.06);}
|
|
:root[data-theme="light"] .panel-icon-btn:hover{background:rgba(0,0,0,.06);}
|
|
:root[data-theme="light"] .file-item:hover{background:rgba(0,0,0,.04);}
|
|
:root[data-theme="light"] .preview-md th{background:rgba(0,0,0,.04);}
|
|
:root[data-theme="light"] .preview-md td{border-color:rgba(0,0,0,.08);}
|
|
:root[data-theme="light"] .preview-badge.code{background:rgba(0,0,0,.05);}
|
|
:root[data-theme="light"] .ctx-ring-center{background:var(--bg);color:#5a544a;}
|
|
:root[data-theme="light"] .ctx-ring-track{stroke:rgba(0,0,0,.12);}
|
|
:root[data-theme="light"] .ws-opt:hover{background:rgba(0,0,0,.05);}
|
|
:root[data-theme="light"] .profile-opt:hover{background:rgba(0,0,0,.05);}
|
|
:root[data-theme="light"] .profile-opt.active{background:rgba(45,111,163,.06);}
|
|
:root[data-theme="light"] .profile-chip{color:#7a5a90!important;}
|
|
:root[data-theme="light"] .nav-tab:hover::after{background:var(--surface);border-color:rgba(45,111,163,.25);color:#2d6fa3;}
|
|
:root[data-theme="light"] .cron-status.disabled{background:rgba(0,0,0,.05);}
|
|
:root[data-theme="light"] .cron-btn{background:rgba(0,0,0,.04);}
|
|
:root[data-theme="light"] .cron-btn:hover{background:rgba(0,0,0,.08);}
|
|
/* ── Solarized Dark theme ── */
|
|
:root[data-theme="solarized"]{
|
|
--bg:#002b36;--sidebar:#073642;--border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.13);
|
|
--text:#839496;--muted:#657b83;--accent:#dc322f;--blue:#268bd2;--gold:#b58900;--code-bg:#073642;
|
|
--surface:#0a3c48;--topbar-bg:rgba(7,54,66,.98);--main-bg:rgba(0,43,54,0.5);
|
|
--focus-ring:rgba(38,139,210,.35);--focus-glow:rgba(38,139,210,.08);
|
|
--strong:#fdf6e3;--em:#93a1a1;--code-text:#cb4b16;--code-inline-bg:rgba(0,0,0,.25);--pre-text:#93a1a1;
|
|
}
|
|
/* ── Monokai theme ── */
|
|
:root[data-theme="monokai"]{
|
|
--bg:#272822;--sidebar:#1e1f1c;--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
|
|
--text:#f8f8f2;--muted:#75715e;--accent:#f92672;--blue:#66d9e8;--gold:#e6db74;--code-bg:#1e1f1c;
|
|
--surface:#2d2e28;--topbar-bg:rgba(30,31,28,.98);--main-bg:rgba(39,40,34,0.5);
|
|
--focus-ring:rgba(102,217,232,.35);--focus-glow:rgba(102,217,232,.08);
|
|
--strong:#f8f8f0;--em:#a6a28c;--code-text:#e6db74;--code-inline-bg:rgba(0,0,0,.3);--pre-text:#f8f8f2;
|
|
}
|
|
/* ── Nord theme ── */
|
|
:root[data-theme="nord"]{
|
|
--bg:#2e3440;--sidebar:#272c36;--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
|
|
--text:#eceff4;--muted:#9099aa;--accent:#bf616a;--blue:#81a1c1;--gold:#ebcb8b;--code-bg:#272c36;
|
|
--surface:#333a47;--topbar-bg:rgba(39,44,54,.98);--main-bg:rgba(46,52,64,0.5);
|
|
--focus-ring:rgba(129,161,193,.35);--focus-glow:rgba(129,161,193,.08);
|
|
--strong:#eceff4;--em:#b8c0cc;--code-text:#a3be8c;--code-inline-bg:rgba(0,0,0,.2);--pre-text:#d8dee9;
|
|
}
|
|
/* ── OLED theme ── */
|
|
:root[data-theme="oled"]{
|
|
--bg:#000000;--sidebar:#000000;--border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.12);
|
|
--text:#e0e0e0;--muted:#777777;--accent:#ff3b5c;--blue:#6cb4ff;--gold:#d4a74a;--code-bg:#080808;
|
|
--surface:#0a0a0a;--topbar-bg:rgba(0,0,0,.98);--main-bg:rgba(0,0,0,0.5);
|
|
--focus-ring:rgba(108,180,255,.3);--focus-glow:rgba(108,180,255,.06);
|
|
--strong:#ffffff;--em:#c0c0d0;--code-text:#e8b86d;--code-inline-bg:rgba(255,255,255,.06);--pre-text:#d0d0d8;
|
|
--input-bg:rgba(255,255,255,.03);--hover-bg:rgba(255,255,255,.05);
|
|
}
|
|
body{background:var(--bg);color:var(--text);height:100vh;height:100dvh;overflow:hidden;display:flex;}
|
|
.layout{display:flex;width:100%;height:100vh;height:100dvh;}
|
|
.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,#e8a030,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 rgba(233,69,96,.3);}
|
|
.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:rgba(124,185,255,0.07);border:1px solid rgba(124,185,255,0.18);color:var(--blue);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:rgba(124,185,255,0.13);border-color:rgba(124,185,255,.3);}
|
|
.session-list{flex:1;overflow-y:auto;padding:0 8px 8px;min-height:0;}
|
|
.session-search{padding:4px 10px 8px;flex-shrink:0;}
|
|
.session-search input{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 12px;font-size:12px;outline:none;transition:all .15s;}
|
|
.session-search input:focus{border-color:rgba(124,185,255,.35);background:var(--hover-bg);box-shadow:0 0 0 2px rgba(124,185,255,.07);}
|
|
.session-search input::placeholder{color:var(--muted);opacity:.7;}
|
|
/* Inline session title edit */
|
|
.session-title-input{flex:1;background:var(--surface);border:1px solid rgba(124,185,255,.6);border-radius:6px;color:var(--text);padding:3px 8px;font-size:13px;outline:none;min-width:0;box-shadow:0 0 0 2px rgba(124,185,255,.15);font-family:inherit;}
|
|
.session-item{padding:8px 40px 8px 8px;margin-bottom:2px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s;display:flex;align-items:center;gap:6px;min-width:0;position:relative;}
|
|
.session-item:hover{background:var(--hover-bg);color:var(--text);}
|
|
.session-item.active{background:rgba(232,160,48,0.12);color:#e8a030;}
|
|
.session-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
/* ── 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-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:rgba(124,185,255,.1);border-color:rgba(124,185,255,.2);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:rgba(124,185,255,.1);}
|
|
.session-action-opt.danger:hover{background:rgba(233,69,96,.08);}
|
|
.session-action-opt.danger .ws-opt-icon,.session-action-opt.danger .ws-opt-name{color:var(--accent);}
|
|
/* Hide overlay during inline rename */
|
|
.session-item:has(.session-title-input) .session-actions{display:none;}
|
|
@keyframes newflash{0%{background:rgba(124,185,255,0.22);color:var(--blue);}100%{background:transparent;color:var(--muted);}}
|
|
.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:#f5c542;}
|
|
.session-date-caret{font-size:9px;transition:transform .2s;flex-shrink:0;display:inline-block;}
|
|
.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 rgba(124,185,255,.2);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:rgba(124,185,255,.55);box-shadow:0 0 0 3px rgba(124,185,255,.12);}
|
|
.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:rgba(124,185,255,.45);background:rgba(124,185,255,.14);color:var(--blue);}
|
|
.app-dialog-btn.confirm:hover{background:rgba(124,185,255,.22);border-color:rgba(124,185,255,.65);}
|
|
.app-dialog-btn.confirm.danger{border-color:rgba(233,69,96,.4);background:rgba(233,69,96,.14);color:var(--accent);}
|
|
.app-dialog-btn.confirm.danger:hover{background:rgba(233,69,96,.22);border-color:rgba(233,69,96,.58);}
|
|
.app-dialog-btn:focus-visible,.app-dialog-close:focus-visible{outline:2px solid rgba(124,185,255,.85);outline-offset:2px;}
|
|
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--surface);backdrop-filter:blur(12px);border:1px solid rgba(124,185,255,0.25);color:var(--text);font-size:13px;padding:10px 20px;border-radius:12px;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,.3);letter-spacing:.01em;}
|
|
.toast.show{opacity:1;transform:translateX(-50%) translateY(-2px);}
|
|
.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 rgba(124,185,255,.16);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,rgba(124,185,255,.08),rgba(124,185,255,.02));}
|
|
.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:rgba(124,185,255,.14);color:var(--blue);}
|
|
.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:rgba(124,185,255,.25);background:rgba(124,185,255,.08);}
|
|
.onboarding-step.done{background:rgba(201,168,76,.08);}
|
|
.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:rgba(201,168,76,.16);color:var(--gold);}
|
|
.onboarding-step.active .onboarding-step-index{background:rgba(124,185,255,.18);color:var(--blue);}
|
|
.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(--blue);border-color:rgba(124,185,255,.3);background:rgba(124,185,255,.08);}
|
|
.onboarding-status.warn{color:var(--gold);border-color:rgba(201,168,76,.28);background:rgba(201,168,76,.08);}
|
|
.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:rgba(124,185,255,.28);background:rgba(124,185,255,.08);}
|
|
.onboarding-check.warn{border-color:rgba(201,168,76,.25);background:rgba(201,168,76,.08);}
|
|
.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-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 rgba(201,168,76,0.4);border-radius:10px;padding:10px 16px;margin:10px auto;max-width:780px;font-size:13px;color:var(--gold);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:rgba(201,168,76,0.15);border:1px solid rgba(201,168,76,0.4);color:var(--gold);cursor:pointer;}
|
|
.reconnect-btn:hover{background:rgba(201,168,76,0.25);}
|
|
/* ── Update banner ── */
|
|
.update-banner{display:none;background:var(--surface);border:1px solid rgba(124,185,255,0.4);border-radius:10px;padding:10px 16px;margin:10px auto;max-width:780px;font-size:13px;color:var(--blue);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:rgba(124,185,255,0.1);border:1px solid rgba(124,185,255,0.3);color:var(--blue);cursor:pointer;transition:background .15s;}
|
|
.update-btn:hover{background:rgba(124,185,255,0.2);}
|
|
.update-primary{background:rgba(124,185,255,0.2);border-color:rgba(124,185,255,0.5);}
|
|
.update-btn:disabled{opacity:0.5;cursor:not-allowed;}
|
|
/* ── Approval card ── */
|
|
.approval-card{display:none;max-width:780px;margin:0 auto 0;padding:0 20px 12px;}
|
|
.approval-card.visible{display:block;}
|
|
.approval-inner{background:var(--surface);backdrop-filter:blur(8px);border:1px solid rgba(233,69,96,0.35);border-radius:14px;padding:16px 18px;}
|
|
.approval-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;font-weight:600;color:#e94560;}
|
|
.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;}
|
|
.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:rgba(124,185,255,0.6);color:var(--blue);background:rgba(124,185,255,0.08);}
|
|
.approval-btn.once:hover{background:rgba(124,185,255,0.18);border-color:rgba(124,185,255,0.8);}
|
|
.approval-btn.session{border-color:rgba(124,185,255,0.35);color:var(--blue);}
|
|
.approval-btn.session:hover{background:rgba(124,185,255,0.12);border-color:rgba(124,185,255,0.55);}
|
|
.approval-btn.always{border-color:rgba(201,168,76,0.5);color:var(--gold);}
|
|
.approval-btn.always:hover{background:rgba(201,168,76,0.12);border-color:rgba(201,168,76,0.7);}
|
|
.approval-btn.deny{border-color:rgba(233,69,96,0.5);color:var(--accent);}
|
|
.approval-btn.deny:hover{background:rgba(233,69,96,0.12);border-color:rgba(233,69,96,0.7);}
|
|
.approval-btn.loading{opacity:.7;cursor:wait;}
|
|
/* 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;}
|
|
.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 rgba(124,185,255,0.3);color:var(--blue);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(--blue);}
|
|
.nav-tab.active::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--blue);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{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);}
|
|
.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:#4ade80;}
|
|
.cron-status.paused{background:rgba(201,168,76,.15);color:var(--gold);}
|
|
.cron-status.disabled{background:rgba(255,255,255,.07);color:var(--muted);}
|
|
.cron-status.error{background:rgba(233,69,96,.15);color:var(--accent);}
|
|
.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:rgba(124,185,255,.4);color:var(--blue);}
|
|
.cron-btn.run:hover{background:rgba(124,185,255,.12);}
|
|
.cron-btn.pause{border-color:rgba(201,168,76,.4);color:var(--gold);}
|
|
.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-search{padding:8px;flex-shrink:0;}
|
|
.skills-search input{width:100%;background:var(--hover-bg);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:8px 10px;font-size:12px;outline:none;}
|
|
.skills-search input::placeholder{color:var(--muted);}
|
|
.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{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:rgba(124,185,255,.1);color:var(--blue);}
|
|
.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;}
|
|
.sidebar-bottom{border-top:1px solid var(--border);padding:12px 14px;flex-shrink:0;position:relative;z-index:10;overflow:visible;}
|
|
.hermes-launch-btn{width:100%;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;border:1px solid var(--border2);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));color:var(--text);cursor:pointer;transition:background .15s,border-color .15s,transform .15s;text-align:left;}
|
|
.hermes-launch-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(124,185,255,.28);transform:translateY(-1px);}
|
|
.hermes-launch-icon{width:32px;height:32px;border-radius:10px;background:linear-gradient(145deg,rgba(124,185,255,.15),rgba(201,168,76,.1));border:1px solid rgba(124,185,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;box-shadow:0 4px 16px rgba(124,185,255,.08);}
|
|
.hermes-launch-icon svg{display:block;width:22px;height:22px;flex-shrink:0;}
|
|
.hermes-launch-copy{display:flex;flex-direction:column;min-width:0;flex:1;}
|
|
.hermes-launch-title{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--text);}
|
|
.hermes-launch-meta{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
.hermes-launch-chevron{color:var(--muted);flex-shrink:0;}
|
|
.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:rgba(124,185,255,.4);box-shadow:0 0 0 2px rgba(124,185,255,.08);}
|
|
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;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(--blue);border-color:rgba(124,185,255,.35);background:rgba(124,185,255,.1);}
|
|
.workspace-toggle-btn:disabled{opacity:.38;cursor:not-allowed;}
|
|
.chip.model{color:var(--blue);border-color:rgba(124,185,255,0.35);background:rgba(124,185,255,0.1);}
|
|
.messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;position:relative;z-index:0;}
|
|
.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:rgba(124,185,255,0.65);}
|
|
.msg-role.assistant{color:rgba(201,168,76,0.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:rgba(124,185,255,0.15);color:var(--blue);border:1px solid rgba(124,185,255,0.2);}
|
|
.role-icon.assistant{background:rgba(201,168,76,0.15);color:var(--gold);border:1px solid rgba(201,168,76,0.2);}
|
|
.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;}
|
|
.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-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:rgba(124,185,255,0.1);border:1px solid rgba(124,185,255,0.25);border-radius:6px;padding:4px 9px;font-size:12px;color:var(--blue);}
|
|
.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,rgba(124,185,255,.15),rgba(201,168,76,.1));border:1px solid rgba(124,185,255,.2);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:var(--blue);margin-bottom:4px;box-shadow:0 4px 20px rgba(124,185,255,.1);}
|
|
.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:rgba(124,185,255,0.07);color:var(--text);border-color:rgba(124,185,255,.3);transform:translateX(2px);}
|
|
/* ── Composer ── */
|
|
.composer-wrap{border-top:1px solid var(--border);padding:12px 20px 16px;background:var(--bg);flex-shrink:0;}
|
|
.composer-box{max-width:780px;margin:0 auto;background:var(--input-bg);border:1px solid var(--border2);border-radius:16px;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s;position:relative;}
|
|
.composer-box:focus-within{border-color:rgba(124,185,255,0.5);box-shadow:0 0 0 3px rgba(124,185,255,0.08);}
|
|
.composer-wrap.drag-over .composer-box{border-color:var(--blue);background:rgba(124,185,255,0.06);}
|
|
.drop-hint{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:rgba(124,185,255,0.08);border:2px dashed var(--blue);border-radius:14px;font-size:14px;color:var(--blue);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:rgba(124,185,255,0.08);border:1px solid rgba(124,185,255,0.22);border-radius:8px;padding:4px 10px;font-size:11px;font-weight:500;color:var(--blue);}
|
|
.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:14px;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:rgba(168,139,250,.08);border-color:rgba(168,139,250,.22);}
|
|
.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;}
|
|
.composer-workspace-chip{display:inline-flex;align-items:center;gap:8px;max-width:240px;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-workspace-chip:hover{color:var(--text);background-color:var(--hover-bg);}
|
|
.composer-workspace-chip:disabled{opacity:.45;cursor:not-allowed;}
|
|
.composer-workspace-chip:disabled:hover{color:var(--muted);background-color:transparent;}
|
|
.composer-workspace-chip.active{color:var(--text);background:rgba(124,185,255,.08);border-color:rgba(124,185,255,.22);}
|
|
.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-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:rgba(124,185,255,.08);border-color:rgba(124,185,255,.22);}
|
|
.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:#e6a817;}
|
|
.ctx-indicator.ctx-high .ctx-ring-value{stroke:#e05252;}
|
|
.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:rgba(233,69,96,.88);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(233,69,96,.28);}
|
|
.cancel-btn:hover{background:#e94560;transform:scale(1.06);box-shadow:0 4px 14px rgba(233,69,96,.38);}
|
|
.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:#e94560;background:rgba(233,69,96,.12);animation:mic-pulse 1.2s ease-in-out infinite;}
|
|
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(233,69,96,.3);}50%{box-shadow:0 0 0 6px rgba(233,69,96,0);}}
|
|
.mic-status{font-size:11px;color:#e94560;padding:4px 12px;display:flex;align-items:center;gap:6px;}
|
|
.mic-dot{width:6px;height:6px;border-radius:50%;background:#e94560;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:#7cb9ff;border:none;color:#0a1628;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 rgba(124,185,255,.35);}
|
|
.send-btn:hover{background:#a0d0ff;transform:scale(1.08);box-shadow:0 4px 14px rgba(124,185,255,.5);}
|
|
.send-btn:active{transform:scale(0.95);box-shadow:0 1px 4px rgba(124,185,255,.25);}
|
|
.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(--blue),#a0d0ff);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(--gold);background:rgba(201,168,76,.1);}
|
|
.panel-actions{display:flex;gap:4px;}
|
|
.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:rgba(255,255,255,.08);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:rgba(255,255,255,.07);color:var(--text);}
|
|
.file-item.active{background:rgba(124,185,255,.12);color:var(--blue);}
|
|
.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:#cdd6e0;}
|
|
/* 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:#e8e8f0;}
|
|
.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;}
|
|
.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:rgba(255,255,255,.07);padding:6px 10px;text-align:left;font-weight:600;border:1px solid var(--border2);}
|
|
.preview-md td{padding:5px 10px;border:1px solid rgba(255,255,255,.06);}
|
|
.preview-md tr:nth-child(even){background:rgba(255,255,255,.03);}
|
|
/* 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:rgba(124,185,255,.15);color:var(--blue);}
|
|
.preview-badge.md{background:rgba(201,168,76,.15);color:var(--gold);}
|
|
.preview-badge.code{background:rgba(255,255,255,.07);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;}
|
|
.mobile-bottom-nav{display:none;}
|
|
|
|
@media(min-width:901px){
|
|
.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;}}
|
|
|
|
@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;box-shadow:4px 0 24px rgba(0,0,0,.4);}
|
|
.sidebar.mobile-open{left:0;}
|
|
.sidebar .resize-handle{display:none;}
|
|
/* Hamburger button */
|
|
.mobile-hamburger{display:flex;align-items:center;justify-content:center;
|
|
background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;
|
|
flex-shrink:0;-webkit-tap-highlight-color:transparent;}
|
|
.mobile-hamburger:hover{color:var(--text);}
|
|
/* 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;}
|
|
/* Bottom navigation bar */
|
|
.mobile-bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;
|
|
background:var(--sidebar);border-top:1px solid var(--border);
|
|
z-index:150;padding:4px 0 env(safe-area-inset-bottom,0);
|
|
justify-content:space-around;align-items:center;}
|
|
.mobile-nav-btn{display:flex;flex-direction:column;align-items:center;gap:2px;
|
|
background:none;border:none;color:var(--muted);font-size:9px;padding:6px 4px;
|
|
cursor:pointer;min-width:44px;min-height:44px;justify-content:center;
|
|
-webkit-tap-highlight-color:transparent;transition:color .15s;}
|
|
.mobile-nav-btn.active{color:var(--blue);}
|
|
.mobile-nav-btn:hover{color:var(--text);}
|
|
.mobile-nav-btn svg{flex-shrink:0;}
|
|
/* Hide sidebar nav tabs (replaced by bottom nav) */
|
|
.sidebar-nav{display:none;}
|
|
/* Keep the Hermes control available at the bottom of the mobile sidebar */
|
|
.sidebar-bottom{display:block;padding:10px;}
|
|
/* 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-shell{grid-template-columns:1fr;gap:0;}
|
|
.settings-tabs{flex-direction:row;overflow-x:auto;padding:10px 12px;border-right:none;border-bottom:1px solid var(--border);gap:6px;}
|
|
.settings-tab{flex-shrink:0;}
|
|
.settings-main{padding:18px 16px;}
|
|
.hermes-action-grid{grid-template-columns:1fr;}
|
|
/* Messages area — account for bottom nav */
|
|
.messages{padding-bottom:60px;}
|
|
.messages-inner{padding:12px 10px 20px;}
|
|
.msg-body{padding-left:0;max-width:100%;}
|
|
.msg-role{font-size:12px;}
|
|
/* Composer — above bottom nav */
|
|
.composer-wrap{padding:8px 10px 12px!important;margin-bottom:56px;}
|
|
.composer-box{border-radius:12px;}
|
|
.composer-box textarea{font-size:16px;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-profile-chevron,
|
|
.composer-workspace-chevron,
|
|
.composer-model-chevron{display:none;}
|
|
.composer-profile-chip,
|
|
.composer-workspace-chip,
|
|
.composer-model-chip{max-width:44px;min-width:44px;min-height:44px;padding:6px;justify-content:center;gap:0;font-size:11px;}
|
|
.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 40px 10px 12px;}
|
|
.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:0 10px 8px;}
|
|
.approval-btns{gap:6px;}
|
|
.approval-btn{padding:8px 12px;font-size:12px;min-height:44px;}
|
|
.approval-kbd{display:none;}
|
|
.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;}
|
|
/* Settings modal */
|
|
.settings-panel{width:95vw;max-width:95vw;min-height:min(580px,88vh);max-height:92vh;}
|
|
.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:rgba(124,185,255,.1);}
|
|
.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;}
|
|
.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:rgba(124,185,255,.1);}
|
|
.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 0;border-bottom:1px solid var(--border);}
|
|
.ws-row:last-of-type{border-bottom:none;}
|
|
.ws-row-info{flex:1;min-width:0;}
|
|
.ws-row-name{font-size:13px;font-weight:500;color:var(--text);}
|
|
.ws-row-path{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.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:rgba(168,139,250,.9)!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:rgba(168,139,250,.08);}
|
|
.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:10px 0;border-bottom:1px solid var(--border);}
|
|
.profile-card:last-of-type{border-bottom:none;}
|
|
.profile-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;}
|
|
.profile-card-name{font-size:13px;font-weight:600;color:var(--text);}
|
|
.profile-card-name.is-active{color:rgba(168,139,250,.9);}
|
|
.profile-card-meta{font-size:11px;color:var(--muted);margin-top:3px;padding-left:12px;}
|
|
.profile-card-actions{display:flex;gap:4px;flex-shrink:0;}
|
|
/* ── Slash command autocomplete dropdown ── */
|
|
.cmd-dropdown{display:none;position:absolute;bottom:100%;left:0;right:0;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;margin-bottom:4px;}
|
|
.cmd-dropdown.open{display:block;}
|
|
.cmd-item{padding:8px 14px;cursor:pointer;transition:background .12s;}
|
|
.cmd-item:hover,.cmd-item.selected{background:rgba(255,255,255,.07);}
|
|
.cmd-item-name{font-size:13px;color:var(--text);font-weight:500;}
|
|
.cmd-item-arg{color:var(--muted);font-weight:400;font-style:italic;}
|
|
.cmd-item-desc{font-size:11px;color:var(--muted);margin-top:1px;}
|
|
.ws-action-btn.danger:hover{background:rgba(233,69,96,.12);color:var(--accent);border-color:rgba(233,69,96,.3);}
|
|
.ws-add-row{display:flex;gap:8px;align-items:center;padding:10px 0 4px;}
|
|
/* ── 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(--blue);background:rgba(124,185,255,.1);}
|
|
|
|
/* ── Edit message inline ── */
|
|
.msg-edit-area{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(124,185,255,.35);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 rgba(124,185,255,.07);margin-top:4px;}
|
|
.msg-edit-bar{display:flex;gap:8px;margin-top:8px;margin-bottom:4px;}
|
|
.msg-edit-send{background:var(--blue);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:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.18);color:var(--gold);font-size:11px;padding:4px 10px;cursor:pointer;transition:background .15s;}
|
|
.clear-btn:hover{background:rgba(201,168,76,.12);}
|
|
|
|
/* ── 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;}
|
|
|
|
/* Message role: breathing room between icon and name */
|
|
.msg-role > span{line-height:1;}
|
|
|
|
/* Composer wrap: slightly less padding on smaller heights */
|
|
.composer-wrap{border-top:1px solid rgba(255,255,255,.07);padding:10px 20px 14px;position:relative;z-index:10;}
|
|
|
|
/* 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;}
|
|
|
|
/* Workspace hint text: no intrusion */
|
|
.sidebar-bottom > div[style*="topbar"]{pointer-events:none;}
|
|
|
|
/* Topbar: border should match the subtle sidebar border */
|
|
.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%,rgba(124,185,255,.04) 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;
|
|
}
|
|
/* Sidebar bottom: tighten spacing */
|
|
.sidebar-bottom { padding: 10px 14px 12px; }
|
|
/* 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:rgba(124,185,255,.35);}
|
|
/* 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{width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:.8;flex-shrink:0;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 rgba(124,185,255,.3);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:rgba(124,185,255,.12);border:1px solid rgba(124,185,255,.25);border-radius:12px;padding:2px 8px;font-size:11px;color:var(--blue);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 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:rgba(124,185,255,.25);background:rgba(124,185,255,.04);}
|
|
.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;transition:transform .15s;}
|
|
.tool-card.open .tool-card-toggle{transform:rotate(90deg);}
|
|
.tool-card-detail{display:none;border-top:1px solid rgba(255,255,255,.06);padding:8px 12px;}
|
|
.tool-card.open .tool-card-detail{display:block;}
|
|
.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;}
|
|
|
|
/* ── 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 overlay ── */
|
|
.settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;}
|
|
.settings-panel{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:0;width:860px;max-width:92vw;height:min(700px,92vh);overflow:visible;box-shadow:0 12px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;}
|
|
.settings-header{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 24px 14px;border-bottom:1px solid var(--border);gap:16px;}
|
|
.settings-heading{display:flex;flex-direction:column;gap:3px;}
|
|
.settings-kicker{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);}
|
|
.settings-subtitle{font-size:12px;color:var(--muted);line-height:1.5;}
|
|
.settings-body{padding:0;flex:1;display:flex;min-height:0;overflow:hidden;}
|
|
.settings-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0;flex:1;min-height:0;min-width:0;}
|
|
.settings-tabs{display:flex;flex-direction:column;gap:4px;padding:18px 12px;border-right:1px solid var(--border);align-self:stretch;min-height:0;}
|
|
.settings-tab{display:flex;flex-direction:row;gap:12px;align-items:center;padding:10px 12px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-align:left;width:100%;}
|
|
.settings-tab:hover{background:rgba(255,255,255,.05);color:var(--text);}
|
|
.settings-tab.active{background:rgba(124,185,255,.1);border-color:rgba(124,185,255,.22);color:var(--text);}
|
|
.settings-tab-icon{flex-shrink:0;opacity:.9;}
|
|
.settings-tab-title{font-size:13px;font-weight:600;letter-spacing:.01em;}
|
|
.settings-main{overflow-y:auto;padding:22px 24px;min-width:0;}
|
|
.settings-pane{display:none;}
|
|
.settings-pane.active{display:block;}
|
|
.settings-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
|
|
.settings-section-title{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--text);}
|
|
.settings-section-meta{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5;}
|
|
.settings-version-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid rgba(124,185,255,.22);background:rgba(124,185,255,.08);color:var(--blue);font-size:11px;font-weight:700;flex-shrink:0;}
|
|
.hermes-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
|
|
.settings-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--border2);background:var(--input-bg);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
|
|
.settings-action-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);}
|
|
.settings-action-btn.danger{color:var(--accent);border-color:rgba(233,69,96,.25);}
|
|
.settings-action-btn.danger:hover{background:rgba(233,69,96,.08);border-color:rgba(233,69,96,.4);}
|
|
.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(--input-bg);border-color:var(--border2);}
|
|
.settings-field{margin-bottom:16px;}
|
|
.settings-field label{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
|
|
/* Save button inside the settings panel */
|
|
.settings-panel .settings-btn{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:8px 16px;cursor:pointer;font-weight:600;font-size:13px;}
|
|
.settings-panel .settings-btn:hover{opacity:.9;}
|
|
|
|
/* ── Session pin indicator (inline, only when pinned) ── */
|
|
.session-pin-indicator{flex-shrink:0;color:#f5c542;line-height:1;display:flex;align-items: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:rgba(124,185,255,.12);color:var(--blue);border-color:rgba(124,185,255,.4);}
|
|
.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 rgba(124,185,255,.6);background:var(--surface);color:var(--text);outline:none;width:100px;font-family:inherit;box-shadow:0 0 0 2px rgba(124,185,255,.15);}
|
|
.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:rgba(124,185,255,.08);}
|
|
.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 ── */
|
|
.thinking-card{background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.2);border-radius:10px;margin:4px 0 2px 40px;overflow:hidden;transition:border-color .15s;}
|
|
.thinking-card:hover{border-color:rgba(201,168,76,.35);}
|
|
.thinking-card-header{display:flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer;font-size:12px;color:var(--gold);user-select:none;}
|
|
.thinking-card-icon{font-size:14px;}
|
|
.thinking-card-label{font-weight:600;letter-spacing:.02em;}
|
|
.thinking-card-toggle{margin-left:auto;font-size:10px;transition:transform .15s;}
|
|
.thinking-card.open .thinking-card-toggle{transform:rotate(90deg);}
|
|
.thinking-card-body{display:none;padding:0 12px 10px;max-height:300px;overflow-y:auto;}
|
|
.thinking-card.open .thinking-card-body{display:block;}
|
|
.thinking-card-body pre{font-family:'SF Mono',ui-monospace,monospace;font-size:11px;line-height:1.5;color:var(--muted);white-space:pre-wrap;word-break:break-word;margin:0;}
|
|
|
|
.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(--gold);
|
|
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: #0088cc; }
|
|
.session-item.cli-session[data-source="telegram"]::after { color: #0088cc; }
|
|
.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; }
|