/* ============================================================
   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;

  /* Intra-component spacing scale, named by px so it is self-documenting.
     The four --hq-* tokens below govern *layout* rhythm (view sections, panel
     padding); these govern spacing *inside* a component, which previously had
     no scale at all — gaps used every integer from 1 to 16.
     New code must pick a step. The odd legacy values still in the file (3, 5,
     7, 9, 11, 14, 18px) are deliberately not snapped yet: unlike font-size,
     a 1px spacing change accumulates down a stack, so they need per-component
     judgement rather than a blanket rewrite. */
  --rv-space-2: 2px;
  --rv-space-4: 4px;
  --rv-space-6: 6px;
  --rv-space-8: 8px;
  --rv-space-10: 10px;
  --rv-space-12: 12px;
  --rv-space-16: 16px;
  --rv-space-20: 20px;
  --rv-space-24: 24px;

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

  /* Type scale. The four original steps (12/14/16/18) covered body text but
     nothing below it, so dense UI invented its own sizes — 9.5, 10.5, 11.5,
     12.5, 13.5px and 4-decimal rems all coexisted. These four extra small
     steps are the sizes the app actually uses; pick one, never a literal.
     Deliberate exceptions that must NOT be snapped onto this scale:
       - .x-* post rendering uses 15px/17px to mirror X's native typography.
       - .view-title 2.125rem and its 1.55rem mobile override are the
         documented display sizes; .stat-value / .stat-channel are hero numerals.
       - .modal-title 1.375rem is the dialog display size. */
  --rv-font-size-4x-small: .5625rem;   /*  9px — counters, calendar annotations */
  --rv-font-size-3x-small: .625rem;    /* 10px — dense mono meta */
  --rv-font-size-2x-small: .6875rem;   /* 11px — micro-labels, table headers */
  --rv-font-size-x-small: .75rem;      /* 12px */
  --rv-font-size-small-minus: .8125rem;/* 13px — compact body/meta */
  --rv-font-size-small: .875rem;       /* 14px */
  --rv-font-size-medium: 1rem;         /* 16px */
  --rv-font-size-large: 1.125rem;      /* 18px */

  /* 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);

  /* Warning surface: the tinted panel behind a caution message. Three rules
     (.analysis-pending-banner, .luma-error-note, .profile-quality-warning) each
     hand-copied this border+background pair; they share the colour treatment but
     not the box layout, so the shared thing is a token, not a class. */
  --rv-color-warn-surface: light-dark(#fffaf0, #201607);
  --rv-color-warn-border: color-mix(in srgb, var(--rv-color-amber-500) 45%, var(--rv-color-panel-border));

  /* 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);
  /* The quiet tier is opaque, not 40% ink like --rv-color-alpha-800: at 40% it
     measured 2.83:1 on canvas and 3.83:1 in dark, so every micro-label, table
     header, chart tick and .dim caption in the app failed WCAG AA. These values
     hold >=4.89:1 on both canvas and panel in both schemes while staying
     visibly quieter than --rv-font-color-light. Verify with any change: 11px
     text needs 4.5:1, so there is no large-text exemption here. */
  --rv-font-color-lighter: light-dark(#6e6e6e, #8a8a8a);
  /* 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: clamp(1240px, 78vw, 1440px);
  --hq-pad-x: 20px;          /* horizontal padding inside panels/cards */
  --hq-stack-gap: var(--rv-space-16);      /* vertical gap between stacked sections  */
  --hq-grid-gap: var(--rv-space-16);       /* gap inside card/tile grids             */
  --hq-header-gap: var(--rv-space-24);     /* 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); }
/* One flex spacer for the whole app. This used to be re-declared per parent in
   13 places, so a .spacer in any container nobody had thought of silently did
   nothing. The handful of parents that need it to behave differently (hidden,
   or a full-width flex break) still override it below by specificity. */
.spacer { margin-left: auto; }

.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: var(--rv-space-16);
  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: var(--rv-space-8);
  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: var(--rv-font-size-3x-small);
  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: var(--rv-space-16);
}

.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: var(--rv-space-2);
  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: var(--rv-space-6);
  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: var(--rv-space-10);
  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; }

/* View transition: one short opacity fade on the whole view, nothing else.
   This replaced a staggered per-section cascade (220ms each, children delayed
   35/70/105ms) that took up to 325ms to settle and made content arrive in
   waves, with every section sliding 6px on every navigation. Switching pages
   should feel instant; the fade only takes the hard edge off the swap.
   Do not reintroduce stagger or translate here. */
@keyframes view-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
.view.active.view-enter {
  animation: view-enter 90ms linear;
}

/* 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: var(--rv-space-16);
  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-actions { margin-left: auto; display: flex; gap: var(--rv-space-8); align-items: center; }

/* ---- Buttons: Reve pills ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rv-space-8);
  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);
}

.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: var(--rv-space-12);
  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); }

/* ---- 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: var(--rv-space-10); }
.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: var(--rv-font-size-3x-small);
  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: var(--rv-space-6);
  font-size: var(--rv-font-size-2x-small);
  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: var(--rv-font-size-2x-small);
  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: var(--rv-space-8);
  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); }
.draft-row-main { min-width: 0; }
.draft-row-main .person-org {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}


/* ---- 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: var(--rv-space-6);
  flex-wrap: wrap;
}

.group-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--rv-space-8);
  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: var(--rv-space-6); }
.attio-dot {
  width: 6px; height: 6px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-green-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: var(--rv-space-10);
  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-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) !important; }

.draft-actions {
  display: flex;
  gap: var(--rv-space-8);
  align-items: center;
}
.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 var(--rv-color-warn-border);
  border-radius: var(--rv-radius-m);
  background: var(--rv-color-warn-surface);
}
.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: var(--rv-space-16);
  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: var(--rv-space-10);
}
.integration-actions {
  display: flex;
  align-items: center;
  gap: var(--rv-space-8);
  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: var(--rv-space-12); flex-wrap: wrap; row-gap: var(--rv-space-10); }
.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; }

.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;
}
.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: var(--rv-space-16);
  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: var(--rv-space-10);
  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: var(--rv-font-size-2x-small); }

.activity-log-loading {
  display: flex;
  align-items: center;
  gap: var(--rv-space-8);
  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: var(--rv-space-10);
  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: var(--rv-font-size-2x-small); 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: var(--rv-font-size-3x-small); 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: var(--rv-font-size-large); }

.cal-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cal-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--rv-space-6);
  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: var(--rv-space-4);
}
.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: var(--rv-font-size-small-minus);
  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: var(--rv-space-6);
  width: 100%;
  padding: 4px 7px;
  border: none;
  border-radius: var(--rv-radius-s);
  background: var(--rv-color-gray-100);
  font-size: var(--rv-font-size-2x-small);
  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: var(--rv-font-size-4x-small);
  font-weight: 700;
  color: #fff;
}
.cal-entry .clip {
  flex: none;
  font-size: var(--rv-font-size-3x-small);
  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: var(--rv-font-size-small);
}
.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: var(--rv-space-8);
  gap: var(--rv-space-8);
  padding: 12px 24px 24px;
}

.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: var(--rv-space-6); margin-bottom: 10px; }
.file-row {
  display: flex;
  align-items: center;
  gap: var(--rv-space-10);
  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: var(--rv-font-size-2x-small);
}
.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: var(--rv-space-8);
  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: var(--rv-font-size-3x-small);
  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: var(--rv-space-10);
  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: var(--rv-space-10);
  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); }
@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: var(--rv-space-10);
  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: var(--rv-font-size-x-small); 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: var(--rv-font-size-small-minus); 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: var(--rv-font-size-2x-small);
  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: var(--rv-font-size-2x-small);
}
.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: var(--rv-font-size-2x-small);
}
.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: var(--rv-font-size-2x-small);
  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: var(--rv-font-size-4x-small);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.chat-sources {
  display: inline-flex;
  align-items: center;
  gap: var(--rv-space-4);
  color: var(--rv-font-color-lighter);
  font-size: var(--rv-font-size-4x-small);
}
.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: var(--rv-space-8);
  margin: 3px 0;
  font-size: var(--rv-font-size-2x-small);
}
.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: var(--rv-font-size-3x-small); }
@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: var(--rv-space-4); 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: var(--rv-space-10);
  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: var(--rv-space-10); }
.login-divider {
  display: flex;
  align-items: center;
  gap: var(--rv-space-10);
}
.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-resizing .app { transition: none; }
body.chat-open .app { margin-right: min(var(--chat-w, 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(var(--chat-w, 390px), 100vw) + 22px); }
.scrape-overlay-head {
  display: flex;
  align-items: center;
  gap: var(--rv-space-8);
  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: var(--rv-font-size-2x-small); white-space: nowrap; }
.scrape-overlay-close {
  border: 0;
  padding: 2px 4px;
  background: none;
  color: var(--rv-font-color-lighter);
  font-size: var(--rv-font-size-x-small);
  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: var(--rv-space-8);
  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: var(--rv-font-size-2x-small); 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: var(--rv-font-size-2x-small);
}
.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: var(--rv-space-8);
  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(var(--chat-w, 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: var(--rv-space-8);
  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: var(--rv-font-size-2x-small);
  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: var(--rv-font-size-2x-small); }

/* Re-analysis mode: one progress bar instead of source rows. */
.reanalysis-progress {
  display: flex;
  align-items: center;
  gap: var(--rv-space-10);
  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: var(--rv-font-size-3x-small); }
.reanalysis-note { padding-bottom: 4px; font-size: var(--rv-font-size-3x-small); 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(var(--chat-w, 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);
}
/* Drag the panel's left edge to set its width, like the app sidebar. */
#side-chat-drag {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
}
#side-chat-drag:hover, #side-chat-drag.dragging { background: var(--rv-color-gray-200); }
/* Small screens don't get the grab strip — it fights touch edge-swipes at the
   screen edge — so they ignore the dragged width and keep the stock sizing. */
@media (max-width: 700px) {
  #side-chat-drag { display: none; }
  .side-chat { width: min(390px, 100vw); }
}
.side-chat-head {
  display: flex;
  align-items: center;
  gap: var(--rv-space-10);
  min-width: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rv-color-hairline);
}
.side-chat-title { font-weight: 650; flex: none; }
.side-chat-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  font-size: var(--rv-font-size-2x-small);
  flex: none;
}
.side-chat-head .model-pick {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 138px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-chat-new { font-size: var(--rv-font-size-small); }
.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: var(--rv-space-8);
  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 {
  border-radius: 14px;
}
.side-chat-input textarea:focus-visible { border-color: var(--rv-color-gray-400); outline: var(--rv-focus-ring); outline-offset: 2px; }
.side-chat-send {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  font-size: var(--rv-font-size-medium);
  line-height: 1;
  flex: none;
}
.side-chat-hint {
  padding: 2px 16px 10px;
  font-size: var(--rv-font-size-3x-small);
  color: var(--rv-font-color-light);
}
/* Empty-state hero: centered mark + greeting, then full-width starter cards. */
.chat-hero {
  text-align: center;
  padding: 44px 12px 6px;
}
.chat-hero-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  font-size: 17px;
  margin-bottom: 12px;
}
.chat-hero-title { font-size: var(--rv-font-size-large); font-weight: 700; }
.chat-hero-sub {
  margin-top: 4px;
  font-size: var(--rv-font-size-small-minus);
  color: var(--rv-font-color-light);
  max-width: 260px;
  margin-inline: auto;
  line-height: 1.5;
}
.chat-starters {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-8);
  padding: 10px 2px 8px;
}
.chat-starter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rv-space-10);
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: 11px;
  background: var(--rv-color-gray-50);
  color: var(--rv-font-color);
  font-size: var(--rv-font-size-small-minus);
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.chat-starter:hover { background: var(--rv-color-gray-100); border-color: var(--rv-color-gray-300); }
.chat-starter-go {
  color: var(--rv-color-gray-500);
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.chat-starter:hover .chat-starter-go { transform: translateX(3px); color: var(--rv-font-color); }
.chat-retry { margin-left: 8px; }
.model-sub { font-size: var(--rv-font-size-3x-small); 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: var(--rv-font-size-3x-small);
}
.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;
}

/* Load-bearing, NOT a redundant per-section margin: .community-panel elements
   are rendered inside #community-sections, so the automatic ".view > * + *"
   rhythm applies to that wrapper and never to these siblings. Without this the
   group panels butt together. */
.community-panel + .community-panel { margin-top: var(--hq-stack-gap); }

/* ---- 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. */
.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: var(--rv-space-10);
  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: var(--rv-space-2);
  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; }
/* Infinite-scroll sentinel for the post feeds — sits as the final row. */
.feed-skeleton { padding: 14px var(--hq-pad-x); }
.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: var(--rv-space-12); }
.profile-head > div { min-width: 0; }
.profile-head .profile-name { overflow-wrap: anywhere; }
.profile-avatar .person-avatar { width: 52px; height: 52px; font-size: var(--rv-font-size-medium); }
.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: var(--rv-space-8);
  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: var(--rv-space-8); flex-wrap: wrap; }
.profile-actions { display: flex; gap: var(--rv-space-8); margin-top: 20px; flex-wrap: wrap; }

/* ---- Drafts queue toolbar & chips ---- */
.queue-toolbar {
  display: flex;
  gap: var(--rv-space-8);
  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: var(--rv-space-6);
  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: var(--rv-space-6);
  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: var(--rv-font-size-3x-small); opacity: .6; }

/* ---- Regenerate instruction row ---- */
.regen-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rv-space-8);
  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-l);
  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. */
/* Three groups, three columns — they were stacking full-width, so seeing all
   three meant scrolling past two. Auto-stacks at <=1100px via .panel-columns. */
#template-groups {
  display: grid;
  gap: var(--hq-grid-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#template-groups > .panel { margin-top: 0; }
@media (max-width: 1100px) { #template-groups { grid-template-columns: minmax(0, 1fr); } }
.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: var(--rv-space-6); 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: var(--rv-space-2);
  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: var(--rv-font-size-2x-small);
  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: var(--rv-font-size-2x-small);
  fill: var(--rv-color-gray-500);
}
.chart-series-label {
  font-family: var(--rv-font-sans);
  font-size: var(--rv-font-size-x-small);
  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: var(--rv-space-6); 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; }

/* Trends posting calendar: solid chip = live post, dashed = planned. */

/* 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,
.cal-entry.luma-event .live-mark {
  margin-left: auto;
  font-size: var(--rv-font-size-4x-small);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}
/* Hosted (Luma) events on the master calendar: outlined blue chip — clearly
   an event, not planned or published content. */
.cal-entry.luma-event {
  background: var(--rv-color-blue-50);
  box-shadow: inset 0 0 0 1px var(--rv-color-blue-600);
}

/* 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 */

/* 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; }
.chart-footer { display: flex; align-items: center; gap: var(--rv-space-8); }

.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 ---- */
/* The feed is the content; the rail is channel counts and a short owned-post
   list. At 1.55:1 the feed was ~61% and post text wrapped to three short lines
   while the rail ran mostly empty. Give the reading column the width, and cap
   the rail so it stops growing on wide screens. */
.social-workspace { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.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: var(--rv-space-10); }
  .panel-header { flex-wrap: wrap; row-gap: var(--rv-space-8); padding: 10px var(--hq-pad-x); }
  .queue-toolbar { flex-wrap: wrap; row-gap: var(--rv-space-8); }
  .chart-footer { flex-wrap: wrap; row-gap: var(--rv-space-8); }
  .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; }
  .cal-entry .entry-title, .cal-entry .who { display: none; }
  .cal-entry .channel-logo { display: none; }
  .profile-fields { grid-template-columns: 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; }
}
/* Stacked tile — sized for the rail's two-up grid (~130-160px per card),
   where a horizontal icon|name|numbers row had no room for the name. */
.channel-card {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-2);
  padding: 12px 14px;
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  min-width: 0;
}
.channel-card-top {
  display: flex;
  align-items: center;
  margin-bottom: var(--rv-space-4);
}
.channel-card-count {
  font-size: var(--rv-font-size-large);
  line-height: 1;
  letter-spacing: -.01em;
}
.channel-card .stat-delta { margin-top: 0; 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: var(--rv-space-10); }
.post-card-head .person-avatar { width: 30px; height: 30px; font-size: var(--rv-font-size-2x-small); }
.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: var(--rv-space-6); 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: var(--rv-font-size-3x-small);
  color: #fff;
  background: rgb(0 0 0 / .45);
  border-radius: var(--rv-radius-full);
  padding: 2px 7px;
}

.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: var(--rv-space-8);
  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: var(--rv-space-6); }

.social-post {
  display: flex;
  align-items: flex-start;
  gap: var(--rv-space-12);
  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: center; gap: var(--rv-space-8); flex-wrap: wrap; }
/* Even row heights make a feed scannable; the full text is in the detail modal. */
.social-post-text {
  margin-top: 2px;
  line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.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-scope-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rv-space-6);
  margin-top: 7px;
}

.post-media { display: flex; gap: var(--rv-space-6); 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: var(--rv-font-size-small-minus);
  color: #fff;
  text-shadow: 0 1px 4px rgb(0 0 0 / .45);
}
.post-media.large .media-thumb.video::after { font-size: var(--rv-font-size-large); }
.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: var(--rv-font-size-3x-small); }

.social-channel-row {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-2);
  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: var(--rv-space-10); }
.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 .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: var(--rv-space-8); }
.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);
}

/* ---- Reve annotation strip — our data OVER the post, never inside it ---- */
.reve-lens {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rv-space-8);
  margin: -16px -18px 14px;
  padding: 8px 14px;
  border-bottom: 1px dashed var(--rv-color-hairline);
  border-radius: var(--rv-radius-l) var(--rv-radius-l) 0 0;
  background: light-dark(#fafaf8, #16181c);
}
.post-surface.x-native .reve-lens { margin: 0; }
.reve-lens-brand {
  font-size: var(--rv-font-size-3x-small);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rv-font-color-light);
}

/* ---- Native-X detail surface --------------------------------------------
   Mirrors x.com's post detail view: stacked name/handle, 17px text with
   blue entities, timestamp row, engagement summary between hairlines, and
   an intent-wired action bar with X's hover colors. */
.post-surface.x-native { padding: 0; }
.x-post { padding: 14px 18px 4px; }
.x-post-head { display: flex; align-items: center; gap: var(--rv-space-10); }
.x-post-head .person-avatar { width: 44px; height: 44px; font-size: 15px; }
.x-post-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.x-name { font-weight: 700; font-size: .9375rem; }
.x-handle { color: light-dark(#536471, #71767b); font-size: .9375rem; }
.x-post-text {
  font-size: 1.0625rem;
  line-height: 1.45;
  margin: 12px 0 2px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.x-entity { color: #1d9bf0; }
.x-post .media-track, .x-post .media-slide { border-radius: 16px; }
.x-post-meta {
  margin-top: 12px;
  color: light-dark(#536471, #71767b);
  font-size: .9375rem;
}
.x-post-meta b { color: var(--rv-font-color); font-weight: 700; }
.x-post-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 12px;
  padding: 12px 2px;
  border-top: 1px solid var(--rv-color-hairline);
  color: light-dark(#536471, #71767b);
  font-size: var(--rv-font-size-small);
}
.x-post-summary b { color: var(--rv-font-color); font-weight: 700; }
.x-post-summary + .x-actions, .x-post-meta + .x-actions { margin-top: 0; }
.x-actions {
  display: flex;
  justify-content: space-between;
  max-width: 460px;
  margin-top: 12px;
  padding: 3px 0;
  border-top: 1px solid var(--rv-color-hairline);
}
.x-post-summary + .x-actions { border-top: 1px solid var(--rv-color-hairline); }
.x-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  padding: 9px 10px;
  border-radius: var(--rv-radius-full);
  color: light-dark(#536471, #71767b);
  font-size: var(--rv-font-size-small-minus);
  cursor: pointer;
  transition: color .12s ease, background-color .12s ease;
}
.x-action svg { width: 18px; height: 18px; }
.x-action-count:empty { display: none; }
.x-action--reply:hover, .x-action--share:hover, .x-action--bookmark:hover {
  color: #1d9bf0;
  background: rgb(29 155 240 / .1);
}
.x-action--repost:hover { color: #00ba7c; background: rgb(0 186 124 / .1); }
.x-action--like:hover { color: #f91880; background: rgb(249 24 128 / .1); }

/* Native-X reply cells — the full comments list in the insights explorer.
   Hairline-separated cells like an x.com conversation; the sentiment pill
   and Reve flags are the only non-native elements, kept to the edges. */
.reply-entry.x-reply-cell {
  display: flex;
  align-items: flex-start;
  gap: var(--rv-space-10);
  padding: 12px 2px;
  border-top: 1px solid var(--rv-color-hairline);
}
.reply-entry.x-reply-cell:first-child { border-top: 0; padding-top: 6px; }
.x-reply-cell .person-avatar { width: 36px; height: 36px; font-size: var(--rv-font-size-x-small); flex: 0 0 auto; }
.x-cell-flag {
  display: block;
  margin-bottom: 2px;
  font-size: var(--rv-font-size-2x-small);
  color: light-dark(#536471, #71767b);
}

/* Native-X reply rows in the audience explorer */
.social-source.x-reply { display: flex; align-items: flex-start; gap: var(--rv-space-10); }
.x-reply .person-avatar { width: 34px; height: 34px; font-size: var(--rv-font-size-x-small); flex: 0 0 auto; }
.x-reply-main { flex: 1; min-width: 0; display: block; }
.x-reply-head { display: flex; align-items: center; gap: var(--rv-space-6); flex-wrap: wrap; }
.x-reply-head .x-name, .x-reply-head .x-handle { font-size: var(--rv-font-size-small); }
.x-reply-text {
  display: block;
  margin-top: 2px;
  font-size: .9375rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.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: var(--rv-font-size-x-small); 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: var(--rv-font-size-medium);
}
.consensus-panel {
  display: grid;
  gap: var(--rv-space-10);
  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: var(--rv-space-6);
  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); }
/* A tile acting as a filter has to show whether it is on — otherwise the table
   is filtered with nothing on screen saying so. */
.stat-tile.is-active {
  border-color: var(--rv-color-alpha-1000);
  box-shadow: inset 0 0 0 1px var(--rv-color-alpha-1000);
}

.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);
}

.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: var(--rv-color-red-strong); }
.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: var(--rv-space-8); flex-wrap: wrap; }
.brand-domain { font-weight: 600; color: var(--rv-font-color-normal); text-decoration: none; }
.brand-takedown-tag { background: light-dark(#1a1a1a, #ededed); color: light-dark(#fff, #111); border-color: transparent; }
.brand-reason { margin-top: 4px; font-size: var(--rv-font-size-small-minus); line-height: 1.5; }
.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: var(--rv-font-size-2x-small); 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: var(--rv-space-6);
  margin-top: 7px;
}
.usage-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rv-space-12);
  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: var(--rv-space-12); margin-top: 6px; font-size: var(--rv-font-size-2x-small); }
.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: var(--rv-space-4);
}
.brand-withdrawn-tag {
  border: 1px solid var(--rv-color-amber-500);
  color: var(--rv-color-amber-strong);
}
.brand-stale-banner,
.analysis-pending-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px var(--hq-pad-x);
  border: 1px solid var(--rv-color-warn-border);
  border-radius: var(--rv-radius-l);
  background: var(--rv-color-warn-surface);
}
.brand-stale-banner .btn,
.analysis-pending-banner .btn { margin-left: auto; }
.analysis-pending-banner .cat-progress {
  flex: 1 1 160px;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--rv-color-amber-500) 18%, transparent);
  overflow: hidden;
}
.analysis-pending-banner .cat-progress-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--rv-color-amber-strong);
  transition: width .6s ease;
}

/* ---- Reve AI digests -------------------------------------------------------
   AI-written summaries/digests/briefs render on the standard panel surface and
   follow the active colour scheme like everything else. They were previously
   always-dark to mark model output as distinct from captured data; the ✦ mark
   and "Reve AI" label in the header carry that signal now. Every value here is
   a token, so these read correctly in light and dark. */
.ai-brief {
  background: var(--rv-color-panel);
  color: var(--rv-font-color-normal);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  padding: 13px 16px;
}
.ai-brief-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rv-space-8);
  min-height: 24px;
}
.ai-brief-title { font-weight: 650; font-size: var(--rv-font-size-small); }
.ai-brief-note { font-size: var(--rv-font-size-2x-small); color: var(--rv-font-color-lighter); }
.ai-brief-quiet { margin: 8px 0 2px; color: var(--rv-font-color-lighter); font-size: var(--rv-font-size-small); }
.ai-brief-summary { margin-top: 8px; font-size: var(--rv-font-size-small); line-height: 1.55; }
.ai-brief-summary p { margin: 0 0 6px; }
.ai-brief-summary ul { margin: 4px 0 2px; padding-left: 18px; }
.ai-brief-summary li { margin: 3px 0; }
.ai-brief-summary strong { color: var(--rv-font-color-normal); }
.ai-brief .btn {
  background: var(--rv-color-gray-50);
  border-color: var(--rv-color-panel-border);
  color: var(--rv-font-color-normal);
}
.ai-brief .btn:hover { background: var(--rv-color-gray-50); border-color: var(--rv-color-panel-border); }
/* Topic chips fill the box edge-to-edge as an even grid — name left,
   count right — instead of ragged pills with leftover space. */
.ai-topic-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--rv-space-8);
  margin-top: 10px;
}
.ai-topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-full);
  background: transparent;
  color: var(--rv-font-color-normal);
  font-size: var(--rv-font-size-x-small);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.ai-topic-chip:hover { background: var(--rv-color-gray-50); border-color: var(--rv-color-panel-border); }
.ai-topic-count {
  color: var(--rv-font-color-lighter);
  font-size: var(--rv-font-size-2x-small);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.ai-topics-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px -16px 0;
  padding: 11px 16px 0;
  border-top: 1px solid var(--rv-color-hairline);
}
.ai-topics-label {
  font-size: var(--rv-font-size-3x-small);
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  margin-right: 3px;
}
.ai-notable {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 9px;
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-lighter);
  line-height: 1.5;
}
.ai-notable strong { color: var(--rv-font-color-normal); }
.ai-notable-sep { color: var(--rv-font-color-lighter); }
button.ai-notable-item {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
button.ai-notable-item:hover { color: var(--rv-font-color-normal); text-decoration: underline; text-underline-offset: 3px; }

/* Structured digest, quiet by design: headline, two ± columns whose colored
   markers ARE the labels, a dim one-line "Also" strip, then a topics chip
   row. One decoration layer, generous line-height, no uppercase shouting. */
.ai-brief-headline { margin-top: 9px; font-size: var(--rv-font-size-large); font-weight: 700; line-height: 1.4; }
.ai-brief-headline strong { color: var(--rv-font-color-normal); }
/* Inset section cards — visible containers so the digest reads as organized
   blocks, not free-floating text on black. */
.ai-brief-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--rv-space-10);
  margin-top: 12px;
}
.ai-sec {
  min-width: 0;
  background: var(--rv-color-gray-50);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: 10px;
  padding: 11px 14px 9px;
}
.ai-sec--notable { margin-top: 10px; padding-bottom: 11px; }
.ai-sec-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  font-size: var(--rv-font-size-3x-small);
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
}
.ai-sec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rv-senti-neutral);
  flex: 0 0 auto;
}
.ai-sec[data-kind="pos"] .ai-sec-dot { background: var(--rv-senti-positive); }
.ai-sec[data-kind="neg"] .ai-sec-dot { background: var(--rv-senti-negative); }
.ai-sec .ai-notable { margin-top: 0; }
.ai-fact {
  display: flex;
  gap: var(--rv-space-8);
  padding: 2.5px 0;
  font-size: var(--rv-font-size-small-minus);
  line-height: 1.5;
  color: var(--rv-font-color-normal);
}
.ai-fact strong { color: var(--rv-font-color-normal); }
.ai-fact-marker { flex: 0 0 auto; font-weight: 700; }
.ai-fact-pos .ai-fact-marker { color: var(--rv-color-green-strong); }
.ai-fact-neg .ai-fact-marker { color: var(--rv-color-amber-strong); }
.ai-fact-note .ai-fact-marker { color: var(--rv-font-color-lighter); }
.ai-fact-link {
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  color: var(--rv-font-color-normal);
  cursor: pointer;
  border-radius: 6px;
}
.ai-fact-link:hover { background: var(--rv-color-gray-50); }
.ai-fact-src {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  font-size: var(--rv-font-size-2x-small);
  color: var(--rv-font-color-lighter);
  opacity: 0;
  transition: opacity .12s ease;
  white-space: nowrap;
}
.ai-fact-link:hover .ai-fact-src,
.ai-fact-link:focus-visible .ai-fact-src { opacity: 1; }
.ai-consensus {
  display: inline-flex;
  align-items: center;
  gap: var(--rv-space-8);
  padding: 3px 11px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-gray-50);
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-normal);
  text-transform: capitalize;
}
.ai-consensus-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rv-senti-neutral); }
.ai-consensus.positive .ai-consensus-dot { background: var(--rv-senti-positive); }
.ai-consensus.mixed .ai-consensus-dot { background: var(--rv-color-amber-500); }
.ai-consensus.negative .ai-consensus-dot { background: var(--rv-senti-negative); }
.ai-tone-bar {
  display: inline-flex;
  width: 84px;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--rv-color-gray-200);
}
.ai-tone-bar > span { display: block; height: 100%; }
.ai-tone-bar .tone-pos { background: var(--rv-senti-positive); }
.ai-tone-bar .tone-neu { background: var(--rv-senti-neutral); }
.ai-tone-bar .tone-neg { background: var(--rv-senti-negative); }

/* Small square icon button in the Reve AI header (＋ new conversation). */
.ai-win-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: 6px;
  background: var(--rv-color-gray-50);
  color: var(--rv-font-color-normal);
  font-size: var(--rv-font-size-x-small);
  line-height: 1;
  cursor: pointer;
}
.ai-win-btn:hover { background: var(--rv-color-gray-50); color: var(--rv-font-color-normal); }
.side-chat .ai-win-btn {
  background: var(--rv-color-gray-50);
  border-color: var(--rv-color-panel-border);
  color: var(--rv-font-color-normal);
}
.side-chat .ai-win-btn:hover { background: var(--rv-color-gray-100); color: var(--rv-font-color); }

/* Slim analysis-backlog progress bar under the brief. */
.analysis-progress {
  display: flex;
  align-items: center;
  gap: var(--rv-space-12);
  padding: 7px 14px;
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
  background: var(--rv-color-panel);
  font-size: var(--rv-font-size-2x-small);
  color: var(--rv-font-color-light);
}
.analysis-progress-label { white-space: nowrap; }
.analysis-progress-track {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 2px;
  background: var(--rv-color-gray-100);
  overflow: hidden;
}
.analysis-progress-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: light-dark(#111, #e5e5e2);
  transition: width .8s ease;
}
.analysis-progress-now {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-brief-inline { margin: 10px 0 12px; }
.ai-brief .ai-loading { margin-top: 8px; }
.ai-brief .ai-loading-head { color: #b3b3ad; }
.ai-brief .shimmer {
  background: linear-gradient(90deg, #1c1c1c 25%, #2c2c2c 50%, #1c1c1c 75%);
  background-size: 200% 100%;
}

/* Aurora loading: slow-drifting color field + film grain under the label. */
.ai-aurora {
  position: relative;
  min-height: 128px;
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.ai-aurora::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  background:
    radial-gradient(42% 58% at 18% 78%, #7fd4c1 0%, transparent 62%),
    radial-gradient(48% 62% at 32% 28%, #d9a06b 0%, transparent 65%),
    radial-gradient(56% 66% at 74% 22%, #5a5bd6 0%, transparent 66%),
    radial-gradient(46% 62% at 82% 82%, #b06a8f 0%, transparent 62%),
    #221d2c;
  animation: aurora-drift 8s ease-in-out infinite alternate,
             aurora-hue 16s linear infinite;
}
@keyframes aurora-drift {
  0% { transform: translate(-4%, -3%) rotate(0deg) scale(1); }
  50% { transform: translate(3%, 4%) rotate(5deg) scale(1.1); }
  100% { transform: translate(-2%, 3%) rotate(-4deg) scale(1.04); }
}
@keyframes aurora-hue {
  from { filter: hue-rotate(0deg) saturate(1.15) blur(2px); }
  to { filter: hue-rotate(360deg) saturate(1.15) blur(2px); }
}
.ai-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .55;
}
.ai-aurora-label {
  display: inline-flex;
  align-items: center;
  gap: var(--rv-space-8);
  color: #fff;
  font-size: var(--rv-font-size-small-minus);
  font-weight: 550;
  text-shadow: 0 1px 14px rgb(0 0 0 / .45);
}
.ai-aurora-label .ai-spark { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .ai-aurora::before { animation: none; }
}
.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: var(--rv-space-12);
  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: var(--rv-font-size-medium); }

/* Chart pan/hover + filter counts */
.chart-day-highlight { fill: light-dark(rgba(26,26,26,.05), rgba(240,240,240,.07)); }
.range-tab.today-tab { font-weight: 600; }
#social-search { max-width: 150px; }

/* Brand watch v3.1: identity block with favicon */
.brand-card-head { display: flex; align-items: center; gap: var(--rv-space-12); 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: var(--rv-space-8); min-width: 0; flex-wrap: wrap; }
.brand-domain { min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-size: var(--rv-font-size-medium); }
.brand-type-row { font-size: var(--rv-font-size-2x-small); 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: var(--rv-font-size-2x-small); color: var(--rv-font-color-lighter); }
.post-metrics .metric { display: inline-flex; align-items: center; gap: var(--rv-space-4); }
.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: var(--rv-font-size-small); 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: var(--rv-space-10);
  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): master list + inline detail pane ---- */
.luma-row-label { padding: 10px var(--hq-pad-x) 4px; }
.events-workspace { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
.events-list-panel #events-list {
  max-height: min(66vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.events-detail-panel .events-detail-body {
  max-height: min(66vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px var(--hq-pad-x) 18px;
}
.events-back { display: none; }
.luma-ev-row {
  display: flex;
  align-items: center;
  gap: var(--rv-space-10);
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  border: none;
  border-bottom: 1px solid var(--rv-color-hairline);
  background: transparent;
}
.luma-ev-row:hover { background: var(--rv-color-gray-50); }
.luma-ev-row.active { background: var(--rv-color-gray-100); }
.luma-ev-thumb {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--rv-radius-s);
  overflow: hidden;
  background: var(--rv-color-gray-100);
  border: 1px solid var(--rv-color-hairline);
}
.luma-ev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.luma-ev-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.luma-ev-main .person-name {
  font-size: var(--rv-font-size-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.luma-ev-main .person-org { display: flex; align-items: center; gap: var(--rv-space-6); font-size: var(--rv-font-size-2x-small); }
.luma-ev-main .legend-dot { width: 6px; height: 6px; flex: none; }
.luma-ev-count { flex: none; }
/* Detail pane header block: cover beside the facts, not stacked. */
.luma-detail-head { display: flex; gap: var(--rv-space-16); align-items: flex-start; margin-bottom: 4px; }
.luma-detail-head .luma-modal-cover { flex: none; width: 200px; margin-bottom: 0; }
.luma-detail-head-main { flex: 1; min-width: 0; }
.luma-guest-note { margin: 12px 0 4px; }
.luma-edit-form { display: grid; gap: var(--rv-space-12); }
.luma-edit-note { margin: 0; }
.luma-inline-row { display: flex; align-items: center; gap: var(--rv-space-8); margin-top: 6px; }
.luma-inline-row .entry-input { flex: 1; min-width: 0; }
.luma-guest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rv-space-10);
  margin-top: 14px;
}
.luma-guest-head .search-input { max-width: 220px; }
.luma-guest-row { align-items: center; padding: 5px 0; border-bottom: 1px solid var(--rv-color-hairline); display: flex; gap: var(--rv-space-10); }
.luma-guest-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--rv-space-10);
  border: none;
  background: none;
  padding: 0;
  text-align: left;
}
.luma-guest-row .sort-select { flex: none; }
.luma-add-guests {
  margin-top: 12px;
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
  padding: 0;
}
.luma-add-guests summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 14px;
  font-weight: 600;
  font-size: var(--rv-font-size-small);
}
.luma-add-guests summary::-webkit-details-marker { display: none; }
.luma-add-guests[open] { padding-bottom: 12px; }
.luma-add-guests textarea { margin: 0 14px; width: calc(100% - 28px); }
.luma-add-guests .luma-inline-row { padding: 0 14px; }
.luma-modal-cover {
  display: block;
  border-radius: var(--rv-radius-m);
  overflow: hidden;
  background: var(--rv-color-gray-100);
  margin-bottom: 14px;
}
.luma-modal-cover img { width: 100%; height: auto; display: block; }
.luma-hosts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rv-space-8); margin-bottom: 10px; }
.luma-host {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 4px;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-full);
  font-size: var(--rv-font-size-x-small);
  font-weight: 550;
}
.luma-host img { width: 20px; height: 20px; border-radius: var(--rv-radius-full); object-fit: cover; }
.luma-host:not(:has(img)) { padding-left: 11px; }
.luma-description {
  margin-top: 12px;
  border: 1px solid var(--rv-color-hairline);
  border-radius: var(--rv-radius-m);
}
.luma-description summary {
  cursor: pointer;
  list-style: none;
  padding: 9px 14px;
  font-weight: 600;
  font-size: var(--rv-font-size-small);
}
.luma-description summary::-webkit-details-marker { display: none; }
.luma-description summary::after { content: " ▾"; opacity: .5; }
.luma-description[open] summary::after { content: " ▴"; }
.luma-description-body { padding: 0 14px 12px; font-size: var(--rv-font-size-small); line-height: 1.55; }
.luma-description-body :is(h3, h4) { margin: 10px 0 4px; }
.luma-description-body p { margin: 6px 0; }
.luma-description-body ul, .luma-description-body ol { margin: 6px 0 6px 18px; }
.luma-tag { color: var(--rv-font-color-light); }
/* Narrow: the list owns the page; selecting opens the detail full-screen. */
@media (max-width: 1100px) {
  .events-detail-panel { display: none; }
  body.events-detail-open .events-detail-panel {
    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.events-detail-open .events-detail-panel .panel-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--rv-color-panel);
  }
  body.events-detail-open .events-detail-panel .events-detail-body { max-height: none; }
  body.events-detail-open .events-back { display: inline-flex; align-items: center; }
  .events-list-panel #events-list { max-height: none; }
  .luma-detail-head { flex-direction: column; }
  .luma-detail-head .luma-modal-cover { width: 100%; }
}

/* Dense attendee rows — this list runs to hundreds. */
#events-people .draft-row { padding-block: 7px; gap: 9px; }
#events-people .person-avatar { width: 24px; height: 24px; font-size: var(--rv-font-size-4x-small); }
#events-people .person-org { font-size: var(--rv-font-size-2x-small); }
.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 var(--rv-color-warn-border);
  border-radius: var(--rv-radius-m);
  background: var(--rv-color-warn-surface);
  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: var(--rv-space-10);
  padding: 14px var(--hq-pad-x);
  border-top: 1px solid var(--rv-color-hairline);
}
.outreach-card .cell-person { display: flex; align-items: center; gap: var(--rv-space-10); }
.outreach-card .outreach-card-id { flex: 1; min-width: 0; }
.outreach-card .outreach-card-meta {
  display: grid;
  gap: var(--rv-space-4);
  padding-left: 2px;
}
.outreach-card .outreach-card-actions { display: flex; gap: var(--rv-space-8); }
.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: 1px solid var(--rv-color-amber-500);
  color: var(--rv-color-amber-strong);
  font-size: var(--rv-font-size-3x-small);
}
.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 var(--rv-color-warn-border);
  border-radius: var(--rv-radius-m);
  background: var(--rv-color-warn-surface);
  font-size: var(--rv-font-size-x-small);
  color: var(--rv-font-color-light);
}
.profile-timeline {
  margin-top: 16px;
  display: grid;
  gap: var(--rv-space-8);
}
.profile-timeline .timeline-row {
  display: flex;
  align-items: baseline;
  gap: var(--rv-space-10);
  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: var(--rv-space-12);
  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: var(--rv-space-8);
  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: var(--rv-font-size-medium);
  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-carousel .media-count {
  position: absolute;
  top: auto; /* the thumbnail .media-count variant sets top: 8px — with both
                top and bottom set the counter stretches into a full-height bar */
  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: var(--rv-font-size-2x-small);
}

.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: var(--rv-font-size-x-small); 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%; }
/* Side column is the thumbnail only — the status pills moved up to the head
   line, so this no longer stacks pills under media in a tall narrow gutter. */
.social-post-side { display: flex; flex: none; align-items: flex-start; max-width: 128px; }
/* 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: 128px; max-width: 100%; border-radius: var(--rv-radius-s); overflow: hidden; }
.social-post-side .op-media-item { min-height: 40px; max-height: 56px; }
.social-post-side .op-media-grid.one .op-media-item { min-height: 64px; max-height: 88px; }
/* Compact rows (Our posts rail preview) carry a smaller thumb — the rail is
   ~300px wide, so the full 128px side column would crush the text. */
.social-post.compact .social-post-side { max-width: 64px; }
.social-post.compact .social-post-side .op-media-grid { width: 64px; }
.social-post.compact .social-post-side .op-media-item { min-height: 22px; max-height: 30px; }
.social-post.compact .social-post-side .op-media-grid.one .op-media-item { min-height: 40px; max-height: 48px; }
.social-post.compact .social-post-side .post-thumb { width: 64px; height: 48px; }

/* 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: var(--rv-font-size-small-minus); 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: var(--rv-space-10);
  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: var(--rv-font-size-2x-small); color: var(--rv-font-color-light);
}
.tt-sentiments { display: flex; gap: var(--rv-space-12); padding: 7px 12px; }
.tt-sentiments .tt-row { display: inline-flex; align-items: center; gap: var(--rv-space-4); margin: 0; }
.tt-sentiments .tt-val { font-weight: 600; margin-left: 1px; }
.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: var(--rv-font-size-2x-small); 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: var(--rv-space-8);
}

/* 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: var(--rv-space-6); }
.chart-toolbar .chart-trend-toggle { margin-left: auto; }
#social-chart-chips,
#mentions-chart-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rv-space-6);
}
.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: var(--rv-font-size-2x-small);
}
.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,
  .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: var(--rv-space-6); }
.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-actions { flex-wrap: wrap; row-gap: var(--rv-space-8); justify-content: flex-end; }

/* Channel cards: count never wraps; long names/sublists ellipsize. */
.channel-card .channel-card-count { white-space: nowrap; flex-shrink: 0; }
.channel-card .person-name,
.channel-card .stat-delta,
.channel-card .mono.dim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; min-width: 0; }

/* 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: var(--rv-space-8);
  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: var(--rv-space-6);
  margin-block: 9px 2px;
  padding: 10px 12px;
  border-radius: 12px;
}
.translation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rv-space-10);
  min-width: 0;
}
.translation-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--rv-font-color);
  font-size: var(--rv-font-size-2x-small);
  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: var(--rv-font-size-small-minus);
  line-height: 1.55;
  text-wrap: pretty;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.translation-block.is-compact .translation-text { font-size: var(--rv-font-size-x-small); 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. */

/* Consensus themes: quiet inline chips under a microlabel, like the digest. */
#ourposts-x-consensus-themes {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-8);
  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: var(--rv-space-6); }
.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: var(--rv-space-8);
  min-height: 28px;
  color: var(--rv-font-color-light);
  font-size: var(--rv-font-size-2x-small);
  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; }
.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: var(--rv-space-16);
  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: var(--rv-font-size-x-small);
  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: var(--rv-space-8);
}
.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: var(--rv-font-size-x-small);
  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: var(--rv-font-size-3x-small);
  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: var(--rv-space-16); row-gap: var(--rv-space-8); font-size: var(--rv-font-size-x-small); }
.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: var(--rv-font-size-2x-small); 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: var(--rv-font-size-3x-small); }
.reply-results:empty { display: none; }
/* Settings → Reve AI context file manager */
.ai-context-list { display: grid; gap: var(--rv-space-10); 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: var(--rv-space-10); }
.ai-context-name { font-weight: 600; font-size: var(--rv-font-size-x-small); }
.ai-context-editor { margin-top: 10px; display: grid; gap: var(--rv-space-8); }
.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: var(--rv-font-size-2x-small);
  line-height: 1.55;
}
.ai-context-actions { display: flex; gap: var(--rv-space-8); }
.post-sentiment-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rv-space-8);
  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: var(--rv-font-size-3x-small);
  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: var(--rv-font-size-2x-small); margin-bottom: 6px; }
.own-insights-summary { margin: 8px 0; font-size: var(--rv-font-size-small-minus); 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: var(--rv-font-size-2x-small);
  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: var(--rv-font-size-x-small);
  line-height: 1.5;
  text-wrap: pretty;
}
.consensus-correction .mono { font-size: var(--rv-font-size-3x-small); line-height: 1.4; }
.consensus-correction.compact { margin: 5px 0 0; padding: 8px 9px; }
.consensus-correction.compact p { font-size: var(--rv-font-size-2x-small); 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: var(--rv-font-size-2x-small);
  line-height: 1.45;
  text-wrap: pretty;
}
/* The translation card takes its own full row below the original reply,
   so CJK/no-space originals never collapse into a one-character column. */
.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: var(--rv-space-10);
  padding: 10px 12px 8px;
  background: var(--rv-color-gray-50);
}
.reply-filter-group {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--rv-space-6);
  min-width: 0;
}
.reply-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rv-space-6);
  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: var(--rv-font-size-3x-small);
  font-variant-numeric: tabular-nums;
  opacity: .68;
}
.reply-results-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rv-space-12);
  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: var(--rv-font-size-3x-small); }
.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: var(--rv-space-8);
}
.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: var(--rv-space-12);
  padding: 11px 13px; cursor: pointer; font-size: var(--rv-font-size-x-small); 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-reply { padding: 11px 0; border-top: 1px solid var(--rv-color-hairline); font-size: var(--rv-font-size-x-small); line-height: 1.5; overflow-wrap: anywhere; }
.reply-explorer-list .captured-reply:first-child,
.captured-reply-head { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-space-12); margin-bottom: 5px; font-size: var(--rv-font-size-3x-small); }
/* 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-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: var(--rv-font-size-small-minus); 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: var(--rv-space-8); margin-top: 7px; font-size: var(--rv-font-size-3x-small); }
.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: var(--rv-font-size-x-small); }
.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: var(--rv-radius-l);
  background: var(--rv-color-panel); color: var(--rv-font-color);
  /* --rv-shadow-dialog is already light-dark()-aware, so this needs no
     per-scheme override — the two that used to live here were only required
     because the shadow was hand-rolled. */
  box-shadow: var(--rv-shadow-dialog);
  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);
}
.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: var(--rv-font-size-small-minus); 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: var(--rv-space-2); }
.refresh-menu-item {
  display: flex; align-items: center; gap: var(--rv-space-10); 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: var(--rv-space-2); min-width: 0; flex: 1; }
.refresh-menu-label { overflow: hidden; font-size: var(--rv-font-size-x-small); 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: var(--rv-space-2); }

/* Top-channel / stat logo */
.stat-channel { display: inline-flex; align-items: center; gap: var(--rv-space-8); 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 .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. */
/* Time-ordered feeds are a LIST, never a multi-column grid. CSS columns flow
   down column 1 then jump back to the top of column 2, so with newest-first
   sorting vertically adjacent cards are NOT chronologically adjacent — and
   because the column count follows viewport width, the same feed reads
   differently at every window size. One column keeps "most recent" at the top,
   full stop. Rows lay out horizontally (media, then content, then actions) so
   the width a single column frees up is actually used. */
.ourposts-grid {
  display: flex;
  flex-direction: 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);
}
.op-card:hover { border-color: var(--rv-color-gray-400); }
/* Feed row: media sits beside the content rather than above it, so the width a
   single-column list frees up is actually used. The action bar stays a
   full-width strip underneath — actions in a predictable place beat a cramped
   vertical rail. */
.op-card-open {
  display: flex; flex: 1; flex-direction: row; gap: var(--rv-space-16); min-width: 0; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.op-card-open > .op-card-media {
  flex: 0 0 152px;
  align-self: stretch;
  min-height: 116px;
  border-radius: 0;
}
.op-card-open > .op-card-body { flex: 1 1 auto; min-width: 0; }
.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-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: var(--rv-font-size-large); 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); }
/* Three bands, not five: identity+impact+tone+time on one line, the excerpt,
   then category+metrics+reason on one line. Same information as the old
   five-band card, ~30% less row height, so more of the feed fits a screen. */
.op-card-body { padding: var(--rv-space-10) 16px; display: flex; flex-direction: column; gap: var(--rv-space-6); }
.op-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rv-space-6); min-width: 0; }
/* Why this post was ranked as it was — secondary, so it yields space first. */
.op-card-why { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-card-tags .post-metrics { margin-top: 0; }
.op-card-head .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- Feed layout: grid (default) or list --------------------------------
   Grid restores the original multi-column browsing layout: media-forward
   cards, most posts per screen. List is one column so the newest row is
   unambiguously at the top — CSS columns flow down column 1 then wrap to the
   top of column 2, so grid cannot be read chronologically. Both share one card;
   only the container and a few card properties differ. */
.feed-view { flex: none; }

/* GRID (default) */
body[data-feed-view="grid"] .ourposts-grid {
  display: block;
  column-width: 340px;
  column-gap: var(--hq-grid-gap);
}
body[data-feed-view="grid"] .mentions-grid { column-width: 330px; }
body[data-feed-view="grid"] .op-card {
  break-inside: avoid;
  margin-bottom: var(--hq-grid-gap);
}
/* Cards stack vertically inside a narrow column: media on top, then body. */
body[data-feed-view="grid"] .op-card-open { flex-direction: column; gap: 0; }
body[data-feed-view="grid"] .op-card-open > .op-card-media {
  flex: none; width: 100%; max-height: 190px; align-self: auto;
}
body[data-feed-view="grid"] .op-card-text { -webkit-line-clamp: 4; }
body[data-feed-view="grid"] .ourposts-grid .empty-state,
body[data-feed-view="grid"] .ourposts-grid .feed-skeleton { column-span: all; }

/* LIST */
body[data-feed-view="list"] .op-card-open > .op-card-media { max-height: 96px; }
body[data-feed-view="list"] .op-card-text { -webkit-line-clamp: 2; }

/* Actions ride the meta line instead of a 50px footer strip on every row. */
.mention-card-tags .btn { min-height: 26px; padding-block: 2px; }
.mention-card-tags .op-card-open-link { flex: none; }
.op-card-open-link { position: relative; z-index: 2; }

/* Two lines in a list: enough to identify the post, short enough that ~8 rows
   fit a screen. The full text is one click away in the detail modal. */
.op-card-text { font-size: var(--rv-font-size-small-minus); line-height: 1.5; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Recency is the point of a chronological list, so the timestamp gets a fixed
   right-hand slot on every row instead of being buried in a "handle · time"
   string mid-line. */
.op-card-time { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.op-card-handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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: var(--rv-space-12);
}
.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: var(--rv-font-size-2x-small); }
.op-card-foot {
  display: flex; align-items: center; gap: var(--rv-space-8); min-height: 40px; padding: var(--rv-space-6) 9px var(--rv-space-6) 16px;
  border-top: 1px solid var(--rv-color-hairline);
}
/* The 44px floor is a touch requirement, so it belongs on touch, not on every
   desktop row where it just costs feed density. */
@media (pointer: coarse) {
  .op-card-foot { min-height: 48px; }
}
.op-card-foot .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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: var(--rv-space-6); }
.op-freshness::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rv-color-green-500); }
.op-empty { padding-block: 28px; }
.social-modal-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-space-10); }
.social-modal-label-row .microlabel { margin: 0; }
/* Consensus theme chips under the @reve account summary. */
.theme-row { display: flex; flex-wrap: wrap; gap: var(--rv-space-6); 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: var(--rv-space-12);
  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; }
.ourposts-grid .empty-state,
.mentions-grid .empty-state { padding-block: 28px; }
.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: var(--rv-font-size-3x-small); 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: var(--rv-font-size-x-small); }
.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: var(--rv-space-6); }
.mention-listen-preview { min-height: 22px; display: flex; align-items: center; padding-top: 3px; }
.mention-listen-preview .mono { font-size: var(--rv-font-size-3x-small); }
.mention-card-foot .mention-listen-button { min-width: auto; }
.mention-card-foot > .mono { font-size: var(--rv-font-size-3x-small); }

@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; }
  .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 { 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: var(--rv-space-6);
    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,
  .stage-select,
  #avatar-btn,
  .scrape-overlay-close,
  .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: var(--rv-space-10); 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: var(--rv-space-10); }
  .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: var(--rv-font-size-x-small) !important;
}
.external-action--identity > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.captured-reply-link.external-action { font-size: var(--rv-font-size-2x-small); }

.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: var(--rv-font-size-2x-small);
  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;
  }
}

/* ---- Density pass (Listening / Mentions / Our posts) ----------------------
   One rhythm across the three social views: tighter stat tiles, slimmer
   headers, and a calmer chart-inspector resting band. */
.stat-tile { padding: 13px 16px; }
.stat-value { font-size: 2rem; margin-top: 6px; }
.stat-delta { margin-top: 4px; }
.view-header { min-height: 42px; }
.chart-inspector-panel .chart-wrap::before { min-height: 46px; }

/* ---- Blog performance ---------------------------------------------------- */

.blog-row {
  display: flex;
  align-items: flex-start;
  gap: var(--rv-space-12);
  width: 100%;
  padding: 14px var(--hq-pad-x);
  border: none;
  border-bottom: 1px solid var(--rv-color-hairline);
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.blog-row:last-of-type { border-bottom: none; }
.blog-row:hover { background: var(--rv-color-gray-50); }
.blog-hero {
  flex: none;
  width: 96px;
  height: 60px;
  border-radius: var(--rv-radius-s);
  overflow: hidden;
  background: var(--rv-color-gray-100);
}
.blog-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-row-main { flex: 1; min-width: 0; }
.blog-row-head {
  display: flex;
  align-items: baseline;
  gap: var(--rv-space-8);
}
.blog-row-head .person-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blog-row-excerpt {
  margin-top: 3px;
  font-size: var(--rv-font-size-small-minus);
  color: var(--rv-font-color-light);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-row-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: var(--rv-space-4); }
.blog-row-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--rv-space-2);
}
.blog-row-count { font-size: var(--rv-font-size-large); line-height: 1; letter-spacing: -.01em; }
.blog-row-side .stat-delta { margin-top: 0; font-size: var(--rv-font-size-x-small); }
.blog-tone {
  display: inline-flex;
  width: 72px;
  height: 5px;
  margin-top: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--rv-color-gray-200);
}
.blog-tone > i { display: block; height: 100%; }
.blog-tone .pos { background: var(--rv-senti-positive); }
.blog-tone .neu { background: var(--rv-senti-neutral); }
.blog-tone .neg { background: var(--rv-senti-negative); }
.blog-tone-none { font-size: var(--rv-font-size-2x-small); margin-top: 4px; }
/* "Most discussed" tile carries a title, not a numeral — keep it on one line
   at a size that fits the tile. */
.stat-value.stat-value-text {
  font-size: var(--rv-font-size-large);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-modal-hero {
  display: block;
  border-radius: var(--rv-radius-s);
  overflow: hidden;
  margin-bottom: var(--rv-space-12);
}
.blog-modal-hero img { width: 100%; max-height: 240px; object-fit: cover; display: block; }
.blog-modal-meta {
  display: flex;
  align-items: center;
  gap: var(--rv-space-10);
  margin-bottom: var(--rv-space-10);
}
.blog-consensus { line-height: 1.55; }
.blog-notable { margin-top: var(--rv-space-8); display: grid; gap: var(--rv-space-6); }
.blog-quote {
  padding: 6px 10px;
  border-left: 2px solid var(--rv-color-gray-300);
  color: var(--rv-font-color-light);
  font-size: var(--rv-font-size-small-minus);
}
.blog-modal-tone { display: flex; align-items: center; gap: var(--rv-space-10); }
.blog-modal-tone .blog-tone { width: 120px; margin-top: 0; }
.blog-discussion { display: grid; gap: var(--rv-space-12); }
.blog-discussion-more { padding-top: var(--rv-space-4); }

/* ---- Overview: Listening panel mini-stats ---- */
.dash-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rv-color-hairline);
}
.dash-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px var(--hq-pad-x) 12px;
  border: none;
  border-right: 1px solid var(--rv-color-hairline);
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.dash-mini:last-child { border-right: none; }
.dash-mini:hover { background: var(--rv-color-gray-50); }
.dash-mini-value { font-size: var(--rv-font-size-large); line-height: 1; letter-spacing: -.01em; }
.dash-mini .microlabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dash-social-label { padding: 10px var(--hq-pad-x) 2px; }
@media (max-width: 700px) {
  .dash-mini-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-mini:nth-child(2) { border-right: none; }
}