/* ══════════════════════════════════════════════
   Echo 回响 · css/base.css
   主题变量(PEARL TIDE / HARBOR)+ 全局 reset + 根布局
   ══════════════════════════════════════════════ */
  :root{
    --keyboard-offset: 0px;
    --ref-width: 941px;
    --ref-height: 1672px;
    --font-en: "Cormorant Garamond", Georgia, serif;
    --font-cn: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    --wall-light: url("../chat-light.webp");
    --wall-harbor: url("../chat-harbor.webp");
    --wall-default: var(--wall-light);
    --menu-wall-light: url("../menu-light.webp");
    --menu-wall-harbor: url("../menu-harbor.webp");
    --menu-wall-default: var(--menu-wall-light);
    --avatar-default: url("../avatar-sea.png");
    /* ── PEARL TIDE · 珍珠潮汐(default) ── */
    --bg: #F7FAFC;
    --header-bg: #F7FAFC;
    --hairline: rgba(120,142,165,.24);
    --text: #253447;
    --text-soft: #5E7080;
    --text-faint: #8A99A8;
    --bubble-ai-bg: #ECEEF3;
    --bubble-ai-fg: #253447;
    --bubble-ai-line: transparent;
    --bubble-human-bg: #DFE5EE;
    --bubble-human-fg: #253447;
    --bubble-human-line: transparent;
    --accent: #4C6378;
    --send-bg: #2C4056;
    --tick: #7E93A4;
    --accent-fg: #ffffff;
    --think-flourish: rgba(99, 121, 142, 0.52);
    --think-label: #6A7E8E;
    --think-body: #56697A;
    --composer-bg: #EEF4FA;
    --field-bg: rgba(247,250,252,.92);
    --field-line: rgba(151,169,181,.18);
    --shadow: 0 18px 46px rgba(74, 93, 108, 0.10);
    --soft-shadow: 0 14px 34px rgba(86, 104, 118, 0.08);
    --scrim: linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.04) 68%, rgba(255,255,255,0.22));
    --header-h: clamp(56px, 10vw, 120px);
    --side-pad: clamp(16px, 4vw, 40px);
    --avatar-size: clamp(32px, 5vw, 48px);
    --bubble-radius: clamp(14px, 2vw, 20px);
    --composer-h: clamp(44px, 6vw, 72px);
    --motion-fast: 150ms;
    --motion-normal: 260ms;
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    /* composer 占据的底部区域(含安全区/键盘):scroll 底 padding 与边缘渐隐共用同一来源,保持对齐 */
    --composer-zone: calc(var(--composer-live, var(--composer-h) + env(safe-area-inset-bottom)) + 16px + var(--keyboard-offset));
    --edge-fade-top: clamp(24px, 5vw, 52px);
    --edge-fade-tail: clamp(16px, 3vw, 30px);
    /* profile / settings — frosted glass, blends into the wallpaper */
    --card-bg: rgba(244,248,250,.42);
    --card-line: rgba(150,168,182,.12);
    --card-shadow: 0 10px 28px rgba(70,92,108,.05);
    --seg-track: rgba(140,160,176,.11);
    --seg-thumb: rgba(255,255,255,.68);
    --seg-thumb-shadow: 0 2px 8px rgba(40,60,78,.08);
    --row-press: rgba(140,160,176,.09);
    --slider-track: rgba(143,162,176,.28);
    --slider-thumb: #44627b;
    --info-ring: rgba(143,162,176,.38);
    --status-dot: #5fbf8f;
    /* voice call (speaking overlay) */
    --call-glass-top: rgba(255,255,255,.46);
    --call-glass-bot: rgba(255,255,255,.20);
    --call-glass-edge: rgba(255,255,255,.58);
    --call-glass-hi: rgba(255,255,255,.72);
    --call-glass-glow: rgba(150,172,196,.20);
    --call-glass-shadow: 0 20px 50px rgba(74,93,108,.16);
    --call-scrim: rgba(64,82,102,.06);
    --call-hangup-bg: #cf8d92;
    --call-hangup-shadow: rgba(176,96,104,.34);
  }
  /* ── HARBOR · 海港(通用开源主题 / Tidal Echo) ── 中性冷调,供 fork 使用;只覆盖带色相变量,其余继承 PEARL TIDE */
  :root[data-theme="harbor"]{
      --wall-default: var(--wall-harbor);
      --menu-wall-default: var(--menu-wall-harbor);
      --bg: #F4F2EF;
      --header-bg: #F4F2EF;
      --hairline: rgba(74,93,108,.20);
      --text: #36404B;
      --text-soft: #5E6B78;
      --text-faint: #9197A0;
      --bubble-ai-bg: #EAE6E4;
      --bubble-ai-fg: #36404B;
      --bubble-human-bg: #E1E0E3;
      --bubble-human-fg: #36404B;
      --accent: #4A5D6C;
      --send-bg: #4A5D6C;
      --tick: #7E8E9C;
      --accent-fg: #ffffff;
      --think-flourish: rgba(74, 93, 108, 0.48);
      --think-label: #5E6B78;
      --think-body: #4F5D6A;
      --composer-bg: #EFEBE8;
      --field-bg: rgba(244,242,239,.92);
      --slider-thumb: #4A5D6C;
      --status-dot: #6FA98C;
  }

  *{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  /* 外壳统一 100vh:不混用 100% / dvh / fixed body,壁纸才能真正铺到屏幕底部 */
  html, body{ margin:0; padding:0; height:100vh; overflow:hidden; overscroll-behavior:none; }
  body{ width: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-cn);
    font-size: clamp(14px, 1.45vw, 16px);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior: none;
  }

  .app{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100vh;
    z-index: 1;
    width: min(100vw, var(--ref-width));
    margin: 0 auto;
    overflow: hidden;
  }
  .wall{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    z-index:0;
    background-color: var(--bg);
    background-image: var(--wall-default);
    background-size: cover; background-position: center;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  .wall::after{
    content:""; position:absolute; inset:0; background: var(--scrim); pointer-events:none;
  }
  .topbar, .scroll, .composer{ position: relative; z-index: 1; }

/* ── Netlify 免费版注入的右下角徽章 iframe:会盖住发送按钮,在这里挡掉 ── */
iframe[id^="nl-"]{ display:none !important; visibility:hidden !important; pointer-events:none !important; }