dcb21dfd37
- index.html: btnSend hidden by default (display:none), icon-only (upward arrow SVG, no text label), title attribute for accessibility - style.css: new send-btn design — 34px circle, blue fill (#7cb9ff), subtle glow box-shadow, scale() hover/active for tactile feel, .send-btn.visible with @keyframes send-pop-in (scale+opacity spring using cubic-bezier(.34,1.56,.64,1) for a satisfying pop). Mobile override updated to preserve circle dimensions. - ui.js: updateSendBtn() — shows button with pop-in animation when textarea has content OR files are attached and agent is not busy; hides instantly when content is cleared. Hooked into setBusy() and renderTray() so button state tracks all content sources correctly. - boot.js: input event listener calls updateSendBtn() on every keystroke. - messages.js: autoResize() calls updateSendBtn() so button disappears immediately after send clears the textarea. - tests/test_sprint21.py: 33 tests covering HTML structure, CSS design (circle shape, colors, animations, keyframes), JS logic (updateSendBtn, setBusy, renderTray, autoResize integration), and regressions (363 total, all pass).
598 lines
46 KiB
CSS
598 lines
46 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;
|
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.6;
|
|
}
|
|
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:hidden;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:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:var(--text);padding:7px 12px;font-size:12px;outline:none;transition:all .15s;}
|
|
.session-search input:focus{border-color:rgba(124,185,255,.35);background:rgba(255,255,255,.06);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:rgba(20,32,60,.9);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 10px 8px 8px;border-radius:0 8px 8px 0;cursor:pointer;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s,border-color .15s;display:flex;align-items:center;gap:6px;min-width:0;border-left:2px solid transparent;position:relative;}
|
|
.session-item:hover{background:rgba(255,255,255,0.06);color:var(--text);}
|
|
.session-item.active{background:rgba(232,160,48,0.12);color:#e8a030;border-left:2px solid #e8a030;padding-left:8px;}
|
|
.session-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
/* ── Session action button overlay ── */
|
|
.session-actions{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;gap:2px;padding:0 6px 0 16px;background:linear-gradient(to right,transparent,var(--sidebar) 12px);opacity:0;pointer-events:none;transition:opacity .15s ease;border-radius:0 8px 8px 0;}
|
|
.session-item:hover .session-actions{opacity:1;pointer-events:auto;}
|
|
.session-item.active .session-actions{background:linear-gradient(to right,transparent,rgba(30,22,8,.95) 12px);}
|
|
.session-actions button{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 3px;line-height:1;transition:color .12s;display:flex;align-items:center;}
|
|
.session-actions button:hover{color:var(--text);}
|
|
.session-actions .act-trash:hover{color:var(--accent);}
|
|
.session-actions .act-pin.pinned{color:#f5c542;}
|
|
.session-actions .act-pin.pinned:hover{color:#d4a017;}
|
|
/* 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;}
|
|
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:rgba(20,30,50,.95);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);}
|
|
.reconnect-banner{display:none;background:#1a2535;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:5px 12px;border-radius:7px;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);}
|
|
/* ── 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:rgba(20,30,50,.95);backdrop-filter:blur(8px);border:1px solid rgba(233,69,96,0.35);border-radius:14px;padding:14px 16px;}
|
|
.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;}
|
|
.approval-cmd{background:var(--code-bg);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 12px;font-family:"SF Mono",ui-monospace,monospace;font-size:12px;color:#e2e8f0;white-space:pre-wrap;word-break:break-all;margin-bottom:12px;max-height:120px;overflow-y:auto;}
|
|
.approval-btns{display:flex;gap:8px;flex-wrap:wrap;}
|
|
.approval-btn{padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid var(--border2);background:rgba(255,255,255,0.06);color:var(--text);cursor:pointer;transition:all .15s;}
|
|
.approval-btn:hover{background:rgba(255,255,255,0.12);}
|
|
.approval-btn.once{border-color:rgba(124,185,255,0.5);color:var(--blue);}
|
|
.approval-btn.once:hover{background:rgba(124,185,255,0.15);}
|
|
.approval-btn.session{border-color:rgba(124,185,255,0.3);color:var(--blue);}
|
|
.approval-btn.always{border-color:rgba(201,168,76,0.5);color:var(--gold);}
|
|
.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);}
|
|
/* 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:rgba(15,22,40,.98);border:1px solid rgba(124,185,255,0.3);color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:7px;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 rgba(255,255,255,.08);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:9px 11px;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 7px;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 11px 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:rgba(255,255,255,.06);border:1px solid var(--border2);border-radius:7px;color:var(--text);padding:6px 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:7px 10px;border-radius:7px;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:rgba(255,255,255,.06);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;}
|
|
.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:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text);padding:7px 28px 7px 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:#1a1a2e;color:var(--text);padding:6px;}
|
|
.sidebar-actions{display:flex;gap:6px;}
|
|
.sm-btn{flex:1;padding:7px 0;border-radius:8px;font-size:11px;font-weight:500;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,.08);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);}
|
|
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:rgba(26,26,46,0.5);}
|
|
.topbar{padding:12px 20px;border-bottom:1px solid var(--border);background:rgba(22,33,62,.98);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
|
|
.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 rgba(255,255,255,.1);color:var(--muted);font-weight:500;}
|
|
.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;}
|
|
.messages-inner{max-width:800px;margin:0 auto;width:100%;padding:20px 24px 32px;display:flex;flex-direction:column;}
|
|
.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:#fff;font-weight:600;}.msg-body em{color:#c9c9e8;font-style:italic;}
|
|
.msg-body code{font-family:"SF Mono","Fira Code",ui-monospace,monospace;font-size:12.5px;background:rgba(0,0,0,.35);padding:1px 5px;border-radius:4px;color:#f0c27f;}
|
|
.msg-body pre{background:var(--code-bg);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px;overflow-x:auto;margin:10px 0;}
|
|
.msg-body pre code{background:none;padding:0;border-radius:0;color:#e2e8f0;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:rgba(255,255,255,.04);border-radius:10px 10px 0 0;border:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.05);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:11px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,.08);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:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,.12);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;padding:6px 10px 10px;}
|
|
.composer-left{display:flex;gap:2px;align-items:center;}
|
|
.composer-right{display:flex;gap:6px;align-items:center;}
|
|
.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:rgba(255,255,255,.06);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 rgba(255,255,255,.06);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
|
|
.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;}
|
|
.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);}
|
|
/* 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:rgba(255,255,255,.06);}
|
|
.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:7px;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:#fff;border-bottom:1px solid var(--border);padding-bottom:6px;}
|
|
.preview-md h2{font-size:15px;font-weight:600;margin:14px 0 6px;color:#fff;}
|
|
.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:rgba(0,0,0,.35);padding:1px 5px;border-radius:4px;color:#f0c27f;}
|
|
.preview-md pre{background:var(--code-bg);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px 12px;overflow-x:auto;margin:8px 0;}
|
|
.preview-md pre code{background:none;padding:0;color:#e2e8f0;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:#fff;font-weight:600;}.preview-md em{color:#c9c9e8;}
|
|
.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)}
|
|
@media(max-width:900px){.rightpanel{display:none}}
|
|
@media(max-width:640px){
|
|
.sidebar{display:none}
|
|
/* Topbar: stack title + chips vertically, allow wrapping */
|
|
.topbar{padding:8px 12px;gap:6px;flex-wrap:wrap;}
|
|
.topbar-left{min-width:0;flex:1 1 100%;}
|
|
.topbar-title{font-size:14px;}
|
|
.topbar-meta{font-size:10px;}
|
|
.topbar-chips{flex-wrap:wrap;gap:4px;}
|
|
.topbar-chips .chip,.topbar-chips .ws-chip,.topbar-chips button{font-size:11px!important;padding:3px 8px!important;}
|
|
/* Messages area */
|
|
.messages-inner{padding:12px 10px 20px;}
|
|
.msg-body{padding-left:0;max-width:100%;}
|
|
.msg-role{font-size:12px;}
|
|
/* Composer */
|
|
.composer-wrap{padding:8px 10px 12px!important;}
|
|
.composer-box{border-radius:12px;}
|
|
.composer-box textarea{font-size:16px;min-height:40px;}
|
|
.send-btn{width:32px;height:32px;}
|
|
/* Empty state */
|
|
.empty-state h2{font-size:18px;}
|
|
.empty-state p{font-size:13px;}
|
|
.suggestion-grid{max-width:100%!important;}
|
|
.suggestion-btn{font-size:12px;padding:8px 10px;}
|
|
/* Approval card */
|
|
.approval-card{padding:0 10px 8px;}
|
|
.approval-btns{gap:6px;}
|
|
.approval-btn{padding:5px 10px;font-size:11px;}
|
|
/* Tool cards */
|
|
.tool-card{margin-left:0!important;font-size:12px;}
|
|
/* Settings modal */
|
|
.settings-panel{width:95vw;max-width:95vw;}
|
|
}
|
|
|
|
/* ── Workspace dropdown (topbar) ── */
|
|
.ws-chip{user-select:none;}
|
|
.ws-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:240px;background:#1a2535;border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:320px;overflow-y:auto;}
|
|
.ws-dropdown.open{display:block;}
|
|
.ws-opt{padding:9px 14px;cursor:pointer;transition:background .12s;}
|
|
.ws-opt:hover{background:rgba(255,255,255,.07);}
|
|
.ws-opt.active{background:rgba(124,185,255,.1);}
|
|
.ws-opt-name{font-size:13px;color:var(--text);font-weight:500;}
|
|
.ws-opt-path{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.ws-divider{height:1px;background:var(--border);margin:4px 0;}
|
|
.ws-manage{color:var(--muted);font-size:12px;}
|
|
/* ── 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 9px;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);}
|
|
/* ── Slash command autocomplete dropdown ── */
|
|
.cmd-dropdown{display:none;position:absolute;bottom:100%;left:0;right:0;background:#1a2535;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:7px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s;}
|
|
.msg-edit-send:hover{opacity:.85;}
|
|
.msg-edit-cancel{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--border2);border-radius:7px;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;}
|
|
|
|
/* 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%);}
|
|
|
|
/* ── Activity bar (tool status above composer) ── */
|
|
@keyframes fadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
|
|
#activityBar{padding-bottom:8px;flex-shrink:0;}
|
|
#activityBarInner{transition:opacity .2s;}
|
|
/* 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 model field */
|
|
.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);}
|
|
.sidebar{position:relative;}
|
|
.sidebar .resize-handle{right:-2px;}
|
|
.rightpanel{position:relative;}
|
|
.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;}
|
|
.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:7px;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:380px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.5);}
|
|
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);}
|
|
.settings-body{padding:20px;}
|
|
.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;}
|
|
/* Gear icon in topbar -- muted chip, no red */
|
|
.gear-btn{font-size:13px;cursor:pointer;transition:color .15s,background .15s;}
|
|
.gear-btn:hover{color:var(--text);background:rgba(255,255,255,.08);}
|
|
|
|
/* ── 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:rgba(255,255,255,.04);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:rgba(20,32,60,.9);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:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);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;}
|