/* v11.css —— 11 组件层：外观切换（两档 浅色/深色）+ 客服二维码显性 dock 与居中弹窗。
   来源：暗色模式设计稿定稿（docs/前端参考/2026-08-03-暗色模式/，§13/§14 亮暗通用基础样式迁入）；
   暗色差异在 theme-dark.css §13。精确值勿改——改前对齐设计稿交付说明。 */

/* ============ 外观切换（头像菜单内；两档，默认浅色，交互在 app.js wireTheme） ============ */
.theme-sec { padding: 4px 6px 8px; }
.theme-sec-label { font-size: 11px; color: var(--ink-3); padding: 2px 6px 6px; }
.theme-seg { display: flex; gap: 2px; background: var(--seg-bg); border-radius: 9px; padding: 2px; }
.theme-opt { flex: 1; height: 26px; border: 0; border-radius: 7px; background: transparent; font-size: 11px; font-weight: 600; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast); }
.theme-opt:hover { color: var(--ink); }
.theme-opt.is-active { background: var(--bg); color: var(--green-d); font-weight: 700; box-shadow: 0 1px 3px rgba(20, 23, 27, .10); }
.theme-sep { height: 1px; background: var(--line); margin: 2px 6px 4px; }

/* ============ 客服二维码显性化（09 fab+侧栏面板退役 → dock+居中弹窗；交互在 support.js） ============
   dock 挂 .support-root 既有锚点（workspace 右下 absolute，z=20：composer(15) 之上、drawer(30) 之下），
   与输入条中线垂直对齐（媒体三档见文件尾）；无码/过期由 support.js 隐藏整个 #support-root。
   码图底恒白（白色画框策略同族）。 */
.qr-dock { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 8px 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-card); cursor: zoom-in; transition: border-color var(--t-fast), transform .12s var(--ease); }
.qr-dock:hover { border-color: var(--line-hover); transform: translateY(-1px); }
.qr-dock:active { transform: scale(.96); }
.qr-dock-img { width: 74px; height: 74px; border-radius: 8px; display: block; background: #fff; }
.qr-dock-t { font-size: 10.5px; font-weight: 600; color: var(--ink-2); line-height: 1; }
/* 居中弹窗（沿 v9 inv-dlg 形制；z 190 在 lightbox(200) 之下——弹窗内码图可再放大） */
.spx-dlg { position: fixed; inset: 0; z-index: 190; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 23, 27, .42); animation: mg-fade .16s ease both; }
.spx-card { position: relative; width: 100%; max-width: 320px; background: var(--pop); border-radius: 20px; padding: 24px 22px 20px; text-align: center; box-shadow: var(--sh-pop); animation: mg-pop .2s var(--ease) both; }
.spx-x { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: 0; background: none; color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px; }
.spx-x:hover { color: var(--ink); background: var(--soft); }
.spx-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.spx-note { margin-top: 5px; font-size: 12.5px; color: var(--ink-3); }
.spx-qr { margin: 14px auto 0; width: 196px; height: 196px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px; }
.spx-qr img { width: 100%; height: 100%; display: block; cursor: zoom-in; }
.spx-divider { height: 1px; background: var(--line); margin: 16px 0 12px; }
.spx-sub { font-size: 14px; font-weight: 800; color: var(--ink); }
.spx-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--green); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.spx-link:hover { text-decoration: underline; }

/* 垂直对位（设计稿二轮评审定稿）：dock 与输入条中线对齐——默认态输入条 ≈100 高、
   距底 ≈70 → 中线距底 ≈120。≥1360 全尺寸档（dock≈107 高）bottom:54（1440 实测偏差 0px）；
   721~1359 紧凑档（≈68 高）bottom:74 且贴右防压发送键（1280 右侧仅 ~88px，实测间距 10px、偏差 −1px）；
   ≤720 沿 v9 老浮标位（bottom:196）紧凑档。输入区布局变动时按中线重算。 */
@media (min-width: 1360px) {
  .support-root { bottom: 54px; }
}
@media (min-width: 721px) and (max-width: 1359px) {
  .support-root { right: 8px; bottom: 74px; }
  .qr-dock { padding: 6px; border-radius: 12px; }
  .qr-dock-img { width: 56px; height: 56px; }
  .qr-dock-t { display: none; }
}
@media (max-width: 720px) {
  .qr-dock-img { width: 56px; height: 56px; }
  .qr-dock-t { display: none; }
  .qr-dock { padding: 6px; border-radius: 12px; }
}