/* ── BOTTOM-RIGHT CHAT WIDGET ── */
/* pointer-events:none on container — only children that are visible/open receive events */
#chat-widget{position:fixed;bottom:28px;right:28px;z-index:9800;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none;}

/* TOGGLE BUTTON — compact by default, expands on hover (leftward) */
#chat-toggle{
  display:flex;align-items:center;gap:0;
  padding:9px 14px;
  background:transparent;
  border:1px solid rgba(200,255,0,0.4);
  color:var(--acid);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:3px;
  cursor:none;position:relative;overflow:hidden;
  transition:box-shadow .25s, color .25s, border-color .25s;
  pointer-events:auto;
}
#chat-toggle::before{
  content:'';position:absolute;inset:0;background:var(--acid);
  transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.16,1,.3,1);z-index:-1;
}
#chat-toggle:hover{color:#000;box-shadow:0 0 24px rgba(200,255,0,0.4);}
#chat-toggle:hover::before{transform:scaleX(1);}
.cw-icon{font-size:13px;line-height:1;flex-shrink:0;}
.cw-label{
  line-height:1;white-space:nowrap;overflow:hidden;
  max-width:0;opacity:0;
  transition:max-width .35s cubic-bezier(0.16,1,0.3,1), opacity .2s ease, margin-left .35s;
  margin-left:0;
}
#chat-toggle:hover .cw-label{max-width:80px;opacity:1;margin-left:8px;}
.cw-ping{position:absolute;top:-4px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--acid);animation:bl .9s infinite;box-shadow:0 0 6px var(--acid);}

/* PANEL */
.cw-panel{width:380px;height:480px;background:#000;border:1px solid var(--acid);box-shadow:0 0 30px rgba(200,255,0,0.15),0 0 1px var(--acid);display:flex;flex-direction:column;opacity:0;transform:translateY(20px) scale(0.96);pointer-events:none;transition:all .3s cubic-bezier(0.16,1,0.3,1);transform-origin:bottom right;}
.cw-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}

/* PANEL HEADER */
.cw-header{background:rgba(200,255,0,0.05);padding:12px 18px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(200,255,0,0.12);flex-shrink:0;}
.cw-h-title{flex:1;font-size:10px;letter-spacing:2px;color:var(--acid);}
.cw-h-badge{font-size:9px;color:var(--acid);display:flex;align-items:center;gap:4px;letter-spacing:1px;}
.cw-h-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--acid);animation:bl .9s infinite;}
.cw-close{font-size:12px;color:rgba(255,255,255,0.45);transition:color .2s;padding:2px 6px;cursor:none;background:transparent;border:none;}
.cw-close:hover{color:var(--red);}

/* OUTPUT — NOTE: JS uses .cw-ic and .cw-rt class names */
.cw-out{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:4px;}
.cw-out::-webkit-scrollbar{width:2px;}
.cw-out::-webkit-scrollbar-thumb{background:rgba(200,255,0,0.2);}
.cw-row{display:flex;gap:8px;font-size:11px;line-height:1.9;}
.cw-ic{flex-shrink:0;}
.cw-row.cw-u .cw-ic{color:var(--acid);}
.cw-row.cw-a .cw-ic{color:#00d4ff;}
.cw-row.cw-s .cw-ic{color:rgba(255,255,255,0.4);}
.cw-row.cw-u .cw-rt{color:var(--text);}
.cw-row.cw-a .cw-rt{color:#00d4ff;font-weight:300;}
.cw-row.cw-s .cw-rt{color:rgba(255,255,255,0.6);font-size:10px;}
.cw-row.cw-a .cw-rt.cw-str::after{content:'▊';color:var(--acid);animation:bl .6s infinite;}

/* INPUT ROW */
.cw-in-row{padding:10px 18px;display:flex;align-items:center;gap:8px;border-top:1px solid rgba(200,255,0,0.1);flex-shrink:0;}
.cw-pr{color:var(--acid);font-size:12px;flex-shrink:0;}
#cwInput{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:11px;caret-color:var(--acid);cursor:none;}
#cwInput::placeholder{color:rgba(255,255,255,0.35);}
#cwSend{font-size:9px;letter-spacing:2px;padding:5px 10px;border:1px solid rgba(255,255,255,0.15);background:transparent;color:rgba(255,255,255,0.7);cursor:none;transition:all .2s;}
#cwSend:hover{border-color:var(--acid);color:var(--acid);}

/* HINT */
.cw-hint{font-size:8px;color:rgba(255,255,255,0.35);padding:6px 18px;border-top:1px solid rgba(255,255,255,0.04);flex-shrink:0;letter-spacing:1px;}

/* ── LIGHT MODE ── */
body.light-mode #chat-toggle{border-color:rgba(255,107,0,0.5);color:var(--acid);}
body.light-mode #chat-toggle::before{background:var(--acid);}
body.light-mode #chat-toggle:hover{color:#fff;}
body.light-mode .cw-ping{background:var(--acid);box-shadow:0 0 6px var(--acid);}
/* Panel stays dark in light mode — terminal aesthetic, so text must stay white */
body.light-mode .cw-panel{border-color:var(--acid);box-shadow:0 0 24px rgba(255,107,0,0.12);}
body.light-mode .cw-header{border-bottom-color:rgba(255,107,0,0.15);}
body.light-mode .cw-h-title{color:var(--acid);}
body.light-mode .cw-h-badge{color:var(--acid);}
body.light-mode .cw-h-badge::before{background:var(--acid);}
/* User text — must stay white since panel bg is always dark */
body.light-mode .cw-row.cw-u .cw-ic{color:var(--acid);}
body.light-mode .cw-row.cw-u .cw-rt{color:rgba(255,255,255,0.9);}
body.light-mode #cwInput{color:rgba(255,255,255,0.85);}
body.light-mode #cwSend:hover{border-color:var(--acid);color:var(--acid);}
body.light-mode .cw-out::-webkit-scrollbar-thumb{background:rgba(255,107,0,0.2);}

@media(max-width:480px){
  .cw-panel{width:calc(100vw - 40px);}
  #chat-widget{bottom:16px;right:16px;}
  #chat-toggle{cursor:pointer;padding:10px 16px;}
  /* collapsed by default on mobile — label hidden, just icon */
  #chat-toggle .cw-label{max-width:0;opacity:0;margin-left:0;}
  /* expanded state: label slides in from right */
  #chat-toggle.expanded .cw-label{max-width:80px;opacity:1;margin-left:8px;}
  #chat-toggle.expanded{color:#000;box-shadow:0 0 24px rgba(200,255,0,0.4);}
  #chat-toggle.expanded::before{transform:scaleX(1);}
  .cw-close{cursor:pointer;}
  #cwSend{cursor:pointer;}
}