/* =====================================================================
   Design tokens — clean / minimal / professional (fintech) redesign.
   Legacy variable NAMES are preserved (--ink, --paper, --accent, --font-*)
   so existing markup, inline styles and app.js automatically adopt the
   new palette; only the VALUES change. A "clean redesign layer" at the end
   of this file restyles the components on top of the original layout rules.
   ===================================================================== */
:root {
  /* Neutrals — Coinbase institutional palette (cool grays, near-black text) */
  --ink: #0a0b0d;        /* primary text / headings (Coinbase near-black) */
  --ink-soft: #33373e;   /* secondary text                                */
  --muted: #5b616e;      /* muted labels (Coinbase blue-gray)             */
  --paper: #f6f7f9;      /* app canvas (faint cool gray)                  */
  --paper-2: #eef0f3;    /* subtle fills / hovers (Coinbase cool surface) */
  --card: #ffffff;       /* surfaces: cards, inputs, bars                 */

  /* Hairline borders — kept light (Coinbase uses ~rgba(91,97,110,0.2)) */
  --border: #dee0e4;         /* divider / card edge (decorative)          */
  --border-strong: #bcc0c7;  /* control hairline (accent focus ring = 3:1) */

  /* Brand accent — Coinbase Blue, the singular accent */
  --accent: #0052ff;         /* Coinbase Blue                             */
  --accent-hover: #0046e6;   /* darker on hover (keeps white text >=4.5)  */
  --accent-press: #003ac4;   /* pressed                                   */
  --accent-soft: #e8f0ff;    /* soft blue tint (active / badges)          */
  --accent-soft-2: #dce8ff;  /* deeper soft tint (hover fills)            */
  --accent-ring: rgba(0, 82, 255, 0.22);
  --on-accent: #ffffff;

  /* Semantic — tuned to pass WCAG AA on card AND their soft tints */
  --danger: #c81e1e;
  --danger-soft: #fef2f2;
  --good: #047857;
  --good-soft: #ecfdf5;

  /* Minimal shadows — Coinbase leans on color contrast + hairlines for depth */
  --shadow: 0 1px 2px rgba(10,11,13,0.06);
  --shadow-md: 0 4px 12px -4px rgba(10,11,13,0.10), 0 1px 3px rgba(10,11,13,0.05);
  --shadow-lg: 0 14px 32px -12px rgba(10,11,13,0.18);
  --shadow-focus: 0 0 0 3px var(--accent-ring);

  /* Soft, friendly radii */
  --radius: 12px;
  --radius-lg: 16px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-pill: 999px;

  /* Premium type system — a characterful grotesk for display, Inter for UI
     body, and a true monospace for labels/data (legacy var NAMES preserved so
     existing markup adopts the new faces automatically). */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-hand: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Accent-tinted elevation for primary surfaces (hero CTA, focused cards) */
  --shadow-accent: 0 8px 22px -10px rgba(0, 82, 255, 0.34);

  /* Inline icon (lucide "message-square") for CSS ::before glyphs — no emoji */
  --i-feedback: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z'/%3E%3C/svg%3E");

  color-scheme: light;
}
[data-theme="dark"] {
  /* Coinbase dark — near-black canvas, surfaces lift by luminance */
  --ink: #f5f7fa;            /* near-white text (not pure white)   */
  --ink-soft: #c2c7d0;       /* secondary text                     */
  --muted: #8b909b;          /* muted labels                       */
  --paper: #0a0b0d;          /* canvas (Coinbase near-black)       */
  --paper-2: #22252b;        /* subtle fills / hovers (lifted)     */
  --card: #16181d;           /* card surface                       */

  --border: #2a2d34;
  --border-strong: #3a3e47;

  --accent: #5b8bff;         /* brighter Coinbase blue for dark    */
  --accent-hover: #7da3ff;
  --accent-press: #9cbcff;
  --accent-soft: #10203a;    /* dark blue tint (active / badges)   */
  --accent-soft-2: #16273f;
  --accent-ring: rgba(91, 139, 255, 0.32);
  --on-accent: #0a0b0d;      /* dark text on the lighter accent    */

  --danger: #f87171;
  --danger-soft: #2a1414;
  --good: #34d399;
  --good-soft: #0c2a22;

  --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 18px -6px rgba(0,0,0,0.6), 0 2px 6px -2px rgba(0,0,0,0.4);
  --shadow-lg: 0 18px 40px -12px rgba(0,0,0,0.7);
  --shadow-accent: 0 12px 32px -10px rgba(91, 139, 255, 0.45);

  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
@media (hover: none) {
  .bubble-actions { opacity: 1; }
  .card-save { opacity: 1; }
  .prop:hover { transform: none; box-shadow: none; }
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

:focus { outline: 0; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Touch-target minimums (WCAG 2.5.5: 44×44 px) on key interactive controls.
   Excludes inline message-action icons (.b-act) and filter-rail selects,
   which have separate sizing constraints. */
.top-nav button,
.theme-toggle,
.feedback-btn,
.sb-toggle,
.bt,
.card-save {
  min-width: 44px;
  min-height: 44px;
}

.app {
  display: flex; flex-direction: column;
  height: 100vh; max-width: 1600px; margin: 0 auto;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px;
  background: var(--paper);
  flex-shrink: 0;
  /* The desktop topbar uses backdrop-filter (see "top bar" block below), which
     creates a stacking context. Without a z-index that context sits at the auto
     level and the later-in-DOM .screen paints over it — burying the account
     dropdown that lives inside the topbar. Lift the whole header above the
     screen so the dropdown is visible. Mobile overrides this to z-index:70. */
  position: relative;
  z-index: 20;
}
.brand {
  font-family: var(--font-hand);
  font-size: 26px; font-weight: 700;
  cursor: pointer;
}
.brand em { background: transparent; color: var(--accent); padding: 0; font-style: normal; }
.top-nav { display: flex; gap: 4px; font-family: var(--font-mono); font-size: 12px; }
.top-nav button {
  background: transparent; border: 1.5px solid transparent;
  padding: 6px 12px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink);
}
.top-nav button:hover { border-color: var(--ink); }
.top-nav button.on { background: var(--ink); color: var(--paper); }

.top-right { display: flex; gap: 10px; align-items: center; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-hand); font-size: 18px; font-weight: 700;
}

.screen-host {
  flex: 1; overflow: hidden; position: relative;
}
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 28px 32px 36px;
  background: var(--paper);
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease;
}
.screen.on { opacity: 1; pointer-events: auto; }

.landing-hero {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: clamp(24px, 6vh, 64px) 0 56px;
}
.landing-hero h1 {
  font-family: var(--font-hand);
  font-size: 54px; line-height: 1.05;
  margin: 0;
  text-align: center;
  font-weight: 700;
}
.landing-hero h1 em { background: var(--accent); font-style: normal; padding: 0 8px; }
.landing-sub {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.landing-suggest {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 6px;
}

/* ===== Browse-all-properties section (landing screen) ===== */
.browse {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 32px;
  border-top: 2px dashed var(--ink);
  padding-top: 28px;
}
.landing-footer {
  max-width: 1280px;
  width: 100%;
  margin: 28px auto 0;
  padding: 20px 0 4px;
  border-top: 1.5px dashed var(--border-strong);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px;
}
.landing-footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.landing-footer-links a {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); text-decoration: none;
}
.landing-footer-links a:hover { color: var(--accent); text-decoration: underline; }
.landing-footer-note {
  font-size: 11px; color: var(--muted); max-width: 520px;
}

/* Auction-alert email capture bar (markup in index.html, behaviour in
   alerts-capture.js). Sits between the browse grid and the footer. */
.alert-capture {
  max-width: 1280px; width: 100%; margin: 32px auto 0;
  padding: 22px 24px; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); background: var(--accent-soft);
}
.alert-capture .ac-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
}
.alert-capture .ac-copy { flex: 1 1 300px; }
.alert-capture .ac-copy h2 {
  margin: 0 0 4px; font-size: 18px; letter-spacing: -0.01em; color: var(--ink);
}
.alert-capture .ac-copy p {
  margin: 0; font-size: 13px; color: var(--ink-soft); max-width: 46ch;
}
.alert-capture .ac-form { display: flex; gap: 8px; flex: 0 1 auto; }
.alert-capture input[type="email"] {
  flex: 1 1 200px; min-width: 0; padding: 10px 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); font-family: var(--font-body);
  font-size: 14px;
}
.alert-capture input[type="email"]:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus);
}
.alert-capture button {
  padding: 10px 18px; background: var(--accent); border: 1px solid transparent;
  border-radius: var(--radius-sm); color: var(--on-accent);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.alert-capture button:hover { background: var(--accent-hover); }
.alert-capture button:disabled { opacity: 0.6; cursor: default; }
.alert-capture .ac-msg { margin: 12px 0 0; font-size: 13px; }
.alert-capture .ac-msg.ok { color: var(--good); }
.alert-capture .ac-msg.err { color: var(--danger); }
.browse-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
}
.browse-head h2 {
  font-family: var(--font-hand);
  font-size: 34px; line-height: 1; margin: 0;
  font-weight: 700;
}
.browse-head h2 em { background: var(--accent); font-style: normal; padding: 0 6px; color: #1a1a1a; }
.browse-hint {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 6px;
}
.browse-filters {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.bf-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.browse-search {
  flex: 1; min-width: 200px;
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  padding: 6px 10px;
}
.browse-search input {
  flex: 1; border: 0; background: transparent;
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink);
}
.browse-search input::placeholder { color: var(--muted); }
.browse-search .ico-s {
  width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6;
}
.filter-group {
  display: flex; align-items: center; gap: 4px;
}
.filter-group .lbl-inline {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
  margin-right: 2px;
}
.filter-select {
  border: 1.5px solid var(--ink);
  background: var(--card);
  padding: 5px 8px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  max-width: 220px;
}
.filter-select:hover { background: var(--accent); color: #1a1a1a; }
.filter-multi {
  position: relative;
  display: inline-block;
}
.filter-multi-btn {
  border: 1.5px solid var(--ink);
  background: var(--card);
  padding: 5px 8px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  max-width: 220px;
  min-width: 110px;
  display: inline-flex; align-items: center; gap: 6px;
  text-align: left;
}
.filter-multi-btn:hover,
.filter-multi.open .filter-multi-btn { background: var(--accent); color: #1a1a1a; }
.filter-multi-label {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-multi-caret {
  font-size: 10px; opacity: 0.7;
}
.filter-multi-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
  min-width: 220px; max-width: 320px; max-height: 280px;
  overflow-y: auto;
  border: 1.5px solid var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 0;
  font-family: var(--font-body); font-size: 13px;
}
.filter-multi-search {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ink);
  background: var(--card);
  position: sticky; top: 0; z-index: 1;
}
.filter-multi-search-input {
  width: 100%;
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 4px 8px;
  font-family: var(--font-body); font-size: 12px;
  color: var(--ink);
  box-sizing: border-box;
}
.filter-multi-search-input::placeholder { color: var(--muted); }
.filter-multi-options { padding: 6px 0; }
.filter-multi-empty,
.filter-multi-no-match {
  padding: 8px 12px; color: var(--muted); font-size: 12px;
}
.filter-multi-no-match { font-style: italic; }
.filter-multi-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  cursor: pointer;
  user-select: none;
}
.filter-multi-opt:hover { background: var(--paper-2); }
.filter-multi-opt input { margin: 0; cursor: pointer; flex-shrink: 0; }
.filter-multi-opt .name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-multi-opt .count {
  color: var(--muted); font-family: var(--font-mono); font-size: 11px;
  flex-shrink: 0;
}
.filter-num, .filter-date {
  border: 1.5px solid var(--ink);
  background: var(--card);
  padding: 5px 8px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink);
  width: 80px;
}
.filter-date { width: 140px; font-family: var(--font-mono); font-size: 12px; }
.dash { font-family: var(--font-mono); color: var(--muted); }
.price-custom { gap: 6px; }
.filter-clear {
  border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper);
  padding: 5px 10px;
  font-family: var(--font-mono); font-size: 11px;
  cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.filter-clear:hover:not(:disabled) { background: var(--danger); }
.filter-clear:disabled {
  opacity: 0.3; cursor: not-allowed;
  background: var(--card); color: var(--muted);
}
.filter-chat {
  border: 1.5px solid var(--ink);
  background: var(--accent); color: #1a1a1a;
  padding: 5px 10px;
  font-family: var(--font-mono); font-size: 11px;
  cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.05em;
  box-shadow: var(--shadow);
}
.filter-chat:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.filter-chat:disabled {
  opacity: 0.3; cursor: not-allowed;
  background: var(--card); color: var(--muted);
  box-shadow: none;
}
.active-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-left: auto;
}
.active-chip {
  border: 1.5px solid var(--ink);
  background: var(--accent);
  padding: 3px 8px 3px 10px;
  font-family: var(--font-mono); font-size: 11px;
  color: #1a1a1a;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  text-transform: lowercase;
}
.active-chip:hover { background: var(--danger); color: var(--card); }
.active-chip .x { font-weight: 700; opacity: 0.7; }
.browse-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
}
.browse-meta .count {
  font-family: var(--font-hand); font-size: 22px;
}
.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.browse-grid[aria-busy="true"] { opacity: 0.55; transition: opacity 120ms ease; }
.browse-empty {
  border: 1.5px dashed var(--ink);
  background: var(--card);
  padding: 40px 20px;
  text-align: center;
  font-family: var(--font-hand); font-size: 22px;
  color: var(--muted);
  grid-column: 1 / -1;
}
.browse-empty .lbl { display: block; margin-top: 8px; }

.browse-pager {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 24px 0 8px;
}
.browse-pager[hidden] { display: none; }
.browse-pager .lm-btn {
  border: 1.5px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  padding: 10px 28px;
  font-family: var(--font-mono); font-size: 12px;
  cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.05em;
  box-shadow: var(--shadow);
  transition: transform 80ms ease, background 80ms ease, color 80ms ease;
}
.browse-pager .lm-btn:hover:not(:disabled) {
  background: var(--accent); color: #1a1a1a;
  transform: translate(-1px, -1px);
}
.browse-pager .lm-btn:disabled {
  opacity: 0.5; cursor: wait;
}
.browse-pager .lm-progress {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted);
}
.browse-pager .lm-end {
  font-family: var(--font-hand); font-size: 18px;
  color: var(--muted);
}

@media (max-width: 720px) {
  .browse { padding-top: 20px; }
  .browse-head h2 { font-size: 26px; }
  .browse-filters { padding: 10px; gap: 6px; position: static; }
  .browse-grid { grid-template-columns: 1fr; }
  .filter-group { width: 100%; }
  .filter-select { flex: 1; min-width: 0; max-width: 100%; }
  /* Native date / number inputs have a wide intrinsic min-width; let them shrink
     and share the row so two date pickers don't overflow at ~320px. */
  .filter-date, .filter-num { flex: 1 1 0; min-width: 0; max-width: 100%; }
  .filter-multi { flex: 1; min-width: 0; }
  .filter-multi-btn { width: 100%; max-width: 100%; }
  .filter-multi-panel { width: 100%; max-width: 100%; }
  /* Give the search its own full-width row so the Filters button + "clear all"
     wrap onto the line beneath instead of crowding the input. The base rule
     sets `flex: 1` (flex-basis 0), which let the input shrink until its
     placeholder clipped against the Filters button on narrow phones; forcing
     flex-basis to 100% makes the row wrap. */
  .browse-search { width: 100%; flex: 1 1 100%; min-width: 0; }
  .bf-row--head .filter-toggle { flex: 1 1 auto; justify-content: center; }
  .browse-pager .lm-btn { width: 100%; padding: 12px 16px; }
}

.chat-input {
  border: 2px solid var(--ink);
  background: var(--card);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 17px;
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 640px;
  position: relative;
}
.chat-input input,
.chat-input textarea {
  flex: 1;
  background: transparent; border: 0;
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--ink);
  padding: 0;
}
.chat-input textarea {
  resize: none;
  overflow-y: auto;
  line-height: 1.3;
  max-height: 160px;
  min-height: 22px;
  width: 100%;
  display: block;
}
.chat-input input::placeholder,
.chat-input textarea::placeholder { color: var(--muted); font-family: var(--font-hand); font-size: 22px; }
.chat-input .ico {
  width: 26px; height: 26px; border: 1.5px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 14px;
  background: var(--accent);
  flex-shrink: 0;
}
.chat-input .send {
  width: 44px; height: 44px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  cursor: pointer; flex-shrink: 0;
  font-family: var(--font-hand); font-size: 18px;
}
.chat-input .send:hover { background: var(--accent); color: var(--ink); }
.chat-input .send:disabled { opacity: 0.4; cursor: not-allowed; }

.chip {
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: var(--font-body); font-size: 13px;
  background: var(--card);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { background: var(--accent); }
.chip.filled { background: var(--accent); }
.chip.ink { background: var(--ink); color: var(--paper); }

.lbl {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mono { font-family: var(--font-mono); font-size: 12px; }
.hand { font-family: var(--font-hand); }

.results {
  flex: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w, 200px) var(--transcript-w, clamp(420px, 30vw, 560px)) 1fr;
  gap: 0;
  min-height: 0;
  position: relative;
}
/* Collapsed: drop the sidebar and its grid column entirely. It reopens via a
   panel button in the conversation header (.tp-reopen) — no leftover rail. */
.results.sb-collapsed {
  grid-template-columns: var(--transcript-w, clamp(420px, 30vw, 560px)) 1fr;
}

.chat-sidebar {
  display: flex; flex-direction: column; gap: 8px;
  border: 2px solid var(--ink);
  background: var(--card);
  padding: 12px 10px;
  margin-right: 14px;
  min-height: 0;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.results.sb-collapsed .chat-sidebar { display: none; }
.sb-head { display: flex; align-items: center; gap: 6px; }
.sb-title { font-family: var(--font-hand); font-size: 20px; flex: 1; }
.sb-toggle {
  background: var(--paper-2); border: 2px solid var(--ink);
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  flex-shrink: 0;
}
.sb-toggle:hover { background: var(--accent); }
.sb-new {
  border: 2px solid var(--ink); background: var(--accent);
  padding: 6px 10px; font-family: var(--font-hand); font-size: 17px;
  cursor: pointer; width: 100%;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 6px; justify-content: center;
}
.sb-new:hover { transform: translate(-1px,-1px); }
.sb-search {
  border: 1.5px solid var(--ink); background: var(--paper);
  padding: 5px 8px;
  font-family: var(--font-body); font-size: 12px;
  width: 100%;
}
.sb-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sb-group-label { font-family: var(--font-mono); font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 8px 4px 2px; }
.sb-item {
  padding: 6px 8px; font-family: var(--font-body); font-size: 12px;
  border: 1.5px solid transparent; cursor: pointer;
  line-height: 1.3;
  display: flex; align-items: center; gap: 6px;
}
.sb-item:hover { background: var(--paper-2); border-color: var(--ink); }
.sb-item.active { background: var(--accent); border-color: var(--ink); }
.sb-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item-del {
  flex-shrink: 0; width: 16px; height: 16px; padding: 0;
  border: none; background: transparent; color: var(--muted);
  font-size: 14px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 0.15s;
  font-family: var(--font-body);
}
.sb-item:hover .sb-item-del,
.sb-item.active .sb-item-del { opacity: 1; }
.sb-item-del:hover { color: var(--ink); }
.sb-item-pin {
  display: inline-block; margin-right: 6px; font-family: var(--font-mono);
  font-size: 11px; color: var(--muted);
}
.sb-item.active .sb-item-pin { color: var(--ink); }
/* Card-only details — hidden on desktop's compact list, shown on mobile drawer */
.sb-item-preview, .sb-item-meta { display: none; }

#detail-chat-history .pch-item {
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 8px; cursor: pointer;
  border: 1.5px solid transparent;
  font-family: var(--font-body); font-size: 12px; line-height: 1.3;
}
#detail-chat-history .pch-item:hover { background: var(--paper-2); border-color: var(--ink); }
#detail-chat-history .pch-item.active { background: var(--accent); border-color: var(--ink); }
#detail-chat-history .pch-title {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#detail-chat-history .pch-ts {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 10px;
  color: var(--muted); letter-spacing: 0.04em;
}
#detail-chat-history .pch-item.active .pch-ts { color: var(--ink); }

.transcript-pane { position: relative; }
.tp-resize {
  position: absolute; top: 0; right: -7px; width: 14px; height: 100%;
  cursor: col-resize; z-index: 5;
  display: flex; align-items: center; justify-content: center;
}
.tp-resize::after {
  content: ''; width: 3px; height: 40px; background: var(--ink); opacity: 0.25;
  border-radius: 2px;
}
.tp-resize:hover::after { opacity: 0.7; background: var(--accent); }
.results-pane { margin-left: 14px; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: none; z-index: 200; align-items: center; justify-content: center;
}
.modal-backdrop.on { display: flex; }
.modal {
  background: var(--card); border: 2px solid var(--ink); box-shadow: var(--shadow);
  width: 440px; max-width: 92vw; padding: 22px;
}
.modal h3 { margin: 0 0 4px; font-family: var(--font-hand); font-size: 26px; }
.modal .lbl { display: block; margin-bottom: 10px; }
.modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.modal-tags .chip.filled { background: var(--ink); color: var(--paper); }
.modal textarea {
  width: 100%; border: 1.5px solid var(--ink); background: var(--paper);
  padding: 8px 10px; font-family: var(--font-body); font-size: 13px;
  min-height: 72px; resize: vertical;
  color: var(--ink);
}
.modal textarea::placeholder { color: var(--muted); font-family: var(--font-body); }
.modal-rating { display: flex; gap: 8px; margin: 10px 0; }
.modal-rating button {
  border: 1.5px solid var(--ink); background: var(--card);
  padding: 4px 10px; font-family: var(--font-hand); font-size: 18px;
  cursor: pointer;
}
.modal-rating button.on { background: var(--accent); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

@media (max-width: 1000px) {
  .results, .results.sb-collapsed { grid-template-columns: 1fr; }
  .chat-sidebar, .transcript-pane { max-height: 220px; }
  .tp-resize { display: none; }
  .results-pane, .chat-sidebar { margin: 0 0 10px; }
  .results-pane { order: 1; margin-left: 0; }
  .transcript-pane { order: 2; }
  .chat-sidebar { order: 3; max-height: 180px; margin-right: 0; }
}
.transcript-pane {
  display: flex; flex-direction: column;
  gap: 10px;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 14px;
  min-height: 0;
}
.transcript-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1.5px dashed var(--ink);
  padding-bottom: 8px;
}
.transcript-head .hand { font-size: 20px; }
.th-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Reopen-history button: shown in the conversation header only when the sidebar
   is collapsed (Option C — no persistent rail). */
.tp-reopen {
  display: none;
  width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  border: 2px solid var(--ink); background: var(--paper-2); color: var(--ink);
  place-items: center; cursor: pointer;
}
.tp-reopen:hover { background: var(--accent); color: var(--on-accent); }
.tp-reopen svg { width: 15px; height: 15px; }
.results.sb-collapsed .tp-reopen { display: grid; }
.chat-log {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 0;
}
/* Empty-state guidance shown before a conversation has any messages. */
.chat-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  padding: 24px 16px;
  color: var(--muted);
}
.chat-empty-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.chat-empty-sub { font-size: 13px; max-width: 340px; line-height: 1.5; }
.chat-empty .lbl { margin-top: 4px; }
.chat-empty .landing-suggest { justify-content: center; }
/* When the conversation has messages, collapse the empty state and let the log fill. */
.transcript-pane:has(#chat-log:not(:empty)) .chat-empty { display: none; }
#chat-log:empty { flex: 0 0 auto; padding: 0; }
.bubble {
  border: 1.5px solid var(--ink);
  padding: 8px 12px;
  max-width: 88%;
  font-family: var(--font-body); font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.bubble.user { align-self: flex-end; background: var(--accent); }
.bubble-wrap.user {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.bubble-actions {
  display: flex; gap: 4px;
  opacity: 0; transition: opacity 120ms ease;
}
.bubble-wrap.user:hover .bubble-actions,
.bubble-wrap.ai:hover .bubble-actions { opacity: 1; }
.b-act {
  background: var(--card); border: 1.5px solid var(--ink);
  padding: 3px 5px; cursor: pointer; color: var(--ink);
  display: grid; place-items: center;
  line-height: 0;
}
.b-act:hover { background: var(--accent); }
.b-act.active { background: var(--ink); color: var(--paper); }
.b-act.flash { background: var(--accent); }
/* AI answers render full-width — the visual "no card chrome" treatment lives in
   the refinement layer below (.bubble.ai), which overrides this block. The wrap
   stays left-aligned so the matches chip and action buttons size to their
   content; only .bubble.ai gets an explicit full width. */
.bubble-wrap.ai { align-self: stretch; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; max-width: 100%; width: 100%; }
.bubble.ai { width: 100%; max-width: 100%; background: var(--card); }
.bubble.ai.thinking {
  font-family: var(--font-hand); font-size: 16px; color: var(--muted);
}
.bubble.ai.thinking::after {
  content: '...'; animation: dots 1.2s steps(4) infinite;
}
@keyframes dots { 0% {content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} }
.detail-chat .bubble { font-size: 13px; padding: 6px 10px; }
.detail-chat .bubble.ai.thinking { font-size: 14px; }

/* ====== MARKDOWN-RENDERED AI BUBBLES ====== */
/* AI replies are parsed as markdown so headers, tables, bold, lists, code, and
   links render properly instead of showing raw **/###/| syntax. */
.bubble.ai.md { white-space: normal; line-height: 1.5; }
.bubble.ai.md > *:first-child { margin-top: 0; }
.bubble.ai.md > *:last-child  { margin-bottom: 0; }

.bubble.ai.md strong { font-weight: 700; color: var(--ink); }
.bubble.ai.md em     { font-style: italic; }
.bubble.ai.md a {
  color: var(--ink); text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 2px;
}
.bubble.ai.md a:hover { background: var(--accent); }

/* Headers — chunky underlined "ink" feel matching the rest of the UI. */
.bubble.ai.md .md-h {
  font-family: var(--font-body); font-weight: 700; color: var(--ink);
  margin: 10px 0 6px; line-height: 1.25;
}
.bubble.ai.md .md-h1 { font-size: 18px; border-bottom: 1.5px solid var(--ink); padding-bottom: 3px; }
.bubble.ai.md .md-h2 { font-size: 16px; border-bottom: 1px dashed var(--ink); padding-bottom: 2px; }
.bubble.ai.md .md-h3 { font-size: 15px; }
.bubble.ai.md .md-h4 { font-size: 14px; color: var(--ink-soft); }
.bubble.ai.md .md-h5,
.bubble.ai.md .md-h6 { font-size: 13px; color: var(--ink-soft); }

/* Lists */
.bubble.ai.md .md-list {
  margin: 6px 0; padding-left: 22px;
  display: flex; flex-direction: column; gap: 3px;
}
.bubble.ai.md .md-list li { line-height: 1.45; }

/* Inline + fenced code */
.bubble.ai.md .md-code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--paper-2); border: 1px solid var(--ink);
  padding: 1px 5px; border-radius: 2px;
  white-space: pre-wrap; word-break: break-word;
}
.bubble.ai.md .md-pre {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--paper-2); border: 1.5px solid var(--ink);
  padding: 8px 10px; margin: 8px 0;
  overflow-x: auto; white-space: pre;
}
.bubble.ai.md .md-pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* Tables — boxed, monospace numbers, header strip */
.bubble.ai.md .md-table-wrap { margin: 8px 0; overflow-x: auto; }
.bubble.ai.md .md-table {
  border-collapse: collapse;
  width: 100%; min-width: 100%;
  font-size: 13px;
  background: var(--card);
  border: 1.5px solid var(--ink);
}
.bubble.ai.md .md-table th,
.bubble.ai.md .md-table td {
  border: 1px solid var(--ink);
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
}
.bubble.ai.md .md-table thead th {
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  font-family: var(--font-body);
  white-space: nowrap;
}
[data-theme="dark"] .bubble.ai.md .md-table thead th { color: #1a1a1a; }
.bubble.ai.md .md-table tbody tr:nth-child(even) td { background: var(--paper-2); }
/* Numeric-looking cells get monospace treatment for clean alignment. */
.bubble.ai.md .md-table td { font-variant-numeric: tabular-nums; }

/* Section dividers — model emits `---` between major sections. */
.bubble.ai.md .md-hr {
  border: 0; height: 0;
  border-top: 1px solid var(--ink);
  opacity: 0.35;
  margin: 14px 0;
}

/* Pull paragraph breaks (double <br>) further apart so sections breathe. */
.bubble.ai.md br + br { line-height: 2.2; }

/* Tighter table sizing inside the smaller property-detail chat */
.detail-chat .bubble.ai.md .md-table { font-size: 12px; }
.detail-chat .bubble.ai.md .md-h1 { font-size: 16px; }
.detail-chat .bubble.ai.md .md-h2 { font-size: 14px; }
.detail-chat .bubble.ai.md .md-h3 { font-size: 13px; }
.detail-chat .bubble.ai.md .md-hr { margin: 10px 0; }

.sources-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 6px 0 0 0; align-items: center;
  max-width: 100%;
}
.sources-label {
  font-family: var(--font-hand);
  font-size: 14px;
  color: var(--ink-soft);
  margin-right: 4px;
}
.source-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  text-decoration: none;
  transition: transform 80ms ease, background 120ms ease;
}
.source-chip:hover { background: var(--accent); transform: translateY(-1px); }
.source-favicon { width: 14px; height: 14px; border-radius: 2px; }
.source-num { font-weight: 600; opacity: 0.7; }
.source-domain { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inline [1][2][3] citations inside an answer — link to the matching source. */
.bubble.ai.md .citation {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  padding: 0 1px;
  white-space: nowrap;
}
.bubble.ai.md .citation:hover { text-decoration: underline; }

/* Bare auction IDs inside an answer — click to open that property. */
.bubble.ai.md .prop-id-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.bubble.ai.md .prop-id-link:hover { text-decoration: underline; }
/* When the ID sits inside an OCR/code span, keep the chip look but tint it. */
.bubble.ai.md .md-code .prop-id-link { color: var(--accent); }

/* Per-turn match snapshot chip under each AI reply — click flips the
   matches panel back to what that turn found. `.active` marks the turn
   the panel currently shows. */
.matches-chip {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px;
  padding: 3px 9px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: transform 80ms ease, background 120ms ease;
}
.matches-chip:hover { background: var(--accent); transform: translateY(-1px); }
.matches-chip.active { background: var(--accent); }
.matches-chip svg { opacity: 0.8; }

/* Per-response timing shown under each AI reply (round-trip wall time). */
.resp-time {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted); letter-spacing: 0.02em; line-height: 1;
}
.resp-time svg { opacity: 0.75; }
.detail-chat .resp-time { font-size: 9px; }
/* Matches chip + response time on one row beneath the answer. */
.ai-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.ai-meta .matches-chip,
.ai-meta .resp-time { margin-top: 0; }

.results-pane {
  display: flex; flex-direction: column;
  min-height: 0;
  min-width: 0;
  gap: 10px;
}
.results-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 10px;
}
.results-head .count { font-family: var(--font-hand); font-size: 22px; }
.results-sort {
  font-family: var(--font-mono); font-size: 12px;
  padding: 4px 8px;
  border: 1.5px solid var(--ink);
  background: var(--card); color: var(--ink);
  cursor: pointer;
}
.results-list {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding-right: 4px;
  min-width: 0;
}
.results-empty {
  padding: 40px 20px; text-align: center;
  font-family: var(--font-hand); font-size: 22px; color: var(--muted);
}

.prop {
  border: 1.5px solid var(--ink);
  background: var(--card);
  display: flex; gap: 14px;
  padding: 12px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  position: relative;
}
.prop:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow); }
.prop .thumb {
  width: 130px; height: 96px;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.prop .thumb svg { width: 100%; height: 100%; display: block; }
.prop .meta {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.prop .title {
  font-family: var(--font-hand); font-size: 22px; line-height: 1;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prop .loc {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.prop .price {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  margin-top: auto;
}
.prop .price-drop {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: #137a3b;
  background: #d6f0de;
  padding: 2px 8px;
  border: 1.5px solid #137a3b;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .prop .price-drop {
  color: #a8efc0;
  background: rgba(19, 122, 59, 0.18);
  border-color: #3cb371;
}
.prop .why {
  font-family: var(--font-hand); font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.15;
}
.card-save {
  background: transparent; border: 0; padding: 4px;
  cursor: pointer; color: var(--ink);
  align-self: flex-start; flex-shrink: 0;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.5; transition: opacity 120ms ease, transform 120ms ease;
}
.prop:hover .card-save { opacity: 1; }
.card-save.saved { opacity: 1; color: #d9a400; }
.card-save:hover { transform: scale(1.15); }

.detail {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  min-height: 0;
}
.detail-main {
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto;
  padding-right: 4px;
}
.detail-aside {
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
}
.back-link {
  background: transparent; border: 0;
  font-family: var(--font-hand); font-size: 20px;
  cursor: pointer; color: var(--ink-soft);
  align-self: flex-start;
  padding: 0;
}
.back-link:hover { color: var(--ink); }
.detail-title {
  font-family: var(--font-hand); font-size: 42px;
  margin: 0; line-height: 1;
}
.detail-sub {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero-photo {
  height: 280px;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
  display: block;
}
.hero-photo svg { width: 100%; height: 100%; display: block; }

.fact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.fact {
  border: 1.5px solid var(--ink);
  background: var(--card);
  padding: 10px 12px;
}
.fact .lbl { display: block; margin-bottom: 4px; }
.fact .val {
  font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  word-wrap: break-word;
}
.fact.big .val { font-size: 22px; }
.fact.accent { background: var(--accent); }

/* ── Property detail · "Briefing" data presentation ─────────────────────
   Pricing / Timeline / Property & parties — grouped, with hierarchy, in
   place of the old uniform fact grid. All values are tokenised so the
   panels track light/dark automatically. */
.pb { display: grid; gap: 12px; }
.pb-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 12px; }
.pb-panel {
  border: 1.5px solid var(--border); background: var(--card);
  border-radius: var(--radius); padding: 16px;
}
.pb-panel.pb-pricing { background: linear-gradient(180deg, var(--accent-soft), transparent); }
.pb-eyebrow {
  display: flex; align-items: center; gap: 7px; margin-bottom: 13px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
}
.pb-eyebrow svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.pb-price {
  font-family: var(--font-hand); font-size: 38px; font-weight: 800;
  color: var(--accent); letter-spacing: -0.03em; line-height: 1;
}
.pb-price-sub { display: flex; gap: 8px; align-items: baseline; margin-top: 12px; }
.pb-price-sub .amt { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pb-price-sub .lbl { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.pb-note { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
/* timeline / stepper */
.pb-steps { display: flex; flex-direction: column; }
.pb-step { display: grid; grid-template-columns: 22px 1fr; gap: 11px; }
.pb-step .gut { display: flex; flex-direction: column; align-items: center; }
.pb-step .node {
  width: 11px; height: 11px; border-radius: 50%; flex: none; margin-top: 3px;
  border: 2px solid var(--accent); background: var(--card);
}
.pb-step.done .node { background: var(--accent); }
.pb-step .line { flex: 1; width: 2px; background: var(--border); min-height: 14px; }
.pb-step:last-child .line { display: none; }
.pb-step .body { padding-bottom: 14px; }
.pb-step:last-child .body { padding-bottom: 0; }
.pb-step .lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.pb-step .val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 1px; }
/* property & parties key-values */
.pb-kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 24px; }
.pb-item { display: flex; gap: 10px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--border); }
.pb-item svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.pb-item .lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.pb-item .val { font-size: 14.5px; font-weight: 600; word-break: break-word; }
.pb-item .val a { color: var(--accent); text-decoration: none; }
.pb-item .val a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .pb-row { grid-template-columns: 1fr; }
  .pb-kv { grid-template-columns: 1fr; }
}

.detail-section-title {
  font-family: var(--font-hand); font-size: 24px; margin: 10px 0 6px;
}
.detail-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.detail-section-head .detail-section-title { margin-bottom: 0; }
.price-history {
  display: flex; flex-direction: column; gap: 6px;
  border: 1.5px solid var(--ink);
  background: var(--card);
  padding: 10px 12px;
}
.history-row {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  gap: 10px;
  align-items: baseline;
  padding: 6px 8px;
  border-left: 3px solid transparent;
}
.history-row[data-jump-id] { cursor: pointer; }
.history-row[data-jump-id]:hover {
  background: var(--paper-2);
  border-left-color: var(--ink-soft);
}
.history-row.current {
  background: var(--accent);
  border-left-color: var(--ink);
  font-weight: 600;
}
.history-row .history-when {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--muted); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.history-row.current .history-when { color: var(--ink); }
.history-row .history-price {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
}
.history-row .history-delta {
  font-size: 12px; margin-left: 6px;
}
.history-row .history-delta.down { color: #137a3b; }
.history-row .history-delta.up   { color: #a83232; }
.history-row .history-tag {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); text-align: right;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.history-row.current .history-tag { color: var(--ink); }
@media (max-width: 640px) {
  .history-row { grid-template-columns: 1fr 1fr; }
  .history-row .history-tag { grid-column: 1 / -1; text-align: left; }
}
.detail-desc {
  border: 1.5px solid var(--ink);
  background: var(--card);
  padding: 12px 14px;
  font-family: var(--font-body); font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.detail-desc.formatted { white-space: normal; }
.detail-desc.formatted > *:first-child { margin-top: 0; }
.detail-desc.formatted > *:last-child  { margin-bottom: 0; }
.detail-desc.formatted strong { font-weight: 700; color: var(--ink); }
.detail-desc.formatted em { font-style: italic; }
.detail-desc.formatted .md-h {
  font-family: var(--font-body); font-weight: 700; color: var(--ink);
  margin: 12px 0 6px; line-height: 1.25;
}
.detail-desc.formatted .md-h1 { font-size: 18px; border-bottom: 1.5px solid var(--ink); padding-bottom: 3px; }
.detail-desc.formatted .md-h2 { font-size: 16px; border-bottom: 1px dashed var(--ink); padding-bottom: 2px; }
.detail-desc.formatted .md-h3 { font-size: 16px; border-bottom: 1px dashed var(--ink); padding-bottom: 2px; }
.detail-desc.formatted .md-h4 { font-size: 14px; color: var(--ink-soft); }
.detail-desc.formatted .md-h5,
.detail-desc.formatted .md-h6 { font-size: 13px; color: var(--ink-soft); }
.detail-desc.formatted .md-list {
  margin: 6px 0; padding-left: 22px;
  display: flex; flex-direction: column; gap: 3px;
}
.detail-desc.formatted .md-list li { line-height: 1.45; }
.detail-desc.formatted br + br { line-height: 2.2; }
.detail-desc.formatted .md-hr {
  border: 0; height: 0;
  border-top: 1px solid var(--ink);
  opacity: 0.35;
  margin: 14px 0;
}
.detail-desc-raw {
  white-space: pre-wrap;
  font-family: var(--font-body); font-size: 14px;
  line-height: 1.5;
}

.docs { display: flex; flex-direction: column; gap: 6px; }
.doc {
  border: 1.5px solid var(--ink);
  background: var(--card);
  padding: 10px 12px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  font-family: var(--font-body); font-size: 13px;
  cursor: pointer;
  min-height: 40px;
  text-decoration: none;
  color: var(--ink);
}
.doc > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.doc:hover { background: var(--paper-2); }
.doc .mono { color: var(--muted); }
.doc-badge {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  padding: 2px 6px; border: 1.5px solid var(--ink); background: var(--paper-2);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.doc-toggle {
  border: 1.5px solid var(--ink); background: var(--accent);
  padding: 4px 10px; font-size: 12px; cursor: pointer;
  font-family: var(--font-body);
}
.doc-toggle:hover { filter: brightness(0.95); }
.doc-group { display: flex; flex-direction: column; }
.doc-group.open .doc { border-bottom: 0; }
.doc-preview {
  border: 1.5px solid var(--ink);
  background: var(--card);
  padding: 10px;
}
.doc-preview[hidden] { display: none; }
.doc-preview iframe {
  width: 100%; height: 600px; border: 0; background: var(--paper-2);
  display: block;
}
.doc-preview img {
  max-width: 100%; height: auto; display: block; margin: 0 auto;
}

.btn {
  border: 2px solid var(--ink);
  background: var(--accent);
  padding: 10px 14px;
  font-family: var(--font-hand); font-size: 20px;
  cursor: pointer;
  box-shadow: var(--shadow);
  text-align: center;
  display: block;
  width: 100%;
  text-decoration: none;
  color: var(--ink);
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow); }
.btn.ghost { background: var(--card); }
.btn.ink { background: var(--ink); color: var(--paper); }

.watchlist {
  flex: 1; display: flex; flex-direction: column; gap: 14px;
  max-width: 900px; width: 100%; margin: 0 auto;
  min-height: 0;
}
.watchlist-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
}
.watchlist-head h2 {
  font-family: var(--font-hand); font-size: 38px; margin: 0; line-height: 1;
}
.timeline-group {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 10px;
}
.timeline-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-hand); font-size: 22px;
  color: var(--ink);
  margin-top: 6px;
}
.timeline-label .dot {
  width: 10px; height: 10px; background: var(--ink); border-radius: 50%;
}
.timeline-label.urgent .dot { background: var(--danger); }
.timeline-label .rule {
  flex: 1; height: 1.5px; background: var(--ink); opacity: 0.4;
}
.prop.urgent {
  background: linear-gradient(90deg, var(--accent) 0 6px, var(--card) 6px);
  border-left: 4px solid var(--danger);
}
.prop .countdown {
  font-family: var(--font-hand); font-size: 16px; color: var(--danger); font-weight: 700;
}


/* Deadline-alerts bell (topbar) + watchlist feed */
.alerts-bell {
  position: relative;
  background: var(--card); border: 1.5px solid var(--ink);
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  color: var(--ink);
}
.alerts-badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--danger); color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  line-height: 17px; text-align: center;
}
.alerts-badge[data-empty="1"] { display: none; }

#watchlist-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
#watchlist-alerts:empty { display: none; }
.wl-alerts-head {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
  margin: 4px 0 2px;
}
.wl-alert {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.wl-alert:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.wl-alert[data-tone="urgent"] { border-left-color: var(--danger); }
.wl-alert[data-tone="soon"] { border-left-color: #d97706; }
.wl-alert[data-tone="upcoming"] { border-left-color: var(--accent); }
.wl-alert-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.wl-alert[data-tone="urgent"] .wl-alert-dot { background: var(--danger); }
.wl-alert[data-tone="soon"] .wl-alert-dot { background: #d97706; }
.wl-alert[data-tone="upcoming"] .wl-alert-dot { background: var(--accent); }
.wl-alert-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wl-alert-title { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-alert-msg { font-size: 12px; color: var(--muted); }

.feedback-btn {
  background: var(--card); border: 2px solid var(--ink);
  padding: 4px 10px; font-family: var(--font-hand); font-size: 16px;
  cursor: pointer;
  display: inline-flex; gap: 5px; align-items: center;
  color: var(--ink);
}
.feedback-btn:hover { background: var(--accent); }
[data-theme="dark"] .feedback-btn { background: var(--paper-2); }

.theme-toggle {
  background: var(--card); border: 1.5px solid var(--ink);
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 16px;
  font-family: var(--font-mono);
  color: var(--ink);
}
.theme-toggle:hover { background: var(--accent); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--ink); opacity: 0.2; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 900px) {
  .results { grid-template-columns: 1fr; }
  .transcript-pane { max-height: 240px; }
  .detail { grid-template-columns: 1fr; gap: 16px; }
  .detail-aside { order: 0; }
  .detail-main { order: 1; }
  .fact-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-hero h1 { font-size: 38px; }
  .doc-preview iframe { height: min(520px, 65vh); }
}

/* ====== CHAT SIDEBAR DRAWER — mobile-only slide-in ====== */
.sb-backdrop { display: none; }
@media (max-width: 640px) {
  /* The history panel now slides within the results area like the matches panel,
     so the old full-screen backdrop is no longer used. */
  .sb-backdrop { display: none; }
  /* Override the desktop+tablet collapse-to-icon behaviour with a real
     slide-in drawer. Position fixed so it floats over the panes; transform
     drives the open/close animation. */
  .results .chat-sidebar {
    position: absolute; inset: 0;
    width: auto; max-height: none; min-height: 0; margin: 0;
    z-index: 6;
    background: var(--paper);
    transform: translateX(-100%);
    transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: none; border: 0;
    overflow-y: auto;
    padding: 12px 14px;
  }
  .results .chat-sidebar.mobile-on {
    transform: translateX(0);
  }
  /* When the panel is open, hide the desktop collapse toggle */
  .results .chat-sidebar.mobile-on .sb-toggle { display: none; }

  /* Card-style chat history items inside the mobile drawer */
  .results .chat-sidebar .sb-item {
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px; margin-bottom: 8px;
    background: var(--card); border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.6);
    position: relative;
  }
  .results .chat-sidebar .sb-item:hover { transform: translate(-1px, -1px); box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.7); }
  .results .chat-sidebar .sb-item-title {
    font-family: var(--font-hand); font-size: 18px; font-weight: 600;
    white-space: normal; line-height: 1.15;
  }
  .results .chat-sidebar .sb-item-preview {
    display: block;
    font-family: var(--font-body); font-size: 12px;
    color: var(--ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .results .chat-sidebar .sb-item-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; margin-top: 2px;
    font-family: var(--font-mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted);
  }
  .results .chat-sidebar .sb-item-meta .matches-count {
    background: var(--ink); color: var(--paper);
    padding: 2px 6px; border-radius: 10px;
    font-size: 9px;
  }
  .results .chat-sidebar .sb-item.active .sb-item-meta .matches-count {
    background: #1a1a1a; color: var(--accent);
  }
  .results .chat-sidebar .sb-item-del {
    position: absolute; top: 6px; right: 8px; opacity: 1;
  }
}

/* ====== MOBILE TABS — switch panels inside results screen (mobile-only) ====== */
.mobile-tabs { display: none; }
@media (max-width: 640px) {
  .mobile-tabs {
    display: flex;
    gap: 0;
    border: 1.5px solid var(--ink);
    background: var(--card);
    margin-bottom: 10px;
    box-shadow: var(--shadow);
    position: sticky; top: 0;
    z-index: 80;
  }
  .mobile-tabs button {
    flex: 1;
    background: transparent; border: 0;
    padding: 10px 8px;
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.06em;
    cursor: pointer; color: var(--ink);
    border-right: 1.5px solid var(--ink);
    display: flex; align-items: center; justify-content: center; gap: 4px;
    min-height: 40px;
  }
  .mobile-tabs button[data-mtab="history"] { flex: 0 0 48px; }
  .mobile-tabs button:last-child { border-right: 0; }
  .mobile-tabs button.on { background: var(--accent); color: #1a1a1a; }
  .mobile-tabs .badge {
    display: inline-block; min-width: 18px; padding: 1px 5px;
    margin-left: 4px; background: var(--ink); color: var(--paper);
    border-radius: 10px; font-size: 10px; line-height: 1.4;
  }
  .mobile-tabs button.on .badge { background: #1a1a1a; color: var(--accent); }
}

/* ====== BOTTOM TAB BAR (mobile-only) ====== */
.bottom-tabs { display: none; }
@media (max-width: 640px) {
  .bottom-tabs {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    background: var(--paper);
    border-top: 2px solid var(--ink);
    box-shadow: 0 -2px 0 rgba(0,0,0,0.08);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  /* Tucked off-screen until the user touches or scrolls the page (toggled by
     the auto-hide logic in app.js). 140% clears the bar plus its top border and
     safe-area inset; pointer-events drop so it never blocks content beneath. */
  .bottom-tabs.nav-hidden {
    transform: translateY(140%);
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .bottom-tabs { transition: none; }
  }
  .bottom-tabs .bt {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-family: var(--font-hand); font-size: 13px;
    padding: 6px 4px; min-height: 48px;
    cursor: pointer;
    position: relative;
  }
  .bottom-tabs .bt:hover { color: var(--ink); }
  .bottom-tabs .bt.on { background: var(--accent); color: var(--ink); border-color: var(--ink); }
  .bottom-tabs .bt-lbl { letter-spacing: 0.02em; line-height: 1; }
  .bottom-tabs .bt-badge {
    position: absolute; top: 2px; right: 8px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--ink); color: var(--paper);
    border-radius: 999px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .bottom-tabs .bt-badge:empty,
  .bottom-tabs .bt-badge[data-empty="1"] { display: none; }
  .bottom-tabs .bt.on .bt-badge { background: var(--ink); color: var(--accent); }
  body[data-theme="dark"] .bottom-tabs { background: var(--paper-2); }
  body[data-theme="dark"] .bottom-tabs .bt.on,
  body[data-theme="dark"] .bottom-tabs .bt.on svg { color: #1a1a1a !important; }
}

@media (max-width: 640px) {
  body { font-size: 14px; overflow: auto; }
  .app { border: 0; height: auto; min-height: 100vh; padding-bottom: 80px; }
  /* Each screen also gets bottom clearance so the inner inputs (e.g. results
     refine textarea, detail ask-about-property) sit above the bottom tabs. */
  .screen { padding-bottom: 80px !important; }
  /* On the chat screen, lock the page so only the inner chat-log / matches list
     scroll — the screen is height-bounded and clips its own overflow. */
  body:has(.screen[data-screen="results"].on) { overflow: hidden; }
  body:has(.screen[data-screen="results"].on) .app { padding-bottom: 0; min-height: 0; }
  .topbar { padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
  .brand { font-size: 20px; }
  /* Top-nav is replaced by the bottom tab bar on mobile */
  .top-nav { display: none; }
  .top-nav button { padding: 6px 10px; font-size: 11px; min-height: 32px; }
  .top-right { gap: 6px; margin-left: auto; }
  .feedback-btn { font-size: 0; padding: 0; line-height: 1; width: 36px; height: 36px; justify-content: center; }
  .feedback-btn::before {
    content: ""; width: 16px; height: 16px;
    background: currentColor;
    -webkit-mask: var(--i-feedback) center / contain no-repeat;
            mask: var(--i-feedback) center / contain no-repeat;
  }
  .avatar { width: 36px; height: 36px; font-size: 15px; }
  .theme-toggle { width: 36px; height: 36px; font-size: 16px; }
  .sb-toggle { width: 36px; height: 36px; }

  /* Pin the topbar so it stays anchored at the top while content scrolls.
     The bottom-tabs are already position:fixed at the viewport bottom — together
     they form persistent chrome with the screen content scrolling between them. */
  .topbar { position: sticky; top: 0; z-index: 70; }

  .screen-host { overflow: visible; }
  /* Desktop stacks every .screen at position:absolute and uses opacity to show
     the active one. On mobile they flow normally — hide the inactive ones with
     display:none, otherwise they all claim vertical space and push the active
     screen thousands of pixels below the topbar. */
  .screen { position: relative; inset: auto; padding: 16px 14px 24px; overflow: visible; }
  .screen:not(.on) { display: none; }
  .screen.on { display: flex; }

  /* Chat (results) screen — fill the viewport between topbar and bottom-tabs so
     the conversation panel and its refine input don't float in the middle of the
     page with empty space below them. */
  /* Bound the chat screen to exactly the space between the sticky topbar (56px)
     and the fixed bottom-tabs (64px) and clip its overflow, so the page itself
     never scrolls — only the inner chat-log (and the matches list) scroll. */
  /* Hide the global header on the chat screen for a full-height conversation;
     it reappears on the other tabs. */
  body:has(.screen[data-screen="results"].on) .topbar { display: none; }
  .screen[data-screen="results"].on {
    /* Fill from the top of the viewport down to just above the fixed bottom-tabs.
       The icon-only bar is ~46px tall PLUS the device bottom safe-area inset —
       subtracting the inset is what stops it from clipping the chat input. */
    height: calc(100dvh - 46px - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    padding-bottom: 0 !important;
    overflow: hidden;
  }
  .screen[data-screen="results"] .results {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
    gap: 0;
    /* contain the matches slide-over and clip it while parked off-screen */
    position: relative;
    overflow: hidden;
  }
  /* Matches panel: an overlay that slides in from the right over the
     always-present conversation. Parked off-screen by default so the
     conversation fills the area and its chat input stays visible. */
  .screen[data-screen="results"] .results-pane {
    position: absolute;
    inset: 0;
    background: var(--paper);
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
    z-index: 5;
  }
  .screen[data-screen="results"] .results-pane.show {
    transform: translateX(0);
  }
  /* Cancel the tablet-breakpoint max-height that was clamping the panes to
     ~220px on mobile too — it leaks in from the @media (max-width: 1000px) rule. */
  .screen[data-screen="results"] .transcript-pane,
  .screen[data-screen="results"] .results-pane {
    max-height: none;
  }
  .screen[data-screen="results"] .transcript-pane {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
  }
  .screen[data-screen="results"] .transcript-pane .chat-log {
    flex: 1; min-height: 0; overflow-y: auto;
  }
  .screen[data-screen="results"] .transcript-pane .chat-input {
    flex-shrink: 0;
  }
  .landing-hero { padding-top: 12px; gap: 14px; }
  .landing-hero h1 { font-size: 32px; }
  .landing-sub { font-size: 11px; }
  .landing-suggest { gap: 6px; }

  .chat-input { padding: 7px 8px; gap: 8px; }
  .chat-input input,
  .chat-input input::placeholder,
  .chat-input textarea,
  .chat-input textarea::placeholder { font-size: 16px; }
  /* Send button sized to the new font so the bar stays a tidy, compact height.
     The textarea still auto-grows (up to 160px) as you type. */
  .chat-input .send { width: 38px; height: 38px; font-size: 18px; }

  .fact-grid { grid-template-columns: 1fr; }
  .fact .val { font-size: 14px; }
  .fact.big .val { font-size: 18px; }
  .modal { width: 96vw; padding: 16px; }

  .hero-photo { height: 180px; }
  .detail-title { font-size: 32px; }
  .detail-section-title { font-size: 20px; }
  .watchlist-head h2 { font-size: 30px; }

  .prop { padding: 10px; gap: 10px; }
  .prop .thumb { width: 96px; height: 76px; }
  .prop .title { font-size: 20px; white-space: normal; line-height: 1.1; }
  .prop .price { font-size: 13px; }
  .prop .why { font-size: 14px; }
  .prop.urgent { background: linear-gradient(90deg, var(--accent) 0 4px, var(--card) 4px); }

  .bubble { max-width: 94%; font-size: 14px; }
  .b-act { padding: 5px 7px; }
  .chip { padding: 6px 12px; font-size: 13px; }
}

@media (max-width: 480px) {
  .prop .thumb { width: 84px; height: 68px; }
  .prop .title { font-size: 18px; }
  .landing-hero h1 { font-size: 28px; }
  .detail-title { font-size: 28px; }
  .hero-photo { height: 160px; }
  .screen { padding: 14px 12px 20px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1; }
}

@media (max-width: 380px) {
  .brand { font-size: 18px; }
  .top-right { gap: 4px; }
  .topbar { padding: 8px 10px; }
  .landing-hero h1 { font-size: 24px; }
}

/* =====================================================================
   ===================  CLEAN REDESIGN LAYER  ==========================
   Restyles components into the minimal/professional (fintech) system on
   top of the original layout rules above. Selectors mirror the originals
   so these win on the cascade; structure/scroll/mobile behaviour is left
   untouched. Single source of truth for the new visual language.
   ===================================================================== */

/* tabular figures for prices/counts now that everything is Inter */
.mono, .num, .price, .val, .count, .fact .val, .history-price,
.resp-time, .filter-multi-opt .count, .doc .mono { font-variant-numeric: tabular-nums; }

/* ---- shell ---- */
.app { border-left: 0; border-right: 0; }
/* slightly airier desktop screen padding (mobile padding is left to the
   original 640px rules, which must win — so scope this to wider viewports) */
@media (min-width: 641px) { .screen { padding: 36px 32px 44px; } }

/* ---- top bar ---- */
.topbar {
  padding: 12px 24px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: 18px; font-weight: 650;
  letter-spacing: -0.02em; color: var(--ink);
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--accent); display: grid; place-items: center;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.18);
}
.brand-mark svg { display: block; }
.brand-name b { font-weight: 700; }
.brand-name span { color: var(--muted); font-weight: 500; }
.brand em { background: transparent; color: var(--accent); padding: 0; font-style: normal; }

.top-nav { gap: 2px; font-family: var(--font-body); font-size: 14px; }
.top-nav button {
  border: 0; border-radius: var(--radius-sm);
  padding: 7px 12px; font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--ink-soft);
  transition: background 150ms ease, color 150ms ease;
}
.top-nav button:hover { background: var(--paper-2); color: var(--ink); border-color: transparent; }
.top-nav button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.top-right { gap: 8px; }
.avatar {
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
}

/* topbar icon/utility buttons */
.theme-toggle, .sb-toggle {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--ink-soft);
  box-shadow: var(--shadow);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.theme-toggle { width: 38px; height: 38px; }
.theme-toggle:hover, .sb-toggle:hover { background: var(--paper-2); color: var(--ink); border-color: var(--border-strong); }
.feedback-btn {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--ink-soft); box-shadow: var(--shadow);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.feedback-btn:hover { background: var(--paper-2); color: var(--ink); border-color: var(--border-strong); }
[data-theme="dark"] .feedback-btn { background: var(--card); }

/* ---- landing hero ---- */
.landing-hero h1 {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.025em;
}
.landing-hero h1 em { background: transparent; color: var(--accent); padding: 0; font-style: normal; }
.landing-sub {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--accent); letter-spacing: 0.02em; text-transform: none;
}

/* ---- chat input (hero + refine + ask) ---- */
.chat-input {
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--card); box-shadow: var(--shadow);
  padding: 10px 10px 10px 16px; gap: 8px; align-items: flex-end;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.chat-input:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus); }
/* The container shows the focus state, so suppress the inner field's own
   focus-visible outline — it drew a second blue box that shrank the type area. */
.chat-input input:focus-visible,
.chat-input textarea:focus-visible { outline: none; }
.chat-input input, .chat-input textarea {
  font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--ink); padding: 7px 0;
}
.chat-input input::placeholder, .chat-input textarea::placeholder {
  font-family: var(--font-body); font-size: 14px; color: var(--muted);
}
.chat-input .send {
  width: 38px; height: 38px; border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent);
  font-size: 18px; transition: background 150ms ease;
}
.chat-input .send:hover { background: var(--accent-hover); color: var(--on-accent); }

/* ====== Composer pickers: answer-mode + model/thinking-effort ===============
   Both controls are the SAME pill that opens a popover (group label + rows of
   name / one-line description / check). One component, one format: the mode pill
   shows an icon + the current mode; the model pill shows model + effort. Built
   on tokens so they track light/dark with no theme-specific rules. The popover
   opens UPWARD because both chat bars sit low in their panels (a sibling of the
   scrolling chat-log, so nothing clips it), flipping DOWN via .drop-down when
   there's no room above. ====================================================*/
.model-picker, .mode-picker { position: relative; flex-shrink: 0; }

.model-picker-trigger, .mode-picker-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 10px; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--paper-2); color: var(--ink-soft);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.model-picker-trigger:hover, .mode-picker-trigger:hover {
  background: var(--card); color: var(--ink); border-color: var(--border-strong);
}
.model-picker-trigger[aria-expanded="true"], .mode-picker-trigger[aria-expanded="true"] {
  background: var(--accent-soft); color: var(--accent); border-color: transparent;
}
.mpt-ico { flex-shrink: 0; opacity: 0.9; }
.mpt-model, .mpt-mode { font-weight: 700; color: var(--ink); }
.model-picker-trigger:hover .mpt-model,
.model-picker-trigger[aria-expanded="true"] .mpt-model,
.mode-picker-trigger:hover .mpt-mode,
.mode-picker-trigger[aria-expanded="true"] .mpt-mode { color: inherit; }
.mpt-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.4; flex-shrink: 0; }
.mpt-effort { font-weight: 500; opacity: 0.85; }
.mpt-caret { margin-left: 1px; opacity: 0.7; transition: transform 180ms ease; }
.model-picker-trigger[aria-expanded="true"] .mpt-caret,
.mode-picker-trigger[aria-expanded="true"] .mpt-caret { transform: rotate(180deg); }

.model-picker-pop, .mode-picker-pop {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 50;
  width: 290px; max-width: min(290px, 80vw);
  max-height: min(380px, 62vh); overflow-y: auto;
  padding: 6px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
  transform-origin: bottom left;
  animation: mp-pop-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* [hidden] is a UA rule (display:none) and loses to the author display:flex
   above — without this the popover would never close. Re-assert it. */
.model-picker-pop[hidden], .mode-picker-pop[hidden] { display: none; }
/* Flipped placement: when there isn't room above the trigger (e.g. the landing
   composer under the sticky header), JS adds .drop-down so the panel opens
   below instead of clipping. max-height is set inline to the available space. */
.model-picker-pop.drop-down, .mode-picker-pop.drop-down {
  bottom: auto; top: calc(100% + 8px);
  transform-origin: top left;
  animation-name: mp-pop-in-down;
}
@keyframes mp-pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mp-pop-in-down {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .model-picker-pop, .mode-picker-pop { animation: none; } }

.mp-group-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  padding: 8px 10px 4px;
}
.mp-divider { height: 1px; background: var(--border); margin: 5px 4px; }

.mp-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  text-align: left; padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); cursor: pointer;
  font-family: var(--font-body);
  transition: background 120ms ease;
}
.mp-item:hover:not([disabled]) { background: var(--paper-2); }
.mp-item[aria-checked="true"] { background: var(--accent-soft); }
.mp-item[disabled] { cursor: not-allowed; }
.mp-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-item-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25;
}
.mp-item[disabled] .mp-item-label { color: var(--muted); }
.mp-item-desc { font-size: 11.5px; font-weight: 450; color: var(--muted); line-height: 1.35; }
.mp-lock {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
  background: var(--paper-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 1px 7px;
}
.mp-item-check {
  flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px;
  color: var(--accent); opacity: 0; transition: opacity 120ms ease;
}
.mp-item[aria-checked="true"] .mp-item-check { opacity: 1; }

/* On narrow screens drop the effort label from the trigger (still selectable in
   the popover) so the bar keeps a comfortable typing area. */
@media (max-width: 420px) {
  .mpt-effort, .mpt-dot { display: none; }
  .model-picker-pop, .mode-picker-pop { width: 270px; }
}

/* Stacked composer: textarea on top, with a controls toolbar pinned to the
   bottom — mode + model pickers on the left, send on the right (modern chat
   composer layout). Opt-in via .chat-input--stacked so the compact
   property-detail ask box keeps its single-row layout. Implemented with
   flex-wrap: the full-width textarea forces the controls onto the row below,
   and order:-1 floats the textarea to the top regardless of DOM position. */
.chat-input.chat-input--stacked {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.chat-input.chat-input--stacked > textarea {
  order: -1;
  flex: 1 1 100%;
  width: 100%;
}
.chat-input.chat-input--stacked > .send {
  margin-left: auto;   /* push send to the far right of the toolbar row */
}

/* Property-detail "ask about this property" panel — clean card (replaces the old
   inline dashed sketchbook boxes). */
.detail-ask {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow);
  padding: 12px;
}
.detail-ask-new {
  background: var(--card); color: var(--ink-soft);
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  padding: 4px 8px; cursor: pointer;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.detail-ask-new:hover { background: var(--paper-2); color: var(--ink); border-color: var(--border-strong); }

/* ---- chips ---- */
.chip {
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 7px 14px; font-family: var(--font-body); font-size: 13px; font-weight: 500;
  background: var(--card); color: var(--ink-soft);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.chip:hover { background: var(--paper-2); color: var(--ink); border-color: var(--border-strong); transform: translateY(-1px); }
.chip.filled { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.chip.filled:hover { background: var(--accent-hover); color: var(--on-accent); }
.chip.ink { background: var(--ink); color: var(--card); border-color: transparent; }

/* ---- micro labels ---- */
.lbl, .filter-group .lbl-inline, .browse-hint, .sb-group-label, .prop .loc, .detail-sub {
  font-family: var(--font-body); letter-spacing: 0.04em;
}
/* ---- browse heading ---- */
.browse { border-top: 1px solid var(--border); }
.browse-head h2 { font-family: var(--font-body); font-size: clamp(22px, 5.5vw, 26px); font-weight: 700; letter-spacing: -0.02em; }
.browse-head h2 em { background: transparent; color: var(--accent); padding: 0; }
.browse-meta .count, .results-head .count {
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
}

/* ---- filter bar ---- */
.browse-filters {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); box-shadow: var(--shadow); padding: 16px; gap: 12px;
}
.browse-search {
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--card); padding: 9px 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.browse-search:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.browse-search input { font-family: var(--font-body); font-size: 14px; color: var(--ink); }
.filter-select, .filter-multi-btn, .filter-num, .filter-date,
.sb-search, .results-sort {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
  font-family: var(--font-body); font-size: 13px;
  padding: 8px 11px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.filter-date { font-family: var(--font-body); }
.filter-select:hover, .filter-multi-btn:hover, .filter-num:hover, .filter-date:hover,
.sb-search:hover, .results-sort:hover { background: var(--card); border-color: var(--border-strong); color: var(--ink); }
.filter-select:focus, .filter-multi-btn:focus, .filter-num:focus, .filter-date:focus,
.sb-search:focus, .results-sort:focus, .filter-multi-search-input:focus {
  border-color: var(--accent); box-shadow: var(--shadow-focus); outline: 0;
}
.filter-multi.open .filter-multi-btn { border-color: var(--accent); box-shadow: var(--shadow-focus); background: var(--card); color: var(--ink); }
.filter-multi-caret { color: var(--muted); }
.filter-multi-panel {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
  box-shadow: var(--shadow-lg); padding: 6px; font-family: var(--font-body);
}
.filter-multi-search { border-bottom: 1px solid var(--border); }
.filter-multi-search-input {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); font-family: var(--font-body);
}
.filter-multi-opt { border-radius: var(--radius-sm); padding: 8px 10px; }
.filter-multi-opt:hover { background: var(--paper-2); }
.filter-multi-opt input { accent-color: var(--accent); width: 16px; height: 16px; }
.filter-multi-opt .count { font-family: var(--font-body); color: var(--muted); }
.dash { font-family: var(--font-body); color: var(--muted); }

.filter-clear {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink-soft);
  font-family: var(--font-body); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
  padding: 8px 12px;
}
.filter-clear:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.filter-clear:disabled { background: var(--card); color: var(--muted); border-color: var(--border); }
.filter-chat {
  border: 0; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
  padding: 8px 13px; box-shadow: var(--shadow);
}
.filter-chat:hover:not(:disabled) { background: var(--accent-hover); color: var(--on-accent); }

.active-chip {
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-body); font-size: 13px; font-weight: 500; text-transform: none;
  padding: 5px 10px;
}
.active-chip:hover { background: var(--accent-soft-2); color: var(--accent); }
.active-chip .x { opacity: 0.65; font-weight: 600; }
.active-chip:hover .x { opacity: 1; }

/* ---- pager / empty states ---- */
.browse-pager .lm-btn {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
  box-shadow: var(--shadow);
}
.browse-pager .lm-btn:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); transform: translateY(-1px); }
.browse-pager .lm-progress, .browse-pager .lm-end { font-family: var(--font-body); color: var(--muted); }
.browse-empty, .results-empty {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--card); font-family: var(--font-body); font-size: 16px; color: var(--ink-soft);
}

/* ---- property card ---- */
.prop {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); box-shadow: var(--shadow); gap: 16px; padding: 16px;
  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.prop:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.prop .thumb {
  width: 124px; height: 100px; border: 0; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
}
.prop .meta { gap: 7px; }
.prop .title {
  font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink); white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prop .loc { font-family: var(--font-body); font-size: 13px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.prop .ended-tag {
  border: 0; border-radius: var(--radius-xs);
  background: var(--danger-soft, rgba(214, 74, 46, 0.12)); color: var(--danger);
  font-family: var(--font-body); font-size: 12px; font-weight: 600; padding: 3px 9px;
}
.prop .price { font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.prop .price-drop {
  border: 0; border-radius: var(--radius-xs);
  background: var(--good-soft); color: var(--good);
  font-family: var(--font-body); font-size: 12px; font-weight: 600; padding: 3px 9px;
}
[data-theme="dark"] .prop .price-drop { background: var(--good-soft); color: var(--good); border: 0; }
.prop .why { font-family: var(--font-body); font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.prop .countdown { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--danger); }
.card-save { color: var(--muted); border-radius: var(--radius-sm); }
.card-save.saved { color: var(--accent); }
.card-save:hover { transform: none; color: var(--accent); }
.prop.urgent {
  background: var(--card); border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  border-left: 3px solid var(--danger);
}

/* ---- detail ---- */
.back-link { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.back-link:hover { color: var(--ink); }
.detail-title { font-family: var(--font-body); font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
.detail-sub { font-family: var(--font-body); font-size: 14px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.hero-photo {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2)); color: var(--accent);
}
.fact {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); padding: 13px 15px;
}
.fact .val { font-family: var(--font-body); font-size: 17px; font-weight: 600; }
.fact.big .val { font-size: 24px; color: var(--accent); letter-spacing: -0.02em; }
.fact.accent { background: var(--accent-soft); border-color: transparent; }
.fact.accent .val { color: var(--accent); }
.detail-section-title { font-family: var(--font-body); font-size: 16px; font-weight: 600; }
.price-history, .detail-desc, .doc {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); font-family: var(--font-body);
}
.detail-desc { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.history-row { border-radius: var(--radius-sm); border-left: 0; }
.history-row[data-jump-id]:hover { background: var(--paper-2); border-left: 0; }
.history-row.current { background: var(--accent-soft); border-left: 0; }
.history-row .history-when, .history-row .history-tag { font-family: var(--font-body); color: var(--muted); text-transform: none; letter-spacing: 0; }
.history-row.current .history-when, .history-row.current .history-tag { color: var(--accent); }
.history-row .history-price { font-family: var(--font-body); }
.history-row .history-delta.down { color: var(--good); }
.history-row .history-delta.up { color: var(--danger); }
.doc { font-size: 14px; color: var(--ink); }
.doc:hover { background: var(--paper-2); border-color: var(--border-strong); }
.doc .mono { color: var(--muted); }
.doc-badge {
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--paper-2); color: var(--ink-soft); font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0;
}
.doc-toggle {
  border: 0; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-body); font-weight: 600;
}
.doc-toggle:hover { background: var(--accent-soft-2); filter: none; }
.doc-preview { border: 1px solid var(--border); border-radius: var(--radius); }

/* ---- buttons ---- */
.btn {
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  padding: 11px 16px; box-shadow: var(--shadow);
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn.ghost {
  background: var(--card); color: var(--ink); border-color: var(--border-strong);
}
.btn.ghost:hover { background: var(--paper-2); color: var(--ink); }
.btn.ink { background: var(--ink); color: var(--card); }
[data-theme="dark"] .btn.ghost { color: var(--ink); }

/* ---- chat sidebar ---- */
.chat-sidebar {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); box-shadow: var(--shadow);
}
.sb-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.sb-toggle { width: 28px; height: 28px; }
.sb-new {
  border: 0; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; box-shadow: none;
}
.sb-new:hover { background: var(--accent-soft-2); transform: none; }
.sb-group-label { font-family: var(--font-body); color: var(--muted); }
.sb-item {
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13.5px; color: var(--ink-soft);
}
.sb-item:hover { background: var(--paper-2); border-color: transparent; color: var(--ink); }
.sb-item.active { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.sb-item-pin { font-family: var(--font-body); color: var(--muted); }
.sb-item.active .sb-item-pin { color: var(--accent); }
.tp-resize::after { background: var(--border-strong); }
.tp-resize:hover::after { background: var(--accent); opacity: 0.7; }
#detail-chat-history .pch-item { border: 1px solid transparent; border-radius: var(--radius-sm); font-family: var(--font-body); }
#detail-chat-history .pch-item:hover { background: var(--paper-2); border-color: transparent; }
#detail-chat-history .pch-item.active { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
#detail-chat-history .pch-ts { font-family: var(--font-body); color: var(--muted); }
#detail-chat-history .pch-item.active .pch-ts { color: var(--accent); }

/* ---- transcript / bubbles ---- */
.transcript-pane {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); box-shadow: var(--shadow);
}
.transcript-head { border-bottom: 1px solid var(--border); }
.transcript-head .hand { font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.bubble {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  padding: 10px 14px;
}
.bubble.user { background: var(--accent); color: var(--on-accent); border-color: transparent; border-bottom-right-radius: var(--radius-xs); }
/* Agent answer: no card chrome (like ChatGPT/Claude). It blends into the page
   background and sits flush-left so tables and long content use the full width.
   Only the user message keeps a bubble. */
.bubble.ai {
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 2px 0;
  width: 100%;
  max-width: 100%;
}
.bubble.ai.thinking { font-family: var(--font-body); font-size: 14px; color: var(--muted); }

/* Optimised chat-area typography — Inter renders noticeably larger than the
   old script font these px values were originally tuned for, so scale the
   markdown headings inside AI replies down toward body size. */
.bubble.ai.md .md-h1 { font-size: 16px; }
.bubble.ai.md .md-h2 { font-size: 15px; }
.bubble.ai.md .md-h3 { font-size: 14px; }
.bubble.ai.md .md-h4 { font-size: 13.5px; }
.bubble.ai.md .md-h5, .bubble.ai.md .md-h6 { font-size: 12.5px; }
.b-act { border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--card); color: var(--ink-soft); }
.b-act:hover { background: var(--paper-2); color: var(--ink); }
.b-act.active { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.b-act.flash { background: var(--accent-soft); color: var(--accent); }

/* markdown inside AI bubbles */
.bubble.ai.md a { color: var(--accent); text-decoration-thickness: 1.5px; }
.bubble.ai.md a:hover { background: transparent; color: var(--accent-hover); }
.bubble.ai.md .md-h1 { border-bottom: 1px solid var(--border); }
.bubble.ai.md .md-h2 { border-bottom: 1px solid var(--border); }
.bubble.ai.md .md-code, .bubble.ai.md .md-pre {
  background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius-xs);
}
.bubble.ai.md .md-table { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.bubble.ai.md .md-table th, .bubble.ai.md .md-table td { border: 1px solid var(--border); }
.bubble.ai.md .md-table thead th { background: var(--accent-soft); color: var(--accent); }
[data-theme="dark"] .bubble.ai.md .md-table thead th { color: var(--accent); }
.bubble.ai.md .md-table tbody tr:nth-child(even) td { background: var(--paper-2); }
.bubble.ai.md .md-hr { border-top: 1px solid var(--border); }
.detail-desc.formatted .md-h1, .detail-desc.formatted .md-h2, .detail-desc.formatted .md-h3 { border-bottom: 1px solid var(--border); }
.detail-desc.formatted .md-hr { border-top: 1px solid var(--border); }

/* sources / timing */
.sources-label { font-family: var(--font-body); font-size: 12px; color: var(--muted); }
.source-chip {
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--paper-2); color: var(--ink-soft); font-family: var(--font-body); font-size: 12px;
}
.source-chip:hover { background: var(--card); border-color: var(--border-strong); color: var(--ink); transform: translateY(-1px); }
.resp-time { font-family: var(--font-body); color: var(--muted); }

/* results pane */
.results-head .count { font-family: var(--font-body); }

/* ---- watchlist ---- */
.watchlist-head { border-bottom: 1px solid var(--border); }
.watchlist-head h2 { font-family: var(--font-body); font-size: clamp(22px, 5.5vw, 26px); font-weight: 700; letter-spacing: -0.02em; }
.timeline-label { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.timeline-label .dot { background: var(--accent); }
.timeline-label.urgent { color: var(--danger); }
.timeline-label.urgent .dot { background: var(--danger); }
.timeline-label .rule { background: var(--border); opacity: 1; }

/* ---- modal ---- */
.modal-backdrop { background: rgba(10,11,13,0.5); }
.modal { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-lg); }
.modal h3 { font-family: var(--font-body); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.modal textarea {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); font-family: var(--font-body);
}
.modal textarea:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); outline: 0; }
.modal-tags .chip.filled { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.modal-rating button { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); font-family: var(--font-body); }
.modal-rating button.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

/* =====================================================================
   Mobile redesign overrides (match the app's 640px breakpoint + JS hooks)
   ===================================================================== */
@media (max-width: 640px) {
  .mobile-tabs {
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper-2);
    box-shadow: none; padding: 4px; gap: 4px;
  }
  .mobile-tabs button {
    border: 0; border-right: 0; border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--ink-soft);
  }
  .mobile-tabs button.on { background: var(--card); color: var(--accent); box-shadow: var(--shadow); }
  .mobile-tabs .badge { background: var(--muted); color: var(--card); border-radius: var(--radius-pill); }
  .mobile-tabs button.on .badge { background: var(--accent); color: var(--on-accent); }

  .bottom-tabs {
    background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid var(--border); box-shadow: none;
  }
  .bottom-tabs .bt { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--muted); border-radius: var(--radius-sm); }
  .bottom-tabs .bt:hover { color: var(--ink); }
  .bottom-tabs .bt.on { background: transparent; color: var(--accent); border-color: transparent; }
  .bottom-tabs .bt-badge { background: var(--accent); color: var(--on-accent); }
  .bottom-tabs .bt.on .bt-badge { background: var(--accent); color: var(--on-accent); }
  body[data-theme="dark"] .bottom-tabs { background: color-mix(in srgb, var(--card) 92%, transparent); }
  body[data-theme="dark"] .bottom-tabs .bt.on,
  body[data-theme="dark"] .bottom-tabs .bt.on svg { color: var(--accent) !important; }

  /* Collapse feedback to an icon-only button on mobile. The desktop redesign layer
     (.feedback-btn) is appended after the original 640px rules and would otherwise
     re-show the text label, causing it to clip to "feedbac". Re-assert the collapse
     here so the last-winning mobile rule keeps it icon-only. */
  .feedback-btn {
    font-size: 0; padding: 0; line-height: 1;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
  }
  .feedback-btn::before {
    content: ""; width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: var(--i-feedback) center / contain no-repeat;
            mask: var(--i-feedback) center / contain no-repeat;
  }
  .theme-toggle { width: 38px; height: 38px; }
  .top-right { gap: 6px; align-items: center; }

  /* re-assert mobile sizing the desktop layer would otherwise override
     (it is appended after the original 640px rules) */
  .topbar { padding: 10px 14px; }
  .landing-hero h1 { font-size: clamp(26px, 7vw, 32px); }
  .chat-input { padding: 10px; }
  .chat-input .send { width: 44px; height: 44px; }   /* keep 44px touch target */
  .prop { padding: 12px; gap: 12px; }
  .prop .thumb { width: 96px; height: 80px; }

  /* mobile chat-history drawer cards */
  .results .chat-sidebar .sb-item {
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
    box-shadow: var(--shadow);
  }
  .results .chat-sidebar .sb-item:hover { transform: none; box-shadow: var(--shadow-md); }
  .results .chat-sidebar .sb-item-title { font-family: var(--font-body); font-weight: 600; }
  .results .chat-sidebar .sb-item-preview { font-family: var(--font-body); color: var(--ink-soft); }
  .results .chat-sidebar .sb-item-meta { font-family: var(--font-body); text-transform: none; letter-spacing: 0; color: var(--muted); }
  .results .chat-sidebar .sb-item-meta .matches-count { background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-pill); }
  .results .chat-sidebar .sb-item.active .sb-item-meta .matches-count { background: var(--accent); color: var(--on-accent); }
  .prop.urgent { background: var(--card); border-left: 3px solid var(--danger); }

  /* ---- maximize conversation area on mobile ----
     The sticky segmented tab bar already labels "conversation", so the in-panel
     heading is redundant. Drop the label (keep the +new action), strip the panel
     frame, and tighten margins so messages use the full available height. */
  .mobile-tabs { margin-bottom: 6px; }
  .screen[data-screen="results"] .transcript-pane {
    border: 0; box-shadow: none; padding: 0; gap: 6px;
  }
  /* The segmented tab bar already labels the conversation, so drop the in-panel
     header and its "+ new" button. A new chat is still one tap away via the
     history (clock) tab → "+ new chat". */
  .screen[data-screen="results"] .transcript-head { display: none; }
  /* trim the empty-state so the prompt + chips sit higher and feel less sparse */
  .screen[data-screen="results"] .chat-empty { padding: 12px 8px; gap: 8px; }
  /* breathing room between the chat input and the bottom navigation bar */
  .screen[data-screen="results"] .chat-input { margin-bottom: 10px; }
  /* Center the row so a single line of text aligns with the buttons. Placed here
     (after the desktop redesign layer) so it wins over its flex-end default. */
  .chat-input { align-items: center; }

  /* compact, icon-only bottom navigation: drop the text labels and shrink the
     bar height (kept in sync with the chat-screen height calc above). */
  .bottom-tabs { padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .bottom-tabs .bt { min-height: 34px; padding: 4px; gap: 0; }
  .bottom-tabs .bt-lbl { display: none; }
  .bottom-tabs .bt svg { width: 23px; height: 23px; }
}

/* ============================================================
   My Dossiers — private per-property document locker
   Uses the shared design tokens (:root) so it tracks the theme.
   ============================================================ */
.dossiers-wrap { max-width: 880px; margin: 0 auto; padding: 24px 16px 64px; }
#dossiers-body { min-height: 200px; }

.dossier-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.dossier-head h2 { margin: 0; font-size: 24px; color: var(--ink); }
.dossier-count { color: var(--muted); font-size: 13px; margin-top: 2px; }

.dossier-loading { color: var(--muted); text-align: center; padding: 48px 16px; }

.dossier-empty { text-align: center; padding: 56px 24px; }
.dossier-empty-title { font-size: 18px; color: var(--ink); font-weight: 600; }
.dossier-empty-sub {
  color: var(--muted); margin-top: 8px; max-width: 460px;
  margin-left: auto; margin-right: auto; line-height: 1.55;
}

/* List of dossier cards */
.dossier-list { display: flex; flex-direction: column; gap: 12px; }
.dossier-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px;
  box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s, transform .05s;
}
.dossier-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.dossier-card:active { transform: translateY(1px); }
.dossier-card-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.dossier-card-sub { color: var(--ink-soft); font-size: 13px; margin-top: 3px; }
.dossier-card-meta { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* Readiness score badge */
.dossier-score {
  flex: 0 0 auto; text-align: center; border-radius: var(--radius);
  padding: 8px 12px; min-width: 76px; border: 1px solid var(--border);
}
.dossier-score.good { background: var(--good-soft); border-color: var(--good); }
.dossier-score.mid  { background: var(--accent-soft); border-color: var(--accent-soft-2); }
.dossier-score.low  { background: var(--danger-soft); border-color: var(--danger); }
.dossier-score-num { font-size: 26px; font-weight: 700; line-height: 1; color: var(--ink); }
.dossier-score.good .dossier-score-num { color: var(--good); }
.dossier-score.mid  .dossier-score-num { color: var(--accent); }
.dossier-score.low  .dossier-score-num { color: var(--danger); }
.dossier-score-lbl { font-size: 11px; color: var(--muted); margin-top: 4px; }
.dossier-score.big { min-width: 104px; padding: 12px 16px; }
.dossier-score.big .dossier-score-num { font-size: 38px; }

/* Detail view */
.dossier-back {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 14px; padding: 4px 0; margin-bottom: 14px;
}
.dossier-back:hover { color: var(--accent-hover); text-decoration: underline; }
.dossier-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.dossier-detail-title { font-size: 22px; font-weight: 700; color: var(--ink); }
.dossier-detail-sub { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }

.dossier-card-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.dossier-section-title {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 12px;
}

/* Missing must-haves */
.dossier-missing {
  background: var(--danger-soft); border: 1px solid var(--danger);
  border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px;
}
.dossier-allset {
  background: var(--good-soft); border: 1px solid var(--good); color: var(--good);
  border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 16px; font-weight: 500;
}
.dossier-miss-list { list-style: none; margin: 0; padding: 0; }
.dossier-miss-list li { padding: 8px 0; border-top: 1px solid var(--border); }
.dossier-miss-list li:first-child { border-top: none; }
.dossier-miss-name { font-weight: 600; color: var(--ink); }
.dossier-how { font-size: 13px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.dossier-how a { color: var(--accent); text-decoration: none; }
.dossier-how a:hover { text-decoration: underline; }

/* Documents */
.dossier-docs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.dossier-doc {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px;
  background: var(--paper);
}
.dossier-doc-name { font-weight: 500; color: var(--ink); word-break: break-word; }
.dossier-doc-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.dossier-doc-type { color: var(--ink-soft); font-weight: 500; }
.dossier-doc-actions { display: flex; gap: 12px; flex: 0 0 auto; }
.dossier-doc-empty { color: var(--muted); font-size: 14px; padding: 8px 0 16px; }

.dossier-status {
  display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: var(--radius-pill);
  font-weight: 600; text-transform: lowercase;
}
.dossier-status.good { background: var(--good-soft); color: var(--good); }
.dossier-status.mid  { background: var(--accent-soft); color: var(--accent); }
.dossier-status.low  { background: var(--danger-soft); color: var(--danger); }

.dossier-link {
  background: none; border: none; cursor: pointer; color: var(--accent);
  font-size: 13px; padding: 2px 0;
}
.dossier-link:hover { text-decoration: underline; }
.dossier-link.danger { color: var(--danger); }

/* Upload control */
.dossier-upload {
  border-top: 1px solid var(--border); padding-top: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.dossier-upload input[type=file] { font-size: 13px; color: var(--ink-soft); max-width: 100%; }
.dossier-consent {
  display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft);
  flex-basis: 100%;
}
.dossier-upload-msg { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.dossier-upload-msg.ok { color: var(--good); }
.dossier-upload-msg.err { color: var(--danger); }

/* Full checklist (collapsible categories) */
.dossier-cat { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; }
.dossier-cat summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; padding: 10px 14px; list-style: none;
}
.dossier-cat summary::-webkit-details-marker { display: none; }
.dossier-cat-name { font-weight: 500; color: var(--ink); }
.dossier-cat-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.dossier-cat-list { list-style: none; margin: 0; padding: 0 14px 12px; }
.dossier-cat-list li { padding: 4px 0; font-size: 14px; color: var(--ink-soft); }
.dossier-cat-list li.have { color: var(--ink); }
.dossier-cat-list li.miss { color: var(--muted); }
.dossier-tick { display: inline-block; width: 18px; color: var(--muted); }
.dossier-cat-list li.have .dossier-tick { color: var(--good); }
.dossier-cond { color: var(--muted); font-size: 12px; }

.dossier-del { display: block; margin: 4px auto 0; }

/* Create modal */
.dossier-modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,11,13,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px;
}
.dossier-modal {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 22px; width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
}
.dossier-modal h3 { margin: 0 0 16px; color: var(--ink); font-size: 19px; }
.dossier-field { display: block; margin-bottom: 14px; }
.dossier-field > span { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 5px; }
.dossier-field em { color: var(--muted); font-style: normal; }
.dossier-field input[type=text] {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 14px;
}
.dossier-field input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.dossier-radio { display: flex; flex-direction: column; gap: 7px; }
.dossier-radio label { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-soft); }
.dossier-modal-err { color: var(--danger); font-size: 13px; min-height: 18px; margin: 4px 0 8px; }
.dossier-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 640px) {
  .dossier-card { flex-direction: row; }
  .dossier-detail-head { flex-direction: column-reverse; align-items: flex-start; }
  .dossiers-wrap { padding: 16px 12px 80px; }
}

/* ── Dossiers feature flag ────────────────────────────────────────────────
   The private document-dossier feature ships dark for the public release. Its
   entry points (top-nav + bottom-tab buttons, the property-detail "create
   dossier" button, and the screen itself) stay hidden unless the page sets
   <html class="dossiers-enabled"> — see the bootstrap in index.html (toggle
   with ?dossiers=1 / ?dossiers=0). Mirrors the backend DOSSIERS_ENABLED flag. */
html:not(.dossiers-enabled) [data-nav="dossiers"],
html:not(.dossiers-enabled) #detail-dossier,
html:not(.dossiers-enabled) [data-screen="dossiers"] {
  display: none !important;
}

/* =====================================================================
   PREMIUM POLISH LAYER (taste pass)
   Appended last so it wins by source order. Pure presentation: type
   presence, interaction feedback, accent-tinted elevation, tabular
   figures, and ambient depth. No layout or markup changes.
   ===================================================================== */

/* — Display type presence — Bricolage Grotesque wants tight, confident
     tracking at large sizes; let headlines breathe and never orphan. */
.landing-hero h1 {
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}
.browse-head h2,
.watchlist-head h2,
.detail-title,
.timeline-label,
.results-head .count,
.chat-empty-title {
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.brand-name { letter-spacing: -0.01em; }

/* — Tabular figures everywhere numbers carry meaning (prices, counts,
     countdowns) so columns and changing values stay optically aligned. */
.prop .price,
.prop .countdown,
.browse-meta .count,
.results-head .count,
.results-count,
.price-history,
.detail-title,
.count {
  font-variant-numeric: tabular-nums;
}

/* — Primary buttons: smooth motion + a real pressed state + accent lift.
     (Base .btn had an instant, untransitioned hover and no :active.) */
.btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { box-shadow: var(--shadow-md); }
.btn:not(.ghost):not(.ink):hover { box-shadow: var(--shadow-accent); }
.btn:active { transform: translate(0, 0); box-shadow: var(--shadow); }

/* — Send button: same physical feedback as primary actions. */
.chat-input .send {
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              background 0.15s ease, color 0.15s ease;
}
.chat-input .send:hover { box-shadow: var(--shadow-accent); }
.chat-input .send:active { transform: scale(0.94); }

/* — Ambient depth behind the hero headline: a soft accent wash instead of
     a flat empty canvas, fading to nothing so it never reads as a banner. */
.landing-hero {
  background:
    radial-gradient(120% 90% at 50% -10%,
      var(--accent-soft) 0%,
      transparent 60%);
}

/* — Smooth anchor scrolling for any in-page jumps. */
html { scroll-behavior: smooth; }

/* =====================================================================
   PRODUCT-UI PREMIUM LAYER (taste pass — data surfaces)
   Scope: browse grid, filters, chat, watchlist. Appended last so it wins
   by source order. Refines the brutalist heavy-ink system into a calmer
   premium one: hairline borders, one radius scale (controls 8px /
   surfaces 12px / pills stay pill), accent-tint hovers instead of full
   accent fills, and softer tinted elevation. Tokens only → dark mode
   follows. No markup or layout-structure changes.
   ===================================================================== */

/* ---- Filter bar + controls -------------------------------------------- */
.browse-filters {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.browse-search {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.browse-search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.filter-select,
.filter-multi-btn,
.filter-num,
.filter-date,
.sb-search {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
/* Calm accent-tint hover instead of a full blue fill with dark text */
.filter-select:hover,
.filter-multi-btn:hover,
.filter-multi.open .filter-multi-btn {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.filter-multi-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.filter-multi-opt { border-radius: var(--radius-xs); margin: 0 4px; padding: 5px 8px; }

/* ---- Collapsible filters: hide the advanced rows so the grid isn't pushed
   down on every visit. Search + active chips stay visible. ---------------- */
.filter-toggle {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  padding: 8px 11px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.filter-toggle:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.filter-toggle:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-focus); outline: 0; }
.filter-toggle .ft-ico { flex-shrink: 0; opacity: 0.85; }
.filter-toggle .ft-caret { transition: transform 180ms ease; opacity: 0.7; }
.browse-filters.collapsed .filter-toggle .ft-caret { transform: rotate(-90deg); }
.filter-toggle-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; line-height: 1;
}
.filter-toggle-count[hidden] { display: none; }
.bf-advanced { display: flex; flex-direction: column; gap: 8px; }
.browse-filters.collapsed .bf-advanced { display: none; }
@media (prefers-reduced-motion: reduce) { .filter-toggle .ft-caret { transition: none; } }

/* ---- Browse / result / watchlist cards -------------------------------- */
.prop {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.prop:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.prop .thumb {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.prop .title { color: var(--ink); }
.prop .price { font-size: 18px; color: var(--ink); }

/* ---- Card metadata: bank + date as quiet, icon-led lines (no boxed pills) -- */
/* Let the card shrink below its content's intrinsic width (grid/flex items
   default to min-width:auto) so the bank name can truncate instead of forcing
   horizontal overflow on narrow screens. */
.prop { min-width: 0; }
.prop .meta { min-width: 0; }
.prop .loc {
  display: flex; align-items: center; gap: 5px; min-width: 0;
}
.prop .loc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop .prop-foot {
  display: flex; align-items: center; gap: 5px 12px; flex-wrap: wrap; min-width: 0;
  font-family: var(--font-body); font-size: 12.5px; color: var(--muted);
}
.prop .card-bank {
  display: inline-flex; align-items: center; gap: 5px;
  flex: 0 1 auto; min-width: 0; max-width: 100%;
}
.prop .card-bank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop .card-date { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.prop .ci { flex-shrink: 0; opacity: 0.7; }
.prop .countdown { display: inline-flex; align-items: center; gap: 5px; }

/* ---- Chips ------------------------------------------------------------ */
.chip {
  border: 1px solid var(--border-strong);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip.filled { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ---- Chat sidebar + thread list -------------------------------------- */
.chat-sidebar {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.sb-new {
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sb-new:hover { transform: translateY(-1px); box-shadow: var(--shadow-accent); }
.sb-toggle {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sb-toggle:hover { background: var(--accent-soft); border-color: var(--accent); }
.sb-search { width: 100%; }
.sb-item { border-radius: var(--radius-sm); border: 1px solid transparent; }
.sb-item:hover { background: var(--paper-2); border-color: var(--border); }
.sb-item.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.sb-item.active .sb-item-pin { color: var(--accent); }
#detail-chat-history .pch-item { border-radius: var(--radius-sm); }
#detail-chat-history .pch-item:hover { background: var(--paper-2); border-color: var(--border); }
#detail-chat-history .pch-item.active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
#detail-chat-history .pch-item.active .pch-ts { color: var(--accent); }

/* ---- Watchlist -------------------------------------------------------- */
.watchlist-head { border-bottom: 1px solid var(--border-strong); }
.timeline-label .rule { background: var(--border-strong); opacity: 1; }

/* ---- Modal (save / feedback dialogs over data) ----------------------- */
.modal {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal textarea {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.modal textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }

/* =====================================================================
   COINBASE AESTHETIC LAYER (apply-aesthetic — institutional trust-blue)
   The token VALUES in :root / [data-theme="dark"] above already carry the
   Coinbase palette across the whole app. This layer adds the one structural
   signature tokens can't express on their own: pill-shaped primary CTAs
   (Coinbase's most recognizable move). Scoped to the PRIMARY actions only —
   utility controls, inputs, and selects keep the calmer 6-12px radii.
   Appended last so it wins by source order. No layout/markup changes.
   ===================================================================== */
.btn,
.filter-chat,
.sb-new,
.chat-input .send {
  border-radius: var(--radius-pill);
}
/* The 38-44px square send button reads as a clean circle at pill radius. */