/* RV-HOMESPLIT r64（2026-11-01）：从 templates/index.html 的内联块抽出，
   随 ?v=20261101e 缓存；改动请改这里，不要再往回塞内联。 */
  /* ---------- 顶栏（即梦式：品牌第一个 + 功能栏） ---------- */
  .brand .brand-logo { height: 40px; width: auto; display: block; }
  /* ---------- 顶栏用户名入口 + 账户中心弹窗（共享版见 _acct_center.html） ---------- */
  .brand .brand-word {
        display: inline-block; height: 22px; width: 74px;
        background: var(--txt);
        -webkit-mask: url("/static/uploads/sunum-word.png") center / contain no-repeat;
        mask: url("/static/uploads/sunum-word.png") center / contain no-repeat;
      }
  /* ---------- 通用卡片 / 按钮 / 表单 ---------- */
      .card, .work {
        background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
        box-shadow: var(--shadow); padding: 36px 40px; margin-bottom: 36px;
      }
  .btn-pri, .big-btn, .hero .cta { background: var(--acc); color: var(--acc-txt); border: none; }
  .btn-pri:hover, .big-btn:hover, .hero .cta:hover { opacity: .88; }
  /* ---------- 主视觉（参考主流创作首页版式） ---------- */
  .hero { position: relative; text-align: center; padding: 60px 0 22px; }
  /* ★ R42-FIX：上面那条柔光是「绝对定位 + 两侧各溢出 18%」，它属于纯装饰，
     却会实际撑大文档横向可滚动范围（实测 768→879、1280→1369，多出一截空白可横拖）。
     用 overflow-x: clip 就地裁掉溢出部分：clip 不建立滚动容器，不影响内部 sticky/定位，
     且光斑左右边缘本来就是全透明，视觉零变化。 */
  .hero { overflow-x: clip; }
  /* 标题后的柔光，暗色下有科技感，亮色下只是淡淡一层，不脏背景 */
  .hero::before { content: ""; position: absolute; inset-inline: -18%; top: -78px; height: 290px;
        background: radial-gradient(56% 100% at 50% 36%, rgba(79,124,255,.16), rgba(79,124,255,0) 72%);
        pointer-events: none; }
  /* ★ R42-FIX：手机端 48px 横向滚动的真源就是上面这条「标题柔光」。
     桌面端 hero 宽 ~1000px，-18% = ±180px 溢出两侧没关系；窄屏 hero 只有 ~358px，
     -18% 仍按比例撑出 ±64px → 伪元素实宽 487px、右边界 438 > 视口 390，
     而 .hero 没有 overflow 裁剪，文档可滚动宽度被撑到 438；
     移动端 Chrome 据此把布局视口扩张到 438，fixed 的 .hm-ai-fab / .ai-panel
     便改以 438 为包含块（于是悬浮按钮 right 算成 422、被推出屏幕右缘）。
     修法只收敛柔光本身，不动任何布局：窄屏下让光斑贴住 hero 宽度，
     因为它本来就是低透明度渐隐，视觉几乎无损。 */
  @media (max-width: 720px) {
        .hero::before { inset-inline: 0; }
      }
  .hero > * { position: relative; }
  .hero .hello { font-size: clamp(26px, 3.8vw, 36px); font-weight: 700; letter-spacing: .2px; line-height: 1.28; }
  .hero .hello-sub { margin-top: 10px; font-size: 13.5px; color: var(--mut); }

  /* 分段控件：生成 / 画布 */
  .hero-seg { display: inline-flex; gap: 2px; margin: 18px auto 0; padding: 3px;
        background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-pill); }
  .hero-seg .seg { border: none; background: transparent; color: var(--mut); font-family: inherit;
        font-size: 13px; font-weight: 600; padding: 7px 24px; border-radius: var(--r-pill); cursor: pointer;
        transition: background .18s var(--ease), color .18s var(--ease); }
  .hero-seg .seg:hover { color: var(--txt); }
  .hero-seg .seg.on { background: var(--acc); color: var(--acc-txt); box-shadow: 0 0 14px rgba(255,255,255,.12); }

  /* 创作输入卡 */
  .hero-card { position: relative; margin: 16px auto 0; max-width: 820px; text-align: start;
        background: linear-gradient(180deg, var(--panel2), var(--panel));
        border: 1px solid var(--line2); border-radius: var(--r-lg); padding: 13px 13px 9px;
        box-shadow: var(--shadow); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
  /* R56 聚焦态升级：双色渐变描边（蓝→青→紫，border-box 双背景实现）+ 外圈微光；
     padding-box 层保留原 panel 渐变，视觉上只是描边换成了流动的冷色 */
  .hero-card.on { border-color: transparent;
        background: linear-gradient(180deg, var(--panel2), var(--panel)) padding-box,
                    linear-gradient(135deg, rgba(79,124,255,.75), rgba(53,182,240,.55) 55%, rgba(122,90,248,.5)) border-box;
        box-shadow: 0 0 0 3px rgba(79,124,255,.10), 0 14px 44px rgba(79,124,255,.12), var(--shadow); }
  .hc-row { display: flex; align-items: flex-start; gap: 10px; }
  .hc-att { width: 40px; height: 40px; border-radius: 12px; flex: none; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; position: relative;
        background: var(--sel); border: 1px solid var(--line); color: var(--mut);
        transition: color .15s, border-color .15s; }
  .hc-att:hover { color: var(--txt); border-color: var(--line2); }
  .hc-att.on { color: var(--txt); border-color: var(--line2); background: var(--hover); }
  .hc-body { flex: 1; min-width: 0; position: relative; padding-top: 7px; }
  .hc-body textarea { width: 100%; min-height: 50px; max-height: 190px; resize: none; border: none;
        background: transparent; color: var(--txt); font: inherit; font-size: 14.5px; line-height: 1.7;
        outline: none; padding: 0; display: block; }
  /* 富占位符（textarea 原生 placeholder 无法分段着色，故用覆盖层） */
  .hc-ph { position: absolute; inset-inline-start: 0; top: 7px; pointer-events: none;
        font-size: 14.5px; line-height: 1.7; color: var(--mut); }
  .hc-ph em { font-style: normal; color: var(--mut2); }
  .hc-ph.hide { display: none; }
  /* 自动识别到的技能提示（可见、可移除，不做静默改写） */
  .hc-auto { display: none; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--mut); }
  .hc-auto.on { display: inline-flex; }
  .hc-auto b { font-weight: 700; color: #4f7cff; }
  .hc-auto i { cursor: pointer; font-style: normal; opacity: .65; }
  .hc-auto i:hover { opacity: 1; color: var(--err-txt); }

  /* 底部工具条 */
  .hc-bar { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
  .hc-left, .hc-right { display: flex; align-items: center; gap: 2px; }
  .hc-right { margin-inline-start: auto; }
  .hc-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent;
        color: var(--mut); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 9px;
        min-height: 28px; line-height: 1;
        border-radius: 9px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
  .hc-btn:hover { background: var(--hover); color: var(--txt); }
  .hc-btn.on { background: var(--sel); color: var(--txt); }
  .hc-btn .caret { width: 9px; height: 9px; flex: none; opacity: .6; }
  /* 偏好摘要胶囊（即梦式「16:9 / 高品质版」）：描边胶囊 + 单行截断 */
  .hc-pref-chip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
        min-height: 28px; line-height: 1;
        color: var(--mut); max-width: 200px; }
  .hc-pref-chip:hover { border-color: var(--acc); color: var(--txt); }
  .hc-pref-chip.on { background: var(--sel); border-color: var(--acc); color: var(--txt); }
  .hc-pref-chip #heroPrefChipTxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hc-round { width: 34px; height: 34px; border-radius: 50%; border: none; flex: none; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; background: transparent;
        color: var(--mut); transition: background .15s, color .15s, opacity .15s; }
  .hc-round:hover { background: var(--hover); color: var(--txt); }
  .hc-round.rec { background: var(--err-bg); color: var(--err-txt); animation: hcRec 1.2s ease-in-out infinite; }
  .hc-send { background: var(--acc); color: var(--acc-txt); }
  .hc-send:hover { background: var(--acc); color: var(--acc-txt); opacity: .88; }
  .hc-send:disabled { opacity: .35; cursor: not-allowed; }
  /* R56 发送键冷光：暗色下主操作按钮带一圈强调色光晕，hover 增强 */
  html[data-theme="dark"] .hc-send:not(:disabled) { box-shadow: 0 2px 16px rgba(244,244,240,.22); }
  html[data-theme="dark"] .hc-send:not(:disabled):hover { box-shadow: 0 2px 22px rgba(244,244,240,.34); }
  @keyframes hcRec { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

  /* 下拉菜单（Agent 选择 / 技能 / 添加参考） */
  .hc-menu { position: absolute; top: calc(100% + 8px); bottom: auto; inset-inline-start: 13px; min-width: 210px;
        max-height: 300px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line2);
        border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; z-index: 40;
        display: none; text-align: start; }
  .hc-menu.on { display: block; }
  .hc-menu .mi { display: flex; align-items: center; gap: 9px; width: 100%; border: none;
        background: transparent; color: var(--txt); font-family: inherit; font-size: 13px; text-align: start;
        padding: 9px 10px; border-radius: 9px; cursor: pointer; }
  .hc-menu .mi:hover { background: var(--hover); }
  .hc-menu .mi .mt { font-weight: 600; }
  .hc-menu .mi>span:not(.mico):not(.ck) { flex: 1; min-width: 0; }
  .hc-menu .mi .md { font-size: 11.5px; color: var(--mut); margin-top: 2px; font-weight: 400; display: block; }
  .hc-menu .mtag { margin-inline-start: 6px; }
  .hc-menu .mi .ck { margin-inline-start: auto; color: #4f7cff; font-weight: 800; opacity: 0; }
  .hc-menu .mi.on .ck { opacity: 1; }
  .hc-menu .msep { height: 1px; background: var(--line); margin: 4px 6px; }
  .hc-menu .mtitle { font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--mut2);
        padding: 6px 10px 4px; text-transform: uppercase; }
  /* —— 菜单扩展：图标列 / 官方标签 / 搜索 / 面板控件（复刻即梦式菜单，2026-10-11） —— */
  .hc-menu .mi .mico { flex: none; display: inline-flex; color: var(--mut); }
  .hc-menu .mi .mico .ico { display: inline-flex; }
  .hc-menu .mi.on .mt { color: var(--txt); }
  .hc-menu .mtag { flex: none; font-size: 10px; font-weight: 600; color: #4f7cff;
        border: 1px solid rgba(79,124,255,.45); border-radius: 5px; padding: 0 4px; line-height: 15px; }
  .hc-menu .mhead { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; }
  .hc-menu .mhead .mtitle { padding: 0; flex: none; }
  .hc-menu .mhead .mlnk { margin-inline-start: auto; border: none; background: transparent; color: var(--mut);
        font-family: inherit; font-size: 11.5px; cursor: pointer; padding: 2px 4px; border-radius: 6px; white-space: nowrap; }
  .hc-menu .mhead .mlnk:hover { color: var(--txt); background: var(--hover); }
  .hc-menu .msearch { display: flex; align-items: center; gap: 7px; margin: 2px 4px 8px; padding: 7px 10px;
        border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); color: var(--mut); }
  .hc-menu .msearch input { flex: 1; min-width: 0; border: none; outline: none; background: transparent;
        color: var(--txt); font-family: inherit; font-size: 12.5px; }
  .hc-menu .msearch .ico { display: inline-flex; opacity: .7; }
  .hc-menu .mempty { padding: 14px 10px; text-align: center; font-size: 12px; color: var(--mut2); }
  .hc-menu .mi.hl .mt { color: #4f7cff; }
  /* 生成偏好面板（自动按钮弹出） */
  .hc-pref { min-width: 300px; padding: 10px; }
  .hc-pref .prow { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; }
  .hc-pref .prow .pt { font-size: 13px; font-weight: 700; }
  .hc-pref .psw { margin-inline-start: auto; position: relative; width: 34px; height: 19px; flex: none;
        border-radius: 999px; background: var(--line2); border: none; cursor: pointer; transition: background .15s; }
  .hc-pref .psw::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 15px; height: 15px;
        border-radius: 50%; background: #fff; transition: transform .15s; }
  .hc-pref .psw.on { background: var(--acc); }
  .hc-pref .psw.on::after { transform: translateX(15px); }
  html[dir="rtl"] .hc-pref .psw.on::after { transform: translateX(-15px); }
  .hc-pref .plab { font-size: 11px; font-weight: 700; color: var(--mut2); padding: 6px 4px 5px; }
  .hc-pref .pseg { display: flex; background: var(--panel2); border: 1px solid var(--line);
        border-radius: 10px; padding: 3px; gap: 3px; }
  .hc-pref .pseg button { flex: 1; border: none; background: transparent; color: var(--mut); font-family: inherit;
        font-size: 12.5px; font-weight: 600; padding: 6px 0; border-radius: 8px; cursor: pointer; }
  .hc-pref .pseg button.on { background: var(--hover); color: var(--txt); }
  .hc-pref .prats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .hc-pref .prat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 0 5px;
        border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--mut);
        font-family: inherit; font-size: 10.5px; cursor: pointer; }
  .hc-pref .prat:hover { color: var(--txt); border-color: var(--line2); }
  .hc-pref .prat.on { color: #4f7cff; border-color: rgba(79,124,255,.55); background: rgba(79,124,255,.08); }
  .hc-pref .prat i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
  .hc-pref .pmodel { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2);
        color: var(--txt); font-family: inherit; font-size: 12.5px; padding: 8px 10px; outline: none; cursor: pointer; }
  /* =====================================================================
     ★ R13【CSS 动画区】模型选择栏（偏好 chip + 积分预览）的显隐动画
     ---------------------------------------------------------------------
     设计目标：对标即梦首页 —— 控件不是"啪"地出现/消失，而是
     淡入淡出（opacity）+ 高度塌陷（max-height/max-width）+ 轻微位移（translateY）
     三段合一的平滑过渡，节奏 200ms。
     为什么不用 display: none 直接切：display 不可过渡，只能靠 JS 卸载前先加
     leave 类，等过渡结束再移除节点（见 heroAnimUnmount）。
     ⚠ 动画时长改动只需改 --hc-anim 一处，JS 侧通过 readAnimMs() 读取同一变量，
        保证 CSS 过渡与 JS 卸载时机永不脱节。
     ===================================================================== */
  .hero-card { --hc-anim: 200ms; --hc-ease: cubic-bezier(.22, .61, .36, 1); }
  .hc-anim { overflow: hidden; }
  .hc-anim-in { opacity: 0; transform: translateY(4px) scale(.97);
        max-width: 0; max-height: 0; padding-inline: 0; margin-inline-end: 0; border-width: 0; }
  .hc-anim-in.hc-anim-on { opacity: 1; transform: none;
        max-width: 320px; max-height: 40px; margin-inline-end: 0;
        transition: opacity var(--hc-anim) var(--hc-ease),
                    transform var(--hc-anim) var(--hc-ease),
                    max-width var(--hc-anim) var(--hc-ease),
                    max-height var(--hc-anim) var(--hc-ease),
                    padding var(--hc-anim) var(--hc-ease),
                    border-width var(--hc-anim) var(--hc-ease); }
  .hc-anim-out { opacity: 0 !important; transform: translateY(-2px) scale(.97) !important;
        max-width: 0 !important; max-height: 0 !important; padding-inline: 0 !important;
        border-width: 0 !important;
        transition: opacity var(--hc-anim) var(--hc-ease),
                    transform var(--hc-anim) var(--hc-ease),
                    max-width var(--hc-anim) var(--hc-ease),
                    max-height var(--hc-anim) var(--hc-ease) !important; }
  /* 尊重系统「减少动态效果」：关掉位移与过渡，只保留瞬时显隐 */
  @media (prefers-reduced-motion: reduce) {
    .hc-anim-in, .hc-anim-in.hc-anim-on, .hc-anim-out { transition: none !important; transform: none !important; }
  }

  /* =====================================================================
     ★ R13【积分实时预览】—— 固定位置：底部工具条右侧（发送键左侧）
     ===================================================================== */
  .hc-cost { display: inline-flex; align-items: center; gap: 6px; flex: none;
        border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; margin-inline-end: 2px;
        background: var(--panel2); color: var(--txt); font-size: 12px; font-weight: 650;
        white-space: nowrap; cursor: default; }
  .hc-cost .cs-ic { display: inline-flex; opacity: .8; }
  .hc-cost b { font-weight: 800; font-variant-numeric: tabular-nums; }
  .hc-cost .cs-sub { color: var(--mut); font-weight: 600; }
  .hc-cost.is-free { border-color: rgba(24,121,78,.45); color: var(--ok-txt); background: var(--ok-bg); }
  .hc-cost.is-loading { color: var(--mut); }
  .hc-cost.is-loading b { position: relative; display: inline-block; min-width: 26px; height: 1em;
        overflow: hidden; vertical-align: -.12em; }
  .hc-cost.is-loading b::after { content: ""; position: absolute; inset: 0;
        background: linear-gradient(90deg, transparent, var(--line2), transparent);
        animation: hcShimmer 1.1s linear infinite; }
  @keyframes hcShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
  .hc-cost.is-err { border-color: rgba(195,66,63,.45); color: var(--err-txt); background: var(--err-bg); }
  .hc-cost.is-member { border-color: rgba(138,97,0,.45); color: var(--warn-txt); background: var(--warn-bg); }
  .hc-cost.is-member b { font-weight: 700; }

  /* =====================================================================
     ★ R13【任务执行中锁定】Agent 下拉 / 模型下拉 / 参数按钮全部置灰
     ===================================================================== */
  .hc-btn.is-locked, .hc-pref-chip.is-locked { opacity: .45; cursor: not-allowed; }
  .hc-btn.is-locked:hover, .hc-pref-chip.is-locked:hover { background: transparent; color: var(--mut); }
  .hc-pref .pmodel:disabled, .hc-pref .prat:disabled, .hc-pref .popt:disabled {
        opacity: .45; cursor: not-allowed; }
  .hc-bar.is-locked::after { content: "🔒"; font-size: 10px; margin-inline-start: 6px; opacity: .6; }

  /* =====================================================================
     ★ R13【下拉避让】空间不足时向上弹出（.hc-menu.up）+ 缩放时重新定位
     ===================================================================== */
  .hc-menu.up { top: auto; bottom: calc(100% + 8px); }
  .hc-menu { max-height: min(60vh, 420px); overscroll-behavior: contain; }
  /* 模型列表的加载 / 失败 / 重试占位行（双语提示，不崩页面） */
  .hc-menu .mi.is-msg { color: var(--mut); cursor: default; }
  .hc-menu .mi.is-msg:hover { background: transparent; }
  .hc-menu .mi.is-err { color: var(--err-txt); }
  .hc-menu .mi .spin { width: 12px; height: 12px; border-radius: 50%; flex: none;
        border: 2px solid var(--line2); border-top-color: var(--acc); animation: hcSpin .7s linear infinite; }
  @keyframes hcSpin { to { transform: rotate(360deg); } }
  .hc-menu .mi .retry { margin-inline-start: auto; font-size: 11px; font-weight: 700;
        color: #4f7cff; text-decoration: underline; }
  /* 会员专属模型的锁标 */
  .hc-menu .mi .lock, .hc-pref .pmodel option:disabled { opacity: .75; }
  .hc-menu .mi .mid-lock { flex: none; font-size: 11px; color: var(--warn-txt); }

  /* 参数选择：横向胶囊行（分辨率 / 画质 / 时长） */
  .hc-pref .popts { display: flex; flex-wrap: wrap; gap: 5px; }
  .hc-pref .popt { border: 1px solid var(--line); border-radius: 9px; background: transparent;
        color: var(--mut); font-family: inherit; font-size: 12px; font-weight: 600;
        padding: 6px 11px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
  .hc-pref .popt:hover { color: var(--txt); border-color: var(--line2); }
  .hc-pref .popt.on { color: #4f7cff; border-color: rgba(79,124,255,.55); background: rgba(79,124,255,.08); }

  /* =====================================================================
     ★ R13【维语（维吾尔文）防溢出】—— alkatip tor tom 字体，变音符号需更多行高
     ---------------------------------------------------------------------
     维吾尔文为阿拉伯字母体系：连写 + 上下变音符号，同字号下实际字高更大。
     若沿用中文行高，会出现「上下吃字 / 换行重叠 / 胶囊文字截断」。
     这里对新控件统一：放宽行高与内边距、允许换行、关键单行元素截断而不溢出。
     字体族沿用 sunum.css 的 html[lang="ug"] 全局栈（Alkatip Kitab/Tor Tom）。
     ===================================================================== */
  html[lang="ug"] .hc-btn, html[lang="ug"] .hc-cost, html[lang="ug"] .hc-pref .popt,
  html[lang="ug"] .hc-pref .pseg button, html[lang="ug"] .hc-menu .mi {
        line-height: 1.75; padding-block: 7px; }
  html[lang="ug"] .hc-cost { padding-block: 6px; max-width: 62vw; }
  html[lang="ug"] .hc-cost .cs-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[lang="ug"] .hc-pref-chip { padding-block: 6px; }
  html[lang="ug"] .hc-menu { max-height: min(64vh, 460px); }
  html[lang="ug"] .hc-menu .mi { padding-block: 10px; }
  html[lang="ug"] .hc-menu .mi .md { line-height: 1.7; }
  html[lang="ug"] .hc-pref .plab, html[lang="ug"] .hc-pref .prat { line-height: 1.6; }
  /* 窄屏：积分胶囊与模型栏允许换到下一行，不挤破输入卡 */
  @media (max-width: 560px) {
    .hc-cost { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
    .hc-bar { row-gap: 6px; }
  }
  html[dir="rtl"] .hc-cost .cs-ic, html[dir="rtl"] .hc-btn .caret { transform: scaleX(-1); }

  /* ＋ 附件预览态（选中文件后原位显示缩略图，× 移除） */
  .hc-att.has { padding: 0; overflow: visible; border-color: rgba(79,124,255,.5); }
  .hc-att.has img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
  .hc-att.has .fvid { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
        background: var(--acc); color: var(--acc-txt); border-radius: 12px; }
  .hc-att .att-x { position: absolute; top: -6px; inset-inline-end: -6px; width: 17px; height: 17px;
        border-radius: 50%; border: none; background: var(--acc); color: var(--acc-txt); font-size: 10px;
        line-height: 17px; text-align: center; cursor: pointer; padding: 0; display: none; }
  .hc-att.has .att-x { display: block; }

  /* 技能胶囊 */
  .hero-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
        margin: 16px auto 0; max-width: 900px; }
  .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
        background: var(--panel); color: var(--txt); font-family: inherit; font-size: 12.5px;
        padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer;
        transition: border-color .15s, background .15s, transform .15s, color .15s; }
  .chip:hover { border-color: var(--line2); background: var(--panel2); transform: translateY(-1px); }
  .chip.more { color: var(--mut); border-style: dashed; }
  .chip.more:hover { color: var(--txt); }
  /* R53：手机端技能胶囊单行横滑（不换行堆叠，GitHub 移动端范式），触控目标 ≥38px */
  @media (max-width: 720px) {
    .hero-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
      scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 4px 6px; }
    .hero-chips::-webkit-scrollbar { display: none; }
    .chip { flex: none; min-height: 38px; }
    /* R55b 滚动边缘渐隐：由 JS 按可滚动位置挂 .hc-fade-l/.hc-fade-r（到边即撤，不遮挡末项） */
    .hero-chips.hc-fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
    .hero-chips.hc-fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent); }
    .hero-chips.hc-fade-l.hc-fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent); }
    /* 富占位符是绝对定位覆盖层：窄屏下维语文案折 3-4 行会压到底部工具栏 →
       维语输入框最小高度抬到占位符实际高度（zh 2 行在 50px 内，不受影响） */
    html[lang="ug"] .hc-body textarea { min-height: 104px; }
  }
  .qwen-box { margin: 30px auto 42px; max-width: 780px; background: var(--panel); border: 1px solid var(--line);
        border-radius: 18px; padding: 18px 18px 14px; text-align: left; box-shadow: var(--shadow); }
  .qwen-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .qwen-logo { background: linear-gradient(135deg, #4f46e5, #9333ea); color: #fff; font-weight: 800;
        font-size: 13px; padding: 3px 11px; border-radius: 8px; letter-spacing: .3px; }
  .qwen-head .qwen-name { font-weight: 700; font-size: 14.5px; color: var(--txt); }
  .qwen-cost { margin-left: auto; font-size: 12px; color: var(--mut); white-space: nowrap; }
  .qwen-log { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
        padding: 4px 2px 12px; }
  .qb { max-width: 86%; padding: 9px 13px; border-radius: 13px; font-size: 14px; line-height: 1.65;
        white-space: pre-wrap; word-break: break-word; }
  .qb.user { align-self: flex-end; background: var(--acc); color: var(--acc-txt); }
  .qb.ai { align-self: flex-start; background: var(--panel2); border: 1px solid var(--line); color: var(--txt); }
  .qb.ai.err { color: #dc2626; }
  .qwen-main { border: 1px solid var(--line); border-radius: 16px; background: var(--panel2);
        padding: 10px 12px 8px; transition: border-color .15s; }
  .qwen-main:focus-within { border-color: var(--acc); }
  .qwen-main textarea { width: 100%; min-height: 64px; max-height: 160px; resize: none; border: none;
        background: transparent; color: var(--txt); font-size: 14.5px; font-family: inherit; line-height: 1.6;
        outline: none; }
  .qwen-main textarea::placeholder { color: var(--mut2); }
  .qwen-toolbar { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
  .qbtn { border: 1px solid var(--line); background: var(--panel); color: var(--mut); border-radius: 10px;
        padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
        transition: all .15s; }
  .qbtn:hover { border-color: var(--line2); color: var(--txt); }
  .qbtn.go { background: var(--acc); color: var(--acc-txt); border-color: transparent; font-weight: 700; }
  .qbtn.go:disabled { opacity: .45; cursor: not-allowed; }
  .qbtn.add { font-size: 15px; padding: 5px 10px; }
  .qflex { flex: 1; }
  .qmodel { border: 1px solid var(--line); background: var(--panel); color: var(--txt); border-radius: 10px;
        padding: 6px 10px; font-size: 12.5px; font-family: inherit; outline: none; cursor: pointer; max-width: 190px; }
  .qchip { display: inline-flex; align-items: center; gap: 4px; background: var(--sel); color: var(--txt);
        font-size: 12px; padding: 4px 10px; border-radius: 8px; cursor: pointer; max-width: 230px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qwen-att { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  /* 模板卡（即梦新建画布/视频创作/图像创作风格） */
      .tpl-section { margin-top: 44px; }
  .tpl-label { font-size: 13px; color: var(--mut); font-weight: 700; letter-spacing: 1px; margin-bottom: 14px; text-transform: uppercase; }
  .tpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
  .tpl {
        position: relative; text-align: left; background: var(--panel); border: 1px solid var(--line);
        border-radius: var(--r-md); padding: 18px 18px 16px; cursor: pointer; font-family: inherit;
        transition: all .15s ease; overflow: hidden; color: var(--txt);
        min-height: 132px; display: flex; flex-direction: column;
      }
  .tpl:hover { border-color: var(--line2); transform: translateY(-1px); box-shadow: var(--shadow); }
  /* 维语 RTL：卡片文字改为右起，与右上角图标同侧，避免文字贴左边、图标孤悬右边 */
  html[dir="rtl"] .tpl { text-align: right; }
  /* R55b 卡片光泽扫过（sheen sweep）：纯 transform 动画，pointer-events:none 不拦点击 */
  .tpl::after { content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(115deg, transparent 32%, var(--sheen) 50%, transparent 68%);
        transform: translateX(-130%); transition: transform .55s ease; }
  .tpl:hover::after { transform: translateX(130%); }
  @media (prefers-reduced-motion: reduce) { .tpl::after { display: none; } }
  /* R56 卡片入场：滚动进入视口时淡入上移。只有 JS 给 html 加了 rv-on 才生效
     （无 JS / reduced-motion 永不隐藏，杜绝整页空白）；rv-in 揭示、
     rv-done 在动画结束后把 transition 还给基础 .15s，hover 手感不受拖累。 */
  html.rv-on .tpl { transition: opacity .55s var(--ease), transform .55s var(--ease); }
  html.rv-on .tpl:not(.rv-in) { opacity: 0; transform: translateY(12px); }
  html.rv-on .tpl.rv-done { transition: all .15s ease; }
  .tpl .tic {
        width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
        font-size: 19px; line-height: 1; background: var(--sel); margin-bottom: 12px; flex: 0 0 auto;
      }
  .tpl .t { font-weight: 700; font-size: 14.5px; line-height: 1.35; }
  /* R52：描述最多 2 行（维语长文案不再拖出 3-4 行墙） */
  .tpl .d { font-size: 12px; color: var(--mut); margin-top: 4px; line-height: 1.6;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tpl .tag {
        position: absolute; top: 12px; right: 12px; font-size: 10.5px; font-weight: 700;
        color: var(--mut2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 8px;
      }
  .tpl.soon { cursor: default; opacity: .82; }
  .tpl.soon .tag { color: var(--mut2); }

  /* ---- 课程中心独立入口条（2026-10-30）----
     付费系统课与免费工具不是同一类资产，单独成区，用一条横向 band 承载：
     图标 + 标题 + 一句话说明 + 三点权益 + 右侧 CTA。纯中性渐变，不引新色值。 */
  .course-band { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
        padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-md);
        background: linear-gradient(105deg, var(--sel), transparent 58%);
        text-decoration: none; color: var(--txt); transition: border-color .15s ease, transform .15s ease; }
  .course-band:hover { border-color: var(--line2); transform: translateY(-1px); }
  .cb-ic { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--line); background: var(--panel2, var(--sel)); }
  .cb-tx { flex: 1 1 320px; min-width: 0; }
  .cb-t { font-size: 15.5px; font-weight: 750; }
  .cb-d { font-size: 12.5px; color: var(--mut); margin-top: 5px; line-height: 1.65; }
  .cb-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .cb-meta span { font-size: 11.5px; color: var(--mut2); border: 1px solid var(--line);
        border-radius: var(--r-pill); padding: 2px 9px; }
  .cb-go { flex: 0 0 auto; font-size: 13px; font-weight: 650; padding: 9px 18px;
        border-radius: var(--r-pill); border: 1px solid var(--line2); white-space: nowrap; }
  .course-band:hover .cb-go { background: var(--sel); }
  @media (max-width: 640px) {
    .course-band { padding: 14px; gap: 11px; }
    .cb-ic { width: 38px; height: 38px; border-radius: 10px; }
    .cb-t { font-size: 14.2px; }
    .cb-d { font-size: 12.5px; margin-top: 4px; }   /* R68: 11.5px 手机上不可读 */
    .cb-meta { margin-top: 8px; gap: 6px; }
    .cb-meta span { font-size: 12px; padding: 2px 8px; }  /* R68: 10.6px → 12px 地板 */
    .cb-go { width: 100%; text-align: center; font-size: 12.5px; padding: 10px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    /* R68：触控目标与微字地板（hero 分段钮 32px 偏小；AI 提示行 10.5px） */
    .hero-seg .seg { min-height: 40px; }
    .ai-tip { font-size: 12px !important; }
  }

  /* ---- HP-OPT（2026-10-23 首页优化）----
     ② bento 大卡：高频 4 项各占半行（视觉分层：图标列 + 文本列，避免标题被挤成多行）。
     创作区固定 6 列：4 张 big（各占 3 格）+ 6 张普通（各占 2 格）= 24 格，4 行正好铺满无空洞；
     窄屏 2 列（big 满行）与单列同样整除。工具区仍走 .tpl-grid 的 auto-fill。 */
  #tplCreative { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #tplCreative .tpl { grid-column: span 2; }
  #tplCreative .tpl.big { grid-column: span 3; }
  @media (max-width: 980px) {
    #tplCreative { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #tplCreative .tpl { grid-column: span 1; }
    #tplCreative .tpl.big { grid-column: span 2; }
  }
  .tpl.big { grid-column: span 3; min-height: 156px; display: grid; grid-template-columns: 46px 1fr; column-gap: 14px;
             align-content: center; align-items: start; }
  .tpl.big .tic { grid-row: 1 / span 2; width: 46px; height: 46px; margin-bottom: 0; align-self: center; }
  .tpl.big .tic svg, .tpl.big .tic img { width: 24px; height: 24px; }
  .tpl.big .t { grid-column: 2; }
  .tpl.big .d { grid-column: 2; }
  @media (max-width: 980px) {
    #tplCreative .tpl.big { grid-column: span 2; }
  }
  @media (max-width: 560px) {
    #tplCreative { grid-template-columns: minmax(0, 1fr); }
    #tplCreative .tpl.big { grid-column: span 1; grid-template-columns: 1fr; }
    .tpl.big .tic { grid-row: auto; margin-bottom: 10px; }
    .tpl.big .t, .tpl.big .d { grid-column: 1; }
  }

  /* ③ 最近使用：模板区顶部一行快捷 chips（有记录才显示） */
  .tpl-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
  .tpl-recent[hidden] { display: none; }
  /* ★ HP-TOOLS-LINK：区块标题行 + 右上角「工具箱」入口，与 chips 同一行、不抢卡片注意力 */
  .tpl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .tpl-head .tpl-label { margin-bottom: 0; }
  .tpl-subrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
  .tpl-subrow .tpl-recent { margin-bottom: 0; }
  .tpl-more { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px;
              font-size: 12.5px; color: var(--mut2); text-decoration: none; padding: 4px 2px;
              transition: color .15s var(--ease); white-space: nowrap; }
  .tpl-more:hover { color: var(--txt); }
  .tpl-more i { font-style: normal; font-size: 11.5px; line-height: 1; transition: transform .15s var(--ease); }
  .tpl-more:hover i { transform: translateX(2px); }
  /* 维语 RTL：箭头翻向左侧（阅读方向），hover 时仍向前轻推 */
  html[dir="rtl"] .tpl-more i { transform: scaleX(-1); }
  html[dir="rtl"] .tpl-more:hover i { transform: scaleX(-1) translateX(2px); }
  .tpl-recent .rl { font-size: 12.5px; color: var(--mut2); font-weight: 700; letter-spacing: 1px; }
  .tpl-recent button { border: 1px solid var(--line); background: var(--panel2); color: var(--mut);
                      border-radius: 99px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit;
                      transition: color .15s var(--ease), border-color .15s var(--ease); }
  .tpl-recent button:hover { color: var(--txt); border-color: var(--line2); }

  /* ⑤ 全局：尊重系统「减少动态效果」偏好（P2 可访问性） */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                             transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
  /* ★ HP-GUEST（2026-10-23）：游客提示并入 Hero（原来是一条独立大横幅，首屏多占一行、与 Hero 争夺注意力） */
  .hero-guest {
        display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
        margin: 14px auto 2px; font-size: 13px; color: var(--mut);
      }
  .hero-guest a { font-weight: 700; color: var(--txt); text-decoration: underline; text-underline-offset: 3px; }
  .hero-guest b { font-weight: 800; color: var(--txt); }
  .hero-guest .gp-dot { color: var(--mut2); margin: 0 2px; }
  .hero-guest.nudge { color: var(--txt); }
  .hero-guest.nudge a { text-decoration-thickness: 2px; }
  .hero-guest.nudge { animation: hgNudge .9s ease both; }
  @keyframes hgNudge { 0%,100% { transform: none; } 30% { transform: translateY(-2px); } 60% { transform: translateY(1px); } }
  /* ---------- 工作区 ---------- */
      .mode-row { display: flex; gap: 12px; margin-bottom: 24px; }
  .mode-card {
        flex: 1; border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 19px;
        cursor: pointer; transition: border-color .15s ease, background .15s ease; background: var(--panel);
      }
  .mode-card:hover { border-color: var(--line2); }
  .mode-card.on { border-color: var(--line2); background: var(--panel2); }
  .mode-card .t { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
  .mode-card .t .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mut2); }
  .mode-card.on .t .dot { background: var(--acc); }
  .mode-card .d { font-size: 12.5px; color: var(--mut); margin-top: 5px; line-height: 1.7; }
  .drop {
        border: 1.5px dashed var(--line2); border-radius: var(--r-lg); padding: 50px 20px; text-align: center;
        cursor: pointer; transition: border-color .15s ease, background .15s ease; background: var(--panel);
      }
  .drop.hover { border-color: var(--acc); background: var(--panel2); }
  .drop .plus {
        width: 44px; height: 44px; margin: 0 auto 15px; border-radius: 50%;
        border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center;
        font-size: 20px; color: var(--mut); transition: all .15s ease;
      }
  .drop.hover .plus { border-color: var(--acc); color: var(--acc); transform: scale(1.05); }
  .drop .big { font-size: 15px; font-weight: 600; }
  .drop .small { font-size: 12.5px; color: var(--mut); margin-top: 8px; }
  .file-info {
        display: none; margin-top: 15px; font-size: 13.5px; color: var(--txt);
        background: var(--panel2); border: 1px solid var(--line); padding: 10px 15px; border-radius: 10px;
      }
  .file-info.show { display: block; }
  .btn-row { display: flex; gap: 12px; margin-top: 22px; }
  .progress { display: none; margin-top: 22px; }
  .progress.show { display: block; }
  .progress .bar { height: 7px; background: var(--sel); border-radius: var(--r-pill); overflow: hidden; }
  .progress .bar i { display: block; height: 100%; width: 0; background: var(--acc); transition: width .4s ease; }
  .progress .txt { font-size: 13px; color: var(--mut); margin-top: 9px; }
  .result { display: none; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 22px; }
  .result.show { display: block; }
  .result .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
  .result .head .t { font-weight: 700; font-size: 15px; }
  .result .head .btns { display: flex; gap: 8px; }
  .result .head .btns .btn { padding: 7px 14px; font-size: 13px; border-radius: 10px; }
  .result pre {
        white-space: pre-wrap; word-break: break-word; font-family: "Alkatip Tor Tom", "Alkatip Kitab Tom", sans-serif;
        background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px;
        font-size: 18px; line-height: 2.1; max-height: 430px; overflow-y: auto; color: var(--txt);
      }
  .note {
        background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
        padding: 26px 32px; margin-bottom: 46px; font-size: 13px; color: var(--mut); line-height: 2.1;
      }
  .note b { color: var(--txt); }
  /* ---------- 首页底部：关于秀能 ---------- */
      .home-about {
        position: relative; overflow: hidden; text-align: center;
        margin-top: 56px; padding: 52px 40px;
        border: 1px solid var(--line); border-radius: var(--r-lg);
        background: var(--panel); box-shadow: var(--shadow);
      }
  .home-about::before {
        content: ""; position: absolute; top: -200px; inset-inline: 0; margin: 0 auto;
        width: 760px; max-width: 120%; height: 460px; pointer-events: none;
        background: radial-gradient(closest-side, var(--sel), transparent 76%); opacity: .8;
      }
  .home-about > * { position: relative; z-index: 1; }
  .ha-tag { font-size: 12px; font-weight: 800; letter-spacing: 3px; color: var(--mut); text-transform: uppercase; }
  .ha-title { font-size: clamp(24px, 3.4vw, 34px); font-weight: 850; letter-spacing: -.5px; margin: 14px 0 12px; }
  .ha-sub { color: var(--mut); max-width: 720px; margin: 0 auto; font-size: 15px; line-height: 1.95; }
  .ha-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 34px auto 4px; max-width: 820px; }
  .ha-stat { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px 8px; }
  .ha-stat .n { font-size: clamp(22px, 3vw, 30px); font-weight: 850; letter-spacing: -.5px; }
  .ha-stat .l { font-size: 12.5px; color: var(--mut); margin-top: 7px; }
  .ha-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 24px 0 4px; }
  .ha-tags span { font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--mut); background: var(--bg); }
  .ha-cta { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
  .ha-btn { padding: 13px 30px; border-radius: var(--r-pill); font-weight: 700; font-size: 14.5px; border: 1px solid var(--line2); transition: opacity .15s, transform .15s; }
  .ha-btn:active { transform: scale(.97); }
  .ha-btn.solid { background: var(--acc); color: var(--acc-txt); border-color: var(--acc); }
  .ha-btn.ghost { background: var(--panel); color: var(--txt); }
  .ha-btn:hover { opacity: .88; }
  @media (max-width: 640px) {
        .home-about { padding: 40px 20px; margin-top: 44px; }
        .ha-stats { grid-template-columns: repeat(2, 1fr); }
      }

  /* ==========================================================================
     sunum AI 智能体（首页工具栏独立功能）
     --------------------------------------------------------------------------
     移植自画布右下角的 sunum AI 智能体：入口从「右下角浮动胶囊」改为「工具栏里的
     一个功能项」，对话面板由该入口下拉展开。面板内部结构与画布版保持一致
     （技能条 / 消息区 / 快捷指令 / 模式切换 / 输入区），仅做两处落地适配：
       ① 配色改用首页主题变量（--ag 强调色由深/浅主题分别取值，对比度优先）；
       ② 首页没有画布，Agent 模式注入的是「站点功能清单」而非画布节点上下文。
     ========================================================================== */

  /* 强调色：与画布 agent 青柠色同源；浅色主题取深橄榄保证白底对比度 */
  /* 强调色取自品牌 logo 色板（static/uploads/logo.png 采样）：
     主色近黑 #151517（浅色）/ 白 #f4f4f0（深色），全站中性单色系 */
  :root { --ag: #151517; --ag-ink: #ffffff; --ag-glow: rgba(21, 21, 23, .16); --sheen: rgba(21, 21, 23, .05); }
  html[data-theme="dark"] { --ag: #f4f4f0; --ag-ink: #101013; --ag-glow: rgba(255, 255, 255, .20); --sheen: rgba(255, 255, 255, .07); }

  /* 悬浮入口：右下角常驻胶囊（与画布端 .bb-ai 同一视觉语言；呼吸荧光跟随主题强调色） */
  .hm-ai-fab {
        position: fixed; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); /* R68: 全面屏手势条不压钮 */ z-index: 401;
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; user-select: none;
        padding: 8px 16px 8px 13px; border-radius: 999px;
        color: var(--txt); background: var(--panel); border: 1px solid var(--line);
        box-shadow: 0 0 22px var(--ag-glow), 0 4px 18px rgba(0, 0, 0, .28);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        transition: border-color .18s var(--ease), transform .18s var(--ease);
        animation: hmAiGlow 6.4s ease-in-out infinite;
      }
  /* 荧光呼吸：按 logo 色板轮转（深蓝 → 青蓝 → 琥珀 → 品红，与画布端 .bb-ai 同步 6.4s） */
  @keyframes hmAiGlow {
        0%, 100% { box-shadow: 0 0 14px rgba(43, 63, 158, .28), 0 4px 18px rgba(0, 0, 0, .28); }
        25%      { box-shadow: 0 0 24px rgba(53, 182, 240, .32), 0 4px 18px rgba(0, 0, 0, .28); }
        50%      { box-shadow: 0 0 34px rgba(240, 169, 74, .38), 0 4px 18px rgba(0, 0, 0, .28); }
        75%      { box-shadow: 0 0 24px rgba(216, 79, 126, .32), 0 4px 18px rgba(0, 0, 0, .28); }
      }
  .hm-ai-fab:hover { border-color: #f0a94a; transform: translateY(-1px); }
  .hm-ai-fab:active { transform: translateY(0); }
  .hm-ai-fab .fab-dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
        background: #2b3f9e; box-shadow: 0 0 8px rgba(43, 63, 158, .8);
        animation: hmDotSpin 6.4s ease-in-out infinite; }
  @keyframes hmDotSpin {
        0%, 100% { background: #2b3f9e; box-shadow: 0 0 8px rgba(43, 63, 158, .8); }
        25%      { background: #35b6f0; box-shadow: 0 0 8px rgba(53, 182, 240, .8); }
        50%      { background: #f0a94a; box-shadow: 0 0 8px rgba(240, 169, 74, .8); }
        75%      { background: #d84f7e; box-shadow: 0 0 8px rgba(216, 79, 126, .8); }
      }
  .hm-ai-fab .fab-tx { letter-spacing: .3px; }
  .hm-ai-fab.on { animation: none; border-color: var(--ag); box-shadow: inset 0 0 0 1px var(--ag), 0 0 18px var(--ag-glow); }

  /* 对话面板：自右下方向上升起（位置完全由 CSS 决定，脚本不再按顶栏计算） */
  .ai-panel {
        position: fixed; right: 16px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); width: min(392px, calc(100vw - 24px)); /* R68: 窄屏不放不下 392px */ height: min(72vh, 620px);
        z-index: 400; display: flex; flex-direction: column; overflow: hidden;
        background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        opacity: 0; pointer-events: none; transform: translateY(14px) scale(.985);
        transition: opacity .22s ease, transform .22s ease;
      }
  .ai-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

  .ai-head { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--line); flex: none; background: var(--panel2); }
  .ai-head .ah-logo { width: 28px; height: 28px; border-radius: 8px; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; }
  .ai-head .ah-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .ai-head b { font-size: 13.5px; flex: 1; letter-spacing: .2px; }
  .ai-head .ah-st { width: 7px; height: 7px; border-radius: 50%; background: var(--ag); box-shadow: 0 0 8px var(--ag); flex: none; margin-right: 2px; }
  .ai-head button { border: none; background: transparent; color: var(--mut); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 14px; flex: none; }
  .ai-head button:hover { background: var(--panel2); color: var(--txt); }

  .ai-skills { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--line); flex: none; scrollbar-width: none; cursor: grab; }
  .ai-skills::-webkit-scrollbar { display: none; }
  .ai-skills.dragging, .ai-skills.dragging * { cursor: grabbing !important; user-select: none; }
  .ai-sk-title { font-size: 11px; color: var(--mut2); align-self: center; flex: none; padding-right: 2px; }
  .ai-skill {
        display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap;
        border: 1px solid var(--line2); background: var(--panel2); color: var(--txt);
        border-radius: 999px; padding: 5px 12px; font-size: 11px; cursor: pointer; font-family: inherit;
        transition: border-color .15s, background .15s;
      }
  .ai-skill:hover { border-color: var(--ag); }
  .ai-skill .as-ic { color: var(--ag); font-size: 11px; }
  .ai-skill.on { border-color: var(--ag); color: var(--txt); font-weight: 700; }

  /* R58d：提示词库技能 · 面板内选词器 */
  .ai-skills.plk { flex-wrap: wrap; overflow-y: auto; max-height: 46%; padding: 8px 12px 10px; }
  .plk-head { display: flex; align-items: center; gap: 8px; width: 100%; }
  .plk-back { border: 1px solid var(--line2); background: var(--panel2); color: var(--mut);
        border-radius: 999px; padding: 3px 10px; font-size: 11px; cursor: pointer; font-family: inherit;
        flex: none; transition: color .15s, border-color .15s; }
  .plk-back:hover { color: var(--txt); border-color: var(--ag); }
  .plk-search { width: 100%; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
        background: var(--panel); color: var(--txt); font: inherit; font-size: 12px; outline: none; }
  .plk-search:focus { border-color: rgba(79,124,255,.5); box-shadow: 0 0 0 3px rgba(79,124,255,.10); }
  .plk-list { display: flex; flex-direction: column; gap: 5px; width: 100%; }
  .plk-item { display: flex; align-items: center; gap: 7px; padding: 7px 10px;
        border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
  .plk-item:hover { border-color: var(--line2); background: var(--hover); }
  .plk-t { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--txt);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
  .plk-m { flex: none; font-size: 10px; color: var(--mut2); max-width: 34%;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .plk-go, .plk-copy { flex: none; border: 1px solid var(--line2); background: transparent; color: var(--txt);
        font-family: inherit; font-size: 10.5px; font-weight: 700; padding: 3px 9px;
        border-radius: 999px; cursor: pointer; transition: background .15s, border-color .15s; }
  .plk-go { background: var(--ag); color: var(--ag-ink); border-color: transparent; }
  .plk-go:hover { opacity: .88; }
  .plk-copy:hover { border-color: var(--ag); }
  .plk-empty { font-size: 11.5px; color: var(--mut2); text-align: center; padding: 14px 0; }
  .plk-more { border: none; background: transparent; color: var(--acc); font-family: inherit;
        font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 6px 0 2px; text-align: start; }

  .ai-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
  .ai-m { max-width: 86%; padding: 9px 13px; border-radius: 14px; font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
  .ai-m.user { align-self: flex-end; background: var(--ag); color: var(--ag-ink); border-bottom-right-radius: 4px; }
  .ai-m.bot { align-self: flex-start; background: var(--panel2); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--txt); }
  .ai-empty { color: var(--mut2); font-size: 12px; text-align: center; padding: 26px 8px; line-height: 1.9; }
  .ai-empty .ae-ic { font-size: 26px; display: block; margin-bottom: 8px; }

  .ai-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px 0; flex: none; }
  .ai-quick .aq { font-size: 10.5px; color: var(--mut); border: 1px dashed var(--line2); border-radius: 999px; padding: 3px 9px; cursor: pointer; background: none; font-family: inherit; }
  .ai-quick .aq:hover { color: var(--txt); border-color: var(--ag); }

  .ai-in { flex: none; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; }
  .ai-mode { display: flex; gap: 2px; background: var(--hover); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
  .am-b { flex: 1; border: none; background: transparent; color: var(--mut); border-radius: 6px; padding: 4px 0; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .12s; }
  .am-b:hover { color: var(--txt); }
  .am-b.on { background: var(--acc); color: var(--acc-txt); }
  .ai-rowin { display: flex; gap: 8px; }
  .ai-ta {
        flex: 1; border: 1px solid var(--line2); background: var(--panel2); color: var(--txt);
        border-radius: 12px; padding: 9px 12px; font-size: 12.5px; font-family: inherit; outline: none;
        resize: none; min-height: 44px; max-height: 130px;
      }
  .ai-ta:focus { border-color: var(--ag); }
  .ai-send { border: none; background: var(--ag); color: var(--ag-ink); border-radius: 12px; width: 52px; font-size: 12.5px; font-weight: 800; cursor: pointer; flex: none; letter-spacing: .5px;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
  .ai-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 12px var(--ag-glow); }
  .ai-send:active:not(:disabled) { transform: translateY(0); }
  .ai-send:focus-visible { outline: 2px solid var(--ag); outline-offset: 2px; }
  .ai-send:disabled { opacity: .4; cursor: default; }
  /* Uiverse typing-dots loader：AI 思考中的等待反馈（aria-label 保留文字语义） */
  .ai-thinking { display: inline-flex; align-items: center; gap: 5px; min-height: 18px; }
  .ai-thinking .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mut); animation: aiDot 1.2s infinite ease-in-out; }
  .ai-thinking .dot:nth-child(2) { animation-delay: .15s; }
  .ai-thinking .dot:nth-child(3) { animation-delay: .3s; }
  @keyframes aiDot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .ai-thinking .dot { animation: none; opacity: .7; } }
  .ai-tip { font-size: 10.5px; color: var(--mut2); text-align: center; padding-bottom: 8px; flex: none; }

  /* 维吾尔语 RTL：只镜像文本方向，面板定位不受影响 */
  html[dir="rtl"] .ai-msgs, html[dir="rtl"] .ai-m { direction: rtl; text-align: right; }
  html[dir="rtl"] .ai-ta { direction: rtl; text-align: right; }

  /* 窄屏兜底：392px 固定宽会冲出视口，改为左右贴边 */
  @media (max-width: 720px) {
    .ai-panel { left: 8px; right: 8px !important; width: auto; height: min(64vh, 520px); }
  }
  @media (max-width: 560px) {
    .ai-panel { height: min(58vh, 440px); }
  }

/* ==========================================================================
   R72 移动端精修（2026-11-07）：触控目标 + 滚动暗示
   ========================================================================== */
/* ① hero 输入卡圆形按钮（麦克风/发送）34px → 40px：
   Apple HIG 44px 下限的务实值（R53 顶栏同口径 36px+），原 34px 偏小。
   只动触屏粗指针，桌面保持 34px 观感。 */
@media (pointer: coarse) and (max-width: 720px) {
  .hc-round { width: 40px; height: 40px; }
}
/* ② hero chips 横滑渐隐 26px → 34px：原渐隐太窄，截断处仍像 bug。
   与 22.1 顶栏渐隐同语言。 */
@media (max-width: 720px) {
  .hero-chips.hc-fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); }
  .hero-chips.hc-fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); }
  .hero-chips.hc-fade-l.hc-fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); }
}

/* ③ R72c：剩余触控目标收尾 —— AI 面板头部按钮 28px、清空 35px、FAB 34px、
   @ 按钮宽 32px、模式切换 24px 高，统一提到 36px 务实地板（粗指针 only）。 */
@media (pointer: coarse) and (max-width: 720px) {
  #hcMention { min-width: 36px; }
  .hm-ai-fab { min-height: 36px; }
  .ai-head button, #aiClear { min-width: 36px; min-height: 36px; }
  .am-b { min-height: 36px; padding: 8px 0; }
}

/* ==========================================================================
   R88 极窄屏（≤360px）hero 工具栏纯图标化：
   5 个带文字按钮在 320px 一行放不下被裁切，窄屏隐藏文字标签与下拉箭头，
   只留图标（即梦/Apple 移动端常见做法），@ 按钮本就纯符号保留。
   ========================================================================== */
@media (max-width: 360px) {
  .hc-btn { gap: 0; padding: 8px; min-width: 36px; justify-content: center; }
  .hc-btn > span[data-i18n] { display: none; }
  .hc-btn .caret { display: none; }
  .hc-left, .hc-right { gap: 2px; }
  .hc-bar { gap: 2px; }
}