:root{
--accent:#4F7CFF; --accent-2:#7C9BFF; --accent-soft:rgba(79,124,255,.14);
--bg:#0A0C12; --surface:#12141C; --surface-2:#181B26; --surface-3:#1F2330;
--border:#242838; --text:#E9EBF3; --text-dim:#8A90A6; --text-faint:#565C72;
--radius:18px; --radius-sm:12px;
--danger:#F4536B; --ok:#3DD9A4;
}
[data-theme="light"]{
--bg:#F6F7FA; --surface:#FFFFFF; --surface-2:#F0F1F5; --surface-3:#E7E9EF;
--border:#E3E5EC; --text:#14151C; --text-dim:#666C80; --text-faint:#9AA0B4;
--accent-soft:rgba(79,124,255,.10);
}
[data-accent="purple"]{--accent:#8B5CF6;--accent-2:#A78BFA;}
[data-accent="cyan"]{--accent:#06B6D4;--accent-2:#22D3EE;}
[data-accent="green"]{--accent:#10B981;--accent-2:#34D399;}
[data-accent="red"]{--accent:#F4436B;--accent-2:#FB7189;}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; margin:0; overscroll-behavior:none;}
body{
background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif;
font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand,.logo-wrap{font-family:'Space Grotesk',sans-serif;}
::selection{background:var(--accent-soft); color:var(--text);}
button{font-family:inherit; cursor:pointer;}
a{color:var(--accent-2);}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}
/* ===== App shell ===== */
#app{display:flex; height:100vh; height:100dvh; width:100vw; overflow:hidden;}
/* ===== Sidebar ===== */
#sidebar{
width:272px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border);
display:flex; flex-direction:column; transition:transform .25s ease; z-index:40;
}
#sidebar .side-top{padding:16px 14px 8px;}
.brand-row{display:flex; align-items:center; gap:10px; padding:6px 6px 14px;}
.logo-mark{width:30px; height:30px; flex-shrink:0; position:relative;}
.logo-mark svg{width:100%; height:100%; display:block;}
.brand{font-weight:700; font-size:17px; letter-spacing:.2px;}
.brand .dot{color:var(--accent);}
.new-chat-btn{
display:flex; align-items:center; gap:9px; width:100%; padding:11px 13px; border-radius:var(--radius-sm);
background:var(--accent); color:#fff; border:none; font-weight:600; font-size:14px;
box-shadow:0 4px 14px -6px var(--accent);
}
.new-chat-btn:hover{filter:brightness(1.08);}
.search-wrap{position:relative; margin-top:10px;}
.search-wrap input{
width:100%; padding:9px 12px 9px 34px; border-radius:var(--radius-sm); border:1px solid var(--border);
background:var(--surface-2); color:var(--text); font-size:13.5px;
}
.search-wrap svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.5; width:15px; height:15px;}
#chat-list{flex:1; overflow-y:auto; padding:10px 10px 6px;}
.chat-group-label{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-faint); padding:12px 8px 6px; font-weight:600;}
.chat-item{
display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:10px; margin-bottom:2px;
color:var(--text-dim); font-size:13.5px; position:relative; group:hover;
}
.chat-item:hover, .chat-item.active{background:var(--surface-2); color:var(--text);}
.chat-item.active{color:var(--text);}
.chat-item .ttl{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-item .actions{display:none; gap:4px;}
.chat-item:hover .actions{display:flex;}
.chat-item .actions button{background:none; border:none; color:var(--text-faint); padding:3px; border-radius:6px;}
.chat-item .actions button:hover{color:var(--danger); background:var(--surface-3);}
.side-bottom{padding:10px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:2px;}
.side-btn{
display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; border:none; background:none;
color:var(--text-dim); font-size:13.5px; width:100%; text-align:left;
}
.side-btn:hover{background:var(--surface-2); color:var(--text);}
#sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:35;}
/* ===== Main column ===== */
#main{flex:1; display:flex; flex-direction:column; min-width:0; position:relative;}
#topbar{
display:flex; align-items:center; justify-content:space-between; padding:10px 16px; gap:10px;
border-bottom:1px solid var(--border); flex-shrink:0; background:var(--bg);
}
.icon-btn{
display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px;
border:1px solid transparent; background:none; color:var(--text-dim);
}
.icon-btn:hover{background:var(--surface-2); color:var(--text);}
#topbar .title{font-weight:600; font-size:14.5px; color:var(--text-dim); display:flex; align-items:center; gap:8px;}
.mode-pill{
font-size:11.5px; padding:3px 9px; border-radius:20px; background:var(--accent-soft); color:var(--accent-2);
font-weight:600; display:flex; align-items:center; gap:5px;
}
#topbar-right{display:flex; align-items:center; gap:6px;}
/* ===== Scroll area ===== */
#scroll{flex:1; overflow-y:auto; padding:22px 0 10px;}
#thread{max-width:780px; margin:0 auto; padding:0 16px; display:flex; flex-direction:column; gap:22px;}
/* ===== Welcome ===== */
#welcome{max-width:680px; margin:0 auto; padding:8vh 20px 20px; text-align:center;}
#welcome .logo-wrap{width:64px; height:64px; margin:0 auto 18px; position:relative; perspective:700px;}
#welcome .logo-wrap::before{
content:''; position:absolute; inset:-16px; border-radius:50%; z-index:0;
background:radial-gradient(circle, var(--accent-soft) 0%, transparent 72%);
opacity:0; transform:scale(.55);
animation: logoGlow 20s cubic-bezier(.45,0,.2,1) infinite;
}
#welcome .logo-flip{
width:100%; height:100%; position:relative; z-index:1;
transform-style:preserve-3d;
animation: logoFlipZ 20s cubic-bezier(.65,0,.35,1) infinite;
}
#welcome .logo-face{
position:absolute; inset:0;
backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
#welcome .logo-face svg{display:block; width:100%; height:100%;}
#welcome .logo-face.logo-back{ transform:rotateY(180deg); }
/* Idle almost the entire cycle; around the 4–13% mark (~0.8s–2.6s into
each 20s loop) the mark performs one smooth, easing flip that reveals
the "Z" briefly on its back face, then eases back to the original mark. */
@keyframes logoFlipZ{
0%{ transform:rotateY(0deg); }
5%{ transform:rotateY(180deg); } /* fully flipped: shows the Z face */
9%{ transform:rotateY(180deg); } /* brief hold so the Z reads clearly */
14%, 100%{ transform:rotateY(360deg); } /* eases back to the original mark, then holds still */
}
@keyframes logoGlow{
0%, 2%, 100%{ opacity:0; transform:scale(.55); }
5%{ opacity:.9; transform:scale(1.15); }
14%{ opacity:0; transform:scale(1.4); }
}
@media (prefers-reduced-motion: reduce){
#welcome .logo-wrap::before, #welcome .logo-flip{animation:none;}
}
#welcome h1{font-size:26px; margin:0 0 6px; font-weight:700;}
#welcome p.sub{color:var(--text-dim); font-size:15px; margin:0 0 30px;}
.suggest-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.suggest-card{
text-align:left; padding:14px 15px; border-radius:14px; border:1px solid var(--border); background:var(--surface);
color:var(--text-dim); font-size:13.5px; line-height:1.4; transition:border-color .15s, transform .15s;
}
.suggest-card:hover{border-color:var(--accent); color:var(--text); transform:translateY(-1px);}
.suggest-card .ic{font-size:17px; margin-bottom:6px; display:block;}
@media (max-width:560px){.suggest-grid{grid-template-columns:1fr; }}
/* ===== Messages ===== */
.msg-row{display:flex; gap:11px; align-items:flex-start;}
.msg-row.user{flex-direction:row-reverse;}
.avatar{
width:30px; height:30px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
background:var(--surface-2); border:1px solid var(--border); margin-top:2px;
}
.avatar.ai{background:linear-gradient(135deg,var(--accent),var(--accent-2)); border:none;}
.avatar.ai svg{width:16px;height:16px;color:#fff;}
.bubble-col{display:flex; flex-direction:column; gap:6px; max-width:80%; min-width:0;}
.msg-row.user .bubble-col{align-items:flex-end;}
.bubble{
padding:11px 15px; border-radius:var(--radius); font-size:14.8px; line-height:1.6; word-wrap:break-word;
}
.msg-row.user .bubble{background:var(--accent); color:#fff; border-bottom-right-radius:5px; white-space:pre-wrap;}
.msg-row.ai .bubble{background:var(--surface); border:1px solid var(--border); border-bottom-left-radius:5px;}
.bubble p{margin:0 0 10px;} .bubble p:last-child{margin-bottom:0;}
.bubble h1,.bubble h2,.bubble h3{margin:14px 0 8px; font-family:'Space Grotesk',sans-serif;}
.bubble h1:first-child,.bubble h2:first-child,.bubble h3:first-child{margin-top:0;}
.bubble ul,.bubble ol{margin:0 0 10px; padding-left:22px;}
.bubble li{margin-bottom:3px;}
.bubble blockquote{border-left:3px solid var(--accent); margin:10px 0; padding:2px 14px; color:var(--text-dim); background:var(--accent-soft); border-radius:0 8px 8px 0;}
.bubble table{border-collapse:collapse; width:100%; margin:10px 0; font-size:13.5px; display:block; overflow-x:auto;}
.bubble th,.bubble td{border:1px solid var(--border); padding:6px 10px; text-align:left;}
.bubble th{background:var(--surface-2); font-weight:600;}
.bubble code{background:var(--surface-2); padding:2px 6px; border-radius:5px; font-family:'JetBrains Mono',monospace; font-size:.87em;}
.msg-row.user .bubble code{background:rgba(255,255,255,.18);}
.bubble pre{margin:10px 0; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#161822;}
.code-head{display:flex; justify-content:space-between; align-items:center; padding:8px 13px; background:#1B1E2A; font-size:12px; color:var(--text-dim); font-family:'JetBrains Mono',monospace;}
.copy-btn{display:flex; align-items:center; gap:5px; background:none; border:none; color:var(--text-dim); font-size:12px; padding:3px 7px; border-radius:6px;}
.copy-btn:hover{background:var(--surface-3); color:var(--text);}
.bubble pre code.hljs{padding:13px 15px; display:block; overflow-x:auto; font-size:13px; font-family:'JetBrains Mono',monospace; background:transparent;}
#imagegen-pill{
display:flex; align-items:center; gap:7px; align-self:flex-start; margin:0 0 8px 2px;
background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent); border-radius:20px;
padding:5px 8px 5px 12px; font-size:12.5px; font-weight:600;
}
#imagegen-pill button{
display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
border:none; background:rgba(0,0,0,.08); color:inherit;
}
.gen-image-wrap{margin-top:2px;}
.gen-image{max-width:100%; width:min(340px, 100%); border-radius:14px; display:block; border:1px solid var(--border);}
.gen-image-badge{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-dim); margin-top:6px;}
/* attachments in bubble */
.att-row{display:flex; flex-wrap:wrap; gap:8px;}
.att-chip{
display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; background:var(--surface-2);
border:1px solid var(--border); font-size:12.5px; max-width:220px;
}
.msg-row.user .att-chip{background:rgba(255,255,255,.14); border-color:transparent; color:#fff;}
.att-chip img{width:34px; height:34px; border-radius:8px; object-fit:cover; flex-shrink:0;}
.att-chip .ic{width:34px; height:34px; border-radius:8px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
.att-meta{overflow:hidden;}
.att-meta .n{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500;}
.att-meta .s{opacity:.65; font-size:11px;}
.msg-actions{display:flex; gap:2px; margin-top:2px;}
/* di desktop (mouse), tombol aksi muncul halus saat hover; di HP/tablet (layar sentuh) selalu tampil */
@media (hover:hover) and (pointer:fine){
.msg-actions{opacity:0; transition:opacity .15s;}
.bubble-col:hover .msg-actions{opacity:1;}
.bubble-col:focus-within .msg-actions{opacity:1;}
}
.msg-actions button{
display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px;
border:none; background:none; color:var(--text-faint); position:relative;
}
.msg-actions button:hover{background:var(--surface-2); color:var(--text);}
.msg-actions button.active-like{color:var(--ok);}
.msg-actions button.active-dislike{color:var(--danger);}
.msg-actions button.copied{color:var(--ok);}
.msg-actions .copy-tip{
position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(4px);
background:var(--surface-3); color:var(--text); font-size:11px; font-weight:600; padding:4px 8px; border-radius:7px;
white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.msg-actions button.copied .copy-tip{opacity:1; transform:translateX(-50%) translateY(0);}
.thinking-row{display:flex; align-items:center; gap:9px; color:var(--text-dim); font-size:13.5px; padding:2px 0;}
.orbit{width:16px; height:16px; position:relative; flex-shrink:0;}
.orbit i{position:absolute; width:4px; height:4px; border-radius:50%; background:var(--accent); top:6px; left:6px; animation:orbit 1.1s linear infinite;}
.orbit i:nth-child(2){animation-delay:-.37s; opacity:.7;}
.orbit i:nth-child(3){animation-delay:-.74s; opacity:.45;}
@keyframes orbit{
0%{transform:rotate(0deg) translateX(7px) rotate(0deg);}
100%{transform:rotate(360deg) translateX(7px) rotate(-360deg);}
}
.cursor-blink{display:inline-block; width:7px; height:15px; background:var(--accent); margin-left:2px; vertical-align:middle; animation:blink 1s step-start infinite; border-radius:2px;}
@keyframes blink{50%{opacity:0;}}
/* ===== Naze Browse (auto browsing) ===== */
.browse-row{display:flex; align-items:center; gap:9px; color:var(--text-dim); font-size:13.5px; padding:2px 0;}
.browse-row .globe-spin{width:16px; height:16px; flex-shrink:0; color:var(--accent); animation:naze-spin 1.6s linear infinite;}
@keyframes naze-spin{to{transform:rotate(360deg);}}
.sources-card{margin-top:8px; border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--surface-2);}
.sources-head{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px;}
.sources-head svg{color:var(--accent); flex-shrink:0;}
.sources-list{display:flex; flex-direction:column; gap:6px;}
.source-chip{display:flex; flex-direction:column; gap:1px; padding:7px 9px; border-radius:9px; background:var(--surface); border:1px solid var(--border); text-decoration:none; transition:border-color .15s;}
.source-chip:hover{border-color:var(--accent);}
.source-chip .s-title{font-size:12.5px; color:var(--text); font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.source-chip .s-domain{font-size:11px; color:var(--text-dim);}
.sources-queries{margin-top:8px; padding-top:8px; border-top:1px solid var(--border); font-size:11.5px; color:var(--text-dim);}
.fallback-badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:3px 8px; margin-bottom:6px;}
.fallback-badge svg{color:#E8A33D; flex-shrink:0;}
#browse-seg button svg{flex-shrink:0;}
/* ===== NAZE loading indicator ===== */
.naze-load{display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:13.5px; padding:2px 0;}
.naze-load .n-badge{
width:20px; height:20px; border-radius:7px; flex-shrink:0; position:relative;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.naze-load .n-badge svg{width:11px; height:11px; display:block;}
.naze-load .label{transition:opacity .12s ease;}
.naze-load.state-thinking .n-badge{animation:nazePulse 1.7s ease-in-out infinite;}
.naze-load.state-generating .n-badge{animation:nazePulse 1s ease-in-out infinite;}
.naze-load.state-searching .n-badge{animation:nazeTilt 1.9s ease-in-out infinite;}
.naze-load.state-analyzing .n-badge{animation:nazeScan 1.5s ease-in-out infinite;}
@keyframes nazePulse{0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.14); opacity:.82;}}
@keyframes nazeTilt{0%,100%{transform:rotate(0deg);} 50%{transform:rotate(10deg);}}
@keyframes nazeScan{0%,100%{opacity:1;} 50%{opacity:.5;}}
/* ===== Error UI (professional, no raw provider errors) ===== */
.err-box{
display:flex; align-items:flex-start; gap:10px; padding:13px 14px; border-radius:12px; background:rgba(244,83,107,.1);
border:1px solid rgba(244,83,107,.3); color:var(--text); font-size:13.5px;
}
.err-box .err-ic{color:var(--danger); flex-shrink:0; margin-top:1px;}
.err-box .err-text{flex:1; min-width:0;}
.err-box .err-title{font-weight:700; color:var(--text); margin-bottom:2px;}
.err-box .err-sub{color:var(--text-dim); font-size:12.5px; line-height:1.45;}
.err-box .retry-btn{
display:flex; align-items:center; gap:5px; margin-left:auto; align-self:center; background:var(--danger); color:#fff; border:none;
padding:6px 12px; border-radius:8px; font-size:12.5px; font-weight:600; flex-shrink:0;
}
.err-box .retry-btn:disabled{background:var(--surface-3); color:var(--text-dim); cursor:not-allowed; opacity:.85;}
.err-box.final{background:var(--surface-2); border-color:var(--border);}
.err-box.final .err-ic{color:var(--text-faint);}
/* ===== Streaming interrupted notice ===== */
.interrupt-box{
display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:var(--surface-2);
border:1px solid var(--border); color:var(--text-dim); font-size:13px; flex-wrap:wrap;
}
.interrupt-box .it-title{font-weight:600; color:var(--text); flex:1; min-width:120px;}
.interrupt-box .it-actions{display:flex; gap:6px;}
.interrupt-box button{
background:var(--surface-3); color:var(--text); border:1px solid var(--border);
padding:6px 11px; border-radius:8px; font-size:12.5px; font-weight:600;
}
.interrupt-box button.primary{background:var(--accent); color:#fff; border-color:transparent;}
/* ===== Lightweight micro animations ===== */
.msg-in{animation:msgIn .22s ease both;}
@keyframes msgIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.icon-btn, .side-btn, .new-chat-btn, #plus-btn, #send-btn, .copy-btn, .msg-actions button,
#think-toggle, .seg button, .panel .close-x, #plus-menu button{
transition:transform .12s ease, background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
@media (hover:hover) and (pointer:fine){
.icon-btn:hover, .side-btn:hover, .new-chat-btn:hover, #plus-btn:hover, .copy-btn:hover,
.msg-actions button:hover, #think-toggle:hover, #plus-menu button:hover{ transform:scale(1.04); }
#send-btn:hover:not(:disabled){ transform:scale(1.06); }
}
.icon-btn:active, .side-btn:active, .new-chat-btn:active, #plus-btn:active, #send-btn:active,
.copy-btn:active, .msg-actions button:active, #think-toggle:active, .seg button:active, #plus-menu button:active{
transform:scale(.93);
}
/* Sidebar open: fade + slide (slide already via transform; add fade on mobile) */
#sidebar{transition:transform .25s ease, opacity .22s ease;}
@media (max-width:860px){
#sidebar{opacity:0;}
#sidebar.open{opacity:1;}
}
/* Modal / panel: fade in + scale .98 -> 1 */
.panel-overlay.show{animation:overlayFade .16s ease;}
.panel-overlay.show .panel{animation:panelPop .18s cubic-bezier(.2,.8,.2,1);}
@keyframes overlayFade{from{opacity:0;} to{opacity:1;}}
@keyframes panelPop{from{opacity:0; transform:scale(.98);} to{opacity:1; transform:scale(1);}}
/* Logo N: brief pop-in on app startup only (no continuous spin) */
.logo-mark svg{animation:logoIntro .5s cubic-bezier(.2,.8,.2,1) both;}
@keyframes logoIntro{from{opacity:0; transform:scale(.7);} to{opacity:1; transform:scale(1);}}
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important; scroll-behavior:auto !important;
}
.msg-in{opacity:1 !important; transform:none !important;}
.icon-btn:hover, .side-btn:hover, .new-chat-btn:hover, #plus-btn:hover, .copy-btn:hover,
.msg-actions button:hover, #think-toggle:hover, #plus-menu button:hover, #send-btn:hover,
.icon-btn:active, .side-btn:active, .new-chat-btn:active, #plus-btn:active, #send-btn:active,
.copy-btn:active, .msg-actions button:active, #think-toggle:active, .seg button:active, #plus-menu button:active{
transform:none !important;
}
}
/* ===== Composer ===== */
#composer-wrap{padding:12px 16px calc(12px + env(safe-area-inset-bottom)); flex-shrink:0;}
#composer{
max-width:780px; margin:0 auto; border:1px solid var(--border); border-radius:22px; background:var(--surface);
padding:8px 8px 8px 8px; box-shadow:0 8px 30px -14px rgba(0,0,0,.35);
}
#preview-strip{display:flex; gap:8px; flex-wrap:wrap; padding:6px 6px 2px;}
.pv-chip{
position:relative; display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:12px; background:var(--surface-2);
border:1px solid var(--border); font-size:12px; max-width:190px;
}
.pv-chip img{width:32px; height:32px; border-radius:7px; object-fit:cover;}
.pv-chip .ic{width:32px; height:32px; border-radius:7px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; font-size:15px;}
.pv-chip .n{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100px; font-weight:500;}
.pv-chip .s{opacity:.6; font-size:10.5px;}
.pv-chip .rm{width:16px; height:16px; border-radius:50%; background:var(--surface-3); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-left:auto; color:var(--text-dim);}
.pv-chip .rm:hover{background:var(--danger); color:#fff;}
.pv-chip .bar{position:absolute; bottom:0; left:0; height:2px; background:var(--accent); border-radius:0 0 12px 12px; transition:width .2s;}
#input-row{display:flex; align-items:flex-end; gap:6px;}
#plus-btn{
width:38px; height:38px; border-radius:50%; border:none; background:var(--surface-2); color:var(--text-dim);
display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-bottom:2px;
}
#plus-btn:hover{background:var(--surface-3); color:var(--text);}
#composer textarea{
flex:1; resize:none; border:none; background:none; color:var(--text); font-size:15px; font-family:inherit;
padding:9px 4px; max-height:180px; line-height:1.5;
}
#composer textarea:focus{outline:none;}
#composer textarea::placeholder{color:var(--text-faint);}
#think-toggle{
display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:20px; border:1px solid var(--border);
background:var(--surface-2); color:var(--text-dim); font-size:12.5px; font-weight:600; flex-shrink:0; margin-bottom:2px; white-space:nowrap;
}
#think-toggle.on{background:var(--accent-soft); color:var(--accent-2); border-color:var(--accent);}
#send-btn{
width:38px; height:38px; border-radius:50%; border:none; background:var(--accent); color:#fff;
display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-bottom:2px;
}
#send-btn:disabled{opacity:.35;}
#send-btn.stop{background:var(--text);}
[data-theme="light"] #send-btn.stop{background:var(--text);}
.hint{text-align:center; font-size:11px; color:var(--text-faint); margin-top:8px;}
/* + menu */
#plus-menu{
position:absolute; bottom:64px; left:16px; background:var(--surface); border:1px solid var(--border); border-radius:14px;
padding:6px; display:none; flex-direction:column; min-width:190px; box-shadow:0 10px 30px -8px rgba(0,0,0,.4); z-index:20;
}
#plus-menu.show{display:flex;}
#plus-menu button{
display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:10px; border:none; background:none;
color:var(--text); font-size:13.5px; text-align:left; width:100%;
}
#plus-menu button:hover{background:var(--surface-2);}
/* ===== Panels (settings/about) ===== */
.panel-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:60; padding:16px;}
.panel-overlay.show{display:flex;}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:20px; width:100%; max-width:420px; max-height:82vh; overflow-y:auto; padding:20px;}
.panel h2{margin:0 0 4px; font-size:18px;}
.panel .close-x{position:absolute; margin-left:calc(100% - 34px); background:none; border:none; color:var(--text-dim); width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px;}
.panel .close-x:hover{background:var(--surface-2); color:var(--text);}
.panel-row{margin-top:18px;}
.panel-row label{display:block; font-size:12.5px; color:var(--text-dim); font-weight:600; margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px;}
.seg{display:flex; gap:6px; background:var(--surface-2); padding:4px; border-radius:12px;}
.seg button{flex:1; padding:8px; border-radius:9px; border:none; background:none; color:var(--text-dim); font-size:13px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:5px;}
.seg button.sel{background:var(--surface); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.15);}
.accent-row{display:flex; gap:10px;}
.accent-dot{width:30px; height:30px; border-radius:50%; border:2px solid transparent; position:relative;}
.accent-dot.sel{border-color:var(--text);}
.accent-dot.sel::after{
content:''; position:absolute; inset:0; margin:auto; width:13px; height:13px; background:#fff;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.about-p{color:var(--text-dim); font-size:13.5px; line-height:1.6; margin-top:14px;}
.about-list{margin-top:10px; padding-left:18px; color:var(--text-dim); font-size:13px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}
/* ===== Settings v2 ===== */
.settings-panel{padding:16px 16px 20px;}
.settings-head{display:flex; align-items:center; gap:4px; margin-bottom:6px; min-height:32px;}
.settings-head h2{margin:0; font-size:17px; flex:1;}
.settings-back{position:static !important; flex-shrink:0; margin:0 !important;}
.settings-panel .close-x{position:static; margin:0; flex-shrink:0;}
.settings-view[hidden]{display:none;}
.set-group{margin-bottom:20px;}
.set-group:last-child{margin-bottom:4px;}
.set-group-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); margin:0 2px 6px;}
.set-card{background:var(--surface-2); border-radius:14px; padding:2px 12px;}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 2px; min-height:44px;}
.set-row + .set-row{border-top:1px solid var(--border);}
.set-row.disabled{opacity:.45; pointer-events:none;}
.set-row-txt{display:flex; flex-direction:column; gap:2px; min-width:0;}
.set-row-txt .t{font-size:13.8px; font-weight:600; color:var(--text);}
.set-row-txt .d{font-size:11.8px; color:var(--text-dim); line-height:1.4;}
.set-val{font-size:12px; color:var(--text-dim); background:var(--surface-3); padding:5px 11px; border-radius:99px; flex-shrink:0; white-space:nowrap;}
.set-row .seg{max-width:190px;}
/* Category list (root view) */
.settings-cat{display:flex; align-items:center; gap:12px; width:100%; padding:11px 8px; border-radius:12px; border:none; background:none; color:var(--text); text-align:left; min-height:48px;}
.settings-cat:hover{background:var(--surface-2);}
.settings-cat .ic{width:34px; height:34px; border-radius:10px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0;}
.settings-cat .cat-txt{display:flex; flex-direction:column; min-width:0; flex:1;}
.settings-cat .cat-txt .t{font-size:14px; font-weight:600;}
.settings-cat .cat-txt .d{font-size:11.5px; color:var(--text-dim); margin-top:1px;}
.settings-cat .chev{color:var(--text-faint); flex-shrink:0;}
/* Nav row used inside a category page (e.g. "Kelola memori >") */
.set-navrow{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:12px 2px; border:none; background:none; color:var(--text); text-align:left; min-height:44px;}
.set-navrow + .set-navrow{border-top:1px solid var(--border);}
.set-navrow .t{font-size:13.8px; font-weight:600;}
.set-navrow .d{font-size:11.8px; color:var(--text-dim); margin-top:2px;}
.set-navrow .chev{color:var(--text-faint); flex-shrink:0;}
.set-navrow:hover{background:var(--surface-2); border-radius:10px;}
/* Toggle switch */
.toggle{position:relative; width:42px; height:25px; border-radius:99px; background:var(--surface-3); border:none; flex-shrink:0; padding:0;}
.toggle::after{content:''; position:absolute; top:2.5px; left:2.5px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .16s ease; box-shadow:0 1px 3px rgba(0,0,0,.25);}
.toggle.on{background:var(--accent);}
.toggle.on::after{transform:translateX(17px);}
.set-destructive{width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:12px; border:1px solid var(--border); background:none; color:var(--danger); font-size:13.5px; font-weight:600; min-height:44px;}
.set-destructive:hover{background:rgba(244,83,107,.08); border-color:var(--danger);}
.set-note{font-size:11.5px; color:var(--text-dim); margin-top:8px; padding:0 2px; line-height:1.5;}
/* Manage memory list */
.mem-list{margin-top:4px;}
.mem-item{display:flex; align-items:flex-start; gap:10px; padding:11px 2px; border-bottom:1px solid var(--border);}
.mem-item:last-child{border-bottom:none;}
.mem-txt{flex:1; min-width:0; font-size:13px; line-height:1.5; color:var(--text);}
.mem-meta{font-size:11px; color:var(--text-faint); margin-top:3px; text-transform:capitalize;}
.mem-del{flex-shrink:0; background:none; border:none; color:var(--text-dim); width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;}
.mem-del:hover{background:var(--surface-2); color:var(--danger);}
.mem-empty, .mem-loading{text-align:center; font-size:13px; color:var(--text-dim); padding:28px 10px;}
.changelog-block{margin-bottom:16px;}
.changelog-block h3{font-size:13px; margin:0 0 6px; color:var(--text);}
.changelog-block ul{margin:0; padding-left:18px; color:var(--text-dim); font-size:12.5px; line-height:1.7;}
.license-item{padding:12px 2px; border-bottom:1px solid var(--border);}
.license-item:last-child{border-bottom:none;}
.license-item .t{font-size:13.5px; font-weight:600;}
.license-item .d{font-size:11.8px; color:var(--text-dim); margin-top:2px;}
/* Message density */
body[data-density="compact"] #thread{gap:14px;}
body[data-density="compact"] .bubble{padding:7px 12px; font-size:14px;}
body[data-density="compact"] .bubble-col{gap:4px;}
body[data-density="compact"] .msg-row{gap:8px;}
/* Animations preference (explicit, mirrors prefers-reduced-motion) */
body[data-anim="off"] *, body[data-anim="off"] *::before, body[data-anim="off"] *::after{
animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important; scroll-behavior:auto !important;
}
body[data-anim="off"] .msg-in{opacity:1 !important; transform:none !important;}
body[data-anim="off"] .icon-btn:active, body[data-anim="off"] .side-btn:active, body[data-anim="off"] .new-chat-btn:active,
body[data-anim="off"] #plus-btn:active, body[data-anim="off"] #send-btn:active, body[data-anim="off"] .copy-btn:active,
body[data-anim="off"] .msg-actions button:active, body[data-anim="off"] #think-toggle:active, body[data-anim="off"] .seg button:active,
body[data-anim="off"] #plus-menu button:active{ transform:none !important; }
/* ===== Voice Mode ===== */
#voice-btn{
display:flex; align-items:center; justify-content:center; width:38px; height:38px; min-width:38px;
border-radius:12px; border:1px solid transparent; background:none; color:var(--text-dim); flex-shrink:0;
transition:background .15s, color .15s, transform .15s;
}
#voice-btn:hover{background:var(--surface-3); color:var(--text);}
#voice-btn.vc-listening{color:var(--accent); background:var(--accent-soft);}
#voice-btn.vc-processing{color:var(--accent-2);}
#voice-btn.vc-speaking{color:var(--ok);}
#voice-btn.vc-error{color:var(--danger);}
#voice-btn.vc-listening svg, .voice-panel-mic.vc-listening svg{animation:vcPulse 1.1s ease-in-out infinite;}
#voice-btn.vc-processing svg, .voice-panel-mic.vc-processing svg{animation:vcSpin 1s linear infinite;}
#voice-btn.vc-speaking svg, .voice-panel-mic.vc-speaking svg{animation:vcWave 1.3s ease-in-out infinite;}
@keyframes vcPulse{0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.14);opacity:.75;}}
@keyframes vcSpin{from{transform:rotate(0);} to{transform:rotate(360deg);}}
@keyframes vcWave{0%,100%{transform:scale(1);} 50%{transform:scale(1.08);}}
body[data-anim="off"] #voice-btn svg, body[data-anim="off"] .voice-panel-mic svg{animation:none !important;}
.voice-panel{max-width:380px; text-align:center;}
.voice-status{font-size:13px; color:var(--text-dim); margin-top:4px; min-height:18px;}
.voice-panel-mic{
width:76px; height:76px; border-radius:50%; margin:20px auto 6px; display:flex; align-items:center; justify-content:center;
background:var(--accent); color:#fff; border:none; box-shadow:0 6px 20px -8px var(--accent);
}
.voice-panel-mic:hover{transform:scale(1.03);}
.voice-panel-mic.vc-error{background:var(--danger); box-shadow:0 6px 20px -8px var(--danger);}
.voice-panel-mic.vc-speaking{background:var(--ok); box-shadow:0 6px 20px -8px var(--ok);}
.voice-panel-row{text-align:left; margin-top:14px;}
.voice-panel-label{font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); margin-bottom:5px;}
.voice-panel-text{
min-height:20px; max-height:120px; overflow-y:auto; font-size:13.5px; line-height:1.5; color:var(--text);
background:var(--surface-2); border-radius:10px; padding:9px 11px; word-wrap:break-word;
}
.voice-panel-text:empty::after{content:'—'; color:var(--text-faint);}
.voice-panel-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px;}
.voice-stop-btn{width:auto; padding:10px 16px; background:var(--danger); box-shadow:0 4px 14px -6px var(--danger);}
.voice-continuous-row{gap:10px;}
.voice-continuous-row .set-row-txt .t{font-size:12.5px;}
.voice-range-row{display:flex; align-items:center; gap:12px; padding:8px 0;}
.voice-range-row .set-row-txt{flex-shrink:0; width:112px;}
.voice-range-row input[type="range"]{flex:1; accent-color:var(--accent); height:4px;}
.voice-select{
width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
background:var(--surface-2); color:var(--text); font:inherit; font-size:13px;
}
/* Mobile */
@media (max-width:860px){
#sidebar{position:fixed; top:0; bottom:0; left:0; transform:translateX(-100%);}
#sidebar.open{transform:translateX(0);}
#sidebar.open ~ #sidebar-overlay{display:block;}
.bubble-col{max-width:88%;}
.suggest-grid{gap:8px;}
.voice-panel-mic{width:68px; height:68px;}
.voice-range-row{flex-wrap:wrap;}
.voice-range-row .set-row-txt{width:auto;}
.voice-range-row input[type="range"]{width:100%; flex:1 1 100%;}
}
@media (max-width:480px){
#topbar .title span.full{display:none;}
}
/* =========================================================================
NAZE CODE — Code Workspace panel
========================================================================= */
.codepage-overlay .codepage-panel{
width:100%; max-width:1180px; height:92vh; max-height:920px; padding:0;
display:flex; flex-direction:column; overflow:hidden; border-radius:20px;
}
.cp-header{
display:flex; align-items:center; gap:10px; padding:10px 12px;
border-bottom:1px solid var(--border); flex-shrink:0;
}
.cp-header .close-x{position:static; margin:0; flex-shrink:0;}
.cp-name-input{
flex:1; min-width:0; background:none; border:none; color:var(--text); font-size:14.5px; font-weight:600;
padding:6px 8px; border-radius:8px;
}
.cp-name-input:focus{background:var(--surface-2); outline:none;}
.cp-header-actions{display:flex; align-items:center; gap:6px; flex-shrink:0;}
.cp-icon-btn{
display:flex; align-items:center; gap:5px; background:none; border:1px solid var(--border); color:var(--text-dim);
padding:7px 10px; border-radius:9px; font-size:12.5px; font-weight:600; white-space:nowrap;
}
.cp-icon-btn:hover{background:var(--surface-2); color:var(--text);}
.cp-run-btn{background:var(--accent); color:#fff; border-color:transparent;}
.cp-run-btn:hover{background:var(--accent); opacity:.9;}
.cp-toolbar{
display:flex; align-items:center; gap:8px; padding:7px 12px; border-bottom:1px solid var(--border);
flex-shrink:0; overflow-x:auto;
}
.cp-tbtn{
background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
padding:6px 11px; border-radius:8px; font-size:12px; font-weight:600; flex-shrink:0;
}
.cp-tbtn:hover{color:var(--text);}
.cp-autorun{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); flex-shrink:0;}
.cp-autorun input{accent-color:var(--accent);}
.cp-body{flex:1; display:flex; min-height:0; position:relative;}
.cp-explorer{
width:210px; flex-shrink:0; border-right:1px solid var(--border); background:var(--surface);
display:flex; flex-direction:column; overflow-y:auto;
}
.cp-explorer-actions{display:flex; gap:6px; padding:8px; border-bottom:1px solid var(--border); flex-shrink:0;}
.cp-explorer-actions button{
flex:1; background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
padding:6px; border-radius:7px; font-size:11.5px; font-weight:600;
}
.cp-filetree{padding:6px 0; font-size:12.8px;}
.cp-tree-row{display:flex; align-items:center; gap:7px; padding:5px 8px; color:var(--text-dim); cursor:pointer; border-radius:6px;}
.cp-tree-row:hover{background:var(--surface-2); color:var(--text);}
.cp-tree-row.active{background:var(--accent-soft); color:var(--accent-2);}
.cp-tree-dir{color:var(--text-faint); cursor:default; font-weight:600;}
.cp-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.cp-tabs{display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--surface);}
.cp-tab{
display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:12.5px; color:var(--text-dim);
border-right:1px solid var(--border); flex-shrink:0; cursor:pointer; font-family:'JetBrains Mono',monospace;
}
.cp-tab.active{color:var(--text); background:var(--bg);}
.cp-tab button{background:none; border:none; color:var(--text-faint); font-size:14px; line-height:1;}
.cp-editor{flex:1; min-height:0; overflow:hidden;}
.cp-editor .CodeMirror{height:100%; font-family:'JetBrains Mono',monospace; font-size:13px;}
.cp-right{width:360px; flex-shrink:0; border-left:1px solid var(--border); display:flex; flex-direction:column;}
.cp-preview-wrap{flex:1.4; min-height:0; display:flex; flex-direction:column; border-bottom:1px solid var(--border);}
.cp-preview-actions{display:flex; gap:6px; padding:6px 8px; border-bottom:1px solid var(--border); flex-shrink:0;}
.cp-preview-actions .cp-icon-btn{padding:5px 8px;}
.cp-preview-iframe{flex:1; width:100%; border:none; background:#fff;}
.cp-console{flex:1; min-height:0; display:flex; flex-direction:column; background:#0E1016;}
.cp-console-head{
display:flex; justify-content:space-between; align-items:center; padding:7px 10px; font-size:11.5px;
color:var(--text-faint); border-bottom:1px solid var(--border); flex-shrink:0;
}
.cp-console-head button{background:none; border:none; color:var(--text-faint); font-size:11px;}
.cp-console-body{flex:1; overflow-y:auto; padding:6px 10px; font-family:'JetBrains Mono',monospace; font-size:11.5px;}
.cp-console-row{padding:3px 0; border-bottom:1px solid rgba(255,255,255,.04); color:var(--text-dim); word-break:break-word;}
.cp-console-row.level-error{color:#FB7189;}
.cp-console-row.level-warn{color:#F4C25A;}
.cp-console-row.level-info{color:var(--accent-2);}
.codelist-panel{max-width:480px;}
.cp-list{margin-top:14px; max-height:52vh; overflow-y:auto;}
.cp-list-empty{color:var(--text-faint); font-size:13px; padding:18px 4px; text-align:center;}
.cp-list-item{
display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; margin-bottom:4px;
color:var(--text-dim); cursor:pointer; border:1px solid transparent;
}
.cp-list-item:hover{background:var(--surface-2); color:var(--text); border-color:var(--border);}
.cp-list-item .ic{
width:34px; height:34px; flex-shrink:0; border-radius:9px; background:var(--accent-soft); color:var(--accent-2);
display:flex; align-items:center; justify-content:center;
}
.cp-list-item .meta{flex:1; min-width:0;}
.cp-list-item .meta .n{font-size:13.5px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cp-list-item .meta .s{font-size:11.5px; color:var(--text-faint); margin-top:1px;}
.cp-list-item .actions{display:flex; gap:2px; flex-shrink:0;}
.cp-list-item .actions button{background:none; border:none; color:var(--text-faint); padding:6px; border-radius:7px;}
.cp-list-item .actions button:hover{color:var(--text); background:var(--surface-3);}
.cp-list-item .actions button.danger:hover{color:var(--danger);}
/* ---------- Naze Code: assets, diff review, loading states ---------- */
.cp-tree-row.cp-tree-asset{color:var(--text-faint);}
.cp-tree-row.cp-tree-asset.active{background:var(--accent-soft); color:var(--accent-2);}
.cp-asset-preview{flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; overflow:auto; background:var(--bg);}
.cp-asset-preview img{max-width:100%; max-height:60vh; border-radius:8px; box-shadow:0 4px 24px rgba(0,0,0,.25); background:repeating-conic-gradient(#8883 0% 25%, transparent 0% 50%) 0 0/16px 16px;}
.cp-asset-preview audio, .cp-asset-preview video{max-width:100%;}
.cp-asset-meta{font-size:12px; color:var(--text-faint); font-family:'JetBrains Mono',monospace;}
.cp-asset-generic{color:var(--text-dim); font-size:13px; text-align:center; max-width:320px;}
.cp-asset-font-sample{font-size:28px; color:var(--text);}
.cp-preview-wrap{position:relative;}
.cp-preview-loading{position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.15); backdrop-filter:blur(1px); pointer-events:none;}
.cp-preview-wrap.cp-loading .cp-preview-loading{display:flex;}
.cp-spinner{width:26px; height:26px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:cp-spin .7s linear infinite;}
@keyframes cp-spin{to{transform:rotate(360deg);}}
#cp-undo-btn:disabled{opacity:.35; cursor:default;}
.cp-review-btn{background:var(--accent-soft); color:var(--accent-2); border-color:transparent; padding:5px 10px; gap:5px; font-size:12px; font-weight:600;}
.cp-console-head{display:flex; align-items:center; gap:10px;}
.cp-console-head button{white-space:nowrap;}
#cp-console-send{color:var(--accent-2);}
.cp-diff-panel{max-width:640px; width:94vw; display:flex; flex-direction:column; max-height:82vh;}
.cp-diff-body{margin-top:12px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:10px;}
.cp-diff-empty{color:var(--text-faint); font-size:13px; padding:18px 4px; text-align:center;}
.cp-diff-file{border:1px solid var(--border); border-radius:10px; overflow:hidden;}
.cp-diff-file-head{display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--surface-2); flex-wrap:wrap;}
.cp-diff-path{font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600; color:var(--text); word-break:break-all;}
.cp-diff-status{font-size:11px; color:var(--text-faint); background:var(--surface-3); padding:2px 7px; border-radius:99px;}
.cp-diff-file-actions{margin-left:auto; display:flex; gap:6px;}
.cp-diff-lines{font-family:'JetBrains Mono',monospace; font-size:11.5px; max-height:260px; overflow-y:auto; background:#0E1016;}
.cp-diffline{padding:1px 10px; white-space:pre-wrap; word-break:break-word; display:flex; gap:8px;}
.cp-diffline .sign{opacity:.6; width:10px; flex-shrink:0;}
.cp-diffline.add{background:rgba(46,160,67,.15); color:#7ee2a8;}
.cp-diffline.del{background:rgba(248,81,73,.15); color:#ff9a95;}
.cp-diffline.eq{color:var(--text-faint);}
.cp-diff-accept{background:var(--accent); color:#fff; border:none; border-radius:7px; padding:6px 12px; font-size:12px; font-weight:600;}
.cp-diff-reject{background:var(--surface-3); color:var(--text-dim); border:none; border-radius:7px; padding:6px 12px; font-size:12px; font-weight:600;}
.cp-diff-footer{display:flex; gap:8px; justify-content:flex-end; margin-top:12px; padding-top:12px; border-top:1px solid var(--border);}
/* ---------- Naze Code: upload / drag & drop ---------- */
.cp-drop-hint{font-size:11px; color:var(--text-faint); text-align:center; padding:8px 10px; border-top:1px dashed var(--border); display:none;}
.cp-explorer.cp-dragover{outline:2px dashed var(--accent); outline-offset:-2px; background:var(--accent-soft);}
.cp-explorer.cp-dragover .cp-drop-hint{display:block;}
#cp-upload-btn{white-space:nowrap;}
.naze-code-open-btn, .naze-code-applied-badge, .zip-open-code-btn{
display:flex; align-items:center; gap:6px; width:fit-content; margin-top:8px;
background:var(--accent-soft); color:var(--accent-2); border:1px solid var(--accent);
padding:7px 12px; border-radius:20px; font-size:12.5px; font-weight:600;
}
.naze-code-applied-badge{background:var(--surface-2); color:var(--text-dim); border-color:var(--border);}
.zip-open-code-btn{margin:6px 0 0; padding:5px 10px; font-size:11.5px;}
/* Mobile: drawers instead of fixed side columns */
@media (max-width:860px){
.codepage-overlay .codepage-panel{height:100vh; max-height:100vh; border-radius:0; max-width:100%;}
.cp-explorer{
position:absolute; inset:0 auto 0 0; width:78vw; max-width:280px; z-index:5;
transform:translateX(-100%); transition:transform .18s ease; box-shadow:8px 0 24px -8px rgba(0,0,0,.4);
}
.cp-explorer.cp-drawer-open{transform:translateX(0);}
.cp-right{
position:absolute; inset:0 0 0 auto; width:88vw; max-width:360px; z-index:5;
transform:translateX(100%); transition:transform .18s ease; box-shadow:-8px 0 24px -8px rgba(0,0,0,.4);
}
.cp-right.cp-drawer-open{transform:translateX(0);}
.cp-name-input{font-size:13px;}
.cp-icon-btn span, .cp-run-btn{font-size:11.5px;}
}