/* 匿名信箱 · 共用设计系统（v2 · 现代自然重构）
   两个维度自由组合：
   · 风格 <html data-style>：夜璃 dark（深炭分层，底色随配色微染，默认）/ 宣纸 paper（纸墨衬线）/ 终端 term（等宽磷光屏，屏色由主色派生）/ 白昼 light（暖白日光）
   · 配色 <html data-theme>：青 / 琥珀 / 绯 / 紫藤 / 墨 —— 每支只定义「主行动色 + 色上字色」两行，
     高光、深阶、光环、染色等一律由 color-mix 派生（见「派生层」），加新配色 = 加两行。
   红=未读/危险、绿=在线、琥珀=警示——功能色按「底色深浅」各配一组：深底（夜璃/终端）用亮的一组，
   浅底（宣纸/白昼）另配一组同色相的深色版，否则浅底上那点绿和琥珀根本看不清。
   层次原则：页面 < 面板 < 抬升 < 浮层，靠「逐级抬亮的表面 + 发丝边 + 两段式柔和投影」造纵深，辉光只做点缀。
   两页都引这份；选择存 localStorage（anon_style / anon_theme），页头有内联脚本防首屏闪色。 */

/* ================= 一、结构令牌：字体 · 形状 · 动效 ================= */

:root {
  color-scheme: dark;

  /* 字体 */
  --sans: "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --mono: "Cascadia Mono", "JetBrains Mono", "Sarasa Mono SC", "Noto Sans Mono CJK SC", "Source Han Mono SC", Consolas, "Courier New", monospace;
  --font: var(--sans);

  /* 形状：圆角走一个刻度；气泡小角、胶囊、头像圆度各随风格调 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --tail: 6px;          /* 气泡小角 */
  --r-btn: 999px;       /* 发送圆钮 */
  --pill: 999px;        /* 胶囊形控件（idpill / 分段控件 / toast…）；终端风格下收成直角 */
  --av-r: 50%;          /* 头像与色板钮的圆度；纸/终端下转方 */

  /* 动效：两条自然缓动 + 一条弹性缓动 + 三档时长。
     ease-out 用于「出现」，ease 用于悬停/状态变化，spring 用于点状反馈（徽标、色板、按钮） */
  --ease: cubic-bezier(0.22, 0.72, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --t1: 0.13s;
  --t2: 0.22s;
  --t3: 0.38s;

  /* 主行动色缺省 = 青（页头内联脚本兜底，此行为保险丝） */
  --ac: #31b8ae;
  --ac-ink: #06211d;
}

/* ================= 二、配色层：每支两行，其余全部派生 ================= */

html[data-theme="teal"]  { --ac: #31b8ae; --ac-ink: #06211d; }
/* 琥珀 = 原琥珀(金)与杏(橙)合并后的暖金橙，一支顶两支 */
html[data-theme="amber"] { --ac: #e3a04e; --ac-ink: #241403; }
/* 绯取玫红偏绛（h≈343）：与功能危险红（未读徽标 #e5484d）拉开色相，避免主题色撞语义色 */
html[data-theme="rose"]  { --ac: #df6380; --ac-ink: #220710; }
html[data-theme="plum"]  { --ac: #b189db; --ac-ink: #190c26; }
html[data-theme="ink"]   { --ac: #eae9e4; --ac-ink: #121210; }

/* 「墨」的本义随底色翻转：暗风格里是素白（纸上之白），到宣纸/白昼这类亮底上就是墨汁——
   若沿用近白主色，按钮与气泡在浅色页面上几乎隐形。派生层会自动把高光/光环跟着重算。 */
html[data-style="paper"][data-theme="ink"],
html[data-style="light"][data-theme="ink"] {
  --ac: #3a372f; --ac-ink: #f4f2ea;
}

/* 派生层：任何风格、任何配色共用同一套算法；亮色风格按需覆盖 --ac-soft。 */
html {
  --ac-hi: color-mix(in oklab, var(--ac) 78%, #ffffff);     /* 悬停提亮 */
  --ac-deep: color-mix(in oklab, var(--ac) 82%, #14120e);   /* 渐变暗端 */
  --ac-soft: color-mix(in oklab, var(--ac) 58%, #ffffff);   /* 暗底小字（对比度达标） */
  --ac-line: color-mix(in srgb, var(--ac) 48%, transparent);
  --ac-glow: color-mix(in srgb, var(--ac) 18%, transparent);
  --ac-glow-hi: color-mix(in srgb, var(--ac) 32%, transparent);
  --ac-ring: color-mix(in srgb, var(--ac) 28%, transparent);
  --ac-sel: color-mix(in srgb, var(--ac) 26%, transparent);
  --ac-tint: color-mix(in srgb, var(--ac) 5%, transparent);
  --grad: linear-gradient(155deg, var(--ac-hi) 0%, var(--ac) 62%, var(--ac-deep) 128%);
  --ring: 0 0 0 3px var(--ac-ring);
  --glow: 0 4px 16px var(--ac-glow);
  /* 主色面（牌 / 印 / 钮）内缘的一圈微光：模拟受光边缘，让渐变不塌成一块塑料 */
  --edge-sheen: inset 0 1px 0 color-mix(in srgb, #ffffff 26%, transparent);
}

/* ================= 三、风格层 ================= */

/* ---- 夜璃 · 深炭分层（默认）：底与字随配色微染，纵深靠表面逐级抬亮 ---- */
:root, html[data-style="dark"] {
  /* 基底：panel 每级约 +4% 亮度；night/deep/paper/text 随主色轻染 */
  --night: color-mix(in oklab, var(--ac) 3.5%, #141312);
  --deep: color-mix(in oklab, var(--ac) 4%, #0f0e0d);       /* 输入槽：比页底更深 */
  --panel: #1c1b19;
  --panel-2: #242220;
  --edge: color-mix(in srgb, var(--text) 11%, transparent);
  --edge-hi: color-mix(in srgb, var(--text) 20%, transparent);
  --glass: color-mix(in srgb, var(--text) 5%, transparent);
  --hover: color-mix(in srgb, var(--text) 4.5%, transparent);
  --active: color-mix(in srgb, var(--text) 8%, transparent);

  /* 界面材质：顶栏 / 侧栏 / 浮层 / 卡片 / 遮罩 */
  --chrome: color-mix(in srgb, var(--night) 78%, transparent);
  --side: color-mix(in srgb, var(--night) 70%, transparent);
  --float: color-mix(in srgb, var(--panel-2) 94%, transparent);
  --toast: color-mix(in srgb, var(--panel-2) 92%, transparent);
  --toast-fg: var(--text);
  --mask: color-mix(in srgb, #000000 55%, transparent);
  --card-a: color-mix(in srgb, var(--text) 5%, transparent);
  --card-b: color-mix(in srgb, var(--text) 1.8%, transparent);

  /* 投影：贴近地面的短硬影 + 远处的大软影，两段叠加更像真的 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -6px rgba(0, 0, 0, 0.5);
  --lift: 0 1px 2px rgba(0, 0, 0, 0.45), 0 20px 48px -20px rgba(0, 0, 0, 0.65);
  --scroll: color-mix(in srgb, var(--text) 16%, transparent);
  --sw-ring: color-mix(in srgb, var(--text) 88%, transparent);

  /* 字色：暖中性，随配色微染 */
  --text: color-mix(in oklab, var(--ac) 3%, #eceae4);
  --text-2: color-mix(in oklab, var(--ac) 3%, #c8c6be);
  --muted: color-mix(in oklab, var(--ac) 4%, #97958c);
  --faint: color-mix(in oklab, var(--ac) 4%, #85837b);

  /* 气泡：自己 = 便签纸（暖白），对方 = 石墨 */
  --paper-a: color-mix(in oklab, var(--ac) 4%, #f6f4ec);
  --paper-b: color-mix(in oklab, var(--ac) 4%, #e8e5d8);
  --paper-ink: #26241b;
  --bub-a: color-mix(in srgb, var(--text) 7%, transparent);
  --bub-b: color-mix(in srgb, var(--text) 3.2%, transparent);
  --bub-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px -12px rgba(0, 0, 0, 0.55), 0 0 22px rgba(248, 244, 224, 0.045);

  /* 警示盒（说明信） */
  --warn-fg: #eec25f;
  --warn-bg: color-mix(in srgb, var(--amber) 9%, transparent);
  --warn-bd: color-mix(in srgb, var(--amber) 24%, transparent);

  /* 功能色（基准值；亮色风格会分别压深，保证浅底对比度） */
  --mint: #43d69f;        /* 在线 / 就绪 */
  --amber: #d9a454;       /* 访客标签 */
  /* 危险色分两支：--danger 用来写小字，--danger-bg 用来铺底配白字。
     两支不能合用：浅红上压白字只有 3:1 出头，读不清。
     （这里曾是 --rose，与 --danger 重复；已并到 --danger，避免调色时漏改一处。） */
  --danger: #f1655c;      /* 暗底上的红字 */
  --danger-bg: #c9403a;   /* 红底 + 白字（≥4.5:1） */
  --danger-bg-hi: #c9473f;
}

/* ---- 宣纸 · 纸墨字面（衬线、朱印、小圆角） ---- */
html[data-style="paper"] {
  color-scheme: light;
  --font: var(--serif);
  --r-sm: 4px; --r-md: 10px; --r-lg: 12px; --tail: 3px; --r-btn: 10px;

  --night: #f0eade; --deep: #f7f2e6; --panel: #fbf6ea; --panel-2: #fffaee;
  --edge: color-mix(in srgb, var(--text) 15%, transparent);
  --edge-hi: color-mix(in srgb, var(--text) 28%, transparent);
  --glass: color-mix(in srgb, var(--text) 5%, transparent);
  --hover: color-mix(in srgb, var(--text) 4.5%, transparent);
  --active: color-mix(in srgb, var(--text) 8.5%, transparent);

  --chrome: color-mix(in srgb, var(--night) 92%, transparent);
  --side: color-mix(in srgb, var(--night) 88%, transparent);
  --float: #fcf8ec;
  --toast: rgba(52, 40, 24, 0.94); --toast-fg: #f4efdf;
  --mask: color-mix(in srgb, #352a1a 42%, transparent);
  --card-a: #fffcf2; --card-b: #f8f0de;
  --shadow-sm: 0 1px 2px rgba(96, 74, 38, 0.07), 0 3px 10px -5px rgba(96, 74, 38, 0.16);
  --lift: 0 1px 2px rgba(96, 74, 38, 0.07), 0 14px 32px -14px rgba(96, 74, 38, 0.28);
  --scroll: color-mix(in srgb, var(--text) 22%, transparent);
  --sw-ring: rgba(46, 34, 16, 0.8);

  --text: #2a251a; --text-2: #4d4433; --muted: #5c5340; --faint: #6f6349;

  --paper-a: #fffcf0; --paper-b: #f1e6c8; --paper-ink: #2e2717;
  --bub-a: #fffdf6; --bub-b: #f4edda;
  --bub-shadow: 0 1px 1px rgba(96, 74, 38, 0.07), 0 6px 14px -8px rgba(96, 74, 38, 0.28);

  --warn-fg: #8a5f0e;
  --warn-bg: color-mix(in srgb, var(--amber) 11%, transparent);
  --warn-bd: color-mix(in srgb, var(--amber) 30%, transparent);

  /* 浅底上，「浅主色小字」必须转深才读得清（color-mix 跟着配色走） */
  --ac-soft: color-mix(in srgb, var(--ac) 55%, #292419);
  --amber: #92660f; --mint: #1d9e6c;
  --danger: #b3332a; --danger-bg: #b3382e; --danger-bg-hi: #c04438;
  --av-r: 10px;         /* 头像改方角，合纸签的小圆角语言 */
  --edge-sheen: inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent);
}
html[data-style="paper"] body::before {
  /* 纸帘纹：极淡的横帘 + 顶部暖晕 */
  background:
    repeating-linear-gradient(0deg, rgba(120, 92, 44, 0.028) 0 1px, transparent 1px 26px),
    radial-gradient(60% 40% at 50% -8%, rgba(255, 252, 240, 0.75), transparent 70%),
    radial-gradient(70% 50% at 50% 110%, rgba(150, 120, 70, 0.07), transparent 70%);
}
html[data-style="paper"] .mark,
html[data-style="paper"] .chip,
html[data-style="paper"] .help-mark,
html[data-style="paper"] .seal { border-radius: 4px; }
html[data-style="paper"] .bubble,
html[data-style="paper"] .field { line-height: 1.78; }   /* 衬线正文给足行距 */
html[data-style="paper"] body { letter-spacing: 0.01em; } /* 楷体偏松，补一点字距更透气 */

/* ---- 终端 · 磷光屏（等宽、直角、扫描线；屏色跟着主色走） ----
   以前这层把「绿」写死在文字、边框、玻璃里，配色又另外落在按钮和气泡上，
   换一支配色就像两套主题拼贴（文字永远绿、按钮永远青）。现在整屏只有一套颜色语言：
   磷光色由 --ac 派生 —— 选琥珀是琥珀屏，选绯是绯红屏，选「墨」是白磷光单色屏。 */
html[data-style="term"] {
  --font: var(--mono);
  --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --tail: 0; --r-btn: 4px;
  --pill: 3px; --av-r: 3px;   /* 终端里没有胶囊：全部收成直角小圆 */

  /* 磷光色阶：亮（正文）→ 中（次级）→ 暗（弱）
     混的是中性白而不是带绿的旧屏幕色：色相必须干净地跟着主色走，
     否则琥珀屏会泛出一层洗不掉的绿。 */
  --phos:      color-mix(in oklab, var(--ac) 62%, #ffffff);
  --phos-dim:  color-mix(in oklab, var(--ac) 40%, #f2f6f4);

  /* 屏体：近黑的底，按主色轻染 */
  --night: color-mix(in oklab, var(--ac) 3%, #05090b);
  --deep: color-mix(in oklab, var(--ac) 2%, #020507);
  --panel: color-mix(in oklab, var(--ac) 4%, #0a1013);
  --panel-2: color-mix(in oklab, var(--ac) 6%, #0f171b);

  --edge:    color-mix(in srgb, var(--phos-dim) 24%, transparent);
  --edge-hi: color-mix(in srgb, var(--phos-dim) 45%, transparent);
  --glass:   color-mix(in srgb, var(--phos-dim) 6%, transparent);
  --hover:   color-mix(in srgb, var(--phos-dim) 9%, transparent);
  --active:  color-mix(in srgb, var(--phos-dim) 15%, transparent);

  --chrome: color-mix(in srgb, var(--night) 94%, transparent);
  --side:   color-mix(in srgb, var(--night) 90%, transparent);
  --float:  color-mix(in srgb, var(--panel-2) 97%, transparent);
  --toast:  color-mix(in srgb, var(--panel-2) 96%, transparent);
  --toast-fg: var(--phos);
  --mask:   color-mix(in srgb, #000000 80%, transparent);
  --card-a: color-mix(in srgb, var(--phos-dim) 5%, transparent);
  --card-b: color-mix(in srgb, var(--phos-dim) 2%, transparent);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --lift: 0 10px 30px rgba(0, 0, 0, 0.55);
  --scroll: color-mix(in srgb, var(--phos-dim) 30%, transparent);
  --sw-ring: color-mix(in srgb, var(--phos) 70%, transparent);  /* 补：原先漏了这行，终端下配色选中环整个失效 */

  --text: var(--phos);
  --text-2: var(--phos-dim);
  --muted: color-mix(in oklab, var(--ac) 24%, #c8d2cc);
  --faint: color-mix(in oklab, var(--ac) 13%, #98a49d);

  /* 终端底是近黑的：红字用亮的一支，红底白字用压深的一支 */
  --danger: #f1655c; --danger-bg: #c9403a; --danger-bg-hi: #c9473f;

  /* 气泡底色：自己=回显（微染底），对方=输出行（近黑底）；两者的字色都比别处亮 */
  --paper-a: color-mix(in srgb, var(--phos-dim) 13%, transparent);
  --paper-b: color-mix(in srgb, var(--phos-dim) 5%, transparent);
  --paper-ink: var(--phos);
  --bub-a: color-mix(in srgb, var(--phos-dim) 6%, transparent);
  --bub-b: color-mix(in srgb, var(--phos-dim) 2%, transparent);
  --bub-shadow: 0 0 0 1px color-mix(in srgb, var(--phos-dim) 10%, transparent);

  --warn-fg: #e8c268;
  --warn-bg: color-mix(in srgb, #e8c268 7%, transparent);
  --warn-bd: color-mix(in srgb, #e8c268 26%, transparent);

  --edge-sheen: inset 0 1px 0 color-mix(in srgb, var(--phos) 20%, transparent);
}

/* 终端里没有毛玻璃：像素要锐，模糊会把等宽字形糊掉 */
html[data-style="term"] *,
html[data-style="term"] *::before,
html[data-style="term"] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 屏体底：中心辉光 + 极淡网格（网格给「像素面」的秩序感，浓度压到几乎看不见） */
html[data-style="term"] body::before {
  background:
    radial-gradient(58% 38% at 50% 0%, color-mix(in srgb, var(--phos-dim) 8%, transparent), transparent 70%),
    radial-gradient(90% 55% at 50% 118%, color-mix(in srgb, var(--ac) 6%, transparent), transparent 72%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--phos-dim) 3%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--phos-dim) 3%, transparent) 0 1px, transparent 1px 26px);
}

/* 扫描线：盖在最上层的一层极淡栅格 + 屏幕暗角。
   以前这层是 32% 黑的横条压在背景上（面板挡住了、盖不到），整屏看着发脏；现在薄到只在余光里成立。 */
html[data-style="term"] body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--phos) 4%, transparent) 0 1px, transparent 1px 3px),
    radial-gradient(135% 100% at 50% 45%, transparent 58%, rgba(0, 0, 0, 0.34) 100%);
}

/* 自己的消息 = 命令回显：左侧一条磷光竖条，底色微染 */
html[data-style="term"] .msg.user .bubble {
  background: linear-gradient(180deg, var(--paper-a), var(--paper-b));
  border-left: 2px solid var(--phos-dim);
  border-radius: 2px;
  color: var(--paper-ink);
}
/* 对方 = 输出行：近黑底 + 磷光描边，只有一点点辉光 */
html[data-style="term"] .msg.admin .bubble {
  background: linear-gradient(180deg, var(--bub-a), var(--bub-b));
  border: 1px solid color-mix(in srgb, var(--phos-dim) 26%, transparent);
  border-radius: 2px;
  color: var(--text-2);
  box-shadow: 0 0 20px -14px var(--ac-glow-hi);
}

/* 终端语汇：提示符与状态行 */
html[data-style="term"] .seal-line::before {
  content: '> ';
  color: var(--phos-dim);
  font-weight: 700;
}
html[data-style="term"] .inputrow::before {
  content: '>';
  flex-shrink: 0;
  align-self: center;
  padding-left: 6px;
  color: var(--phos-dim);
  font-weight: 700;
  line-height: 1;
}
html[data-style="term"] .date-sep::before { content: '['; }
html[data-style="term"] .date-sep::after { content: ']'; }

/* 顶栏：一条磷光细线代替毛玻璃的通透感 */
html[data-style="term"] header {
  border-bottom-color: color-mix(in srgb, var(--phos-dim) 28%, transparent);
}

/* 等宽屏上字号收一档、行距放宽；正文与输入框统一 */
html[data-style="term"] body { font-size: 14px; letter-spacing: 0.01em; }
html[data-style="term"] .bubble { font-size: 14px; line-height: 1.72; }
html[data-style="term"] #msgInput { font-size: 14px; }

/* 直角屏里不留圆角徽记 */
html[data-style="term"] .mark,
html[data-style="term"] .chip,
html[data-style="term"] .help-mark,
html[data-style="term"] .seal { border-radius: 3px; }

/* ---- 白昼 · 暖白日光（大圆角、彩色自己的气泡、软影） ---- */
html[data-style="light"] {
  color-scheme: light;
  --r-lg: 22px; --tail: 8px;

  --night: #f5f4f0; --deep: #fbfaf7; --panel: #ffffff; --panel-2: #ffffff;
  --edge: color-mix(in srgb, #2c2618 11%, transparent);
  --edge-hi: color-mix(in srgb, #2c2618 21%, transparent);
  --glass: color-mix(in srgb, #2c2618 4.5%, transparent);
  --hover: color-mix(in srgb, #2c2618 4.5%, transparent);
  --active: color-mix(in srgb, #2c2618 8%, transparent);

  --chrome: color-mix(in srgb, #fbfaf6 82%, transparent);
  --side: color-mix(in srgb, #f7f6f0 80%, transparent);
  --float: #ffffff;
  --toast: rgba(40, 36, 28, 0.92); --toast-fg: #f5f4ee;
  --mask: color-mix(in srgb, #322a1a 38%, transparent);
  --card-a: #ffffff; --card-b: #fbfaf5;
  --shadow-sm: 0 1px 2px rgba(50, 42, 24, 0.05), 0 4px 12px -6px rgba(50, 42, 24, 0.1);
  --lift: 0 1px 2px rgba(50, 42, 24, 0.05), 0 18px 42px -18px rgba(50, 42, 24, 0.22);
  --scroll: color-mix(in srgb, #2c2618 18%, transparent);
  --sw-ring: rgba(30, 26, 16, 0.7);

  --text: #23201a; --text-2: #454035; --muted: #5c564a; --faint: #6f6a5d;

  /* 自己的气泡 = 主色实心（像微信那种「我说的话」）；混一点墨色兜底，防止「墨」这类近白配色在白底上消失 */
  --paper-a: color-mix(in srgb, var(--ac-hi) 88%, #33302a);
  --paper-b: color-mix(in srgb, var(--ac) 88%, #33302a);
  --paper-ink: var(--ac-ink);
  --bub-a: #ffffff; --bub-b: #faf9f4;
  --bub-shadow: 0 1px 2px rgba(50, 42, 24, 0.05), 0 10px 24px -12px rgba(50, 42, 24, 0.18);

  --warn-fg: #8a5f0e;
  --warn-bg: color-mix(in srgb, #b08a2a 12%, transparent);
  --warn-bd: color-mix(in srgb, #b08a2a 30%, transparent);

  /* 同上：浅底小字转深 */
  --ac-soft: color-mix(in srgb, var(--ac) 58%, #191612);
  --amber: #8a5f0e; --mint: #1fae76;
  --danger: #c0392b; --danger-bg: #b8332c; --danger-bg-hi: #c23a32;
  --edge-sheen: inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent);
}
html[data-style="light"] body::before {
  background:
    radial-gradient(52% 34% at 50% -6%, var(--ac-tint), transparent 72%),
    radial-gradient(46% 30% at 96% 4%, rgba(38, 32, 20, 0.035), transparent 70%),
    linear-gradient(180deg, #fbfaf6, var(--night) 340px);
}
html[data-style="light"] .msg.user .bubble { box-shadow: var(--bub-shadow), 0 6px 18px var(--ac-glow); }

/* ================= 四、基底与通用件 ================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 高度：先给 100% 兜底，再用 dvh 覆盖 —— 移动端浏览器地址栏收放时，
   100vh 会留出一条永远够不着的空隙；dvh 跟着可视区实时收缩。 */
html, body { height: 100%; }
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}
html {
  background: var(--night);
  /* iOS 横屏时会自己放大字号（text inflation），导致窄屏排版整块跑位。
     锁成 100% 后旋转屏幕不会突然变样。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  /* 环境光：顶部一缕亮晕 + 一点主色染色，给底色纵深 */
  background: var(--night);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease);
}
body::before {
  content: '';
  position: fixed; inset: -22%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 34% at 50% -4%, color-mix(in srgb, var(--text) 5%, transparent), transparent 70%),
    radial-gradient(38% 30% at 12% 0%, var(--ac-tint), transparent 70%),
    radial-gradient(60% 46% at 50% 112%, color-mix(in srgb, var(--text) 2.2%, transparent), transparent 70%);
  transition: background var(--t2) var(--ease);
}

button:focus-visible, textarea:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
::selection { background: var(--ac-sel); color: var(--text); }

/* 视觉上藏起来，但读屏仍能念到。
   窄屏上为了省地方把某段文字 display:none 了，那段文字的「状态变化」也就一起没了
   （aria-live 区域里的节点被移出可访问树，读屏不会播报）——凡是要保留播报的，
   一律用这个类，而不是 display:none。 */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 细滚动条：平时隐身，悬停滚动区才显现，不切割画面 */
.scroll-y {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.scroll-y::-webkit-scrollbar { width: 6px; }
.scroll-y::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.scroll-y:hover::-webkit-scrollbar-thumb { background: var(--scroll); }
.scroll-y::-webkit-scrollbar-thumb:hover { background: var(--edge-hi); }

/* 入场动画：淡入 + 轻抬，消息 / 弹窗 / 浮层共用 */
@keyframes rise {
  from { opacity: 0; transform: translateY(7px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
/* 消息从各自一侧进场：rise-l 从左、rise-r 从右（页面按气泡朝向选用） */
@keyframes rise-l {
  from { opacity: 0; transform: translate(-9px, 6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes rise-r {
  from { opacity: 0; transform: translate(9px, 6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
/* 弹性入场：弹窗 / 浮层 */
@keyframes pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
/* 弹性缩回：徽标计数变化 */
@keyframes pop {
  from { transform: scale(0.3); }
  to { transform: scale(1); }
}
/* 「投入中…」的呼吸 */
@keyframes blink {
  50% { opacity: 0.35; }
}
/* 发送瞬间：纸飞机向右上飞出（JS 在发送时给按钮打 .fly） */
@keyframes fly-away {
  20% { opacity: 1; transform: translate(2px, -2px) rotate(9deg); }
  100% { opacity: 0; transform: translate(15px, -15px) rotate(16deg) scale(0.85); }
}

/* ---------- 品牌标记（信箱投口：一枚主色牌，内缘一圈微光） ---------- */
.mark {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--grad);
  color: var(--ac-ink);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: var(--glow), var(--edge-sheen);
}
.mark svg { width: 20px; height: 20px; }
.mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- 主题切换：风格分段控件 + 配色色板 ---------- */
.style-row {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; margin: 8px 10px 2px;
  background: var(--deep);
  border: 1px solid var(--edge);
  border-radius: var(--pill);
}
/* 居中排的那一组（登录页的风格切换）用类控制，不用行内 style= */
.style-row.row-center { justify-content: center; }
.st {
  /* flex: 1 0 auto —— 有余量时四段平分；放不下时各守自己的内容宽度，
     宁可让这一行显出边界，也不把「夜璃」压成竖排单字 */
  flex: 1 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0;
  font-size: 12.5px; font-weight: 500; font-family: var(--sans);
  letter-spacing: 0.02em;
  padding: 5px 9px;
  border: none;
  border-radius: var(--pill);
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t1) var(--ease), background-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
}
.st:hover { color: var(--text); }
.st:active { transform: none; }
.st::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent);
}
.st[data-style="dark"]::before  { background: linear-gradient(140deg, #1a1a17 55%, #31b8ae 55%); }
.st[data-style="paper"]::before { background: linear-gradient(140deg, #f3ecd9 55%, #b5382e 55%); }
.st[data-style="term"]::before  { background: linear-gradient(140deg, #05090b 55%, #7fe6c0 55%); }
.st[data-style="light"]::before { background: linear-gradient(140deg, #ffffff 55%, #c9e5e4 55%); box-shadow: inset 0 0 0 1px rgba(40, 34, 20, 0.3); }
.st.on {
  color: var(--text);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  font-weight: 620;
}
/* 选中态自带 box-shadow，会把 :focus-visible 的光环顶掉（选择器更具体），
   所以焦点改用 outline 表达——两件事（选中、聚焦）都要看得见。 */
.st.on:focus-visible, .sw.on:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}
.theme-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 8px 12px 9px; }
.theme-cap { font-size: 11.5px; color: var(--faint); margin-right: 1px; letter-spacing: 0.04em; }
.sw {
  width: 22px; height: 22px; padding: 0;
  border-radius: var(--av-r);   /* 色板钮跟头像同语言：圆 / 纸方 / 终端直角 */
  border: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 24%, transparent), 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform var(--t1) var(--ease-spring), box-shadow var(--t1) var(--ease);
}
.sw:hover { transform: scale(1.13); }
.sw:active { transform: scale(0.95); }
.sw[data-set="teal"]  { background: linear-gradient(150deg, #6fdfd6, #1f948c); }
.sw[data-set="amber"] { background: linear-gradient(150deg, #f2c483, #c07f2f); }
.sw[data-set="rose"]  { background: linear-gradient(150deg, #ee8ba3, #bc4a66); }
.sw[data-set="plum"]  { background: linear-gradient(150deg, #c9a8ea, #8f63c4); }
.sw[data-set="ink"]   { background: linear-gradient(150deg, #ffffff, #cfcec8); }
/* 选中：一圈「底色留白 + 描边」双环，任何风格里都看得清 */
.sw.on {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 24%, transparent),
    0 0 0 2px var(--night),
    0 0 0 3.5px var(--sw-ring);
}

/* ---------- 消息 ---------- */
.msg {
  display: flex; flex-direction: column;
  max-width: min(78%, 560px);
  animation: rise var(--t2) var(--ease-out);
}
/* 同侧连续消息分组：收紧间距、收起重复签名行（JS 打上 .msg-follow） */
.msg-follow { margin-top: -7px; }
.msg-follow .who-line, .msg-follow .seal-line { display: none; }
/* 在途与失败的状态反馈 */
.msg.sending .time { animation: blink 1.2s var(--ease) infinite; }
.msg.failed .time { color: var(--danger); }

/* 日期分隔：跨天自动插入的小胶囊（JS 打上 .date-sep）；滚动时吸附在顶部 */
.date-sep {
  position: sticky; top: 6px;
  z-index: 2;
  align-self: center;
  font-size: 11px; color: var(--muted);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--edge);
  padding: 3px 12px;
  border-radius: var(--pill);
  margin: 12px 0 2px;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
  animation: rise var(--t2) var(--ease-out);
}
.bubble {
  padding: 10px 15px;
  border-radius: var(--r-lg);
  font-size: 15px;
  line-height: 1.62;
  word-break: break-word;
  /* 长网址/长串没有空格，break-word 常常不生效；anywhere 允许在任意处断，
     窄屏上气泡不会顶出容器 */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
/* 自己写下的 = 便签纸（dark 暖白纸 / light 主色实心 / term 荧光底 / paper 米黄签） */
.msg.user .bubble {
  background: linear-gradient(180deg, var(--paper-a) 0%, var(--paper-b) 100%);
  color: var(--paper-ink);
  box-shadow: var(--bub-shadow);
}
/* 对方（管理员 / 访客来信） */
.msg.admin .bubble {
  background: linear-gradient(180deg, var(--bub-a), var(--bub-b));
  border: 1px solid var(--edge);
  color: var(--text);
}
.time {
  font-size: 11px; color: var(--faint); margin: 4px 5px 0;
  font-variant-numeric: tabular-nums;
  transition: color var(--t1) var(--ease);
}
.msg:hover .time { color: var(--muted); }

/* ---------- 撤回 ---------- */
/* 「撤回」按钮只挂在发送方自己那条消息上（访客撤自己的来信、管理员撤自己的回信） */
.recall-btn {
  margin-top: 2px;
  padding: 1px 9px;
  font: inherit;
  font-size: 11px;
  line-height: 1.7;
  color: var(--faint);
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: var(--pill);
  cursor: pointer;
  transition: color var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.recall-btn:hover {
  color: var(--ac-soft);
  border-color: color-mix(in srgb, var(--ac) 40%, var(--edge));
}
.recall-btn:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
/* 撤回过的消息淡一点：一眼能看出「这里原本有句话，被撤走了」 */
.msg.recalled .bubble { opacity: 0.72; }

.who-line, .seal-line {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 4px 5px;
}
.seal-line { color: var(--ac-soft); }

/* 回信印记：管理员回信的签名位，站点图标小方 */
.seal {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 5px;
  background: var(--grad);
  color: var(--ac-ink);
  font-size: 10px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: var(--edge-sheen);
}
.seal img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 使用说明弹窗里的要点方块 */
.chip {
  flex-shrink: 0;
  width: 22px; height: 22px; margin-top: 4px;
  border-radius: 7px;
  background: var(--grad);
  color: var(--ac-ink);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: var(--edge-sheen);
}
.chip img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 未读分隔：一道渐隐的主色光 */
.unread-divider {
  align-self: stretch;
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; color: var(--ac-soft);
  letter-spacing: 0.08em;
  margin: 14px 0 2px;
  animation: rise var(--t2) var(--ease-out);
}
.unread-divider::before, .unread-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ac-glow-hi));
}
.unread-divider::after { background: linear-gradient(90deg, var(--ac-glow-hi), transparent); }

/* ---------- 按钮 ---------- */
.btn, .btn-primary, .btn-ghost, .btn-danger {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 550;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--t1) var(--ease), border-color var(--t1) var(--ease),
              color var(--t1) var(--ease), box-shadow var(--t2) var(--ease), transform 0.1s var(--ease);
}
.btn:active, .btn-primary:active, .btn-ghost:active, .btn-danger:active { transform: translateY(1px); }
.btn-primary { background: var(--ac); color: var(--ac-ink); font-weight: 650; box-shadow: var(--edge-sheen); }
.btn-primary:hover { background: var(--ac-hi); box-shadow: var(--glow), var(--edge-sheen); }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--edge); }
.btn-ghost:hover { color: var(--text); border-color: var(--edge-hi); background: var(--glass); }
.btn-danger { background: var(--danger-bg); color: #fff; box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent); }
.btn-danger:hover { background: var(--danger-bg-hi); box-shadow: 0 6px 18px color-mix(in srgb, var(--danger-bg) 30%, transparent); }
.btn:disabled, .btn-primary:disabled, .btn-danger:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- 输入 ---------- */
.field {
  width: 100%;
  background: var(--deep);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.field::placeholder { color: var(--faint); }
.field:focus { border-color: var(--ac-line); box-shadow: var(--ring); }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0;
  background: var(--mask);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 24px;
  animation: fade var(--t2) var(--ease-out);
}
@keyframes fade { from { opacity: 0; } }
.modal-mask.hidden { display: none; }
.modal {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: 24px;
  width: 100%; max-width: 360px;
  box-shadow: var(--lift), inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
  animation: pop-in 0.32s var(--ease-spring);
}
.modal h2 { font-size: 17px; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 6px; }
.modal .desc, .modal p.desc { font-size: 13px; color: var(--muted); margin-bottom: 16px; line-height: 1.75; }
.modal input {
  width: 100%;
  background: var(--deep);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 15px;
  padding: 11px 14px;
  outline: none;
  font-family: var(--font);
  transition: border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.modal input::placeholder { color: var(--faint); }
.modal input:focus { border-color: var(--ac-line); box-shadow: var(--ring); }
.modal .btns { display: flex; gap: 8px; margin-top: 16px; }
.modal .btns .btn, .modal .btns button {
  flex: 1; padding: 10px; border: 1px solid transparent; border-radius: var(--r-md);
  font-size: 14.5px; font-weight: 550; cursor: pointer; font-family: var(--font);
  transition: background-color var(--t1) var(--ease), border-color var(--t1) var(--ease),
              color var(--t1) var(--ease), box-shadow var(--t2) var(--ease), transform 0.1s var(--ease);
}
.modal .btns .btn:active, .modal .btns button:active { transform: translateY(1px); }
/* 上面那条 border: transparent 会盖掉 .btn-ghost 的描边（选择器更具体），
   弹窗里的次要按钮就成了没有边框的裸文字。补回来。 */
.modal .btns .btn-ghost { border-color: var(--edge); }
.modal .btns .btn-ghost:hover { border-color: var(--edge-hi); }

/* ---------- 浮层提示：各风格自定义底色（暗色=亮字，亮色=深胶囊），统一滑入 ---------- */
.toast {
  position: fixed; bottom: calc(88px + env(safe-area-inset-bottom)); left: 50%;
  transform: translate(-50%, 8px);
  background: var(--toast);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--edge);
  color: var(--toast-fg); font-size: 13px;
  padding: 9px 18px; border-radius: var(--pill);
  box-shadow: var(--lift);
  opacity: 0; pointer-events: none; z-index: 200;
  max-width: 82%; text-align: center;
  transition: opacity var(--t2) var(--ease), transform 0.34s var(--ease-spring);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================= 五、自适应：两页共用的响应式基元 ================= */

/* 手机上字号小于 16px 时，iOS 会「聚焦即放大」整页，页面被顶得错位。
   因此在窄屏把所有可输入控件提到 16px，用视觉高度换体验稳定。 */
@media (max-width: 640px) {
  .field, .modal input { font-size: 16px; }
  /* 终端风格把输入框压到 14px，这条比页面里的 16px 更具体（html[attr] #id），
     不在这里顶回去的话，iOS 一点输入框就整页放大。 */
  html[data-style="term"] #msgInput { font-size: 16px; }
  .modal-mask { padding: 16px; }
  .modal { padding: 20px 18px; }
  .modal .desc, .modal p.desc { font-size: 12.5px; line-height: 1.7; }
  .toast {
    max-width: calc(100% - 32px);
    font-size: 12.5px;
    padding: 9px 15px;
  }
}

/* 触屏：悬停态不成立，给按钮留出更大的可点面积 */
@media (pointer: coarse) {
  .btn, .btn-primary, .btn-ghost, .btn-danger,
  .modal .btns .btn, .modal .btns button { min-height: 42px; }
  /* 色板钮与风格段：视觉尺寸只抬到 26px 左右，主要靠下方 §触屏扩展区把可点范围撑大 */
  .sw { width: 26px; height: 26px; }
  .theme-row { gap: 14px; }
  .st { padding: 8px 9px; }

  /* 可点范围扩展：视觉尺寸不动，用一层透明的 ::after 把手指的落点撑大。
     .st 只往上往下扩（左右扩会跟相邻的段按钮互相抢点击）；
     .sw 四周都扩，所以上面把色板间距从 12px 加到 14px，避免相邻两块的扩展区重叠。 */
  .st, .sw { position: relative; }
  .st::after { content: ''; position: absolute; inset: -8px 0; }
  .sw::after { content: ''; position: absolute; inset: -7px; }
  /* 风格段往下扩 8px 会压到下面第一排色板上沿，给它让出足够的行距 */
  .style-row { margin-bottom: 9px; }
}

/* 窄且矮（横屏手机）：压缩竖向留白，先保内容可视 */
@media (max-height: 520px) {
  .modal { padding: 16px; }
  .modal-mask { padding: 12px; }
}

/* 窄屏：风格分段控件里的「夜璃 / 宣纸 / 终端 / 白昼」会被挤成竖排单字，
   收一档内边距与色块，保证两个字横着排。 */
@media (max-width: 430px) {
  .style-row { padding: 3px; gap: 1px; }
  .st { padding: 5px 4px; font-size: 12px; gap: 4px; white-space: nowrap; }
  .st::before { width: 7px; height: 7px; }
  .theme-row { gap: 8px; padding: 7px 10px 8px; }
}

/* 极窄屏（320–380px 一类）：再收一档，保证控件本身还按得住 */
@media (max-width: 380px) {
  .style-row { margin-left: 6px; margin-right: 6px; }
  .st { font-size: 11.5px; padding: 5px 3px; gap: 3px; }
  .theme-row { gap: 7px; padding: 7px 8px 8px; }
  .theme-cap { font-size: 11px; }
  .modal { padding: 18px 16px; }
}