/* viewer 专属：月份按钮、天/会话胶囊两行、泳道天分隔、详情面板。
   主题/背景/toast/菜单/模态来自 theme.css；节点/泳道线来自 timeline.css；markdown 来自 markdown.css。 */

/* ── 视图外更新提示条：顶栏正下方、浅绿(随主题)、高度渐变展开/收起 ── */
.update-notice { position: fixed; left: 0; right: 0; top: var(--topbar-h, 150px); z-index: 18;
  display: flex; align-items: center; gap: 12px;
  padding: 0 clamp(16px,4vw,48px); box-sizing: border-box;
  max-height: 0; overflow: hidden; opacity: 0;
  /* 浅绿底：由主题绿与玻璃底混合，随 6 主题/明暗自适应 */
  background: color-mix(in srgb, var(--notice-green) 22%, var(--lg-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--notice-green) 45%, transparent);
  backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%);
  color: var(--txt);
  transition: max-height calc(.42s * var(--anim-k)) cubic-bezier(.2,.8,.2,1), opacity calc(.32s * var(--anim-k)) ease, padding calc(.42s * var(--anim-k)) ease;
  pointer-events: none; }
/* banner 高度随胶囊换行变化时，提示条 top 平滑跟随（首帧后启用，避开加载时校正抖动） */
html.tb-ready .update-notice { transition: max-height calc(.42s * var(--anim-k)) cubic-bezier(.2,.8,.2,1),
  opacity calc(.32s * var(--anim-k)) ease, padding calc(.42s * var(--anim-k)) ease, top calc(.42s * var(--anim-k)) cubic-bezier(.2,.8,.2,1); }
.update-notice.show { max-height: 56px; opacity: 1; padding-top: 9px; padding-bottom: 9px; pointer-events: auto; }
.update-notice .un-dot { flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--notice-green); box-shadow: 0 0 8px var(--notice-green);
  animation: un-pulse calc(1.6s * var(--anim-k)) ease-in-out infinite; }
@keyframes un-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.update-notice .un-text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: color-mix(in srgb, var(--notice-green) 55%, var(--txt)); font-weight: 600; }
.update-notice .un-btn { flex: none; font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 5px 14px; border-radius: 999px; cursor: pointer; border: none; transition: transform calc(.15s * var(--anim-k)), filter calc(.2s * var(--anim-k)), background calc(.2s * var(--anim-k)); }
.update-notice .un-btn:hover { transform: translateY(-1px); }
.update-notice .un-view { color: #fff;
  background: linear-gradient(120deg, var(--notice-green), color-mix(in srgb, var(--notice-green) 60%, #2ea86a));
  box-shadow: 0 6px 16px -7px var(--notice-green); }
.update-notice .un-view:hover { filter: brightness(1.08); }
.update-notice .un-dismiss { color: var(--dim); background: color-mix(in srgb, var(--txt) 8%, transparent); }
.update-notice .un-dismiss:hover { color: var(--txt); background: color-mix(in srgb, var(--txt) 14%, transparent); }

/* 月份选择按钮（在 header 槽内） */
.month-pick { font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: var(--lg-border); background: var(--lg-bg); color: var(--txt); box-shadow: var(--lg-inset); }
.month-pick b { font-variant-numeric: tabular-nums; }

/* 胶囊两行 */
/* 胶囊两行：位于 banner 内、主行之下，用分隔线 + 加大上留白与顶层主行明确分层 */
.caps { display: flex; flex-direction: column; gap: 12px; padding-top: 14px;
  border-top: 1px solid var(--line); }
.cap-row { display: flex; align-items: center; gap: 10px; }
.cap-tag { flex: none; font-size: 11px; color: var(--dim); width: 30px; }
.cap-list { display: flex; flex-wrap: wrap; gap: 14px; }
.cap { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; color: var(--txt); cursor: pointer; user-select: none;
  background: var(--lg-bg); border: var(--lg-border); box-shadow: var(--lg-inset);
  transition: transform calc(.25s * var(--anim-k)), box-shadow calc(.3s * var(--anim-k)), opacity calc(.25s * var(--anim-k)), filter calc(.25s * var(--anim-k)); }
.cap:hover { transform: translateY(-2px); }
/* 会话胶囊：折叠靠 JS FLIP（transform 补间位移）+ opacity 淡出。
   关键：max-width/padding/margin 不加过渡（布局瞬时塌缩），FLIP 才能测到正确终态并平滑滑动；
   flex:none + nowrap 防止拥挤时被压缩+裁切（导致大小异常）。 */
.sess-cap { flex: none; max-width: 320px; overflow: hidden; white-space: nowrap;
  transition: box-shadow calc(.3s * var(--anim-k)), color calc(.25s * var(--anim-k)), opacity calc(.34s * var(--anim-k)) cubic-bezier(.22,1,.36,1),
    transform calc(.34s * var(--anim-k)) cubic-bezier(.22,1,.36,1); }
/* 收起态：布局塌缩 + 彻底停止绘制。必须连 background/box-shadow 一并清零——
   否则零宽胶囊仍会画出玻璃底 / 拟态投影（6px 偏移的柔和阴影），多个叠在标签右侧
   堆成一条灰色纵向长条（见 issue #6）。用 !important 压过后面更具体的 .on/.off 阴影规则。 */
.sess-cap.cap-hidden { max-width: 0; padding-left: 0; padding-right: 0;
  margin-left: calc(-1 * var(--cap-gap, 14px)); opacity: 0;
  pointer-events: none; border-width: 0;
  background: transparent !important; box-shadow: none !important; }

/* 三种状态 */
.cap.on { opacity: 1; }
.cap.off { opacity: .48; filter: grayscale(.8); }
.cap.grey { opacity: .14; filter: grayscale(1); pointer-events: none !important; }

.cap .emo { font-size: 14px; }
/* 会话选择器折叠按钮：直接复用 .cap 的盒模型（padding/font-size/圆角/玻璃底/描边/阴影完全一致），
   与天/会话胶囊等高、同行对齐。这里只补 .cap 没有的：抹平原生 button 样式、图标尺寸、
   低调的 dim 文字色、单行不换行，以及收起动画（max-width 塌缩 + opacity 淡出，位移交 JS FLIP）。 */
.cap-toggle { font: inherit; font-size: 12.5px; color: var(--dim);
  overflow: hidden; white-space: nowrap; max-width: 200px; }
.cap-toggle:hover { color: var(--txt); }
.cap-toggle .icon { width: 14px; height: 14px; }
/* 收起态：彻底不渲染任何玻璃底/描边/阴影，避免留下浅色小色块（尤其玻璃/拟态主题）。
   仍保留 opacity 过渡供淡出；margin 归零，防止负边距把 0 宽按钮拽回行内叠出可见残影。 */
.cap-toggle.cap-toggle-off { max-width: 0; padding-left: 0; padding-right: 0; margin: 0;
  opacity: 0; pointer-events: none;
  background: transparent; border-color: transparent; box-shadow: none; }
/* 重命名后的旧名：半透明小字括号，跟在别名之后，供对照原始会话代号 */
.old-name { margin-left: 4px; font-size: 10.5px; font-weight: 400; opacity: .5; }
/* AI 主题胶囊：主题名 + 条数徽标（单选切换分类） */
.topic-cap .topic-cnt { margin-left: 6px; font-size: 10.5px; font-weight: 700; opacity: .6;
  font-variant-numeric: tabular-nums; }
/* 会话胶囊：左侧实心点用会话色 + on 态外发光 */
.sess-cap { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent), var(--lg-inset); }
.sess-cap.off { box-shadow: inset 0 2px 6px rgba(40,50,90,.25); }
/* on 态外发光：用负 spread(-6px) 收束光晕，使其贴合胶囊本体，
   不再向左溢出到「会话」标签与首个胶囊之间的空隙（此前 0 spread 的 18px halo 会漏出成浅色块）。 */
.sess-cap.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent),
    0 0 16px -6px color-mix(in srgb, var(--c) 62%, transparent), var(--lg-inset); }
.cap-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.cap.off .cap-dot, .cap.grey .cap-dot { box-shadow: none; }
/* 天胶囊：色块用渐变（当日会话色）．on 态加色块外发光 */
.cap-swatch { width: 21px; height: 7px; border-radius: 4px; }
/* on 态色块发光：提亮混白后的颜色做双层柔光，避免单层深色晕染显脏（污渍感） */
.day-cap.on .cap-swatch {
  box-shadow: 0 0 6px color-mix(in srgb, var(--day-c, #7884a0) 70%, #fff),
              0 0 14px color-mix(in srgb, var(--day-c, #7884a0) 45%, transparent); }


.stage .empty, .right .empty { color: var(--dim); padding: 40px 16px; text-align: center; }

/* 详情指标卡（复用 detail.css 的 box/d-title 等；这里补 metrics/f） */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.f { background: rgba(255,255,255,.4); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; }
html[data-mode="dark"] .f { background: rgba(200,215,255,.07); }
.f .k { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .3px; }
.f .v { font-size: 13px; margin-top: 3px; word-break: break-all; }
.bt { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }

/* 未登录拦截 */
.auth-gate { text-align: center; padding: 60px 20px; color: var(--dim); }
.auth-gate p { margin-bottom: 16px; font-size: 15px; }
.gate-btn { display: inline-block; padding: 10px 22px; border-radius: 12px; color: #fff; font-weight: 600;
  text-decoration: none; background: linear-gradient(120deg,#6ea8fe,#9d7bff); box-shadow: 0 8px 20px -8px rgba(110,123,255,.7); }

/* 页头内搜索框 */
.search-box { flex: 1; max-width: 320px; }
#search-input { width: 100%; padding: 7px 14px; border-radius: 999px; border: var(--lg-border);
  background: var(--lg-bg); font: inherit; font-size: 13px; color: var(--txt); outline: none; box-shadow: var(--lg-inset); }
#search-input:focus { border-color: #6ea8fe; box-shadow: 0 0 0 3px rgba(110,168,254,.2); }

/* 搜索结果浮层：位于搜索框正下方 */
.search-results { position: fixed; z-index: 40;
  width: min(92vw, 460px); max-height: 70vh; overflow-y: auto; padding: 8px;
  background: var(--lg-bg); border: var(--lg-border); border-radius: 14px;
  backdrop-filter: blur(22px) saturate(185%); -webkit-backdrop-filter: blur(22px) saturate(185%);
  box-shadow: 0 18px 44px -16px rgba(40,50,90,.5), var(--lg-inset); }
.sr-count, .sr-empty { font-size: 11.5px; color: var(--dim); padding: 6px 10px; }
.sr-empty { text-align: center; padding: 18px; }
.sr-item { padding: 10px 12px; border-radius: 10px; cursor: pointer; margin-bottom: 4px; transition: background calc(.15s * var(--anim-k)); }
.sr-item:hover { background: rgba(110,168,254,.12); }
.sr-head { display: flex; align-items: center; gap: 8px; }
.sr-title { font-size: 14px; font-weight: 650; color: var(--title-color); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-seq { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.sr-snip { font-size: 12.5px; color: var(--txt); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
mark { background: color-mix(in srgb, #ffd166 70%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
html[data-mode="dark"] mark { background: color-mix(in srgb, #ffd166 40%, transparent); }

/* 日期标识：横跨整个泳道宽度的不透明圆角矩形，固定高度，位于两天交界处。
   top/left/width/height/border-radius 走 transition：泳道增减导致的重排、以及
   单/多泳道之间的形态切换（宽带 ⇄ 紧凑徽标）都平滑变形。 */
.day-band { position: absolute; left: 0; z-index: 1; height: 32px; border-radius: 10px; box-sizing: border-box;
  display: flex; align-items: center; padding: 0 12px; white-space: nowrap; overflow: hidden;
  background: var(--lg-bg); border: var(--lg-border); opacity: 1; transform: none;
  backdrop-filter: blur(16px) saturate(185%); -webkit-backdrop-filter: blur(16px) saturate(185%);
  box-shadow: 0 1px 5px -3px rgba(30,40,70,.3);
  transition: top calc(.5s * var(--anim-k)) cubic-bezier(.2,.8,.2,1), left calc(.5s * var(--anim-k)) cubic-bezier(.2,.8,.2,1),
    width calc(.5s * var(--anim-k)) cubic-bezier(.2,.8,.2,1), height calc(.5s * var(--anim-k)) cubic-bezier(.2,.8,.2,1),
    border-radius calc(.5s * var(--anim-k)) ease, padding calc(.5s * var(--anim-k)) ease,
    opacity calc(.35s * var(--anim-k)) ease, transform calc(.35s * var(--anim-k)) cubic-bezier(.2,.9,.3,1.2); }
.day-band::before { content: ""; display: inline-block; width: 5px; height: 20px; border-radius: 3px;
  background: var(--day-c, #7884a0); margin-right: 8px; flex: none; }
.day-band-label { font-size: 15px; font-weight: 650; color: var(--title-color);
  font-variant-numeric: tabular-nums; line-height: 1; }
/* 单泳道紧凑徽标：保留玻璃圆角矩形背景，内部竖排 横向色胶囊 + 天数字，居中于窄列。
   宽/高由 JS 显式设置（便于 transition 变形）；这里只管布局与更圆的边角。 */
.day-band.solo { left: 6px; border-radius: 16px; padding: 0;
  flex-direction: column; justify-content: center; gap: 5px; }
.day-band.solo::before { display: none; }
.day-band-pill { width: 26px; height: 8px; border-radius: 999px; flex: none;
  background: var(--day-c, #7884a0); box-shadow: 0 0 10px var(--day-c, #7884a0); }
.day-band-num { font-size: 13px; font-weight: 700; color: var(--title-color);
  font-variant-numeric: tabular-nums; line-height: 1; }
/* 拟态主题：时间标识改用拟态双向投影获得凸起立体感（减半强度），而非玻璃的扁平投影；
   拟态需要不透明表面，关掉磨砂模糊 */
html[data-style="neumorphism"] .day-band {
  border: 1px solid transparent;
  box-shadow: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
/* 暗色模式（玻璃/报纸）：原投影在深底上几乎不可见，换成外发光暗影 + 顶部高光描边（减半） */
html[data-mode="dark"] .day-band {
  border-color: rgba(180,195,235,.16);
  box-shadow: 0 2px 7px -3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); }
/* 暗色 + 拟态：沿用拟态双向投影（深色变量已含亮/暗两侧，减半） */
html[data-mode="dark"][data-style="neumorphism"] .day-band {
  box-shadow: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light); }
/* 时间标识 进入/离开：淡入缩放 */
.day-band.enter { opacity: 0; transform: scale(.9); }
.day-band.leaving { opacity: 0; transform: scale(.9); pointer-events: none; }
/* 节点/泳道线在色带之上 */
#stage .node { z-index: 3; }
svg.rails { z-index: 1; }

/* 改色模态：60 色调色盘，10 列小色块。
   内边距给 hover 放大留出余量——否则边缘/首行色块 scale 后越界，会触发滚动条并被裁切。 */
.sw-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 14px 0;
  padding: 8px; max-height: 44vh; overflow-y: auto; }
.sw { width: 100%; aspect-ratio: 1; border-radius: 7px; border: 2px solid rgba(255,255,255,.6);
  cursor: pointer; box-shadow: 0 1px 5px -2px rgba(40,50,90,.4);
  transition: transform calc(.15s * var(--anim-k)), box-shadow calc(.2s * var(--anim-k)), border-color calc(.2s * var(--anim-k));
  display: grid; place-items: center; padding: 0; position: relative; }
.sw:hover { transform: scale(1.18); z-index: 1; }
.sw.on { border-color: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--txt) 55%, transparent), 0 2px 8px -2px rgba(40,50,90,.5); }
.sw .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 15px; height: 15px; color: #fff; stroke-width: 3; vertical-align: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
/* 自定义颜色：默认展示彩虹色轮（提示可自定义）；命中自定义色时展示该色并打对号 */
.sw-custom { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); }
.sw-cus-box { position: relative; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.6); box-shadow: 0 1px 5px -2px rgba(40,50,90,.4);
  display: grid; place-items: center; overflow: hidden;
  transition: box-shadow calc(.2s * var(--anim-k)), border-color calc(.2s * var(--anim-k));
  background: conic-gradient(from 0deg, #fa5f5f, #faac5f, #fafa5f, #5ffa5f, #5ffafa, #5f5ffa, #ac5ffa, #fa5ffa, #fa5f5f); }
.sw-cus-box:hover { border-color: #fff; }
.sw-cus-box.on { background: var(--cus, #6ea8fe); border-color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--txt) 55%, transparent), 0 2px 8px -2px rgba(40,50,90,.5); }
.sw-cus-box .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; color: #fff; stroke-width: 3; vertical-align: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); pointer-events: none; }
/* 选中对号弹入动画 */
.sw .icon.pick-pop, .sw-cus-box .icon.pick-pop { animation: pick-pop calc(.32s * var(--anim-k)) cubic-bezier(.2,.9,.3,1.5); }
@keyframes pick-pop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.35); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); }
}
/* 隐藏原生 color input 的默认外观与内边距（否则其自带色块会从色轮里透出、看似裁切），
   设为透明铺满，仅作点击热区调起系统取色器。 */
.sw-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none;
  background: none; cursor: pointer; padding: 0;
  -webkit-appearance: none; appearance: none; }
.sw-input::-webkit-color-swatch-wrapper { padding: 0; }
.sw-input::-webkit-color-swatch { border: none; }

/* #feed：全局空态容器。空时不占位（不撑破 .wrap 弹性行）；有内容时占满整行居中。 */
#feed:empty { display: none; }
#feed { flex: 1; min-width: 0; }

/* 居中空态（无任何内容时） */
.empty-center { min-height: 50vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; text-align: center; }
.empty-main { font-size: 18px; font-weight: 650; color: var(--title-color); }
.empty-sub { font-size: 13px; color: var(--dim); }
.empty-sub a { color: color-mix(in srgb, #6ea8fe 72%, var(--txt)); text-decoration: none; }
.empty-sub a:hover { color: #6ea8fe; text-decoration: underline; }