/* ============================================================
   武侯Chat · 设计令牌与基础样式
   Copyright © 2026 左熙宇
   ============================================================ */

:root {
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px;
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px;
  --ease: cubic-bezier(.22, .9, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .28s;
  --shadow-1: 0 2px 10px rgba(0, 0, 0, .18);
  --shadow-2: 0 12px 34px rgba(0, 0, 0, .32);
  --shadow-3: 0 26px 70px rgba(0, 0, 0, .45);
  --rail-w: 74px;
  --side-w: 344px;
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC",
          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[data-theme="dark"] {
  --bg: #0a0916;
  --bg-2: #100e21;
  --bg-3: #171432;
  --panel: rgba(255, 255, 255, .048);
  --panel-2: rgba(255, 255, 255, .075);
  --panel-solid: #16142c;
  --line: rgba(255, 255, 255, .085);
  --line-2: rgba(255, 255, 255, .14);
  --text: #ecebf7;
  --text-2: #b6b3d0;
  --muted: #847fa6;
  --accent: #7c5cff;
  --accent-2: #25d9c6;
  --accent-soft: rgba(124, 92, 255, .16);
  --danger: #ff5d7d;
  --warn: #ffb43a;
  --ok: #3ddc97;
  --bubble-me: linear-gradient(135deg, #6d4bff, #8b5cf6);
  --bubble-other: rgba(255, 255, 255, .075);
  --glass: rgba(20, 18, 44, .72);
  --scrim: rgba(6, 5, 14, .62);
}

html[data-theme="light"] {
  --bg: #eef0f8;
  --bg-2: #f7f8fd;
  --bg-3: #ffffff;
  --panel: rgba(255, 255, 255, .82);
  --panel-2: rgba(255, 255, 255, .96);
  --panel-solid: #ffffff;
  --line: rgba(24, 22, 56, .09);
  --line-2: rgba(24, 22, 56, .16);
  --text: #1b1a2e;
  --text-2: #4b4870;
  --muted: #7b7898;
  --accent: #6a4bf5;
  --accent-2: #0fb9a6;
  --accent-soft: rgba(106, 75, 245, .12);
  --danger: #e63f63;
  --warn: #d98600;
  --ok: #12a06c;
  --bubble-me: linear-gradient(135deg, #6a4bf5, #8b5cf6);
  --bubble-other: rgba(24, 22, 56, .055);
  --glass: rgba(255, 255, 255, .78);
  --scrim: rgba(30, 28, 60, .34);
  --shadow-2: 0 12px 34px rgba(30, 28, 70, .14);
  --shadow-3: 0 26px 70px rgba(30, 28, 70, .2);
}

/* 极光主题：深空底色 + 青绿 / 冰蓝 / 紫罗兰的极光配色。
   与深色主题同一套排版对比度，只是把主色换成极光色，保证正文始终可读。 */
html[data-theme="aurora"] {
  --bg: #05070f;
  --bg-2: #0a0e1e;
  --bg-3: #0e1428;
  --panel: rgba(255, 255, 255, .062);
  --panel-2: rgba(255, 255, 255, .092);
  --panel-solid: #101529;
  --line: rgba(160, 235, 210, .11);
  --line-2: rgba(160, 235, 210, .18);
  --text: #e9f6f2;
  --text-2: #adc6c6;
  --muted: #7f95a2;
  --accent: #2ff0b0;
  --accent-2: #7c6cff;
  --accent-soft: rgba(47, 240, 176, .15);
  --danger: #ff6b86;
  --warn: #ffc255;
  --ok: #3ddc97;
  --bubble-me: linear-gradient(135deg, #16d7a4, #6f6bff);
  --bubble-other: rgba(255, 255, 255, .082);
  --glass: rgba(12, 18, 36, .74);
  --scrim: rgba(3, 6, 14, .66);
  --shadow-1: 0 2px 12px rgba(0, 0, 0, .28);
  --shadow-2: 0 12px 36px rgba(0, 0, 0, .42);
  --shadow-3: 0 26px 74px rgba(0, 0, 0, .54);
}

/* 负 z-index 的装饰层（-4 极光 / -3 光球）画在 html 背景之上、body 内容之下。
   body 背景不透明会把这两层完全盖住，所以这两个主题下让 body 背景透明，
   底色交给 html，装饰层才看得见。 */
html[data-theme="aurora"] body,
html[data-theme="dark"] body { background: transparent; }

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

html, body {
  height: 100%; margin: 0; padding: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 12% -8%, var(--accent-soft), transparent 62%),
    radial-gradient(900px 520px at 105% 110%, rgba(37, 217, 198, .10), transparent 60%),
    var(--bg);
}

h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--accent); text-decoration: none; }
img { display: block; max-width: 100%; }

/* hidden 属性必须始终生效（避免被组件 display 规则覆盖） */
[hidden] { display: none !important; }

::selection { background: var(--accent); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 99px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* 通用动画 */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
/* 专门的退场动画：之前用 popIn reverse 播放关闭，等于把入场倒着放一遍，
   位移方向反直觉（从下往上沉回去），看起来就是"销毁不丝滑" */
@keyframes popOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.965) translateY(8px); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
/* 认证卡片入场：轻微上浮 + 缩放，卡片自身的 --dx/--dy 位移保持不动 */
@keyframes cardIn {
  from { opacity: 0; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) translateY(calc(-50% + 14px)) scale(.965); }
  to   { opacity: 1; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) translateY(-50%) scale(1); }
}
/* 与 cardIn 同方向（往上收）的退场，切换卡片时新旧两卡接力而不是互相打架 */
@keyframes cardOut {
  from { opacity: 1; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) translateY(-50%) scale(1); }
  to   { opacity: 0; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) translateY(calc(-50% - 12px)) scale(.97); }
}

.anim-up { animation: fadeUp .4s var(--ease-out) both; }
.anim-in { animation: fadeIn .3s var(--ease) both; }
.anim-pop { animation: popIn .32s var(--ease-out) both; }

/* 启动屏 */
.boot {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: var(--bg); transition: opacity .5s var(--ease);
}
.boot.is-out { opacity: 0; pointer-events: none; }
.boot__logo { animation: floatY 2.6s ease-in-out infinite; filter: drop-shadow(0 10px 26px rgba(124, 92, 255, .45));
  width: 72px; height: 72px; border-radius: 33%; object-fit: cover; }
.boot__title { font-size: 26px; font-weight: 800; letter-spacing: 3px; }
.boot__sub { font-size: var(--fs-sm); color: var(--muted); }
.boot__bar {
  width: 190px; height: 4px; border-radius: 99px; overflow: hidden;
  background: var(--panel-2); margin-top: 8px;
}
.boot__bar i {
  display: block; height: 100%; width: 42%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  animation: bootSlide 1.15s var(--ease) infinite;
}
@keyframes bootSlide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

.copyright {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  text-align: center; font-size: 10.5px; color: var(--muted);
  padding: 4px 0; pointer-events: none; opacity: .7;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.center { text-align: center; }
.row { display: flex; align-items: center; }
.grow { flex: 1; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 骨架屏 */
.skeleton {
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 37%, var(--panel) 63%);
  background-size: 400px 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r-sm);
}