*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg0:#0a0a0a;
  --bg1:#111111;
  --bg2:#181818;
  --bg3:#222222;
  --bg4:#2a2a2a;
  --border:#2c2c2c;
  --border2:#383838;
  --text1:#f0f0f0;
  --text2:#a0a0a0;
  --text3:#666;
  --accent:#10a37f;
  --accent2:#0d8f6e;
  --accent-dim:rgba(16,163,127,.15);
  --user:#1d4ed8;
  --claude:#7c3aed;
  --gemini:#059669;
  --openai:#d97706;
  --antigravity:#9333ea;
  --sidebar-w:270px;
  --topbar-h:52px;
  --radius:12px;
}

html,body{height:100%;font-family:'Inter',-apple-system,sans-serif;background:var(--bg0);color:var(--text1);overflow:hidden}

/* ── App Layout ── */
.app{display:flex;height:100vh;width:100%}

/* ── Sidebar ── */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--bg1);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  transition:transform .24s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}

.sidebar-top{padding:14px 12px 10px;border-bottom:1px solid var(--border)}

.logo{display:flex;align-items:center;gap:9px;padding:2px 4px 10px}
.logo-icon{font-size:22px}
.logo-text-wrap{display:flex;flex-direction:column;gap:1px}
.logo-name{font-size:15px;font-weight:700;background:linear-gradient(135deg,#10a37f,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-ver{font-size:10px;color:var(--text3);letter-spacing:.5px}

.new-chat-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 14px;background:var(--bg2);border:1px solid var(--border2);
  border-radius:9px;color:var(--text1);font-size:13px;font-weight:500;
  cursor:pointer;transition:background .15s;
}
.new-chat-btn:hover{background:var(--bg3)}

/* Model Panel */
.model-panel{border-bottom:1px solid var(--border);padding:0 12px}
.panel-title{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--text2);
  padding:10px 0;cursor:pointer;user-select:none;
  text-transform:uppercase;letter-spacing:.4px;
}
.panel-title:hover{color:var(--text1)}
.panel-title .chevron{margin-left:auto;transition:transform .2s}
.panel-title.open .chevron{transform:rotate(180deg)}

.model-rows{padding-bottom:10px;display:flex;flex-direction:column;gap:6px}
.model-row{display:flex;align-items:center;gap:6px}
.model-row-label{font-size:11px;color:var(--text2);flex-shrink:0;width:70px}
.model-select{
  flex:1;background:var(--bg2);border:1px solid var(--border2);
  border-radius:6px;color:var(--text1);font-size:11.5px;padding:4px 6px;
  cursor:pointer;outline:none;
}
.model-select:focus{border-color:var(--accent)}

/* History */
.chat-history{flex:1;overflow-y:auto;padding:8px}
.history-empty{text-align:center;color:var(--text3);font-size:12px;padding:20px 0}
.history-item{
  padding:8px 10px;border-radius:7px;font-size:12.5px;color:var(--text2);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .12s;
}
.history-item:hover,.history-item.active{background:var(--bg3);color:var(--text1)}

/* Sidebar footer */
.sidebar-footer{
  padding:10px 14px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.provider-dots{display:flex;gap:5px}
.dot{font-size:13px;opacity:.3;cursor:default;transition:opacity .3s}
.dot.on{opacity:1}
.footer-ver{font-size:10px;color:var(--text3)}

/* ── Main ── */
.main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg0)}

/* Topbar */
.topbar{
  height:var(--topbar-h);display:flex;align-items:center;
  padding:0 14px;border-bottom:1px solid var(--border);
  gap:10px;flex-shrink:0;
}
.menu-btn{
  background:none;border:none;color:var(--text2);cursor:pointer;
  padding:5px;border-radius:6px;display:none;
}
.menu-btn:hover{color:var(--text1);background:var(--bg3)}
.topbar-title{font-size:15px;font-weight:600;flex:1}
.topbar-right{display:flex;align-items:center;gap:8px}

.active-model-badge{
  font-size:11px;color:var(--text2);background:var(--bg2);
  border:1px solid var(--border2);border-radius:99px;
  padding:2px 9px;white-space:nowrap;
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);transition:background .3s}
.status-dot.loading{background:#f59e0b;animation:pulse 1s infinite}
.status-dot.error{background:#ef4444}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── Messages ── */
.messages{
  flex:1;overflow-y:auto;padding:0 0 16px;
  scroll-behavior:smooth;
}
.messages::-webkit-scrollbar{width:5px}
.messages::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* Welcome */
.welcome{text-align:center;padding:44px 20px 36px;max-width:640px;margin:0 auto}
.welcome-logo{font-size:52px;margin-bottom:14px}
.welcome h1{font-size:24px;font-weight:700;margin-bottom:6px}
.v2-badge{
  font-size:11px;font-weight:600;background:var(--accent-dim);
  color:var(--accent);border:1px solid var(--accent);
  border-radius:99px;padding:1px 7px;vertical-align:middle;
}
.welcome p{color:var(--text2);font-size:14px;margin-bottom:18px}

.model-showcase{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:24px;
}
.mc{
  font-size:11.5px;padding:4px 10px;border-radius:99px;border:1px solid var(--border2);
  font-weight:500;
}
.mc-claude{background:rgba(124,58,237,.15);color:#c4b5fd}
.mc-gemini{background:rgba(5,150,105,.15);color:#6ee7b7}
.mc-anti{background:rgba(147,51,234,.15);color:#d8b4fe}
.mc-oai{background:rgba(217,119,6,.15);color:#fcd34d}

.examples{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.example-btn{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;background:var(--bg2);border:1px solid var(--border2);
  border-radius:10px;color:var(--text2);font-size:12.5px;
  cursor:pointer;transition:all .15s;
}
.example-btn:hover{background:var(--bg3);color:var(--text1);border-color:var(--accent)}

/* Message rows */
.msg-row{display:flex;padding:6px 14px;margin-top:2px}
.msg-row.user{justify-content:flex-end}
.msg-row.assistant{justify-content:flex-start}

.msg-bubble{
  max-width:min(680px,80%);padding:11px 15px;
  border-radius:var(--radius);font-size:14.5px;line-height:1.65;
}
.msg-row.user .msg-bubble{
  background:var(--user);color:#fff;border-bottom-right-radius:4px;
}
.msg-row.assistant .msg-bubble{
  background:var(--bg1);border:1px solid var(--border);
  border-bottom-left-radius:4px;word-break:break-word;
}

/* Model badge in message */
.msg-model-badge{
  font-size:10.5px;color:var(--text3);margin-bottom:7px;
  display:flex;align-items:center;gap:4px;
}

/* Agent steps */
.agent-step{
  border-left:3px solid var(--border2);margin:8px 0;padding:8px 12px;
  border-radius:0 9px 9px 0;background:var(--bg2);
}
.agent-step.planner {border-color:#7c3aed}
.agent-step.searcher{border-color:#0891b2}
.agent-step.thinker {border-color:#d97706}
.agent-step.coder   {border-color:#16a34a}

.agent-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.agent-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.agent-step.planner  .agent-label{color:#a78bfa}
.agent-step.searcher .agent-label{color:#38bdf8}
.agent-step.thinker  .agent-label{color:#fbbf24}
.agent-step.coder    .agent-label{color:#4ade80}

.agent-model-tag{
  font-size:10px;padding:2px 7px;border-radius:99px;font-weight:500;
  background:var(--bg3);color:var(--text2);border:1px solid var(--border2);
}

.agent-content{
  font-size:13.5px;color:var(--text2);line-height:1.62;
  white-space:pre-wrap;word-break:break-word;
}

/* Code blocks */
.msg-bubble pre,.agent-content pre{
  background:#0d0d0d;border:1px solid var(--border2);border-radius:8px;
  padding:12px 14px;overflow-x:auto;margin:8px 0;
  font-size:12.5px;font-family:'Fira Code','Cascadia Code',monospace;line-height:1.55;
}
.msg-bubble code,.agent-content code{
  font-family:'Fira Code','Cascadia Code',monospace;font-size:12.5px;
  background:rgba(255,255,255,.07);padding:2px 5px;border-radius:4px;
}
.msg-bubble pre code,.agent-content pre code{background:transparent;padding:0}

/* ZIP card */
.zip-card{
  background:var(--bg2);border:1px solid var(--accent);border-radius:var(--radius);
  padding:14px;margin:10px 0;
}
.zip-card-title{font-size:13.5px;font-weight:600;color:var(--accent);margin-bottom:8px}
.zip-files{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:11px}
.zip-file-tag{
  font-size:11px;background:var(--bg3);border:1px solid var(--border2);
  border-radius:5px;padding:2px 8px;color:var(--text2);font-family:monospace;
}
.zip-dl-btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 18px;
  background:var(--accent);color:#fff;border:none;border-radius:9px;
  font-size:13px;font-weight:500;cursor:pointer;transition:background .15s;
}
.zip-dl-btn:hover{background:var(--accent2)}

/* Typing */
.typing-indicator{display:flex;gap:4px;padding:4px 0}
.typing-indicator span{
  width:6px;height:6px;border-radius:50%;background:var(--text3);
  animation:blink 1.2s infinite;
}
.typing-indicator span:nth-child(2){animation-delay:.2s}
.typing-indicator span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.4;transform:scale(1)}30%{opacity:1;transform:scale(1.2)}}

/* Input */
.input-area{padding:10px 14px 14px;border-top:1px solid var(--border);flex-shrink:0}
.input-wrapper{
  display:flex;align-items:flex-end;gap:9px;background:var(--bg1);
  border:1px solid var(--border2);border-radius:14px;padding:9px 12px;
  transition:border-color .15s;
}
.input-wrapper:focus-within{border-color:var(--accent)}
textarea#userInput{
  flex:1;background:transparent;border:none;outline:none;color:var(--text1);
  font-size:14.5px;line-height:1.55;resize:none;font-family:inherit;
  max-height:160px;overflow-y:auto;
}
textarea#userInput::placeholder{color:var(--text3)}
.send-btn{
  flex-shrink:0;width:35px;height:35px;background:var(--accent);border:none;
  border-radius:9px;color:#fff;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .15s,opacity .15s;
}
.send-btn:disabled{opacity:.3;cursor:not-allowed}
.send-btn:not(:disabled):hover{background:var(--accent2)}

.input-hint{font-size:11.5px;color:var(--text3);text-align:center;margin-top:7px}
.input-hint #complexHint{color:var(--accent);font-weight:500}

/* Mobile */
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:150;backdrop-filter:blur(3px);
}
.sidebar-overlay.show{display:block}

@media(max-width:640px){
  .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:200;transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .menu-btn{display:flex}
  .msg-bubble{max-width:88%}
  .welcome{padding:30px 14px 24px}
  .welcome h1{font-size:20px}
}

textarea::-webkit-scrollbar{width:4px}
textarea::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}