/* ═══ PWA 0703 装修：奶油绿玻璃 · 小字 · 留白 · 按下有反馈 ═══
     原则（跟着那篇笔记学的）：风格统一、耐看和谐比好看重要、细节交互给反馈。 */
  :root{
    --bg:#F0F2E9; --me:#E1FFC7; --ai:#FDFDF9; --txt:#222B19; --dim:#99A08A;
    --accent:#7CB454; --accent-d:#639A3D; --card:#FDFDF9;
    --glass:rgba(255,255,255,.32); --glass-bd:rgba(255,255,255,.55);
    --shadow:0 2px 12px rgba(56,70,40,.09);
    --mono:ui-monospace,'SF Mono','Menlo',monospace;
    /* 墨色三档 + 浅灰字：全站文字色都从这四个走 */
    --ink-1:#3C4A2C; --ink-2:#5D6A45; --ink-3:#8A9270; --faint:#B7BFA5;
    /* 中性底/分隔线的 RGB 三元组，配不同透明度用 rgba(var(--neu),.12) */
    --neu:150,160,130; --line:120,130,100;
    /* 我方气泡、对勾、禁用态、选中高亮 */
    --me-bub:rgba(225,255,199,.78); --me-txt:#1E2B12;
    --tick:#7CAC52; --tick-dim:#AECB92; --dis:#C6D0B5;
    --hl:#E3F2CD; --hl-soft:#EDF3E0;
    --send-sh:0 3px 12px rgba(110,160,70,.32); --today:rgba(124,180,84,.7);
    --drawer-bg:rgba(248,250,243,.86); --head-bg:rgba(240,242,233,.78); --call-bg:rgba(240,242,233,.72);
    --wave:#9DBB7A; --chip-pin:122,141,86; --chip-pin-t:#54683A;
  }
  /* ── 水青蓝：跟水面壁纸配套的一档，抽屉「外观」一键切换（0715 她提议的） ── */
  body.blue{
    --bg:#EAF1F2; --me:#C7ECF6; --ai:#FBFDFD; --txt:#1C2B2F; --dim:#8BA0A4;
    --accent:#4FA8B8; --accent-d:#3D8A99; --card:#FBFDFD;
    --shadow:0 2px 12px rgba(36,58,66,.09);
    --ink-1:#2E4449; --ink-2:#46626A; --ink-3:#7A9298; --faint:#A6BEC3;
    --neu:128,152,158; --line:100,125,132;
    --me-bub:rgba(199,236,246,.80); --me-txt:#0F262C;
    --tick:#4B9FB0; --tick-dim:#96C6D1; --dis:#B7CFD5;
    --hl:#D8EDF2; --hl-soft:#E5F2F5;
    --send-sh:0 3px 12px rgba(60,150,170,.32); --today:rgba(79,168,184,.7);
    --drawer-bg:rgba(243,249,250,.86); --head-bg:rgba(233,241,243,.78); --call-bg:rgba(233,241,243,.72);
    --wave:#7ABBC9; --chip-pin:74,138,155; --chip-pin-t:#3A6675;
  }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html{ background:var(--bg) url('/bg-chat.jpg?v=20250715') center/cover no-repeat; }
  html,body{ margin:0; height:100%; height:100vh; height:100dvh; color:var(--txt);
    font:12.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB",sans-serif;
    font-variant-numeric:tabular-nums; overflow:hidden; }
  html{ height:calc(100vh + env(safe-area-inset-bottom, 0px)); height:calc(100dvh + env(safe-area-inset-bottom, 0px)); }
  body{ display:flex; flex-direction:column; position:fixed; inset:0; height:100vh; height:100dvh;
    background:transparent; }
  /* 顶部淡压暗：状态栏延伸到壁纸后面（black-translucent）之后，白色的时间/电量要靠这层才读得清 */
  body::before{ content:''; position:fixed; top:0; left:0; right:0; height:110px; z-index:1; pointer-events:none;
    background:linear-gradient(to bottom, rgba(28,48,54,.30), rgba(28,48,54,0)); }

  /* ── 按下反馈：iOS 那种轻微一缩 ── */
  #menu,.ic,#send,.ibtn,.md-arw,.pp-x,.pp-send,.mo-rsend,#pwbtn,.who,.pp-add{
    transition:transform .12s ease, background .18s ease, opacity .18s ease; }
  #menu:active,.ic:active,#send:active,.ibtn:active,.md-arw:active,.pp-x:active,
  .pp-send:active,.mo-rsend:active,#pwbtn:active,.pp-add:active{ transform:scale(.93); }
  .who:active{ transform:scale(.97); }
  .di{ transition:transform .12s ease, background .18s ease; }
  .di:active{ transform:scale(.975); background:var(--hl-soft); }
  .ob-sh,.ob-card,.md-cell.has{ transition:transform .12s ease; }
  .ob-sh:active,.ob-card:active,.md-cell.has:active{ transform:scale(.985); }

  /* ── 顶栏：悬浮在消息流上方，气泡从玻璃底下滑过 ── */
  #top{ position:fixed; top:0; left:0; right:0; display:flex; align-items:center; gap:9px; background:transparent;
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px; z-index:5; pointer-events:none; }
  #top>*{ pointer-events:auto; }
  #menu,.ic{ width:40px; height:40px; border-radius:50%; flex:0 0 auto; cursor:pointer; user-select:none;
    color:var(--ink-1); display:flex; align-items:center; justify-content:center;
    background:var(--glass); backdrop-filter:blur(24px) saturate(170%); -webkit-backdrop-filter:blur(24px) saturate(170%);
    border:1px solid var(--glass-bd); box-shadow:var(--shadow); }
  #menu svg,.ic svg{ width:19px; height:19px; display:block; }
  .who{ display:flex; align-items:center; margin:0 auto; border-radius:21px; padding:6px 22px;
    background:var(--glass); backdrop-filter:blur(24px) saturate(170%); -webkit-backdrop-filter:blur(24px) saturate(170%);
    border:1px solid var(--glass-bd); box-shadow:var(--shadow); }
  .who .meta{ display:flex; flex-direction:column; align-items:center; gap:4px; line-height:1; }
  .who .nm{ font-weight:600; font-size:14.5px; letter-spacing:.4px; }
  .who .sub{ font-size:10.5px; color:var(--dim); letter-spacing:.4px; display:flex; align-items:center; gap:5px; }
  .sdot{ width:5.5px; height:5.5px; border-radius:50%; background:var(--faint); flex:0 0 auto; }
  .sdot.on{ background:var(--accent); }
  .sdot.busy{ background:#E0A23C; animation:pulse 1.2s ease-in-out infinite; }
  .sdot.warn{ background:#D9694A; animation:pulse 1.1s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
  .who{ cursor:pointer; }  /* 点名字胶囊 → 用量弹窗（额度并进来，右边只留 ＋，胶囊才居得了中） */
  #uxwarn{ font-size:9.5px; line-height:1; }  /* 上下文膨胀时才冒出来的小闪电 */

  /* ── 消息流：占满整屏，上下留出玻璃栏的位置，滚动时穿过毛玻璃 ── */
  #log{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:9px;
    padding:calc(62px + env(safe-area-inset-top)) 12px calc(64px + env(safe-area-inset-bottom)); }
  #log>*{ flex-shrink:0; }
  .msg{ max-width:80%; padding:8px 12px; border-radius:18px; white-space:pre-wrap;
    word-break:break-word; font-size:12.5px; line-height:1.5; box-shadow:0 1px 1px rgba(56,70,40,.05); }
  /* 气泡半透明：让壁纸透出来。底图本来就淡，不用 blur 也读得清，还省 iOS 的合成开销 */
  .msg.me{ align-self:flex-end; background:var(--me-bub); border-bottom-right-radius:6px; color:var(--me-txt); }
  .msg.ai{ align-self:flex-start; background:rgba(253,253,249,.78); border-bottom-left-radius:6px; }
  /* 气泡里的附件：图缩略图铺一排，文件是个小块 */
  .batts{ display:flex; flex-wrap:wrap; gap:6px; }
  .msg .batts:not(:last-child){ margin-bottom:6px; }
  .batt-img{ max-width:190px; max-height:230px; border-radius:12px; display:block; cursor:pointer; object-fit:cover; }
  .batt-file{ display:flex; align-items:center; gap:8px; max-width:220px; padding:8px 11px; border-radius:12px;
    text-decoration:none; color:inherit; background:rgba(255,255,255,.42); border:1px solid var(--glass-bd); }
  .msg.me .batt-file{ background:rgba(255,255,255,.4); }
  .batt-file .fi{ font-size:20px; flex:0 0 auto; }
  .batt-file .fn{ font-size:12px; line-height:1.3; word-break:break-all; overflow:hidden; }
  #imgview{ position:fixed; inset:0; z-index:60; background:rgba(20,24,16,.92); display:flex; align-items:center; justify-content:center; padding:20px; }
  #imgview[hidden]{ display:none; }
  #imgview img{ max-width:100%; max-height:100%; border-radius:8px; object-fit:contain; }
  .bmeta{ float:right; margin:9px -3px -4px 5px; white-space:nowrap; user-select:none;
    display:inline-flex; align-items:center; gap:2px; }
  .btime{ font-size:8.5px; font-family:var(--mono); color:var(--faint); letter-spacing:.2px; }
  .msg.me .btime{ color:var(--tick); }
  .ticks{ display:inline-flex; align-items:center; color:var(--tick); }
  .ticks svg{ width:13px; height:8px; display:block; }
  .ticks.sending{ color:var(--tick-dim); }
  .time{ align-self:center; font-size:10px; font-family:var(--mono); color:var(--ink-3);
    letter-spacing:.5px; margin:5px 0 1px; background:rgba(255,255,255,.42);
    padding:2px 9px; border-radius:9px; }
  /* 头像行：微信那样 AI 在左她在右，头像贴着气泡 */
  .mrow{ display:flex; gap:7px; align-items:flex-start; max-width:88%; }
  .mrow.me{ align-self:flex-end; }
  .mrow.ai{ align-self:flex-start; }
  .mrow .mcol{ display:flex; flex-direction:column; gap:3px; min-width:0; align-items:flex-start; }
  .mrow.me .mcol{ align-items:flex-end; }
  .mrow .msg{ max-width:100%; }
  .avatar{ width:28px; height:28px; border-radius:50%; flex:0 0 auto; margin-top:1px;
    box-shadow:0 1px 3px rgba(56,70,40,.13); background:#fff; }
  /* 群聊：发言人小签名放整行上方、缩进到气泡起点——头像和气泡正对成一行 */
  .aiwho{ align-self:flex-start; font-size:10px; font-weight:600; letter-spacing:.3px;
    margin:1px 0 -6px 40px; opacity:.92; }
  /* 用量弹窗里的模型/档位切换（仅一对一） */
  .ux-setrow{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
  .ux-setlab{ font-size:12px; color:var(--ink-3); flex:0 0 28px; }
  .ux-seg{ display:flex; gap:6px; flex-wrap:wrap; }
  .ux-pill{ font-size:11.5px; padding:4.5px 12px; border-radius:13px; cursor:pointer; user-select:none;
    background:rgba(var(--neu),.12); color:var(--ink-2); transition:transform .12s ease, background .18s ease; }
  .ux-pill:active{ transform:scale(.93); }
  .ux-pill.on{ background:var(--accent); color:#fff; font-weight:600; }

  /* ── 工具合并条 ──
     底色要够实：壁纸是有纹理的照片（0715 换水面图），太透的灰底会溶进去看不清 */
  .tool{ align-self:flex-start; max-width:88%; font-size:11px; color:var(--ink-3);
    background:rgba(255,255,255,.56); padding:4px 12px; border-radius:12px;
    display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .tool .g{ font-size:10.5px; }
  .tool b{ color:var(--ink-2); font-weight:600; }

  /* ── thinking：底色挂在容器上，收起是小胶囊，展开头和正文连成一体 ── */
  .think{ align-self:flex-start; max-width:88%; background:rgba(253,253,249,.72); border-radius:12px; }
  .think-h{ font-size:11.5px; color:var(--ink-2); font-style:italic; cursor:pointer; user-select:none;
    display:flex; align-items:center; gap:5px; padding:5px 12px; }
  .think-h .dot{ width:4.5px; height:4.5px; border-radius:50%; background:var(--faint); }
  .think-tog{ font-size:9px; color:var(--faint); }
  .think-b{ margin:0 12px; padding:6px 0 9px; border-top:1px dashed rgba(var(--line),.22);
    color:var(--ink-2); font-size:12px;
    font-style:italic; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
  .think.collapsed .think-b{ display:none; }

  /* ── emoji 反应 + 引用回复 ── */
  .msg{ position:relative; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
  /* 反应角标：跟时间戳一个待遇——浮在气泡右下角、贴在时间左边的一枚淡底小片，同 emoji 合并计数 */
  .reacts{ float:right; margin:6px -1px -4px 7px; padding:2.5px 7px 3px; font-size:11px; line-height:1;
    background:rgba(120,140,90,.13); border-radius:9px; white-space:nowrap; }
  .msg.me .reacts{ background:rgba(255,255,255,.42); }
  /* 气泡内引用块：细左线+被引的人+摘录一行，点了跳回原消息 */
  .q{ display:block; margin:1px 0 6px; padding:3px 9px 4px; border-left:2.5px solid var(--accent);
    background:rgba(255,255,255,.5); border-radius:5px 10px 10px 5px; cursor:pointer; }
  .q b{ display:block; font-size:10.5px; color:var(--accent); font-weight:600; line-height:1.3; }
  .q i{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-2); line-height:1.4;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .msg.flash{ animation:mflash 1.4s ease; }
  @keyframes mflash{ 15%,55%{ outline:2.5px solid rgba(150,170,115,.6); outline-offset:2px; } }
  /* 长按弹出的反应条：一排 emoji + 引用/复制 */
  #rbar{ position:absolute; z-index:40; display:flex; align-items:center; gap:1px;
    background:rgba(255,255,255,.94); backdrop-filter:blur(24px) saturate(170%); -webkit-backdrop-filter:blur(24px) saturate(170%);
    border:1px solid var(--glass-bd); border-radius:20px; padding:4px 7px; box-shadow:var(--shadow);
    animation:rpop .15s ease; }
  @keyframes rpop{ from{ opacity:0; transform:scale(.88) translateY(5px); } }
  #rbar .re{ font-size:17px; padding:4px 5px; border-radius:12px; cursor:pointer; transition:transform .1s ease; }
  #rbar .re:active{ transform:scale(1.3); }
  #rbar .re.on{ background:rgba(150,170,115,.22); }
  #rbar .rsep{ width:1px; height:18px; background:rgba(var(--line),.28); margin:0 5px; }
  #rbar .rplus{ font-size:14px; font-weight:600; color:var(--ink-2); padding:5px 6px; }
  #rbar .rin{ border:none; outline:none; background:transparent; font:inherit; font-size:13px;
    width:120px; padding:4px 6px; color:var(--txt); }
  #rbar .ract{ font-size:11.5px; font-weight:600; color:var(--ink-2); padding:5px 7px; border-radius:10px; cursor:pointer; }
  #rbar .ract:active{ transform:scale(.93); }
  /* 引用预览条：待发送的引用挂在输入区顶上，✕ 取消 */
  #qbar{ display:flex; align-items:center; gap:8px; margin:0 2px 8px; padding:6px 12px;
    background:rgba(255,255,255,.82); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid var(--glass-bd); border-radius:14px; box-shadow:var(--shadow);
    font-size:11.5px; color:var(--ink-2); }
  #qbar .qtx{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #qbar .qx{ flex:0 0 auto; font-size:13px; color:var(--faint); padding:2px 5px; cursor:pointer; }

  /* ── 输入栏：悬浮玻璃胶囊，固定在底部，消息从底下穿过 ── */
  /* absolute 挂在 body(fixed) 上，不用 fixed：iOS 26 弹键盘时对 fixed 底栏的渲染位置和
     触摸命中区是分家的(画在键盘上方、命中区留在滚动前坐标)，absolute 相对 body 盒子算，
     两者永远一致；键盘态由 JS 把 body 高度钉成可视视口高，bar 就自然贴在键盘上方 */
  #bar{ position:absolute; bottom:0; left:0; right:0; z-index:5; display:flex; flex-direction:column; align-items:stretch;
    background:transparent; padding:6px 10px calc(8px + env(safe-area-inset-bottom)); }
  .barrow{ display:flex; align-items:flex-end; gap:8px; }
  /* 附件托盘：曲别针选好的图/文件先挂这儿，能删，点发送才连同文字一起发 */
  #atray{ display:flex; flex-wrap:wrap; gap:8px; padding:4px 2px 9px; }
  #atray[hidden]{ display:none; }
  .achip{ position:relative; width:56px; height:56px; border-radius:12px; overflow:hidden;
    background:rgba(255,255,255,.5); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid var(--glass-bd); box-shadow:var(--shadow); flex:0 0 auto; }
  .achip img{ width:100%; height:100%; object-fit:cover; display:block; }
  .achip.file{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:5px; box-sizing:border-box; }
  .achip.file .fi{ font-size:20px; line-height:1; }
  .achip.file .fn{ font-size:8.5px; line-height:1.15; max-height:2.3em; overflow:hidden; word-break:break-all; text-align:center; opacity:.75; }
  .achip .rm{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:rgba(40,48,30,.82);
    color:#fff; font-size:13px; line-height:18px; text-align:center; cursor:pointer; z-index:2; }
  body.kb #bar{ padding-bottom:8px; }
  body.kb #log{ padding-bottom:64px; }
  /* 引用预览条把输入区撑高了一截：消息流底部留白同步加高 */
  body.quoting #log{ padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
  body.kb.quoting #log{ padding-bottom:104px; }
  body.group #log{ padding-bottom:calc(102px + env(safe-area-inset-bottom)); }
  body.kb.group #log{ padding-bottom:102px; }
  .ibtn{ flex:0 0 auto; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    color:var(--ink-2); cursor:pointer; user-select:none; border-radius:50%;
    background:rgba(255,255,255,.88);
    border:1px solid var(--glass-bd); box-shadow:var(--shadow); }
  .ibtn svg{ width:19px; height:19px; }
  .pill{ flex:1; display:flex; align-items:flex-end; border-radius:22px; padding:0 8px 0 15px;
    background:rgba(255,255,255,.88);
    border:1px solid var(--glass-bd); box-shadow:var(--shadow); }
  #i{ flex:1; resize:none; max-height:130px; padding:10px 0; border:none; background:transparent;
    color:var(--txt); font:inherit; font-size:12.5px; line-height:1.4; outline:none; }
  /* 群聊 @ 点名条：输入框上方三个可复选的小胶囊，点谁就是对谁说，不用手打 @ */
  #mbar{ display:flex; gap:7px; padding:0 4px 8px; }
  #mbar[hidden]{ display:none; }
  .mpill{ font-size:11px; font-weight:600; padding:5px 13px; border-radius:14px; cursor:pointer; user-select:none;
    background:var(--glass); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid var(--glass-bd); color:var(--ink-2); box-shadow:var(--shadow);
    transition:transform .12s ease, background .18s ease, color .18s ease; }
  .mpill:active{ transform:scale(.93); }
  .mpill.on{ color:#fff; border-color:transparent; }
  #i::placeholder{ color:var(--faint); }
  #send{ flex:0 0 auto; width:40px; height:40px; border:none; border-radius:50%;
    background:var(--accent); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:var(--send-sh); }
  #send:disabled{ background:var(--dis); box-shadow:none; }
  #send svg{ width:19px; height:19px; }

  /* ── 侧边抽屉：玻璃 ── */
  #scrim{ position:fixed; inset:0; background:rgba(30,40,20,.30); z-index:30; opacity:0;
    pointer-events:none; transition:opacity .22s; }
  #scrim.on{ opacity:1; pointer-events:auto; }
  #drawer{ position:fixed; top:0; left:0; bottom:0; width:76%; max-width:300px;
    background:linear-gradient(to bottom, rgba(28,48,54,.20), rgba(28,48,54,0) 120px), var(--drawer-bg);
    backdrop-filter:blur(28px) saturate(160%); -webkit-backdrop-filter:blur(28px) saturate(160%);
    z-index:31; transform:translateX(-102%); transition:transform .26s cubic-bezier(.32,.72,.28,1);
    display:flex; flex-direction:column; box-shadow:2px 0 24px rgba(40,50,25,.14);
    padding-top:env(safe-area-inset-top); }
  #drawer.on{ transform:translateX(0); }
  .dh{ font-size:22px; font-style:italic; font-weight:600; color:var(--ink-1); letter-spacing:1px; padding:22px 24px 8px; }
  .dh small{ display:block; font-size:10px; font-style:normal; font-weight:500; color:var(--dim);
    letter-spacing:2.5px; margin-top:3px; }
  .dlist{ flex:1; overflow-y:auto; padding:8px 12px calc(16px + env(safe-area-inset-bottom)); }
  .grp{ font-size:10px; color:var(--faint); letter-spacing:2.5px; padding:15px 13px 5px; font-weight:600; }
  .di{ display:flex; align-items:center; gap:12px; padding:10.5px 13px; border-radius:12px;
    cursor:pointer; color:var(--ink-1); font-size:13.5px; user-select:none; }
  .di .dic{ width:20px; text-align:center; font-size:15px; opacity:.9; }
  .di.on{ background:var(--hl); color:var(--ink-1); font-weight:600; }
  .di .ndot{ width:7px; height:7px; border-radius:50%; background:#C46B8A; margin-left:auto; flex:0 0 auto; }
  .sep{ height:1px; background:rgba(var(--line),.13); margin:9px 14px; }

  /* ── toast ── */
  #toast{ position:fixed; left:50%; bottom:calc(78px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(10px);
    background:rgba(40,50,28,.90); backdrop-filter:blur(8px); color:#F3F6EC; font-size:12.5px; padding:9px 17px; border-radius:20px;
    z-index:40; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; max-width:80%; text-align:center; }
  #toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ── 登录 ── */
  #login{ position:fixed; inset:0; z-index:50; background:var(--bg);
    display:flex; align-items:center; justify-content:center; padding:24px; }
  #login[hidden]{ display:none; }
  .loginbox{ display:flex; flex-direction:column; gap:13px; width:100%; max-width:250px;
    background:var(--glass); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border:1px solid var(--glass-bd); box-shadow:var(--shadow); border-radius:24px; padding:28px 22px; }
  .loginbox .lt{ text-align:center; font-size:27px; font-style:italic; font-weight:600; color:var(--ink-1);
    letter-spacing:1px; margin-bottom:2px; }
  #pw{ padding:12px 14px; border-radius:14px; border:none; background:rgba(255,255,255,.75);
    color:var(--txt); font:inherit; font-size:15px; outline:none; text-align:center; }
  #pwbtn{ padding:12px; border:none; border-radius:14px; background:var(--accent);
    color:#fff; font:inherit; font-weight:600; font-size:14.5px; cursor:pointer;
    box-shadow:var(--send-sh); }
  #pwerr{ text-align:center; font-size:12px; color:#C9663C; min-height:15px; }

  /* ── 二级页通用：头部玻璃条 + 页面底色 ── */
  #picpage,#momentspage,#moodpage,#feelpage,#obpage,#termpage{ position:fixed; inset:0; z-index:45;
    background:var(--bg); display:flex; flex-direction:column; }
  #picpage[hidden],#momentspage[hidden],#moodpage[hidden],#feelpage[hidden],#obpage[hidden],#termpage[hidden]{ display:none; }
  #termframe{ flex:1; width:100%; border:0; background:#000; }
  .pp-head{ display:flex; align-items:center; gap:11px;
    padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
    background:linear-gradient(to bottom, rgba(28,48,54,.22), rgba(28,48,54,0)), var(--head-bg);
    backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); }
  .pp-x{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:19px; color:var(--ink-2); cursor:pointer; user-select:none;
    background:var(--glass); border:1px solid var(--glass-bd); box-shadow:var(--shadow); }
  .pp-title{ font-weight:600; font-size:15px; color:var(--ink-1); letter-spacing:.3px; }
  .pp-send{ margin-left:auto; font-size:13.5px; font-weight:600; color:#fff; background:var(--accent);
    cursor:pointer; padding:7px 17px; border-radius:18px; user-select:none; box-shadow:var(--send-sh); }
  .pp-send.off{ background:var(--dis); pointer-events:none; box-shadow:none; }

  /* ── 传图页 ── */
  .pp-body{ flex:1; overflow-y:auto; padding:16px 14px calc(22px + env(safe-area-inset-bottom)); }
  .pp-hint{ font-size:12px; color:var(--dim); line-height:1.6; margin-bottom:15px; }
  .pp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .pp-cell{ position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; background:#fff;
    box-shadow:0 1px 4px rgba(50,60,35,.08); }
  .pp-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pp-cell .rm{ position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%;
    background:rgba(30,40,20,.55); backdrop-filter:blur(6px); color:#fff; font-size:14px; line-height:1;
    display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .pp-add{ display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:1;
    border-radius:14px; border:1.5px dashed var(--dis); color:var(--ink-3); font-size:12px; cursor:pointer;
    text-align:center; gap:3px; line-height:1.3; }
  .pp-add .plus{ font-size:23px; color:var(--faint); line-height:1; }
  .pp-status{ font-size:12.5px; color:var(--ink-2); margin-top:18px; min-height:18px; text-align:center; line-height:1.5; }

  /* ── 朋友圈 ── */
  .mo-body{ flex:1; overflow-y:auto; padding:16px 14px calc(24px + env(safe-area-inset-bottom)); }
  .mo-hint{ font-size:12px; color:var(--dim); line-height:1.6; margin-bottom:16px; text-align:center; }
  .mo-empty{ text-align:center; color:var(--dim); font-size:13px; margin-top:60px; line-height:1.8; white-space:pre-wrap; }
  .mo-day{ text-align:center; font-size:10.5px; font-family:var(--mono); color:var(--faint);
    letter-spacing:.5px; margin:8px 0 13px; }
  .mo-day:first-child{ margin-top:0; }
  .mo-card{ background:var(--card); border-radius:18px; padding:14px 16px 13px; margin-bottom:12px;
    box-shadow:0 1px 2px rgba(50,60,35,.05), 0 4px 16px rgba(50,60,35,.04); }
  .mo-top{ display:flex; align-items:baseline; gap:8px; }
  .mo-mood{ font-size:16px; line-height:1.2; }
  .mo-name{ font-weight:700; color:var(--accent-d); font-size:13px; }
  .mo-time{ margin-left:auto; font-size:10px; font-family:var(--mono); color:var(--dim); white-space:nowrap; }
  .mo-text{ margin-top:6px; font-size:12.5px; line-height:1.65; color:var(--txt); white-space:pre-wrap; word-break:break-word; }
  .mo-replies{ margin-top:11px; border-top:1px dashed rgba(var(--line),.18); padding-top:10px;
    display:flex; flex-direction:column; gap:7px; }
  .mo-reply{ font-size:12.5px; line-height:1.55; }
  .mo-reply .rn{ font-weight:600; margin-right:5px; }
  .mo-reply.her .rn{ color:#C46B8A; }
  .mo-reply.me .rn{ color:var(--accent-d); }
  .mo-reply .rt{ color:var(--txt); white-space:pre-wrap; word-break:break-word; }
  .mo-rbar{ display:flex; gap:7px; margin-top:11px; }
  .mo-rin{ flex:1; border:none; background:rgba(var(--neu),.10); border-radius:19px; padding:8px 14px;
    font-size:13px; font-family:inherit; color:var(--txt); outline:none; }
  .mo-rin::placeholder{ color:var(--faint); }
  .mo-rin:focus{ background:rgba(var(--neu),.15); }
  .mo-rsend{ border:none; background:var(--accent); color:#fff; font-weight:600; font-size:12.5px;
    padding:0 16px; border-radius:19px; cursor:pointer; }
  .mo-rsend:disabled{ background:var(--dis); }

  /* ── 状态位心情：不占地方的一枚小彩字，前面一个细分隔点（色块会把胶囊撑得难看） ── */
  .smood{ display:inline-flex; align-items:center; font-weight:600; line-height:1; }
  .smood::before{ content:'·'; color:var(--faint); margin:0 5px; font-weight:400; }
  .smtxt{ max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .5s ease; }

  /* ── 用量弹窗 ── */
  .flipwarn{ align-self:center; max-width:88%; margin:6px auto; padding:9px 13px; border-radius:12px;
    background:#F6E6DD; color:#8A3A1C; font-size:12px; line-height:1.55; text-align:center; }
  #uxpop{ position:fixed; inset:0; z-index:60; }
  #uxpop[hidden]{ display:none; }
  .uxpop-scrim{ position:absolute; inset:0; background:rgba(30,35,20,.30); }
  .uxpop-card{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(340px,86vw);
    max-height:82vh; overflow-y:auto; background:rgba(251,252,248,.92);
    backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%);
    border:1px solid var(--glass-bd); border-radius:22px; padding:16px 19px 19px; box-shadow:0 14px 44px rgba(0,0,0,.22); }
  .uxpop-head{ display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:600;
    color:var(--ink-2); margin-bottom:12px; }
  .uxpop-x{ font-size:21px; color:var(--ink-3); cursor:pointer; line-height:1; }
  .uxpop-div{ height:1px; background:rgba(var(--line),.14); margin:13px 0; }
  .uxpop-note{ font-size:10.5px; color:var(--ink-3); line-height:1.55; margin-top:13px; }
  .ux-big{ font-size:42px; font-weight:700; font-family:var(--mono); color:var(--ink-2); line-height:1;
    text-align:center; margin:3px 0; }
  .ux-biglab{ text-align:center; font-size:11.5px; color:var(--ink-3); margin-bottom:13px; }
  .ux-rows{ display:flex; flex-direction:column; gap:7px; }
  .ux-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-2); padding:8px 12px;
    background:rgba(var(--neu),.10); border-radius:11px; }
  .ux-row b{ font-weight:600; font-family:var(--mono); font-size:12px; }
  .ux-empty{ text-align:center; color:var(--ink-3); font-size:12.5px; padding:16px 0; }
  .ux-lim{ margin-bottom:13px; }
  .ux-limtop{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-2); margin-bottom:5px; }
  .ux-limtop b{ font-weight:700; font-family:var(--mono); }
  .ux-bar{ height:6px; background:rgba(var(--neu),.16); border-radius:99px; overflow:hidden; }
  .ux-bar i{ display:block; height:100%; border-radius:99px; }
  .ux-reset{ font-size:10.5px; color:var(--ink-3); margin-top:4px; }
  .ux-plan{ font-size:11px; color:var(--ink-3); text-align:right; }

  /* ── 心情日历 ── */
  .md-body{ flex:1; overflow-y:auto; padding:14px 14px calc(24px + env(safe-area-inset-bottom)); }
  .md-hint{ font-size:12px; color:var(--dim); line-height:1.6; margin-bottom:14px; text-align:center; }
  .md-cal{ max-width:336px; margin:0 auto 6px; background:var(--card); border-radius:22px; padding:15px 16px 17px;
    box-shadow:0 1px 2px rgba(50,60,35,.05), 0 4px 16px rgba(50,60,35,.04); }
  .md-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:12px; }
  .md-arw{ width:33px; height:33px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:18px; color:var(--ink-2); cursor:pointer; user-select:none; }
  .md-arw:active{ background:var(--hl); }
  .md-arw.off{ opacity:.28; pointer-events:none; }
  .md-mon{ font-size:14.5px; font-weight:600; color:var(--ink-1); min-width:120px; text-align:center; }
  .md-wk{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; }
  .md-wk span{ text-align:center; font-size:10px; color:var(--faint); }
  .md-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .md-cell{ aspect-ratio:1; border-radius:11px; display:flex; align-items:center; justify-content:center;
    font-size:12px; font-family:var(--mono); color:var(--ink-3); background:rgba(var(--neu),.07); position:relative; }
  .md-cell.pad{ background:transparent; }
  .md-cell.has{ color:var(--ink-1); cursor:pointer; font-weight:600; }
  .md-cell.today{ box-shadow:inset 0 0 0 1.5px var(--today); }
  .md-cell.sel{ box-shadow:0 0 0 2px rgba(255,255,255,.95), 0 3px 10px rgba(56,70,40,.20); }
  .md-cell .cnt{ position:absolute; top:3px; right:5px; font-size:8px; font-weight:600; opacity:.5; }
  .md-tl{ margin-top:20px; }
  .md-tl-h{ font-size:13px; font-weight:700; color:var(--ink-1); margin-bottom:12px; padding-left:2px; }
  .md-item{ display:flex; gap:11px; }
  .md-item .rail{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; width:14px; }
  .md-item .rdot{ width:12px; height:12px; border-radius:50%; margin-top:3px; flex:0 0 auto; box-shadow:0 0 0 3px rgba(0,0,0,.04); }
  .md-item .rline{ flex:1; width:2px; background:rgba(var(--line),.14); margin:4px 0; }
  .md-item:last-child .rline{ display:none; }
  .md-item .mbody{ flex:1; padding-bottom:16px; }
  .md-item .mh{ display:flex; align-items:baseline; gap:8px; }
  .md-item .mn{ font-weight:700; font-size:13px; }
  .md-item .mt{ margin-left:auto; font-size:10px; font-family:var(--mono); color:var(--dim); }
  .md-item .ms{ font-size:12.5px; color:var(--txt); margin-top:3px; line-height:1.55; word-break:break-word; }
  .md-item .mo{ font-size:12.5px; color:var(--ink-2); margin-top:6px; line-height:1.68; white-space:pre-wrap; word-break:break-word;
    background:var(--card); border:1px solid rgba(var(--line),.10); border-radius:13px; padding:9px 12px; }
  .md-tl-empty{ text-align:center; color:var(--dim); font-size:12.5px; margin-top:16px; line-height:1.7; }
  .md-legend{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:26px; padding-top:16px;
    border-top:1px dashed rgba(var(--line),.18); }
  .md-legend .lg{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--dim); }
  .md-legend .lg i{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }

  /* ── feel 页 ── */
  .fl-body{ flex:1; overflow-y:auto; padding:16px 14px calc(24px + env(safe-area-inset-bottom)); }
  .fl-hint{ font-size:12px; color:var(--dim); line-height:1.6; margin-bottom:16px; text-align:center; }
  .fl-item{ background:var(--card); border-left:3px solid #C9A2A2; border-radius:16px; padding:13px 16px 14px;
    margin-bottom:12px; box-shadow:0 1px 2px rgba(50,60,35,.05), 0 4px 16px rgba(50,60,35,.04); }
  .fl-top{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }
  .fl-mk{ font-size:12.5px; }
  .fl-date{ font-size:10px; font-family:var(--mono); color:var(--dim); }
  .fl-v{ margin-left:auto; font-size:9.5px; font-family:var(--mono); color:var(--faint); letter-spacing:.5px; }
  .fl-text{ font-size:12.5px; line-height:1.75; color:var(--txt); white-space:pre-wrap; word-break:break-word; }
  .fl-empty{ text-align:center; color:var(--dim); font-size:13px; margin-top:60px; line-height:1.8; white-space:pre-wrap; }

  /* ── ob 页 ── */
  .ob-body{ flex:1; overflow-y:auto; padding:14px 14px calc(24px + env(safe-area-inset-bottom)); }
  .ob-sum{ font-size:11px; color:var(--dim); text-align:center; margin-bottom:14px; letter-spacing:.3px; }
  .ob-sec{ margin-bottom:9px; }
  .ob-sh{ display:flex; align-items:center; gap:8px; padding:12px 15px; background:var(--card);
    border-radius:15px; cursor:pointer; user-select:none; font-weight:600; color:var(--ink-1); font-size:14px;
    box-shadow:0 1px 2px rgba(50,60,35,.05); }
  .ob-sh .n{ font-size:11px; font-family:var(--mono); color:var(--faint); font-weight:600; }
  .ob-sh .cv{ margin-left:auto; color:var(--faint); transition:transform .2s; font-size:11px; }
  .ob-sec.open .ob-sh .cv{ transform:rotate(90deg); }
  .ob-sb{ display:none; padding:8px 2px 2px; }
  .ob-sec.open .ob-sb{ display:block; }
  .ob-gh{ font-size:11.5px; color:var(--ink-3); font-weight:600; padding:9px 6px 5px; display:flex; align-items:center;
    cursor:pointer; user-select:none; }
  .ob-gh .cv{ margin-left:auto; transition:transform .2s; color:var(--faint); }
  .ob-grp.open .ob-gh .cv{ transform:rotate(90deg); }
  .ob-gb{ display:none; } .ob-grp.open .ob-gb{ display:block; }
  .ob-card{ background:var(--card); border-radius:15px; padding:12px 14px; margin-bottom:8px; cursor:pointer;
    box-shadow:0 1px 2px rgba(50,60,35,.05); }
  .ob-card.core{ border-left:3px solid var(--accent); }
  .ob-ct{ display:flex; align-items:baseline; gap:7px; }
  .ob-name{ font-weight:600; font-size:13px; color:var(--ink-1); }
  .ob-date{ margin-left:auto; font-size:9.5px; font-family:var(--mono); color:var(--dim); white-space:nowrap; }
  .ob-sm{ font-size:12.5px; line-height:1.6; color:var(--txt); margin-top:5px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .ob-card.open .ob-sm{ -webkit-line-clamp:unset; }
  .ob-full{ display:none; margin-top:8px; padding-top:8px; border-top:1px dashed rgba(var(--line),.18);
    font-size:12px; line-height:1.7; color:var(--ink-2); white-space:pre-wrap; word-break:break-word; }
  .ob-card.open .ob-full{ display:block; }
  .ob-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
  .ob-tags span{ font-size:10px; color:var(--ink-3); background:rgba(var(--neu),.13); border-radius:7px; padding:1.5px 8px; }
  /* 状态胶囊：把 ob 的真实状态（钉住/坐标/沉底/plan 状态…）摆到明面上 */
  .ob-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
  .ob-chip{ font-size:10px; font-weight:600; border-radius:7px; padding:1.5px 8px;
    background:rgba(var(--neu),.13); color:var(--ink-3); }
  .ob-chip.pin{ background:rgba(var(--chip-pin),.18); color:var(--chip-pin-t); }
  .ob-chip.anc{ background:rgba(100,130,160,.14); color:#56708A; }
  .ob-chip.first{ background:rgba(196,166,88,.16); color:#8C7A3E; }
  .ob-chip.sunk{ background:rgba(125,125,120,.13); color:#8F948A; }
  .ob-chip.act{ background:rgba(var(--chip-pin),.20); color:var(--chip-pin-t); }
  .ob-chip.done{ background:rgba(125,125,120,.13); color:#8F948A; }
  .ob-chip.drop{ background:rgba(165,120,98,.13); color:#96705C; }
  .ob-card.sunk{ opacity:.55; }
  .ob-meta{ display:none; font-size:9.5px; font-family:var(--mono); color:var(--dim);
    margin-top:8px; letter-spacing:.2px; }
  .ob-card.open .ob-meta{ display:block; }
  .ob-wbar{ height:3px; border-radius:2px; background:rgba(var(--line),.15); margin-top:8px; overflow:hidden; }
  .ob-wbar i{ display:block; height:100%; background:var(--accent); border-radius:2px; }
  .ob-legend{ font-size:10px; color:var(--dim); text-align:center; margin:-8px 0 12px; line-height:1.7; }

  /* ── 语音通话：全屏玻璃罩，同一套奶油绿语言 ── */
  #callpage{ position:fixed; inset:0; z-index:55; display:flex; flex-direction:column; align-items:center;
    background:linear-gradient(to bottom, rgba(28,48,54,.20), rgba(28,48,54,0) 130px), var(--call-bg);
    backdrop-filter:blur(44px) saturate(160%); -webkit-backdrop-filter:blur(44px) saturate(160%);
    padding:calc(24px + env(safe-area-inset-top)) 22px calc(30px + env(safe-area-inset-bottom)); }
  #callpage[hidden]{ display:none; }
  .cl-head{ display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:7vh; }
  .cl-avwrap{ display:flex; align-items:center; gap:14px; }
  .cl-wave{ display:flex; gap:3.5px; align-items:center; height:36px; width:64px; justify-content:center; }
  .cl-wave i{ width:3px; border-radius:2px; background:var(--wave); height:5px; transition:height .13s ease; flex:0 0 auto; }
  .cl-avatar{ width:108px; height:108px; border-radius:50%; background:#fff;
    box-shadow:0 6px 30px rgba(56,70,40,.18), 0 0 0 5px rgba(255,255,255,.55); }
  .cl-name{ font-size:23px; font-weight:600; letter-spacing:2px; color:var(--ink-1); margin-top:10px; }
  .cl-status{ font-size:11.5px; color:var(--ink-3); letter-spacing:2px; display:flex; align-items:center; gap:7px; }
  .cl-status::before,.cl-status::after{ content:'✦'; font-size:8px; color:var(--faint); }
  .cl-timer{ font-size:13px; font-family:var(--mono); color:var(--ink-2); letter-spacing:3px; }
  .cl-quote{ flex:1; display:flex; align-items:center; justify-content:center; width:100%; max-width:340px; text-align:center;
    font-size:16.5px; line-height:1.75; color:var(--ink-1); padding:10px 6px; overflow-y:auto; min-height:0;
    font-weight:500; letter-spacing:.3px; white-space:pre-wrap; word-break:break-word; }
  .cl-quote:not(:empty)::before{ content:'“'; color:var(--faint); font-size:26px; margin-right:2px; }
  .cl-quote:not(:empty)::after{ content:'”'; color:var(--faint); font-size:26px; margin-left:2px; }
  .cl-sub{ min-height:36px; max-width:88%; display:flex; align-items:center; justify-content:center; }
  .cl-sub span{ font-size:12.5px; color:var(--ink-2); background:var(--glass); border:1px solid var(--glass-bd);
    backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
    border-radius:18px; padding:8px 16px; box-shadow:var(--shadow);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
  .cl-sub span:empty{ display:none; }
  .cl-btns{ display:flex; gap:36px; align-items:center; margin:22px 0 24px; }
  .cl-btn{ display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; user-select:none;
    font-size:10.5px; color:var(--ink-2); transition:transform .12s ease; }
  .cl-btn:active{ transform:scale(.92); }
  .cl-btn .ci{ width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--glass); border:1px solid var(--glass-bd); box-shadow:var(--shadow);
    backdrop-filter:blur(24px) saturate(170%); -webkit-backdrop-filter:blur(24px) saturate(170%);
    transition:background .18s ease, color .18s ease; color:var(--ink-2); }
  .cl-btn .ci svg{ width:22px; height:22px; }
  .cl-btn.on .ci{ background:var(--accent); color:#fff; border-color:transparent; }
  .cl-end{ width:64px; height:64px; border-radius:50%; border:none; background:#D9694A; color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 22px rgba(190,80,50,.38);
    transition:transform .12s ease; }
  .cl-end:active{ transform:scale(.92); }
  .cl-end svg{ width:26px; height:26px; }