/* =============================================================================
   澄光 · 前端增强样式（布局与行为层）[2026-10-17 建立 / 2026-10-21 主题化重构]
   -----------------------------------------------------------------------------
   本文件只负责「结构」：移动端单栏、面板尺寸、灯箱、通话界面、文件卡片宽度…
   所有颜色 / 圆角 / 阴影 / 动效时长都来自 theme.css 的令牌，不再写死色值。
   这样做的好处：深浅两套主题只需改令牌，不必在这里维护第二套 !important 覆盖。
   加载顺序：tailwind.css → enhance.css → app.css → theme.css（theme 最后，令牌生效）
   ========================================================================== */

/* ---------- 移动端单栏 ---------- */
.m-back { display: none; }
@media (max-width: 820px) {
  /* 注意：renderApp() 是直接替换 document.body.innerHTML，
     所以根容器是 body > div，不是 #root > div。
     另外原站 <style> 里有一条 @media(max-width:720px){.sidebar{width:240px!important}}，
     它在本文件之后出现、同权重 —— 这里必须用更高特异性才能压住。 */
  body > div.flex.h-screen {
    display: block !important;
    height: 100dvh !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  body aside.sidebar,
  body aside.sidebar.glass {
    width: 100% !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    padding: 16px 14px !important;
    border: 0 !important;
  }
  body main {
    display: none !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }
  body.m-in-chat aside.sidebar { display: none !important; }
  body.m-in-chat main { display: flex !important; }
  #splitter { display: none !important; }
  .m-back { display: inline-flex !important; }
  #messages { padding: 14px !important; }
  .bubble { max-width: calc(100vw - 96px) !important; }
  #head { padding: 12px 14px !important; }
  footer { padding: 8px 8px 14px !important; }
  /* 手机上不显示会话搜索框（已有「搜索」入口），把宽度留给列表 */
  .sidebar .search { display: none !important; }
  .sidebar .copy, .sidebar .label { display: block !important; }
  .vtab { font-size: 12px !important; padding: 12px 2px !important; line-height: 1.35; }
  /* 移动端输入框：只收紧列间距，不要动 td 的 width ——
     原设计靠「48px 按钮 + 自适应输入 + 48px 按钮」三列撑开，
     把 td 改成 auto 会把输入框压成竖排文字。 */
  footer table { border-spacing: 6px !important; }
  footer textarea {
    min-height: 52px !important;
    max-height: 120px !important;
    font-size: 15px !important;
    padding: 10px 12px !important;
  }
  /* 手机上把 + / 表情两个辅助按钮收窄，把宽度让给输入框 */
  footer table td[style*="width:48px"] {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }
  footer table button[style*="width:48px"] {
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
  }
  .modal { max-height: 88dvh; overflow: auto; }
}

/* 触屏设备上隐藏悬浮的「⋯」按钮（它会飘在气泡外面很难看），改用长按弹出菜单 */
@media (hover: none) {
  .msgmenu { display: none !important; }
}

/* ---------- 主题切换按钮 ---------- */
.theme-btn { font-size: 15px; }

/* ---------- 顶部横幅（断线 / 重连中） ---------- */
.cx-banner {
  position: fixed;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-max);
  display: none;
  padding: 8px 18px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: #fff;
  background: linear-gradient(135deg, #e08a1e, #cf3b3b);
  box-shadow: 0 8px 24px rgba(190, 70, 60, 0.30);
}
.cx-banner.show { display: block; animation: cx-banner-in var(--dur-3) var(--ease-out); }
@keyframes cx-banner-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- 图片 / 视频灯箱 ---------- */
.cx-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-max);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 18, 0.90);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
  animation: cx-fade var(--dur-2) var(--ease-out) both;
}
.cx-lightbox img, .cx-lightbox video {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.cx-lightbox .cx-lb-bar {
  position: absolute;
  bottom: 26px;
  display: flex;
  gap: 12px;
}
.cx-lightbox .cx-lb-bar a, .cx-lightbox .cx-lb-bar button {
  padding: 9px 18px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: var(--fs-sm);
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-1);
}
.cx-lightbox .cx-lb-bar a:hover, .cx-lightbox .cx-lb-bar button:hover { background: rgba(255, 255, 255, 0.24); }
@keyframes cx-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 会话右键菜单（外观在 theme.css 的浮层组） ---------- */
.cx-menu {
  position: fixed;
  z-index: var(--z-max);
  min-width: 168px;
  padding: 6px;
  border-radius: var(--r-lg);
}
.cx-menu .sep { height: 1px; margin: 4px 6px; background: var(--divider); }

/* ---------- 会话行上的置顶 / 静音标记 ---------- */
.cx-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  font-size: var(--fs-2xs);
  color: var(--text-3);
  opacity: 0.9;
}

/* ---------- 在线绿点 ---------- */
.cx-online {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}
html[data-theme='dark'] .cx-online { border-color: #141a26; }

/* ---------- 通用面板（搜索 / 收藏 / 通话） ---------- */
.cx-panel {
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
}
.cx-panel-inner {
  width: 100%;
  max-width: 620px;
  max-height: 84dvh;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-2xl);
  overflow: hidden;
  animation: cx-panel-in var(--dur-3) var(--ease-out) both;
}
@keyframes cx-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.cx-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--divider);
}
/* 关闭按钮靠右，别和标题挤在一起 */
.cx-panel-head > strong { margin-right: auto; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.cx-panel-head > [data-close] { flex: none; }
.cx-panel-head input {
  flex: 1;
  padding: 9px 13px;
  font-size: var(--fs-base);
  outline: none;
}
.cx-panel-body { overflow: auto; padding: 10px 12px 18px; }
/* 设置面板：一组 = 小标题 + 控件 + 说明，组间用发丝线分隔 */
.cx-sec { padding: 12px 8px 14px; border-bottom: 1px solid var(--divider); }
.cx-sec:last-of-type { border-bottom: 0; }
.cx-sec-title {
  margin-bottom: 10px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-3);
}
.cx-sec .seg { margin-bottom: 0; }
.cx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cx-hint {
  display: block;
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-3);
}
.cx-hint-block { margin: 14px 8px 0; }
.cx-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  align-items: flex-start;
  transition: background-color var(--dur-1);
}
.cx-item:hover { background: var(--brand-soft); }
.cx-item .cx-item-main { min-width: 0; flex: 1; }
.cx-item .cx-item-title { font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-item .cx-item-sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-item .cx-item-time { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.cx-empty { padding: 34px 16px; text-align: center; font-size: var(--fs-sm); }

/* ---------- 通话界面（全屏深色，独立于主题） ---------- */
.cx-call {
  position: fixed;
  inset: 0;
  z-index: var(--z-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(circle at 50% 28%, #24304f, #0b0f1c 72%);
  color: #fff;
}
.cx-call .cx-call-name { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
.cx-call .cx-call-sub { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.66); }
.cx-call video {
  width: min(86vw, 720px);
  max-height: 62vh;
  border-radius: var(--r-xl);
  background: #000;
  object-fit: cover;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.cx-call .cx-call-local {
  position: absolute;
  right: 18px; top: 18px;
  width: 116px; height: 156px;
  border-radius: var(--r-md);
  object-fit: cover;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow-3);
}
.cx-call .cx-call-actions { display: flex; gap: 16px; }
.cx-call .cx-call-actions button {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  transition: transform var(--dur-1), background-color var(--dur-1);
}
.cx-call .cx-call-actions button:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.22); }
.cx-call .cx-call-actions button.hangup { background: #d94848; }
.cx-call .cx-call-actions button.on { background: #2fbf85; color: #04281a; }

/* ---------- 底部加载更多 ---------- */
.cx-loadmore {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-3);
  padding: 8px 0 2px;
}

/* ---------- 群公告条 ---------- */
.cx-notice {
  margin: 8px 12px 0;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  white-space: pre-wrap;
}

/* ---------- 表单块（群设置里复用） ---------- */
.cx-field { margin-bottom: 12px; }
.cx-field label {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--text-3);
}
.cx-field input, .cx-field textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--fs-base);
  font-family: inherit;
  outline: none;
}
.cx-btn {
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-line);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--dur-1), color var(--dur-1), transform var(--dur-1);
}
.cx-btn:hover { background: var(--surface-active); color: var(--text-1); }
.cx-btn.primary { background: var(--brand-grad); color: var(--brand-contrast); border-color: transparent; box-shadow: var(--shadow-brand); }
.cx-btn.danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }

/* ---------- 滚动条 ---------- */
/* 见 theme.css：全站统一，这里不再单独覆盖（避免 deep 主题下两套规则打架） */

/* ---------- 文件消息卡片 [2026-10-18] ----------
   原来文件消息是「📄 + truncate 单行」，两种后果：
   1) Word/压缩包/PDF 全是同一个图标，扫不出类型；
   2) 文件名被 ellipsis 截成「新建 Microsoft Wo…」。
   现在图标按扩展名区分，文件名允许换行、不截断。 */
.file-card {
  display: flex;
  align-items: center;
  gap: 9px;
  /* 气泡是 shrink-to-fit + overflow:hidden，文件卡片夹在中间：
     用 max-content / min-width 去"猜"内在尺寸的结果是短名字被压成两行、
     或者卡片撑破气泡把「下载」裁掉（都实测过）。
     干脆给固定宽度：短名字一行、长名字按宽度换行。 */
  width: 260px;
  /* 不要写 max-width:100% —— 百分比会跟气泡的 shrink-to-fit 形成循环，
     实测被压回 201px，长文件名要折 6 行。用 vw 兜住窄屏即可。 */
  max-width: calc(100vw - 96px);
  box-sizing: border-box;
  padding: 9px 11px;
  text-decoration: none;
  color: inherit;
}
.file-ico { flex: 0 0 auto; display: flex; line-height: 0; }
.file-svg { display: block; border-radius: var(--r-sm); box-shadow: 0 2px 6px rgba(40, 60, 100, 0.16); }
.file-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: normal;
  /* word-break 也会参与 intrinsic 计算（break-word ≈ anywhere），
     会让 max-content 退化成 1 个字符宽。中文本来就能按字换行，不需要它。 */
  word-break: normal;
  /* 这里不能用 overflow-wrap:anywhere —— 它同样参与 intrinsic size 计算，
     把名字的 max-content 宽度算成「1 个字符」，导致短名字也变两行。 */
  overflow-wrap: break-word;
  text-align: left;
}
.file-dl { flex: 0 0 auto; padding-left: 2px; font-size: var(--fs-xs); color: var(--text-3); }
/* 文件消息气泡：给一个明确的最小宽度，避免气泡自己 shrink-to-fit 到 235px
   而卡片固定 260px 被 overflow:hidden 裁掉右侧「下载」。 */
.bubble.has-file { min-width: min(292px, calc(100vw - 96px)); }

/* ---------- 发送失败提示条 [2026-10-18] ---------- */
.cx-failbar {
  position: fixed;
  left: 50%;
  bottom: 172px;
  transform: translateX(-50%);
  z-index: var(--z-max);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--danger-line);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-sm);
  color: var(--danger);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.cx-failbar-txt { white-space: nowrap; }
.cx-failbar-btn {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--danger);
  color: #fff;
}
.cx-failbar-btn.ghost { background: transparent; color: inherit; border: 1px solid currentColor; opacity: 0.7; }

/* ---------- 管理员移除的消息占位 [2026-10-18] ---------- */
.cx-removed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
}

/* ---------- 朋友圈互动红点 [2026-10-18] ---------- */
.cx-dot-badge {
  position: absolute;
  top: 4px; right: 6px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: #e0344f;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: var(--fw-semibold);
  box-shadow: 0 2px 6px rgba(224, 52, 79, 0.40);
}

/* ---------- 日期分割（外观在 theme.css，这里只保留间距微调） ---------- */