:root {
  --bg: #ffffff;
  --sidebar-bg: #f7f5f2;
  --panel: #ffffff;
  --text: #2d2a26;
  --muted: #85807a;
  --accent: #c15f3c;
  --accent-hover: #a94f30;
  --border: #e9e5e0;
  --user-bubble: #f0ede8;
  --shadow: rgba(0,0,0,.05);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
:root[data-theme="dark"] {
  --bg: #1b1a19;
  --sidebar-bg: #171615;
  --panel: #211f1e;
  --text: #ece9e6;
  --muted: #8f8a83;
  --accent: #e07a54;
  --accent-hover: #ea8c68;
  --border: #322f2c;
  --user-bubble: #2a2826;
  --shadow: rgba(0,0,0,.3);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); transition: background .15s ease, color .15s ease; }

/* ---------- login ---------- */
.login-body { display: flex; align-items: center; justify-content: center; }
.login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 14px; width: 300px; box-shadow: 0 4px 24px var(--shadow); }
.login-card h1 { font-size: 19px; margin: 0 0 8px; text-align: center; font-weight: 600; }
.login-card input { padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; outline: none; }
.login-card input:focus { border-color: var(--accent); }
.login-card button { padding: 11px; border: none; border-radius: 10px; background: var(--accent); color: white; font-size: 14px; font-weight: 500; cursor: pointer; }
.login-card button:hover { background: var(--accent-hover); }

/* ---------- app shell ---------- */
.app { display: flex; height: 100vh; }

.sidebar { width: 260px; flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 12px; }
.new-chat { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 14px; cursor: pointer; text-align: left; }
.new-chat:hover { background: var(--user-bubble); }
.sidebar-title { margin-top: 20px; padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sidebar-spacer { flex: 1; }
.theme-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: none; background: none; color: var(--muted); font-size: 13px; cursor: pointer; border-radius: 8px; width: 100%; }
.theme-toggle:hover { background: var(--user-bubble); color: var(--text); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
.logout-form { margin: 0; }
.logout-btn { width: 100%; padding: 10px 12px; border: none; background: none; color: var(--muted); font-size: 13px; text-align: left; cursor: pointer; border-radius: 8px; }
.logout-btn:hover { background: var(--user-bubble); color: var(--text); }

.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.messages { flex: 1; overflow-y: auto; }
.empty-state { height: 100%; display: flex; align-items: center; justify-content: center; }
.empty-state h1 { font-size: 28px; font-weight: 500; color: var(--muted); }

.msg-row { padding: 24px 20px; transition: background .15s ease; }
.msg-row.assistant { background: var(--panel); }
.msg-row.user { background: var(--bg); }
.msg-inner { max-width: 720px; margin: 0 auto; display: flex; gap: 14px; }
.avatar { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: white; }
.avatar.assistant-avatar { background: var(--accent); }
.avatar.user-avatar { background: #6b6560; }
.bubble { flex: 1; line-height: 1.65; font-size: 15px; min-width: 0; }
.bubble p { margin: 0 0 10px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 0 0 10px; padding-left: 22px; }
.bubble h1, .bubble h2, .bubble h3 { font-size: 16px; margin: 16px 0 8px; }
.bubble strong { font-weight: 600; }
.bubble code { background: var(--user-bubble); padding: 2px 5px; border-radius: 4px; font-size: 13px; }
.bubble pre { background: var(--user-bubble); padding: 12px; border-radius: 8px; overflow-x: auto; }
.bubble pre code { background: none; padding: 0; }
.bubble.thinking { color: var(--muted); font-style: italic; }
.download-row { display: flex; gap: 8px; margin-top: 10px; }
.download-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); cursor: pointer; border: 1px solid var(--border); padding: 6px 10px; border-radius: 8px; width: fit-content; }
.download-link:hover { background: var(--user-bubble); }

/* ---------- composer ---------- */
.composer-wrap { padding: 16px 20px 20px; }
#composer { max-width: 720px; margin: 0 auto; }
.composer-row { display: flex; align-items: flex-end; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 8px 8px 8px 14px; box-shadow: 0 2px 10px var(--shadow); }
.composer-row textarea { flex: 1; resize: none; border: none; outline: none; font-size: 15px; font-family: inherit; max-height: 200px; padding: 6px 0; background: none; color: var(--text); }
.attach { cursor: pointer; color: var(--muted); display: flex; align-items: center; padding: 6px; border-radius: 50%; flex-shrink: 0; }
.attach:hover { background: var(--user-bubble); color: var(--text); }
#send-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
#send-btn:hover { background: var(--accent-hover); }
#send-btn:disabled { background: var(--border); cursor: default; }
.file-chip { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 8px 6px; background: var(--user-bubble); padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--text); }
.file-chip[hidden] { display: none; }
.file-chip button { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 12px; }

@media (max-width: 720px) {
  .sidebar { display: none; }
}