/* 基础：设计变量、页面容器、视图切换（原 index.html 第 10-102 行） */

/* ============================================================
   设计基调：iOS 液态风格（无玻璃/毛玻璃）
   白底 + 黑灰白配色；圆润胶囊、液态有机形、柔和阴影、弹性动效
 12 |    ============================================================ */
:root{
  --bg:        #FFFFFF;
  --ink:       #0B0B0F;
  --gray-1:    #6C6C70;
  --gray-2:    #8E8E93;
  --gray-3:    #B4B4BA;
  --fill:      #F2F2F7;
  --hairline:  rgba(11,11,15,.07);
  --spring:    cubic-bezier(.34,1.56,.64,1);
  --ease-out:  cubic-bezier(.25,1,.4,1);
  --font-body: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --font-num:  "Outfit", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  --danger:    #FF3B30;
  --primary:   #DADAE0;
  /* 日夜模式相关（深色时在下方 html[data-theme="dark"] 里整体换掉）：
     --card      纯白的小卡片 / 选中块底色（原来写死 #fff 的地方）
     --tint-rgb  「墨色半透明」的 rgb 分量：hover / 时间戳 / 系统提示等 rgba(11,11,15,.05) 这类浅灰
     --on-ink    铺在 --ink 实底上的文字色（黑底白字 → 深色时白底黑字）
     --paper-rgb 线下页纸面（半透明白）的 rgb 分量
     --off-bar-bg 线下页顶栏 / 底栏的磨砂底色
     --body-bg   桌面端外壳四周的留白底色 */
  --card:      #FFFFFF;
  --tint-rgb:  11,11,15;
  --on-ink:    #FFFFFF;
  --paper-rgb: 255,255,255;
  --off-bar-bg: rgba(247,244,238,.86);
  --body-bg:   #ECECEF;
  /* iOS 安全区：顶部（刘海 / 灵动岛 / 状态栏）与底部（Home 指示条）。
     桌面端与安卓普通浏览器里 env() 为 0，不影响布局 */
  --sat:       env(safe-area-inset-top, 0px);
  --sab:       env(safe-area-inset-bottom, 0px);
  /* 所有子页面顶栏距顶部的距离（改这里统一生效）。
     安全区已由 --sat 计入；不再额外 +4px，避免 opaque 状态栏下整体顶栏略微下沉 */
  --head-top:  var(--sat);
  /* 底栏（主导航 / 聊天输入栏）距屏幕底部的预留量：直接等于安全区，
     各机型 Home 指示条高度不同，用 env 原值才能真正贴底；
     以前 sab-22 再封顶 12px，部分机型底栏被提前钉住、下面露出一大块底色 */
  --foot-bottom: var(--sab);
  /* 底栏高低微调（由「显示与字体」写入 --tabbar-shift，正=偏高上移，负=偏低下移） */
  --tabbar-shift: 0px;
  /* 主导航底栏的固定高度（按钮 56px + 底部预留）。
     底栏是绝对定位钉在 .app 底部的，不参与页面 flex 排布，所以任何机型 / 比例 / 缩放下都不会被内容挤走；
     有底栏的页面用同样的值给 .view 留出 padding-bottom（见下方 .app.has-tabbar） */
  --tabbar-h: calc(56px + var(--foot-bottom) + var(--tabbar-shift, 0px));
}
/* ============================================================
   夜间模式：由设置 → 显示与字体 →「日夜显示」控制（js/17-skin.js）。
   themeMode = light | dark | auto（跟随系统 prefers-color-scheme）。
   结果写到 html[data-theme="light|dark"]。
   只改「默认配色」这一层：全局灰阶变量 + 美化变量的默认值。
   用户在美化页自己选过的颜色（applySkin 写在 html 行内 style 上的 --sk-*）、
   自定义 CSS / 聊天主题预设（#skinCustomCSS）优先级都比这里高，所以不受影响。
   ============================================================ */
html[data-theme="dark"]{
  --bg:        #000000;
  --ink:       #F2F2F7;
  --gray-1:    #A1A1A8;
  --gray-2:    #8E8E93;
  --gray-3:    #5C5C63;
  --fill:      #1C1C1E;
  --hairline:  rgba(255,255,255,.09);
  --primary:   #3A3A40;
  --card:      #2C2C2E;
  --tint-rgb:  255,255,255;
  --on-ink:    #0B0B0F;
  --paper-rgb: 28,28,30;
  --off-bar-bg: rgba(20,20,22,.86);
  --body-bg:   #050506;
  color-scheme: dark;
}
/* 深色下让原生控件（下拉框 / 输入框 / 滚动条）也跟着变暗 */
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea{ color-scheme:dark; }
/* 有壁纸的页面：夜间把壁纸整体压暗一层（伪元素盖在壁纸上、内容下）。
   主页改用「壁纸透明度 / 日夜间底色」，不再叠这层，避免顶上浇出一条黑渐变 */
html[data-theme="dark"] .view.has-wallpaper{ position:relative; isolation:isolate; }
html[data-theme="dark"] .view.has-wallpaper::before{
  content:'';
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  pointer-events:none;
  z-index:-1;
}
/* 主页：日夜都不要 ::before 压暗（日间尤甚，否则顶上像莫名渐变） */
.chat-view.has-wallpaper::before,
html[data-theme="dark"] .chat-view.has-wallpaper::before,
html[data-theme="light"] .chat-view.has-wallpaper::before{
  content:none !important;
  display:none !important;
  background:none !important;
}
/* 日间：任何带壁纸页都禁止顶部压暗层 */
html[data-theme="light"]{
  color-scheme: light;
}
html[data-theme="light"] .view.has-wallpaper::before{
  content:none !important;
  display:none !important;
  background:none !important;
}
/* 日间主页再挡一道：禁止自定义 CSS 用 inset 渐变假造顶栏压暗 */
html[data-theme="light"] .chat-view.has-wallpaper{
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* 悬停样式请包在 @media (hover: hover) and (pointer: fine) 里。
   触摸屏若写裸 :hover，第一次点击会变成「选中/悬停」，第二次才真正触发。 */
/* 高度链统一用 100vh：PWA 没有地址栏，dvh 反而跟着动态视口乱跑；
   全链 100vh + overflow:hidden，safe-area 交给 iOS 自己，顶栏不动 */
html,body{ height:100vh; overscroll-behavior:none; overflow:hidden; }
/* iOS 主屏幕全屏模式：状态栏用 black-translucent，网页（含壁纸）才能铺进刘海 / 状态栏后面。
   default / black 是实色顶栏，安全区会变成白/黑条，壁纸透不进去。
   透底时 env(safe-area-inset-*) 有值，顶栏/底栏用 --sat / --sab 避开系统手势区。
   不要给 html 写内联 backgroundColor，也不要在 iOS 上保留 theme-color——会再罩一层顶色。
   html 只跟 --bg 走即可。 */
html{ background:var(--bg); }
html, body{ background-image:none; }
body{
  margin:0;
  /* 固定页面：上下滑不会把整个网页拖出屏幕 */
  position:fixed; inset:0; width:100%;
  overflow:hidden;
  touch-action:manipulation;
  background:var(--body-bg);
  font-family:var(--font-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  align-items:center;
  justify-content:center;
}
:focus-visible{ outline:2px solid rgba(var(--tint-rgb),.55); outline-offset:2px; border-radius:6px; }
button{ font-family:inherit; }

/* ============ 应用外壳：桌面端居中收窄、移动端全屏 ============ */
.app{
  position:relative;
  width:min(440px, 100vw);
  height:min(820px, 100vh);
  background:var(--bg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  /* 注意：这里不再给 padding-top:env(safe-area-inset-top)。
     安全区改由各页面顶栏（--head-top）自己处理，这样壁纸能铺满到状态栏后面 */
}
/* 手机 / 平板竖屏：外壳必须撑满整个屏幕。
   以前 820px 的高度上限会让高屏 iPhone 上下各露出一条 body 的灰色，
   看起来就是「顶部没兼容状态栏」+「底栏下面多了一大块」 */
@media (max-width:768px){
  body{ background:var(--bg); align-items:stretch; justify-content:stretch; }
  /* .app 高度用 JS 量的可视高度（--app-h），Safari 工具栏显隐时跟着走；
     兜底 100dvh。注意不能用 height:100%：那是布局视口，
     工具栏展开时比可视区高，.app 会被顶出屏幕、底栏文字贴底被裁 */
  .app{
    /* 全链统一 100vh：PWA 无地址栏，dvh/ JS 量高反而乱跑；
       外壳只管铺满，safe-area 留给各顶栏/底栏自己和 iOS，顶栏不动 */
    position:relative;
    width:100%; height:100vh;
    min-height:100vh;
    max-width:none; max-height:none;
  }
  html{ height:100vh; }
  body{ height:100vh; min-height:100vh; }
  /* Safari 网页态 env(safe-area-inset-bottom) 经常为 0，底栏文字会贴着
     Home 指示条被裁：移动端兜底至少留 10px，standalone 下 env 更大时取 env */
  :root{ --foot-bottom:max(var(--sab), 10px); }
  /* 键盘态才用 JS 高度，避免被键盘顶起时留白 */
  html.kb-open, html.kb-open body{ height:var(--app-h, 100%); }
  html.kb-open .app{ inset:auto; top:var(--kb-top, 0px); bottom:auto; height:var(--app-h, 100%); max-height:var(--app-h, 100%); }
}
@media (min-width:769px){
  .app{
    border-radius:42px;
    box-shadow:0 34px 90px -24px rgba(0,0,0,.28), 0 10px 28px -14px rgba(0,0,0,.14);
  }
}

/* ============ 铺满页面：去掉外壳留白与圆角（显示与字体页可开关） ============ */
html.fill-page, html.fill-page body{
  width:100%; height:100vh;
  min-height:100vh;
  overflow:hidden;
}
html.fill-page body{
  background:var(--bg);
  align-items:stretch;
  justify-content:stretch;
}
html.fill-page .app{
  width:100vw;
  height:100vh;
  max-width:none; max-height:none;
}
@media (min-width:769px){
  html.fill-page .app{ border-radius:0; box-shadow:none; }
}

/* ============ 视图容器 ============ */
.view{
  flex:1;
  min-height:0;
  display:none;
}
/* 防叠层：功能页若在根节点写 display:flex，会盖过上面的 display:none，页面会永远叠在一起。
   未激活强制隐藏；激活强制 flex（!important 成对出现） */
.view:not(.active){ display:none !important; }
.view.active{
  display:flex !important;
  flex-direction:column;
  animation:viewIn .32s var(--ease-out) both;
}
/* 显示主导航的页面：底部留出底栏高度 + 用户微调，内容不被底栏盖住。
   （padding 在盒子内部，页面背景 / 壁纸仍会一直铺到底栏后面） */
.app.has-tabbar .view.active{
  padding-bottom: max(48px, var(--tabbar-h));
}
@keyframes viewIn{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}