/* ============================================================================
   9flash · 游玩页「聊天室」悬浮窗（仅 PC）
   ============================================================================
   窗体材质**全部来自 win7.css**（`.w7-win` / 标题栏 / 窗体按钮 / 客户区 /
   凹陷记录区 / 状态栏 / 硬分界按钮），本文件只做 win7.css 不管的四件事：
     ① 把窗体从「页面里居中的大窗」改成**固定定位的小悬浮窗**（默认 320×382）
     ② 竖向 flex 布局 —— 窗口大小可变，只有记录区跟着伸缩（见下）
     ③ 右下角的尺寸把手（装饰；光标与拖动手感由 JS 负责）+ 拖动中的防选中
     ④ 页面上那颗「聊天室」按钮的开启态

   ⚠ 尺寸可调靠的是**竖向 flex**：`.cw-win` 是 column flex，`.w7-client` / `.w7-body` /
   `.w7-sunken` / `.w7-log` 逐层 `flex:1 + min-height:0`，控件（工具栏 / 输入行 / 提示 /
   状态栏）全部 `flex:0 0 auto`。所以**拉高窗口 = 记录区变高，控件尺寸不动**；
   拉宽 = 记录区变宽。窗口的 width/height 由 chat-widget.js 写成 inline px，
   CSS 里的 320×382 只是**默认值**（也就是用户从未调整过时的样子）。

   ⚠ 为什么不能复用 .w7-page / 把窗体塞进 .container：`.container` 带
     `animation: aero-rise .78s backwards`，动画跑的那 780ms 里它是个**包含块**，
     里面的 position:fixed 会按它定位而不是视口；它还是 z-index:1 的层叠上下文，
     会把悬浮窗困在页头（60）和播放器（1000）之间。所以悬浮窗由 chat-widget.js
     **直接挂在 body 上**，z-index 1050：> 页头 60、页脚 1、网页内全屏的
     .container(950) 与播放器(1000)、退出按钮(1001)；< 屏幕键盘(1100)。
   ⚠ 窄屏（≤640px）不出现悬浮窗（移动端点按钮直接跳 /pages/chat），
     这里再补一条 display:none 兜底，防止 JS 判断失效时糊住整个屏幕。
   ⚠ 调整大小目前是**鼠标 / 触控笔**可用（靠指针位置判定在哪个边角）。触摸屏上要让
     手指拖动不被当成滚动手势，得给边角加 `touch-action:none`，但那会连带**禁掉记录区
     的触摸滚动** —— 得不偿失，所以没加；悬浮窗本来就是 PC 形态的功能。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 悬浮窗体（可拖动移动、可 8 向调整大小）
   -------------------------------------------------------------------------- */
.cw-win{
  position:fixed;
  right:20px; bottom:20px; left:auto; top:auto;
  z-index:1050;
  width:320px; max-width:none; margin:0;
  /* 默认 320×382（382 是内容自然高度，实测得来；记录区约 220px）。
     竖向是 flex：**记录区吃掉窗口多出来的高度**，所以窗口一拉高，
     多出来的空间全给聊天记录，输入行与状态栏始终贴在底部。 */
  height:min(382px, calc(100vh - 40px));
  display:flex; flex-direction:column;
  font-size:9pt;
  /* 玻璃只糊窗体自己这一小块；背后是游戏画布时别开太大半径，省重绘 */
  -webkit-backdrop-filter:blur(6px) saturate(1.15);
  backdrop-filter:blur(6px) saturate(1.15);
}
.cw-win[hidden]{display:none}

/* 右下角的尺寸把手（Win7 状态栏那种斜向小点阵）。
   **纯装饰**：真正吃拖动的是 chat-widget.js 里按指针位置算出来的边/角判定，
   所以这里必须 pointer-events:none，否则它会挡住窗体自己的命中测试。 */
.cw-win::after{
  content:''; position:absolute; right:3px; bottom:2px; width:12px; height:12px;
  pointer-events:none; opacity:.45;
  background-image:radial-gradient(circle at 1.5px 1.5px,#4a4a4a 1.2px,transparent 1.7px);
  background-size:4px 4px;
  clip-path:polygon(100% 0,100% 100%,0 100%);
}

/* 标题栏：拖动把手。
   touch-action:none 是必须的 —— 否则触摸/触控板拖动会被浏览器当成滚动手势抢走；
   user-select:none 防止拖动时把标题文字选中一片蓝。

   ⚠ `flex:0 0 auto` 不能省（2026-09-24 修的真实 bug）：`.cw-win` 是列式 flex，
   标题栏作为 flex item 默认 `flex-shrink:1`。记录区灌满历史消息后内容总高超出窗口，
   它就被当成可压缩项，从 30px 压到最小内容高 20px（= 那排窗体按钮的高度），
   丢掉的 10px 反被 `flex:1` 的客户区吃掉 —— 表现是**消息一加载出来，标题文字猛地往上跳 5px**。
   同层其它部件（`.w7-tool` / 输入行 / 提示行 / `.w7-status`）都已经是 `flex:0 0 auto`，
   只有标题栏漏了；**高度固定或内容固定的部件一律不许被压缩**。 */
.cw-win .w7-title{flex:0 0 auto}
.cw-title{
  cursor:default;
  touch-action:none;
  user-select:none; -webkit-user-select:none;
}
.cw-win.cw-drag .cw-title{cursor:move}
.cw-title img{-webkit-user-drag:none; user-drag:none}
.cw-win.cw-drag{box-shadow:4px 4px 14px 2px var(--w-bd),inset 0 0 0 1px #fffa}
.cw-win.cw-drag .w7-title-name{text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 10px #fff,0 0 14px #fff}
/* 调整大小中：光标跟着方向走（由 JS 写 inline style，见 chat-widget.js 的 setCursor）*/

/* 客户区里的紧凑排布：不留分组框，记录区直接贴着输入行。
   纵向全部用 flex —— 窗口拉高/拉矮时，只有记录区伸缩，控件尺寸不变。 */
.cw-win .w7-client{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.cw-win .w7-tool{flex:0 0 auto; padding:4px 8px; gap:7px}
.cw-win .w7-body{
  flex:1 1 auto; min-height:0; padding:8px;
  display:flex; flex-direction:column;
}
.cw-win .w7-sunken{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.cw-win .w7-log{flex:1 1 auto; height:auto; min-height:56px}
/* 输入行与提示行固定高度；输入行上方的 8px 由 flex 之前的 margin 提供
   （这一行是窗体里唯一的输入行，前面没有兄弟，得自己补上间距） */
.cw-win .w7-body > form{flex:0 0 auto; margin-top:8px; display:flex; align-items:center; gap:6px}
.cw-win .w7-body > form > label{white-space:nowrap}
.cw-win .w7-body > .w7-row{flex:0 0 auto; margin-top:4px}
.cw-win .w7-tip{min-height:15px; margin-top:0}

/* 状态栏：左「连接状态」+ 右「修改昵称」（改昵称页在 /pages/support）
   ⚠ 这是悬浮窗里**唯一**的改昵称入口（工具栏没有按钮，避免一个动作两个入口）*/
.cw-win .w7-status{flex:0 0 auto; margin:0 6px 6px}

/* --------------------------------------------------------------------------
   2. 页面上的「聊天室」按钮（在 .player-tools 那排里，跟随站点按钮样式）
   --------------------------------------------------------------------------
   服务端渲染成一个普通链接 → 没有 JS 时仍能跳到独立聊天页（渐进增强）；
   有 JS 时 PC 端被拦截改成「开/关悬浮窗」，移动端改成同标签跳转。
   aria-expanded 既是无障碍状态，也是这一格的开启态样式来源。 */
.btn-chat{text-decoration:none}
.btn-chat:hover{text-decoration:none}
.btn-chat[aria-expanded="true"]{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.btn-chat[aria-expanded="true"]:hover{background:#0860c9}

/* --------------------------------------------------------------------------
   3. 窄屏兜底：不出现悬浮窗（移动端走独立页）
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .cw-win{display:none !important}
}

/* 尊重「减少动态效果」：悬浮窗不做入场动画，这条只是保证将来加了也不动 */
@media (prefers-reduced-motion:reduce){
  .cw-win, .cw-win *{animation:none !important; transition:none !important}
}