:root{
  --bg:#0f0f17; --bg2:#161622; --bg3:#1d1d2b; --fg:#ececf1; --muted:#9b9bb0;
  --accent:#4f46e5; --accent2:#6366f1; --user:#4f46e5; --asst:#1d1d2b;
  --border:#2a2a3c; --ok:#34d399; --danger:#ef4444; --radius:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea{font:inherit;color:inherit}
#app{display:flex;height:100%;overflow:hidden}

/* safe-area */
.topbar,.composer{padding-top:env(safe-area-inset-top)}
.composer{padding-bottom:env(safe-area-inset-bottom)}

/* Drawer */
.drawer{position:fixed;top:0;left:0;height:100%;width:84%;max-width:330px;
  background:var(--bg2);border-right:1px solid var(--border);
  transform:translateX(-100%);transition:transform .25s ease;z-index:30;
  display:flex;flex-direction:column;padding:env(safe-area-inset-top) 12px 0}
.drawer.open{transform:translateX(0)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;
  transition:.2s;z-index:20}
.scrim.open{opacity:1;visibility:visible}
.drawer-head{padding:10px 4px}
.drawer-foot{padding:10px 4px;border-top:1px solid var(--border);margin-top:auto}
.thread-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.thread-list li{padding:11px 12px;border-radius:10px;color:var(--fg);
  display:flex;align-items:center;gap:8px;margin-bottom:2px;word-break:break-word}
.thread-list li.active{background:var(--bg3)}
.thread-list li .t-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-list li .t-del{opacity:0;background:none;border:none;color:var(--muted);font-size:18px;padding:0 2px}
.thread-list li:hover .t-del,.thread-list li.active .t-del{opacity:1}

/* Main */
.main{flex:1;display:flex;flex-direction:column;min-width:0;width:100%}
.topbar{display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--bg);border-bottom:1px solid var(--border)}
.topbar-title{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn{background:none;border:none;font-size:22px;padding:6px 8px;color:var(--muted)}
.icon-btn:active{color:var(--fg)}

.messages{flex:1;overflow-y:auto;padding:14px 0;-webkit-overflow-scrolling:touch}
.empty-hint{color:var(--muted);text-align:center;padding:30% 24px;font-size:14px}
.msg{max-width:760px;margin:0 auto;padding:0 14px;display:flex;flex-direction:column;gap:2px}
.msg .bubble{padding:11px 14px;border-radius:var(--radius);white-space:pre-wrap;
  word-break:break-word;overflow-wrap:anywhere}
.msg.user{align-items:flex-end}
.msg.user .bubble{background:var(--user);border-bottom-right-radius:4px;max-width:82%}
.msg.asst .bubble{background:var(--asst);border:1px solid var(--border);border-bottom-left-radius:4px;max-width:88%}
.msg .bubble code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:5px;font-size:.9em}
.msg .actions{display:flex;gap:14px;opacity:0;transition:.15s;padding:2px 4px}
.msg:hover .actions,.msg .actions.always{opacity:1}
.msg .actions button{background:none;border:none;color:var(--muted);font-size:12px;padding:2px 0}
.msg .actions button:active{color:var(--fg)}
.msg .role{font-size:11px;color:var(--muted);padding:0 4px}
.cursor::after{content:"▋";animation:blink 1s steps(2) infinite;color:var(--muted)}
@keyframes blink{50%{opacity:0}}

/* Composer */
.composer{background:var(--bg);border-top:1px solid var(--border);padding:10px 12px}
.composer-inner{max-width:760px;margin:0 auto;display:flex;gap:8px;align-items:flex-end;
  background:var(--bg3);border:1px solid var(--border);border-radius:18px;padding:8px 10px}
#input{flex:1;background:none;border:none;resize:none;max-height:160px;outline:none;padding:6px 2px;line-height:1.35}
.send-btn{width:36px;height:36px;flex-shrink:0;border:none;border-radius:50%;
  background:var(--accent);color:#fff;font-size:18px;display:grid;place-items:center}
.send-btn:disabled{background:var(--bg3);color:var(--muted)}
.send-btn:active{transform:scale(.94)}

/* Buttons */
.btn{border:none;border-radius:10px;padding:10px 14px;font-weight:600}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:active{background:var(--accent2)}
.btn.ghost{background:none;color:var(--fg)}
.btn.ghost.danger{color:var(--danger)}
.btn.ghost:active{opacity:.7}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;
  align-items:flex-end;justify-content:center;z-index:40;padding:0}
.modal.open{display:flex}
.modal-card{background:var(--bg2);width:100%;max-width:480px;border-radius:18px 18px 0 0;
  border:1px solid var(--border);border-bottom:none;max-height:92vh;overflow-y:auto;
  display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px}
.modal-head h2{margin:0;font-size:17px}
.modal-body{padding:0 16px;display:flex;flex-direction:column;gap:14px}
.hint-row{font-size:12px;color:var(--muted);background:var(--bg3);border:1px solid var(--border);
  border-radius:10px;padding:10px 12px}
.direct-fields{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:13px;color:var(--muted);font-weight:600}
.field input[type=text],.field input[type=url],.field input[type=password]{
  background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:11px 12px}
.field.checkbox{flex-direction:row;align-items:center;gap:10px}
.field .hint{font-size:12px;color:var(--muted)}
.modal-foot{display:flex;justify-content:space-between;gap:10px;padding:16px;border-top:1px solid var(--border);margin-top:16px}
code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:5px}

/* desktop drawer static */
@media(min-width:820px){
  .drawer{position:static;transform:none;width:280px;flex-shrink:0;transition:none}
  .scrim{display:none!important}
  .main{width:auto}
}