* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0f172a; --bg2: #1e293b; --bg3: #334155;
  --fg: #e2e8f0; --muted: #94a3b8; --accent: #38bdf8; --accent2: #0ea5e9;
  --user: #1e40af; --ok: #22c55e; --err: #ef4444; --tool: #475569;
  --radius: 12px;
}
html, body { height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--fg); overflow: hidden; }

/* Auth */
.auth-screen { height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card { background: var(--bg2); padding: 2.5rem; border-radius: var(--radius); width: min(90vw, 360px); text-align: center; }
.auth-card h1 { margin-bottom: 1.2rem; font-size: 1.5rem; }
.auth-card p { color: var(--muted); margin-bottom: 1.2rem; }
.btn-primary { background: var(--accent2); color: #fff; border: none; padding: .8rem 1.4rem; border-radius: 8px; font-size: 1rem; cursor: pointer; width: 100%; }

/* Layout */
.app-screen { height: 100vh; display: grid; grid-template-columns: 250px 1fr 320px; }
.sidebar { background: var(--bg2); display: flex; flex-direction: column; border-right: 1px solid var(--bg3); }
.chat { display: flex; flex-direction: column; min-width: 0; }
.panel { background: var(--bg2); border-left: 1px solid var(--bg3); display: flex; flex-direction: column; overflow: hidden; }

/* Sidebar */
.sidebar-head, .sidebar-foot { padding: .8rem; }
.btn-new { width: 100%; background: var(--accent2); color: #fff; border: none; padding: .7rem; border-radius: 8px; cursor: pointer; font-size: .95rem; }
.btn-ghost { width: 100%; background: transparent; color: var(--muted); border: 1px solid var(--bg3); padding: .6rem; border-radius: 8px; cursor: pointer; }
.sessions { flex: 1; overflow-y: auto; padding: 0 .5rem; }
.session { display: flex; align-items: center; justify-content: space-between; padding: .6rem .7rem; border-radius: 8px; cursor: pointer; color: var(--muted); font-size: .9rem; }
.session:hover { background: var(--bg3); color: var(--fg); }
.session.active { background: var(--bg3); color: var(--fg); }
.s-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-del { background: none; border: none; cursor: pointer; opacity: .5; font-size: .85rem; }
.s-del:hover { opacity: 1; }

/* Topbar */
.topbar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; background: var(--bg2); border-bottom: 1px solid var(--bg3); }
.title { font-weight: 600; flex: 1; }
.title .sub { font-weight: 400; font-size: .72rem; color: var(--muted); margin-left: .3rem; }
.topbar-right { display: flex; align-items: center; gap: .6rem; }
.icon-btn { background: var(--bg3); border: none; color: var(--fg); width: 38px; height: 38px; border-radius: 8px; cursor: pointer; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; }
.conn { font-size: .75rem; }
.conn.connected { color: var(--ok); }
.conn.disconnected { color: var(--err); }
.conn.thinking { color: var(--accent); }
#menu-toggle, #panel-toggle { display: none; }

/* Messages */
.messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.welcome { color: var(--muted); text-align: center; margin: auto; max-width: 420px; line-height: 1.5; }
.msg { max-width: 80%; padding: .7rem .9rem; border-radius: var(--radius); line-height: 1.5; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--user); }
.msg.assistant { align-self: flex-start; background: var(--bg2); }
.msg.tool { align-self: flex-start; background: transparent; color: var(--muted); font-size: .8rem; font-family: ui-monospace, monospace; padding: .2rem .5rem; }
.msg.status { align-self: center; color: var(--muted); font-size: .8rem; }
.msg.error { align-self: flex-start; background: rgba(239,68,68,.15); color: #fca5a5; font-size: .9rem; }
.msg-images { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.msg-images img { max-width: 180px; max-height: 180px; border-radius: 8px; }
.msg pre { background: #0b1220; padding: .7rem; border-radius: 8px; overflow-x: auto; margin: .4rem 0; }
.msg code { background: rgba(148,163,184,.2); padding: .1rem .3rem; border-radius: 4px; font-size: .88em; }
.msg pre code { background: none; padding: 0; }
.msg h2 { font-size: 1.05rem; margin: .5rem 0 .3rem; }
.msg h3 { font-size: .95rem; margin: .4rem 0 .2rem; }
.msg ul { margin: .3rem 0 .3rem 1.2rem; }

/* Status + Composer */
.status-line { padding: .2rem 1rem; color: var(--muted); font-size: .78rem; min-height: 1.1rem; }
.attach-preview { padding: .4rem 1rem; gap: .5rem; flex-wrap: wrap; }
.thumb { position: relative; }
.thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.thumb button { position: absolute; top: -6px; right: -6px; background: var(--err); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; cursor: pointer; line-height: 1; }
.composer { display: flex; gap: .5rem; padding: .7rem 1rem 1rem; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; background: var(--bg2); border: 1px solid var(--bg3); color: var(--fg); border-radius: 10px; padding: .7rem; font-size: 1rem; font-family: inherit; max-height: 160px; }
.btn-send { background: var(--accent2); color: #fff; border: none; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; font-size: 1.1rem; }
.btn-send:disabled { opacity: .4; cursor: not-allowed; }

/* Panel */
.panel-head { padding: .8rem 1rem; font-weight: 600; border-bottom: 1px solid var(--bg3); }
.tree { padding: .5rem; overflow-y: auto; }
.tree-group { margin-bottom: .6rem; }
.tree-h { font-size: .8rem; color: var(--muted); padding: .3rem .5rem; }
.tree-f { padding: .4rem .7rem; border-radius: 6px; cursor: pointer; font-size: .85rem; }
.tree-f:hover { background: var(--bg3); }
.tree-empty { padding: .3rem .7rem; font-size: .78rem; color: var(--muted); font-style: italic; }
.viewer { padding: 1rem; overflow-y: auto; border-top: 1px solid var(--bg3); font-size: .85rem; line-height: 1.5; flex: 1; }
.viewer-h { font-family: ui-monospace, monospace; font-size: .75rem; color: var(--accent); margin-bottom: .6rem; }

/* Mobile */
@media (max-width: 900px) {
  .app-screen { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  .panel { position: fixed; right: 0; top: 0; bottom: 0; width: 300px; z-index: 30; transform: translateX(100%); transition: transform .2s; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.panel-open .panel { transform: translateX(0); }
  #menu-toggle, #panel-toggle { display: inline-flex; }
  .msg { max-width: 90%; }
}