/* ============================================================================
 * layout.css — 布局与交互层（v4.0.0）
 *
 * refined.css 管的是「长什么样」（色彩、圆角、阴影、字体）；
 * 这一层管的是「怎么排、怎么动」：
 *   1. 侧栏重做：固定侧栏定宽 248，导航带图标与滑动指示条，状态卡沉到底部；
 *   2. 主区留白重排：把内容从「贴边的卡片堆」变成有呼吸感的文档流；
 *   3. 间距系统统一：所有栅格 gap / 卡片内距落到同一套刻度上；
 *   4. 结构重排：把监控台里被隔断的筛选与列表接回一起（纯 CSS order，不动 DOM）；
 *   5. 交互统一：指示条、错峰入场、行/卡悬停、按钮按压都走同一条缓动。
 *
 * 加载顺序：必须排在 refined.css 之后。规则统一带 body 前缀以保证覆盖。
 * ========================================================================== */

:root {
  --rf-rail: 248px;
  --rf-gutter: 40px;
  --rf-gap: 16px;
  --rf-gap-lg: 20px;
}

/* ============================================================ 侧栏 ======= */

body .topbar {
  width: var(--rf-rail);
  padding: 26px 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-right: 1px solid var(--rf-line);
}

body .brand { padding: 0 10px 26px; }

body .module-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}
body .module-nav::before {
  content: "工作空间";
  margin: 0 10px 9px;
  color: var(--rf-muted-2);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
}

body .module-nav :is(button, a) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--rf-ink-2);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
body .module-nav :is(button, a) svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .58;
  transition: opacity .2s var(--rf-ease), transform .3s var(--rf-ease);
}
body .module-nav :is(button, a):hover { background: rgba(16, 24, 40, .04); color: var(--rf-ink); }
body .module-nav :is(button, a):hover svg { opacity: .9; transform: scale(1.06); }
body .module-nav :is(button, a):active { transform: scale(.985); }

body .module-nav button.active,
body .module-nav a.active {
  background: var(--rf-accent-soft);
  color: var(--rf-accent);
  font-weight: 600;
}
body .module-nav button.active svg,
body .module-nav a.active svg { opacity: 1; }

/* 选中项左侧的滑动指示条 */
body .module-nav :is(button, a)::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--rf-accent);
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform .32s var(--rf-ease);
}
body .module-nav :is(button, a).active::before { transform: translateY(-50%) scaleY(1); }

body .module-nav :is(button, a) > span {
  margin-left: auto;
  font-size: 11px;
  color: var(--rf-muted-2);
  font-variant-numeric: tabular-nums;
}

/* 底部连接状态：沉到侧栏底，做成一张小卡 */
body .connection-badge {
  margin-top: auto;
  justify-content: flex-start;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-md);
  background: var(--rf-surface-2);
  box-shadow: none;
}
body .connection-badge span { font-size: 12px; color: var(--rf-ink-2); line-height: 1.45; }

/* ======================================================= 主内容区 ======= */

body .shell {
  margin: 0 0 0 var(--rf-rail);
  max-width: 1560px;
  padding: 34px var(--rf-gutter) 88px;
}

/* 模块之间统一呼吸，未单独设定外边距的容器由这条兜底 */
body .shell > * + * { margin-top: var(--rf-gap-lg); }
body .shell > .metric-grid { margin-top: var(--rf-gap-lg); }

/* 各模块页头：标题坐实，下面留一条淡分隔线 */
body :is(.analytics-head, .console-head) {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 26px 28px 18px;
  border-bottom: 1px solid var(--rf-line);
}
body :is(.analytics-head, .console-head) h2,
body :is(.analytics-head, .console-head) h3 {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.025em;
  margin: 0;
}
body .console-head h3 span {
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: var(--rf-r-pill);
  background: var(--rf-bg-soft);
  color: var(--rf-muted);
  font-size: 11px;
  font-weight: 600;
  vertical-align: 2px;
}

/* =============================================== 监控台：结构重排 ======= */

/* 原顺序把「弹幕历史记录」夹在筛选与房间之间，割裂了阅读连贯性。
   这里用 order 把顺序理成：页头 → 类型筛选 → 房间概览 → 房间筛选 → 历史操作 → 列表。 */
body .console {
  display: flex;
  flex-direction: column;
  padding: 0 0 6px;
  overflow: hidden;
}
body .console > .console-head { order: 1; }
body .console > .filters { order: 2; }
body .console > .live-status-board { order: 3; }
body .console > .rooms-bar { order: 4; }
body .console > .history-bar { order: 5; }
body .console > .table-head { order: 6; }
body .console > .event-list { order: 7; }
body .console > .hidden { display: none; }

body .console > .filters {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 16px 28px;
  overflow-x: auto;
  border-bottom: 1px solid var(--rf-line);
}

body .console > .live-status-board {
  padding: 18px 28px;
  background: var(--rf-surface-2);
  border-bottom: 1px solid var(--rf-line);
}

body .console > .rooms-bar,
body .console > .history-bar {
  padding: 14px 28px;
  border-bottom: 1px solid var(--rf-line);
  background: var(--rf-surface);
}
body .console > .rooms-bar { gap: 14px; }

body .console > .table-head { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
body .console > .event-list { min-height: 0; }

/* 房间状态卡：网格间距与悬停 */
body .live-status-board { display: grid; gap: 12px; }
body .live-state-card {
  border-radius: var(--rf-r-md);
  padding: 14px 16px;
  overflow: hidden;
  transition: transform .26s var(--rf-ease), box-shadow .26s var(--rf-ease), border-color .26s var(--rf-ease);
}
body .live-state-card:hover {
  transform: translateY(-2px);
  border-color: var(--rf-accent-line);
  box-shadow: var(--rf-sh-sm);
}
body .live-state-card > * { min-width: 0; }
body .live-state-card :is(span, small, strong) { overflow-wrap: anywhere; }
body .live-state-card strong { font-size: 13px; font-weight: 600; }
body .live-state-card :is(small, span) { font-size: 11px; }
body .live-state-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

@media (min-width: 1500px) { body .live-status-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1499px) { body .live-status-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { body .live-status-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================= 栅格间距统一 ======= */

body .metric-grid { gap: var(--rf-gap); margin: var(--rf-gap-lg) 0; }
body .metric { padding: 20px 22px; min-height: 104px; }
body .metric span { font-size: 12px; }
body .metric strong { margin-top: 10px; }

/* 复盘页：用多列瀑布流取代分行网格。
   分行时行高由最高的卡片决定——「高频问题」能长到 1000px 以上，而同一行的
   「弹幕趋势」只有 300px，左栏底下就空出一大片。多列布局按内容高度自动均衡，
   卡片各按各的高度排，空位自然消失。 */
body .analytics-grid {
  display: block;
  columns: 2;
  column-gap: var(--rf-gap-lg);
}
body .analytics-grid > * {
  width: 100%;
  margin: 0 0 var(--rf-gap-lg);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
body .two-column { gap: var(--rf-gap-lg); }
body .editorial-grid { gap: var(--rf-gap-lg); }
body .insight-stats { gap: var(--rf-gap); }
/* 画面墙：竖屏直播流定宽排布，不再拉伸成一整行；少路数时靠左堆叠不散开 */
body .screens-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 250px));
  justify-content: start;
  gap: var(--rf-gap);
  align-items: start;
}
body .screens-header { padding-bottom: 18px; }
body .screens-status-row { font-size: 12px; color: var(--rf-muted); }
body .knowledge-grid { gap: var(--rf-gap); }
body .materials-grid { gap: var(--rf-gap-lg); }
body .daily-hosts { gap: 12px; }
body .daily-review-grid,
body .daily-themes { gap: var(--rf-gap); }
body .speech-blocks { gap: var(--rf-gap-lg); }
body .speech-utility-grid { gap: var(--rf-gap); margin-bottom: var(--rf-gap-lg); }
body .recommendation-list,
body .intent-list { gap: 8px; }
body .topic-list { display: grid; gap: 10px; }

/* 复盘页的概览条：把纯色块改成带圆角的浅蓝说明条 */
body .studio-promo {
  padding: 18px 20px;
  border-radius: var(--rf-r-md);
  background: var(--rf-accent-soft);
  border: 1px solid var(--rf-accent-line);
}
body .studio-promo b { font-size: 14px; font-weight: 650; color: var(--rf-ink); }
body .studio-promo span { color: var(--rf-muted); font-size: 12px; line-height: 1.7; }

/* 面板内距统一，避免有的 18px、有的 30px */
body :is(.analytics-panel, .transcript-panel, .knowledge, .live-screens) { padding: 30px 32px; }

body .topic-list { margin: 0; }

/* 洞察页：左栏素材列表与右栏详情比例更均衡 */
body .editorial-grid { grid-template-columns: 330px minmax(0, 1fr); }

/* 素材列表项是裸 <button>，浏览器默认内距几乎为零，文字会顶到卡片边。
   这里把它做成可读的软卡片，选中态用蓝底 + 蓝边。 */
body #materialList { display: grid; gap: 8px; padding: 12px; align-content: start; }
body .material-option {
  width: 100%;
  display: block;
  padding: 15px 17px;
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-md);
  background: var(--rf-surface);
  box-shadow: var(--rf-sh-xs);
  text-align: left;
  cursor: pointer;
}
body .material-option:hover {
  transform: translateY(-2px);
  border-color: var(--rf-accent-line);
  box-shadow: var(--rf-sh-sm);
}
body .material-option.selected {
  background: var(--rf-accent-soft);
  border-color: var(--rf-accent-line);
  box-shadow: var(--rf-sh-sm);
}
body .material-option > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body .material-option .ordinal {
  font-family: var(--rf-font-num);
  font-size: 11px;
  font-weight: 650;
  color: var(--rf-muted-2);
  letter-spacing: .04em;
}
body .material-option .stage-label {
  padding: 2px 8px;
  border-radius: var(--rf-r-pill);
  background: var(--rf-bg-soft);
  color: var(--rf-muted);
  font-size: 10px;
  font-weight: 600;
}
body .material-option.selected .stage-label { background: rgba(0, 113, 227, .12); color: var(--rf-accent); }
body .material-option strong {
  display: block;
  margin: 9px 0 8px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--rf-ink);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
body .material-option footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--rf-muted);
}
body .material-option footer span { color: var(--rf-muted-2); font-variant-numeric: tabular-nums; }

/* 洞察页顶部的筛选条：把散开的控件收成一组 */
body .selection-bar {
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--rf-r-md);
  box-shadow: var(--rf-sh-xs);
}
body .selection-bar label { font-size: 11px; color: var(--rf-muted-2); font-weight: 600; letter-spacing: .02em; }
body .selection-bar select,
body .selection-bar input { height: 38px; font-size: 13px; }
body .material-detail { padding: 26px 28px; }

/* 话术页：控制台与内容区之间留白 */
body .speech-command-center { margin: var(--rf-gap-lg) 0 var(--rf-gap); }
body .speech-block { padding: 30px 34px; }

/* ==================================================== 交互升级 ======== */

/* 指标卡错峰入场，让首屏有节奏而不是整块砸下来 */
@media (prefers-reduced-motion: no-preference) {
  body .metric-grid > * { animation: rf-rise .46s var(--rf-ease) both; }
  body .metric-grid > *:nth-child(2) { animation-delay: .05s; }
  body .metric-grid > *:nth-child(3) { animation-delay: .1s; }
  body .metric-grid > *:nth-child(4) { animation-delay: .15s; }
  body .module-nav :is(button, a) { animation: rf-slide-in .4s var(--rf-ease) both; }
  body .module-nav :is(button, a):nth-child(2) { animation-delay: .03s; }
  body .module-nav :is(button, a):nth-child(3) { animation-delay: .06s; }
  body .module-nav :is(button, a):nth-child(4) { animation-delay: .09s; }
  body .module-nav :is(button, a):nth-child(5) { animation-delay: .12s; }
  body .module-nav :is(button, a):nth-child(6) { animation-delay: .15s; }
  body .module-nav :is(button, a):nth-child(7) { animation-delay: .18s; }
  @keyframes rf-slide-in {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: none; }
  }
}

/* 表格与列表：可读的行高 + 悬浮高亮 */
body .event-row { min-height: 42px; }
body .event-list { border-top: 0; }
body .room-tab, body .filter { transition: background-color .2s var(--rf-ease), color .2s var(--rf-ease), border-color .2s var(--rf-ease), transform .2s var(--rf-ease); }
body .room-tab:active, body .filter:active { transform: scale(.97); }

/* 按钮按压反馈 */
body :is(.primary, .secondary, .outline, .icon-button):active { transform: translateY(0) scale(.985); }

/* 标签页：选中块带轻微位移感 */
body .speech-tabs button.active { transform: none; }
body .speech-tabs { gap: 3px; }

/* 面板出现时统一抬升，切换模块有回应 */
@media (prefers-reduced-motion: no-preference) {
  body .shell > :is(section, details, live-insights) { animation: rf-rise .44s var(--rf-ease) both; }
}

/* ====================================================== 响应式 ======== */

@media (max-width: 1380px) {
  :root { --rf-gutter: 30px; }
  body .editorial-grid { grid-template-columns: 300px minmax(0, 1fr); }
}

@media (max-width: 1180px) {
  :root { --rf-rail: 228px; --rf-gutter: 24px; }
  body .analytics-grid { columns: 1; }
  body .editorial-grid { grid-template-columns: 260px minmax(0, 1fr); }
}

/* 侧栏折叠成顶栏：走 console-studio.css 的既有行为，这里只补齐细节 */
@media (max-width: 850px) {
  body .topbar {
    width: auto;
    padding: 16px 18px;
    background: var(--rf-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body .brand { padding: 0 0 4px; }
  body .shell { margin: 0 18px; padding: 0 0 48px; }
  body .module-nav { flex-direction: row; gap: 4px; overflow-x: auto; margin: 14px 0 0; }
  body .module-nav::before { display: none; }
  body .module-nav :is(button, a) {
    flex: none;
    width: auto;
    height: 38px;
    padding: 0 12px;
    white-space: nowrap;
  }
  body .module-nav :is(button, a)::before { display: none; }
  body .module-nav :is(button, a) svg { width: 16px; height: 16px; }
  body .connection-badge { position: absolute; top: 18px; right: 18px; margin: 0; padding: 8px 12px; }
}

@media (max-width: 580px) {
  :root { --rf-gap: 12px; --rf-gap-lg: 14px; }
  body .shell { margin: 0 12px; }
  body .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .live-status-board { grid-template-columns: 1fr; }
  body :is(.analytics-head, .console-head, .analytics-panel, .transcript-panel, .knowledge, .live-screens) { padding-left: 18px; padding-right: 18px; }
  body .console > :is(.filters, .live-status-board, .rooms-bar, .history-bar) { padding-left: 18px; padding-right: 18px; }
}

/* ========================================== 工具栏控件尺寸统一 ======== */

/* 原来搜索框的外框高 36px、内层 input 却被视觉层抬到 44px，
   内容撑破外框，一排控件里只有它看起来「小一号」。整排统一成同一高度与圆角。 */
body .toolbar { gap: 10px; align-items: center; }
body .search {
  width: 240px;
  height: 44px;
  padding: 0 14px;
  gap: 9px;
  border-radius: var(--rf-r-md);
  transition: border-color .2s var(--rf-ease), box-shadow .2s var(--rf-ease);
}
body .search input {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 13px;
}
body .search input:focus { outline: 0; }
body .search svg { width: 16px; height: 16px; flex: none; }
body .search:focus-within {
  border-color: var(--rf-accent-line);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, .13);
}
/* 其它模块的输入容器同样跟进，避免逐页出现「大小不一」 */
body .input-wrap { min-height: 44px; }

/* ====================================== 复盘页：图表与榜单精修 ====== */

/* 趋势图：加基线网格与顶部渐隐，柱子统一单色渐变，峰值单独加深 */
body .trend-card { padding: 24px 26px 22px; }
body .trend-chart {
  height: 268px;
  gap: 6px;
  padding: 44px 6px 0;
  border-radius: var(--rf-r-md);
  background:
    linear-gradient(180deg, rgba(0, 113, 227, .05), rgba(0, 113, 227, 0) 60%),
    repeating-linear-gradient(180deg, var(--rf-line) 0 1px, transparent 1px 62px);
}
body .trend-bar { gap: 6px; }
body .trend-bar i {
  width: min(26px, 82%);
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #8cc4ff, var(--rf-accent));
  box-shadow: none;
  transition: filter .22s var(--rf-ease);
}
body .trend-bar:hover i { filter: brightness(1.07) saturate(1.2); }
body .trend-bar.peak i {
  background: linear-gradient(180deg, #1d8bff, #0057c2);
  box-shadow: 0 10px 22px -10px rgba(0, 113, 227, .6);
}
body .trend-bar b {
  font-size: 10px;
  font-weight: 650;
  color: var(--rf-muted-2);
  font-variant-numeric: tabular-nums;
  transition: color .2s var(--rf-ease);
}
body .trend-bar:hover b,
body .trend-bar.peak b { color: var(--rf-accent); }
body .trend-bar span { font-size: 10px; color: var(--rf-muted-2); letter-spacing: -.02em; }
/* 时段一多就隔几个显示一个标签，其余留位不出字，横轴不再糊成一团 */
body .trend-bar.hide-label span { opacity: 0; }

/* 高频问题：序号做成方块徽章，条数做成实心蓝胶囊，一眼看到重点 */
body .topic-list { gap: 9px; }
body .topic-item { padding: 13px 15px; }
body .topic-head { grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 10px; }
body .topic-head > i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--rf-bg-soft);
  color: var(--rf-muted-2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  transition: background-color .24s var(--rf-ease), color .24s var(--rf-ease);
}
body .topic-item:hover .topic-head > i { background: var(--rf-accent-soft); color: var(--rf-accent); }
body .topic-head > em {
  background: var(--rf-bg-soft);
  color: var(--rf-muted);
  font-size: 11px;
  font-weight: 550;
}
body .topic-head > b {
  min-width: 42px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-radius: var(--rf-r-pill);
  background: var(--rf-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px -8px rgba(0, 113, 227, .7);
}
body .topic-samples { font-size: 12px; line-height: 1.7; margin-top: 7px; }

/* 高频关注点 / 活跃用户：细横条改成有底色有圆角的统一进度条 */
body .rank-list { gap: 2px; }
body .rank-item { min-height: 30px; gap: 12px; grid-template-columns: 22px minmax(0, 1fr) auto; }
body .rank-item > i {
  color: var(--rf-muted-2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
}
body .rank-item span { color: var(--rf-ink-2); font-size: 12.5px; font-weight: 550; }
body .rank-item em {
  height: 5px;
  margin-top: 6px;
  border-radius: var(--rf-r-pill);
  background: linear-gradient(90deg, #78bcff, var(--rf-accent));
}
body .rank-item b {
  color: var(--rf-ink);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* 指标数字回到有冲击力的尺度（上一版收到的 24px 偏小） */
body .metric strong,
body .analytics-metrics strong,
body .speech-metrics strong,
body .insight-stats strong { font-size: 29px; }

/* 运营建议：序号圆点与条目同高，文字基线对齐 */
body .recommendation-list li { padding: 11px 14px 11px 38px; }
body .recommendation-list li::before {
  left: 14px;
  top: 12px;
  width: 16px;
  height: 16px;
  background: var(--rf-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 650;
}

/* 复盘页卡片之间的节奏：淡分隔线只在需要分段的地方出现。
   概览条到「所选时间范围」这一段原来留了 50px，是最显眼的空档，收紧到 32px。 */
body .analytics-content .section-divider { margin-top: 18px; padding-top: 14px; }

/* 趋势图跨两列，作为复盘页的视觉主图：宽度翻倍后柱子排得开，一眼看出节奏 */
body .trend-card {
  column-span: all;
  -webkit-column-span: all;
  padding: 26px 28px 22px;
}
body .trend-chart {
  height: 300px;
  padding: 50px 12px 0;
}
body .trend-bar i { width: min(38px, 68%); border-radius: 8px 8px 3px 3px; }
body .trend-bar b { font-size: 11px; }
body .trend-bar span { font-size: 11px; }

/* 图表头部：峰值与平均做成一对小标签，右侧不再只有一句孤立的文字 */
body .trend-card header { align-items: flex-start; }
body .trend-facts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
body .trend-facts span {
  padding: 5px 12px;
  border-radius: var(--rf-r-pill);
  background: var(--rf-bg-soft);
  color: var(--rf-muted);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body .trend-facts span:first-child { background: var(--rf-accent-soft); color: var(--rf-accent); }
/* 柱子拔高后需要更多纵向空间，容器同步加高 */
body .trend-chart { height: 330px; padding: 60px 12px 0; }
/* 0 条弹幕的时段只留一个淡灰小墩，一排空柱不再看起来像虚线乱码 */
body .trend-bar.zero i { background: var(--rf-line-strong); }
body .trend-bar.zero b { color: var(--rf-line-strong); }

/* ==================================== 全站输入类控件尺寸统一 ========= */

/* 各模块原本各写各的：知识库输入框 38px/9px 圆角、话术页 40px/9px、
   复盘筛选 40px/9px，而设计层给的是 44px/14px。同一排、不同页放在一起
   就成了「有的框大有的框小」。这里统一到一套刻度。 */
body input:not([type="checkbox"]):not([type="radio"]),
body select {
  height: 44px;
  border-radius: var(--rf-r-md);
}
body textarea { border-radius: var(--rf-r-md); }
body .input-wrap,
body .search,
body .history-date,
body .history-date select,
body .knowledge-import-row input[type="url"],
body .knowledge-import-row button,
body .knowledge-form-actions button,
body .talk-settings label,
body .feishu-form input {
  border-radius: var(--rf-r-md);
}
body .knowledge-import-row button,
body .knowledge-form-actions button,
body .analytics-controls select,
body .analytics-controls .primary,
body .analytics-controls .outline,
body .transcript-actions select,
body .transcript-actions input,
body .transcript-actions .primary,
body .transcript-actions .outline { height: 44px; }

/* 搜索框内的输入由外框统一承载高度，自身不再占位 */
body .toolbar .search input { height: auto; border-radius: 0; }

/* 知识库表单里的下拉与文本域另有一处 9px 圆角，比通配规则更具体，这里点名覆盖 */
body .knowledge-form :is(input, select, textarea),
body .knowledge-list-bar select,
body .knowledge-form-actions button,
body .knowledge-import-row button { border-radius: var(--rf-r-md); }

/* ==================================== 品类：电视 / 洗衣机 =============== */

/* 复盘页的品类切换条。监控里同时挂着电视和洗衣机主播时，混在一起的
   高频榜会把两边的需求互相稀释，所以这里做成一眼能点的一排胶囊。 */
body .category-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -6px 0 20px;
}
body .category-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  height: 36px;
  padding: 0 15px;
  border: 1px solid var(--rf-line);
  border-radius: 999px;
  background: var(--rf-surface);
  color: var(--rf-ink);
  cursor: pointer;
  transition: background .2s var(--rf-ease), border-color .2s var(--rf-ease), box-shadow .2s var(--rf-ease), transform .2s var(--rf-ease);
}
body .category-chip b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
body .category-chip span { font-size: 11px; color: var(--rf-muted-2); font-variant-numeric: tabular-nums; }
body .category-chip:hover { border-color: var(--rf-line-strong); box-shadow: 0 2px 12px rgba(0, 0, 0, .06); transform: translateY(-1px); }
body .category-chip.active {
  background: var(--rf-accent);
  border-color: var(--rf-accent);
  box-shadow: 0 6px 18px rgba(0, 113, 227, .22);
}
body .category-chip.active :is(b, span) { color: #fff; }
body .category-note { font-size: 11.5px; color: var(--rf-muted-2); padding-left: 4px; }
body .category-setup-toggle {
  height: 36px;
  padding: 0 14px;
  margin-left: 2px;
  border: 1px dashed var(--rf-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--rf-muted);
  font-size: 12px;
  cursor: pointer;
  transition: color .2s var(--rf-ease), border-color .2s var(--rf-ease), background .2s var(--rf-ease);
}
body .category-setup-toggle:hover,
body .category-setup-toggle.open { color: var(--rf-accent); border-color: var(--rf-accent-line); background: var(--rf-accent-soft); }

/* 品类设置面板：默认收起，需要纠正识别结果时才展开，避免污染复盘首屏。 */
body .category-setup {
  display: grid;
  gap: 2px;
  margin: -8px 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-md);
  background: var(--rf-surface-2);
}
body .category-setup-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) auto minmax(0, 1.6fr) auto 116px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rf-line);
}
body .category-setup-row:last-child { border-bottom: none; }
body .category-setup-row strong { font-size: 13px; font-weight: 600; color: var(--rf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .category-setup-row > span { font-size: 11.5px; color: var(--rf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .category-setup-row > small { font-size: 11px; color: var(--rf-muted-2); text-align: right; font-variant-numeric: tabular-nums; }
body .category-setup-row select { height: 34px; border-radius: var(--rf-r-sm); font-size: 12px; }
body .room-cat.none { color: var(--rf-muted); background: var(--rf-bg-soft); }
@media (max-width: 1080px) {
  body .category-setup-row { grid-template-columns: minmax(0, 1fr) auto 116px; }
  body .category-setup-row > span,
  body .category-setup-row > small { display: none; }
}

/* 房间占比列表里的品类小标签 */
body .room-share > span { display: flex; align-items: center; gap: 6px; overflow: hidden; }
body .room-share > span > .room-share-name { flex: 1 1 auto; min-width: 0; }
body .room-cat {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--rf-accent);
  background: var(--rf-accent-soft);
}
body .room-cat.washer { color: var(--rf-violet); background: var(--rf-violet-soft); }


body .room-cat.fridge { color: #17795e; background: #e8f7f1; }
body .room-cat.air_conditioner { color: #8a5a13; background: #fff4dd; }