/**
 * Davar v2 — the shell: reset, base type, header, footer, dock.
 *
 * Reads only from tokens.css. No hex value belongs in this file; if a colour is
 * needed that the tokens do not express, the token set is what should change.
 *
 * RTL is not a variant here. Every inset, margin and padding is written with a
 * logical property (inline-start rather than left), so the Kurdish and Arabic
 * layouts are the same layout rather than a mirrored afterthought that drifts.
 */

/* ── Reset, only what is actually needed ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/**
 * `hidden` means hidden.
 *
 * The browser's own rule for it is display:none at the lowest possible weight,
 * so any component that sets a display of its own silently outranks it — a
 * badge declared `display: grid` stays on screen with the attribute set, which
 * is how a counter reading 0 would have shipped on every page. Said once, at
 * the top, rather than remembered per component.
 */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-body);
  font: var(--t-base)/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  /**
   * The dock and the compare tray are both fixed; nothing should end up
   * underneath either. shell.js measures where they actually landed and writes
   * the union here. The fallback is not zero: with no JavaScript the dock is
   * still rendered and still fixed, and reserving nothing would put it on top
   * of the last thing on the page.
   */
  padding-block-end: var(--bottom-clearance, 88px);
}
:lang(ku) body, :lang(ar) body { font-family: var(--font-ar); }
h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); font-weight: 600; text-wrap: balance; }
p { margin: 0; }
img, video, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lit); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; border-radius: 2px; }

.v2-wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad); }
.v2-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Keyboard users must be able to reach the content past the header. */
.v2-skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: var(--z-modal);
  background: var(--surface-deep); color: var(--brand-mint);
  padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--radius) 0;
}
.v2-skip:focus { inset-inline-start: 0; }
.num { font-variant-numeric: tabular-nums; }

/* ══ BUTTONS ═════════════════════════════════════════════════════════
   Shared by every page, so they live here and not in a page sheet. The
   homepage loads only home.css and shell.css, and these were in
   listings.css — its search submit rendered as a bare browser button.
   ═════════════════════════════════════════════════════════════════════ */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding-inline: var(--s-5);
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: var(--t-base); font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: filter var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.v2-btn.is-primary { background: var(--accent); color: var(--accent-on); }
.v2-btn.is-primary:hover { filter: brightness(1.08); text-decoration: none; }
.v2-btn.is-line { background: transparent; color: var(--ink-body); border-color: var(--rule-strong); }
.v2-btn.is-line:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.v2-btn.is-live { background: var(--live); color: var(--live-on); }
.v2-btn.is-live:hover { filter: brightness(1.06); text-decoration: none; }
.v2-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Buttons carrying an icon beside their label — save, compare, ask. */
.v2-btn svg { flex: none; margin-inline-end: var(--s-2); }

/* ══ FORMS ════════════════════════════════════════════════════════════
   The enquiry form, and every other form on the site.

   These lived in property.css, because the property page was the first to
   need them — and the contact, sell and valuation pages do not load that
   sheet. The fifth time a shared component has been found trapped in a page
   sheet, and the worst of the five: .v2-hp is the honeypot, hidden by CSS.
   On a page without this rule the field is visible, a real person fills it
   in, and their message is thrown away as a bot.
   ═════════════════════════════════════════════════════════════════════ */
.v2-form { display: grid; gap: var(--s-3); }
.v2-form label { display: grid; gap: var(--s-1); }
.v2-form label > span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-dim); }
.v2-form input, .v2-form textarea {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  padding: var(--s-3); font-size: var(--t-sm); min-height: 44px; width: 100%;
}
.v2-form textarea { min-height: 84px; resize: vertical; }
.v2-form input:focus-visible, .v2-form textarea:focus-visible { border-color: var(--accent); }
.v2-form input[aria-invalid="true"] { border-color: var(--live); border-width: 2px; }
.v2-form-error { font-size: var(--t-sm); color: var(--live-on); background: var(--live-soft); padding: var(--s-2) var(--s-3); border-radius: var(--radius); }
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.v2-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.v2-sent {
  padding: var(--s-4); border-radius: var(--radius);
  background: var(--surface-warm); border-inline-start: 2px solid var(--verified);
  font-size: var(--t-sm); color: var(--ink-body);
}

/* ══ HEADER ═══════════════════════════════════════════════════════════ */
.v2-hd { position: sticky; top: 0; z-index: var(--z-header); background: var(--surface); }

/* The ticker. Real signals only — it is empty rather than padded. */
.v2-ticker {
  background: var(--surface-warm);
  border-block-end: 1px solid var(--rule-faint);
  font-size: var(--t-xs);
  color: var(--ink-body);
  overflow: hidden;
}
.v2-ticker-in {
  display: flex; align-items: center; gap: var(--s-6);
  padding-block: var(--s-2);
  white-space: nowrap; overflow-x: auto;
  scrollbar-width: none;
}
.v2-ticker-in::-webkit-scrollbar { display: none; }
.v2-ticker .live {
  color: var(--live-on); background: var(--live);
  padding: 2px var(--s-2); border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700; letter-spacing: .04em; flex: none;
}
.v2-ticker b { color: var(--accent); font-weight: 600; }

.v2-hd-main {
  display: flex; align-items: center; gap: var(--s-5);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--rule);
}
/**
 * The wordmark is Latin and must stay Latin-ordered.
 *
 * DA<i>V</i>AR is three inline runs. In an RTL paragraph the bidi algorithm
 * keeps each run's own order but lays the runs out right to left, so the
 * brand rendered as "ARVDA" on the Kurdish site — which is the default
 * language, so that was the name almost every visitor would have seen.
 *
 * `direction: ltr` sets the run order; `unicode-bidi: isolate` stops the
 * surrounding Kurdish from pulling it back into the paragraph's ordering.
 * Both are needed — either alone still reorders in some contexts.
 */
.v2-logo {
  display: inline-flex; align-items: baseline; gap: 1px; flex: none;
  direction: ltr; unicode-bidi: isolate;
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 600;
  letter-spacing: .04em; color: var(--ink); text-decoration: none;
}

/**
 * Anything Latin-and-punctuated inside Kurdish prose needs the same isolation:
 * a CSS custom property renders as "brand-cream--" without it, a URL loses its
 * scheme to the end of the line, and a version number inverts.
 */
.v2-ltr, code, .num[dir="ltr"] { direction: ltr; unicode-bidi: isolate; }
.v2-logo:hover { text-decoration: none; color: var(--ink); }
.v2-logo i { color: var(--brand-gold); font-style: normal; }

.v2-nav { display: none; gap: var(--s-5); flex: 1; min-width: 0; }
@media (min-width: 900px) { .v2-nav { display: flex; } }
.v2-nav a { color: var(--ink-body); font-size: var(--t-sm); white-space: nowrap; }
.v2-nav a:hover { color: var(--accent); text-decoration: none; }
.v2-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.v2-hd-act { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
.v2-icon {
  position: relative;
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface-card); color: var(--ink-body); cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.v2-icon:hover { border-color: var(--accent); color: var(--accent); }

/**
 * The small number on a saved heart or beside "Compare".
 *
 * It was called .v2-count, and so is the results count on the listings page —
 * two components, two sheets, one class name. shell.css loads first and
 * listings.css overrode only the colour and size, so the live listings page
 * rendered "84 properties" as a 41×16 gold pill hanging out of the flow above
 * the sort control. Renamed here rather than there: this is the badge, that is
 * a sentence, and the badge is the one nothing had used yet.
 */
.v2-badge {
  position: absolute; inset-block-start: -6px; inset-inline-end: -6px;
  background: var(--live); color: var(--live-on);
  font-size: 9.5px; font-weight: 700; min-width: 16px; height: 16px;
  border-radius: var(--radius-pill); display: grid; place-items: center;
  padding-inline: 4px; font-variant-numeric: tabular-nums;
}
/* Beside a word rather than over an icon: in the flow, not hung off a corner. */
.v2-nav .v2-badge, .v2-menu .v2-badge { position: static; display: inline-grid; margin-inline-start: var(--s-2); }
.v2-lang {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface-card); color: var(--ink-body);
  padding: 0 var(--s-2); height: 38px; font-size: var(--t-sm); cursor: pointer;
}
.v2-burger { display: grid; }
@media (min-width: 900px) { .v2-burger { display: none; } }

/**
 * The menu behind the burger.
 *
 * Inside the sticky header, so it travels with it and needs no z-index of its
 * own. Above 900px the real navigation is back and this cannot be opened —
 * display:none rather than only hiding the button, so a panel left open while
 * the window was being resized cannot survive the change.
 */
.v2-menu { border-block-start: 1px solid var(--rule); background: var(--surface-card); }
@media (min-width: 900px) { .v2-menu { display: none; } }
.v2-menu-nav { display: grid; padding-block: var(--s-1) var(--s-3); }
.v2-menu-nav a {
  display: flex; align-items: center; gap: var(--s-2);
  padding-block: var(--s-3); color: var(--ink); font-size: var(--t-md);
  border-block-end: 1px solid var(--rule-faint);
}
.v2-menu-nav a:hover { color: var(--accent); text-decoration: none; }
.v2-menu-nav a:last-child { border-block-end: 0; }
.v2-menu-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/**
 * ── The compare tray ─────────────────────────────────────────────────────
 *
 * The memory that makes comparing possible: pick a listing, keep browsing, and
 * the selection is still there on the next page.
 *
 * It sits opposite the assistant. On a narrow screen the dock is full width,
 * so the tray rides above it on the height shell.js measures; on a wide one
 * they sit at the same level at opposite ends. Below the dock in the stacking
 * order deliberately — and below the filter sheet, which is fixed to the same
 * corner of a phone screen and must be able to cover this.
 */
.v2-tray {
  position: fixed; z-index: var(--z-sticky);
  inset-inline-start: var(--s-4);
  inset-block-end: var(--dock-clearance, 72px);
  margin-block-end: env(safe-area-inset-bottom, 0px);
  max-width: calc(100vw - var(--s-8));
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  background: var(--surface-deep); color: var(--brand-mint);
  border-radius: var(--radius-lg); box-shadow: var(--lift-3);
  padding-block: var(--s-2);
  padding-inline: var(--s-4) var(--s-2);
}
@media (min-width: 900px) {
  /* Beside the dock rather than above it: there is room, and a bar that moves
     up and down as the assistant opens and closes is a bar that draws the eye
     for no reason. */
  .v2-tray { inset-block-end: var(--s-6); max-width: min(420px, calc(100vw - 480px)); }
}
/**
 * The four slots.
 *
 * Dashed while empty, gold when taken. The count says how many are picked; the
 * slots say how many are left, which is what makes somebody pick a third.
 */
.v2-tray-slots { display: flex; gap: var(--s-1); flex: none; }
.v2-tray-slot {
  width: 26px; height: 26px; border-radius: 3px;
  border: 1px dashed color-mix(in srgb, var(--brand-mint) 34%, transparent);
  background: color-mix(in srgb, var(--brand-mint) 8%, transparent);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.v2-tray-slot[data-on="true"] {
  background: var(--live); border-style: solid; border-color: transparent;
}
.v2-tray-n { font-size: var(--t-sm); display: flex; align-items: baseline; gap: var(--s-2); }
.v2-tray-n b { font-family: var(--font-display); font-size: var(--t-lg); color: var(--live); }
.v2-tray .v2-tray-go { padding: var(--s-2) var(--s-4); font-size: var(--t-sm); }
.v2-tray-clear {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-pill);
  border: 1px solid rgba(247, 255, 254, .22); background: transparent;
  color: var(--brand-mint); display: grid; place-items: center; cursor: pointer;
}
.v2-tray-clear:hover { border-color: var(--brand-mint); }
/**
 * The one sentence the script writes: the cap, explained at the moment it is
 * reached. It wraps the tray to a second line rather than opening anything, so
 * hitting the limit never costs the visitor a dismissal.
 */
.v2-tray-note { flex-basis: 100%; font-size: var(--t-xs); color: var(--live-soft); display: none; }
.v2-tray[data-note="true"] .v2-tray-note { display: block; }

/* ══ FOOTER ═══════════════════════════════════════════════════════════ */
.v2-ft {
  background: var(--surface-deep); color: var(--ink-faint);
  margin-block-start: var(--s-20); padding-block: var(--s-12) var(--s-8);
}
.v2-ft a { color: var(--ink-faint); font-size: var(--t-sm); }
.v2-ft a:hover { color: var(--brand-mint); text-decoration: none; }
.v2-ft-cols { display: grid; gap: var(--s-8); }
@media (min-width: 700px) { .v2-ft-cols { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.v2-ft h4 {
  color: var(--brand-mint); font-size: 10.5px; font-family: var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase; margin-block-end: var(--s-3); font-weight: 500;
}
.v2-ft-links { display: grid; gap: var(--s-2); }
.v2-ft-brand .v2-logo { color: var(--brand-mint); font-size: var(--t-2xl); }
.v2-ft-brand p { font-size: var(--t-sm); margin-block-start: var(--s-3); max-width: 34ch; line-height: 1.65; }
.v2-ft-chan { display: flex; gap: var(--s-2); margin-block-start: var(--s-4); flex-wrap: wrap; }
.v2-ft-chan span {
  font-size: var(--t-xs); padding: var(--s-1) var(--s-3);
  border: 1px solid rgba(247, 255, 254, .16); border-radius: var(--radius-pill);
}
.v2-ft-office { margin-block-start: var(--s-4); display: grid; gap: var(--s-1); font-size: var(--t-sm); }
.v2-ft-office a { color: var(--brand-mint); }
.v2-ft-legal {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  margin-block-start: var(--s-8); padding-block-start: var(--s-4);
  border-block-start: 1px solid rgba(247, 255, 254, .12);
}
.v2-ft-legal a { font-size: var(--t-xs); }
.v2-ft-base {
  margin-block-start: var(--s-10); padding-block-start: var(--s-5);
  border-block-start: 1px solid rgba(247, 255, 254, .1);
  display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: space-between;
  font-size: var(--t-xs);
}

/* ══ DOCK ═════════════════════════════════════════════════════════════
   Phase 0 ships this inert. It is styled, positioned, measured and reserved
   for — but it makes no request, and every control carries disabled so a
   keyboard or screen reader user is told the truth rather than finding a
   control that does nothing.
   ═════════════════════════════════════════════════════════════════════ */
.v2-dock {
  position: fixed; z-index: var(--z-dock);
  inset-inline: var(--s-4); inset-block-end: var(--s-4);
  /* Phones with a home indicator: sit above it, not under it. */
  margin-block-end: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 900px) {
  .v2-dock { inset-inline: auto var(--s-6); width: min(420px, calc(100vw - var(--s-12))); }
}
.v2-dock-in {
  background: var(--surface-card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-3);
  padding: var(--s-3);
  display: grid; gap: var(--s-3);
}
.v2-dock-head { display: flex; align-items: center; gap: var(--s-2); }
.v2-dock-mark {
  width: 26px; height: 26px; border-radius: var(--radius-pill); flex: none;
  background: var(--accent); color: var(--accent-on);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.v2-dock-title { font-size: var(--t-sm); font-weight: 600; color: var(--ink); flex: 1; }
.v2-dock-state {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim);
  border: 1px solid var(--rule); border-radius: var(--radius-pill); padding: 2px var(--s-2);
}
.v2-dock-field {
  display: flex; align-items: center; gap: var(--s-2);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); padding: var(--s-2) var(--s-3);
}
.v2-dock-field input {
  flex: 1; min-width: 0; border: 0; background: transparent; font-size: var(--t-sm);
  color: var(--ink);
}
.v2-dock-field input::placeholder { color: var(--ink-faint); }
.v2-dock-field input:disabled { cursor: not-allowed; }
.v2-dock-send {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-pill);
  border: 0; background: var(--live); color: var(--live-on);
  display: grid; place-items: center; font-size: 15px; font-weight: 700; cursor: pointer;
}
.v2-dock-send:disabled { background: var(--rule-strong); color: var(--surface-card); cursor: not-allowed; }
.v2-dock-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.v2-dock-chips button {
  font-size: var(--t-xs); padding: var(--s-1) var(--s-3);
  border: 1px dashed var(--rule-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-body); cursor: pointer;
}
.v2-dock-chips button:disabled { color: var(--ink-faint); cursor: not-allowed; }
.v2-dock-note {
  font-size: 10.5px; color: var(--ink-dim); line-height: 1.5;
  border-block-start: 1px solid var(--rule-faint); padding-block-start: var(--s-2);
}

/* Collapsed: a single tap target, so the dock never eats a phone screen. */
.v2-dock[data-collapsed="true"] .v2-dock-in { display: none; }
.v2-dock-tab {
  display: none; align-items: center; gap: var(--s-2);
  background: var(--surface-deep); color: var(--brand-mint);
  border: 0; border-radius: var(--radius-pill);
  padding: var(--s-3) var(--s-5); box-shadow: var(--lift-3);
  font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  margin-inline-start: auto;
}
.v2-dock[data-collapsed="true"] .v2-dock-tab { display: inline-flex; }
.v2-dock-tab i { color: var(--brand-gold); font-style: normal; }

.v2-fail { padding: var(--s-20) var(--page-pad); text-align: center; color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.v2-listings-head { padding-block: var(--s-8) var(--s-5); }
.v2-listings-head h1 { font-family: var(--font-display); font-size: var(--t-3xl); line-height: 1.05; }
.v2-lede { margin-block-start: var(--s-3); max-width: 62ch; font-size: var(--t-md); }
.v2-empty { padding-block: var(--s-16); text-align: center; display: grid; gap: var(--s-3); justify-items: center; }
.v2-empty h2 { font-family: var(--font-display); font-size: var(--t-xl); }
.v2-empty p { max-width: 44ch; font-size: var(--t-sm); color: var(--ink-dim); }
.v2-empty-note { padding-block: var(--s-12); text-align: center; color: var(--ink-dim); }
.v2-sort select, .v2-f-group select, .v2-f-pair input {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface-card); color: var(--ink);
  min-height: 40px; padding-inline: var(--s-3); font-size: var(--t-sm);
  width: 100%;
}
.v2-sort select { width: auto; }
.v2-sort select:focus-visible, .v2-f-group select:focus-visible, .v2-f-pair input:focus-visible {
  border-color: var(--accent);
}
.v2-crumbs { display: flex; gap: var(--s-2); align-items: center; font-size: var(--t-sm); color: var(--ink-dim); flex-wrap: wrap; }
.v2-pd-top { padding-block: var(--s-5) 0; }
.v2-prose { max-width: 70ch; font-size: var(--t-md); line-height: 1.75; color: var(--ink-body); }
.v2-prose p { margin-block-end: var(--s-3); }
.v2-prose ul, .v2-prose ol { margin: 0 0 var(--s-3); padding-inline-start: var(--s-5); }
.v2-prose li { margin-block-end: var(--s-1); }
.v2-prose h3, .v2-prose h4 { font-size: var(--t-lg); margin-block: var(--s-4) var(--s-2); }
.v2-prose strong, .v2-prose b { color: var(--ink); }
.v2-pd-desc, .v2-pd-similar { padding-block: var(--s-10) 0; }
.v2-pd-desc h2, .v2-pd-similar h2 { font-family: var(--font-display); font-size: var(--t-2xl); margin-block-end: var(--s-4); }
.v2-pd-missing { padding-block: var(--s-20); text-align: center; display: grid; gap: var(--s-4); justify-items: center; }
.v2-pd-missing h1 { font-family: var(--font-display); font-size: var(--t-2xl); }
/**
 * The assistant's band.
 *
 * Teal, and inside whatever card it belongs to. It was a near-black slab
 * sitting under the search rather than in it, which read as an advertisement
 * beside the market instead of a part of it.
 */
.v2-ai-band {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  background: var(--ai-band); color: var(--brand-mint);
}
.v2-ai-mark {
  width: 28px; height: 28px; flex: none; border-radius: var(--radius-pill);
  display: grid; place-items: center; font-size: 14px;
  background: var(--live); color: var(--live-on);
}
.v2-ai-copy { flex: 1 1 200px; display: grid; gap: 1px; min-width: 0; }
.v2-ai-copy b { font-size: var(--t-sm); color: var(--brand-mint); }
.v2-ai-copy span { font-size: var(--t-xs); color: color-mix(in srgb, var(--brand-mint) 78%, transparent); }
.v2-ai-go { flex: none; min-height: 36px; font-size: var(--t-sm); padding-inline: var(--s-4); }

/* Moved here from the page sheets: every page uses them, and a primitive
   left in one page sheet is invisible to the others. */

/* ══ DOCK THREAD ══════════════════════════════════════════════════════════
   Live from phase 5. The reply is reels because the bot returns cards and the
   stock is 9:16 video with a burned-in caption — three tappable stills answer
   "what have you got" better than a paragraph describing them.
   ═════════════════════════════════════════════════════════════════════════ */
.v2-thread {
  display: grid; gap: var(--s-2); align-content: start;
  max-height: min(46vh, 340px); overflow-y: auto;
  padding: var(--s-1) 2px;
  overscroll-behavior: contain;
}
.v2-bub {
  max-width: 88%; padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-lg); font-size: var(--t-sm); line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.v2-bub.is-ai { background: var(--surface-warm); border: 1px solid var(--rule); color: var(--ink); justify-self: start; }
.v2-bub.is-me { background: var(--accent); color: var(--accent-on); justify-self: end; }
.v2-bub.is-error { border-color: var(--live); background: var(--live-soft); color: var(--live-on); }
.v2-bub.is-typing { display: flex; gap: 4px; align-items: center; }
.v2-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); animation: v2blink 1.2s infinite; }
.v2-dot:nth-child(2) { animation-delay: .18s; }
.v2-dot:nth-child(3) { animation-delay: .36s; }
@keyframes v2blink { 0%, 60%, 100% { opacity: .3 } 30% { opacity: 1 } }

.v2-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); justify-self: start; width: 100%; }
.v2-reel {
  position: relative; display: block; aspect-ratio: 9 / 16;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface-deep); border: 1px solid var(--rule);
}
.v2-reel img { width: 100%; height: 100%; object-fit: cover; }
.v2-reel-nomedia { position: absolute; inset: 0; background: var(--surface-warm); }
/* The caption sits below the watermark band, never across it. */
.v2-reel-cap {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: grid; gap: 1px; padding: var(--s-2) 6px 6px;
  background: linear-gradient(transparent, rgba(14, 31, 30, .88) 42%);
  color: var(--brand-mint); font-size: 10px; line-height: 1.3;
}
.v2-reel-cap b { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.v2-reel-where { opacity: .8; }
.v2-reel:hover { border-color: var(--brand-gold); }
.v2-bub strong { font-weight: 700; color: inherit; }

/**
 * ── Sharing ───────────────────────────────────────────────────────────────
 *
 * On the listing page this sits inside .v2-pd-collect, which is a two-column
 * grid — so it spans the row and lays its own buttons out rather than being
 * squeezed into one cell beside Save.
 */
.v2-share { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.v2-share .v2-btn { min-block-size: 40px; font-size: var(--t-sm); padding-inline: var(--s-3); }
.v2-share-wa svg { color: var(--live); }

/**
 * ── The dock's way out ────────────────────────────────────────────────────
 *
 * Where the note used to be. It is a link rather than a second primary button:
 * leaving for WhatsApp is a real choice and should look like an option, not
 * like the thing the panel wants you to press.
 */
.v2-dock-wa {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-body);
  border-block-start: 1px solid var(--rule-faint); padding-block-start: var(--s-2);
  margin-block-start: var(--s-1);
}
.v2-dock-wa svg { color: var(--live); flex: none; }
.v2-dock-wa:hover { color: var(--accent); text-decoration: none; }
.v2-dock-wa:hover svg { color: var(--accent); }