/* ============================================================
   AZOTH · 白雾 Fog v3 —— 「FOG · ARCHIVE」
   ------------------------------------------------------------
   正典来源: Claude Design 终版样张 Fog Archive.html (2026-07-05 塔拉拍板)
   规格提炼: 计划与架构/00_当前主线/v5_UI主题大改_白雾锈湖先行_brief_v0.1.md §2
   世界语言: 高曝光黑白建筑影像做地面 → 圆角磨砂玻璃(matte, no gloss)
             从影像上结霜透光; 墨块按钮; mono 机器声 + 系统 sans 正文;
             全局灰阶, 唯一功能色=褪色锈红(deadline)。
   工程纪律: 全部规则 scope 在 [data-theme="fog"] 下, 零 !important 地毯,
             不碰其它主题; 重复行容器不用 backdrop-filter(性能);
             无 backdrop-filter 环境有实底降级。
   ============================================================ */

/* ---- 1. 世界 token 覆盖 (核心契约 + fog 私有) ---- */
[data-theme="fog"] {
  --bg: #E8E8EA;
  --bg-rgb: 232, 232, 234;
  --card-bg: #F1F1F3;              /* 传统实底消费者的降级面 */
  --text: #161616;
  --accent: #161616;               /* 本世界的签名色就是墨 */
  --accent-rgb: 22, 22, 22;
  --highlight: #98989C;
  --completed: #66666A;
  --daily: #66666A;
  --deadline: #A04A3D;             /* 唯一功能色: 褪色锈红 */
  --gold: #8A8A85;
  --shadow: 0 18px 40px rgba(18, 18, 18, 0.15), 0 0 0 0.5px rgba(30, 30, 28, 0.09);
  --mystery-1: #DCDCDE;
  --mystery-2: #C9C9CC;

  /* fog 私有 (正典 --ink2/--ink3/--line/--line2) */
  --fog-ink2: #66666A;
  --fog-ink3: #98989C;
  --fog-line: rgba(22, 22, 22, 0.22);
  --fog-line2: rgba(22, 22, 22, 0.44);
  --fog-sans: -apple-system, system-ui, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --fog-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* 磨砂玻璃配方 (正典 .fog-glass 原样) */
  --fog-glass-fill: linear-gradient(150deg, rgba(255, 255, 255, 0.42), rgba(230, 231, 234, 0.30) 52%, rgba(212, 214, 218, 0.20));
  --fog-glass-base: rgba(226, 228, 231, 0.50);
  --fog-glass-edge: rgba(255, 255, 255, 0.6);
  --fog-glass-shadow: 0 18px 40px rgba(18, 18, 18, 0.15), 0 0 0 0.5px rgba(30, 30, 28, 0.09),
                      inset 0 1.5px 0 rgba(255, 255, 255, 0.85), inset 0 -10px 22px rgba(30, 30, 28, 0.06);
}

/* ---- 2. 地面: 高曝光黑白建筑 + 颗粒 (影像层, UI 之下) ---- */
[data-theme="fog"] body {
  font-family: var(--fog-sans);
  background: transparent;
}
html[data-theme="fog"] {
  background: var(--bg);
}
[data-theme="fog"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    /* 颗粒 (扫描噪点, multiply) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E"),
    /* 洗白幕 (把影像压成残影 — v3-2 提亮: 塔拉反馈整体偏暗) */
    linear-gradient(180deg, rgba(232, 232, 234, 0.78) 0%, rgba(232, 232, 234, 0.86) 46%, rgba(232, 232, 234, 0.93) 100%),
    /* 墨鸟 · 左中 */
    url('fog-assets/ground-birds.jpg'),
    /* 白色巨构 · 全幅 */
    url('fog-assets/ground-stair.jpg');
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 150px 150px, 100% 100%, 42% auto, cover;
  background-position: 0 0, 0 0, -8% 40%, center top;
  background-blend-mode: multiply, normal, multiply, normal;
  filter: grayscale(1);
}

/* ---- 3. 排版: sans 正文 + mono 机器声 ---- */
[data-theme="fog"] h1,
[data-theme="fog"] h2,
[data-theme="fog"] h3,
[data-theme="fog"] h4 {
  font-family: var(--fog-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
[data-theme="fog"] .app-name,
[data-theme="fog"] .sys-clock,
[data-theme="fog"] .balance-pill {
  font-family: var(--fog-mono);
  letter-spacing: 0.24em;
  color: var(--fog-ink2);
}

/* ---- 4. 材质: 磨砂玻璃档案板 ---- */
/* 大面板 (卡片/浮层): 完整玻璃配方 */
[data-theme="fog"] .mini-card,
[data-theme="fog"] .sheet {
  background: var(--fog-glass-fill), var(--fog-glass-base);
  border: 1px solid var(--fog-glass-edge);
  border-radius: 22px;
  /* v3-2: 投影减重防果冻感, blur 44→24 兼顾性能(哥哥 P2) */
  box-shadow: 0 10px 26px rgba(18, 18, 18, 0.10), 0 0 0 0.5px rgba(30, 30, 28, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px) saturate(120%) brightness(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(120%) brightness(1.04);
}
/* 重复行容器 (列表 cell): 轻质半透, 不上 blur — 性能 */
[data-theme="fog"] .cell {
  background: rgba(236, 237, 239, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(18, 18, 18, 0.06);
}
/* 无 backdrop-filter 环境: 实底降级 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="fog"] .mini-card,
  [data-theme="fog"] .sheet {
    background: rgba(236, 237, 239, 0.94);
  }
}

/* ---- 5. 控件: 墨块与 hairline ---- */
[data-theme="fog"] .btn {
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: 12px;
  font-family: var(--fog-sans);
  font-weight: 600;
}
[data-theme="fog"] .btn-sec {
  background: transparent;
  color: var(--fog-ink2);
  border: 1px solid var(--fog-line2);
  border-radius: 12px;
}
[data-theme="fog"] .btn-sec.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
/* 渗漏圈: 仿 Claude / 仿 ChatGPT 模式内的一切表单控件 fog 不碰 (Émile 皮教训③) */
[data-theme="fog"] input:not(.chat-ui-mode-claude *):not(.chat-ui-mode-chatgpt *),
[data-theme="fog"] select:not(.chat-ui-mode-claude *):not(.chat-ui-mode-chatgpt *),
[data-theme="fog"] textarea:not(.chat-ui-mode-claude *):not(.chat-ui-mode-chatgpt *) {
  border-radius: 12px;
  border: 1px solid var(--fog-line);
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
}

/* ---- 6. 壳: 顶部状态条 + 底部导航 (结霜横条) ---- */
[data-theme="fog"] .status-bar,
[data-theme="fog"] .nav-bar {
  background: rgba(230, 230, 233, 0.55);
  backdrop-filter: blur(22px) saturate(105%);
  -webkit-backdrop-filter: blur(22px) saturate(105%);
  border-color: var(--fog-line);
  box-shadow: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="fog"] .status-bar,
  [data-theme="fog"] .nav-bar,
  [data-theme="fog"] .chat-input-wrap {
    background: rgba(230, 230, 233, 0.95);
  }
}

/* ---- 7. 聊天 native 皮 · v3-3 正典无边柔霜泡 ----
   塔拉红线: 气泡最丑的是"边"那个层次(描边+填充两层轮廓)。
   正典做法(CD 对话屏): 雾底影像透进来, 气泡=单层霜面 + 柔散影,
   零描边 / 零 ring / 零内嵌高光, 时间戳在泡外。 */
/* 聊天全屏自带雾底(它是覆盖层, 不能透 body, 自铺一层同款地面) */
/* !important: 该元素在 index.html 里自带内联 background:var(--bg)(7-5 DOM 实锤),
   长手属性提权才能铺上雾底影像 */
[data-theme="fog"] #character-chat-screen:not(.chat-ui-mode-chatgpt):not(.chat-ui-mode-claude) {
  background-color: var(--bg) !important;
  background-image:
    linear-gradient(180deg, rgba(232, 232, 234, 0.38) 0%, rgba(232, 232, 234, 0.55) 55%, rgba(232, 232, 234, 0.72) 100%),
    url('fog-assets/ground-birds.jpg'),
    url('fog-assets/ground-stair.jpg') !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: 100% 100%, 58% auto, cover !important;
  background-position: 0 0, -6% 46%, center top !important;
  background-blend-mode: normal, multiply, normal !important;
}
[data-theme="fog"] .chat-messages {
  font-family: var(--fog-sans);
  background: transparent;
}
/* v3-10: 雾底隔着消息层再虚化一档 —— 影像不抢字, 像结霜玻璃后的景 */
[data-theme="fog"] #character-chat-messages:not(.chat-ui-mode-chatgpt *):not(.chat-ui-mode-claude *) {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* !important 说明: 默认皮存在跟随系统深色的 !important 规则 +
   拓扑内室自定义气泡 CSS 注入在更后位置, fog 作用域内必须提权才能赢。
   仅在 fog 作用域内使用, 不外溢。 */
[data-theme="fog"] .chat-message-bubble:not(.chat-ui-mode-chatgpt *):not(.chat-ui-mode-claude *) {
  background: rgba(247, 248, 249, 0.78) !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(18, 18, 18, 0.05) !important;
  backdrop-filter: blur(28px) saturate(118%);
  -webkit-backdrop-filter: blur(28px) saturate(118%);
  border-radius: 20px !important;
  color: var(--text) !important;
}
[data-theme="fog"] .chat-message-bubble[data-msg-role="assistant"]:not(.chat-ui-mode-chatgpt *):not(.chat-ui-mode-claude *) {
  border-radius: 20px 20px 20px 6px !important;
}
[data-theme="fog"] .chat-message-bubble[data-msg-role="user"]:not(.chat-ui-mode-chatgpt *):not(.chat-ui-mode-claude *) {
  background: rgba(219, 221, 225, 0.62) !important;
  border-radius: 20px 20px 6px 20px !important;
}
[data-theme="fog"] #character-chat-messages:not(.chat-ui-mode-chatgpt *):not(.chat-ui-mode-claude *) {
  background: transparent !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="fog"] .chat-message-bubble { background: rgba(242, 243, 245, 0.95); }
  [data-theme="fog"] .chat-message-bubble[data-msg-role="user"] { background: rgba(224, 226, 230, 0.95); }
}
[data-theme="fog"] .chat-date-separator {
  font-family: var(--fog-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fog-ink3);
}
[data-theme="fog"] .chat-input-wrap:not(.chat-ui-mode-claude *):not(.chat-ui-mode-chatgpt *) {
  background: rgba(248, 249, 250, 0.78);
  border: none;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(18, 18, 18, 0.09);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}
[data-theme="fog"] .chat-input-wrap:not(.chat-ui-mode-claude *):not(.chat-ui-mode-chatgpt *) input,
[data-theme="fog"] .chat-input-wrap:not(.chat-ui-mode-claude *):not(.chat-ui-mode-chatgpt *) textarea {
  background: transparent;
  border: none;
}

/* (7b 已撤: ChatGPT/Claude 等独立外观模式皮 fog 一律不碰 —— 塔拉指令) */

/* ---- 7c. 默认皮输入区 · 正典化 (v3-7) ----
   底部控制台白板+输入框黑边=突兀源头, 换成 CD 对话屏的渐隐+无边霜条 */
/* v3-13: 底部容器隐形(无白带), 输入行内的一切按钮/结构原样不动(塔拉指令) */
[data-theme="fog"] #character-chat-screen:not(.chat-ui-mode-chatgpt):not(.chat-ui-mode-claude)>div:last-child {
  background: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
}
[data-theme="fog"] #character-chat-input:not(.chat-ui-mode-chatgpt *):not(.chat-ui-mode-claude *) {
  background: rgba(248, 249, 250, 0.82) !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(18, 18, 18, 0.08) !important;
  color: var(--text) !important;
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}
[data-theme="fog"] #character-chat-input:not(.chat-ui-mode-chatgpt *):not(.chat-ui-mode-claude *):focus {
  border: none !important;
  box-shadow: 0 8px 22px rgba(18, 18, 18, 0.12) !important;
  outline: none !important;
}

/* ---- 7d. 图书馆/书架 · CD 书架化 (v3-14) ----
   塔拉: 悬浮白卡墙丑爆。正典=hairline 行 + 灰阶封面 + mono 数据, 零卡片。
   .bsf-list-row 原规则是 !important 地毯, fog 同权更高特异性压回。 */
[data-theme="fog"] #library-screen {
  background-color: var(--bg) !important;
  background-image:
    linear-gradient(180deg, rgba(232, 232, 234, 0.55) 0%, rgba(232, 232, 234, 0.72) 55%, rgba(232, 232, 234, 0.86) 100%),
    url('fog-assets/ground-stair.jpg') !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
  background-position: 0 0, center top !important;
}
[data-theme="fog"] .bsf-list-row {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 2px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--fog-line);
}
[data-theme="fog"] .bsf-list-row:active {
  transform: none;
  opacity: 0.7;
}
[data-theme="fog"] .bsf-list-cover {
  border-radius: 12px;
  filter: grayscale(1) contrast(1.05);
  box-shadow: none;
}
[data-theme="fog"] .bsf-list-title {
  font-family: var(--fog-sans);
  font-weight: 700;
  color: var(--text);
}
[data-theme="fog"] .bsf-list-author {
  color: var(--fog-ink2);
}
[data-theme="fog"] .bsf-tag {
  font-family: var(--fog-mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  background: transparent;
  border: 1px solid var(--fog-line);
  border-radius: 4px;
  color: var(--fog-ink2);
}
[data-theme="fog"] .bsf-list-desc {
  color: var(--fog-ink2);
}
[data-theme="fog"] .bsf-list-meta {
  font-family: var(--fog-mono);
  font-size: 10px;
  color: var(--fog-ink3);
}

/* ---- 8. 影像纪律: 装饰图入雾 (灰阶残影) ---- */
[data-theme="fog"] .book-cover img,
[data-theme="fog"] .bookshelf-cover img {
  filter: grayscale(1) contrast(1.05);
}

/* ---- 9. 动效: 显影进场 (正典 fa-develop) ---- */
@keyframes fog-develop {
  0%   { opacity: 0; filter: blur(14px); }
  55%  { filter: blur(3px); }
  100% { opacity: 1; filter: blur(0); }
}
[data-theme="fog"] .view.active {
  animation: fog-develop 0.5s ease both;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="fog"] .view.active { animation: none; }
}