/**
 * 弹幕历史统一样式（主站 + 桌台共用）
 * 依赖 DOM 结构：js/danmu-history-common.js 生成
 *   <div class="history-item">
 *     <span class="history-time">...</span>
 *     <span class="history-sender online/offline">...</span>
 *     <span class="history-content">...</span>
 *   </div>
 */

:root {
  --dh-bg: rgba(255, 255, 255, 0.06);
  --dh-border: rgba(255, 255, 255, 0.12);
  --dh-time: rgba(255, 255, 255, 0.55);
  --dh-text: var(--theme-text, #e0e0e0);
  --dh-online: #00cc00;
  --dh-offline: rgba(255, 255, 255, 0.55);
  --dh-radius: 12px;
  /* 字号：按需求固定
   * - 日期/时间/用户名：8px
   * - 弹幕内容：10px
   */
  --dh-fs: 10px;
  --dh-fs-small: 8px;
}

#danmu-history {
  /* 两端统一：容器左右留白 + 字号基准（避免被旧模板 #danmu-history div 覆盖） */
  padding-left: 12px;
  padding-right: 12px;
  font-size: var(--dh-fs);
  color: var(--dh-text);
}

#danmu-history .history-item {
  /* 单列：时间显示在“标签后面”（同一行），不再占左侧时间列 */
  display: block;
  margin: 0 0 8px 0;
  padding: 8px 10px;
  border-radius: var(--dh-radius);
  background: var(--dh-bg);
  border: 1px solid var(--dh-border);
  line-height: 1.35;
  word-break: break-word;
  font-size: var(--dh-fs);
}

/* 最新一条：去掉底部 margin，让它能“正好贴紧”输入条 */
#danmu-history .history-item:last-child {
  margin-bottom: 2px !important;
}

#danmu-history .history-time {
  /* 时间：紧跟在标签后显示（同一行，自适应不重叠） */
  font-size: 8px; /* 与标签一致 */
  color: var(--dh-time);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
  font-weight: 400; /* 细一点，不要粗体 */
  opacity: 0.92;
}

#danmu-history .history-sender {
  font-size: var(--dh-fs-small);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-left: 10px;
  /* 重要：角标会超出用户名行高；不能在父容器做 overflow:hidden，否则会把角标截掉 */
  overflow: visible;
  white-space: nowrap;
}

/* AI 用户名不可点击：去掉手型 */
#danmu-history .history-sender.no-pm {
  cursor: default;
}

/* 左上角元信息：标签 + 时间同一行，自动排布避免重叠 */
#danmu-history .history-sender .history-meta {
  position: absolute;
  left: -2px; /* 与状态圆点对齐 */
  top: -6px;  /* 稍微压在圆点上方 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 70vw;
  pointer-events: none;
}

/* 用户名本体：在内部做省略号（不影响右上角角标显示） */
#danmu-history .history-sender .history-sender-name {
  display: inline-block;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
  /* 视觉对齐：让用户名与英文冒号/内容更平行 */
  position: relative;
  top: 5px;
}

/* 用户名彩虹字（静态/动态） */
#danmu-history .history-sender .history-sender-name.rainbow {
  background-image: linear-gradient(
    to right,
    #ff0000, #ff7f00, #ffff00, #00ff80, #00ffff, #0080ff, #8000ff, #ff00ff, #ff0000
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 2px rgba(255,255,255,0.12);
}

#danmu-history .history-sender .history-sender-name.rainbow.rainbow-dynamic {
  animation: rainbow 4s linear infinite;
}

@keyframes rainbow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* 用户角标标签（用户名左上角：压在在线/离线圆点上方） */
#danmu-history .history-sender .user-tag {
  position: static; /* 由 history-meta 控制定位 */
  font-size: 8px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 999px;
  /* 磨砂玻璃（更不透明）：减少透底 */
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.92), rgba(18, 18, 18, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#danmu-history .history-sender .user-tag--registered { color: rgba(120, 200, 255, 0.95); }
#danmu-history .history-sender .user-tag--zhuotai { color: rgba(255, 140, 190, 0.95); }
#danmu-history .history-sender .user-tag--ai { color: rgba(255, 220, 140, 0.95); }

/* 在线/离线颜色 */
#danmu-history .history-sender.online { color: var(--dh-online); }
#danmu-history .history-sender.offline {
  /* 离线用户统一颜色（不受彩虹字/自定义样式影响） */
  color: #9aa0a6;
  opacity: 1;
}

/* 离线时：强制用户名不使用彩虹渐变，统一用离线灰色 */
#danmu-history .history-sender.offline .history-sender-name {
  color: currentColor !important;
}
#danmu-history .history-sender.offline .history-sender-name.rainbow {
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: currentColor !important;
  text-shadow: none !important;
  animation: none !important;
}

/* 状态圆点 */
#danmu-history .history-sender::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* 主体（用户名 + 冒号 + 内容）作为一个 flex item，避免 gap 把内部拆开 */
#danmu-history .history-main {
  min-width: 0;
  color: var(--dh-text);
  overflow-wrap: anywhere;
}

/* 英文冒号：与用户名同字号，视觉更统一 */
#danmu-history .history-colon {
  font-size: var(--dh-fs-small);
  font-weight: 700;
  color: var(--dh-content-color, var(--dh-text));
  text-shadow: var(--dh-content-shadow, none);
  opacity: 0.95;
  margin-left: 2px;
}

#danmu-history .history-content {
  /* 内容字号跟用户名一致 */
  font-size: var(--dh-fs-small);
  color: var(--dh-content-color, var(--dh-text));
  text-shadow: var(--dh-content-shadow, none);
  opacity: 0.98;
}

#danmu-history .no-history {
  padding: 14px 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: none;
}

/* 移动端进一步收紧间距 */
@media (max-width: 480px) {
  #danmu-history {
    padding-left: 10px;
    padding-right: 10px;
  }
  #danmu-history .history-item {
    padding: 8px 9px;
  }
  #danmu-history .history-sender {
    max-width: 50vw;
  }
}