#bar {
  --bar_background_color: rgba(240, 240, 240, 0.99);
  --bar_ico_background_color: rgba(0, 0, 0, 0.05);
  --bar_tip_background_color: var(--special_color_red);
}
:root.darkmode #bar {
  --bar_background_color: rgba(107, 107, 107, 0.99);
  --bar_ico_background_color: rgba(255, 255, 255, 0.035);
}

#bar {
  --bar_item_size: 40px;
  position: fixed;
  z-index: 10;
  top: 0;
  height: calc(var(--bar_item_size) + (6px * 2));
}

#bar.background {
  background-color: var(--bar_background_color);
}

#bar > ul {
  height: var(--bar_item_size);
  padding: 6px 0;
}

#bar > ul > li {
  position: relative;
  display: inline;
  float: left;
  width: 24px;
  height: 24px;
  padding: calc((var(--bar_item_size) - 24px) / 2);
  border-radius: 4px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  cursor: pointer;
}
#bar > ul > li:hover {
  background-color: var(--bar_ico_background_color);
}

#bar > ul.bar-op > li {
  margin-left: 12px;
}

#bar > ul.bar-main > li {
  margin-right: 12px;
}

#bar > ul > li.user {
  background-image: url(../img/bar.user.white.svg);
}
#bar.background > ul > li.user {
  background-image: url(../img/bar.user.light.svg);
}
:root.darkmode #bar.background > ul > li.user {
  background-image: url(../img/bar.user.dark.svg);
}

#bar > ul > li.contacts {
  background-image: url(../img/bar.contacts.white.svg);
}
#bar.background > ul > li.contacts {
  background-image: url(../img/bar.contacts.light.svg);
}
:root.darkmode #bar.background > ul > li.contacts {
  background-image: url(../img/bar.contacts.dark.svg);
}

#bar > ul > li.hub {
  background-image: url(../img/bar.hub.white.svg);
}
#bar.background > ul > li.hub {
  background-image: url(../img/bar.hub.light.svg);
}
:root.darkmode #bar.background > ul > li.hub {
  background-image: url(../img/bar.hub.dark.svg);
}

#bar > ul > li.editor {
  background-image: url(../img/bar.editor.white.svg);
}
#bar.background > ul > li.editor {
  background-image: url(../img/bar.editor.light.svg);
}
:root.darkmode #bar.background > ul > li.editor {
  background-image: url(../img/bar.editor.dark.svg);
}

@keyframes hub-new-anim {
  0%,100% {transform: none;opacity: 0;}
  10% {transform: scale(1);opacity: 0.7;}
  80% {transform: scale(1.65);opacity: 0;}
}
#bar > ul > li.hub:not(.current).new::before {
  position: relative;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background: inherit;
  background-color: transparent;
  animation: hub-new-anim 2s cubic-bezier(0, 0, 0, 1.74) infinite;
  content: '';
}

#bar > ul > li.hub:not(.current).new::after {
  position: absolute;
  z-index: 1;
  right: 8px;
  top: 8px;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--bar_tip_background_color);
  opacity: 0.9;
  content: '';
}

@keyframes editor-pencil-anim {
  0%,100% {transform: none;}
  5% {transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);}
  10% {transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);}
  15% {transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);}
  20% {transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);}
  25%,26% {transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);}
}
#bar > ul > li.editor::before {
  position: absolute;
  right: 9px;
  top: 6px;
  display: block;
  width: 12px;
  height: 12px;
  animation: editor-pencil-anim 4s infinite linear;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  content: '';
}

#bar > ul > li.editor::before {
  background-image: url(../img/bar.editor.pencil.white.svg);
}
#bar.background > ul > li.editor::before {
  background-image: url(../img/bar.editor.pencil.light.svg);
}
:root.darkmode #bar.background > ul > li.editor::before {
  background-image: url(../img/bar.editor.pencil.dark.svg);
}

#bar > ul > li.current::after {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  display: block;
  width: 25%;
  height: 4px;
  border-radius: 2px;
  background-color: var(--bar_tip_background_color);
  opacity: 0.2;
  content: '';
}

#bgm {
  --bgm_background_color: var(--bar_ico_background_color);
  --bgm_progress_height: 2px;
  --bgm_progress_color: #898989;
  --bgm_progress_color_white: #f5f5f5;
  --bgm_progress_background_color: rgba(0, 0, 0, 0.05);
  --bgm_progress_background_color_white: rgba(255, 255, 255, 0.3);
}
:root.darkmode #bgm {
  --bgm_progress_color: #aeaeae;
  --bgm_progress_background_color: rgba(255, 255, 255, 0.15);
}

#bgm {
  height: var(--bar_item_size);
  margin: 6px 0 6px 5px;
  border-radius: 4px;
}
#bgm:hover {
  background-color: var(--bgm_background_color);
}

#bgm > div.button > div.status {
  width: 32px;
  height: var(--bar_item_size);
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#bgm > div.button:not(.canplay) > div.status {
  background-image: url(../img/bgm.prepare.white.svg);
}
#bar.background > #bgm > div.button:not(.canplay) > div.status {
  background-image: url(../img/bgm.prepare.light.svg);
}
:root.darkmode #bar.background > #bgm > div.button:not(.canplay) > div.status {
  background-image: url(../img/bgm.prepare.dark.svg);
}

#bgm > div.button.canplay > div.status {
  cursor: pointer;
}

#bgm > div.button.canplay > div.status {
  background-image: url(../img/bgm.play.white.svg);
}
#bar.background > #bgm > div.button.canplay > div.status {
  background-image: url(../img/bgm.play.light.svg);
}
:root.darkmode #bar.background > #bgm > div.button.canplay > div.status {
  background-image: url(../img/bgm.play.dark.svg);
}

#bgm > div.button.canplay > div.status.play {
  background-image: url(../img/bgm.pause.white.svg);
}
#bar.background > #bgm > div.button.canplay > div.status.play {
  background-image: url(../img/bgm.pause.light.svg);
}
:root.darkmode #bar.background > #bgm > div.button.canplay > div.status.play {
  background-image: url(../img/bgm.pause.dark.svg);
}

#bgm > div.button > div.progress {
  width: 56px;
  height: var(--bar_item_size);
}
@media screen and (max-width: 375px) {
  #bgm > div.button > div.progress {
    width: 26px;
  }
}

#bgm > div.button > div.progress > progress {
  display: block;
  width: 100%;
  height: var(--bgm_progress_height);
  margin: 19px 0 0;
  border: 0 none;
}

/* Firefox */
#bgm > div.button > div.progress > progress::-moz-progress-bar {
  border-radius: calc(var(--bgm_progress_height) / 2);
  background-color: var(--bgm_progress_color_white);
}
@-moz-document url-prefix() {
  #bgm > div.button > div.progress > progress {
    border-radius: calc(var(--bgm_progress_height) / 2);
    background-color: var(--bgm_progress_background_color_white);
  }
}

/* Safari or Chrome */
#bgm > div.button > div.progress > progress::-webkit-progress-value {
  border-radius: calc(var(--bgm_progress_height) / 2);
  background-color: var(--bgm_progress_color_white);
}
#bgm > div.button > div.progress > progress::-webkit-progress-bar {
  border-radius: calc(var(--bgm_progress_height) / 2);
  background-color: var(--bgm_progress_background_color_white);
}

/* Firefox */
#bar.background > #bgm > div.button > div.progress > progress::-moz-progress-bar {
  background-color: var(--bgm_progress_color);
}
@-moz-document url-prefix() {
  #bar.background > #bgm > div.button > div.progress > progress {
    background-color: var(--bgm_progress_background_color);
  }
}

/* Safari or Chrome */
#bar.background > #bgm > div.button > div.progress > progress::-webkit-progress-value {
  background-color: var(--bgm_progress_color);
}
#bar.background > #bgm > div.button > div.progress > progress::-webkit-progress-bar {
  background-color: var(--bgm_progress_background_color);
}

#bgm > div.change {
  width: 34px;
  height: var(--bar_item_size);
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#bgm > div.change {
  background-image: url(../img/bgm.change.white.svg);
}
#bar.background > #bgm > div.change {
  background-image: url(../img/bgm.change.light.svg);
}
:root.darkmode #bar.background > #bgm > div.change {
  background-image: url(../img/bgm.change.dark.svg);
}

#bgm > div.change.enabled {
  cursor: pointer;
}

/* ==========================================================================
   嵌入式时间筛选器 - 优化与暗黑模式兼容样式
   ========================================================================== */

#bar .time-picker-in-bar {
  position: absolute;
  left: 0;
  top: calc(100% - 4px);       /* 向上重叠微调，无缝衔接 */
  z-index: 10;
  
  /* 1. 默认隐藏状态：透明 + 向上偏移 */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;        /* 隐藏时禁用点击 */
  
  /* 2. 隐藏过渡：设为 0s（即向上滚动时立马瞬间消失，不产生拖沓延迟） */
  transition: opacity 0s, transform 0s;
}

#bar.background .time-picker-in-bar {
  /* 3. 激活显示状态：完全不透明 + 归位 */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;        /* 恢复点击 */
  
  /* 4. 显示与渐隐过渡：0.5s 平滑过渡 */
  transition: opacity 0.5s ease, transform 0.3s ease;
}

/* ==========================================================================
   【新增部分】停止滚动 1.5 秒后触发的淡出样式
   ========================================================================== */
#bar.background .time-picker-in-bar.fade-out {
  opacity: 0;
  pointer-events: none;        /* 自动隐形后禁用点击，防止误触 */
}

#bar .time-picker-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;     /* 确保内部文字整体居中 */
  /*gap: 4px;*/
  padding: 0 8px;             /* 稍微收紧左右内边距 */
  height: 26px;
  line-height: 26px;
  box-sizing: border-box;
  background: var(--bar_background_color, rgba(240, 240, 240, 0.99));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0 0 6px 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: none;
  border-left: none;
  font-size: 11px;
  font-weight: 500;
  color: var(--bar_dialog_text_color_secondary, #666);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* 核心：卡死文字区域宽度 */
#bar #trigger-text {
  display: inline-block;
  width: 62px;                 /* 刚好容纳“2026年08月”的完美宽度 */
  text-align: center;          /* 4个字时（如“2026年”）自动水平居中 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;     /* 极端情况下容错截断 */
}

:root.darkmode #bar .time-picker-trigger {
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--bar_dialog_text_color_secondary, #aaa);
}

/* CSS 绘制 45度 旋转小箭头 */
#bar .time-picker-trigger .arrow {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 2px;
  margin-bottom: 2px;
  border-right: 1.5px solid currentColor; /* 继承父级文字颜色，无需硬编码 */
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

/* 当弹窗打开，或鼠标/手指正在按住筛选器时，强制禁止淡出隐藏 */
#bar.background .time-picker-in-bar.popover-open,
#bar.background .time-picker-in-bar:hover,
#bar.background .time-picker-in-bar.fade-out:hover,
#bar.background .time-picker-in-bar.fade-out.popover-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 气泡弹窗主体 */
#bar .time-picker-popover {
  position: absolute;
  top: 32px;
  left: 0;
  width: 220px;
  background: var(--bar_background_color, #ffffff);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  z-index: 20;
}

:root.darkmode #bar .time-picker-popover {
  border-color: rgba(255, 255, 255, 0.12);
}

/* 弹窗顶部指向小三角 */
#bar .popover-arrow {
  position: absolute;
  top: -6px;
  left: 16px;
  width: 10px;
  height: 10px;
  background: var(--bar_background_color, #ffffff);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  transform: rotate(45deg);
}

:root.darkmode #bar .popover-arrow {
  border-color: rgba(255, 255, 255, 0.12);
}

#bar .popover-title {
  font-size: 12px;
  color: var(--bar_dialog_text_color_secondary, #666);
  font-weight: 600;
  margin-bottom: 10px;
  text-align: left;
}

:root.darkmode #bar .popover-title {
  color: var(--bar_dialog_text_color_secondary, #aaa);
}

/* 强制选择框按 1:1 比例对齐等宽 */
#bar .popover-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

#bar .popover-selects select {
  width: 100%;
  height: 30px;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  background-color: rgba(0, 0, 0, 0.02);
  font-size: 12px;
  color: #333;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 确保在苹果设备上高度和内边距严格按设定渲染 */
}

:root.darkmode #bar .popover-selects select {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #444;
  color: #eee;
}

#bar .popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

#bar .popover-actions button {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

#bar .btn-cancel {
  background: rgba(0, 0, 0, 0.06);
  color: #555;
}

:root.darkmode #bar .btn-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
}

#bar .btn-confirm {
  background: #07c160; /* 保持原有的微信绿 */
  color: #ffffff;
}

#bar .popover-actions button:hover {
  opacity: 0.85;
}