:root { color-scheme: dark; font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; background:#0b1020; color:#e5e7eb; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(145deg,#07101f,#111827 55%,#0f172a); }
button,input,textarea { font:inherit; }
button { border:0; border-radius:9px; padding:.65rem .9rem; color:#eef2ff; background:#334155; cursor:pointer; }
button:hover { background:#475569; }
button:disabled { opacity:.4; cursor:not-allowed; }
.layout { display:grid; grid-template-columns:320px 1fr; height:100vh; }
.sidebar { border-right:1px solid #253047; background:rgba(8,15,30,.84); overflow:auto; }
.sidebar header,.conversation-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.1rem; border-bottom:1px solid #253047; }
h1,h2,p { margin:0; }
h1 { font-size:1.05rem; }
h2 { font-size:1rem; }
.connection { font-size:.75rem; color:#fbbf24; }
.connection.online { color:#34d399; }
.filters { display:flex; gap:.4rem; padding:.75rem; }
.filter { flex:1; font-size:.82rem; padding:.5rem; }
.filter.active { background:#4f46e5; }
.sessions { padding:0 .65rem 1rem; }
.session { width:100%; text-align:left; padding:.75rem; margin:.25rem 0; background:transparent; border:1px solid transparent; }
.session:hover,.session.active { background:#172033; border-color:#334155; }
.session-top { display:flex; justify-content:space-between; gap:.4rem; }
.engine { text-transform:capitalize; color:#a5b4fc; font-size:.72rem; }
.session-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.session-sub { margin-top:.35rem; color:#94a3b8; font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.state { width:.55rem; height:.55rem; display:inline-block; border-radius:50%; background:#64748b; margin-right:.3rem; }
.state.working,.state.tool_running { background:#22c55e; box-shadow:0 0 8px #22c55e; }
.state.awaiting_approval { background:#f59e0b; }
.conversation { min-width:0; display:grid; grid-template-rows:auto 1fr auto; }
.conversation-header p { color:#94a3b8; font-size:.75rem; margin-top:.3rem; }
.danger { background:#7f1d1d; }
.messages { overflow:auto; padding:1.2rem max(1rem,calc((100% - 900px)/2)); }
.message { max-width:82%; margin:.7rem 0; padding:.8rem 1rem; border-radius:14px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55; }
.message.user { margin-left:auto; background:#3730a3; }
.message.assistant { background:#1e293b; border:1px solid #334155; }
.message small { display:block; opacity:.6; margin-top:.4rem; }
.empty { color:#64748b; text-align:center; margin-top:20vh; }
.composer { display:flex; gap:.65rem; padding:1rem max(1rem,calc((100% - 900px)/2)); border-top:1px solid #253047; background:rgba(8,15,30,.86); }
textarea,input { width:100%; border:1px solid #334155; border-radius:10px; padding:.75rem; background:#111827; color:#f8fafc; resize:none; }
.composer button { background:#4f46e5; min-width:5rem; }
.login-page { display:grid; place-items:center; padding:1rem; }
.login-card { width:min(420px,100%); padding:2rem; border:1px solid #334155; background:#111827; border-radius:16px; box-shadow:0 20px 60px #0007; }
.login-card p { color:#94a3b8; margin:1rem 0; line-height:1.5; }
.login-card button { width:100%; background:#4f46e5; margin-top:.75rem; }
@media (max-width:700px) { .layout { grid-template-columns:125px 1fr; } .sidebar h1 { display:none; } .filters { flex-direction:column; } .session-sub,.engine { display:none; } .message { max-width:94%; } }