/* ============================================================
   Reve Storytelling HQ — restyled to match Reve's product
   design language (reve.com): white chrome, pill buttons,
   ReveDisplay headings, mono micro-labels, hairline borders.
   ============================================================ */

@font-face {
  font-family: ReveUI;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/ReveUI.shifted-variable-DEpnxcwd.woff2) format("woff2");
}
@font-face {
  font-family: ReveDisplay;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ReveDisplay-regular-Ifmj0DxC.woff2) format("woff2");
}
@font-face {
  font-family: ReveDisplay;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ReveDisplay-medium-DzSoDmR9.woff2) format("woff2");
}
@font-face {
  font-family: ReveSansMono;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/ReveSansMono-variable-hzh9PIPz.woff2) format("woff2");
}

:root {
  color-scheme: light dark;

  --rv-rhythm: 8px;

  --rv-font-sans: ReveUI, -apple-system, "Segoe UI", sans-serif;
  --rv-font-display: ReveDisplay, Georgia, serif;
  --rv-font-mono: ReveSansMono, "SF Mono", monospace;

  --rv-font-size-x-small: .75rem;
  --rv-font-size-small: .875rem;
  --rv-font-size-medium: 1rem;
  --rv-font-size-large: 1.125rem;

  /* gray scale (lifted from the reve.com app bundle) */
  --rv-color-gray-50: light-dark(#fafafa, #1a1a1a);
  --rv-color-gray-100: light-dark(#f0f0f0, #2e2e2e);
  --rv-color-gray-200: light-dark(#e6e6e6, #383838);
  --rv-color-gray-300: light-dark(#d6d6d6, #474747);
  --rv-color-gray-400: light-dark(#a6a6a6, #595959);
  --rv-color-gray-500: light-dark(#757575, #707070);
  --rv-color-gray-600: light-dark(#575757, #949494);
  --rv-color-gray-800: light-dark(#292929, #d6d6d6);
  --rv-color-gray-900: light-dark(#1a1a1a, #ebebeb);

  --rv-color-neutral-0: light-dark(#fff, #000);

  --rv-color-alpha-800: light-dark(#0006, #fff6);
  --rv-color-alpha-900: light-dark(#0009, #fff9);
  --rv-color-alpha-1000: light-dark(#000, #fff);

  --rv-color-blue-50: light-dark(#f0f6ff, #151c32);
  --rv-color-blue-100: light-dark(#dcebfe, #1d2a58);
  --rv-color-blue-600: light-dark(#2463eb, #4c9dff);
  --rv-color-blue-800: light-dark(#1f40ad, #a8d1ff);

  --rv-color-red-500: light-dark(#ee4443, #f87070);
  --rv-color-green-500: light-dark(#22c55d, #4ade80);
  --rv-color-green-100: light-dark(#dcfce8, #14432c);
  --rv-color-yellow-500: light-dark(#eab305, #facc14);
  --rv-color-yellow-100: light-dark(#fef9c3, #3a2f10);

  /* Strong ink variants for text/icons on tinted or plain backgrounds —
     the single source for "success green", "danger red" and "warning amber"
     so every view reads the same. */
  --rv-color-green-strong: light-dark(#15803c, #4ade80);
  --rv-color-red-strong: light-dark(#b91c1c, #f87171);
  --rv-color-amber-strong: light-dark(#a16207, #fbbf24);

  --rv-color-amber-500: light-dark(#d97706, #fbbf24);

  /* Reply/post sentiment family (bars, dots, legends) — one palette.
     Negative is deliberately amber, not red: red is reserved for danger. */
  --rv-senti-positive: light-dark(#16a34a, #4ade80);
  --rv-senti-neutral: light-dark(#b8b8b8, #565656);
  --rv-senti-negative: var(--rv-color-amber-500);

  /* Reve product chrome: white surfaces, faint off-white canvas */
  --rv-color-canvas: light-dark(#fafafa, #0a0a0a);
  --rv-color-panel: light-dark(#fff, #141414);
  --rv-color-panel-border: light-dark(#ececec, #2a2a2a);
  --rv-color-hairline: light-dark(#f0f0f0, #242424);

  --rv-font-color-normal: var(--rv-color-alpha-1000);
  --rv-font-color-light: var(--rv-color-alpha-900);
  --rv-font-color-lighter: var(--rv-color-alpha-800);
  /* Aliases: a batch of rules references these short names — without them the
     browser silently dropped every border/color they set. */
  --rv-border-color: var(--rv-color-panel-border);
  --rv-font-color: var(--rv-font-color-normal);

  --rv-radius-s: 6px;
  --rv-radius-m: 10px;
  --rv-radius-l: 16px;
  --rv-radius-xl: 24px;
  --rv-radius-full: calc(1px * infinity);

  --rv-shadow-dialog: 0 8px 24px 0 light-dark(#0003, #0009), 0 1px 4px 0 light-dark(#0000001f, #00000052), 0 0 0 1px light-dark(#0000, var(--rv-color-panel-border));
  --rv-focus-ring: 2px solid var(--rv-color-blue-600);
  --rv-header-height: 64px;

  /* mono micro-label, as seen on reve.com overlays (CLARITY / ENERGY) */
  --rv-microlabel: 550 .6875rem/1 var(--rv-font-mono);
  --rv-microlabel-tracking: .09em;

  /* ==== HQ layout system (see DESIGN.md) ==================
     Every view: max-width container, 24px under the header,
     16px between stacked sections, 20px padding inside panels,
     56px panel headers. Use these — don't invent new values. */
  --hq-view-max: 1240px;
  --hq-pad-x: 20px;          /* horizontal padding inside panels/cards */
  --hq-stack-gap: 16px;      /* vertical gap between stacked sections  */
  --hq-grid-gap: 16px;       /* gap inside card/tile grids             */
  --hq-header-gap: 24px;     /* view header → first section            */
  --hq-panel-header-h: 56px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* hidden always wins, even over display:flex/grid component rules */
[hidden] { display: none !important; }

html, body { height: 100%; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--rv-font-sans);
  font-size: var(--rv-font-size-small);
  color: var(--rv-font-color-normal);
  background: var(--rv-color-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .panel-title, .modal-title { text-wrap: balance; }
p, .person-org, .template-preview, .social-post-text, .empty-state { text-wrap: pretty; }
.mono, .microlabel, .stat-value, .stat-delta, .chart-tick, .tt-val,
.table td, .range-tab, .queue-chip { font-variant-numeric: tabular-nums; }

button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
button:disabled { cursor: not-allowed; opacity: .52; }
button.is-busy:disabled { cursor: wait; }

:is(button, input, select, a, textarea, [role="button"], [tabindex="0"]):focus-visible {
  outline: var(--rv-focus-ring);
  outline-offset: 2px;
}

.mono { font-family: var(--rv-font-mono); font-size: var(--rv-font-size-x-small); }
.dim { color: var(--rv-font-color-lighter); }

.microlabel {
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
}

/* ============ App shell ============ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w, 232px) 1fr;
  grid-template-rows: var(--rv-header-height) 1fr;
  grid-template-areas: "header header" "sidebar main";
  height: 100vh;
}

/* ---- Header: white, quiet, like reve.com nav ---- */
.header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: var(--rv-color-panel);
  border-bottom: 1px solid var(--rv-color-hairline);
  position: relative;
  z-index: 60;
}

.app-progress {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-panel);
  box-shadow: var(--rv-shadow-dialog);
  font: var(--rv-microlabel);
  letter-spacing: .04em;
  color: var(--rv-font-color-light);
  opacity: 0;
  transform: translateY(-4px);
  transition-property: opacity, transform;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}
.app-progress:not([hidden]) { opacity: 1; transform: translateY(0); }
.app-progress { cursor: pointer; }
.task-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--rv-color-gray-300);
  border-top-color: var(--rv-color-alpha-1000);
  border-radius: var(--rv-radius-full);
  animation: task-spin .72s linear infinite;
}
@keyframes task-spin { to { rotate: 1turn; } }

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

.brand .logo-img {
  height: 22px;
  width: auto;
  display: block;
}
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .brand .logo-light { display: none; }
  .brand .logo-dark { display: block; }
}

.site-tag {
  font-family: var(--rv-font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  padding: 5px 9px;
  border-radius: 6px;
  line-height: 1;
}

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  display: grid;
  place-items: center;
  font-size: var(--rv-font-size-x-small);
  font-weight: 600;
  letter-spacing: .03em;
}

/* ---- Sidebar: white, plain text nav like reve.com links ---- */
.sidebar {
  grid-area: sidebar;
  position: relative;
  background: var(--rv-color-panel);
  border-right: 1px solid var(--rv-color-hairline);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  min-width: 0;
}
#sidebar-drag {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
}
#sidebar-drag:hover, #sidebar-drag.dragging { background: var(--rv-color-gray-200); }

.nav-section {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  padding: 18px 12px 8px;
}
.nav-section:first-child { padding-top: 4px; }
.nav-section::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  opacity: 0;
  transform: rotate(45deg);
  transition: transform .14s ease, opacity .12s ease;
}
.nav-section:hover { color: var(--rv-font-color-light); }
.nav-section:hover::after, .nav-section[aria-expanded="false"]::after { opacity: .8; }
.nav-section[aria-expanded="false"]::after { transform: rotate(-45deg); margin-top: 0; }
body.rail .sidebar .nav-section::after { display: none; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: var(--rv-radius-full);
  color: var(--rv-font-color-light);
  text-align: left;
  font-weight: 450;
  transition: background .12s ease, color .12s ease;
}
.nav-item[hidden] { display: none; }
.nav-item:hover { background: var(--rv-color-gray-50); color: var(--rv-font-color-normal); }
.nav-item.active {
  background: var(--rv-color-gray-100);
  color: var(--rv-font-color-normal);
  font-weight: 550;
}
.nav-item svg { flex: none; width: 16px; height: 16px; opacity: .7; }
.nav-item.active svg { opacity: 1; }

.nav-item .soon {
  margin-left: auto;
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--rv-radius-full);
  background: transparent;
  color: var(--rv-font-color-lighter);
  border: 1px solid var(--rv-color-panel-border);
}

/* Grows to pin Settings to the bottom, but never below a real gap — on short
   viewports the sidebar scrolls instead of letting the spacing collapse. */
.nav-spacer { flex: 1 0 14px; }
.sidebar > * { flex-shrink: 0; }

.sidebar-footer {
  padding: 16px 12px 4px;
  border-top: 1px solid var(--rv-color-hairline);
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-lighter);
  line-height: 1.7;
}

/* ---- Main ---- */
.main {
  grid-area: main;
  overflow-y: auto;
  min-width: 0;
  padding: 32px 40px 64px;
  position: relative;
}

.boot-loader {
  display: none;
  max-width: var(--hq-view-max);
  margin: 0 auto;
}
.is-booting .boot-loader { display: block; }
.is-booting .view { visibility: hidden; }
.boot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  margin-bottom: var(--hq-header-gap);
}
.boot-head .shimmer:first-child { width: 172px; height: 34px; border-radius: var(--rv-radius-m); }
.boot-head .shimmer:last-child { width: 118px; height: 32px; border-radius: var(--rv-radius-full); }
.boot-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hq-grid-gap); }
.boot-stats .boot-card { height: 122px; border-radius: var(--rv-radius-l); }
.boot-panel {
  height: 380px;
  margin-top: var(--hq-stack-gap);
  padding: 24px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  background: var(--rv-color-panel);
}
.boot-panel .shimmer:nth-child(1) { width: 32%; height: 18px; }
.boot-panel .shimmer:nth-child(2) { width: 100%; height: 230px; margin-top: 42px; border-radius: var(--rv-radius-m); }
.boot-panel .shimmer:nth-child(3) { width: 38%; margin-top: 24px; }

.view { display: none; width: 100%; min-width: 0; max-width: var(--hq-view-max); margin: 0 auto; }
.view.active { display: block; }

@keyframes view-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.view.active.view-enter > .view-header,
.view.active.view-enter > .stats-row,
.view.active.view-enter > .row-label,
.view.active.view-enter > .panel,
.view.active.view-enter > .panel-columns,
.view.active.view-enter > .group-tabs,
.view.active.view-enter > .channel-strip,
.view.active.view-enter > .settings-tabs,
.view.active.view-enter > .settings-tab {
  opacity: 0;
  animation: view-enter 220ms cubic-bezier(.2, 0, 0, 1) forwards;
}
.view.active.view-enter > :nth-child(2) { animation-delay: 35ms; }
.view.active.view-enter > :nth-child(3) { animation-delay: 70ms; }
.view.active.view-enter > :nth-child(n + 4) { animation-delay: 105ms; }

/* A compact interpretation layer makes each chart answer the obvious
   questions before someone has to hunt through tooltips. */
.chart-insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--rv-color-hairline);
  background: var(--rv-color-gray-50);
}
.chart-insight {
  min-width: 0;
  padding: 12px var(--hq-pad-x);
  border-right: 1px solid var(--rv-color-hairline);
}
.chart-insight:last-child { border-right: 0; }
.chart-insight-label {
  color: var(--rv-font-color-lighter);
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
}
.chart-insight-value {
  margin-top: 4px;
  color: var(--rv-font-color-normal);
  font-size: var(--rv-font-size-large);
  font-weight: 600;
  line-height: 1.15;
}
.chart-insight-sub {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: var(--rv-font-color-lighter);
  font-size: var(--rv-font-size-x-small);
  line-height: 1.35;
  /* Two lines, then truncate — one-line ellipsis chopped most sublabels. */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@keyframes chart-series-enter {
  from { opacity: .2; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.chart-series-enter { animation: chart-series-enter 220ms cubic-bezier(.2, 0, 0, 1); }

/* Global view stack: every top-level section of a view is spaced by
   --hq-stack-gap automatically — new views inherit this for free.
   Don't write per-section margins; only .row-label tightens its gap. */
.view > * + * { margin-top: var(--hq-stack-gap); }
.settings-tab > * + * { margin-top: var(--hq-stack-gap); }
.row-label + * { margin-top: 8px; }

/* Side-by-side panels: wrap in .panel-columns + a columns modifier.
   Children never take the stacked-panel margin (that's the grid's job).
   Panels stretch to equal height by default; add .cols-top when one
   column is much longer than the other (e.g. a feed beside a summary). */
.panel-columns {
  display: grid;
  gap: var(--hq-grid-gap);
}
.panel-columns.cols-top { align-items: start; }
.panel-columns > .panel,
.panel-columns > .panel + .panel { margin-top: 0; }
@media (max-width: 1100px) { .panel-columns { grid-template-columns: minmax(0, 1fr) !important; } }

.view-header {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  margin-bottom: var(--hq-header-gap);
}

.view-title {
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: 2.125rem;
  letter-spacing: -.01em;
  line-height: 1.1;
}

.view-subtitle {
  color: var(--rv-font-color-light);
  margin-top: 8px;
  font-size: var(--rv-font-size-small);
}

.view-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---- Buttons: Reve pills ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--rv-radius-full);
  border: 1px solid var(--rv-color-panel-border);
  background: var(--rv-color-panel);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition-property: background-color, border-color, transform, opacity;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
}
.btn:hover:not(:disabled) { background: var(--rv-color-gray-50); border-color: var(--rv-color-gray-300); }
.btn:active { transform: scale(.96); }

.btn-primary {
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  border-color: var(--rv-color-alpha-1000);
}
.btn-primary:hover:not(:disabled) { background: var(--rv-color-gray-800); border-color: var(--rv-color-gray-800); }

.btn-small { height: 36px; min-width: 36px; padding: 0 14px; font-size: var(--rv-font-size-x-small); }
.btn.is-busy { min-width: var(--busy-w, auto); }
.btn.is-busy .task-spinner { border-top-color: currentColor; }

/* ---- Stat tiles: flat, display numerals, mono labels ---- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hq-grid-gap);
  margin-bottom: var(--hq-stack-gap);
}

.stat-tile {
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  padding: 18px var(--hq-pad-x);
}

.stat-label {
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
}

.stat-value {
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: 2.5rem;
  margin-top: 10px;
  line-height: 1;
  letter-spacing: -.01em;
}

.stat-delta {
  margin-top: 10px;
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-light);
}
.stat-delta.up { color: var(--rv-color-green-strong); }

/* ---- Panels ---- */
.panel {
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  overflow: hidden;
}

.panel + .panel { margin-top: var(--hq-stack-gap); }

.panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--hq-panel-header-h);
  padding: 8px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
}

.panel-title { font-weight: 600; font-size: var(--rv-font-size-medium); }
.panel-header .spacer { margin-left: auto; }

/* ---- Tables: hairline rows, mono uppercase headers, no fill ---- */
.table-scroll {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  box-shadow: inset -18px 0 16px -20px light-dark(rgb(0 0 0 / .45), rgb(255 255 255 / .42));
  scrollbar-color: var(--rv-color-gray-400) transparent;
  scrollbar-width: thin;
}
.table { width: 100%; border-collapse: collapse; }
.table thead { position: sticky; top: 0; z-index: 3; background: var(--rv-color-panel); }
.table th {
  text-align: left;
  white-space: nowrap;
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  padding: 10px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
}
.table td {
  padding: 12px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
  vertical-align: middle;
  white-space: nowrap;
}
.table td.wrap {
  white-space: normal;
  min-width: 22ch;
  max-width: 34ch;
}
.table td.wrap { font-size: var(--rv-font-size-x-small); }
.table td.wrap .clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .1s ease; }
.table tbody tr:hover { background: var(--rv-color-gray-50); }

.cell-person { display: flex; align-items: center; gap: 10px; }
.cell-email { font-family: var(--rv-font-mono); font-size: var(--rv-font-size-x-small); color: var(--rv-font-color-light); }

.person-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--rv-radius-full);
  display: grid;
  place-items: center;
  font-size: .625rem;
  font-weight: 650;
  color: #fff;
  letter-spacing: .02em;
  overflow: hidden;
  background: var(--rv-color-gray-300);
}
.person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.person-avatar > span,
.person-avatar > img { grid-area: 1 / 1; }
.person-avatar > img { z-index: 1; }

.person-name { font-weight: 550; }
.person-org { font-size: var(--rv-font-size-x-small); color: var(--rv-font-color-light); margin-top: 1px; }

/* ---- Status pills ----
   One scale everywhere: 11px text, 3×10 padding, 6px dot. `.mini` is a
   layout variant only (right-aligned in rows) — never a different size. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .6875rem;
  font-weight: 550;
  line-height: 1.5;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: var(--rv-radius-full);
}
.status-pill::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: var(--rv-radius-full);
  background: currentColor;
}
.status-pill.gray   { background: var(--rv-color-gray-100); color: var(--rv-color-gray-600); }
.status-pill.blue   { background: var(--rv-color-blue-50); color: var(--rv-color-blue-600); }
.status-pill.yellow { background: var(--rv-color-yellow-100); color: var(--rv-color-amber-strong); }
.status-pill.green  { background: var(--rv-color-green-100); color: var(--rv-color-green-strong); }

.tag {
  font-size: .6875rem;
  line-height: 1.5;
  padding: 3px 10px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-gray-100);
  color: var(--rv-font-color-light);
  white-space: nowrap;
}

/* ---- Editable stage select (writes back to Attio) ---- */
.stage-select {
  appearance: none;
  border: none;
  border-radius: var(--rv-radius-full);
  font-size: var(--rv-font-size-x-small);
  font-weight: 550;
  font-family: var(--rv-font-sans);
  padding: 4px 22px 4px 12px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 9px) 55%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.stage-select.pill-gray   { background-color: var(--rv-color-gray-100); color: var(--rv-color-gray-600); }
.stage-select.pill-blue   { background-color: var(--rv-color-blue-50); color: var(--rv-color-blue-600); }
.stage-select.pill-yellow { background-color: var(--rv-color-yellow-100); color: var(--rv-color-amber-strong); }
.stage-select.pill-green  { background-color: var(--rv-color-green-100); color: var(--rv-color-green-strong); }

.nextstep-cell { cursor: text; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
.nextstep-cell:hover { color: var(--rv-font-color-normal); }
.nextstep-input {
  font-family: var(--rv-font-mono);
  font-size: var(--rv-font-size-x-small);
  border: none;
  border-bottom: 1px solid var(--rv-color-gray-400);
  background: transparent;
  padding: 2px 0;
  width: 20ch;
}
.nextstep-input:focus-visible { outline: var(--rv-focus-ring); outline-offset: 3px; border-bottom-color: var(--rv-color-blue-600); }

/* ---- Drafts queue sections ---- */
.queue-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 6px;
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  border-bottom: 1px solid var(--rv-color-hairline);
  background: var(--rv-color-gray-50);
  position: sticky;
  top: 0;
}
.queue-section .count { margin-left: auto; font-family: var(--rv-font-mono); }
.queue-more {
  padding: 8px 16px 12px;
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-lighter);
  border-bottom: 1px solid var(--rv-color-hairline);
}
.draft-row-main { min-width: 0; }
.draft-row-main .person-org {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.queue-dot {
  margin-left: auto;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--rv-radius-full);
}


/* ---- Inputs: soft gray fills, pill search, no hard borders ---- */
.search-input {
  height: 36px;
  width: 260px;
  padding: 0 16px;
  border-radius: var(--rv-radius-full);
  border: 1px solid transparent;
  background: var(--rv-color-gray-100);
}
.search-input::placeholder { color: var(--rv-font-color-lighter); }
.search-input:focus { outline: var(--rv-focus-ring); background: var(--rv-color-gray-50); }

.field-label {
  display: block;
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  margin-bottom: 8px;
}

.text-input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--rv-radius-m);
  border: 1px solid transparent;
  background: var(--rv-color-gray-100);
  font-family: var(--rv-font-mono);
  font-size: var(--rv-font-size-x-small);
}
.text-input:focus { outline: var(--rv-focus-ring); background: var(--rv-color-gray-50); }

/* ---- Group tabs: Reve pills, black when active ---- */
.group-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: var(--hq-stack-gap);
  flex-wrap: wrap;
}

.group-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--rv-radius-full);
  border: 1px solid var(--rv-color-panel-border);
  background: var(--rv-color-panel);
  font-weight: 500;
  transition: background .12s ease;
}
.group-tab:hover { background: var(--rv-color-gray-50); }
.group-tab.active {
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  border-color: var(--rv-color-alpha-1000);
}
.group-tab .count {
  font-family: var(--rv-font-mono);
  font-size: var(--rv-font-size-x-small);
  opacity: .6;
}

/* ---- Attio sync mark ---- */
.attio-mark { display: inline-flex; align-items: center; gap: 6px; }
.attio-dot {
  width: 6px; height: 6px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-green-500);
}

/* ---- Notice banner: quiet, hairline, mono ---- */
.notice {
  background: var(--rv-color-panel);
  color: var(--rv-font-color-light);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-full);
  padding: 10px 18px;
  font-size: var(--rv-font-size-x-small);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.notice::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-yellow-500);
}

/* ---- Drafts layout ---- */
.drafts-layout {
  grid-template-columns: clamp(320px, var(--drafts-queue-w, 420px), 640px) 6px 1fr;
}
.drag-handle {
  cursor: col-resize;
  border-radius: var(--rv-radius-full);
  align-self: stretch;
  position: relative;
}
.drag-handle::after {
  content: "";
  position: absolute;
  inset: 0 2px;
  border-radius: var(--rv-radius-full);
  background: transparent;
  transition: background .12s;
}
.drag-handle:hover::after, .drag-handle.dragging::after { background: var(--rv-color-gray-300); }

.drafts-queue {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--rv-header-height) - 180px);
}
#draft-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.draft-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid var(--rv-color-hairline);
  background: transparent;
  text-align: left;
  transition: background .1s ease;
}
.draft-row:last-child { border-bottom: none; }
.draft-row:hover { background: var(--rv-color-gray-50); }
.draft-row.active { background: var(--rv-color-gray-100); }

.draft-row-group { margin-left: auto; flex: none; }

.draft-editor-body { padding: var(--hq-pad-x); }

.draft-field { margin-bottom: 16px; }

.draft-subject {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--rv-radius-m);
  border: 1px solid transparent;
  background: var(--rv-color-gray-100);
  font-weight: 550;
}

.draft-body {
  width: 100%;
  min-height: 300px;
  padding: 14px;
  border-radius: var(--rv-radius-m);
  border: 1px solid transparent;
  background: var(--rv-color-gray-100);
  line-height: 1.7;
  resize: vertical;
}
.draft-subject:focus, .draft-body:focus { outline: var(--rv-focus-ring); background: var(--rv-color-gray-50); }
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] { border-color: var(--rv-color-red-500, #dc2626) !important; }

.draft-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.draft-actions .spacer { margin-left: auto; }
.draft-data-warning {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  margin: -2px 0 16px;
  padding: 12px 14px;
  border: 1px solid light-dark(#f0c36b, #745515);
  border-radius: var(--rv-radius-m);
  background: light-dark(#fff8e7, #2d230d);
}
.draft-data-warning span { color: var(--rv-font-color-light); font-size: var(--rv-font-size-x-small); }
.draft-data-warning .btn { grid-column: 2; grid-row: 1 / 3; }
.draft-actions .hint {
  margin-left: auto;
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-lighter);
}

.empty-state {
  padding: 56px 0;
  text-align: center;
  color: var(--rv-font-color-lighter);
}
.empty-state .btn { display: block; margin: 14px auto 0; }

/* ---- Templates ---- */
.template-list { display: flex; flex-direction: column; }
.template-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
}
.template-row > div { flex: 1 1 auto; min-width: 0; }
.template-row > .spacer { display: none; }
.template-row > .tag,
.template-row > .btn { flex: 0 0 auto; }
.template-row:last-child { border-bottom: none; }
.template-name { font-weight: 550; }
.template-preview {
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-lighter);
  margin-top: 2px;
  max-width: 64ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Integrations ---- */
.integration-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.integration-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.integration-card {
  min-width: 0;
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  padding: var(--hq-pad-x);
}

.integration-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 10px; }
.integration-head .spacer { margin-left: auto; }
.integration-head .status-pill { flex-shrink: 0; }

.integration-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--rv-radius-m);
  display: grid;
  place-items: center;
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: var(--rv-font-size-large);
  flex: none;
}

.integration-name { font-weight: 600; font-size: var(--rv-font-size-medium); }
.integration-desc { font-size: var(--rv-font-size-x-small); color: var(--rv-font-color-light); margin-top: 2px; }

.integration-body { margin-top: 16px; }

.integration-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.sync-log {
  margin-top: 14px;
  border-top: 1px solid var(--rv-color-hairline);
  padding-top: 10px;
  font-family: var(--rv-font-mono);
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-lighter);
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 96px;
  overflow-y: auto;
}

.panel-narrow { width: 100%; max-width: 560px; }
.settings-hint { font-size: var(--rv-font-size-x-small); line-height: 1.7; max-width: 76ch; }

/* ---- Settings: one disciplined column of panels ---- */
.settings-tab { max-width: 880px; }
#settings-account { max-width: 720px; }

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--hq-pad-x);
}
.settings-row + .settings-row { border-top: 1px solid var(--rv-color-hairline); }
.settings-row-title { font-weight: 550; }
.settings-row-sub {
  margin-top: 2px;
  color: var(--rv-font-color-lighter);
  font-size: var(--rv-font-size-x-small);
}

.profile-editor {
  display: flex;
  gap: 28px;
  padding: 20px var(--hq-pad-x) 22px;
}
.profile-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 148px;
  padding: 6px 20px 0 4px;
  border-right: 1px solid var(--rv-color-hairline);
  text-align: center;
}
.person-avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 20px;
}
.account-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#scrape-day-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.analysis-failed-flag { color: var(--rv-color-red-strong); font-size: 11px; }

.activity-log-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px var(--hq-pad-x);
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-light);
}
.activity-log { max-height: 70vh; overflow-y: auto; }
.activity-log-kind { flex: none; width: 76px; justify-content: center; }
.activity-log-outcome { flex: none; width: 86px; justify-content: center; }
.activity-log-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
}
.activity-log-row:last-child { border-bottom: 0; }
.activity-log-when { flex: none; width: 148px; font-size: 11px; padding-top: 2px; }
.activity-log-main { min-width: 0; flex: 1; }
.activity-log-message { font-size: var(--rv-font-size-x-small); line-height: 1.5; }
.activity-log-detail { margin-top: 2px; font-size: 10.5px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .profile-editor { flex-direction: column; gap: 18px; }
  .profile-identity { border-right: 0; padding: 0; flex-direction: row; text-align: left; }
}

/* ---- Content calendar ---- */
.btn-icon { width: 40px; padding: 0; font-size: 1.125rem; }

.shared-with {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}

.shared-stack { display: flex; }
.shared-stack .person-avatar {
  width: 26px;
  height: 26px;
  border: 2px solid var(--rv-color-canvas);
}
.shared-stack .person-avatar + .person-avatar { margin-left: -8px; }

.cal-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cal-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
}
.legend-dot, .cal-entry .dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: var(--rv-radius-full);
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--rv-color-hairline);
}
.cal-weekdays div {
  padding: 10px 12px;
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-mobile-agenda { display: none; }

.cal-day {
  min-height: 118px;
  padding: 8px;
  border-right: 1px solid var(--rv-color-hairline);
  border-bottom: 1px solid var(--rv-color-hairline);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day.last-row { border-bottom: none; }
.cal-day.other { background: var(--rv-color-gray-50); }
.cal-day.other .cal-date { opacity: .45; }

.cal-date {
  font-family: var(--rv-font-mono);
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-light);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--rv-radius-full);
}
.cal-day.today .cal-date {
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  font-weight: 650;
}

.cal-day-add {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-gray-100);
  color: var(--rv-font-color-light);
  font-size: .8125rem;
  line-height: 1;
  opacity: 0;
  transition: opacity .1s ease;
}
.cal-day:hover .cal-day-add { opacity: 1; }
.cal-day:focus-within .cal-day-add { opacity: 1; }
.cal-day-add:hover { background: var(--rv-color-gray-200); }
/* Touch: no hover exists, so the add control must be visible and ≥44px.
   (Phones use the agenda; this covers tablets showing the grid.) */
@media (pointer: coarse) {
  .cal-day-add {
    opacity: .55;
    width: 30px;
    height: 30px;
    /* transparent hit-area extension to 44×44 without growing the glyph */
    background-clip: padding-box;
    border: 7px solid transparent;
    box-sizing: content-box;
    top: 0;
    right: 0;
  }
}

.cal-overflow {
  width: 100%;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px dashed var(--rv-color-gray-300);
  border-radius: var(--rv-radius-s);
  background: var(--rv-color-gray-50);
  color: var(--rv-font-color-light);
  font: 600 10px/1.2 var(--rv-font-mono);
  text-align: left;
  cursor: pointer;
  transition-property: background-color, border-color, transform;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
}
.cal-overflow:hover { background: var(--rv-color-gray-100); border-color: var(--rv-color-gray-400); }
.cal-overflow:active { transform: scale(.96); }

.cal-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 7px;
  border: none;
  border-radius: var(--rv-radius-s);
  background: var(--rv-color-gray-100);
  font-size: .6875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .1s ease;
  min-width: 0;
}
.cal-entry:hover { background: var(--rv-color-gray-200); }
.cal-entry.done { opacity: .55; }
.cal-entry .entry-title {
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cal-entry .who {
  margin-left: auto;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: var(--rv-radius-full);
  display: grid;
  place-items: center;
  font-size: .5rem;
  font-weight: 700;
  color: #fff;
}
.cal-entry .clip {
  flex: none;
  font-size: .625rem;
  color: var(--rv-font-color-lighter);
}

/* ---- Modal: Reve dialog ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: light-dark(#00000073, #000000a6);
  display: grid;
  place-items: center;
  z-index: 100;
}
.modal-overlay[hidden] { display: none; }

.modal {
  width: min(560px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  background: var(--rv-color-panel);
  border-radius: var(--rv-radius-xl);
  box-shadow: var(--rv-shadow-dialog);
}

.modal-header {
  display: flex;
  align-items: center;
  padding: 20px 24px 0;
}
.modal-title {
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: 1.375rem;
}
.modal-close {
  margin-left: auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--rv-radius-full);
  background: transparent;
  color: var(--rv-font-color-light);
  font-size: .875rem;
}
.modal-close:hover { background: var(--rv-color-gray-100); }

.modal-body { padding: 18px 24px 4px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }

.modal-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 8px;
  padding: 12px 24px 24px;
}
.modal-footer .spacer { margin-left: auto; }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.entry-input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--rv-radius-m);
  border: 1px solid transparent;
  background: var(--rv-color-gray-100);
  appearance: none;
}
select.entry-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--rv-color-gray-500) 50%),
                    linear-gradient(135deg, var(--rv-color-gray-500) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.entry-notes { min-height: 84px; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.entry-input:focus { outline: var(--rv-focus-ring); background: var(--rv-color-gray-50); }

.btn-danger { color: var(--rv-color-red-500); border-color: light-dark(#fbd5d5, #5c1f1f); }
.btn-danger:hover { background: light-dark(#fef2f2, #2a1212); border-color: var(--rv-color-red-500); }

.file-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-m);
  font-size: var(--rv-font-size-x-small);
}
.file-row .file-name {
  font-family: var(--rv-font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row .file-size { margin-left: auto; flex: none; color: var(--rv-font-color-lighter); font-family: var(--rv-font-mono); }
.file-remove {
  flex: none;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--rv-radius-full);
  background: transparent;
  color: var(--rv-font-color-lighter);
  font-size: .6875rem;
}
.file-remove:hover { background: var(--rv-color-gray-100); color: var(--rv-color-red-500); }

/* ---- Toast: black pill, like Reve's primary ---- */
.toast {
  position: fixed;
  z-index: 120;
  bottom: 24px;
  max-width: min(480px, calc(100vw - 32px));
  overflow-wrap: anywhere;
  text-align: center;
  left: 50%;
  translate: -50% 0;
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  padding: 10px 20px;
  border-radius: var(--rv-radius-full);
  font-size: var(--rv-font-size-small);
  font-weight: 500;
  box-shadow: var(--rv-shadow-dialog);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, translate .2s ease;
}
.toast.show { opacity: 1; translate: -50% -8px; pointer-events: auto; }
.toast .toast-action {
  margin-left: 12px;
  padding: 2px 10px;
  border: 1px solid color-mix(in srgb, var(--rv-color-neutral-0) 40%, transparent);
  border-radius: var(--rv-radius-full);
  background: none;
  color: inherit;
  font: 550 var(--rv-font-size-x-small)/1.6 var(--rv-font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.toast .toast-action:hover { background: color-mix(in srgb, var(--rv-color-neutral-0) 16%, transparent); }

@media (max-width: 1100px) {
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drafts-layout .drag-handle { display: none; }
}

/* ---- Queue sort + mini pills ---- */
.sort-select {
  appearance: none;
  height: 36px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-panel);
  font-size: var(--rv-font-size-x-small);
  font-weight: 500;
  padding: 5px 24px 5px 12px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--rv-color-gray-500) 50%),
                    linear-gradient(135deg, var(--rv-color-gray-500) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 10px) 55%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
/* ---- ⌘K assistant ---- */
.ask-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 6px;
  padding: 8px 12px;
  border: 1px solid var(--rv-color-panel-border);
  background: var(--rv-color-gray-50);
  border-radius: var(--rv-radius-full);
  color: var(--rv-font-color-lighter);
  font-size: var(--rv-font-size-x-small);
  text-align: left;
}
.ask-trigger:hover { border-color: var(--rv-color-gray-300); color: var(--rv-font-color-light); }
.ask-trigger svg { width: 13px; height: 13px; flex: none; }
.ask-trigger .kbd {
  margin-left: auto;
  font-size: 10px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: 5px;
  padding: 2px 5px;
  background: var(--rv-color-panel);
}

.ask-overlay { place-items: start center; padding-top: 14vh; }
.ask-palette {
  width: min(640px, calc(100vw - 48px));
  background: var(--rv-color-panel);
  border-radius: var(--rv-radius-xl);
  box-shadow: var(--rv-shadow-dialog);
  overflow: hidden;
}
.ask-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  height: 54px;
  border-bottom: 1px solid var(--rv-color-hairline);
}
.ask-input-row .model-pick { flex: 0 1 auto; min-width: 0; max-width: 40%; }
.ask-input-row svg { width: 15px; height: 15px; color: var(--rv-color-gray-500); flex: none; }
.ask-input-row:focus-within { box-shadow: inset 0 0 0 2px var(--rv-color-blue-600); }
#ask-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--rv-font-size-medium);
}
.ask-results { max-height: 46vh; overflow-y: auto; padding: 6px; }
.ask-hint { padding: 18px 14px; }
.ask-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--rv-radius-m);
  text-align: left;
}
.ask-row:hover, .ask-row.sel { background: var(--rv-color-gray-100); }
.ask-row .tag { flex: none; min-width: 64px; text-align: center; }
.ask-row-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ask-row .mono.dim { margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-row .ask-row-label { flex: 0 1 auto; min-width: 0; }
.ask-row.ask-ask { border-top: 1px solid var(--rv-color-hairline); border-radius: 0 0 var(--rv-radius-m) var(--rv-radius-m); }
.ask-answer {
  padding: 16px 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}
.ask-answer.streaming::after {
  content: "▍";
  color: var(--rv-color-gray-500);
  animation: caret-blink 1s steps(1) infinite;
}
.ask-answer.streaming:empty::before {
  content: "Thinking";
  color: var(--rv-font-color-lighter);
  font-family: var(--rv-font-mono);
  font-size: var(--rv-font-size-x-small);
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* Chat mode: input drops to the bottom, thread scrolls above it. */
.ask-palette { display: flex; flex-direction: column; }
.ask-palette.chat .ask-input-row {
  order: 1;
  border-bottom: none;
  border-top: 1px solid var(--rv-color-hairline);
}
.ask-palette.chat .ask-results {
  order: 0;
  max-height: 56vh;
  min-height: 180px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.chat-msg {
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: msg-in .18s ease-out;
}
/* AI messages hold structured children (thinking, rendered markdown, meta) —
   pre-wrap only applies to the streaming text itself. */
.chat-msg.ai { white-space: normal; }
.chat-msg.ai.streaming .chat-answer { white-space: pre-wrap; }
.chat-answer p { margin: 0 0 8px; }
.chat-answer p:last-child { margin-bottom: 0; }
.chat-answer ul, .chat-answer ol { margin: 0 0 8px; padding-left: 18px; }
.chat-answer li { margin: 2px 0; }
.chat-answer h4 { margin: 10px 0 4px; font-size: 12.5px; font-weight: 650; }
.chat-answer code {
  font-family: var(--rv-font-mono);
  font-size: .85em;
  background: var(--rv-color-gray-100);
  border-radius: 4px;
  padding: 1px 4px;
}
.chat-answer a { color: inherit; text-decoration: underline; }
.chat-answer h3 { margin: 12px 0 5px; font-size: 13px; font-weight: 700; }
.chat-answer del { opacity: .6; }
.chat-answer blockquote {
  margin: 8px 0;
  padding: 6px 10px;
  border-left: 2px solid var(--rv-border-color);
  color: var(--rv-font-color-light);
  background: var(--rv-color-gray-50);
  border-radius: 0 8px 8px 0;
}
.chat-answer .chat-code {
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--rv-color-gray-100);
  border-radius: 8px;
  font-family: var(--rv-font-mono);
  font-size: 11px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}
.chat-answer .chat-code code { background: none; padding: 0; font-size: inherit; }
.chat-hr { border: 0; border-top: 1px solid var(--rv-color-hairline); margin: 10px 0; }
.chat-table-wrap { margin: 8px 0; overflow-x: auto; }
.chat-table {
  border-collapse: collapse;
  /* natural column widths; the wrapper scrolls sideways instead of the
     narrow panel crushing every cell into vertical word-wrap */
  width: max-content;
  min-width: 100%;
  max-width: none;
  font-size: 11.5px;
}
.chat-table td { max-width: 220px; }
.chat-table th, .chat-table td {
  padding: 4px 8px;
  border: 1px solid var(--rv-color-hairline);
  text-align: left;
  vertical-align: top;
}
.chat-table th {
  font-weight: 650;
  background: var(--rv-color-gray-50);
  white-space: nowrap;
}
.chat-table td { font-variant-numeric: tabular-nums; }
/* Inline data references — click to open the cited post/contact/view. */
.chat-ref {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px dashed var(--rv-font-color-lighter);
  transition: border-color .12s, background .12s;
}
.chat-ref:hover {
  background: var(--rv-color-gray-100);
  border-bottom-color: var(--rv-font-color);
}
.chat-ref-arrow {
  font-size: .78em;
  margin-left: 2px;
  color: var(--rv-font-color-lighter);
}
.chat-ref:hover .chat-ref-arrow { color: var(--rv-font-color); }
button.chat-source-chip.chat-ref {
  border-bottom: 0;
  cursor: pointer;
}
button.chat-source-chip.chat-ref:hover { background: var(--rv-color-gray-200); }

.chat-thinking {
  margin-bottom: 8px;
  border: 1px solid var(--rv-color-hairline);
  border-radius: 10px;
  background: var(--rv-color-gray-50);
  font-size: 11px;
}
.chat-thinking summary {
  padding: 6px 10px;
  color: var(--rv-font-color-light);
  font-weight: 550;
  cursor: pointer;
}
.chat-thinking-body {
  max-height: 180px;
  padding: 0 10px 8px;
  overflow-y: auto;
  color: var(--rv-font-color-lighter);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.chat-msg-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 7px;
}
.chat-model-tag {
  color: var(--rv-font-color-lighter);
  font-size: 9.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.chat-sources {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--rv-font-color-lighter);
  font-size: 9.5px;
}
.chat-source-chip {
  padding: 1px 7px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-gray-100);
  color: var(--rv-font-color-light);
}

.chat-chart {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--rv-color-hairline);
  border-radius: 10px;
  background: var(--rv-color-gray-50);
}
.chat-chart-title { margin-bottom: 8px; }
.chat-chart-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
  font-size: 11px;
}
.chat-chart-label {
  flex: none;
  width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rv-font-color-light);
}
.chat-chart-track {
  flex: 1;
  height: 8px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-gray-100);
  overflow: hidden;
}
.chat-chart-bar {
  display: block;
  height: 100%;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-alpha-1000);
}
.chat-chart-value { flex: none; min-width: 40px; text-align: right; font-size: 10.5px; }
@keyframes msg-in {
  from { opacity: 0; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}
.chat-action-note { animation: msg-in .18s ease-out; }
.chat-msg.user {
  align-self: flex-end;
  max-width: 85%;
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  border-radius: 12px;
  border-bottom-right-radius: 4px;
  padding: 8px 13px;
}
.chat-msg.ai {
  align-self: flex-start;
  max-width: 100%;
  padding: 0 2px;
}
.chat-msg.ai.streaming .chat-answer:not(:empty):not(:has(.chat-dots))::after {
  content: "▍";
  color: var(--rv-color-gray-500);
  animation: caret-blink 1s steps(1) infinite;
}
.chat-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.chat-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rv-color-gray-400);
  animation: dot-bounce 1.2s ease-in-out infinite;
}
.chat-dots i:nth-child(2) { animation-delay: .15s; }
.chat-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot-bounce { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.claude-model-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.claude-model-row .sort-select { min-width: 0; max-width: 100%; }


/* Forced theme (Settings › Appearance). Auto = no attribute. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] .logo-dark { display: none !important; }
html[data-theme="light"] .logo-light { display: block !important; }
html[data-theme="dark"] .logo-light { display: none !important; }
html[data-theme="dark"] .logo-dark { display: block !important; }


/* ---- Login ---- */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--rv-color-canvas);
  display: grid;
  place-items: center;
}
.login-card {
  width: min(360px, calc(100vw - 32px));
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-xl);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-brand {
  justify-content: center;
  margin-bottom: 10px;
}
.login-brand .logo-img { height: 24px; }
.login-google { justify-content: center; width: 100%; gap: 10px; }
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
}
.login-divider::before, .login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rv-color-hairline);
}
.login-error { color: var(--rv-color-red-500); font-size: var(--rv-font-size-x-small); }
.login-submit { justify-content: center; width: 100%; }

/* ---- Side chat ---- */
.side-chat-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  display: grid;
  place-items: center;
  box-shadow: var(--rv-shadow-dialog);
  transition: transform .12s ease;
}
.side-chat-fab:hover { transform: scale(1.06); }
.side-chat-fab svg { width: 20px; height: 20px; }

.app { transition: margin-right .34s cubic-bezier(.32, .72, 0, 1); }
body.chat-open .app { margin-right: min(390px, 100vw); }
body.chat-open .side-chat-fab { opacity: 0; transform: scale(.5); pointer-events: none; }
.side-chat-fab { transition: opacity .22s ease, transform .34s cubic-bezier(.32, .72, 0, 1); }

/* ---- Live scrape overlay: corner card stacked above the Reve AI fab ---- */
.scrape-overlay {
  position: fixed;
  right: 22px;
  bottom: 82px; /* clears the 48px chat fab at bottom: 22px */
  z-index: 41;
  width: min(280px, calc(100vw - 44px));
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  background: var(--rv-color-panel);
  box-shadow: var(--rv-shadow-dialog);
  overflow: hidden;
}
body.chat-open .scrape-overlay { right: calc(min(390px, 100vw) + 22px); }
.scrape-overlay-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rv-color-hairline);
}
.scrape-overlay-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--rv-font-size-x-small);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scrape-overlay-head .mono.dim { font-size: 11px; white-space: nowrap; }
.scrape-overlay-close {
  border: 0;
  padding: 2px 4px;
  background: none;
  color: var(--rv-font-color-lighter);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.scrape-overlay-close:hover { color: var(--rv-font-color); }
.scrape-overlay-sources {
  max-height: 220px;
  padding: 6px 12px 8px;
  overflow-y: auto;
}
.scrape-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: var(--rv-font-size-x-small);
}
.scrape-source-row.pending { color: var(--rv-font-color-lighter); }
.scrape-source-row.failed .scrape-source-icon { color: var(--rv-color-red-strong); }
.scrape-source-row.succeeded .scrape-source-icon { color: var(--rv-color-green-strong); }
.scrape-source-icon {
  display: inline-grid;
  place-items: center;
  width: 14px;
  flex-shrink: 0;
}
.scrape-source-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrape-source-detail { font-size: 11px; color: var(--rv-font-color-lighter); white-space: nowrap; }
.scrape-overlay-stage {
  padding: 7px 12px;
  border-top: 1px solid var(--rv-color-hairline);
  font-size: 11px;
}
.scrape-overlay.done .scrape-overlay-title { color: var(--rv-color-green-strong); }

/* Minimized state: a small pill in the same corner that restores the card. */
.scrape-overlay-mini {
  position: fixed;
  right: 22px;
  bottom: 82px;
  z-index: 41;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-panel);
  box-shadow: var(--rv-shadow-dialog);
  color: var(--rv-font-color);
  font-size: var(--rv-font-size-x-small);
  font-weight: 550;
  cursor: pointer;
}
.scrape-overlay-mini:hover { background: var(--rv-color-gray-50); }
body.chat-open .scrape-overlay-mini { right: calc(min(390px, 100vw) + 22px); }
.scrape-overlay-mini.done { color: var(--rv-color-green-strong); }
.scrape-overlay-mini.done .task-spinner { display: none; }
.scrape-overlay-mini.done::before {
  content: "✓";
  font-weight: 700;
}

/* Finished state: the card lists what the scrape actually found. */
.scrape-overlay-new {
  max-height: 260px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--rv-color-hairline);
  overflow-y: auto;
}
.scrape-new-title { margin-bottom: 6px; }
.scrape-new-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 6px 6px;
  border: 0;
  border-radius: var(--rv-radius-m);
  background: none;
  text-align: left;
  cursor: pointer;
}
.scrape-new-row:hover { background: var(--rv-color-gray-50); }
.scrape-new-main { min-width: 0; }
.scrape-new-main .person-name { display: block; font-size: var(--rv-font-size-x-small); }
.scrape-new-text {
  display: block;
  color: var(--rv-font-color-light);
  font-size: 11px;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.scrape-new-empty { padding: 4px 6px; font-size: 11px; }

/* Re-analysis mode: one progress bar instead of source rows. */
.reanalysis-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 4px;
}
.reanalysis-progress .chat-chart-track { flex: 1; height: 7px; }
.reanalysis-progress .chat-chart-bar { position: relative; overflow: hidden; }
.reanalysis-progress .chat-chart-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent,
    light-dark(rgb(255 255 255 / .45), rgb(255 255 255 / .25)), transparent);
  animation: bar-sweep 1.3s linear infinite;
}
@keyframes bar-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.reanalysis-count { flex: none; font-size: 10.5px; }
.reanalysis-note { padding-bottom: 4px; font-size: 10px; line-height: 1.5; }

/* ---- Reve AI generation states: pulsing spark + shimmer text skeleton ---- */
.ai-loading {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 2px 0 4px;
}
.ai-loading-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--rv-font-color-light);
  font-size: var(--rv-font-size-x-small);
  font-weight: 550;
}
.ai-spark {
  display: inline-block;
  color: light-dark(#c2570b, #fb923c);
  animation: ai-spark 1.5s ease-in-out infinite;
}
@keyframes ai-spark {
  0%, 100% { transform: scale(.75) rotate(0deg); opacity: .45; }
  50% { transform: scale(1.2) rotate(45deg); opacity: 1; }
}
.ai-line { height: 10px; max-width: 66ch; }

/* Any busy AI button breathes instead of just freezing with a spinner. */
button.is-busy { animation: busy-pulse 1.8s ease-in-out infinite; }
@keyframes busy-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .58; }
}

.side-chat {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  width: min(390px, 100vw);
  background: var(--rv-color-panel);
  border-left: 1px solid var(--rv-color-panel-border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .34s;
}
.side-chat.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .34s cubic-bezier(.32, .72, 0, 1);
}
.side-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rv-color-hairline);
}
.side-chat-head .spacer { margin-left: auto; }
.side-chat-title { font-weight: 600; flex: none; }
.side-chat-head .model-pick { flex: 0 1 auto; min-width: 0; }
.side-chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}
.side-chat-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-top: 1px solid var(--rv-color-hairline);
  padding: 10px 12px 6px;
}
.side-chat-input textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-m);
  background: var(--rv-color-gray-50);
  padding: 9px 14px;
  outline: none;
  line-height: 1.4;
  max-height: 120px;
}
.side-chat-input textarea:focus-visible { border-color: var(--rv-color-gray-400); outline: var(--rv-focus-ring); outline-offset: 2px; }
.side-chat-hint {
  padding: 0 14px 10px;
  font-size: 10px;
}
.chat-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 2px 8px;
}
.chat-retry { margin-left: 8px; }
.model-sub { font-size: 10px; white-space: nowrap; }
/* The mode select already names the mode — the auto-generated model-id sub
   is only informative in Settings, everywhere else it's clutter. */
.ask-input-row .model-sub,
.side-chat-head .model-sub,
.draft-editor-controls .model-sub { display: none; }
#social-digest-range { white-space: nowrap; }
.chat-status {
  display: block;
  margin-top: 4px;
  font-size: 10px;
}
.chat-action-note { font-size: var(--rv-font-size-x-small); color: var(--rv-font-color-lighter); align-self: flex-start; padding: 0 4px; }

/* Live sync status: pulsing dot while fresh, blink while syncing. */
.sync-status { display: inline-flex; align-items: center; gap: 7px; }
.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rv-color-green-500);
  position: relative;
  flex: none;
}
.sync-status.fresh .sync-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: sync-ping 2.4s ease-out infinite;
}
@keyframes sync-ping {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(2.7); opacity: 0; }
}
.sync-status.stale .sync-dot { background: var(--rv-color-gray-400); }
.sync-status.syncing .sync-dot {
  background: var(--rv-color-blue-600);
  animation: sync-blink .8s ease-in-out infinite alternate;
}
@keyframes sync-blink { from { opacity: .3; } to { opacity: 1; } }

/* Active (non-default) filter: solid, so it's obvious a filter is applied. */
.sort-select.filter-on {
  background-color: var(--rv-color-alpha-1000);
  border-color: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  background-image: linear-gradient(45deg, transparent 50%, var(--rv-color-neutral-0) 50%),
                    linear-gradient(135deg, var(--rv-color-neutral-0) 50%, transparent 50%);
}
.sort-select:hover:not(.filter-on) { background-color: var(--rv-color-gray-50); }

.status-pill.mini {
  margin-left: auto;
  flex: none;
}

/* ---- Community member grid ----
   Hairline separators come from each card's own right/bottom shadow; the
   1px negative margins push the outer lines under the panel's clip. This
   stays correct for any card count — no filler cells, no ghost columns. */
.community-panel + .community-panel { margin-top: var(--hq-stack-gap); }
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 0 -1px -1px 0;
}
.member-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--hq-pad-x);
  background: var(--rv-color-panel);
  box-shadow: 1px 0 var(--rv-color-hairline), 0 1px var(--rv-color-hairline);
  min-width: 0;
}
.member-card .person-avatar { width: 34px; height: 34px; }
.member-main { min-width: 0; }
.member-main .person-name,
.member-main .person-org { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
}

/* ==== Sortable headers, shimmer loader, profile drawer ==== */

th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--rv-font-color-normal); }
.sort-arrow { margin-left: 4px; }

@keyframes shimmer {
  from { background-position: -200px 0; }
  to   { background-position: calc(200px + 100%) 0; }
}
.shimmer {
  display: block;
  height: 12px;
  border-radius: 6px;
  background-color: light-dark(#ececec, #2a2a2a);
  background-image: linear-gradient(90deg,
    light-dark(#ececec, #2a2a2a) 0%,
    light-dark(#f8f8f8, #3a3a3a) 50%,
    light-dark(#ececec, #2a2a2a) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.2s ease-in-out infinite;
}
.skeleton-row { pointer-events: none; }
.skeleton-row td { padding: 14px var(--hq-pad-x); }
.draft-row.skeleton-row { display: block; padding: 16px; }

tr[data-profile], .member-card[data-profile] { cursor: pointer; }
.member-card[data-profile]:hover { background: var(--rv-color-gray-50); }

.profile-head { display: flex; align-items: center; gap: 12px; }
.profile-head > div { min-width: 0; }
.profile-head .profile-name { overflow-wrap: anywhere; }
.profile-avatar .person-avatar { width: 52px; height: 52px; font-size: 1rem; }
.profile-name {
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.2;
}
.profile-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}
.profile-field { margin-bottom: 14px; min-width: 0; }
.profile-value { margin-top: 4px; overflow-wrap: anywhere; }
.profile-value .nextstep-cell { display: inline-block; max-width: 100%; vertical-align: bottom; }
.profile-value a { color: inherit; }
.profile-notes {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-light);
  line-height: 1.7;
}
.profile-links { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-actions { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }

/* ---- Drafts queue toolbar & chips ---- */
.queue-toolbar {
  display: flex;
  gap: 8px;
  padding: 10px var(--hq-pad-x) 0;
  align-items: center;
}
.queue-search { flex: 1; width: auto; min-width: 0; height: 32px; }
.queue-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px var(--hq-pad-x) 12px;
  border-bottom: 1px solid var(--rv-color-hairline);
}
.queue-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--rv-radius-full);
  border: 1px solid var(--rv-color-panel-border);
  background: var(--rv-color-panel);
  font-size: var(--rv-font-size-x-small);
  font-weight: 500;
  transition: background .12s ease;
}
button.queue-chip:hover { background: var(--rv-color-gray-50); }
.queue-chip.active,
.queue-chip.on:not(.chart-chip) {
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  border-color: var(--rv-color-alpha-1000);
}
.queue-chip .count { font-family: var(--rv-font-mono); font-size: .625rem; opacity: .6; }

/* ---- Regenerate instruction row ---- */
.regen-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.regen-row input { flex: 1 1 220px; min-width: 0; }
.regen-input {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--rv-radius-full);
  border: 1px solid transparent;
  background: var(--rv-color-gray-100);
  font-size: var(--rv-font-size-x-small);
}
.regen-input::placeholder { color: var(--rv-font-color-lighter); }
.regen-input:focus { outline: var(--rv-focus-ring); background: var(--rv-color-gray-50); }

/* ---- Avatar menu ---- */
.header-right { position: relative; }
.avatar { border: none; cursor: pointer; }
.avatar-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 230px;
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-m);
  box-shadow: var(--rv-shadow-dialog);
  padding: 6px;
  z-index: 60;
}
.avatar-menu[hidden] { display: none; }
.avatar-menu-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rv-color-hairline);
  margin-bottom: 6px;
}
.avatar-menu-head .person-name,
.avatar-menu-head .person-org { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-menu-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: var(--rv-radius-s);
  text-align: left;
  color: var(--rv-font-color-light);
}
.avatar-menu-item:hover { background: var(--rv-color-gray-50); color: var(--rv-font-color-normal); }

.settings-tab[hidden] { display: none; }

/* Flatten the wrapper so `.panel + .panel` spaces the group panels; the
   voices panel follows the wrapper div, so it needs the same margin itself. */
#template-groups { display: contents; }
#template-groups + .panel { margin-top: var(--hq-stack-gap); }
.template-row .flow-step-num { flex: none; }

/* ==== Dashboard ==== */
.row-label { margin: 0 0 8px 2px; }
.stats-row + .row-label { margin-top: var(--hq-stack-gap); }
.settings-tab > * + .row-label { margin-top: var(--hq-stack-gap); }

.chart-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chart-chip { opacity: .45; }
.chart-chip.on { opacity: 1; }
.chart-chip .legend-dot { width: 8px; height: 8px; }

.range-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin-left: 6px;
  background: var(--rv-color-gray-100);
  border-radius: var(--rv-radius-full);
}
.range-tab {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--rv-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 5px 10px;
  border-radius: var(--rv-radius-full);
  color: var(--rv-color-gray-600);
}
.range-tab:hover { color: var(--rv-color-gray-900); }
.range-tab.on {
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
}

.chart-wrap { position: relative; padding: 8px var(--hq-pad-x) 0; }
.chart-wrap svg { width: 100%; height: 300px; display: block; }
.chart-grid { stroke: var(--rv-color-hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-crosshair { stroke: var(--rv-color-gray-400); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.chart-tick {
  font-family: var(--rv-font-mono);
  font-size: 11px;
  fill: var(--rv-color-gray-500);
}
.chart-series-label {
  font-family: var(--rv-font-sans);
  font-size: 12px;
  font-weight: 550;
}
.chart-footer { padding: 4px var(--hq-pad-x) 14px; }

.chart-tooltip {
  position: absolute;
  min-width: 150px;
  max-width: 190px;
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-m);
  box-shadow: var(--rv-shadow-dialog);
  padding: 10px 12px;
  font-size: var(--rv-font-size-x-small);
  pointer-events: none;
  z-index: 10;
}
.chart-tooltip .tt-date {
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  margin-bottom: 6px;
}
.chart-tooltip .tt-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.chart-tooltip .tt-val { margin-left: auto; font-family: var(--rv-font-mono); }

.dash-columns { grid-template-columns: 1fr 1fr; }
.dash-columns .draft-row { width: 100%; }
/* Dashboard list rows never wrap — one line, ellipsis. */
.dash-columns .draft-row-main { flex: 1; min-width: 0; }
.dash-columns .draft-row-main .person-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-columns .draft-row > .mono.dim,
.dash-columns .draft-row .status-pill { white-space: nowrap; flex: none; }

/* ---- Social listening ---- */
.social-columns { grid-template-columns: 3fr 2fr; }
.social-trends { grid-template-columns: 3fr 2fr; }

/* Trends posting calendar: solid chip = live post, dashed = planned. */
.social-cal { padding: 10px var(--hq-pad-x) 4px; }
.scal-weekdays, .scal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.scal-weekdays { margin-bottom: 6px; }
.scal-weekdays .microlabel { text-align: center; }
.scal-cell {
  min-height: 52px;
  min-width: 0;
  border: 1px solid var(--rv-color-hairline);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.scal-cell.pad { border: none; }
.scal-cell.today { border-color: var(--rv-color-gray-900); }
.scal-day { font-size: 10px; color: var(--rv-color-gray-500); }
.scal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: var(--rv-radius-full);
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  text-align: left;
}
.scal-chip svg { width: 10px; height: 10px; flex: none; }
.scal-chip > span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scal-chip .legend-dot { width: 6px; height: 6px; flex: none; }
.scal-chip.live { background: var(--rv-color-alpha-1000); color: var(--rv-color-neutral-0); }
.scal-chip.planned { border: 1px dashed var(--rv-color-gray-300); color: var(--rv-font-color-light); }
.scal-chip.planned:hover { border-color: var(--rv-color-gray-500); }
.scal-more {
  min-height: 28px;
  border: 1px dashed var(--rv-color-gray-300);
  border-radius: var(--rv-radius-s);
  background: transparent;
  color: var(--rv-font-color-light);
  font: 10px/1 var(--rv-font-mono);
  cursor: pointer;
}
.scal-agenda { display: none; }
.scal-agenda-title { padding: 14px 0 8px; }
.scal-agenda-more { display: block; margin: 12px auto 16px; }

/* Live social posts on the content calendar: solid, like the trends cal. */
.cal-entry.live-post {
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
}
.cal-entry.live-post:hover { background: var(--rv-color-gray-800); }
.cal-entry.live-post .channel-logo { color: var(--rv-color-neutral-0); }
.cal-entry.live-post .live-mark {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}

/* Platform brand tints for logos (mono platforms stay ink-colored). */
.plat-instagram { color: light-dark(#b13589, #e1699e); }
.plat-linkedin { color: light-dark(#0a66c2, #67b1ee); }
.plat-youtube { color: light-dark(#c00, #ff6b6b); }
.plat-reddit { color: light-dark(#d93a00, #ff8b60); }
.plat-bluesky { color: light-dark(#0866d0, #58a6ff); }
.plat-hn { color: light-dark(#e05d00, #ff9349); }
.plat-news { color: light-dark(#5f6a75, #9aa6b2); }
.plat-mastodon { color: light-dark(#563acc, #8c7cf0); }
.plat-lemmy { color: light-dark(#46782b, #82bc62); }
.plat-github { color: light-dark(#24292f, #f0f2f4); }
.plat-web { color: light-dark(#4b6478, #91a9ba); }

/* social: live badge */
.view-title-row { display: flex; align-items: center; gap: 10px; }

/* Read-only content view */
.entry-view-dot { width: 10px; height: 10px; flex: none; }
.entry-view-notes {
  margin: 0 0 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 12px 14px;
  background: var(--rv-color-gray-50);
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
  line-height: 1.6;
}
.plat-tag { display: inline-flex; align-items: center; gap: 5px; }
.social-post-head .spacer { margin-left: auto; }
.chart-footer { display: flex; align-items: center; gap: 8px; }
.chart-footer .spacer { margin-left: auto; }

.channel-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--hq-grid-gap);
}
.channel-strip .empty-state { grid-column: 1 / -1; }
@media (max-width: 1100px) { .channel-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---- Listening workspace: queue beside a compact insight rail ---- */
.social-workspace { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.social-rail {
  display: grid;
  gap: var(--hq-stack-gap);
  align-content: start;
  min-width: 0;
}
.social-rail .channel-strip { grid-template-columns: repeat(2, 1fr); }
/* Note: these view headers were briefly position:sticky, but a sticky
   element inside the padded .main scrollport pins 32px below the app
   header, letting content scroll visibly through the gap — reverted. */

/* ==== Responsive shell (see DESIGN.md › Responsive) ====
   ≤1100px: side-by-side panel rows stack (handled by .panel-columns).
   ≤900px: sidebar collapses to an icon rail, spacing tightens, headers wrap.
   ≤640px: single-column feel — compact calendar, full-width dialogs. */
body.rail .app { grid-template-columns: 64px 1fr; }
body.rail .sidebar { padding: 14px 10px; }
body.rail .sidebar .nav-section { padding: 14px 0 4px; font-size: 0; border-top: 1px solid var(--rv-color-hairline); }
body.rail .sidebar .nav-section:first-of-type { border-top: none; }
body.rail .nav-item { justify-content: center; padding: 11px 0; gap: 0; font-size: 0; }
body.rail .nav-item svg { width: 17px; height: 17px; }
body.rail .ask-trigger { justify-content: center; padding: 9px 0; }
body.rail .ask-trigger span { display: none; }
body.rail .sidebar-footer { display: none; }
body.rail .nav-item,
body.rail .ask-trigger { position: relative; }
body.rail .nav-item::after,
body.rail .ask-trigger::after {
  content: attr(data-nav-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 50;
  width: max-content;
  max-width: 180px;
  padding: 7px 9px;
  border: 1px solid var(--rv-color-gray-300);
  border-radius: var(--rv-radius-s);
  background: var(--rv-color-panel);
  box-shadow: 0 8px 20px rgb(0 0 0 / .14);
  color: var(--rv-font-color);
  font: 500 12px/1.2 var(--rv-font-sans);
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
body.rail .nav-item:hover::after,
body.rail .nav-item:focus-visible::after,
body.rail .ask-trigger:hover::after,
body.rail .ask-trigger:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 9px 12px;
  border-radius: var(--rv-radius-s);
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  transform: translateY(-150%);
  transition: transform 120ms ease-out;
}
.skip-link:focus { transform: translateY(0); }

@media (max-width: 900px) {
  .main { padding: 20px 16px 48px; }
  #sidebar-drag { display: none; }
  .view-header { flex-wrap: wrap; row-gap: 10px; }
  .panel-header { flex-wrap: wrap; row-gap: 8px; padding: 10px var(--hq-pad-x); }
  .queue-toolbar { flex-wrap: wrap; row-gap: 8px; }
  .chart-footer { flex-wrap: wrap; row-gap: 8px; }
  .search-input { min-width: 0; }
  .btn-small,
  .group-tab,
  .queue-chip,
  .search-input,
  .sort-select,
  .stage-select,
  .range-tab,
  .modal-close,
  .file-remove,
  #avatar-btn { min-width: 40px; min-height: 40px; }
  body.rail .nav-item,
  body.rail .ask-trigger { min-height: 44px; }
  .table-scroll {
    max-height: calc(100vh - 230px);
    overflow: auto;
    box-shadow: inset -18px 0 16px -20px light-dark(rgb(0 0 0 / .45), rgb(255 255 255 / .42));
    scrollbar-color: var(--rv-color-gray-400) transparent;
    scrollbar-width: thin;
  }
  .table th:first-child,
  .table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--rv-color-panel);
    box-shadow: 1px 0 var(--rv-color-hairline);
  }
  .table thead th:first-child { z-index: 4; }
  .table tbody tr:hover td:first-child { background: var(--rv-color-gray-50); }
}

@media (hover: none) and (max-width: 900px) {
  .table th { padding-block: 14px; }
}

@media (max-width: 1100px) {
  /* narrow day cells: the title always wins over decorations */
  .cal-entry .channel-logo.inline:not(:first-of-type),
  .cal-entry .clip,
  .cal-entry .who { display: none; }
}

@media (max-width: 640px) {
  body.chat-open .app { margin-right: 0; }
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channel-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view-title { font-size: 1.55rem; }
  .group-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .group-tab { flex: none; }
  .table { min-width: 640px; }             /* tables scroll inside .table-scroll */
  .cal-day { min-height: 60px; }
  .cal-weekdays,
  .cal-grid { display: none; }
  .social-cal .scal-weekdays,
  .social-cal .scal-grid { display: none; }
  .social-cal .scal-agenda { display: block; }
  .cal-entry .entry-title, .cal-entry .who { display: none; }
  .cal-entry .channel-logo { display: none; }
  .profile-fields { grid-template-columns: 1fr; }
  .profile-fields.metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal, .modal-profile { width: calc(100vw - 24px); }
  .ask-overlay { padding-top: 5vh; }
  .ask-palette { width: calc(100vw - 24px); }
  .drafts-layout { grid-template-columns: 1fr !important; }
  /* List-first Drafts on phones: the queue owns the page; the editor opens
     as a full-screen surface with an explicit way back. */
  .drafts-layout .draft-editor { display: none; }
  body.drafts-editor-open .drafts-layout .draft-editor {
    display: block;
    position: fixed;
    inset: var(--rv-header-height) 0 0 0;
    z-index: 55;
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
    background: var(--rv-color-panel);
  }
  body.drafts-editor-open .drafts-layout .draft-editor .panel-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--rv-color-panel);
  }
  .draft-actions { flex-wrap: wrap; }
  .draft-actions #draft-save-status { flex: 1 1 100%; }
  .draft-actions .spacer { display: none; }
  .draft-actions .btn { flex: 1 1 calc(50% - 4px); }
  .post-media .media-thumb { width: 64px; height: 48px; }
  .field-grid { grid-template-columns: 1fr !important; }
}
.channel-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  min-width: 0;
}
.channel-card .spacer { margin-left: auto; }
.channel-card-nums {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.channel-card-nums .stat-delta { font-size: var(--rv-font-size-x-small); }

.channel-logo {
  display: inline-flex;
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--rv-color-gray-800);
}
.channel-logo svg { width: 100%; height: 100%; }
.channel-logo.inline { width: 12px; height: 12px; color: var(--rv-color-gray-500); }
.channel-logo.large { width: 22px; height: 22px; }
.channel-card .channel-logo { width: 20px; height: 20px; }

/* Our posts — platform-format cards */
.post-stack {
  display: flex;
  flex-direction: column;
  gap: var(--hq-grid-gap);
  padding: 12px var(--hq-pad-x) var(--hq-pad-x);
}
.post-card {
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  padding: 14px;
  cursor: pointer;
  overflow: hidden;
}
.post-card:hover { border-color: var(--rv-color-gray-300); }
.post-card-head { display: flex; align-items: center; gap: 10px; }
.post-card-head .person-avatar { width: 30px; height: 30px; font-size: 11px; }
.post-card-head .spacer { margin-left: auto; }
.post-card-text { margin: 10px 0 0; line-height: 1.55; }
.post-card-text.wrap {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card .media-block { margin-top: 10px; }
.post-card-metrics { margin-top: 10px; font-size: var(--rv-font-size-x-small); }
.post-card-foot { display: flex; gap: 6px; margin-top: 8px; }
.post-card-foot:empty { display: none; }

/* platform formats: IG/TikTok are media-first */
.post-card.instagram, .post-card.tiktok { padding-top: 0; }
.post-card.instagram > .media-block, .post-card.tiktok > .media-block {
  margin: 0 -14px 12px;
  width: calc(100% + 28px);
  border-radius: 0;
}
.post-card.instagram > .media-block { aspect-ratio: 1 / 1; }
.post-card.tiktok > .media-block { aspect-ratio: 4 / 5; }

.media-block {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
}
.media-block.video::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 1px 6px rgb(0 0 0 / .45);
}
.media-count {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  color: #fff;
  background: rgb(0 0 0 / .45);
  border-radius: var(--rv-radius-full);
  padding: 2px 7px;
}

.profile-head .spacer { margin-left: auto; }
.profile-fields.metrics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
  padding: 14px 16px;
  margin-bottom: 6px;
}
.metrics-grid .profile-field { margin-bottom: 0; }
.modal .media-block { margin: 2px 0 16px; aspect-ratio: 21 / 9; }
.modal-body:last-child { padding-bottom: 24px; }
#social-modal .profile-head { margin-bottom: 4px; }
#social-modal .profile-head > :nth-child(2) { min-width: 0; overflow: hidden; }
#social-modal .profile-head > :nth-child(2) .mono { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#social-modal .profile-head .status-pill,
#social-modal .profile-head .tag { flex: none; }
.social-modal-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  margin-left: auto;
}
.social-modal-meta .tag {
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#social-modal .social-modal-text { margin: 12px 0 12px; }
#social-modal .profile-actions { justify-content: flex-end; }
.social-source { transition: border-color .12s ease, background .12s ease; }
.social-source:hover { background: var(--rv-color-gray-100); }

.social-digest { padding: 16px var(--hq-pad-x) 18px; }
.social-digest p {
  max-width: 68ch;
  font-size: var(--rv-font-size-small);
  line-height: 1.65;
  margin: 0;
}
/* Markdown digests: bulleted, scannable, same reading measure. */
.social-summary p, .own-insights-summary p { margin: 0 0 8px; }
.social-summary p:last-child, .own-insights-summary p:last-child { margin-bottom: 0; }
.social-summary ul, .social-summary ol,
.own-insights-summary ul, .own-insights-summary ol {
  max-width: 72ch;
  margin: 6px 0 8px;
  padding-left: 20px;
  font-size: var(--rv-font-size-small);
  line-height: 1.6;
}
.social-summary li, .own-insights-summary li { margin: 4px 0; }
.social-summary h4, .own-insights-summary h4 {
  margin: 10px 0 4px;
  font-size: var(--rv-font-size-x-small);
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rv-font-color-light);
}
.digest-themes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rv-color-hairline);
}
.social-digest:has(#social-themes:empty) .digest-themes { display: none; }
#social-themes { display: flex; flex-wrap: wrap; gap: 6px; }

.social-post {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
}
.social-post:last-child { border-bottom: none; }
.social-post:hover { background: var(--rv-color-gray-50); }
.social-post-main { min-width: 0; flex: 1; }
.social-post-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.social-post-text { margin-top: 2px; line-height: 1.55; }
.social-post-text.wrap {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-lighter);
}
.social-post-metrics { margin-top: 6px; font-size: var(--rv-font-size-x-small); }
.social-post-scope-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.post-media { display: flex; gap: 6px; margin-top: 8px; }
.media-thumb {
  position: relative;
  width: 84px;
  height: 60px;
  border-radius: 8px;
  border: 1px solid var(--rv-color-hairline);
  flex: none;
}
.post-media.large .media-thumb { width: 128px; height: 92px; border-radius: 10px; }
.media-thumb.video::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 4px rgb(0 0 0 / .45);
}
.post-media.large .media-thumb.video::after { font-size: 18px; }
.social-post .status-pill { flex: none; margin-top: 2px; text-transform: capitalize; }

.social-post.compact { padding: 0; border: none; background: none; }
.social-post.compact .person-avatar { width: 26px; height: 26px; font-size: 10px; }

.social-channel-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
}
.social-channel-row:last-child { border-bottom: none; }
.social-channel-line { display: flex; align-items: baseline; gap: 10px; }
.social-channel-line .spacer { margin-left: auto; }
.social-channel-line .stat-delta { font-size: var(--rv-font-size-x-small); }

#channel-connect-list .social-channel-row { padding: 8px 0; }

.social-post[data-social-open] { cursor: pointer; }
.social-post-side {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-top: 2px;
}
.social-post-side .status-pill { text-transform: capitalize; }
.social-post-side .tag { text-transform: capitalize; }

.social-modal-text {
  margin: 14px 0 4px;
  line-height: 1.6;
  font-size: var(--rv-font-size-medium);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.social-modal-text.is-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.social-text-toggle { margin: 0 0 6px; }
.social-modal-label { margin: 16px 0 8px; }
.social-source {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--rv-color-gray-50);
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.social-source:hover { border-color: var(--rv-color-gray-300); }
.social-source + .social-source { margin-top: 8px; }
.social-source .social-post-head { display: flex; align-items: baseline; gap: 8px; }
.social-source .social-post-text { margin-top: 4px; }

/* ---- Profile modal + drafts header controls ---- */
.modal-profile { width: min(620px, calc(100vw - 48px)); }

/* ---- Post detail modal: three zones — the post, the audience, actions ----
   The post renders as ONE embedded-post card (identity, content, media, its
   own tone + metrics in the card foot). Audience analysis follows under a
   single section head. Actions live in a pinned footer, never scrolled away. */
.modal-post { width: min(760px, calc(100vw - 48px)); }
.post-surface {
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-l);
  padding: 16px 18px 12px;
  background: var(--rv-color-panel);
}
.post-surface .profile-head { margin-bottom: 10px; }
.post-surface .media-full,
.post-surface .op-media-grid { margin-top: 12px; }
.post-surface-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rv-color-hairline);
}
.post-surface-foot .post-metrics { font-size: 12px; gap: 14px; }
.post-surface-foot .post-metrics svg { width: 14px; height: 14px; }
.audience-zone { margin-top: 22px; }
.zone-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.zone-title {
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: 15px;
}
.consensus-panel {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  margin: 10px 0 14px;
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
  background: var(--rv-color-gray-50);
}
.consensus-panel .audience-consensus { margin: 0; }
.consensus-panel .analysis-migration-note { margin: 0; }
.social-modal-footer {
  border-top: 1px solid var(--rv-color-hairline);
  padding-top: 14px;
}
.social-modal-footer[hidden] { display: none; }
.profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
  margin-bottom: 4px;
}
.profile-body .profile-head { margin-bottom: 4px; }
.draft-editor-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
/* Selects give up width instead of bleeding past the panel edge. */
.draft-editor-controls .sort-select { flex: 0 1 auto; min-width: 0; }

/* ---------- Listening / Mentions / Brand watch additions ---------- */

.status-pill.red { background: light-dark(#fdeaea, #3a1414); color: var(--rv-color-red-strong); }

.stat-tile.stat-link { cursor: pointer; }
.stat-tile.stat-link:hover { background: var(--rv-color-gray-50); }

.channel-card .others-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--rv-color-gray-100); color: var(--rv-font-color-light);
  font: 600 11px/1 var(--rv-font-mono, monospace);
}

.tt-posts { margin-top: 6px; border-top: 1px solid var(--rv-border-color); padding-top: 6px; max-width: 300px; }
.tt-post { display: flex; align-items: baseline; gap: 5px; font-size: 11px; line-height: 1.35; margin-top: 3px; color: var(--rv-font-color); }
.tt-post .tt-post-src { color: var(--rv-font-color-lighter); flex-shrink: 0; }
.tt-post.dim { color: var(--rv-font-color-lighter); }

.mentions-chip-row { padding: 10px var(--hq-pad-x) 0; flex-wrap: wrap; }
.mentions-more-row { text-align: center; padding: 12px; }
.mentions-more-row:not(:has(.btn:not([hidden]))) { display: none; }
#mentions-search { max-width: 200px; }

.brand-card {
  margin: 10px var(--hq-pad-x); padding: 14px var(--hq-pad-x) 12px;
  border: 1px solid var(--rv-border-color); border-radius: var(--rv-radius-l);
  border-left-width: 3px;
}
.brand-card:last-child { margin-bottom: var(--hq-pad-x); }
.brand-card.risk-high   { border-left-color: light-dark(#dc2626, #f87171); }
.brand-card.risk-medium { border-left-color: var(--rv-color-amber-500); }
.brand-card.risk-low    { border-left-color: var(--rv-border-color); }
.brand-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brand-domain { font-weight: 600; color: var(--rv-font-color-normal); text-decoration: none; }
.brand-api-tag { background: light-dark(#fdeaea, #3a1414); color: var(--rv-color-red-strong); border-color: transparent; }
.brand-takedown-tag { background: light-dark(#1a1a1a, #ededed); color: light-dark(#fff, #111); border-color: transparent; }
.brand-title { margin-top: 6px; font-size: 13px; color: var(--rv-font-color-light); }
.brand-reason { margin-top: 4px; font-size: 13px; line-height: 1.5; }
.brand-meta { margin-top: 6px; font-size: 11px; }
.brand-status { margin-left: auto; }

.usage-bars { width: 100%; max-width: 340px; height: auto; margin-top: 8px; display: block; }
.usage-legend { display: flex; gap: 14px; font-size: 11px; margin-top: 4px; }
.usage-legend .legend-dot { margin-right: 4px; }
#claude-usage-viz .microlabel { margin-top: 6px; }
.usage-task-heading { margin-top: 14px; }
.usage-task-list {
  display: grid;
  gap: 6px;
  margin-top: 7px;
}
.usage-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: var(--rv-radius-s);
  background: var(--rv-color-gray-50);
  font-size: var(--rv-font-size-x-small);
}
.usage-task-row > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}
.usage-task-row .mono { flex: none; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .usage-task-row { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* Brand watch v2: history + settled state */
.brand-card.settled { opacity: 0.62; }
.brand-foot { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; font-size: 11px; }
.brand-foot > .mono:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-history summary {
  cursor: pointer;
  list-style: none;
  padding: 2px 8px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-full);
}
.brand-history summary:hover { background: var(--rv-color-gray-50); }
.brand-history summary::-webkit-details-marker { display: none; }
.brand-history summary::after { content: " ▾"; opacity: 0.5; }
.brand-history[open] summary::after { content: " ▴"; }
.brand-history-rows {
  margin-top: 6px;
  padding: 8px 0 2px 10px;
  border-left: 2px solid var(--rv-color-gray-200);
  display: grid;
  gap: 4px;
}
.brand-withdrawn-tag {
  border-color: var(--rv-color-amber-500);
  color: var(--rv-color-amber-strong);
}
.brand-stale-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px var(--hq-pad-x);
  border: 1px solid color-mix(in srgb, var(--rv-color-amber-500) 45%, var(--rv-color-panel-border));
  border-radius: var(--rv-radius-l);
  background: light-dark(#fffaf0, #201607);
}
.brand-stale-banner .btn { margin-left: auto; }
.stat-tile.stat-attention { border-color: color-mix(in srgb, var(--rv-color-amber-500) 55%, var(--rv-color-panel-border)); }
.stat-tile.stat-attention .stat-value { color: var(--rv-color-amber-strong); }

/* Mentions day view (opened by clicking a trend-chart day) */
.mentions-day-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 12px var(--hq-pad-x) 0; padding: 12px var(--hq-pad-x);
  border: 1px solid var(--rv-border-color); border-radius: var(--rv-radius-l);
  background: var(--rv-color-gray-50);
}
.mentions-day-date { font-weight: 600; font-size: 15px; }

/* Chart pan/hover + filter counts */
.chart-day-highlight { fill: light-dark(rgba(26,26,26,.05), rgba(240,240,240,.07)); }
.tt-row.tt-total { border-top: 1px solid var(--rv-border-color); margin-top: 4px; padding-top: 4px; font-weight: 600; }
.range-tab.today-tab { font-weight: 600; }
.chip-count { opacity: .55; font-size: 10px; margin-left: 2px; }
#social-search { max-width: 150px; }

/* Brand watch v3.1: identity block with favicon */
.brand-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-favicon { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; background: var(--rv-color-gray-100); }
.brand-id { flex: 1 1 180px; min-width: 0; }
.brand-domain-row { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.brand-domain { min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-size: 15px; }
.brand-type-row { font-size: 11px; margin-top: 2px; }
.brand-api-flag { color: var(--rv-color-red-strong); font-weight: 600; }
.brand-reason { margin-top: 8px; }

/* Full engagement metrics on mention cards */
.post-metrics { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 11px; color: var(--rv-font-color-lighter); }
.post-metrics .metric { display: inline-flex; align-items: center; gap: 4px; }
.post-metrics .metric svg { width: 13px; height: 13px; flex: none; opacity: .75; }
.post-metrics .metric b { color: var(--rv-font-color-light); font-weight: 600; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Scraped media: inline thumbs + in-app viewing */
.post-thumb { position: relative; display: block; width: 72px; height: 54px; border-radius: 8px; overflow: hidden; background: var(--rv-color-gray-100); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-thumb.video::after {
  content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; background: rgba(0,0,0,.28); text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.media-full { max-width: 100%; max-height: 420px; border-radius: var(--rv-radius-m); margin: 12px 0 4px; display: block; }
/* Videos never play in-app: the still frame links to the original post. */
.media-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  pointer-events: none;
}
.media-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}
.op-media-item .media-play { width: 30px; height: 30px; }
.op-media-item .media-play::after { border-width: 5px 0 5px 9px; }
.show-more-cell { text-align: center; padding: 10px; }
.ask-group-head { padding: 10px 14px 4px; }
.ask-row mark {
  background: var(--rv-color-yellow-100);
  color: inherit;
  border-radius: 2px;
}
.activity-incident { border-bottom: 1px solid var(--rv-color-hairline); }
.activity-incident summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px var(--hq-pad-x);
  cursor: pointer;
  list-style: none;
}
.activity-incident summary::-webkit-details-marker { display: none; }
.activity-incident summary::after { content: "▾"; opacity: .45; margin-left: auto; }
.activity-incident[open] summary::after { content: "▴"; }
.activity-incident-rows { border-top: 1px dashed var(--rv-color-hairline); }

.drafts-back { display: none; }
@media (max-width: 640px) {
  body.drafts-editor-open .drafts-back { display: inline-flex; align-items: center; }
}
#draft-save-status.save-failed { color: var(--rv-color-red-strong); }

/* ---- Events (Luma) ---- */
.luma-event-row { width: 100%; text-align: left; }
.luma-date {
  flex: none;
  display: grid;
  place-items: center;
  gap: 1px;
  width: 46px;
  height: 46px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-m);
  background: var(--rv-color-gray-50);
  line-height: 1;
}
.luma-date-m {
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
}
.luma-date-d { font-size: 1.05rem; font-weight: 600; }
.luma-row-label { padding: 12px var(--hq-pad-x) 4px; }
.luma-person-row { width: 100%; text-align: left; }
.luma-person-row .tag { flex: none; }
.luma-person-meta { flex: none; white-space: nowrap; }
.luma-mark { letter-spacing: .04em; }
.luma-error-note {
  margin: 12px var(--hq-pad-x) 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--rv-color-amber-500) 45%, var(--rv-color-panel-border));
  border-radius: var(--rv-radius-m);
  background: light-dark(#fffaf0, #201607);
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-light);
}
@media (max-width: 640px) {
  .luma-person-meta { display: none; }
  #view-events .panel-header { flex-wrap: wrap; }
  #events-people-search { max-width: none; flex: 1 1 180px; }
}

/* ---- Outreach: mobile record cards replace the wide table ---- */
.outreach-cards { display: none; }
.outreach-card {
  display: grid;
  gap: 10px;
  padding: 14px var(--hq-pad-x);
  border-top: 1px solid var(--rv-color-hairline);
}
.outreach-card .cell-person { display: flex; align-items: center; gap: 10px; }
.outreach-card .outreach-card-id { flex: 1; min-width: 0; }
.outreach-card .outreach-card-meta {
  display: grid;
  gap: 4px;
  padding-left: 2px;
}
.outreach-card .outreach-card-actions { display: flex; gap: 8px; }
.outreach-card .outreach-card-actions .btn { flex: 1; }
@media (max-width: 640px) {
  #view-outreach .table-scroll { display: none; }
  .outreach-cards { display: block; }
}
/* The partner table is wider than the content column even on desktop
   (column min-widths sum past 1240px) — it must keep its own horizontal
   scroll region; a sticky header row can't work across that wrapper. */
.incomplete-tag {
  border-color: var(--rv-color-amber-500);
  color: var(--rv-color-amber-strong);
  font-size: .625rem;
}
.field-label .req { color: var(--rv-color-red-strong); }
.entry-input[aria-invalid="true"] { border-color: var(--rv-color-red-500); }

/* ---- Profile drawer: overdue flags, data-quality note, activity timeline ---- */
.nextstep-cell.is-overdue { color: var(--rv-color-amber-strong); }
.profile-quality-warning {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--rv-color-amber-500) 45%, var(--rv-color-panel-border));
  border-radius: var(--rv-radius-m);
  background: light-dark(#fffaf0, #201607);
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-light);
}
.profile-timeline {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}
.profile-timeline .timeline-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-left: 2px;
}
.profile-timeline .timeline-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-gray-400);
  translate: 0 -1px;
}
.profile-timeline .timeline-row.is-overdue .timeline-dot { background: var(--rv-color-amber-500); }
.profile-timeline .timeline-row.is-overdue .timeline-label { color: var(--rv-color-amber-strong); }
.profile-timeline .timeline-label { flex: 1; min-width: 0; font-size: var(--rv-font-size-x-small); }

/* ---- Consensus insight strip (Our posts) ---- */
.x-account-consensus .consensus-strip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px var(--hq-pad-x) 16px;
}
.x-account-consensus .consensus-strip .strip-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--rv-font-color-light);
  font-size: var(--rv-font-size-small);
  line-height: 1.5;
}
.x-account-consensus.is-collapsed .social-digest { display: none; }
.x-account-consensus.is-open .consensus-strip { display: none; }

/* ---- Media carousel (detail surfaces, ≥2 items) ---- */
.media-carousel { position: relative; margin-top: 12px; }
.media-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--rv-radius-m);
}
.media-track::-webkit-scrollbar { display: none; }
.media-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: block;
  background: var(--rv-color-gray-50);
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
  overflow: hidden;
}
.media-slide img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
}
.media-slide .external-action__icon { position: absolute; right: 10px; top: 10px; opacity: 0; }
.media-slide:hover .external-action__icon,
.media-slide:focus-visible .external-action__icon { opacity: 1; }
.media-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-panel);
  color: var(--rv-font-color-normal);
  font-size: 1.05rem;
  line-height: 1;
  box-shadow: var(--rv-shadow-dialog);
}
.media-nav.prev { left: 10px; }
.media-nav.next { right: 10px; }
.media-nav:disabled { opacity: .35; }
.media-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 9px;
  border-radius: var(--rv-radius-full);
  background: color-mix(in srgb, var(--rv-color-alpha-1000) 72%, transparent);
  color: var(--rv-color-neutral-0);
  font-size: .6875rem;
}

.media-full-link { position: relative; display: block; }
.media-full-link .media-open-badge {
  position: absolute; top: 18px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff;
  opacity: 0; transition: opacity .15s;
}
.media-full-link:hover .media-open-badge { opacity: 1; }
.media-post-link { display: block; }
.media-watch-chip {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 10px 0 4px; padding: 7px 12px;
  border: 1px solid var(--rv-color-hairline); border-radius: 999px;
  font-size: 12px; color: var(--rv-font-color);
}
.media-watch-chip:hover { background: var(--rv-color-gray-100); }
.media-watch-chip .media-play.inline {
  position: static; transform: none; width: 18px; height: 18px; pointer-events: auto;
}
.media-watch-chip .media-play.inline::after { border-width: 3.5px 0 3.5px 6px; left: 56%; }
.social-post-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 240px; }
/* Media in a feed card's side column stays thumbnail-sized — an unconstrained
   grid inherits the image's intrinsic size and swallows the whole card. */
.social-post-side .op-media-grid { width: 200px; max-width: 100%; border-radius: var(--rv-radius-s); overflow: hidden; }
.social-post-side .op-media-item { min-height: 56px; max-height: 76px; }
.social-post-side .op-media-grid.one .op-media-item { min-height: 90px; max-height: 120px; }

/* Brand-watch flags on mentions + audit polish */
.tag.brand-flag { background: light-dark(#fdeaea, #3a1414); color: var(--rv-color-red-strong); border-color: transparent; cursor: pointer; }
.brand-flag-banner {
  margin: 10px 0 4px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid light-dark(#f3c6c6, #5b2020);
  background: light-dark(#fdf2f2, #2a1010); font-size: 13px; line-height: 1.5;
}
.brand-flag-banner strong { color: var(--rv-color-red-strong); }
.brand-flag-banner .btn { margin-top: 8px; }

/* Chart tooltip stays inside its plot so the selected bucket and card remain
   visually connected, even when the chart sits beside another panel. */
.chart-tooltip { position: absolute; z-index: 120; max-width: 320px; }

/* Interactive chart popup */
.chart-tooltip {
  pointer-events: auto;
  min-width: 220px;
  max-width: 300px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px 7px; border-bottom: 1px solid var(--rv-border-color);
}
.tt-head .tt-date { font-weight: 600; }
.tt-count {
  background: var(--rv-color-gray-100); border-radius: 999px; padding: 1px 8px;
  font-size: 11px; color: var(--rv-font-color-light);
}
.tt-sentiments { display: flex; gap: 12px; padding: 7px 12px; }
.tt-sentiments .tt-row { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.tt-sentiments .tt-val { font-weight: 600; margin-left: 1px; }
.chart-tooltip .tt-posts { margin: 0; border-top: 1px solid var(--rv-border-color); padding: 4px; max-width: none; }
.chart-tooltip .tt-post {
  display: flex; align-items: flex-start; gap: 7px; width: 100%;
  padding: 6px 8px; margin: 0; border: 0; border-radius: 7px;
  background: none; text-align: left; cursor: pointer; font: inherit; font-size: 11px;
  color: var(--rv-font-color);
}
.chart-tooltip .tt-post:hover { background: var(--rv-color-gray-100); }
.chart-tooltip .tt-post .legend-dot { margin-top: 3px; flex-shrink: 0; }
.tt-post-body { display: block; min-width: 0; }
.tt-post-body .tt-post-src { display: block; color: var(--rv-font-color-lighter); font-size: 10px; }
.tt-post-body .tt-post-text { display: block; line-height: 1.4; overflow-wrap: anywhere; }
.tt-open {
  display: block; width: 100%; padding: 8px 12px; border: 0;
  border-top: 1px solid var(--rv-border-color); background: none;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--rv-font-color);
  text-align: left; cursor: pointer;
}
.tt-open:hover { background: var(--rv-color-gray-100); }
.tt-open-short { display: none; }

/* Trends chart: stacked sentiment stays the factual layer while the rolling
   line makes direction readable at a glance. */
.trend-panel { min-width: 0; overflow: visible; }
.trend-panel .panel-header {
  min-height: var(--hq-panel-header-h);
  align-content: center;
  gap: 8px;
}

/* Legend lives on its own quiet row so the panel header stays a single line. */
.chart-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
}
.chart-toolbar:has(.chart-chips[hidden]) { display: none; }
.chart-toolbar-label {
  color: var(--rv-font-color-lighter);
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}
.chart-toolbar .chart-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chart-toolbar .chart-trend-toggle { margin-left: auto; }
#social-chart-chips,
#mentions-chart-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.trend-panel .queue-chip,
.trend-panel .range-tab {
  transition-property: background-color, border-color, color, opacity, transform;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
}
.trend-panel .queue-chip:active,
.trend-panel .range-tab:active { transform: scale(.96); }
.chart-trend-toggle { opacity: .46; }
.chart-trend-toggle.on {
  opacity: 1;
  background: var(--rv-color-gray-100);
  border-color: var(--rv-color-gray-300);
}
.chart-line-swatch {
  display: inline-block;
  width: 17px;
  height: 0;
  flex: none;
  border-top: 2px solid currentColor;
  border-radius: var(--rv-radius-full);
}
.chart-inspector-panel { container-type: inline-size; }
.chart-inspector-panel .chart-wrap {
  --chart-inspector-height: 72px;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rv-color-gray-50) 42%, transparent), transparent 34%);
}

@container (max-width: 760px) {
  .chart-inspector-panel .chart-wrap { --chart-inspector-height: 104px; }
  .chart-inspector-panel .chart-tooltip {
    grid-template-columns: minmax(112px, auto) minmax(0, 1fr) auto;
    grid-template-rows: minmax(52px, auto) minmax(52px, auto);
  }
  .chart-inspector-panel .tt-head { grid-row: 1; }
  .chart-inspector-panel .tt-head .tt-date { white-space: normal; }
  .chart-inspector-panel .tt-sentiments { grid-column: 2 / 4; grid-row: 1; }
  .chart-inspector-panel .tt-trend-summary { grid-column: 1 / 3; grid-row: 2; border-left: 0; border-top: 1px solid var(--rv-color-hairline); }
  .chart-inspector-panel .tt-open { grid-column: 3; grid-row: 2; border-top: 1px solid var(--rv-color-hairline); }
  .chart-inspector-panel .chart-tooltip.trend-hidden .tt-open { grid-column: 1 / 4; justify-content: center; border-left: 0; }
}
.chart-inspector-panel .chart-wrap::before {
  content: attr(data-inspector-hint);
  order: 0;
  display: flex;
  align-items: center;
  min-height: var(--chart-inspector-height);
  padding: 0 12px;
  border-bottom: 1px solid var(--rv-color-hairline);
  color: var(--rv-font-color-lighter);
  font: 10px/1.4 var(--rv-font-mono);
  text-wrap: pretty;
}
/* Touch devices get touch wording — "hover, drag, arrow keys" only makes
   sense with a pointer + keyboard. */
@media (pointer: coarse) {
  .chart-inspector-panel .chart-wrap::before { content: "Tap a bar to inspect that day."; }
}
.chart-inspector-panel .chart-wrap:has(.chart-tooltip:not([hidden]))::before { display: none; }
.chart-inspector-panel .chart-wrap svg {
  order: 1;
  overflow: visible;
  border-radius: var(--rv-radius-s);
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition-property: outline-color, background-color;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
}
.chart-inspector-panel .chart-wrap svg.is-keyboard-focused {
  outline-color: var(--rv-color-gray-500);
  background: color-mix(in srgb, var(--rv-color-gray-50) 72%, transparent);
}
.chart-axis-title {
  fill: var(--rv-font-color-lighter);
  font: 600 9px/1 var(--rv-font-mono);
  letter-spacing: .08em;
}
.chart-baseline {
  stroke: var(--rv-color-gray-300);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.chart-tick,
.chart-insight-value,
.tt-count,
.tt-val {
  font-variant-numeric: tabular-nums;
}
.chart-grid { stroke-dasharray: 2 4; }
.chart-crosshair {
  stroke: var(--rv-color-gray-600);
  stroke-dasharray: 2 3;
}
.chart-bar-segment {
  opacity: .9;
  transition-property: opacity, filter;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
}
.chart-day-highlight {
  fill: light-dark(rgb(17 24 39 / .055), rgb(255 255 255 / .075));
}
.chart-trend-series { pointer-events: none; }
.chart-trend-halo,
.chart-trend-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.chart-trend-halo {
  stroke: var(--rv-color-panel);
  stroke-width: 6;
  opacity: .92;
}
.chart-trend-line {
  stroke: var(--rv-font-color-normal);
  stroke-width: 2.25;
}
.chart-trend-dot-halo {
  fill: var(--rv-color-panel);
  stroke: var(--rv-color-panel);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.chart-trend-dot { fill: var(--rv-font-color-normal); }
.chart-capture {
  outline: none;
  touch-action: pan-y;
}
.chart-empty-title {
  fill: var(--rv-font-color-light);
  font: 600 13px/1.2 var(--rv-font-sans);
}
.chart-empty-sub {
  fill: var(--rv-font-color-lighter);
  font: 11px/1.2 var(--rv-font-mono);
}
.trend-panel .chart-footer {
  min-height: 60px;
  padding-top: 8px;
  border-top: 1px solid var(--rv-color-hairline);
}
.trend-panel .chart-footer > .microlabel {
  max-width: 58ch;
  color: var(--rv-font-color-light);
  line-height: 1.45;
  text-wrap: pretty;
}
.trend-panel .chart-footer .range-tabs { margin-left: 0; }
.chart-tooltip {
  border-color: var(--rv-color-gray-300);
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 12px 30px rgb(0 0 0 / .14);
}
.chart-inspector-panel .chart-tooltip {
  position: static;
  order: 0;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto;
  align-items: stretch;
  width: 100%;
  min-height: var(--chart-inspector-height);
  min-width: 0;
  max-width: none !important;
  max-height: none !important;
  border: 0;
  border-bottom: 1px solid var(--rv-color-hairline);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: color-mix(in srgb, var(--rv-color-gray-50) 68%, var(--rv-color-panel));
}
.chart-inspector-panel .chart-tooltip[hidden] { display: none; }
.chart-inspector-panel .tt-head,
.chart-inspector-panel .tt-sentiments,
.chart-inspector-panel .tt-trend-summary,
.chart-inspector-panel .tt-open {
  min-width: 0;
  border-top: 0;
  border-bottom: 0;
}
.chart-inspector-panel .chart-tooltip.trend-hidden { grid-template-columns: auto minmax(180px, 1fr) auto; }
.chart-inspector-panel .tt-head {
  min-width: 128px;
  border-right: 1px solid var(--rv-color-hairline);
}
.chart-inspector-panel .tt-head .tt-date { white-space: nowrap; }
.chart-inspector-panel .tt-sentiments { align-content: center; }
.chart-inspector-panel .tt-trend-summary {
  align-content: center;
  border-left: 1px solid var(--rv-color-hairline);
  background: transparent;
}
.chart-inspector-panel .tt-open {
  display: flex;
  align-items: center;
  width: auto;
  padding-inline: 12px;
  border-left: 1px solid var(--rv-color-hairline);
  white-space: nowrap;
}
.tt-sentiments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 5px 10px;
}
.tt-sentiments .tt-row { min-width: 0; }
.tt-trend-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 7px;
  padding: 8px 12px;
  border-top: 1px solid var(--rv-color-hairline);
  background: var(--rv-color-gray-50);
  color: var(--rv-font-color-light);
  font-size: 11px;
}
.tt-trend-summary strong { color: var(--rv-font-color-normal); }
.tt-delta {
  grid-column: 2 / 4;
  font: 10px/1.35 var(--rv-font-mono);
}
.tt-delta.up { color: var(--rv-senti-positive); }
.tt-delta.down { color: light-dark(#a85f08, #f3b75f); }
.tt-delta.flat { color: var(--rv-font-color-lighter); }

@media (max-width: 700px) {
  .chart-inspector-panel .chart-wrap { --chart-inspector-height: 104px; }
  .chart-inspector-panel .chart-wrap::before {
    content: attr(data-inspector-hint);
  }
  .chart-inspector-panel .chart-tooltip {
    grid-template-columns: minmax(92px, auto) minmax(0, 1fr) auto;
    grid-template-rows: minmax(52px, auto) minmax(52px, auto);
  }
  .chart-inspector-panel .tt-head { grid-row: 1; }
  .chart-inspector-panel .tt-head .tt-date { white-space: normal; }
  .chart-inspector-panel .tt-sentiments { grid-column: 2 / 4; grid-row: 1; }
  .chart-inspector-panel .tt-trend-summary { grid-column: 1 / 3; grid-row: 2; border-left: 0; border-top: 1px solid var(--rv-color-hairline); }
  .chart-inspector-panel .tt-open { grid-column: 3; grid-row: 2; border-top: 1px solid var(--rv-color-hairline); }
  .chart-inspector-panel .chart-tooltip.trend-hidden .tt-open { grid-column: 1 / 4; justify-content: center; border-left: 0; }
}

@media (hover: none) and (min-width: 641px) and (max-width: 900px) {
  .cal-day-add,
  .cal-entry,
  .cal-overflow,
  .scal-chip,
  .scal-more {
    min-height: 40px;
    opacity: 1;
  }
  .cal-day-add { min-width: 40px; }
}

/* ---------- Layout guardrails: nothing clips, everything wraps cleanly ----------
   Panel headers hold a variable number of controls; when space runs out they
   must wrap to a new row — never clip a button or break text mid-label. */
.panel-header { flex-wrap: wrap; row-gap: 6px; }
.panel-header .btn,
.panel-header .sort-select,
.panel-header .range-tabs,
.panel-header .status-pill { flex-shrink: 0; }
.panel-header .search-input { flex: 0 1 170px; min-width: 100px; }
.panel-header .mono.dim,
.panel-header .microlabel,
.panel-header .tag { white-space: nowrap; }
.view-title-row { flex-wrap: wrap; row-gap: 4px; }
.view-actions { flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }

/* Channel cards: number block never wraps; long names/sublists ellipsize. */
.channel-card-nums { white-space: nowrap; flex-shrink: 0; }
.channel-card > div:not(.channel-card-nums) { min-width: 0; }
.channel-card .person-name,
.channel-card .mono.dim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* Chip rows wrap instead of overflowing. */
#social-channel-chips, .queue-toolbar .chart-chips { flex-wrap: wrap; }

/* Stat tiles: micro-labels stay on one line; sublabels get two before
   truncating so the qualifier is actually readable. */
.stat-tile .stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-tile .stat-delta {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Reve AI translation, always secondary to the preserved original */
.translation-block {
  display: grid;
  gap: 8px;
  margin: 12px 0 5px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--rv-color-green-500) 5%, var(--rv-color-gray-50));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rv-color-green-500) 16%, var(--rv-color-hairline));
  text-align: left;
}
.translation-block.is-compact {
  gap: 6px;
  margin-block: 9px 2px;
  padding: 10px 12px;
  border-radius: 12px;
}
.translation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.translation-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--rv-font-color);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .01em;
}
.translation-title > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--rv-color-green-500) 13%, var(--rv-color-panel));
  color: var(--rv-color-green-500);
  font: 650 11px/1 var(--rv-font-mono);
}
.translation-provider {
  flex: none;
  padding: 4px 7px;
  border-radius: var(--rv-radius-full);
  background: color-mix(in srgb, var(--rv-color-green-500) 9%, var(--rv-color-panel));
  color: var(--rv-font-color-lighter);
  font: 9px/1.2 var(--rv-font-mono);
  white-space: nowrap;
}
.translation-block .translation-text {
  margin: 0;
  color: var(--rv-font-color);
  font-size: 13.5px;
  line-height: 1.55;
  text-wrap: pretty;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.translation-block.is-compact .translation-text { font-size: 12.5px; line-height: 1.5; }
.translation-block .translation-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.translation-expand {
  justify-self: start;
  border: 0;
  background: none;
  padding: 0;
  color: var(--rv-font-color-light);
  font-size: var(--rv-font-size-x-small);
  font-weight: 550;
  cursor: pointer;
}
.translation-expand:hover { color: var(--rv-font-color); text-decoration: underline; }

/* Generic prose clamp (audience-consensus summaries etc.) */
.clamp-text:not(.is-open) {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Taller variant for list-shaped digests: fills the panel's natural height,
   so Read more only appears when content truly overflows the box. */
.clamp-text.clamp-lg:not(.is-open) { -webkit-line-clamp: 18; }

/* Consensus themes: quiet inline chips under a microlabel, like the digest. */
#ourposts-x-consensus-themes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rv-color-hairline);
}
#ourposts-x-consensus-themes:empty { display: none; }
#ourposts-x-consensus-themes .chart-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.translation-language {
  color: var(--rv-font-color-lighter);
  font: 9.5px/1.35 var(--rv-font-mono);
}
.translation-loading,
.translation-failed,
.translation-unavailable {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--rv-font-color-light);
  font-size: 11.5px;
  line-height: 1.4;
  text-wrap: pretty;
}
.translation-failed,
.translation-unavailable { justify-content: space-between; }
.translation-failed .btn,
.translation-unavailable .btn { flex: none; min-height: 40px; }
.translation-block .task-spinner { width: 13px; height: 13px; }
.mention-card .translation-block { margin-top: 10px; }
.tt-post .translation-block,
.social-source + .translation-block { width: 100%; }
@media (max-width: 560px) {
  .translation-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .translation-provider { margin-left: 29px; }
  .translation-failed,
  .translation-unavailable { align-items: stretch; flex-direction: column; }
  .translation-failed .btn,
  .translation-unavailable .btn { width: 100%; }
}

/* Own-post reply insights */
.own-insights { margin-top: 4px; }
.analysis-loading {
  display: grid;
  gap: 9px;
  padding: 4px 0 2px;
}
.analysis-loading-head { display: flex; align-items: center; gap: 9px; }
.analysis-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
  background: var(--rv-color-gray-50);
}
.analysis-prompt p {
  max-width: 54ch;
  margin: 4px 0 0;
  color: var(--rv-font-color-light);
  font-size: 12px;
  line-height: 1.45;
}
.analysis-prompt .btn { flex: none; }
.analysis-loading .shimmer:nth-child(2) { width: 92%; }
.analysis-loading .shimmer:nth-child(3) { width: 68%; }
.analysis-loading-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.analysis-loading-actions .btn { flex: none; }
.analysis-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid light-dark(#efcaca, #603232);
  border-radius: var(--rv-radius-m);
  background: light-dark(#fff7f7, #281717);
}
.analysis-error p {
  max-width: 54ch;
  margin: 4px 0 0;
  color: var(--rv-font-color-light);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.analysis-error .btn { flex: none; }
/* One quiet dot-separated line replaces the old pill row. */
.analysis-source {
  margin: 2px 0 4px;
  font-size: 10.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* Post + reply engagement as icon chips (shared .post-metrics language). */
.social-modal-metrics {
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
}
.social-modal-metrics .post-metrics { gap: 16px; row-gap: 8px; font-size: 12px; }
.social-modal-metrics .post-metrics svg { width: 15px; height: 15px; }
.social-modal-metrics.is-secondary { border: 0; padding: 2px 0; margin: 4px 0; }
.social-modal-metrics.is-secondary .post-metrics { font-size: 11px; color: var(--rv-font-color-light); }
/* Icon-only ↗ open links inside reply/thread cards. */
.external-action--icon {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 2px;
  color: var(--rv-font-color-lighter);
  border-radius: 6px;
}
.external-action--icon:hover { color: var(--rv-font-color); background: var(--rv-color-gray-100); }
.external-action--icon svg { width: 12px; height: 12px; }
/* Reply tone dots inside the filter chips. */
.senti-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}
.senti-dot.positive { background: var(--rv-senti-positive); }
.senti-dot.neutral { background: var(--rv-senti-neutral); }
.senti-dot.negative { background: var(--rv-color-amber-500); }
.senti-dot.unclassified { background: repeating-linear-gradient(45deg, #888 0 2px, transparent 2px 4px); }
.senti-dot.pending { background: none; box-shadow: inset 0 0 0 1.5px var(--rv-font-color-lighter); }
.reply-results { font-size: 10px; }
.reply-results:empty { display: none; }
/* Settings → Reve AI context file manager */
.ai-context-list { display: grid; gap: 10px; padding: 4px 0 2px; }
.ai-context-row {
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
  padding: 10px 12px;
  background: var(--rv-color-panel);
}
.ai-context-head { display: flex; align-items: center; gap: 10px; }
.ai-context-name { font-weight: 600; font-size: 12px; }
.ai-context-editor { margin-top: 10px; display: grid; gap: 8px; }
.ai-context-text {
  width: 100%;
  min-height: 240px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
  background: var(--rv-color-gray-50);
  font-size: 11.5px;
  line-height: 1.55;
}
.ai-context-actions { display: flex; gap: 8px; }
.post-sentiment-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
  background: var(--rv-color-gray-50);
}
.post-sentiment-line .mono { margin-left: auto; }
.sentiment-scope {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 3px 2px 8px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-panel);
  box-shadow: 0 0 0 1px light-dark(rgb(0 0 0 / .07), rgb(255 255 255 / .09));
  white-space: nowrap;
}
/* Post tone lost its text label — without one, the outer capsule is just a
   second ring around the pill, so it goes too. */
.sentiment-scope.post-tone {
  padding: 0;
  background: none;
  box-shadow: none;
}
.sentiment-scope-label {
  color: var(--rv-font-color-light);
  font: 600 9px/1.2 var(--rv-font-mono);
  letter-spacing: .035em;
  text-transform: uppercase;
}
.sentiment-scope .status-pill,
.audience-consensus .status-pill { margin-left: 0; }
.sentiment-scope.compact:not(.post-tone) { padding-left: 7px; }
.audience-consensus-pill {
  background: color-mix(in srgb, var(--rv-color-panel) 78%, var(--rv-color-green-100));
}
.audience-consensus {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 5px;
  padding: 9px 10px;
  border-radius: var(--rv-radius-m);
  background: color-mix(in srgb, var(--rv-color-panel) 82%, var(--rv-color-green-100));
  box-shadow:
    0 0 0 1px light-dark(rgb(0 0 0 / .06), rgb(255 255 255 / .08)),
    0 1px 2px -1px rgb(0 0 0 / .06),
    0 2px 4px rgb(0 0 0 / .04);
}
.audience-consensus .microlabel { margin: 0; }
.audience-consensus-meta {
  margin-left: auto;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.audience-consensus.compact {
  margin: 3px 0 1px;
  padding: 6px 8px;
  border-radius: 10px;
}
.senti-bar {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--rv-color-gray-100); margin: 8px 0 6px;
}
.senti-pos { background: var(--rv-senti-positive); }
.senti-neu { background: var(--rv-senti-neutral); }
.senti-neg { background: var(--rv-color-amber-500); }
.senti-unknown { background: repeating-linear-gradient(45deg, var(--rv-color-gray-300) 0 3px, transparent 3px 6px); }
.senti-pending { background: repeating-linear-gradient(90deg, var(--rv-color-gray-400) 0 3px, transparent 3px 6px); }
.senti-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; margin-bottom: 6px; }
.own-insights-summary { margin: 8px 0; font-size: 13.5px; line-height: 1.55; text-wrap: pretty; overflow-wrap: anywhere; }
.own-insights-summary.compact {
  display: -webkit-box;
  overflow: hidden;
  margin-block: 5px 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  font-size: 11.5px;
  line-height: 1.45;
}
.consensus-correction {
  margin: 9px 0;
  padding: 10px 11px;
  border-radius: var(--rv-radius-s);
  background: var(--rv-color-gray-50);
  box-shadow: 0 0 0 1px light-dark(rgb(0 0 0 / .07), rgb(255 255 255 / .09));
}
.consensus-correction p {
  margin: 4px 0 3px;
  font-size: 12.5px;
  line-height: 1.5;
  text-wrap: pretty;
}
.consensus-correction .mono { font-size: 10.5px; line-height: 1.4; }
.consensus-correction.compact { margin: 5px 0 0; padding: 8px 9px; }
.consensus-correction.compact p { font-size: 11.5px; line-height: 1.45; }
.analysis-migration-note {
  margin: 8px 0;
  padding: 9px 11px;
  border: 1px dashed var(--rv-color-gray-400);
  border-radius: var(--rv-radius-s);
  background: var(--rv-color-gray-50);
  color: var(--rv-font-color-light);
  font-size: 11.5px;
  line-height: 1.45;
  text-wrap: pretty;
}
.own-reply { align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; padding: 9px 0; border-top: 1px solid var(--rv-color-hairline); }
.own-reply .tt-post-body { flex: 1 1 240px; }
/* The translation card takes its own full row below the original reply,
   so CJK/no-space originals never collapse into a one-character column. */
.own-reply .translation-block { order: 3; flex: 1 1 100%; }
.reply-section-label { margin-top: 12px; }
.reply-sentiment-pill {
  margin-left: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.reply-sentiment-pill.unclassified {
  border: 1px dashed var(--rv-color-gray-400);
  background: repeating-linear-gradient(135deg, var(--rv-color-gray-100) 0 4px, var(--rv-color-panel) 4px 8px);
  color: var(--rv-font-color-lighter);
}
.reply-sentiment-pill.unclassified::before {
  border: 1px solid currentColor;
  background: transparent;
}
.reply-sentiment-pill.pending {
  border: 1px solid var(--rv-color-gray-300);
  background: var(--rv-color-gray-100);
  color: var(--rv-font-color-lighter);
}
.reply-sentiment-pill.pending::before {
  background: currentColor;
  opacity: .55;
}
.reply-explorer {
  min-width: 0;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
  background: var(--rv-color-panel);
}
.reply-explorer-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 8px;
  background: var(--rv-color-gray-50);
}
.reply-filter-group {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.reply-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-panel);
  color: var(--rv-font-color-light);
  font-size: var(--rv-font-size-x-small);
  font-weight: 550;
  transition-property: background-color, border-color, color, transform;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
}
.reply-filter-chip:hover { background: var(--rv-color-gray-100); }
.reply-filter-chip:active { transform: scale(.96); }
.reply-filter-chip.is-active {
  border-color: var(--rv-color-alpha-1000);
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
}
.reply-filter-count {
  min-width: 1.5ch;
  font-family: var(--rv-font-mono);
  font-size: .625rem;
  font-variant-numeric: tabular-nums;
  opacity: .68;
}
.reply-sort-select {
  flex: none;
  min-height: 36px;
  max-width: 152px;
  background-color: var(--rv-color-panel);
}
.reply-results-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 29px;
  padding: 5px 12px 7px;
  border-bottom: 1px solid var(--rv-color-hairline);
  background: var(--rv-color-gray-50);
}
.reply-results-line .mono { font-size: 10px; }
.reply-explorer-list {
  max-height: 440px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 0 13px 10px;
}
.reply-entry[hidden] { display: none; }
.reply-filter-empty {
  margin: 0;
  padding: 28px 10px;
  color: var(--rv-font-color-lighter);
  font-size: var(--rv-font-size-x-small);
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}
.reply-source-entry + .reply-source-entry { margin-top: 8px; }
.reply-source-entry:first-child { margin-top: 10px; }
.captured-reply-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.captured-replies {
  margin-top: 12px; border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m); overflow: hidden;
}
.captured-replies summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; cursor: pointer; font-size: 12px; font-weight: 600;
  background: var(--rv-color-gray-50); list-style: none;
}
.captured-replies summary::-webkit-details-marker { display: none; }
.captured-replies summary::after { content: "↓"; margin-left: auto; color: var(--rv-font-color-lighter); }
.captured-replies[open] summary::after { content: "↑"; }
.captured-replies > .reply-explorer {
  margin-top: 0;
  border: 0;
  border-top: 1px solid var(--rv-color-hairline);
  border-radius: 0;
}
.captured-replies-list { max-height: 440px; overflow: auto; padding: 0 13px; }
.captured-reply { padding: 11px 0; border-top: 1px solid var(--rv-color-hairline); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.reply-explorer-list .captured-reply:first-child,
.reply-explorer-list .own-reply:first-child { border-top: 0; }
.captured-reply-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; font-size: 10.5px; }
/* First span (author) absorbs the slack so time + ↗ hug the right edge. */
.captured-reply-head > .mono:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.captured-reply-head .external-action--icon { margin-left: 0; }
.captured-reply .op-media-grid,
.captured-reply .post-thumb,
.captured-reply .media-full { margin-top: 9px; }
.captured-reply-link { margin-top: 7px; }
@media (max-width: 700px) {
  #social-modal .profile-head { align-items: flex-start; flex-wrap: wrap; gap: 10px 12px; min-width: 0; }
  #social-modal .profile-head > :nth-child(2) { flex: 1; overflow: hidden; }
  #social-modal .profile-head > :nth-child(2) .mono {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #social-modal .social-modal-meta {
    flex: 1 1 calc(100% - 44px);
    justify-content: flex-start;
    max-width: calc(100% - 44px);
    margin-left: 44px;
  }
  .reply-explorer-toolbar { flex-direction: column; align-items: stretch; }
  .reply-filter-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .reply-filter-group::-webkit-scrollbar { display: none; }
  .reply-filter-chip,
  .reply-sort-select { min-height: 40px; }
  .reply-sort-select { width: 100%; max-width: none; }
  .reply-results-line > :last-child { display: none; }
  .captured-reply-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .captured-reply-meta { justify-content: flex-start; }
  .analysis-loading-actions,
  .analysis-error { align-items: stretch; flex-direction: column; }
  .analysis-loading-actions .btn,
  .analysis-error .btn { width: 100%; }
}
/* Thread continuations: a flat X-style rail — one thin line, no nested boxes.
   The author is never repeated (a continuation is by definition the root
   author), so each entry is just text, media, and a quiet time/link row. */
[data-grouped-thread] { margin: 4px 0 18px; }
.thread-rail { position: relative; padding-left: 20px; }
.thread-rail::before {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px; left: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--rv-color-gray-200);
}
.thread-post { padding: 2px 0 16px; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.thread-post:last-child { padding-bottom: 2px; }
.thread-post-body { white-space: pre-wrap; }
.thread-post-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 10.5px; }
.thread-post-meta .external-action--icon {
  min-height: 0;
  margin-left: 0;
  padding: 3px;
  background: none;
  box-shadow: none;
}
.thread-post .media-full { max-height: 280px; width: auto; }
.thread-post .media-full-link { display: inline-block; margin-top: 9px; }
.thread-post .x-structured-attachment { margin-top: 9px; }
.thread-post .x-quote-card { padding: 9px 11px; font-size: 12px; }
.external-thread-context {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-s);
  background: var(--rv-color-gray-50);
}
#social-posts .draft-row { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
#social-posts .draft-row:hover .social-post { background: var(--rv-color-gray-50); }

/* Shared refresh split-button and source picker */
.refresh-group { position: relative; display: inline-flex; align-items: stretch; }
.refresh-main { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 16px; }
.refresh-caret {
  width: 40px; min-width: 40px; padding: 0; border-top-left-radius: 0;
  border-bottom-left-radius: 0; border-left-color: var(--rv-color-hairline);
}
.refresh-caret.btn-primary { border-left-color: light-dark(rgb(255 255 255 / .25), rgb(0 0 0 / .28)); }
.refresh-caret-icon {
  display: inline-grid; place-items: center; transform: rotate(0deg);
  transition-property: transform; transition-duration: 160ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.refresh-group.is-open .refresh-caret-icon { transform: rotate(180deg); }
.refresh-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  width: min(390px, calc(100vw - 24px)); max-height: min(610px, calc(100vh - 104px));
  padding: 8px; overflow: auto; border: 0; border-radius: 16px;
  background: var(--rv-color-panel); color: var(--rv-font-color);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 10px 28px rgb(0 0 0 / .12), 0 2px 8px rgb(0 0 0 / .06);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition-property: opacity, transform; transition-duration: 140ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
html[data-theme="dark"] .refresh-menu { box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 14px 34px rgb(0 0 0 / .45); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .refresh-menu { box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 14px 34px rgb(0 0 0 / .45); }
}
.refresh-menu.open { opacity: 1; transform: translateY(0) scale(1); }
.refresh-menu-head { display: grid; gap: 3px; padding: 7px 10px 11px; }
.refresh-menu-title { font-size: 13px; font-weight: 650; line-height: 1.2; text-wrap: balance; }
.refresh-menu-subtitle { color: var(--rv-font-color-lighter); font: 10px/1.4 var(--rv-font-mono); text-wrap: pretty; }
.refresh-menu-actions { display: grid; gap: 2px; }
.refresh-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition-property: background-color, transform; transition-duration: 120ms; transition-timing-function: ease-out;
}
.refresh-menu-item.quick { min-height: 56px; padding: 8px 10px; border-radius: 8px; }
.refresh-menu-item.compact { min-height: 50px; padding: 7px 8px; border-radius: 8px; }
.refresh-menu-item:hover, .refresh-menu-item:focus-visible { background: var(--rv-color-gray-100); outline: none; }
.refresh-menu-item:focus-visible { box-shadow: inset 0 0 0 1px var(--rv-color-gray-400); }
.refresh-menu-item:active { transform: scale(.96); }
.refresh-menu-item:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.refresh-menu-icon {
  display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px;
  border-radius: 8px; background: var(--rv-color-gray-100); color: var(--rv-font-color-light);
}
.refresh-menu-item:hover .refresh-menu-icon, .refresh-menu-item:focus-visible .refresh-menu-icon { background: var(--rv-color-panel); }
.refresh-menu-symbol { font: 600 15px/1 var(--rv-font-mono); }
.refresh-source-logo { width: 16px; height: 16px; }
.refresh-menu-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
.refresh-menu-label { overflow: hidden; font-size: 12.5px; font-weight: 550; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.refresh-menu-desc {
  overflow: hidden; color: var(--rv-font-color-lighter); font: 9.5px/1.3 var(--rv-font-mono);
  /* Two lines before truncating — single-line ellipsis chopped every description. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.refresh-menu-meta {
  flex: none; padding: 3px 6px; border-radius: var(--rv-radius-full);
  background: var(--rv-color-gray-100); color: var(--rv-font-color-lighter);
  font: 8.5px/1.2 var(--rv-font-mono); letter-spacing: .04em; text-transform: uppercase;
}
.refresh-menu-section {
  display: flex; align-items: center; justify-content: space-between; margin: 8px 4px 3px;
  padding: 9px 6px 5px; border-top: 1px solid var(--rv-color-hairline);
  color: var(--rv-font-color-lighter); font: 9px/1.2 var(--rv-font-mono);
  letter-spacing: .055em; text-transform: uppercase;
}
.refresh-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }

/* Top-channel / stat logo */
.stat-channel { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; overflow: hidden; font-size: 1.65rem; white-space: nowrap; }
.channel-logo.lg { width: 26px; height: 26px; }
.channel-logo.lg svg { width: 100%; height: 100%; }

/* Our Posts page */
.ourposts-toolbar { min-height: 44px; }
.x-account-consensus { margin-bottom: var(--hq-stack-gap); }
.x-account-consensus .social-digest { padding-block: 14px 16px; }
.x-account-consensus .social-digest p { max-width: 92ch; }
/* Masonry: cards keep their natural height (text-only posts stay short, media
   posts grow) and flow into equal-width columns with uniform gaps — no forced
   equal-height grid rows leaving dead space. */
.ourposts-grid {
  column-width: 340px;
  column-gap: var(--hq-grid-gap);
  padding: 12px var(--hq-pad-x) var(--hq-pad-x);
}
.op-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--rv-color-panel-border); border-radius: var(--rv-radius-l);
  background: var(--rv-color-panel); color: var(--rv-font-color);
  transition-property: border-color, transform;
  transition-duration: .16s;
  transition-timing-function: cubic-bezier(.2,0,0,1);
  /* Keep a card whole within one column and space it from the next. */
  break-inside: avoid;
  margin-bottom: var(--hq-grid-gap);
}
.op-card:hover { border-color: var(--rv-color-gray-400); }
.op-card-open {
  display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.op-card-open:active { transform: scale(.99); }
.op-card-open:focus-visible, .mention-card:focus-visible, .social-post[data-social-open]:focus-visible {
  outline: 2px solid var(--rv-color-gray-500); outline-offset: -2px; border-radius: inherit;
}
.op-card-media { position: relative; background: var(--rv-color-gray-100); }
.op-card-media .media-embed, .op-card-media .media-video, .op-card-media .media-full { margin: 0; border-radius: 0; }
.op-card-media .media-full-link { display: block; }
.op-card-media .post-thumb { width: 100%; height: 200px; border-radius: 0; }
.op-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rv-color-hairline); }
.op-media-grid.one { grid-template-columns: 1fr; }
.op-media-grid.three .op-media-item:first-child { grid-row: span 2; }
.op-media-item { position: relative; min-height: 112px; overflow: hidden; background: var(--rv-color-gray-100); }
.op-media-grid.one .op-media-item { min-height: 210px; }
.op-media-item img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; display: block; outline: 1px solid rgb(0 0 0 / .1); outline-offset: -1px; }
html[data-theme="dark"] .op-media-item img { outline-color: rgb(255 255 255 / .1); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .op-media-item img { outline-color: rgb(255 255 255 / .1); }
}
.modal .op-media-item,
.captured-reply .op-media-item { max-height: 280px; }
.op-media-item.video::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 18px; text-shadow: 0 1px 5px rgb(0 0 0 / .45); }
.op-media-more { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: var(--rv-radius-full); background: rgb(0 0 0 / .72); color: #fff; font: 10px/1.5 var(--rv-font-mono); }
.op-card-body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.op-card-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.op-card-head .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-card-text { font-size: 13px; line-height: 1.5; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.x-structured-attachment {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.x-structured-attachment > a,
.x-structured-attachment > .is-static,
.x-poll-card {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--rv-radius-m);
  color: inherit;
  background: color-mix(in srgb, var(--rv-color-panel) 88%, var(--rv-color-canvas));
  box-shadow:
    0 0 0 1px light-dark(rgb(0 0 0 / .06), rgb(255 255 255 / .08)),
    0 1px 2px -1px rgb(0 0 0 / .06),
    0 2px 4px rgb(0 0 0 / .04);
  text-decoration: none;
  line-height: 1.4;
  text-wrap: pretty;
}
.x-structured-attachment > a:hover {
  background: color-mix(in srgb, var(--rv-color-panel) 76%, var(--rv-color-canvas));
  box-shadow:
    0 0 0 1px light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .13)),
    0 1px 2px -1px rgb(0 0 0 / .08),
    0 2px 4px rgb(0 0 0 / .06);
}
.x-structured-attachment > a {
  transition-property: background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.x-structured-attachment { overflow-wrap: anywhere; }
.x-link-card > .mono { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-quote-card .x-quote-text,
.x-link-card > span:not(.mono):not(.external-action__icon) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.x-poll-card > span:not(.mono) {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.x-poll-card .mono { font-variant-numeric: tabular-nums; }
.op-card .post-metrics { margin-top: 2px; }
.op-card .metric { background: var(--rv-color-gray-50); }
.op-senti { height: 8px; margin: 4px 0 2px; }
.op-reply-line { font-size: 11px; }
.op-card-foot {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 7px 9px 7px 16px;
  border-top: 1px solid var(--rv-color-hairline);
}
.op-card-foot .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-card-foot .spacer { margin-left: auto; }
.op-card-foot .btn { min-width: 40px; padding-inline: 12px; }
.op-card-attachment { position: relative; z-index: 1; padding: 0 16px 14px; }
.op-card-attachment .x-structured-attachment { margin-top: 0; }
.op-freshness { display: inline-flex; align-items: center; gap: 6px; }
.op-freshness::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rv-color-green-500); }
.op-empty { column-span: all; }
.social-modal-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.social-modal-label-row .microlabel { margin: 0; }
/* Consensus theme chips under the @reve account summary. */
.theme-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Mentions uses the same post-first system as Our Posts, with impact and
   community-listening cues layered on top. */
.mentions-scope-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
  background: var(--rv-color-gray-50);
}
.mentions-scope-tabs { flex: none; margin-bottom: 0; }
.mentions-scope-row > .mono { max-width: 58ch; text-align: right; text-wrap: pretty; }
.mentions-grid { column-width: 330px; }
.ourposts-grid .empty-state,
.mentions-grid .empty-state { column-span: all; }
.mention-card { position: relative; }
.mention-card::before {
  content: ""; position: absolute; z-index: 2; inset: 0 auto 0 0; width: 3px;
  background: transparent; pointer-events: none;
}
.mention-card.impact-major::before { background: var(--rv-color-amber-500); }
.mention-card.impact-notable::before { background: light-dark(#64748b, #94a3b8); }
.mention-card.is-unlinked::before {
  background: repeating-linear-gradient(to bottom, var(--rv-color-gray-500) 0 4px, transparent 4px 8px);
}
.unlinked-interaction-tag {
  border: 1px dashed var(--rv-color-gray-400);
  background: var(--rv-color-panel);
}
.unlinked-interaction-note { min-height: 38px; }
.unlinked-interaction-note .mono { line-height: 1.45; white-space: normal; }
.mention-card-topline { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mention-card-topline > .mono { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-card-topline .sentiment-scope { flex: none; }
.impact-pill {
  display: inline-flex; align-items: center; flex-shrink: 0; padding: 3px 7px;
  border: 1px solid var(--rv-color-hairline); border-radius: var(--rv-radius-full);
  font: 600 9px/1.2 var(--rv-font-mono); letter-spacing: .035em; text-transform: uppercase;
  color: var(--rv-font-color-light); background: var(--rv-color-gray-50);
}
.impact-pill.major { border-color: light-dark(#f0c36b, #745515); color: light-dark(#8a5105, #fcd27f); background: light-dark(#fff8e7, #2d230d); }
.impact-pill.notable { border-color: light-dark(#cbd5e1, #475569); color: light-dark(#475569, #cbd5e1); }
.mention-card .op-card-head .person-name { flex-shrink: 0; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.social-post-head .person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-kind {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-full);
  color: var(--rv-font-color-light);
  font: 600 9px/1.2 var(--rv-font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.activity-kind.original { color: light-dark(#166534, #86efac); border-color: light-dark(#bbf7d0, #166534); }
.activity-kind.reply { color: light-dark(#1d4ed8, #93c5fd); border-color: light-dark(#bfdbfe, #1e3a8a); }
.op-card-text.is-missing { color: var(--rv-font-color-light); font-style: italic; }
.social-modal-text.is-missing { color: var(--rv-font-color-light); font-style: italic; }
.mention-card-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mention-listen-preview { min-height: 22px; display: flex; align-items: center; padding-top: 3px; }
.mention-listen-preview .mono { font-size: 10.5px; }
.mention-card-foot .mention-listen-button { min-width: auto; }
.mention-card-foot > .mono { font-size: 10.5px; }

@media (max-width: 1100px) {
  #view-mentions .panel-header { flex-wrap: wrap; }
  #view-mentions .panel-header .spacer { flex-basis: 100%; height: 0; }
  #mentions-search { max-width: none; flex: 1 1 220px; }
}

@media (max-width: 900px) {
  .mentions-scope-row { align-items: flex-start; flex-direction: column; }
  .mentions-scope-row > .mono { max-width: none; text-align: left; }
  .ourposts-grid { column-width: 300px; }
  .chart-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-insight:nth-child(2) { border-right: 0; }
  .chart-insight:nth-child(-n + 2) { border-bottom: 1px solid var(--rv-color-hairline); }
}
@media (max-width: 640px) {
  .main { padding-inline: 16px; }
  .ourposts-grid { columns: 1; padding: 12px; }
  .op-media-grid.one .op-media-item { min-height: 190px; }
  /* Keep phone cards scannable: identity, excerpt and primary action stay
     visible early — media is capped and the reply digest lives in Details. */
  .op-card-media { max-height: 240px; overflow: hidden; }
  .op-card-text { -webkit-line-clamp: 4; }
  .mention-card .mention-listen-preview,
  .mention-card .own-insights-summary.compact,
  .mention-card .consensus-correction.compact,
  .mention-card .op-reply-line { display: none; }
  /* …but the unlinked-parent warning is load-bearing — keep it. */
  .mention-card .mention-listen-preview.unlinked-interaction-note { display: block; }
  .boot-stats { grid-template-columns: repeat(2, 1fr); }
  .app-progress { left: 50%; max-width: calc(100vw - 32px); }
  .chart-insight { padding: 10px 12px; }
  .trend-panel .panel-header { align-items: flex-start; }
  .chart-inspector-panel .chart-wrap { padding-inline: 8px; }
  .chart-inspector-panel .chart-wrap svg { height: 270px; }
  .trend-panel .chart-footer .spacer { flex-basis: 100%; height: 0; }
  .trend-panel .chart-footer .range-tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .trend-panel .chart-footer .range-tabs::-webkit-scrollbar { display: none; }
  .chart-tooltip { max-width: calc(100vw - 16px); }
  .tt-open-long { display: none; }
  .tt-open-short { display: inline; }
  .refresh-menu { width: min(390px, calc(100vw - 88px)); }
  .channel-strip { grid-template-columns: 1fr; }
  .stat-tile { min-width: 0; overflow: hidden; padding: 16px 14px; }
  .stat-tile .stat-label,
  .stat-tile .stat-delta {
    display: block;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    text-wrap: pretty;
    line-height: 1.35;
    -webkit-line-clamp: none;
  }
  .stat-tile .stat-label { min-height: 2.7em; }
  .stat-tile .stat-delta { min-height: 2.7em; margin-top: 8px; }
  .stat-value { min-width: 0; font-size: 2rem; }
  .stat-value .stat-channel {
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 1.1rem;
    line-height: 1.15;
    white-space: nowrap;
  }
  .stat-value .stat-channel .channel-logo,
  .stat-value .stat-channel .channel-logo svg { width: 20px; height: 20px; flex: none; }
  .audience-consensus { align-items: flex-start; }
  .audience-consensus-meta { width: 100%; margin-left: 0; white-space: normal; text-wrap: pretty; }
  .analysis-prompt { align-items: stretch; flex-direction: column; }
  .analysis-prompt .btn { width: 100%; }
  .cal-mobile-agenda { display: block; border-top: 1px solid var(--rv-color-hairline); }
  .cal-agenda-title { padding: 14px 16px 8px; }
  .cal-mobile-agenda .draft-row { width: 100%; text-align: left; }
  .cal-mobile-agenda .person-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cal-agenda-more { display: block; margin: 12px auto 18px; }

  /* Phone layouts use touch-first targets without inflating desktop density.
     44px is the WCAG 2.2 AA floor for touch. */
  .btn,
  .btn-small,
  .group-tab,
  .queue-chip,
  .search-input,
  .sort-select,
  .range-tab,
  .modal-close,
  .nav-item,
  .ask-trigger,
  .file-remove { min-width: 44px; min-height: 44px; }
  .range-tabs {
    max-width: 100%;
    margin-left: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .range-tabs::-webkit-scrollbar { display: none; }

  /* Preserve every template action while allowing long copy to ellipsize. */
  .template-row { gap: 10px; padding-inline: 16px; }
  .template-row > .btn { padding-inline: 12px; }

  /* The draft editor controls form two fluid rows instead of one wide row. */
  .draft-editor .panel-header { align-items: flex-start; }
  .draft-editor .panel-header > .panel-title { flex: 1 1 100%; min-width: 0; }
  .draft-editor .panel-header > .spacer { display: none; }
  .draft-editor-controls { flex: 1 1 100%; flex-wrap: wrap; width: 100%; }
  .draft-editor-controls .sort-select { flex: 1 1 110px; min-width: 0; }
  .draft-editor-controls .model-sub { flex: 0 0 auto; }
  .draft-editor-controls .btn { flex: 1 1 92px; }

  /* Brand identity and status stay inside the card on narrow screens. */
  .brand-card { margin-inline: 12px; padding-inline: 14px; }
  .brand-card-head { align-items: flex-start; gap: 10px; }
  .brand-card-head > .spacer { display: none; }
  .brand-id { flex-basis: calc(100% - 40px); }
  .brand-status {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 38px;
    max-width: calc(100% - 38px);
  }
  .brand-foot,
  .brand-history,
  .brand-history summary { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

  /* Keep table identity visible and make horizontal content discoverable. */
  .table-scroll {
    box-shadow: inset -18px 0 16px -20px light-dark(rgb(0 0 0 / .45), rgb(255 255 255 / .42));
    scrollbar-color: var(--rv-color-gray-400) transparent;
    scrollbar-width: thin;
  }
  .table th:first-child,
  .table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--rv-color-panel);
    box-shadow: 1px 0 var(--rv-color-hairline);
  }
  .table thead th:first-child { z-index: 4; }
  .table tbody tr:hover td:first-child { background: var(--rv-color-gray-50); }
}

/* External destinations: one affordance across actions, identity links,
   rich previews, and media. Native anchors keep browser new-tab semantics. */
.external-destination { -webkit-tap-highlight-color: transparent; }
.external-link-blocked { pointer-events: none; cursor: not-allowed; opacity: .48; }

.external-action {
  --external-ring: light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .11));
  --external-ring-hover: light-dark(rgb(0 0 0 / .14), rgb(255 255 255 / .19));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  color: var(--rv-font-color-normal);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.external-action:not(.btn) {
  padding: 0 9px 0 12px;
  border: 0;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-panel);
  box-shadow: 0 0 0 1px var(--external-ring), 0 1px 2px rgb(0 0 0 / .06);
  font-family: var(--rv-font-sans);
  font-size: var(--rv-font-size-x-small);
  font-weight: 560;
}
.external-action:not(.btn):hover {
  background: var(--rv-color-gray-50);
  box-shadow: 0 0 0 1px var(--external-ring-hover);
}
.external-action.btn {
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--external-ring);
}
.external-action.btn:hover {
  box-shadow: 0 0 0 1px var(--external-ring-hover);
}
.external-action.btn-primary,
.external-action.btn-primary:hover {
  border-color: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  box-shadow: none;
}
.external-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--rv-color-blue-600), 0 0 0 4px color-mix(in srgb, var(--rv-color-blue-600) 18%, transparent);
}
.external-action:active,
.external-action.btn:active {
  transform: scale(.96);
}

.external-action__icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-gray-100);
  color: var(--rv-font-color-light);
  transition-property: background-color, color, transform;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.external-action__icon svg {
  width: 13px;
  height: 13px;
  transform: translate(-.25px, .25px);
  transition-property: transform;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.external-action:hover .external-action__icon {
  background: var(--rv-color-gray-200);
  color: var(--rv-font-color-normal);
}
.external-action:hover .external-action__icon svg,
.external-card:hover .external-action__icon svg {
  transform: translate(.75px, -.75px);
}
.external-action:active .external-action__icon svg { transform: translate(-.25px, .25px); }
.external-action.btn-primary .external-action__icon {
  background: light-dark(rgb(255 255 255 / .17), rgb(0 0 0 / .14));
  color: inherit;
}

.external-action--button { padding-right: 14px; }
.external-action--compact.btn {
  height: 40px;
  min-width: 40px;
  padding: 0 9px 0 12px;
  font-size: var(--rv-font-size-x-small);
}
.external-action--chip { background: var(--rv-color-gray-50) !important; }
.external-action--identity {
  max-width: 100%;
  border-radius: var(--rv-radius-m) !important;
  font-family: var(--rv-font-mono) !important;
  font-size: .75rem !important;
}
.external-action--identity > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.captured-reply-link.external-action { font-size: .6875rem; }

.external-card {
  position: relative;
  text-decoration: none;
  transition-property: background-color, border-color, box-shadow, transform;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.external-card:focus-visible {
  outline: var(--rv-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rv-color-blue-600) 18%, transparent);
}
.x-quote-card.external-card,
.x-link-card.external-card { padding-right: 48px; }
.external-card > .external-action__icon {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: var(--rv-radius-s);
  background: var(--rv-color-gray-100);
  box-shadow: 0 0 0 1px light-dark(rgb(0 0 0 / .06), rgb(255 255 255 / .1));
}
.external-card:hover > .external-action__icon,
.external-card:focus-visible > .external-action__icon {
  background: var(--rv-color-gray-200);
  color: var(--rv-font-color-normal);
}
.external-card > .external-action__icon svg { width: 14px; height: 14px; }

.media-full-link.external-card { display: block; overflow: hidden; }
.media-open-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 6px 5px 10px;
  border-radius: var(--rv-radius-full);
  background: rgb(12 12 12 / .78);
  color: #fff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .18), 0 4px 14px rgb(0 0 0 / .2);
  font-size: .6875rem;
  font-weight: 600;
  opacity: .86;
  transform: translateY(2px);
  transition-property: background-color, opacity, transform;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.media-open-badge .external-action__icon { background: rgb(255 255 255 / .16); color: #fff; }
.media-full-link:hover .media-open-badge,
.media-full-link:focus-visible .media-open-badge {
  background: rgb(12 12 12 / .9);
  opacity: 1;
  transform: translateY(0);
}

body.is-booting .app-progress { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}