/* Disable the iOS/Android double-tap-to-zoom gesture on the app chrome
   while keeping pinch-zoom available (Google Maps manages its own
   pinch-zoom internally; this affects the page UI only). */
html, body { touch-action: manipulation; }

:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-2: #f1f3f5;
  --border: #e1e4e8;
  --border-strong: #d0d7de;
  --text: #1f2328;
  --text-dim: #656d76;
  --accent: #0969da;
  --send: #1a7f37;
  --send-hover: #116329;
  --terminate: #cf222e;
  --terminate-hover: #a40e26;
  --warn-bg: #fff8c5;
  --warn-border: #d4a72c;
  --warn-text: #7d4e00;
  --cancel: #d0d7de;
  --cancel-hover: #b1bac4;
  --shadow-sm: 0 1px 3px rgba(27, 31, 36, 0.04), 0 0 0 1px rgba(27, 31, 36, 0.06);
  --shadow-md: 0 8px 24px rgba(140, 149, 159, 0.2);
}

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable],
.vc-chat-messages, .vc-chat-messages *,
.dm-conv-messages, .dm-conv-messages *,
.dm-messages, .dm-messages *,
.chat-messages, .chat-messages *,
.agent-directive-msg, .agent-directive-msg *,
#dmCallChatMessages, #dmCallChatMessages * {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
/* Copy button itself must NOT be selectable — clicking the icon
   would otherwise smear a selection across it. Scoped to agent-
   directive bubbles since the other chat surfaces share the same
   button and rely on the same rule when added there too. */
.agent-directive-msg .chat-copy-btn,
.agent-directive-msg .chat-copy-btn * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html, body {
  overflow: hidden;
  height: 100%;
  height: 100dvh;
}

/* ── Section select screen (Land / Homes picker) ── */
.section-select {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  padding: 32px 20px;
  background: var(--bg);
  overflow: hidden;
}
body.section-select-mode .section-select { display: flex; }
body.section-select-mode .topbar,
body.section-select-mode .drawer-backdrop,
body.section-select-mode .shell { display: none !important; }
body.section-select-mode #loginScreen,
body.section-select-mode #resetScreen { display: none !important; }

.section-select-logo {
  height: 420px;
  width: auto;
  object-fit: contain;
  margin-bottom: 10px;
}
.section-select-title {
  font-size: 52px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.section-select-subtitle {
  font-size: 22px;
  color: var(--text-dim);
  margin: 20px 0 0;
}
.section-select-cards {
  display: flex;
  gap: 40px;
}
@keyframes hover-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.section-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 300px;
  padding: 52px 36px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.section-card:hover:not(:disabled):not(.section-card-houses),
.section-card:active:not(:disabled):not(.section-card-houses),
.section-card.touched:not(.section-card-houses) {
  border-color: #2e7d32;
  box-shadow: 0 16px 40px rgba(46, 125, 50, 0.18), 0 0 0 1px rgba(46, 125, 50, 0.1);
  animation: hover-float 2s ease-in-out infinite;
}
.section-card svg {
  width: 72px;
  height: 72px;
}
.section-card-name {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
}
.section-card-desc {
  font-size: 18px;
  color: var(--text-dim);
  text-align: center;
}
.section-card-houses {
  cursor: pointer;
}
.section-card-houses:hover,
.section-card-houses:active,
.section-card-houses.touched {
  border-color: #c0392b;
  box-shadow: 0 16px 40px rgba(192, 57, 43, 0.18), 0 0 0 1px rgba(192, 57, 43, 0.1);
  animation: hover-float 2s ease-in-out infinite;
}
.section-card-houses .section-card-name {
  color: var(--text);
}
.section-card-houses .section-card-desc {
  color: var(--text-dim);
}

.section-select-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-dim);
}
.section-select-user-name {
  font-weight: 600;
  color: var(--text);
}
.section-select-signout {
  font-size: 12px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.section-select-signout:hover {
  background: var(--terminate);
  color: #fff;
  border-color: var(--terminate);
}

@media (max-width: 480px) {
  .section-select-cards { flex-direction: row; gap: 14px; }
  .section-card { width: 50%; max-width: 200px; aspect-ratio: 1 / 1; padding: 18px 12px; border-radius: 14px; gap: 10px; justify-content: center; }
  .section-card svg { width: 44px; height: 44px; }
  .section-card-name { font-size: 20px; }
  .section-card-desc { font-size: 12px; }
  .section-select-logo { height: 180px; }
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  height: 100%;
  overflow: hidden;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);
  gap: 12px;
}

/* Mobile-only hamburger that reveals/hides the tab drawer. Hidden on
   desktop where the sidebar is always visible. */
.topbar-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  flex: 0 0 auto;
  color: #000;
}
.topbar-hamburger:hover { background: var(--panel-2); }
.topbar-hamburger:active { transform: translateY(1px); }

/* Topbar home button — mobile only, sits on the right end */
.topbar-home {
  display: none;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 42px;
  height: 42px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  margin-left: auto;
}
.topbar-home:hover { background: var(--panel-2); }
.topbar-home:active { transform: translateY(1px); }

.sidebar-logo {
  display: flex;
  justify-content: center;
  padding: 6px 4px 2px;
}

.brand-logo {
  height: 120px;
  max-height: 120px;
  width: auto;
  object-fit: contain;
}

.from-pill {
  /* Hidden on all viewports \u2014 we don't want the business email
     displayed in the top bar for either Land or Houses. */
  display: none !important;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--text-dim);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.shell {
  max-width: none;
  margin: 0;
  padding: 14px 18px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  height: calc(100vh - 52px);
  height: calc(100dvh - 52px);
  overflow: hidden;
}

/* ═════════════════════════════════════════════════════════════════════
   Bottom-bar layout (desktop) — logo + tabs + user info pinned to the
   bottom of the viewport; the mode content fills everything above.
   ═════════════════════════════════════════════════════════════════════
   Replaces the former left sidebar. Applied only at ≥701px so the
   existing mobile drawer (which uses the same .mode-picker element as
   a slide-in overlay) continues to work unchanged. */
@media (min-width: 701px) {
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .shell {
    flex-direction: column;
    padding: 0;
    gap: 0;
    height: calc(100vh - 52px);
    height: calc(100dvh - 52px);
  }
  /* Main content sits on TOP and grows to fill everything above the bar. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .shell > .columns,
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .shell > #columnsSection {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 18px 10px;
    overflow: hidden;
  }
  /* The mode-picker flips to a horizontal bar anchored to the bottom.
     Overflow-x auto lets it scroll horizontally if the viewport is
     narrower than the total button row width (rare on desktop). */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .shell > .mode-picker {
    order: 2;
    position: static;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: 72px;
    max-height: 72px;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--panel-2, #f6f8fa);
    border-top: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }
  /* Home button — leftmost slot of the bottom bar (replaced the
     DealFlow logo). Kept the .sidebar-logo wrapper class so the
     existing click handler still fires. The inner button is a
     compact icon + label pill that looks like the other tabs. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .sidebar-logo {
    order: 0;
    flex: 0 0 auto;
    padding: 0 10px 0 4px;
    border-right: 1px solid var(--border);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .sidebar-home-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    height: 52px;
    min-height: 52px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-sm);
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .sidebar-home-btn:hover {
    border-color: var(--accent, #0969da);
    background: var(--panel-2, #f6f8fa);
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .sidebar-home-btn svg {
    flex-shrink: 0;
  }
  /* The old .brand-logo img no longer renders (wrapper contains a
     button now), but if any stale rendering path still creates one
     make sure it's hidden in bottom-bar mode. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .brand-logo {
    display: none;
  }
  /* Tab buttons — compact horizontal pills with icon + small label
     side-by-side. Flex-basis 0 + grow lets them squeeze down gracefully
     but each button has a min-width so the icon + text never overlap. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .mode-btn {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    flex: 0 1 auto;
    min-width: 94px;
    padding: 6px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    border-radius: 10px;
    border-width: 1px;
  }
  /* Icon + title go inline in the row layout. Chat badge stays inline. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .mode-btn .mode-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .mode-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  /* Voice-controls + incoming-call strips are inline but compact. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .sidebar-voice-controls,
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .sidebar-incoming-call {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
  }

  /* ─────────────────────────────────────────────────────────────────
     Tab-slot wrappers — the sub-elements (voice controls, Close Zillow,
     Close Propstream) are positioned ABSOLUTELY beneath their parent
     tab so the tab itself stays in the exact same vertical position as
     the rest of the tabs (no more shifting up when a call is active or
     a close-link appears). The slot's own height equals just the tab's
     height, so every slot is 52px tall and every tab aligns on a
     consistent baseline with its neighbours.
     ───────────────────────────────────────────────────────────────── */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .tab-slot {
    display: block;
    flex: 0 0 auto;
    position: relative;
    align-self: center;
    /* Lock the slot height to match the tab exactly. Without this
       explicit height, any weird interaction between the absolute-
       positioned sub-rows and the block layout could leave the slot
       slightly taller than 52px, which would make the wrapped tabs
       sit higher than the un-wrapped tabs when the bar centers them. */
    height: 52px;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .tab-slot > .mode-btn {
    width: 100%;
    height: 52px;
  }

  /* Active tab indicator — inset instead of outset so the active
     state doesn't add a visual halo that makes the button look
     larger than inactive neighbours. Previously the .mode-btn.active
     rule used `box-shadow: 0 0 0 3px <tint>` which painted a 3px
     ring AROUND the tab, pushing its visual footprint past the
     52×N-px box. Swap to `inset` to keep the highlight visible but
     entirely inside the button's own border. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .mode-btn.active {
    box-shadow: inset 0 0 0 2px rgba(52, 168, 83, 0.35) !important;
  }
  body.section-houses:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .mode-btn.active {
    box-shadow: inset 0 0 0 2px rgba(220, 53, 69, 0.35) !important;
  }
  /* Sub-rows float BELOW the tab without pushing it around. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .tab-slot > .sidebar-voice-controls,
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .tab-slot > .sidebar-incoming-call,
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .tab-slot > .ps-sidebar-close {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1;
  }
  /* Orders on the SLOT rather than the inner button, because slots are
     the direct flex children of the bar. Keep the existing .mode-X
     orders too — they still apply to any tabs not wrapped in a slot. */
  body.section-houses .slot-chat            { order: 10; }
  body.section-houses .slot-zillow          { order: 30; }
  body.section-houses .slot-propstream      { order: 60; }
  body:not(.section-houses) .slot-chat       { order: 10; }
  body:not(.section-houses) .slot-zillow     { order: 50; }
  body:not(.section-houses) .slot-propstream { order: 40; }

  /* Voice controls directly beneath the VOICE tab. Compact horizontal
     row of small icon buttons. Pulled from the prior "svc-grid" layout
     (which was vertical) into a flat row that fits under the 94px-wide
     tab comfortably. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat .sidebar-voice-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    padding: 0 2px;
    background: transparent;
    border: none;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat .sidebar-voice-controls.hidden {
    display: none;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat .sidebar-voice-controls .svc-grid {
    display: contents;  /* flatten so each svc-btn is a direct sibling */
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat .sidebar-voice-controls .svc-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 7px;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat .sidebar-voice-controls .svc-btn svg {
    width: 17px;
    height: 17px;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat .sidebar-voice-controls .svc-vol {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat .sidebar-voice-controls .svc-vol svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat .sidebar-voice-controls .svc-vol input[type="range"] {
    flex: 0 1 auto;
    height: 4px;
    width: 100%;
    min-width: 0;
  }

  /* ─────────────────────────────────────────────────────────────────
     Voice controls — SIDE layout (per user pref). When the voice
     channel is active, the slot grows horizontally and the controls
     sit to the LEFT of the HUB tab in two stacked rows:
        Row 1: [End Call] [Mute] [Deafen] [Share Screen]
        Row 2: [============ Volume slider ============]
     The controls panel has a light-gray rounded background so it
     reads as one cohesive cluster and stays tightly packed against
     the HUB tab without bleeding extra whitespace into the bar.
     When voice is NOT active, the slot stays compact (52px tall,
     just the HUB tab) — that's the rule above this block.
     row-reverse: DOM order is [HUB tab, voice controls]. Reversing
     puts voice controls visually first (left), HUB tab second (right).
     ───────────────────────────────────────────────────────────────── */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat:has(.sidebar-voice-controls:not(.hidden)) {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 4px;
    height: auto;
    min-height: 52px;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat:has(.sidebar-voice-controls:not(.hidden)) > .mode-btn {
    flex: 0 0 auto;
    width: 94px;
  }
  /* CSS grid for the controls — 4 fixed columns of 30px (one per button)
     with the volume slider spanning all 4 in row 2. Grid gives us a tight
     fit with no surprise wrap and no flex-basis math. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat .sidebar-voice-controls:not(.hidden) {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    display: grid;
    grid-template-columns: repeat(4, 30px);
    grid-auto-rows: auto;
    gap: 3px 2px;
    flex: 0 0 auto;
    width: max-content;
    align-self: center;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 4px 6px;
  }
  /* svc-grid wraps three of the buttons; flatten so they're direct
     grid items and fall into columns 2/3/4 after svc-disconnect. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat .sidebar-voice-controls:not(.hidden) > .svc-grid {
    display: contents;
  }
  /* Volume row spans all 4 columns underneath the buttons. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat .sidebar-voice-controls:not(.hidden) > .svc-vol {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 1px;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .slot-chat .sidebar-voice-controls:not(.hidden) > .svc-vol input[type="range"] {
    width: 100%;
    flex: 1 1 auto;
  }

  /* Close Zillow / Close Propstream — small red text below the tab.
     Strips the default .mode-btn full-size styling (the close button
     re-uses the .mode-btn class for its click handlers) and swaps in
     a compact text-link look. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .tab-slot .ps-sidebar-close {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 1px 6px;
    border: none;
    background: transparent;
    box-shadow: none;
    text-align: center;
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .tab-slot .ps-sidebar-close .mode-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #cf222e;
    letter-spacing: 0.02em;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .tab-slot .ps-sidebar-close .mode-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .tab-slot .ps-sidebar-close:hover {
    background: #ffebe9;
  }
  /* Hide the default .mode-desc on close buttons — it's never set, but
     the global .mode-btn wrapper sometimes renders an empty div. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .tab-slot .ps-sidebar-close .mode-desc {
    display: none;
  }

  /* Give the bar enough room so active sub-rows (voice controls, close
     links) fit neatly beneath their parent tab without clipping. 96px
     accommodates a 52px tab + ~4px gap + ~30-32px sub-row with room
     to breathe. Without active sub-rows, the extra height is just
     padding that keeps the bar feeling sleek. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .shell > .mode-picker {
    height: 100px;
    max-height: 100px;
    align-items: center;
  }
  /* Tab-slot columns — room for CLOSE ZILLOW / CLOSE PROPSTREAM small
     red text under the tab. Voice uses the same width as everyone
     else; its sub-row (voice controls) is width:max-content and
     extends rightward past the slot edge into the empty area below
     the next tab's y-position (since sub-rows are absolute-positioned
     below tabs, they don't collide with neighbouring tabs). */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .tab-slot {
    min-width: 140px;
  }
  /* Voice controls are wider than the Voice slot — let them overflow
     rightward rather than forcing the slot to expand. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .tab-slot > .sidebar-voice-controls {
    right: auto !important;
    width: max-content;
  }
  /* User info — pushed to the right edge by margin-left:auto and its
     existing order:9999. Stacked label + role on left, Sign Out on
     right, separated by a subtle border. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .sidebar-user {
    margin-top: 0;
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 4px 0 14px;
    border-top: none;
    border-left: 1px solid var(--border);
    height: 100%;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .sidebar-user-name {
    font-size: 12px;
    line-height: 1.1;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .sidebar-user-role {
    font-size: 9px;
    padding: 1px 6px;
    line-height: 1.2;
  }
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .sidebar-signout {
    margin-top: 0;
    padding: 5px 10px;
    font-size: 11px;
  }
  /* Hide the mobile-only drawer head in desktop bottom-bar mode. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker-drawer-head {
    display: none;
  }
  /* Hide the mode-desc sub-text everywhere — too long for pill tabs. */
  body:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .mode-picker .mode-desc {
    display: none;
  }

  /* ═════════════════════════════════════════════════════════════════════
     Tabs at TOP variant (per-user preference). When the user toggles the
     "Tabs: Top" option in the sidebar-user area, the bar moves above the
     main content. Only the order, border, and a tiny spacing tweak flip;
     every other bar style stays the same so the bar's internals (voice
     controls beside the VOICE tab, etc.) all keep working unchanged.
     ═════════════════════════════════════════════════════════════════════ */
  /* The .shell has more than two flex children — besides the columns
     section and the mode-picker, every CRM iframe container (resimpli,
     sendivo, smarter, ppl, chat) is also a direct child at order 0.
     To put the bar truly at the top we need it BEFORE all those zero-
     order containers, so mode-picker drops to order:-1. The columns
     section keeps its default order so it appears below the bar. */
  body.tabs-top:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .shell > .mode-picker {
    order: -1;
    border-top: none;
    border-bottom: 1px solid var(--border);
  }

  /* When tabs are on TOP, also flip the Map Tool's bottom toolbar
     (Street View | Satellite | 3D | Floodzones & Wetlands) up so it sits
     above the search bar and the map. .gmaps-main is a flex column, so
     order:-1 lifts the toolbar to the very top of the map area. The
     border swaps from top→bottom so the divider lands underneath the
     toolbar (the new boundary), and the absolutely-positioned search
     bar gets pushed down to clear the toolbar's height. */
  body.tabs-top:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .gmaps-toolbar {
    order: -1;
    border-top: none;
    border-bottom: 1px solid #e0e0e0;
  }
  body.tabs-top:not(.landing-mode):not(.login-mode):not(.reset-mode):not(.section-select-mode) .gmaps-search-bar {
    top: 50px;
  }
}

.mode-picker {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 150px;
  flex: 0 0 150px;
  position: sticky;
  top: 14px;
  overflow-y: auto;
  max-height: 100%;
}
.mode-category-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Hide the DRAFTING tab group on desktop. Drafting was moved into the
   Hub (Hub > Tasks now has dedicated EMAIL and CONTRACT buttons), so
   the standalone DRAFTING pill in the desktop sidebar/bottom-bar is
   redundant. We keep it on mobile (≤900px) since the Hub > Tasks
   panel itself is desktop-only and mobile users still need an entry
   point to drafting.
   Specificity note: the global rule
     .mode-picker .mode-category-group { display: contents !important; }
   flattens groups into the bar's flex layout. Our hide rule needs the
   same `.mode-picker` ancestor (plus an attribute selector) to outrank
   that global, otherwise `display: contents` wins and DRAFTING shows. */
@media (min-width: 901px) {
  .mode-picker .mode-category-group[data-collapse="drafting"] {
    display: none !important;
  }
}

/* Equalize every tab in the sidebar/drawer (non-landing) view to
   exactly the same pixel size. In this view tabs are icon + title only —
   `.mode-desc` sub-text is hidden so users focused on the work area
   aren't re-reading descriptions they've already seen on the landing
   page. `height` (not `min-height`) is a hard pixel lock so tabs can't
   grow past each other. */
.mode-picker .mode-btn {
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
/* Hide the description sub-text in the active sidebar/drawer view. The
   landing-mode override below re-enables it at larger size when the
   user hasn't picked a tab yet. */
.mode-picker .mode-desc {
  display: none;
}

/* Category section label — splits the mode picker into "Comping" and
   "Drafting" groups. Visible on landing, desktop sidebar, AND mobile
   drawer so the grouping is consistent across every view. */
.mode-category {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 4px 2px 2px;
  margin-top: 2px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.category-arrow {
  transition: transform 0.2s ease;
  opacity: 0.5;
  flex-shrink: 0;
}
.mode-category-group.collapsed .category-arrow {
  transform: rotate(-90deg);
}
.mode-category-group.collapsed .mode-btn {
  display: none !important;
}
/* First category in the list: no top border/margin so it doesn't look
   like a separator above nothing. */
.mode-category:first-of-type,
.mode-picker > .mode-category:first-child,
.mode-picker-drawer-head + .mode-category,
.mode-category-group:first-of-type .mode-category,
.mode-picker-drawer-head + .mode-category-group .mode-category {
  border-top: 0;
  padding-top: 2px;
  margin-top: 0;
}

/* --- Landing page -------------------------------------------------------
   When no mode is picked yet, the body gets `landing-mode` and the mode
   picker takes over the main content area with all six tabs stacked
   vertically. Works on both desktop and mobile because the rules below
   carry higher specificity (`body.landing-mode .mode-picker` = 0,2,1)
   than the mobile drawer overrides (`.mode-picker` = 0,1,0) and !important
   is applied to the truly critical positional properties. */
body.landing-mode .shell {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 30px 18px 44px;
  gap: 18px;
}

body.landing-mode .topbar-hamburger {
  display: none !important;
}

body.landing-mode #columnsSection {
  display: none !important;
}

body.landing-mode .drawer-backdrop {
  display: none !important;
}

body.landing-mode .mode-picker {
  position: static !important;
  transform: none !important;
  width: 100%;
  max-width: 560px;
  height: auto !important;
  min-height: 0;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
  background: transparent;
  border-right: 0;
  box-shadow: none;
  overflow: visible;
  pointer-events: auto;
}

body.landing-mode .mode-picker-drawer-head {
  display: none !important;
}

body.landing-mode .mode-picker .mode-btn {
  width: 100%;
  /* Hard pixel lock — tall enough to comfortably fit icon+title on row
     one and a 2-line clamped description underneath on row two. */
  height: 100px;
  min-height: 100px;
  max-height: 100px;
  padding: 18px 22px;
  border-radius: 14px;
  border-width: 2px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

body.landing-mode .mode-picker .mode-title {
  font-size: 17px;
  gap: 10px;
  letter-spacing: 0.4px;
}

/* Re-enable descriptions on landing only. Clamped to 2 lines with an
   ellipsis so any future long description still fits the locked height. */
body.landing-mode .mode-picker .mode-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.35;
  color: var(--text-dim);
}

body.landing-mode .mode-picker .mode-icon {
  width: 20px;
  height: 20px;
}

/* Landing: bigger category headers so "Comping" and "Drafting" read as
   clear section titles above their groups. */
body.landing-mode .mode-category {
  font-size: 13px;
  letter-spacing: 1.8px;
  padding: 14px 2px 8px;
  margin-top: 10px;
  color: #000;
  opacity: 0.65;
}
body.landing-mode .mode-category:first-of-type,
body.landing-mode .mode-picker > .mode-category:first-child,
body.landing-mode .mode-picker-drawer-head + .mode-category,
body.landing-mode .mode-category-group:first-of-type .mode-category,
body.landing-mode .mode-picker-drawer-head + .mode-category-group .mode-category {
  margin-top: 0;
  padding-top: 0;
}

/* Drawer header — hidden on desktop, shown on mobile when the mode-picker
   becomes a slide-in Gmail-style drawer. */
.mode-picker-drawer-head {
  display: none;
}

/* Backdrop behind the mobile drawer. Always in the DOM so the fade
   transition works; desktop hides it outright. */
.drawer-backdrop {
  display: none;
}

/* .mode-picker-3 kept as a class hook but no longer needs grid rules —
   the sidebar stacks every tab vertically regardless of count. */
.mode-picker-3 {
  /* no-op */
}

/* The right-hand work area fills the remaining width. */
#columnsSection {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  height: 100%;
}

@media (max-width: 900px) {
  /* Hide desktop-only popup tabs on mobile */
  .mode-propstream,
  .mode-zillow { display: none !important; }

  /* Show the topbar chat, hide hamburger (no drawer), hide from-pill */
  .topbar-hamburger { display: none !important; }
  .topbar-home { display: inline-flex; margin-left: auto; }
  .topbar {
    padding: 10px 14px;
  }
  .from-pill { display: none; }
  .chat-toggle { display: none !important; }

  /* Hide drawer artifacts — no longer needed */
  .drawer-backdrop { display: none !important; }
  .mode-picker-drawer-head { display: none !important; }
  .sidebar-logo { display: none !important; }
  .sidebar-user { display: none !important; }

  /* ── Bottom tab bar: mode-picker becomes a fixed bottom nav ── */
  .mode-picker {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff;
    border-top: 1px solid var(--border);
    border-right: none !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
    z-index: 1001;
    overflow: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
  }
  .mode-picker.collapsed {
    transform: none !important;
    pointer-events: auto !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06) !important;
  }

  /* Hide category headers/groups — flatten everything */
  .mode-picker .mode-category { display: none !important; }
  .mode-picker .mode-category-group {
    display: contents !important;
  }

  /* Hide Propstream, Zillow, REsimpli, Sendivo, PPL, TEXTING, and the
     entire CRM category from mobile. The category-group rule above
     sets display:contents with two-class specificity (0-2-0), so the
     CRM hide rule also needs at least that specificity to win \u2014
     hence `.mode-picker .category-crm` rather than `.category-crm`. */
  .mode-picker .mode-btn.mode-propstream,
  .mode-picker .mode-btn.mode-zillow,
  .mode-picker .mode-btn.mode-resimpli,
  .mode-picker .mode-btn.mode-sendivo,
  .mode-picker .mode-btn.mode-ppl,
  .mode-picker .mode-btn.mode-texting { display: none !important; }
  .mode-picker .category-crm { display: none !important; }

  /* Each tab is a small icon-only button in the bottom bar */
  .mode-picker .mode-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 8px 2px 6px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 2px !important;
    transition: background 0.15s;
  }
  .mode-picker .mode-btn:hover {
    background: var(--panel-2) !important;
  }
  .mode-picker .mode-btn:active {
    transform: none !important;
  }

  /* Active state — colored top border + tinted bg */
  .mode-picker .mode-btn.active {
    background: #e6f4ea !important;
    box-shadow: inset 0 3px 0 #34a853 !important;
    border: none !important;
  }
  body.section-houses .mode-picker .mode-btn.active {
    background: #fee2e2 !important;
    box-shadow: inset 0 3px 0 #dc3545 !important;
  }

  /* Icon sizing in bottom bar */
  .mode-picker .mode-icon {
    width: 22px !important;
    height: 22px !important;
  }

  /* Tab label — tiny text under the icon */
  .mode-picker .mode-title {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
  }
  .mode-picker .mode-title span {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* Hide descriptions in bottom bar */
  .mode-picker .mode-desc { display: none !important; }

  /* Shell fills viewport between topbar and bottom nav */
  .shell {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    min-height: calc(100dvh - 62px - 60px); /* topbar + bottom nav */
  }

  /* Content area */
  #columnsSection {
    width: 100%;
    min-width: 0;
    padding: 0;
    height: calc(100dvh - 62px - 60px);
    min-height: 0;
  }

  /* ── Mobile landing: tabs as a square grid ── */
  body.landing-mode .shell {
    padding: 12px 16px 16px;
    gap: 8px;
    height: calc(100dvh - 60px); /* subtract bottom nav */
    overflow: hidden;
  }
  body.landing-mode .sidebar-logo {
    display: flex !important;
    margin-bottom: 4px;
    grid-column: 1 / -1;
  }
  body.landing-mode .sidebar-logo .brand-logo {
    height: 100px;
    max-height: 100px;
  }
  body.landing-mode .mode-picker {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 400px;
    padding: 0 8px !important;
    border-top: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  /* Tile buttons — compact cards for landing grid */
  body.landing-mode .mode-picker .mode-btn {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 10px !important;
    border: 2px solid var(--border) !important;
    border-radius: 16px !important;
    background: var(--panel) !important;
    box-shadow: var(--shadow-sm) !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  body.landing-mode .mode-picker .mode-title {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px !important;
    letter-spacing: 0.5px;
  }
  body.landing-mode .mode-picker .mode-title span {
    font-size: 13px !important;
  }
  body.landing-mode .mode-picker .mode-icon {
    width: 32px !important;
    height: 32px !important;
  }
  /* Hide descriptions on mobile landing grid */
  body.landing-mode .mode-picker .mode-desc {
    display: none !important;
  }
  /* Category groups flatten into the grid */
  body.landing-mode .mode-category-group {
    display: contents !important;
  }
  /* Hide Propstream, Zillow, REsimpli, Sendivo, CRM, and Home on mobile landing */
  body.landing-mode .mode-picker .mode-propstream,
  body.landing-mode .mode-picker .mode-zillow,
  body.landing-mode .mode-picker .mode-resimpli,
  body.landing-mode .mode-picker .mode-sendivo,
  body.landing-mode .mode-picker .mode-chat-tab {
    display: none !important;
  }
  body.landing-mode .category-crm {
    display: none !important;
  }
  /* Green hover/touch effect on landing tiles */
  body.landing-mode .mode-picker .mode-btn:hover,
  body.landing-mode .mode-picker .mode-btn:active,
  body.landing-mode .mode-picker .mode-btn.touched {
    border-color: #2e7d32 !important;
    background: #e6f4ea !important;
    box-shadow: 0 16px 40px rgba(46, 125, 50, 0.18), 0 0 0 1px rgba(46, 125, 50, 0.1) !important;
    animation: hover-float 2s ease-in-out infinite;
  }
  /* Red hover/touch for Houses landing tiles */
  body.landing-mode.section-houses .mode-picker .mode-btn:hover,
  body.landing-mode.section-houses .mode-picker .mode-btn:active,
  body.landing-mode.section-houses .mode-picker .mode-btn.touched {
    border-color: #c0392b !important;
    background: #fee2e2 !important;
    box-shadow: 0 16px 40px rgba(192, 57, 43, 0.18), 0 0 0 1px rgba(192, 57, 43, 0.1) !important;
  }
}

/* Chat tab in bottom bar — mobile only, hidden on desktop */
.mode-chat-tab { display: none !important; }

/* Hide Permits tab when in Houses section (all contexts: sidebar, landing, mobile) */
body.section-houses .mode-permits { display: none !important; }
body.section-houses.landing-mode .mode-permits { display: none !important; }

/* Hide PPL from Land section; hide Sendivo from Houses section.
   The LEADS button (formerly REsimpli — .mode-resimpli) is now the
   primary CRM for BOTH sections, so the old Land-hides rule is gone. */
body:not(.section-houses) .mode-ppl { display: none !important; }
/* The standalone SENDIVO sidebar button no longer exists — it lives inside
   the TEXTING picker now. But leave this rule in place as a safety net so
   any stale .mode-sendivo button we missed doesn't appear in Houses. */
body.section-houses .mode-sendivo { display: none !important; }

/* ARV Tool is Houses-only \u2014 hide BOTH the sidebar tab and the floating
   overlay when in Land. If the overlay was open in Houses and the user
   switches to Land, it disappears (CSS display:none). Its JS `hidden`
   attribute is unchanged, so switching back to Houses will re-show the
   overlay in its last position without needing to click the tab again. */
body:not(.section-houses) .mode-calculator { display: none !important; }
body:not(.section-houses) .calc-overlay    { display: none !important; }

/* ═════════════════════════════════════════════════════════════════════
   Sidebar layout — category labels hidden, buttons reordered per section
   ═════════════════════════════════════════════════════════════════════
   Per user request (2026-04-20): hide every `.mode-category` header
   ("Chat", "Tools", "CRM", etc.) and flatten the category groups so
   every `.mode-btn` is a direct flex child of the picker. That unlocks
   a single flat `order` scale that reshuffles the buttons based on
   which section (Land vs Houses) the user is in.

   Flex `order` ties fall back to DOM order, so dynamically-inserted
   close-buttons (#zlSidebarClose, #psSidebarClose) that are placed
   via insertAdjacentElement('afterend', ...) naturally render right
   after their parent button even without their own explicit order
   — but we give them +1 anyway so they never clash with a sibling. */

/* Hide all category labels in the sidebar/drawer/landing views. */
.mode-picker .mode-category {
  display: none !important;
}
/* Flatten the category-group wrappers so every mode-btn is a direct
   flex child of the mode-picker. `display: contents` keeps the group
   in the DOM (so data-collapse attributes + existing JS still work)
   while removing the element from the layout tree — mode-btns become
   siblings of sibling-group buttons, making a single `order` scale work. */
.mode-picker .mode-category-group {
  display: contents !important;
}

/* ───────── HOUSES section ─────────
   Voice → ARV Tool → Zillow → RESIMPLI → PPL → Propstream →
   Email → Contract → Map Tool → County Clerk → Entity Search →
   County Appraiser. */
body.section-houses .mode-chat             { order: 10; }
body.section-houses .sidebar-voice-controls { order: 11; }
body.section-houses .sidebar-incoming-call  { order: 12; }
/* Resimpli sits directly ABOVE ARV Tool in Houses — users open it
   first thing and want it as the top action item. ARV Tool follows. */
body.section-houses .mode-resimpli         { order: 15; }
body.section-houses .mode-calculator       { order: 20; }
body.section-houses .mode-zillow           { order: 30; }
body.section-houses #zlSidebarClose        { order: 31; }
/* PPL was a standalone sidebar tab but has been moved INTO the Leads
   UI (a "📄 PPL" button next to "📲 Sendivo" in the Leads toolbar
   swaps the view to the PPL iframe). Hide the sidebar button entirely
   — operators reach PPL through Leads now. */
body.section-houses .mode-ppl              { display: none !important; }
body.section-houses .mode-propstream       { order: 60; }
body.section-houses #psSidebarClose        { order: 61; }
/* Map Tool sits directly after Propstream per user preference. */
body.section-houses .mode-maps             { order: 65; }
/* DRAFTING sits directly after HUB (chat = order 10) — pulled forward
   per user request so the most-used build flows cluster at the start
   of the bar. The .mode-email / .mode-create rules below are kept
   harmless because those classes no longer appear in the top-level
   mode-picker; they only exist on inner cards inside the Drafting picker. */
body.section-houses .mode-drafting         { order: 13; }
body.section-houses .mode-clerk            { order: 100; }
body.section-houses .mode-search           { order: 110; }
body.section-houses .mode-appraiser        { order: 120; }
/* Buttons not in the Houses list — hidden. */
body.section-houses .mode-texting          { display: none !important; }
body.section-houses .mode-permits          { display: none !important; }

/* ───────── LAND section (body has no section-houses class) ─────────
   Hub → Drafting → Texting → Map Tool → Propstream → Zillow →
   County Clerk → County Appraiser → Permits → Entity Search. */
body:not(.section-houses) .mode-chat              { order: 10; }
body:not(.section-houses) .sidebar-voice-controls { order: 11; }
body:not(.section-houses) .sidebar-incoming-call  { order: 12; }
body:not(.section-houses) .mode-texting           { order: 20; }
body:not(.section-houses) .mode-maps              { order: 30; }
body:not(.section-houses) .mode-propstream        { order: 40; }
body:not(.section-houses) #psSidebarClose         { order: 41; }
body:not(.section-houses) .mode-zillow            { order: 50; }
body:not(.section-houses) #zlSidebarClose         { order: 51; }
/* DRAFTING sits directly after HUB (chat = order 10) — same as Houses. */
body:not(.section-houses) .mode-drafting          { order: 13; }
body:not(.section-houses) .mode-clerk             { order: 90; }
body:not(.section-houses) .mode-appraiser         { order: 110; }
/* Permits + Entity Search now sit AFTER County Appraiser per user
   request — they were previously between Zillow and Clerk. */
body:not(.section-houses) .mode-permits           { order: 120; }
body:not(.section-houses) .mode-search            { order: 130; }
/* LEADS (.mode-resimpli) is Houses-only — the kanban surfaces
   PropertyLeads.com submissions which are part of the Houses
   workflow. Hide the sidebar button entirely in Land. */
body:not(.section-houses) .mode-resimpli          { display: none !important; }
/* Buttons not in the Land list — hidden. mode-calculator is already
   hidden by the existing body:not(.section-houses) rule above. */
body:not(.section-houses) .mode-ppl               { display: none !important; }

/* DealFlow tabs — modernized. Cleaner default state (thinner border,
   no shadow), softer hover, and an active state that uses a clean
   solid fill + thin inset ring instead of the older heavy 3px outer
   ring. Borders are 1px on default + 1px inset on active, keeping the
   bar's total height stable across states (no layout shift on click).
   Landing-mode tiles re-override sizing for the larger pre-section
   tile look — see body.landing-mode rules above. */
.mode-btn {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
  color: #1f2937;
  box-shadow: none;
  transition: background-color 0.12s ease, border-color 0.12s ease,
              color 0.12s ease, transform 0.08s ease;
}

.mode-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}

.mode-btn:active {
  transform: scale(0.98);
}

/* Active state — Land (green). Subtle filled background + a 1px inset
   ring in the accent color. No outer shadow, no neighbor-bumping. */
.mode-btn.active {
  background: #ecfdf5;
  border-color: #10b981;
  color: #047857;
  box-shadow: inset 0 0 0 1px #10b981;
}
/* Active state — Houses (red). Same pattern, different accent. */
body.section-houses .mode-btn.active {
  background: #fef2f2;
  border-color: #ef4444;
  color: #b91c1c;
  box-shadow: inset 0 0 0 1px #ef4444;
}

/* Make sidebar logo clickable (acts as Home) */
.sidebar-logo {
  cursor: pointer;
}
.sidebar-logo:hover {
  opacity: 0.8;
}
/* --- Google Maps tab ---------------------------------------------------- */
.columns:has(.gmaps-wrap) {
  height: calc(100dvh - 110px);
  min-height: 640px;
}
.columns:has(.gmaps-wrap) .list-panel { display: none; }
.columns:has(.gmaps-wrap) .preview-panel {
  height: 100%;
  min-height: 0;
}
.columns:has(.gmaps-wrap) .preview-panel .panel-head { flex: 0 0 auto; }
.preview-body:has(> .gmaps-wrap) {
  padding: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.gmaps-wrap {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  position: relative;
}
.gmaps-main {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

/* Floating chip above the map pin showing the user-typed street name.
   Sits just above the red pin (pin tip ≈ 40px tall) so the chip doesn't
   cover the pin icon. Pointer-events:none lets clicks fall through to
   the map beneath. */
.gmaps-pin-label {
  position: absolute;
  transform: translate(-50%, -100%);
  margin-top: -42px; /* clear the pin icon */
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 5px 10px;
  font: 700 12px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1f2328;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  pointer-events: none;
  user-select: none;
  z-index: 5;
}
.gmaps-pin-label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}

.gmaps-search-bar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: min(440px, calc(100% - 24px));
}
.gmaps-search-bar input {
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  outline: none;
  background: #fff;
}
.gmaps-search-bar input:focus {
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.gmaps-map {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}
.gmaps-streetview {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.gmaps-toolbar {
  display: flex;
  gap: 2px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
  padding: 4px 8px;
  flex: 0 0 auto;
}
.gmaps-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid #dadce0;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  color: #3c4043;
  transition: background 0.15s, border-color 0.15s;
}
.gmaps-tb-btn:hover {
  background: #f1f3f4;
  border-color: #bdc1c6;
}
.gmaps-tb-btn.active {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #1a73e8;
}

/* Street View "Not available" red popup */
.sv-unavailable-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 8px;
  background: #d93025;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 100;
  animation: sv-popup-fade 2.5s ease forwards;
  pointer-events: none;
}
@keyframes sv-popup-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

/* 3D view container (inside Maps tab) */
.gmaps-3d {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}
.gmaps-3d-controls {
  position: absolute;
  bottom: 55px;
  right: 10px;
  z-index: 5;
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

/* --- REsimpli iframe (persistent container) ----------------------------- */
.resimpli-persistent {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

/* Clerk / Appraiser / Permits persistent containers — same layout
   shape as the CRM persistent containers. The iframe inside lives in
   the DOM permanently so its session (typed text, scroll, results)
   survives every mode switch. Visibility is toggled via inline
   display:none/'' from JS, the same pattern Resimpli/Sendivo use. */
.clerk-persistent {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.clerk-persistent .clerk-embed-wrap { height: 100%; }
.crm-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  flex: 0 0 auto;
}
.crm-toolbar svg {
  flex-shrink: 0;
  color: var(--text-dim);
}
/* "← Change CRM" link above the toolbar inside a Texting CRM container.
   Black text, no underline, no button chrome — matches the user's spec
   of "just have it in black text". */
.crm-change-link {
  display: inline-block;
  padding: 6px 14px 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #000;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.crm-change-link:hover {
  text-decoration: underline;
}
/* "Back to Leads" — only visible when one of the Leads CRM iframes
   (Sendivo, PPL) was entered via the Leads toolbar buttons. LEADS is
   Houses-only, so we also gate on body.section-houses — defense in
   depth in case the body class somehow leaks into Land. When the
   back link is active we hide the regular "Change CRM" link (only
   applies to the Sendivo container, the PPL container doesn't have
   one) to avoid two competing back-nav options. */
.crm-back-to-leads { display: none; }
body.section-houses.leads-sendivo-mode .crm-back-to-leads          { display: inline-block; }
body.section-houses.leads-sendivo-mode .crm-change-link[data-crm-change] { display: none; }
body.section-houses.leads-ppl-mode     .crm-back-to-leads          { display: inline-block; }
/* The pin that sits between the map button and the address input — red
   (matches the "📍" metaphor). */
.crm-toolbar-pin {
  color: #cf222e !important;
  fill: #cf222e !important;
  stroke: #cf222e !important;
}
/* The refresh button sits inside .crm-toolbar but needs a white icon on
   its black background, not the muted grey the descendant rule applies. */
.crm-toolbar .sendivo-refresh-btn svg {
  color: #fff !important;
}
.crm-addr-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--panel);
  color: var(--text);
  outline: none;
}
.crm-addr-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.15);
}
.crm-map-btn {
  flex-shrink: 0;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 6px;
  background: var(--send);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.crm-map-btn:hover {
  background: var(--send-hover);
}
.sendivo-refresh-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: #000;
  color: #fff; /* currentColor for the refresh-arrow SVG */
  cursor: pointer;
  transition: background 0.15s;
}
.sendivo-refresh-btn:hover {
  background: #333;
}
.sendivo-refresh-btn:active {
  background: #555;
}
.resimpli-iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border: none;
  display: block;
}

/* --- Sendivo iframe (persistent container) ------------------------------ */
.sendivo-persistent {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: visible;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
}
.sendivo-frame-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.sendivo-iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border: none;
  display: block;
  position: relative;
  z-index: 10;
}
.sendivo-reload-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.sendivo-reload-overlay.hidden { display: none; }
.sendivo-reload-overlay .spin {
  animation: sendivo-spin 0.8s linear infinite;
}
@keyframes sendivo-spin {
  to { transform: rotate(360deg); }
}
.sendivo-refresh-btn.refreshing svg {
  animation: sendivo-spin 0.8s linear infinite;
}

/* --- DocuSign iframe (persistent container) ----------------------------
   Same shape as the Sendivo container — fills the available area,
   rounded card, persistent (login state survives navigating away).
   Has its own top toolbar with a Back-to-Hub button + refresh, since
   DocuSign isn't a CRM-pair like Sendivo/Smarter so the "Change CRM"
   link doesn't apply here. */
.docusign-persistent {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: visible;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
}
.docusign-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #1f2328;
  color: #fff;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.docusign-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
.docusign-back-btn:hover { background: rgba(255,255,255,0.18); }
.docusign-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.docusign-refresh-btn {
  margin-left: auto;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.docusign-refresh-btn:hover { background: rgba(255,255,255,0.18); }
.docusign-refresh-btn.refreshing svg {
  animation: sendivo-spin 0.8s linear infinite;
}
.docusign-frame-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.docusign-iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border: none;
  display: block;
  position: relative;
  z-index: 10;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
.docusign-reload-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.docusign-reload-overlay.hidden { display: none; }

/* --- PPL iframe (persistent container) --------------------------------- */
.ppl-persistent {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.ppl-iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border: none;
  display: block;
}


/* Google Maps alpha banner — hide completely */
[class*="alpha-banner"] {
  display: none !important;
}
/* Hide any leftover "View on Google Maps" links on Street View */
.gm-iv-address,
.gm-iv-address-link {
  display: none !important;
}

/* Google Places autocomplete dropdown styling */
.pac-container {
  border-radius: 0 0 8px 8px;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-family: inherit;
  z-index: 10000;
}

/* --- Mobile: prevent iOS auto-zoom on focus (requires >= 16px) ---------- */
@media (max-width: 700px) {
  input, select, textarea { font-size: 16px !important; }
}

@media (max-width: 700px) {
  /* Search bar: shorter width, thicker */
  .gmaps-search-bar { width: calc(100% - 16px); top: 8px; z-index: 11; }
  .gmaps-search-bar input { font-size: 16px; padding: 12px 14px; }

  /* Move toolbar to top-left, below search bar */
  .gmaps-toolbar {
    position: absolute;
    top: 56px;
    left: 8px;
    z-index: 10;
    background: transparent;
    border: none;
    padding: 0;
    gap: 4px;
  }
  .gmaps-tb-btn span { display: none; }
  .gmaps-tb-btn {
    padding: 8px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  }

  /* Map fills full height — no bottom bar taking space */
  .gmaps-main { height: 100%; }
  .gmaps-map, .gmaps-3d, .gmaps-streetview { flex: 1 1 0; min-height: 0; }

  /* 3D mode: move the directional / tilt+heading compass panel to the
     top-right of the map, tucked just under the search bar. */
  .gmaps-3d-controls {
    top: 64px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    min-width: 170px !important;
    padding: 8px 12px !important;
  }

  /* Map fills the full width of the viewport — strip the .panel's
     rounded corners, border, and any inherited side gutters so the
     map goes truly edge-to-edge on phones. */
  .columns:has(.gmaps-wrap) .preview-panel {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .columns:has(.gmaps-wrap),
  .columns:has(.gmaps-wrap) .preview-body {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide Google Maps native +/- zoom control on mobile — pinch-to-zoom
     is more natural on touch devices and it saves screen real estate. */
  .gmaps-map .gm-bundled-control,
  .gmaps-map .gm-bundled-control-on-bottom { display: none !important; }
}

/* --- Google Earth (3D) tab ---------------------------------------------- */
.columns:has(.gearth-wrap) {
  height: calc(100dvh - 110px);
  min-height: 640px;
}
.columns:has(.gearth-wrap) .list-panel { display: none; }
.columns:has(.gearth-wrap) .preview-panel {
  height: 100%;
  min-height: 0;
}
.columns:has(.gearth-wrap) .preview-panel .panel-head { flex: 0 0 auto; }
.preview-body:has(> .gearth-wrap) {
  padding: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.gearth-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.gearth-container {
  width: 100%;
  height: 100%;
}
.gearth-search-bar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: min(440px, calc(100% - 24px));
}
.gearth-search-bar input {
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  outline: none;
  background: #fff;
}
.gearth-search-bar input:focus {
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.gearth-streetview {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.gearth-sv-btn {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 8px;
  background: rgba(255,255,255,0.9);
  font-size: 13px;
  cursor: pointer;
  color: #3c4043;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.15s, border-color 0.15s;
}
.gearth-sv-btn:hover {
  background: #fff;
  border-color: #bdc1c6;
}
.gearth-sv-btn.active {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #1a73e8;
}

.gearth-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(255,255,255,0.92);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
}
.gearth-control-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gearth-control-row label {
  font-size: 13px;
  font-weight: 600;
  color: #3c4043;
  min-width: 55px;
}
.gearth-control-row input[type="range"] {
  flex: 1;
  accent-color: #4285f4;
  height: 4px;
}
.gearth-reset-btn {
  background: none;
  border: none;
  color: #1a73e8;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 0;
  text-align: left;
}
.gearth-reset-btn:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .gearth-search-bar { width: calc(100% - 16px); }
  .gearth-search-bar input { font-size: 16px; padding: 10px 12px; }
  /* Directional / tilt + heading control box shifted upward so it
     clears the mobile bottom nav on short screens. */
  .gearth-controls { bottom: 48px; right: 8px; min-width: 160px; padding: 10px 14px; }
}

/* --- Wetlands & Floodzones map ------------------------------------------
   The map has to live in a parent with a real height, otherwise the MapView
   computes zero size and/or ends up inside an overflow-y scroll container
   that swallows every drag and zoom gesture. We pin the full columns grid
   to viewport height, strip the inner scroll, and let the map fill 100%. */

.columns:has(.wetlands-map) {
  height: calc(100dvh - 110px);
  min-height: 640px;
}

.columns:has(.wetlands-map) .preview-panel {
  height: 100%;
  min-height: 0;
}

.preview-body:has(> .wetlands-map) {
  padding: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.wetlands-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  border-radius: 0;
  overflow: hidden;
  background: #0b1620;
}

/* Mobile / small viewports — target the EXACT Hendry County layout:
   a single edge-to-edge map filling every pixel below the topbar, with
   the tab drawer tucked away behind the hamburger.

   Strategy: the shell is now `min-height: calc(100dvh - 62px)` with a
   flex column, so #columnsSection gets `flex: 1` and can grow. We then
   flip `.columns:has(.wetlands-map)` from its desktop CSS grid into a
   flex column so the preview-panel can inherit the flex-grow and pass
   it on to the map. */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .columns:has(.wetlands-map) {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0;
    height: 100%;
    min-height: 0;
    width: 100%;
    min-width: 0;
    border-radius: 0;
  }

  .columns:has(.wetlands-map) .preview-panel {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
  }

  /* Kill the "Floodzones" title bar on mobile so the map gets the full
     vertical slice — matches the Hendry County mobile UX. */
  .columns:has(.wetlands-map) .preview-panel > .panel-head {
    display: none;
  }

  .columns:has(.wetlands-map) .preview-body {
    padding: 0;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  .wetlands-map {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
  }

  /* Hendry County's mobile UI does NOT show a basemap toggle inset — it
     clutters the small screen with a second mini-map. Hide it on mobile;
     users can still change the basemap via the layer list / settings on
     desktop. */
  .wetlands-map .esri-basemap-toggle {
    display: none !important;
  }
}

.wetlands-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.3px;
  z-index: 1;
  pointer-events: none;
}

/* --- County Clerk (Florida county grid) ---------------------------------
   Earlier revisions iframed myfloridacounty.com, but many FL clerk sites
   break in an iframe because browsers block their third-party session
   cookies (you'd click "Search" and get a "Session has Expired" error).
   This version renders our own grid of 67 counties as real anchors, and
   each one opens in a new top-level tab where cookies are first-party. */

.columns:has(.clerk-florida-wrap) {
  height: calc(100dvh - 110px);
  min-height: 640px;
}
.columns:has(.clerk-florida-wrap) .preview-panel {
  height: 100%;
  min-height: 0;
}
.preview-body:has(> .clerk-florida-wrap) {
  padding: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.clerk-florida-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
}

.clerk-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f1f3f5;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.clerk-back-btn {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
}
.clerk-back-btn:hover { background: var(--panel-2); }

.clerk-toolbar-title {
  font-weight: 700;
  font-size: 15px;
  color: #000;
}

.clerk-toolbar-hint {
  margin-left: auto;
  font-size: 12px;
  color: #000;
  opacity: 0.7;
}

.clerk-nav-btn {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 700;
  color: #444;
  cursor: pointer;
  line-height: 1;
}
.clerk-nav-btn:hover { background: var(--panel-2); color: #000; }
.clerk-nav-btn:active { background: #e0e0e0; }

.clerk-external-link {
  margin-left: auto;
  font-size: 16px;
  text-decoration: none;
  color: var(--accent);
  padding: 4px 8px;
  border-radius: 6px;
}
.clerk-external-link:hover { background: var(--panel-2); }

.clerk-embed-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.clerk-iframe-container {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.clerk-iframe-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #f8f9fa;
  z-index: 5;
  font-size: 14px;
  color: #666;
}
.clerk-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #ddd;
  border-top-color: var(--accent, #1a73e8);
  border-radius: 50%;
  animation: clerk-spin 0.7s linear infinite;
}
@keyframes clerk-spin {
  to { transform: rotate(360deg); }
}
.clerk-iframe {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: none;
}

.columns:has(.clerk-embed-wrap) {
  height: calc(100dvh - 110px);
  min-height: 640px;
}
.columns:has(.clerk-embed-wrap) .preview-panel {
  height: 100%;
  min-height: 0;
}
.preview-body:has(> .clerk-embed-wrap) {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.clerk-county-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  align-content: start;
}

.clerk-county-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 14px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: #000 !important;
  font-weight: 600;
  transition: border-color 0.12s, background 0.12s, transform 0.05s,
              box-shadow 0.12s;
  min-height: 74px;
}

.clerk-county-cell:hover {
  border-color: #4b2e83;
  background: #f6f3fd;
  box-shadow: 0 0 0 3px rgba(75, 46, 131, 0.1);
}

.clerk-county-cell:active { transform: translateY(1px); }

.clerk-county-name {
  font-size: 15px;
  font-weight: 700;
  color: #000;
}

.clerk-county-host {
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #000;
  opacity: 0.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile — same Hendry-style full-fill treatment: explicit 100% heights
   chained down from the #columnsSection { height: calc(100dvh - 62px) }
   parent, kill the panel-head, ditch the rounded borders. */
@media (max-width: 900px) {
  .columns:has(.clerk-florida-wrap) {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0;
    height: 100%;
    min-height: 0;
    width: 100%;
    min-width: 0;
  }
  .columns:has(.clerk-florida-wrap) .preview-panel {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
  .columns:has(.clerk-florida-wrap) .preview-panel > .panel-head {
    display: none;
  }
  .columns:has(.clerk-florida-wrap) .preview-body {
    padding: 0;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }
  .clerk-florida-wrap {
    height: 100%;
    min-height: 0;
  }
  .clerk-toolbar-hint { display: none; }
  .clerk-county-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    padding: 10px;
    gap: 8px;
  }
  .clerk-county-cell { min-height: 62px; padding: 10px 8px; }
  .clerk-county-name { font-size: 14px; }
}

/* --- Permits (Lee County weekly PDFs) -----------------------------------
   The upstream PDFs at leegov.com send X-FRAME-OPTIONS: SAMEORIGIN, so we
   iframe them through our /api/permits/lee/:week proxy which strips that
   header and streams the bytes from our own origin. Same viewport-pinning
   trick as the floodzone map: parent needs real height, preview-body has
   to stop being a scroll container, iframe fills 100%. */

/* --- Propstream launch / control screen ---------------------------------- */
.propstream-launch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  gap: 14px;
  text-align: center;
  padding: 32px 20px;
}
.ps-icon-wrap {
  opacity: 0.85;
}
.ps-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.3px;
  margin-top: 2px;
}
.ps-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 340px;
}
.ps-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 18px;
  border-radius: 20px;
  background: var(--panel-2);
}
.ps-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ps-dot-active {
  background: #1a7f37;
  box-shadow: 0 0 6px rgba(26, 127, 55, 0.5);
  animation: ps-pulse 2s ease-in-out infinite;
}
.ps-dot-closed {
  background: #9a9a9a;
}
@keyframes ps-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.ps-status-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.ps-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.ps-main-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #000;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.ps-main-btn:hover {
  background: #333;
}
.ps-close-btn {
  padding: 12px 20px;
  background: none;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ps-close-btn:hover {
  border-color: var(--terminate);
  color: var(--terminate);
}
.ps-hint {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 360px;
  margin-top: 6px;
}
.ps-sidebar-close {
  border-color: var(--terminate) !important;
  color: var(--terminate) !important;
}
.ps-sidebar-close:hover {
  background: rgba(207, 34, 46, 0.06) !important;
}
.ps-sidebar-close span {
  color: var(--terminate);
  font-size: 13px;
}

.columns:has(.permits-wrap) {
  height: calc(100dvh - 110px);
  min-height: 640px;
}
.columns:has(.permits-wrap) .preview-panel {
  height: 100%;
  min-height: 0;
}
.preview-body:has(> .permits-wrap) {
  padding: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}


.permits-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
}

.permits-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f1f3f5;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* Sub-toolbar (week tabs row, only shown under Issued Permits) — slightly
   lighter background so it reads as nested under the main toolbar. */
.permits-toolbar-sub {
  background: #f8f9fa;
  padding: 8px 14px;
}

/* --- Lee County sub-tabs (Issued Permits / Builders) -------------------- */
.permits-subtabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.permits-subtab {
  background: #fff;
  border: 0;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.12s, color 0.12s;
}

.permits-subtab + .permits-subtab {
  border-left: 1px solid var(--border-strong);
}

.permits-subtab:hover {
  background: #fff4e2;
}

.permits-subtab.active {
  background: #d97706;
  color: #fff;
}

.permits-refresh-btn {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.permits-refresh-btn:hover {
  background: #fff4e2;
  border-color: #d97706;
}

.permits-back-btn {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
}
.permits-back-btn:hover { background: var(--panel-2); }

.permits-week-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.permits-week-tab {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.permits-week-tab:hover {
  background: #fff4e2;
  border-color: #d97706;
}

.permits-week-tab.active {
  background: #d97706;
  border-color: #b45309;
  color: #fff;
}

.permits-newtab-btn {
  margin-left: auto;
  display: inline-block;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #000;
  text-decoration: none;
}

.permits-newtab-btn:hover {
  background: #fff4e2;
  border-color: #d97706;
}

.permits-pdf-wrap {
  flex: 1 1 auto;
  min-height: 0;
  background: #2b2b2b;
}

.permits-pdf {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Mobile — same Hendry-style full-fill treatment + a completely
   different PDF presentation. iOS Safari's native iframe PDF viewer
   renders PDFs at their natural page width (~612pt for US Letter),
   which is wider than a mobile viewport, and it ignores the PDF hash
   params (#view=FitH) we pass on desktop. The net effect is "content
   hanging off the side of the screen" which is what the user is
   complaining about.

   Solution: on mobile, hide the iframe and show a big tappable card
   that opens the proxy URL in a new tab — iOS/Android will render the
   PDF full-screen in the browser's native PDF viewer, which IS
   pinch-zoomable and fits-to-width. This is the same approach Gmail,
   Drive, and most mobile webapps use for attachments. */
@media (max-width: 900px) {
  .columns:has(.permits-wrap) {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0;
    height: 100%;
    min-height: 0;
    width: 100%;
    min-width: 0;
  }
  .columns:has(.permits-wrap) .preview-panel {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
  .columns:has(.permits-wrap) .preview-panel > .panel-head {
    display: none;
  }
  .columns:has(.permits-wrap) .preview-body {
    padding: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }
  .permits-wrap {
    min-height: 100%;
    height: auto;
  }

  /* Compact the toolbar so all buttons fit neatly on small screens. */
  .permits-toolbar {
    padding: 8px 10px;
    gap: 6px;
  }
  .permits-toolbar-sub {
    padding: 6px 10px;
  }
  .permits-newtab-btn {
    display: none; /* replaced by the big "Open PDF" card below */
  }
  .permits-week-tab {
    padding: 5px 9px;
    font-size: 12px;
  }
  .permits-subtab {
    padding: 6px 12px;
    font-size: 12px;
  }
  .permits-refresh-btn {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* --- Mobile PDF hero card ---------------------------------------- */
  /* The JS renders a .permits-mobile-card instead of the iframe on
     mobile. Full-width, tappable, orange primary button. */
  .permits-pdf-wrap {
    display: none;
  }
  .permits-mobile-card {
    /* !important beats the desktop base rule that sits later in source
       order. Without it, the cascade picks the later rule and the card
       never renders on mobile — see the blank Lee permits screens. */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 18px 14px 22px;
    padding: 28px 20px 26px;
    background: #fff;
    border: 2px dashed #d97706;
    border-radius: 16px;
    text-align: center;
    color: #000;
  }
  .permits-mobile-card-icon {
    width: 72px;
    height: 72px;
    background: #fff4e2;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
  }
  .permits-mobile-card-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #000;
    margin: 0;
  }
  .permits-mobile-card-sub {
    font-size: 13px;
    color: #000;
    opacity: 0.7;
    margin: 0;
    max-width: 280px;
    line-height: 1.4;
  }
  .permits-mobile-card-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    background: #d97706;
    color: #fff !important;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.4px;
    border: 0;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 6px;
    min-width: 180px;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
  }
  .permits-mobile-card-open:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(217, 119, 6, 0.35);
  }

}

/* Desktop hides the mobile card since it renders the iframe instead. */
.permits-mobile-card {
  display: none;
}


/* All three top-level tab titles render in black, regardless of the
   accent color used for their active-state borders. */
.mode-picker > .mode-btn .mode-title,
.mode-create .mode-title,
.mode-email .mode-title,
.mode-drafting .mode-title,
.mode-search .mode-title {
  color: #000;
}

/* Inline icon sitting to the left of each tab label. stroke=currentColor
   so the glyph inherits the black title color. */
.mode-icon {
  flex: 0 0 auto;
  color: #000;
}

/* --- Business search UI ------------------------------------------------- */

.biz-back-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.12s, border-color 0.12s;
}
.biz-back-btn:hover {
  background: var(--panel-2);
  border-color: var(--border-strong);
}

.biz-search-form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.biz-search-form input[type="text"] {
  flex: 1;
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}

.biz-search-form input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.12);
}

.biz-search-form button {
  padding: 10px 22px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  border: 0;
  border-radius: 8px;
  background: #bc4c00;
  color: #fff;
  cursor: pointer;
}

.biz-search-form button:hover {
  background: #9a3e00;
}

.biz-search-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.biz-source-line {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.biz-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.biz-results-table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.biz-results-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.biz-results-table tr:hover td {
  background: var(--panel-2);
}

.biz-results-table a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.biz-results-table a:hover {
  text-decoration: underline;
}

.biz-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.biz-status-active {
  background: #dcfce7;
  color: #14532d;
}

.biz-status-inactive {
  background: #fee2e2;
  color: #7f1d1d;
}

.biz-status-other {
  background: #f1f5f9;
  color: #475569;
}

/* Pagination controls under the results table */
.biz-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.biz-pager-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.biz-pager-btn:hover:not(:disabled) {
  background: #f6f8fa;
  border-color: #9ca3af;
}

.biz-pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.biz-pager-label {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 600;
}

/* In-app entity detail view */
.biz-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.biz-back-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.biz-back-btn:hover {
  background: #f6f8fa;
  border-color: #9ca3af;
}

.biz-source-open {
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
}

.biz-source-open:hover {
  text-decoration: underline;
}

.biz-detail-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.biz-detail-body h2 {
  font-size: 16px;
  margin: 0 0 14px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.biz-detail-body .detailSection {
  margin: 0 0 18px 0;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.biz-detail-body .detailSection > span:first-child {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.biz-detail-body .detailSection.corporationName {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.biz-detail-body .detailSection.corporationName p {
  margin: 0;
}

.biz-detail-body .detailSection.corporationName p:first-child {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.biz-detail-body .detailSection.corporationName p:last-child {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.biz-detail-body .detailSection label {
  display: inline-block;
  min-width: 140px;
  font-weight: 600;
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.biz-detail-body .detailSection div {
  margin: 4px 0;
}

.biz-detail-body .detailSection table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}

.biz-detail-body .detailSection table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.biz-detail-body .detailSection table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.biz-detail-body .detailSection table tr:last-child td {
  border-bottom: none;
}

.biz-detail-body a {
  color: #0969da;
  text-decoration: none;
}

.biz-detail-body a:hover {
  text-decoration: underline;
}

.biz-detail-body .ButtonLink {
  display: inline-block;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}

.biz-detail-body .ButtonLink:hover {
  background: #f6f8fa;
  text-decoration: none;
}

.mode-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.mode-send .mode-title {
  color: var(--send);
}

.mode-terminate .mode-title {
  color: var(--terminate);
}

.mode-desc {
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 13px;
}

.columns {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 22px;
  height: 100%;
  min-height: 0;
}

@media (max-width: 900px) {
  .columns {
    grid-template-columns: 1fr;
  }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}

.panel-title {
  font-weight: 600;
  letter-spacing: 0.3px;
}

.sidebar-tabs {
  display: flex;
  gap: 8px;
}
.sidebar-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.sidebar-tab svg { display: block; }
.sidebar-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.sidebar-tab:hover:not(.active) {
  color: var(--text);
  border-color: #2e7d32;
  box-shadow: 0 6px 18px rgba(46, 125, 50, 0.22), 0 0 0 1px rgba(46, 125, 50, 0.12);
  transform: translateY(-2px);
}

.add-agent-item {
  border-top: 1px dashed var(--border);
}

.email-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 10px;
}
.email-bubble {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.email-bubble-text {
  cursor: pointer;
}
.email-bubble-text:hover {
  text-decoration: underline;
  color: var(--accent);
}
.email-bubble-x {
  font-size: 15px;
  line-height: 1;
  color: transparent;
  cursor: pointer;
  margin-left: 2px;
  transition: color 0.15s;
  font-weight: 600;
}
.email-bubble:hover .email-bubble-x {
  color: #d1242f;
}
.email-bubble-x:hover {
  color: #a1111a !important;
}
.email-bubble-edit {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 16px;
  max-width: 260px;
}

.add-new-agent-option {
  color: #2e7d32;
  font-weight: 600;
}

.refresh-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.1s;
}
.refresh-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(9, 105, 218, 0.06);
}
.refresh-btn:active {
  transform: scale(0.92);
}
.refresh-btn svg {
  display: block;
}
.refresh-btn.refreshing svg {
  animation: sendivo-spin 0.8s linear infinite;
}

.street-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
}

/* ── Street list: state-group collapsible headers ───────────────────── */
.state-group {
  list-style: none;
  margin: 0 0 6px;
}
.state-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.state-group-header:hover {
  background: rgba(9, 105, 218, 0.05);
  border-color: var(--border-strong);
}
.state-group-header .state-chevron {
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.state-group.collapsed .state-group-header .state-chevron {
  transform: rotate(-90deg);
}
.state-group-header .state-code {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  padding: 2px 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.state-group-header .state-label {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}
.state-group-header .state-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  min-width: 22px;
  text-align: center;
}
.state-group-streets {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 4px;
  display: block;
}
.state-group.collapsed .state-group-streets {
  display: none;
}

.street-item {
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 6px;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}

.street-item:hover {
  background: var(--panel-2);
}

.street-item.selected {
  background: #ddf4ff;
  border-color: var(--accent);
}

.street-name {
  font-weight: 600;
  margin-bottom: 4px;
}

/* Escrow rows render street name + amount badge on one row (name left,
   amount right) via .street-name-row. Older modes don't use this wrapper
   so they keep stacking naturally. */
.street-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.street-name-row .street-name {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.escrow-amount-badge {
  flex: 0 0 auto;
  background: #1a7f37;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .2px;
}
.escrow-amount-badge.empty {
  background: transparent;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  font-weight: 500;
}

.street-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.file-chip {
  display: inline-block;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-chip.clickable {
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.file-chip.clickable:hover {
  border-color: #2e7d32;
  box-shadow: 0 8px 24px rgba(46, 125, 50, 0.22), 0 0 0 1px rgba(46, 125, 50, 0.12);
  transform: translateY(-2px);
}

.pdf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.pdf-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 90vw;
  max-width: 900px;
  height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.pdf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.pdf-modal-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 10px;
  transition: background 0.15s;
}
.pdf-modal-close:hover { background: var(--panel-2); }
.pdf-modal iframe {
  flex: 1;
  border: none;
  width: 100%;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.empty-state {
  padding: 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

.empty-state.error {
  color: var(--terminate);
}

.preview-panel {
  min-height: 0;
  overflow: hidden;
}

.preview-body {
  padding: 18px;
  flex: 1;
  overflow-y: auto;
}

.route-line {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  color: var(--text-dim);
  font-size: 13px;
}

.route-line b {
  color: var(--text);
}

.preview-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px 16px;
  margin: 0;
}

.preview-grid dt {
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-top: 6px;
}

.preview-grid dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.addr-chip {
  background: #ddf4ff;
  border: 1px solid #54aeff;
  color: #0550ae;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.addr-chip.cc {
  background: #f6f8fa;
  border-color: var(--border-strong);
  color: var(--text);
}

.addr-chip.from {
  background: #dafbe1;
  border-color: #4ac26b;
  color: #0f5323;
}

.empty-addr {
  color: var(--text-dim);
  font-style: italic;
  font-size: 12px;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.body-box {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  white-space: pre-wrap;
  font-size: 13px;
  width: 100%;
  display: block !important;
}

/* Editable CC row */
.cc-edit-row {
  flex-wrap: wrap;
  gap: 6px;
}

.cc-removable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cc-remove-btn {
  background: none;
  border: none;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  opacity: 0.5;
}

.cc-remove-btn:hover {
  opacity: 1;
  color: #cf222e;
}

.cc-add-controls {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.cc-dropdown {
  flex: 1;
  min-width: 180px;
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

.cc-manual-row {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 180px;
}

.cc-manual-input {
  flex: 1;
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cc-manual-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(31, 111, 200, 0.15);
}

.cc-add-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cc-add-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Editable body textarea */
.body-editable {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
  cursor: text;
  outline: none;
}

.body-editable:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(31, 111, 200, 0.15);
}

.warning-strip {
  background: var(--warn-bg);
  border-top: 1px solid var(--warn-border);
  color: var(--warn-text);
  padding: 12px 18px;
  font-size: 13px;
}

.warning-strip b {
  color: var(--warn-text);
}

.warning-strip ul {
  margin: 6px 0 0 18px;
  padding: 0;
}

/* --- In Escrow preview panel: Total In Escrow input + CLOSED button ------ */
.escrow-amount-editor {
  margin: 14px 0 10px;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.escrow-amount-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
  display: block;
}
.escrow-amount-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.escrow-amount-input {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.escrow-amount-input:focus {
  outline: none;
  border-color: var(--accent);
}
.escrow-amount-save {
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .3px;
}
.escrow-amount-save:hover:not(:disabled) {
  filter: brightness(0.92);
}
.escrow-amount-save:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.escrow-amount-status {
  margin-top: 6px;
  font-size: 12px;
  color: #1a7f37;
  min-height: 16px;
}
.escrow-amount-status.error {
  color: #d1242f;
}
.escrow-close-row {
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.escrow-close-btn {
  background: #d1242f;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 13px;
  cursor: pointer;
}
.escrow-close-btn:hover:not(:disabled) {
  background: #a40e26;
}
.escrow-close-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.escrow-close-hint {
  font-size: 12px;
  color: var(--text-dim);
}

/* BACK link for the In Escrow tab — returns to the CONTRACT tab's
   Create Home picker. Sits at the top of the sidebar listTitle area. */
.escrow-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .4px;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 8px;
}
.escrow-back-btn:hover {
  background: var(--panel-2);
}

/* ─── Drafting back-bar ─────────────────────────────────────────────────
   Sits between the panel-head and the previewBody whenever the user is
   inside any sub-screen of the DRAFTING flow (email, create, send,
   terminate, escrow). Two buttons:
     • BACK              — go up one level within the section
     • BACK TO DRAFTING  — jump straight to the 2-card Drafting picker
   The bar is hidden by default and revealed by updateDraftingBackBar(). */
.drafting-back-bar {
  display: flex;
  gap: 6px;
  padding: 8px 14px 0;
  flex-wrap: wrap;
}
.drafting-back-bar[hidden] { display: none; }
.drafting-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .4px;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.drafting-back-btn:hover {
  background: var(--panel-2);
  border-color: var(--border-strong);
}
.escrow-list-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Saved Drafts — collapsible city dropdown. Each city is a <details>
   element with a <summary> header. Hide the browser-default disclosure
   triangle (Safari uses ::-webkit-details-marker; modern browsers use
   list-style on summary itself) so we render our own chevron, then
   rotate the chevron when [open]. */
.saved-drafts-city > summary { list-style: none; }
.saved-drafts-city > summary::-webkit-details-marker { display: none; }
.saved-drafts-city > summary:hover { background: var(--panel) !important; }
.saved-drafts-city[open] > summary .saved-drafts-city-chevron {
  transform: rotate(180deg);
}

.action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}

.action-bar[hidden] {
  display: none !important;
}

.btn {
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  font-size: 13px;
  transition: background 0.12s, transform 0.05s;
  color: white;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-cancel {
  background: var(--cancel);
  color: var(--text);
}

.btn-cancel:hover {
  background: var(--cancel-hover);
}

.btn-send {
  background: var(--send);
  color: #fff;
}

.btn-send:hover {
  background: var(--send-hover);
}

.btn-no {
  background: #d73a49;
  color: #fff;
}

.btn-no:hover {
  background: #b92534;
}

.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow-md);
  max-width: 560px;
}

.toast-success {
  border-color: var(--send);
  background: #f0f9f3;
  color: var(--send-hover);
}

.toast-error {
  border-color: var(--terminate);
  background: #fdf0f1;
  color: var(--terminate-hover);
}

/* === Global black-text override ===
   Forces every piece of body text to black while leaving border colors,
   button backgrounds, and white-on-dark labels (btn-no, orange search
   button) alone. */
:root {
  --text: #000;
  --text-dim: #000;
  --warn-text: #000;
}
body,
.from-pill,
.mode-title,
.mode-send .mode-title,
.mode-terminate .mode-title,
.mode-desc,
.panel-title,
.refresh-btn,
.street-name,
.street-meta,
.file-chip,
.empty-state,
.empty-state.error,
.route-line,
.preview-body,
.warning-strip,
.btn,
.btn-send,
.btn-cancel,
.toast,
.toast-success,
.toast-error,
.biz-source-line,
.biz-results-table,
.biz-results-table th,
.biz-results-table td,
.biz-results-table a,
.biz-status-active,
.biz-status-inactive,
.biz-status-other,
.biz-pager,
.biz-pager button,
.create-form,
.create-form label,
.create-form input,
.create-form textarea,
.create-form select {
  color: #000;
}
/* Keep white text on filled-background buttons */
.btn-send,
.btn-no,
.btn-create,
.sidebar-tab.active,
.biz-search-form button {
  color: #fff !important;
}

/* --- CREATE mode: full-width form layout ------------------------------- */

.columns.create-mode {
  grid-template-columns: 1fr;
}

.columns.create-mode .list-panel {
  display: none;
}

.create-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}

.create-form .full {
  grid-column: 1 / -1;
}

/* --- Contract type picker (Create home) --------------------------------
   The two big cards on the "Create a new contract" screen — one for
   PURCHASE SALE AGREEMENT, one for ASSIGNMENT OF CONTRACT. They reuse
   the .mode-btn base styling but override layout and sizing so the
   embedded SVG icon (hand writing / hands handing a contract) sits
   centered on top, with the title and description stacked below it. */
.contract-type-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 28px 22px 26px;
  text-align: center;
  /* Override the locked .mode-btn height from the sidebar — these are
     hero cards in the work area and need to grow with their content. */
  height: auto !important;
  min-height: 220px !important;
  max-height: none !important;
  overflow: visible;
  /* Kill the bottom-bar tab ordering. Some of these cards share classes
     with bottom-bar tabs (e.g. .mode-send / .mode-create) which set
     `order: N` to position tabs — that rule would otherwise leak in and
     scramble the 2x2 grid. Force DOM order inside the Create Home. */
  order: 0 !important;
}

.contract-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 88px;
  margin-bottom: 4px;
  color: #000;
}

.contract-type-icon svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.contract-type-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #000;
  line-height: 1.2;
}

.contract-type-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
  max-width: 320px;
  margin: 0 auto;
}

/* 2x2 grid wrapper for the Create Home picker cards. Stays 2-col even
   when the outer .create-form is collapsed by the mobile media query,
   so PSA + Assignment sit side-by-side and In Escrow + Edit Saved Draft
   land underneath them. Collapses to single column only on very narrow
   screens (<500px) where 2-col would squish icons and labels. */
.contract-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
@media (max-width: 500px) {
  .contract-type-grid { grid-template-columns: 1fr; }
}

/* ── Mobile-friendly contract drafting forms ───────────────────────────
   Collapses the 2-column grid, enlarges tap targets, prevents iOS
   zoom-on-focus (inputs >= 16px font-size), stacks sub-inputs, and
   makes the preview-body padding tighter so content actually fits. */
@media (max-width: 720px) {
  /* Preview body padding — tighter gutters on phones, but NOT for
     full-bleed views like the map tool (which sets padding:0 itself). */
  .columns.create-mode .preview-body { padding: 10px !important; }

  /* Main grid + inner grid collapse to single column. Tighter gaps so a long
     PSA form stays compact on a phone instead of ballooning. */
  .create-form {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }
  .create-form .inner-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .create-form fieldset {
    padding: 9px 11px 10px !important;
  }
  .create-form legend { font-size: 12px; }

  /* Inputs: 16px font-size avoids iOS auto-zoom; 44px min-height = Apple HIG tap target */
  .create-form input[type='text'],
  .create-form input[type='tel'],
  .create-form input[type='email'],
  .create-form input[type='date'],
  .create-form input[type='number'],
  .create-form textarea,
  .create-form select {
    font-size: 16px !important;   /* keep ≥16px — smaller makes iOS zoom in on focus */
    padding: 9px 10px !important;
    min-height: 40px;
    box-sizing: border-box;
    width: 100%;
  }
  .create-form textarea {
    min-height: 72px !important;
    padding: 8px 10px !important;
  }

  /* Labels: compact, just enough breathing room */
  .create-form label {
    font-size: 11px;
    gap: 4px;
  }

  /* Check/radio rows: larger, easier to tap; allow wrapping for sub-inputs */
  .create-form .check-row,
  .create-form .radio-row {
    padding: 9px 11px !important;
    font-size: 13.5px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .create-form .check-row input[type='checkbox'],
  .create-form .radio-row input[type='radio'] {
    width: 18px !important;
    height: 18px !important;
  }
  .create-form .check-row label.inline,
  .create-form .radio-row label.inline {
    font-size: 13.5px;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* Sub-inputs nested inside radio/check labels need to fit with finger taps */
  .create-form .addendum-wrap,
  .create-form .sub-input {
    font-size: 12px;
    gap: 6px;
  }
  .create-form .addendum-wrap input[type='text'],
  .create-form .sub-input input[name='occupancy_days'] {
    width: 64px !important;
    font-size: 16px !important;
    padding: 8px 8px !important;
    min-height: 40px;
  }
  .create-form .sub-input input[type='text'],
  .create-form .sub-input input[type='date'] {
    width: 100% !important;
    max-width: 200px;
    font-size: 16px !important;
    padding: 8px 10px !important;
    min-height: 40px;
  }
  .create-form .inline-num {
    width: 64px !important;
    font-size: 16px !important;
    padding: 8px 8px !important;
    min-height: 36px !important;
  }

  /* Preset chips: bigger tap targets, wrap freely */
  .create-form .preset-row {
    gap: 8px;
    row-gap: 10px;
  }
  .preset-chip {
    padding: 8px 15px;
    font-size: 13px;
    min-height: 36px;
  }

  /* Result card: stack action buttons full-width */
  .create-result .result-actions {
    flex-direction: column;
  }
  .create-result .result-actions .btn,
  .create-result .result-actions button {
    width: 100%;
    min-height: 44px;
  }

  /* Contract type picker hero cards — tighter on small screens */
  .contract-type-card {
    padding: 22px 16px !important;
    min-height: 180px !important;
  }
  .contract-type-title { font-size: 16px; }
  .contract-type-desc  { font-size: 13px; }

  /* Bottom action bar: stick to bottom edge, full-width buttons */
  .action-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .action-bar .btn {
    flex: 1 1 140px;
    min-height: 44px;
    font-size: 14px;
  }
}

.create-form fieldset {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px 14px;
  margin: 6px 0 0;
  background: var(--panel-2);
}

.create-form legend {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
}

.create-form .inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin-top: 4px;
}

.create-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.create-form input[type='text'],
.create-form textarea,
.create-form select {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-size: 13px;
}

.create-form textarea {
  min-height: 68px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.create-form input[type='text']:focus,
.create-form textarea:focus,
.create-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.12);
}

.create-form .preset-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.preset-chip {
  padding: 8px 18px;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-size: 13px;
}

.preset-chip.active {
  border-color: var(--accent);
  background: #ddf4ff;
  color: #0550ae;
}

/* --- Houses PSA form elements (check/radio rows, inline numbers, auto-computed) --- */

.create-form .row-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.create-form .check-row,
.create-form .radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}

.create-form .check-row input[type='checkbox'],
.create-form .radio-row input[type='radio'] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.create-form .check-row label.inline,
.create-form .radio-row label.inline {
  flex: 1;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  cursor: pointer;
}

.create-form .addendum-wrap,
.create-form .sub-input {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.4px;
}

.create-form .addendum-wrap input[type='text'],
.create-form .sub-input input[name='occupancy_days'] {
  width: 54px;
  padding: 5px 7px;
  font-size: 12px;
  text-align: center;
}

.create-form .sub-input input[type='text'] {
  width: 130px;
  padding: 5px 8px;
  font-size: 12px;
}

/* Inline number input embedded inside a radio/check label */
.create-form .inline-num {
  width: 56px !important;
  padding: 4px 6px !important;
  font-size: 13px !important;
  text-align: center;
  border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  margin: 0 2px;
}

.create-form .inline-num:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.12) !important;
}

/* Auto-computed (read-only) closing date field */
.create-form .auto-computed {
  background: #eef2f5 !important;
  color: var(--text) !important;
  border-style: dashed !important;
  font-style: italic;
}

.create-form .auto-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #ddf4ff;
  color: #0550ae;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: middle;
}

.btn-create {
  background: var(--accent);
}

.btn-create:hover {
  background: #0550ae;
}

.create-result {
  padding: 16px 18px;
  background: #f0f9f3;
  border: 1px solid var(--send);
  border-radius: 10px;
  color: var(--send-hover);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.create-result .result-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
  color: var(--text);
}

.create-result .result-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════
   LOGIN MODE — hide everything except the login screen
   ══════════════════════════════════════════════════════════ */
body.login-mode .section-select,
body.login-mode .topbar,
body.login-mode .drawer-backdrop,
body.login-mode .shell,
body.login-mode .chat-toggle,
body.login-mode .chat-panel { display: none !important; }

body.reset-mode .section-select,
body.reset-mode .topbar,
body.reset-mode .drawer-backdrop,
body.reset-mode .shell,
body.reset-mode .chat-toggle,
body.reset-mode .chat-panel,
body.reset-mode #loginScreen { display: none !important; }
body.reset-mode #resetScreen { display: flex !important; }
body.reset-mode #loginScreen { display: none !important; }

/* ── Login & Reset screens ── */
#loginScreen,
#resetScreen {
  display: none !important;
}
.login-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  padding: 32px 20px;
  background: var(--bg);
}
body.login-mode #loginScreen { display: flex !important; }
body.login-mode #resetScreen { display: none !important; }

.login-logo {
  height: 180px;
  width: auto;
  object-fit: contain;
  margin-bottom: 28px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 340px;
}

.login-heading {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  margin-bottom: 4px;
}

.login-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.login-input {
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 15px;
  background: var(--panel);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
}

.login-show-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.login-show-toggle input {
  margin: 0;
  cursor: pointer;
}

.login-error {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
}

.login-btn {
  padding: 12px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.login-btn:hover { background: #0550ae; }
.login-btn:active { transform: translateY(1px); }

.login-access-btn {
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.login-access-btn:hover {
  background: var(--panel-2);
  color: var(--text);
}

/* Access code overlay — fullscreen over everything */
.access-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.access-overlay.visible {
  display: flex;
}
.access-overlay-box {
  background: var(--panel);
  border-radius: 14px;
  padding: 28px 24px;
  width: 90%;
  max-width: 340px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.access-overlay-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
}
.access-overlay-result {
  display: none;
  text-align: center;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.access-overlay-result.success {
  display: block;
  background: #e6f4ea;
  color: #1a7f37;
  border: 1px solid #34a853;
  font-size: 28px;
  letter-spacing: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  user-select: all;
  -webkit-user-select: all;
}
.access-overlay-result.error {
  display: block;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}
.access-overlay-actions {
  display: flex;
  gap: 10px;
}
.access-overlay-actions .login-btn {
  flex: 1;
}
.access-overlay-cancel {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.access-overlay-cancel:hover { background: var(--border); }

/* ── Sidebar user info ── */
.sidebar-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--border);
  margin-top: auto;
  /* Since the sidebar reorder uses flex `order` (values 10+ on buttons),
     elements without an explicit order default to 0 and render BEFORE
     the buttons. Pinning sidebar-user to a very high order guarantees
     it stays after every button, and `margin-top: auto` above keeps
     it glued to the bottom of the container. */
  order: 9999;
}
.sidebar-user-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.sidebar-user-role {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-2);
}
.sidebar-signout {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sidebar-signout:hover {
  background: var(--terminate);
  color: #fff;
  border-color: var(--terminate);
}

/* Tabs-position toggle (Tabs: Top / Tabs: Bottom). Sits next to the
   user info + sign-out button. Mirrors the sign-out button styling. */
.sidebar-tabs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-tabs-toggle:hover {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.sidebar-tabs-toggle svg {
  flex-shrink: 0;
}

/* ── Chat persistent container (desktop sidebar mode) ── */
.chat-persistent {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
}
.chat-persistent .chat-panel {
  position: static !important;
  width: 100% !important;
  max-height: none !important;
  height: 100% !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.chat-persistent .chat-panel.hidden {
  display: flex !important;
}
.chat-persistent .chat-messages {
  flex: 1;
  min-height: 0;
  max-height: none !important;
}
.chat-persistent .chat-close-btn {
  display: none;
}
.chat-persistent .chat-input-bar {
  position: sticky;
  bottom: 0;
  background: var(--panel);
}
/* DM view fills available space in sidebar mode */
.chat-persistent .chat-view {
  flex: 1;
  min-height: 0;
}
.chat-persistent .dm-contact-panel {
  height: 100%;
}
.chat-persistent .dm-conv-messages {
  max-height: none !important;
  flex: 1;
  min-height: 0;
}
.chat-persistent .dm-empty-state {
  min-height: 300px;
}

/* Hide floating chat button on desktop (chat is in sidebar) */
@media (min-width: 901px) {
  .chat-toggle { display: none !important; }
}

/* On desktop the CHAT category is shown as a sidebar group; on mobile the
   .mode-category-group{display:contents} flattening already exposes the
   inner .mode-chat button as a bottom-bar tab, so nothing to hide here. */

/* Mobile: constrain the chat-persistent container so the fixed bottom nav
   bar (60px) remains visible when the user opens the CHAT tab. Without
   this, .chat-persistent inherits .shell's taller height and the chat
   content sits on top of the bottom nav. */
@media (max-width: 900px) {
  #chatPersistent {
    height: calc(100dvh - 62px - 60px) !important;
    max-height: calc(100dvh - 62px - 60px) !important;
  }
}

/* ── Chat toggle button (floating, mobile only) ── */
.chat-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1100;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(9, 105, 218, 0.35);
  transition: background 0.15s, transform 0.15s;
}
.chat-toggle:hover { background: #0550ae; transform: scale(1.08); }
.chat-toggle:active { transform: scale(0.96); }

.chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--terminate);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.chat-sidebar-badge {
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--terminate);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Chat panel ── */
.chat-panel {
  position: fixed;
  bottom: 82px;
  left: 20px;
  z-index: 1099;
  width: 360px;
  max-height: 520px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 0.2s, transform 0.2s;
}
.chat-panel.hidden {
  display: none;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}

/* Chat / DM tab switcher */
.chat-tabs {
  display: flex;
  gap: 0;
  background: var(--border);
  border-radius: 8px;
  padding: 2px;
  /* Fill the header (minus the actions) and give every visible tab an equal
     share, so the sub-tabs are evenly spaced regardless of label length or
     how many are shown (Agent/DM hide without leaving gaps). */
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 10px;
}
.chat-tab {
  /* flex:1 1 0 → all visible tabs render at equal width. */
  flex: 1 1 0;
  text-align: center;
  white-space: nowrap;
  /* Bigger + bolder so the tabs read clearly; active tab pops in accent. */
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #475569;                 /* darker than --text-dim — legible at rest */
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.chat-tab.active {
  background: var(--panel);
  color: var(--accent);           /* accent text */
  box-shadow: 0 2px 8px rgba(9,105,218,0.22), 0 1px 2px rgba(15,23,42,0.10);
  transform: translateY(-0.5px);  /* slight lift */
}
.chat-tab:hover:not(.active) {
  color: var(--text);
  background: rgba(255,255,255,0.6);
}
/* Red pill badge inside a chat tab (e.g. unread DMs on DM tab) */
.chat-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 16px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--terminate);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.chat-tab-badge[hidden] { display: none; }

/* Chat views — only one visible at a time */
.chat-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.chat-view.hidden { display: none; }

/* ═════════════════════════════════════════════════════════════════════
   AGENT TAB — Comp Agent (Land) dashboard. Modern card layout: white
   panel surfaces, soft shadows, generous spacing, sentence-case titles
   (no more SHOUTY uppercase headers).
   ═════════════════════════════════════════════════════════════════════ */
.agent-tab-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* No outer page scroll — both columns scroll internally if needed. */
  overflow: hidden;
  padding: 16px 20px 18px;
  gap: 12px;
  background: #f8f9fb;
}

/* Header: name + mode + skiptrace-badge on the left, refresh + last-update on the right */
.agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 10px;
  flex-wrap: wrap;
}
.agent-header-left,
.agent-header-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.agent-header-name {
  font-weight: 700;
  font-size: 22px;
  color: #0f172a;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Agent-color dot before the name. Renders as a 10px circle in the
   agent's identity color (blue/green/red). The agent header sets
   data-agent="<name>" so the cascade picks up --agent-accent. */
.agent-header[data-agent] .agent-header-name::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--agent-accent, #94a3b8);
  flex-shrink: 0;
}
/* Tint the name itself in the agent's color for stronger identity. */
.agent-header[data-agent] .agent-header-name {
  color: var(--agent-text, #0f172a);
}
.agent-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #eef1f5;
  color: #475569;
  text-transform: capitalize;
}
.agent-mode-pill::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.agent-mode-pill[data-mode="auto"]     { background: #ecfdf5; color: #047857; }
.agent-mode-pill[data-mode="takeover"] { background: #fef3c7; color: #b45309; }
.agent-mode-pill[data-mode="draft"]    { background: #eff6ff; color: #1d4ed8; }
.agent-skiptrace-badge {
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 999px;
}
.agent-skiptrace-badge.hidden { display: none; }
.agent-refresh-btn {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  width: 32px; height: 32px;
  font-size: 15px;
  cursor: pointer;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms, border-color 120ms, transform 200ms;
}
.agent-refresh-btn:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
.agent-refresh-btn:active { transform: rotate(180deg); }
.agent-last-update { font-size: 11px; color: #94a3b8; }

/* Card surface — replaces the old gray-on-gray look with a clean white
   panel + soft shadow. Borders are barely-there (#eef0f3) so the depth
   reads as elevation, not lines. */
.agent-section {
  background: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
}

/* Per-agent color identity. Each agent has a distinct color used for
   their header name, owner pills (when their work is visible to other
   agents), and other identity surfaces:
     Mason   → blue
     Logan   → green
     Maximos → red
   The colors map to a CSS-variables palette so any descendant element
   can pick it up via var(--agent-bg) / var(--agent-text) etc. */
[data-agent="mason"] {
  --agent-bg:        #dbeafe;
  --agent-bg-light:  #eff6ff;
  --agent-border:    #93c5fd;
  --agent-text:      #1e40af;
  --agent-accent:    #3b82f6;
}
[data-agent="logan"] {
  --agent-bg:        #dcfce7;
  --agent-bg-light:  #f0fdf4;
  --agent-border:    #86efac;
  --agent-text:      #166534;
  --agent-accent:    #22c55e;
}
[data-agent="maximos"] {
  --agent-bg:        #fee2e2;
  --agent-bg-light:  #fef2f2;
  --agent-border:    #fca5a5;
  --agent-text:      #991b1b;
  --agent-accent:    #ef4444;
}
.agent-section.hidden { display: none; }
.agent-section-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #0f172a;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.agent-section-hint {
  font-weight: 400;
  color: #94a3b8;
  font-size: 12px;
}
.agent-empty-state {
  font-size: 13px;
  color: #94a3b8;
  padding: 16px 0;
  text-align: center;
}

/* Inbox — chat thread for the active take-over conversation. Inbound
   bubbles align left (gray), outbound right (blue). Last 6 messages
   visible (max-height ~360px); scroll up for older. Auto-scrolls on
   new message only when user is already near the bottom. */
/* Header line: "● Seller: Mason Google — 920 Fitch Ave, Lehigh Acres, FL"
   The dot pulses to signal the take-over is live. Property comes
   from the server's brain state (resolved via sendivo-find-property
   at take-over start). */
.agent-inbox-seller {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: #ecfdf5;
  border-left: 3px solid #10b981;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: #064e3b;
}
.agent-inbox-seller.hidden { display: none; }
.agent-inbox-seller-label { color: #047857; font-weight: 600; }
.agent-inbox-seller-sep { color: #94a3b8; }
.agent-inbox-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10b981;
  animation: agentInboxPulse 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes agentInboxPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.agent-inbox-contact { font-weight: 600; color: #064e3b; }
.agent-inbox-property { color: #047857; font-variant-numeric: tabular-nums; }

/* Take-over / Draft toggle in the seller header. Clicking flips between
   the brain auto-replying ('takeover', blue) and the operator typing each
   reply manually ('draft', amber). The mode is round-tripped through the
   server so it persists for the lifetime of the take-over. */
.agent-inbox-mode-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.agent-inbox-mode-toggle[data-mode="takeover"] {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.agent-inbox-mode-toggle[data-mode="takeover"]:hover {
  background: #dbeafe;
}
.agent-inbox-mode-toggle[data-mode="draft"] {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
.agent-inbox-mode-toggle[data-mode="draft"]:hover {
  background: #fef3c7;
}
.agent-inbox-mode-toggle-icon { font-size: 13px; line-height: 1; }
.agent-inbox-mode-toggle-label { line-height: 1; }

/* ───── Multi-card inbox layout ─────────────────────────────────────
   Each active take-over renders as its own .agent-inbox-card. Cards
   stack vertically; operator manages multiple concurrent conversations
   side-by-side (up to AGENT_TAKEOVER_CAP = 5). */
.agent-inbox-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Outer scroll if many cards stacked taller than the section. */
  max-height: 78vh;
  overflow-y: auto;
  padding-right: 4px;
}
.agent-inbox-cards::-webkit-scrollbar { width: 8px; }
.agent-inbox-cards::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.agent-inbox-cards::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.agent-inbox-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 4px 10px 10px 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.agent-inbox-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
/* Inside a card, the seller header keeps its existing pill shape but
   loses the bottom margin so the thread sits flush against it. */
.agent-inbox-card .agent-inbox-seller {
  margin-bottom: 8px;
}
/* Per-card thread caps at 280px so 3-5 stacked cards still fit on
   screen without endless scrolling per card. The container has its
   own outer scroll for the whole set. */
.agent-inbox-card .agent-inbox-thread {
  max-height: 280px;
}
/* Draft bar inside a card needs less vertical breathing room than
   the original single-pane layout. */
.agent-inbox-card .agent-inbox-draft-bar {
  margin-top: 8px;
}

/* Stop X button — appears in the seller header next to the mode toggle.
   Click → confirmation popover → POST /api/agent/takeover/stop. Same
   effect as typing `stop` in the directive box. Hidden when no take-over
   is active. */
.agent-inbox-stop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: 4px;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  color: #b91c1c;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  font-family: inherit;
}
.agent-inbox-stop-btn:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #7f1d1d;
  transform: scale(1.08);
}
.agent-inbox-stop-btn:active {
  transform: scale(0.96);
}
.agent-inbox-stop-btn.hidden { display: none; }

/* Stop confirmation popover. Modal-style: dimmed backdrop with a small
   card centered. Close on backdrop click or Cancel. */
.agent-inbox-stop-confirm {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.agent-inbox-stop-confirm.hidden { display: none; }
.agent-inbox-stop-confirm-card {
  background: #fff;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.18);
  width: min(420px, 100%);
  border: 1px solid #e2e8f0;
}
.agent-inbox-stop-confirm-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}
.agent-inbox-stop-confirm-body {
  font-size: 13px;
  color: #475569;
  line-height: 1.55;
  margin-bottom: 14px;
}
.agent-inbox-stop-confirm-body strong { color: #0f172a; }
.agent-inbox-stop-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.agent-inbox-stop-confirm-cancel,
.agent-inbox-stop-confirm-go {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s, border-color 0.15s;
}
.agent-inbox-stop-confirm-cancel {
  background: #f1f5f9;
  color: #334155;
  border-color: #e2e8f0;
}
.agent-inbox-stop-confirm-cancel:hover { background: #e2e8f0; }
.agent-inbox-stop-confirm-go {
  background: #dc2626;
  color: #fff;
  border-color: #b91c1c;
}
.agent-inbox-stop-confirm-go:hover { background: #b91c1c; }
.agent-inbox-stop-confirm-go:disabled { opacity: 0.6; cursor: wait; }

/* ───── Take-over cap-decision modal ─────────────────────────────────
   Appears when /api/agent/run returns 409 needsCapDecision (5/5 take-
   overs already running). Operator picks: drop one (stop the chosen
   take-over), or queue this new one (FIFO, surfaces a hint when a
   slot frees). Cancel just closes. */
.takeover-cap-modal {
  position: fixed;
  inset: 0;
  z-index: 9100; /* above stop confirmation */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.takeover-cap-modal.hidden { display: none; }
.takeover-cap-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}
.takeover-cap-modal-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22);
  width: min(540px, 100%);
  border: 1px solid #e2e8f0;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.takeover-cap-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}
.takeover-cap-modal-subtitle {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 18px;
}
.takeover-cap-modal-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
}
.takeover-cap-modal-pending {
  margin-bottom: 18px;
}
.takeover-cap-modal-pending-row {
  padding: 10px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  font-size: 13px;
  color: #7c2d12;
}
.takeover-cap-modal-pending-row strong { color: #9a3412; font-weight: 700; }
.takeover-cap-modal-pending-directive {
  color: #c2410c;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}
.takeover-cap-modal-active {
  margin-bottom: 18px;
}
.takeover-cap-modal-active-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.takeover-cap-modal-empty {
  font-size: 13px;
  color: #94a3b8;
  font-style: italic;
  padding: 8px 0;
}
.takeover-cap-modal-active-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: #0f172a;
  text-align: left;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}
.takeover-cap-modal-active-row:hover {
  background: #fee2e2;
  border-color: #fecaca;
}
.takeover-cap-modal-active-row:active { transform: scale(0.98); }
.takeover-cap-modal-active-row-busy {
  opacity: 0.6;
  cursor: wait;
}
.takeover-cap-modal-active-contact {
  font-weight: 600;
  flex: 1 1 auto;
}
.takeover-cap-modal-active-meta {
  color: #64748b;
  font-size: 12px;
  flex: 0 0 auto;
}
.takeover-cap-modal-active-action {
  color: #b91c1c;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.takeover-cap-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.takeover-cap-modal-cancel,
.takeover-cap-modal-queue {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s, border-color 0.15s;
}
.takeover-cap-modal-cancel {
  background: #f1f5f9;
  color: #334155;
  border-color: #e2e8f0;
}
.takeover-cap-modal-cancel:hover { background: #e2e8f0; }
.takeover-cap-modal-queue {
  background: #2563eb;
  color: #fff;
  border-color: #1d4ed8;
}
.takeover-cap-modal-queue:hover { background: #1d4ed8; }
.takeover-cap-modal-queue:disabled { opacity: 0.6; cursor: wait; }

/* Draft message bar — appears under the thread only when in draft mode.
   Operator types here; pressing Enter sends. The daemon types it to
   Sendivo at human pace, so there's a typing-delay window during which
   the message hasn't shown up as an outbound bubble yet. */
.agent-inbox-draft-bar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  border-radius: 8px;
}
.agent-inbox-draft-bar.hidden { display: none; }
.agent-inbox-draft-input {
  flex: 1;
  resize: none;
  min-height: 44px;
  max-height: 140px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: #111827;
}
.agent-inbox-draft-input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.agent-inbox-draft-input:disabled { opacity: 0.6; cursor: progress; }
.agent-inbox-draft-send {
  flex: 0 0 auto;
  padding: 0 16px;
  border: none;
  border-radius: 6px;
  background: #f59e0b;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s;
}
.agent-inbox-draft-send:hover { background: #d97706; }
.agent-inbox-draft-send:disabled {
  background: #fcd34d;
  cursor: progress;
}
.agent-inbox-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
  /* No scroll-behavior:smooth — when new messages arrive we want the
     scroll to snap to the bottom instantly, like watching a real
     live conversation. Smooth scroll made it look like the thread was
     "scrolling up then back down" on each refresh. */
}
.agent-inbox-thread::-webkit-scrollbar { width: 8px; }
.agent-inbox-thread::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.agent-inbox-thread::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.agent-inbox-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 78%;
}
.agent-inbox-msg-out  { align-self: flex-end;   align-items: flex-end; }
.agent-inbox-msg-in   { align-self: flex-start; align-items: flex-start; }
.agent-inbox-msg-info {
  align-self: center;
  align-items: center;
  max-width: 100%;
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
  padding: 4px 0;
}
.agent-inbox-msg-info-time { font-size: 10px; color: #cbd5e1; margin-top: 2px; }
.agent-inbox-msg-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}
.agent-inbox-msg-out .agent-inbox-msg-bubble {
  background: #2563eb;
  color: #fff;
  border-bottom-right-radius: 5px;
}
.agent-inbox-msg-in .agent-inbox-msg-bubble {
  background: #f1f5f9;
  color: #0f172a;
  border-bottom-left-radius: 5px;
}
.agent-inbox-msg-time {
  font-size: 10px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
}
/* Pre-take-over messages (the manual blast + seller replies that
   happened before the daemon parked, expanded from the daemon's
   thread_history event). Slightly muted so the operator can tell at
   a glance which messages are historical vs live this take-over. */
.agent-inbox-msg-history .agent-inbox-msg-bubble { opacity: 0.78; }
.agent-inbox-msg-history .agent-inbox-msg-time   { font-style: italic; }

/* Voice proposals — clean cards with prominent Approve, secondary Reject */
.agent-proposals-list { display: flex; flex-direction: column; gap: 10px; }
.agent-proposal {
  background: #f9fafb;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  padding: 14px 16px;
}
.agent-proposal-summary { font-weight: 600; font-size: 14px; color: #0f172a; margin-bottom: 4px; }
.agent-proposal-detail { font-size: 13px; color: #64748b; margin-bottom: 12px; line-height: 1.5; }
.agent-proposal-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Click-to-expand prep doc on each proposal. The header is the
   click target; ▸ rotates to ▾ when expanded; the body slides in
   below and renders the markdown prep doc. Approve/Reject buttons
   sit beneath the body regardless of expand state. */
.agent-proposal-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background-color 0.12s;
}
.agent-proposal-header:hover { background: rgba(0, 0, 0, 0.03); }
.agent-proposal-header:focus-visible {
  outline: 2px solid var(--agent-accent, #3b82f6);
  outline-offset: 2px;
}
.agent-proposal-header-text { flex: 1; min-width: 0; }
.agent-proposal-toggle-arrow {
  font-size: 12px;
  color: #64748b;
  margin-top: 1px;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.agent-proposal.expanded .agent-proposal-toggle-arrow {
  transform: rotate(90deg);
}
.agent-proposal-body {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 8px;
  max-height: 520px;
  overflow-y: auto;
}
.agent-proposal-body.hidden { display: none; }
.agent-prep-loading { color: #64748b; font-size: 13px; padding: 4px 0; }
.agent-prep-error   { color: #b91c1c; font-size: 13px; padding: 4px 0; }

/* Plain-English explainer block — sits above the technical prep doc.
   Friendlier visual treatment so it reads like guidance, not a report.
   Light blue tint, simple typography, generous spacing.  */
.agent-prep-explainer {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #1e293b;
}
.agent-prep-explainer h4 {
  font-size: 12px;
  font-weight: 700;
  color: #1e40af;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.agent-prep-explainer h4:not(:first-child) { margin-top: 14px; }
.agent-prep-explainer p { margin: 0 0 8px; }
.agent-prep-explainer ul,
.agent-prep-explainer ol { margin: 0 0 8px; padding-left: 22px; }
.agent-prep-explainer ul ul { margin: 4px 0 0; }
.agent-prep-explainer li { margin-bottom: 3px; }
.agent-prep-explainer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: #dbeafe;
  padding: 1px 5px;
  border-radius: 3px;
  color: #1e3a8a;
}
.agent-prep-explainer strong { color: #0f172a; }

/* Slot for the technical prep doc — sits below the explainer. Has a
   subtle separator above it on first paint so the visual hierarchy
   reads "friendly summary first → technical details below". */
.agent-prep-doc-slot {
  border-top: 1px dashed #e5e7eb;
  padding-top: 12px;
}
.agent-prep-doc-slot:empty { border-top: none; padding-top: 0; }

/* Markdown rendering inside the prep doc. Compact, scannable, matches
   the rest of the agent UI — small fonts, tight spacing. */
.agent-prep-doc {
  font-size: 12.5px;
  line-height: 1.55;
  color: #334155;
}
.agent-prep-doc h1 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}
.agent-prep-doc h2 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 16px 0 8px;
}
.agent-prep-doc h3 {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin: 12px 0 6px;
}
.agent-prep-doc p { margin: 0 0 8px; }
.agent-prep-doc ul, .agent-prep-doc ol { margin: 0 0 8px; padding-left: 22px; }
.agent-prep-doc li { margin-bottom: 2px; }
.agent-prep-doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  color: #0f172a;
}
.agent-prep-doc pre.agent-prep-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 10px;
  overflow-x: auto;
  white-space: pre;
}
.agent-prep-doc strong { color: #0f172a; }
.agent-prep-doc em     { color: #475569; }
.agent-prep-doc hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 14px 0;
}
.agent-prep-doc table.agent-prep-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 10px;
  font-size: 11.5px;
}
.agent-prep-doc table.agent-prep-table th,
.agent-prep-doc table.agent-prep-table td {
  border: 1px solid #e5e7eb;
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}
.agent-prep-doc table.agent-prep-table th {
  background: #f8fafc;
  font-weight: 600;
  color: #0f172a;
}
.agent-prep-doc table.agent-prep-table tr:nth-child(even) td {
  background: #fafbfc;
}
.agent-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
}
.agent-btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
.agent-btn-approve {
  background: #059669;
  color: #fff;
  border-color: #059669;
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.18);
}
.agent-btn-approve:hover { background: #047857; border-color: #047857; color: #fff; }
.agent-btn-reject {
  background: #fff;
  color: #b91c1c;
  border-color: #fecaca;
}
.agent-btn-reject:hover { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }

/* Warm leads — green accent stripe, clean preview */
.agent-warm-leads-list { display: flex; flex-direction: column; gap: 8px; }
.agent-warm-lead {
  background: #fff;
  border: 1px solid #eef0f3;
  border-left: 3px solid #10b981;
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color 120ms, box-shadow 120ms;
}
.agent-warm-lead:hover { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }
.agent-warm-lead-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 4px;
}
.agent-warm-lead-name { font-weight: 600; font-size: 13px; color: #0f172a; }
.agent-warm-lead-time { font-size: 11px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.agent-warm-lead-preview {
  font-size: 13px;
  color: #475569;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.45;
}

/* DocuSigns section — team-wide envelope visibility. Each row shows the
   recipient seller, doc type (PSA/Assignment), property address, and a
   status badge (⏳ awaiting / ✓ signed / ! failed). Awaiting items have a
   "Text DocuSign" button to nudge the seller's phone. The "Awaiting from
   other agents" group is divided by a label row to indicate cross-team
   visibility. */
.agent-docusigns-list { display: flex; flex-direction: column; gap: 6px; }
.agent-docusigns-divider {
  margin-top: 8px;
  padding: 4px 4px 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  border-bottom: 1px solid #e5e7eb;
}
.agent-docusign-item {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.agent-docusign-item[data-status="awaiting"] {
  border-color: #fde68a;
  background: #fffbeb;
}
.agent-docusign-item[data-status="signed"] {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.agent-docusign-item[data-status="failed"] {
  border-color: #fecaca;
  background: #fef2f2;
}
.agent-docusign-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.agent-docusign-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.agent-docusign-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.agent-docusign-status-awaiting {
  background: #fef3c7;
  color: #92400e;
}
.agent-docusign-status-signed {
  background: #dcfce7;
  color: #166534;
}
.agent-docusign-status-failed {
  background: #fee2e2;
  color: #b91c1c;
}
.agent-docusign-seller {
  font-weight: 600;
  font-size: 13px;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-docusign-owner {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  /* Defaults — overridden per agent via data-agent below. */
  background: #e0e7ff;
  color: #3730a3;
  flex-shrink: 0;
}
.agent-docusign-owner[data-agent] {
  background: var(--agent-bg);
  color: var(--agent-text);
}
.agent-docusign-meta {
  font-size: 11px;
  color: #64748b;
  padding-left: 26px;  /* line up with name (badge width + gap) */
}
.agent-docusign-doctype { font-weight: 600; color: #475569; }

/* Buyer-signature-incomplete alert (2026-05-28). Red so it can't be
   missed — the envelope is stranded until the operator signs it. */
.agent-docusign-signwarn-item {
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
}
.agent-docusign-signwarn {
  margin-top: 5px;
  margin-left: 26px;
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 5px;
  padding: 4px 8px;
}

/* ─── Scheduled follow-ups (#29B) — agent-tab section ─────────────────
   Mirrors the DocuSigns item layout. Two row types: 'followup' (auto-
   drip, indigo accent) and 'deferred' (off-hours take-over, amber). */
.agent-drips-list { display: flex; flex-direction: column; gap: 6px; }
.agent-drip-item {
  background: #fff;
  border: 1px solid #eef0f3;
  border-left-width: 4px;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.agent-drip-item.agent-drip-followup { border-left-color: #6366f1; }  /* indigo */
.agent-drip-item.agent-drip-deferred { border-left-color: #f59e0b; }  /* amber  */
.agent-drip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.agent-drip-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.agent-drip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 12px;
  flex-shrink: 0;
}
.agent-drip-icon-followup { background: #e0e7ff; }
.agent-drip-icon-deferred { background: #fef3c7; }
.agent-drip-contact {
  font-weight: 600;
  font-size: 13px;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-drip-cancel {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.agent-drip-cancel:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}
.agent-drip-meta {
  font-size: 11px;
  color: #64748b;
  padding-left: 26px;  /* line up with contact (icon width + gap) */
}
.agent-drip-label { font-weight: 600; color: #475569; }
.agent-drip-when { color: #94a3b8; }

/* Collapse pattern — mirror DocuSigns/Skiptraced. */
.agent-drips-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.agent-drips-toggle:hover .agent-drips-chevron { color: #1e293b; }
.agent-drips-chevron {
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
  color: #64748b;
  transition: transform 0.15s ease;
  transform: rotate(0deg);
}
.agent-drips.collapsed .agent-drips-chevron { transform: rotate(-90deg); }
.agent-drips.collapsed .agent-drips-list { display: none; }
.agent-tab-right .agent-drips.collapsed { max-height: none; overflow: visible; }

/* ── SMS Blasts (auto-blast queue) — mirrors the Scheduled-follow-ups section ── */
.agent-blasts-list { display: flex; flex-direction: column; gap: 6px; }
.agent-blast-modebar { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; font-size: 11px; color: #64748b; }
.agent-blast-modelabel { font-weight: 600; color: #475569; }
.agent-blast-modetoggle { display: inline-flex; border: 1px solid #e2e8f0; border-radius: 7px; overflow: hidden; }
.agent-blast-modebtn { appearance: none; -webkit-appearance: none; border: 0; background: #fff; color: #64748b; font: inherit; font-size: 11px; font-weight: 600; padding: 3px 12px; cursor: pointer; transition: background 0.12s, color 0.12s; }
.agent-blast-modebtn + .agent-blast-modebtn { border-left: 1px solid #e2e8f0; }
.agent-blast-modebtn.active { background: #4f46e5; color: #fff; }
.agent-blast-modebtn:not(.active):hover { background: #f1f5f9; color: #1e293b; }
.agent-blast-armed { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.agent-blast-armed.on { color: #16a34a; }
.agent-blast-armed.off { color: #94a3b8; }
.agent-blast-item { border: 1px solid #e2e8f0; border-left: 3px solid #0ea5e9; border-radius: 8px; padding: 8px 10px; background: #fff; }
.agent-blast-item.agent-blast-approved { border-left-color: #16a34a; }
.agent-blast-item.agent-blast-firing { border-left-color: #f59e0b; }
.agent-blast-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agent-blast-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.agent-blast-icon { flex-shrink: 0; }
.agent-blast-list { font-weight: 600; color: #1e293b; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-blast-actions { display: flex; gap: 6px; flex-shrink: 0; }
.agent-blast-approve, .agent-blast-cancel { appearance: none; -webkit-appearance: none; border: 1px solid #e2e8f0; background: #fff; font: inherit; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.agent-blast-approve { color: #16a34a; border-color: #bbf7d0; }
.agent-blast-approve:hover { background: #dcfce7; color: #15803d; border-color: #86efac; }
.agent-blast-cancel { color: #64748b; }
.agent-blast-cancel:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.agent-blast-badge { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.agent-blast-badge.firing { background: #fef3c7; color: #b45309; }
.agent-blast-badge.approved { background: #dcfce7; color: #15803d; }
.agent-blast-meta { font-size: 11px; color: #64748b; padding-left: 24px; margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; }
.agent-blast-label { font-weight: 600; color: #475569; }
.agent-blast-when { color: #94a3b8; }
.agent-blast-num { color: #0ea5e9; font-variant-numeric: tabular-nums; }
/* Contact count chip — how many contacts the blast will text (live Sendivo list count). */
.agent-blast-contacts { font-weight: 800; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.agent-blast-contacts.counting { font-weight: 600; color: #92400e; background: #fffbeb; border-color: #fde68a; }
.agent-blast-contacts.unknown { font-weight: 600; color: #94a3b8; background: #f8fafc; border-color: #e2e8f0; }
.agent-blast-msg { font-size: 11px; color: #64748b; padding-left: 24px; margin-top: 3px; font-style: italic; white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.agent-blast-charcount { font-size: 10px; color: #94a3b8; padding-left: 24px; margin-top: 2px; }
.agent-blast-edit-charcount { font-size: 10px; font-weight: 600; color: #64748b; }
.agent-blast-edit-charnum { color: #4f46e5; }

/* ── Edit a queued blast (inline form) ── */
.agent-blast-edit-btn {
  flex-shrink: 0; appearance: none; -webkit-appearance: none;
  border: 1px solid #e2e8f0; background: #fff; color: #475569;
  font: inherit; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.agent-blast-edit-btn:hover { background: #f1f5f9; color: #1e293b; border-color: #cbd5e1; }
.agent-blast-edit { margin-top: 8px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; display: flex; flex-direction: column; gap: 8px; }
.agent-blast-edit.hidden { display: none; }
.agent-blast-edit-lbl { font-size: 11px; font-weight: 600; color: #475569; display: flex; flex-direction: column; gap: 4px; }
.agent-blast-edit-msg { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 7px; resize: vertical; min-height: 70px; }
.agent-blast-edit-msg:focus { outline: none; border-color: #4f46e5; }
.agent-blast-tagwarn { color: #dc2626; font-weight: 700; font-size: 10px; }
.agent-blast-tagwarn.hidden { display: none; }
.agent-blast-edit-toprow { display: flex; align-items: center; gap: 8px; }
.agent-blast-regen { appearance: none; -webkit-appearance: none; border: 1px solid #c7d2fe; background: #eef2ff; color: #4f46e5; font: inherit; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.agent-blast-regen:hover { background: #e0e7ff; }
.agent-blast-edit-hint { font-size: 10px; color: #94a3b8; }
.agent-blast-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.agent-blast-edit-grid input, .agent-blast-edit-number { font: inherit; font-size: 12px; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; box-sizing: border-box; }
.agent-blast-num-row { display: flex; gap: 6px; align-items: center; }
.agent-blast-num-row .agent-blast-edit-number { flex: 1 1 auto; min-width: 0; }
.agent-blast-num-refresh { flex-shrink: 0; appearance: none; -webkit-appearance: none; border: 1px solid #c7d2fe; background: #eef2ff; color: #4f46e5; font: inherit; font-size: 12px; line-height: 1; padding: 6px 9px; border-radius: 6px; cursor: pointer; }
.agent-blast-num-refresh:hover { background: #e0e7ff; }
.agent-blast-num-refresh:disabled { opacity: .6; cursor: default; }

/* ── Hub Inbox tab (Odysseus-port email) ── */
#chatViewInbox { padding: 0; height: 100%; min-height: 0; }
.inbox-wrap { display: flex; height: 100%; min-height: 0; background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid #e2e8f0; }
/* Full-Gmail model: the list and the conversation each take the whole panel,
   one visible at a time (JS toggles `.hidden`). */
.inbox-list-col { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #fff; }
.inbox-list-col.hidden { display: none !important; }
.inbox-conv-view { flex: 1 1 auto; min-height: 0; min-width: 0; background: #fff; overflow-y: auto; }
.inbox-conv-view.hidden { display: none !important; }
/* Full-screen email reading — when an email is open the inbox view fills the
   ENTIRE screen IN PLACE (edge-to-edge; NOT a pop-out card or dimmed backdrop)
   so the email reads at full width AND height. Toggled by body.inbox-reading-fs
   (added/removed in openInboxThread/closeInboxThread). Works in both the floating
   and docked chat-panel modes since it's viewport-fixed. */
body.inbox-reading-fs { overflow: hidden; }
body.inbox-reading-fs #chatViewInbox {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 2000;
  background: #fff;
}
body.inbox-reading-fs .inbox-wrap { border: 0 !important; border-radius: 0 !important; height: 100% !important; }
/* FORCE the conversation pane to be the scroll container at a definite height so
   a tall email scrolls. The flex height-chain (#chatViewInbox→.inbox-wrap→pane)
   was leaving the pane able to grow with content instead of scrolling, so the
   bottom of a long email was unreachable. Pinning height + overflow removes the
   ambiguity. */
body.inbox-reading-fs .inbox-conv-view {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
/* FILL THE HEIGHT: the email body frame renders only as tall as the email's own
   content (per-email auto-fit), so a short email is a thin strip with empty space
   below. In full-screen, give the email body a screen-tall MIN height so it fills
   the whole screen; the JS auto-fit still grows it TALLER for long emails. */
body.inbox-reading-fs .inbox-msg-frame,
body.inbox-reading-fs .inbox-read-body { min-height: calc(100vh - 168px) !important; }
/* ── Gmail-style email LEFT RAIL (Compose + Send/Terminate/Read all stacked) ── */
.inbox-sidebar {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  background: #f6f8fb;
  border-right: 1px solid #e8edf3;
  overflow-y: auto;
  min-height: 0;
}
.inbox-compose-fab {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; margin-bottom: 8px;
  border: 0; border-radius: 22px;
  background: #2563eb; color: #fff;
  font-size: 14px; font-weight: 600;
  cursor: pointer; box-shadow: 0 2px 7px rgba(37,99,235,.35);
  transition: background 120ms, box-shadow 120ms;
}
.inbox-compose-fab:hover { background: #1d4ed8; box-shadow: 0 4px 13px rgba(37,99,235,.45); }
.inbox-fab-ico { font-size: 15px; }
.inbox-side-act {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; width: 100%;
  border: 0; border-radius: 8px; background: transparent;
  color: #334155; font-size: 13px; font-weight: 500; text-align: left;
  cursor: pointer; transition: background 120ms, color 120ms;
}
.inbox-side-act:hover { background: #e6ebf2; color: #1e293b; }
.inbox-side-ico { font-size: 14px; width: 18px; text-align: center; flex: 0 0 auto; }
.inbox-side-terminate:hover { background: #fef2f2; color: #b91c1c; }
/* Hide the rail in full-screen reading so the email truly fills the screen. */
body.inbox-reading-fs .inbox-sidebar { display: none !important; }
@media (max-width: 700px) { .inbox-sidebar { flex-basis: 128px; padding: 10px 8px; } }
.inbox-list-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #e8edf3; }
.inbox-list-title { font-weight: 700; font-size: 14px; color: #1e293b; }
.inbox-count { font-weight: 600; font-size: 12px; color: #4f46e5; }
.inbox-head-actions { display: flex; align-items: center; gap: 6px; }
.inbox-refresh-btn { appearance: none; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 15px; width: 28px; height: 28px; border-radius: 7px; cursor: pointer; line-height: 1; }
.inbox-refresh-btn:hover { background: #eef2ff; color: #4f46e5; }
.inbox-markall-btn { appearance: none; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 12px; font-weight: 600; height: 28px; padding: 0 9px; border-radius: 7px; cursor: pointer; line-height: 1; white-space: nowrap; }
.inbox-markall-btn:hover { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.inbox-markall-btn:disabled { opacity: .55; cursor: default; }
.inbox-filter-tabs { display: flex; gap: 0; padding: 6px 10px; border-bottom: 1px solid #e8edf3; background: #fafbfc; }
.inbox-filter-tab { appearance: none; border: 1px solid #e2e8f0; background: #fff; color: #64748b; font-size: 12px; font-weight: 600; height: 28px; padding: 0 12px; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: 5px; }
.inbox-filter-tab:first-child { border-radius: 7px 0 0 7px; }
.inbox-filter-tab:last-child { border-radius: 0 7px 7px 0; border-left: none; }
.inbox-filter-tab:hover { background: #eef2ff; color: #4f46e5; }
.inbox-filter-tab.active { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.inbox-filter-count { font-size: 11px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #eef2f7; color: #475569; display: inline-flex; align-items: center; justify-content: center; }
.inbox-filter-tab.active .inbox-filter-count { background: rgba(255,255,255,.25); color: #fff; }
.inbox-read-status { font-size: 12px; font-weight: 600; color: #059669; margin-right: auto; }
.inbox-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.inbox-empty, .inbox-read-empty { padding: 24px 16px; color: #94a3b8; font-size: 13px; text-align: center; }
.inbox-item { padding: 9px 12px; border-bottom: 1px solid #eef2f7; cursor: pointer; transition: background .1s; }
.inbox-item:hover { background: #eef2ff; }
.inbox-item.open { background: #e0e7ff; }
.inbox-item.unread .inbox-subj, .inbox-item.unread .inbox-from { font-weight: 700; }
.inbox-item-top { display: flex; align-items: center; gap: 6px; }
.inbox-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #cbd5e1; }
.inbox-dot.urg-high { background: #ef4444; } .inbox-dot.urg-med { background: #f59e0b; } .inbox-dot.urg-low { background: #94a3b8; } .inbox-dot.urg-none { background: #cbd5e1; }
.inbox-from { flex: 1 1 auto; font-size: 13px; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-when { font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.inbox-subj { font-size: 13px; color: #1e293b; margin: 2px 0 2px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-meta { display: flex; gap: 6px; align-items: center; margin-left: 14px; flex-wrap: wrap; }
.inbox-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 1px 6px; border-radius: 4px; background: #e2e8f0; color: #475569; }
.inbox-cat-title { background: #dcfce7; color: #166534; } .inbox-cat-docusign { background: #e0e7ff; color: #3730a3; } .inbox-cat-seller { background: #fef3c7; color: #92400e; } .inbox-cat-agent { background: #cffafe; color: #155e75; } .inbox-cat-finance { background: #fae8ff; color: #86198f; } .inbox-cat-newsletter { background: #f1f5f9; color: #94a3b8; }
.inbox-deal { font-size: 10px; color: #4f46e5; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.inbox-summary { font-size: 11px; color: #64748b; margin: 3px 0 0 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-snippet { font-style: italic; color: #94a3b8; }
.inbox-read-col { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.inbox-read-head { padding: 14px 18px 10px; border-bottom: 1px solid #eef2f7; }
.inbox-read-subj { font-size: 17px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.inbox-read-from { font-size: 13px; color: #334155; } .inbox-read-date { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.inbox-read-actions { margin-top: 8px; display: flex; gap: 8px; }
.inbox-act { appearance: none; border: 1px solid #e2e8f0; background: #fff; color: #475569; font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.inbox-act:hover { background: #f1f5f9; }
.inbox-act.inbox-gmail-link { text-decoration: none; color: #2563eb; border-color: #c7d7fb; background: #eff4ff; display: inline-flex; align-items: center; }
.inbox-act.inbox-gmail-link:hover { background: #dbe7ff; }
.inbox-read-status { font-size: 12px; font-weight: 600; color: #059669; margin-right: auto; align-self: center; }
.inbox-html-frame { width: 100%; height: clamp(300px, 46vh, 660px); border: 1px solid #eef2f7; border-top: none; background: #fff; display: block; }
.inbox-triage { margin: 10px 18px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e8edf3; border-radius: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inbox-urg-label { font-size: 11px; color: #64748b; text-transform: capitalize; }
.inbox-summary-list { flex-basis: 100%; margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: #475569; line-height: 1.4; }

/* ═══ Gmail-style email UI (conversation rows + thread view + reply) ═══ */

/* List rows — one per conversation: avatar, sender/date, subject, snippet. */
.inbox-row { display: flex; align-items: flex-start; gap: 12px; padding: 9px 16px; border-bottom: 1px solid #f1f3f4; cursor: pointer; }
.inbox-row:hover { background: #f5f7fa; }
.inbox-row.open { background: #eef2ff; }
.inbox-row-avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.inbox-row-main { flex: 1 1 auto; min-width: 0; }
.inbox-row-line1 { display: flex; align-items: baseline; gap: 8px; }
.inbox-row-from { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-row.unread .inbox-row-from { font-weight: 700; }
.inbox-row-count { color: #5f6368; font-weight: 400; font-size: 12px; margin-left: 4px; }
.inbox-row-when { flex: 0 0 auto; font-size: 12px; color: #5f6368; }
.inbox-row.unread .inbox-row-when { color: #202124; font-weight: 600; }
.inbox-row-line2 { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 1px; }
.inbox-row-subj { font-size: 13px; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-row.unread .inbox-row-subj { font-weight: 700; }
.inbox-row-clip { font-size: 12px; flex: 0 0 auto; }
.inbox-row-snippet { font-size: 12px; color: #5f6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

/* Conversation topbar (back arrow · subject · actions). */
.inbox-conv-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #eef2f7; position: sticky; top: 0; z-index: 2; background: #fff; }
.inbox-conv-back { appearance: none; border: 0; background: none; font-size: 20px; line-height: 1; color: #5f6368; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }
.inbox-conv-back:hover { background: #f1f3f4; color: #202124; }
.inbox-conv-subject { flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 500; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-conv-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* Stacked messages in the thread (collapsed / expanded, like Gmail). */
.inbox-conv-thread { padding: 6px 0 10px; background: #f6f8fb; min-height: calc(100% - 56px); }
.inbox-msg { background: #fff; border: 1px solid #e8edf3; border-radius: 10px; margin: 6px 6px; overflow: hidden; }
.inbox-msg-head { display: flex; align-items: flex-start; gap: 10px; padding: 11px 10px; cursor: pointer; }
.inbox-msg.collapsed .inbox-msg-head:hover { background: #f8fafc; }
.inbox-msg-avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.inbox-msg-meta { flex: 1 1 auto; min-width: 0; }
.inbox-msg-line { display: flex; align-items: baseline; gap: 8px; }
.inbox-msg-from { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-msg-me { font-weight: 400; color: #5f6368; }
.inbox-msg-date { flex: 0 0 auto; font-size: 12px; color: #5f6368; }
.inbox-msg-sub { font-size: 12px; color: #5f6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.inbox-msg.collapsed .inbox-msg-body-wrap { display: none; }
.inbox-msg-body-wrap { padding: 0 6px 10px; }
.inbox-msg-frame { width: 100%; height: 200px; border: 0; background: #fff; display: block; }

/* Reply bar (collapsed CTAs → inline composer). */
/* Reply / Reply-all sits inline at the bottom of the thread (Gmail-style). */
.inbox-conv-reply { margin: 6px 6px 16px; }
.inbox-conv-reply-actions { display: flex; gap: 10px; padding: 6px 2px; }
.inbox-reply-cta { appearance: none; border: 1px solid #d2d9e5; background: #fff; color: #202124; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 22px; border-radius: 22px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.inbox-reply-cta:hover { background: #f8fafc; box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.inbox-conv-compose { background: #fff; border: 1px solid #e8edf3; border-radius: 10px; padding: 14px 16px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.inbox-compose-title { font-size: 12px; font-weight: 700; color: #5f6368; margin-bottom: 8px; }

/* Per-message reply / reply-all / forward controls (↩ + ⋮ menu) + inline composer. */
.inbox-msg-actions { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; align-self: center; }
.inbox-msg.collapsed .inbox-msg-actions { display: none; }
.inbox-msg-act { appearance: none; border: 0; background: none; color: #5f6368; font-size: 15px; line-height: 1; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0; }
.inbox-msg-act:hover { background: #f1f3f4; color: #202124; }
.inbox-msg-menu { position: absolute; top: 28px; right: 0; z-index: 6; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.16); padding: 4px; min-width: 132px; }
.inbox-msg-menu.hidden { display: none; }
.inbox-msg-menu button { display: block; width: 100%; text-align: left; appearance: none; border: 0; background: none; font: inherit; font-size: 13px; color: #202124; padding: 7px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.inbox-msg-menu button:hover { background: #f1f3f4; }
.inbox-msg-composer { margin: 0 6px 12px; }
.inbox-msg-composer:empty { display: none; }
.inbox-reply-discard { margin-left: 2px; color: #94a3b8; font-size: 13px; }
.inbox-reply-discard:hover { color: #dc2626; }
.inbox-conv-loading { padding: 44px 16px; text-align: center; color: #94a3b8; font-size: 14px; }
.inbox-conv-triage { flex: 0 0 auto; margin: 8px 6px 0; }
.inbox-triage-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6366f1; }
.inbox-read-body { padding: 12px 8px; font-size: 14px; color: #1e293b; white-space: pre-wrap; word-break: break-word; line-height: 1.55; border-bottom: 1px solid #eef2f7; }
/* Downloadable file attachments (PDFs etc.) in the read pane. cid: signature
   images are filtered out server-side; these are real files. */
.inbox-attachments { padding: 10px 18px; border-bottom: 1px solid #eef2f7; background: #fafbfc; }
.inbox-attach-label { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.inbox-attach-row { display: flex; flex-wrap: wrap; gap: 8px; }
.inbox-attach-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 260px; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; text-decoration: none; color: #1e293b; font-size: 12px; transition: border-color .12s, box-shadow .12s, background .12s; }
.inbox-attach-chip:hover { border-color: #2563eb; background: #f8faff; box-shadow: 0 1px 4px rgba(37,99,235,.12); }
.inbox-attach-ico { font-size: 15px; line-height: 1; flex: 0 0 auto; }
.inbox-attach-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.inbox-attach-size { flex: 0 0 auto; color: #94a3b8; font-size: 11px; font-variant-numeric: tabular-nums; }
.inbox-compose { padding: 12px 18px 16px; }
.inbox-compose-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.inbox-compose-to { flex: 1 1 auto; font-size: 12px; color: #475569; display: flex; align-items: center; gap: 6px; }
.inbox-compose-to input { flex: 1 1 auto; font: inherit; font-size: 12px; padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 6px; }
.inbox-draft-btn { appearance: none; border: 1px solid #c7d2fe; background: #eef2ff; color: #4f46e5; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 7px; cursor: pointer; flex-shrink: 0; }
.inbox-draft-btn:hover { background: #e0e7ff; } .inbox-draft-btn:disabled { opacity: .6; cursor: default; }
.inbox-compose-body { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; resize: vertical; min-height: 120px; }
.inbox-compose-body:focus { outline: none; border-color: #4f46e5; }
.inbox-compose-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.inbox-send-btn { appearance: none; border: 0; background: #16a34a; color: #fff; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 20px; border-radius: 8px; cursor: pointer; }
.inbox-send-btn:hover { background: #15803d; } .inbox-send-btn:disabled { opacity: .6; cursor: default; }
.inbox-send-note { font-size: 11px; color: #94a3b8; }

/* ── Gmail-style recipient fields (To / Cc / Bcc) for reply + compose ── */
.inbox-compose-recips { margin-bottom: 8px; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.inbox-recip-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 1px solid #eef2f7; }
.inbox-recip-row:last-child { border-bottom: 0; }
.inbox-recip-row.hidden { display: none; }
.inbox-recip-row > label { flex: 0 0 48px; font-size: 12px; color: #64748b; font-weight: 600; }
.inbox-recip-row > input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 4px 2px; border: 0; outline: none; background: transparent; color: #1e293b; }
.inbox-recip-toggles { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.inbox-mini-link { appearance: none; border: 0; background: none; color: #64748b; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.inbox-mini-link:hover { color: #2563eb; text-decoration: underline; }
.inbox-mini-btn { appearance: none; border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; padding: 3px 9px; border-radius: 6px; }
.inbox-mini-btn:hover { background: #2563eb; color: #fff; border-color: #2563eb; }

/* Staged-attachment pills (files chosen but not yet sent) */
.inbox-att-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.inbox-att-pills:empty { display: none; }
.inbox-att-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 14px; font-size: 12px; max-width: 240px; }
.inbox-att-pill-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1e293b; }
.inbox-att-pill-size { color: #94a3b8; font-size: 11px; flex: 0 0 auto; }
.inbox-att-pill-x { appearance: none; border: 0; background: none; color: #64748b; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; flex: 0 0 auto; }
.inbox-att-pill-x:hover { color: #dc2626; }
.inbox-attach-btn { appearance: none; border: 1px solid #cbd5e1; background: #fff; color: #475569; font: inherit; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 8px; cursor: pointer; flex-shrink: 0; }
.inbox-attach-btn:hover { background: #f1f5f9; border-color: #94a3b8; }

/* Compose button in the header — green accent like Gmail */
.inbox-compose-new { border-color: #bbf7d0 !important; background: #f0fdf4 !important; color: #15803d !important; }
.inbox-compose-new:hover { background: #16a34a !important; color: #fff !important; border-color: #16a34a !important; }

/* Floating compose overlay (new email) — docks bottom-right like Gmail */
.inbox-compose-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(15,23,42,.42); display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 24px 24px 0; }
.inbox-compose-overlay.hidden { display: none; }
.inbox-compose-modal { width: min(560px, 94vw); max-height: 86vh; background: #fff; border-radius: 12px 12px 8px 8px; box-shadow: 0 20px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
.inbox-compose-titlebar { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: #1e293b; color: #fff; font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.inbox-compose-x { appearance: none; border: 0; background: none; color: #cbd5e1; font-size: 20px; line-height: 1; cursor: pointer; }
.inbox-compose-x:hover { color: #fff; }
.inbox-compose-fields { padding: 10px 14px 0; flex: 0 0 auto; }
.inbox-compose-modal .inbox-compose-body { margin: 10px 14px; width: auto; min-height: 200px; flex: 1 1 auto; }
.inbox-compose-modal .inbox-att-pills { padding: 0 14px; }
.inbox-compose-modal .inbox-compose-actions { padding: 0 14px 14px; flex: 0 0 auto; }
.inbox-compose-cancel { appearance: none; border: 0; background: none; color: #64748b; font: inherit; font-size: 13px; cursor: pointer; margin-left: auto; }
.inbox-compose-cancel:hover { color: #1e293b; text-decoration: underline; }

@media (max-width: 720px) { .inbox-conv-subject { font-size: 16px; } .inbox-msg { margin: 6px 8px; } .inbox-row { padding: 9px 12px; }
  .inbox-compose-overlay { padding: 0; align-items: stretch; justify-content: stretch; } .inbox-compose-modal { width: 100vw; max-height: 100vh; border-radius: 0; } }

/* ── Send / Terminate email flow hosted inside the Inbox tab ── */
/* Header launch buttons (left of "✓ Read all"). Send = indigo, Terminate = red. */
.inbox-email-act { appearance: none; border: 1px solid #c7d2fe; background: #eef2ff; color: #4338ca; font-size: 12px; font-weight: 700; height: 28px; padding: 0 11px; border-radius: 7px; cursor: pointer; line-height: 1; white-space: nowrap; }
.inbox-email-act:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.inbox-email-terminate { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.inbox-email-terminate:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
/* Floating, draggable overlay that hosts the shared drafting #columnsSection
   (street chooser + email preview + SEND/SKIP). Relocated to <body> at runtime
   so position:fixed is viewport-relative regardless of ancestor transforms.
   Drag by the titlebar; the ✕ closes it (returns the section home). */
.inbox-email-overlay { position: fixed; z-index: 10050; top: 60px; left: 60px; width: min(1000px, 94vw); height: min(680px, 88vh); display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 24px 64px rgba(15,23,42,0.38); border: 1px solid #cbd5e1; overflow: hidden; }
.inbox-email-overlay.hidden { display: none; }
.inbox-email-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px 9px 14px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; cursor: move; user-select: none; flex: 0 0 auto; }
.inbox-email-title { font-weight: 700; font-size: 14px; color: #1e293b; }
.inbox-email-close { appearance: none; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 14px; line-height: 1; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.inbox-email-close:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
/* The relocated section fills the overlay body below the titlebar. It keeps
   its own internal 2-column layout; we only set flex-item sizing here. */
#inboxEmailHost #columnsSection { flex: 1 1 auto; min-height: 0; min-width: 0; margin: 0; width: auto; max-width: none; }

/* ── F1: agent-chat streaming (live bubble) + citation chips ── */
.agent-live-msg .agent-directive-msg-bubble { opacity: 0.95; }
.agent-live-activity { font-size: 12px; color: var(--text-dim, #656d76); font-style: italic; margin-bottom: 4px; }
.agent-live-dots { display: inline-flex; gap: 4px; padding: 3px 0; }
.agent-live-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim, #9aa4af); animation: agentLiveDot 1.2s infinite ease-in-out; }
.agent-live-dots span:nth-child(2) { animation-delay: 0.2s; }
.agent-live-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes agentLiveDot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.agent-src-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.agent-src-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: 999px; background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff; text-decoration: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.agent-src-chip:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; }

/* ── F2: command palette / directive autocomplete (the "/" menu) ── */
.agent-cmd-palette { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 60; background: #fff; border: 1px solid #d7dde5; border-radius: 10px; box-shadow: 0 -6px 24px rgba(15,23,42,0.16); max-height: 280px; overflow-y: auto; padding: 4px; }
.agent-cmd-palette.hidden { display: none; }
.agent-cmd-item { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.agent-cmd-item:hover, .agent-cmd-item.sel { background: #eef2ff; }
.agent-cmd-label { font-size: 12.5px; font-weight: 700; color: #4338ca; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.agent-cmd-desc { font-size: 11.5px; color: #64748b; }

/* ── F5: live-reply Stop button + stall hint ── */
.agent-live-stall { font-size: 11.5px; color: #b45309; margin-top: 5px; }
.agent-live-stop { margin-top: 8px; appearance: none; border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 7px; cursor: pointer; }
.agent-live-stop:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.agent-live-stop:disabled { opacity: 0.6; cursor: default; }

/* ── F4: rich result cards in chat ── */
.agent-card { margin-top: 8px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; overflow: hidden; }
.agent-card-title { font-size: 13px; font-weight: 800; color: #0f172a; padding: 9px 12px 0; }
.agent-card-subtitle { font-size: 11.5px; color: #64748b; padding: 2px 12px 0; }
.agent-card-rows { display: flex; flex-direction: column; padding: 8px 12px 4px; gap: 1px; }
.agent-card-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid #eef2f7; font-size: 12.5px; }
.agent-card-row:last-child { border-bottom: none; }
.agent-card-label { color: #64748b; font-weight: 600; flex: 0 0 auto; }
.agent-card-value { color: #0f172a; font-weight: 700; text-align: right; }
.agent-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 11px; }
.agent-card-action { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; text-decoration: none; padding: 5px 11px; border-radius: 7px; background: #4f46e5; color: #fff; border: 1px solid #4f46e5; }
.agent-card-action:hover { background: #4338ca; border-color: #4338ca; }

/* ── Hub Research tab (Odysseus-port Deep Research) ── */
.research-wrap { display: flex; height: 100%; min-height: 0; }
.research-list-col { flex: 0 0 360px; display: flex; flex-direction: column; border-right: 1px solid #e8edf3; min-height: 0; }
.research-compose { padding: 12px; border-bottom: 1px solid #e8edf3; background: #fafbfc; }
.research-compose-title { font-weight: 700; font-size: 14px; color: #1e293b; margin-bottom: 8px; }
.research-topic { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid #e2e8f0; border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 13px; line-height: 1.4; color: #1e293b; }
.research-topic:focus { outline: none; border-color: #4f46e5; }
.research-compose-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.research-depth { display: inline-flex; border: 1px solid #e2e8f0; border-radius: 7px; overflow: hidden; }
.research-depth-btn { appearance: none; border: 0; background: #fff; color: #64748b; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; cursor: pointer; }
.research-depth-btn + .research-depth-btn { border-left: 1px solid #e2e8f0; }
.research-depth-btn.active { background: #4f46e5; color: #fff; }
.research-go-btn { appearance: none; border: 0; background: #4f46e5; color: #fff; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.research-go-btn:hover { background: #4338ca; }
.research-go-btn:disabled { opacity: .55; cursor: default; }
.research-list-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid #e8edf3; }
.research-list-title { font-weight: 700; font-size: 13px; color: #334155; }
.research-count { font-weight: 600; font-size: 12px; color: #4f46e5; }
.research-refresh-btn { appearance: none; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 15px; width: 28px; height: 28px; border-radius: 7px; cursor: pointer; line-height: 1; }
.research-refresh-btn:hover { background: #eef2ff; color: #4f46e5; }
.research-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.research-empty, .research-read-empty { padding: 24px 16px; color: #94a3b8; font-size: 13px; text-align: center; }
.research-item { padding: 10px 12px; border-bottom: 1px solid #eef2f7; cursor: pointer; transition: background .1s; }
.research-item:hover { background: #eef2ff; }
.research-item.open { background: #e0e7ff; }
.research-item-topic { font-size: 13px; font-weight: 600; color: #1e293b; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.research-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.research-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 7px; border-radius: 10px; }
.research-badge.running { background: #fef3c7; color: #92600a; }
.research-badge.done { background: #dcfce7; color: #15803d; }
.research-badge.error { background: #fee2e2; color: #b91c1c; }
.research-item-when { font-size: 11px; color: #94a3b8; margin-left: auto; }
.research-read-col { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 0; }
.research-read-head { padding: 16px 22px 10px; border-bottom: 1px solid #eef2f7; position: sticky; top: 0; background: #fff; z-index: 1; }
.research-read-topic { font-size: 16px; font-weight: 700; color: #0f172a; line-height: 1.35; }
.research-read-sub { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: #64748b; }
.research-read-actions { margin-left: auto; display: flex; gap: 8px; }
.research-act { appearance: none; border: 1px solid #e2e8f0; background: #fff; color: #475569; font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.research-act:hover { background: #f1f5f9; }
.research-progress { padding: 14px 22px; }
.research-progress-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #475569; padding: 3px 0; }
.research-progress-row .ico { width: 18px; text-align: center; }
.research-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid #c7d2fe; border-top-color: #4f46e5; border-radius: 50%; animation: research-spin .8s linear infinite; vertical-align: middle; }
@keyframes research-spin { to { transform: rotate(360deg); } }
.research-report { padding: 14px 24px 28px; font-size: 14px; line-height: 1.6; color: #1e293b; word-wrap: break-word; }
.research-report h1 { font-size: 20px; margin: 18px 0 8px; }
.research-report h2 { font-size: 17px; margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #eef2f7; }
.research-report h3 { font-size: 15px; margin: 14px 0 6px; }
.research-report p { margin: 8px 0; }
.research-report ul, .research-report ol { margin: 8px 0; padding-left: 22px; }
.research-report li { margin: 3px 0; }
.research-report a { color: #2563eb; text-decoration: none; }
.research-report a:hover { text-decoration: underline; }
.research-report code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.research-report strong { font-weight: 700; color: #0f172a; }
.research-error { margin: 16px 22px; padding: 12px 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #b91c1c; font-size: 13px; }
@media (max-width: 720px) { .research-wrap { flex-direction: column; } .research-list-col { flex-basis: auto; max-height: 50%; } .research-read-col { border-top: 1px solid #e8edf3; } }

.agent-blast-edit-grid input:focus, .agent-blast-edit-number:focus { outline: none; border-color: #4f46e5; }
.agent-blast-edit-toggles { display: flex; flex-direction: column; gap: 5px; }
.agent-blast-edit-check { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #334155; cursor: pointer; }
.agent-blast-edit-actions { display: flex; gap: 8px; margin-top: 2px; }
.agent-blast-edit-save { appearance: none; -webkit-appearance: none; border: 0; background: #4f46e5; color: #fff; font: inherit; font-size: 12px; font-weight: 700; padding: 7px 16px; border-radius: 7px; cursor: pointer; }
.agent-blast-edit-save:hover { background: #4338ca; }
.agent-blast-edit-cancel { appearance: none; -webkit-appearance: none; border: 1px solid #e2e8f0; background: #fff; color: #64748b; font: inherit; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 7px; cursor: pointer; }
.agent-blast-edit-cancel:hover { background: #f1f5f9; color: #1e293b; }
.agent-blasts-toggle { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; }
.agent-blasts-toggle:hover .agent-blasts-chevron { color: #1e293b; }
.agent-blasts-chevron { display: inline-block; margin-right: 6px; font-size: 11px; color: #64748b; transition: transform 0.15s ease; transform: rotate(0deg); }
.agent-blasts.collapsed .agent-blasts-chevron { transform: rotate(-90deg); }
.agent-blasts.collapsed .agent-blasts-list { display: none; }

/* "I signed it" confirm button on a buyer-signature-incomplete banner. Makes
   the warn banner a flex row (text + button) and styles the button green. */
.agent-docusign-signwarn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agent-docusign-signwarn-text { flex: 1 1 auto; min-width: 0; }
.agent-docusign-btn-signed {
  flex-shrink: 0;
  appearance: none; -webkit-appearance: none;
  border: 1px solid #86efac; background: #fff; color: #16a34a;
  font: inherit; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 5px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.agent-docusign-btn-signed:hover { background: #dcfce7; color: #15803d; border-color: #4ade80; }

.agent-docusign-btn-text {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #f59e0b;
  background: #f59e0b;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s, border-color 0.15s;
}
.agent-docusign-btn-text:hover {
  background: #d97706;
  border-color: #d97706;
}

/* Completions / Queued / Tasks — simple, hover-able rows */
.agent-completions-list,
.agent-queued-list,
.agent-tasks-list { display: flex; flex-direction: column; gap: 6px; }
.agent-completion,
.agent-queued-item,
.agent-task {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  transition: border-color 120ms, background 120ms;
}
.agent-completion:hover,
.agent-queued-item:hover,
.agent-task:hover { background: #fafbfc; border-color: #e2e8f0; }
.agent-completion-name,
.agent-queued-name { font-weight: 600; color: #0f172a; }
.agent-completion-meta,
.agent-queued-meta,
.agent-task-time {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.agent-completion-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #64748b;
  word-break: break-all;
}
/* Two-state status badge next to the list name:
   active (⌛ gray) — currently being skiptraced, awaiting confirmation
                     it finished
   done   (✓ green) — skiptrace completed, CSV exported
   Tooltip on hover via the title attribute on the span. */
.agent-completion-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
}
.agent-completion-status-active {
  background: #e2e8f0;
  color: #475569;
}
.agent-completion-status-done {
  background: #dcfce7;
  color: #166534;
}

/* Global Propstream slot indicator. Three states keyed off [data-state]:
     idle — green dot, "Skiptrace available" (anyone can claim)
     mine — blue dot,  "You are skiptracing ..." (this user owns the slot)
     busy — amber dot, "<Other> is skiptracing ..." (another agent has it)
   Sits between the section title and the list, so it's always visible
   whether or not THIS agent has any items in their list. */
.agent-propstream-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
}
.agent-propstream-slot-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.agent-propstream-slot[data-state="idle"] {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}
.agent-propstream-slot[data-state="idle"] .agent-propstream-slot-dot {
  background: #22c55e;
}
.agent-propstream-slot[data-state="mine"] {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}
.agent-propstream-slot[data-state="mine"] .agent-propstream-slot-dot {
  background: #3b82f6;
  animation: agentPropstreamSlotPulse 1.6s ease-in-out infinite;
}
.agent-propstream-slot[data-state="busy"] {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}
.agent-propstream-slot[data-state="busy"] .agent-propstream-slot-dot {
  background: #f59e0b;
  animation: agentPropstreamSlotPulse 1.6s ease-in-out infinite;
}
@keyframes agentPropstreamSlotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Skiptrace queue — sits directly under the slot indicator. Visible to
   all agents (FIFO across the team). Each row identifies the queueing
   agent via a color-tinted name pill (uses the per-agent palette from
   the [data-agent] CSS variables). The position number ("#1", "#2") is
   first in line. Only renders when the queue is non-empty (the .hidden
   class is toggled in renderAgentPropstreamSlot). */
.agent-propstream-queue {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: -4px;  /* tighten spacing with the slot indicator */
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}
.agent-propstream-queue.hidden { display: none; }
.agent-propstream-queue-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 2px;
}
.agent-propstream-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #334155;
}
.agent-propstream-queue-item[data-mine="1"] {
  font-weight: 600;
}
.agent-propstream-queue-pos {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #94a3b8;
  min-width: 18px;
}
.agent-propstream-queue-owner {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  /* default fallback — overridden per agent via the [data-agent] palette */
  background: #e0e7ff;
  color: #3730a3;
}
.agent-propstream-queue-owner[data-agent] {
  background: var(--agent-bg);
  color: var(--agent-text);
}
.agent-propstream-queue-area {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-propstream-queue-meta {
  font-size: 10px;
  color: #94a3b8;
  flex-shrink: 0;
}
/* ✕ delete — shown only on the user's own queued rows. Low-key by default
   so it doesn't clutter the compact queue; reddens on hover. */
.agent-propstream-queue-del {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, border-color 120ms, color 120ms, transform 120ms;
}
.agent-propstream-queue-del:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.agent-propstream-queue-del:active { transform: scale(0.9); }

.agent-task-summary { word-break: break-word; line-height: 1.5; color: #334155; }

/* Queued list ✓ / ✗ action buttons. Continue (✓) is solid green
   primary; Cancel (✗) is soft red secondary. Item layout becomes
   flex-row to put the buttons on the right edge. */
.agent-queued-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.agent-queued-content { flex: 1; min-width: 0; }
.agent-queued-actions { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.agent-queued-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, border-color 120ms, color 120ms, transform 120ms;
}
.agent-queued-btn:active { transform: scale(0.92); }
.agent-queued-btn-start {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.agent-queued-btn-start:hover { background: #059669; color: #fff; border-color: #059669; }
.agent-queued-btn-cancel {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.agent-queued-btn-cancel:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* Collapsible sections (Recent Activity). Title is a button that
   toggles the .collapsed class on the parent. Chevron rotates. */
.agent-collapsible-title {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 12px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #0f172a;
  transition: color 120ms;
}
.agent-collapsible-title:hover { color: #2563eb; }
.agent-collapsible-chevron {
  display: inline-block;
  font-size: 11px;
  color: #94a3b8;
  transition: transform 200ms;
  transform: rotate(0deg);
}
.agent-collapsible.collapsed .agent-collapsible-chevron { transform: rotate(-90deg); }
.agent-collapsible.collapsed .agent-tasks-list { display: none; }
.agent-collapsible.collapsed .agent-collapsible-title { margin-bottom: 0; }

/* Footer status line for fetch errors */
.agent-status-line {
  font-size: 12px;
  color: #b91c1c;
  text-align: center;
  margin-top: 4px;
  min-height: 16px;
}

/* Two-column body layout. LEFT (45%): Inbox, Skiptraced/Saved pair,
   PSA form, Activity (collapsed). RIGHT (55%): the directive chat,
   filling the full column height. Each column scrolls internally
   instead of the whole page scrolling. */
.agent-tab-body {
  display: flex;
  gap: 14px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.agent-tab-left {
  flex: 1 1 58%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  /* Reserve space for the scrollbar so content doesn't shift on appearance. */
  scrollbar-gutter: stable;
  padding-right: 4px;
}
.agent-tab-left::-webkit-scrollbar { width: 8px; }
.agent-tab-left::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.agent-tab-left::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.agent-tab-right {
  flex: 1 1 42%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Right column hosts the directive chat + DocuSigns + Skiptraced Lists.
     Chat is flex:1 (fills remaining); the other two are capped (see below)
     so they never crowd the chat's input form off-screen. Safety net:
     overflow-y:auto so on very short viewports (e.g. Mason has 26+
     DocuSigns) the whole column can scroll instead of clipping the form. */
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
}

/* ─── Inbox-first redesign (2026-06-02): command bar + tidy rail ─────────
   The directive chat moved out of the right column into a slim full-width
   bar at the bottom of the tab. The inbox now dominates the left (64%); the
   panels sit in a tidy 36% rail; "tell me what to do" is always reachable
   below without scrolling. */

/* Inbox fills the tall left column so the live conversation is the star. */
.agent-tab-left .agent-inbox {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.agent-tab-left .agent-inbox .agent-inbox-cards { flex: 1 1 auto; }

/* Header panel menu — "everything else" opens from compact trigger buttons in
   the top-right of the header (next to the agent name) as floating overlays. */
.agent-tab-root { position: relative; }
.agent-menu { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.agent-menu-trigger {
  appearance: none; -webkit-appearance: none;
  border: 1px solid #e2e8f0; background: #fff; color: #475569;
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .12s, color .12s, border-color .12s;
}
.agent-menu-trigger:hover { background: #f1f5f9; color: #1e293b; border-color: #cbd5e1; }
.agent-menu-trigger.active { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }

/* Panel overlay — a floating dropdown anchored top-right, below the header
   menu. Hidden until a trigger is clicked; shows ONE panel at a time. Being
   absolutely positioned, it overlays the inbox/chat instead of pushing the
   layout down. */
.agent-panels-overlay {
  position: absolute;
  top: 54px;
  right: 4px;
  z-index: 200;
  width: 460px;
  max-width: calc(100% - 8px);
  max-height: 74vh;
  overflow-y: auto;
  display: none;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: 6px;
}
.agent-panels-overlay.open { display: block; }
/* Show only the active panel; the panel is flush (the overlay is the card). */
.agent-panels-overlay .agent-section { display: none; border: none; box-shadow: none; margin: 0; padding: 12px 14px; }
.agent-panels-overlay.show-psa .agent-psa,
.agent-panels-overlay.show-docusigns .agent-docusigns,
.agent-panels-overlay.show-drips .agent-drips,
.agent-panels-overlay.show-blasts .agent-blasts,
.agent-panels-overlay.show-completions .agent-completions { display: block; }
/* Chat on the right: keep the input comfortably big + friendly. */
.agent-chat-col .agent-directive-input { font-size: 15px; }

/* Chat card — white background + clear border + shadow so the column reads as
   a distinct panel (matches .agent-section). Without this the chat floated on
   the tab background with no visible boundary. */
.agent-chat-col {
  background: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
}

/* Inside the overlay each panel shows its full content — hide the (now
   redundant) inner collapse chevrons and disable the inner title toggles so a
   click can't collapse a panel. The interactive bits (forms, Approve/Cancel,
   mode toggle) live in the panel bodies, so they stay fully clickable. */
.agent-panels-overlay [class*="-chevron"] { display: none; }
.agent-panels-overlay .agent-section-title { pointer-events: none; cursor: default; }

/* ─── Inbox expand (multiple take-overs at a glance) ────────────────────
   The Expand button blows the Inbox up to fill the whole tab and tiles the
   take-over cards in a responsive grid so every conversation is visible at
   once (vs. scrolling one narrow column). Chat + bottom panels hide while
   expanded; each card keeps its own draft bar so you can still reply. */
.agent-inbox-expand {
  margin-left: auto;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.agent-inbox-expand:hover { background: #f1f5f9; color: #1e293b; border-color: #cbd5e1; }
.agent-tab-root.inbox-expanded .agent-inbox-expand {
  background: #eef2ff;
  color: #4f46e5;
  border-color: #c7d2fe;
}

/* Expanded state: inbox takes the full tab, cards tile in a grid. */
.agent-tab-root.inbox-expanded .agent-tab-right { display: none; }
.agent-tab-root.inbox-expanded .agent-tab-left { flex: 1 1 100%; }
.agent-tab-root.inbox-expanded .agent-inbox-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  align-content: start;
  gap: 14px;
  max-height: none;   /* the left column scrolls; let the grid use full height */
}

/* Moderate cleanup: hide the parenthetical jargon hints (the plain-English
   panel title is enough), and make titles a touch bigger + clearer. */
.agent-tab-root .agent-section-hint { display: none; }
.agent-tab-root .agent-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.01em;
}

/* In the right column, keep Skiptraced Lists compact so it doesn't
   shrink the directive chat below usable height. The list itself caps
   at 4 entries via JS, so this is just a safety bound. */
.agent-tab-right .agent-completions,
.agent-tab-right .agent-docusigns {
  flex: 0 0 auto;
  /* Tighter cap than 280px because Mason can have 26+ DocuSigns and the
     combined height of [PSA + chat + docusigns + completions] needs to
     fit in a typical laptop viewport (~700-800px) without pushing the
     chat's input form below the fold. The list inside scrolls. */
  max-height: 220px;
  overflow-y: auto;
}
/* Send DocuSign Contract (PSA) form pinned to the top of the right
   column. Take its natural height, don't grow/shrink — chat below has
   predictable remaining space. Default-collapsed so it only takes ~36px
   (title bar) when not in use; the chat gets ~200px back. */
.agent-tab-right .agent-psa {
  flex: 0 0 auto;
}
/* Collapsible PSA — title is a click target. When .collapsed, the form
   and result panes are hidden; only the title bar shows. The chevron
   rotates to indicate state. */
.agent-psa-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.agent-psa-toggle:hover .agent-psa-chevron {
  color: #1e293b;
}
.agent-psa-chevron {
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
  color: #64748b;
  transition: transform 0.15s ease;
  transform: rotate(0deg);
}
.agent-psa.collapsed .agent-psa-chevron {
  transform: rotate(-90deg);
}
.agent-psa.collapsed .agent-psa-form,
.agent-psa.collapsed .agent-psa-result {
  display: none;
}

/* Collapsible DocuSigns + Skiptraced Lists. Same chevron-rotate +
   click-title pattern as PSA. Default state is EXPANDED (the lists are
   useful at a glance, unlike the PSA form which is bulky and rarely
   used); collapse with the title-bar click if you want more chat space. */
.agent-docusigns-toggle,
.agent-completions-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.agent-docusigns-toggle:hover .agent-docusigns-chevron,
.agent-completions-toggle:hover .agent-completions-chevron {
  color: #1e293b;
}
.agent-docusigns-chevron,
.agent-completions-chevron {
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
  color: #64748b;
  transition: transform 0.15s ease;
  transform: rotate(0deg);
}
.agent-docusigns.collapsed .agent-docusigns-chevron,
.agent-completions.collapsed .agent-completions-chevron {
  transform: rotate(-90deg);
}
.agent-docusigns.collapsed .agent-docusigns-list,
.agent-completions.collapsed .agent-propstream-slot,
.agent-completions.collapsed .agent-completions-list {
  display: none;
}
/* When collapsed, the section reverts to just its title bar — drop the
   max-height/overflow constraints so we don't end up with an empty
   200px scroll well below the title. */
.agent-tab-right .agent-docusigns.collapsed,
.agent-tab-right .agent-completions.collapsed {
  max-height: none;
  overflow: visible;
}
/* DocuSigns lives between the directive chat and Skiptraced Lists in the
   right column. Without the cap above, a long list of awaiting envelopes
   would expand naturally and push the chat's input form below the visible
   area (the form is `flex: 0 0 auto` at the bottom of `.agent-directive-chat`,
   but the chat container itself loses vertical space when siblings grow).
   The cap keeps the form on-screen; the inner list scrolls instead. */

/* Side-by-side Skiptraced / Saved Lists. Lives under the Inbox in the
   left column. Each card is ~50% width, capped at 4 entries by JS. */
.agent-list-pair {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}
.agent-list-pair > .agent-section {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 14px;
}
.agent-list-pair .agent-section-title { font-size: 13px; margin-bottom: 8px; }
.agent-list-pair .agent-section-hint  { font-size: 10px; }
.agent-list-pair .agent-completion,
.agent-list-pair .agent-queued-item {
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 6px;
}
.agent-list-pair .agent-completion-name,
.agent-list-pair .agent-queued-name { font-size: 12px; }
.agent-list-pair .agent-completion-meta,
.agent-list-pair .agent-queued-meta { font-size: 10px; }
.agent-list-pair .agent-completion-path {
  /* Show the path but truncate so cards don't grow tall. */
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-list-pair .agent-queued-btn { width: 26px; height: 26px; font-size: 13px; border-radius: 6px; }
.agent-list-pair .agent-queued-actions { gap: 4px; }
.agent-list-pair .agent-empty-state { padding: 8px 0; font-size: 12px; }

@media (max-width: 1000px) {
  .agent-tab-body { flex-direction: column; overflow: auto; }
  .agent-tab-left { overflow: visible; max-height: none; }
  .agent-tab-right { flex: 0 0 auto; min-height: 480px; }
}
@media (max-width: 560px) {
  .agent-list-pair { flex-direction: column; }
}

/* Directive chat — sticky-bottom input, scrollable thread above it.
   Bubbles: user (right, blue), system (left, gray), error (left, red). */
.agent-directive-chat {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Hard floor of 280px so the input bar is ALWAYS visible regardless of
     how much vertical space the sibling sections (PSA, DocuSigns,
     Skiptraced Lists) eat. When .agent-tab-right has overflow-y:auto and
     its content exceeds available height, `flex: 1` stops distributing
     space — every child takes its natural size and the column scrolls.
     Without a min-height, the chat would collapse to ~100px (title +
     empty-state placeholder) and the form below it would render below
     the column's scrollable area, making chat unreachable. 280px gives:
     ~24 (title) + ~28 (padding) + ~12 (gap) + ~50 (form) = ~114px
     "chrome" + ~166px usable thread height. */
  min-height: 280px;
  padding: 14px 16px;
}
.agent-directive-thread {
  flex: 1 1 auto;
  /* Lower min-height (was 220px) so the thread can compress when the
     right column is short on space. Without this, the thread refused to
     shrink and the input form got pushed below the visible area on
     viewports where docusigns + completions ate too much vertical room
     (typical for Mason with 26+ DocuSigns). The `min-height: 0` on the
     parent .agent-directive-chat lets this floor actually take effect. */
  min-height: 80px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 4px 4px 0;
  margin-bottom: 12px;
  scroll-behavior: smooth;
}
.agent-directive-thread::-webkit-scrollbar { width: 8px; }
.agent-directive-thread::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.agent-directive-thread::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.agent-directive-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 90%;
}
.agent-directive-msg-user   { align-self: flex-end;   align-items: flex-end; }
.agent-directive-msg-system { align-self: flex-start; align-items: flex-start; }
.agent-directive-msg-error  { align-self: flex-start; align-items: flex-start; }
.agent-directive-msg-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}
.agent-directive-msg-user .agent-directive-msg-bubble {
  background: #2563eb;
  color: #fff;
  border-bottom-right-radius: 5px;
}
.agent-directive-msg-system .agent-directive-msg-bubble {
  background: #f1f5f9;
  color: #0f172a;
  border-bottom-left-radius: 5px;
}
.agent-directive-msg-error .agent-directive-msg-bubble {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-bottom-left-radius: 5px;
}
.agent-directive-msg-time {
  font-size: 10px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
}

/* Help card — rendered by the /commands slash-command. Compact,
   information-dense layout: small fonts, tight gaps between sections
   and rows. Each command is one row: [syntax] description. Examples
   sit inline after the description, not on their own line. */
.agent-directive-msg-help {
  align-self: stretch;
  align-items: stretch;
}
.agent-directive-msg-help .agent-directive-msg-bubble {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: normal;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.06);
}
.agent-help-card { font-size: 12.5px; line-height: 1.4; }
.agent-help-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.agent-help-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 1px;
  margin-bottom: 8px;
}
.agent-help-section {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
}
.agent-help-section:first-of-type {
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
}
.agent-help-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}
.agent-help-cmd {
  margin-bottom: 3px;
  /* Each row: [syntax pill] [description text + inline examples].
     Flex with gap so the pill aligns to the left of the description.
     align-items:baseline keeps the pill text and prose aligned visually. */
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.agent-help-cmd:last-child { margin-bottom: 0; }
.agent-help-syntax {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.agent-help-desc {
  font-size: 12px;
  color: #334155;
  line-height: 1.4;
  flex: 1;
  min-width: 200px;
}
.agent-help-desc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: #f1f5f9;
  padding: 0 4px;
  border-radius: 3px;
  color: #0f172a;
}
.agent-help-examples {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.agent-help-ex {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
  font-weight: 500;
  line-height: 1.4;
}
.agent-help-ex:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.agent-help-tip {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  padding: 4px 8px;
  background: #fffbeb;
  border-left: 3px solid #fcd34d;
  border-radius: 0 4px 4px 0;
}

/* Sticky-bottom input + send button (paper-plane icon). */
.agent-directive-form {
  display: flex;
  gap: 0;
  align-items: stretch;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 4px 4px 6px;
  transition: border-color 120ms, box-shadow 120ms;
  flex: 0 0 auto;
}
.agent-directive-form:focus-within {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  background: #fff;
}
.agent-directive-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  border: none;
  background: transparent;
  color: #0f172a;
  outline: none;
}
.agent-directive-input::placeholder { color: #94a3b8; }
.agent-directive-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  font-family: inherit;
  border: none;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 120ms, transform 120ms;
}
.agent-directive-btn:hover:not(:disabled) { background: #1d4ed8; }
.agent-directive-btn:active:not(:disabled) { transform: scale(0.92); }
.agent-directive-btn:disabled { opacity: 0.55; cursor: default; }
.agent-directive-btn svg { display: block; transform: translateX(-1px); }

/* ── F6: file attach (📎 button + staged chip + drop highlight) ── */
.agent-attach-btn {
  width: 34px; height: 36px; flex: 0 0 34px;
  border: none; background: transparent; color: #64748b; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 50%; transition: background 120ms, color 120ms;
}
.agent-attach-btn:hover { background: #eef2f7; color: #2563eb; }
.agent-attach-btn:active { transform: scale(0.92); }
.agent-attach-btn svg { display: block; }
.agent-attach-chip {
  display: flex; align-items: center; gap: 8px;
  margin: 0 2px 6px; padding: 5px 6px 5px 11px;
  background: #eef2ff; border: 1px solid #e0e7ff; border-radius: 999px;
  font-size: 12px; color: #4338ca; flex: 0 0 auto; max-width: 100%;
}
.agent-attach-chip.hidden { display: none; }
.agent-attach-chip-label { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-attach-chip-note { font-weight: 600; color: #6366f1; }
.agent-attach-chip-x {
  margin-left: auto; flex: 0 0 auto; appearance: none; border: none;
  background: transparent; color: #6366f1; cursor: pointer; font-size: 13px;
  line-height: 1; padding: 3px 6px; border-radius: 50%;
}
.agent-attach-chip-x:hover { background: #c7d2fe; color: #312e81; }
.agent-directive-thread.agent-drop-active {
  outline: 2px dashed #93c5fd; outline-offset: -6px; background: #f0f7ff;
}

/* V2: Send DocuSign Contract (PSA) form. Two rows of clean inputs +
   prominent Draft & Send button. Same focus-ring polish as directive. */
.agent-psa-form { display: flex; flex-direction: column; gap: 10px; }
.agent-psa-row  { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.agent-psa-input {
  flex: 1;
  min-width: 110px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.agent-psa-input::placeholder { color: #94a3b8; }
.agent-psa-input:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.agent-psa-price   { flex: 0 0 120px; }
.agent-psa-address { flex: 2 1 240px; }
.agent-psa-type    {
  flex: 0 0 140px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 5 6 8 9 5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.agent-psa-btn {
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  transition: background 120ms, transform 120ms;
  flex: 0 0 auto;
}
.agent-psa-btn:hover:not(:disabled) { background: #1d4ed8; }
.agent-psa-btn:active:not(:disabled) { transform: scale(0.98); }
.agent-psa-btn:disabled { opacity: 0.55; cursor: default; }
.agent-psa-result {
  margin-top: 4px;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #334155;
  word-break: break-word;
  line-height: 1.45;
}
.agent-psa-result.agent-directive-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.agent-psa-result.agent-directive-ok    { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

/* Owner section labels (Owner 1 required, Owner 2 optional) */
.agent-psa-owner-label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin: 2px 2px -2px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.agent-psa-owner-hint {
  font-weight: 400;
  font-size: 11px;
  color: #94a3b8;
}
.agent-psa-owner2 { display: flex; flex-direction: column; gap: 8px; }
.agent-psa-owner2.hidden { display: none; }
.agent-psa-owner2-toggle-wrap { display: flex; }
.agent-psa-owner2-toggle {
  background: transparent;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: #64748b;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.agent-psa-owner2-toggle:hover { background: #f8fafc; border-color: #94a3b8; color: #0f172a; }
.agent-psa-owner2-toggle[aria-expanded="true"] {
  background: #f1f5f9;
  border-color: #cbd5e1;
  border-style: solid;
  color: #475569;
}

/* ═════════════════════════════════════════════════════════════════════
   HUB / TASKS — schedule maker
   ═════════════════════════════════════════════════════════════════════
   Lives inside the chat panel as the "Tasks" sub-tab. Layout matches the
   /hub-preview.html mockup the user signed off on: a left palette
   (states → cities + Calling actions + Actions), the 7-day Sun→Sat grid
   on the right, a top toolbar with the week navigator + "I'm doing now"
   pill, and an Active-now strip that updates live via WebSocket. The
   "View someone else's schedule" picker sits at the bottom.
*/
.hub-tasks-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #fff;
}
.hub-tasks-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

/* Toolbar — week navigator + "I'm doing now" pill */
.hub-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid #eef0f3;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.hub-week-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.hub-week-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #475569;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.15s, color 0.15s;
}
.hub-week-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.hub-week-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
.hub-week-btn[disabled]:hover { background: transparent; color: #475569; }
.hub-week-label {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  padding: 0 10px;
  min-width: 175px;
  text-align: center;
  color: #0f172a;
}

/* "I'm doing now" pill (and dropdown options) */
.hub-doing-now {
  margin-left: auto;
  position: relative;
}
.hub-doing-now-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #15803d;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(34, 197, 94, 0.08), 0 4px 12px rgba(34, 197, 94, 0.10);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s;
}
.hub-doing-now-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.10), 0 6px 16px rgba(34, 197, 94, 0.14);
}
.hub-doing-now-btn.empty {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #64748b;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.hub-doing-now-btn.empty:hover {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.05);
}
.hub-doing-now-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  animation: hubpulse 1.6s infinite;
}
.hub-doing-now-btn.empty .hub-doing-now-dot {
  background: #cbd5e1;
  animation: none;
}
@keyframes hubpulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.hub-doing-now-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.10);
  min-width: 240px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 30;
  padding: 6px;
}
.hub-doing-now-menu[hidden] { display: none; }
.hub-doing-now-menu .menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  color: #1e293b;
  font-weight: 500;
  transition: background-color 0.1s;
}
.hub-doing-now-menu .menu-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.hub-doing-now-menu .menu-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 8px 12px 4px;
}
.hub-doing-now-menu .menu-item.clear {
  color: #94a3b8;
  border-top: 1px solid #f1f5f9;
  margin-top: 6px;
  padding-top: 10px;
}
.hub-doing-now-menu .menu-item.clear:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Active-now strip — shows what other team members are doing right now */
.hub-active-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid #eef0f3;
  background: #f8fafc;
  font-size: 12px;
  color: #64748b;
  flex-wrap: wrap;
}
.hub-active-strip-label {
  font-weight: 700;
  color: #0f172a;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hub-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  color: #475569;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.12s;
}
.hub-active-pill:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.05); }
.hub-active-pill strong {
  color: #0f172a;
  font-weight: 600;
}
.hub-active-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}
.hub-active-pill.mobile {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}
.hub-active-pill.mobile .dot {
  background: #94a3b8;
  box-shadow: none;
}

/* Body — palette + grid + goal-setting column. The right column has a
   fixed width so the schedule grid has predictable space, while the
   palette also stays at its usual width. The grid in the middle absorbs
   any extra horizontal space. */
.hub-tasks-body {
  display: grid;
  grid-template-columns: 200px 1fr 220px;
  min-height: 0;
  flex: 1;
}
.hub-palette {
  border-right: 1px solid #eef0f3;
  padding: 16px 14px;
  background: #f8fafc;
  overflow-y: auto;
}

/* Click | Drag mode toggle at the top of the palette — pill switch */
.hub-mode-toggle {
  display: flex;
  background: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.hub-mode-btn {
  flex: 1;
  padding: 6px 0;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s, box-shadow 0.18s;
}
.hub-mode-btn:hover { color: #475569; }
.hub-mode-btn.active {
  background: #22c55e;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(34, 197, 94, 0.20), 0 2px 6px rgba(34, 197, 94, 0.18);
}
body.section-houses .hub-mode-btn.active {
  background: #ef4444;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.20), 0 2px 6px rgba(239, 68, 68, 0.18);
}
.hub-mode-hint {
  font-size: 10.5px;
  color: #94a3b8;
  text-align: center;
  margin-bottom: 14px;
  padding: 0 4px;
  line-height: 1.5;
}
.hub-mode-hint strong { color: #15803d; font-weight: 700; }
body.section-houses .hub-mode-hint strong { color: #b91c1c; }

/* Date picker — opens the OS calendar widget. Tighter than the default
   form-element padding so the palette stays visually compact (the
   Goal Setting column on the right needs the vertical space). */
.hub-date-picker {
  display: block;
  width: 100%;
  margin-bottom: 6px;
  padding: 3px 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  box-sizing: border-box;
  height: 24px;
  line-height: 1;
}
.hub-date-picker:focus {
  outline: none;
  border-color: #34a853;
  box-shadow: 0 0 0 2px rgba(52, 168, 83, 0.12);
}
body.section-houses .hub-date-picker:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.12);
}
.hub-date-picker::-webkit-calendar-picker-indicator { cursor: pointer; padding: 0; }
.hub-palette-section { margin-bottom: 20px; }
.hub-palette-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 10px;
}
.hub-palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  cursor: grab;
  margin-bottom: 6px;
  user-select: none;
  /* The global `* { user-select: none }` interferes with HTML5 DnD in
     some Chromium/Safari versions — the dragstart fires but the browser
     treats it as text selection. -webkit-user-drag tells the browser
     explicitly: this element is the drag source. */
  -webkit-user-drag: element;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.hub-palette-item:hover {
  background: #ecfdf5;
  border-color: #86efac;
  transform: translateY(-1px);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 8px rgba(15, 23, 42, 0.04);
}
.hub-palette-item:active { cursor: grabbing; transform: translateY(0); }
/* City label takes up remaining space; delete × sits on the right and only
   reveals on hover to keep the palette visually quiet at rest. */
.hub-palette-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-palette-item-del {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  padding: 0; margin-left: 4px;
  border: none;
  background: transparent;
  color: #999;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.hub-palette-item:hover .hub-palette-item-del { opacity: 1; }
.hub-palette-item-del:hover { background: #e74c3c; color: #fff; }
/* In Click mode the palette items act like buttons — pointer cursor
   instead of grab. The .hub-palette element gets a `mode-click` class
   from JS based on hubState.inputMode. */
.hub-palette.mode-click .hub-palette-item { cursor: pointer; }
/* Pills already in cells should also be marked non-draggable so the
   browser doesn't try to drag them (they're not part of the palette). */
.hub-cell .pill { -webkit-user-drag: none; }
.hub-palette-item.action-cold { background: #fff4e5; border-color: #f5b878; color: #8a4a00; }
.hub-palette-item.action-cold:hover { background: #ffe7c2; }
.hub-palette-item.action-ppl { background: #e3f2fd; border-color: #6db3eb; color: #0a4b87; }
.hub-palette-item.action-ppl:hover { background: #c5dff4; }
.hub-palette-item.action-leads { background: #f3e5f5; border-color: #c69cd0; color: #5a2c7d; }
.hub-palette-item.action-leads:hover { background: #e7c8ec; }
/* Lead Dispo — teal palette so it sits visually adjacent to Lead
   Management without colliding with its purple. Same shape + states
   as the other action chips. */
.hub-palette-item.action-dispo { background: #d6f3ee; border-color: #6cc8b8; color: #064e42; }
.hub-palette-item.action-dispo:hover { background: #b9ebe1; }
.hub-palette-item.action-dev { background: #2c2c2c; border-color: #4a4a4a; color: #fff; }
.hub-palette-item.action-dev:hover { background: #404040; }
.hub-palette-item.action-dev .dev-lock {
  font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase;
  opacity: 0.6; margin-left: 4px;
}
.hub-state-chip {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  text-align: left;
  margin-bottom: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.hub-state-chip:hover {
  background: #ecfdf5;
  border-color: #86efac;
  color: #15803d;
  transform: translateY(-1px);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 8px rgba(34, 197, 94, 0.06);
}
.hub-state-back-btn {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px 8px 0;
  border-radius: 4px;
  transition: color 0.12s;
}
.hub-state-back-btn:hover { color: #0f172a; }
.hub-add-btn {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  margin-top: 4px;
}
.hub-add-btn:hover {
  border-color: #86efac;
  border-style: solid;
  color: #15803d;
  background: #ecfdf5;
}

/* Schedule grid */
.hub-grid-wrap { padding: 14px; overflow-x: auto; }
.hub-grid {
  display: grid;
  grid-template-columns: 100px repeat(7, minmax(110px, 1fr));
  gap: 5px;
  min-width: 880px;
}
.hub-grid-header {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  padding: 6px 4px 8px;
}
.hub-grid-header .day-num {
  display: block;
  font-size: 17px;
  color: var(--text);
  margin-top: 2px;
}
.hub-grid-header.today .day-num { color: #137333; }
/* Click-mode day selector — visually invites the user to pick a day. */
.hub-grid-header.selectable {
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s, transform 0.05s;
}
.hub-grid-header.selectable:hover { background: #f1f3f4; }
.hub-grid-header.selectable:active { transform: translateY(1px); }
.hub-grid-header.selected {
  background: #e6f4ea;
  outline: 2px solid #34a853;
  outline-offset: -2px;
}
body.section-houses .hub-grid-header.selected {
  background: #fee2e2;
  outline-color: #dc3545;
}
.hub-grid-header.selected .day-num { color: #137333; }
body.section-houses .hub-grid-header.selected .day-num { color: #b02a37; }
.hub-grid-header.locked { cursor: not-allowed; opacity: 0.55; }
/* Cells in the selected day get a subtle highlight ring so it's clear
   where clicked palette items will land. */
.hub-cell.selected-day {
  outline: 1px solid rgba(52, 168, 83, 0.45);
  outline-offset: -1px;
}
body.section-houses .hub-cell.selected-day {
  outline-color: rgba(220, 53, 69, 0.45);
}
.hub-grid-row-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  padding: 6px 4px;
}
.hub-cell {
  min-height: 70px;
  background: #fff;
  border: 1px dashed #d6dadf;
  border-radius: 7px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hub-cell.dragover { border-style: solid; border-color: #34a853; background: #e6f4ea; }
.hub-cell.today { background: #fffae6; border-color: #f0c36d; }
/* Past-day cells are read-only — their pills can't be removed and no
   new items can be dropped. Subtle gray wash + cursor:not-allowed
   communicates "this day has passed". */
.hub-cell.locked {
  background: #f1f3f4;
  border-color: #e0e2e6;
  cursor: not-allowed;
  opacity: 0.85;
}
.hub-cell.locked .pill { opacity: 0.85; }
.hub-cell .pill {
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  line-height: 1.2;
}
/* Pills on editable days are themselves drag sources — the user can
   grab one and move it between rows or days. Locked-day pills don't
   get this cursor; they're read-only. */
.hub-cell:not(.locked) .pill[data-pill-drag="1"] { cursor: grab; }
.hub-cell:not(.locked) .pill[data-pill-drag="1"]:active { cursor: grabbing; }
.hub-cell:not(.locked) .pill[data-pill-drag="1"] .x { cursor: pointer; }
.hub-cell .pill.city { background: #e6f4ea; color: #137333; border: 1px solid rgba(52, 168, 83, 0.4); }
.hub-cell .pill.action-cold { background: #fff4e5; color: #8a4a00; border: 1px solid #f5b878; }
.hub-cell .pill.action-ppl { background: #e3f2fd; color: #0a4b87; border: 1px solid #6db3eb; }
.hub-cell .pill.action-leads { background: #f3e5f5; color: #5a2c7d; border: 1px solid #c69cd0; }
.hub-cell .pill.action-dispo { background: #d6f3ee; color: #064e42; border: 1px solid #6cc8b8; }
.hub-cell .pill.action-dev { background: #2c2c2c; color: #fff; border: 1px solid #4a4a4a; }
.hub-cell .pill .x { cursor: pointer; opacity: 0.4; font-weight: 700; }
.hub-cell .pill .x:hover { opacity: 1; }

/* ─── Closed-this-month banner (2026-05-20 redesign) ─────────────────
   Sits at the top of the Hub > Tasks shell. Prominent card showing
   total $ closed in the current calendar month + file count + month
   label. Pulls data from GET /api/hub/closed-this-month. */
.hub-tasks-shell {
  display: flex;
  flex-direction: column;
  /* flex/min-height/overflow are critical: the parent .chat-view is a
     flex column with overflow:hidden, so without flex:1 + min-height:0
     here the shell expands to content-height and the page scrolls.
     overflow:auto is a safety net — content should fit without scroll
     in default state but drill-downs may expand things. */
  flex: 1;
  min-height: 0;
  overflow: auto;
  gap: 10px;
  /* 2026-05-27: removed `max-width: 1080px; margin: 0 auto;`. Hub Tasks
     now spans the full viewport width — operator wanted to USE the
     wide monitor instead of squeezing content into a centered column. */
  padding: 12px 24px 14px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}

/* 2026-05-30 redesign — KPI strip + hero grid (replaces .hub-tasks-cols
   3-column layout). Top: 4 stat tiles in a row. Below: optional in-place
   expand. Hero: calendar (left, ~60%) + right rail (~38%, capped 380px).
   Legacy .hub-tasks-cols rules below remain for back-compat in case any
   downstream code still references them — new shell doesn't use them. */
.hub-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.hub-kpi-tile {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; text-align: left;
  background: #fff;
  border: 1px solid var(--border, #e1e4e8);
  border-radius: 10px;
  padding: 12px 14px 11px;
  cursor: default;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 84px;
}
.hub-kpi-tile:not(:disabled) { cursor: pointer; }
.hub-kpi-tile:not(:disabled):hover {
  border-color: #cbd5e1;
  background: #fafbfc;
}
.hub-kpi-tile:not(:disabled):active { transform: translateY(1px); }
.hub-kpi-tile.is-open {
  border-color: #0f172a;
  background: #fafbfc;
}

/* 2026-05-30 — Colored variants for the two money-in tiles. Closed +
   escrow each get a green gradient; swapped 2026-05-30 so Closed reads
   as the bolder/brighter emerald (deals already won) and Escrow gets
   the deeper teal (deals still pending). Marketing/Pipeline stay
   neutral by contrast. Text bumped to white-with-opacity for legibility. */
.hub-kpi-tile-closed {
  background: linear-gradient(135deg, #047857 0%, #10b981 100%);
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(4, 120, 87, 0.18);
}
.hub-kpi-tile-closed:not(:disabled):hover {
  background: linear-gradient(135deg, #065f46 0%, #059669 100%);
  border-color: transparent;
}
.hub-kpi-tile-closed .hub-kpi-tile-label,
.hub-kpi-tile-closed .hub-kpi-tile-stat,
.hub-kpi-tile-closed .hub-kpi-tile-sub,
.hub-kpi-tile-closed .hub-kpi-tile-chev { color: #fff; }
.hub-kpi-tile-closed .hub-kpi-tile-label { opacity: 0.85; }
.hub-kpi-tile-closed .hub-kpi-tile-sub { opacity: 0.85; }
.hub-kpi-tile-closed .hub-kpi-tile-net {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  padding: 1px 8px;
  border-radius: 999px;
  display: inline-block;
  margin-top: 2px;
}
.hub-kpi-tile-closed .hub-kpi-tile-net span { color: #fff; opacity: 0.8; }

.hub-kpi-tile-escrow {
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(15, 118, 110, 0.16);
}
.hub-kpi-tile-escrow:not(:disabled):hover {
  background: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
  border-color: transparent;
}
.hub-kpi-tile-escrow.is-open {
  background: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
  border-color: transparent;
}
.hub-kpi-tile-escrow .hub-kpi-tile-label,
.hub-kpi-tile-escrow .hub-kpi-tile-stat,
.hub-kpi-tile-escrow .hub-kpi-tile-sub,
.hub-kpi-tile-escrow .hub-kpi-tile-chev { color: #fff; }
.hub-kpi-tile-escrow .hub-kpi-tile-label { opacity: 0.85; }
.hub-kpi-tile-escrow .hub-kpi-tile-sub { opacity: 0.85; }
.hub-kpi-tile-escrow .hub-kpi-tile-chev { opacity: 0.78; }

/* 2026-05-30 — Marketing tile (amber/orange — "spend going out").
   Operational color, distinct from the revenue greens but not alarming
   like the rotate-red elsewhere in the app. */
.hub-kpi-tile-marketing {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(180, 83, 9, 0.16);
}
.hub-kpi-tile-marketing:not(:disabled):hover {
  background: linear-gradient(135deg, #92400e 0%, #d97706 100%);
  border-color: transparent;
}
.hub-kpi-tile-marketing.is-open {
  background: linear-gradient(135deg, #92400e 0%, #d97706 100%);
  border-color: transparent;
}
.hub-kpi-tile-marketing .hub-kpi-tile-label,
.hub-kpi-tile-marketing .hub-kpi-tile-stat,
.hub-kpi-tile-marketing .hub-kpi-tile-sub,
.hub-kpi-tile-marketing .hub-kpi-tile-chev { color: #fff; }
.hub-kpi-tile-marketing .hub-kpi-tile-label { opacity: 0.85; }
.hub-kpi-tile-marketing .hub-kpi-tile-sub { opacity: 0.85; }
.hub-kpi-tile-marketing .hub-kpi-tile-chev { opacity: 0.78; }

/* (Pipeline KPI tile removed 2026-05-30 — duplicated the right-rail
   Pipeline section, so the rail owns the surface on its own.) */

/* 2026-05-30 — Inside the KPI expand panel, hide the legacy escrow
   "banner button" (the thing the user clicked the tile to OPEN — we
   don't need a duplicate of it inside the panel). Same for the
   marketing section's header, which would re-state the tile's stat.
   The drill rows / edit-cards below them are what we want to show. */
.hub-kpi-expand .hub-escrow-banner { display: none; }
.hub-kpi-tile-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: #64748b;
  display: flex; align-items: center; gap: 6px;
}
.hub-kpi-tile-chev { font-size: 10px; color: #94a3b8; }
.hub-kpi-tile-stat {
  font-size: 26px; font-weight: 700; letter-spacing: -0.6px;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.hub-kpi-tile-sub {
  font-size: 11px; color: #64748b; font-weight: 500;
  margin-top: 1px;
}
.hub-kpi-tile-net {
  font-size: 11px; color: #15803d; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hub-kpi-tile-net span { font-weight: 500; opacity: 0.7; }
.hub-kpi-expand {
  margin-bottom: 10px;
  border: 1px solid var(--border, #e1e4e8);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}
.hub-kpi-expand-inner { padding: 0; margin: 0; }
.hub-kpi-expand[hidden] { display: none; }

/* Hero grid: calendar left + right rail. ~60/38 on desktop. */
.hub-hero-grid {
  display: grid;
  grid-template-columns: 340px 1fr 380px;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
.hub-hero-left {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.hub-hero-cal {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.hub-hero-rail {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Quick Actions row — horizontal strip of 4 buttons, replaces 2x2 grid. */
.hub-quick-actions-row {
  display: grid;
  /* 3 buttons now (Email moved to the Inbox) — was repeat(4,1fr), which left a
     dead 4th column and pushed the row to overflow/cut off on the right.
     repeat(3,1fr) spreads Contract / DocuSign / PDF Editor evenly. */
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
/* 2026-05-30 — Bold black quick-action buttons. White text, raised
   appearance with a subtle shadow + slight lift on hover so they read
   as primary CTAs rather than the muted outlined buttons they were. */
.hub-qa-btn {
  appearance: none; -webkit-appearance: none;
  font-family: inherit;
  background: #0f172a;             /* near-black, matches dark theme baseline */
  border: 1px solid #0f172a;
  border-radius: 9px;
  padding: 14px 8px;                /* taller — was 9px */
  cursor: pointer;
  font-size: 13px;                  /* up from 12 */
  font-weight: 700;                 /* up from 600 */
  letter-spacing: 0.2px;
  color: #fff;
  text-align: center;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,    /* subtle inner highlight */
    0 2px 4px rgba(15, 23, 42, 0.18),           /* base shadow */
    0 4px 12px rgba(15, 23, 42, 0.12);          /* soft halo */
  transition: background 120ms ease, transform 100ms ease, box-shadow 160ms ease;
}
.hub-qa-btn:hover {
  background: #1e293b;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 4px 10px rgba(15, 23, 42, 0.28),
    0 8px 20px rgba(15, 23, 42, 0.18);
}
.hub-qa-btn:active {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 1px 2px rgba(15, 23, 42, 0.2);
  background: #020617;
}
.hub-qa-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

/* Skeleton loader — neutral shimmer block that holds layout while data
   loads. Replaces the 5 "Loading…" text strings. */
.hub-skeleton {
  background: linear-gradient(90deg, #f1f5f9 0%, #f8fafc 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: hub-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 10px;
}
.hub-skeleton-kpi {
  min-height: 84px;
}
.hub-skeleton-cal {
  min-height: 360px;
}
.hub-skeleton-pipe {
  min-height: 220px;
}
@keyframes hub-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Responsive — collapse KPI strip to 2x2, then stack hero-grid. */
@media (max-width: 1180px) {
  .hub-hero-grid { grid-template-columns: 290px 1fr 320px; }
}
@media (max-width: 980px) {
  /* 3 tiles still fit comfortably side-by-side; only the hero grid
     collapses to a stack. Coming Up first (deadlines lead), then calendar. */
  .hub-hero-grid { grid-template-columns: 1fr; }
  .hub-hero-left { order: 0; }
  .hub-hero-rail { order: 2; }
}
@media (max-width: 540px) {
  /* On phones, 3 tiles get cramped — stack them. */
  .hub-kpi-strip { grid-template-columns: 1fr; gap: 6px; }
  .hub-kpi-tile { padding: 10px 11px; min-height: 64px; flex-direction: row; align-items: center; gap: 10px; }
  .hub-kpi-tile-label { flex: 0 0 auto; min-width: 96px; }
  .hub-kpi-tile-stat { font-size: 20px; flex: 0 0 auto; }
  .hub-kpi-tile-sub { font-size: 11px; margin-left: auto; }
  .hub-quick-actions-row { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Legacy 3-column layout (kept for back-compat) ─────────────────── */
.hub-tasks-cols {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
.hub-tasks-col-left {
  flex: 1.4 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hub-tasks-col-right {
  flex: 0 0 300px;
  min-width: 0;
  max-width: 300px;
  min-height: 0;
}
.hub-tasks-col-pipeline {
  flex: 1 1 440px;
  min-width: 340px;
  max-width: 720px;
  display: flex;
  flex-direction: column;
}
.hub-tasks-col-actions {
  flex: 0 0 320px;
  min-width: 0;
  max-width: 320px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1280px) {
  .hub-tasks-col-actions { flex: 0 0 280px; max-width: 280px; }
  .hub-tasks-col-pipeline { flex-basis: 380px; }
}
@media (max-width: 1000px) {
  .hub-tasks-cols { flex-wrap: wrap; }
  .hub-tasks-col-actions { flex: 1 1 100%; max-width: 100%; }
}
@media (max-width: 900px) {
  .hub-tasks-cols { flex-direction: column; flex-wrap: nowrap; }
  .hub-tasks-col-right { flex: 1 1 auto; max-width: 100%; }
  .hub-tasks-col-pipeline { flex: 1 1 auto; max-width: 100%; min-width: 0; }
  .hub-tasks-col-actions { flex: 1 1 auto; max-width: 100%; }
}

/* Daily-rotating quote — sits above the calendar in the left column.
   Subtle italic styling so it doesn't pull focus from the calendar. */
.hub-quote-bar {
  background: #f9fafb;
  border: 1px solid var(--border, #e1e4e8);
  border-radius: 10px;
  padding: 8px 14px;
  font-style: italic;
  color: var(--text-dim, #4b5563);
  font-size: 13px;
  line-height: 1.4;
  flex: 0 0 auto;
}
.hub-quote-text {
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 0.1px;
}

/* 2x2 block grid — 4 uniform tiles for Email, Contract, DocuSign,
   PDF Editor inside the narrow right-side actions column. 2026-05-27:
   Distribute tile was removed (Pipeline column to the left now owns
   that surface). minmax(120px) keeps the grid 2-up at ~320px col
   width and lets it collapse to 1-up if the col is squeezed tighter. */
.hub-blocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.hub-block {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid var(--border, #e1e4e8);
  border-left-width: 4px;
  border-radius: 9px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  transition: transform 0.08s ease, border-color 0.12s, box-shadow 0.12s, background 0.12s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  color: var(--text, #24292f);
}
.hub-block:hover {
  border-color: #c1c8d0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
  background: #fcfcfd;
}
.hub-block:active { transform: translateY(0); }
.hub-block-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text, #24292f);
}
.hub-block-stat {
  font-size: 12px;
  color: var(--text-dim, #6e7781);
  margin-top: auto;
  font-variant-numeric: tabular-nums;
}
.hub-block-stat-num {
  font-weight: 700;
  color: var(--text, #24292f);
}
.hub-block-stat-empty {
  font-style: italic;
  color: #9aa3ad;
}

/* Per-block accent colors on the left border — quick visual hierarchy
   without adding icons. Email/Contract stay neutral; the rest carry a
   brand cue. DocuSign gets a split blue/red gradient (rendered as a
   4px-wide background-image so it follows the rounded corners cleanly,
   with the transparent left border preserving layout). */
.hub-block-email    { border-left-color: #6e7781; }
.hub-block-contract { border-left-color: #6e7781; }
.hub-block-docusign,
.hub-block-docusign:hover {
  border-left-color: transparent;
  background-image: linear-gradient(to bottom,
    #2563eb 0%, #2563eb 50%,
    #ef4444 50%, #ef4444 100%);
  background-repeat: no-repeat;
  background-size: 4px 100%;
  background-position: 0 0;
}
.hub-block-pdf        { border-left-color: #f1c40f; }    /* yellow */
/* .hub-block-distribute removed 2026-05-27 — Pipeline column owns
   the Distribute surface now (stage chip + per-street stalled flags). */
.hub-block-escrow     { border-left-color: #14b8a6; }    /* teal — matches banner */

/* ─── SMS Number Health (deliverability monitor) ─────────────────────
   Collapsible section in the actions column. Header shows a status chip
   (red rotate / amber watch / green healthy) + a refresh icon; expands
   to per-agent number tables worst-first. */
/* ── Coming Up — deadline alerts + operator reminders (rail panel) ── */
.hub-comingup { background: #fff; border: 1px solid #e8edf3; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.hub-comingup-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.hub-comingup-head-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.hub-comingup-title { font-size: 13px; font-weight: 800; color: #0f172a; }
.hub-comingup-add-btn { appearance: none; border: 1px solid #d7dde5; background: #f8fafc; color: #475569; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; cursor: pointer; }
.hub-comingup-add-btn:hover { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.hub-comingup-form { display: flex; gap: 5px; margin-bottom: 8px; }
.hub-comingup-form.hidden { display: none; }
.hub-comingup-form input[type="text"] { flex: 1; min-width: 0; font-size: 12.5px; padding: 5px 8px; border: 1px solid #d7dde5; border-radius: 7px; }
.hub-comingup-form input[type="date"] { font-size: 12px; padding: 4px 6px; border: 1px solid #d7dde5; border-radius: 7px; }
.hub-comingup-form button { appearance: none; border: none; background: #2563eb; color: #fff; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 7px; cursor: pointer; }
.hub-comingup-form button:hover { background: #1d4ed8; }
.hub-comingup-list { display: flex; flex-direction: column; gap: 4px; }
.hub-comingup-empty { font-size: 12px; color: #94a3b8; padding: 4px 2px; }
.hub-comingup-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #f8fafc; }
.hub-comingup-item.urgent { background: #fef2f2; border: 1px solid #fecaca; }
.hub-comingup-item.passed { background: #f0fdf4; border: 1px solid #bbf7d0; }
.hub-comingup-ico { flex: 0 0 auto; font-size: 14px; margin-top: 1px; }
.hub-comingup-body { flex: 1; min-width: 0; }
.hub-comingup-label { font-size: 13px; font-weight: 600; color: #0f172a; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.hub-comingup-note { font-size: 11.5px; color: #64748b; line-height: 1.3; margin-top: 1px; }
.hub-comingup-when { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #64748b; white-space: nowrap; margin-top: 1px; }
.hub-comingup-when.urgent { color: #dc2626; }
.hub-comingup-when.passed { color: #16a34a; }
.hub-comingup-done { flex: 0 0 auto; appearance: none; border: 1px solid #cbd5e1; background: #fff; color: #16a34a; font-size: 12px; font-weight: 800; line-height: 1; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
.hub-comingup-done:hover { background: #16a34a; color: #fff; border-color: #16a34a; }

/* "Needs upload" — stranded skiptrace lists (exported but not on Sendivo). Amber
   accent to draw the eye; the panel renders empty (hidden) when there are none. */
.hub-skiptrace { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.hub-skiptrace:empty { display: none; }
.hub-skiptrace-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.hub-skiptrace-title { font-size: 13px; font-weight: 800; color: #3730a3; }
.hub-skiptrace-sub { font-size: 11px; font-weight: 600; color: #4f46e5; }
.hub-skiptrace-list { display: flex; flex-direction: column; gap: 5px; }
.hub-skiptrace-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 1px solid #e0e7ff; border-radius: 8px; padding: 6px 9px; }
.hub-skiptrace-body { min-width: 0; }
.hub-skiptrace-label { font-size: 12px; font-weight: 700; color: #1e1b4b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-skiptrace-meta { font-size: 10px; color: #6366f1; margin-top: 1px; }
.hub-skiptrace-stop { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #fff; background: #dc2626; border: 1px solid #b91c1c; border-radius: 7px; padding: 4px 11px; cursor: pointer; }
.hub-skiptrace-stop:hover { background: #b91c1c; }
.hub-skiptrace-stop:disabled { opacity: .6; cursor: default; }
.hub-stranded { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.hub-stranded:empty { display: none; }
.hub-stranded-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.hub-stranded-title { font-size: 13px; font-weight: 800; color: #92400e; }
.hub-stranded-sub { font-size: 11px; font-weight: 600; color: #b45309; }
.hub-stranded-list { display: flex; flex-direction: column; gap: 5px; }
.hub-stranded-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid #fde68a; }
.hub-stranded-body { flex: 1; min-width: 0; }
.hub-stranded-label { font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.3; overflow-wrap: anywhere; }
.hub-stranded-meta { font-size: 11px; color: #92400e; line-height: 1.3; margin-top: 1px; }
.hub-stranded-btn { flex: 0 0 auto; appearance: none; border: none; background: #d97706; color: #fff; font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.hub-stranded-btn:hover:not(:disabled) { background: #b45309; }
.hub-stranded-btn:disabled { background: #e5b768; cursor: default; opacity: 0.8; }
.hub-stranded-x { flex: 0 0 auto; appearance: none; border: 1px solid #fcd9a3; background: #fff; color: #b45309; font-size: 12px; font-weight: 800; line-height: 1; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; }
.hub-stranded-x:hover:not(:disabled) { background: #b45309; color: #fff; border-color: #b45309; }
.hub-stranded-x:disabled { opacity: 0.5; cursor: default; }

.hub-numhealth { margin-top: 10px; }
.hub-numhealth-header {
  appearance: none; -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--border, #e1e4e8);
  border-left-width: 4px;
  border-radius: 9px;
  background: #f8fafc;
  color: var(--text, #24292f);
  transition: background 0.12s, border-color 0.12s;
}
.hub-numhealth-header:hover { background: #f1f5f9; }
.hub-numhealth-header.is-ok     { border-left-color: #16a34a; }
.hub-numhealth-header.is-warn   { border-left-color: #f59e0b; }
.hub-numhealth-header.is-rotate { border-left-color: #dc2626; background: #fef2f2; }
.hub-numhealth-header.is-idle   { border-left-color: #cbd5e1; }
.hub-numhealth-title { font-size: 13px; font-weight: 700; letter-spacing: -0.2px; }
.hub-numhealth-status {
  font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
}
.hub-numhealth-status.is-ok     { color: #15803d; background: #dcfce7; }
.hub-numhealth-status.is-warn   { color: #b45309; background: #fef3c7; }
.hub-numhealth-status.is-rotate { color: #b91c1c; background: #fee2e2; }
.hub-numhealth-status.is-idle   { color: #64748b; background: #e2e8f0; }
.hub-numhealth-spacer { flex: 1; }
.hub-numhealth-refresh {
  font-size: 14px; font-weight: 700; color: #475569;
  padding: 0 4px; border-radius: 6px; cursor: pointer;
}
.hub-numhealth-refresh:hover { background: #e2e8f0; color: #0f172a; }
.hub-numhealth-refresh.is-spinning { animation: hub-spin 1s linear infinite; cursor: wait; }
@keyframes hub-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.hub-numhealth-chev { font-size: 12px; color: #64748b; font-weight: 700; }

.hub-numhealth-body {
  border: 1px solid var(--border, #e1e4e8);
  border-top: none;
  border-radius: 0 0 9px 9px;
  background: #fff;
  padding: 8px 10px 10px;
  max-height: 320px;
  overflow-y: auto;
}
.hub-numhealth-window {
  font-size: 10px; color: #94a3b8; text-transform: uppercase;
  letter-spacing: 0.4px; margin-bottom: 6px;
}
.hub-numhealth-group { margin-bottom: 10px; }
.hub-numhealth-group:last-child { margin-bottom: 0; }
.hub-numhealth-agent {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.4px; color: #475569;
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px;
}
.hub-numhealth-agent-avg { font-size: 10px; font-weight: 600; color: #94a3b8; }
.hub-numhealth-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 5px; font-size: 12px;
}
.hub-numhealth-row + .hub-numhealth-row { margin-top: 2px; }
.hub-numhealth-row.hub-numhealth-rotate { background: #fef2f2; }
.hub-numhealth-row.hub-numhealth-warn   { background: #fffbeb; }
.hub-numhealth-num { font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; }
.hub-numhealth-stat { margin-left: auto; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.hub-numhealth-sub { font-weight: 400; color: #94a3b8; }
.hub-numhealth-flag {
  flex: 0 0 auto;
  font-size: 9px; font-weight: 800; letter-spacing: 0.4px;
  padding: 1px 6px; border-radius: 3px; text-transform: uppercase;
}
.hub-numhealth-flag-rotate { background: #fee2e2; color: #b91c1c; }
.hub-numhealth-flag-warn   { background: #fef3c7; color: #b45309; }
.hub-numhealth-flag-ok     { background: #dcfce7; color: #15803d; }
.hub-numhealth-flag-low    { background: #e2e8f0; color: #64748b; }
.hub-numhealth-flag-idle   { background: #f1f5f9; color: #94a3b8; }
.hub-numhealth-idle-note { font-size: 10px; color: #94a3b8; font-style: italic; margin-top: 4px; padding-left: 6px; }
.hub-numhealth-empty { font-size: 12px; color: #94a3b8; font-style: italic; padding: 8px 6px; }

.hub-closed-banner {
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  color: #fff;
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: 0 3px 12px rgba(15, 118, 110, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;   /* banners are fixed-size; column body absorbs spare height */
}
.hub-closed-amount {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.hub-closed-sub {
  font-size: 12px;
  opacity: 0.92;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.hub-closed-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hub-closed-files {
  font-weight: 500;
}
.hub-closed-loading {
  font-size: 13px;
  opacity: 0.85;
  font-style: italic;
}
/* Banner gross/net — gross is the big number, net hangs to the right
   of the file-count line as a small chip. */
.hub-closed-gross-label {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.8;
  margin-left: 6px;
  letter-spacing: 0.5px;
}
.hub-closed-net {
  margin-left: auto;
  padding: 1px 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

/* Per-row P&L expansion in the calendar drill-down */
.hub-closed-drill-row-expandable {
  padding: 0;
  display: block;
}
.hub-closed-drill-row-toggle {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
}
.hub-closed-drill-row-toggle:hover { background: #f6f8fa; }
.hub-closed-drill-row-chev {
  font-size: 11px;
  color: var(--text-dim, #6e7781);
  width: 12px;
  flex: 0 0 12px;
}
.hub-closed-drill-row-toggle .hub-closed-drill-street {
  flex: 1 1 auto;
  min-width: 0;
}
.hub-closed-drill-row-toggle .hub-closed-drill-fee { flex: 0 0 auto; }
.hub-closed-drill-net {
  font-size: 11px;
  font-weight: 700;
  color: #0f766e;
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
  flex: 0 0 auto;
}
.hub-closed-drill-net-summary {
  font-size: 12px;
  font-weight: 700;
  color: #0f766e;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}
.hub-closed-drill-pnl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  padding: 10px 14px 12px 36px;   /* indent under the chevron */
  background: #fafbfc;
  border-radius: 0 0 6px 6px;
  margin-top: 2px;
  border-top: 1px solid #eaecef;
}
.hub-closed-drill-pnl-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hub-closed-drill-pnl-row label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim, #6e7781);
}
.hub-closed-drill-pnl-input {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border, #e1e4e8);
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  background: #fff;
}
.hub-closed-drill-pnl-input:focus {
  outline: none;
  border-color: #14b8a6;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}
.hub-pnl-input-error,
.hub-pnl-input-error:focus {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important;
}
.hub-closed-drill-pnl-net {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text, #24292f);
  padding: 4px 0 0;
  border-top: 1px dashed #eaecef;
  margin-top: 2px;
}
.hub-closed-drill-pnl-net strong {
  color: #0f766e;
  font-weight: 700;
}

/* ─── Marketing-this-month section (above the calendar) ────────────
   4-card row showing SMS (variable) + Sendivo / Propstream / DocuSign
   (fixed monthly subscriptions). Each card inline-editable; the
   Closed banner's net chip uses the section's total to compute real
   monthly profit. 2026-05-27 redesign — replaces the per-deal cost
   tracking that previously drove the banner's net number. */
.hub-marketing-section {
  background: #fff;
  border: 1px solid var(--border, #e1e4e8);
  border-radius: 12px;
  padding: 10px 14px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  flex: 0 0 auto;
}
.hub-marketing-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.hub-marketing-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim, #6e7781);
}
.hub-marketing-month {
  font-size: 11px;
  color: var(--text-dim, #9aa3ad);
}
/* Spacer pushes the SMS-count chip + spend total to the far right
   end of the header row. Each metric carries its own bold-number +
   muted-label pattern so they read as paired stats. */
.hub-marketing-header-spacer { flex: 1; }
.hub-marketing-smscount {
  font-size: 14px;
  font-weight: 800;
  color: #0f766e;                         /* teal — informational, distinct from spend */
  font-variant-numeric: tabular-nums;
}
.hub-marketing-smscount em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim, #6e7781);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 4px;
}
.hub-marketing-total {
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #24292f);
  font-variant-numeric: tabular-nums;
}
.hub-marketing-total em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim, #6e7781);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 4px;
}
.hub-marketing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 700px) {
  .hub-marketing-grid { grid-template-columns: 1fr 1fr; }
}
.hub-marketing-card {
  background: #fafbfc;
  border: 1px solid var(--border, #e1e4e8);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hub-marketing-card-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text, #24292f);
  letter-spacing: -0.1px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hub-marketing-monthly {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim, #9aa3ad);
}
.hub-marketing-card-sub {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--text-dim, #9aa3ad);
  font-style: italic;
}
.hub-marketing-source-chip {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  border-radius: 3px;
}
.hub-marketing-source-chip.is-manual { background: #f1f5f9; color: var(--text-dim, #6e7781); }
.hub-marketing-source-chip.is-api    { background: #ccfbf1; color: #0f766e; }
.hub-marketing-synced {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--text-dim, #9aa3ad);
  font-style: italic;
}
.hub-marketing-sync-btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border, #e1e4e8);
  background: #fff;
  color: var(--text-dim, #6e7781);
  cursor: pointer;
  margin-left: auto;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hub-marketing-sync-btn:hover {
  background: #f0fdfa;
  border-color: #14b8a6;
  color: #0f766e;
}
.hub-marketing-sync-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.hub-marketing-input {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 8px;
  border: 1px solid var(--border, #e1e4e8);
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  background: #fff;
  color: var(--text, #24292f);
}
.hub-marketing-input:focus {
  outline: none;
  border-color: #14b8a6;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}

/* Simplified calendar drill-down row (one inline fee input, no
   chevron / expansion anymore). The .hub-closed-drill-row-toggle
   class is gone; rows are plain divs with a street + a fee input. */
.hub-closed-drill-fee-input {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  background: transparent;
  color: var(--text, #24292f);
  width: 110px;
  text-align: right;
  margin-left: auto;
}
.hub-closed-drill-fee-input:hover {
  border-color: var(--border, #e1e4e8);
  background: #fff;
}
.hub-closed-drill-fee-input:focus {
  outline: none;
  border-color: #14b8a6;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}

/* Slimmed Mark-Closed modal (single assignment-fee field) — share
   the existing modal chrome but tighter body. */
.mark-closed-modal-slim .mark-closed-modal-body { padding-bottom: 8px; }
.mark-closed-modal-slim .mark-closed-modal-field { max-width: 340px; }

/* Mark-Closed modal — overlay + centered card */
.mark-closed-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mark-closed-modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}
.mark-closed-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #e1e4e8);
}
.mark-closed-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text, #24292f);
}
.mark-closed-modal-x {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-dim, #6e7781);
  padding: 0 6px;
}
.mark-closed-modal-x:hover { color: var(--text, #24292f); }
.mark-closed-modal-body { padding: 16px 20px; }
.mark-closed-modal-sub {
  font-size: 12px;
  color: var(--text-dim, #6e7781);
  margin: 0 0 14px;
  line-height: 1.5;
}
.mark-closed-modal-sub code {
  background: #f6f8fa;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}
.mark-closed-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.mark-closed-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mark-closed-modal-field span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim, #6e7781);
}
.mark-closed-modal-field span em {
  display: block;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  color: var(--text-dim, #9aa3ad);
  margin-top: 1px;
}
.mark-closed-modal-field input {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e1e4e8);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.mark-closed-modal-field input:focus {
  outline: none;
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}
.mark-closed-modal-net {
  margin-top: 14px;
  padding: 10px 12px;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text, #24292f);
  font-variant-numeric: tabular-nums;
}
.mark-closed-modal-net strong { color: #0f766e; font-weight: 800; }
.mark-closed-modal-net em { color: var(--text-dim, #6e7781); font-style: italic; }
.mark-closed-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border, #e1e4e8);
  background: #fafbfc;
  border-radius: 0 0 12px 12px;
}
.mark-closed-modal-cancel {
  background: #fff;
  border: 1px solid var(--border, #e1e4e8);
  color: var(--text, #24292f);
}
.mark-closed-modal-confirm {
  background: #dc2626;
  border: 1px solid #b91c1c;
  color: #fff;
  font-weight: 700;
}
.mark-closed-modal-confirm:hover { background: #b91c1c; }
.mark-closed-modal-confirm:disabled { opacity: 0.6; cursor: wait; }

/* In Escrow banner — full-width sibling of the closed-this-month
   banner, sits directly below it. Reuses .hub-closed-banner's
   gradient + typography but is rendered as a <button> so the whole
   surface is clickable; .is-open marks the expanded drill-down state. */
.hub-escrow-banner-wrap {
  /* The wrap is just a positioning container so the banner button
     and the drill-down panel below it sit visually together. The
     button carries the banner's gradient + padding; the wrap itself
     adds no visual chrome. */
}
.hub-escrow-banner {
  /* Override .hub-closed-banner's display:flex column to keep the
     stacked layout, but as a <button> reset native styling. */
  appearance: none;
  -webkit-appearance: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  position: relative;
  transition: transform 0.08s ease, box-shadow 0.16s ease;
  /* Different shade of green than Closed (which uses teal #0f766e→#14b8a6).
     In Escrow uses emerald #047857→#10b981 — visibly distinct (less blue,
     more pure-green) so the two banners read as related-but-different
     metrics at a glance. Co-declared with the gradient + shadow color so
     this rule decisively overrides .hub-closed-banner's defaults. */
  background: linear-gradient(135deg, #047857 0%, #10b981 100%);
  box-shadow: 0 4px 16px rgba(4, 120, 87, 0.18);
}
.hub-escrow-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(4, 120, 87, 0.26);
}
.hub-escrow-banner:active { transform: translateY(0); }
.hub-escrow-banner-hint {
  font-size: 11px;
  opacity: 0.78;
  font-style: italic;
  margin-left: 10px;
  letter-spacing: 0.2px;
}
.hub-escrow-banner-chev {
  margin-left: auto;
  font-size: 14px;
  opacity: 0.85;
  font-weight: 700;
  transition: transform 0.16s ease;
}
.hub-escrow-banner.is-open .hub-escrow-banner-chev {
  transform: rotate(0deg);   /* ▾ already points down; just lock it */
}

/* Inline drill-down panel below the In Escrow banner. Reuses the
   .hub-closed-drill row layout from the calendar's day-detail so
   both drill-downs read consistently. .hub-escrow-drill is a marker
   class for In-Escrow-specific tweaks (no max-height cap, etc.). */
.hub-escrow-drill {
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--border, #e1e4e8);
  border-radius: 10px;
  padding: 12px 14px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.hub-escrow-drill .hub-closed-drill-header {
  margin-bottom: 6px;
}
.hub-escrow-drill-empty {
  font-size: 13px;
  font-style: italic;
  color: var(--text-dim, #6e7781);
  text-align: center;
  padding: 10px 0;
}
.hub-escrow-drill-nofee {
  color: var(--text-dim, #9aa3ad);
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
}

/* PSA / Assignment pill buttons inside each drill-down row. Compact
   so they sit inline with the street name + fee. Click invokes the
   existing openPdfModal() overlay. */
.hub-escrow-drill-files {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.hub-escrow-drill-pdf-btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border, #e1e4e8);
  background: #fff;
  color: var(--text, #24292f);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hub-escrow-drill-pdf-btn:hover {
  background: #f0fdfa;
  border-color: #14b8a6;
  color: #0f766e;
}
.hub-escrow-drill-pdf-btn:active {
  background: #ccfbf1;
}
.hub-escrow-drill-pdf-missing {
  font-size: 11px;
  font-style: italic;
  color: #9aa3ad;
  padding: 0 4px;
}

/* In Escrow drill-down rows now carry an inline-editable assignment
   fee input + a Close button. The .hub-closed-drill-fee-input style
   defined elsewhere covers the input shape; here we just tune the
   Close button (small pill, red on hover to signal the destructive
   action) and tighten the input width for the inline layout. */
.hub-escrow-drill .hub-closed-drill-fee-input {
  width: 100px;
  margin-left: auto;
  margin-right: 4px;
}
.hub-escrow-drill-close-btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--border, #e1e4e8);
  background: #fff;
  color: var(--text-dim, #6e7781);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hub-escrow-drill-close-btn:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #b91c1c;
}
.hub-escrow-drill-close-btn:active {
  background: #fee2e2;
}

/* ─── Closing / contingency deadlines (In Escrow drill-down) ──────────
   Each escrow row becomes a 2-line stack: the main line (street + files
   + fee + Close) and a deadline line below it. */
.hub-escrow-drill-row {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 5px;
}
.hub-escrow-drill-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hub-escrow-drill-deadlines {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-left: 2px;
}
.hub-escrow-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.hub-escrow-dl-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-dim, #94a3b8);
}
.hub-escrow-dl-input {
  font-family: inherit;
  font-size: 11px;
  padding: 2px 5px;
  border: 1px solid var(--border, #e1e4e8);
  border-radius: 5px;
  background: #fff;
  color: var(--text, #24292f);
}
.hub-escrow-dl-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.hub-escrow-dl-chip.is-ok      { background: #eef2f7; color: #64748b; }   /* far out — neutral */
.hub-escrow-dl-chip.is-soon    { background: #fef3c7; color: #b45309; }   /* ≤7 days — amber */
.hub-escrow-dl-chip.is-over    { background: #fee2e2; color: #b91c1c; }   /* closing passed — red */
.hub-escrow-dl-chip.is-cleared { background: #dcfce7; color: #15803d; }   /* contingency passed — good */
.hub-escrow-dl-chip.is-none    { background: #f1f5f9; color: #94a3b8; font-style: italic; }

/* When the right-side .hub-goals aside is used as the MAIN container
   (not a sidebar) — drop the border-left and flush-background look. */
.hub-goals-simplified {
  border-left: none !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ─── Closed-deal calendar (per-day breakdown) ───────────────────────
   Lives between the banner and the action-button column. Sun-Sat
   grid; cells with closes are clickable + show $ amount + drive an
   inline drill-down panel listing each file. Chevrons in the header
   navigate to past/future months. */
.hub-closed-calendar {
  background: #fff;
  border: 1px solid var(--border, #e1e4e8);
  border-radius: 12px;
  padding: 10px 14px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.hub-closed-cal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 6px;
  flex: 0 0 auto;
}
.hub-closed-cal-nav {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border, #e1e4e8);
  background: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: var(--text, #24292f);
  transition: background 0.12s, border-color 0.12s;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.hub-closed-cal-nav:hover {
  background: #f6f8fa;
  border-color: #c1c8d0;
}
.hub-closed-cal-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  min-width: 140px;
  text-align: center;
}
/* Viewed-month money summary under the calendar nav. Single horizontal
   chip row: revenue · SMS · Sendivo · Propstream · DocuSign · SMS sent · net.
   2026-05-30 — extended from "revenue · net" to the full row so operators
   can see the marketing context for any month they navigate to. Wraps on
   narrow screens (the row gets long with 7 chips). */
.hub-closed-cal-money {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px 12px;
  margin: 4px 0 10px;
  font-variant-numeric: tabular-nums;
}
.hub-closed-cal-chip {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #0f172a);
  white-space: nowrap;
}
.hub-closed-cal-chip em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim, #6e7781);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 3px;
}
/* Revenue + net stay larger (the headline numbers). */
.hub-closed-cal-rev,
.hub-closed-cal-net {
  font-size: 15px;
  font-weight: 800;
}
.hub-closed-cal-net { color: #047857; }
.hub-closed-cal-rev { color: #047857; }
/* Marketing total chip: clickable button-style. Shows a chev when
   interactive; expands to a per-sub breakdown row underneath when open. */
.hub-closed-cal-chip-mkt {
  appearance: none; -webkit-appearance: none;
  font-family: inherit;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: #b45309;                    /* amber, matches Marketing KPI tile */
  cursor: default;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.hub-closed-cal-chip-mkt.is-clickable {
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 999px;
  transition: background 120ms ease, color 120ms ease;
}
.hub-closed-cal-chip-mkt.is-clickable:hover {
  background: #fef3c7;
}
.hub-closed-cal-chip-mkt.is-open {
  background: #fef3c7;
  color: #92400e;
}
.hub-closed-cal-chip-mkt:disabled { cursor: default; opacity: 0.6; }
.hub-closed-cal-chev {
  font-size: 9px;
  color: #b45309;
  font-weight: 700;
  margin-left: 2px;
  position: relative;
  top: -1px;
}
.hub-closed-cal-chip-mkt.is-open .hub-closed-cal-chev { color: #92400e; }
/* SMS sent count — neutral slate, distinct from marketing. */
.hub-closed-cal-smscount {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}
.hub-closed-cal-chip.is-missing {
  color: #94a3b8;                    /* dim gray for unarchived past months */
  font-weight: 600;
}
.hub-closed-cal-chip.is-missing em {
  color: #cbd5e1;
}

/* Per-sub breakdown row — appears below the money summary when the
   marketing chip is expanded. Centered, smaller, amber tinted bg so
   it visually groups with the marketing chip above it. */
.hub-closed-cal-mkt-breakdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin: -4px 0 10px;
  padding: 6px 12px;
  background: #fffbeb;               /* very pale amber */
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.hub-closed-cal-subpill {
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
  white-space: nowrap;
}
.hub-closed-cal-subpill em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: #b45309;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 3px;
  opacity: 0.85;
}
.hub-closed-cal-subpill.is-missing { color: #d4a574; font-weight: 600; }
.hub-closed-cal-subpill.is-missing em { color: #e7c899; }
.hub-closed-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.hub-closed-cal-weekday {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim, #6e7781);
  text-align: center;
  padding: 4px 0;
}
.hub-closed-cal-cell {
  min-height: 42px;
  border: 1px solid transparent;
  background: #fafbfc;
  border-radius: 7px;
  padding: 4px 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  cursor: default;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
  box-sizing: border-box;
}
.hub-closed-cal-cell.hub-closed-cal-blank {
  background: transparent;
  border-color: transparent;
}
.hub-closed-cal-cell.no-closes {
  /* Days with no closes show the day number only — subtle, non-interactive. */
  color: var(--text-dim, #6e7781);
  cursor: default;
}
.hub-closed-cal-cell.has-closes {
  background: #ecfdf5;             /* very pale emerald to match Net Closed tile */
  border-color: #a7f3d0;
  cursor: pointer;
}
.hub-closed-cal-cell.has-closes:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}
.hub-closed-cal-cell.has-closes:active {
  transform: scale(0.98);
}
.hub-closed-cal-cell.is-today .hub-closed-cal-num {
  background: #10b981;             /* matches Net Closed gradient end */
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: -3px;
}
.hub-closed-cal-cell.is-selected {
  outline: 2px solid #047857;      /* matches Net Closed gradient start */
  outline-offset: -2px;
}
.hub-closed-cal-num {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.hub-closed-cal-amount {
  font-size: 12px;
  font-weight: 700;
  color: #047857;                  /* matches Net Closed dark stop */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  margin-top: auto;
}

/* Inline drill-down — appears below the grid when a day with closes
   is clicked. Replaces nothing else; just expands the calendar card. */
.hub-closed-drill {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e1e4e8);
}
.hub-closed-drill-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.hub-closed-drill-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #24292f);
}
.hub-closed-drill-total {
  font-size: 13px;
  font-weight: 700;
  color: #047857;                  /* matches Net Closed dark stop */
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.hub-closed-drill-close {
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  color: var(--text-dim, #6e7781);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  margin-left: 4px;
}
.hub-closed-drill-close:hover {
  background: #f6f8fa;
  color: var(--text, #24292f);
}
.hub-closed-drill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.hub-closed-drill-row:hover { background: #f6f8fa; }
.hub-closed-drill-street {
  font-weight: 500;
  color: var(--text, #24292f);
  display: flex; align-items: center; gap: 8px;
}
.hub-closed-drill-state {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-dim, #6e7781);
  background: #eef0f3;
  padding: 1px 5px;
  border-radius: 4px;
}
.hub-closed-drill-fee {
  font-weight: 700;
  color: #0f766e;
  font-variant-numeric: tabular-nums;
}

/* ─── Goal Setting (right side) ─────────────────────────────────────── */
.hub-goals {
  border-left: 1px solid var(--border);
  background: #fafbfc;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  box-sizing: border-box;
}
.hub-goal-row { min-width: 0; }
.hub-goals-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.hub-goal-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hub-goal-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}
.hub-goal-input-wrap {
  display: flex;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.hub-goal-input {
  flex: 1 1 0;
  /* min-width: 0 lets the input shrink below its content-size; without
     it the default flex `min-width: auto` keeps the input at full size
     and pushes the + button off the right edge of the panel. */
  min-width: 0;
  width: 100%;
  height: 30px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  /* Hide the spinner buttons — the +1 button replaces them. */
  -moz-appearance: textfield;
}
.hub-goal-input::-webkit-outer-spin-button,
.hub-goal-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hub-goal-input:focus {
  outline: none;
  border-color: #34a853;
  box-shadow: 0 0 0 2px rgba(52, 168, 83, 0.12);
}
body.section-houses .hub-goal-input:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.12);
}
.hub-goal-plus {
  width: 30px;
  height: 30px;
  background: #34a853;
  border: 1px solid #137333;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s;
  flex: 0 0 auto;
}
.hub-goal-plus:hover { background: #2c8e45; }
.hub-goal-plus:active { transform: translateY(1px); }
body.section-houses .hub-goal-plus {
  background: #dc3545;
  border-color: #b02a37;
}
body.section-houses .hub-goal-plus:hover { background: #b02a37; }
.hub-goals-reset-hint {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  margin: 6px 0 8px;
  line-height: 1.4;
}
/* ─── Drafting buttons (EMAIL + CONTRACT) ───────────────────────────
   Sit between the Goal Setting block and the Distribute card. Two
   side-by-side buttons that open the email picker and the contract
   create form respectively — both flows used to live behind a
   standalone DRAFTING pill, but Drafting is now embedded directly
   into Hub > Tasks. Styled neutral gray (matches `.hub-goal-plus`
   and the goals' visual weight) so they don't compete with the bold
   red Distribute card or the green/red In Escrow card below. */
.hub-drafting-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.hub-drafting-btn {
  /* All four drafting buttons (EMAIL, CONTRACT, DOCUSIGN, PDF EDITOR) are
     now full-width on their own row. flex:0 0 auto cancels the column
     parent's flex-grow so they don't stretch vertically; margin-top:8px
     gives consistent spacing. */
  display: block;
  width: 100%;
  flex: 0 0 auto;
  margin-top: 8px;
  background: #1f2328;
  border: 1px solid #1f2328;
  border-radius: 10px;
  padding: 10px 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  color: #fff;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.hub-drafting-btn:hover {
  background: #000;
  border-color: #000;
}
.hub-drafting-btn:active { transform: translateY(1px); }
.hub-drafting-btn:focus-visible {
  outline: 2px solid #1f2328;
  outline-offset: 2px;
}
/* Full-width single-button row for the PDF EDITOR entry. Sits directly
   under the EMAIL/CONTRACT pair — same hub-drafting-btn styling but
   spans the full panel width and gets its own top margin so it reads
   as a separate row. */
.hub-pdf-editor-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  /* Same fix as .hub-docusign-btn — cancel inherited flex:1 1 0 so this
     full-width button doesn't grow to fill vertical space inside the
     hub-goals flex-column parent. */
  flex: 0 0 auto;
}
/* DOCUSIGN — black-filled variant of the full-width hub-drafting-btn.
   Sits between the EMAIL/CONTRACT row and PDF EDITOR. The dark fill
   makes it visually distinct from the neutral gray buttons above
   without competing with the bold red Distribute card below. */
.hub-docusign-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: #1f2328;
  border-color: #1f2328;
  color: #fff;
  /* Cancel the flex:1 1 0 inherited from hub-drafting-btn — it was meant
     for the EMAIL/CONTRACT row's horizontal split, but in the
     hub-goals flex-column parent it stretches the button to fill all
     leftover vertical space. flex-shrink:0 keeps it at content height. */
  flex: 0 0 auto;
}
.hub-docusign-btn:hover {
  background: #000;
  border-color: #000;
}
.hub-docusign-btn:focus-visible {
  outline-color: #1f2328;
}

/* ─── Distribute card ───────────────────────────────────────────────
   Sits above the In Escrow card. Shows the count of signed PSAs with
   no Assignment yet (need to be distributed). Bold red label so it
   reads as a "to-do alert" — same red across both Land and Houses.
   Now a clickable button — opens the full Distribute list view
   (signed PSAs missing Assignments). Same hover/focus pattern as
   the In Escrow card below. */
.hub-distribute-card {
  margin-top: auto; /* push down to the bottom of the column */
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #f5b1b8;
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  display: block;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.hub-distribute-card:hover {
  background: #fef2f3;
  border-color: #e98c95;
}
.hub-distribute-card:active { transform: translateY(1px); }
.hub-distribute-card:focus-visible {
  outline: 2px solid #b02a37;
  outline-offset: 2px;
}
.hub-distribute-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #b02a37;
  margin-bottom: 6px;
}
.hub-distribute-stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.hub-distribute-count {
  font-size: 22px;
  font-weight: 800;
  color: #b02a37;
}
.hub-distribute-files {
  font-size: 11px;
  color: #b02a37;
  font-weight: 600;
}
/* Inline pill that shows the distribute count next to the
   "Need assignment" label in the sidebar list header. Mirrors
   .escrow-amount-badge but in red to match the card. */
.distribute-amount-badge {
  display: inline-block;
  background: #fde8ea;
  color: #b02a37;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: 1px;
}

.hub-escrow-card {
  /* Now a button — clickable, opens the full In Escrow list view
     (moved here from Drafting > Contract). The Distribute card above
     overrode `margin-top: auto`, so the In Escrow card now sits in
     normal flow directly under it (Distribute pushes both down to the
     bottom of the right panel). */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  display: block;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.hub-escrow-card:hover {
  background: #f1f3f4;
  border-color: var(--border-strong, #bdc1c6);
}
.hub-escrow-card:active { transform: translateY(1px); }
.hub-escrow-card:focus-visible {
  outline: 2px solid #34a853;
  outline-offset: 2px;
}
body.section-houses .hub-escrow-card:focus-visible { outline-color: #dc3545; }
.hub-escrow-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.hub-escrow-stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}
.hub-escrow-count {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}
.hub-escrow-files {
  font-size: 11px;
  color: var(--text-dim);
}
.hub-escrow-amount {
  font-size: 16px;
  font-weight: 800;
  color: #137333;
}
body.section-houses .hub-escrow-amount { color: #b02a37; }

/* Responsive: stack the right panel under the grid on narrower viewports
   (still desktop-only — mobile hides Tasks entirely). */
@media (max-width: 1100px) {
  .hub-tasks-body { grid-template-columns: 200px 1fr; }
  .hub-goals {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--border);
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
    overflow-x: auto;
  }
  .hub-goal-row { flex: 1 1 auto; min-width: 140px; }
  .hub-goals-title { display: none; }
  .hub-goals-reset-hint { display: none; }
  .hub-escrow-card { margin-top: 0; min-width: 160px; }
  .hub-distribute-card { margin-top: 0; min-width: 160px; }
}

/* Motivational quote — sits inside the schedule column, below the
   grid. No border or background — it just floats on the white space
   under the schedule, centered in the middle column. The schedule
   column is `.hub-grid-wrap` so the quote inherits its width without
   affecting the side panels. Rotates every 3 hours, server-anchored
   to 6 AM CST. */
.hub-quote-bar {
  padding: 24px 14px 8px;
  text-align: center;
}
.hub-quote-text {
  font-size: 22px;
  font-style: italic;
  font-weight: 800;
  color: #137333; /* Land theme */
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.4;
  letter-spacing: 0.2px;
}
body.section-houses .hub-quote-text {
  color: #b02a37; /* Houses theme */
}

/* Other-user picker (read-only) — lives inside the schedule column
   so picking a user only stretches the middle column, not the side
   panels (palette and Goal Setting). No border-top or solid bg now
   that it's nested under the schedule grid + quote. */
.hub-others {
  padding: 18px 14px 14px;
  margin-top: 8px;
  border-top: 1px dashed var(--border);
}
.hub-others-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.hub-user-picker-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.hub-user-picker {
  flex: 1 1 auto;
  max-width: 360px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.hub-user-picker:focus { outline: none; border-color: #34a853; box-shadow: 0 0 0 3px rgba(52,168,83,0.12); }
.hub-user-clear {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
}
.hub-user-clear:hover { background: var(--panel); color: var(--text); }
.hub-user-empty {
  padding: 20px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.hub-other-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.hub-other-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hub-other-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #6db3eb; color: #fff;
  font-weight: 700; font-size: 11px;
}
.hub-other-name { font-weight: 700; font-size: 13px; }
.hub-other-status { margin-left: auto; font-size: 11px; color: var(--text-dim); }
.hub-other-status.active { color: #137333; font-weight: 700; }
.hub-other-status.mobile { color: #9aa0a6; font-weight: 600; }

/* ─── Houses-section colour overrides for Hub Tasks ────────────────────
   The Hub UI was designed in green (Land's accent). When the user is
   in the Houses section the body has class .section-houses and
   accents flip to red. Override every green-hardcoded rule here so
   the entire Tasks panel reads red end-to-end. */
body.section-houses .hub-doing-now-btn {
  background: #fee2e2;
  border-color: rgba(220, 53, 69, 0.45);
  color: #b02a37;
}
body.section-houses .hub-doing-now-dot { background: #dc3545; }
body.section-houses .hub-active-pill .dot { background: #dc3545; }
body.section-houses .hub-palette-item:hover {
  background: #fee2e2;
}
body.section-houses .hub-state-chip:hover {
  background: #fee2e2;
  border-color: #dc3545;
  color: #b02a37;
}
body.section-houses .hub-add-btn:hover {
  border-color: #dc3545;
  color: #b02a37;
  background: #fee2e2;
}
body.section-houses .hub-grid-header.today .day-num { color: #b02a37; }
body.section-houses .hub-cell.dragover {
  border-color: #dc3545;
  background: #fee2e2;
}
body.section-houses .hub-cell .pill.city {
  background: #fee2e2;
  color: #b02a37;
  border: 1px solid rgba(220, 53, 69, 0.45);
}
body.section-houses .hub-user-picker:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}
body.section-houses .hub-other-status.active { color: #b02a37; }

/* Mobile — Tasks sub-tab IS visible (un-hidden 2026-06-06, per operator
   request). The hub-tasks layout collapses to a single column on narrow
   screens via the rule below + the @media 1180/980/540 hub rules (hero grid
   stacks, KPI strip 1-col, quick-actions stay 3-up). */
@media (max-width: 700px) {
  .hub-tasks-body { grid-template-columns: 1fr; }
  .hub-palette { border-right: none; border-bottom: 1px solid var(--border); }

  /* Tasks must SCROLL on a phone. The desktop layout uses flex:1 + min-height:0
     everywhere to fit the viewport with NO scroll — on mobile that crushes the
     calendar / pipeline / actions into an unusable sliver. Let each section take
     its natural height and the shell scroll vertically instead. */
  .hub-tasks-shell { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .hub-hero-grid { flex: 0 0 auto; min-height: 0; }
  .hub-hero-cal, .hub-hero-rail, .hub-closed-calendar { min-height: 0; height: auto; }
  .hub-pipeline-section, .hub-numhealth { max-height: none; }
  /* KPI strip + calendar shouldn't force horizontal overflow on a narrow phone. */
  .hub-kpi-strip, .hub-hero-grid, .hub-closed-calendar { min-width: 0; max-width: 100%; }
}

/* DM picker */
.chat-dm-picker {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: #f0f9f3;
}
.chat-dm-picker .chat-online-list {
  margin-top: 4px;
}
.chat-header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.chat-users-btn,
.chat-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  padding: 4px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.chat-users-btn:hover,
.chat-close-btn:hover {
  background: var(--border);
  color: var(--text);
}
.chat-close-btn {
  font-size: 20px;
  line-height: 1;
}

/* Online users list */
.chat-online {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: #f0f9f3;
  max-height: 150px;
  overflow-y: auto;
}
.chat-online.hidden { display: none; }
.chat-online-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.chat-online-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-online-list li {
  font-size: 12px;
  padding: 2px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}
.chat-online-list li:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* DM bar */
.chat-dm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #eff6ff;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--accent);
}
.chat-dm-bar.hidden { display: none; }
.chat-dm-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-dim);
  padding: 0 4px;
}

/* Messages area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 200px;
  max-height: 320px;
}

.chat-msg {
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}
.chat-msg-user {
  font-weight: 700;
  margin-right: 6px;
}
.chat-msg-time {
  font-size: 10px;
  color: var(--text-dim);
  margin-right: 6px;
}
.chat-msg-system {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  padding: 2px 0;
}
.chat-msg-dm {
  background: #eff6ff;
  border-radius: 8px;
  padding: 4px 8px;
}

/* Clickable URLs in chat messages. Rendered as <a target="_blank">. */
.chat-link {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.chat-link:hover {
  color: #1e3a8a;
  text-decoration-thickness: 2px;
}
/* Blocked adult-content links: rendered as plain greyed-out text with a
   "(blocked)" tag. Not clickable. */
.chat-link-blocked {
  color: var(--text-dim);
  text-decoration: line-through;
  opacity: 0.65;
  word-break: break-all;
}
.chat-link-blocked-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  vertical-align: baseline;
  text-decoration: none;
  text-transform: uppercase;
}

/* Address chip — renders an inline address followed by MAP / ZILLOW buttons */
.chat-addr {
  display: inline;
  white-space: normal;
}
.chat-addr-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.4;
  vertical-align: baseline;
  border: 1px solid #34d399;
  background: #ecfdf5;
  color: #047857;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chat-addr-btn:hover {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}
.chat-addr-btn-zillow {
  border-color: #60a5fa;
  background: #eff6ff;
  color: #1d4ed8;
}
.chat-addr-btn-zillow:hover {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}
.chat-addr-btn svg {
  flex: 0 0 auto;
}

/* Command suggestions dropdown */
.chat-cmd-suggestions {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 12px;
  right: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 4px;
  z-index: 10;
}
.chat-cmd-suggestions.visible { display: block; }
.chat-cmd-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.chat-cmd-item:hover,
.chat-cmd-item.active {
  background: var(--panel-2);
}
.chat-cmd-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.chat-cmd-desc {
  font-size: 11px;
  color: var(--text-dim);
}

/* Input bar */
.chat-input-bar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  position: relative;
}
.chat-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  background: var(--panel);
  color: var(--text);
}
.chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.12);
}
.chat-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.chat-send-btn:hover { background: #0550ae; }

/* Mobile chat adjustments */
@media (max-width: 600px) {
  /* Fullscreen floating chat panel — only applies when the panel is NOT
     embedded inside the persistent sidebar container. Without this guard,
     z-index: 1200 leaks in and the fixed bottom nav bar ends up covered. */
  .chat-panel:not(.chat-persistent *) {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-height: none;
    border-radius: 0;
    border: none;
    z-index: 1200;
  }
  .chat-messages,
  .chat-view .chat-messages {
    flex: 1;
    min-height: 0;
    max-height: none !important;
  }
  .chat-input-bar {
    position: sticky;
    bottom: 0;
    background: var(--panel);
    z-index: 2;
  }
  .chat-toggle {
    bottom: 14px;
    left: 14px;
    width: 48px;
    height: 48px;
  }
}

/* ══════════════════════════════════════════════════════════
   NEW DM CONTACT LIST + CONVERSATION + CALL UI
   ══════════════════════════════════════════════════════════ */

/* ── Header action buttons ── */
.chat-new-dm-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.chat-new-dm-btn:hover { background: #0550ae; }

.chat-online-dot-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glow-dot {
  width: 12px;
  height: 12px;
  background: #22c55e;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 6px #22c55e, 0 0 12px rgba(34,197,94,0.4);
  animation: glow-pulse 2s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 6px #22c55e, 0 0 12px rgba(34,197,94,0.4); }
  50% { box-shadow: 0 0 10px #22c55e, 0 0 20px rgba(34,197,94,0.6); }
}

/* ── DM view: side-by-side layout (contacts left, conversation right) ── */
#chatViewDm {
  flex-direction: row !important;
}

/* ── DM contact panel ── */
.dm-contact-panel {
  display: flex;
  flex-direction: column;
  width: 260px;
  min-width: 200px;
  border-right: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.dm-search-box {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.dm-search-box input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  background: var(--panel);
  color: var(--text);
}
.dm-search-box input:focus {
  border-color: var(--accent);
}
.dm-contact-list {
  flex: 1;
  overflow-y: auto;
}
.dm-contact-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s;
  border-left: 3px solid transparent;
  gap: 10px;
}
.dm-contact-item:hover { background: rgba(9,105,218,0.06); }
.dm-contact-item.active {
  background: rgba(9,105,218,0.1);
  border-left-color: var(--accent);
}
.dm-contact-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}
.dm-contact-avatar .online-dot {
  width: 9px;
  height: 9px;
  background: #22c55e;
  border: 2px solid var(--panel);
  border-radius: 50%;
  position: absolute;
  bottom: -1px;
  right: -1px;
}
.dm-contact-info {
  flex: 1;
  min-width: 0;
}
.dm-contact-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-contact-status {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 1px;
}
.dm-calling-text {
  font-size: 11px;
  color: #ef4444;
  font-style: italic;
  margin-top: 1px;
  animation: pulse-text 1.5s ease-in-out infinite;
}
@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── DM empty state (shown when no conversation selected) ── */
.dm-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  gap: 8px;
}
.dm-empty-icon { font-size: 40px; opacity: 0.5; }
.dm-empty-state p { font-size: 14px; }

/* ── DM conversation view ── */
.dm-conversation {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.dm-conversation.hidden { display: none; }
.dm-conv-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.dm-conv-back {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-dim);
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}
.dm-conv-back:hover { background: var(--border); color: var(--text); }
.dm-conv-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.dm-call-btn {
  background: #22c55e;
  color: #fff;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.dm-call-btn:hover { background: #16a34a; }
.dm-call-btn:disabled { background: #ccc; cursor: not-allowed; }

.dm-conv-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
}
/* In floating panel mode, cap height */
.chat-panel:not(.chat-persistent *) .dm-conv-messages {
  max-height: 280px;
}
.dm-date-separator {
  text-align: center;
  color: var(--text-dim);
  font-size: 11px;
  margin: 8px 0;
  font-weight: 500;
}
.dm-bubble {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
}
.dm-bubble.sent {
  background: var(--accent);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.dm-bubble.received {
  background: var(--panel-2);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border);
}
.dm-bubble-time {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 3px;
}
.dm-bubble.sent .dm-bubble-time {
  color: rgba(255,255,255,0.65);
  text-align: right;
}

.dm-conv-input {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.dm-conv-input input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  font-size: 13px;
  outline: none;
  background: var(--panel);
  color: var(--text);
}
.dm-conv-input input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(9,105,218,0.12);
}
.dm-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.dm-send-btn:hover { background: #0550ae; }

/* ── Incoming call overlay ── */
.call-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1300;
}
.call-modal {
  background: #1a1a2e;
  border-radius: 20px;
  padding: 32px;
  width: 300px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.call-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0 auto 14px;
}
.call-name {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.call-status-text {
  font-size: 13px;
  color: #aaa;
  margin-bottom: 24px;
}
.call-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.call-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 14px;
  transition: transform 0.15s;
}
.call-action-btn:hover { transform: scale(1.05); }
.call-action-btn.accept { background: #22c55e; color: #fff; }
.call-action-btn.decline { background: #ef4444; color: #fff; }

/* ── Floating call bar ── */
.call-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  border-radius: 40px;
  padding: 6px 14px 6px 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  z-index: 1250;
  min-width: 260px;
}
.call-bar-avatar .dm-contact-avatar,
.call-bar-avatar .contact-avatar {
  width: 32px;
  height: 32px;
  font-size: 11px;
}
.call-bar-info { flex: 1; }
.call-bar-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.call-bar-timer {
  font-size: 11px;
  color: #22c55e;
}
.call-bar-volume {
  display: flex;
  align-items: center;
  gap: 3px;
}
.call-bar-volume input[type="range"] {
  width: 55px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.call-bar-volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.call-bar-volume input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}
.call-bar-mute {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.call-bar-mute:hover { background: rgba(255,255,255,0.25); }
.call-bar-mute.muted { background: #ef4444; }
.call-bar-end {
  background: #ef4444;
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.call-bar-end:hover { background: #dc2626; }

/* ── Chat modals (Server Status, New DM, Access Code) ── */
.chat-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}
/* The Access Code modal uses classList.add('visible') to open, so we need
   to beat the inline style="display:none;" with a class rule. */
.chat-modal-overlay.visible {
  display: flex !important;
}
.chat-modal {
  background: var(--panel);
  border-radius: 14px;
  width: 380px;
  max-height: 440px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.chat-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
}
.chat-modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.chat-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-dim);
  line-height: 1;
}
.chat-modal-body {
  padding: 10px 16px 16px;
  overflow-y: auto;
  flex: 1;
}
.chat-modal-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  margin-bottom: 10px;
  background: var(--panel);
  color: var(--text);
}
.chat-modal-search:focus { border-color: var(--accent); }

/* Status sections in Server Status modal */
.status-section { margin-bottom: 12px; }
.status-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0 6px;
}
.online-label { color: #22c55e; }
.offline-label { color: var(--text-dim); }
.status-user {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  gap: 8px;
}
.status-user .dm-contact-avatar {
  width: 28px;
  height: 28px;
  font-size: 10px;
}
.status-user .dm-contact-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.status-user.offline-user { opacity: 0.5; }

/* New DM modal online list */
.dm-online-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-online-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  gap: 8px;
}
.dm-online-item:hover { background: rgba(9,105,218,0.06); }
.dm-online-item .dm-contact-avatar {
  width: 30px;
  height: 30px;
  font-size: 11px;
}
.dm-online-item .dm-contact-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.dm-online-status {
  margin-left: auto;
  font-size: 11px;
  color: #22c55e;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   VOICE CHANNEL (Discord-style split layout)
   ══════════════════════════════════════════════════════════ */

/* 3-column layout: left channels | center blocks | right chat */
.vc-layout {
  display: flex;
  flex-direction: row !important;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #e8e9ec;
}
/* When a 1:1 call takes over, #dmCallLayout shows as a sibling of .vc-layout and
   the JS adds `hidden` to .vc-layout to get out of the way. But this stylesheet
   has no generic `.hidden` rule, and .vc-layout sets display:flex — so the class
   did nothing, leaving BOTH layouts as flex children of the column-direction
   .chat-view and splitting the height 50/50. That was the "call only fills half
   the screen" glitch. Scope the collapse here so the call goes full-bleed. */
.vc-layout.hidden { display: none !important; }
.vc-left {
  width: 220px;
  min-width: 180px;
  flex-shrink: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.vc-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #e8e9ec;
  overflow: hidden;
}
.vc-chat-panel {
  width: 300px;
  min-width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--border);
  overflow: hidden;
}

/* Left sidebar content */
.vc-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  padding: 10px 8px 4px;
}

/* Multi-channel list: one row per voice channel, members nested under */
.vc-channel-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px 8px;
}
.vc-channel-group {
  margin-bottom: 2px;
}
.vc-channel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-dim);
  font: inherit;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.vc-channel-row:hover {
  background: var(--panel-2);
  color: var(--text);
}
.vc-channel-row.active {
  background: rgba(9,105,218,0.1);
  color: var(--accent);
  font-weight: 600;
}
.vc-channel-row .vc-channel-icon {
  flex-shrink: 0;
}
.vc-channel-row .vc-channel-name {
  flex: 1;
  font-size: 14px;
}
.vc-channel-row .vc-channel-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--panel-2);
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  min-width: 22px;
  text-align: center;
}
.vc-channel-row.active .vc-channel-count {
  background: rgba(9,105,218,0.15);
  color: var(--accent);
  border-color: rgba(9,105,218,0.3);
}
.vc-channel-members {
  padding: 2px 0 4px 24px;
}

/* Bottom-pinned error strip inside the voice-channel rail. Appears when
   the server denies a join (e.g. "Channel Full" on a private room). */
.vc-left-toast {
  margin: 6px 8px 10px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #cf222e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 8px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.vc-left-toast.visible {
  opacity: 1;
  transform: translateY(0);
}
.vc-channel {
  margin-bottom: 2px;
  padding: 0 8px;
}
.vc-channel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
  color: var(--text-dim);
}
.vc-channel-header:hover {
  background: var(--panel-2);
  color: var(--text);
}
.vc-channel-header.active {
  background: rgba(9,105,218,0.08);
  color: var(--accent);
}
.vc-channel-icon { flex-shrink: 0; }
.vc-channel-name {
  font-size: 14px;
  font-weight: 500;
}

/* Members nested under channel */
.vc-members {
  padding-left: 30px;
}
.vc-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 1px;
}
.vc-member:hover { background: var(--panel-2); }
.vc-member-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.vc-member-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* Voice Connected bar (bottom — just buttons) */
.vc-connected-bar {
  background: var(--panel-2);
  border-top: 1px solid var(--border);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
}
.vc-connected-bar.hidden { display: none; }
.vc-ctrl-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.vc-ctrl-btn:hover { background: var(--border); color: var(--text); }
.vc-ctrl-btn.muted {
  color: #ef4444;
  position: relative;
}
.vc-ctrl-btn.muted::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 24px;
  background: #ef4444;
  transform: rotate(45deg);
  border-radius: 1px;
}
.vc-disconnect-btn {
  background: #ef4444;
  color: #fff;
  border-radius: 4px;
}
.vc-disconnect-btn:hover { background: #dc2626; color: #fff; }

/* Volume slider in connected bar */
.vc-vol-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--text-dim);
}
.vc-vol-wrap input[type="range"] {
  width: 50px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.vc-vol-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.vc-vol-wrap input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

/* ── Center header ── */
.vc-center-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #d1d3d6;
  background: #e8e9ec;
  color: #313338;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
.vc-center-header svg { fill: #6d6f78; }

/* ── Screen share / user blocks area ── */
.vc-blocks {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-content: center;
  justify-content: center;
}
.vc-blocks-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 120px;
  color: #80848e;
}
.vc-blocks-empty p {
  margin: 0;
  font-size: 14px;
  color: #6d6f78;
}
.vc-blocks-empty svg { fill: #b5bac1; }
.vc-blocks-sub {
  font-size: 12px !important;
  color: #949ba4 !important;
}

/* Individual user block — large tile like Discord video. Modernized:
   subtle gradient bg, rounded corners, soft shadow that lifts on hover,
   bigger avatar, name overlay floats with backdrop-blur. Click opens
   the per-user volume popover (handled in JS). */
.vc-user-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 280px;
  height: 200px;
  background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #eef0f3;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s, border-color 0.18s;
  position: relative;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.vc-user-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 8px 20px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}
.vc-user-block.is-you {
  cursor: default;
  background: linear-gradient(160deg, #f1f5f9 0%, #e2e8f0 100%);
}
.vc-user-block.is-you:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
  border-color: #eef0f3;
}
.vc-user-block-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.10);
  transition: transform 0.18s;
}
.vc-user-block:hover .vc-user-block-avatar {
  transform: scale(1.04);
}
.vc-user-block-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  /* Lifted up so the volume strip can sit below it at the bottom edge.
     Layout from bottom up: volume strip (12px from bottom, ~28px tall)
     → 8px gap → name pill (this one). */
  bottom: 48px;
  /* Classic center-with-translate so the pill auto-fits its content
     (name + status icons) and stays horizontally centered. */
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* "Remove from channel" (kick) button — shown only to the voice admin
   (Maximos) on every OTHER member's block, top-right corner. Subtle red
   circle; fully opaque on block hover, fills red on button hover. The
   server enforces the gate too (voice-kick is rejected for non-admins). */
.vc-user-block-kick {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(220, 38, 38, 0.25);
  background: rgba(255, 255, 255, 0.92);
  color: #dc2626;
  cursor: pointer;
  opacity: 0.55;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: opacity 0.12s, background-color 0.12s, transform 0.08s, border-color 0.12s, color 0.12s;
}
.vc-user-block:hover .vc-user-block-kick { opacity: 1; }
.vc-user-block-kick:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
  opacity: 1;
}
.vc-user-block-kick:active { transform: scale(0.92); }

/* Inline per-user volume strip — sits at the top of every non-self
   user-block, always visible. Slider goes 0–2.0 (200% boost) so quiet
   users can be amplified beyond 100%. Reset button (↺) snaps back
   to default. Saved per-peer to localStorage. */
.vc-user-block-volume {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 4px 8px;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: background-color 0.12s, box-shadow 0.12s;
}
.vc-user-block:hover .vc-user-block-volume {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.vc-user-block-volume-icon {
  color: #475569;
  flex-shrink: 0;
}
.vc-user-block-volume-slider {
  flex: 1;
  min-width: 0;
  accent-color: #3b82f6;
  height: 14px;
  cursor: pointer;
}
.vc-user-block-volume-pct {
  font-size: 10.5px;
  font-weight: 600;
  color: #475569;
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.vc-user-block-volume-reset {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #64748b;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
.vc-user-block-volume-reset:hover {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

/* (Old click-to-reveal popover kept defined for any external callers
    but no longer triggered from the inline render path.) */
.vc-user-popover {
  position: fixed;
  z-index: 1000;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.12);
  min-width: 280px;
  max-width: 340px;
  font-size: 13px;
  color: #1e293b;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
}
.vc-user-popover.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.vc-user-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}
.vc-user-popover-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.vc-user-popover-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vc-user-popover-close:hover { background: #f1f5f9; color: #0f172a; }
.vc-user-popover-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vc-user-popover-icon { color: #64748b; flex-shrink: 0; }
.vc-user-popover-slider {
  flex: 1;
  min-width: 0;
  accent-color: #3b82f6;
}
.vc-user-popover-pct {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: #475569;
  min-width: 40px;
  text-align: right;
  flex-shrink: 0;
}
.vc-user-popover-reset {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #64748b;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
.vc-user-popover-reset:hover {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.vc-user-popover-hint {
  margin-top: 8px;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}
.vc-user-block-you {
  font-size: 11px;
  color: #949ba4;
  font-weight: 400;
}
.vc-status-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  vertical-align: middle;
}
.vc-status-icon svg {
  display: block;
}
.vc-member-name .vc-status-icon svg {
  width: 12px;
  height: 12px;
}
.vc-user-block.speaking {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px #22c55e, 0 4px 12px rgba(34, 197, 94, 0.18);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.vc-user-block.speaking .vc-user-block-avatar {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.4), 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* ── Screen share video ── */
.vc-screen-container {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin: 8px;
}
.vc-screen-container.hidden { display: none; }
.vc-screen-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
.vc-screen-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
}

/* ─── Maximize button overlay on screen-share video ──────────────────
   Appears top-right of the video. Click toggles .panel-fullscreen on
   the parent .chat-view. Per-user only (purely client-side toggle). */
.vc-screen-fs-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s;
}
.vc-screen-fs-btn:hover { background: rgba(0,0,0,0.8); }
.vc-screen-fs-btn:active { transform: translateY(1px); }

/* Chat-overlay toggle button — only visible when the parent .chat-view
   has .panel-fullscreen. CSS hides it everywhere else. */
.vc-toolbar-fs-chat { display: none !important; }
.chat-view.panel-fullscreen .vc-toolbar-fs-chat { display: inline-flex !important; }
.chat-view.panel-fullscreen.show-chat-overlay .vc-toolbar-fs-chat {
  background: rgba(52, 168, 83, 0.4);
  color: #fff;
}

/* ─── Panel-fullscreen mode (per .chat-view) ─────────────────────────
   Maximizes the screen share to fill the entire HUB panel area. Side
   rails (channels list, text chat) hide; member blocks overlay on top
   of the video with a transparent backdrop; toolbar floats at the
   bottom. The main DealFlow tab bar (outside the chat panel) and the
   Hub sub-tabs both remain visible — only the chat panel internals
   change. Auto-exits when the screen share ends or the user leaves
   the voice/DM call. */
.chat-view.panel-fullscreen .vc-layout {
  position: relative;
  height: 100%;
}
.chat-view.panel-fullscreen .vc-left,
.chat-view.panel-fullscreen .vc-chat-panel {
  display: none;
}
.chat-view.panel-fullscreen.show-chat-overlay .vc-chat-panel {
  /* Slide-in chat overlay activated by the chat toolbar button. */
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  z-index: 6;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-left: 1px solid var(--border);
}
.chat-view.panel-fullscreen .vc-center {
  flex: 1 1 100%;
  width: 100%;
  position: relative;
}
.chat-view.panel-fullscreen .vc-center-header {
  display: none;
}
.chat-view.panel-fullscreen .vc-screen-container {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 1;
}
/* Member blocks overlay on top of the video — transparent backdrop
   with a slight blur on each block so the user can still see the
   stream behind their faces. The blocks container itself is pointer-
   events:none so clicks pass through to the toolbar; individual blocks
   re-enable pointer-events. */
.chat-view.panel-fullscreen .vc-blocks {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  background: transparent !important;
  z-index: 3;
  pointer-events: none;
  max-height: none;
  padding: 8px 16px;
}
.chat-view.panel-fullscreen .vc-blocks > * {
  pointer-events: auto;
  background: rgba(28, 28, 30, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 8px;
}
.chat-view.panel-fullscreen .vc-blocks-empty { display: none; }
/* Toolbar pinned to the bottom, centered, prominent over the video. */
.chat-view.panel-fullscreen .vc-toolbar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: rgba(28, 28, 30, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
/* When screen is active, shrink blocks to a compact row */
.vc-blocks.has-screen {
  flex: 0 0 auto;
  align-content: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 0;
  max-height: 60px;
  overflow: hidden;
}
.vc-blocks.has-screen .vc-user-block {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 4px 10px;
  flex-direction: row;
  gap: 6px;
}
.vc-blocks.has-screen .vc-user-block-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.vc-blocks.has-screen .vc-user-block-name {
  position: static;
  background: none;
  font-size: 12px;
  padding: 0;
}
.vc-blocks.has-screen .vc-blocks-empty { display: none; }

/* Active toolbar button (screen sharing) */
.vc-toolbar-btn.active {
  background: #22c55e;
  color: #fff;
}
.vc-toolbar-btn.active:hover { background: #16a34a; }

/* ── Center bottom toolbar (Discord-style) ── */
.vc-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: #dcdee1;
  border-top: 1px solid #d1d3d6;
  flex-shrink: 0;
}
.vc-toolbar.hidden { display: none; }
.vc-toolbar-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: none;
  color: #5c5e66;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.vc-toolbar-btn:hover { background: #f0f0f0; color: #313338; }
.vc-toolbar-btn.muted {
  color: #ef4444;
  position: relative;
}
.vc-toolbar-btn.muted::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 26px;
  background: #ef4444;
  transform: rotate(45deg);
  border-radius: 1px;
}
.vc-toolbar-disconnect {
  background: #ef4444 !important;
  color: #fff !important;
  width: 48px;
  border-radius: 20px;
}
.vc-toolbar-disconnect:hover { background: #dc2626 !important; }

/* ── Right: chat panel ── */
.vc-chat-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
.vc-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  background: #fff;
}
.vc-chat-msg {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  word-break: break-word;
}
/* Copy-text button rendered next to every chat message. Subtle (low-
   opacity icon-only) and only fully visible on hover of the surrounding
   message; the .copied state flashes the success colour for 1.2s. */
.chat-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 18px; height: 18px;
  margin-left: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.vc-chat-msg:hover .chat-copy-btn,
.dm-bubble:hover .chat-copy-btn,
.agent-directive-msg-bubble:hover .chat-copy-btn {
  opacity: 1;
}
.chat-copy-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
}
.chat-copy-btn.copied {
  color: #1a7f37;
  opacity: 1 !important;
}
.chat-copy-btn svg {
  display: block;
}
.vc-chat-msg-user {
  font-weight: 700;
  margin-right: 6px;
  color: var(--text);
}
.vc-chat-msg-time {
  font-size: 10px;
  color: var(--text-dim);
  margin-right: 6px;
}
.vc-chat-msg-system {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
}
.vc-chat-input {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: #fff;
  border-radius: 0 0 0 0;
}
.vc-chat-input input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  background: var(--panel);
  color: var(--text);
}
.vc-chat-input input::placeholder { color: var(--text-dim); }
.vc-chat-input input:focus {
  box-shadow: 0 0 0 2px rgba(9,105,218,0.12);
  border-color: var(--accent);
}
.vc-chat-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #0969da;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.vc-chat-send:hover { background: #0550ae; }

/* ── Sidebar persistent voice controls ── */
.sidebar-voice-controls {
  background: var(--panel-2);
  border-radius: 10px;
  margin: 2px 10px 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
}
.sidebar-voice-controls.hidden { display: none; }

/* Disconnect button — full width, top */
.svc-disconnect {
  background: #ef4444 !important;
  color: #fff !important;
  width: 100%;
  height: 32px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  font-size: 0;
}
.svc-disconnect:hover { background: #dc2626 !important; }

/* 3-button grid row */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
}
.svc-btn {
  height: 32px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.svc-btn:hover { background: var(--border); color: var(--text); }
.svc-btn.muted {
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.06);
  position: relative;
}
.svc-btn.muted::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 20px;
  background: #ef4444;
  transform: rotate(45deg);
  border-radius: 1px;
}
.svc-btn.active {
  background: #22c55e;
  color: #fff;
  border-color: #22c55e;
}
.svc-btn.active:hover { background: #16a34a; border-color: #16a34a; }

/* Volume slider — bottom */
.svc-vol {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dim);
  width: 100%;
  padding: 0 2px;
}
.svc-vol input[type="range"] {
  flex: 1;
  max-width: 70px;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.svc-vol input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.svc-vol input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

/* ── DM Call 3-column layout ── */
.dm-call-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #e8e9ec;
}
.dm-call-layout.hidden { display: none; }

.dm-call-timer {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: auto;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Contact list in DM call left panel — reuse vc-member styles */
.dm-call-contact-list {
  flex: 1;
  overflow-y: auto;
}

/* ── Sidebar incoming call toast ── */
.sidebar-incoming-call {
  background: var(--panel-2);
  border-radius: 10px;
  margin: 2px 10px 8px;
  padding: 10px;
  border: 1px solid rgba(239,68,68,0.4);
  animation: sic-pulse 1.5s ease-in-out infinite;
}
.sidebar-incoming-call.hidden { display: none; }
@keyframes sic-pulse {
  0%, 100% { border-color: rgba(239,68,68,0.4); }
  50% { border-color: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.3); }
}
.sic-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.sic-avatar {
  flex-shrink: 0;
}
.sic-avatar .dm-contact-avatar {
  width: 28px;
  height: 28px;
  font-size: 10px;
}
.sic-name {
  font-size: 13px;
  font-weight: 600;
  color: #ef4444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sic-label {
  font-size: 11px;
  color: #ef4444;
  font-weight: 500;
}
.sic-actions {
  display: flex;
  gap: 6px;
}
.sic-btn {
  flex: 1;
  height: 30px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s;
}
.sic-accept {
  background: #22c55e;
  color: #fff;
}
.sic-accept:hover { background: #16a34a; }
.sic-decline {
  background: #ef4444;
  color: #fff;
}
.sic-decline:hover { background: #dc2626; }

/* Unread badge on each contact card (red pill on top-right of avatar) */
.dm-contact-unread {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--terminate, #cf222e);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 10px;
  border: 2px solid var(--panel);
  box-sizing: content-box;
}
.dm-contact-list-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

/* ──────────────────────────────────────────────────────────────
   MOBILE DM TAB: contact list becomes a block grid; tapping a
   block opens a fullscreen conversation view with a back arrow
   in the header. Desktop layout is unchanged.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Contact panel: full width, full height, no right border */
  #chatViewDm .dm-contact-panel {
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
  }
  /* Hide empty state on mobile — the blocks grid IS the default view */
  #chatViewDm .dm-empty-state { display: none !important; }

  /* Search box: roomier on mobile */
  #chatViewDm .dm-search-box { padding: 10px 12px; }
  #chatViewDm .dm-search-box input {
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 10px;
  }

  /* Contact list becomes a grid of blocks */
  #chatViewDm .dm-contact-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    padding: 12px;
    align-content: start;
  }

  /* Each contact = centered block (avatar + name), square-ish */
  #chatViewDm .dm-contact-item {
    flex-direction: column;
    gap: 10px;
    padding: 14px 10px;
    border-left: none !important;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel);
    text-align: center;
    transition: transform 0.1s, background 0.15s, border-color 0.15s;
  }
  #chatViewDm .dm-contact-item:hover,
  #chatViewDm .dm-contact-item:active {
    background: rgba(9,105,218,0.06);
    transform: scale(0.98);
  }
  #chatViewDm .dm-contact-item.active {
    border-color: var(--accent);
    background: rgba(9,105,218,0.08);
  }
  #chatViewDm .dm-contact-item.offline { opacity: 0.6; }

  /* Big centered avatar */
  #chatViewDm .dm-contact-item .dm-contact-avatar {
    width: 56px !important;
    height: 56px !important;
    font-size: 20px !important;
    margin: 0 auto;
  }
  #chatViewDm .dm-contact-item .dm-contact-avatar .online-dot {
    width: 14px;
    height: 14px;
    bottom: 0;
    right: 0;
  }

  /* Name below; hide online/offline text label (dot is enough) */
  #chatViewDm .dm-contact-item .dm-contact-info {
    width: 100%;
  }
  #chatViewDm .dm-contact-item .dm-contact-name {
    font-size: 13px;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
  }
  #chatViewDm .dm-contact-item .dm-contact-status { display: none; }
  #chatViewDm .dm-contact-item .dm-calling-text {
    font-size: 11px;
    margin-top: 2px;
  }

  /* Fullscreen conversation — covers the contact grid when open */
  #chatViewDm .dm-conversation:not(.hidden) {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--panel);
  }
  #chatViewDm .dm-conv-header {
    padding: 12px 14px;
    gap: 12px;
  }
  /* Bigger, more obvious back arrow */
  #chatViewDm .dm-conv-back {
    width: 40px;
    height: 40px;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
  }
  /* Call button on the right side, bigger tap target */
  #chatViewDm .dm-call-btn {
    width: 40px !important;
    height: 40px !important;
    margin-left: auto;
  }
  #chatViewDm .dm-call-btn svg { width: 20px; height: 20px; }
  #chatViewDm .dm-conv-name { font-size: 16px; }

  /* Conversation body + input on mobile */
  #chatViewDm .dm-conv-messages { padding: 12px 12px; }
  #chatViewDm .dm-conv-input {
    padding: 10px 12px;
    gap: 10px;
  }
  #chatViewDm .dm-conv-input input {
    font-size: 16px;
    padding: 12px 14px;
    min-height: 44px;
    border-radius: 22px;
  }
  #chatViewDm .dm-send-btn {
    width: 44px;
    height: 44px;
  }

  /* Allow the conversation overlay to absolute-position by giving
     its parent a positioning context. */
  #chatViewDm { position: relative; }
}

/* ── Mobile: call bar + overlay adjust ── */
@media (max-width: 600px) {
  .call-bar { min-width: 240px; bottom: 14px; }
  .dm-conv-messages { max-height: none !important; }
  .vc-layout, .dm-call-layout { flex-direction: column !important; }
  .vc-left { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--border); max-height: 140px; }
  .vc-center { min-height: 200px; position: relative; }
  .vc-chat-panel { width: 100%; min-width: 0; border-left: none; border-top: 1px solid var(--border); max-height: 200px; }
  .vc-user-block { width: 140px; height: 120px; }
  .vc-user-block-avatar { width: 40px; height: 40px; font-size: 16px; }

  /* ── In-chat voice toolbars: hidden on mobile (replaced by top-header SVC) ── */
  .vc-toolbar { display: none !important; }
  /* Also hide the bottom-of-left-rail mute/volume/disconnect bar */
  .vc-connected-bar { display: none !important; }
  /* And the floating bottom call bar — top-header SVC replaces it */
  #callBar { display: none !important; }

  /* ── Persistent voice controls (SVC) become a floating pill bar
        at the top of the viewport on mobile, visible regardless of
        which tab you're on, whenever you're in a voice channel or call. ── */
  .sidebar-voice-controls {
    position: fixed !important;
    top: 6px;
    left: 6px;
    right: auto;
    margin: 0 !important;
    padding: 6px !important;
    z-index: 1250;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid #d1d3d6 !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
    width: auto !important;
    max-width: calc(100vw - 64px); /* leave room for home button */
  }
  /* Flatten the 3-button grid so flex order works on all children */
  .sidebar-voice-controls .svc-grid {
    display: contents !important;
  }
  /* Uniform 36px circular buttons, reordered End → Mute → Deafen → Share → Volume */
  .sidebar-voice-controls .svc-btn,
  .sidebar-voice-controls .svc-disconnect {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    flex: 0 0 auto !important;
    background: #fff !important;
    border: 1px solid #d1d3d6 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  .sidebar-voice-controls .svc-disconnect {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    order: 1;
  }
  .sidebar-voice-controls #svcMuteBtn    { order: 2; }
  .sidebar-voice-controls #svcDeafenBtn  { order: 3; }
  /* Mobile users can watch others' screen shares but can't share their own */
  .sidebar-voice-controls #svcScreenBtn  { display: none !important; }
  .sidebar-voice-controls .svc-vol {
    order: 5;
    width: auto !important;
    padding: 0 10px !important;
    height: 36px;
    background: #fff;
    border: 1px solid #d1d3d6;
    border-radius: 18px;
    gap: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  .sidebar-voice-controls .svc-vol input[type="range"] {
    width: 70px !important;
    max-width: 70px !important;
  }

  /* ── Incoming call overlay: fullscreen on mobile ── */
  .call-overlay { background: #1a1a2e; }
  .call-modal {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    padding: 40px 24px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
  }
  .call-avatar {
    width: 120px !important;
    height: 120px !important;
    font-size: 44px !important;
    margin-bottom: 24px !important;
  }
  .call-name {
    font-size: 28px !important;
    margin-bottom: 10px !important;
  }
  .call-status-text {
    font-size: 16px !important;
    margin-bottom: 48px !important;
  }
  .call-actions { gap: 40px !important; }
  .call-action-btn {
    padding: 20px 28px !important;
    font-size: 14px !important;
    border-radius: 20px !important;
  }
  .call-action-btn svg {
    width: 32px !important;
    height: 32px !important;
  }
}

/* Volume slider hidden on desktop (we keep it only in toolbar for mobile) */
@media (min-width: 601px) {
  .vc-toolbar-vol.mobile-only { display: none !important; }
  /* Hide mobile phone icon on desktop (laptop icon is default) */
  .svc-screen-mobile-icon { display: none; }
}

/* ==========================================================================
   CALCULATOR OVERLAY
   Floating draggable window with a basic 4-function calculator on the left
   and an ARV / offer calculator on the right. Toggled by the COMPING >
   CALCULATOR sidebar button. Position + size persist to localStorage.
   Collapses to a full-screen modal on mobile (<=700px).
   ========================================================================== */
.calc-overlay {
  position: fixed;
  top: 80px;
  left: 80px;
  /* Default to the Offer view size. Swapped to a narrower/shorter box
     when the user toggles to Calculator view (see .view-calculator). */
  width: 560px;
  height: 680px;
  background: #fff;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.14);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  transition: width 0.15s ease, height 0.15s ease;
}
.calc-overlay[hidden] { display: none; }
/* Disable size transitions while the user is actively dragging the resize
   handle \u2014 otherwise every mousemove restarts a 150ms animation and
   the window lags noticeably behind the cursor. The transition still
   plays when the user toggles between Calculator and Offer views, which
   is the only place we want a smooth size animation. */
.calc-overlay.resizing {
  transition: none !important;
}
/* Block text selection during resize (visual clean-up). Pointer events
   inside the overlay stay live \u2014 the drag is bound to the handle via
   setPointerCapture in JS, so this doesn't cause cross-talk. */
.calc-overlay.resizing .calc-body,
.calc-overlay.resizing .calc-header {
  user-select: none;
}
/* View sizes. Top-left stays anchored so the window grows/shrinks
   toward the bottom-right, per user's choice A on anchor behavior.
   Both views lay content out side-by-side in a 2-column grid. These
   dimensions are the default AND the maximum for each view \u2014 the
   resize handle can only shrink the window (down to the per-view
   minimums defined in JS: REPAIRS_MIN and OFFER_MIN). */
.calc-overlay.view-repairs { width: 940px; height: 720px; }
.calc-overlay.view-offer   { width: 1000px; height: 720px; }
.calc-overlay.view-saved   { width: 860px; height: 640px; }
/* Only one pane is visible at a time; the other collapses entirely. */
.calc-overlay.view-repairs .calc-pane-right,
.calc-overlay.view-repairs .calc-pane-saved { display: none; }
.calc-overlay.view-repairs .calc-pane-left {
  flex: 1 1 100%;
  border-right: none;
  background: #fff;
}
.calc-overlay.view-offer .calc-pane-left,
.calc-overlay.view-offer .calc-pane-saved { display: none; }
.calc-overlay.view-offer .calc-pane-right { flex: 1 1 100%; }
.calc-overlay.view-saved .calc-pane-left,
.calc-overlay.view-saved .calc-pane-right { display: none; }
.calc-overlay.view-saved .calc-pane-saved {
  display: block;
  flex: 1 1 100%;
  background: #fff;
  overflow: auto;
}

/* ── Saved Offers pane ───────────────────────────────────────────────── */
.saved-offers-root {
  padding: 14px 16px 20px;
  font-size: 13px;
  color: #24292f;
}
.so-empty {
  text-align: center;
  padding: 40px 12px;
  color: #6e7781;
}
.so-empty-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: #24292f; }
.so-empty-sub   { font-size: 13px; }
.so-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}
.so-toolbar-title {
  font-size: 16px;
  font-weight: 700;
}
.so-toolbar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.so-btn {
  padding: 6px 10px;
  border: 1px solid #d0d7de;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #24292f;
}
.so-btn:hover { background: #f6f8fa; }
.so-btn-primary {
  background: #0969da;
  border-color: #0969da;
  color: #fff;
}
.so-btn-primary:hover { background: #0860c4; }
.so-btn-danger {
  background: #fff;
  border-color: #cf222e;
  color: #cf222e;
}
.so-btn-danger:hover { background: #ffebe9; }
.so-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: #6e7781;
  padding: 6px 8px;
}
.so-btn-ghost:hover { background: #f3f4f6; color: #24292f; }
/* Grid that holds the list cards side-by-side on the overview. Auto-fit
   with a min column of 380px so on the 860px Saved-Offers pane we get
   two columns; if the overlay is ever wider (future resize), columns
   grow. Gap matches the margin the old stacked layout used. */
.so-lists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 12px;
  align-items: start;
}
.so-list-group {
  border: 1px solid #d0d7de;
  border-radius: 8px;
  margin-bottom: 0;
  background: #fff;
  overflow: hidden;
}
/* "See N more →" footer link shown at the bottom of a list card when the
   preview has been trimmed to the first PREVIEW_LIMIT (5) rows. Drills
   into the single-list detail view on click. */
.so-see-more {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: #f6f8fa;
  border: none;
  border-top: 1px solid #eaeef2;
  font-weight: 600;
  font-size: 12px;
  color: #0969da;
  cursor: pointer;
  text-align: center;
}
.so-see-more:hover { background: #eaeef2; }
.so-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f6f8fa;
  border-bottom: 1px solid #d0d7de;
}
.so-list-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.so-list-name {
  font-weight: 700;
  font-size: 14px;
  color: #24292f;
}
.so-list-count {
  color: #6e7781;
  font-size: 12px;
}
.so-list-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #ddf4ff;
  color: #0969da;
  font-weight: 600;
  text-transform: uppercase;
}
.so-list-badge.so-badge-owner  { background: #dafbe1; color: #1a7f37; }
.so-list-badge.so-badge-shared { background: #fff8c5; color: #7a5d00; }
.so-list-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.so-offer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #eaeef2;
  cursor: pointer;
  gap: 8px;
}
.so-offer-row:last-child { border-bottom: none; }
.so-offer-row:hover { background: #f6f8fa; }
/* Offer row is a two-line stack: bold address on top, smaller italic
   offer price below. "by USER" appended to the price line when the
   creator isn't the viewer. */
.so-offer-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 2px;
}
.so-offer-address {
  font-weight: 600;
  color: #24292f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-offer-price {
  font-size: 11px;
  font-style: italic;
  color: #6e7781;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-offer-by {
  color: #8a8d94;
  font-size: 10px;
  font-weight: 400;
  font-style: normal;
  margin-left: 4px;
}
.so-offer-row-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
/* Inline icon buttons (Zillow / Map / edit / delete / share on each offer row) */
.so-icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #57606a;
  padding: 0;
}
.so-icon-btn:hover {
  background: #eaeef2;
  color: #24292f;
}
.so-icon-btn.so-icon-zillow:hover  { color: #006aff; }
.so-icon-btn.so-icon-maps:hover    { color: #1a7f37; }
.so-icon-btn.so-icon-delete:hover  { color: #cf222e; background: #ffebe9; }
.so-icon-btn.so-icon-share:hover   { color: #0969da; background: #ddf4ff; }
.so-icon-btn.so-icon-edit:hover    { color: #bf8700; background: #fff8c5; }

/* Offer detail panel (shown when an offer row is clicked) */
.so-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.so-detail-title {
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.so-detail-address {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.so-detail-body {
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.so-detail-line {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 13px;
}
.so-detail-line.so-line-pill {
  background: #dafbe1;
  color: #1a7f37;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 4px 0;
  letter-spacing: 0.03em;
}
.so-detail-line.so-line-pill.so-pill-blue {
  background: #ddf4ff;
  color: #0969da;
}
.so-detail-line.so-line-pill.so-pill-grey {
  background: #eaeef2;
  color: #24292f;
}
.so-detail-line.so-line-sub {
  padding-left: 14px;
  font-size: 12px;
  color: #57606a;
}
.so-detail-line.so-line-bp-header {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #d0d7de;
  font-weight: 700;
  color: #24292f;
  font-size: 14px;
}
.so-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.so-detail-actions-secondary {
  display: flex;
  gap: 6px;
  justify-content: space-between;
}
.so-detail-actions .so-btn { width: 100%; justify-content: center; display: inline-flex; align-items: center; }

/* Form rows inside the Save-Offer / Create-List modal */
.so-form-row {
  display: block;
  margin-bottom: 10px;
}
.so-form-row label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #57606a;
  margin-bottom: 4px;
}
.so-form-row input[type="text"],
.so-form-row select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  font: inherit;
  box-sizing: border-box;
}

/* ── Saved-Offers modal ─────────────────────────────────────────────── */
.so-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.so-modal-overlay[hidden] { display: none; }
.so-modal {
  background: #fff;
  border-radius: 10px;
  width: 480px;
  max-width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.so-modal-head {
  padding: 12px 16px;
  border-bottom: 1px solid #d0d7de;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f6f8fa;
}
.so-modal-title { font-weight: 700; font-size: 15px; }
.so-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #57606a;
  padding: 0 4px;
}
.so-modal-close:hover { color: #24292f; }
.so-modal-body {
  padding: 14px 16px;
  overflow: auto;
  flex: 1;
}
.so-modal-foot {
  padding: 10px 16px;
  border-top: 1px solid #d0d7de;
  background: #f6f8fa;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
/* Checkable user row inside the share-picker modal body */
.so-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  gap: 8px;
}
.so-user-row:hover { background: #f6f8fa; }
.so-user-row.so-selected {
  background: #ddf4ff;
  border-color: #54aeff;
}
.so-user-name { font-weight: 600; color: #24292f; }
.so-user-handle { color: #6e7781; font-size: 11px; margin-left: 6px; }
/* Online/offline indicator next to usernames in the share picker.
   Informational only — offline users are fully shareable (lists persist
   server-side, shared users see the list the moment they next log in). */
.so-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.so-status-dot.so-status-online  { background: #2da44e; }
.so-status-dot.so-status-offline { background: #afb8c1; }
.so-user-remove {
  color: #cf222e;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}
.so-user-remove:hover { background: #ffebe9; }

/* ── Contract-tab Saved-Offers pill ─────────────────────────────────── */
.saved-offers-contract-pill {
  position: fixed;
  top: 70px;
  right: 18px;
  z-index: 8900;
}
.saved-offers-contract-pill[hidden] { display: none; }
.so-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #24292f;
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.so-pill-btn:hover { background: #0d1117; }
.so-pill-caret {
  opacity: 0.8;
  transition: transform 0.15s ease;
}
.saved-offers-contract-pill.open .so-pill-caret { transform: rotate(180deg); }
.so-pill-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 320px;
  max-width: 420px;
  max-height: 440px;
  overflow: auto;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 6px 0;
}
.so-pill-dropdown[hidden] { display: none; }
.so-pill-section-label {
  padding: 6px 12px 4px;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  color: #6e7781;
  letter-spacing: 0.06em;
}
.so-pill-row {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
.so-pill-row:hover { background: #f6f8fa; }
.so-pill-row-label {
  font-weight: 600;
  color: #24292f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-pill-row-list {
  color: #6e7781;
  font-size: 11px;
  flex-shrink: 0;
}
.so-pill-empty {
  padding: 20px 12px;
  text-align: center;
  color: #6e7781;
  font-size: 12px;
}

/* ── Offer-tab "Saved Offers" pill (below the breakdown actions) ───── */
.so-offer-quick-pill {
  margin-top: 8px;
  padding: 6px 10px;
  background: #f6f8fa;
  border: 1px dashed #d0d7de;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #57606a;
  cursor: pointer;
}
.so-offer-quick-pill:hover {
  background: #eaeef2;
  border-color: #afb8c1;
}

.calc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f6f8fa;
  border-bottom: 1px solid var(--border, #d0d7de);
  cursor: grab;
}
.calc-header:active { cursor: grabbing; }
.calc-title {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #24292f;
}
/* Segmented pill toggle in the header. Two mutually-exclusive buttons;
   the one matching the active view gets .active (white background). */
.calc-toggle {
  display: inline-flex;
  background: #eaeef2;
  border-radius: 20px;
  padding: 2px;
}
.calc-toggle-btn {
  padding: 5px 14px;
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: #57606a;
  cursor: pointer;
  border-radius: 18px;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.calc-toggle-btn:hover:not(.active) { color: #24292f; }
.calc-toggle-btn.active {
  background: #fff;
  color: #0969da;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.calc-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.calc-popout {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  color: #57606a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.calc-popout:hover { background: #eaeef2; color: #24292f; }
.calc-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  color: #57606a;
}
.calc-close:hover { background: #eaeef2; color: #24292f; }

.calc-body {
  flex: 1;
  display: flex;
  gap: 0;
  min-height: 0;
}

.calc-pane {
  display: flex;
  flex-direction: column;
  padding: 14px;
  min-height: 0;
  overflow: auto;
}
.calc-pane-left {
  flex: 0 0 40%;
  border-right: 1px solid var(--border, #d0d7de);
  background: #fafbfc;
}
.calc-pane-right {
  flex: 1;
  background: #fff;
}
.calc-pane-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #57606a;
  margin-bottom: 10px;
}

/* --- Repairs estimator (Cosmetics + Infrastructure) --- */
.calc-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #57606a;
  margin-bottom: 8px;
}
.calc-repairs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 6px 0 10px;
}
.calc-repairs-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.calc-radio-group,
.calc-check-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.calc-radio-row,
.calc-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  font-size: 13px;
}
.calc-radio-row:hover,
.calc-check-row:hover {
  background: #f6f8fa;
}
.calc-radio-row input[type="radio"],
.calc-check-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: #0969da;
  flex: 0 0 auto;
}
.calc-radio-row:has(input:checked),
.calc-check-row:has(input:checked) {
  background: #ddf4ff;
  border-color: #0969da;
}
.calc-radio-label {
  flex: 1;
  font-weight: 500;
  color: #24292f;
}
.calc-rate {
  font-size: 11px;
  font-weight: 600;
  color: #8c959f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.calc-radio-row:has(input:checked) .calc-rate,
.calc-check-row:has(input:checked) .calc-rate {
  color: #0969da;
}
.calc-repairs-totals {
  background: #f6f8fa;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: auto;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.calc-repairs-totals .calc-line {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.calc-repairs-totals .calc-line.calc-total {
  border-top: 1px dashed #d0d7de;
  margin-top: 4px;
  padding-top: 6px;
  font-weight: 700;
  color: #1a7f37;
}
.calc-repairs-totals .calc-line.calc-total .calc-line-value { color: #1a7f37; }

/* --- ARV / Offer pane: 2-column grid (inputs | breakdown) --- */
.calc-offer-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 16px;
  align-items: start;
}
.calc-offer-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* --- ARV / Offer calc inputs + breakdown --- */
.calc-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.calc-field label {
  font-size: 11px;
  font-weight: 600;
  color: #57606a;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.calc-required {
  color: #d1242f;
  font-size: 10px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: normal;
  margin-left: 4px;
}
.calc-optional {
  color: #8c959f;
  font-size: 10px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: normal;
  margin-left: 4px;
}
.calc-address-input {
  width: 100%;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: system-ui, sans-serif;
  outline: none;
  background: #fff;
}
.calc-address-input:focus {
  border-color: #0969da;
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
}
.calc-money {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 0 10px;
}
.calc-money:focus-within { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15); }
.calc-money span {
  color: #57606a;
  font-weight: 600;
  margin-right: 6px;
}
.calc-money input {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 0;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: transparent;
  width: 100%;
}
/* Read-only Repair Costs on the Offer tab (source of truth is the
   Repairs tab + Add-more-repairs "Others"). Visually muted so the user
   sees it's not directly editable. */
.calc-money.calc-money-locked {
  background: #f6f8fa;
  border-color: #d0d7de;
}
.calc-money.calc-money-locked input {
  color: #57606a;
  cursor: not-allowed;
}

/* Add-more-repairs sub-section. Appears on both the Repairs tab
   (below cosmetics/infrastructure grid) and the Offer tab (below
   Desired Assignment Fee). Same markup + styling, synced state. */
.calc-repairs-others {
  border-top: 1px solid #e0e4e8;
  margin-top: 12px;
  padding-top: 10px;
}
.calc-repairs-others .calc-section-title { margin-bottom: 6px; }
.calc-others-list:empty + .calc-others-add { margin-top: 2px; }
.calc-others-row {
  display: grid;
  grid-template-columns: 1fr 150px 26px;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}
.calc-others-row > input[type="text"].calc-other-label {
  padding: 7px 9px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  font: inherit;
  outline: none;
  box-sizing: border-box;
  width: 100%;
}
.calc-others-row > input.calc-other-label:focus { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15); }
.calc-other-remove {
  width: 26px;
  height: 26px;
  border: 1px solid #d0d7de;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  color: #cf222e;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.calc-other-remove:hover {
  background: #ffebe9;
  border-color: #cf222e;
}
.calc-others-add {
  background: transparent;
  border: 1px dashed #afb8c1;
  border-radius: 6px;
  padding: 6px 10px;
  width: 100%;
  cursor: pointer;
  color: #57606a;
  font-weight: 600;
  font-size: 12px;
}
.calc-others-add:hover {
  background: #f6f8fa;
  border-color: #57606a;
  color: #24292f;
}

/* Sub-breakdown of Repair Costs inside the Builders Profit breakdown.
   Used to show Cosmetics / Infrastructure / Others itemization under
   the main "− Repair Costs" line. Indented one level; small font. */
.calc-line.calc-bp-sub-detail {
  padding-left: 18px;
  font-size: 11px;
  color: #6e7781;
}
.calc-line.calc-bp-sub-detail .calc-line-label { font-weight: 400; }
.calc-line.calc-bp-sub-group {
  padding-left: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #24292f;
}

.calc-breakdown {
  background: #f6f8fa;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 4px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.calc-hint {
  color: #57606a;
  font-style: italic;
  font-family: inherit;
  text-align: center;
}
.calc-line {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.calc-line-label { color: #57606a; }
.calc-line-value { color: #24292f; font-weight: 500; }
.calc-line.calc-divider {
  border-top: 1px dashed #d0d7de;
  margin: 4px 0;
  padding: 0;
  height: 0;
}
.calc-line.calc-arv .calc-line-value { font-weight: 700; color: #0969da; }
.calc-line.calc-rough .calc-line-value { font-weight: 700; }
/* Info-only sub-line (no subtraction, just context under another line).
   Larger size per user request; the dollar amount inside is kept black
   but NOT bolded so the line reads as a single sentence.
   Uses block layout (not flex, unlike other .calc-line rows) so that the
   whitespace between text and the <span>$...</span> is preserved \u2014
   flex would collapse those into separate items with no gap. */
.calc-line.calc-sub-info {
  display: block;
  padding: 4px 0 6px 18px;
  font-size: 14px;
  color: #57606a;
  font-family: system-ui, sans-serif;
}
.calc-line.calc-sub-info .calc-sub-money {
  color: #000;
  /* Belt-and-suspenders: tiny horizontal margin so the amount never
     visually butts up against the surrounding text even if a browser
     quirk strips whitespace. */
  margin: 0 2px;
}
.calc-line.calc-final {
  background: #dafbe1;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 6px -10px 0;
}
.calc-line.calc-final .calc-line-label { color: #1a7f37; font-weight: 700; letter-spacing: 0.04em; }
.calc-line.calc-final .calc-line-value { color: #1a7f37; font-weight: 700; font-size: 15px; }
.calc-line.calc-final.calc-zero {
  background: #ffebe9;
}
.calc-line.calc-final.calc-zero .calc-line-label,
.calc-line.calc-final.calc-zero .calc-line-value {
  color: #cf222e;
}
/* Assignment Price pill: blue pill style. */
.calc-line.calc-final.calc-assignment {
  background: #ddf4ff;
  margin-top: 0;
}
.calc-line.calc-final.calc-assignment .calc-line-label,
.calc-line.calc-final.calc-assignment .calc-line-value {
  color: #0969da;
}
.calc-line.calc-final.calc-assignment.calc-zero {
  background: #ffebe9;
}
.calc-line.calc-final.calc-assignment.calc-zero .calc-line-label,
.calc-line.calc-final.calc-assignment.calc-zero .calc-line-value {
  color: #cf222e;
}
/* Low Ball Offer pill: red-tinted (below the green Suggested Offer).
   A more aggressive opening bid the user can try with — $50k lower than
   SO. Formula-only, same collapsible <details> wrapper as the other
   pills so the expanded hint shows the subtraction. */
.calc-line.calc-final.calc-lowball {
  background: #ffebe9;
  margin-top: 0;
}
.calc-line.calc-final.calc-lowball .calc-line-label,
.calc-line.calc-final.calc-lowball .calc-line-value {
  color: #cf222e;
}
.calc-line.calc-final.calc-lowball.calc-zero {
  background: #ffebe9;
}
/* Saved-offer detail view uses its own .so-line-pill class. Red tint. */
.so-detail-line.so-line-pill.so-pill-lowball {
  background: #ffebe9;
  color: #cf222e;
}

/* Builder Would Pay pill: neutral grey (intermediate reference). */
.calc-line.calc-final.calc-bwp {
  background: #eaeef2;
  margin-top: 0;
}
.calc-line.calc-final.calc-bwp .calc-line-label,
.calc-line.calc-final.calc-bwp .calc-line-value {
  color: #24292f;
}
/* BWP / SAP / SO pills are wrapped in native <details>/<summary> so
   their one-line formula hint is collapsed by default. Click the pill
   (or its \u25BE arrow) to expand. Zero JS \u2014 the browser handles the
   toggle, and keyboard + screen-reader nav is free. */
.calc-pill-details {
  padding: 0;
  margin: 0;
}
.calc-pill-details > summary {
  list-style: none;
  cursor: pointer;
  display: block; /* override browser's default list-item */
}
.calc-pill-details > summary::-webkit-details-marker { display: none; }
/* Small \u25BE sits in the pill's right padding; rotates when open. */
.calc-pill-details > summary > .calc-line.calc-final {
  position: relative;
  padding-right: 32px;
}
.calc-pill-details > summary > .calc-line.calc-final::after {
  content: '\25BE'; /* \u25BE */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.45;
  font-size: 12px;
  pointer-events: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.calc-pill-details > summary:hover > .calc-line.calc-final::after {
  opacity: 0.8;
}
.calc-pill-details[open] > summary > .calc-line.calc-final::after {
  transform: translateY(-50%) rotate(180deg);
  opacity: 0.8;
}
/* ARV gets its own collapsible dropdown showing each comp that
   participated in the average. Uses the same ▾ caret treatment as the
   BWP/SAP/SO pills but the row isn't a "pill" — it's the plain .calc-arv
   style, so we duplicate the caret rules to target that class. */
.calc-pill-details > summary > .calc-line.calc-arv {
  position: relative;
  padding-right: 32px;
}
.calc-pill-details > summary > .calc-line.calc-arv::after {
  content: '\25BE';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.45;
  font-size: 12px;
  pointer-events: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.calc-pill-details > summary:hover > .calc-line.calc-arv::after {
  opacity: 0.8;
}
.calc-pill-details[open] > summary > .calc-line.calc-arv::after {
  transform: translateY(-50%) rotate(180deg);
  opacity: 0.8;
}
.calc-arv-breakdown {
  padding: 4px 10px 8px 18px;
  font-size: 13px;
  color: #57606a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.calc-arv-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.calc-arv-row.calc-arv-sum {
  border-top: 1px solid #d0d7de;
  margin-top: 4px;
  padding-top: 4px;
  font-weight: 600;
  color: #24292f;
}

/* Saved-offer detail view mirror of the ARV dropdown. Different wrapper
   class (so-arv-pill vs calc-pill-details) because the saved-offer pane
   uses its own .so-detail-line style and we don't want the caret rules
   to cascade. */
.so-arv-pill {
  margin: 0;
  padding: 0;
}
.so-arv-pill > summary {
  list-style: none;
  cursor: pointer;
  display: block;
  position: relative;
}
.so-arv-pill > summary::-webkit-details-marker { display: none; }
.so-arv-pill > summary > .so-detail-line.so-arv-row {
  padding-right: 24px;
}
.so-arv-pill > summary > .so-detail-line.so-arv-row::after {
  content: '\25BE';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.45;
  font-size: 11px;
  transition: transform 0.15s ease, opacity 0.15s ease;
  pointer-events: none;
}
.so-arv-pill[open] > summary > .so-detail-line.so-arv-row::after {
  transform: translateY(-50%) rotate(180deg);
  opacity: 0.8;
}
/* The BWP / SAP / SO pills (.so-pill-collapsible) inside the saved-offer
   detail view reuse the same <details> wrapper. Draw the same caret on
   them as on ARV and the Offer-tab pills so the affordance is obvious. */
.so-arv-pill.so-formula-pill > summary > .so-detail-line.so-pill-collapsible {
  position: relative;
  padding-right: 24px;
  cursor: pointer;
}
.so-arv-pill.so-formula-pill > summary > .so-detail-line.so-pill-collapsible::after {
  content: '\25BE';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.55;
  font-size: 11px;
  transition: transform 0.15s ease, opacity 0.15s ease;
  pointer-events: none;
}
.so-arv-pill.so-formula-pill > summary:hover > .so-detail-line.so-pill-collapsible::after {
  opacity: 0.85;
}
.so-arv-pill.so-formula-pill[open] > summary > .so-detail-line.so-pill-collapsible::after {
  transform: translateY(-50%) rotate(180deg);
  opacity: 0.85;
}
.so-arv-breakdown {
  padding: 4px 8px 8px 20px;
  font-size: 12px;
  color: #57606a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.so-arv-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.so-arv-detail-row.so-arv-sum-row {
  border-top: 1px solid #d0d7de;
  margin-top: 4px;
  padding-top: 4px;
  font-weight: 600;
  color: #24292f;
}
/* Builders Profit: plain header row + indented sub-items underneath.
   Not a pill \u2014 it's a derived/informational value, not a decision. */
.calc-line.calc-bp-header {
  margin-top: 10px;
  padding: 6px 0 3px;
  border-top: 1px solid #d0d7de;
  font-weight: 700;
  color: #24292f;
}
.calc-line.calc-bp-header .calc-line-label { letter-spacing: 0.02em; }
.calc-line.calc-bp-header .calc-line-value {
  font-weight: 700;
  color: #24292f;
}
.calc-line.calc-bp-sub {
  padding: 2px 0 2px 16px;
  font-size: 12px;
  color: #57606a;
}
.calc-line.calc-bp-sub .calc-line-value { color: #24292f; }
.calc-warn {
  color: #cf222e;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  text-align: center;
  font-family: system-ui, sans-serif;
}

.calc-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.calc-action-full { width: 100%; }
.calc-action-row {
  display: flex;
  gap: 8px;
}
.calc-action-row .calc-action-btn { flex: 1; }
.calc-action-btn {
  flex: 1;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #24292f;
}
.calc-action-btn:hover:not(:disabled) { background: #f6f8fa; }
.calc-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.calc-action-btn.copied {
  background: #dafbe1;
  border-color: #2da44e;
  color: #1a7f37;
}
/* Copy Offer — green to match the Suggested Offer pill (calc-final). */
.calc-action-btn.calc-action-offer {
  background: #dafbe1;
  border-color: #2da44e;
  color: #1a7f37;
  font-weight: 600;
}
.calc-action-btn.calc-action-offer:hover:not(:disabled) {
  background: #c8f2d3;
}
/* Copy Breakdown — blue to match the Suggested Assignment Price pill
   (calc-final.calc-assignment). */
.calc-action-btn.calc-action-breakdown {
  background: #ddf4ff;
  border-color: #54aeff;
  color: #0969da;
  font-weight: 600;
}
.calc-action-btn.calc-action-breakdown:hover:not(:disabled) {
  background: #c2e8ff;
}
/* Copy Low Ball — red, matches the Low Ball Offer pill tint. */
.calc-action-btn.calc-action-lowball {
  background: #ffebe9;
  border-color: #cf222e;
  color: #cf222e;
  font-weight: 600;
}
.calc-action-btn.calc-action-lowball:hover:not(:disabled) {
  background: #ffd7d4;
}
/* The Write Assignment button pops a small inline picker in the same
   area as the actions row. While the picker is active, the normal
   actions row is hidden. */
.calc-picker {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 8px;
  background: #fafbfc;
}
.calc-picker[hidden] { display: none; }
.calc-picker-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #57606a;
  margin-bottom: 8px;
}
.calc-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.calc-picker-grid button {
  padding: 9px 8px;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #24292f;
  text-align: center;
}
.calc-picker-grid button:hover { background: #dbeafe; border-color: #0969da; color: #0969da; }
.calc-picker-cancel {
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: #57606a;
  text-decoration: underline;
}
.calc-picker-cancel:hover { color: #24292f; }

/* --- Resize handle (bottom-right corner) ---
   Only visible / usable in the Offer view on desktop. The handle itself
   doesn't enforce the "smaller only" rule \u2014 that clamp lives in JS
   (see OFFER_MIN / VIEW_SIZES.offer in app.js). */
.calc-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  background: linear-gradient(
    135deg,
    transparent 0%, transparent 40%,
    #8c959f 40%, #8c959f 45%,
    transparent 45%, transparent 55%,
    #8c959f 55%, #8c959f 60%,
    transparent 60%, transparent 70%,
    #8c959f 70%, #8c959f 75%,
    transparent 75%
  );
  z-index: 10;
}
/* Resize handle is visible in both Repairs and Offer views; the JS
   handler enforces per-view minimums so neither view can be shrunk
   below a usable size. (Hidden only on mobile, below.) */

/* --- Mobile: collapse into full-screen modal --- */
@media (max-width: 700px) {
  .calc-overlay,
  .calc-overlay.view-repairs,
  .calc-overlay.view-offer {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0;
    border: none;
  }
  .calc-header {
    cursor: default;
    padding: 12px 14px;
  }
  .calc-resize-handle { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   ARV-popup mode — applied when the page is opened via the pop-out
   window. Hides everything in the app except the ARV overlay, then
   expands the overlay to fill the full window. CSS-only, no JS reshuffle
   needed. The pop-out + close buttons are hidden inside the popup since
   closing is done via the window's own X. The section-houses gate on
   .calc-overlay is forced open here so the overlay shows regardless of
   which section the user was in when they clicked pop-out.
   ───────────────────────────────────────────────────────────────── */
body.arv-popup-mode {
  overflow: hidden;
}
/* Only hide the normal app shell once we're past the auth flow. While
   .login-mode / .reset-mode / .section-select-mode is active, let the
   corresponding fullscreen auth screens render normally so the user
   can sign in before the ARV tool appears. */
body.arv-popup-mode:not(.login-mode):not(.reset-mode):not(.section-select-mode) > *:not(.calc-overlay) {
  display: none !important;
}
/* Same gating as above: only make the overlay fullscreen when we're
   past auth. During login/reset/section-select the overlay stays
   hidden (its default) so the auth screen has the full viewport. */
body.arv-popup-mode:not(.login-mode):not(.reset-mode):not(.section-select-mode) .calc-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
}
/* Hide pop-out + close buttons inside the popup — the browser window's
   own X button is the canonical close, and we don't want the user to
   spawn a popup from inside the popup. */
body.arv-popup-mode .calc-popout,
body.arv-popup-mode .calc-close,
body.arv-popup-mode .calc-header { cursor: default; }
body.arv-popup-mode .calc-popout,
body.arv-popup-mode .calc-close { display: none !important; }
/* Drag is pointless in popup-mode since the overlay fills the window. */
body.arv-popup-mode .calc-resize-handle { display: none !important; }
/* Section-houses restriction is overridden — the popup is always the
   ARV tool regardless of which section the opener was in. */
body.arv-popup-mode:not(.section-houses) .calc-overlay { display: flex !important; }

/* Drop the mobile-modal catch-all back to exist for normal pages. */
@media (max-width: 700px) {
  body.arv-popup-mode .calc-body {
    flex-direction: column;
    overflow: auto;
  }
  .calc-body {
    flex-direction: column;
    overflow: auto;
  }
  .calc-pane-left {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--border, #d0d7de);
  }
  .calc-pane-right {
    flex: 0 0 auto;
  }
  /* Stack inputs and breakdown vertically on narrow viewports \u2014 a
     2-column grid would be too cramped on phones. */
  .calc-offer-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── PDF Editor ─────────────────────────────────────────────────────
   Client-side PDF editor reachable from Hub > Tasks. Renders into the
   preview panel as a single full-width view (no street list). The
   columns layout class .create-mode hides #listPanel; we add it in
   setMode for `pdfeditor` the same way we do for `maps`/`create`.
   ───────────────────────────────────────────────────────────────── */
.pdf-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #f6f8fa;
  font-family: inherit;
}
.pdf-editor-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border, #d0d7de);
}
.pdf-editor-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #1f2328);
  cursor: pointer;
  transition: background 0.12s;
}
.pdf-editor-back-btn:hover { background: #f1f3f4; }
/* CANCEL — discard-and-exit. Sits next to BACK in the topbar.
   Red-accented to signal that clicking this throws away your work
   (BACK preserves edits via the DOM stash; CANCEL doesn't). */
.pdf-editor-cancel-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid #f5b1b8;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #b02a37;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.12s, border-color 0.12s;
}
.pdf-editor-cancel-btn:hover {
  background: #fef2f3;
  border-color: #e98c95;
}
.pdf-toolbar-hint {
  font-size: 11px;
  color: var(--text-dim, #57606a);
  font-style: italic;
  padding: 0 6px;
}

/* Right-click context menu (over the PDF). Floats above everything in
   the editor, positioned at the cursor by pdfEditorShowContextMenu. */
.pdf-context-menu {
  position: fixed;
  z-index: 5000;
  background: #fff;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  padding: 4px;
  min-width: 160px;
}
.pdf-context-menu[hidden] { display: none !important; }
.pdf-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text, #1f2328);
  cursor: pointer;
  text-align: left;
}
.pdf-context-item:hover {
  background: #f1f3f4;
}
.pdf-context-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-weight: 800;
  color: #0969da;
  background: #ddf4ff;
  border-radius: 4px;
}
.pdf-editor-title { font-size: 14px; font-weight: 700; }
.pdf-editor-filename { color: var(--text-dim, #57606a); font-size: 12px; margin-left: auto; }
/* Small "Replace" link in the topbar — only visible after a PDF is
   loaded (the prominent toolbar Upload button is gone in that state).
   Clicking it opens the same hidden file input as the empty-state
   upload button, so the user can swap in a different PDF without
   leaving the editor. */
.pdf-replace-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim, #57606a);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.pdf-replace-btn:hover { background: #f1f3f4; border-color: var(--border-strong, #bdc1c6); }
.pdf-replace-btn[hidden] { display: none !important; }

.pdf-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid var(--border, #d0d7de);
  flex-wrap: wrap;
}
.pdf-toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--border, #d0d7de);
  margin: 0 4px;
}
.pdf-toolbar-spacer { flex: 1 1 auto; }
.pdf-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  background: #fff;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  color: var(--text, #1f2328);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.pdf-tool-btn:hover:not(:disabled) {
  background: #f1f3f4;
  border-color: var(--border-strong, #bdc1c6);
}
.pdf-tool-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pdf-tool-btn.active {
  background: #cfe9ff;
  border-color: #4493f8;
  color: #0969da;
}
.pdf-tool-btn.pdf-tool-primary {
  background: #1f883d;
  color: #fff;
  border-color: #1f883d;
}
.pdf-tool-btn.pdf-tool-primary:hover:not(:disabled) {
  background: #197d36;
}
.pdf-tool-btn.pdf-tool-danger {
  background: #fff;
  color: #cf222e;
}
.pdf-tool-btn.pdf-tool-danger:hover:not(:disabled) {
  background: #ffebe9;
  border-color: #cf222e;
}
.pdf-page-btn {
  padding: 5px 8px;
  font-size: 14px;
  line-height: 1;
}
.pdf-page-indicator {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim, #57606a);
  min-width: 60px;
  text-align: center;
}
.pdf-zoom-select {
  font-size: 12px;
  padding: 5px 6px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.pdf-text-style {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
}
.pdf-style-label { font-size: 11px; color: var(--text-dim, #57606a); font-weight: 600; }
.pdf-text-style select {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 4px;
  background: #fff;
}
.pdf-text-style input[type="color"] {
  width: 28px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 4px;
  cursor: pointer;
}

.pdf-editor-stage-wrap {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  position: relative;
}

/* Compact hint shown in the stage when no PDF is loaded — replaces
   the old big empty-state card so the editor area doesn't feel
   half-empty before upload. The Upload PDF button lives in the
   toolbar now (always visible), so this hint just nudges users
   toward it. Hidden once a PDF is loaded. */
.pdf-stage-hint {
  margin: auto;
  padding: 18px 22px;
  background: transparent;
  font-size: 13px;
  color: var(--text-dim, #57606a);
  text-align: center;
  font-style: italic;
}
.pdf-stage-hint[hidden] { display: none !important; }
.pdf-stage-hint b { font-style: normal; color: var(--text, #1f2328); }

.pdf-page-stage[hidden] { display: none !important; }

.pdf-page-frame {
  position: relative;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  border-radius: 4px;
}
.pdf-page-frame canvas {
  display: block;
  border-radius: 4px;
}
.pdf-annot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pdf-annot-layer > * { pointer-events: auto; }

.pdf-annot {
  position: absolute;
  display: inline-block;
  cursor: move;
  user-select: none;
  border: 1px dashed transparent;
  padding: 1px;
}
.pdf-annot.selected {
  border-color: #0969da;
  background: rgba(9, 105, 218, 0.06);
}
.pdf-annot-text {
  display: inline-block;
  min-width: 30px;
  outline: none;
  white-space: pre-wrap;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.0;
  padding: 1px 2px;
  /* Default cursor is `move` so single-click + drag works. Once the
     user double-clicks to enter edit mode (.editing class added by the
     dblclick handler) the cursor switches to `text` for caret/typing
     UX. blur flips back to `move`. */
  cursor: move;
}
.pdf-annot.editing .pdf-annot-text {
  cursor: text;
}
.pdf-annot.editing {
  border-color: #1f883d;
  background: rgba(31, 136, 61, 0.08);
}
.pdf-annot-image img,
.pdf-annot-signature img {
  display: block;
  pointer-events: none; /* drag is handled by parent */
  user-select: none;
}
.pdf-annot-resize {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #0969da;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: nwse-resize;
}
.pdf-annot:not(.selected) .pdf-annot-resize { display: none; }

.pdf-formfield {
  position: absolute;
  display: flex;
  align-items: stretch;
}
.pdf-formfield input,
.pdf-formfield textarea,
.pdf-formfield select {
  width: 100%;
  height: 100%;
  border: 1px solid #4493f8;
  background: rgba(207, 233, 255, 0.55);
  font-size: inherit;
  padding: 1px 4px;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
}
.pdf-formfield input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: auto;
}

/* ── Signature modal ────────────────────────────────────────────── */
.pdf-signature-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdf-signature-modal[hidden] { display: none !important; }
.pdf-signature-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.30);
  width: 540px;
  max-width: 95vw;
}
.pdf-signature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 14px;
}
.pdf-signature-close {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-dim, #57606a);
}
.pdf-signature-card canvas {
  display: block;
  width: 100%;
  height: 180px;
  background: #fafbfc;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
}
.pdf-signature-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

/* ── Loading overlay ────────────────────────────────────────────── */
.pdf-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}
.pdf-loading-overlay[hidden] { display: none !important; }
.pdf-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #d0d7de;
  border-top-color: #0969da;
  border-radius: 50%;
  animation: pdf-spin 0.8s linear infinite;
}
.pdf-loading-text { font-size: 13px; color: var(--text-dim, #57606a); font-weight: 600; }
@keyframes pdf-spin { to { transform: rotate(360deg); } }

/* ─── LEADS Kanban (LEADS tab — custom CRM) ────────────────────────── */
/* Modern, simple aesthetic: soft off-white surface, low-contrast borders,
   sentence-case typography, generous whitespace, subtle micro-shadows.
   Color used sparingly — primary blue for actions, per-agent dots on
   cards, neutral grays everywhere else. */
.leads-kanban-host {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #fafbfc;
  font-feature-settings: "cv11", "ss01";
}
.leads-kanban-host[style*="display:none"],
.leads-kanban-host[style*="display: none"] { display: none !important; }

.leads-kanban-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Toolbar (row above the board) */
.leads-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #ffffff;
  border-bottom: 1px solid #eef0f3;
  flex-wrap: wrap;
}
.leads-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #4b5563;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.leads-toolbar-btn:hover  { background: #f3f4f6; color: #1f2937; border-color: #d1d5db; }
.leads-toolbar-btn:active { transform: scale(0.98); }
.leads-toolbar-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.leads-toolbar-btn-primary {
  color: #ffffff;
  background: #2563eb;
  border-color: #2563eb;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.16);
}
.leads-toolbar-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #ffffff; }
.leads-toolbar-btn-icon {
  padding: 7px 10px;
  font-size: 14px;
  line-height: 1;
  color: #6b7280;
}
.leads-toolbar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}
.leads-toolbar-select {
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  color: #1f2937;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.leads-toolbar-select:hover { border-color: #d1d5db; }
.leads-toolbar-stats-spacer {
  flex: 1;
  margin-left: auto;
}

/* Kanban board */
.leads-kanban-board {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
  padding: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
}
.leads-kanban-board::-webkit-scrollbar { height: 10px; }
.leads-kanban-board::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
.leads-kanban-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 13px;
  font-style: italic;
}

/* Kanban board container */
.leads-kanban-board {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
  padding: 20px 24px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
}
.leads-kanban-board::-webkit-scrollbar { height: 8px; }
.leads-kanban-board::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.leads-kanban-board::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.leads-kanban-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 13px;
}

/* Columns — softer, borderless cards-on-cards aesthetic */
.leads-kanban-col {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  background: #f3f4f6;
  border-radius: 10px;
  min-height: 0;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.leads-kanban-col.leads-drag-over {
  background: #dbeafe;
  box-shadow: inset 0 0 0 2px #93c5fd;
}
.leads-kanban-col-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  /* No more SHOUTING with uppercase/letter-spacing — sentence case is
     calmer + easier to scan. */
}
.leads-kanban-col-title { flex: 1; min-width: 0; }
/* Batch-dial pill — sits at the top of each column. Clicking dials
   every lead in this stage (one at a time, advancing on Next). */
.leads-col-batch-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #047857;
  background: #d1fae5;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s, transform 0.08s;
  flex: 0 0 auto;
  /* Lay it out on its own row above the title row by giving it 100%
     width within the wrapping flex container. Cleaner than inlining
     next to the title — operator sees it as a clear call-to-action
     banner above the column. */
  width: 100%;
  justify-content: center;
  margin-bottom: 2px;
}
.leads-col-batch-pill:hover:not(:disabled) {
  background: #10b981;
  color: #ffffff;
}
.leads-col-batch-pill:active:not(:disabled) { transform: scale(0.98); }
.leads-col-batch-pill:disabled {
  color: #9ca3af;
  background: #f3f4f6;
  cursor: not-allowed;
}
.leads-col-batch-pill svg { display: block; }
.leads-kanban-col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  background: #ffffff;
  border-radius: 999px;
  color: #6b7280;
}
.leads-kanban-col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 10px 10px;
  overflow-y: auto;
  min-height: 60px;
}
.leads-kanban-col-body::-webkit-scrollbar { width: 6px; }
.leads-kanban-col-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* Cards — clean white surface, minimal chrome, subtle hover lift */
.leads-kanban-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  background: #ffffff;
  border-radius: 8px;
  font-size: 12px;
  cursor: grab;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
  user-select: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  /* Lets pointermove fire while dragging on touch screens without the
     browser hijacking the gesture as a scroll/pan. */
  touch-action: none;
}
.leads-kanban-card:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.leads-kanban-card:active { cursor: grabbing; }
.leads-kanban-card.leads-dragging {
  opacity: 0.4;
  transform: rotate(-1deg);
}
/* Floating ghost card that follows the cursor during a drag. */
.leads-card-ghost {
  position: fixed !important;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.95;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22);
  transform: rotate(-2deg);
  cursor: grabbing;
  transition: none;
}
/* Per-agent vertical accent stripe on the left edge — replaces the old
   3px border-left with a thinner, less aggressive 2px inset stripe. */
.leads-kanban-card[data-agent]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: transparent;
}
.leads-kanban-card[data-agent="maximos"]::before { background: #ef4444; }
.leads-kanban-card[data-agent="logan"]::before   { background: #22c55e; }
.leads-kanban-card[data-agent="mason"]::before   { background: #3b82f6; }
.leads-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.leads-card-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
  letter-spacing: -0.01em;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.leads-card-leadcost {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  color: #047857;
  background: #d1fae5;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}
.leads-card-addr {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.4;
}
.leads-card-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}
.leads-card-price { color: #059669; font-weight: 600; }
.leads-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
  /* No more dashed border — extra visual noise. The bottom row just
     sits flush below the meta row with a small natural gap. */
}
.leads-card-agent {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
}
.leads-card-agent[data-agent="maximos"] { background: #fee2e2; color: #991b1b; }
.leads-card-agent[data-agent="logan"]   { background: #dcfce7; color: #166534; }
.leads-card-agent[data-agent="mason"]   { background: #dbeafe; color: #1e40af; }
.leads-card-resub {
  font-size: 10px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  padding: 2px 7px;
  border-radius: 999px;
}
/* Card-level Call button — small pill on the right of the footer.
   Green when enabled (matches the lead-cost pill family of greens),
   muted grey when disabled (unassigned / no phone). */
.leads-card-callbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #047857;
  background: #d1fae5;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s, transform 0.08s;
}
.leads-card-callbtn:hover:not(:disabled) {
  background: #10b981;
  color: #ffffff;
}
.leads-card-callbtn:active:not(:disabled) { transform: scale(0.96); }
.leads-card-callbtn:disabled {
  color: #9ca3af;
  background: #f3f4f6;
  cursor: not-allowed;
}
.leads-card-callbtn svg { display: block; }

/* ─── Side panel (lead detail) — modernized, lighter chrome ─────────── */
.leads-side-panel {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  justify-content: flex-end;
}
.leads-side-panel.hidden { display: none; }
.leads-side-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.3);
  backdrop-filter: blur(2px);
}
.leads-side-card {
  position: relative;
  /* Wider so the amber two-column rows (First/Last, Phone/Email, etc.)
     fit without squeezing. Clamps to viewport width minus a small margin
     so it doesn't overflow on narrower screens. */
  width: min(780px, calc(100vw - 32px));
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 40px rgba(15, 23, 42, 0.12);
  animation: leads-side-in 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes leads-side-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.leads-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #eef0f3;
}
.leads-side-title {
  font-size: 17px;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.01em;
}
.leads-side-close {
  width: 32px; height: 32px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: #6b7280;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.leads-side-close:hover { background: #f3f4f6; color: #111827; }
.leads-side-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 24px;
}
.leads-side-section { margin-bottom: 24px; }
.leads-side-section-title {
  font-size: 12px;
  font-weight: 600;
  /* Drop the all-caps shouting — readable sentence/title case is calmer. */
  color: #6b7280;
  margin-bottom: 10px;
  letter-spacing: 0;
}
.leads-side-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.leads-side-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  min-width: 110px;
}
.leads-side-input,
.leads-side-select {
  margin-top: 4px;
  padding: 8px 11px;
  font-size: 13px;
  font-family: inherit;
  color: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.leads-side-input-tiny { max-width: 80px; }
.leads-side-input:hover,
.leads-side-select:hover { border-color: #d1d5db; }
.leads-side-input:focus,
.leads-side-select:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.25);
}
.leads-side-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.leads-side-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.08s;
}
.leads-side-action-btn:active { transform: scale(0.98); }
.leads-side-action-call {
  background: #10b981;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.18);
}
.leads-side-action-call:hover:not(:disabled) { background: #059669; }
.leads-side-action-call:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
}
/* Add Contact — pushes the lead into Sendivo's CRM via server-side
   Playwright. Same enable rules as the Call button (needs agent +
   phone). Distinguished from the green Call button by a calmer
   light-blue treatment that matches the call modal's pill. */
.leads-side-action-add-contact {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
  border-color: #bfdbfe;
}
.leads-side-action-add-contact:hover:not(:disabled) {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
.leads-side-action-add-contact:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
  cursor: not-allowed;
  box-shadow: none;
}
.leads-side-action-takeover {
  background: #2563eb;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18);
}
.leads-side-action-takeover:hover { background: #1d4ed8; }
.leads-side-action-docusign {
  background: #f59e0b;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.18);
}
.leads-side-action-docusign:hover { background: #d97706; }
.leads-side-action-delete {
  margin-left: auto;
  background: transparent;
  color: #ef4444;
  border-color: #fecaca;
  padding: 9px 13px;
}
.leads-side-action-delete:hover { background: #fef2f2; border-color: #fca5a5; }
.leads-side-note-input {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  resize: vertical;
  margin-bottom: 8px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.leads-side-note-input:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.25);
}
.leads-side-note-btn { margin-top: 4px; }
.leads-side-note {
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 7px;
  margin-bottom: 8px;
}
.leads-side-note-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.leads-side-note-meta {
  font-size: 10.5px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Delete button — same affordance as the call modal's note delete:
   subtle grey, red on hover. confirm() prompt before destructive. */
.leads-side-note-del {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  color: #9ca3af;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.12s, background-color 0.12s;
}
.leads-side-note-del:hover { color: #ef4444; background: #fee2e2; }
.leads-side-note-text { font-size: 13px; color: #374151; white-space: pre-wrap; line-height: 1.45; }
.leads-side-note-empty { font-size: 12px; color: #9ca3af; }
.leads-side-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 12px;
  color: #6b7280;
}
.leads-side-meta-grid > div { padding: 0; }
.leads-side-meta-grid strong { color: #374151; font-weight: 500; }
.leads-side-meta-comments {
  grid-column: 1 / -1;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid #eef0f3;
}

/* ─── Side-panel: amber-card edit blocks ─────────────────────────────── */
/* These mirror the Call modal's read-only `.leads-call-info-hi-block`
   visually, but each block contains an editable <input> or <textarea>.
   The labels match the prominent amber style so the side panel and the
   call modal feel like the same surface, just with edit affordances. */
.leads-side-hi-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.leads-side-hi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* City / State / ZIP — give the larger fields room and clamp state/zip. */
.leads-side-hi-row-csz {
  grid-template-columns: 1fr 64px 88px;
}
.leads-side-hi-block {
  padding: 10px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.leads-side-hi-block-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #92400e;
}
.leads-side-hi-block-input,
.leads-side-hi-block-textarea {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  background: #ffffff;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 6px 10px;
  width: 100%;
  font-family: inherit;
  line-height: 1.35;
  transition: border-color 0.12s, box-shadow 0.12s;
  box-sizing: border-box;
}
.leads-side-hi-block-input:focus,
.leads-side-hi-block-textarea:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.leads-side-hi-block-textarea {
  resize: vertical;
  min-height: 58px;
}
.leads-side-save-changes-btn {
  margin-top: 14px;
  width: 100%;
  padding: 10px 16px;
  font-size: 13px;
}

/* ─── Side-panel: Zillow / PropStream quick-action row ──────────────── */
.leads-side-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.leads-side-quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  color: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, transform 0.08s;
}
.leads-side-quick-btn:hover:not(:disabled) {
  border-color: #d1d5db;
  background: #f9fafb;
}
.leads-side-quick-btn:active:not(:disabled) { transform: scale(0.98); }
.leads-side-quick-btn:disabled {
  color: #9ca3af;
  background: #f3f4f6;
  cursor: not-allowed;
}
.leads-side-quick-zillow:hover:not(:disabled)     { border-color: #2563eb; color: #1d4ed8; }
.leads-side-quick-propstream:hover:not(:disabled) { border-color: #f59e0b; color: #b45309; }
.leads-side-quick-icon { font-size: 14px; line-height: 1; }

/* ─── Modal scaffolding (ingest / stages / add) — modern, lighter ────── */
.leads-ingest-modal,
.leads-stages-modal,
.leads-add-modal {
  position: fixed;
  inset: 0;
  z-index: 9300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: leads-modal-fade 0.15s ease-out;
}
@keyframes leads-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.leads-ingest-modal.hidden,
.leads-stages-modal.hidden,
.leads-add-modal.hidden,
.leads-call-modal.hidden { display: none; }
.leads-call-modal {
  position: fixed;
  inset: 0;
  z-index: 9300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: leads-modal-fade 0.15s ease-out;
}
.leads-ingest-backdrop,
.leads-stages-backdrop,
.leads-add-backdrop,
.leads-call-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  backdrop-filter: blur(2px);
}
.leads-ingest-card,
.leads-stages-card,
.leads-add-card {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: leads-modal-pop 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
.leads-call-card {
  position: relative;
  /* Bigger, more focused — fills most of the screen so the dialer is
     the only thing the operator can interact with while on a call.
     Wide enough to host the iframe (left) + PPL info (middle) +
     notes (right) without any of them feeling cramped. */
  width: min(1640px, calc(100vw - 48px));
  height: min(900px, calc(100vh - 48px));
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: leads-modal-pop 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes leads-modal-pop {
  from { transform: scale(0.97) translateY(8px); opacity: 0; }
  to   { transform: scale(1) translateY(0);     opacity: 1; }
}
.leads-ingest-header,
.leads-stages-header,
.leads-add-header,
.leads-call-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.leads-ingest-title,
.leads-stages-title,
.leads-add-title,
.leads-call-title {
  font-size: 17px;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.01em;
}
.leads-ingest-close,
.leads-stages-close,
.leads-add-close,
.leads-call-close {
  width: 32px; height: 32px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: #6b7280;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.leads-ingest-close:hover,
.leads-stages-close:hover,
.leads-add-close:hover,
.leads-call-close:hover { background: #f3f4f6; color: #111827; }
.leads-ingest-body,
.leads-stages-body,
.leads-add-body { padding: 22px 24px; overflow-y: auto; flex: 1; }
.leads-call-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
  background: #f9fafb;
  position: relative;
}
.leads-call-frame-col {
  /* Fixed width so the dialer stays compact and the PPL info column
     gets the lion's share of horizontal space (the operator spends
     more time reading lead info than staring at Sendivo's tiny dial
     form). Sendivo's /call-or-text form fits at ~560px. */
  flex: 0 0 560px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  background: #ffffff;
  /* Clip the iframe so Sendivo's top nav (logo / balance / sub-account
     picker / breadcrumb) disappears below the column's top edge. The
     iframe itself is taller than the column and shifted up — see
     .leads-call-frame for the negative-top offset. */
  overflow: hidden;
}

/* Call modal — header layout (info on the left, X button on the right).
   Two-line header: title (lead name) + a status row with the destination
   phone, the "copied!" pill, and a manual copy button as fallback. */
.leads-call-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.leads-call-subtitle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #4b5563;
}
.leads-call-phone-inline {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.leads-call-copied-pill {
  font-size: 10.5px;
  font-weight: 600;
  color: #047857;
  background: #d1fae5;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.leads-call-copied-pill[aria-hidden="true"] { display: none; }
.leads-call-copy-btn {
  /* Sits immediately to the right of the phone number with only the
     subtitle's `gap` (10px) between them, instead of being pushed to
     the far right by margin-left:auto. Closer = faster to spot. */
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  color: #2563eb;
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
.leads-call-copy-btn:hover { background: #eff6ff; border-color: #93c5fd; }

/* Batch-dial nav cluster — progress label + Skip / Next buttons. Sits
   between the header info and the close X when we're in batch mode. */
.leads-call-batch-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
}
.leads-call-batch-nav.hidden { display: none; }
.leads-call-batch-progress {
  font-size: 11.5px;
  font-weight: 600;
  color: #4b5563;
  padding: 3px 9px;
  background: #f3f4f6;
  border-radius: 999px;
  white-space: nowrap;
}
.leads-call-batch-skip,
.leads-call-batch-next {
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* Iframe fills the body. No extra toolbar — keep the operator's
   attention on the dialer itself.
   We position it absolutely and offset it upward by NAV_HEIGHT so the
   Sendivo top nav (logo / balance / sub-account picker) + breadcrumb
   row scroll off the top of the visible area. Cross-origin so we can't
   actually hide those elements via CSS injection — visual clipping is
   the only mechanism available. */
.leads-call-frame {
  position: absolute;
  top: -108px;        /* ~64px nav + ~44px breadcrumb = 108px hidden */
  left: 0;
  width: 100%;
  height: calc(100% + 108px);
  border: 0;
  background: #ffffff;
}
.leads-call-frame-blocked {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 32px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
  background: #fff7ed;
  border-top: 1px solid #fed7aa;
}
.leads-call-frame-blocked.hidden { display: none; }
.leads-call-frame-blocked code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #fed7aa;
  color: #c2410c;
}

/* Middle info column — PropertyLeads metadata (contact, property,
   motivation, lead source). Sits between the Sendivo dialer (left)
   and the notes column (right). Takes the remaining horizontal
   space — gets the widest column since it has the most content. */
.leads-call-info-col {
  flex: 1 1 auto;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
  border-left: 1px solid #e5e7eb;
}
.leads-call-info-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.leads-call-info-body::-webkit-scrollbar       { width: 8px; }
.leads-call-info-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* Right-side Notes column — add-note input + existing notes list. Its
   own scroll context so writing a note doesn't disturb the operator's
   place in the PPL info middle column. Narrower than the info column
   since notes are usually short call jottings. */
.leads-call-notes-col {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
  border-left: 1px solid #e5e7eb;
}
.leads-call-notes-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.leads-call-notes-body::-webkit-scrollbar       { width: 8px; }
.leads-call-notes-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

.leads-call-info-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.leads-call-info-section-id {
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef0f3;
}
.leads-call-info-section-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 2px;
}
/* Header row: name on the left, Add Contact pill + agent badge on
   the right. The Add Contact pill sits between the name and the agent
   badge so the operator can click it without targeting the badge by
   accident. */
.leads-call-info-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.leads-call-info-add-contact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
}
.leads-call-info-add-contact:hover:not(:disabled) {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
.leads-call-info-add-contact:active:not(:disabled) { transform: scale(0.97); }
.leads-call-info-add-contact:disabled {
  color: #9ca3af;
  background: #f3f4f6;
  border-color: #e5e7eb;
  cursor: not-allowed;
}
.leads-call-info-name {
  font-size: 17px;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.01em;
  line-height: 1.25;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
/* Contact strip directly under the name — phone + email as inline
   pills. Operator can glance these without leaving the top of the
   panel. Each one is its own selectable chip so they can be
   highlighted with a click-drag for copy. */
.leads-call-info-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.leads-call-info-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  background: #f3f4f6;
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.leads-call-info-contact-icon {
  font-size: 11px;
  line-height: 1;
}
.leads-call-info-agent {
  display: inline-block;
  width: fit-content;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
}
.leads-call-info-agent[data-agent="maximos"] { background: #fee2e2; color: #991b1b; }
.leads-call-info-agent[data-agent="logan"]   { background: #dcfce7; color: #166534; }
.leads-call-info-agent[data-agent="mason"]   { background: #dbeafe; color: #1e40af; }

.leads-call-info-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 12.5px;
  line-height: 1.4;
}
.leads-call-info-label {
  color: #9ca3af;
  font-weight: 500;
}
.leads-call-info-value {
  color: #111827;
  word-break: break-word;
}
.leads-call-info-comments {
  font-size: 12.5px;
  color: #374151;
  line-height: 1.5;
  padding: 10px 12px;
  background: #f9fafb;
  border-left: 3px solid #d1fae5;
  border-radius: 0 6px 6px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Stage pills — click any pill to re-stage the lead mid-call. Faster
   than a dropdown (one click vs two). Pills wrap if the stage list
   grows beyond what fits on a single row. */
.leads-call-info-stage-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leads-call-info-stage-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}
.leads-call-info-stage-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.leads-call-info-stage-pill {
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  color: #4b5563;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
}
.leads-call-info-stage-pill:hover:not(.is-active) {
  border-color: #cbd5e1;
  background: #f9fafb;
  color: #111827;
}
.leads-call-info-stage-pill:active { transform: scale(0.96); }
.leads-call-info-stage-pill.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  cursor: default;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18);
}
.leads-call-info-stage-pill.is-active:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

/* Quick-action buttons (Zillow / PropStream) — open the lead's property
   in the named tabs so the operator can pull comps / data while talking
   without losing the dialer. */
.leads-call-info-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.leads-call-info-quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  color: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, transform 0.08s;
}
.leads-call-info-quick-btn:hover:not(:disabled) {
  border-color: #d1d5db;
  background: #f9fafb;
}
.leads-call-info-quick-btn:active:not(:disabled) { transform: scale(0.98); }
.leads-call-info-quick-btn:disabled {
  color: #9ca3af;
  background: #f3f4f6;
  cursor: not-allowed;
}
.leads-call-info-quick-zillow:hover:not(:disabled)     { border-color: #2563eb; color: #1d4ed8; }
.leads-call-info-quick-propstream:hover:not(:disabled) { border-color: #f59e0b; color: #b45309; }
.leads-call-info-quick-arv:hover:not(:disabled)        { border-color: #10b981; color: #047857; }
/* ARV button spans the full row (below Zillow/PropStream). The two-col
   grid above is `grid-template-columns: 1fr 1fr`, so spanning both
   columns puts the ARV button on its own row underneath. */
.leads-call-info-quick-arv { grid-column: 1 / -1; }
.leads-call-info-quick-icon { font-size: 14px; line-height: 1; }

/* The prominent motivation block — reason for selling, repairs, time
   frame. Each in its own amber-highlighted card. Bigger value text so
   the operator can read it without leaning in. */
.leads-call-info-hi-section {
  gap: 10px;
}
.leads-call-info-hi-block {
  padding: 10px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
}
.leads-call-info-hi-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #92400e;
  margin-bottom: 4px;
}
/* Label row variant — for blocks that have an action button (e.g. the
   address copy button) next to the label on the same line. */
.leads-call-info-hi-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.leads-call-info-hi-label-row .leads-call-info-hi-label {
  margin-bottom: 0;
}
.leads-call-info-addr-copy {
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: inherit;
  color: #92400e;
  background: #ffffff;
  border: 1px solid #fde68a;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s, border-color 0.12s;
}
.leads-call-info-addr-copy:hover {
  background: #fffbeb;
  border-color: #f59e0b;
}
.leads-call-info-hi-value {
  font-size: 14.5px;
  font-weight: 500;
  color: #111827;
  line-height: 1.4;
  word-break: break-word;
  white-space: pre-wrap;
}

.leads-call-info-note {
  font-size: 12px;
  background: #f9fafb;
  border: 1px solid #eef0f3;
  border-radius: 7px;
  padding: 8px 10px;
}
.leads-call-info-note-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.leads-call-info-note-meta {
  font-size: 10.5px;
  color: #9ca3af;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Note delete button — small × tucked at the end of the meta row. Subtle
   grey by default, turns red on hover. Confirmation prompt in the JS
   handler — single-click is intentional but reversible only via that
   confirm() dialog. */
.leads-call-info-note-del {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: #9ca3af;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.12s, background-color 0.12s;
}
.leads-call-info-note-del:hover { color: #ef4444; background: #fee2e2; }
.leads-call-info-note-text {
  color: #374151;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.leads-call-info-note-empty {
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
}
.leads-call-info-add-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.leads-call-info-note-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  resize: vertical;
  min-height: 56px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.leads-call-info-note-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.leads-call-info-note-input::placeholder { color: #9ca3af; }
.leads-call-info-note-btn {
  align-self: flex-end;
  padding: 5px 12px;
  font-size: 12px;
}

/* On narrow viewports the side columns collapse below the iframe
   instead of squeezing it. Iframe gets the top half, info + notes
   stack underneath. */
@media (max-width: 1200px) {
  .leads-call-body { flex-direction: column; }
  .leads-call-info-col,
  .leads-call-notes-col {
    flex: 0 0 220px;
    border-left: 0;
    border-top: 1px solid #e5e7eb;
  }
}

/* Ingest modal */
.leads-ingest-section { margin-bottom: 26px; }
.leads-ingest-section-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
}
.leads-ingest-section-hint {
  font-size: 12.5px;
  color: #6b7280;
  margin-bottom: 10px;
  line-height: 1.5;
}
.leads-ingest-hint-secondary {
  font-size: 11.5px;
  color: #9ca3af;
}
.leads-ingest-code-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 6px; }
.leads-ingest-code {
  flex: 1;
  display: block;
  padding: 10px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: #111827;
  background: #f9fafb;
  border: 1px solid #eef0f3;
  border-radius: 7px;
  overflow-x: auto;
  white-space: nowrap;
}
.leads-ingest-code-block {
  padding: 12px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: #111827;
  background: #f9fafb;
  border: 1px solid #eef0f3;
  border-radius: 7px;
  overflow-x: auto;
  white-space: pre;
  max-height: 360px;
  margin-bottom: 8px;
}
.leads-ingest-list { margin: 8px 0 0 18px; font-size: 12.5px; color: #4b5563; line-height: 1.65; }
.leads-ingest-list ul { margin: 4px 0 0 16px; }
.leads-ingest-list code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: #1f2937;
}
.leads-ingest-copy-btn { white-space: nowrap; }

/* Stages modal */
.leads-stages-hint { font-size: 12.5px; color: #6b7280; margin-bottom: 14px; line-height: 1.5; }
.leads-stages-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.leads-stages-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  cursor: default;
  transition: border-color 0.12s, background-color 0.12s;
}
.leads-stages-row:hover { border-color: #e5e7eb; background: #ffffff; }
.leads-stages-row.leads-dragging { opacity: 0.4; }
.leads-stages-drag-handle {
  color: #94a3b8;
  font-size: 14px;
  user-select: none;
  cursor: grab;
  /* Pointer drag needs touch-action:none so touch input doesn't get
     hijacked by the browser as a scroll/pan. Padding gives a wider
     hit target so the handle is easy to grab. */
  touch-action: none;
  padding: 4px 6px;
  margin: -4px -6px -4px -10px;
  border-radius: 4px;
}
.leads-stages-drag-handle:hover { background: #e2e8f0; color: #475569; }
.leads-stages-drag-handle:active { cursor: grabbing; }
/* Don't let the row's own cursor:grab override the handle's grabbing. */
.leads-stages-row.leads-dragging .leads-stages-drag-handle { cursor: grabbing; }
.leads-stages-input {
  flex: 1;
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
}
.leads-stages-remove {
  width: 24px; height: 24px;
  padding: 0;
  font-size: 16px;
  color: #b91c1c;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.leads-stages-remove:hover { background: #fee2e2; border-color: #fecaca; }
.leads-stages-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 6px; border-top: 1px solid #e2e8f0; }

/* Add-lead modal */
.leads-add-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.leads-add-input {
  flex: 1;
  min-width: 140px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
}
.leads-add-input:focus { outline: 2px solid #93c5fd; outline-offset: -1px; }
.leads-add-small { flex: 0 0 80px; min-width: 80px; }
.leads-add-textarea {
  width: 100%;
  margin-bottom: 8px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  resize: vertical;
}
.leads-add-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 6px; border-top: 1px solid #e2e8f0; }

/* ───────────────────────────────────────────────────────────────────────
   Pipeline section — always-on disposition view that lives in its own
   right column inside Hub Tasks (2026-05-27 move). The whole section
   stretches vertically to fill the column; the inner row list scrolls
   independently so the page itself never grows past viewport height.
   Read-only MVP — clicking rows does nothing today.
   ─────────────────────────────────────────────────────────────────────── */
.hub-pipeline-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.hub-pipeline-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-bottom: 1px solid #cbd5e1;
  flex: 0 0 auto;
}
.hub-pipeline-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.hub-pipeline-total {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
}
.hub-pipeline-stalled-flag {
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  padding: 2px 8px;
  border-radius: 999px;
}

.hub-pipeline-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
  padding: 12px 14px 14px;
}
.hub-pipeline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.hub-pipeline-chip {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.hub-pipeline-chip:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.hub-pipeline-chip.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}
.hub-pipeline-chip-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.hub-pipeline-chip:not(.is-active) .hub-pipeline-chip-count {
  background: #e2e8f0;
  color: #475569;
}

.hub-pipeline-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.hub-pipeline-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 13px;
  color: #64748b;
  font-style: italic;
}

.hub-pipeline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 13px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.hub-pipeline-row:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.hub-pipeline-row.is-stalled {
  background: #fff7ed;
  border-color: #fed7aa;
}
.hub-pipeline-row.is-stalled:hover {
  background: #ffedd5;
  border-color: #fdba74;
}

.hub-pipeline-pill {
  flex: 0 0 auto;
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
/* Per-stage accents — mirror the action-block tile colors so the
   pipeline feels visually connected to the actions above. */
.hub-pipeline-pill-distribute {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}
.hub-pipeline-pill-mls {
  /* violet — distinct from distribute/contract/escrow; reads as "listed" */
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
}
.hub-pipeline-pill-contract {
  /* DocuSign brand split — blue left, red right */
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #dc2626 100%);
}
.hub-pipeline-pill-escrow {
  background: linear-gradient(135deg, #047857 0%, #10b981 100%);
}

.hub-pipeline-row-street {
  flex: 1 1 auto;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.hub-pipeline-state {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  vertical-align: 1px;
}
.hub-pipeline-row-detail {
  flex: 0 1 auto;
  font-size: 12px;
  color: #475569;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-pipeline-row-fee {
  color: #047857;
  font-weight: 700;
}
.hub-pipeline-row-fee-missing {
  font-style: italic;
  color: #94a3b8;
}
.hub-pipeline-row-age {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}
.hub-pipeline-row-stalled {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────────────────
   Scheduled follow-ups card (#29B) — lives at the bottom of the actions
   column. Lists pending auto-drips + off-hours deferred take-overs across
   all agents, each with a cancel (×) button. Hidden entirely when empty.
   ─────────────────────────────────────────────────────────────────────── */
.hub-drips-card {
  margin-top: 10px;
}
.hub-drips-card:empty { display: none; }
.hub-drips-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 6px;
}
.hub-drips-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim, #6e7781);
}
.hub-drips-count {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  background: #e2e8f0;
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}
.hub-drips-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.hub-drips-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "main cancel"
    "meta cancel";
  gap: 2px 8px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--border, #e1e4e8);
  border-left-width: 4px;
  border-radius: 8px;
  background: #fafbfc;
}
.hub-drips-row.is-drip      { border-left-color: #6366f1; }  /* indigo — auto-drip */
.hub-drips-row.is-deferred  { border-left-color: #f59e0b; }  /* amber — off-hours deferral */
.hub-drips-row-main {
  grid-area: main;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.hub-drips-row-contact {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #24292f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-drips-row-agent {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex: 0 0 auto;
}
.hub-drips-row-meta {
  grid-area: meta;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim, #6e7781);
}
.hub-drips-row-label {
  font-weight: 600;
}
.hub-drips-row-when {
  color: #94a3b8;
}
.hub-drips-row-when::before { content: "· "; }
.hub-drips-cancel {
  grid-area: cancel;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #94a3b8;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hub-drips-cancel:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}
.hub-drips-cancel:disabled { opacity: 0.5; cursor: wait; }

/* 2026-05-27 — "Send Assignment" button on each Distribute-stage row.
   Click navigates to the Fill Assignment drafting flow with the street
   already pre-filled. Red accent matches the Distribute stage pill so
   the action visually ties to its stage. */
.hub-pipeline-row-action {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid #dc2626;
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #fff;
  white-space: nowrap;
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.25);
}
.hub-pipeline-row-action:hover {
  filter: brightness(1.06);
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.35);
  transform: translateY(-1px);
}
.hub-pipeline-row-action:active { transform: translateY(0); }
.hub-pipeline-row-action:disabled { opacity: 0.55; cursor: wait; }

/* "→ Contract Sent" manual-move button — indigo (matches the Contract
   Sent pill accent) so it reads as "advance to that stage", distinct
   from the red Send Assignment primary action. */
.hub-pipeline-row-action-move {
  border-color: #4f46e5;
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
}
.hub-pipeline-row-action-move:hover {
  box-shadow: 0 3px 8px rgba(79, 70, 229, 0.35);
}
/* "+ MLS" button — violet (matches the MLS pill) so it reads as "move to
   the MLS stage", distinct from the red Send Assignment + indigo Contract
   Sent buttons. */
.hub-pipeline-row-action-mls {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.25);
}
.hub-pipeline-row-action-mls:hover {
  box-shadow: 0 3px 8px rgba(124, 58, 237, 0.35);
}
/* "↩ Distribute" undo button — muted outline, low-emphasis (it's a
   correction action, not a primary one). */
.hub-pipeline-row-action-undo {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #475569;
  box-shadow: none;
}
.hub-pipeline-row-action-undo:hover {
  background: #eef2f7;
  border-color: #94a3b8;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
/* "moved manually" detail label on manually-pinned Contract Sent rows. */
.hub-pipeline-row-manual {
  font-style: italic;
  color: #6366f1;
}
/* Let action buttons wrap under the row content when the pipeline
   column is narrow (Distribute rows now carry two buttons). */
.hub-pipeline-row { flex-wrap: wrap; }

/* ── DM merged into the Voice tab (unified Discord-style comms) ─────────────
   The DM DOM is reparented into #chatViewPublic at runtime (mergeDmIntoVoice).
   These rules lay out the relocated pieces in their new home; the old
   #chatViewDm rules are untouched (that view is now empty/unused). */
/* Voice center + channel-chat wrapped so we can hide them when a DM is open. */
#chatViewPublic .vc-voice-main { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; }
#chatViewPublic .vc-voice-main.hidden { display: none !important; }
/* The left rail now holds VOICE CHANNELS and, below, DIRECT MESSAGES. The rail
   itself scrolls; each section sizes to its content. The original
   `.vc-channel-list { flex:1 }` filled the whole rail and squeezed the channels
   to nothing once the DM section was added below it (the "channels cut off"
   bug) — so in the unified rail both lists are flex:0 0 auto + non-scrolling,
   and the rail (.vc-left) is the single scroll container. */
#chatViewPublic .vc-left { overflow-y: auto; overflow-x: hidden; }
#chatViewPublic .vc-channel-list { flex: 0 0 auto; overflow: visible; }
#chatViewPublic .vc-section-label-dm { margin-top: 16px; }
#chatViewPublic .vc-left .dm-contact-panel { display: flex; flex-direction: column; flex: 0 0 auto; background: transparent; border: 0; width: auto; min-width: 0; overflow: visible; }
#chatViewPublic .vc-left .dm-search-box { padding: 4px 0 8px; }
#chatViewPublic .vc-left .dm-contact-list { flex: 0 0 auto; max-height: none; overflow: visible; }
/* DM empty-state + conversation fill the area right of the rail in DM mode. */
#chatViewPublic > .vc-layout > #dmEmptyState,
#chatViewPublic > .vc-layout > #dmConversation { flex: 1 1 auto; min-width: 0; }
/* The 1:1 call layout (now a sibling of .vc-layout under the Voice view) takes
   the full panel when a call is active (.vc-layout is hidden by JS then). */
#chatViewPublic > .dm-call-layout { flex: 1 1 auto; min-width: 0; min-height: 0; }