:root{
  --ink:#F2EEE3;
  --ink-dim:#B7B1A0;
  --bg:#15140F;
  --bg-raised:#1D1B14;
  --bg-panel:#201E16;
  --brass:#C8A24C;
  --brass-bright:#E4C06B;
  --teal:#3F9C93;
  --line:#33301F;
  --danger:#C25B4A;
  --radius:8px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  overflow:hidden;
}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
.mono{font-family:'IBM Plex Mono',monospace;}
:focus-visible{outline:2px solid var(--brass-bright);outline-offset:2px;}

.app{
  display:flex;flex-direction:column;height:100dvh;position:relative;
}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:var(--ink);text-decoration:none;}
.icon-btn{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--ink-dim);transition:background .15s;
}
.icon-btn:hover,.icon-btn[aria-expanded="true"]{background:var(--bg-raised);color:var(--ink);}

/* ---------- Dropdown panels ---------- */
.dropdown-panel{
  position:absolute;top:58px;left:10px;width:min(320px,88vw);
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
  z-index:40;display:none;flex-direction:column;max-height:70vh;
}
.dropdown-panel.right{left:auto;right:10px;}
.dropdown-panel.open{display:flex;}

.tab-nav{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;}
.tab-btn{padding:12px 14px;font-size:13px;color:var(--ink-dim);white-space:nowrap;border-bottom:2px solid transparent;}
.tab-btn.active{color:var(--brass-bright);border-color:var(--brass);}
.tab-body{padding:16px;overflow-y:auto;}
.tab-pane{display:none;}
.tab-pane.active{display:block;}
.pane-label{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-dim);margin-bottom:6px;}
.pane-value{font-size:15px;margin-bottom:14px;}
.pane-hint{font-size:13px;color:var(--ink-dim);line-height:1.5;}
.text-btn{font-size:13px;color:var(--ink-dim);text-decoration:underline;}
.text-btn.danger{color:var(--danger);}

.new-chat-btn{
  margin:14px;padding:10px;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--brass-bright);font-weight:600;font-size:14px;text-align:left;
}
.new-chat-btn:hover{border-color:var(--brass);}
.history-groups{padding:0 6px 14px;overflow-y:auto;}
.history-group-label{
  font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-dim);
  padding:8px 10px 4px;
}
.history-item{
  display:block;width:100%;text-align:left;padding:9px 10px;border-radius:6px;
  font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.history-item:hover{background:var(--bg-raised);}
.history-item.active{background:var(--bg-raised);color:var(--brass-bright);}

/* ---------- Stream ---------- */
.stream{
  flex:1;overflow-y:auto;padding:20px 14px 12px;display:flex;flex-direction:column;gap:18px;
}
.empty-state{
  flex:1;display:flex;align-items:center;justify-content:center;
  color:var(--ink-dim);font-size:14px;text-align:center;padding:0 20px;
}
.message{max-width:82%;display:flex;flex-direction:column;gap:6px;}
.message.user{align-self:flex-start;align-items:flex-start;}
.message.assistant{align-self:flex-end;align-items:flex-end;}
.bubble{
  padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
}
.message.user .bubble{background:var(--bg-raised);border:1px solid var(--line);border-top-left-radius:4px;}
.message.assistant .bubble{background:linear-gradient(160deg,#2A2415,#1D1B14);border:1px solid var(--brass);border-top-right-radius:4px;}
.message-tools{display:flex;gap:2px;opacity:0.55;transition:opacity .15s;}
.message:hover .message-tools{opacity:1;}
.tool-btn{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;color:var(--ink-dim);
}
.tool-btn:hover{background:var(--bg-raised);color:var(--ink);}
.tool-divider{width:1px;height:16px;background:var(--line);margin:0 4px;align-self:center;}
.tool-btn.selected{color:var(--brass-bright);}

/* ---------- Input dock ---------- */
.dock{
  border-top:1px solid var(--line);padding:10px 12px 14px;flex-shrink:0;
  background:var(--bg);
}
.dock-toolbox{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.toolbox-btn{
  display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:16px;
  border:1px solid var(--line);font-size:12.5px;color:var(--ink-dim);
}
.toolbox-btn[data-on="true"]{border-color:var(--teal);color:var(--teal);}

.model-switcher{position:relative;}
.model-switcher-btn{
  display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:16px;
  border:1px solid var(--brass);color:var(--brass-bright);font-size:12.5px;font-weight:500;
}
.model-list{
  position:absolute;bottom:38px;left:0;width:220px;
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(0,0,0,0.45);display:none;overflow:hidden;z-index:30;
}
.model-list.open{display:block;}
.model-option{
  display:block;width:100%;text-align:left;padding:10px 12px;font-size:13px;
}
.model-option .m-label{font-weight:600;display:block;}
.model-option .m-desc{color:var(--ink-dim);font-size:11.5px;display:block;margin-top:2px;}
.model-option:hover{background:var(--bg-raised);}
.model-option.active{background:var(--bg-raised);}
.model-option.active .m-label{color:var(--brass-bright);}

.dock-input-row{display:flex;align-items:flex-end;gap:8px;}
.message-input{
  flex:1;resize:none;background:var(--bg-raised);border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 14px;color:var(--ink);font-family:inherit;
  font-size:14.5px;max-height:160px;line-height:1.4;
}
.message-input:focus{border-color:var(--brass);}
.send-btn{
  width:40px;height:40px;flex-shrink:0;border-radius:50%;
  background:var(--brass);color:#15140F;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.send-btn:hover{background:var(--brass-bright);}
.send-btn:disabled{background:var(--line);color:var(--ink-dim);cursor:not-allowed;}
.disclaimer{margin-top:8px;font-size:11px;color:var(--ink-dim);text-align:center;}

@media (min-width:760px){
  .dropdown-panel{top:64px;}
}