/* ==========================================================================
   安诚保险 · AI 智能客服 Demo
   base.css —— 设计令牌 / 重置 / 演示台布局
   主题色：#C7000B
   ========================================================================== */

:root {
  /* ---------- 品牌色阶（基于 #C7000B 生成） ---------- */
  --brand:        #C7000B;
  --brand-50:     #FFF2F2;
  --brand-100:    #FFE1E2;
  --brand-200:    #FFC5C7;
  --brand-300:    #F79094;
  --brand-400:    #E7504F;
  --brand-500:    #C7000B;
  --brand-600:    #A60009;
  --brand-700:    #850007;
  --brand-grad:   linear-gradient(135deg, #E23A3E 0%, #C7000B 52%, #960007 100%);
  --brand-grad-v: linear-gradient(180deg, #C7000B 0%, #A60009 100%);

  /* ---------- 辅助色（增值服务 / 权益） ---------- */
  --gold:         #C8963E;
  --gold-grad:    linear-gradient(135deg, #E8BE6A 0%, #C8963E 100%);
  --amber:        #FF7A18;
  --amber-grad:   linear-gradient(135deg, #FFA93D 0%, #FF7A18 100%);
  --teal:         #0E9E8E;
  --teal-grad:    linear-gradient(135deg, #34C4B0 0%, #0E9E8E 100%);
  --blue:         #2B6CD4;
  --blue-grad:    linear-gradient(135deg, #5B93E8 0%, #2B6CD4 100%);
  --violet:       #6B4EE6;
  --violet-grad:  linear-gradient(135deg, #9277F5 0%, #6B4EE6 100%);

  /* ---------- 中性色 ---------- */
  --ink:          #16181D;
  --ink-2:        #3D4048;
  --ink-3:        #6B7078;
  --ink-4:        #9AA0A8;
  --line:         #EDEEF1;
  --line-2:       #E3E5E9;
  --bg:           #F5F6F8;
  --bg-2:         #FAFBFC;
  --white:        #FFFFFF;
  --success:      #12A150;
  --success-bg:   #E9F8EF;
  --warn:         #D98A00;
  --warn-bg:      #FFF6E6;

  /* ---------- 阴影 ---------- */
  --sh-1: 0 1px 2px rgba(22,24,29,.05), 0 2px 8px rgba(22,24,29,.05);
  --sh-2: 0 4px 14px rgba(22,24,29,.08);
  --sh-3: 0 12px 30px rgba(22,24,29,.12);
  --sh-brand: 0 6px 16px rgba(199,0,11,.26);

  /* ---------- 圆角 ---------- */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- 设备尺寸（设计基准 390 × 844） ---------- */
  --dev-w: 390px;
  --dev-h: 844px;

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
          "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}

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

html, body {
  margin: 0; padding: 0;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background:
    radial-gradient(1100px 520px at 12% -8%, #FFF0F0 0%, rgba(255,240,240,0) 62%),
    radial-gradient(900px 480px at 92% 4%, #F3F5FA 0%, rgba(243,245,250,0) 60%),
    #EFF1F5;
  min-height: 100vh;
}

img { display: block; border: 0; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(22,24,29,.16); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   演示台骨架
   ========================================================================== */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- 顶部控制条 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-2);
}

.topbar-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }

.topbar-logo {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(199,0,11,.18);
  overflow: hidden;
}
.topbar-logo img { width: 34px; height: 34px; object-fit: contain; }

.topbar-title { font-size: 15.5px; font-weight: 800; letter-spacing: .4px; line-height: 1.2; white-space: nowrap; }
.topbar-sub { margin-top: 3px; font-size: 11.5px; color: var(--ink-4); letter-spacing: .2px; white-space: nowrap; }

.topbar-tag {
  margin-left: 4px; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  color: var(--brand); background: var(--brand-50); border: 1px solid var(--brand-100);
  flex: none;
}

.topbar-spacer { flex: 1 1 auto; min-width: 8px; }

.topbar-actions { display: flex; align-items: center; gap: 9px; flex: none; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
  white-space: nowrap;
}
.btn:hover { background: #F7F8FA; box-shadow: var(--sh-1); }
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--brand-grad); color: #fff; border-color: transparent;
  box-shadow: var(--sh-brand);
}
.btn-primary:hover { background: var(--brand-grad); filter: brightness(1.06); }
.btn svg { width: 14px; height: 14px; }

/* ---------- 场景快捷导航 ---------- */
.scenariobar {
  position: sticky; top: 63px; z-index: 55;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 22px 11px;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.scenariobar-label {
  flex: none; font-size: 11.5px; font-weight: 700; color: var(--ink-4);
  letter-spacing: .8px; padding-right: 4px; border-right: 1px solid var(--line-2); height: 20px;
  display: flex; align-items: center;
}
.scenariobar-rail {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none; padding: 2px 0;
}
.scenariobar-rail::-webkit-scrollbar { display: none; }

.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 13px 0 10px;
  border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--line-2);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  transition: all .14s ease; white-space: nowrap;
}
.chip .chip-no {
  display: grid; place-items: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--brand-50); color: var(--brand);
  font-size: 10px; font-weight: 800;
}
.chip:hover { border-color: var(--brand-200); color: var(--brand); box-shadow: var(--sh-1); }
.chip:active { transform: scale(.96); }
.chip.active { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: var(--sh-brand); }
.chip.active .chip-no { background: rgba(255,255,255,.24); color: #fff; }

/* ---------- 双端舞台 ---------- */
.stage {
  flex: 1 1 auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 30px 22px 46px;
  overflow: hidden;
}

.stage-scaler { transform-origin: top center; will-change: transform; }

.stage-inner {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 34px;
}

/* ---------- 设备外框 ---------- */
.device-col { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.device-cap {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .8px;
}
.device-cap .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.device-cap .cap-hint { font-weight: 500; color: var(--ink-4); letter-spacing: .2px; }

.device {
  position: relative;
  width: var(--dev-w); height: var(--dev-h);
  border-radius: 44px;
  background: #0E1013;
  padding: 10px;
  box-shadow:
    0 0 0 2px #23262C,
    0 0 0 3.5px #34383F,
    0 34px 64px -14px rgba(16,18,24,.42),
    0 10px 22px -8px rgba(16,18,24,.28);
  flex: none;
}
.device::after {   /* 侧键 */
  content: ""; position: absolute; right: -3.5px; top: 188px;
  width: 3.5px; height: 74px; border-radius: 0 3px 3px 0; background: #34383F;
}

.screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 35px;
  overflow: hidden;
  background: var(--bg);
  display: flex; flex-direction: column;
}

/* 灵动岛 */
.notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 26px; border-radius: var(--r-pill);
  background: #0E1013; z-index: 40; pointer-events: none;
}

/* 状态栏 */
.statusbar {
  flex: none; height: 46px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px 0 26px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  position: relative; z-index: 30;
}
.statusbar .sb-right { display: flex; align-items: center; gap: 5px; }
.statusbar svg { width: 15px; height: 15px; }

/* Home 指示条 */
.homebar {
  flex: none; height: 22px; display: grid; place-items: center;
  background: transparent;
}
.homebar i {
  display: block; width: 128px; height: 5px; border-radius: 99px;
  background: rgba(22,24,29,.82);
}

/* 状态栏配色（跟随所在 App 的导航栏底色） */
.statusbar.chrome-white { background: #fff; color: var(--ink); }
.statusbar.chrome-red   { background: var(--brand-500); color: #fff; }

/* 浅色状态栏（深色背景上） */
.statusbar.on-dark { color: #fff; }
.homebar.on-dark i { background: rgba(255,255,255,.85); }

/* ---------- 底部说明 ---------- */
.footnote {
  padding: 0 22px 30px;
  text-align: center;
  font-size: 11.5px; color: var(--ink-4); line-height: 1.9;
}
.footnote b { color: var(--ink-3); font-weight: 700; }

/* ==========================================================================
   响应式：窄屏纵向堆叠
   ========================================================================== */

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .topbar-sub { display: none; }
  .topbar-tag { display: none; }
  .scenariobar { top: auto; position: static; padding: 9px 14px; }
  .scenariobar-label { display: none; }
  .stage { padding: 18px 12px 30px; }
  .stage-scaler { transform: none !important; width: 100%; }
  .stage-inner { flex-direction: column; align-items: center; gap: 34px; width: 100%; }
  .device { border-radius: 34px; padding: 8px; }
  .screen { border-radius: 27px; }
}

@media (max-width: 430px) {
  .device {
    width: 100%; height: auto; aspect-ratio: 390 / 844;
    border-radius: 28px; padding: 6px;
  }
  .screen { border-radius: 23px; }
}

/* 打印 / 截图模式：隐藏演示台装饰 */
body.is-capture .topbar,
body.is-capture .scenariobar,
body.is-capture .footnote,
body.is-capture .device-cap { display: none; }
body.is-capture { background: #fff; }
body.is-capture .stage { padding: 0; }