/* ============================================================================
   9flash · 聊天室窗体层 —— Windows 7 Aero
   ============================================================================
   两处使用（**同一份材质，不要复制第二份**）：
     · `/pages/chat`                —— 整页一个大窗体（本文件的 .w7-page / .w7-group 等）
     · 游玩页的聊天悬浮窗（chat-widget.css + chat-widget.js）
       只借用窗体部件（.w7-win / 标题栏 / 窗体按钮 / 客户区 / .w7-sunken / .w7-status /
       .w7-btn / .w7-input / .w7-log），把定位、尺寸、拖动交给 chat-widget.css。
   参考实现：https://github.com/khang-nd/7.css （MIT）
   本文件**照它的做法重写**（不是抄类名，也不引入它的构建产物），取值基本一致；
   需要改的时候对着它核对，别凭印象调。

   用户 2026-09-24 的三轮反馈（这是最终口径）：
     ①「不用考虑站点本身的颜色风格，我要原版 win7 的配色和光效与布局」
     ②「客户区实心白、只有标题栏是玻璃 = 像 xp 套了个主题」
     ③「这么扁平，确定是 win7 的拟物化风格吗？背景和文字颜色太接近，看不清字」
     ④「还是不够像，参考 7.css」→ 本条促成了下面这版：**窗框是蓝色的玻璃**（不是灰的）、
        窗体按钮是**挂在顶边的连体胶囊**、按钮用**硬分界三段渐变**、状态栏是**独立面板**。
     ※ 用户明确：**只有聊天室相关界面要像 Win7**（独立页 + 游玩页那颗悬浮窗），
        站点其它页面不要跟着改。

   ── 7.css 的五个关键做法（逐条对上了才像）─────────────────────────────────
     ① **窗框是蓝色玻璃**：底色 `#4580c4` + 横向 `#ffffff66 → #0000001a → #ffffff33`，
        再叠一条横贯窗体的亮带 `linear-gradient(transparent 20%,#ffffffb3 40%,transparent 41%)`。
        玻璃只做**6px 窗框 + 标题栏**，客户区是不透明的 `#f0f0f0`（可读性靠它）。
     ② **窗体按钮 = 顶边连体胶囊**：三个按钮共用一个容器（`#fff3` 底 + 1px 深边 +
        只有下方两角圆角 5px），按钮之间 1px 竖线分隔，最小/最大 29×19，**关闭 48 宽且默认就是红的**。
        hover 时：最小/最大 底部泛青蓝光（`radial-gradient(circle at bottom,#2aceda,…)` + `0 0 7px 3px #5dc4f0`），
        关闭 变亮红 + 底部黄光 + `0 0 7px 3px #e68e75`。
     ③ **标题文字**：纯黑 + 大范围白光（7.css 叠了 8 层 `0 0 10px #fff`）——玻璃上的字被「打亮」。
     ④ **按钮/输入框的拟物靠硬分界**：`linear-gradient(#f2f2f2 45%,#ebebeb 45%,#cfcfcf)` 这种
        **45% 硬断**，不是平滑过渡；hover 换成 `#eaf6fd 45%,#bee6fd 45%,#a7d9f5`；
        按下换成 4 段蓝 `#e5f4fc → #c4e5f6 30% 50% → #98d1ef 50% → #68b3db` + 内阴影。
     ⑤ **状态栏是独立面板**：夹在窗框里、贴着客户区下沿（`border-top:0`），分格用 1px `#cfcfcf`。
   ⚠ `backdrop-filter` 会让元素成为 `position:fixed` 后代的包含块：窗体里不要再放 fixed 元素。
   ========================================================================== */

/* ==========================================================================
   1. 令牌（照 7.css 的取值）
   ========================================================================== */
.w7-win{
  --w7-font:9pt "Segoe UI","Microsoft YaHei","PingFang SC",Tahoma,sans-serif;
  --w7-surface:#f0f0f0;

  --el-bg:#f2f2f2;      --el-bg-s1:#ebebeb;   --el-bg-s2:#cfcfcf;
  --el-bd:#8e8f8f;      --el-bd-h:#3c7fb1;    --el-bd-a:#6d91ab;   --el-bd-d:#adb2b5;
  --el-sd:inset 0 0 0 1px #fffc;
  --el-sd-a:inset 1px 1px 0 #0003,inset -1px 1px 0 #0001;
  --el-grad:linear-gradient(#f2f2f2 45%,#ebebeb 45%,#cfcfcf);
  --el-grad-h:linear-gradient(#eaf6fd 45%,#bee6fd 45%,#a7d9f5);
  --el-grad-a:linear-gradient(#e5f4fc,#c4e5f6 30% 50%,#98d1ef 50%,#68b3db);

  /* 窗体 */
  --w-space:6px;
  --w-bd:#000000b3;
  --w-bg:#4580c4;
  --w-grad:linear-gradient(to right,#ffffff66,#0000001a,#ffffff33);
  --w-shine:linear-gradient(transparent 20%,#ffffffb3 40%,transparent 41%);
  /* 窗体按钮 */
  --wct-bd:#0000004d;
  --wct-bdr:5px;
  --wct-bg:linear-gradient(#ffffff80,#ffffff4d 45%,#0000001a 50%,#0000001a 75%,#ffffff80);
  --wct-bg-h:radial-gradient(circle at bottom,#2aceda,transparent 65%),linear-gradient(#b6d9ee 50%,#1a6ca1 50%);
  --wct-bg-a:radial-gradient(circle at bottom,#0bfdfa,transparent 65%),linear-gradient(#86a7bc 50%,#092747 50%);
  --wct-close:radial-gradient(circle at -60% 50%,#0007 5% 10%,#0000 50%),
              radial-gradient(circle at 160% 50%,#0007 5% 10%,#0000 50%),
              linear-gradient(#e0a197e5,#cf796a 25% 50%,#d54f36 50%);
}

/* ==========================================================================
   2. 窗体：蓝色玻璃窗框（客户区留出来给实体面）
   ========================================================================== */
.w7-win{
  position:relative; z-index:0;
  max-width:900px; margin:26px auto 34px;
  font:var(--w7-font); color:#222;
  border:1px solid var(--w-bd); border-radius:6px;
  box-shadow:2px 2px 10px 1px var(--w-bd),inset 0 0 0 1px #fffa;
  background-color:var(--w-bg);
  -webkit-backdrop-filter:blur(6px) saturate(1.15);
  backdrop-filter:blur(6px) saturate(1.15);
}
.w7-win::before{                       /* 玻璃：横向色带 + 横贯亮带 */
  content:''; position:absolute; z-index:-1; inset:0; border-radius:6px;
  background:var(--w-shine),var(--w-grad);
  background-color:var(--w-bg);
  box-shadow:inset 0 0 0 1px #fffd;
}
.w7-win.blur{                          /* 失焦：玻璃褪色（Win7 非活动窗口）*/
  background-color:#9db4cc;
  -webkit-backdrop-filter:blur(6px) saturate(.35);
  backdrop-filter:blur(6px) saturate(.35);
}
.w7-win.blur::before{background:var(--w-shine),linear-gradient(to right,#ffffff33,#00000014,#ffffff1a)}
.w7-win.blur .w7-title-name{text-shadow:0 0 6px #fff}

/* ---- 标题栏 ---- */
.w7-title{
  position:relative;
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 6px;
  border-radius:6px 6px 0 0;
  background:var(--w-grad); background-color:var(--w-bg);
  box-shadow:inset 0 1px 0 #fffd,inset 1px 0 0 #fffd,inset -1px 0 0 #fffd;
}
.w7-title-ico{
  position:relative; z-index:1; flex:0 0 auto;
  width:16px; height:16px; border-radius:2px;
  box-shadow:0 1px 2px rgba(0,10,26,.45);
}
/* 标题字：纯黑 + 大范围白光（7.css 的招牌，玻璃上的字被「打亮」）*/
.w7-title-name{
  position:relative; z-index:1; min-width:0;
  font-size:9pt; font-weight:400; color:#000; line-height:15px;
  text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 10px #fff,0 0 10px #fff,0 0 14px #fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.w7-title-sub{
  position:relative; z-index:1; min-width:0;
  font-size:9pt; color:#0d2b4a;
  text-shadow:0 0 5px #fff,0 0 10px #fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- 窗体按钮：顶边连体胶囊（最小/最大 29×19，关闭 48 且默认红）---- */
.w7-cap{
  position:relative; z-index:1; display:flex; margin-left:auto; align-self:flex-start;
  background:#fff3;
  border:1px solid var(--wct-bd); border-top:0;
  border-radius:0 0 var(--wct-bdr) var(--wct-bdr);
  box-shadow:0 1px 0 #fffa,1px 0 0 #fffa,-1px 0 0 #fffa;
}
.w7-cap-btn{
  position:relative; z-index:0;
  min-width:29px; height:19px; padding:0; cursor:default;
  border:0; border-right:1px solid var(--wct-bd); border-radius:0;
  box-shadow:none; background:none;
}
.w7-cap-btn:first-child{border-bottom-left-radius:var(--wct-bdr)}
.w7-cap-btn:last-child{border-right:0; border-bottom-right-radius:var(--wct-bdr)}
.w7-cap-min,.w7-cap-max{background:var(--wct-bg)}
.w7-cap-close{min-width:48px; background:var(--wct-bg),var(--wct-close); box-shadow:inset 0 0 0 1px #fffa}

/* hover / active 用伪元素叠上去（这样可以带外发光过渡）*/
.w7-cap-btn::before{
  content:''; position:absolute; inset:0; opacity:0;
  box-shadow:inset 0 0 0 1px #fff5;
  transition:opacity .3s linear;
}
.w7-cap-min::before,.w7-cap-max::before{
  background:var(--wct-bg-h);
  box-shadow:0 0 7px 3px #5dc4f0,inset 0 0 0 1px #fffa;
}
.w7-cap-close::before{
  background:var(--wct-bg),
    radial-gradient(circle at 50% 170%,#f4e676 10% 20%,#0000 60%),
    radial-gradient(circle at -60% 50%,#000a 5% 10%,#0000 50%),
    radial-gradient(circle at 160% 50%,#000a 5% 10%,#0000 50%),
    linear-gradient(#fb9d8b,#ee6d56 25% 50%,#d42809 50%);
  box-shadow:0 0 7px 3px #e68e75,inset 0 0 0 1px #fffa;
}
.w7-cap-btn:hover::before,.w7-cap-btn:focus-visible::before{opacity:1; transition:opacity .1s linear}
.w7-cap-btn:active::before{
  opacity:1;
  background:var(--wct-bg),var(--wct-bg-a);
  box-shadow:inset 0 2px 4px rgba(0,20,45,.4);
}
.w7-cap-close:active::before{
  background:var(--wct-bg),
    radial-gradient(circle at 50% 170%,#dcc03f 10% 20%,#0000 60%),
    linear-gradient(#d1a894,#b67562 25% 50%,#7d0d01 50%);
}

/* 字形用伪元素画（::before 已被 hover 占用，字形放 ::after）*/
.w7-cap-btn::after{content:''; position:absolute; z-index:1}
.w7-cap-min::after{
  left:50%; bottom:5px; margin-left:-4px;
  width:8px; height:2px; border-radius:1px; background:#12374f;
  box-shadow:0 1px 0 #fff8;
}
.w7-cap-max::after{
  left:50%; top:50%; margin:-4px 0 0 -4px;
  width:8px; height:7px; border:1px solid #12374f; border-top-width:3px; border-radius:1px;
  box-shadow:0 1px 0 #fff8;
}
/* 关闭键的字形是 ✕：一条伪元素里叠两个 45° 渐变，比 rotate + 两个伪元素稳 */
.w7-cap-close::after{
  left:50%; top:50%; margin:-6px 0 0 -6px;
  width:12px; height:12px;
  background:
    linear-gradient(45deg,transparent calc(50% - 1px),#fff calc(50% - 1px),
                    #fff calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(-45deg,transparent calc(50% - 1px),#fff calc(50% - 1px),
                    #fff calc(50% + 1px),transparent calc(50% + 1px));
  filter:drop-shadow(0 0 1px rgba(70,0,0,.55));
}

/* ==========================================================================
   3. 客户区（不透明实体面）+ 工具栏 + 分组框 + 状态栏
   ========================================================================== */
.w7-client{
  margin:6px 6px 0;
  border:1px solid var(--w-bd);
  background:var(--w7-surface);
  box-shadow:0 0 0 1px #fff9;
}
.w7-tool{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:5px 9px; font-size:9pt; color:#222;
  background:linear-gradient(#fbfbfb,#f0f0f0);
  border-bottom:1px solid #d5d5d5;
  box-shadow:inset 0 1px 0 #fff;
}
.w7-tool b{font-weight:700; color:#0b2f52}
.w7-tool .w7-item{display:inline-flex; align-items:center; gap:5px}
.w7-tool .sep{width:1px; height:15px; flex:0 0 auto; background:#d5d5d5; box-shadow:1px 0 0 #fff}
/* 「修改昵称」是工具栏唯一动作，靠右放（原来靠一个 .right 占位 span 撑开，
   占位内容删掉后改成按钮自己 margin-left:auto，窄屏换行后同样成立）*/
.w7-tool .w7-btn{margin-left:auto}

.w7-body{padding:9px}

/* 分组框：照 7.css 的 fieldset（1px #cdd7db + 内白描边）*/
.w7-group{
  position:relative; padding:12px 10px 10px;
  border:1px solid #cdd7db; border-radius:3px;
  box-shadow:inset 0 0 0 1px #fff;
}
.w7-group + .w7-group{margin-top:9px}
.w7-group-cap{
  position:absolute; top:-8px; left:8px; padding:0 4px;
  font-size:9pt; color:#222; background:var(--w7-surface);
}

/* 凹陷内容区：白底 + 深灰细边（7.css 的列表框边框 #828790）*/
.w7-sunken{
  border:1px solid #828790; border-radius:2px;
  overflow:hidden; background:#fff;
  box-shadow:inset 0 1px 3px rgba(20,40,70,.16);
}

/* 状态栏：独立面板，贴着客户区下沿 */
.w7-status{
  margin:0 6px 6px;
  display:flex; align-items:center;
  background:var(--w7-surface);
  border:1px solid var(--w-bd); border-top:0;
  box-shadow:0 1px 0 #fff9,1px 0 0 #fff9,-1px 0 0 #fff9;
  font-size:9pt; color:#222;
}
.w7-status-field{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 6px; flex:0 0 auto;
  border-right:1px solid #cfcfcf;
}
/* ⚠ 只在「有第二格」时才把最后一格推到右边：只剩一格（连接状态）时必须留在左侧，
   否则状态栏会变成右边孤零零一个字。*/
.w7-status-field:not(:first-child):last-child{margin-left:auto; border-right:0; border-left:1px solid #cfcfcf}
.w7-status-field.ok{color:#0b6b38}
.w7-status a{color:#0066cc; text-decoration:none}
.w7-status a:hover{color:#3399ff; text-decoration:underline}
.w7-status .dot{
  display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#c9f5d6,#1f8b4c 72%);
  box-shadow:0 0 5px rgba(60,200,120,.9);
}

/* ==========================================================================
   4. 控件（硬分界三段渐变 + 自遮挡 hover / active，照 7.css）
   ========================================================================== */
.w7-btn{
  position:relative; z-index:0;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  min-width:75px; min-height:23px; padding:0 12px; box-sizing:border-box;
  font:var(--w7-font); font-size:9pt; color:#222; text-align:center; text-decoration:none;
  white-space:nowrap; cursor:pointer;
  border:1px solid var(--el-bd); border-radius:3px;
  box-shadow:var(--el-sd);
  background:var(--el-grad);
  transition:border-color 1s linear;
}
.w7-btn::before{
  content:''; position:absolute; inset:0; border-radius:3px; z-index:-1;
  box-shadow:var(--el-sd); background:var(--el-grad-h);
  opacity:0; transition:opacity 1s linear;
}
.w7-btn::after{
  content:''; position:absolute; inset:0; border-radius:2px; z-index:-1;
  box-shadow:var(--el-sd-a); background:var(--el-grad-a);
  opacity:0; transition:opacity .3s;
}
.w7-btn:hover{border-color:var(--el-bd-h); transition:border-color .3s}
.w7-btn:hover::before{opacity:1; transition:opacity .3s}
.w7-btn:active{border-color:var(--el-bd-a); transition:border-color .3s}
.w7-btn:active::after{opacity:1}
.w7-btn:focus-visible{outline:1px dotted #000; outline-offset:-4px; box-shadow:inset 0 0 0 2px #98d1ef}
.w7-btn:disabled{
  background:#f4f4f4; border-color:var(--el-bd-d); color:#838383;
  box-shadow:var(--el-sd); cursor:default;
}
.w7-btn:disabled::before,.w7-btn:disabled::after{opacity:0}
/* 默认按钮：蓝边 + 悬停渐变 + 呼吸内光（7.css 的 .default）*/
.w7-btn.primary{border-color:#5586a3; background:var(--el-grad-h); animation:1.2s ease infinite alternate w7-btn-pulse}
@keyframes w7-btn-pulse{
  from{box-shadow:inset 0 0 3px 1px #34deffdd}
  to{box-shadow:inset 0 0 1px 1px #34deffdd}
}

/* 文本框：7.css 的四边不同色边框 */
.w7-input{
  flex:1; min-width:0; box-sizing:border-box; height:23px;
  font:var(--w7-font); font-size:9pt; padding:3px 4px 5px;
  border:1px solid; border-color:#abadb3 #dbdfe6 #e3e9ef #e2e3ea;
  border-radius:2px; background-color:#fff; color:#111;
  transition:border-color .5s;
}
.w7-input:hover{border-color:#5794bf #b7d5ea #c7e2f1 #c5daed; transition:border-color .3s}
.w7-input:focus{outline:none; border-color:#3d7bad #a4c9e3 #b7d9ed #b5cfe7}
.w7-input:disabled{border-color:#afafaf; box-shadow:inset 0 0 0 1px #ffff; background:var(--w7-surface)}

.w7-row{display:flex; align-items:center; gap:8px}
.w7-row + .w7-row{margin-top:7px}
.w7-row > label{font-size:9pt; color:#222; white-space:nowrap}
.w7-tip{font-size:9pt; color:#4d4d4d; margin-top:5px}
.w7-tip.err{color:#b31810; font-weight:700}
.w7-tip.ok{color:#0d6b34}

.w7-icon{width:14px; height:14px; flex:0 0 auto; display:block; opacity:.9; filter:drop-shadow(0 1px 0 #fff)}

/* ==========================================================================
   5. 聊天记录（白底黑字；对比度优先）
   ========================================================================== */
.w7-log{
  height:clamp(240px,44vh,380px); overflow-y:auto;
  padding:6px 8px; font-size:9pt; line-height:1.7;
  color:#111; background:#fff;
}
.w7-log .msg{display:block; word-break:break-word; padding:1px 0}
.w7-log .msg-time{color:#6d6d6d; font-variant-numeric:tabular-nums}
.w7-log .msg-name{font-weight:700; color:#0d3f7a}
.w7-log .msg-name.admin{color:#b31616}
.w7-log .msg-sys{color:#55606c; font-style:italic}
.w7-log .msg-sys .msg-name{color:#4a5b6b; font-style:normal}
.w7-log .msg-warn .msg-name{color:#b31616}
.w7-log .msg-me{background:#e8f2fc; border-radius:2px; padding-left:4px}
.w7-log a{text-decoration:none}
.w7-log a:hover{text-decoration:none}

/* 滚动条：照 7.css（16px、浅灰渐变槽、白滑块 + 1px 边框、两端箭头按钮）*/
.w7-log::-webkit-scrollbar{width:16px}
.w7-log::-webkit-scrollbar-track{background:linear-gradient(to right,#e5e5e5,#f0f0f0 20%)}
.w7-log::-webkit-scrollbar-corner{background:var(--el-bg)}
.w7-log::-webkit-scrollbar-thumb{
  border:1px solid var(--el-bd); border-radius:3px; box-shadow:var(--el-sd);
  background:linear-gradient(to right,var(--el-bg) 45%,var(--el-bg-s1) 45%,var(--el-bg-s2));
}
.w7-log::-webkit-scrollbar-thumb:hover{
  border-color:var(--el-bd-h);
  background:linear-gradient(to right,#eaf6fd 45%,#bee6fd 45%);
}
.w7-log::-webkit-scrollbar-thumb:active{
  border-color:var(--el-bd-a);
  background:linear-gradient(to right,#c4e5f6 45%,#98d1ef 45%);
}
.w7-log::-webkit-scrollbar-button{height:17px; border:1px solid transparent; background-color:#f0f0f0}
.w7-log::-webkit-scrollbar-button:vertical:decrement{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='16' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23333'/%3E%3Cstop offset='1' stop-color='%23aaa'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 6H7V7H6V8H5V9H4V10H11V9H10V8H9V7H8V6Z' fill='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(to right,#e5e5e5,#f0f0f0 20%);
}
.w7-log::-webkit-scrollbar-button:vertical:increment{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='16' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23333'/%3E%3Cstop offset='1' stop-color='%23aaa'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z' fill='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(to right,#e5e5e5,#f0f0f0 20%);
}
.w7-log::-webkit-scrollbar-button:vertical:decrement:hover,
.w7-log::-webkit-scrollbar-button:vertical:increment:hover{
  border-color:var(--el-bd); border-radius:3px; box-shadow:var(--el-sd);
  background-color:var(--el-bg);
}

/* ==========================================================================
   6. 页面容器 / 窄屏
   ========================================================================== */
.w7-page{max-width:1040px; margin:0 auto; padding:22px 16px 0}

@media (max-width:640px){
  /* 窄屏：**省掉窗体外那一圈投影与留白，让窗体贴边**（等效 Win7 最大化窗口）。
     手机上左右各留 10px 页边 + 6px 玻璃边 = 白丢 30 多像素，聊天记录区本来就窄，
     这一圈纯装饰的投影区域优先砍掉。窗框自身保留（它是窗体的一部分），只把
     外圈的 margin / 圆角 / 投影 / 左右描边去掉。*/
  .w7-page{padding:0}
  .w7-win{
    margin:0; border:0; border-radius:0; box-shadow:none;
    -webkit-backdrop-filter:blur(4px) saturate(1.1);
    backdrop-filter:blur(4px) saturate(1.1);
  }
  .w7-win::before{border-radius:0; box-shadow:none}
  .w7-title{border-radius:0}
  .w7-client{margin:0 4px 0}
  .w7-status{margin:0 4px 4px; flex-wrap:wrap}
  .w7-status-field{padding:3px 6px}
  .w7-log{height:50vh}
  .w7-title-sub{display:none}
}