/* brief.css — 每日直播情報看板 v2 */

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.brief-hero {
  padding: 32px 0 22px;
  text-align: center;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--swag) 6%, var(--bg)) 0%,
    var(--bg) 100%
  );
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  margin-bottom: 4px;
}

.brief-hero h1 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.brief-hero .brief-hero-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.brief-auto-badge {
  display: inline-block;
  background: var(--swag);
  color: var(--surface);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: .02em;
}

/* ── Source Count ─────────────────────────────────────────────────────────── */

.brief-source-count {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 16px;
}

/* ── Featured Section ─────────────────────────────────────────────────────── */

/* Featured Hero — 「今日精選」三張卡片視覺強化 */
.featured-section {
  position: relative;
  margin-bottom: 28px;
  padding: 18px 16px 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--swag) 8%, transparent), transparent 70%);
  border-radius: 14px;
}

.featured-section-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.005em;
  text-transform: none;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.featured-section-label::before {
  content: '⭐';
  font-size: 16px;
}

.featured-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat-color, var(--swag)) 6%, var(--surface)) 0%, var(--surface) 50%);
  border: 1px solid var(--line2);
  border-left: 3px solid var(--cat-color, var(--swag));
  border-radius: 12px;
  padding: 18px 18px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.featured-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.06);
}

.featured-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.featured-cat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--cat-color, var(--swag));
}

.featured-headline {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--text);
  margin: 0;
}

.featured-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.featured-block-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .03em;
}

.featured-summary {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
}

.featured-hook {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text);
}

.featured-questions { display: flex; flex-direction: column; gap: 6px; }

.featured-question {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mid);
  padding-left: 14px;
  position: relative;
}

.featured-question::before {
  content: '・';
  position: absolute;
  left: 0;
}

.featured-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--line2);
}

/* ── More Topics Label ────────────────────────────────────────────────────── */

.more-topics-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ── Category Tab Bar ─────────────────────────────────────────────────────── */

.cat-tab-bar {
  position: sticky;
  top: 57px;
  z-index: 50;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  background: rgba(249,248,246,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 0 11px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line2);
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: opacity .2s ease;
}

.cat-tab-bar::-webkit-scrollbar { display: none; }

.cat-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 16px;
  border: 1px solid var(--line2);
  border-radius: 24px;
  background: var(--surface);
  color: var(--mid);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  flex-shrink: 0;
  letter-spacing: .01em;
}

.cat-tab-btn:hover:not(.active) {
  background: var(--bg);
  border-color: var(--swag);
  color: var(--text);
}

.cat-tab-btn.active {
  background: var(--cat-color, var(--swag));
  color: var(--surface);
}

.cat-tab-icon { font-size: 16px; line-height: 1; }

.cat-tab-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  background: rgba(255,255,255,.28);
  color: inherit;
  line-height: 1.3;
}

.cat-tab-btn:not(.active) .cat-tab-count {
  background: rgba(0,0,0,.09);
  color: var(--muted);
}

/* right-fade hint when tabs overflow */
.cat-tab-bar::after {
  content: '';
  position: sticky;
  right: 0;
  flex-shrink: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, rgba(249,248,246,.94));
  pointer-events: none;
  align-self: stretch;
}

/* ── Topic List ───────────────────────────────────────────────────────────── */

.topic-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.topic-cat-empty {
  text-align: center;
  padding: 40px 0;
  color: var(--muted);
  font-size: 13px;
}

/* ── Topic Row (expand/collapse) ─────────────────────────────────────────── */

.topic-row {
  background: var(--surface);
  border: 1px solid var(--line2);
  border-left: 3px solid var(--cat-color, var(--swag));
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow .15s;
}

.topic-row:has(.topic-row-header:hover) {
  box-shadow: var(--shadow-2);
}

.topic-row-header {
  padding: 16px 16px;
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: background .12s;
}

.topic-row-header:hover { background: var(--bg); }

/* Meta row: tags + chevron */
.topic-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.topic-expand-arrow {
  margin-left: auto;
  font-size: 17px;
  color: var(--muted);
  transition: transform .2s ease;
  line-height: 1;
  flex-shrink: 0;
}

.topic-risk-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.topic-spoiler-inline {
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px;
  font-weight: 400;
}

/* Preview body: text + thumbnail */
.topic-preview-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.topic-preview-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.topic-row-headline {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.topic-hook-teaser {
  font-size: 13px;
  color: var(--mid);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  line-height: 1.5;
}

/* Thumbnails */
.topic-thumb-sm {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 7px;
  background: var(--line);
  display: block;
}

.topic-row:not(.open) .topic-thumb-sm { display: none; }

.topic-thumb-full {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--line);
}

/* ── Detail panel ─────────────────────────────────────────────────────────── */

.topic-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.topic-row.open .topic-detail {
  border-top: 1px solid var(--line);
}

.topic-detail-inner {
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Shared detail elements ───────────────────────────────────────────────── */

.topic-emotion {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cat-color, var(--swag));
  background: color-mix(in srgb, var(--cat-color, var(--swag)) 12%, transparent);
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.topic-source-badge {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line2);
  padding: 1px 6px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.topic-summary {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  background: color-mix(in srgb, var(--cat-color, var(--swag)) 6%, var(--surface));
  border-left: 3px solid var(--cat-color, var(--swag));
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 12px 14px;
}

.topic-summary .topic-label {
  display: block;
  margin-bottom: 3px;
}

.topic-hook-row {
  background: transparent;
  border: none;
  border-left: 3px solid var(--cat-color, var(--swag));
  border-radius: 0;
  padding: 8px 14px;
  font-size: 13.5px;
  line-height: 1.6;
}

.topic-hook-row .topic-label {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
}

.topic-hook-text {
  color: var(--text);
  font-weight: 600;
}

.topic-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  white-space: nowrap;
}

.topic-questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: color-mix(in srgb, var(--cat-color, var(--swag)) 7%, var(--surface));
  border-radius: var(--r-sm);
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--swag)) 22%, transparent);
}

.topic-questions-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--cat-color, var(--swag));
  letter-spacing: .04em;
  margin-bottom: 1px;
}

.topic-q {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  padding-left: 16px;
  position: relative;
}

.topic-q .topic-label {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
}

.topic-raw-note {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

.topic-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--line2);
  margin-top: 0;
}

.topic-vote-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topic-vote-prompt {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.topic-source-link {
  font-size: 12px;
  color: var(--swag);
  text-decoration: none;
  font-weight: 600;
}

.topic-source-link:hover { text-decoration: underline; }

/* ── Copy Button ──────────────────────────────────────────────────────────── */

.topic-copy-btn {
  flex-shrink: 0;
  padding: 3px 11px;
  border: 1.5px solid var(--swag);
  border-radius: 20px;
  background: var(--surface);
  color: var(--swag);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
  line-height: 1.5;
}

.topic-copy-btn:hover { background: var(--swag); color: var(--surface); }

.topic-copy-btn.copied {
  background: #16a34a;
  border-color: #16a34a;
  color: var(--surface);
}

/* ── Vote Bar ─────────────────────────────────────────────────────────────── */

.topic-vote-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1.5px solid var(--line2);
  border-radius: 20px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
  min-height: 36px;
  line-height: 1;
  flex-shrink: 0;
}

.vote-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: #adb5bd;
}

.vote-btn:active:not(:disabled) { transform: scale(.94); }

.vote-btn:disabled { opacity: .5; cursor: not-allowed; }
.vote-btn.loading { opacity: .65; cursor: wait; }

.vote-btn.voted-like {
  border-color: #22c55e;
  background: color-mix(in srgb, #16a34a 12%, var(--surface));
  color: #16a34a;
}

.vote-btn.voted-dislike {
  border-color: #ef4444;
  background: color-mix(in srgb, #dc2626 12%, var(--surface));
  color: #dc2626;
}

.vote-icon { font-size: 14px; line-height: 1; }
.vote-count { font-variant-numeric: tabular-nums; min-width: 10px; }

/* ── Podcast Player ───────────────────────────────────────────────────────── */

.podcast-player {
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.podcast-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.podcast-ep-badge {
  flex-shrink: 0;
  background: var(--swag);
  color: var(--surface);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: .03em;
}

.podcast-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.podcast-controls {
  display: flex;
  align-items: center;
  gap: 11px;
}

.podcast-play-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--swag);
  color: var(--surface);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  transition: background .15s;
}

.podcast-play-btn:hover { background: #23a899; }

.podcast-progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.podcast-progress {
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  accent-color: var(--swag);
}

.podcast-time { font-size: 11px; color: var(--muted); text-align: right; }

/* ── Skeleton ─────────────────────────────────────────────────────────────── */

.skeleton {
  background: linear-gradient(90deg, var(--line) 25%, #f3f2ef 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: skel 1.4s infinite linear;
  border-radius: 8px;
}

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

.topic-skeleton-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-topic-card {
  height: 130px;
  border-radius: 12px;
  border: 1px solid var(--line2);
}

/* ── Empty / Error ────────────────────────────────────────────────────────── */

.brief-empty {
  text-align: center;
  padding: 52px 20px 40px;
  color: var(--muted);
}

.brief-empty-icon {
  font-size: 38px;
  margin-bottom: 12px;
  display: block;
}

.brief-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.brief-empty-sub { font-size: 13px; line-height: 1.6; }

/* ── Search Bar ───────────────────────────────────────────────────────────── */

.brief-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
/* search.css 的 .swag-search 在 .brief-search-bar 內需占滿 flex 空間 */
.brief-search-bar > .swag-search { flex: 1; }

.brief-search-count {
  font-size: 12px;
  color: var(--mid);
  background: var(--bg);
  border: 1px solid var(--line2);
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
  font-weight: 600;
}

/* P10：sort-toggle-btn 樣式已移除（用戶只保留「最新」預設、不再切換） */

/* ── Error State ──────────────────────────────────────────────────────────── */

.brief-error-state {
  text-align: center;
  padding: 48px 0;
}

.brief-error-msg {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
}

.brief-retry-btn {
  padding: 9px 22px;
  border: 1.5px solid var(--swag);
  border-radius: 20px;
  background: var(--surface);
  color: var(--swag);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}

.brief-retry-btn:hover { background: var(--swag); color: var(--surface); }

/* ── Risk / Spoiler (inline text, no badges) ──────────────────────────────── */

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .topic-row-header { padding: 14px 14px; gap: 9px; }
  .topic-detail-inner { padding: 14px 14px; gap: 12px; }
  .topic-row-headline { font-size: 14.5px; }
  .topic-hook-teaser { font-size: 12.5px; }
  .topic-thumb-full { max-height: 160px; }
  .cat-tab-btn { padding: 7px 13px; font-size: 12.5px; }
  .vote-btn { padding: 6px 12px; font-size: 11.5px; min-height: 34px; }
  .ticker-wrap { padding: 8px 11px; }
  .ticker-item { font-size: 12.5px; }
  /* 手機導覽列：回主頁只留圖示 */
  #brief-home-text { display: none; }
  #brief-home-cta { padding: 0 10px; }
}

/* ════════════════════════════════════════════════════════════════
 * P2 UIUX 升級：emotion chip / vote 浮字 / sticky podcast bar
 * ════════════════════════════════════════════════════════════════ */

/* ── Emotion chip 上色：依 emotionClass() 決定背景＋字色 ─────── */
/* color-mix 讓 chip 在 light/dark 都自然：light surface = 白 → 純色 14% 混白 = 淺色塊；
   dark surface = 暖深棕 → 純色 14% 混深 = 微帶色的暗塊，不會「白塊突兀」 */
.topic-emotion.emotion-anger   { background: color-mix(in srgb, #b91c1c 14%, var(--surface)); color: #ef4444; }
.topic-emotion.emotion-funny   { background: color-mix(in srgb, #a16207 14%, var(--surface)); color: #d97706; }
.topic-emotion.emotion-warm    { background: color-mix(in srgb, #be185d 14%, var(--surface)); color: #ec4899; }
.topic-emotion.emotion-curious { background: color-mix(in srgb, #1d4ed8 14%, var(--surface)); color: #3b82f6; }
.topic-emotion.emotion-shock   { background: color-mix(in srgb, #6d28d9 14%, var(--surface)); color: #a855f7; }
.topic-emotion.emotion-flirt   { background: color-mix(in srgb, #c1185b 14%, var(--surface)); color: #ec4899; }

/* ── Vote 浮字：點 👍 / 👎 後 +1 / −1 fade up ────────────────── */
.vote-flyup {
  position: fixed;
  z-index: 200;
  font-size: 14px;
  font-weight: 800;
  pointer-events: none;
  transform: translate(-50%, 0);
  animation: vote-fly-up .8s cubic-bezier(.4,0,.2,1) forwards;
  text-shadow: 0 1px 2px rgba(255,255,255,.8);
}
.vote-flyup.up { color: #16a34a; }
.vote-flyup.down { color: #dc2626; }
@keyframes vote-fly-up {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(.7); }
  20%  { opacity: 1; transform: translate(-50%, -4px) scale(1.1); }
  60%  { opacity: 1; transform: translate(-50%, -22px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(.9); }
}

/* Vote ⭐ 煙火粒子：點 👍 後 3 顆星沿不同角度散開 */
.vote-spark {
  position: fixed;
  z-index: 200;
  font-size: 14px;
  pointer-events: none;
  --dx: 0px;
  --dy: -30px;
  transform: translate(-50%, 0) scale(.4);
  animation: vote-spark-fly .85s cubic-bezier(.34,1.2,.64,1) forwards;
}
@keyframes vote-spark-fly {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.4) rotate(0deg); }
  15%  { opacity: 1; transform: translate(calc(-50% + var(--dx) * .25), calc(var(--dy) * .25)) scale(1.1) rotate(40deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(.7) rotate(160deg); }
}
@media (prefers-reduced-motion: reduce) {
  .vote-flyup { animation-duration: 1.4s; }
  .vote-spark { animation: none; opacity: 0; }
}

/* ── Sticky bottom podcast bar ───────────────────────────────── */
.podcast-player {
  /* 重設先前 inline 樣式為 fixed bottom bar */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  margin: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) 16px;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: none;
  border-top: 1px solid var(--line2);
  border-radius: 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
.podcast-player .podcast-header { margin-bottom: 6px; }
.podcast-player .podcast-controls { gap: 12px; }

@media (min-width: 720px) {
  /* 桌機：header 跟 controls 同列、限制最大寬度 */
  .podcast-player {
    padding: 8px 24px calc(8px + env(safe-area-inset-bottom)) 24px;
  }
  .podcast-player .podcast-header { margin-bottom: 0; }
}

/* 有 podcast 時 body 補留高度，避免最後一個 topic 卡被擋 */
body.has-podcast { padding-bottom: 100px; }
@media (min-width: 720px) {
  body.has-podcast { padding-bottom: 88px; }
}

/* ════════════════════════════════════════════════════════════════
 * P4 V2 refine — 主播社群視覺精修
 *   1) 暖米白底（取代 shared.css 的 --bg #f9f8f6）
 *   2) brief-auto-badge 變 LIVE 脈動小紅點 + UPPERCASE
 *   3) 分類 tab .active 改純黑（更 premium、不搶戲）
 * ════════════════════════════════════════════════════════════════ */

/* 主播社群獨有色票調整（其他頁不受影響：brief.css 只在這頁 link） */
.brief-search-bar,
.brief-hero,
#brief-main {
  /* 把 --bg 局部 override，連帶所有 var(--bg) reference 都暖 */
}
body:has(#brief-main) {
  --bg: #FAF8F4;
  --line: #ECE8E0;
  --line2: #D8D2C6;
}

/* LIVE 脈動 badge — 把「每日更新」變紅點脈動樣式 */
.brief-auto-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  color: var(--text);
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px 3px 7px;
  border: 1px solid var(--line2);
  border-radius: 20px;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: middle;
}
.brief-auto-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #EF4444;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(239,68,68,.55);
  animation: brief-live-pulse 1.6s ease-out infinite;
}
@keyframes brief-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
@media (prefers-reduced-motion: reduce) {
  .brief-auto-badge::before { animation: none; }
}

/* 分類 tab active 改純黑 + 純白字 */
.cat-tab-btn.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}
.cat-tab-btn.active .cat-tab-count {
  background: rgba(255,255,255,.22);
  color: var(--surface);
  border: none;
}

/* 「複製話題」按鈕：把 hook + summary 一鍵複製給主播貼到 OBS / 直播間 */
.topic-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
  flex-shrink: 0;
  white-space: nowrap;
}
.topic-copy-btn::before {
  content: '⎘';
  font-size: 13px;
  line-height: 1;
}
.topic-copy-btn:hover {
  border-color: var(--text);
  background: var(--bg);
}
.topic-copy-btn:active { transform: scale(.95); }
.topic-copy-btn.copied {
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 12%, var(--surface));
  color: #16a34a;
}
.topic-copy-btn.copied::before { content: '✓'; }

/* P5#5 B — Hero 改 V2 風格：「今天聊什麼」LIVE eyebrow + frost glass cat label
   ─────────────────────────────────────────────────────────────────────────── */

/* 蓋過 P2 的 ⭐ uppercase 風格、改 V2 LIVE 脈動 eyebrow */
.featured-section-label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.featured-section-label::before {
  content: '' !important;       /* 蓋過 P2 ⭐ */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #EF4444;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(239,68,68,.55);
  animation: brief-live-pulse 1.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .featured-section-label::before { animation: none; }
}

/* 唯一一張 featured-card 加大、frost glass 風格 cat label */
.featured-section .featured-card {
  padding: 22px 22px 18px;
  border-radius: 16px;
  margin-bottom: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cat-color, var(--swag)) 8%, var(--surface)) 0%,
    var(--surface) 60%);
  box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.05);
  position: relative;
  overflow: hidden;
}
.featured-section .featured-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cat-color, var(--swag)) 10%, transparent) 0%,
    transparent 40%);
  pointer-events: none;
}

/* Frost glass cat-label：模擬磨砂玻璃感 */
.featured-section .featured-cat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cat-color, var(--swag)) 18%, rgba(255,255,255,.6));
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--swag)) 30%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--cat-color, var(--swag));
  letter-spacing: .015em;
  position: relative;       /* 浮在 ::before 漸層上方 */
  z-index: 1;
}

/* P5#4 — emoji-coloured category chip 在每個 collapsed topic-row meta-row 顯示分類 */
.topic-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--cat-color, var(--swag)) 12%, transparent);
  color: var(--cat-color, var(--swag));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .005em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: auto;             /* 把 risk + chevron 推到 row 右側 */
}

/* P10：layout switcher (Editorial/Dense/Magazine) 已移除 — 用戶要求只保留預設 */