/* ---------- social listening ---------- */
/* section sidebar content (ctx.setSubnav): "New topic" + topic links */
.ls-subnav { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ls-subnav-action { padding: 0 2px; }
.ls-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 7px; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 650; }
.ls-group-head .faint { font-weight: 550; }
.subnav-link.ls-link .badge { flex: none; }
.ls-side-skel { padding: 4px 8px; }
.ls-err { display: inline-flex; flex: none; color: var(--danger-ink); }

/* page bar + detail */
.ls-bar-actions { display: contents; }
.page-bar.ls-bar .page-bar-title { max-width: min(420px, 100%); }
.ls-detail { min-width: 0; }
.ls-track .card-body { padding: 14px 16px; }

.row.ls-head-meta { gap: 4px 14px; }
.ls-kw-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.ls-kw-label { flex: none; width: 92px; padding-top: 4px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.ls-kw-row .chips { min-width: 0; }
.ls-chip-ex { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 60%, transparent); }

/* KPI sentiment value */
.ls-score { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ls-score-label { font-size: 13px; font-weight: 600; }
.ls-tone-positive { color: var(--success-ink); }
.ls-tone-neutral { color: var(--text-2); }
.ls-tone-negative { color: var(--danger-ink); }

/* stacked sentiment bar */
.ls-stack { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; }
.ls-stack > span { display: block; height: 100%; min-width: 4px; }
.ls-stack.is-empty { background: var(--surface-3); }
.legend.ls-sent-legend { gap: 8px 18px; }
.ls-sent-legend strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* average sentiment per day (diverging bars) */
.ls-strip { position: relative; height: 56px; margin: 0 12px 0 48px; cursor: crosshair; }
.ls-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--chart-axis); }
.ls-strip-axis { position: absolute; left: -48px; width: 40px; text-align: right; font-size: 11px; line-height: 1; color: var(--chart-ink); font-variant-numeric: tabular-nums; }
.ls-strip-axis.top { top: 0; }
.ls-strip-axis.mid { top: calc(50% - 5px); }
.ls-strip-axis.bot { bottom: 0; }
.ls-strip-cols { position: absolute; inset: 0; display: flex; gap: 1px; }
.ls-strip-col { position: relative; flex: 1 1 0; min-width: 0; border-radius: 2px; }
.ls-strip-col.is-hover { background: var(--hover); }
.ls-strip-bar { position: absolute; left: 12%; right: 12%; min-height: 2px; border-radius: 2px; }
.ls-strip-bar.up { bottom: 50%; }
.ls-strip-bar.down { top: 50%; }

/* top authors */
.ls-authors { list-style: none; margin: 0; padding: 0; }
.ls-authors li { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--border); min-width: 0; font-size: 13px; }
.ls-authors li:last-child { border-bottom: 0; }
.ls-rank { width: 20px; height: 20px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--surface-3); color: var(--text-2); }

/* source tag + sentiment chip */
.tag.ls-src { --c: var(--text-3); background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.ls-sent { --c: var(--text-3); display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; flex: none; background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: color-mix(in srgb, var(--c) 72%, var(--text)); }
.ls-sent::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.ls-sent-positive { --c: var(--success); }
.ls-sent-negative { --c: var(--danger); }

/* mentions feed */
.ls-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ls-search { flex: 1 1 220px; }
.select.ls-filter { width: auto; flex: 0 1 170px; }
.ls-mention { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--border); min-width: 0; }
.ls-feed > .ls-mention:last-child { border-bottom: 0; }
.ls-mention.is-unread { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.ls-dot { width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; flex: none; background: var(--accent); }
.ls-mention:not(.is-unread) .ls-dot { visibility: hidden; }
.ls-body { min-width: 0; }
.ls-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.ls-author { max-width: min(240px, 100%); }
.ls-title { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.ls-title a { color: var(--text); }
.ls-title a:hover { color: var(--accent-ink); }
.ls-mention:not(.is-unread) .ls-title { font-weight: 550; }
.ls-text { margin: 0; font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.ls-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ls-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -8px; }
.ls-actions:empty { display: none; }
.ls-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; border-top: 1px solid var(--border); }
.row.ls-pager-controls { gap: 8px; }
.select.ls-limit { width: auto; }

/* topic dialog */
.ls-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ls-legend { padding: 0; margin-bottom: 10px; font-size: 13.5px; font-weight: 650; color: var(--text); }
.ls-form .check-list { gap: 8px 12px; }

@media (max-width: 760px) {
  .page-bar.ls-bar > .page-bar-end { margin-left: 0; }
}
@media (max-width: 520px) {
  .ls-kw-row { flex-direction: column; gap: 4px; }
  .ls-kw-label { width: auto; padding-top: 0; }
  .select.ls-filter { flex: 1 1 140px; }
  .ls-filters, .ls-mention, .ls-pager { padding-left: 12px; padding-right: 12px; }
  .ls-strip { margin-left: 36px; margin-right: 4px; }
  .ls-strip-axis { left: -36px; width: 30px; }
  .ls-form .check-list { grid-template-columns: minmax(0, 1fr) !important; }
}
/* on phones the wrapped page bar would take a third of the screen if it stayed pinned */
@media (max-width: 560px) {
  .page-bar.ls-bar { position: static; }
}