:root{
  --bg:#0b0b0b;--panel:#0f0f0f;--panel-2:#141414;--text:#e8e8e8;--muted:#a9a9a9;
  --accent:#fff;--line:#242424;--card:#161616;--success:#1db954;--danger:#ff4d4f
}
*{box-sizing:border-box}html,body{height:100%}
body.theme-dark{background:var(--bg);color:var(--text);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,"Helvetica Neue",Arial}
.layout{display:flex;height:100vh;overflow:hidden}

/* Claude-like drawer */
.sidebar{
  width:320px;min-width:280px;max-width:380px;background:var(--panel);
  border-right:1px solid var(--line);display:flex;flex-direction:column;transition:transform .2s ease,width .2s
}
.sidebar .top{display:flex;gap:8px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}
.sidebar .brand{display:flex;align-items:center;gap:10px}
.sidebar .brand img{width:22px;height:22px}
.sidebar .brand h2{font-size:14px;margin:0;color:#fff;letter-spacing:.5px}
.sidebar .new-chat{margin:10px 12px}
.sidebar .new-chat button{width:100%;background:#1a1a1a;border:1px solid #2a2a2a;color:#fff;border-radius:12px;padding:10px 12px}
.sidebar .history{flex:1;overflow:auto;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.sidebar .history .item{
  display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;color:var(--text);
  border:1px solid transparent;cursor:pointer;background:transparent
}
.sidebar .history .item:hover{background:#1b1b1b;border-color:#242424}
.sidebar .history .item .ghost-btn{padding:6px 8px;border-radius:10px}
.sidebar .bottom{padding:10px;border-top:1px solid var(--line)}
.sidebar .bottom a{display:block;color:var(--muted);text-decoration:none;padding:8px 10px}

.chat-root{flex:1;display:flex;flex-direction:column;background:var(--panel-2)}
.chat-header{
  display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(6px);position:sticky;top:0;background:rgba(18,18,18,.8)
}
.chat-header .brand{display:flex;gap:10px;align-items:center}
.logo{width:24px;height:24px;filter:invert(1)}
.chat-header h1{font-size:16px;margin:0 4px 0 0}
.ghost-btn{background:transparent;border:1px solid #2a2a2a;border-radius:10px;color:#ddd;padding:8px 10px;cursor:pointer}
.ghost-btn:hover{background:#1a1a1a}

.messages{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:14px}
.message{display:flex;gap:12px;align-items:flex-start}
.message .avatar{width:30px;height:30px;border-radius:6px;background:#222;border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;color:#fff}
.message .bubble{background:var(--card);border:1px solid #242424;border-radius:14px;padding:12px 14px;max-width:850px;white-space:pre-wrap}
.message.user .bubble{background:#101010}
.message.assistant .avatar{background:#0f0f0f}
.message .meta{font-size:12px;color:var(--muted);margin-top:4px}

.prompt-form{padding:12px;border-top:1px solid var(--line);background:var(--panel)}
.input-wrap{display:flex;gap:10px;background:#0f0f0f;border:1px solid #222;border-radius:14px;padding:10px;align-items:flex-end}
textarea{flex:1;resize:none;background:transparent;color:#fff;border:0;outline:none;max-height:200px}
.send-btn{background:#fff;color:#000;border:0;border-radius:12px;padding:10px 14px;font-weight:600;cursor:pointer}
.hint{font-size:12px;color:var(--muted);padding:8px 2px}
.badge{font-size:11px;border:1px solid #2a2a2a;padding:2px 6px;border-radius:8px;color:#aaa}
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace;border:1px solid #2a2a2a;border-bottom-width:2px;border-radius:6px;padding:1px 5px;font-size:12px;color:#bbb}

/* Model selector next to Send */
.model-select{
  display:flex;align-items:center;gap:6px
}
.model-select select{
  background:#1b1b1b;border:1px solid #2a2a2a;color:#e8e8e8;border-radius:10px;padding:8px 10px
}

@media (max-width: 900px){
  .sidebar{position:fixed;z-index:50;height:100%;transform:translateX(-100%);width:88%;max-width:360px}
  .sidebar.show{transform:translateX(0)}
  .chat-root{margin-left:0}
}