/* ============================================================
   大字·清晰版（字号缩放）
   三档：标准 1.0 / 大 1.3 / 超大 1.55
   ------------------------------------------------------------
   ⚠️ 本文件内的 px 值刻意不参与 --fs-scale 缩放（按钮尺寸、面板
      版式等），P1 批量替换脚本必须排除本文件，否则按钮会跟着变大。
   ⚠️ 修改本文件后同步升级 index.html 里的 ?v= 版本号。
   ============================================================ */

/* ===== 三档缩放系数（--fs-scale 基础值 1 定义在 base.css） ===== */
html[data-ts="l"]  { --fs-scale: 1.3;  }
html[data-ts="xl"] { --fs-scale: 1.55; }

/* ===== 非标准档提升次要文字对比度 =====
   原 --slate-400 #9CA3AF 白底仅 2.5:1，远低于 WCAG AA 4.5:1；
   非标准档统一提至 #6B7280（约 4.8:1）。 */
html[data-ts="l"],
html[data-ts="xl"] {
  --slate-400: #6B7280;
  --slate-300: #8B93A1;
}

/* ===== 切换按钮（尺寸固定，不随字号缩放） =====
   文案用中文「字号」而非 Aa：中老年用户对 Aa 符号识别率低，
   功能名要含蓄，但按钮本身必须一眼看懂。
   文字用 min() 限幅：大字档下稍放大以便看清，同时按钮外形保持稳定。 */
.tsize-btn {
  flex-shrink: 0;
  min-width: 46px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  color: var(--slate-700);
  font-family: inherit;
  font-size: min(15px, calc(13px * var(--fs-scale)));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent;
}
.tsize-btn:active { transform: scale(0.94); }

/* 已开启大字档时按钮高亮，提示"当前不是默认设置" */
html[data-ts="l"] .tsize-btn,
html[data-ts="xl"] .tsize-btn {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* 进门遮罩上的入口：定位到全屏右上角，避开居中的登录卡片 */
.tsize-btn--gate {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3100;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
}

/* 首页入口：头像左侧 */
.tsize-btn--home { margin-right: 14px; }
/* 聊天页入口：推到右侧、紧邻清空按钮 */
.tsize-btn--chat { margin-left: auto; margin-right: 2px; }

/* ===== 档位面板 ===== */
.tsize-mask {
  position: absolute;
  inset: 0;
  z-index: 3000;
  background: rgba(15, 23, 42, 0.45);
  display: none;
}
.tsize-mask.active { display: block; }

.tsize-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82%;
  overflow-y: auto;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.16);
  animation: tsizeUp 0.22s ease;
}
@keyframes tsizeUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.tsize-sheet-grip {
  width: 36px;
  height: 4px;
  margin: -8px auto 14px;
  border-radius: 999px;
  background: var(--slate-200);
}

.tsize-sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-800);
}
.tsize-sheet-sub {
  margin-top: 4px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--slate-400);
  line-height: 1.5;
}

/* 实时预览：字号跟随当前档位 */
.tsize-preview {
  padding: 16px;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  background: var(--slate-50);
  color: var(--slate-800);
  font-size: calc(14px * var(--fs-scale));
  line-height: 1.7;
}

.tsize-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 2px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.tsize-option:active { transform: scale(0.99); }
.tsize-option.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

.tsize-option-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--slate-300);
  border-radius: var(--radius-full);
  color: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.tsize-option.active .tsize-option-check {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
}

.tsize-option-body { flex: 1; min-width: 0; }
.tsize-option-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-800);
}
.tsize-option-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--slate-400);
}
.tsize-option-sample {
  flex-shrink: 0;
  color: var(--slate-600);
  line-height: 1.2;
}
.tsize-option[data-ts-value=""]  .tsize-option-sample { font-size: 14px; }
.tsize-option[data-ts-value="l"] .tsize-option-sample { font-size: 18px; }
.tsize-option[data-ts-value="xl"] .tsize-option-sample { font-size: 21px; }

.tsize-reset {
  width: 100%;
  padding: 12px;
  margin-top: 4px;
  border: none;
  background: none;
  color: var(--slate-400);
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* ===== 首次引导气泡：只出现一次，指向字号按钮 ===== */
.tsize-hint {
  position: absolute;
  z-index: 3200;
  display: none;
  padding: 9px 14px;
  border-radius: var(--radius-md);
  background: var(--slate-800);
  color: var(--white);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
  pointer-events: none;
}
.tsize-hint.active {
  display: block;
  animation: tsizeHintIn 0.24s ease;
}
.tsize-hint::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--slate-800);
}
@keyframes tsizeHintIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== 后悔条：切到大字后 5 秒内可一键还原 ===== */
.tsize-undo {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2500;
  display: none;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--slate-800);
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
  cursor: pointer;
}
.tsize-undo.active {
  display: flex;
  animation: tsizeDrop 0.24s ease;
}
@keyframes tsizeDrop {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.tsize-undo strong { font-weight: 700; }
.tsize-undo span { color: #FDE68A; font-weight: 600; }

/* ============================================================
   补充层：只放大字号会撑破容器，这里补偿行距 / 热区 / 间距
   （仅非标准档生效）
   ============================================================ */
/* 行距：全局提到 1.7，未显式声明 line-height 的正文自动跟随 */
html[data-ts="l"] body,
html[data-ts="xl"] body {
  line-height: 1.7;
}
/* 部分元素显式写了紧凑行距，非标准档统一放宽 */
html[data-ts="l"] .greeting-line3,
html[data-ts="xl"] .greeting-line3,
html[data-ts="l"] .history-item-summary,
html[data-ts="xl"] .history-item-summary,
html[data-ts="l"] .quick-card-desc,
html[data-ts="xl"] .quick-card-desc,
html[data-ts="l"] .section-title,
html[data-ts="xl"] .section-title,
html[data-ts="l"] .news-card-summary,
html[data-ts="xl"] .news-card-summary {
  line-height: 1.6;
}

/* 点击热区：底部导航与图标按钮至少 44px（WCAG 2.5.5） */
html[data-ts="l"] .nav-item,
html[data-ts="xl"] .nav-item {
  min-height: 52px;
}
html[data-ts="l"] .icon-btn,
html[data-ts="xl"] .icon-btn,
html[data-ts="l"] .tsize-btn,
html[data-ts="xl"] .tsize-btn {
  min-width: 44px;
  min-height: 44px;
}
/* 按钮内图标同步放大 */
html[data-ts="l"] .nav-item .icon,
html[data-ts="xl"] .nav-item .icon,
html[data-ts="l"] .icon-btn .icon,
html[data-ts="xl"] .icon-btn .icon {
  width: 26px;
  height: 26px;
}

/* 输入框：iOS Safari 在字号 <16px 时聚焦会自动放大整页，体验割裂。
   用 max() 保证任何档位都 ≥16px，同时不压制大字档的放大结果。 */
#message-input,
.input-group input {
  font-size: max(16px, calc(14px * var(--fs-scale)));
}

/* 底部导航：容器高度随档位增加，避免「图标 + 文字」撑出 72px */
html[data-ts="l"] .bottom-nav,
html[data-ts="xl"] .bottom-nav {
  height: calc(88px + env(safe-area-inset-bottom, 0px));
}
/* 中文每个字都是合法断行点，标签必须禁止折行 */
html[data-ts="l"] .nav-item span,
html[data-ts="xl"] .nav-item span {
  white-space: nowrap;
}

/* 聊天正文：行距放宽 + 长串（链接、英文）换行保护 */
html[data-ts="l"] .msg-body,
html[data-ts="xl"] .msg-body,
html[data-ts="l"] .system-bubble,
html[data-ts="xl"] .system-bubble {
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/* 卡片内边距补偿，避免字贴边 */
html[data-ts="l"] .quick-card,
html[data-ts="xl"] .quick-card,
html[data-ts="l"] .news-card,
html[data-ts="xl"] .news-card {
  padding: 16px;
}

/* 标签云：内边距与行距补偿，避免放大后粘连 */
html[data-ts="l"] .hot-tag,
html[data-ts="xl"] .hot-tag {
  padding: 8px 16px;
  line-height: 1.6;
}