/* ═════════════════════════════════════════════════════════════
   37 · 读的时候让开(手机对话页)
   往下读时顶栏上滑、输入栏向发送键收拢淡出,发送键位置留一颗半透明小圆钮(平时"写",生成中"停止")。
   状态类 #chat-view.reading-tucked 与位置变量 --reading-* 由 reading-chrome.js 维护;电脑端不收起。
   只动 transform/opacity;顶栏收起后系统顶部区保留一层薄磨砂,正文不和时间电量叠在一起。
   磨砂与底色沿用 36-chat-chrome.css 的 --chrome-* 变量。
   ═════════════════════════════════════════════════════════════ */
#chat-view {
  --reading-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --reading-move: 0.3s;
  --reading-fade: 0.18s;
}
.reading-pill { display: none; }

@media (max-width: 1023px) {
  /* 顶栏:整条向上滑走,文字和按钮先淡出 */
  #chat-view .topbar { transition: transform var(--reading-move) var(--reading-ease), box-shadow var(--reading-move) ease; }
  #chat-view .topbar > * { transition: opacity var(--reading-fade) ease; }
  #chat-view.reading-tucked .topbar { transform: translateY(-100%); box-shadow: none; }
  #chat-view.reading-tucked .topbar > * { opacity: 0; pointer-events: none; }

  /* 系统顶部区:只在顶栏收起后出现的薄磨砂(浏览器标签页里高度为 0) */
  #chat-view::before {
    content: ""; position: absolute; z-index: 61; top: 0; left: 0; right: 0;
    height: var(--app-top-inset);
    background: var(--chrome-glass-bar);
    -webkit-backdrop-filter: var(--chrome-blur-bar); backdrop-filter: var(--chrome-blur-bar);
    opacity: 0; pointer-events: none;
    transition: opacity var(--reading-move) ease;
  }
  #chat-view.reading-tucked::before { opacity: 1; transition-duration: var(--reading-fade); }

  /* 输入栏(含任务/工作空间标签与底部渐变):向发送键位置收拢淡出 */
  /* 回来时沿用键盘上滑的曲线(11-mobile),只多一个淡入 */
  #chat-view .input-bar {
    transform-origin: var(--reading-bar-origin, 100% 100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--reading-move) ease;
  }
  #chat-view.reading-tucked .input-bar {
    opacity: 0; transform: translateY(10px) scale(0.94);
    transition: transform var(--reading-move) var(--reading-ease), opacity var(--reading-fade) ease;
  }
  #chat-view.reading-tucked .input-bar > * { pointer-events: none; }

  /* 回到最新:随输入栏下移到小圆钮的水平线,不悬在半空 */
  #chat-view.reading-tucked .scroll-to-latest { transform: translateX(-50%) translateY(var(--reading-latest-drop, 0px)); }
  #chat-view.reading-tucked .scroll-to-latest.hidden { transform: translateX(-50%) translateY(calc(var(--reading-latest-drop, 0px) + 10px)); }

  /* 小圆钮:停在发送键的中心 */
  #chat-view .reading-pill {
    display: grid; place-items: center;
    position: absolute; z-index: 61;
    left: var(--reading-pill-x, calc(100% - 44px)); top: var(--reading-pill-y, calc(100% - 54px));
    width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
    border: 0; border-radius: 50%; cursor: pointer;
    color: var(--text-muted);
    background: var(--chrome-glass-soft);
    -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur);
    box-shadow: var(--chrome-edge), var(--chrome-shadow);
    -webkit-tap-highlight-color: transparent;
    opacity: 0; transform: scale(0.6); pointer-events: none; visibility: hidden;
    transition: transform var(--reading-move) var(--reading-ease), opacity var(--reading-fade) ease, visibility 0s linear var(--reading-move);
  }
  #chat-view.reading-tucked .reading-pill {
    opacity: 1; transform: none; pointer-events: auto; visibility: visible;
    transition-delay: 70ms, 70ms, 0s;
  }
  #chat-view.reading-tucked .reading-pill:active { transform: scale(0.92); transition-delay: 0s; }
  #chat-view.reading-tucked .reading-pill.is-stopping { opacity: 0.5; pointer-events: none; }
  #chat-view .reading-pill:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
  #chat-view .reading-pill svg { width: 20px; height: 20px; }
  #chat-view .reading-pill-stop { display: none; width: 11px; height: 11px; border-radius: 3px; background: currentColor; }
  #chat-view .reading-pill.is-stop svg { display: none; }
  #chat-view .reading-pill.is-stop .reading-pill-stop { display: block; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  #chat-view .topbar, #chat-view .topbar > *, #chat-view::before, #chat-view .input-bar,
  #chat-view.reading-tucked .input-bar, #chat-view .reading-pill { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #chat-view::before, #chat-view .reading-pill {
    background: var(--chrome-base);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}