:root {
  --bg: #050d16;
  --panel: #0b1826;
  --line: #17334d;
  --cyan: #35c5f4;
  --cyan-dim: #1b6d8c;
  --text: #d7ecf7;
  --muted: #6d8ba0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: radial-gradient(1200px 800px at 50% -10%, #0a1c2e 0%, var(--bg) 60%);
  color: var(--text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  display: flex; flex-direction: column; min-height: 100dvh;
  overflow-x: hidden;
}
.hidden { display: none !important; }

/* ---------- 口令门 ---------- */
.gate {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.gate-box { display: flex; flex-direction: column; gap: 14px; align-items: center; width: 240px; }
.gate-box input {
  width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 16px; text-align: center; outline: none;
}
.gate-box button {
  width: 100%; padding: 12px; border-radius: 10px; border: none;
  background: var(--cyan); color: #03212f; font-size: 16px; font-weight: 600;
}
.gate-msg { color: #e0707a; font-size: 13px; min-height: 18px; }

/* ---------- 顶栏 ---------- */
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(14px + env(safe-area-inset-top)) 18px 14px; border-bottom: 1px solid var(--line);
}
.title { color: var(--cyan); letter-spacing: 4px; font-weight: 700; font-size: 15px; }
.head-right { display: flex; align-items: center; gap: 10px; }
.clock { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.mute-btn {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 8px; font-size: 14px; line-height: 1.4; cursor: pointer;
}
.mute-btn.muted { opacity: .55; }

main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 14px 14px 150px; }

/* ---------- 今日播报 ---------- */
.brief-card {
  background: linear-gradient(160deg, #0d2033, var(--panel));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 16px;
  box-shadow: 0 0 24px rgba(53, 197, 244, .07);
}
.brief-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.brief-title { font-weight: 700; }
.brief-date { color: var(--muted); font-size: 12px; flex: 1; }
.play-btn {
  border: 1px solid var(--cyan-dim); background: transparent; color: var(--cyan);
  border-radius: 999px; padding: 6px 14px; font-size: 13px;
}
.play-btn.playing { background: var(--cyan); color: #03212f; }
.brief-script { line-height: 1.9; font-size: 15px; white-space: pre-wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  font-size: 12px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px;
}
.chip.warn { color: #f0b35c; border-color: #6b5327; }

/* ---------- 对话 ---------- */
.chat-log { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; line-height: 1.7; font-size: 15px; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: #12334b; border: 1px solid var(--line); }
.msg.bot { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 0 14px rgba(53,197,244,.06); }
.msg .time { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ---------- 底栏 ---------- */
footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(5, 13, 22, .92); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.input-bar { display: flex; gap: 8px; max-width: 720px; margin: 0 auto; }
.input-bar input {
  flex: 1; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 15px; outline: none;
}
.send-btn, .mic-btn {
  border: none; border-radius: 999px; padding: 0 18px; font-size: 15px;
  background: var(--cyan); color: #03212f; font-weight: 600;
}
.mic-btn { background: var(--panel); color: var(--cyan); border: 1px solid var(--cyan-dim); padding: 0 14px; }
.mic-btn.listening { background: var(--cyan); color: #03212f; }
.orb { cursor: pointer; }
.mic-btn:active { background: #12334b; }
.status { text-align: center; color: var(--muted); font-size: 12px; min-height: 16px; margin-top: 6px; }

/* ---------- 反应堆 ---------- */
.orb-wrap {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; z-index: 10;
}
.orb { position: relative; width: 84px; height: 84px; pointer-events: auto; touch-action: none; }
.orb.small { width: 56px; height: 56px; margin-bottom: 6px; }
.orb-core {
  position: absolute; inset: 26%; border-radius: 50%;
  background: radial-gradient(circle, #d8f4ff 0%, var(--cyan) 45%, #0d4a66 100%);
  box-shadow: 0 0 22px var(--cyan), 0 0 60px rgba(53,197,244,.5);
  transition: transform .15s;
}
.orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(53,197,244,.45);
  animation: spin 7s linear infinite;
}
.orb-ring.r2 { inset: 10%; border-style: dashed; animation-duration: 4.5s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.orb.listening .orb-core { transform: scale(1.25); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 34px #7fe0ff, 0 0 90px rgba(53,197,244,.8); } }
.orb-hint { color: var(--muted); font-size: 12px; }
.partial {
  max-width: 80vw; color: var(--cyan); font-size: 14px; text-align: center;
  text-shadow: 0 0 12px rgba(53,197,244,.4);
}