/* ============================================================
   Uwhats — UI Design System v2「Vivid」
   更年轻化的视觉语言：鲜艳品牌渐变 / 大圆角 / 柔和彩色阴影 /
   玻璃质感 / 清晰按压反馈 / 全触摸目标 ≥44px
   作者：UI Designer
   ------------------------------------------------------------
   结构：① 设计令牌  ② 基础重置  ③ 按钮体系  ④ 表单
        ⑤ 登录  ⑥ 壳层(顶栏/底栏)  ⑦ 列表  ⑧ 聊天
        ⑨ 语音与录音  ⑩ 通话  ⑪ 抽屉  ⑫ 动效与可访问性  ⑬ 暗色模式
   ============================================================ */

/* ═══════════════ ① 设计令牌 ═══════════════ */
:root{
  /* 品牌 —— 与 uu.money 同源的绿（其 favicon 主色 #0CCC00）：两个色阶承载白字，亮绿只做点缀 */
  --brand-50:#EAFBE4;  --brand-100:#D4F6C8; --brand-200:#AEEB9A;
  --brand-300:#7EDD62; --brand-400:#3FC51F; --brand-500:#0E8A00;
  --brand-600:#096B00; --brand-700:#064D00;
  --brand-bright:#22C409;                 /* 亮绿点缀：logo / 徽标 / 图标（不承载白字） */
  --brand-text:#096B00;                   /* 浅底上的品牌文字 */
  --brand-line:#0E8A00;                   /* 输入聚焦描边 */
  --brand-grad:linear-gradient(135deg,#0E8A00 0%,#096B00 100%);
  --brand-grad-soft:linear-gradient(135deg,#EAFBE4,#D4F6C8);

  /* 强调色 —— 用于状态、亮点 */
  --mint:#00D68F; --coral:#FF6B81; --amber:#FFB020;

  /* 语义色 */
  --success:#00C48C; --success-grad:linear-gradient(135deg,#26E0A0,#00C48C);
  --warning:#FFAA00;
  --danger:#FF4757; --danger-grad:linear-gradient(135deg,#FF6B81,#FF4757);
  --danger-text:#D32F3F;                                 /* 文字专用：白底 4.96:1 */
  --danger-soft:#FFECEF; --danger-soft-text:#C62828;     /* 浅红块文字：4.95:1 */
  --badge-bg:linear-gradient(135deg,#E03040,#C02535);    /* 白字 4.51:1+ */

  /* 中性色阶 */
  --ink-900:#0F172A; --ink-800:#1E293B; --ink-700:#334155; --ink-600:#475569;
  --ink-500:#64748B; --ink-400:#94A3B8; --ink-300:#CBD5E1; --ink-200:#E2E8F0;
  --ink-100:#F1F5F9; --ink-50:#F8FAFC;

  /* 语义化映射（暗色模式只覆盖这一段） */
  --bg:#F5F6FB;
  --bg-grad:linear-gradient(180deg,#F8F9FE 0%,#F3F4FA 100%);
  --surface:#FFFFFF;
  --surface-glass:rgba(255,255,255,.94);
  --text:var(--ink-900);
  --muted:var(--ink-500);
  --line:var(--ink-200);
  --bubble-in:var(--surface);
  --bubble-out:var(--brand-grad);

  /* 圆角体系 */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px;
  --r-xl:24px; --r-2xl:28px; --r-full:999px;

  /* 间距体系（4pt 基准） */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px;

  /* 阴影体系（带品牌色彩倾向，比纯黑阴影更"活"） */
  --sh-xs:0 1px 2px rgba(15,23,42,.05);
  --sh-sm:0 2px 10px -2px rgba(14,138,0,.10), 0 1px 2px rgba(15,23,42,.04);
  --sh-md:0 10px 28px -10px rgba(14,138,0,.22), 0 2px 6px rgba(15,23,42,.04);
  --sh-lg:0 24px 52px -20px rgba(14,138,0,.30);
  --sh-brand:0 10px 24px -8px rgba(22,169,2,.55);
  --sh-danger:0 10px 24px -8px rgba(255,71,87,.55);
  --sh-mint:0 10px 24px -8px rgba(0,196,140,.55);

  /* 动效 */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-spring:cubic-bezier(.34,1.4,.64,1);
  --t-fast:130ms; --t-base:220ms; --t-slow:380ms;

  /* 交互：全站最小触摸目标（WCAG 2.5.5 / iOS HIG 均为 44px） */
  --tap:44px;

  /* 微信/iOS 字体栈 */
  --font:15px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC",
         "Segoe UI","Microsoft YaHei",system-ui,sans-serif;
}

/* ═══════════════ ② 基础重置 ═══════════════ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
body{
  font:var(--font);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.hide{display:none !important}
.sub{color:var(--ink-500);font-size:13px}
.err{color:var(--danger-text);font-size:13px;min-height:18px;margin:6px 0 0;font-weight:500}

/* 全局按压反馈：所有按钮按下都有回弹，这是"好用"的第一感知 */
button{
  font:inherit;cursor:pointer;border:0;background:transparent;color:inherit;
  transition:transform var(--t-fast) var(--e-out),
             box-shadow var(--t-base) var(--e-out),
             background-color var(--t-fast) linear,
             color var(--t-fast) linear,
             opacity var(--t-fast) linear;
}
button:active{transform:scale(.96)}
button:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}
button:disabled{opacity:.5;pointer-events:none}

/* ═══════════════ ③ 按钮体系 ═══════════════ */
/* 一级：实心渐变（主操作） */
.primary{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--tap);padding:0 var(--s-5);
  border-radius:var(--r-sm);
  background:var(--brand-grad);color:#fff;
  font-weight:650;font-size:15px;letter-spacing:.01em;
  box-shadow:var(--sh-brand);
}
.primary:active{transform:scale(.97);box-shadow:0 4px 12px -4px rgba(22,169,2,.5)}

/* 二级：幽灵/胶囊（次要操作、导航项） */
.ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 var(--s-4);
  border-radius:var(--r-full);
  color:var(--ink-500);font-weight:600;font-size:14px;
}
.ghost:active{background:var(--ink-100)}

/* 三级：浅底块（抽屉里的次要选项） */
.btn-soft{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);width:100%;margin:var(--s-2) 0;padding:0 var(--s-4);
  border-radius:var(--r-sm);
  background:var(--ink-100);color:var(--ink-800);
  font-weight:620;font-size:15px;
}
.btn-soft:active{background:var(--ink-200)}

/* 危险块（双方删除 / 退出群聊 / 删除类操作） */
.btn-danger-soft{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);width:100%;margin:var(--s-2) 0;padding:0 var(--s-4);
  border-radius:var(--r-sm);
  background:var(--danger-soft);color:var(--danger-soft-text);
  font-weight:620;font-size:15px;
}
.btn-danger-soft:active{background:#FFDDE2}

/* 实心危险（通话挂断） */
.danger{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 var(--s-5);
  border-radius:var(--r-full);
  background:var(--danger-grad);color:#fff;
  font-weight:650;font-size:15px;box-shadow:var(--sh-danger);
}

/* 必填块级主按钮 */
.primary.block{width:100%;margin:var(--s-2) 0;display:flex}

/* 群成员移出 */
.mbtn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 var(--s-4);
  border-radius:var(--r-full);
  background:var(--danger-soft);color:var(--danger-soft-text);
  font-size:13px;font-weight:640;
}

/* ═══════════════ ④ 表单 ═══════════════ */
/* 16px 起（同时满足 iOS 防聚焦缩放 与 移动端可读性） */
input{
  font:inherit;font-size:16px;
  width:100%;height:52px;padding:0 var(--s-4);
  border:1.5px solid var(--ink-200);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);outline:none;
  transition:border-color var(--t-fast) linear,
             box-shadow var(--t-base) var(--e-out),
             background-color var(--t-fast) linear;
}
input::placeholder{color:var(--ink-500)}
input:focus{border-color:var(--brand-line);box-shadow:0 0 0 4px rgba(14,138,0,.16)}
input.valid{border-color:var(--success)}
input.invalid{border-color:var(--danger)}
.form{display:grid;gap:var(--s-3)}

/* ═══════════════ ⑤ 登录 / 注册 ═══════════════ */
.auth{
  min-height:100%;min-height:100dvh;
  display:grid;place-items:center;padding:var(--s-6);
  background:
    radial-gradient(80% 55% at 12% 8%, rgba(34,196,9,.22), transparent 62%),
    radial-gradient(70% 55% at 88% 12%, rgba(0,214,143,.16), transparent 60%),
    radial-gradient(90% 65% at 50% 102%, rgba(255,107,129,.14), transparent 62%),
    linear-gradient(160deg,#FAFBFF 0%,#F2F3FF 100%);
}
.auth-card{
  width:100%;max-width:392px;
  padding:var(--s-6) var(--s-5) 28px;
  border-radius:var(--r-2xl);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--sh-lg);
}
.brand{text-align:center;margin-bottom:var(--s-5)}
.brand h1{
  margin:var(--s-3) 0 var(--s-1);
  font-size:27px;font-weight:800;letter-spacing:-.015em;
  background:linear-gradient(135deg,#0B7300 0%,#16A902 55%,#096B00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .sub{margin:0;color:var(--ink-500);font-size:13px}

/* 分段切换器（胶囊滑块） */
.tabs{
  display:flex;gap:var(--s-1);
  padding:var(--s-1);
  background:var(--ink-100);
  border-radius:var(--r-full);
  margin:var(--s-4) 0 var(--s-5);
}
.tab{
  flex:1;min-height:var(--tap);border-radius:var(--r-full);
  color:var(--ink-500);font-weight:650;font-size:14px;
}
.tab.active{background:var(--surface);color:var(--brand-text);box-shadow:var(--sh-sm)}

/* ═══════════════ ⑤b 用户端一体入口：左智体 + 右登录（v1.18.0） ═══════════════
   配色原则：左侧面板是固定品牌渐变，**不参与暗色模式变量切换**，
   所以它内部一律「深底 + 白字」，且深底用黑色半透明叠加 —— 保证亮暗两种模式下
   对比度都稳定（变量在暗色下会翻转，用它做左面板文字底色会直接失守）。 */
/* 被嵌套提示：托管平台会放开 frame-ancestors（允许任意嵌套），应用侧只能提醒，详见 app.js 注释 */
.frame-warn{
  width:100%;max-width:1108px;margin:0 auto var(--s-3);
  padding:10px var(--s-4);border-radius:var(--r-md);
  background:#FFF4E5;border:1px solid #FFD8A8;color:#8A5A00;
  font-size:13px;font-weight:620;text-align:center;line-height:1.5;
}
.auth-shell{
  width:100%;max-width:1108px;
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:var(--s-6);align-items:stretch;
}
.ai-panel{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:540px;max-height:78vh;
  padding:var(--s-5);
  border-radius:var(--r-2xl);
  color:#fff;
  background:linear-gradient(158deg,#075C00 0%,#0B7300 52%,#0E8A00 100%);
  box-shadow:var(--sh-lg);
}
.ai-panel::after{        /* 一角柔光：大面积纯色会显平 */
  content:'';position:absolute;right:-18%;top:-34%;width:70%;height:70%;
  background:radial-gradient(closest-side,rgba(255,255,255,.20),transparent 72%);
  pointer-events:none;
}
.ai-head{display:flex;align-items:center;gap:var(--s-3);position:relative;z-index:1}
.ai-logo{
  flex:0 0 40px;width:40px;height:40px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;
  background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.26);
}
.ai-head-main{flex:1;min-width:0}
.ai-title{font-size:15.5px;font-weight:750;display:flex;align-items:center;gap:6px;color:#fff}
.ai-tag{
  padding:1px 7px;border-radius:var(--r-full);
  background:rgba(0,0,0,.3);font-size:11px;font-weight:650;color:#fff;
}
.ai-sub{margin-top:3px;font-size:12.5px;color:#fff;opacity:.92;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-state{
  flex:0 0 auto;padding:4px 9px;border-radius:var(--r-full);
  font-size:11px;font-weight:650;color:#fff;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.24);
}
.ai-state.off{background:rgba(0,0,0,.5)}

.ai-log{
  flex:1;min-height:0;margin:var(--s-4) 0 var(--s-3);
  display:flex;flex-direction:column;gap:var(--s-2);
  overflow-y:auto;overscroll-behavior:contain;position:relative;z-index:1;
  scrollbar-width:thin;
}
.ai-row{display:flex}
.ai-row.user{justify-content:flex-end}
.ai-bubble{
  max-width:88%;padding:9px 12px;border-radius:14px;
  font-size:13.5px;line-height:1.62;white-space:pre-wrap;word-break:break-word;
  background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.18);color:#fff;
}
.ai-row.user .ai-bubble{background:#fff;color:#0F172A;border-color:transparent;font-weight:600}
.ai-row.note .ai-bubble{
  max-width:100%;font-size:12.5px;background:rgba(0,0,0,.34);
  border-color:rgba(255,255,255,.16);color:#fff;
}
.ai-bubble.warn{background:rgba(0,0,0,.46);border-color:#FF9AA8;color:#fff}
.ai-bubble.typing::after{content:'▍';margin-left:2px;animation:aiBlink 1s steps(2) infinite}
@keyframes aiBlink{0%,100%{opacity:1}50%{opacity:0}}

.ai-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s-3);position:relative;z-index:1}
.ai-chip{
  padding:0 14px;border-radius:var(--r-full);
  min-height:var(--tap);              /* 与全站一致：触摸目标 ≥44px（33px 高的胶囊手指点不准） */
  display:inline-flex;align-items:center;
  background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:12.5px;font-weight:600;
}
.ai-chip:active{background:rgba(0,0,0,.42)}

.ai-composer{display:flex;gap:var(--s-2);position:relative;z-index:1}
.ai-composer input{
  flex:1;min-width:0;min-height:var(--tap);padding:0 var(--s-4);border-radius:var(--r-full);
  background:#fff;color:#0F172A;border:1px solid rgba(255,255,255,.5);font-size:14px;
}
.ai-composer input::placeholder{color:#64748B}
.ai-composer input:disabled{background:rgba(255,255,255,.62)}
.ai-composer button{
  flex:0 0 auto;padding:0 var(--s-5);min-height:var(--tap);border-radius:var(--r-full);
  background:#fff;color:#096B00;font-weight:720;font-size:14px;
}
.ai-composer button:disabled{opacity:.6}
.ai-foot{margin:var(--s-3) 0 0;font-size:11.5px;color:#fff;opacity:.9;position:relative;z-index:1}


/* 窄屏：先给登录（用户来这一屏主要是登录），智体排在下面继续可聊 */
@media (max-width:900px){
  .auth{padding:var(--s-4)}
  .auth-shell{grid-template-columns:1fr;gap:var(--s-4);max-width:460px}
  .auth-card{order:1}
  .ai-panel{order:2;min-height:0;max-height:none;padding:var(--s-4)}
  .ai-log{max-height:36vh}
}

.banner{
  display:flex;align-items:center;gap:var(--s-2);
  margin:var(--s-3) var(--s-3) 0;padding:var(--s-3) var(--s-4);
  background:linear-gradient(135deg,#FFF7E8,#FFF0D8);
  border:1px solid #FFE0A8;border-radius:var(--r-md);
  font-size:13.5px;color:#8A5A00;font-weight:500;
}
.banner .ghost{
  margin-left:auto;min-height:var(--tap);padding:0 var(--s-3);
  font-size:13px;color:#8A5A00;background:rgba(255,255,255,.65);
}

/* ═══════════════ ⑥ 壳层：顶栏 / 底栏 ═══════════════ */
.app{
  height:100%;height:100dvh;
  /* 横向布局：左边独立智库工作台，右边通讯主区（窄屏时左栏被隐藏） */
  display:flex;flex-direction:row;
  justify-content:center;
  gap:var(--s-5);
  background:var(--bg-grad);
}
/* 通讯主区：承接原来 .app 的职责（定宽 + 纵向排布） */
.app-main{
  flex:1 1 auto;min-width:0;min-height:0;
  max-width:860px;
  display:flex;flex-direction:column;
}
/* 左工作台容器：默认不显示 —— 手机上只要通讯，不要它 */
.app-rail{display:none}
.topbar{
  position:relative;z-index:6;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:calc(8px + env(safe-area-inset-top)) var(--s-4) 8px;
  background:var(--brand-grad);
  color:#fff;
  box-shadow:0 6px 22px -14px rgba(14,138,0,.75);
}
/* 右上角柔光，让渐变不平板 */
.topbar::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 100% 0%,rgba(255,255,255,.24),transparent 58%);
}
.topbar-title,.topbar-right{position:relative;z-index:1}
.topbar-title{font-size:19px;font-weight:750;letter-spacing:.005em}
.topbar-right{display:flex;align-items:center;gap:var(--s-1)}
.topbar .ghost{
  color:var(--brand-text);min-height:var(--tap);padding:0 var(--s-4);
  font-size:13.5px;font-weight:660;background:#fff;
  box-shadow:0 4px 12px -6px rgba(15,23,42,.35);
}
.topbar .ghost:active{background:var(--brand-50)}
.me{
  display:none;
  font-size:12.5px;opacity:.9;max-width:120px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (min-width:520px){ .me{display:inline} }

.view{flex:1;display:flex;flex-direction:column;min-height:0}

/* 底栏：玻璃质感 + 图标 + 激活指示条 */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  max-width:860px;margin:0 auto;
  display:flex;
  background:var(--surface-glass);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbtn{
  position:relative;flex:1;
  min-height:58px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--ink-500);font-weight:640;font-size:11.5px;
  transition:color var(--t-base) var(--e-out);
}
.tabbtn::before{content:'';font-size:21px;line-height:1;transition:transform var(--t-base) var(--e-spring)}
.tabbtn[data-view="list"]::before{content:'💬'}
.tabbtn[data-view="contacts"]::before{content:'👥'}
.tabbtn.active{color:var(--brand-text)}
.tabbtn.active::before{transform:translateY(-1px) scale(1.06)}
.tabbtn.active::after{
  content:'';position:absolute;top:5px;width:28px;height:3px;
  border-radius:var(--r-full);background:var(--brand-grad);
}
.tabbtn .badge{position:absolute;top:5px;right:calc(50% - 30px)}

/* ═══════════════ ⑦ 列表 / 通讯录 ═══════════════ */
.list{flex:1;overflow:auto;padding:var(--s-1) var(--s-2) 92px}
.item{
  display:flex;gap:var(--s-3);align-items:center;
  padding:var(--s-3);
  margin:var(--s-2) var(--s-1);
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid rgba(226,232,240,.75);
  box-shadow:var(--sh-xs);
  transition:transform var(--t-fast) var(--e-out),
             box-shadow var(--t-base) var(--e-out),
             background-color var(--t-fast) linear;
  cursor:pointer;
}
.item:active{transform:scale(.985);background:var(--brand-50);box-shadow:var(--sh-sm)}
.item .main{flex:1;min-width:0}
.item .name{display:flex;align-items:center;gap:var(--s-2);font-weight:660;font-size:15.5px}
.item .last{
  margin-top:2px;color:var(--ink-500);font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.item .meta{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-1);
  color:var(--ink-500);font-size:11.5px;
}
.item .name .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 0 3px rgba(0,214,143,.2);
}
/* 头像：squircle 圆角方形（比圆形更现代、更有 App 感） */
.av{
  flex:0 0 48px;width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:var(--r-md);
  background:var(--brand-grad);color:#fff;
  font-weight:700;font-size:17px;
  box-shadow:0 6px 14px -6px rgba(22,169,2,.55);
  overflow:hidden;
}
.av.gray{background:linear-gradient(160deg,var(--ink-200),var(--ink-300));color:var(--ink-500);box-shadow:none}
.av img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

.badge{
  display:inline-grid;place-items:center;
  min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--r-full);
  background:var(--badge-bg);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 3px 8px -2px rgba(255,71,87,.65);
}
.section-title{
  padding:var(--s-4) 18px var(--s-2);
  color:var(--ink-500);font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
}
.searchbar{display:flex;gap:var(--s-2);padding:var(--s-3)}
.searchbar input{
  flex:1;height:var(--tap);border-radius:var(--r-full);
  background:var(--surface);padding:0 18px;
}
.searchbar button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 18px;
  border-radius:var(--r-full);
  background:var(--brand-100);color:var(--brand-text);
  font-weight:660;font-size:14px;
}
.searchbar button:active{background:var(--brand-200)}

.group-create{display:grid;gap:var(--s-3);padding:0 var(--s-4) 110px}
.group-create .primary{width:100%}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{
  display:inline-flex;align-items:center;
  min-height:var(--tap);padding:0 15px;
  border-radius:var(--r-full);
  background:var(--surface);border:1.5px solid var(--ink-200);
  color:var(--ink-700);font-size:13px;font-weight:620;
  transition:all var(--t-fast) var(--e-out);
}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--brand-grad);color:#fff;border-color:transparent;box-shadow:var(--sh-brand)}

#my-card{margin:var(--s-3) var(--s-3) 0;box-shadow:var(--sh-sm);border-radius:var(--r-lg)}
#my-card .ghost{margin-left:auto;color:var(--brand-text);background:var(--brand-50)}
#view-contacts .list{padding-bottom:220px}

/* ═══════════════ ⑧ 聊天 ═══════════════ */
.chat{background:var(--bg-grad)}
.chat-head{
  position:relative;z-index:4;
  display:flex;align-items:center;gap:var(--s-2);
  padding:var(--s-1) var(--s-3);
  background:var(--surface-glass);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--line);
}
.chat-title{font-weight:700;font-size:16px;letter-spacing:.005em}
.chat-sub{color:var(--ink-500);font-size:12px;margin-left:auto}
.chat-head .ghost{
  min-height:var(--tap);padding:0 var(--s-3);
  font-size:14px;color:var(--brand-text);background:var(--brand-50);
}
.chat-head .ghost[title="语音通话"]{min-width:var(--tap);padding:0;font-size:17px}

.messages{
  flex:1;overflow:auto;
  padding:var(--s-4) var(--s-3) var(--s-2);
  display:flex;flex-direction:column;gap:var(--s-2);
}
.msg{
  position:relative;max-width:78%;
  padding:10px 14px;
  border-radius:var(--r-lg);
  background:var(--bubble-in);
  border:1px solid rgba(226,232,240,.8);
  box-shadow:var(--sh-xs);
  word-break:break-word;
  animation:msgIn var(--t-base) var(--e-out) both;
}
/* 自己：品牌渐变 + 右下收角（气泡"指向"发送者） */
.msg.mine{
  align-self:flex-end;
  background:var(--bubble-out);color:#fff;
  border-color:transparent;
  border-bottom-right-radius:var(--r-xs);
  box-shadow:0 8px 20px -10px rgba(22,169,2,.6);
}
/* 对方：白底 + 左下收角 */
.msg:not(.mine):not(.system){border-bottom-left-radius:var(--r-xs)}
.msg img{display:block;max-width:100%;border-radius:var(--r-sm)}
.msg .from{font-size:11px;color:var(--brand-text);font-weight:650;margin-bottom:3px}
.msg.mine .from{color:rgba(255,255,255,.85)}
.msg .time{
  font-size:10.5px;opacity:.78;margin-top:5px;text-align:right;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.msg .state{font-size:10.5px;opacity:.8;margin-left:5px}
.msg .file{
  display:flex;gap:var(--s-2);align-items:center;
  text-decoration:none;color:inherit;font-size:14px;
}
/* 系统消息：居中小胶囊 */
.msg.system{
  align-self:center;max-width:92%;
  padding:6px 14px;
  background:rgba(148,163,184,.16);
  border-color:transparent;box-shadow:none;
  color:var(--ink-600);
  font-size:12px;border-radius:var(--r-full);
}
.typing{padding:var(--s-1) 18px 0;color:var(--ink-500);font-size:12px}

@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* 输入栏：玻璃 + 胶囊输入框 + 圆形工具按钮 */
.composer{
  display:flex;gap:var(--s-2);align-items:center;
  padding:10px var(--s-3);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--surface-glass);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-top:1px solid var(--line);
}
.composer input{
  flex:1;height:var(--tap);padding:0 18px;
  border-radius:var(--r-full);
  background:var(--ink-100);border:1.5px solid transparent;
}
.composer input:focus{background:var(--surface);border-color:var(--brand-line);box-shadow:0 0 0 4px rgba(14,138,0,.16)}
/* ★ 关键修复：图标按钮原为 32px 高，低于 44px 触摸下限，误触率高 */
.composer .icon{
  flex:0 0 var(--tap);
  width:var(--tap);height:var(--tap);
  display:grid;place-items:center;
  border-radius:var(--r-sm);
  background:var(--ink-100);color:var(--ink-700);
  font-size:19px;line-height:1;
}
.composer .icon:active{background:var(--brand-100);color:var(--brand-text)}
.composer .primary{
  min-height:var(--tap);padding:0 18px;
  border-radius:var(--r-full);font-size:14px;
}

/* ═══════════════ ⑨ 语音消息 / 录音 ═══════════════ */
.msg.voice{display:flex;flex-direction:column;gap:var(--s-1);min-width:148px}
.msg.voice .vrow{display:flex;align-items:center;gap:var(--s-2)}
.msg.voice button.vplay{
  flex:0 0 var(--tap);width:var(--tap);height:var(--tap);
  display:grid;place-items:center;
  border-radius:50%;background:rgba(255,255,255,.24);
  color:inherit;font-size:15px;
}
.msg:not(.mine).voice button.vplay{background:var(--brand-100);color:var(--brand-text)}
.msg.voice .vwave{display:flex;align-items:flex-end;gap:2px;height:18px}
.msg.voice .vwave i{width:3px;border-radius:2px;background:currentColor;opacity:.45}
.msg.voice .vdur{font-size:12px;opacity:.82;font-variant-numeric:tabular-nums}
.msg.voice .vmore{
  flex:0 0 var(--tap);width:var(--tap);height:var(--tap);
  display:grid;place-items:center;
  border-radius:50%;opacity:.7;font-size:16px;line-height:1;
}
.msg.voice .vmore:active{opacity:1;background:rgba(255,255,255,.2)}
.msg:not(.mine).voice .vmore:active{background:var(--brand-100)}

/* 录音条 */
.rec-bar{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-3);
  background:linear-gradient(135deg,#FFF7E8,#FFEFD6);
  border-top:1px solid #FFE0A8;
  color:#8A5A00;font-size:14px;
}
.rec-dot{
  flex:0 0 10px;width:10px;height:10px;border-radius:50%;
  background:var(--danger);animation:pulse 1.2s infinite;
}
@keyframes pulse{
  0%{opacity:1;box-shadow:0 0 0 0 rgba(255,71,87,.5)}
  70%{opacity:.55;box-shadow:0 0 0 9px rgba(255,71,87,0)}
  100%{opacity:1;box-shadow:0 0 0 0 rgba(255,71,87,0)}
}
#rec-time{font-weight:700;font-variant-numeric:tabular-nums}
.rec-bar .rec-hint{margin-right:auto;color:#8A5A00;font-size:12px}
.rec-bar .ghost{min-height:var(--tap);color:#8A5A00;background:rgba(255,255,255,.6)}
.rec-bar .primary{min-height:var(--tap);padding:0 var(--s-4);font-size:14px}

/* ═══════════════ ⑩ 通话浮层（沉浸式） ═══════════════ */
.call-overlay{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 95% at 50% 0%,#2C2555 0%,#191632 55%,#0E0C1F 100%);
  animation:fadeIn var(--t-base) var(--e-out);
}
.call-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-2);
  width:min(92vw,360px);padding:var(--s-6);
  text-align:center;color:#fff;
  background:transparent;
}
.call-avatar{
  display:grid;place-items:center;
  width:104px;height:104px;margin-bottom:var(--s-3);
  border-radius:36px;
  background:var(--brand-grad);
  font-size:40px;
  box-shadow:0 24px 56px -22px rgba(34,196,9,.95);
  animation:breathe 2.8s var(--e-out) infinite;
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.call-name{font-size:22px;font-weight:750;letter-spacing:.005em}
.call-status{color:rgba(255,255,255,.62);font-size:13.5px}
.call-timer{
  min-height:22px;font-size:17px;font-weight:700;
  color:#3FC51F;font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.call-actions{display:flex;gap:var(--s-4);margin-top:var(--s-4)}
.call-actions .primary{background:var(--success-grad);box-shadow:var(--sh-mint)}
.call-actions .ghost{color:#fff;background:rgba(255,255,255,.14);min-height:var(--tap)}
.call-hint{min-height:14px;color:rgba(255,255,255,.62);font-size:11.5px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ═══════════════ ⑪ 抽屉 ═══════════════ */
.overlay{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadeIn var(--t-base) var(--e-out);
}
.sheet{
  width:100%;max-width:520px;max-height:84vh;
  display:flex;flex-direction:column;
  background:var(--surface);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow:0 -24px 56px -24px rgba(15,23,42,.5);
  animation:sheetUp var(--t-slow) var(--e-out);
  overflow:hidden;
}
/* 顶部拖拽把手：给用户"可下拉关闭"的手感暗示 */
.sheet::before{
  content:'';flex:0 0 auto;
  width:40px;height:4px;margin:10px auto 2px;
  border-radius:var(--r-full);background:var(--ink-300);
}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-3) var(--s-4) var(--s-3);
  font-size:16px;font-weight:700;
  border-bottom:1px solid var(--line);
}
.sheet-body{padding:var(--s-2) var(--s-4) calc(26px + env(safe-area-inset-bottom));overflow:auto}
.sheet .row{display:flex;gap:var(--s-2);align-items:center;margin:var(--s-3) 0}
.sheet .row label{min-width:64px;color:var(--ink-500);font-size:13px;font-weight:620}
.sheet .row input{height:var(--tap);border-radius:var(--r-sm)}
.sheet .row .primary{min-height:var(--tap);padding:0 var(--s-4);font-size:14px;box-shadow:none}
.sheet .sec{
  margin:var(--s-4) 0 var(--s-2);
  color:var(--ink-500);font-size:12px;font-weight:620;
  letter-spacing:.02em;line-height:1.5;
}
/* 抽屉内的危险块按钮（退出群聊等）与上方内容留出呼吸空间 */
.sheet-body > .btn-danger-soft:last-child{margin-top:var(--s-4)}

@keyframes sheetUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

.member{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) 0;border-bottom:1px solid var(--ink-100);
}
.member .grow{flex:1;min-width:0}
.member .last{color:var(--ink-500);font-size:12px}

/* ═══════════════ ⑫ 动效偏好与可达性 ═══════════════ */
/* 尊重系统「减弱动态效果」：关闭所有动效，但保留状态变化 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}
/* iOS 聚焦字号保护（16px 基础已满足，此处为外部内容兜底） */
@media (max-width:700px){ input,textarea,select{font-size:16px} }
/* PWA 独立窗口 */
@media (display-mode:standalone){
  body{background:var(--surface)}
  .topbar{padding-top:calc(12px + env(safe-area-inset-top))}
}
/* 滚动惯性 + 防整页跟手 */
.messages,.list,.sheet-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* 桌面/平板：底栏不再固定，列表恢复常规内边距 */
@media (min-width:700px){
  .list{padding-bottom:var(--s-4)}
  /* ⚠️ 这里必须显式 width:100% + margin:0，不能只写 position:static：
     - position:static 之后 left/right 失效；
     - 而基础样式里的 `margin:0 auto` 在**列向 flex 容器**中会让子项由
       「撑满」变成「按内容收缩」——整条底栏会缩成 ~179px 的一小条、
       4 个 Tab 挤成 45×62 的竖条（真实出现过的"上下栏按键变形"）。
     align-self:stretch 把「横向占满」写死，避免再被 auto 边距带偏。 */
  .tabbar{position:static;border-radius:0;width:100%;margin:0;align-self:stretch}
  .overlay{align-items:center}
  .sheet{border-radius:var(--r-2xl)}
  .group-create{padding-bottom:var(--s-6)}
  #view-contacts .list{padding-bottom:var(--s-6)}
}

/* 宽屏：左工作台常驻（窗口够宽才给，否则会挤压聊天区）
   1180px 是"860 主区 + 372 左栏 + 间距 + 边距"的最小值，别随意调小。 */
@media (min-width:1180px){
  .app{padding:var(--s-5) var(--s-4)}
  .app-rail{display:block;flex:0 0 372px;width:372px;min-height:0}
  /* 搬进左栏后让面板撑满整栏（它原本是登录页里 min-height:540px/max-height:78vh 的卡片） */
  .app-rail .ai-panel{height:100%;min-height:0;max-height:none}
  .app-main{max-width:860px}
}

/* ═══════════════ ⑬ 暗色模式 ═══════════════ */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F1117;
    --bg-grad:linear-gradient(180deg,#12141C 0%,#0E1017 100%);
    --surface:#191C26;
    --surface-glass:rgba(25,28,38,.94);
    --text:#E9EBF2;
    --muted:#8A92A6;
    --line:#272C3A;
    --bubble-in:#222634;

    --ink-900:#EEF0F6; --ink-800:#DDE1EC; --ink-700:#C3C9D8;
    --ink-600:#A6AEC0; --ink-500:#8A92A6; --ink-400:#6C7488;
    --ink-300:#3C4254; --ink-200:#2C3140; --ink-100:#21252F; --ink-50:#1A1D26;

    --brand-50:#0C1F0A; --brand-100:#12300F; --brand-200:#17441A;
    --brand-text:#5BDD3A; --brand-line:#3FC51F;   /* 暗底上换成亮绿，否则深绿读不出来 */

    --danger-soft:#3A1E24; --danger-soft-text:#FF7C88;
    --danger-text:#FF6B7A;            /* 深底上的错误文字：6.18:1 */

    --sh-xs:0 1px 2px rgba(0,0,0,.35);
    --sh-sm:0 2px 10px -2px rgba(0,0,0,.45);
    --sh-md:0 10px 28px -10px rgba(0,0,0,.55);
    --sh-lg:0 24px 52px -20px rgba(0,0,0,.65);
  }
  .auth{
    background:
      radial-gradient(80% 55% at 12% 8%, rgba(34,196,9,.28), transparent 62%),
      radial-gradient(70% 55% at 88% 12%, rgba(0,214,143,.14), transparent 60%),
      radial-gradient(90% 65% at 50% 102%, rgba(255,107,129,.12), transparent 62%),
      linear-gradient(160deg,#151728 0%,#0E1017 100%);
  }
  .auth-card{
    background:rgba(25,28,38,.86);
    border-color:rgba(255,255,255,.07);
  }
  .item{border-color:rgba(255,255,255,.05);box-shadow:none}
  .msg{border-color:rgba(255,255,255,.05)}
  .msg.system{background:rgba(255,255,255,.07)}
  .banner{background:linear-gradient(135deg,#2E2716,#2A2313);border-color:#4A3D1C;color:#E8C77A}
  .banner .ghost{color:#E8C77A;background:rgba(255,255,255,.08)}
  .rec-bar{background:linear-gradient(135deg,#2E2716,#2A2313);border-color:#4A3D1C;color:#E8C77A}
  .rec-bar .ghost{color:#E8C77A;background:rgba(255,255,255,.08)}
  .rec-bar .rec-hint{color:#C9A75A}
  .call-overlay{background:radial-gradient(120% 95% at 50% 0%,#221D45 0%,#12101F 55%,#08070F 100%)}
}

/* ═══════════════ ⑭ WhatsApp 式布局（结构对齐） ═══════════════
   说明：对齐的是「信息架构与交互范式」（多 Tab / 会话行 / 输入栏 / 长按操作），
   配色与图标仍为 Uwhats 自有品牌资产，不使用第三方品牌视觉。 */

/* 顶栏与聊天头的圆形图标按钮 */
.iconbtn{
  flex:0 0 var(--tap);
  width:var(--tap);height:var(--tap);
  display:grid;place-items:center;
  border-radius:var(--r-full);
  background:#fff;color:var(--brand-text);
  font-size:17px;line-height:1;
  box-shadow:0 4px 12px -6px rgba(15,23,42,.35);
}
.iconbtn:active{background:var(--brand-50);transform:scale(.94)}
.chat-head .iconbtn{box-shadow:none;background:var(--brand-50)}

/* 顶栏「更多」下拉菜单 */
.more-menu{
  position:absolute;top:calc(100% - 6px);right:var(--s-3);z-index:40;
  min-width:168px;padding:6px;
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);
  animation:fadeIn var(--t-fast) var(--e-out);
}
.more-menu button{
  display:flex;align-items:center;
  min-height:var(--tap);padding:0 var(--s-4);
  border-radius:var(--r-sm);
  color:var(--text);font-size:14.5px;font-weight:600;text-align:left;
}
.more-menu button:active{background:var(--ink-100)}

/* 底栏 Tab 图标 */
.tabbtn[data-view="calls"]::before{content:'📞'}
.tabbtn[data-view="uu"]::before{content:'💳'}

/* 聊天头部：返回 + 对方头像 + 名称/状态 + 操作（顶栏在聊天页隐藏，故此处承担状态栏留白） */
.chat-head{padding:calc(6px + env(safe-area-inset-top)) var(--s-2) 6px;gap:6px}
.chat-avatar{flex:0 0 auto}
.chat-avatar .av{
  flex:0 0 38px;width:38px;height:38px;
  border-radius:var(--r-sm);font-size:15px;box-shadow:none;
}
.chat-info{flex:1;min-width:0;line-height:1.25}
.chat-info .chat-title{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-info .chat-sub{margin-left:0;font-size:11.5px;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 输入栏：输入框在左，附件/相机/麦克风↔发送 在右（WhatsApp 行为） */
.composer{gap:6px}
.composer-field{flex:1;min-width:0}
.composer-field input{width:100%}
.composer .icon.send{
  background:var(--brand-grad);color:#fff;
  box-shadow:var(--sh-brand);font-size:16px;
}
.composer .icon.send:active{transform:scale(.94);background:var(--brand-grad)}

/* 消息状态勾选（单勾=已发送 / 双勾=已读） */
.msg .state{
  font-size:11.5px;font-weight:700;opacity:.9;
  margin-left:5px;letter-spacing:-.06em;
}
.msg.mine .state.read{color:#7EE0FF}

/* 通话记录 */
.call-item .last.missed{color:var(--danger-text)}
.call-item .meta{flex-direction:row;align-items:center;gap:var(--s-2)}
.list .item .meta{flex-direction:row;align-items:center;gap:var(--s-2)}
.list .item .meta .icon{
  flex:0 0 var(--tap);width:var(--tap);height:var(--tap);min-width:var(--tap);
  display:grid;place-items:center;border-radius:var(--r-full);
  background:var(--brand-50);color:var(--brand-text);font-size:16px;
}

/* 设置页（分组列表） */
.settings-scroll{flex:1;overflow:auto;padding-bottom:92px}
.profile-row{
  display:flex;align-items:center;gap:var(--s-3);
  margin:var(--s-3) var(--s-3) var(--s-4);padding:var(--s-4);
  border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--sh-sm);border:1px solid rgba(226,232,240,.75);
}
.profile-row .av{
  flex:0 0 58px;width:58px;height:58px;
  border-radius:18px;font-size:21px;
}
.profile-row .main{flex:1;min-width:0}
.profile-row .name{font-size:17px;font-weight:720}
.profile-row .last{color:var(--ink-500);font-size:13px;margin-top:2px}
.settings-group{
  margin:0 var(--s-3);
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid rgba(226,232,240,.75);
  box-shadow:var(--sh-xs);
}
.setting-row{
  display:flex;align-items:center;gap:var(--s-3);
  min-height:60px;padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--ink-100);cursor:pointer;
  transition:background-color var(--t-fast) linear;
}
.setting-row:last-of-type{border-bottom:0}
.setting-row:active{background:var(--brand-50)}
.setting-row .si{flex:0 0 26px;font-size:19px;text-align:center}
.setting-row .st{flex:1;min-width:0}
.setting-row .st-title{font-size:15px;font-weight:620}
.setting-row .st-sub{margin-top:1px;font-size:12.5px;color:var(--ink-500)}
.setting-row .chev{color:var(--ink-300);font-size:20px}
#settings-body .btn-danger-soft{margin:var(--s-4) 0 0}

/* ═══════════════ ⑰ 关于 Uwhats / 升级提示（v1.17.0） ═══════════════ */

/* 「关于 Uwhats」那行的可升级标记（红底白字，亮暗模式都 ≥4.5:1） */
.setting-row.has-update .st-title::after{
  content:'可升级';margin-left:8px;padding:2px 7px;border-radius:var(--r-full);
  font-size:11px;font-weight:700;color:#fff;background:var(--badge-bg);
  vertical-align:1px;
}

.about-head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.about-logo{
  flex:0 0 52px;width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:800;color:#fff;background:var(--brand-grad);
  box-shadow:var(--sh-brand);
}
.about-name{font-size:17px;font-weight:720}
.about-sub{color:var(--ink-500);font-size:13px;margin-top:2px}
.about-card{
  border-radius:var(--r-md);background:var(--ink-50);
  border:1px solid var(--line);padding:var(--s-1) var(--s-4);
}
.about-line{display:flex;justify-content:space-between;gap:var(--s-3);padding:9px 0;font-size:14px}
.about-line+.about-line{border-top:1px solid var(--ink-100)}
.about-line .k{color:var(--ink-500)}
.about-line .v{font-weight:680;font-variant-numeric:tabular-nums}
/* 只加粗不换色：品牌色变量在暗色模式下未重定义，换色会在暗底上失守 */
.about-line.hl .v{font-weight:750}
.about-tip{margin-top:var(--s-3);font-size:13.5px;color:var(--ink-500)}
.about-tip.ok{margin-top:var(--s-3);font-size:13.5px;font-weight:650;color:var(--ink-600)}
.about-update{
  margin-top:var(--s-4);padding:var(--s-4);border-radius:var(--r-md);
  background:var(--brand-50);border:1px solid var(--brand-200);
}
.about-update-title{font-size:15px;font-weight:720;color:var(--text)}
.about-update-sub{margin-top:6px;font-size:13px;color:var(--ink-600);line-height:1.55}
.about-foot{margin-top:var(--s-5);text-align:center;font-size:12px;color:var(--ink-500)}
#sheet-body .btn-soft.block{margin-top:var(--s-3)}

/* 暗色模式补充 */
@media (prefers-color-scheme: dark){
  .iconbtn{background:var(--surface);color:var(--brand-300);box-shadow:none}
  .iconbtn:active{background:var(--brand-100)}
  .chat-head .iconbtn{background:var(--brand-100)}
  .composer .icon.send{background:var(--brand-grad);color:#fff}
  .profile-row,.settings-group{border-color:rgba(255,255,255,.06)}
  .call-item .meta .icon{background:var(--brand-100)}
}

/* ═══════════════ ⑮ UU 会员页（底部第 4 个 Tab） ═══════════════ */

.uu-wrap{
  flex:1;overflow:auto;
  display:flex;flex-direction:column;gap:var(--s-4);
  padding:var(--s-4) var(--s-3) 92px;
}
/* 会员卡：品牌渐变 + 右上柔光，和顶栏同源语言 */
.uu-card{
  position:relative;overflow:hidden;
  padding:var(--s-6) var(--s-5) 28px;
  border-radius:var(--r-2xl);
  background:var(--brand-grad);color:#fff;
  box-shadow:var(--sh-lg);
}
.uu-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 100% 0%,rgba(255,255,255,.26),transparent 58%);
}
.uu-badge{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:6px;
  min-height:28px;padding:0 12px;
  border-radius:var(--r-full);
  background:rgba(255,255,255,.22);
  font-size:12px;font-weight:700;letter-spacing:.02em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.uu-title{
  position:relative;z-index:1;
  margin:var(--s-3) 0 6px;
  font-size:26px;font-weight:800;letter-spacing:-.015em;
}
.uu-desc{
  position:relative;z-index:1;
  font-size:13.5px;line-height:1.55;opacity:.95;max-width:22em;
}
.uu-actions{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-1)}
.uu-note{
  margin:0 var(--s-1);
  color:var(--ink-500);font-size:12.5px;line-height:1.65;
}
.uu-link{
  display:flex;align-items:center;gap:var(--s-2);
  margin:0 var(--s-1);padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
  color:var(--ink-500);font-size:12px;line-height:1.5;
  word-break:break-all;
}
@media (prefers-color-scheme: dark){
  .uu-link{border-color:rgba(255,255,255,.07)}
}

/* 会员窗口预览：把「会在应用内弹出小窗」这件事提前说清楚，降低跳出焦虑 */
.uu-window{
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh-sm);
}
.uu-window-bar{
  display:flex;align-items:center;gap:6px;
  min-height:38px;padding:0 var(--s-3);
  background:var(--ink-100);
  border-bottom:1px solid var(--line);
}
.uu-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-300);flex:0 0 9px}
.uu-window-host{
  margin-left:auto;font-size:11.5px;font-weight:650;color:var(--ink-500);
  display:inline-flex;align-items:center;gap:4px;
}
.uu-window-body{padding:var(--s-4)}
.uu-window-title{font-size:15px;font-weight:700}
.uu-window-sub{margin-top:4px;font-size:12.5px;line-height:1.55;color:var(--ink-500)}
@media (prefers-color-scheme: dark){
  .uu-window{border-color:rgba(255,255,255,.07)}
  .uu-window-bar{background:var(--ink-50)}
}

/* 内嵌态：内容区交给原生内嵌页，H5 侧留白（保证与 App 连成一体、无缝隙） */
.uu-inline-host{padding:0;gap:0;overflow:hidden;background:var(--surface)}

/* 网页版内嵌态：经同源代理的 iframe 撑满内容区（v1.19.0）
   按需求不再显示"来源提示条"，内容区整块交给会员页。 */
.uu-frame-host{position:relative;padding:0;gap:0;overflow:hidden;background:var(--surface)}
.uu-frame{flex:1;width:100%;min-height:0;border:0;background:#fff}
.uu-loading{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-size:13px;color:var(--ink-500);
}
.uu-fallback{padding:var(--s-4) var(--s-3) 92px}

/* ═══════════════ ⑯ 备注名 / 邀请好友 / 时间修改（v1.14.0） ═══════════════ */

/* 注：消息时间「已改」标记与后台审计记录均已按要求移除（v1.16.0）。
   改时间现在直接改写 messages.created_at，不保留原始时间、不写审计行，
   因此这条消息在数据库、接口与后台里都只是一条普通消息，没有任何"被改过"的痕迹。 */

/* 联系人资料头部 */
.contact-head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-2)}
.contact-head .av{flex:0 0 56px;width:56px;height:56px;border-radius:16px;font-size:20px}
.contact-head .main{flex:1;min-width:0}
.contact-head .name{font-size:17px;font-weight:720}
.contact-head .last{color:var(--ink-500);font-size:13px;margin-top:2px}

/* 我的邀请码卡片 */
.invite-card{
  position:relative;overflow:hidden;
  padding:var(--s-5);border-radius:var(--r-lg);
  background:var(--brand-grad);color:#fff;text-align:center;
  box-shadow:var(--sh-brand);
}
.invite-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 100% 0%,rgba(255,255,255,.26),transparent 58%);
}
.invite-label{position:relative;z-index:1;font-size:12px;opacity:.92;font-weight:600}
.invite-code{
  position:relative;z-index:1;
  margin:6px 0 4px;font-size:27px;font-weight:800;letter-spacing:.06em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all;
}
.invite-sub{position:relative;z-index:1;font-size:12px;opacity:.92}

/* 时间快捷选择 */
.time-quick{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-2) 0}
.time-quick .chip{min-height:38px}
.sheet-body input[type="datetime-local"]{min-height:46px;font-variant-numeric:tabular-nums}