*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --maroon:#6b1a2a; --maroon-light:#8c2e42; --maroon-soft:rgba(107,26,42,0.07); --maroon-border:rgba(107,26,42,0.18);
  --bg:#f7f4ef; --bg-card:#ffffff;
  --text-dark:#2a2420; --text-mid:#5a5248; --text-light:#8a8278; --text-faint:#b0a898;
  --sage:#5a6b4e; --sage-soft:rgba(90,107,78,0.1);
  --border:rgba(42,36,32,0.08); --border-strong:rgba(42,36,32,0.12);
}
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden; }
body { font-family:'Outfit',sans-serif; background:var(--bg); color:var(--text-dark); height:100vh; height:100dvh; overflow:hidden; }

/* NAV */
nav { display:flex; justify-content:space-between; align-items:center; padding:10px 24px; background:rgba(247,244,239,0.95); border-bottom:1px solid var(--border); backdrop-filter:blur(12px); position:relative; z-index:100; }
.logo { display:flex; align-items:center; gap:10px; }
.logo-img { width:38px; height:38px; border-radius:50%; object-fit:cover; box-shadow:0 2px 8px rgba(107,26,42,0.2); }
.logo-text { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:600; }
.nav-phone { color:var(--maroon); text-decoration:none; font-size:13px; font-weight:500; border:1px solid var(--maroon-border); padding:6px 14px; border-radius:8px; }
.nav-phone:hover { background:var(--maroon-soft); }
.nav-links { display:flex; gap:24px; list-style:none; }
.nav-links a { color:var(--text-light); text-decoration:none; font-size:12px; letter-spacing:0.8px; text-transform:uppercase; transition:color 0.3s; }
.nav-links a:hover { color:var(--maroon); }

/* MAIN LAYOUT */
.main-layout { display:flex; height:calc(100vh - 56px); height:calc(100dvh - 56px); overflow:hidden; }

/* LEFT CHAT */
.left { flex:0 0 340px; max-width:340px; min-width:300px; display:flex; flex-direction:column; border-right:1px solid var(--border); background:var(--bg-card); }
.chat-area { flex:1; overflow-y:auto; padding:20px 18px 14px; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100%; text-align:center; padding:0 8px; }
.empty-desc { font-size:13px; color:var(--text-light); max-width:300px; line-height:1.6; font-weight:300; margin-bottom:20px; }
.prompt-grid { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:320px; }
.prompt-chip { background:var(--bg); border:1px solid var(--border); border-radius:100px; padding:7px 12px; font-size:12px; color:var(--text-mid); cursor:pointer; font-family:'Outfit',sans-serif; transition:all 0.2s; }
.prompt-chip:hover { border-color:var(--maroon-border); color:var(--maroon); background:var(--maroon-soft); }
.chip-section-label { font-family:'Outfit',sans-serif; font-size:11px; font-weight:500; color:var(--text-light); letter-spacing:0.6px; text-transform:uppercase; margin:14px 0 8px; text-align:center; }

/* Messages */
.msg { margin-bottom:14px; }
.msg-user { display:flex; justify-content:flex-end; }
.msg-ai { display:flex; }
.bubble-user { background:var(--maroon); color:#f7f4ef; padding:10px 14px; border-radius:14px 14px 4px 14px; max-width:90%; font-size:14px; line-height:1.5; }
.bubble-ai { background:var(--bg); padding:10px 14px; border-radius:14px; max-width:100%; font-size:14px; line-height:1.65; color:var(--text-mid); font-weight:300; border:1px solid var(--border); }
.bubble-ai strong { color:var(--text-dark); font-weight:500; }
.prop-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.prop-chip { background:#fff; border:1px solid var(--border-strong); border-radius:8px; padding:6px 10px; font-size:12px; font-family:'Outfit',sans-serif; color:var(--text-dark); cursor:pointer; transition:all 0.2s; display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; }
.prop-chip:hover { border-color:var(--maroon); background:var(--maroon-soft); color:var(--maroon); }
.prop-chip-price { font-size:10px; color:var(--maroon); font-weight:600; }
.prop-chip-inline { display:inline; background:var(--maroon-soft); border:1px solid var(--maroon-border); border-radius:6px; padding:2px 8px; font-size:12px; font-family:'Outfit',sans-serif; color:var(--maroon); font-weight:600; cursor:pointer; transition:all 0.2s; margin-left:4px; }
.prop-chip-inline:hover { background:var(--maroon); color:#fff; border-color:var(--maroon); }
.loading-dots { display:flex; gap:6px; padding:4px 0; }
.loading-dots span { width:7px; height:7px; border-radius:50%; background:var(--maroon); animation:dotPulse 1.4s infinite ease-in-out; }
.loading-dots span:nth-child(2) { animation-delay:0.2s; }
.loading-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes dotPulse { 0%,80%,100%{opacity:0.3;transform:scale(0.8)} 40%{opacity:1;transform:scale(1)} }
.error-msg { text-align:center; color:#c23838; font-size:13px; padding:8px; background:rgba(194,56,56,0.06); border-radius:8px; margin:8px 0; }

/* Input */
.input-area { padding:10px 14px 14px; border-top:1px solid var(--border); }
.input-wrap { display:flex; gap:8px; align-items:center; }
.input-wrap input { flex:1; border:1px solid var(--border-strong); border-radius:10px; padding:12px 14px; font-size:16px; font-family:'Outfit',sans-serif; color:var(--text-dark); background:#fff; outline:none; transition:all 0.3s; }
.input-wrap input::placeholder { color:var(--text-faint); font-weight:300; }
.input-wrap input:focus { border-color:var(--maroon-light); box-shadow:0 0 0 3px rgba(107,26,42,0.08); }
.send-btn { width:44px; height:44px; border-radius:10px; border:none; background:var(--maroon); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(107,26,42,0.25); transition:all 0.2s; flex-shrink:0; }
.send-btn:hover { background:var(--maroon-light); transform:scale(1.05); }
.send-btn:disabled { opacity:0.5; cursor:default; transform:none; }
.send-btn svg { width:18px; height:18px; fill:#f0ebe0; }
.reset-row { text-align:center; margin-top:6px; }
.reset-btn { background:none; border:none; padding:4px 10px; font-size:11px; color:var(--text-faint); cursor:pointer; font-family:'Outfit',sans-serif; transition:all 0.2s; }
.reset-btn:hover { color:var(--maroon); }

/* VIEW TOGGLE BAR */
.view-toggle-bar { display:flex; align-items:center; padding:8px 16px; background:var(--bg-card); border-bottom:1px solid var(--border); gap:4px; flex-shrink:0; }
.view-toggle { display:flex; align-items:center; gap:5px; padding:6px 14px; border-radius:8px; border:1px solid var(--border); background:none; font-family:'Outfit',sans-serif; font-size:12px; font-weight:500; color:var(--text-light); cursor:pointer; transition:all 0.2s; }
.view-toggle svg { width:14px; height:14px; fill:currentColor; }
.view-toggle:hover { border-color:var(--maroon-border); color:var(--maroon); }
.view-toggle.active { background:var(--maroon); color:#f7f4ef; border-color:var(--maroon); }
.view-toggle.active svg { fill:#f7f4ef; }
.view-count { margin-left:auto; font-size:11px; color:var(--text-light); font-weight:500; }

/* GRID VIEW */
.grid-view { flex:1; overflow-y:auto; display:none; }
.grid-view.active { display:block; }
.grid-container { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; padding:16px; }
.grid-empty { grid-column:1/-1; display:flex; align-items:center; justify-content:center; height:200px; color:var(--text-faint); font-size:13px; font-weight:300; }
.grid-card { background:#fff; border-radius:10px; overflow:hidden; border:1px solid var(--border); cursor:pointer; transition:all 0.25s; display:flex; flex-direction:column; }
.grid-card:hover { border-color:var(--maroon-border); transform:translateY(-2px); box-shadow:0 6px 20px rgba(107,26,42,0.1); }
.grid-card.active { border-color:var(--maroon); box-shadow:0 0 0 2px var(--maroon-border); }
.grid-card-img { width:100%; height:160px; object-fit:cover; display:block; background:#e8e2d8; }
.grid-card-body { padding:12px 14px 14px; flex:1; display:flex; flex-direction:column; }
.grid-card-tag { display:inline-block; font-size:9px; color:var(--maroon); background:var(--maroon-soft); padding:3px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; font-weight:500; align-self:flex-start; }
.grid-card-name { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; color:var(--text-dark); margin-bottom:3px; line-height:1.2; }
.grid-card-loc { font-size:11px; color:var(--text-light); margin-bottom:auto; }
.grid-card-foot { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.grid-card-price { font-size:16px; font-weight:600; color:var(--maroon); }
.grid-card-acres { font-size:10px; color:var(--sage); background:var(--sage-soft); padding:3px 8px; border-radius:100px; font-weight:500; }

/* MAP VIEW */
.map-view { flex:1; display:none; flex-direction:column; overflow:hidden; }
.map-view.active { display:flex; }

/* RIGHT: MAP + CARDS */
.right { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.map-area { flex:1 1 0; min-height:200px; position:relative; border-bottom:1px solid var(--border); }
#map { width:100%; height:100%; }
.map-overlay { position:absolute; top:12px; left:12px; z-index:10; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border-radius:8px; padding:8px 14px; font-size:11px; color:var(--text-mid); font-weight:500; border:1px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.map-overlay strong { color:var(--maroon); }
.sat-toggle { position:absolute; top:12px; right:12px; z-index:10; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:8px; padding:7px 12px; font-size:11px; font-family:'Outfit',sans-serif; font-weight:500; color:var(--text-mid); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:all 0.2s; display:flex; align-items:center; gap:6px; }
.sat-toggle:hover { border-color:var(--maroon-border); color:var(--maroon); }
.sat-toggle.active { background:var(--maroon); color:#f7f4ef; border-color:var(--maroon); }
.sat-toggle svg { width:14px; height:14px; fill:currentColor; }
.states-label { position:absolute; bottom:12px; right:12px; z-index:10; background:rgba(255,255,255,0.88); backdrop-filter:blur(8px); border-radius:6px; padding:6px 10px; font-size:10px; color:var(--text-light); border:1px solid var(--border); }

/* Cards strip */
.cards-strip { flex:0 0 auto; height:230px; overflow-x:auto; overflow-y:hidden; padding:12px 16px; display:flex; gap:12px; background:var(--bg-card); scroll-snap-type:x mandatory; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; }
.cards-strip::-webkit-scrollbar { display:none; }
.cards-strip-empty { display:flex; align-items:center; justify-content:center; width:100%; color:var(--text-faint); font-size:13px; font-weight:300; }
.cards-wrap { position:relative; }
.cards-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:15; width:32px; height:32px; border-radius:50%; border:none; background:rgba(255,255,255,0.92); box-shadow:0 2px 8px rgba(0,0,0,0.15); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--text-mid); transition:all 0.15s; }
.cards-arrow:hover { background:#fff; box-shadow:0 2px 12px rgba(0,0,0,0.2); }
.cards-arrow.hide { display:none; }
.cards-arrow-left { left:6px; }
.cards-arrow-right { right:6px; }
.card { flex:0 0 270px; scroll-snap-align:start; background:#fff; border-radius:10px; overflow:hidden; border:1px solid var(--border); text-decoration:none; color:inherit; transition:all 0.25s; cursor:pointer; display:flex; flex-direction:column; }
.card:hover { border-color:var(--maroon-border); transform:translateY(-2px); box-shadow:0 6px 20px rgba(107,26,42,0.1); }
.card.active { border-color:var(--maroon); box-shadow:0 0 0 2px var(--maroon-border); }
.card-img { width:100%; height:105px; object-fit:cover; display:block; background:#e8e2d8; }
.card-body { padding:10px 12px 12px; flex:1; display:flex; flex-direction:column; }
.card-tag { display:inline-block; font-size:9px; color:var(--maroon); background:var(--maroon-soft); padding:3px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; font-weight:500; align-self:flex-start; }
.card-name { font-family:'Cormorant Garamond',serif; font-size:16px; font-weight:600; color:var(--text-dark); margin-bottom:2px; line-height:1.2; }
.card-loc { font-size:11px; color:var(--text-light); margin-bottom:auto; }
.card-foot { display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
.card-price { font-size:15px; font-weight:600; color:var(--maroon); }
.card-acres { font-size:10px; color:var(--sage); background:var(--sage-soft); padding:3px 8px; border-radius:100px; font-weight:500; }

/* 2026-05-03 (Bart Surface Pro): scrollbar more visible so users see scroll affordance.
   Was 5px / 12% opacity (basically invisible). Now 10px / 35% (60% on hover). */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(107,26,42,0.35); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:rgba(107,26,42,0.6); }

/* ── PROPERTY DETAIL MODAL ── */
#modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.55); z-index:200;
  align-items:center; justify-content:center;
  backdrop-filter:blur(3px);
}
#modal-overlay.open { display:flex; animation:modalFadeIn .2s ease; }
@keyframes modalFadeIn { from{opacity:0} to{opacity:1} }

#modal {
  width:800px; max-width:96vw; max-height:92vh;
  background:var(--bg-card); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;
  animation:modalSlideUp .22s ease;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
@keyframes modalSlideUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

#modal-hdr {
  background:var(--maroon);
  padding:18px 22px;
  display:flex; justify-content:space-between; align-items:flex-start;
}
.mh-left { flex: 0 1 auto; min-width: 0; max-width: 60%; }
.mh-name {
  font-family:'Cormorant Garamond',serif;
  font-size:24px; font-weight:700; color:#f7f4ef; line-height:1.1;
}
.mh-loc { font-size:13px; color:rgba(247,244,239,0.75); margin-top:4px; font-weight:400; }
.mh-tag { font-size:10px; color:rgba(247,244,239,0.5); margin-top:3px; letter-spacing:.06em; text-transform:uppercase; }

#modal-close {
  background:rgba(0,0,0,0.15); border:1px solid rgba(0,0,0,0.2);
  color:rgba(255,255,255,0.8); cursor:pointer;
  width:32px; height:32px; border-radius:8px;
  font-size:18px; display:flex; align-items:center; justify-content:center;
  transition:all .15s; flex-shrink:0;
}
#modal-close:hover { background:rgba(255,255,255,0.2); color:#fff; }

#modal-img {
  width:100%; height:280px; object-fit:cover; display:block; background:#e8e2d8;
}

#modal-view-wrap { position:relative; height:280px; border-bottom:1px solid var(--border); overflow:hidden; }
#modal-img { width:100%; height:100%; object-fit:cover; display:block; background:#e8e2d8; position:absolute; inset:0; z-index:2; transition:opacity 0.3s; }
#modal-img.hidden { opacity:0; pointer-events:none; z-index:1; }
#modal-map { width:100%; height:100%; position:absolute; inset:0; z-index:1; }
#modal-map.shown { z-index:2; }
.modal-view-toggle { position:absolute; top:10px; right:10px; z-index:10; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:8px; padding:6px 12px; font-size:11px; font-family:'Outfit',sans-serif; font-weight:500; color:var(--text-mid); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.1); transition:all 0.2s; display:flex; align-items:center; gap:6px; }
.modal-view-toggle:hover { border-color:var(--maroon-border); color:var(--maroon); }
.modal-view-toggle svg { width:14px; height:14px; fill:currentColor; }

/* CAROUSEL */
.carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:11; width:40px; height:40px; border-radius:50%; border:none; background:rgba(0,0,0,0.45); color:#fff; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; padding-bottom:3px; }
.carousel-arrow:hover { background:rgba(0,0,0,0.7); transform:translateY(-50%) scale(1.05); }
.carousel-arrow.hide { display:none; }
.carousel-prev { left:10px; padding-right:3px; padding-bottom:0; }
.carousel-next { right:10px; padding-left:3px; padding-bottom:0; }
.carousel-counter { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:10; background:rgba(0,0,0,0.55); color:#fff; font-size:11px; font-weight:500; padding:4px 10px; border-radius:100px; font-family:'Outfit',sans-serif; letter-spacing:0.05em; }
.carousel-counter.hide { display:none; }
.carousel-thumbs { display:flex; gap:4px; padding:8px 10px; background:var(--bg); overflow-x:auto; scrollbar-width:thin; -webkit-overflow-scrolling:touch; min-height:56px; }
.carousel-thumbs::-webkit-scrollbar { height:4px; }
.carousel-thumbs.hide { display:none; }
.carousel-thumb { flex:0 0 auto; width:56px; height:40px; border-radius:4px; border:2px solid transparent; cursor:pointer; object-fit:cover; transition:all 0.15s; opacity:0.65; }
.carousel-thumb:hover { opacity:1; }
.carousel-thumb.active { border-color:var(--maroon); opacity:1; }

#modal-stats {
  padding:14px 22px; display:flex; gap:24px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.ms-item { display:flex; flex-direction:column; gap:2px; }
.ms-label { font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-light); font-weight:500; }
.ms-value { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; color:var(--text-dark); }

#modal-footer {
  padding:18px 22px 22px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  overflow-y:auto; flex:1;
}
.mf-desc { font-size:13px; color:var(--text-mid); line-height:1.65; flex:1; font-weight:300; }
.mf-btns { display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.btn-primary {
  padding:10px 22px; background:var(--maroon); border:none;
  color:#f7f4ef; font-family:'Outfit',sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; border-radius:8px; transition:background .15s; white-space:nowrap; text-decoration:none; text-align:center;
}
.btn-primary:hover { background:var(--maroon-light); }
.btn-secondary {
  padding:10px 22px; background:var(--bg-card);
  border:1px solid var(--border-strong); color:var(--text-mid);
  font-family:'Outfit',sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  border-radius:8px; transition:all .15s; white-space:nowrap; text-decoration:none; text-align:center;
}
.btn-secondary:hover { border-color:var(--maroon-border); color:var(--maroon); }

/* ── MOBILE LISTINGS SCREEN ── */
.mob-listings-screen { display:none; }
.mob-tab-bar { display:none; }

/* ── MOBILE LAYOUT ── */
/* 2026-06-01: also trigger single-column on any coarse-pointer (touch) device up
   to 1023px effective width, so iOS Safari sub-100% page-zoom (which inflates the
   CSS viewport past 768px) can't flip a phone into the desktop two-column layout.
   iPad landscape (coarse, >=1024px) and laptops (fine pointer) keep two columns. */
@media (max-width:767px), (pointer:coarse) and (max-width:1023px) {
  .main-layout { flex-direction:column; height:calc(100vh - 56px - 58px); height:calc(100dvh - 56px - 58px); }
  /* Hide grid/map toggle bar on mobile - bottom mob-tab-bar handles navigation */
  .view-toggle-bar { display:none !important; }

  /* Hide desktop strip */
  .cards-wrap { display:none !important; }

  .left {
    display:none; flex:none; max-width:100%; min-width:100%;
    height:100%; border-right:none; border-bottom:none;
  }
  .left.mob-active { display:flex; }

  .right {
    display:none; flex:1; min-height:0;
  }
  .right.mob-active { display:flex; }
  .right.mob-active .map-area { flex:1; max-height:none; min-height:0; }
  .right.mob-active #listing-strip-desktop { display:none; }

  .chat-area { padding:14px 16px 10px; }
  .bubble-user, .bubble-ai { font-size:16px; }
  .prop-chip { font-size:14px; }
  .prop-chip-price { font-size:12px; }
  .empty-state { min-height:auto; padding:10px 8px; }
  .empty-desc { font-size:12px; margin-bottom:12px; max-width:100%; }
  .prompt-grid { max-width:100%; gap:5px; }
  .prompt-chip { padding:6px 10px; font-size:11px; }
  .left { padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px)); }
  .input-area { padding:8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background:var(--bg-card); border-top:1px solid var(--border); position:fixed; bottom:calc(58px + env(safe-area-inset-bottom, 0px)); left:0; right:0; z-index:80; flex-shrink:0; }
  .input-wrap input { padding:10px 12px; font-size:16px; }
  .send-btn { width:40px; height:40px; }
  .nav-links { display:none; }

  /* Mobile listings screen */
  .mob-listings-screen {
    display:none; flex-direction:column; width:100%; height:100%;
    background:var(--bg);
  }
  .mob-listings-screen.mob-active { display:flex; }
  .mob-list-hdr {
    padding:12px 16px 10px; background:var(--bg-card);
    border-bottom:1px solid var(--border); flex-shrink:0;
  }
  .mob-list-count { font-size:11px; color:var(--text-light); font-weight:500; letter-spacing:.4px; text-transform:uppercase; }
  .mob-list-scroll { flex:1; overflow-y:auto; padding:12px; -webkit-overflow-scrolling:touch; }
  .mob-list-empty {
    display:flex; align-items:center; justify-content:center;
    height:200px; color:var(--text-faint); font-size:13px; font-weight:300; text-align:center; padding:20px;
  }
  .mob-cards-col { display:flex; flex-direction:column; gap:10px; }
  .mob-lcard {
    background:#fff; border-radius:10px;
    border:1px solid var(--border); overflow:hidden;
    display:flex; align-items:stretch; cursor:pointer;
    -webkit-tap-highlight-color:transparent; transition:all 0.15s; text-decoration:none; color:inherit;
  }
  .mob-lcard:active { transform:scale(0.985); border-color:var(--maroon-border); }
  .mob-lcard-img {
    width:100px; flex-shrink:0; object-fit:cover;
    background:#e8e2d8; border-radius:9px 0 0 9px;
  }
  .mob-lcard-body { padding:10px 12px; flex:1; min-width:0; display:flex; flex-direction:column; }
  .mob-lcard-name { font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:600; color:var(--text-dark); margin-bottom:2px; line-height:1.2; }
  .mob-lcard-loc { font-size:11px; color:var(--text-light); margin-bottom:4px; }
  .mob-lcard-foot { display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
  .mob-lcard-price { font-size:14px; font-weight:600; color:var(--maroon); }
  .mob-lcard-acres { font-size:10px; color:var(--sage); background:var(--sage-soft); padding:2px 8px; border-radius:100px; font-weight:500; }
  .mob-lcard-tag { display:inline-block; font-size:9px; padding:2px 7px; border-radius:4px; text-transform:uppercase; letter-spacing:.8px; font-weight:500; background:var(--maroon-soft); color:var(--maroon); align-self:flex-start; margin-bottom:4px; }

  /* Tab bar */
  .mob-tab-bar {
    display:flex; position:fixed; bottom:0; left:0; right:0;
    height:calc(58px + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:var(--bg-card); border-top:1px solid var(--border); z-index:90;
  }
  .mob-tab {
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:3px; cursor:pointer; border:none;
    background:none; color:var(--text-faint); font-family:'Outfit',sans-serif;
    -webkit-tap-highlight-color:transparent; transition:color .15s;
  }
  .mob-tab.active { color:var(--maroon); }
  .mob-tab svg { width:22px; height:22px; fill:currentColor; }
  .mob-tab span { font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
  .mob-tab-icon-wrap { position:relative; }
  .mob-tab-dot {
    display:none; width:8px; height:8px; border-radius:50%;
    background:var(--maroon); border:2px solid var(--bg-card);
    position:absolute; top:-2px; right:-5px;
  }
  .mob-tab-dot.show { display:block; }

  /* Modal mobile adjustments */
  #modal-overlay { align-items:center; padding:16px; }
  #modal { width:100%; max-width:480px; max-height:90dvh; border-radius:12px; }
  #modal-view-wrap { height:200px; }
  .carousel-arrow { width:36px; height:36px; font-size:22px; }
  .carousel-thumbs { padding:6px 8px; }
  .carousel-thumb { width:48px; height:36px; }
  #modal-footer { flex-direction:column; gap:14px; }
  .mf-btns { flex-direction:row; flex-wrap:wrap; }
}

/* 2026-06-01: gate the narrow two-column tablet styling to fine pointers only, so a
   coarse device in the 768-1023px band falls through to the mobile block above
   instead of getting a partial desktop .left column. */
@media (min-width:768px) and (max-width:1024px) and (pointer:fine) {
  .left { flex:0 0 300px; max-width:300px; min-width:280px; }
  .empty-desc { font-size:12px; margin-bottom:16px; }
  .prompt-grid { max-width:100%; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .prompt-grid .prompt-chip { font-size:13px; }
  .prompt-chip { padding:6px 10px; font-size:11px; }
}

/* ── Broker line on cards (replaces former category badge) ─ 2026-04-30 ── */
.card-broker, .grid-card-broker, .mob-lcard-broker {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; line-height: 1.3;
  color: var(--text-faint); margin-bottom: 4px;
}
.card-broker-names, .grid-card-broker-names, .mob-lcard-broker-names { font-weight: 500; }
.card-broker-names a, .grid-card-broker-names a, .mob-lcard-broker-names a {
  color: var(--maroon); text-decoration: none;
}
.card-broker-names a:hover, .grid-card-broker-names a:hover, .mob-lcard-broker-names a:hover {
  text-decoration: underline;
}
.card-broker-phone, .grid-card-broker-phone, .mob-lcard-broker-phone {
  font-size: 10.5px; opacity: 0.85;
}
.card-broker-phone a, .grid-card-broker-phone a, .mob-lcard-broker-phone a {
  color: inherit; text-decoration: none;
}

/* ── Broker line on cards (replaces former category badge) ─ 2026-04-30 ── */
.card-broker, .grid-card-broker, .mob-lcard-broker {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; line-height: 1.3;
  color: var(--text-faint); margin-bottom: 4px;
}
.card-broker-names, .grid-card-broker-names, .mob-lcard-broker-names { font-weight: 500; }
.card-broker-names a, .grid-card-broker-names a, .mob-lcard-broker-names a {
  color: var(--maroon); text-decoration: none;
}
.card-broker-names a:hover, .grid-card-broker-names a:hover, .mob-lcard-broker-names a:hover {
  text-decoration: underline;
}
.card-broker-phone, .grid-card-broker-phone, .mob-lcard-broker-phone {
  font-size: 10.5px; opacity: 0.85;
}
.card-broker-phone a, .grid-card-broker-phone a, .mob-lcard-broker-phone a {
  color: inherit; text-decoration: none;
}

/* ── Modal broker section (Bart's broker info request) ─ 2026-04-30 ── */
#modal-brokers {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-faint, #fafafa);
}
#modal-brokers .mb-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
  margin-bottom: 8px;
}
#modal-brokers .mb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-faint, #efefef);
  gap: 12px;
}
#modal-brokers .mb-row:last-child { border-bottom: none; }
#modal-brokers .mb-name {
  font-weight: 500;
  color: var(--maroon);
  text-decoration: none;
}
#modal-brokers .mb-name:hover { text-decoration: underline; }
#modal-brokers .mb-phone {
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
#modal-brokers .mb-phone:hover { color: var(--maroon); }
#modal-brokers .mb-phone-empty { color: var(--text-faint); font-size: 13px; }
@media (max-width: 600px) {
  #modal-brokers .mb-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  #modal-brokers .mb-phone { font-size: 13px; }
}

/* Mobile overrides — keep name+phone on ONE line, smaller text so modal image keeps its size */
@media (max-width: 600px) {
  #modal-brokers {
    padding: 8px 14px;
  }
  #modal-brokers .mb-label {
    font-size: 9px;
    margin-bottom: 4px;
  }
  #modal-brokers .mb-row {
    flex-direction: row;            /* override the earlier column-stack */
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
  }
  #modal-brokers .mb-name { font-size: 12px; }
  #modal-brokers .mb-phone { font-size: 12px; }
}

/* Lock modal image height — was getting flex-shrunk on mobile */
#modal-view-wrap { flex-shrink: 0; }
@media (max-width: 600px) {
  /* Mobile: a bit shorter image to fit the screen, but keep it real-image-sized */
  #modal-view-wrap { height: 220px; }
  #modal-stats { padding: 10px 14px; gap: 18px; }
  .ms-value { font-size: 17px; }
}

/* Hide carousel thumbnails on mobile — too small to be useful, eats vertical space.
   Carousel arrows + counter still show, swipe still works. */
@media (max-width: 600px) {
  .carousel-thumbs { display: none !important; }
}



/* Replace centered arrows with bottom-right "↓ More" pill (Bart-style hint, doesn't cover content) */
.modal-scroll-hint {
  display: none;  /* hidden on desktop, mobile media query enables */
}
@media (max-width: 600px) {
  #modal { position: relative; height: min(92vh, 92dvh); }
  .modal-scroll-hint {
    display: flex;
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 99999;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(107, 26, 42, 0.92);
    color: #fff;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    cursor: pointer;
    align-items: center;
    gap: 4px;
    opacity: 0.95;
    transition: opacity 0.25s, transform 0.25s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    animation: pillBounce 1.4s ease-in-out 0.4s 2;
  }
  .modal-scroll-hint:active { opacity: 1; transform: scale(0.96); }
  .modal-scroll-hint.hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
  @keyframes pillBounce {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-4px); }
  }
}

/* Modal mobile scroll container — wraps stats/brokers/footer so they scroll as one */
@media (max-width: 600px) {
  #modal-content-scroll {
    flex: 1 1 0;
    min-height: 0;        /* CRUCIAL — without this, flex children don't shrink below content size */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  #modal-footer {
    overflow: visible;
    flex: 0 0 auto;
  }
}



/* In-chat broker name + phone chips (Bart 2026-04-30) — match .prop-chip-inline sizing so they line up on one row */
.broker-chip, .phone-chip {
  display: inline-block;
  background: var(--maroon-soft);
  border: 1px solid var(--maroon-border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: normal;
  font-family: 'Outfit', sans-serif;
  color: var(--maroon);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  vertical-align: baseline;
}
.broker-chip:hover, .phone-chip:hover {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
  text-decoration: none;
}
.phone-chip { font-variant-numeric: tabular-nums; }

/* id.land parcel iframe in modal — same positioning as #modal-map (Bart 2026-05-01) */
#modal-parcel {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  border: 0;
}
#modal-parcel.shown { z-index: 2; }


/* 2026-05-01: phone vs email dual-link — show tel: on mobile, mailto: on desktop */
.phone-chip-desktop, .card-phone-desktop, .mb-phone-desktop { display: none !important; }
.phone-chip-mobile,  .card-phone-mobile,  .mb-phone-mobile  { display: inline-flex; }
@media (min-width: 768px) {
  .phone-chip-mobile,  .card-phone-mobile,  .mb-phone-mobile  { display: none !important; }
  .phone-chip-desktop, .card-phone-desktop, .mb-phone-desktop { display: inline-flex !important; }
}


/* 2026-05-02 v2 (Bart): category ALWAYS in stats grid right of acreage (desktop + mobile).
   Allow long category text to wrap and use smaller font on mobile so it fits next to
   Price + Acreage without breaking layout. */
.ms-item-category .ms-value {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  word-break: normal;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .ms-item-category .ms-value { font-size: 11px; }
  #modal-stats { gap: 12px; }
  .ms-item-category { flex: 1 1 50%; min-width: 0; }
}

/* 2026-05-02 v3 (Bart): mh-tag (categories) visible on mobile in burgundy header.
   Desktop hides it (stats grid handles desktop). */
#modal-hdr .mh-tag { display: none; }
@media (max-width: 600px) {
  #modal-hdr .mh-tag { display: block; }
}

/* 2026-05-02 (Bart): Mason & Morse R logo + brand in modal burgundy header,
   centered between ranch name and X close. Desktop only. */
.mh-brand {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  min-width: 0;
  padding: 0 12px;
}
.mh-brand img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.mh-brand span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 600;
  color: #f7f4ef;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .mh-brand { display: none; }
}
/* Below 760px the brand wraps weirdly with property name + close button. Hide below this. */
@media (max-width: 767px) {
  .mh-brand { display: none; }
}

/* 2026-05-04 (Bart): mobile-only R logo in modal header (logo only, no text).
   Sits right of property name/categories, just before the X close button.
   Desktop has the .mh-brand which includes text — this is mobile's compact version. */
.mh-brand-mobile { display: none; }
@media (max-width: 767px) {
  .mh-brand-mobile {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 8px;
  }
  .mh-brand-mobile img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  }
}
/* 2026-05-04 (Bart #3): cards strip shrinks on shorter viewports so map+chat
   above don't get squeezed on 13" laptops / 1366x768. Default 230px stays. */
@media (max-height: 820px) {
  .cards-strip { height: 180px; padding: 8px 12px; }
  .card { flex: 0 0 240px; }
  .card-img { height: 88px; }
}
@media (max-height: 700px) {
  .cards-strip { height: 150px; padding: 6px 10px; gap: 8px; }
  .card { flex: 0 0 220px; }
  .card-img { height: 72px; }
}