/* ═══════════════════════════════════════════════════════════════════
   skin-chrome.css ｜「深靛液态铬 / Deep Indigo Liquid Chrome」
   ───────────────────────────────────────────────────────────────────
   定位：纯主题层（Theme Layer）。只覆盖颜色 / 背景 / 描边 / 阴影 / 材质，
        不修改任何布局属性（grid、宽高、间距、position 一概不动）。
   加载：必须放在 styles.css 之后（同权重后者胜）。
   底色：深靛蓝 #151A44 → #0B1030，刻意避开纯黑，画布有七层纵深。
   材质：液态铬 conic / 拉丝金属 / 全息虹彩描边 / 磨砂玻璃 / 果冻硬件。
   Windows 复古：仅 .win98-* 弹窗套件使用，内容层不出现。
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── 底色（非纯黑：深靛 + 微紫）── */
  --deep: #151A44;
  --deep-2: #0B1030;
  --deep-3: #1E1470;

  --ink: #EDF1FF;
  --ink-soft: rgba(232, 240, 255, .66);
  --ink-faint: rgba(232, 240, 255, .38);

  /* ── 铬 + 暖调点缀（避免冷峻：冰蓝 / 薰衣草 / 珊瑚 / 香槟金 / 薄荷）── */
  --chrome: #DCE6FF;
  --ice: #6FE9FF;
  --lilac: #A78BFF;
  --rose: #FF7A9C;
  --gold: #FFCE8E;
  --mint: #7CFFD2;

  /* ── 材质 ── */
  --liquid: conic-gradient(from 0deg,
      #FFFFFF 0%, #C3D0F5 6%, #4A5B9E 14%, #0E1338 22%,
      #EAF1FF 30%, #93A6E6 40%, #1B2258 48%,
      #FFFFFF 57%, #B9C7EE 65%, #3C4C8C 74%, #0D1234 84%,
      #F2F6FF 92%, #8896D8 97%, #FFFFFF 100%);
  --brushed: linear-gradient(180deg, #FFFFFF 0%, #D6E0FF 26%, #8C9EDA 46%, #2B3569 54%, #7E90CE 62%, #E7EEFF 82%, #FFFFFF 100%);
  --holo: linear-gradient(100deg, #6FE9FF 0%, #A78BFF 20%, #FF7A9C 40%, #FFCE8E 58%, #7CFFD2 78%, #6FE9FF 100%);
  /* ── 屏幕低噪点（替代原 112° 斜向拉丝条纹）──
     ⚠️ 历史教训：斜条纹（repeating-linear-gradient 112deg）在顶栏 /
     走马灯 / 右栏块头三处平铺后，会读成"廉价电竞灯效"，且和 Y2K 银幕
     质感互相打架 —— 银幕是细腻均匀的噪，不是硬边条纹。
     改用 SVG feTurbulence（fractalNoise）生成各向同性颗粒，天然无方向感。
     · baseFrequency 0.9 + numOctaves 4 = 细密均匀的银盐颗粒
     · feColorMatrix 压成灰度并降 alpha，避免彩色噪点污染铬面
     · 160×160 tile 平铺，SVG 走 data URI = 零额外请求、零外部依赖 */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  /* 旧变量名保留别名 —— 避免任何遗漏的引用点直接失效变透明 */
  --laser: var(--noise);

  --glass: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035));
  --jelly: linear-gradient(180deg, rgba(198, 220, 255, .26), rgba(120, 150, 230, .10));
  --hair: rgba(255, 255, 255, .14);
  --hair-2: rgba(255, 255, 255, .24);
  --soft: 0 12px 32px rgba(4, 8, 28, .55);
  --glow-c: 0 0 26px rgba(111, 233, 255, .42);
  --glow-r: 0 0 26px rgba(255, 122, 156, .34);

  /* ── Windows 复古（仅弹窗）── */
  --win-face: #DCDCE6;
  --win-hi: #FFFFFF;
  --win-lo: #8A8AA0;
  --win-dk: #3A3A4C;

  /* ── 覆盖 styles.css 原语（供全域组件继承）── */
  --primary: #6FE9FF;
  --primary-deep: #4FC9F0;
  --accent: #A78BFF;
  --bg: transparent;
  --card: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035));
  --card-solid: #141B4A;
  --muted: rgba(232, 240, 255, .62);
  --line: rgba(255, 255, 255, .14);
  --shadow: 0 18px 50px rgba(4, 8, 28, .55);
  --radius: 18px;
}

/* ═══════════════════════════════════════════════════════════════════
   银幕字体栈（Y2K 未来感）
   ⚠️ 为什么不用 Google Fonts / Orbitron：
   实测本机 curl fonts.googleapis.com 直接超时（exit 28）——国内不可达。
   CDN 字体在这条链路上是"能开发不能上线"的假依赖，绝不能进生产。
   ✅ 全部改用系统自带可变字体，零请求、零外部依赖、Windows 10+ 稳定命中：
     · Bahnschrift = DIN 1451（德国工业标准），本身就是航空/仪表/航站楼
       字体，天然带"机场信息屏"的未来感；可变 wght 轴可做真字重。
     · Agency FB = 1980s 科幻片字幕感，做 fallback 的第二选择。
     · Cascadia Mono = 微软自带等宽，保证数字列对齐不跳动。
   中文（航线名 京→沪）走雅黑/苹方兜底，绝不让西文字体硬吃汉字。 */
:root {
  --face-screen: "Bahnschrift", "DIN Alternate", "Agency FB",
                 "Cascadia Mono", ui-monospace, Consolas,
                 "PingFang SC", "Microsoft YaHei", monospace;
  /* 数字专用：tabular-nums 让价格列等宽，滚动时不左右抖动 */
  --face-num: "Bahnschrift", "Agency FB", "Cascadia Mono",
              ui-monospace, Consolas, monospace;
}

/* ═══════════════════════════════════════════════════════════════════
   Y2K 分层画布 · CANDY CHROME 糖果铬（纯伪元素，零 DOM 改动）
   1 暖紫底渐变  2 糖果铬液体层（低 alpha + blur16 + screen）
   3 液面弧形高光  4 表面张力亮环  5 像素方块  6 半调点阵  7 星点
   —— 已移除：透视网格地平线 / 扫描线横条 / 镭射拉丝斜纹 / 底部水银池
   ⚠️ 纪律：画布是背景氛围层，禁止垫在正文文字正后方；页面中部 50% 必须留暗
   ⭐ 三条硬经验（改这一层前必读）：
     ① 线条的「连续」与液体的「有机」互斥 —— 不要做电路走线（必然变成网格）
        Y2K cyber 的符号层正解是「像素方块 + 半调点阵」，不是线
     ② 饱和霓虹禁止多层 radial-gradient 叠加（出来是脏色块 + 硬边色带）
        正解：单层 alpha .30–.36 + blur(16px) + mix-blend-mode:screen，靠混合提亮
     ③ 形体必须由「不模糊的层」提供 —— 液面高光弧 / 张力环放 body::after
        否则整片糊成色雾、没有形体
   ⚠️ 真机约束：.chat-sidebar / .chat-context 带 backdrop-filter，细颗粒过玻璃会被
      高斯模糊抹平；识别符号（像素块）必须做到 ≥7px 才活得下来
   ═══════════════════════════════════════════════════════════════════ */
/* 底渐变：暖紫承托面（比深靛更暖，用来配糖果铬） */
body {
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(255, 217, 142, .15), transparent 62%),
    radial-gradient(860px 500px at 12% 8%, rgba(108, 255, 192, .11), transparent 60%),
    radial-gradient(1100px 620px at 48% 116%, rgba(255, 111, 165, .17), transparent 66%),
    linear-gradient(180deg, #100C24 0%, #191238 38%, #241842 70%, #0C0819 100%);
}

/* ────────────────────────────────────────────────────────────────
   糖果铬液体层：5 层低 alpha 虹彩 blob，整层 blur(16) + screen
   ⚠️ 强度只能靠「混合模式」提亮，禁止靠叠加 alpha（会变脏色块）
   ──────────────────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 34% 0 0 0;
  z-index: -1;
  pointer-events: none;

  opacity: 1;
  transform: none;
  filter: blur(16px) saturate(1.5);
  mix-blend-mode: screen;
  will-change: transform;

  background-repeat: no-repeat;
  background-image:
    /* 1 柠檬黄液团（左下） */
    radial-gradient(closest-side, rgba(255, 242, 150, .36), rgba(230, 185, 60, .12) 44%, transparent 72%),
    /* 2 薄荷液团（右上） */
    radial-gradient(closest-side, rgba(150, 255, 225, .34), rgba(40, 215, 190, .12) 46%, transparent 74%),
    /* 3 珊瑚液团（右下） */
    radial-gradient(closest-side, rgba(255, 110, 175, .32), rgba(180, 40, 110, .12) 48%, transparent 76%),
    /* 4 蓝紫承托池（贴底，压扁） */
    radial-gradient(closest-side, rgba(120, 160, 255, .30), rgba(45, 60, 160, .12) 50%, transparent 78%),
    /* 5 中央极淡反光，让位给内容 */
    radial-gradient(closest-side, rgba(255, 215, 255, .16), transparent 74%);
  background-size:
    660px 520px,
    580px 450px,
    520px 400px,
    760px 560px,
    900px 420px;
  background-position:
    7% 62%,
    93% 34%,
    89% 86%,
    40% 112%,
    48% 120%;

  /* 顶部快速渐隐：液面之上保持暗，形体聚在下半部 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .30) 7%, rgba(0, 0, 0, .74) 20%, #000 34%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .30) 7%, rgba(0, 0, 0, .74) 20%, #000 34%, #000 100%);

  animation:
    acDrift 27s ease-in-out infinite alternate,
    acBreathe 22s ease-in-out infinite alternate;
}

/* 各层错速漂移 → 靠近时自然融合成有机形态（不是平移一整块） */
@keyframes acDrift {
  from {
    background-position:
      7% 62%,
      93% 34%,
      89% 86%,
      40% 112%,
      48% 120%;
  }
  to {
    background-position:
      17% 54%,
      85% 42%,
      79% 96%,
      52% 104%,
      40% 126%;
  }
}

/* 极缓整体呼吸，模拟液体表面缓慢起伏 */
@keyframes acBreathe {
  from { transform: scale(1); }
  to   { transform: scale(1.07) translate3d(-1%, -1.2%, 0); }
}

/* ────────────────────────────────────────────────────────────────
   符号层（不 blur → 液体才有形体）：像素方块 + 半调点阵 + 液面高光弧
   + 表面张力亮环 + 星点。⚠️ 这一层禁止加 filter，否则形体消失变色雾
   ──────────────────────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  opacity: .8;
  mix-blend-mode: screen;
  background-blend-mode: normal;
  background-repeat: no-repeat;
  background-image:
    /* 1-5 像素方块群（糖果配色，7–11px，唯一活得过侧栏毛玻璃的符号） */
    linear-gradient(rgba(255, 246, 170, .86) 0 100%, transparent 100%),
    linear-gradient(rgba(150, 255, 225, .80) 0 100%, transparent 100%),
    linear-gradient(rgba(255, 140, 190, .78) 0 100%, transparent 100%),
    linear-gradient(rgba(200, 235, 255, .66) 0 100%, transparent 100%),
    linear-gradient(rgba(255, 246, 170, .56) 0 100%, transparent 100%),
    /* 6 细半调点阵（平铺，只作织感） */
    radial-gradient(circle, rgba(210, 255, 240, .26) 0 1.2px, transparent 1.7px),
    /* 7-8 焊点（琥珀 / 薄荷，落在液面上） */
    radial-gradient(circle at 36% 67%, rgba(255, 225, 160, .9) 0 2.6px, transparent 3.4px),
    radial-gradient(circle at 74% 75%, rgba(150, 255, 215, .85) 0 2.4px, transparent 3.2px),
    /* 9-10 液面弧形高光（压扁椭圆，左段 / 右段错位 → 波浪感） */
    radial-gradient(ellipse 31% 2.6% at 36% 67%, rgba(240, 255, 255, .56), rgba(190, 235, 255, .14) 60%, transparent 78%),
    radial-gradient(ellipse 24% 2.2% at 74% 75%, rgba(200, 255, 235, .38), transparent 78%),
    /* 11 表面张力亮环（贴主液团） */
    radial-gradient(closest-side, transparent 0 59%, rgba(255, 225, 150, .36) 70%, rgba(140, 255, 225, .18) 77%, transparent 86%),
    /* 12-15 星点 */
    radial-gradient(1.6px 1.6px at 16% 24%, #FFE9C4, transparent),
    radial-gradient(1.5px 1.5px at 48% 13%, #CFFFE9, transparent),
    radial-gradient(1.4px 1.4px at 84% 29%, #FFC8DE, transparent),
    radial-gradient(rgba(255, 205, 150, .14) .5px, transparent .6px);
  background-size:
    9px 9px, 11px 11px, 7px 7px, 6px 6px, 8px 8px, 7px 7px,
    100%, 100%,
    100% 100%, 100% 100%,
    100% 100%,
    100% 100%, 100% 100%, 100% 100%, 4px 4px;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat,
    no-repeat, no-repeat,
    no-repeat, no-repeat,
    no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:
    12% 68%, 74% 60%, 45% 84%, 86% 92%, 29% 76%, 0 0,
    36% 67%, 74% 75%,
    23% 60%, 81% 44%,
    26% 66%,
    16% 24%, 48% 13%, 84% 29%, 0 0;

  /* 顶部渐隐 + 只让下半部承载符号，hero 区保持干净 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .34) 14%, #000 48%, #000 100%),
    radial-gradient(92% 86% at 46% 100%, #000 0%, transparent 86%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .34) 14%, #000 48%, #000 100%),
    radial-gradient(92% 86% at 46% 100%, #000 0%, transparent 86%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  animation: acTrace 36s ease-in-out infinite, acStars 10s ease-in-out infinite alternate;
}

@keyframes acTrace { 0%, 100% { opacity: .68; } 50% { opacity: .96; } }
@keyframes acStars { from { opacity: .68; } to { opacity: .96; } }


/* 暗角单独一层：避免与伪元素动画打架 */
.chat-shell {
  box-shadow: inset 0 0 200px rgba(6, 9, 40, .55);
}

::selection {
  background: rgba(111, 233, 255, .34);
  color: #fff;
}

/* 滚动条也走皮肤 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 233, 255, .38) transparent;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(111, 233, 255, .55), rgba(167, 139, 255, .45));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ═══════════════════════════════════════════════════════════════════
   材质工具类（供全域复用）
   ═══════════════════════════════════════════════════════════════════ */
.skin-liquid {
  position: relative;
  overflow: hidden;
  color: #101632;
  background: var(--liquid);
  background-size: 220% 220%;
  animation: skinLiquidFlow 15s linear infinite;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, .98), inset 0 -6px 12px rgba(28, 42, 102, .5), 0 10px 26px rgba(70, 110, 240, .34);
}

@keyframes skinLiquidFlow { to { background-position: 220% 0; } }

.skin-brushed {
  background: var(--brushed);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -2px 6px rgba(20, 30, 80, .42), 0 6px 18px rgba(5, 10, 40, .5);
}

.skin-holo-edge { position: relative; }
.skin-holo-edge::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.4px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--holo);
  background-size: 220% 100%;
  animation: skinHoloShift 12s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@keyframes skinHoloShift { to { background-position: 220% 0; } }

/* ═══════════════════════════════════════════════════════════════════
   /chat 三栏工作区（骨架 = 生产：15 / 50 / 45，此处只换皮肤）
   ═══════════════════════════════════════════════════════════════════ */
.chat-workspace {
  background: transparent;
}

/* ── 左轨 ─────────────────────────────────────────────────────────── */
.chat-sidebar {
  background: linear-gradient(180deg, rgba(24, 32, 84, .58), rgba(12, 16, 48, .48));
  border-right: 1px solid var(--hair);
  backdrop-filter: blur(18px);
}

.chat-rail-head {
  padding: 2px 2px 8px;
  border-bottom: 1px solid var(--hair);
}

.chat-rail-logo {
  border-radius: 11px;
  background: var(--liquid);
  background-size: 220% 220%;
  animation: skinLiquidFlow 15s linear infinite;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .98), inset 0 -3px 8px rgba(28, 42, 102, .5), 0 8px 20px rgba(70, 110, 240, .4);
}

.chat-rail-wordmark { color: #fff; }
.chat-rail-wordmark small { color: var(--ice); }

.chat-sidebar-toggle {
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, .06);
  color: var(--ink-soft);
}
.chat-sidebar-toggle:hover { border-color: var(--ice); color: var(--ice); }

.chat-rail-item {
  border-radius: 12px;
  color: var(--ink-soft);
  transition: background .16s, color .16s, border-color .16s, box-shadow .16s;
}
.chat-rail-item:hover { background: rgba(255, 255, 255, .07); color: var(--ink); }
.chat-rail-item.is-active {
  color: #fff;
  font-weight: 800;
  background: linear-gradient(90deg, rgba(111, 233, 255, .20), rgba(167, 139, 255, .12));
  border-color: rgba(111, 233, 255, .34);
  box-shadow: inset 3px 0 0 var(--ice), var(--glow-c);
}
.chat-rail-item.is-active .chat-rail-svg { opacity: 1; }

.chat-rail-dot {
  background: var(--rose);
  box-shadow: 0 0 10px rgba(255, 122, 156, .95);
}
.chat-rail-dot::after { border: 1.5px solid rgba(255, 122, 156, .85); }

.chat-rail-badge {
  background: rgba(255, 206, 142, .16);
  border: 1px solid rgba(255, 206, 142, .44);
  color: var(--gold);
}

.chat-new-btn {
  position: relative;
  overflow: hidden;
  color: #0A0F2E;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .65);
  /* 用固定的亮珍珠铬，避免 conic 动画相位导致文字发虚 */
  background: linear-gradient(180deg, #FFFFFF 0%, #E7EEFF 34%, #C6D2F2 52%, #EEF3FF 72%, #FFFFFF 100%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .98), inset 0 -5px 10px rgba(28, 42, 102, .32), 0 12px 28px rgba(70, 110, 240, .38);
  transition: transform .14s;
}
.chat-new-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #FFFFFF 0%, #E7EEFF 34%, #C6D2F2 52%, #EEF3FF 72%, #FFFFFF 100%);
}
.chat-new-btn:active { transform: translateY(0); }

.chat-rail-sessions { border-top: 1px solid var(--hair); }
.chat-session-item { font-size: 12.5px; color: var(--ink-soft); }
.chat-session-item:hover { background: rgba(255, 255, 255, .07); color: var(--ink); }
.chat-session-row.is-active .chat-session-item {
  background: rgba(255, 255, 255, .10);
  border: 1px solid var(--hair);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--soft);
}
.chat-session-icon { color: var(--mint); }
.chat-session-del:hover { background: rgba(255, 90, 120, .14); color: #ff8fa8; }

.chat-rail-foot { border-top: 1px solid var(--hair); }
.chat-rail-avatar {
  border-radius: 10px;
  background: var(--liquid);
  background-size: 220% 220%;
  animation: skinLiquidFlow 15s linear infinite;
  color: #101632;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .98), 0 6px 16px rgba(70, 110, 240, .4);
}
.chat-rail-user-text b { color: var(--ink); }
.chat-rail-user-text small { color: var(--ink-faint); }
.chat-rail-account { border-color: var(--hair-2); color: var(--ink-soft); }
.chat-rail-account.is-primary { border-color: rgba(111, 233, 255, .5); color: var(--ice); }
.chat-sidebar-brand { color: var(--ice); }
.chat-sidebar-foot small { color: var(--ink-faint); }

/* ── 中栏顶栏 ─────────────────────────────────────────────────────── */
.chat-main-head {
  background: linear-gradient(180deg, rgba(24, 32, 84, .56), rgba(12, 16, 48, .32));
  border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(18px);
}
.chat-main-title strong { color: #fff; }
.chat-main-title small { color: var(--ink-faint); }

.chat-icon-btn {
  border: 1px solid rgba(255, 255, 255, .30);
  background: var(--jelly);
  color: var(--ink);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, .30), inset 0 -6px 12px rgba(10, 18, 70, .4), 0 6px 16px rgba(4, 8, 30, .46);
  backdrop-filter: blur(10px);
  transition: transform .14s, border-color .16s;
}
.chat-icon-btn:hover {
  border-color: var(--ice);
  color: var(--ice);
  transform: translateY(-1px);
}

/* ── 气泡 ─────────────────────────────────────────────────────────── */
.bubble {
  background: linear-gradient(180deg, rgba(34, 44, 104, .62), rgba(18, 24, 68, .56));
  border: 1px solid var(--hair);
  box-shadow: var(--soft), inset 0 1px 0 rgba(255, 255, 255, .14);
  color: var(--ink);
  backdrop-filter: blur(14px);
}
.chat-message.user .bubble {
  background: linear-gradient(140deg, rgba(167, 139, 255, .30), rgba(111, 233, 255, .18));
  border-color: rgba(167, 139, 255, .44);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(120, 100, 240, .30), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.chat-identity { color: var(--ink-faint); }

.chat-quick-reply {
  border: 1px solid rgba(167, 139, 255, .5);
  background: rgba(167, 139, 255, .16);
  color: #DCCCFF;
  transition: background .16s, color .16s, transform .14s;
}
.chat-quick-reply:hover { background: rgba(167, 139, 255, .42); color: #fff; transform: translateY(-1px); }

.chat-suggestion {
  background: rgba(255, 255, 255, .06);
  border-color: var(--hair);
  color: var(--ink);
}
.chat-suggestion:hover { background: rgba(111, 233, 255, .12); border-color: rgba(111, 233, 255, .44); }

.chat-quick-action {
  background: linear-gradient(180deg, #FFFFFF 0%, #E7EEFF 34%, #C6D2F2 52%, #EEF3FF 72%, #FFFFFF 100%);
  color: #0A0F2E;
}
.chat-quick-action:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #E7EEFF 34%, #C6D2F2 52%, #EEF3FF 72%, #FFFFFF 100%);
  color: #0A0F2E;
}

/* ── 槽位条（果冻硬件）───────────────────────────────────────────── */
.chat-slot {
  border: 1px solid rgba(255, 255, 255, .30);
  background: var(--jelly);
  color: var(--ink);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, .26), inset 0 -6px 12px rgba(10, 18, 70, .32), 0 6px 16px rgba(4, 8, 30, .40);
  backdrop-filter: blur(10px);
}
.chat-slot:hover { border-color: var(--ice); color: var(--ice); }
.chat-slot.is-open { border-color: var(--ice); color: var(--ice); box-shadow: var(--glow-c); }
.chat-slot.is-set {
  border-color: rgba(255, 206, 142, .55);
  background: linear-gradient(180deg, rgba(255, 206, 142, .24), rgba(255, 206, 142, .10));
  color: var(--gold);
}
.chat-slot-menu {
  border: 1px solid var(--hair-2);
  background: linear-gradient(180deg, rgba(30, 40, 100, .96), rgba(14, 20, 60, .96));
  box-shadow: 0 20px 50px rgba(2, 5, 24, .6);
}
.chat-slot-opt { background: rgba(255, 255, 255, .07); color: rgba(237, 241, 255, .88); }
.chat-slot-opt:hover { background: rgba(111, 233, 255, .16); color: var(--ice); }
.chat-slot-opt.is-on { background: rgba(111, 233, 255, .24); border-color: rgba(111, 233, 255, .55); color: var(--ice); }
.chat-slot-opt-clear { color: var(--ink-faint); }
.chat-slot-tip { color: var(--ink-soft); }

/* ── 输入区（全息描边 + 液态铬发送球）────────────────────────────── */
.chat-composer { background: linear-gradient(180deg, rgba(11, 16, 48, 0), rgba(11, 16, 48, .80) 44%); }

.chat-composer .chat-compose {
  position: relative;
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(40, 54, 124, .62), rgba(16, 22, 66, .68));
  box-shadow: var(--soft), inset 0 1px 0 rgba(255, 255, 255, .16);
  backdrop-filter: blur(16px) saturate(1.2);
}
.chat-composer .chat-compose::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.6px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--holo);
  background-size: 220% 100%;
  animation: skinHoloShift 12s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.chat-composer .chat-compose input {
  color: var(--ink);
  background: transparent;
  border: 0;
}
.chat-composer .chat-compose input::placeholder { color: var(--ink-faint); }

.chat-send {
  position: relative;
  overflow: hidden;
  color: #101632;
  border: 1px solid rgba(255, 255, 255, .55);
  background: var(--liquid);
  background-size: 220% 220%;
  animation: skinLiquidFlow 15s linear infinite;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .98), inset 0 -4px 8px rgba(28, 42, 102, .42), 0 10px 24px rgba(70, 110, 240, .36);
  transition: transform .14s;
}
.chat-send:hover { transform: translateY(-1px) scale(1.03); }

.chat-composer-foot small { color: var(--ink-faint); }

/* ═══════════════════════════════════════════════════════════════════
   右栏 = 线上真实三块：为你推荐 / 精选灵感 / AI契合旅伴精选
   类名与 app.js renderChatContext() 完全一致
   ═══════════════════════════════════════════════════════════════════ */
.chat-context {
  border-left: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(22, 30, 80, .52), rgba(10, 15, 44, .48));
  backdrop-filter: blur(18px);
}

.chat-ctx-block {
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(40, 54, 124, .32), rgba(16, 22, 66, .40));
  box-shadow: var(--soft);
  backdrop-filter: blur(14px);
}

/* 块头：拉丝金属 + 镭射扫光（这版「显贵」的主力） */
.chat-ctx-block-head {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hair);
  background: var(--brushed);
}
.chat-ctx-block-head::after {
  content: '';
  position: absolute;
  inset: 0;
  /* ⚠️ 噪点是 160×160 平铺图，必须显式 repeat —— 只写 background 会只出现一块 */
  background: var(--noise) repeat;
  background-size: 160px 160px;
  opacity: .16;
  animation: acNoiseShift 13s steps(1) infinite;
  pointer-events: none;
}
.chat-ctx-block-head h3,
.chat-ctx-more { position: relative; z-index: 1; }
.chat-ctx-block-head h3 { color: #131A44; }
.chat-ctx-more {
  padding: 3px 11px;
  border: 1px solid rgba(19, 26, 68, .4);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: #1B2464;
  font-weight: 800;
}
.chat-ctx-more:hover { background: #fff; color: #131A44; }
.chat-ctx-hint { color: var(--ink-faint); }

/* ① 为你推荐 */
.chat-poi-tab {
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, .07);
  color: var(--ink-soft);
  transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
}

/* tab 像素图标（8×8 点阵）：生产 DOM 无 svg，用 ::before 补齐设计稿图标 */
.chat-poi-tab::before {
  content: '';
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  background: center / contain no-repeat;
  image-rendering: pixelated;
}
.chat-poi-tab:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cg fill='%236FE9FF'%3E%3Crect x='4' y='0' width='1' height='1'/%3E%3Crect x='3' y='1' width='2' height='1'/%3E%3Crect x='2' y='2' width='3' height='1'/%3E%3Crect x='1' y='3' width='4' height='1'/%3E%3Crect x='0' y='4' width='8' height='1'/%3E%3Crect x='0' y='5' width='4' height='1'/%3E%3Crect x='1' y='6' width='3' height='1'/%3E%3Crect x='1' y='7' width='2' height='1'/%3E%3C/g%3E%3C/svg%3E");
}
.chat-poi-tab:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cg fill='%23B79BFF'%3E%3Crect x='1' y='0' width='6' height='1'/%3E%3Crect x='1' y='1' width='1' height='6'/%3E%3Crect x='6' y='1' width='1' height='6'/%3E%3Crect x='1' y='7' width='6' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='4' y='2' width='1' height='1'/%3E%3Crect x='2' y='4' width='1' height='1'/%3E%3Crect x='4' y='4' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
}
.chat-poi-tab:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cg fill='%23FF7A9C'%3E%3Crect x='3' y='0' width='2' height='1'/%3E%3Crect x='2' y='1' width='4' height='2'/%3E%3Crect x='3' y='3' width='2' height='1'/%3E%3Crect x='2' y='4' width='4' height='1'/%3E%3Crect x='3' y='5' width='2' height='1'/%3E%3Crect x='2' y='6' width='4' height='2'/%3E%3C/g%3E%3C/svg%3E");
}
.chat-poi-tab:hover { border-color: rgba(111, 233, 255, .5); color: var(--ice); }
.chat-poi-tab.is-on {
  border-color: rgba(111, 233, 255, .6);
  color: #fff;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(111, 233, 255, .28), rgba(167, 139, 255, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--glow-c);
}

.chat-poi-cover { border-radius: 14px; box-shadow: var(--soft); }
.chat-poi-cover-empty { background: linear-gradient(135deg, rgba(111, 233, 255, .26), rgba(167, 139, 255, .26)); }
.chat-poi-card:hover .chat-poi-cover { outline: 2px solid var(--ice); outline-offset: 1px; }

.chat-poi-rating {
  background: rgba(10, 16, 48, .82);
  color: var(--gold);
  box-shadow: 0 3px 12px rgba(4, 8, 30, .5);
  backdrop-filter: blur(6px);
}
.chat-poi-text b { color: var(--ink); }
.chat-poi-text small { color: var(--ink-faint); }

.chat-poi-arrow {
  border: 1px solid rgba(255, 255, 255, .30);
  background: rgba(12, 18, 52, .8);
  color: var(--ink);
  backdrop-filter: blur(8px);
}
.chat-poi-arrow:hover { border-color: var(--ice); background: rgba(12, 18, 52, .95); color: var(--ice); }
.chat-poi-src { color: var(--ink-faint); }
.chat-poi-hint { color: var(--ink-faint); }

.chat-poi-cta {
  border: 1px solid rgba(111, 233, 255, .5);
  background: rgba(111, 233, 255, .16);
  color: var(--ice);
}
.chat-poi-cta:hover { background: rgba(111, 233, 255, .28); color: #fff; }
.chat-poi-cta-ghost { border-color: rgba(255, 255, 255, .18); background: transparent; color: rgba(237, 241, 255, .85); }
.chat-poi-cta-ghost:hover { border-color: rgba(111, 233, 255, .5); background: rgba(111, 233, 255, .10); color: var(--ice); }
.chat-poi-kind { background: rgba(111, 233, 255, .16); color: var(--ice); }

/* ② 精选灵感 */
.chat-ctx-guide {
  border-radius: 16px;
  box-shadow: var(--soft);
  background: linear-gradient(135deg, rgba(111, 233, 255, .22), rgba(167, 139, 255, .22));
  transition: transform .16s, box-shadow .18s;
}
.chat-ctx-guide::after {
  background: linear-gradient(180deg, rgba(6, 9, 34, 0) 0%, rgba(6, 9, 34, .40) 48%, rgba(6, 9, 34, .90) 100%);
}
.chat-ctx-guide::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.chat-ctx-guide:hover { outline: 0; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(4, 8, 30, .6); }
.chat-ctx-guide-badge { background: rgba(10, 16, 48, .78); color: var(--ice); backdrop-filter: blur(6px); }
.chat-ctx-guide-loc { color: rgba(255, 255, 255, .90); }
.chat-ctx-guide-author { color: rgba(255, 255, 255, .92); }
.guide-avatar {
  background: var(--liquid);
  background-size: 220% 220%;
  color: #101632;
  font-weight: 900;
}

/* ③ AI契合旅伴精选 */
.chat-ctx-card {
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, .06);
  transition: border-color .16s, box-shadow .16s, transform .14s;
}
.chat-ctx-card:hover { border-color: rgba(111, 233, 255, .55); background: rgba(111, 233, 255, .08); box-shadow: var(--glow-c); transform: translateY(-1px); }
.chat-ctx-card-cover { border-radius: 11px; background: rgba(124, 255, 210, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.chat-ctx-card-cover-empty { background: linear-gradient(135deg, rgba(111, 233, 255, .22), rgba(167, 139, 255, .22)); }
.chat-ctx-card-text b { color: var(--ink); }
.chat-ctx-card-text small { color: var(--ink-faint); }

.chat-ctx-fav {
  border: 1px solid var(--hair-2);
  background: rgba(255, 255, 255, .06);
  color: var(--ink-faint);
}
.chat-ctx-fav:hover { color: var(--rose); border-color: rgba(255, 122, 156, .6); }
.chat-ctx-fav.is-fav { background: rgba(255, 122, 156, .18); border-color: rgba(255, 122, 156, .72); color: var(--rose); box-shadow: var(--glow-r); }

.chat-ctx-hotel-link { color: var(--ice); }
.chat-ctx-plan {
  border: 1px solid rgba(111, 233, 255, .34);
  background: rgba(111, 233, 255, .10);
  color: var(--ink);
}
.chat-ctx-cta {
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, .05);
  color: var(--ink);
}
.chat-ctx-cta:hover { background: rgba(111, 233, 255, .12); border-color: rgba(111, 233, 255, .44); }
.chat-ctx-cta i { color: var(--ice); }

/* 右栏 · 地图全屏态 */
.chat-ctx-map-top { border-bottom: 1px solid var(--hair); background: rgba(16, 22, 62, .82); }
.chat-ctx-map-back { border: 1px solid var(--hair-2); background: rgba(255, 255, 255, .06); color: var(--ink); }
.chat-ctx-map-back:hover { border-color: var(--ice); color: var(--ice); }
.chat-ctx-map-title h3 { color: var(--ink); }
.chat-ctx-map-save {
  border: 1px solid rgba(111, 233, 255, .5);
  background: rgba(111, 233, 255, .14);
  color: var(--ice);
}
.chat-ctx-map-save:hover { background: rgba(111, 233, 255, .30); color: #fff; }
.chat-amap-pin {
  background: var(--ice);
  border-color: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 5px rgba(111, 233, 255, .22), 0 4px 12px rgba(0, 0, 0, .5);
}

/* ═══════════════════════════════════════════════════════════════════
   通用组件（随全域继承）
   ═══════════════════════════════════════════════════════════════════ */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .032));
  border: 1px solid var(--hair);
  box-shadow: var(--soft);
}
.card-head h3 { color: var(--ink); }
.card-head .subtitle { color: var(--ink-soft); }

.kicker { color: var(--ice); }

.btn-primary {
  position: relative;
  overflow: hidden;
  color: #0A0F2E;
  border: 1px solid rgba(255, 255, 255, .55);
  background: linear-gradient(180deg, #FFFFFF 0%, #E7EEFF 34%, #C6D2F2 52%, #EEF3FF 72%, #FFFFFF 100%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .98), inset 0 -5px 10px rgba(28, 42, 102, .30), 0 10px 26px rgba(70, 110, 240, .34);
}
.btn-primary:hover { filter: brightness(1.04); }

/* ⚠️ 发送球恢复液态铬：上面 .btn-primary 的固定珍珠铬会按源顺序盖掉
   .chat-send 的 conic（实测踩过：发送球变静态白球、动画空转），必须在此重申 */
.btn-primary.chat-send {
  background: var(--liquid);
  background-size: 220% 220%;
  animation: skinLiquidFlow 15s linear infinite;
}

/* 拉丝金属块头的「抛光」扫光：高光带周期性掠过，与 ::after 的镭射细纹叠加 */
.chat-ctx-block-head::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .62) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 130% 0;
  animation: skinSheen 6.5s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes skinSheen {
  0% { background-position: 130% 0; }
  55%, 100% { background-position: -30% 0; }
}

.btn-ghost { color: #D7F7EF; border-color: rgba(111, 233, 255, .38); }
.btn-ghost:hover { background: rgba(111, 233, 255, .12); }
.btn-outline { color: var(--ice); border: 1.5px solid rgba(111, 233, 255, .5); }
.btn-outline:hover { background: rgba(111, 233, 255, .12); }
.btn-danger { background: rgba(255, 90, 120, .12); border-color: rgba(255, 90, 120, .40); color: #ff9db3; }

.tag { background: rgba(255, 255, 255, .07); color: var(--ink-soft); }
.tag.is-alert { border-color: rgba(111, 233, 255, .42); background: rgba(111, 233, 255, .14); color: var(--ice); }
.tag.is-preview { border-color: rgba(255, 206, 142, .40); color: var(--gold); background: rgba(255, 206, 142, .10); }

.modal-backdrop { background: rgba(6, 9, 34, .62); backdrop-filter: blur(8px); }
.modal {
  background: linear-gradient(180deg, rgba(30, 40, 100, .98), rgba(14, 20, 58, .98));
  border: 1px solid var(--hair-2);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .6);
  color: var(--ink);
}
.modal-head h3 { color: #fff; }

.toast { background: rgba(14, 20, 58, .96); color: var(--ink); border: 1px solid var(--hair-2); }
.toast.update-toast {
  background: linear-gradient(135deg, #6FE9FF, #A78BFF);
  color: #0A0F2E;
  font-weight: 800;
  box-shadow: 0 6px 28px rgba(90, 150, 255, .38);
}

.topbar { background: rgba(12, 18, 52, .62); border-bottom: 1px solid var(--hair); backdrop-filter: blur(18px); }
.top-nav-item { color: rgba(232, 240, 255, .72); }
.top-nav-item:hover { background: rgba(111, 233, 255, .10); color: #fff; }
.top-nav-item.active { background: linear-gradient(135deg, rgba(111, 233, 255, .22), rgba(167, 139, 255, .18)); color: var(--ice); }
.top-nav-item.active::after { background: var(--ice); }
.locale-switch { color: rgba(232, 240, 255, .72); }
.locale-switch button.active { color: var(--ice); }

/* 行程 / 时间线（plan 页） */
.plan-overview { background: rgba(111, 233, 255, .08); }
.day-tab { background: rgba(255, 255, 255, .06); border-color: var(--hair); color: var(--ink-soft); }
.day-tab.active { background: linear-gradient(180deg, #FFFFFF, #C6D2F2); color: #0A0F2E; border-color: rgba(255, 255, 255, .6); }
.timeline-card { background: rgba(255, 255, 255, .06); border-color: var(--hair); }
.timeline-name { color: #fff; }
.timeline-desc { color: var(--ink-soft); }
.timeline-dot { background: #131A44; border-color: rgba(111, 233, 255, .5); color: var(--ice); }
.timeline-line { background: rgba(111, 233, 255, .34); }
.timeline-time { color: var(--ice); }
.timeline-item p { color: var(--ink-soft); }
.history-item { background: rgba(255, 255, 255, .055); border-color: var(--hair); }
.history-item.active { border-color: var(--ice); background: rgba(111, 233, 255, .10); }
.history-menu { background: rgba(20, 27, 74, .98); border-color: var(--hair-2); }
.history-menu-trigger { background: rgba(255, 255, 255, .06); color: var(--ink-soft); }

/* B2 · 托管中的旅程切换栏（深色皮肤覆盖） */
.journey-switch { background: rgba(255, 255, 255, .055); border-color: var(--hair); border-left-color: var(--hair-2); }
.journey-switch:hover { background: rgba(111, 233, 255, .10); border-color: var(--ice); }
.journey-switch.is-current { border-left-color: var(--ice); box-shadow: inset 0 0 0 1px var(--ice); background: rgba(111, 233, 255, .10); }
.journey-switch-main strong { color: var(--ink); }
.journey-switch-main small, .journey-switch-id, .journey-switcher-note { color: var(--ink-soft); }
.journey-switch-warn { margin: 6px 0 0; color: #ffb4a2; font-size: 11.5px; line-height: 1.5; }
.plan-receipt { background: rgba(111, 233, 255, .06); border: 1px solid rgba(111, 233, 255, .22); }

.boot-screen { background: linear-gradient(145deg, #151A44 0%, #0B1030 52%, #151A44 100%); }
.boot-card { background: rgba(255, 255, 255, .06); border-color: rgba(111, 233, 255, .30); }
.boot-loader { border-color: rgba(111, 233, 255, .22); border-top-color: var(--ice); }

/* ═══════════════════════════════════════════════════════════════════
   Windows 复古弹窗套件（.win98-*）—— 仅用于系统级弹窗
   内容层不出现，遵守「复古是点缀层」的纪律
   ═══════════════════════════════════════════════════════════════════ */
.win98-mask {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 9, 34, .62);
  backdrop-filter: blur(4px);
}
.win98-mask[hidden] { display: none; }

.win98 {
  width: min(430px, 92vw);
  background: var(--win-face);
  color: #101014;
  font-size: 12px;
  border: 2px solid;
  border-color: var(--win-hi) var(--win-dk) var(--win-dk) var(--win-hi);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.win98-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 7px;
  background: linear-gradient(90deg, #0A0A8C 0%, #1084D0 100%);
  color: #fff;
  font-weight: 800;
  font-size: 11.5px;
}
.win98-bar svg { width: 12px; height: 12px; flex: 0 0 auto; }
.win98-btns { margin-left: auto; display: flex; gap: 2px; }
.win98-mini {
  width: 17px;
  height: 15px;
  display: grid;
  place-items: center;
  background: var(--win-face);
  color: #101014;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  border: 1px solid;
  border-color: var(--win-hi) var(--win-dk) var(--win-dk) var(--win-hi);
}

.win98-body { display: flex; gap: 11px; padding: 12px; background: var(--win-face); }
.win98-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--win-face);
  border: 2px solid;
  border-color: var(--win-lo) var(--win-hi) var(--win-hi) var(--win-lo);
}
.win98-icon svg { width: 22px; height: 22px; shape-rendering: crispEdges; }
.win98-text { min-width: 0; flex: 1; }
.win98-text b { display: block; font-size: 12.5px; font-weight: 800; margin-bottom: 3px; }
.win98-text p { font-size: 11.5px; line-height: 1.7; color: #3A3A48; }
.win98-field {
  margin-top: 8px;
  padding: 7px 9px;
  background: #fff;
  border: 2px solid;
  border-color: var(--win-lo) var(--win-hi) var(--win-hi) var(--win-lo);
  font-family: "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.65;
  color: #101014;
}
.win98-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 0 12px 12px; background: var(--win-face); }
.win98-actions button {
  padding: 6px 16px;
  background: var(--win-face);
  color: #101014;
  font-size: 11.5px;
  font-weight: 800;
  border: 2px solid;
  border-color: var(--win-hi) var(--win-dk) var(--win-dk) var(--win-hi);
}
.win98-actions button.go { box-shadow: inset 0 0 0 1px rgba(10, 10, 140, .45); }
.win98-taskbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 3px 6px;
  background: var(--win-face);
  border: 2px solid;
  border-color: var(--win-hi) var(--win-dk) var(--win-dk) var(--win-hi);
}
.win98-start {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--win-face);
  font-size: 11px;
  font-weight: 900;
  border: 2px solid;
  border-color: var(--win-hi) var(--win-dk) var(--win-dk) var(--win-hi);
}
.win98-clock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 3px 9px;
  background: var(--win-face);
  font-family: "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11px;
  border: 2px solid;
  border-color: var(--win-lo) var(--win-hi) var(--win-hi) var(--win-lo);
}

/* ═══════════════════════════════════════════════════════════════════
   登机牌顶栏（.chat-main-head.bp-mode ｜ 类由 chat-livefeed.js 注入）
   中栏顶栏 + 情报线整体为一张 Y2K 登机牌：
   拉丝铬卡身 · 全息扫光 · 撕票线穿孔 · 票根条码 · 色差闪断标题
   ═══════════════════════════════════════════════════════════════════ */
.chat-main-head.bp-mode {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 62px;
  border-bottom: 2px dashed rgba(190, 205, 255, .32);
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, .12) 0%,
      rgba(140, 158, 218, .17) 16%,
      rgba(43, 53, 105, .20) 38%,
      rgba(126, 144, 206, .17) 60%,
      rgba(231, 238, 255, .12) 82%,
      rgba(255, 255, 255, .09) 100%),
    linear-gradient(180deg, #1D2456 0%, #131A48 58%, #0E1440 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(111, 233, 255, .18),
    0 10px 30px rgba(4, 8, 32, .40);
  backdrop-filter: blur(16px);
}
/* 卡面屏幕噪点（静态） */
.chat-main-head.bp-mode::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--noise) repeat;
  background-size: 160px 160px;
  /* ⚠️ 顶栏 .10 太弱 —— 灰度噪点叠在 #1D2456 深底上几乎不可见（实测截图）。
     .22 是"能看出颗粒但不影响读字"的档位。 */
  opacity: .22;
  animation: acNoiseShift 11s steps(1) infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* 一闪而过的卡面扫光 */
.chat-main-head.bp-mode::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 46%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, .06) 34%,
    rgba(210, 228, 255, .34) 50%,
    rgba(167, 139, 255, .14) 66%,
    transparent 100%);
  transform: translateX(-140%) skewX(-8deg);
  animation: bpSweep 9s cubic-bezier(.55, .06, .45, .94) infinite;
}
@keyframes bpSweep {
  0%, 82% { transform: translateX(-140%) skewX(-8deg); }
  100% { transform: translateX(340%) skewX(-8deg); }
}

/* 品牌字样（纯文字，无图标） */
.chat-main-head.bp-mode .chat-main-title {
  position: relative;
  gap: 1px;
}
.chat-main-head.bp-mode .chat-main-title strong {
  font-family: var(--face-screen);
  font-size: 15px;
  letter-spacing: .26em;
  white-space: nowrap;
  background: var(--brushed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bpGlitch 9s steps(1) infinite;
}
.chat-main-head.bp-mode .chat-main-title small {
  font-family: var(--face-num);
  font-size: 8.5px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(190, 205, 255, .66);
  white-space: nowrap;
}
/* 标题色差闪断：9s 一次约 0.3s 的 glitch 突发（蜜桃/电光青错位） */
@keyframes bpGlitch {
  0%, 88.5%, 92.6%, 100% {
    text-shadow: 0 0 14px rgba(111, 233, 255, .30);
    transform: none;
  }
  89%   { text-shadow: -2.5px 0 #FF7A9C, 2.5px 0 #6FE9FF; transform: translateX(2px) skewX(-8deg); }
  89.8% { text-shadow: 2.5px 0 #FF7A9C, -2.5px 0 #6FE9FF; transform: translateX(-2px); }
  90.6% { text-shadow: -1.5px 0 #B79BFF, 1.5px 0 #FFCE8E; transform: translateX(1px) skewX(5deg); }
  91.6% { text-shadow: 2px 0 #6FE9FF, -2px 0 #FF7A9C; transform: none; }
}

/* 出行偏好 chips → 登机牌「字段」：虚线槽位，已填 = 实线高亮 */
.chat-main-head.bp-mode .chat-slot {
  border: 1px dashed rgba(190, 205, 255, .30);
  background: rgba(255, 255, 255, .05);
}
.chat-main-head.bp-mode .chat-slot.is-set {
  border-style: solid;
  border-color: rgba(111, 233, 255, .48);
  background: rgba(111, 233, 255, .10);
}

/* ═══════════════════════════════════════════════════════════════════
   顶部信息流（.faraway-livefeed）＝ 登机牌撕票联
   由 chat-livefeed.js 注入到 .chat-main-head 之后；样式归皮肤层所有
   ═══════════════════════════════════════════════════════════════════ */
.faraway-livefeed {
  position: relative;
  flex: 0 0 auto;
  height: 36px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(29, 36, 86, .72), rgba(14, 20, 58, .80));
}
.faraway-livefeed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--noise) repeat;
  background-size: 160px 160px;
  /* 走马灯文字密度高，噪点必须压到 .14 以下，否则读不清条目 */
  opacity: .14;
  pointer-events: none;
  /* 银幕信号抖动：噪点每帧落在不同像素上，观感是"屏幕在扫描"而非"贴了张噪点图"。
     ⚠️ 位移必须 ≤2px 且周期 ≥7s —— 再大再快就变成信号故障，反而廉价。 */
  background-size: 160px 160px;
  animation: acNoiseShift 9s steps(1) infinite;
}
@keyframes acNoiseShift {
  0%   { background-position: 0 0; }
  25%  { background-position: -1px 1px; }
  50%  { background-position: 1px -1px; }
  75%  { background-position: 1px 1px; }
  100% { background-position: 0 0; }
}

.lf-tag {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  font-family: var(--face-screen);
  font-size: 10px;
  letter-spacing: .24em;
  font-weight: 700;
  color: #101632;
  background: var(--brushed);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -3px 6px rgba(20, 30, 80, .4);
}
.lf-tag i {
  width: 8px;
  height: 8px;
  background: var(--rose);
  box-shadow: 0 0 10px rgba(255, 122, 156, .95);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: lfBlink 1.4s steps(1) infinite;
}
@keyframes lfBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .28; } }

.lf-view {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow: hidden;
  height: 100%;
  margin-right: 128px;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
}
.lf-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
  padding-left: 12px;
  /* 时长由 JS 按轨道实际宽度折算（--lf-dur），保证线速度恒定可读；
     兜底 96s ≈ 30px/s，勿再写回固定 38s */
  animation: lfSlide var(--lf-dur, 96s) linear infinite;
  will-change: transform;
}
.faraway-livefeed:hover .lf-track { animation-play-state: paused; }
@keyframes lfSlide { to { transform: translateX(-100%); } }

/* 单条资讯：单行、完整可读（inline-flex 按内容撑开，父级 nowrap）。
   可读性靠两点：JS 把线速度折算到 ~22px/s；文案本身控制在 20 字内。 */
.lf-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.lf-item svg { width: 12px; height: 12px; flex: 0 0 auto; shape-rendering: crispEdges; }
.lf-item b { color: var(--gold); font-weight: 900; }
.lf-item > span {
  /* 曾试 max-width + line-clamp:2 折两行 → flex 子项收缩致轨道塌宽、文字碎裂，已回退 */
  white-space: nowrap;
}

/* 票根：右端撕票联（虚线穿孔 + 像素条码 + 航段号） */
.lf-stub {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-left: 2px dashed rgba(190, 205, 255, .32);
  background: linear-gradient(180deg, rgba(16, 22, 64, .55), rgba(10, 14, 44, .78));
}
/* 资讯更新日期 + 航段号（同一行，贴条码下方） */
.lf-stub-meta { display: flex; align-items: center; gap: 7px; }
.lf-asof {
  font-family: var(--face-num);
  font-size: 7.5px;
  letter-spacing: .14em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  white-space: nowrap;
  opacity: .92;
}
.lf-barcode {
  width: 62px;
  height: 13px;
  background: repeating-linear-gradient(90deg,
    #DCE6FF 0 2px, transparent 2px 5px,
    #DCE6FF 5px 6px, transparent 6px 10px,
    #DCE6FF 10px 13px, transparent 13px 15px);
  opacity: .80;
}
.lf-code {
  font-family: var(--face-num);
  font-size: 8.5px;
  letter-spacing: .16em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(190, 205, 255, .82);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   航线牌价行情条（.faraway-fareboard）
   由 chat-fare-board.js 注入 .chat-main-head 内部（标题后、按钮前），
   是顶栏的 flex 子项 —— 下方 TRIP WIRE 挂在顶栏外面，两者互不影响。

   形态：固定 3 槽纵向堆叠，新行情从底部槽往上顶（机场航班动态牌），
   不是横向滚动。标题区改为 flex:0 0 auto，把中列剩余空间让给行情条。
   ═══════════════════════════════════════════════════════════════════ */

/* 让出空间：标题不再吃掉剩余宽度，两个按钮保持原样靠右 */
.chat-main-head.bp-mode .chat-main-title {
  flex: 0 0 auto;
  margin-right: 4px;
}

.faraway-fareboard {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  /* 3 槽 × 14px 行高 + 2 间隙 = 44px，再留 2px 余量。
     之前写 46px 而行内容是 14px+1px gap，第三行被 overflow 裁掉半行。 */
  height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  /* 右端淡出，避免与右栏按钮视觉撞车 */
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
}

/* 左侧标签：与 TRIP WIRE 的 .lf-tag 同语言（铬面小方块 + 闪烁方钻）
   ⚠️ 曾做成整块拉丝铬面（padding 0 7px + brushed 渐变），实测在 46px 高的
   行里像一块空白招牌，比行情内容本身还抢眼 —— 改为「小字标签 + 左侧竖标线」，
   保留铬面质感但把面积压到最小。 */
.fb-tag {
  flex: 0 0 auto;
  align-self: stretch;
  margin: 4px 0;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-left: 2px solid var(--gold);
  font-family: var(--face-screen);
  font-size: 8.5px;
  font-weight: 700;
  /* DIN 的字形本身偏窄，适度加字距才有"仪表刻度"的未来感 */
  letter-spacing: .22em;
  color: rgba(255, 206, 142, .95);
  background: linear-gradient(90deg, rgba(255, 206, 142, .13), transparent 78%);
  text-shadow: 0 0 8px rgba(255, 206, 142, .38);
}
.fb-tag i {
  width: 5px;
  height: 5px;
  background: var(--gold);
  box-shadow: 0 0 7px rgba(255, 206, 142, .95);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: lfBlink 2.2s steps(1) infinite;
}

.fb-stack {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}
.fb-slots {
  display: flex;
  flex-direction: column;
  gap: 1px;
  height: 100%;
  justify-content: center;
}

/* ── 由下往上翻动 ──
   每条行情自下方滑入 + 原行整体上移一格，模拟机场航班动态牌。
   stagger 让三条错峰进场，避免整列同时动造成的"整体平移"廉价感。 */
/* ── 由下往上翻动 ──
   每条行情自下方滑入 + 原行整体上移一格，模拟机场航班动态牌。
   ⚠️ 时长纪律：620ms + stagger 110ms 在 5200ms 周期里占 14%，
   实测这 0.7s 内三行都是半透明（opacity 0→1 中途），
   站在用户视角就是「每隔 5 秒糊一下」。已压到 320ms + 40ms stagger
   （占 7%），且 opacity 在 55% 处就到 1 —— 位移还在走但不透明了。 */
.fb-row {
  flex: 0 0 auto;
  /* 14px 行高 + 1px gap × 2 = 44px，装进 46px 容器；
     再高就会开始裁第三行（实测过） */
  height: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--face-screen);
  font-size: 10.5px;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  color: var(--ink-soft);
}
.fb-slots.is-turning .fb-row {
  animation: fbRise 320ms cubic-bezier(.22, .68, .24, 1) both;
}
.fb-slots.is-turning .fb-row:nth-child(1) { animation-delay: 0ms; }
.fb-slots.is-turning .fb-row:nth-child(2) { animation-delay: 40ms; }
.fb-slots.is-turning .fb-row:nth-child(3) { animation-delay: 80ms; }
@keyframes fbRise {
  from { opacity: 0; transform: translateY(7px); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0); }
}

/* ⚠️ 2026-10-08：.fb-kind（指数/航线徽标）随价格指数一起下线，整体移除。
   当时每行都挂一个「航线」描边徽标 —— 十行全是同一个词，等于十份重复噪音。
   若日后要区分「促销 / 常规」这类真实差异，再按语义重建，不要复活这个占位徽标。 */

.fb-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 航线名含中文（京→沪），走 600 字重让汉字在 DIN 数字之间不显轻 */
  font-weight: 600;
  color: #E8F0FF;
  letter-spacing: .06em;
}
.fb-date {
  flex: 0 0 auto;
  font-family: var(--face-num);
  font-size: 8.5px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: rgba(190, 205, 255, .48);
  letter-spacing: .04em;
}

.fb-price {
  flex: 0 0 auto;
  font-family: var(--face-num);
  font-size: 13px;
  font-weight: 700;
  /* 关键：等宽数字。轮换时价格从 312 变成 1029，若非等宽会左右推挤整行 */
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  letter-spacing: .01em;
  /* 铬面高光：上缘亮 + 底部余晖，模拟仪表数字打在金属上的反光 */
  text-shadow:
    0 0 10px rgba(255, 206, 142, .40),
    0 1px 0 rgba(255, 255, 255, .55);
}

/* ── 涨跌幅：中式涨红跌绿 ──
   ⚠️ 机票涨价对用户是坏消息，但用户明确选了中式惯例（与 A 股一致）。
   保持语义纯粹靠图标与箭头，不额外加"贵/便宜"文字（340px 放不下）。 */
.fb-delta {
  flex: 0 0 auto;
  font-family: var(--face-num);
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}
.fb-delta.is-up   { color: #FF4D6D; text-shadow: 0 0 9px rgba(255, 77, 109, .50); }
.fb-delta.is-down { color: #3BE8A0; text-shadow: 0 0 9px rgba(59, 232, 160, .46); }
.fb-delta.is-flat { color: rgba(190, 205, 255, .70); }
/* 无基线（首日 / prev 缺失）：中性灰 NEW，绝不编造涨跌幅。
   刻意做小做淡 —— 它是「暂无基线」的诚实标记，不是内容主体。 */
.fb-delta.is-new {
  color: rgba(190, 205, 255, .42);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .12em;
  border: 1px solid rgba(190, 205, 255, .26);
  padding: 0 2px;
  line-height: 10px;
}

/* 更新戳：右下角极小号。⚠️ 不能放 left:0（会压在第三行行情上），
   右边缘也要留出 12px —— 贴着 right:0 时会视觉上"浮"到右栏按钮下面。 */
.fb-asof {
  position: absolute;
  right: 12px;
  bottom: -1px;
  font-family: var(--face-num);
  font-size: 7px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .10em;
  color: rgba(255, 206, 142, .40);
  white-space: nowrap;
  pointer-events: none;
}

/* 窄屏 / 右栏展开时空间不足：只保留 2 槽，避免文字被压成省略号 */
@media (max-width: 1100px) {
  .fb-slots .fb-row:nth-child(3) { display: none; }
  .fb-asof { display: none; }
}
/* 移动端中列本就不显示（既有 .chat-main 隐藏规则），此处显式兜底 */
@media (max-width: 860px) {
  .faraway-fareboard { display: none; }
}

/* 尊重系统的减少动态偏好：关掉翻动，保留静态 3 条 */
@media (prefers-reduced-motion: reduce) {
  .fb-slots.is-turning .fb-row { animation: none; }
  .fb-tag i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   空态标语故障艺术（.chat-hero-slogan）
   只作用于对话页首屏标语，周期 11s 与顶栏 9s 错开，避免同频闪
   ═══════════════════════════════════════════════════════════════════ */
.chat-hero-slogan { position: relative; }
.chat-hero-slogan-en,
.chat-hero-slogan-zh { position: relative; }
.chat-hero-slogan-en {
  color: rgba(111, 233, 255, .78);
  text-shadow: 0 0 12px rgba(111, 233, 255, .28);
  animation: heroGlitch 11s steps(1) infinite;
}
.chat-hero-slogan-zh {
  color: rgba(234, 244, 255, .78);
  animation: heroGlitch 11s steps(1) infinite .28s;
}
/* 闪断瞬间掠过的色差扫描线 */
.chat-hero-slogan::after {
  content: '';
  position: absolute;
  left: -12%;
  right: -12%;
  top: 50%;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 122, 156, .95) 30%,
    rgba(234, 244, 255, .90) 50%,
    rgba(111, 233, 255, .95) 70%,
    transparent 100%);
  animation: heroStreak 11s steps(1) infinite;
}
@keyframes heroGlitch {
  0%, 55.8%, 59.4%, 100% {
    text-shadow: 0 0 12px rgba(111, 233, 255, .28);
    transform: none;
    letter-spacing: inherit;
  }
  56.2% { text-shadow: -2.5px 0 #FF7A9C, 2.5px 0 #6FE9FF; transform: translateX(2px) skewX(-7deg); }
  57%   { text-shadow: 2.5px 0 #FF7A9C, -2.5px 0 #6FE9FF; transform: translateX(-2px); }
  57.8% { text-shadow: -1.5px 0 #B79BFF, 1.5px 0 #FFCE8E; transform: translateX(1px) skewX(5deg); }
  58.6% { text-shadow: 2px 0 #6FE9FF, -2px 0 #FF7A9C; }
}
@keyframes heroStreak {
  0%, 55.9%, 59.4%, 100% { opacity: 0; transform: translateY(-9px); }
  56.2% { opacity: .95; transform: translateY(-9px); }
  57%   { opacity: .85; transform: translateY(1px); }
  57.8% { opacity: .70; transform: translateY(9px); }
  58.6% { opacity: 0; transform: translateY(12px); }
}

/* ═══════════════════════════════════════════════════════════════════
   降低动态效果偏好（无障碍）
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .skin-liquid,
  .skin-holo-edge::before,
  .chat-rail-logo,
  .chat-rail-avatar,
  .chat-send,
  .chat-composer .chat-compose::before,
  .chat-main-head.bp-mode::after,
  .chat-main-head.bp-mode .chat-main-title strong,
  .chat-hero-slogan-en,
  .chat-hero-slogan-zh,
  .chat-hero-slogan::after,
  .lf-track,
  .lf-tag i {
    animation: none !important;
  }
}