/* ==============================================================================
   网页版聊天 · 浅色主题
   ------------------------------------------------------------------------------
   白底 + 黄色强调。和申请站/官网共用同一套「结构语言」：
   像素字体做标题、硬边阴影、方角、页眉左品牌右导航。
   区别只在配色：这里反过来 —— 白是主色，黄是强调。

   用法：<body class="theme-light">，由 chat.php 自动引入。
   ========================================================================== */

.theme-light {
  /* 底：暖白，不是纯白（纯白刺眼且显得廉价） */
  --black:      #ffffff;
  --near-black: #fdfbf7;
  --off-black:  #f7f3ea;
  --panel:      #ffffff;
  --panel-2:    #fbf7ee;

  --line:        rgba(60, 48, 20, .13);
  --line-strong: rgba(60, 48, 20, .26);

  /* 文字：深棕黑，比纯黑柔和 */
  --white:  #2b2419;
  --grey-2: #4a4034;
  --grey-3: #6b6053;
  --grey-4: #8c8175;
  --text:     #2b2419;
  --text-dim: #6b6053;

  /* 黄色强调：沿用官网的金色阶，保持系列统一 */
  --gold-1: #fff6c2;
  --gold-2: #ffe680;
  --gold-3: #ffc42b;
  --gold-4: #d99e00;
  --gold-5: #b37f00;
  --gold-6: #8a6200;

  --focus: #b37f00;

  /* 浅底上阴影要更轻，不然发灰 */
  --shadow-hard: 0 3px 0 rgba(120, 96, 32, .16);
  --shadow-lift: 0 6px 0 rgba(120, 96, 32, .16);

  background: var(--near-black);
  color: var(--text);
}

/* ── 页眉：白底金字边 ───────────────────────────────────── */
.theme-light .header {
  background: #ffffff;
  border-bottom: 3px solid var(--gold-3);
  box-shadow: 0 3px 0 rgba(120, 96, 32, .13);
}
.theme-light .header__title {
  color: var(--text);
  text-shadow: none;
}
.theme-light .header__sub { color: var(--grey-4); }
.theme-light .header__nav a {
  color: var(--grey-2);
  text-shadow: none;
}
.theme-light .header__nav a:hover { color: var(--gold-5); }
.theme-light .header__nav a.is-current { color: var(--gold-5); }
.theme-light .header__toggle span { background-color: var(--gold-4); }
.theme-light .header__toggle:hover span { background-color: var(--gold-3); }
.theme-light .header__toggle:focus-visible { outline-color: var(--gold-4); }

/* 汉堡展开的面板：白底金边。
   ⚠️ 必须写在所有宽度上（不能只写在媒体查询里）—— style.css 里那条
   .header__nav 是绿底，桌面宽度没有浅色覆盖就整个变成绿色面板了。
   .theme-light 前缀特异性更高，不用管媒体查询的顺序。 */
.theme-light .header__nav {
  background: #ffffff;
  border: 2px solid var(--gold-3);
  border-top: 0;
  box-shadow: 0 4px 0 rgba(120, 96, 32, .16);
}
.theme-light .header__nav a { color: var(--text); border-top: 1px solid var(--line); }
/* ⚠️ 上面那条只有 2 个类，压不住 style.css 里 `.header.is-open .header__nav a`
   （3 个类，里面写死了白字）。不补这条，展开后的菜单是「白底白字」＝看不见。 */
.theme-light .header.is-open .header__nav a {
  color: var(--text);
  border-top: 1px solid var(--line);
}
.theme-light .header.is-open .header__nav a:first-child { border-top: 0; }
.theme-light .header__nav a:hover,
.theme-light .header.is-open .header__nav a:hover,
.theme-light .header__nav a.is-current,
.theme-light .header.is-open .header__nav a.is-current {
  background: var(--gold-1);
  color: var(--text);
}

/* ── 页脚 ──────────────────────────────────────────────── */
.theme-light .footer {
  background: #fffdf8;
  border-top: 2px solid var(--line);
}
.theme-light .footer a { color: var(--grey-2); }
.theme-light .footer a:hover { color: var(--gold-5); }
.theme-light .footer__note { color: var(--grey-4); }
/* 浅色页脚上白色 logo 看不见 ⇒ 换成黑版（宽度已在 style.css 里对齐好） */
.theme-light .footer__logo--light { display: none; }
.theme-light .footer__logo--dark { display: block; }

/* ── 标题与正文 ────────────────────────────────────────── */
.theme-light .section h1 { color: var(--text); }
.theme-light .lead { color: var(--grey-2); }

.theme-light .desc--light { color: var(--grey-2); }
.theme-light .code {
  display: inline-block;
  padding: 3px 9px;
  background: var(--gold-1);
  border: 1px solid var(--gold-3);
  color: #6b4e00;
  font-family: var(--font-pixel);
  font-size: 13px;
}

/* ── 登录页的密码说明提示 ───────────────────────────────────
   比普通 notice 更重：整块金底 + 左粗边 + 实心色块标签，
   让人在填表之前一定先看到"这不是游戏登录密码"。 */
.pwarn {
  position: relative;
  margin: 0 0 22px;
  padding: 14px 16px 14px 18px;
  background: #fffaea;
  border: 2px solid var(--gold-3);
  border-left-width: 8px;
  box-shadow: 0 3px 0 rgba(120, 96, 32, .13);
}
.pwarn__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.pwarn__head strong {
  font-size: 16px;
  color: #7a4a00;                      /* 深金褐，白底上够清楚但不刺眼 */
  line-height: 1.35;
}
.pwarn__tag {
  flex: 0 0 auto;
  padding: 2px 9px;
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 700;
  color: #fffaea;
  background: var(--gold-4);
  border: 1px solid var(--gold-5);
}
.pwarn__body p {
  margin: 3px 0;
  font-size: 13.5px;
  color: #6b5a3a;
  line-height: 1.6;
}
@media (max-width: 480px) {
  .pwarn { padding: 12px 12px 12px 14px; }
  .pwarn__head strong { font-size: 15px; }
}

/* ── 卡片 ──────────────────────────────────────────────── */
.theme-light .box--light {
  background: #ffffff;
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-lift);
}
.theme-light .box__title { color: var(--text); }

/* ── 表单 ──────────────────────────────────────────────── */
.theme-light .field__label { color: var(--grey-2); }
.theme-light .field__input {
  background: #fffefb;
  border: 2px solid var(--line-strong);
  color: var(--text);
}
.theme-light .field__input:focus {
  border-color: var(--gold-3);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 196, 43, .28);
}
.theme-light .field__hint { color: var(--grey-4); }

/* ── 按钮：黄色实心（浅底上金色实心才够醒目）──────────────── */
.theme-light .btn--gold {
  background: var(--gold-3);
  color: #4a3600;
  border: 2px solid var(--gold-5);
  box-shadow: 0 4px 0 var(--gold-5);
  font-weight: 700;
}
.theme-light .btn--gold:hover { background: var(--gold-2); }
.theme-light .btn--gold:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-5); }
.theme-light .btn--gold:disabled {
  background: #e6e0d2;
  color: #a89e8c;
  border-color: #d3cbb8;
  box-shadow: 0 4px 0 #d3cbb8;
  cursor: not-allowed;
}
.theme-light .btn--block { width: 100%; }

/* ── 提示条 ────────────────────────────────────────────── */
.theme-light .notice { background: #fffdf5; border-left-color: var(--gold-3); color: var(--grey-2); }
.theme-light .notice--err {
  background: #fdf0f0;
  border-left-color: #c62b2b;
  color: #8a2020;
}
.theme-light .notice--ok {
  background: #f1f8ec;
  border-left-color: #4a9c2a;
  color: #2f6b1a;
}
.theme-light .notice--pause {
  background: #fdf0f0;
  border-left-color: #c62b2b;
  color: #8a2020;
}
.theme-light .notice--pause strong { color: #a32424; }

/* ═══════════════════════════════════════════════════════
   聊天主体
   ═══════════════════════════════════════════════════════ */
.chat {
  background: #ffffff;
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-lift);
}

.chat__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--gold-1);
  border-bottom: 2px solid var(--gold-3);
}
.chat__title {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 22px;
  color: #4a3600;
  line-height: 1.1;
}
/* 登录玩家的正版头像。
   尺寸/渲染方式和官网「在线玩家」那块保持一致（40px + pixelated +
   加载期间的占位底色），两个地方看起来才是同一个东西。 */
.chat__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background: #e6e0d2;              /* 图没加载出来时的占位，别让位置塌陷 */
  border: 2px solid var(--gold-3);
  image-rendering: pixelated;
}

/* 当前网页端在线用户：x —— 跟在「聊天」标题后面 */
.chat__online {
  font-size: 12.5px;
  color: #6b4e00;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid var(--gold-4);
  white-space: nowrap;
}
.chat__online::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  background: #4a9c2a;              /* 绿点 = 有人在线 */
  border-radius: 50%;
  vertical-align: 1px;
}

.chat__who {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.chat__me {
  font-size: 13px;
  color: #6b4e00;
}
.chat__logout {
  font-size: 13px;
  color: #8a6200;
  text-decoration: underline;
}
.chat__logout:hover { color: #4a3600; }

/* 消息区：固定高度，底部对齐（像游戏聊天栏一样从下往上长） */
.chat__box {
  height: 52vh;
  min-height: 320px;
  max-height: 620px;
  overflow-y: auto;
  padding: 14px 18px;
  background:
    repeating-linear-gradient(
      180deg,
      #fffefb 0,
      #fffefb 27px,
      rgba(255, 196, 43, .05) 27px,
      rgba(255, 196, 43, .05) 28px
    );
}
.chat__waiting {
  color: var(--grey-4);
  font-size: 13px;
  text-align: center;
  padding: 30px 0;
}

.chat__line {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 3px 0;
  line-height: 1.55;
  word-break: break-word;
}
.chat__who-name {
  font-family: var(--font-pixel);
  font-size: 13px;
  flex: 0 0 auto;
}

/*
 * 网页来源标记 [dbcj通网页版]
 * 做成实心金底的小色块 —— 比只改名字颜色醒目得多，
 * 一屏消息里能立刻挑出"哪些是从网页发的"。
 */
.chat__from {
  flex: 0 0 auto;
  padding: 1px 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: #4a3600;
  background: var(--gold-3);
  border: 1px solid var(--gold-5);
  white-space: nowrap;
}
/* 网页来的用黄色标，游戏来的用棕色标 —— 一眼分清来源 */
.chat__line--web .chat__who-name { color: var(--gold-5); }
.chat__line--game .chat__who-name { color: #7a6a52; }
.chat__text { color: var(--text); font-size: 14.5px; }
.chat__line--web .chat__text { color: #3d3115; }
/* 整行淡淡铺一层金底，扫一眼就能分出网页来的那几条 */
.chat__line--web {
  background: rgba(255, 196, 43, .10);
  border-left: 3px solid var(--gold-3);
  padding-left: 8px;
  margin-left: -11px;
}

.chat__form {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  border-top: 2px solid var(--line);
  background: #fffdf8;
}
.chat__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 13px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text);
  background: #fffefb;
  border: 2px solid var(--line-strong);
}
.chat__input:focus {
  border-color: var(--gold-3);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 196, 43, .28);
}
.chat__input:disabled { background: #f2ede2; color: #a89e8c; }
/* ⚠️ width: auto 是必须的。
   style.css 的移动端媒体查询里有 `.btn { width: 100% }`（那是给申请页表单用的），
   不加这条的话，聊天页的「发送」按钮在手机上会撑满整行，
   把输入框挤成一条竖线 —— 字全挤在一起，看起来就像"光标跳到句首"。 */
.chat__send { flex: 0 0 auto; width: auto; }

.chat__foot {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 18px 12px;
  border-top: 1px solid var(--line);
}
.chat__hint { font-size: 12.5px; color: var(--grey-4); }
.chat__hint--warn { color: #a32424; font-weight: 700; }
.chat__hint--warn.is-on { display: inline; }
.chat__hint--warn:not(.is-on) { display: none; }

/* 滚动条（浅色下默认滚动条太扎眼） */
.theme-light .chat__box::-webkit-scrollbar { width: 10px; }
.theme-light .chat__box::-webkit-scrollbar-track { background: #f2ede2; }
.theme-light .chat__box::-webkit-scrollbar-thumb {
  background: var(--gold-4);
  border: 2px solid #f2ede2;
}

@media (max-width: 720px) {
  /* 手机上把发送按钮压小，输入框要尽可能宽 */
  .chat__send {
    width: auto;
    padding: 10px 16px;
    font-size: 16px;
  }
  .chat__input { font-size: 16px; }   /* ≥16px 时 iOS 不会自动放大页面 */
  .chat__bar { padding: 12px 14px; }
  .chat__title { font-size: 12px; }
  .chat__who { width: 100%; margin-left: 0; }
  .chat__online { font-size: 11.5px; padding: 2px 8px; }
  .chat__avatar { width: 32px; height: 32px; }
  .chat__box { height: 46vh; padding: 12px 14px; }
  .chat__form { padding: 10px 14px; }
  .chat__foot { padding: 8px 14px 10px; }
}

/* ── 进入聊天时的分界线 ─────────────────────────────────────
   把"之前的历史消息"和"这次进来之后的"隔开。
   左右两条细线夹着中间的文字，比单纯一条横线看得清是"边界"而不是分隔符。 */
.chat__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 12px;
  font-size: 11.5px;
  color: var(--grey-4);
  white-space: nowrap;
}
.chat__divider::before,
.chat__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-strong);
}
.chat__divider > span {
  flex: 0 0 auto;
  padding: 0 2px;
}

/* ── 指令行 + 一键复制 ────────────────────────────────────── */
.cmdline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.theme-light .cmdline .code { flex: 0 1 auto; }

.copybtn {
  flex: 0 0 auto;
  padding: 5px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #6b4e00;
  background: #fff;
  border: 2px solid var(--gold-3);
  cursor: pointer;
  transition: background .15s ease;
}
.copybtn:hover { background: var(--gold-1); }
.copybtn:active { transform: translateY(1px); }
.copybtn:focus-visible { outline: 2px solid var(--gold-4); outline-offset: 2px; }
.copybtn.is-done {
  background: var(--gold-3);
  color: #4a3600;
  border-color: var(--gold-5);
  font-weight: 700;
}

/* 忘记密码那行：稍微压一下，别跟正文抢视线 */
.forget {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  color: var(--grey-3);
  font-size: 14px;
}

/* ── 页脚照搬官网结构（浅色版）：栏目标题 + 底部条 ──────────
   页脚底色保持浅色主题的暖白 #fffdf8（不改），只补官网那套结构样式。 */
.theme-light .footer__col-title { color: #b37f00; }
.theme-light .footer__bottom { border-top: 2px solid var(--line); }
.theme-light .footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;          /* 与官网页脚底部条一致（原来是 16px） */
  font-size: 13px;
  color: var(--grey-4);
}
.theme-light .footer__bottom-inner a { color: var(--grey-2); text-decoration: none; }
.theme-light .footer__bottom-inner a:hover { color: var(--gold-5); }
.theme-light .footer__links { display: flex; flex-direction: column; gap: 11px; }

/* ── 每条消息后面的时间 ───────────────────────────────────── */
.chat__time {
  flex: 0 0 auto;
  margin-left: 4px;
  font-size: 11.5px;
  color: var(--grey-4);
  font-variant-numeric: tabular-nums;   /* 数字等宽，一列看起来整齐 */
  white-space: nowrap;
}
.chat__line--web .chat__time { color: #b09468; }