/* =========================================================
   全局 / 公共样式
   说明：这一段放的是「所有页面」或者「已登录后的多个页面」都会
   用到的基础样式（CSS reset、全局字体/背景色、公共顶部导航栏等）。
   ========================================================= */

/* 全局 CSS reset：统一所有元素的盒模型为 border-box，避免 padding/border 撑大元素宽高 */
* {
  box-sizing: border-box;
}

/* 页面级基础样式：统一字体、深色背景与文字颜色，四个页面（登录/列表/聊天/播放）都基于这个底色 */
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #14161a;
  color: #e8e8e8;
}

/* 所有 <button> 的基础重置：去掉默认边框/圆角，统一光标和字重，具体配色由各自的类名（如 .btn-primary/.btn-ghost）决定 */
button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

/* ---- 公共顶部导航栏 topbar ----
   index.html（视频列表页）、chat.html（独立聊天室）、player.html（播放页）
   三个已登录页面共用同一套顶部导航栏样式；login.html 登录页没有顶部导航栏，不使用这里的样式。 */

/* 顶部导航栏容器：左右两端对齐（左边站点品牌，右边用户信息/操作按钮） */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: #1a1c22;
  border-bottom: 1px solid #2c3038;
}

/* 顶部导航栏左侧的站点品牌（logo + 名称）容器 */
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
}

/* 顶部导航栏里的站点 logo 图片 */
.topbar .brand-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
}

/* 顶部导航栏右侧的用户信息区域（当前用户名、退出登录等按钮的容器） */
.topbar .user-area {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #9a9da5;
}

/* 响应式：窄屏下顶部导航栏允许换行、缩小字号，避免挤压变形（index/chat/player 共用） */
@media (max-width: 860px) {
  .topbar {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .topbar .brand {
    font-size: 15px;
  }

  .topbar .user-area {
    font-size: 12px;
    gap: 8px;
  }
}

/* ---- 通用 Lightbox：全屏查看图片，支持左右/上下键切换、Esc 关闭、点击空白处关闭 ----
   index.html（图片库缩略图）、chat.html（独立聊天室里发的图片）、player.html（播放页
   聊天面板里发的图片）三个页面共用同一套 lightbox 结构和样式，具体交互逻辑见
   public/js/lightbox.js。 */

/* 全屏遮罩层 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox[hidden] {
  display: none;
}

/* 当前查看的大图：等比例缩放，不超过视口的大部分空间，给顶部/底部留出按钮和说明文字的位置 */
.lightbox-image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

/* 关闭按钮：右上角圆形按钮 */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 上一张 / 下一张按钮：左右两侧竖直居中的圆形按钮。
   只有一张图（比如单条聊天图片）时，lightbox.js 会把这两个按钮隐藏掉。 */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

/* 底部文件名 + "第 N / 共 M 张" 说明文字（只有一张图时不显示"第 N / 共 M 张"部分） */
.lightbox-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #d0d0d0;
  font-size: 13px;
  text-align: center;
  max-width: 80vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 响应式：窄屏下按钮/留白稍微缩小，把更多空间留给图片本身 */
@media (max-width: 860px) {
  .lightbox-image {
    max-width: 94vw;
    max-height: 80vh;
  }

  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .lightbox-close {
    width: 34px;
    height: 34px;
    font-size: 18px;
    top: 12px;
    right: 12px;
  }

  .lightbox-prev {
    left: 8px;
  }

  .lightbox-next {
    right: 8px;
  }
}

/* ---- Markdown 在线阅读弹层：点击"相关附件"里 .md 文件的"阅读"按钮时打开 ----
   结构上和 lightbox 是同一种"全屏遮罩 + 居中内容"套路，但这里是一个带滚动条的
   长文阅读框，而不是一张图，所以另起一套样式，不复用 .lightbox 本身的规则。
   内部渲染用的是 .msg .bubble 那一整套 Markdown 排版 CSS（见"聊天公共组件"一节），
   这里只负责外层的浮层容器。 */
.md-reader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

.md-reader[hidden] {
  display: none;
}

.md-reader-box {
  background: #1c1e24;
  border: 1px solid #2c3038;
  border-radius: 12px;
  width: 100%;
  max-width: 900px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.md-reader-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #2c3038;
  flex-shrink: 0;
}

.md-reader-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  color: #ffffcc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Kaiti SC", "STKaiti", "DFKai-SB", "KaiTi", serif;
  font-weight: 500;
  position: relative;
  padding-bottom: 8px; 
}

.md-reader-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);  
  width: 220px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, rgba(255, 60, 60, 0), rgba(255, 40, 40, 1) 50%, rgba(255, 60, 60, 0));
  box-shadow: 0 0 6px rgba(255, 40, 40, 0.9), 
              0 0 12px rgba(255, 0, 0, 0.5);
}

.md-reader-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #9a9da5;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

.md-reader-close:hover {
  color: #e8e8e8;
}

.md-reader-content {
  overflow-y: auto;
  padding: 18px;
}

/* 阅读弹层里用的是完整宽度的正文，而不是聊天里那种"最多占 90% 宽度的气泡"，
   借用 .msg .bubble 的 Markdown 排版样式的同时，把这两条聊天专属的宽度限制去掉。 */
.md-reader-content .msg,
.md-reader-content .msg .bubble {
  width: 100%;
  max-width: 100%;
}

.md-reader-content .msg .bubble {
  background: transparent;
  padding: 0;
}

/* ---- 阅读弹层专属的排版：比聊天气泡里的尺寸明显放大一档 ----
   聊天气泡里的标题/引用/列表故意做得很克制（毕竟气泡本身空间有限），直接搬到
   一个独立的长文阅读弹层里就会显得"看起来像没生效"。这里针对
   .md-reader-content 单独放大字号、间距、行距，做出清晰的排版层级，
   同时不影响聊天气泡内本来就偏紧凑的样式。 */
.md-reader-content .msg {
  font-size: 15px;
  line-height: 1.9;
}

.md-reader-content .msg .bubble .md-heading {
  margin: 22px 0 12px;
  line-height: 1.35;
  font-weight: 700;
  color: #f2f2f3;
}
.md-reader-content .msg .bubble .md-heading:first-child {
  margin-top: 0;
}
.md-reader-content .msg .bubble h1.md-heading {
  font-size: 28px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2c3038;
}
.md-reader-content .msg .bubble h2.md-heading {
  font-size: 23px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2c3038;
}
.md-reader-content .msg .bubble h3.md-heading { font-size: 19px; }
.md-reader-content .msg .bubble h4.md-heading { font-size: 17px; }
.md-reader-content .msg .bubble h5.md-heading,
.md-reader-content .msg .bubble h6.md-heading { font-size: 16px; }

.md-reader-content .msg .bubble p.md-p {
  margin: 14px 0;
}

.md-reader-content .msg .bubble .md-quote {
  margin: 14px 0;
  padding: 8px 18px;
  border-left: 4px solid #5a8dee;
  background: rgba(90, 141, 238, 0.08);
  border-radius: 0 6px 6px 0;
  color: #ced1d8;
  opacity: 1;
}
.md-reader-content .msg .bubble .md-quote .md-quote {
  background: rgba(90, 141, 238, 0.05);
}

.md-reader-content .msg .bubble .md-list {
  margin: 12px 0;
  padding-left: 28px;
}
.md-reader-content .msg .bubble .md-list li {
  margin: 8px 0;
}

.md-reader-content .msg .bubble pre.md-code-block code {
  font-size: 13px;
  line-height: 1.7;
}

.md-reader-content .msg .bubble .md-hr {
  margin: 24px 0;
}

.md-reader-content .msg .bubble .md-table th,
.md-reader-content .msg .bubble .md-table td {
  padding: 8px 12px;
  font-size: 13px;
}

/* 响应式：窄屏下弹层留白收窄，尽量把空间让给正文 */
@media (max-width: 860px) {
  .md-reader {
    padding: 16px;
  }

  .md-reader-header {
    padding: 12px 14px;
  }

  .md-reader-content {
    padding: 14px;
  }
}


/* =========================================================
   登录页开始 (login.html)
   ========================================================= */

/* 登录页整体容器：撑满一屏高度，内容纵向排列 */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 让登录卡片在屏幕中间垂直水平居中显示的包裹层 */
.center-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* 登录表单的卡片容器：深色背景 + 圆角边框 */
.card {
  background: #1f2229;
  border: 1px solid #2c3038;
  border-radius: 12px;
  padding: 32px;
  width: min(320px, 90vw);
}

/* 卡片顶部「品牌区」：logo 图片 + 标题竖直居中排列 */
.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

/* 登录页专用的大号 logo 图片（比顶部导航栏里的 logo 更大） */
.brand-logo-large {
  height: 48px;
  width: auto;
  max-width: 80%;
  object-fit: contain;
}

/* 登录卡片标题（如“私密影院”） */
.card h1 {
  font-size: 20px;
  margin: 0;
  text-align: center;
}

/* 登录页底部的版权/落款文字 */
.copyright {
  text-align: center;
  font-size: 12px;
  color: #5a5d65;
  padding: 16px 0 20px;
}

/* 装饰用的短横线（登录卡片里用来分隔品牌区和其它内容的小渐变线） */
.custom-line {
  width: 100px;                 /* 限制横线的宽度 */
  height: 1.55px;                 /* 控制横线的粗细 */
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* 渐变色横线 */
  margin: 10px auto;              /* 让这条短横线在页面居中 */
  border-radius: 2px;          /* 让线条两端带有一点圆角 */
}

/* 表单里每一组「label + input」的外层间距容器 */
.field {
  margin-bottom: 16px;
}

/* 表单字段的说明文字（用户名/密码） */
.field label {
  display: block;
  font-size: 13px;
  color: #9a9da5;
  margin-bottom: 6px;
}

/* 用户名/密码输入框样式 */
.field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #353a44;
  background: #14161a;
  color: #e8e8e8;
  font-size: 16px;
}

/* 输入框聚焦时高亮边框颜色 */
.field input:focus {
  outline: none;
  border-color: #5a8dee;
}

/* 登录页的主操作按钮（“登录”按钮），撑满一整行 */
.btn-primary {
  width: 100%;
  padding: 11px;
  background: #5a8dee;
  color: #fff;
  margin-top: 4px;
}

/* 登录按钮悬浮态：颜色加深一点 */
.btn-primary:hover {
  background: #4a7adf;
}

/* 登录失败时显示的错误提示文字 */
.error-msg {
  color: #f06262;
  font-size: 13px;
  margin-top: 12px;
  text-align: center;
  min-height: 18px;
}

/* =========================================================
   登录页结束 (login.html)
   ========================================================= */


/* =========================================================
   视频列表页开始 (index.html)
   ========================================================= */

/* 顶部导航栏里的“幽灵按钮”（浅色描边、无填充背景），例如“加入聊天”“退出登录”按钮；
   仅 index.html 使用 —— chat.html/player.html 的返回链接用的是下面的 .back-link */
.btn-ghost {
  background: transparent;
  border: 1px solid #353a44;
  color: #c8c8c8;
  padding: 6px 14px;
  border-radius: 8px;
}

/* 幽灵按钮悬浮态 */
.btn-ghost:hover {
  border-color: #5a8dee;
  color: #fff;
}

/* “加入聊天”实际上是个 <a> 标签而不是 <button>，这里补上链接元素需要的样式（去下划线、内容垂直居中） */
a.btn-ghost {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* ---- 大厅在线状态横幅（视频列表页顶部，用来提示“对方正在看什么/是否在线”） ---- */

/* 在线状态横幅外层容器：控制最大宽度和左右留白，和下面的视频网格对齐 */
#presenceBanner {
  max-width: 1200px;
  margin: 16px auto 0;
  padding: 0 24px;
}

/* 在线状态卡片本体 */
.presence-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #1f2229;
  border: 1px solid #2c3038;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  flex-wrap: wrap;
}

/* 在线状态卡片左侧的小圆点指示灯 */
.presence-card .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

/* 三种状态对应的指示灯颜色：在线 / 空闲（浏览列表）/ 离线 */
.dot.online { background: #4caf6e; }
.dot.idle { background: #d8a93a; }
.dot.offline { background: #5a5d65; }

/* 在线状态卡片右侧的“加入TA观看/加入聊天”按钮 */
.presence-card .join-btn {
  background: #5a8dee;
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
}

/* 响应式：窄屏下在线状态横幅的左右留白收窄，字体/内边距也相应缩小 */
@media (max-width: 860px) {
  #presenceBanner {
    padding: 0 14px;
  }

  .presence-card {
    font-size: 12px;
    padding: 10px 12px;
  }
}

/* ---- 视频列表（含文件夹）---- */

/* 视频/文件夹卡片的网格布局容器：自动按最小宽度换行排列 */
.video-grid {
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 单个视频/文件夹卡片：悬浮时高亮边框，提示可点击 */
.video-card {
  background: #1f2229;
  border: 1px solid #2c3038;
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.video-card:hover {
  border-color: #5a8dee;
}

/* 视频卡片的缩略图容器（未加载出真实缩略图前，先显示占位背景色） */
.video-card .thumb {
  position: relative;
  height: 124px;
  border-radius: 8px;
  background: #14161a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #4a4d55;
  margin-bottom: 10px;
  overflow: hidden;
}

/* 真实缩略图 <img>：默认透明，加载成功后再淡入显示 */
.video-card .thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0; /* 默认隐藏，加载成功后才显示，避免破图标先闪一下 */
}

/* 缩略图加载完成后的状态：让上面的 .thumb-img 显示出来 */
.video-card .thumb.thumb-loaded .thumb-img {
  opacity: 1;
}

/* 默认的 ▶ 占位图标（缩略图还没加载出来时显示，加载成功后会被盖住） */
.video-card .thumb-fallback {
  position: relative;
  z-index: 1;
}

/* 缩略图加载成功后，占位图标就不需要了，隐藏掉 */
.video-card .thumb.thumb-loaded .thumb-fallback {
  display: none;
}

/* 缩略图加载失败（没装 ffmpeg / 生成失败）：彻底隐藏图片层，只留占位图标 */
.video-card .thumb.thumb-fallback-active .thumb-img {
  display: none;
}

/* 缩略图加载成功后，叠加一个半透明播放按钮，提示这是可点击播放的视频 */
.video-card .thumb-play-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.85);
  font-size: 22px;
}

/* 只有缩略图加载成功时才显示这个播放按钮叠层 */
.video-card .thumb.thumb-loaded .thumb-play-overlay {
  display: flex;
}

/* 视频/文件夹的名称文字 */
.video-card .name {
  font-size: 14px;
  word-break: break-all;
  margin-bottom: 4px;
}

/* 视频卡片的次要信息文字（比如文件大小/时长等元信息） */
.video-card .meta {
  font-size: 12px;
  color: #8a8d95;
}

/* 当前目录下没有视频/文件夹时的空状态提示 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #8a8d95;
}

/* 响应式：窄屏下视频网格改为更小的卡片、更紧凑的间距 */
@media (max-width: 860px) {
  .video-grid {
    padding: 14px;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .video-card {
    padding: 10px;
  }

  .video-card .thumb {
    height: 80px;
    font-size: 22px;
  }

  .video-card .name {
    font-size: 13px;
  }
}

/* 更窄的屏幕（常见手机竖屏）进一步压缩视频网格间距 */
@media (max-width: 420px) {
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }
}

/* ---- 面包屑导航（文件夹浏览时显示当前路径）---- */

/* 面包屑容器：和视频网格保持一致的最大宽度/左右留白 */
.breadcrumb {
  max-width: 1200px;
  margin: 14px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
  color: #9a9da5;
  min-height: 28px;
}

/* 面包屑里可点击跳转的路径按钮（根目录/中间层级文件夹） */
.crumb-btn {
  background: transparent;
  border: none;
  color: #5a8dee;
  font-size: 15px;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
}

.crumb-btn:hover {
  background: #262932;
  color: #fff;
}

/* 面包屑路径之间的分隔符（›） */
.crumb-sep {
  color: #4a4d55;
  padding: 0 2px;
  user-select: none;
}

/* 面包屑里当前所在的目录名（不可点击，仅展示） */
.crumb-current {
  color: #e8e8e8;
  font-weight: 500;
  padding: 2px 4px;
}

/* 响应式：窄屏下面包屑左右留白收窄、字号缩小 */
@media (max-width: 860px) {
  .breadcrumb {
    padding: 0 14px;
    margin-top: 10px;
    font-size: 12px;
  }
  .crumb-btn {
    font-size: 12px;
  }
}

/* ---- 文件夹卡片（和视频卡片共用 .video-card 布局，这里只覆盖差异部分）---- */

/* 文件夹卡片用虚线边框，和视频卡片的实线边框区分开 */
.folder-card {
  border-style: dashed;
}

/* 文件夹卡片悬浮态用橙色，和视频卡片的蓝色悬浮态区分开 */
.folder-card:hover {
  border-color: #e8a63a;
}

/* 文件夹卡片的缩略图区域：没有真实图片，纯色背景 */
.folder-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1c22;
}

/* 文件夹图标（📁）*/
.folder-icon {
  font-size: 40px;
  line-height: 1;
}

/* ---- 图片库 ----
   当前浏览的目录（根目录或任意子目录）下如果有图片文件，就在视频/文件夹网格下方、
   "相关附件"上方显示这个栏目，首页缩略图最多展示 8 张；没有的话 #gallery 带 [hidden]
   属性，整块不占用任何空间。点击任意一张缩略图打开下面的 lightbox 后，左右/上下键
   翻页翻的是"这个目录下的全部图片"，不受首页只展示 8 张的限制（后端接口本身不做
   数量截断，全量列表交给前端，只是首页展示时前端自己只取前 8 个渲染缩略图）。 */

.gallery[hidden] {
  display: none;
}

/* 栏目标题（"🖼️ 图片库"）：对齐方式和下面复用的 .video-grid 保持一致
   （同样 1200px 居中 + 24px 左右留白），下边距留得比较小，
   是因为 .video-grid 自己还有 24px 的顶部内边距，两者加起来间距刚好，不用重复留白 */
.gallery-title {
  max-width: 1200px;
  margin: 0 auto 4px;
  padding: 0 24px;
  font-size: 15px;
  color: #5a8dee;
  cursor: pointer;
}

.gallery-title:hover {
  color: #fff;
}

/* 图片库缩略图：图片本身就是"内容"，不像视频缩略图需要异步生成，
   不需要 .thumb-img 那套淡入/失败兜底逻辑，直接铺满 .thumb 容器显示即可 */
.gallery-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- 相关附件 ----
   当前浏览的目录（根目录或任意子目录）下如果有 docx/doc/xlsx/xls/pptx/ppt/pdf/md/txt
   或 zip/7z/rar 等压缩包，就在视频/文件夹网格下方显示这个栏目；没有的话 #attachments
   带 [hidden] 属性，整块不占用任何空间，页面布局和原来完全一样。 */

/* 附件栏目外层容器：卡片样式，和上面 .presence-card / .video-grid 保持同一套视觉语言 */
.attachments {
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 0 24px;
}

/* [hidden] 时彻底不占位（保险起见显式声明，避免被别的规则意外覆盖 display） */
.attachments[hidden] {
  display: none;
}

/* 栏目标题（"🔔 相关附件"）：颜色和面包屑里的"🏠 根目录"保持一致（同用 #5a8dee 这个蓝色强调色） */
.attachments-title {
  font-size: 15px;
  color: #5a8dee;
  margin-bottom: 20px;
  cursor: pointer;
}

.attachments-title:hover {
  color: #fff;
}

/* 附件列表容器：卡片背景，内部每一行之间用分隔线隔开 */
.attachments-list {
  background: #1f2229;
  border: 1px solid #2c3038;
  border-radius: 10px;
  overflow: hidden;
}

/* 单条附件：图标 + 文件名/大小 + 右侧下载链接，一行一个文件 */
.attachment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #2c3038;
}

/* 最后一行不需要底部分隔线 */
.attachment-item:last-child {
  border-bottom: none;
}

/* 文件类型图标（SVG，按扩展名区分颜色，见 index.js 里的 FILE_ICON_MAP） */
.attachment-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* 文件名 + 大小的纵向排列容器，撑满图标和下载链接之间的剩余空间 */
.attachment-info {
  flex: 1;
  min-width: 0;
}

/* 文件名：过长时省略号截断 */
.attachment-name {
  font-size: 14px;
  color: #e8e8e8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 文件大小：弱化颜色，作为次要信息 */
.attachment-size {
  font-size: 12px;
  color: #6a6d75;
  margin-top: 2px;
}

/* 下载链接：红色文字，和应用里其它强调色（错误提示/未读徽标）保持同一色系 */
.attachment-download {
  flex-shrink: 0;
  color: #e2554a;
  font-size: 13px;
  text-decoration: none;
  padding: 4px 8px;
}

.attachment-download:hover {
  text-decoration: underline;
}

/* "阅读"按钮：只有 Markdown 文件才会出现，放在下载前面。用中性蓝色和"下载"的强调红区分开，
   暗示这是一个更轻量、不产生下载动作的操作。 */
.attachment-read {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #7a9dcc;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
}

.attachment-read:hover {
  text-decoration: underline;
}

/* 响应式：窄屏下附件栏目左右留白收窄，行内边距也相应缩小 */
@media (max-width: 860px) {
  .attachments {
    padding: 0 14px;
  }

  .attachment-item {
    padding: 10px 12px;
    gap: 10px;
  }

  .attachment-name {
    font-size: 13px;
  }
}

/* =========================================================
   视频列表页结束 (index.html)
   ========================================================= */


/* =========================================================
   聊天公共组件开始
   说明：这一段是 chat.html（独立聊天室整页）和 player.html
   （播放页右侧/下方内嵌的聊天面板）两个页面共用的聊天内容样式——
   消息气泡、Markdown 渲染、表情面板、输入区等都是两边共用同一套 DOM
   结构和类名（由 chat.js / player.js / markdown.js 共同生成)。
   player.html 特有的外层容器（可拖拽宽度、可折叠收起等）见后面的
   “播放页”小节。
   ========================================================= */

/* 独立聊天页（chat.html）整体容器：限制最大宽度，让聊天区域居中，不像播放页那样占满全屏 */
.chat-standalone {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 57px);
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  background: #1a1c22;
}

/* 独立聊天页消息区可以更宽，气泡最多占 85%（player.html 播放页聊天面板更窄，气泡占比在下面单独定义） */
.chat-standalone .msg .bubble {
  max-width: 85%;
}

/* 响应式：窄屏下独立聊天页占满全宽 */
@media (max-width: 860px) {
  .chat-standalone { max-width: 100%; }
  .msg .bubble, .msg.self .bubble { max-width: 88%; }
}

/* “返回”链接：chat.html 顶部“← 返回视频库”、player.html 顶部“← 返回视频列表”共用 */
.back-link {
  font-size: 13px;
  color: #9a9da5;
  text-decoration: none;
}

.back-link:hover {
  color: #5a8dee;
}

/* 聊天消息列表容器：纵向排列、可滚动 */
.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;  
  align-items: stretch;
}

/* 响应式：窄屏下消息列表内边距/间距收紧 */
@media (max-width: 860px) {
  .chat-messages {
    padding: 12px 14px;
    gap: 16px;
  }
  .msg .bubble {
    max-width: 88%;
  }
}

/* ---- 聊天消息气泡（iMessage 风格） ---- */

/* 单条消息的外层容器：默认按“对方消息”靠左对齐排列 */
.msg {
  font-size: 14px;
  line-height: 1.7;
  display: flex;           /* ← 让 .msg 成为 flex 列容器 */
  flex-direction: column;
  align-items: flex-start; /* 对方消息：内容靠左 */
  width: 100%;             /* ← 撑满宽度，flex-end 才有位置可"推" */
  box-sizing: border-box;
}

/* 自己发的消息：整体靠右对齐 */
.msg.self {
  align-items: flex-end;   /* 自己的消息：内容靠右 */
}

/* 自己消息内的子元素（头像行、气泡）都跟着靠右 */
.msg.self > * {
  margin-left: auto;
}

/* 消息发送者的用户名文字 */
.msg .who {
  font-size: 12px;
  color: #7a9dcc;
  margin-bottom: 0;
  letter-spacing: 0.2px;
}

/* 系统消息（比如“XX 加入了聊天”）的样式：灰色斜体，弱化视觉权重 */
.msg.system {
  color: #7a7d85;
  font-style: italic;
  font-size: 12px;
}

/* 消息气泡本体：对方消息默认深灰底色，左上角直角（像聊天软件里的“尖角”朝向发送者一侧） */
.msg .bubble {
  display: inline-block;
  background: #262932;
  padding: 9px 14px;               
  border-radius: 4px 16px 16px 16px; 
  max-width: 90%;                  
  word-break: break-word;
}

/* 自己发的消息气泡：蓝色底色，右上角直角 */
.msg.self .bubble {
  background: #3a5da0;
  border-radius: 16px 4px 16px 16px; 
}

/* 气泡内联行代码（单个反引号包裹的代码）样式 */
.msg .bubble code {
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 12px;
}

/* 气泡内的超链接颜色 */
.msg .bubble a {
  color: #9ec1ff;
  text-decoration: underline;
}

/* 气泡内的删除线文字（~~text~~）透明度降低，表示“已划掉” */
.msg .bubble del {
  opacity: 0.7;
}

/* 纯图片消息的气泡：去掉背景色和内边距，让图片本身撑满 */
.msg .bubble.image-bubble {
  padding: 4px;
  background: transparent;
}

/* 用户上传发送的图片（区别于下面 Markdown 语法插入的行内图片）。
   之前限制在 220px 显得偏小，调大到 320px；气泡本身还有 max-width: 90% 兜底，
   在 player.html 播放页较窄的聊天面板里图片依然会被气泡宽度进一步限制住，不会撑破布局。 */
.msg .bubble img.chat-image {
  display: block;
  max-width: 320px;
  max-height: 320px;
  border-radius: 8px;
  cursor: pointer;
  object-fit: cover;
}

/* 语音消息气泡：原生 <audio controls> 播放条 + 一个小的时长文字提示，
   背景/内边距和图片气泡一样去掉，让播放条本身撑起视觉重量。 */
.msg .bubble.voice-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: transparent;
}

.msg .bubble .chat-voice {
  height: 32px;
  max-width: 240px;
}

.msg .bubble .voice-duration {
  font-size: 12px;
  color: #9a9da5;
  flex-shrink: 0;
}

/* ---- Markdown 扩展语法样式（聊天气泡内，由 markdown.js 生成对应的 class） ---- */

/* 标题：聊天气泡空间有限，明显缩小常规网页标题的视觉权重，只用字号/粗细区分层级 */
.msg .bubble .md-heading {
  margin: 4px 0;
  line-height: 1.3;
  font-weight: 700;
}
.msg .bubble h1.md-heading { font-size: 17px; }
.msg .bubble h2.md-heading { font-size: 16px; }
.msg .bubble h3.md-heading,
.msg .bubble h4.md-heading,
.msg .bubble h5.md-heading,
.msg .bubble h6.md-heading { font-size: 14px; }

/* 引用块（> 开头的文字） */
.msg .bubble .md-quote {
  margin: 4px 0;
  padding: 2px 10px;
  border-left: 3px solid #5a8dee;
  color: #c2c5cc;
  opacity: 0.9;
}

/* 有序/无序列表 */
.msg .bubble .md-list {
  margin: 4px 0;
  padding-left: 20px;
}
.msg .bubble .md-list li {
  margin: 2px 0;
}

/* 任务列表：去掉默认圆点，让 checkbox 顶替到原来圆点的位置 */
.msg .bubble li.md-task {
  list-style: none;
  margin-left: -20px;
}
.msg .bubble li.md-task input[type='checkbox'] {
  margin-right: 4px;
  vertical-align: middle;
  accent-color: #5a8dee;
}

/* 分隔线（---） */
.msg .bubble .md-hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 8px 0;
}

/* 表格：聊天气泡很窄，允许横向滚动，避免把整个布局撑开 */
.msg .bubble .md-table-wrap {
  margin: 4px 0;
  max-width: 100%;
  overflow-x: auto;
}
.msg .bubble .md-table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 100%;
}
.msg .bubble .md-table th,
.msg .bubble .md-table td {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap;
}
.msg .bubble .md-table th {
  background: rgba(255, 255, 255, 0.08);
  font-weight: 600;
}

/* 折叠面板 <details>/<summary> */
.msg .bubble details {
  margin: 4px 0;
}
.msg .bubble summary {
  cursor: pointer;
  color: #9ec1ff;
  font-weight: 500;
}
.msg .bubble details[open] summary {
  margin-bottom: 4px;
}

/* Markdown 图片语法 ![alt](url) 插入的行内图片，和上传图片的 .chat-image 区分开（这个允许内嵌在文字中间）。
   尺寸上限和 .chat-image 保持一致，一起调大到 320px。 */
.msg .bubble img.md-image {
  display: block;
  max-width: 320px;
  max-height: 320px;
  border-radius: 8px;
  margin: 4px 0;
  object-fit: contain;
}

/* 段落（连续文本行之间用空行分隔时，每段独立一个 <p>） */
.msg .bubble p.md-p {
  margin: 4px 0;
}
.msg .bubble p.md-p:first-child {
  margin-top: 0;
}
.msg .bubble p.md-p:last-child {
  margin-bottom: 0;
}

/* 代码块（```lang ... ```）：外层 wrap 负责间距和"复制"按钮的定位参照，
   pre 本身不再自带 margin（避免和 wrap 的 margin 叠加成两倍空隙）。 */
.msg .bubble .md-code-block-wrap {
  position: relative;
  margin: 6px 0;
}
.msg .bubble pre.md-code-block {
  margin: 0;
  padding: 10px 12px;
  background: #14161a;
  border: 1px solid #2c3038;
  border-radius: 8px;
  overflow-x: auto;
  max-width: 100%;
}
.msg .bubble pre.md-code-block code {
  background: none;
  padding: 0;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  color: #d8dae0;
}

/* 代码块右上角的"复制"按钮：默认低调（半透明底），hover/复制成功时给出明确反馈 */
.md-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #c7cad1;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.4;
}
.md-copy-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.md-copy-btn.copied {
  background: rgba(90, 200, 130, 0.22);
  border-color: rgba(90, 200, 130, 0.5);
  color: #8be0a8;
}

/* 数学公式：行内用淡紫色底色和代码区分开；块级单独一个框 */
.msg .bubble code.math-inline {
  background: rgba(151, 117, 250, 0.18);
  color: #c9b8ff;
  font-family: "Cambria Math", "STIX Two Math", serif;
  font-style: italic;
}
.msg .bubble pre.math-block {
  margin: 6px 0;
  padding: 10px 12px;
  background: rgba(151, 117, 250, 0.1);
  border: 1px solid rgba(151, 117, 250, 0.35);
  border-radius: 8px;
  overflow-x: auto;
  max-width: 100%;
  text-align: center;
}
.msg .bubble pre.math-block code {
  background: none;
  padding: 0;
  font-family: "Cambria Math", "STIX Two Math", serif;
  font-style: italic;
  font-size: 13px;
  color: #c9b8ff;
}

/* 多级嵌套列表：子级列表整体缩进，和外层视觉上区分开 */
.msg .bubble .md-list .md-list {
  margin: 2px 0 2px 4px;
}

/* 多级嵌套引用：每多一层左边框颜色变浅一点，便于区分层级 */
.msg .bubble .md-quote .md-quote {
  margin: 2px 0;
  border-left-color: #3d6bc4;
  opacity: 0.95;
}
.msg .bubble .md-quote .md-quote .md-quote {
  border-left-color: #2f548f;
}

/* ---- 历史消息分隔线（用于区分“之前的聊天记录”和“新收到的消息”）---- */
.history-divider {
  text-align: center;
  font-size: 11px;
  color: #5a5d65;
  padding: 4px 0 8px;
  position: relative;
}
.history-divider::before,
.history-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  height: 1px;
  background: #2c3038;
}
.history-divider::before { left: 0; }
.history-divider::after  { right: 0; }

/* ---- 聊天头像 ---- */

/* 头像+用户名这一行的容器 */
.msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;               /* 头像和名字之间 */
  margin-bottom: 6px;     /* 名字行和气泡之间 */
}
/* 自己的消息：头像行也跟着整体靠右（头像在名字右边） */
.msg.self .msg-meta {
  flex-direction: row-reverse;
}
/* 用户头像图片（来自 config/users.json 里配置的 avatar 路径） */
.avatar {
  width: 34px;            /* 稍微大一点 */
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #2c3038;
  border: 1px solid #3a3d45;  /* 细描边，和背景分离 */
}
/* 没有头像图片时的兜底样式：用用户名首字母 + 渐变底色代替 */
.avatar-initial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a5da0, #2a4080); /* 渐变更好看 */
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #4a6db0;
  user-select: none;
}

/* ---- 聊天输入区（表情/图片工具栏 + 文本框 + 发送按钮）---- */

/* 输入区整体容器 */
.chat-input-area {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-top: 1px solid #2c3038;
  gap: 8px;
  flex-shrink: 0;
}

/* 第一行：表情、图片等工具按钮 */
.chat-toolbar-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 第二行：输入框 + 发送按钮 */
.chat-send-row {
  display: flex;
  align-items: flex-end; /* textarea 变高时，发送按钮始终贴底，不会跟着拉伸变形 */
  gap: 8px;
}

/* 聊天文本输入框，支持随内容自动增高（由 JS 控制） */
.chat-send-row textarea#chatInput {
  flex: 1;
  min-width: 0;
  min-height: 56px; /* 加高：单行文字也有充足的呼吸空间，不再显得局促 */
  max-height: 160px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #353a44;
  background: #14161a;
  color: #e8e8e8;
  font-size: 16px; /* >=16px 避免 iOS Safari 聚焦输入框时自动放大页面 */
  font-family: inherit;
  line-height: 1.4;
  resize: none; /* 由 JS 自动撑高，不需要用户手动拖拽 */
  overflow-y: auto;
}

/* 输入框聚焦态边框高亮 */
.chat-send-row textarea#chatInput:focus {
  outline: none;
  border-color: #5a8dee;
}

/* 发送按钮 */
.chat-send-row button#sendBtn {
  padding: 0 18px;
  height: 56px; /* 与输入框默认高度对齐，视觉上不会显得发送按钮"矮一截" */
  background: #5a8dee;
  color: #fff;
  flex-shrink: 0;
}

/* 常驻的格式提示文字（提示支持 Markdown 语法等）：不依赖 placeholder（会在输入文字后消失），始终可见 */
.chat-input-hint {
  font-size: 11px;
  color: #6a6d75;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 响应式：窄屏下格式提示文字隐藏，节省空间 */
@media (max-width: 860px) {
  .chat-input-hint {
    display: none;
  }
}

/* 工具栏里的图标按钮（表情 😀 / 图片 🖼 按钮）通用样式 */
.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  font-size: 18px;
  padding: 6px 8px;
  border-radius: 8px;
  line-height: 1;
  flex-shrink: 0;
}

.icon-btn:hover {
  background: #262932;
}

/* 麦克风按钮录音中的状态：红色底色 + 轻微脉冲动画，明确提示"正在录音、再点一下发送" */
.icon-btn#voiceBtn.recording {
  background: #e2554a;
  color: #fff;
  animation: voice-btn-pulse 1.4s ease-in-out infinite;
}

@keyframes voice-btn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* 录音中的小状态条：红点 + 计时 + 取消按钮，紧跟在麦克风按钮后面 */
.voice-recording-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #e2554a;
  padding: 4px 8px;
}

.voice-recording-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e2554a;
  animation: voice-btn-pulse 1.4s ease-in-out infinite;
}

.voice-cancel-btn {
  background: transparent;
  border: none;
  color: #9a9da5;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

.voice-cancel-btn:hover {
  color: #e8e8e8;
}

/* ---- 表情选择面板 ---- */

/* 表情面板：网格排列所有表情 */
.emoji-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 10px;
  border-top: 1px solid #2c3038;
  max-height: 160px;
  overflow-y: auto;
  flex-shrink: 0;
}

/* 在它正后面追加，强制覆盖 display:grid：面板被 [hidden] 隐藏时彻底不显示 */
.emoji-picker[hidden] {
  display: none !important;
}

/* 单个表情按钮 */
.emoji-picker button {
  background: transparent;
  font-size: 20px;
  padding: 4px;
  border-radius: 6px;
  line-height: 1.4;
}

.emoji-picker button:hover {
  background: #262932;
}

/* 响应式：窄屏下表情面板列数减少，避免每个表情格子太挤 */
@media (max-width: 420px) {
  .chat-input-area {
    padding: 8px;
  }

  .emoji-picker {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* =========================================================
   聊天公共组件结束
   ========================================================= */


/* =========================================================
   播放页开始 (player.html)
   说明：这里是播放页专属的样式——视频播放区、弹幕、以及
   “可拖拽宽度 / 可折叠收起”的侧边聊天面板外壳。
   面板内部的消息气泡/输入区等内容样式请看上面的“聊天公共组件”。
   ========================================================= */

/* 播放页整体布局：左边视频，右边聊天面板，水平排列 */
.player-layout {
  display: flex;
  height: calc(100vh - 57px);
}

/* 视频区域主容器：占据剩余空间，纵向排列（视频 + 底部工具栏） */
.player-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #000;
  min-width: 0;
}

/* 视频播放器外层包裹容器，用来定位弹幕层 */
.video-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #000;
  overflow: hidden;
}

/* 原生 <video> 标签本体：等比例撑满容器 */
.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* 弹幕层：盖在视频上方，不能挡住底部播放控件的点击 */
.danmaku-overlay {
  position: absolute;
  inset: 0;
  bottom: 48px; /* 留出原生播放控件的高度，避免遮挡点击 */
  pointer-events: none;
  overflow: hidden;
}

/* 单条弹幕文字：从右向左飞过屏幕 */
.danmaku-item {
  position: absolute;
  white-space: nowrap;
  font-size: 20px; /* 从 16px 调大 */
  font-weight: 600;
  color: #fff; /* 兜底色，实际显示颜色由 JS 按条随机指定 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
  will-change: transform;
  animation-name: danmaku-fly;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* 弹幕里出现行内代码时的样式 */
.danmaku-item code {
  background: rgba(255, 255, 255, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
}

/* 弹幕飞行动画：从屏幕右侧飞到左侧屏幕外 */
@keyframes danmaku-fly {
  from { transform: translateX(100vw); }
  to { transform: translateX(-110%); }
}

/* 视频下方的工具栏（目前放弹幕开关） */
.video-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 14px;
  background: #14161a;
  border-top: 1px solid #2c3038;
  flex-shrink: 0;
}

/* 弹幕开关（复选框 + 文字）容器 */
.danmaku-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #b0b3ba;
  cursor: pointer;
  user-select: none;
}

.danmaku-toggle input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ---- 聊天面板拖拽手柄（桌面端调整宽度用） ---- */
.chat-resizer {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;
  background: #2c3038; /* 默认就是一条分隔线，承担原来 chat-panel 的 border-left 视觉效果 */
  position: relative;
  z-index: 5;
  touch-action: none; /* 防止触屏拖动时页面跟着滚动/缩放 */
}

/* 拖拽手柄悬浮态 / 正在拖拽时高亮成蓝色 */
.chat-resizer:hover,
.chat-resizer.is-dragging {
  background: #5a8dee;
}

/* 拖拽中：给整个页面禁用文本选中和设置统一光标，体验更顺滑，
   不会出现"拖一拖突然选中了页面文字"的情况 */
body.is-resizing-chat {
  cursor: col-resize;
  user-select: none;
}

/* 播放页右侧聊天面板外壳（宽度固定，可被拖拽手柄调整）；
   注意这和 chat.html 的整页容器 .chat-standalone 是两回事——
   面板内部复用的是上面“聊天公共组件”里的 .chat-messages/.msg 等样式 */
.chat-panel {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #1a1c22;
  min-height: 0;
}

/* 移动端的"聊天折叠条"：桌面端默认隐藏，只在下面窄屏媒体查询里显示 */
.chat-toggle-bar {
  display: none;
}

/* 播放页聊天面板顶部的小标题栏（chat.html 独立聊天页没有这个，直接用顶部导航栏代替） */
.chat-header {
  padding: 14px 16px;
  border-bottom: 1px solid #2c3038;
  font-size: 13px;
  color: #9a9da5;
  flex-shrink: 0;
}

/* ---- 未读消息徽标（移动端聊天折叠条上使用）---- */
.unread-badge {
  background: #e2554a;
  color: #fff;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* 响应式：窄屏下播放页改为“视频在上、聊天在下”的堆叠布局，聊天面板变成可收起的抽屉 */
@media (max-width: 860px) {
  .player-layout {
    flex-direction: column;
    height: calc(100vh - 49px);
  }

  .player-main {
    flex: 1;
    min-height: 0;
  }

  .video-wrap {
    flex: 1;
    min-height: 0;
  }

  /* 移动端不支持横向拖拽调整宽度，隐藏拖拽手柄 */
  .chat-resizer {
    display: none;
  }

  /* 聊天面板变为全宽的底部抽屉，可以展开/收起 */
  .chat-panel {
    width: 100%;
    flex-shrink: 0;
    border-top: 1px solid #2c3038;
    max-height: 46vh;
    transition: max-height 0.25s ease;
  }

  /* 折叠状态：只露出顶部的折叠条 */
  .chat-panel.collapsed {
    max-height: 46px;
    overflow: hidden;
  }

  /* 移动端专用的折叠条：点击可展开/收起聊天面板 */
  .chat-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: #1a1c22;
    border: none;
    border-bottom: 1px solid #2c3038;
    color: #e8e8e8;
    font-size: 14px;
    flex-shrink: 0;
  }

  /* 折叠条右侧的箭头图标 */
  .chat-toggle-bar .chevron {
    color: #8a8d95;
    transition: transform 0.2s ease;
  }

  /* 折叠状态下箭头旋转，指示“点击可展开” */
  .chat-panel.collapsed .chevron {
    transform: rotate(-90deg);
  }

  /* 移动端聊天面板标题栏内边距收紧 */
  .chat-header {
    padding: 10px 16px;
  }

  /* 移动端弹幕字号从 14px 调大到 16px，屏幕小但弹幕仍要清晰可读 */
  .danmaku-item {
    font-size: 16px;
  }
}

/* =========================================================
   播放页结束 (player.html)
   ========================================================= */