:root{--bg:#081020;--navy:#0e1e33;--navy-line:#22374f;--panel:#ffffff;--line:#d7dee6;--text:#1b232c;--muted:#5c6b7a;--chrome-text:#e8f0f8;--muted-chrome:#8fa5be;--green:#0f9d58;--red:#d1364a;font-family:ui-monospace,"SF Mono",Consolas,monospace;color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--chrome-text);height:100vh;overflow:hidden;display:flex;flex-direction:column}

.login-screen{flex:1;display:flex;align-items:center;justify-content:center}
.login-box{background:var(--panel);color:var(--text);padding:32px;width:320px;border:1px solid var(--navy-line);box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px}
.login-box h1{margin:0;font-size:18px}
.login-box p{margin:0;color:var(--muted);font-size:13px}
.login-box input{padding:10px 12px;border:1px solid var(--line);font:14px ui-monospace;border-radius:2px}
.login-error{color:var(--red);min-height:16px}
.login-box .ghost.primary{color:#fff}

.app-shell{flex:1;min-height:0;display:flex}

.sidebar{width:260px;flex-shrink:0;background:var(--navy);border-right:1px solid var(--navy-line);display:flex;flex-direction:column}
.sidebar-header{flex-shrink:0;padding:18px 16px 14px;border-bottom:1px solid var(--navy-line);display:flex;flex-direction:column;gap:14px}

.brand{display:flex;align-items:center;gap:10px}
.brand-mark{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;background:var(--green);color:#06210f;border-radius:8px}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-name{font-weight:900;font-size:15px;letter-spacing:.02em}
.brand-sub{font-weight:700;font-size:9.5px;letter-spacing:.14em;color:var(--muted-chrome)}

.new-chat-btn{width:100%;border:1px solid var(--navy-line);background:#16304a;color:var(--chrome-text);padding:10px 12px;font:700 11px ui-monospace;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;border-radius:4px}
.new-chat-btn:hover{border-color:var(--green);color:var(--green)}

.conversation-list{flex:1;overflow-y:auto;padding:10px}
.conversation-item{padding:10px 12px;margin-bottom:2px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--muted-chrome);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conversation-item:hover{background:#16304a}
.conversation-item.active{background:#16304a;color:var(--chrome-text)}
.conversation-empty{padding:14px 12px;color:var(--muted-chrome);font-size:12px;font-style:italic}

.sidebar-footer{flex-shrink:0;padding:12px 16px;border-top:1px solid var(--navy-line)}
.sidebar-footer .ghost{width:100%}

.ghost{border:1px solid var(--navy-line);background:#16304a;color:var(--chrome-text);padding:8px 14px;font:700 11px ui-monospace;cursor:pointer;text-transform:uppercase;letter-spacing:.05em}
.ghost:hover{border-color:var(--green);color:var(--green)}
.ghost.primary{background:var(--green);border-color:var(--green);color:#06210f}
.ghost.primary:hover{color:#06210f;opacity:.9}

.chat-screen{flex:1;min-height:0;display:flex;flex-direction:column;max-width:1100px;width:100%;margin:0 auto;padding:20px 32px 24px}

.messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:8px 0 20px}
.msg{max-width:80%;padding:12px 16px;border-radius:6px;white-space:pre-wrap;line-height:1.5;font-size:14px}
.msg.user{align-self:flex-end;background:var(--green);color:#06210f}
.msg.assistant{align-self:flex-start;background:var(--panel);color:var(--text)}
.msg.pending{align-self:flex-start;background:var(--panel);color:var(--muted);font-style:italic}
.msg.error{align-self:flex-start;background:#3a1420;color:#ffb4c2;border:1px solid var(--red)}

.composer{flex-shrink:0;display:flex;gap:10px;padding:14px 0 0;margin-bottom:22px;border-top:1px solid var(--navy-line);padding-top:14px}
.composer textarea{flex:1;resize:none;padding:10px 12px;font:14px ui-monospace;border:1px solid var(--line);border-radius:2px;background:var(--panel);color:var(--text);max-height:140px}

@media(max-width:700px){
  .sidebar{width:190px}
  .brand-sub{display:none}
  .chat-screen{padding:16px 14px 18px}
  .msg{max-width:92%}
}