/* 浅蓝色主题：覆盖 app.css 里的暗色 */
:root {
  --bg: #eaf5ff;
  --bg-2: #f6fbff;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-solid: #ffffff;
  --panel-hi: #eef8ff;
  --border: rgba(23, 74, 115, 0.12);
  --border-hi: rgba(23, 74, 115, 0.22);
  --text: #14344d;
  --muted: #4a6b86;
  --faint: #7b97ad;
  --pink: #3d9df3;
  --violet: #6fc2ff;
  --grad: linear-gradient(135deg, #56b0f5 0%, #8fd4ff 55%, #6fc2ff 100%);
  --grad-soft: linear-gradient(135deg, rgba(86, 176, 245, 0.16), rgba(143, 212, 255, 0.18));
  --shadow: 0 24px 60px rgba(25, 78, 120, 0.18);
}

body { background: var(--bg); color: var(--text); }

body::before {
  background:
    radial-gradient(900px 620px at 8% -6%, rgba(120, 196, 255, 0.35), transparent 62%),
    radial-gradient(1000px 700px at 96% 8%, rgba(160, 220, 255, 0.32), transparent 60%),
    radial-gradient(900px 700px at 50% 112%, rgba(186, 228, 255, 0.45), transparent 65%),
    linear-gradient(180deg, #eef8ff 0%, #e3f2ff 100%);
}
.glow-a { background: rgba(120, 190, 255, 0.35); }
.glow-b { background: rgba(150, 215, 255, 0.32); }
.stars { opacity: 0.35; }

/* 侧栏 */
.sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 249, 255, 0.86) 100%);
  border-right: 1px solid var(--border);
  box-shadow: 8px 0 30px rgba(40, 100, 150, 0.06);
}
.brand-text b { color: var(--text); }
.new-chat {
  background: linear-gradient(135deg, #8fd4ff 0%, #bfe8ff 100%);
  color: #0d3f63;
  box-shadow: 0 8px 22px rgba(80, 170, 240, 0.25);
}
.new-chat:hover { box-shadow: 0 12px 30px rgba(80, 170, 240, 0.32); }
.search { background: rgba(255, 255, 255, 0.9); border: 1px solid var(--border); }
.search:focus-within { border-color: rgba(61, 157, 243, 0.45); background: #ffffff; }
.search input { color: var(--text); }
.conv-item:hover { background: rgba(61, 157, 243, 0.07); }
.conv-item.active {
  background: linear-gradient(135deg, rgba(143, 212, 255, 0.35), rgba(191, 232, 255, 0.4));
  border-color: rgba(61, 157, 243, 0.28);
}
.conv-item.active::before { background: #3d9df3; }
.conv-title { color: var(--text); }
.foot-btn { color: var(--muted); }
.foot-btn:hover { background: rgba(61, 157, 243, 0.08); color: var(--text); }

/* 顶栏 */
.topbar {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.model-pill, .tag {
  background: rgba(61, 157, 243, 0.12);
  border: 1px solid rgba(61, 157, 243, 0.22);
  color: #2c6f9c;
}
.icon-btn { color: var(--muted); border: 1px solid transparent; }
.icon-btn:hover { background: rgba(61, 157, 243, 0.1); color: var(--text); border-color: var(--border); }

/* 聊天区 */
.chat { background: transparent; }
.empty h1 { color: var(--text); }
.empty p { color: var(--muted); }
.empty-face { background: linear-gradient(150deg, rgba(143, 212, 255, 0.5), rgba(191, 232, 255, 0.6)); }
.char-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(40, 100, 150, 0.06);
}
.char-card:hover { border-color: rgba(61, 157, 243, 0.4); background: #ffffff; }

.msg-head .who { color: #26739f; }
.msg.user .msg-head .who { color: #3a5f86; }
.msg-tools button { color: var(--faint); }
.msg-tools button:hover { background: rgba(61, 157, 243, 0.1); color: var(--text); }

.bubble {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(23, 74, 115, 0.1);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(40, 100, 150, 0.06);
}
.msg.user .bubble {
  background: linear-gradient(135deg, rgba(191, 232, 255, 0.9), rgba(220, 242, 255, 0.95));
  border-color: rgba(61, 157, 243, 0.22);
  color: #123a58;
  box-shadow: 0 8px 24px rgba(80, 170, 240, 0.1);
}
.bubble.error {
  background: #fff4f4;
  border-color: rgba(220, 80, 80, 0.3);
  color: #a83b3b;
}
.avatar {
  background: linear-gradient(150deg, rgba(143, 212, 255, 0.55), rgba(191, 232, 255, 0.65));
  border: 1px solid rgba(23, 74, 115, 0.12);
  box-shadow: 0 4px 14px rgba(40, 100, 150, 0.12);
  color: #1c4a6b;
}

.think { background: rgba(61, 157, 243, 0.06); border: 1px solid rgba(61, 157, 243, 0.14); }
.think[open] summary { border-bottom: 1px dashed rgba(61, 157, 243, 0.25); }
.think .think-body { color: var(--muted); }

.codeblock {
  background: #f2f9ff;
  border: 1px solid rgba(23, 74, 115, 0.12);
}
.codeblock-head { background: rgba(61, 157, 243, 0.08); color: var(--muted); border-bottom: 1px solid var(--border); }
.codeblock pre, .bubble code { color: #1c4a6b; }
.bubble code { background: rgba(61, 157, 243, 0.1); }

blockquote { border-left: 3px solid rgba(61, 157, 243, 0.4); color: var(--muted); }

/* 输入区 */
.composer-box {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 40px rgba(40, 100, 150, 0.1);
}
.composer-box:focus-within {
  border-color: rgba(61, 157, 243, 0.45);
  box-shadow: 0 14px 44px rgba(40, 100, 150, 0.14), 0 0 0 3px rgba(61, 157, 243, 0.08);
}
.composer textarea { color: var(--text); }
.composer textarea::placeholder { color: var(--faint); }
.hint, .composer-note { color: var(--faint); }
.send {
  background: linear-gradient(135deg, #56b0f5, #8fd4ff);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(80, 170, 240, 0.28);
}
.stop { background: rgba(220, 80, 80, 0.1); color: #b23b3b; border: 1px solid rgba(220, 80, 80, 0.25); }

/* 弹窗 / 菜单 */
.modal-backdrop { background: rgba(26, 66, 98, 0.28); }
.modal {
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
  border: 1px solid rgba(23, 74, 115, 0.14);
  box-shadow: 0 26px 70px rgba(26, 66, 98, 0.22);
}
.modal-head { border-bottom: 1px solid var(--border); }
.modal-foot { border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.6); }
.menu {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(26, 66, 98, 0.18);
}
.menu button { color: var(--text); }
.menu button:hover { background: rgba(61, 157, 243, 0.08); }

.input, .select, .textarea {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: rgba(61, 157, 243, 0.5);
  box-shadow: 0 0 0 3px rgba(61, 157, 243, 0.1);
}
.input::placeholder { color: var(--faint); }

.btn {
  background: rgba(61, 157, 243, 0.08);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn:hover { background: rgba(61, 157, 243, 0.14); border-color: var(--border-hi); }
.btn.primary { background: linear-gradient(135deg, #56b0f5, #8fd4ff); color: #ffffff; border-color: transparent; }
.btn.danger { color: #b23b3b; border-color: rgba(220, 80, 80, 0.3); }
.btn.danger:hover { background: rgba(220, 80, 80, 0.1); }
.mini-btn { color: var(--muted); }
.mini-btn:hover { background: rgba(61, 157, 243, 0.1); color: var(--text); }

.switch .track { background: rgba(23, 74, 115, 0.18); }
.switch input:checked + .track { background: linear-gradient(135deg, #56b0f5, #8fd4ff); }
.range-row input[type="range"] { accent-color: #3d9df3; }

.tab:hover { background: rgba(61, 157, 243, 0.07); }
.tab.active { background: rgba(61, 157, 243, 0.1); }
.tab.active::after { background: linear-gradient(135deg, #56b0f5, #8fd4ff); }

/* 工具卡片 / 审批 / 提问 / SSH */
.tool-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 8px 22px rgba(40, 100, 150, 0.06);
}
.tool-title { color: var(--text); }
.tool-cmd { color: #3f6480; }
.tool-body { background: #f4fbff; border-top: 1px solid var(--border); }
.tool-body pre { color: #23465f; }
.tool-status { background: rgba(23, 74, 115, 0.08); color: var(--muted); }
.tool-status.ok { color: #1d7a52; background: rgba(60, 200, 140, 0.14); }
.tool-status.error { color: #b23b3b; background: rgba(220, 80, 80, 0.12); }
.tool-status.denied { color: #a8681c; background: rgba(240, 170, 70, 0.16); }
.tool-status.pending { color: #a8681c; background: rgba(240, 170, 70, 0.16); }
.tool-status.running { color: #2c6f9c; background: rgba(61, 157, 243, 0.14); }

.appr-value { background: #f5fbff; border: 1px solid var(--border); color: #23465f; }
.ask-question { color: var(--text); }
.ask-option { background: rgba(61, 157, 243, 0.08); border: 1px solid rgba(61, 157, 243, 0.25); color: #235578; }
.ask-option:hover { background: rgba(143, 212, 255, 0.4); border-color: rgba(61, 157, 243, 0.45); }
.ssh-row { background: #ffffff; border: 1px solid var(--border); }
.ssh-main span { color: var(--faint); }
.ssh-empty { border-color: var(--border-hi); color: var(--faint); }

/* 提示 */
.toast {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 14px 40px rgba(26, 66, 98, 0.18);
}
.toast.error { background: #fff3f3; color: #a83b3b; border-color: rgba(220, 80, 80, 0.25); }

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(61, 157, 243, 0.28); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(61, 157, 243, 0.42); }

::selection { background: rgba(61, 157, 243, 0.25); }

.bubble strong { color: #0e3a5a; }
.bubble em { color: #2b6488; }
.codeblock pre code { color: #1c4a6b; }
.codeblock pre { color: #1c4a6b; }

input[type="range"] {
  background: linear-gradient(90deg, rgba(86, 176, 245, 0.55), rgba(143, 212, 255, 0.7));
}
input[type="range"]::-webkit-slider-thumb {
  background: #ffffff;
  border: 2px solid #3d9df3;
  box-shadow: 0 2px 8px rgba(80, 170, 240, 0.4);
}

.greet-option, .manage-card {
  background: #ffffff;
  border: 1px solid var(--border);
}
.greet-option:hover, .manage-card:hover { border-color: rgba(61, 157, 243, 0.35); }
.manage-card .mini-btn { color: var(--faint); }

.char-stats {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 560px;
}
.msg-cost {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 4px;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
}

.composer {
  background: linear-gradient(180deg, rgba(234, 245, 255, 0) 0%, rgba(234, 245, 255, 0.94) 55%);
}
.composer-note { color: var(--faint); }