/* ============================================================
   OpenHuman Brain OS — OH-002-UI-R2 双主题第二大脑终端
   日间(白) / 夜间(深) 双主题 · 对话粒子 · 柔和 Aura
   语义变量驱动主题, 适配 iPhone Safari · safe-area
   ============================================================ */

/* ---------- 夜间(默认) ---------- */
:root, :root[data-theme="night"] {
  --bg: #05070d;
  --bg-grad1: rgba(212,175,55,0.05);
  --bg-grad2: rgba(111,224,239,0.04);
  --surface: rgba(16,21,36,0.78);
  --surface-2: rgba(16,21,36,0.55);
  --input: rgba(10,14,24,0.92);
  --border: rgba(212,175,55,0.16);
  --text: #eef1f8;
  --text-dim: #8a93a6;
  --gold: #d4af37;
  --gold-bright: #f5d061;
  --cyan: #6fe0ef;
  --violet: #9b8cff;
  --ok: #43d17a;
  --warn: #f5b942;
  --bad: #f0556b;
  --shadow: 0 14px 40px rgba(0,0,0,0.45);
  --appbar-fade: linear-gradient(180deg, rgba(5,7,13,0.9), rgba(5,7,13,0.2) 70%, transparent);
  --composer-fade: linear-gradient(180deg, transparent, rgba(5,7,13,0.85) 40%);
  --watermark: rgba(238,241,248,0.05);
}

/* ---------- 日间(白) ---------- */
:root[data-theme="day"] {
  --bg: #f5f6f9;
  --bg-grad1: rgba(212,175,55,0.10);
  --bg-grad2: rgba(111,200,224,0.06);
  --surface: rgba(255,255,255,0.92);
  --surface-2: #ffffff;
  --input: #ffffff;
  --border: rgba(28,31,45,0.10);
  --text: #1b1f27;
  --text-dim: #6b7280;
  --gold: #b8860b;
  --gold-bright: #c9962a;
  --cyan: #2399ab;
  --violet: #6a5cf0;
  --ok: #1ea760;
  --warn: #c9871a;
  --bad: #d23b52;
  --shadow: 0 12px 34px rgba(30,40,70,0.10);
  --appbar-fade: linear-gradient(180deg, rgba(245,246,249,0.95), rgba(245,246,249,0.3) 70%, transparent);
  --composer-fade: linear-gradient(180deg, transparent, rgba(245,246,249,0.92) 45%);
  --watermark: rgba(27,31,39,0.05);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Helvetica Neue", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
body {
  position: relative; min-height: 100dvh; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 6%, var(--bg-grad1), transparent 55%),
    radial-gradient(120% 80% at 50% 120%, var(--bg-grad2), transparent 50%),
    var(--bg);
  transition: background 0.4s ease, color 0.4s ease;
}

/* ---------- 柔和动态主脑 ---------- */
#aura {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.9s ease;
}
body.aura-on #aura { opacity: 1; }

/* ---------- 顶部栏 ---------- */
.appbar {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top,0px) + 12px) 14px 8px;
  background: var(--appbar-fade); backdrop-filter: blur(8px);
}
.icon-btn {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border); color: var(--text);
  background: var(--surface-2); cursor: pointer; backdrop-filter: blur(8px);
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn.ghost-spacer { border: none; background: none; pointer-events: none; }
.appbar-title { text-align: center; line-height: 1.1; }
.appbar-name {
  display: block; font-weight: 700; font-size: 16px; letter-spacing: 0.5px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.appbar-state { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); box-shadow: 0 0 8px currentColor; }
.state-dot.ok { background: var(--ok); color: var(--ok); }
.state-dot.warn { background: var(--warn); color: var(--warn); }
.state-dot.bad { background: var(--bad); color: var(--bad); }

/* ---------- 中央舞台 ---------- */
.stage {
  position: relative; z-index: 5; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px 22px;
}
.stage-watermark {
  position: absolute; top: 36%; left: 50%; transform: translate(-50%, -50%);
  font-size: 34vw; font-weight: 800; letter-spacing: 4px; color: var(--watermark);
  pointer-events: none; user-select: none; transition: opacity 0.5s ease; z-index: -1;
}
body.aura-on .stage-watermark { opacity: 0; }
.stage-center { transition: transform 0.6s ease, opacity 0.6s ease; }
.brain-status {
  font-size: 30px; font-weight: 800; letter-spacing: 1px; margin-bottom: 10px;
  background: linear-gradient(90deg, var(--gold-bright), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brain-sub { font-size: 13px; color: var(--text-dim); }
body.state-listening .brain-status { animation: breathe 2.6s ease-in-out infinite; }
body.state-thinking .brain-status { animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: 0.65; } 50% { opacity: 1; } }

.reply { position: relative; z-index: 5; max-width: 680px; width: 100%; margin: 0 auto 8px; padding: 0 18px; }
.reply .bubble {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 16px; padding: 14px 16px; font-size: 15px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; animation: fade 0.4s ease;
}

/* ---------- 底部 Composer ---------- */
.composer-wrap {
  position: sticky; bottom: 0; z-index: 12;
  padding: 8px 12px calc(env(safe-area-inset-bottom,0px) + 12px);
  background: var(--composer-fade); max-width: 760px; width: 100%; margin: 0 auto;
}
.tools { display: flex; gap: 8px; padding: 6px 4px 10px; flex-wrap: wrap; animation: fade 0.25s ease; }
.tool-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13px; cursor: pointer; }
.composer {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 26px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(14px);
}
.c-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); cursor: pointer;
}
.c-icon:active { transform: scale(0.92); }
.c-icon.voice.on { color: #fff; background: linear-gradient(135deg, var(--cyan), var(--gold)); border-color: transparent; }
.c-model { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.composer input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text); font-size: 16px; padding: 8px 2px; }
.composer input::placeholder { color: var(--text-dim); }
.c-send { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); }
.c-send:active { filter: brightness(0.92); }

/* 语音监听条 (图二) */
.voice-bar { display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; }
.voice-bar .voice-hint { flex: 1; text-align: center; color: var(--text-dim); font-size: 14px; }
body.voice-active .composer { display: none; }
body.voice-active .tools { display: none; }
body.voice-active .voice-bar { display: flex; }

/* ---------- 全屏面板 ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--bg); animation: slideUp 0.28s ease; }
.overlay[hidden] { display: none; }
@keyframes slideUp { from { transform: translateY(2%); opacity: 0; } to { transform: none; opacity: 1; } }
.overlay-bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: calc(env(safe-area-inset-top,0px) + 12px) 14px 10px; border-bottom: 1px solid var(--border); }
.overlay-bar h2 { margin: 0; text-align: center; font-size: 17px; font-weight: 700; }
.overlay-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px calc(env(safe-area-inset-bottom,0px) + 28px); max-width: 760px; width: 100%; margin: 0 auto; }

/* 设置列表 */
.set-list { display: flex; flex-direction: column; gap: 2px; }
.set-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); color: var(--text); cursor: pointer; margin-bottom: 8px; text-align: left; }
.set-item:active { transform: scale(0.99); border-color: var(--gold); }
.set-item .si-ico { font-size: 20px; width: 26px; text-align: center; }
.set-item .si-main { flex: 1; }
.set-item .si-title { font-size: 15px; font-weight: 600; }
.set-item .si-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.set-item .si-arrow { color: var(--text-dim); }

/* ---------- 通用 ---------- */
.section-title { margin: 18px 4px 12px; font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); }
.muted { color: var(--text-dim); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kv { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--text-dim); }
.kv .v { font-variant-numeric: tabular-nums; }
.flag-on { color: var(--ok); }
.flag-off { color: var(--text-dim); }
.tag-ro { color: var(--cyan); font-size: 11px; border: 1px solid var(--border); padding: 2px 7px; border-radius: 999px; }
.skeleton { color: var(--text-dim); font-size: 13px; padding: 10px 2px; }
.btn { padding: 12px 18px; border-radius: 14px; border: none; cursor: pointer; font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); }
.btn:active { filter: brightness(.92); }
.btn.ghost { background: transparent; color: var(--gold); border: 1px solid var(--border); }
.btn.small { padding: 7px 12px; font-size: 13px; }
.bubble { padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.bubble.me { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 22%, transparent), color-mix(in srgb, var(--gold) 8%, transparent)); border: 1px solid var(--border); }
.bubble.ai { background: var(--surface); border: 1px solid var(--border); }
.fade-in { animation: fade 0.35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 项目网格 */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.proj { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2); cursor: pointer; }
.proj:active { transform: scale(0.98); border-color: var(--gold); }
.proj .ico { font-size: 22px; }
.proj .name { font-weight: 700; font-size: 15px; }
.proj .desc { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.badge { align-self: flex-start; margin-top: 4px; font-size: 10px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--gold); }

/* Daily Brief */
.brief-banner { border: 1px solid var(--border); background: var(--surface-2); color: var(--warn); border-radius: 14px; padding: 14px 16px; font-size: 14px; margin-bottom: 14px; }
.brief-sec { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; background: var(--surface-2); }
.brief-sec .bs-title { font-size: 14px; }

/* 主题切换 */
.theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.theme-seg button { padding: 12px 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-size: 13px; cursor: pointer; }
.theme-seg button.on { color: #fff; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-color: transparent; font-weight: 700; }

/* 模型中心 */
.cfg { font-size: 10px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); margin-left: 6px; white-space: nowrap; }
.cfg-ok { color: var(--ok); }
.cfg-no { color: var(--text-dim); }
.cfg-warn { color: var(--warn); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.seg button { padding: 9px 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-size: 13px; cursor: pointer; }
.seg button.on { color: #fff; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-color: transparent; font-weight: 700; }
.cost-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.chip { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.chip span { font-size: 11px; color: var(--text-dim); }
.chip b { font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }
.chip small { font-size: 10px; color: var(--text-dim); }
.route-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.route-form select, .form-grid select, .form-grid input { padding: 11px 10px; border-radius: 12px; background: var(--input); border: 1px solid var(--border); color: var(--text); font-size: 14px; outline: none; width: 100%; }
#route-out { margin-top: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-dim); }
.model-card .mtags { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 6px; }
.mtag { font-size: 10px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--cyan); }
.mtag.dim { color: var(--text-dim); }
.test-out:not(:empty) { margin-top: 8px; }
.prov-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.prov { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: 13px; }
.prov.ok { border-color: var(--ok); }
.prov span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }