#banner {
  --banner_background_color: var(--text_color_primary);
  --banner_avatar_background_color: var(--background_color_container);
  --banner_online_background_color: var(--special_color_green);
  --banner_info_name_color: #fff;
  --banner_subinfo_color: var(--text_color_secondary);
  --banner_font_size_primary: var(--font_size_grande);
  --banner_font_size_secondary: var(--font_size_short);
  --banner_line_height_primary: var(--line_height_grande);
  --banner_line_height_secondary: var(--line_height_short);
}

#banner {
  --banner_post_avatar_offset: 50px;
  --banner_post_lr_offset: 25px;
  --banner_info_bottom: -12px;
  --banner_info_avatar_size: 60px;
  --banner_info_name_offset: 15px;
  --banner_subinfo_bottom_offset: 10px;
  position: relative;
  height: 325px;
}
:root.mobile #banner {
  height: 300px;
}

#banner-background {
  width: 100%;
  height: 100%;
  background-color: var(--banner_background_color);
  background-position-x: 0;
  background-repeat: no-repeat;
  background-size: cover;
}

#banner-background.nobg {
  background-image: url(../img/banner.nobg.svg);
  background-position: 50% 50%;
}

#banner-background.existbg {
  background-image: var(--banner_background_image);
  background-position-y: var(--banner_background_image_position);
}
:root.darkmode #banner-background.existbg {
  background-image: var(--banner_background_image_dark, var(--banner_background_image));
  background-position-y: var(--banner_background_image_position_dark, var(--banner_background_image_position));
}

#banner-info {
  position: absolute;
  z-index: 1;
  left: var(--banner_post_lr_offset);
  right: var(--banner_post_lr_offset);
  bottom: var(--banner_info_bottom);
  width: calc(100% - (var(--banner_post_lr_offset) * 2));
}

#banner-info > div.name {
  position: relative;
  width: calc(100% - var(--banner_info_avatar_size) - var(--banner_info_name_offset));
  height: var(--banner_line_height_primary);
  margin-top: 12px;
  overflow: hidden;
}

#banner-info > div.name > strong.font-options {
  display: inline-block;
  width: fit-content;
  height: var(--banner_line_height_primary);
  color: var(--banner_info_name_color);
  font-size: var(--banner_font_size_primary);
  line-height: var(--banner_line_height_primary);
  text-align: right;
  cursor: pointer;
}

@keyframes banner-name-anim {
  0% {background-position-x: 0;}
  100% {background-position-x: -20px;}
}
#banner-info > div.name > strong.font-options:hover {
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 4"%3E%3Cpath d="M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3" fill="none" stroke="rgba(255, 255, 255, 0.9)" /%3E%3C/svg%3E') 0 100% repeat-x;
  background-size: 20px auto;
  animation: banner-name-anim 1s infinite linear;
}

/* font options for different language */
#banner-info > div.name > strong.font-options.en {
  font-weight: bold;
  font-family: 'Rounded Mplus 1c', sans-serif;
}

#banner-info > div.name > strong.font-options.han {
  font-weight: 500;
  letter-spacing: 1px;
}

#banner-info > div.avatar {
  width: var(--banner_info_avatar_size);
  height: var(--banner_info_avatar_size);
  border-radius: 7px;
  background-color: var(--banner_avatar_background_color);
  overflow: hidden;
}

#banner-info > div.avatar > a.online-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes online-anim {
  0% {opacity: 0.35;}
  100% {opacity: 0.7;}
}
#banner-info > div.avatar > a.online-link::after {
  position: absolute;
  z-index: 1;
  right: 4px;
  top: 4px;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--banner_online_background_color);
  animation: online-anim 2.5s linear infinite alternate;
  content: '';
}

#banner-subinfo {
  position: absolute;
  z-index: 1;
  right: var(--banner_post_lr_offset);
  bottom: calc(var(--banner_info_bottom) - var(--banner_line_height_secondary) - var(--banner_subinfo_bottom_offset));
  width: calc((100% - var(--banner_post_lr_offset) - var(--banner_post_avatar_offset) - var(--banner_post_lr_offset)) * 2 / 3);
  height: var(--banner_line_height_secondary);
  color: var(--banner_subinfo_color);
  font-size: var(--banner_font_size_secondary);
  line-height: var(--banner_line_height_secondary);
  text-align: right;
}

/* 修复 div.name 被溢出隐藏切割的问题 */
#banner-info > div.name {
  overflow: visible !important; /* 允许状态徽章展示 */
}

#banner-info > div.name > strong.font-options {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

/* 纯图标状态徽章 */
.banner-status-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease;
  line-height: 1;
  height: 20px; /* 显式指定合适的高度 */
}

.banner-status-badge:hover {
  transform: scale(1.15);
  background: rgba(255, 255, 255, 0.4);
}

.banner-status-badge .emoji {
  font-size: 13px;
  line-height: 1;
}

/* 查看状态弹窗样式 */
.status-view-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 99999;
  justify-content: center;
  align-items: center;
}

.status-view-card {
  background: #fff;
  width: 85%;
  max-width: 300px;
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.status-view-card .card-emoji { font-size: 32px; display: block; margin-bottom: 8px; }
.status-view-card .card-text { font-size: 14px; color: #333; line-height: 1.5; margin-bottom: 12px; word-break: break-all; }
.status-view-card .card-time { font-size: 12px; color: #999; margin-bottom: 16px; }
.status-view-card .card-btn {
  padding: 6px 18px; background: #f0f0f0; border: none; border-radius: 20px; font-size: 12px; color: #666; cursor: pointer;
}

.status-view-card .card-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.status-view-card .card-btn-danger {
  background: #ff4d4f !important;
  color: #fff !important;
}

.status-view-card .card-btn-danger:hover {
  background: #ff7875 !important;
}

/* ==========================================
   24h状态 - 纯净静态 Tooltip 提示框样式
   ========================================== */

/* 1. 定位容器 */
.status-tooltip-container {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  cursor: pointer;
}

/* 2. 自定义 Tooltip 气泡 (平滑淡入，位置完全静止) */
.status-tooltip-container::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  -webkit-transform: translate3d(-50%, 0, 0);
  white-space: nowrap;
  padding: 11px 11px;
  font-size: 9px;
  font-weight: 500;
  line-height: 0;
  color: #ffffff;
  /* 字体渲染平滑优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  
  /* 暗色半透明毛玻璃背景 */
  background: rgba(25, 25, 25, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  
  /* 默认隐藏，鼠标悬浮时 0.2 秒平滑淡入 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 999;
}

/* 3. 气泡下方的小三角 */
.status-tooltip-container::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  -webkit-transform: translate3d(-50%, 0, 0);
  
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: rgba(25, 25, 25, 0.85) transparent transparent transparent;
  
  /* 默认隐藏 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

/* 4. 鼠标悬浮时触发淡入显示 */
.status-tooltip-container:hover::after,
.status-tooltip-container:hover::before {
  opacity: 1;
  visibility: visible;
}