[data-theme="dark"]{ --bg:#08080f;--surface:#11111a;--surface2:#191926;--surface3:#21212e; --border:#252535;--accent:#7c6af7;--accent2:#a78bfa; --text:#e2e8f0;--text2:#94a3b8;--muted:#555570; --red:#f87171;--green:#34d399;--yellow:#fbbf24; --user-bg:rgba(124,106,247,.14);--user-border:rgba(124,106,247,.32); --code-bg:#0d1117;--shadow:rgba(0,0,0,.7); } [data-theme="light"]{ --bg:#f0f0ff;--surface:#fff;--surface2:#ebebff;--surface3:#e0e0f8; --border:#cccce8;--accent:#6c5ce7;--accent2:#8b7cf7; --text:#1a1a3e;--text2:#44448a;--muted:#8888aa; --red:#dc2626;--green:#059669;--yellow:#d97706; --user-bg:rgba(108,92,231,.11);--user-border:rgba(108,92,231,.28); --code-bg:#1e1e2e;--shadow:rgba(0,0,0,.12); } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Syne',sans-serif;transition:background .3s,color .3s} /* -- Animated background canvas -- */ #bgCanvas{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.4} /* -- All screens sit above canvas -- */ #authScreen,#setup,#app{position:relative;z-index:1} /* ==== SHARED ==== */ .btn-primary{background:linear-gradient(135deg,var(--accent),#a855f7);border:none;border-radius:12px;color:white;font-family:'Syne',sans-serif;font-weight:700;cursor:pointer;transition:opacity .2s} .btn-primary:active{opacity:.8} .field-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block} .field-group{display:flex;flex-direction:column;margin-bottom:14px} input,select,textarea{background:var(--surface2);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:13px;padding:13px 15px;outline:none;width:100%;transition:border-color .2s;-webkit-appearance:none;appearance:none} input:focus,select:focus,textarea:focus{border-color:var(--accent)} input[type=range]{padding:0;height:6px;border:none;background:var(--border);accent-color:var(--accent);cursor:pointer} .status{font-size:11px;font-family:'JetBrains Mono',monospace;margin-top:4px;min-height:14px;color:var(--muted)} .status.ok{color:var(--green)}.status.err{color:var(--red)} /* ==== AUTH ==== */ #authScreen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:24px} .auth-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:32px 28px;width:100%;max-width:380px;box-shadow:0 20px 60px var(--shadow);backdrop-filter:blur(10px);position:relative} .auth-lang-select{position:absolute;top:18px;right:18px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:5px 7px;font:700 10px 'JetBrains Mono',monospace;cursor:pointer} .auth-logo{font-size:32px;font-weight:800;letter-spacing:-1px;margin-bottom:4px} .auth-logo span{color:var(--accent2)} .auth-sub{font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:28px} .auth-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:-12px 0 10px} .auth-mode>button{display:flex;align-items:center;gap:9px;min-width:0;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text);font:inherit;text-align:left;cursor:pointer} .auth-mode>button.active{border-color:var(--accent);background:var(--user-bg);box-shadow:inset 0 0 0 1px var(--accent)} .auth-mode-icon{font-size:18px;color:var(--accent2);line-height:1} .auth-mode b,.auth-mode small{display:block;letter-spacing:0} .auth-mode b{font-size:12px}.auth-mode small{margin-top:2px;color:var(--muted);font:9px 'JetBrains Mono',monospace;white-space:nowrap} .auth-local-config{display:none;grid-template-columns:1fr auto;gap:7px;margin-bottom:7px} .auth-local-config.show{display:grid} .auth-local-config input{min-width:0;padding:9px 10px;border-radius:8px;font-size:11px} .auth-local-config button{padding:0 11px;border:1px solid var(--accent);border-radius:8px;background:transparent;color:var(--accent2);font:600 11px 'Syne',sans-serif;cursor:pointer} .auth-mode-status{min-height:16px;margin-bottom:10px;color:var(--muted);font:9px 'JetBrains Mono',monospace;line-height:1.4} .auth-mode-status.ok{color:var(--green)}.auth-mode-status.err{color:var(--red)} .auth-google-hero{background:linear-gradient(135deg,var(--surface2),var(--surface));border:1px solid var(--border);border-radius:16px;padding:12px;margin:0 0 18px;display:flex;flex-direction:column;gap:8px} .auth-google-title{font-size:12px;font-weight:800;color:var(--accent2);letter-spacing:.3px} .auth-auto-status{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;line-height:1.45} .auth-auto-status.ok{color:var(--green)}.auth-auto-status.warn{color:var(--yellow)}.auth-auto-status.err{color:var(--red)} .google-main{margin:0;padding:12px 13px;font-size:14px} .auth-email-sep{margin:0 0 18px} .auth-tabs{display:flex;background:var(--surface2);border-radius:10px;padding:3px;margin-bottom:22px;gap:3px} .auth-tab{flex:1;padding:8px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-family:'Syne',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s} .auth-tab.active{background:var(--accent);color:white} .auth-input-wrap{position:relative;margin-bottom:12px} .auth-input-wrap input{padding-right:44px} .auth-eye{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:4px} .auth-btn{width:100%;padding:15px;font-size:15px;border-radius:12px;margin-top:8px} .auth-err{background:rgba(248,113,113,.1);border:1px solid var(--red);border-radius:10px;padding:10px 14px;font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--red);margin-bottom:12px;display:none} .auth-err.show{display:block} .auth-avatar-row{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap} .avatar-pick{width:38px;height:38px;border-radius:50%;border:2px solid var(--border);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;background:var(--surface2);transition:border-color .15s} .avatar-pick.active{border-color:var(--accent)} /* ==== SETUP ==== */ #setup{display:none;flex-direction:column;height:100%} .setup-hdr{padding:44px 24px 20px;background:linear-gradient(160deg,#1a1040 0%,var(--bg) 100%)} [data-theme="light"] .setup-hdr{background:linear-gradient(160deg,#ede9fe 0%,var(--bg) 100%)} .setup-logo{font-size:26px;font-weight:800;letter-spacing:-1px} .setup-logo span{color:var(--accent2)} .setup-sub{font-size:12px;color:var(--muted);margin-top:4px;font-family:'JetBrains Mono',monospace} .setup-body{flex:1;overflow-y:auto;padding:20px 24px 32px} .load-btn{background:var(--surface2);border:1px solid var(--accent);border-radius:10px;color:var(--accent2);font-family:'JetBrains Mono',monospace;font-size:12px;padding:12px;cursor:pointer;width:100%;text-align:center;margin-bottom:6px} .load-btn:active{opacity:.7} .model-box{display:none;flex-direction:column} .model-box>input{border-radius:12px 12px 0 0;border-bottom:none} .model-box select{border-radius:0 0 12px 12px;height:130px;cursor:pointer} .sel-display{display:none;background:var(--user-bg);border:1px solid var(--accent);border-radius:10px;padding:9px 13px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent2);margin-top:6px;word-break:break-all;cursor:pointer} .vision-badge{background:#064e3b;color:#6ee7b7;border-radius:5px;font-size:10px;padding:2px 6px;margin-left:6px;font-family:'JetBrains Mono',monospace} .coll-row{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin-bottom:0} .coll-row span{font-size:13px;color:var(--muted);font-family:'JetBrains Mono',monospace} .chevron{color:var(--accent);font-size:11px;transition:transform .2s} .coll-row.open .chevron{transform:rotate(180deg)} #sysPromptTA{display:none;resize:none;min-height:72px;border-top:none;border-radius:0 0 12px 12px;margin-top:-1px;font-size:13px;margin-bottom:14px} #sysPromptTA.show{display:block} .adv-body{display:none;background:var(--surface2);border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;padding:14px;margin-top:-1px;gap:12px;flex-direction:column;margin-bottom:14px} .adv-body.show{display:flex} .param-row{display:flex;flex-direction:column;gap:5px} .param-label{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;display:flex;justify-content:space-between} .param-label span{color:var(--accent2)} .btn-go{width:100%;padding:17px;font-size:16px;border-radius:14px;margin-top:4px} /* ==== APP ==== */ #app{display:none;flex-direction:column;height:100%;position:relative;overflow:hidden} .offline-bar{display:none;background:#7f1d1d;color:#fca5a5;font-size:11px;font-family:'JetBrains Mono',monospace;padding:5px 14px;text-align:center;flex-shrink:0} .offline-bar.show{display:block} /* -- Sidebar overlay -- */ .sb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:19;opacity:0;pointer-events:none;transition:opacity .3s} .sb-backdrop.show{opacity:1;pointer-events:all} .sidebar{position:absolute;top:0;left:0;height:100%;width:285px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:20;transform:translateX(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1)} .sidebar.open{transform:translateX(0)} .sb-head{padding:14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);flex-shrink:0} .sb-logo{font-size:15px;font-weight:800;flex:1;letter-spacing:-.5px} .sb-logo span{color:var(--accent2)} .sb-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:2px 8px;line-height:1} .sb-close:hover{color:var(--text)} .new-chat-btn{background:var(--accent);border:none;border-radius:8px;color:white;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Syne',sans-serif} .sb-user{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0} .sb-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;overflow:hidden} .sb-user-info{flex:1;min-width:0} .sb-user-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-user-email{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .logout-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:4px;border-radius:6px} .logout-btn:hover{color:var(--red)} /* Usage mini-chart */ .sb-usage{padding:8px 14px;border-bottom:1px solid var(--border);flex-shrink:0} .usage-label{font-size:9px;font-family:'JetBrains Mono',monospace;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px} .usage-bars{display:flex;gap:3px;align-items:flex-end;height:28px} .usage-bar{flex:1;background:var(--accent);border-radius:3px 3px 0 0;min-height:3px;transition:height .3s;opacity:.7;cursor:pointer;position:relative} .usage-bar:hover{opacity:1} .usage-bar-tip{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--surface3);border:1px solid var(--border);border-radius:6px;padding:3px 7px;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text);white-space:nowrap;z-index:5;margin-bottom:3px} .usage-bar:hover .usage-bar-tip{display:block} .sb-search{padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0} .sb-search input{background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:12px;padding:8px 12px;outline:none;width:100%} .sb-search input:focus{border-color:var(--accent)} .chat-list{flex:1;overflow-y:auto;padding:6px} .pinned-label{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:6px 8px 2px;font-family:'JetBrains Mono',monospace} .chat-item{padding:9px 10px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;margin-bottom:2px} .chat-item:hover{background:var(--surface2)} .chat-item.active{background:var(--surface3);border:1px solid var(--border)} .chat-item.pinned-item{border-left:2px solid var(--accent)} .ci-body{flex:1;min-width:0} .ci-title{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);font-weight:600} .ci-meta{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:1px} .ci-rename{font-size:12px;font-weight:600;background:var(--surface3);border:1px solid var(--accent);border-radius:6px;color:var(--text);padding:2px 6px;width:100%;font-family:'Syne',sans-serif;outline:none} .ci-actions{display:flex;gap:2px;opacity:0;flex-shrink:0} .chat-item:hover .ci-actions{opacity:1} @media (hover:none){.ci-actions{opacity:1}} .ci-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:3px 4px;border-radius:4px} .ci-btn:hover{color:var(--text)}.ci-btn.pin-on{color:var(--accent)} .no-results{padding:20px;text-align:center;font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace} .sb-foot{padding:10px 14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;flex-shrink:0} .font-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace} .font-row input{flex:1} .accent-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace} .swatches{display:flex;gap:5px;flex:1} .swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .15s} .swatch:hover{transform:scale(1.2)}.swatch.active{border-color:var(--text)} .foot-btns{display:flex;gap:5px} .foot-btn{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--muted);padding:7px 4px;font-size:11px;cursor:pointer;text-align:center;font-family:'Syne',sans-serif;transition:all .2s} .foot-btn:hover{border-color:var(--accent);color:var(--accent2)} /* -- Chat area -- */ .chat-area{flex:1;display:flex;flex-direction:column;overflow:hidden} .chat-top{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 13px;display:flex;align-items:center;gap:9px;flex-shrink:0} .menu-btn{background:var(--surface2);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:7px 12px;font-size:17px;cursor:pointer;flex-shrink:0} .minfo{flex:1;min-width:0;cursor:pointer} .minfo:hover .mname{color:var(--accent2)} .mname{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s} .mhost{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace} .page-nav{display:flex;gap:5px;align-items:center;flex-shrink:0;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:3px} .page-btn{background:transparent;border:none;border-radius:999px;color:var(--muted);font-size:11px;font-family:'JetBrains Mono',monospace;padding:6px 9px;cursor:pointer;white-space:nowrap} .page-btn.active{background:var(--accent);color:#fff} .top-actions{display:flex;gap:5px;flex-shrink:0} .top-btn{background:none;border:1px solid var(--border);border-radius:9px;color:var(--muted);padding:6px 9px;font-size:12px;cursor:pointer;transition:all .2s} .top-btn:hover{border-color:var(--accent);color:var(--accent2)} .top-btn.focus-active{border-color:var(--accent);color:var(--accent2);background:var(--user-bg)} /* Token bar */ .token-bar{background:var(--surface2);border-bottom:1px solid var(--border);padding:4px 13px;display:flex;gap:10px;align-items:center;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--muted);flex-shrink:0;flex-wrap:wrap} .token-bar span{color:var(--accent2)} /* Workspace pages */ .workspace-page{display:none;flex:1;overflow:auto;padding:18px;gap:16px;flex-direction:column;background: radial-gradient(circle at top left,rgba(124,106,247,.12),transparent 34%), radial-gradient(circle at bottom right,rgba(16,185,129,.08),transparent 30%), var(--bg)} .chat-area:not(.page-chat) .workspace-page{display:flex} .chat-area:not(.page-chat) .chat-search-bar, .chat-area:not(.page-chat) .token-bar, .chat-area:not(.page-chat) .msgs-wrap, .chat-area:not(.page-chat) .inp-wrap{display:none} .ws-section{display:none;flex-direction:column;gap:16px} .chat-area.page-home #ws-home,.chat-area.page-projects #ws-projects,.chat-area.page-tools #ws-tools,.chat-area.page-settings #ws-settings{display:flex} .ws-hero{background:linear-gradient(135deg,rgba(124,106,247,.18),rgba(168,85,247,.08));border:1px solid var(--border);border-radius:26px;padding:20px;display:grid;grid-template-columns:1.4fr .9fr;gap:16px;align-items:stretch;box-shadow:0 18px 55px var(--shadow)} .ws-kicker{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent2);font-family:'JetBrains Mono',monospace;font-weight:700} .ws-title{font-size:30px;font-weight:800;letter-spacing:-1.2px;margin-top:6px;line-height:1} .ws-sub{font-size:13px;color:var(--text2);line-height:1.55;margin-top:10px;max-width:620px} .ws-hero-actions,.ws-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .ws-btn{background:var(--surface2);border:1px solid var(--border);border-radius:12px;color:var(--text);padding:10px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Syne',sans-serif} .ws-btn.primary{background:linear-gradient(135deg,var(--accent),#a855f7);border-color:transparent;color:white} .ws-btn:hover{border-color:var(--accent);color:var(--accent2)} .ws-btn.primary:hover{color:white;filter:brightness(1.05)} .ws-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .ws-stat{background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:18px;padding:14px} .ws-stat strong{display:block;font-size:24px;color:var(--accent2);line-height:1}.ws-stat span{display:block;font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:6px} .ws-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .ws-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))} .ws-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:15px;display:flex;flex-direction:column;gap:10px;min-height:118px;box-shadow:0 12px 35px rgba(0,0,0,.16)} .ws-card.clickable{cursor:pointer;transition:transform .18s,border-color .18s,background .18s} .ws-card.clickable:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--surface2)} .ws-card-top{display:flex;align-items:center;gap:10px}.ws-card-icon{width:38px;height:38px;border-radius:14px;background:var(--user-bg);border:1px solid var(--user-border);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none} .ws-card-title{font-size:14px;font-weight:800;color:var(--text)}.ws-card-desc{font-size:12px;color:var(--muted);line-height:1.45} .ws-card-meta{font-size:10px;color:var(--accent2);font-family:'JetBrains Mono',monospace;margin-top:auto} .ws-list{display:flex;flex-direction:column;gap:8px} .ws-list-row{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;gap:10px;align-items:flex-start;cursor:pointer} .ws-list-row:hover{border-color:var(--accent);background:var(--surface2)} .ws-list-main{flex:1;min-width:0}.ws-list-title{font-size:13px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ws-list-meta{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:4px} .ws-page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .ws-page-title h2{font-size:22px;margin:0}.ws-page-title p{font-size:12px;color:var(--muted);margin-top:4px} .bottom-nav{display:none;position:absolute;left:12px;right:12px;bottom:10px;z-index:18;background:rgba(17,17,26,.88);border:1px solid var(--border);border-radius:20px;backdrop-filter:blur(12px);padding:6px;gap:4px;box-shadow:0 16px 45px var(--shadow)} .bottom-nav button{flex:1;background:transparent;border:none;border-radius:14px;color:var(--muted);font-size:10px;padding:8px 4px;cursor:pointer;font-family:'JetBrains Mono',monospace} .bottom-nav button.active{background:var(--accent);color:#fff} /* Model popup */ .model-popup{position:absolute;top:52px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;z-index:30;width:min(320px,90vw);box-shadow:0 8px 32px var(--shadow);display:none} .model-popup.show{display:block} .mp-title{font-size:13px;font-weight:700;color:var(--accent2);margin-bottom:10px;word-break:break-all} .mp-row{display:flex;justify-content:space-between;font-size:12px;font-family:'JetBrains Mono',monospace;padding:5px 0;border-bottom:1px solid var(--border);color:var(--muted)} .mp-row:last-child{border:none}.mp-row span:last-child{color:var(--text)} .mp-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px} .model-switcher{position:absolute;top:52px;left:13px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px;z-index:31;width:min(440px,calc(100vw - 26px));box-shadow:0 8px 32px var(--shadow);display:none} .model-switcher.show{display:block} .ms-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px} .ms-title{font-size:13px;font-weight:800;color:var(--text);flex:1} .ms-sub{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:2px} .ms-search{width:100%;font-size:12px;padding:9px 11px;margin-bottom:8px} .ms-list{max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:5px} .ms-model{background:var(--surface2);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:9px 10px;text-align:left;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.35;word-break:break-all} .ms-model:hover,.ms-model.active{border-color:var(--accent);background:var(--user-bg);color:var(--accent2)} .ms-model small{display:block;color:var(--muted);font-family:'Syne',sans-serif;font-size:11px;margin-top:3px;word-break:normal} .ms-actions{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap} .ms-empty{font-size:12px;color:var(--muted);padding:12px;text-align:center;border:1px dashed var(--border);border-radius:10px} .custom-model-panel{position:absolute;inset:0;background:rgba(0,0,0,.72);z-index:85;display:none;align-items:center;justify-content:center;padding:14px;backdrop-filter:blur(5px)} .custom-model-panel.show{display:flex} .custom-model-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px var(--shadow)} .custom-model-hdr{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px} .custom-model-title{font-size:15px;font-weight:800;flex:1} .custom-model-body{padding:14px 16px;overflow:auto;display:flex;flex-direction:column;gap:10px} .custom-model-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .custom-model-body label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace} .custom-model-body textarea{min-height:110px;resize:vertical} .custom-profile-list{display:flex;flex-direction:column;gap:6px} .custom-profile-row{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:9px 10px;display:flex;align-items:center;gap:8px} .custom-profile-main{flex:1;min-width:0} .custom-profile-name{font-size:12px;font-weight:800;color:var(--text)} .custom-profile-meta{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chat-quick-menu{position:absolute;left:8px;right:8px;bottom:calc(100% + 8px);background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:8px;z-index:55;display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;box-shadow:0 -14px 40px var(--shadow)} .chat-quick-menu.show{display:grid} .quick-menu-btn{background:var(--surface2);border:1px solid var(--border);border-radius:12px;color:var(--text);padding:10px 9px;font-size:12px;font-weight:700;cursor:pointer;text-align:left;font-family:'Syne',sans-serif} .quick-menu-btn span{display:block;color:var(--muted);font-size:10px;font-weight:500;margin-top:2px} .mobile-new-chat{display:none;position:absolute;right:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:16;width:44px;height:44px;border-radius:50%;border:none;background:var(--accent);color:white;font-size:25px;font-weight:800;box-shadow:0 12px 30px var(--shadow);cursor:pointer} /* Messages */ .msgs-wrap{flex:1;position:relative;overflow:hidden} .msgs{height:100%;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px} .msg{max-width:86%;display:flex;flex-direction:column;gap:3px;animation:fu .22s ease} @keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .msg.user{align-self:flex-end;align-items:flex-end} .msg.ai{align-self:flex-start;align-items:flex-start;max-width:92%} .msg-hdr{display:flex;align-items:center;gap:8px;padding:0 4px} .mrole{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)} .msg.user .mrole{color:var(--accent2)} .msg-time{font-size:9px;color:var(--muted);font-family:'JetBrains Mono',monospace} .mbubble{padding:11px 15px;border-radius:18px;line-height:1.65;word-break:break-word} .msg.user .mbubble{background:var(--user-bg);border:1px solid var(--user-border);border-bottom-right-radius:4px;font-size:var(--chat-fs,14px);white-space:pre-wrap} .msg.ai .mbubble{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px;font-size:var(--chat-fs,14px)} /* Edit wrap */ .msg-edit-wrap{display:none;flex-direction:column;gap:6px;width:100%} .msg-edit-wrap.show{display:flex} .msg-edit-ta{background:var(--surface2);border:1px solid var(--accent);border-radius:14px;color:var(--text);font-family:'Syne',sans-serif;font-size:14px;padding:11px 15px;outline:none;resize:none;width:100%;min-height:60px;line-height:1.5} .msg-edit-btns{display:flex;gap:6px;justify-content:flex-end} .edit-save{background:var(--accent);border:none;border-radius:8px;color:white;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Syne',sans-serif} .edit-cancel{background:none;border:1px solid var(--border);border-radius:8px;color:var(--muted);padding:6px 14px;font-size:12px;cursor:pointer} /* Msg actions */ .msg-actions{display:flex;gap:4px;margin-top:3px;opacity:0;transition:opacity .15s;flex-wrap:wrap} .msg:hover .msg-actions{opacity:1} .act-btn{background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--muted);font-size:11px;padding:3px 8px;cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all .15s;user-select:none} .act-btn:hover{border-color:var(--accent);color:var(--accent2)} .act-btn.ok{color:var(--green)!important;border-color:var(--green)!important} .act-btn.tts-active{color:var(--yellow)!important;border-color:var(--yellow)!important} /* Reactions */ .reaction-bar{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap} .react-btn{background:var(--surface2);border:1px solid var(--border);border-radius:20px;font-size:14px;padding:2px 7px;cursor:pointer;transition:all .15s;line-height:1.4} .react-btn:hover{transform:scale(1.15)} .react-btn.active{background:var(--user-bg);border-color:var(--accent)} /* Markdown */ .mbubble h1,.mbubble h2,.mbubble h3{color:var(--accent2);margin:10px 0 5px;font-weight:700} .mbubble h1{font-size:1.1em}.mbubble h2{font-size:1em}.mbubble h3{font-size:.95em} .mbubble p{margin:4px 0}.mbubble ul,.mbubble ol{margin:6px 0 6px 18px}.mbubble li{margin:3px 0} .mbubble a{color:var(--accent2);text-decoration:underline;word-break:break-all} .mbubble strong{color:var(--accent2);font-weight:700}.mbubble em{font-style:italic;color:var(--text2)} .mbubble table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12px;font-family:'JetBrains Mono',monospace;display:block;overflow-x:auto} .mbubble th,.mbubble td{border:1px solid var(--border);padding:6px 10px;text-align:left;white-space:nowrap} .mbubble th{background:var(--surface2);color:var(--accent2)} .mbubble hr{border:none;border-top:1px solid var(--border);margin:10px 0} .mbubble blockquote{border-left:3px solid var(--accent);padding-left:10px;color:var(--muted);margin:6px 0} .code-wrap{position:relative;margin:8px 0} .code-wrap pre{border-radius:10px;padding:30px 12px 12px;overflow-x:auto;font-size:12px;line-height:1.5;background:var(--code-bg)!important;margin:0} .code-lang{position:absolute;top:8px;left:12px;font-size:9px;color:var(--muted);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:1px} .copy-code-btn{position:absolute;top:6px;right:8px;background:var(--surface3);border:1px solid var(--border);border-radius:6px;color:var(--muted);font-size:11px;padding:3px 8px;cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all .2s} .copy-code-btn:hover{border-color:var(--accent);color:var(--accent2)}.copy-code-btn.ok{color:var(--green);border-color:var(--green)} .mbubble code:not(pre code){background:var(--surface3);border-radius:4px;padding:1px 5px;font-family:'JetBrains Mono',monospace;font-size:.88em;color:var(--accent2)} /* Files */ .msg-files{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;justify-content:flex-end} .msg-file-thumb{border-radius:10px;border:1px solid var(--user-border);max-width:150px;max-height:150px;object-fit:cover;cursor:pointer} .msg-file-chip{background:var(--user-bg);border:1px solid var(--user-border);border-radius:8px;padding:6px 10px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent2);display:flex;align-items:center;gap:6px;max-width:180px} .msg-file-chip .fname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Thinking */ .thinking{display:flex;gap:5px;align-items:center;padding:2px 0} .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:bk 1.2s infinite} .dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s} @keyframes bk{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}} /* Scroll button */ .scroll-btn{position:absolute;bottom:14px;right:14px;background:var(--accent);border:none;border-radius:50%;width:38px;height:38px;color:white;font-size:18px;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 16px var(--shadow);z-index:5} .scroll-btn.show{display:flex} .scroll-badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;border-radius:999px;background:var(--red);color:white;font-size:10px;font-family:'JetBrains Mono',monospace;display:none;align-items:center;justify-content:center;padding:0 5px} .scroll-badge.show{display:flex} .draft-badge{display:inline-flex;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--user-bg);border:1px solid var(--user-border);font-size:9px;color:var(--accent2);font-family:'JetBrains Mono',monospace} .undo-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 12px;display:flex;align-items:center;gap:10px;z-index:120;box-shadow:0 12px 30px var(--shadow);transition:all .2s} .undo-toast.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)} .undo-toast button{background:var(--accent);border:none;border-radius:9px;color:white;padding:6px 10px;font-weight:700;cursor:pointer} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} #bgCanvas{display:none} } /* Quick prompts */ .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px} .empty-icon{font-size:40px;opacity:.3} .empty-title{font-size:14px;font-weight:700;color:var(--muted)} .quick-prompts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:380px} .qp-btn{background:var(--surface2);border:1px solid var(--border);border-radius:12px;color:var(--text2);font-size:12px;padding:10px 12px;cursor:pointer;text-align:left;font-family:'Syne',sans-serif;line-height:1.4;transition:all .2s} .qp-btn:hover{border-color:var(--accent);background:var(--surface3)} .qp-icon{font-size:18px;margin-bottom:4px;display:block} .qp-hint{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;display:block;margin-top:2px} /* -- Slash command menu -- */ .slash-menu{position:absolute;bottom:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:14px 14px 0 0;padding:6px;display:none;z-index:50;box-shadow:0 -8px 24px var(--shadow);max-height:240px;overflow-y:auto} .slash-menu.show{display:block} .slash-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;transition:background .15s} .slash-item:hover,.slash-item.selected{background:var(--surface2)} .slash-icon{font-size:18px;width:28px;text-align:center;flex-shrink:0} .slash-name{font-size:13px;font-weight:700;color:var(--text);font-family:'JetBrains Mono',monospace} .slash-desc{font-size:11px;color:var(--muted);margin-top:1px} /* -- Voice modal -- */ .voice-modal{position:absolute;inset:0;background:rgba(0,0,0,.8);z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;backdrop-filter:blur(6px)} .voice-modal.show{display:flex} .voice-orb{width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);border:3px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:40px;animation:orb-idle 2s infinite;cursor:pointer} .voice-orb.listening{animation:orb-pulse .6s infinite alternate} @keyframes orb-idle{0%,100%{box-shadow:0 0 20px var(--accent)}50%{box-shadow:0 0 40px var(--accent)}} @keyframes orb-pulse{from{transform:scale(1);box-shadow:0 0 20px var(--accent)}to{transform:scale(1.15);box-shadow:0 0 60px var(--accent)}} .voice-transcript{font-size:16px;color:var(--text);text-align:center;max-width:300px;min-height:40px;font-family:'Syne',sans-serif;padding:0 20px} .voice-interim{color:var(--muted);font-style:italic} .voice-status{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--muted)} .voice-lang-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center} .vlang-btn{background:var(--surface2);border:1px solid var(--border);border-radius:20px;color:var(--muted);font-size:12px;padding:4px 12px;cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all .15s} .vlang-btn.active{border-color:var(--accent);color:var(--accent2);background:var(--user-bg)} .voice-actions{display:flex;gap:10px} .voice-btn-send{background:var(--accent);border:none;border-radius:10px;color:white;padding:10px 20px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Syne',sans-serif} .voice-btn-cancel{background:none;border:1px solid var(--border);border-radius:10px;color:var(--muted);padding:10px 20px;font-size:14px;cursor:pointer} /* -- Focus mode -- */ .focus-mode .msgs{padding:40px min(80px, 10vw)} .focus-mode .msg.ai{max-width:100%;align-self:stretch} .focus-mode .msg.user{max-width:70%} .focus-mode .chat-top,.focus-mode .token-bar{display:none} .focus-exit{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.4);border:1px solid var(--border);border-radius:9px;color:var(--text);padding:6px 12px;font-size:12px;cursor:pointer;z-index:10;font-family:'JetBrains Mono',monospace} /* -- Input area -- */ .inp-wrap{background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;position:relative} .attach-bar{display:none;padding:8px 12px 0;gap:8px;flex-wrap:wrap} .attach-bar.has{display:flex} .attach-chip{background:var(--surface2);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;gap:6px;padding:5px 8px 5px 10px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text);max-width:160px} .attach-chip img{width:26px;height:26px;border-radius:5px;object-fit:cover;flex-shrink:0} .attach-chip .aname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .attach-chip .atype{color:var(--muted);font-size:9px} .attach-rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0 2px;flex-shrink:0} .attach-rm:hover{color:var(--red)} .inp-area{padding:9px 12px 22px;display:flex;gap:7px;align-items:flex-end} .inp-left{display:flex;gap:5px;align-items:flex-end;flex-shrink:0} .iab{background:var(--surface2);border:1px solid var(--border);border-radius:12px;color:var(--muted);width:42px;height:42px;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0} .iab:hover,.iab.has{border-color:var(--accent);color:var(--accent2)} .iab.recording{border-color:var(--red);color:var(--red);animation:pulse 1s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} .inp-mid{flex:1;display:flex;flex-direction:column;gap:3px} .msg-inp{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:14px;color:var(--text);font-family:'Syne',sans-serif;font-size:15px;padding:11px 15px;outline:none;resize:none;max-height:120px;line-height:1.5;transition:border-color .2s} .msg-inp:focus{border-color:var(--accent)} .inp-meta{display:flex;justify-content:flex-end;padding:0 3px} .live-ctr{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--muted)} .live-ctr.warn{color:var(--yellow)}.live-ctr.over{color:var(--red)} .inp-right{display:flex;gap:5px;align-items:flex-end;flex-shrink:0} .snd-btn{background:linear-gradient(135deg,var(--accent),#a855f7);border:none;border-radius:12px;color:white;width:42px;height:42px;font-size:21px;cursor:pointer;display:flex;align-items:center;justify-content:center} .snd-btn:disabled{opacity:.3} .stop-btn{background:#7f1d1d;border:1px solid var(--red);border-radius:12px;color:var(--red);width:42px;height:42px;font-size:18px;cursor:pointer;display:none;align-items:center;justify-content:center} .stop-btn.show{display:flex} /* Drag overlay */ .drag-overlay{display:none;position:absolute;inset:0;background:rgba(124,106,247,.1);border:3px dashed var(--accent);z-index:100;align-items:center;justify-content:center;flex-direction:column;gap:10px;pointer-events:none} .drag-overlay.show{display:flex} .drag-overlay p{font-size:18px;font-weight:700;color:var(--accent2)} /* Lightbox */ .lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:200;align-items:center;justify-content:center} .lightbox.show{display:flex} .lightbox img{max-width:95vw;max-height:90vh;border-radius:12px;object-fit:contain} .lb-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.12);border:none;color:white;font-size:24px;cursor:pointer;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center} #fileInput{display:none} .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--red);color:white;border-radius:10px;padding:9px 18px;font-size:13px;z-index:999;opacity:0;transition:opacity .3s;pointer-events:none;max-width:90vw;text-align:center;box-shadow:0 4px 20px var(--shadow)} .toast.show{opacity:1}.toast.info{background:var(--accent)}.toast.ok{background:var(--green);color:#000} ::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} /* ==== CONNECTORS PANEL ==== */ .conn-panel{position:absolute;inset:0;background:var(--bg);z-index:40;display:none;flex-direction:column} .conn-panel.show{display:flex} .conn-hdr{padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface)} .conn-hdr-title{font-size:15px;font-weight:800;flex:1;letter-spacing:-.3px} .conn-hdr-title span{color:var(--accent2)} .conn-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:2px 8px} .conn-close:hover{color:var(--text)} .conn-body{flex:1;overflow-y:auto;padding:16px} .conn-section-title{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:16px 0 8px;font-family:'JetBrains Mono',monospace} .conn-section-title:first-child{margin-top:0} /* Connector card */ .conn-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:10px;overflow:hidden;transition:border-color .2s} .conn-card.connected{border-color:var(--green)} .conn-card.error{border-color:var(--red)} .conn-card-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer} .conn-card-head:hover{background:var(--surface2)} .conn-icon{font-size:22px;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface2);flex-shrink:0} .conn-info{flex:1;min-width:0} .conn-name{font-size:13px;font-weight:700;color:var(--text)} .conn-desc{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:1px} .conn-status{display:flex;align-items:center;gap:6px;flex-shrink:0} .conn-dot{width:8px;height:8px;border-radius:50%;background:var(--border)} .conn-dot.ok{background:var(--green)}.conn-dot.err{background:var(--red)}.conn-dot.testing{background:var(--yellow);animation:pulse 1s infinite} .conn-toggle{background:var(--surface3);border:none;border-radius:20px;color:var(--muted);font-size:11px;padding:4px 10px;cursor:pointer;font-family:'JetBrains Mono',monospace;white-space:nowrap} .conn-body-inner{display:none;padding:0 14px 14px;border-top:1px solid var(--border)} .conn-body-inner.open{display:block} .conn-field{margin-top:10px} .conn-field label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px;font-family:'JetBrains Mono',monospace} .conn-field input,.conn-field select,.conn-field textarea{font-size:12px;padding:10px 12px} .conn-field textarea{resize:none;min-height:60px;font-size:11px} .conn-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap} .conn-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;padding:7px 12px;cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all .15s} .conn-btn:hover{border-color:var(--accent);color:var(--accent2)} .conn-btn.primary{background:var(--accent);border-color:var(--accent);color:white} .conn-btn.primary:hover{opacity:.85} .conn-btn.danger{border-color:var(--red);color:var(--red)} .conn-result{margin-top:10px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text2);max-height:180px;overflow-y:auto;display:none;white-space:pre-wrap;word-break:break-all} .conn-result.show{display:block} /* Drive file list */ .drive-file{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;transition:background .15s} .drive-file:hover{background:var(--surface3)} .drive-file-icon{font-size:16px;flex-shrink:0} .drive-file-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-family:'JetBrains Mono',monospace} .drive-file-size{font-size:10px;color:var(--muted);flex-shrink:0} /* Calendar events */ .cal-event{padding:8px 10px;border-radius:8px;border-left:3px solid var(--accent);background:var(--surface2);margin-bottom:6px} .cal-event-title{font-size:12px;font-weight:700;color:var(--text)} .cal-event-time{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:2px} /* Gmail */ .gmail-msg{padding:8px 10px;border-radius:8px;background:var(--surface2);margin-bottom:6px;cursor:pointer;transition:background .15s} .gmail-msg:hover{background:var(--surface3)} .gmail-from{font-size:11px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gmail-subj{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .gmail-snippet{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;font-family:'JetBrains Mono',monospace} /* Ollama models */ .ollama-model{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;transition:background .15s} .ollama-model:hover{background:var(--surface3)} .ollama-model.selected{background:var(--user-bg);border:1px solid var(--accent)} .ollama-model-name{font-size:12px;font-family:'JetBrains Mono',monospace;flex:1} .ollama-model-size{font-size:10px;color:var(--muted)} /* Conn sidebar button */ .conn-sidebar-btn{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .15s;margin-bottom:2px;border:none;background:none;width:100%;text-align:left} .conn-sidebar-btn:hover{background:var(--surface2)} .conn-sidebar-btn .conn-sidebar-dot{width:7px;height:7px;border-radius:50%;background:var(--border);flex-shrink:0} .conn-sidebar-btn .conn-sidebar-dot.ok{background:var(--green)} .conn-sidebar-btn .conn-sidebar-label{font-size:12px;color:var(--text);flex:1} .conn-sidebar-btn .conn-sidebar-count{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--muted)} /* ==== ACCOUNT PANEL ==== */ .acct-panel{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)} .acct-panel.show{display:flex} .acct-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px var(--shadow)} .acct-hdr{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;position:sticky;top:0;background:var(--surface);z-index:2;border-radius:24px 24px 0 0} .acct-hdr-title{font-size:16px;font-weight:800;flex:1} .acct-back{background:var(--surface2);border:1px solid var(--border);border-radius:10px;color:var(--text2);font-size:12px;font-family:'JetBrains Mono',monospace;padding:7px 10px;cursor:pointer;transition:all .15s;white-space:nowrap} .acct-back:hover{border-color:var(--accent);color:var(--accent2)} .acct-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:2px 8px;border-radius:8px} .acct-close:hover{color:var(--text)} .acct-body{padding:20px 24px 28px;display:flex;flex-direction:column;gap:20px} .acct-section{display:flex;flex-direction:column;gap:10px} .acct-section-title{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace} .acct-avatar-big{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#a855f7);display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto;cursor:pointer;position:relative;overflow:hidden} .acct-avatar-big::after{content:'✏️';position:absolute;bottom:0;right:-2px;background:var(--surface);border:2px solid var(--border);border-radius:50%;width:24px;height:24px;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:2} .acct-avatar-picker{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .acct-avatar-opt{width:40px;height:40px;border-radius:50%;border:2px solid var(--border);cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;background:var(--surface2);transition:all .15s;overflow:hidden} .acct-avatar-opt:hover{transform:scale(1.1)} .acct-avatar-opt.active{border-color:var(--accent);background:var(--user-bg)} .acct-field{display:flex;flex-direction:column;gap:5px} .acct-field label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace} .acct-field input{font-size:14px;padding:12px 14px} .acct-field input:disabled{opacity:.5;cursor:not-allowed} .acct-field .hint{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:2px} .acct-btn{border:none;border-radius:12px;font-family:'Syne',sans-serif;font-weight:700;font-size:14px;padding:13px;cursor:pointer;width:100%;transition:opacity .2s} .acct-btn:active{opacity:.8} .acct-btn.primary{background:linear-gradient(135deg,var(--accent),#a855f7);color:white} .acct-btn.secondary{background:var(--surface2);border:1px solid var(--border);color:var(--text)} .acct-btn.secondary:hover{border-color:var(--accent)} .acct-btn.danger{background:rgba(248,113,113,.08);border:1px solid var(--red);color:var(--red)} .acct-btn.danger:hover{background:rgba(248,113,113,.18)} .acct-divider{border:none;border-top:1px solid var(--border)} .acct-msg{font-size:12px;font-family:'JetBrains Mono',monospace;padding:8px 12px;border-radius:8px;display:none} .acct-msg.ok{display:block;background:rgba(52,211,153,.1);border:1px solid var(--green);color:var(--green)} .acct-msg.err{display:block;background:rgba(248,113,113,.1);border:1px solid var(--red);color:var(--red)} .acct-tabs{display:flex;background:var(--surface2);border-radius:10px;padding:3px;gap:3px;margin-bottom:4px} .acct-tab{flex:1;padding:8px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-family:'Syne',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s} .acct-tab.active{background:var(--accent);color:white} .acct-tab-pane{display:none}.acct-tab-pane.show{display:flex;flex-direction:column;gap:12px} .users-list{display:flex;flex-direction:column;gap:6px} .user-row{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:10px;transition:border-color .15s} .user-row.me{border-color:var(--accent)} .user-row-avatar{font-size:22px;width:36px;height:36px;border-radius:50%;background:var(--surface3);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden} .user-row-info{flex:1;min-width:0} .user-row-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-row-email{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-row-badge{font-size:9px;background:var(--accent);color:white;border-radius:4px;padding:1px 5px;font-family:'JetBrains Mono',monospace;flex-shrink:0} .user-row-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:4px 6px;border-radius:6px;flex-shrink:0} .user-row-del:hover{color:var(--red)} /* ==== ROLES & ADMIN ==== */ .role-badge{font-size:9px;border-radius:5px;padding:2px 7px;font-family:'JetBrains Mono',monospace;font-weight:700;flex-shrink:0} .role-badge.admin{background:rgba(251,191,36,.15);border:1px solid var(--yellow);color:var(--yellow)} .role-badge.manager{background:rgba(52,211,153,.12);border:1px solid var(--green);color:var(--green)} .role-badge.user{background:var(--surface3);border:1px solid var(--border);color:var(--muted)} .role-select{font-size:11px;padding:4px 8px;border-radius:7px;background:var(--surface3);border:1px solid var(--border);color:var(--text);cursor:pointer} /* Invite code box */ .invite-box{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px} .invite-code{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:800;letter-spacing:4px;color:var(--accent2);text-align:center;padding:10px;background:var(--surface3);border-radius:8px;cursor:pointer;margin:8px 0;border:1px dashed var(--accent)} .invite-code:hover{background:var(--user-bg)} .invite-meta{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;text-align:center} .invite-list{display:flex;flex-direction:column;gap:6px;margin-top:8px} .invite-row{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:9px} .invite-row-code{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--accent2);flex:1} .invite-row-used{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--muted)} .invite-row-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 5px} .invite-row-del:hover{color:var(--red)} /* Google login button */ .google-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:white;border:1px solid #ddd;border-radius:12px;color:#333;font-family:'Syne',sans-serif;font-size:14px;font-weight:600;padding:13px;cursor:pointer;width:100%;transition:box-shadow .2s} .google-btn:hover{box-shadow:0 2px 12px rgba(0,0,0,.15)} .google-btn svg{flex-shrink:0} .auth-separator{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;font-family:'JetBrains Mono',monospace} .auth-separator::before,.auth-separator::after{content:'';flex:1;height:1px;background:var(--border)} /* EmailJS config in admin */ .emailjs-cfg{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px} .emailjs-cfg input{font-size:12px;padding:9px 12px} .prompt-panel{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px)} .prompt-panel.show{display:flex} .prompt-card{background:var(--surface);border:1px solid var(--border);border-radius:24px 24px 0 0;width:100%;max-width:600px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 -8px 40px var(--shadow)} .prompt-hdr{padding:16px 20px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0} .prompt-hdr-title{font-size:15px;font-weight:800;flex:1} .prompt-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:2px 8px} .prompt-search-row{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;gap:8px;flex-shrink:0} .prompt-search-row input{flex:1;font-size:13px;padding:9px 13px} .prompt-add-btn{background:var(--accent);border:none;border-radius:10px;color:white;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:'Syne',sans-serif} .prompt-cats{display:flex;gap:6px;padding:10px 16px;overflow-x:auto;flex-shrink:0;scrollbar-width:none} .prompt-cats::-webkit-scrollbar{display:none} .prompt-cat-btn{background:var(--surface2);border:1px solid var(--border);border-radius:20px;color:var(--muted);font-size:11px;padding:5px 12px;cursor:pointer;white-space:nowrap;font-family:'JetBrains Mono',monospace;transition:all .15s;flex-shrink:0} .prompt-cat-btn.active{background:var(--accent);border-color:var(--accent);color:white} .prompt-list{flex:1;overflow-y:auto;padding:10px 16px;display:flex;flex-direction:column;gap:8px} .prompt-item{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:12px 14px;cursor:pointer;transition:all .15s;position:relative} .prompt-item:hover{border-color:var(--accent);background:var(--surface3)} .prompt-item-top{display:flex;align-items:center;gap:8px;margin-bottom:5px} .prompt-item-icon{font-size:18px;flex-shrink:0} .prompt-item-name{font-size:13px;font-weight:700;flex:1;color:var(--text)} .prompt-item-cat{font-size:9px;background:var(--surface3);border:1px solid var(--border);border-radius:5px;padding:2px 6px;color:var(--muted);font-family:'JetBrains Mono',monospace;white-space:nowrap} .prompt-item-text{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .prompt-item-actions{display:flex;gap:5px;margin-top:8px;opacity:0;transition:opacity .15s} .prompt-item:hover .prompt-item-actions{opacity:1} .prompt-item-btn{background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--muted);font-size:11px;padding:3px 9px;cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all .15s} .prompt-item-btn:hover{border-color:var(--accent);color:var(--accent2)} .prompt-item-btn.danger:hover{border-color:var(--red);color:var(--red)} /* Prompt editor */ .prompt-editor{display:none;flex-direction:column;gap:10px;padding:16px;border-top:1px solid var(--border);flex-shrink:0;background:var(--surface)} .prompt-editor.show{display:flex} .prompt-editor-title{font-size:12px;font-weight:700;color:var(--text);margin-bottom:2px} .prompt-editor input{font-size:13px;padding:10px 13px} .prompt-editor textarea{resize:none;min-height:80px;font-size:13px;padding:10px 13px} .prompt-editor-row{display:flex;gap:8px} .prompt-editor-row input{flex:1} .prompt-editor select{font-size:13px;padding:10px 13px} .prompt-editor-btns{display:flex;gap:8px} /* ==== STATS PANEL ==== */ .stats-panel{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)} .stats-panel.show{display:flex} .stats-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px var(--shadow)} .stats-hdr{padding:18px 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;position:sticky;top:0;background:var(--surface);z-index:2;border-radius:24px 24px 0 0} .stats-hdr-title{font-size:15px;font-weight:800;flex:1} .stats-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:2px 8px} .stats-body{padding:16px 20px 24px;display:flex;flex-direction:column;gap:16px} /* Stat cards row */ .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .stat-card{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px} .stat-card-val{font-size:22px;font-weight:800;color:var(--accent2);letter-spacing:-1px} .stat-card-label{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:1px} .stat-card-sub{font-size:11px;color:var(--text2);font-family:'JetBrains Mono',monospace} /* Chart */ .stats-chart-title{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:8px} .stats-bar-chart{display:flex;align-items:flex-end;gap:4px;height:80px;padding:0 2px} .stats-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%} .stats-bar{width:100%;border-radius:4px 4px 0 0;background:var(--accent);opacity:.7;transition:height .4s,opacity .2s;min-height:3px;cursor:pointer} .stats-bar:hover{opacity:1} .stats-bar-label{font-size:8px;color:var(--muted);font-family:'JetBrains Mono',monospace;text-align:center;white-space:nowrap} /* Top models */ .stats-model-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)} .stats-model-row:last-child{border:none} .stats-model-name{font-size:12px;font-family:'JetBrains Mono',monospace;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stats-model-bar-wrap{width:80px;height:6px;background:var(--border);border-radius:3px;overflow:hidden;flex-shrink:0} .stats-model-bar{height:100%;background:var(--accent);border-radius:3px} .stats-model-val{font-size:11px;color:var(--accent2);font-family:'JetBrains Mono',monospace;flex-shrink:0;min-width:50px;text-align:right} /* Period selector */ .stats-period{display:flex;background:var(--surface2);border-radius:10px;padding:3px;gap:3px;margin-bottom:4px} .stats-period-btn{flex:1;padding:7px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-family:'Syne',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s} .stats-period-btn.active{background:var(--accent);color:white} /* Enhanced account - bio field */ .acct-bio-wrap{position:relative} .acct-bio-wrap textarea{resize:none;min-height:60px;font-size:13px;padding:10px 13px} .acct-char-count{position:absolute;bottom:8px;right:10px;font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace} /* Stats mini in account */ .acct-stat-row{display:flex;gap:8px} .acct-stat-box{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center} .acct-stat-num{font-size:18px;font-weight:800;color:var(--accent2)} .acct-stat-lbl{font-size:9px;color:var(--muted);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:1px;margin-top:2px} /* Session info */ .session-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px} .session-row:last-child{border:none} .session-label{color:var(--muted);font-family:'JetBrains Mono',monospace} .session-val{color:var(--text);font-weight:600} /* ==== MEMORY & PRIVATE MESSAGE PANELS ==== */ .memory-panel,.private-panel{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:110;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(5px)} .memory-panel.show,.private-panel.show{display:flex} .memory-card,.private-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 70px var(--shadow);overflow:hidden} .memory-hdr,.private-hdr{padding:16px 20px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0} .memory-hdr-title,.private-hdr-title{font-size:15px;font-weight:800;flex:1;letter-spacing:-.3px} .memory-close,.private-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:2px 8px;border-radius:8px} .memory-close:hover,.private-close:hover{color:var(--text)} .memory-body,.private-body{padding:16px 20px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:14px} .memory-note,.private-note{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-size:11px;color:var(--text2);font-family:'JetBrains Mono',monospace;line-height:1.45} .memory-toggle{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:12px} .memory-toggle input{width:auto;accent-color:var(--accent)} .memory-toggle-label{font-size:13px;font-weight:700;flex:1} .memory-toggle-sub{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:2px} .memory-tools,.private-tools{display:flex;gap:8px;flex-wrap:wrap} .memory-tools .acct-btn,.private-tools .acct-btn{width:auto;flex:1;min-width:120px;padding:10px;font-size:12px} .memory-editor,.private-editor{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:9px} .memory-editor-row{display:flex;gap:8px} .memory-editor-row input{flex:1}.memory-editor-row select{width:130px;flex-shrink:0} .memory-editor textarea,.private-editor textarea{resize:none;min-height:78px;font-size:13px} .memory-list,.pm-list{display:flex;flex-direction:column;gap:8px} .memory-item,.pm-item{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:12px;transition:border-color .15s} .memory-item.inactive{opacity:.55}.memory-item:hover,.pm-item:hover{border-color:var(--accent)} .memory-item-top,.pm-item-top{display:flex;align-items:center;gap:8px;margin-bottom:5px} .memory-chip,.pm-chip{font-size:9px;background:var(--surface3);border:1px solid var(--border);border-radius:999px;padding:2px 7px;color:var(--muted);font-family:'JetBrains Mono',monospace;white-space:nowrap} .memory-title,.pm-title{font-size:13px;font-weight:800;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .memory-text,.pm-text{font-size:12px;color:var(--text2);line-height:1.5;white-space:pre-wrap;word-break:break-word} .memory-meta,.pm-meta{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:6px} .memory-actions,.pm-actions{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap} .memory-actions button,.pm-actions button{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:11px;padding:5px 8px;cursor:pointer;font-family:'JetBrains Mono',monospace} .memory-actions button:hover,.pm-actions button:hover{border-color:var(--accent);color:var(--accent2)} .memory-actions button.danger:hover,.pm-actions button.danger:hover{border-color:var(--red);color:var(--red)} .pm-tabs{display:flex;background:var(--surface2);border-radius:10px;padding:3px;gap:3px} .pm-tab{flex:1;padding:8px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-family:'Syne',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s} .pm-tab.active{background:var(--accent);color:white} .pm-pane{display:none;flex-direction:column;gap:8px}.pm-pane.show{display:flex} .pm-unread{border-color:var(--accent);background:var(--user-bg)} .pm-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0} .pm-empty,.memory-empty{font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace;text-align:center;padding:18px;border:1px dashed var(--border);border-radius:12px;background:var(--surface2)} .pm-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;border-radius:999px;background:var(--red);color:white;font-size:10px;font-family:'JetBrains Mono',monospace;margin-left:3px;padding:0 5px} .mem-mini-count{font-size:10px;color:var(--accent2);font-family:'JetBrains Mono',monospace} /* Better wrapping after adding memory/message buttons */ .foot-btns{flex-wrap:wrap} .foot-btn{min-width:calc(33.33% - 5px)} /* ==== blocco 2 (ex secondo