/* ============================================================
   星辰智文 · 主题「二〇二四 twentyfour」— 聊天页配色补丁
   ------------------------------------------------------------
   由 v1.11.3 生成器按本主题 style.css 的 :root 变量自动产出。
   AI 聊天页 /chat 沿用 yun.css 的布局骨架（立绘/气泡/输入框结构复杂），
   本文件只覆盖配色，保证聊天页与全站视觉一致。

   ⚠ 改配色请改本主题 style.css 的 :root，然后重新运行
     python3 gen_chat_css.py  —— 不要手改本文件（会被覆盖）。

   加载顺序：yun.css（布局） → 本文件（配色覆盖）
   ============================================================ */

/* ---------- 变量覆盖 ---------- */
:root{
  --bg:#f9f9f9;
  --card:#ffffff;
  --ink:#111111;
  --muted:#a4a4a4;
  --pri:#d8613c;
  --pri-d:#a94427;
  --pri-soft:rgba(216,97,60,.10);
  --mint:#6c8b62;
  --gold:#d8613c;
  --line:#e5e5e5;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* ---------- 页面底色 ---------- */
body.chat-page{
  background:var(--bg);
  color:var(--ink);
}

/* ---------- 顶部导航 ---------- */
nav{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.logo{color:var(--ink);letter-spacing:2px}
.navface{border:1px solid var(--line);box-shadow:0 0 16px rgba(216,97,60,.10)}
.dot{background:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
.lk{color:var(--muted);letter-spacing:.8px;transition:color .2s}
.lk:hover{color:var(--pri)}
.lk.on{color:var(--pri);font-weight:600}

/* ---------- 公告条 ---------- */
#noticeBar,.notice{
  background:rgba(216,97,60,.10) !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
}

/* ---------- 对话气泡：星云 ---------- */
.msg .bub{
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--line);
}
.msg .t{color:var(--muted)}
.bubble-name{color:var(--pri)}

/* ---------- 对话气泡：老板 ---------- */
.msg.boss .bub{
  background:var(--pri);
  color:#ffffff;
  border:0;
  font-weight:500;
}

/* ---------- 星云说话气泡 ----------
   yun.css 这里用的是硬编码颜色（#fff/#c9bfd8），不是变量，
   所以必须用 !important 直接覆盖。 */
.speech{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.08) !important;
}
.speech-pane{background:transparent;color:var(--ink)}
.speech::after{
  background:var(--card) !important;
  border-right:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
}
.speech-line{color:var(--ink)}
.speech-badge{
  background:var(--pri) !important;
  color:#ffffff !important;
  font-weight:700;
  letter-spacing:1px;
  box-shadow:none !important;
}

/* 内心想法 */
.thought-line{color:#3f7d6c !important;border-left-color:var(--mint) !important}
.thought-meta{color:var(--muted) !important}

/* ---------- 输入区 ---------- */
.input{
  background:var(--card);
  border-top:1px solid var(--line);
  transition:border-color .25s,box-shadow .25s;
}
.input input{
  background:transparent;
  color:var(--ink);
  letter-spacing:.4px;
  border:1.5px solid var(--line);
}
.input input::placeholder{color:var(--muted)}
.input input:focus{border-color:var(--pri)}
.input button{
  background:var(--pri);
  color:#ffffff;
  font-weight:700;
  letter-spacing:2px;
  transition:filter .2s;
}
.input button:hover{filter:brightness(1.08)}

/* ---------- 聊天区容器 ---------- */
.chat{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.chat .inner{background:transparent}
.msgs{background:transparent}

/* ---------- 头像细边 ---------- */
.msg img,.msg .ava{
  border:1px solid var(--line);
}

/* ---------- 滚动条 ---------- */
.msgs::-webkit-scrollbar{width:6px}
.msgs::-webkit-scrollbar-track{background:transparent}
.msgs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.msgs::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ============================================================
   输入框可见性修复（v1.11.3）
   ------------------------------------------------------------
   原因：yun.css 里 .stage{height:calc(100vh - 58px)} 没扣掉
        .desk 的 12px 下内边距、导航栏实际高度，以及真机浏览器的
        地址栏/Home 指示条，叠加后把 .chat 底部顶出视口，
        表现为「输入框在屏幕以下」。
   做法：用 dvh（动态视口高度，随地址栏收放自动调整）重算，
        并预留 safe-area 安全区。dvh 不支持的浏览器退回 vh。
   ============================================================ */
@media(max-width:640px){
  body.chat-page{background:var(--bg)}

  /* 桌面端的固定偏移在手机端会算多，这里整体收短 */
  .desk{
    padding:0 8px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .stage{
    /* 100vh 在手机浏览器里包含被地址栏遮住的部分，dvh 才是真实可见高度。
       再减掉导航(~54px) + desk 上下内边距 + 安全区，留足余量。 */
    height:calc(100dvh - 54px - 22px - env(safe-area-inset-bottom, 0px)) !important;
    min-height:0 !important;
  }

  .input{
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap:8px;
  }
  .input button{letter-spacing:1px}
  .chat{border-radius:16px}
}

/* 键盘弹起时进一步压缩，保证输入框永远在视口内 */
@media(max-width:640px) and (max-height:560px){
  .stage{height:calc(100dvh - 40px) !important}
  .speech{display:none}
}