/* "Nhật ký bình luận" — reuses the "Tín hiệu độc giả" board's own design and
   behavior wholesale (glass cards, bounded scroll window, tabs, quote block,
   compose bar — all from signal-pulse-v1.css / signal-feed-window.css,
   untouched). This file only holds this page's own chrome (kicker row,
   light-mode toggle) and the couple of layout fixes (quote citation
   wrapping, deep-link highlight) signal-pulse-v1.css doesn't need to know
   about. Scoped under #clScope so the homepage's own copy of this same
   board is never touched.

   signal-pulse-v1.css's own selectors are #tin-hieu-prefixed (id
   specificity), so plain class overrides can't beat it — every rule here is
   #clScope-prefixed too, for the same specificity, and this file loads after
   it, so these win. */

#clScope {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.cl-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding-top: 1.4rem; margin-bottom: 1.6rem;
}
.cl-kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  color: #26c2dc;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(1.4rem, 5.5vw, 2.1rem); letter-spacing: .05em;
  line-height: 1.1;
}
.cl-kicker i {
  flex-shrink: 0;
  width: 11px; height: 11px; border-radius: 50%; background: #26c2dc;
  box-shadow: 0 0 .6rem rgba(38, 194, 220, .55);
}
.cl-theme-toggle {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%;
  background: rgba(255, 255, 255, .04); color: rgba(244, 247, 248, .74);
  padding: 0; cursor: pointer;
}
.cl-theme-toggle:hover { border-color: rgba(255, 255, 255, .3); color: #e8eef8; }
.cl-theme-ico { width: 18px; height: 18px; }

/* <cite> (which story/chapter a quote is from) is a 3rd child of the
   grid-based .sig-quote block — without an explicit span it falls into the
   narrow icon column and wraps into a cramped 2-line stack. */
#clScope .sig-quote cite {
  grid-column: 1 / -1;
  text-align: left;
  margin-top: .15rem;
}

/* Highlight flash for a card arrived at via ?highlight=<id> (homepage
   comment marquee) or a real deep link. Outer glow dropped — same
   bleeds-into-the-gap problem as .sig-main's old outer shadow — the
   brighter border carries the "flash" on its own. */
#clScope .sig-card.is-highlight .sig-main { border-color: rgba(255, 255, 255, .32); box-shadow: inset 0 1px rgba(255, 255, 255, .1); }

/* ---- light mode, toggled per-visit for this page only ----
   Same warm cream/ink family as the site's own light footer (#f7f4ee /
   #221d16 / #6b655c, see story-page-signal-v1.css) rather than the
   cooler blue-gray this block used before — the two were visibly
   different whites once the header/footer started matching this page. */
#clScope[data-theme="light"] {
  background: #f7f4ee; color: #221d16; border-radius: 20px; padding-bottom: 1rem;
}
#clScope[data-theme="light"] .cl-kicker { color: #0f90a8; }
#clScope[data-theme="light"] .cl-kicker i { background: #0f90a8; box-shadow: 0 0 .6rem rgba(15, 144, 168, .4); }
#clScope[data-theme="light"] .cl-theme-toggle { border-color: rgba(33, 29, 22, .16); color: #564f45; }
#clScope[data-theme="light"] .sig-meta time,
#clScope[data-theme="light"] .sig-scroll-status { color: #6b655c; }

#clScope[data-theme="light"] .sig-tabs { background: rgba(33, 29, 22, .04); border-color: rgba(33, 29, 22, .1); }
#clScope[data-theme="light"] .sig-tab { color: #6b655c; border-right-color: rgba(33, 29, 22, .08); }
#clScope[data-theme="light"] .sig-tab.on { color: #f7f4ee; background: #221d16; }

#clScope[data-theme="light"] .sig-main {
  background: linear-gradient(145deg, #fffdfa, #f3efe6);
  border-color: rgba(33, 29, 22, .1);
  /* See the note on the dark-mode rule in signal-pulse-v1.css — the real
     square-shadow bug was .sig-card (now neutralized there), not this
     element, so a tight outer shadow here is safe and renders rounded. */
  box-shadow: 0 .3rem .8rem rgba(33, 29, 22, .18);
}
/* .sig-ava's own box-shadow (0 .4rem 1rem rgba(0,0,0,.3) — see
   signal-pulse-v1.css) is a near-black drop shadow tuned for a dark
   background; on the cream one it shows as a visible dark smudge below
   every avatar, stacking with the next card's top edge in the gap. Same
   fix as .sig-main: drop the outer shadow, keep just the border. */
#clScope[data-theme="light"] .sig-ava { border-color: rgba(33, 29, 22, .12); box-shadow: none; }
#clScope[data-theme="light"] .sig-meta b { color: #0f90a8; }
#clScope[data-theme="light"] .sig-text { color: #221d16; }

#clScope[data-theme="light"] .sig-quote {
  border-color: rgba(33, 29, 22, .08);
  border-left-color: rgba(33, 29, 22, .28);
  background: rgba(33, 29, 22, .025);
}
#clScope[data-theme="light"] .sig-quote > span { color: rgba(33, 29, 22, .35); }
#clScope[data-theme="light"] .sig-quote p { color: #40392f; }
#clScope[data-theme="light"] .sig-quote cite { color: rgba(33, 29, 22, .4); }
#clScope[data-theme="light"] .sig-chip,
#clScope[data-theme="light"] .sig-act,
#clScope[data-theme="light"] .sig-chip::before,
#clScope[data-theme="light"] .sig-act::before { color: #6b655c; }
#clScope[data-theme="light"] .sig-chip.on,
#clScope[data-theme="light"] .sig-chip.on::before { color: #221d16; }
#clScope[data-theme="light"] .sig-reply { background: rgba(33, 29, 22, .035); border-color: rgba(33, 29, 22, .08); }
#clScope[data-theme="light"] .sig-to,
#clScope[data-theme="light"] .sig-more-replies { color: #6b655c; }
#clScope[data-theme="light"] .sig-compose {
  background: linear-gradient(180deg, #fffdfa, #f2ede2);
  border-color: rgba(33, 29, 22, .1);
}
#clScope[data-theme="light"] .sig-fake { background: rgba(33, 29, 22, .04); border-color: rgba(33, 29, 22, .12); color: #6b655c; }
#clScope[data-theme="light"] .sig-send { background: #221d16; color: #f7f4ee; border-color: rgba(33, 29, 22, .2); box-shadow: none; }
#clScope[data-theme="light"] .sig-login a { color: #221d16; }
#clScope[data-theme="light"] .sig-empty { color: #6b655c; }
#clScope[data-theme="light"] .sig-card.is-highlight .sig-main { border-color: rgba(33, 29, 22, .3); box-shadow: none; }