/* ===== 云枢智控 · 消息中心聚合页样式（mobile.messages.css） =====
   消息中心（底部导航 5tab 第2位）+ AI助理待办提醒红条。
   复用现有 todo-banner/red-dot 为主，本文件只补消息中心页结构样式。
   加载顺序：mobile.css → … → mobile.messages.css（在 mobile.map.css 后）；仅被 /static/mobile.html 引用。
   约束：单文件 ≤500 行。 */

/* ===== 消息中心聚合页（总整改单⑦ 08-18: 仿微信会话列表 —— 头像44圆/标题16/摘要14灰/时间12/未读红点/项高68） ===== */
.messages-body{
  padding:0 0 12px;display:flex;flex-direction:column;gap:10px;
}
.msg3{margin:0 14px}
/* 待办决策横幅卡（红底白字 + 白色数量徽标，无待办整卡隐藏） */
.msg-todo-banner{
  display:flex;align-items:center;gap:10px;width:100%;
  background:var(--offline);border:none;border-radius:12px;padding:12px 14px;   /* 老板08-18·配色统一: 红渐变→纯语义红(禁渐变卡) */
  cursor:pointer;color:#fff;position:relative;text-align:left;
}
.msg-todo-banner:active{opacity:.9}
.mtb-ico{font-size:20px;line-height:1;flex-shrink:0}
.mtb-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mtb-title{font-size:16px;font-weight:700}
.mtb-sum{font-size:12px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-todo-banner .red-dot{position:static;background:#fff;color:#dc2626;min-width:22px;height:22px}
/* 微信式会话列表（总整改单⑦：头像44圆/标题16/摘要14灰/时间12/未读红点/项高68,点进群聊沉浸式） */
.msg-channels{display:flex;flex-direction:column}
.msg-channel{
  display:flex;align-items:center;gap:12px;width:100%;min-height:68px;
  background:var(--card);border-bottom:1px solid rgba(127,127,127,.14);padding:0 14px;   /* 20260821 老板: 卡片分隔线太明显(亮色深灰)→弱化, 亮暗色统一半透明淡灰 */
  cursor:pointer;color:var(--text);position:relative;text-align:left;
}
.msg-channel:active{background:var(--bar-bg)}
.mc-avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;position:relative;
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
  background:var(--bar-bg);border:1px solid var(--border);
}
/* 20260821 老板: 未读信息在头像右下标红点(微信式), 有未读即显示 */
.mc-unread-dot{
  position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;
  background:var(--offline);border:2px solid var(--card);box-sizing:content-box;pointer-events:none;
}
.mc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.mc-name{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-time{font-size:12px;color:var(--sub);flex-shrink:0}
.mc-sub{font-size:14px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-count{
  background:var(--offline);color:#fff;border-radius:10px;min-width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;padding:0 5px;flex-shrink:0;
}

/* ===== AI助理待办提醒红条（复用 assist-confirm-bar 结构，红底白字，无待办隐藏） ===== */
.assist-todo-bar{
  display:flex;align-items:center;gap:8px;width:100%;max-width:320px;margin:6px auto 0;
  background:var(--offline);border:1px solid var(--offline);border-radius:10px;padding:10px 12px;   /* 老板08-18·配色统一: 红渐变→纯语义红(禁渐变卡) */
  cursor:pointer;color:#fff;flex-shrink:0;position:relative;
}
.assist-todo-bar:active{border-color:var(--accent)}
.atb-ico{font-size:18px;line-height:1}
.atb-text{flex:1;text-align:left;font-size:14px;font-weight:600;color:#fff}
.assist-todo-bar .red-dot{position:static;background:#fff;color:#dc2626}

/* ===== 20260865 C 节：三态消息列表（未读/已读未处理/已处理 + 单条深链） ===== */
.msg3{display:flex;flex-direction:column;gap:8px}
.msg3-actions{display:flex;align-items:center;gap:10px}
.msg3-markall{
  flex-shrink:0;min-height:36px;padding:0 14px;border-radius:18px;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border);
  font-size:13px;font-weight:600;cursor:pointer;
}
.msg3-markall:active{border-color:var(--accent)}
.msg3-hint{flex:1;font-size:11px;color:var(--sub);text-align:right}
.msg3-sec{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  min-height:40px;background:var(--bar-bg);border:1px solid var(--border);border-radius:10px;
  padding:0 12px;font-size:14px;font-weight:700;color:var(--text);cursor:pointer;
}
.msg3-sec.static{cursor:default}
.m3-cnt{background:var(--border);color:var(--sub);font-size:12px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.m3-arrow{font-size:13px;color:var(--sub)}
.msg3-list{display:flex;flex-direction:column;gap:8px}
/* 单条高约 56dp；未处理置顶高亮、已处理打勾置灰 */
.msg3-item{
  display:flex;align-items:center;gap:10px;width:100%;min-height:56px;
  background:var(--card);border:1px solid var(--border);border-left:4px solid var(--offline);
  border-radius:12px;padding:8px 10px;cursor:pointer;color:var(--text);text-align:left;
}
.msg3-item:active{border-color:var(--accent)}
.msg3-item.unread{background:var(--accent-bg-light);border-left-color:var(--offline)}
.msg3-item.read{border-left-color:var(--warn)}
.msg3-item.processed{opacity:.55;border-left-color:var(--border)}
.msg3-item.processed .m3-title{text-decoration:line-through}
.m3-ico{font-size:18px;flex-shrink:0}
.m3-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.m3-type{font-size:10px;color:var(--accent);font-weight:700}
.m3-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m3-meta{font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m3-dot{width:9px;height:9px;border-radius:50%;background:var(--offline);flex-shrink:0}
.m3-seen{font-size:11px;color:var(--warn);flex-shrink:0}
.m3-check{font-size:16px;color:var(--online);font-weight:800;flex-shrink:0}
.msg3-fallback{background:var(--card);border:1px solid var(--warn);border-radius:12px;padding:12px}
.mf-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.mf-title{font-size:16px;font-weight:700;margin-bottom:4px}
.mf-meta{font-size:12px;color:var(--sub)}
.mf-close{background:var(--bar-bg);border:none;border-radius:6px;padding:2px 8px;font-size:12px;cursor:pointer}

/* ===== 总单十四：消息页=AI好友列表（微信式）—— 顶部搜索+添加好友 + 好友大头像52圆 + 私聊二级屏 screen-ai-chat ===== */
.msg-searchbar{display:flex;align-items:center;gap:8px;padding:10px 14px 6px}
.ms-ico{font-size:15px;color:var(--sub);flex-shrink:0}
.ms-input{
  flex:1;min-width:0;height:36px;border:none;outline:none;background:var(--bar-bg);
  border-radius:18px;padding:0 14px;font-size:14px;color:var(--text);
}
.ms-input::placeholder{color:var(--sub)}
.ms-add{
  width:44px;height:44px;flex-shrink:0;border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
}
.ms-add:active{opacity:.85}
.msg-friends{display:flex;flex-direction:column}
/* 好友项=微信式大头像（52 圆 accent 浅底）+ 大昵称 + 预览小字 */
.ai-friend .mc-avatar{
  width:52px;height:52px;font-size:24px;border:none;
  background:var(--accent-bg-light);color:var(--accent);border:1px solid var(--accent-border);
}
.ai-friend .mc-name{font-size:17px;font-weight:600}
.ai-friend .mc-sub{font-size:13px}
/* 私聊二级屏：flex 列布局 + 消息气泡 + 底部输入区 */
#screen-ai-chat.active{display:flex;flex-direction:column}
.frd-chat-list{
  flex:1;overflow-y:auto;padding:14px 10px 10px;   /* 20260821 老板: 两边只留一点留白; 顶部留白10→14 与顶栏分隔有呼吸感(老板反馈贴死没呼吸) */
  display:flex;flex-direction:column;gap:14px;
}
/* 20260821 老板: 一键到最新——上翻看历史时右下浮出, 点击回到底部(默认隐藏); 相对私聊屏定位, 浮在输入区上方。
   20260821 老板二改: 纯下箭头不带圆圈(去掉圆形底/背景), 不占行高(透明小箭头轻量悬浮), bottom抬高避开 AI 气泡🔊喇叭 */
#screen-ai-chat.active{position:relative}
.frd-jump{
  position:absolute;right:18px;bottom:118px;width:32px;height:32px;border-radius:50%;
  background:transparent;color:var(--sub,#9ca3af);border:none;font-size:0;line-height:1;
  display:none;align-items:center;justify-content:center;cursor:pointer;
  z-index:6;padding:0;text-shadow:0 1px 3px rgba(0,0,0,.18);
}
.frd-jump.show{display:inline-flex}
.frd-jump:active{opacity:.6}
.frd-empty,.frd-loading{margin:auto;max-width:280px;text-align:center;color:var(--sub);font-size:13px;line-height:1.6}
.frd-msg{display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:94%}   /* 20260821 老板: 时间放气泡下方; AI回复框再往右加大 */
.frd-msg.ai{max-width:97%;margin-right:2%}   /* 20260821 老板: AI回复框再往右加大, 右留白比左多一点点=AI回复特征 */
.frd-msg.me{align-self:flex-end;align-items:flex-end}
.frd-bubble{
  background:var(--card);border:1px solid var(--border);border-radius:14px;border-top-left-radius:4px;
  padding:10px 12px;font-size:var(--fs-l3);line-height:1.55;color:var(--text);   /* 20260818 字体规范: 会话正文L3=16pt, 去自创15px */
  word-break:break-word;white-space:pre-wrap;flex:1;
}
.frd-msg.me .frd-bubble{
  background:var(--accent);border-color:var(--accent);color:#fff;
  border-radius:14px;border-top-right-radius:4px;
}
.frd-bubble.pending{opacity:.75;animation:frdPending 1.2s ease-in-out infinite}
@keyframes frdPending{0%,100%{opacity:.55}50%{opacity:.95}}
.frd-meta{display:flex;align-items:center;gap:6px;margin:0 2px}
.frd-msg.me .frd-meta{flex-direction:row-reverse}
.frd-time{font-size:11px;color:var(--sub)}
.frd-chat-input{flex-shrink:0;padding:6px 10px 10px}   /* 20260821 老板更正: 输入框不动, 恢复最初原样(去上一轮错误压缩) */
/* 20260821 老板: AI 气泡 🔊 语音播报钮(手动点播, 全局播报关闭也可点; 在气泡下方时间旁) */
.frd-speak{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);
  background:var(--bar-bg);display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;cursor:pointer;color:var(--sub);padding:0;
  -webkit-appearance:none;appearance:none;   /* 20260821 iOS Safari: button 不设 appearance:none 时 ::before/::after 伪元素不渲染(华为Chrome正常, iPhone看不到波纹) */
}
.frd-speak:active{background:var(--accent-bg-light);color:var(--accent)}

/* ===== 20260821 老板: AI 回复格式渲染——该加粗加粗/该分段分段/特殊符号不显示 ===== */
.frd-bubble strong{font-weight:700}
.frd-bubble b{font-weight:700}
.frd-bubble i{font-style:italic}
.frd-bubble code{background:var(--bar-bg,#f3f4f6);padding:1px 5px;border-radius:4px;font-size:12px;font-family:inherit}
.frd-bubble .ai-li{margin:3px 0}
.frd-bubble .ai-li:first-child{margin-top:0}

/* ===== 20260821 老板: 语音播报开关移到私聊顶栏(牛牛旁靠右), 不再占输入区工具行 ===== */
.subbar-vs{
  position:absolute;right:10px;top:env(safe-area-inset-top, 0px);height:44px;
  display:inline-flex;align-items:center;z-index:2;   /* 20260821 老板: 别贴右缘/华为溢出, right 留呼吸 */
}
.subbar-vs .vs-btn{width:36px;height:36px}
.subbar-vs .vs-sel{display:none}   /* 顶栏只留开关, 语速档隐藏(输入区无位置) */
/* 20260821 老板更正: 顶栏"实时"绿色小卡片压矮(矩形框别太高占地方, 仅私聊屏顶栏)。
   line-height:1 去掉文字行高撑高, 高度≈dot(5)+上下padding(2)=13px, 比原18-21px矮约1/3 */
#screen-ai-chat .subbar .badge{padding:1px 8px;font-size:11px;gap:3px;line-height:1}
#screen-ai-chat .subbar .badge .dot{width:5px;height:5px}

/* ===== 20260821 老板707: 顶栏返回键灰色矩形压矮≥1/3(44→29px, 老板: 太粗鲁) — 仅私聊屏 =====
   返回键/喇叭/顶栏 bar 同步压缩, 内容区不受影响 */
#screen-ai-chat .subbar{
  height:calc(env(safe-area-inset-top, 0px) + 33px);   /* 20260821 老板反馈: 压29太贴内容区没呼吸感 → 回33px; 返回键仍矮29(垂直居中留上下呼吸) */
  border-bottom:1px solid var(--border);   /* 导航与内容区分隔线, 视觉呼吸 */
}
#screen-ai-chat .subbar .back-btn{height:29px;min-height:29px;min-width:44px;padding:0 8px;top:calc(env(safe-area-inset-top, 0px) + 2px)}   /* min-height 覆盖 hit.css 的 .back-btn min-height:44px; top+2px 返回键在33px栏内垂直居中 */
#screen-ai-chat .subbar-vs{height:29px;top:calc(env(safe-area-inset-top, 0px) + 2px)}
#screen-ai-chat .subbar-vs .vs-btn{width:26px;height:26px}

/* ===== 20260821 老板: 输入区整改——取消表情占位; 底色改白(全平台) ===== */
#screen-ai-chat .wx-emoji{display:none}
#screen-ai-chat .wx-input{background:var(--card)}
/* 20260821 老板纠正: 输入区整体下移+内容由AI生成贴底 仅 iPhone13 需要, 华为不动 → iOS 专属(html.ios 由 input.js UA 检测注入) */
html.ios #screen-ai-chat .wx-input{padding-top:10px;padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))}   /* 老板⑪: 底留白2→14px撑开(对齐assist-input⑪), 输入条/按住说话不贴屏底; 删"内容由AI生成贴底"收窄, env加,0px兜底 */
html.ios #screen-ai-chat .wx-ai-note{padding:4px 0 0}

/* ===== 20260821 老板: 播报中 🔊 小喇叭向外散发动画(点击即时反馈, 播放中持续波动; 停止/切换即停) ===== */
.frd-speak{position:relative}
.frd-speak.playing{color:var(--accent);border-color:var(--accent);background:var(--accent-bg-light)}
.frd-speak.playing::before,.frd-speak.playing::after{
  content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;
  border-radius:50%;border:1.5px solid var(--accent);
  transform:translate(-50%,-50%) scale(.55);
  animation:frdSpeakWave 1.4s ease-out infinite;pointer-events:none;
}
.frd-speak.playing::after{animation-delay:.7s}
@keyframes frdSpeakWave{
  0%{transform:translate(-50%,-50%) scale(.55);opacity:.85}
  100%{transform:translate(-50%,-50%) scale(2.1);opacity:0}
}