/* ============================================================
   Chat View —— 「纸窗」：web/小程序聊天房间（chat-view.js）
   设计定稿 2026-09-03：暖白豆沙色谱内的书信房间。
   空间=沉浸房间（sidebar 收 rail，对话居中成纸卡）；
   材质=纸卡气泡、梅花头像、朱砂小印、书信日期；
   时间=相伴天数 + 日期分隔；能力标记印章化（AI/主动回响/提醒）。

   token 全部收在 .chat-view 作用域、语义命名：
   将来夜模式只换这一组值，不改组件样式。
   ============================================================ */

.chat-view{
  --chat-paper:#fffefd;          /* 纸卡底 */
  --chat-paper-2:#fffafa;        /* 输入条约底 */
  --chat-line:var(--border);
  --chat-accent:var(--accent);
  --chat-accent-deep:#a85063;    /* 印章/强调加深 */
  --chat-ink:var(--text);
  --chat-muted:var(--text-dim);
  --chat-window-shadow:0 24px 64px rgba(92,55,45,.13);
  --chat-font-cal:"Siwo Calligraphy","Noto Serif SC Local","Songti SC","STSong","SimSun",serif;

  position:relative;
  display:flex;flex-direction:column;
  height:100%;min-height:0;
  overflow:hidden;
}

/* ── 环境层：信纸格（边缘浮现，中心让位） ── */
.chat-view::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(92,55,45,.05) 1px,transparent 1px),
    linear-gradient(0deg,rgba(92,55,45,.04) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse at center,transparent 26%,#000 88%);
  mask-image:radial-gradient(ellipse at center,transparent 26%,#000 88%);
}
/* ── 环境层：一枝梅（右下，书法字符水印——沿用 sidebar 的"梅"传统；
      产品页的梅花图素材带奶白底，直接铺会露方块，故不用图） ── */
.chat-view::after{
  content:"梅";position:absolute;right:-1.5vw;bottom:-6vh;z-index:0;pointer-events:none;
  font-family:var(--chat-font-cal);font-weight:900;
  font-size:min(40vh,380px);line-height:1;
  color:var(--chat-accent);opacity:.05;
}
/* ── 环境层：纸纹噪点（与产品页 page-grain 同款） ── */
.chat-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 纸窗：对话居中成一张浮起的纸卡 ── */
.chat-window{
  position:relative;z-index:1;
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  align-self:center;
  width:min(760px,calc(100% - 56px));
  margin:clamp(14px,2.6vh,28px) 0;
  background:var(--chat-paper);
  border:1px solid var(--chat-line);
  border-radius:20px;
  box-shadow:var(--chat-window-shadow);
  overflow:hidden;
}

/* ──  header（微信形制 2026-09-11）：三栏 grid 标题真居中，右上角按钮组（提醒入口 + 「···」聊天信息） ── */
.chat-head{
  flex:0 0 auto;display:grid;grid-template-columns:44px 1fr auto;align-items:center;position:relative;
  padding:5px 8px;border-bottom:1px solid var(--chat-line);
  background:rgba(255,253,251,.9);
}
.chat-head-actions{justify-self:end;display:flex;align-items:center;flex:0 0 auto}

/* ── 提醒可见性：顶栏待办入口 + 下拉清单 + 托付轮约定条 ── */
.chat-remind-toggle{position:relative;justify-self:end}
.chat-remind-count{
  position:absolute;top:2px;right:2px;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--chat-accent,#b85f73);color:#fff;
  font-size:9px;line-height:15px;text-align:center;font-weight:600;
}
.chat-remind-panel{
  position:absolute;top:100%;right:8px;z-index:30;width:min(320px,calc(100vw - 24px));
  max-height:52vh;overflow:auto;
  background:var(--chat-paper,#fffdfb);border:1px solid var(--chat-line);
  border-radius:12px;box-shadow:0 10px 32px rgba(58,34,26,.16);
  padding:10px 12px;font-size:13px;color:var(--chat-ink);
}
.chat-remind-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;margin-bottom:8px;
}
.chat-remind-item{
  display:flex;align-items:center;gap:10px;padding:8px 2px;
  border-top:1px solid var(--chat-line);
}
.chat-remind-item:first-child{border-top:none}
.chat-remind-item-main{flex:1;min-width:0}
.chat-remind-item-title{
  font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-remind-item-meta{font-size:11px;color:var(--chat-muted);margin-top:2px}
.chat-remind-item-actions{flex:0 0 auto;display:flex;gap:6px}
.chat-remind-item-actions button{
  border:1px solid var(--chat-line);background:none;border-radius:7px;
  font-size:11px;padding:4px 8px;cursor:pointer;color:var(--chat-ink);
}
.chat-remind-item-actions button:hover{background:rgba(92,55,45,.07)}
.chat-remind-item-actions button.is-danger{color:var(--red,#c0504d)}
.chat-remind-empty{padding:14px 4px;font-size:12px;color:var(--chat-muted);line-height:1.7}

/* 约定条：与引用条同款形制，融进输入区，不做系统通知感 */
.chat-pledge-bar{
  display:flex;align-items:center;gap:8px;
  margin:0 0 7px;padding:6px 10px 6px 12px;
  border:1px solid var(--chat-line);border-left:3px solid var(--chat-accent);
  border-radius:10px;background:var(--chat-paper-2);
  font-size:12px;color:var(--chat-muted);
}
.chat-pledge-icon{width:15px;height:15px;flex:0 0 auto;color:var(--chat-accent)}
.chat-pledge-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--chat-ink)}
.chat-pledge-act{
  flex:0 0 auto;border:none;background:none;cursor:pointer;
  color:var(--chat-muted);font-size:12px;padding:2px 6px;border-radius:6px;
}
.chat-pledge-act:hover{color:var(--chat-accent-deep);background:rgba(92,55,45,.08)}
.chat-pledge-act.is-danger:hover{color:var(--red,#c0504d)}
.chat-back{
  width:38px;height:38px;border-radius:8px;flex:0 0 auto;justify-self:start;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;color:var(--chat-ink);padding-bottom:3px;
  transition:background .15s;
}
.chat-back:hover{background:rgba(92,55,45,.07)}
/* 头像盒（微信形制：方圆角，图片盖首字、加载失败露首字）——聊天信息页/大头像用 */
.chat-ava{
  position:relative;width:40px;height:40px;flex:0 0 auto;
  border-radius:6px;overflow:hidden;
  background:linear-gradient(135deg,var(--chat-accent),var(--accent-2));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--chat-font-cal);font-weight:800;font-size:17px;
}
.chat-ava.chat-ava-lg{width:64px;height:64px;font-size:26px;border-radius:8px}
.chat-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.chat-head-main{min-width:0;text-align:center;padding:0 4px}
.chat-name{
  font-family:var(--chat-font-cal);font-weight:800;font-size:17px;line-height:1.3;
  color:var(--chat-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-sub{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:2px;font-size:10px;line-height:1;color:var(--chat-muted)}
.chat-seal{
  flex:0 0 auto;display:inline-grid;place-items:center;
  width:15px;height:15px;border-radius:3px;
  background:var(--chat-accent);color:#fff;
  font-size:9px;font-weight:800;line-height:1;letter-spacing:0;
  transform:rotate(-8deg);
}
.chat-days{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-more{
  width:38px;height:38px;border-radius:8px;justify-self:end;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  color:var(--chat-ink);transition:background .15s;
}
.chat-more svg{width:22px;height:22px}
.chat-more:hover{background:rgba(92,55,45,.07)}

/* ── 工程状态/停用提示：平时不露面，异常才浮出 ── */
.chat-note{
  flex:0 0 auto;margin:10px 18px 0;padding:9px 13px;border-radius:var(--radius-sm);
  background:var(--gold-soft);color:var(--gold);font-size:13px;line-height:1.55;
}
.chat-note.is-stopped{background:var(--red-soft);color:var(--red)}

/* ── 消息流：微信式浅灰场——白气泡在暖灰底上自然浮出，不再靠描边 ── */
.chat-body{flex:1;min-height:0;display:flex;flex-direction:column}
.chat-scroll{
  flex:1;min-height:0;overflow-y:auto;
  padding:14px 18px 12px;
  display:flex;flex-direction:column;gap:13px;
  background:rgba(92,55,45,.045);
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.chat-load-older{
  align-self:center;flex:0 0 auto;margin-bottom:2px;
  font-size:12px;color:var(--text-muted);
  border:1px solid var(--chat-line);border-radius:999px;padding:5px 14px;
  background:var(--chat-paper);transition:color .15s,border-color .15s;
}
.chat-load-older:hover{color:var(--chat-accent);border-color:var(--chat-accent)}
.chat-load-older:disabled{opacity:.5;cursor:wait}
.chat-empty{align-self:center;margin:auto;text-align:center;color:var(--chat-muted);font-size:14px;padding:30px 20px;display:flex;flex-direction:column;gap:10px;align-items:center}
.chat-error{align-self:center;margin:6px auto;padding:8px 16px;border-radius:var(--radius-sm);background:var(--red-soft);color:var(--red);font-size:13px}

/* 书信日期分隔：居中衬线，两侧发丝线 */
.chat-day{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;
  margin:8px 0 2px;color:var(--chat-muted);
  font-family:var(--chat-font-cal);font-size:13px;font-weight:700;letter-spacing:.08em;
}
.chat-day::before,.chat-day::after{content:"";flex:1;height:1px;background:var(--chat-line);opacity:.7}
.chat-day>span{white-space:nowrap}

/* 间隔时间条（微信口径）：与上一条间隔超 5 分钟才出现，居中小灰字 */
.chat-time{
  flex:0 0 auto;align-self:center;margin:8px 0;
  font-size:12px;line-height:1.4;color:var(--text-muted);white-space:nowrap;
}

/* 空状态 = 第一次见面的短笺 */
.chat-letter{
  align-self:center;margin:auto;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:44px 30px;text-align:center;
}
.chat-letter-seal{
  display:inline-grid;place-items:center;width:52px;height:52px;
  border-radius:10px;background:var(--chat-accent);
  box-shadow:0 10px 26px rgba(168,80,99,.30);
  transform:rotate(-8deg);
  animation:chatSealStamp .55s cubic-bezier(.3,.9,.3,1) .15s both;
}
.chat-letter-seal i{
  display:block;color:#fff;font-style:normal;
  font-family:var(--chat-font-cal);font-weight:900;font-size:19px;line-height:1.02;
}
@keyframes chatSealStamp{
  0%{opacity:0;transform:scale(2.1) rotate(-18deg)}
  55%{opacity:1;transform:scale(.94) rotate(-6deg)}
  78%{transform:scale(1.05) rotate(-9deg)}
  100%{opacity:1;transform:scale(1) rotate(-8deg)}
}
.chat-letter-line{font-family:var(--chat-font-cal);font-weight:800;font-size:22px;color:var(--chat-ink);letter-spacing:.04em}
.chat-letter-hint{font-size:13px;color:var(--chat-muted)}

/* ── 气泡（微信比例）：TA=纸卡白底，我=实心豆沙；头像 40px 方圆角，各自贴行外缘 ── */
.chat-bubble-row{display:flex;gap:10px;max-width:72%;flex:0 0 auto}
.chat-bubble-row.is-me{align-self:flex-end}
.chat-bubble-row.is-role{align-self:flex-start}
.chat-bubble-avatar{
  position:relative;width:40px;height:40px;flex:0 0 auto;align-self:flex-start;margin-top:1px;
  border-radius:4px;overflow:hidden;
  background:linear-gradient(135deg,var(--chat-accent),var(--accent-2));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--chat-font-cal);font-size:15px;font-weight:800;
}
.chat-bubble-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.chat-bubble{
  min-width:0;max-width:100%;
  background:var(--chat-paper);
  border-radius:8px;
  padding:9px 13px;
}
.chat-bubble-row.is-me .chat-bubble{
  background:var(--chat-accent);border-color:transparent;color:#fff;
}
.chat-bubble-row.is-pending .chat-bubble{opacity:.7}
.chat-bubble-row.is-failed .chat-bubble{background:var(--red-soft);border:1px solid var(--red);color:var(--red)}
.chat-bubble-text{font-size:16px;line-height:1.45;word-break:break-word;white-space:pre-wrap}
/* 触屏上气泡不开放原生文本选择：长按只弹动作菜单（引用/复制），
   避免选择光标与引用菜单同时出现造成误读；桌面端保持可选中 */
.chat-bubble{-webkit-touch-callout:none}
@media (pointer:coarse){
  .chat-bubble{user-select:none;-webkit-user-select:none}
}
/* 气泡内时间只属于乐观气泡（发送中/超时提示）；真实消息走居中时间条 */
.chat-bubble-time{font-size:10.5px;color:var(--chat-muted);opacity:.85;margin-top:3px;text-align:right}
.chat-bubble-row.is-me .chat-bubble-time{color:rgba(255,255,255,.78)}
.chat-bubble-row.is-failed .chat-bubble-time{color:var(--red)}

/* 能力小印：主动回响/提醒（读侧 kind 字段驱动，见 wxclaw_routes._chat_message_kind） */
.chat-tag{
  display:inline-flex;align-items:center;gap:5px;margin-bottom:5px;
  font-size:10.5px;font-weight:700;color:var(--chat-accent);
  background:var(--accent-soft);border-radius:5px;padding:2px 8px 2px 6px;
}
.chat-tag i{
  width:9px;height:9px;border-radius:2px;background:var(--chat-accent);
  transform:rotate(-8deg);flex:0 0 auto;
}

/* typing：三点 + 名字，由真实 processing 驱动 */
.chat-typing{display:flex;gap:11px;align-self:flex-start;flex:0 0 auto}
.chat-typing .chat-bubble{display:flex;align-items:center;gap:4px;padding:12px 15px}
.chat-typing .chat-bubble-avatar{align-self:center;margin-top:0}
.chat-typing-name{font-size:11px;color:var(--chat-muted);margin-left:5px;white-space:nowrap}
.chat-dot{width:6px;height:6px;border-radius:50%;background:var(--chat-muted);animation:chatDotBlink 1.2s infinite}
.chat-dot:nth-child(2){animation-delay:.2s}
.chat-dot:nth-child(3){animation-delay:.4s}
@keyframes chatDotBlink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ── 输入区（微信比例）：扁条 + 灰底圆角输入框，图标在框外 ── */
.chat-input-bar{flex:0 0 auto;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--chat-line);background:rgba(255,253,251,.92)}
.chat-input-pill{
  display:flex;align-items:flex-end;gap:7px;
  background:transparent;border:none;border-radius:0;
  padding:0;
}
.chat-input-pill:focus-within{box-shadow:none}
.chat-input-pill textarea{
  flex:1;min-height:38px;max-height:132px;resize:none;
  border:none;background:rgba(92,55,45,.10);border-radius:6px;
  padding:8px 12px;
  font-size:16px;line-height:1.45;
}
.chat-input-pill textarea:focus{border:none;box-shadow:none}
.chat-count{align-self:flex-end;flex:0 0 auto;padding:0 2px 11px;font-size:11px;color:var(--chat-muted);white-space:nowrap}
.chat-send{
  flex:0 0 auto;width:32px;height:32px;border-radius:6px;
  background:var(--chat-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .15s,transform .15s;
}
.chat-send:hover{opacity:.92;transform:translateY(-1px)}
.chat-send:disabled{opacity:.35;cursor:not-allowed;transform:none}
.chat-send svg{width:16px;height:16px}

/* ── 档案抽屉：不走路由，聊天不中断 ── */
.chat-overlay{
  position:absolute;inset:0;z-index:8;
  background:rgba(47,41,39,.26);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.chat-drawer{
  position:absolute;top:0;right:0;bottom:0;z-index:9;
  width:min(380px,92%);
  display:flex;flex-direction:column;
  background:var(--chat-paper);border-left:1px solid var(--chat-line);
  box-shadow:-18px 0 52px rgba(92,55,45,.16);
  transform:translateX(103%);transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.chat-view.drawer-open .chat-overlay{opacity:1;visibility:visible}
.chat-view.drawer-open .chat-drawer{transform:none}
.chat-drawer-head{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:14px 16px 10px;border-bottom:1px solid var(--chat-line);
}
.chat-drawer-head .chat-head-main{flex:1;text-align:left;padding:0}
/* 聊天信息页的头像区（微信「聊天信息」）：点头像换角色头像 */
.chat-drawer-sec-ava{display:flex;flex-direction:column;align-items:center;padding:16px 18px 14px}
.chat-drawer-ava-btn{
  border:none;background:none;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:7px;
}
.chat-drawer-ava-btn .chat-ava{box-shadow:0 8px 22px rgba(184,95,115,.25)}
.chat-drawer-ava-hint{font-size:11.5px;color:var(--text-muted);transition:color .15s}
.chat-drawer-ava-btn:hover .chat-drawer-ava-hint{color:var(--chat-accent)}
.chat-drawer-head .chat-head-main{flex:1}
.chat-drawer-close{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  color:var(--text-muted);font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.chat-drawer-close:hover{background:var(--accent-soft);color:var(--chat-accent)}
.chat-drawer-sec{padding:16px 18px;border-bottom:1px solid var(--chat-line)}
.chat-drawer-label{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--chat-muted);margin-bottom:10px;text-transform:uppercase}
.chat-drawer-status{font-size:13px;color:var(--text-muted);line-height:1.6;margin-top:8px}
.chat-drawer-link{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:11px 13px;border-radius:var(--radius-sm);
  font-size:14px;color:var(--chat-ink);text-align:left;
  transition:background .15s,color .15s;
}
.chat-drawer-link:hover{background:var(--accent-soft);color:var(--chat-accent)}
.chat-drawer-link .chev{color:var(--chat-muted);font-size:16px}

/* ── 控制台列表里的「和 TA 聊天」入口按钮（dashboard.js 用） ── */
.chat-cta{font-size:12.5px;color:var(--chat-accent,var(--accent));border:1px solid var(--border);border-radius:999px;padding:4px 12px;transition:border .15s,background .15s;flex:0 0 auto}
.chat-cta:hover{border-color:var(--accent);background:var(--accent-soft)}

/* ═══════════ 进入房间：shell 的调整（纯 CSS，不动 JS 结构） ═══════════ */
.sidebar{transition:width .25s ease,min-width .25s ease}
body.chat-active .main>.soft-note{display:none}

/* 桌面端：sidebar 收成细 rail，把空间让给纸窗 */
@media(min-width:861px){
  body.chat-active .sidebar{width:64px;min-width:64px;padding:20px 0}
  body.chat-active .sidebar::after{display:none}
  body.chat-active .sidebar-brand{justify-content:center;padding:0 0 18px;margin-bottom:6px}
  body.chat-active .sidebar-brand>div:not(.logo){display:none}
  body.chat-active .sidebar-nav{padding:0 10px}
  body.chat-active .sidebar-nav a{justify-content:center;gap:0;padding:12px 0;font-size:0}
  body.chat-active .sidebar-nav a svg{width:20px;height:20px}
  body.chat-active .sidebar-bottom{padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:8px}
  body.chat-active .account-identity-sidebar{margin-bottom:0}
  body.chat-active .account-identity-sidebar>div{display:none}
  body.chat-active .sidebar-bottom .email{display:none}
  body.chat-active .sidebar-bottom .logout-btn{font-size:11px;padding:4px 10px}
}

/* 移动端：全屏沉浸，底栏让位；字号对齐微信 17px */
@media(max-width:860px){
  body.chat-active{overflow:hidden}
  body.chat-active .app-shell{display:flex;flex-direction:column;height:100vh;height:100dvh}
  body.chat-active .sidebar{display:none}
  body.chat-active .mobile-tabs{display:none}
  body.chat-active .main{flex:1 1 auto;min-height:0;padding-bottom:0;overflow:hidden;display:flex;flex-direction:column}
  .chat-window{width:100%;margin:0;border:none;border-radius:0;box-shadow:none}
  .chat-view::before{display:none}              /* 移动端只留梅字水印，信纸格让位 */
  .chat-view::after{opacity:.04;font-size:46vh;right:-8vw;bottom:-8vh}
  .chat-head{padding:5px 6px}
  .chat-name{font-size:17px}
  .chat-scroll{padding:12px 14px 10px;gap:12px}
  .chat-bubble-row{max-width:76%}
  .chat-bubble-text{font-size:17px;line-height:1.42}
  .chat-input-bar{padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px))}
  .chat-drawer{width:min(380px,94%)}
}
@media(max-width:480px){
  .chat-bubble-row{max-width:80%}
}

/* ═══ 单条消息质量反馈条（chat-view.js 反馈闭环，2026-09-03） ═══ */
.chat-fb{margin:4px 0 0;padding:8px 10px;border:1px dashed var(--chat-line,var(--border));border-radius:10px;background:var(--plum-wash,rgba(184,95,115,.055));display:flex;flex-direction:column;gap:6px}
.chat-fb-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chat-fb-btn,.chat-fb-cancel{font-size:12px;border-radius:999px;padding:4px 12px;border:1px solid var(--chat-line,var(--border));background:var(--bg-card,#fff);color:var(--chat-muted,var(--text-dim));transition:all .15s}
.chat-fb-btn:hover{border-color:var(--chat-accent,var(--accent));color:var(--chat-accent,var(--accent))}
.chat-fb-btn:disabled{opacity:.5;cursor:wait}
.chat-fb-cancel{color:var(--chat-muted,var(--text-dim))}
.chat-fb-note{width:100%;min-height:34px;max-height:100px;resize:none;border-radius:8px;padding:7px 10px;font-size:13px;border:1px solid var(--chat-line,var(--border));background:var(--bg-input,#fff)}

/* ── 引用回复：气泡内引用块（微信形制——灰字两行+发丝线，不做卡片）/ 输入条预览 / 长按浮动菜单 ──
   数据口径：[引用{name}：{excerpt}] 单行标记（wxclaw_routes._compose_quote_prefix），
   跳转用 message_logs.quoted_message_id（list_messages 读侧透传）。 */
.chat-quote{
  display:block;min-width:0;
  margin:0 0 7px;padding:0 0 6px;
  border-bottom:1px solid rgba(92,55,45,.14);
  font-size:13px;line-height:1.45;cursor:pointer;
}
.chat-quote-name{display:block;font-weight:600;color:var(--chat-accent-deep)}
.chat-quote-name::after{content:"："}
.chat-quote-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--chat-muted)}
/* 我的气泡是朱砂底白字，引用块换半透白 */
.chat-bubble-row.is-me .chat-quote{border-bottom-color:rgba(255,255,255,.32)}
.chat-bubble-row.is-me .chat-quote-name{color:rgba(255,255,255,.95)}
.chat-bubble-row.is-me .chat-quote-text{color:rgba(255,255,255,.8)}
/* 输入条上方的引用预览条 */
.chat-quote-bar{
  display:flex;align-items:center;gap:8px;
  margin:0 0 7px;padding:6px 10px 6px 12px;
  border:1px solid var(--chat-line);border-left:3px solid var(--chat-accent);
  border-radius:10px;background:var(--chat-paper-2);
  font-size:12px;color:var(--chat-muted);
}
.chat-quote-bar-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-quote-bar-x{
  flex:0 0 auto;border:none;background:none;cursor:pointer;
  color:var(--chat-muted);font-size:12px;padding:2px 6px;border-radius:6px;
}
.chat-quote-bar-x:hover{color:var(--chat-accent-deep);background:rgba(92,55,45,.08)}
/* 长按/右键浮动菜单 */
.chat-quote-menu{
  position:fixed;z-index:90;min-width:88px;padding:4px;
  background:var(--bg-card,#fff);border:1px solid var(--chat-line);border-radius:10px;
  box-shadow:0 8px 24px rgba(92,55,45,.18);
}
.chat-quote-menu-btn{
  display:block;width:100%;border:none;background:none;cursor:pointer;
  padding:8px 14px;font-size:13px;text-align:left;border-radius:8px;color:var(--chat-ink);
}
.chat-quote-menu-btn:hover{background:rgba(184,95,115,.08);color:var(--chat-accent-deep)}
/* 跳转原消息的高亮一闪 */
.chat-bubble-row.is-flash .chat-bubble{animation:chatQuoteFlash 1.6s ease}
@keyframes chatQuoteFlash{0%,100%{box-shadow:var(--shadow-sm)}30%,65%{box-shadow:0 0 0 3px var(--chat-accent)}}

/* ── 媒体入站与语音条（2026-09-08）：图片/语音按钮、预览与录音条、角色语音喇叭 ──
   口径：媒体本体即转即弃不存服务器；语音条点喇叭才合成（GET voice 端点，服务端缓存）。 */
.chat-tool{
  flex:0 0 auto;width:34px;height:34px;border:none;background:none;cursor:pointer;
  color:var(--chat-muted);border-radius:10px;display:flex;align-items:center;justify-content:center;
  align-self:flex-end;margin-bottom:3px;transition:color .15s,background .15s;
}
.chat-tool svg{width:24px;height:24px}
.chat-tool:hover{color:var(--chat-accent-deep);background:rgba(92,55,45,.07)}
.chat-tool:disabled{opacity:.4;cursor:not-allowed}
/* 图片预览条（微信式：缩略图小卡靠发送侧，无独立发送键——主发送键图+文同发） */
.chat-img-bar{
  display:flex;align-items:center;gap:10px;justify-content:flex-end;
  margin:0 0 6px;padding:6px 8px;
  border:1px solid var(--chat-line);border-radius:12px;background:var(--chat-paper-2);
}
.chat-img-thumb{flex:0 0 auto;width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid var(--chat-line)}
.chat-img-hint{flex:1;min-width:0;text-align:right;font-size:11.5px;color:var(--chat-muted);line-height:1.4}
.chat-img-cancel{
  flex:0 0 auto;border:none;background:none;cursor:pointer;
  color:var(--chat-muted);font-size:12px;padding:2px 6px;border-radius:6px;
}
.chat-img-cancel:hover{color:var(--chat-accent-deep);background:rgba(92,55,45,.08)}
.chat-img-pending{max-width:180px;max-height:180px;border-radius:10px;display:block}
/* 已发图片缩略图（本设备缓存命中时显示，形制同发送中的乐观气泡） */
.chat-img-sent{max-width:180px;max-height:180px;border-radius:10px;display:block}
/* 与图同发的附言（气泡内图下文字） */
.chat-img-note{margin-top:5px;white-space:pre-wrap}
/* 录音条 */
.chat-rec-bar{
  display:flex;align-items:center;gap:9px;
  margin:0 0 7px;padding:8px 12px;
  border:1px solid var(--chat-line);border-radius:12px;background:var(--chat-paper-2);
}
.chat-rec-dot{width:9px;height:9px;border-radius:50%;background:#c0455d;animation:chatRecPulse 1.1s ease infinite}
@keyframes chatRecPulse{0%,100%{opacity:1}50%{opacity:.25}}
.chat-rec-time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--chat-ink)}
.chat-rec-hint{flex:1;min-width:0;font-size:11.5px;color:var(--chat-muted)}
.chat-rec-send{
  flex:0 0 auto;border:none;border-radius:999px;padding:5px 14px;cursor:pointer;
  background:var(--chat-accent);color:#fff;font-size:12.5px;
}
.chat-rec-cancel{
  flex:0 0 auto;border:1px solid var(--chat-line);border-radius:999px;padding:4px 12px;cursor:pointer;
  background:none;color:var(--chat-muted);font-size:12.5px;
}
/* 语音播放脉冲动画：语音条 is-playing 在用（喇叭按钮已于 2026-09-12 下线） */
@keyframes chatVoicePlaying{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ── 我方语音条（2026-09-08）：微信同款——语音气泡点开才展开转写文字；
      音频即转即弃不存服务器，仅本会话内刚发的可回放（chat-view.js liveVoice） ── */
.chat-bubble.is-voicemsg{padding:8px 12px 6px}
.chat-voiceline{
  display:flex;align-items:center;gap:7px;justify-content:flex-start;
  border:none;background:none;cursor:pointer;color:#fff;padding:2px 0;
}
.chat-voiceline svg{width:17px;height:17px;flex:0 0 auto}
.chat-voiceline-secs{font-size:13.5px;font-variant-numeric:tabular-nums}
.chat-voiceline.is-playing svg{animation:chatVoicePlaying 1.2s ease infinite}
.chat-voiceline-text{
  margin-top:6px;padding-top:6px;
  border-top:1px solid rgba(255,255,255,.28);
  font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.95);
  word-break:break-word;
}
.chat-voiceline-text[hidden]{display:none}

/* ── 聊天背景（2026-09-08）：服务器存每会话一张；纸感靠 lighten 混合保持可读 ── */
.chat-view.has-bg .chat-scroll{
  background-size:cover;background-position:center;
  background-color:rgba(255,253,251,.55);background-blend-mode:lighten;
}