/* ── CHAT SCREEN ── */
#chat{background:var(--bg)}
.chat-hdr{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--bg);gap:9px;flex-shrink:0}
.chat-hdr-logo{width:34px;height:34px;border-radius:50%;flex-shrink:0;cursor:pointer;transition:transform .2s}
.chat-hdr-logo:hover{transform:scale(1.06)}
.chat-hdr-info{flex:1;cursor:pointer}
.chat-hdr-name{font-size:15px;font-weight:700}
.chat-hdr-status{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:4px}
.s-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hbtn{width:36px;height:36px;border-radius:50%;background:none;border:none;cursor:pointer;color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:17px;transition:all .2s;flex-shrink:0}
.hbtn:hover{background:var(--hover);color:var(--text)}
.nc-btn{background:var(--accent-dim);color:var(--text);border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600;border:none;cursor:pointer;font-family:inherit;white-space:nowrap;display:flex;align-items:center;gap:5px;transition:all .2s}
.nc-btn:hover{background:var(--accent-d2);transform:translateY(-1px)}

.msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:0;scroll-behavior:smooth}
.msgs::-webkit-scrollbar{width:3px}
.msgs::-webkit-scrollbar-thumb{background:var(--border-b);border-radius:4px}
@media(min-width:640px){.msgs{max-width:760px;margin:0 auto;padding:20px 24px}}

.empty-st{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;text-align:center}
.empty-svg{width:150px;height:150px;animation:floatY 4s ease-in-out infinite}
.empty-name{font-size:22px;font-weight:800;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) .1s both}
.empty-tag{font-size:13px;color:var(--text2);line-height:1.65;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) .16s both}
.empty-user{font-size:12px;color:var(--text3);background:var(--surface);padding:4px 12px;border-radius:20px;margin-top:2px;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) .2s both}
.sugg-row{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:10px;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) .26s both}
.sugg-chip{padding:8px 13px;border-radius:20px;background:var(--surface);border:1px solid var(--border);font-size:12px;color:var(--text2);cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:6px}
.sugg-chip:hover{background:var(--hover);border-color:var(--border-b);color:var(--text);transform:translateY(-2px)}
.sugg-chip:active{transform:translateY(0) scale(.96)}

.mrow{display:flex;margin-bottom:16px;gap:8px;animation:fadeUp .35s cubic-bezier(.16,1,.3,1) both}
.mrow.user{flex-direction:row-reverse}
.mav{width:30px;height:30px;border-radius:50%;flex-shrink:0;align-self:flex-end;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;overflow:hidden}
.mav.bear{background:var(--accent);color:#000}
.mav.uav{background:var(--hover);border:1px solid var(--border-b);color:var(--text)}
.mbub{max-width:min(78%,500px);padding:11px 13px;border-radius:17px;font-size:14px;line-height:1.65}
.mbub.bear{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px;color:var(--text)}
.mbub.user{background:var(--accent);color:#000;border-bottom-right-radius:4px}
.mbub.bear p{margin-bottom:7px}
.mbub.bear p:last-child{margin-bottom:0}
.mbub.bear h1,.mbub.bear h2,.mbub.bear h3{font-weight:700;margin:10px 0 5px}
.mbub.bear ul,.mbub.bear ol{padding-left:18px;margin:5px 0}
.mbub.bear li{margin:3px 0}
.mbub.bear strong{font-weight:700;color:var(--text)}
.mbub code:not(.hljs){font-family:var(--mono);font-size:12px;background:var(--accent-dim);color:var(--text);padding:2px 5px;border-radius:4px}

/* Message actions (share / ulangi / hapus / owner) */
.mact-row{display:flex;gap:4px;margin-top:6px;padding-left:38px;opacity:0;transition:opacity .2s}
.mrow:hover .mact-row,.mrow.show-acts .mact-row{opacity:1}
.mact{background:none;border:none;color:var(--text3);cursor:pointer;padding:5px 7px;border-radius:6px;font-size:11px;display:flex;align-items:center;gap:4px;transition:all .2s;font-family:inherit}
.mact:hover{background:var(--hover);color:var(--text)}
.mact:hover .icon{animation:iconPop .35s cubic-bezier(.16,1,.3,1)}
@keyframes iconPop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}

/* Code blocks */
.cblk{background:#0d0d0d;border-radius:10px;overflow:hidden;margin:9px 0;border:1px solid var(--border);max-width:100%;animation:scaleIn .3s cubic-bezier(.16,1,.3,1)}
.cblk-hdr{display:flex;align-items:center;padding:7px 11px;background:var(--hover);border-bottom:1px solid var(--border);gap:7px;flex-wrap:wrap}
.clang{font-size:11px;font-weight:700;color:var(--text);font-family:var(--mono);background:var(--accent-dim);padding:2px 7px;border-radius:4px}
.cacts{margin-left:auto;display:flex;gap:5px}
.cact{font-size:11px;font-weight:500;padding:3px 8px;border-radius:4px;background:var(--accent-dim);color:var(--text2);border:none;cursor:pointer;font-family:inherit;transition:all .2s;display:flex;align-items:center;gap:4px}
.cact:hover{background:var(--accent-d2);color:var(--text)}
.cact.ok{color:var(--text);background:var(--accent-d2)}
.ccon{font-family:var(--mono);font-size:13px;padding:13px;overflow-x:auto;color:#c8c8c8;white-space:pre;line-height:1.6}
.ccon::-webkit-scrollbar{height:3px}
.ccon::-webkit-scrollbar-thumb{background:var(--border-b)}
.hljs{background:transparent;padding:0}

/* Thinking */
.think-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:14px;animation:fadeUp .3s cubic-bezier(.16,1,.3,1)}
.think-bub{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px;border-radius:17px;padding:9px 13px;max-width:min(78%,500px);cursor:pointer;user-select:none}
.think-hdr{display:flex;align-items:center;gap:7px}
.think-dots{display:flex;gap:4px}
.tdot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:td 1.4s ease-in-out infinite}
.tdot:nth-child(2){animation-delay:.2s}
.tdot:nth-child(3){animation-delay:.4s}
@keyframes td{0%,80%,100%{transform:scale(.6);opacity:.3}40%{transform:scale(1);opacity:1}}
.think-lbl{font-size:13px;color:var(--text2)}
.think-timer{font-size:11px;color:var(--text3);font-family:var(--mono);margin-left:auto}
.think-exp{font-size:11px;color:var(--text3);display:none;flex-direction:column;gap:3px;border-top:1px solid var(--border);padding-top:7px;margin-top:5px;max-height:100px;overflow-y:auto}
.think-exp.open{display:flex}
.tstep{font-size:11px;color:var(--text2);display:flex;gap:5px;align-items:flex-start;animation:stIn .3s ease}
.tstep::before{content:'›';color:var(--text);flex-shrink:0}
@keyframes stIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Token limit banner */
.lim-ban{background:var(--card-solid);border:1px solid var(--border-b);border-radius:var(--r2);padding:13px 15px;margin:6px 14px;flex-direction:column;gap:7px;display:none;animation:scaleIn .3s cubic-bezier(.16,1,.3,1)}
.lim-ban.show{display:flex}
.lrow{display:flex;align-items:center;gap:8px}
.lic{font-size:17px;color:var(--text)}
.ltit{font-size:13px;font-weight:600;color:var(--text)}
.ldsc{font-size:12px;color:var(--text2);line-height:1.5}
.ltimer{font-size:14px;font-weight:700;font-family:var(--mono);color:var(--text)}
.lupbtn{align-self:flex-start;padding:7px 13px;border-radius:8px;background:var(--accent);color:#000;font-size:12px;font-weight:600;border:none;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px;transition:all .2s}
.lupbtn:hover{transform:translateY(-1px)}

/* Input area */
.inp-area{padding:10px 14px;border-top:1px solid var(--border);background:var(--bg);flex-shrink:0}
@media(min-width:640px){.inp-area{max-width:760px;margin:0 auto}}
.inp-row{display:flex;align-items:flex-end;gap:9px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r3);padding:5px 5px 5px 14px;transition:all .2s}
.inp-row:focus-within{border-color:var(--border-b);box-shadow:0 0 0 3px rgba(255,255,255,.05)}
#msgInput{flex:1;background:none;border:none;color:var(--text);font-size:14px;font-family:inherit;resize:none;outline:none;max-height:120px;min-height:36px;line-height:1.55;padding:8px 0}
#msgInput::placeholder{color:var(--text3)}
.snd-btn{width:40px;height:40px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;color:#000;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s cubic-bezier(.16,1,.3,1)}
.snd-btn:hover:not(:disabled){transform:scale(1.08)}
.snd-btn:active:not(:disabled){transform:scale(.95)}
.snd-btn:disabled{background:var(--hover);cursor:not-allowed;color:var(--text3)}
.inp-foot{display:flex;align-items:center;gap:6px;padding:5px 3px 0}
.iact{background:none;border:none;cursor:pointer;color:var(--text3);font-size:12px;padding:4px 8px;border-radius:6px;font-family:inherit;transition:all .2s;display:flex;align-items:center;gap:4px}
.iact:hover{background:var(--hover);color:var(--text2)}
.mbadge{margin-left:auto;font-size:11px;color:var(--text3);font-family:var(--mono);background:var(--surface);padding:2px 8px;border-radius:4px;border:1px solid var(--border)}

/* Highlight.js monochrome */
.hljs-keyword,.hljs-operator{color:#e8e8e8;font-weight:600}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute{color:#bdbdbd}
.hljs-comment,.hljs-quote{color:#5a5a5a;font-style:italic}
.hljs-number,.hljs-literal,.hljs-symbol{color:#d4d4d4}
.hljs-title,.hljs-name,.hljs-deletion{color:#ffffff}
.hljs-built_in,.hljs-type,.hljs-class{color:#cfcfcf}
.hljs-attr,.hljs-property{color:#d4d4d4}
.hljs-function,.hljs-function .hljs-title{color:#ffffff}
.hljs-params,.hljs-variable{color:#a8a8a8}
.hljs-meta{color:#bdbdbd}
.hljs-selector-tag{color:#e8e8e8}
.hljs-selector-class{color:#cfcfcf}
.hljs-selector-id{color:#ffffff}
.hljs-tag{color:#e8e8e8}