:root {
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  --sidebar-bg: #f7f8fa;
  --text: #1a1a1a;
  --text-soft: #8a8f98;
  --accent: #4d6bfe;
  --accent-dark: #3b55e0;
  --bubble-user: #4d6bfe;
  --bubble-user-text: #ffffff;
  --bubble-ai: #f2f3f5;
  --bubble-ai-text: #1a1a1a;
  --border: #e6e8eb;
  --danger: #e5484d;
  --code-bg: #f2f3f5;
  --shadow: 0 2px 12px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --bg-soft: #1c1f26;
    --sidebar-bg: #1c1f26;
    --text: #e8eaed;
    --text-soft: #9aa0a8;
    --accent: #5b7cfa;
    --accent-dark: #4d6bfe;
    --bubble-user: #3d5afe;
    --bubble-user-text: #ffffff;
    --bubble-ai: #262a33;
    --bubble-ai-text: #e8eaed;
    --border: #2e333d;
    --danger: #f2555a;
    --code-bg: #14161a;
    --shadow: 0 2px 12px rgba(0,0,0,.3);
  }
}
body[data-theme="dark"] {
  --bg: #14161a; --bg-soft: #1c1f26; --sidebar-bg: #1c1f26;
  --text: #e8eaed; --text-soft: #9aa0a8; --accent: #5b7cfa; --accent-dark: #4d6bfe;
  --bubble-user: #3d5afe; --bubble-ai: #262a33; --bubble-ai-text: #e8eaed;
  --border: #2e333d; --danger: #f2555a; --code-bg: #14161a;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--text);
  overscroll-behavior: none;
}
.hidden { display:none !important; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea { font-family:inherit; }

/* ===== Login ===== */
#login-view {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--bg) 0%, var(--bg-soft) 100%); z-index:100;
}
.login-card {
  width:min(88vw, 360px); text-align:center; padding:40px 32px;
  background:var(--bg); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow);
}
.logo { font-size:44px; color:var(--accent); margin-bottom:8px; }
.login-card h1 { font-size:26px; font-weight:700; letter-spacing:2px; }
.login-card .sub { color:var(--text-soft); font-size:14px; margin:6px 0 28px; }
.login-card input {
  width:100%; padding:13px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg-soft); color:var(--text); font-size:16px; outline:none; margin-bottom:16px;
}
.login-card input:focus { border-color:var(--accent); }
.login-card button {
  width:100%; padding:13px; border-radius:12px; background:var(--accent); color:#fff;
  font-size:16px; font-weight:600; transition:background .2s;
}
.login-card button:active { background:var(--accent-dark); }
.error { color:var(--danger); font-size:13px; margin-top:12px; }

/* ===== Layout ===== */
#main-view { display:flex; height:100dvh; }
.mask { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; }
.sidebar {
  width:min(78vw, 300px); background:var(--sidebar-bg); border-right:1px solid var(--border);
  display:flex; flex-direction:column; z-index:50; transition:transform .25s ease;
}
.sidebar-header { padding:16px 14px 10px; }
.brand { font-size:18px; font-weight:700; color:var(--accent); letter-spacing:1px; }
.new-btn {
  width:100%; margin-top:12px; padding:11px; border-radius:12px; background:var(--accent); color:#fff;
  font-size:15px; font-weight:600;
}
.session-list { flex:1; overflow-y:auto; padding:6px 8px 12px; }
.session-item {
  display:flex; align-items:center; gap:8px; padding:11px 10px; border-radius:10px; cursor:pointer;
  margin-bottom:2px; transition:background .15s;
}
.session-item:hover { background:var(--border); }
.session-item.active { background:var(--accent); color:#fff; }
.session-item .s-title { flex:1; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.session-item .s-time { font-size:11px; color:var(--text-soft); flex-shrink:0; }
.session-item.active .s-time { color:rgba(255,255,255,.75); }
.session-item .s-more {
  width:26px; height:26px; border-radius:7px; font-size:16px; color:var(--text-soft);
  display:none; align-items:center; justify-content:center; flex-shrink:0;
}
.session-item:hover .s-more { display:flex; }
.session-item .s-more:active { background:var(--border); }
@media (max-width: 768px) { .session-item .s-more { display:flex; } }
.s-group { font-size:11px; color:var(--text-soft); padding:12px 12px 4px; letter-spacing:1px; }
.s-empty { font-size:13px; color:var(--text-soft); text-align:center; padding:30px 10px; }

/* ===== Action menu (DeepSeek-style anchored popover) ===== */
.act-menu {
  position: fixed; z-index: 100; min-width: 176px; padding: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06);
}
.act-menu.show { animation: menuPop .14s ease; }
@keyframes menuPop { from { opacity:0; transform: scale(.95) translateY(-4px); } to { opacity:1; transform:none; } }
.act-item {
  display:flex; align-items:center; gap:10px;
  padding: 9px 12px; font-size: 14px; border-radius: 8px;
  color: var(--text); text-align:left; cursor:pointer; white-space:nowrap;
}
.act-item svg { width:16px; height:16px; flex-shrink:0; opacity:.85; }
.act-item:hover { background: var(--bg-soft); }
.act-item.danger { color: var(--danger); }
.act-item.danger:hover { background: rgba(229,72,77,.08); }
.sidebar-footer { padding:10px 14px; border-top:1px solid var(--border); }
.foot-btn { font-size:13px; color:var(--text-soft); padding:6px 10px; border-radius:8px; }
.foot-btn:active { background:var(--border); }

/* ===== File Assistant ===== */
.fa-entry {
  display:flex; align-items:center; gap:8px; margin:10px 12px; padding:11px 12px;
  border-radius:12px; background:var(--bg); border:1px solid var(--border);
  font-size:14px; font-weight:600; color:var(--text); cursor:pointer;
}
.fa-entry:active { background:var(--bg-soft); }
.fa-entry-hint { margin-left:auto; font-size:10px; color:var(--text-soft); font-weight:400; }
.fa-view { position:absolute; inset:0; z-index:20; background:var(--bg); display:flex; flex-direction:column; }
.fa-header {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid var(--border);
  padding-top: calc(10px + env(safe-area-inset-top));
}
.fa-hint { font-size:11px; color:var(--text-soft); margin-left:auto; }
.fa-msgs { flex:1; overflow-y:auto; }
.fa-day { text-align:center; font-size:11px; color:var(--text-soft); padding:12px 0 6px; }
.fa-msg { margin-bottom:12px; padding:0 14px; }
.fa-meta { font-size:11px; color:var(--text-soft); margin:0 4px 3px; }
.fa-bubble {
  display:inline-block; max-width:82%; padding:9px 13px; border-radius:14px;
  background:var(--bubble-ai); color:var(--bubble-ai-text); font-size:14px; line-height:1.6;
  word-break:break-word; white-space:pre-wrap; vertical-align:top;
}
.fa-filecard { display:flex; align-items:center; gap:10px; padding:10px 12px; }
.fa-ico { font-size:22px; flex-shrink:0; }
.fa-finfo { flex:1; min-width:0; }
.fa-fname { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fa-fsize { font-size:11px; color:var(--text-soft); }
.fa-dl {
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:6px 12px; font-size:13px; cursor:pointer; flex-shrink:0;
}
.fa-imgcard { padding:8px; }
.fa-img { max-width:240px; max-height:240px; border-radius:8px; display:block; margin-bottom:6px; background:var(--bg-soft); }

/* ===== Chat ===== */
#chat-main { flex:1; display:flex; flex-direction:column; min-width:0; position:relative; }
.chat-header {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid var(--border); background:var(--bg);
  position:sticky; top:0; z-index:10;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.chat-title { flex:1; font-size:16px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icon-btn { width:34px; height:34px; border-radius:9px; font-size:18px; display:flex; align-items:center; justify-content:center; }
.icon-btn:active { background:var(--bg-soft); }

.messages { flex:1; overflow-y:auto; padding:16px 14px 8px; scroll-behavior:smooth; }
.msg { display:flex; margin-bottom:14px; animation:fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }
.msg.user { justify-content:flex-end; }
.msg.ai { justify-content:flex-start; }
.bubble {
  max-width:86%; padding:10px 14px; border-radius:16px; font-size:15px; line-height:1.65;
  word-break:break-word; white-space:pre-wrap; overflow-wrap:anywhere;
}
.msg.user .bubble { background:var(--bubble-user); color:var(--bubble-user-text); border-bottom-right-radius:4px; }
.msg.ai .bubble { background:var(--bubble-ai); color:var(--bubble-ai-text); border-bottom-left-radius:4px; }
.bubble pre {
  background:var(--code-bg); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; overflow-x:auto; font-size:13px; margin:8px 0; white-space:pre;
}
.bubble code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; }
.bubble :not(pre) > code { background:var(--code-bg); padding:2px 5px; border-radius:5px; }
.bubble p { margin:4px 0; }
.bubble h1,.bubble h2,.bubble h3 { margin:10px 0 6px; }
.bubble ul,.bubble ol { margin:6px 0; padding-left:22px; }
.bubble a { color:var(--accent); }
.bubble table { border-collapse:collapse; margin:8px 0; width:100%; font-size:13px; }
.bubble th,.bubble td { border:1px solid var(--border); padding:5px 8px; text-align:left; }
.msg-time { font-size:10px; color:var(--text-soft); margin-top:3px; text-align:right; }
.tool-note {
  font-size:11px; color:var(--text-soft); padding:4px 10px; border-radius:8px;
  background:var(--bg-soft); margin-bottom:6px; cursor:pointer; display:inline-block;
}
.typing { display:flex; gap:4px; padding:4px 20px 10px; }
.typing span { width:7px; height:7px; border-radius:50%; background:var(--text-soft); animation:blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s; } .typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,80%,100%{opacity:.25;} 40%{opacity:1;} }

.composer-wrap {
  display:flex; align-items:flex-end; gap:8px; padding:10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border); background:var(--bg);
}
.msg-previews {
  display:flex; gap:8px; padding:8px 12px 0; overflow-x:auto; background:var(--bg);
}
.msg-previews .pv { position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid var(--border); flex-shrink:0; background:var(--bg-soft); }
.msg-previews .pv img { width:100%; height:100%; object-fit:cover; }
.msg-previews .pv .pv-x { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:11px; line-height:18px; text-align:center; }
.msg-previews .pv-file { width:auto; min-width:100px; max-width:160px; height:64px; display:flex; align-items:center; gap:6px; padding:0 10px; }
.msg-previews .pv-file .pv-ico { font-size:20px; flex-shrink:0; }
.msg-previews .pv-file .pv-name { flex:1; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attach-btn { color:var(--text-soft); font-size:22px; width:38px; height:38px; }
.bubble img { max-width:100%; border-radius:10px; margin:6px 0; display:block; }
.composer-wrap textarea {
  flex:1; resize:none; border:1px solid var(--border); border-radius:20px;
  background:var(--bg-soft); color:var(--text); font-size:16px; line-height:1.4;
  padding:11px 16px; max-height:140px; outline:none;
}
.composer-wrap textarea:focus { border-color:var(--accent); }
.send-btn,.stop-btn {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.send-btn { background:var(--accent); color:#fff; }
.send-btn:disabled { opacity:.4; }
.stop-btn { background:var(--danger); color:#fff; }

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
}

/* ===== Desktop (DeepSeek-style centered layout) ===== */
@media (min-width: 769px) {
  #menu-btn { display:none; }
  .messages { padding: 24px 0 8px; }
  .messages > * { margin-left:auto; margin-right:auto; width:min(92%, 820px); }
  .msg { max-width:820px; margin-left:auto; margin-right:auto; }
  .bubble { max-width: 78%; }
  .composer-wrap { justify-content:center; padding: 14px 24px; }
  .composer-wrap textarea {
    max-width: 760px; width: 100%; border-radius: 24px; padding: 14px 20px; font-size:15px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
  }
  .composer-wrap .send-btn, .composer-wrap .stop-btn { width: 44px; height: 44px; }
  .msg-previews { justify-content:center; }
  .msg-previews .pv { width: 72px; height: 72px; }
  .chat-header { padding: 14px 24px; }
}