/* Extracted from zipdata/templates/zipdata/dashboard.html <style> blocks */

/* === 1. GLOBAL TOKENS & LAYOUT PRIMITIVES === */
:root{
  /* Color tokens (restricted to provided palette) */
  --white:#FFFFFF;
  --white-70:#FFFFFFB2;
  --white-50:#FFFFFF80;
  --white-20:#FFFFFF33;
  --black:#1A1D25;
  --black-50:#1A1D2580;
  --black-20:#1A1D2533;
  --black-6:#1A1D250F;
  --grey:#EEF0F5;
  --blue:#3365F0;
  --green:#3FBC5C;
  --yellow:#FFA407;
  --red:#F30D52;
  --violet:#8D12C8;

  /* App semantic tokens mapped to palette */
  --bg:#F4F5F8;         /* page background grey */
  --sidebar-bg:var(--white-50);     /* requested sidebar color */
  --shell:var(--white);     /* app shell background */
  --panel:var(--white);     /* cards */
  --text:var(--black);      /* primary text */
  --muted:var(--black-50);  /* secondary text */
  --shadow:0 10px 30px var(--black-6);
  --soft-shadow:0 4px 16px var(--black-6);
  --radius:20px;            /* card corners */
  --radius-lg:28px;
  --accent:var(--green);    /* positive */
  --danger:var(--red);      /* negative */
  --brand:var(--black);     /* brand/icon color */
  /* Dual scaling: Sidebar scales to height, Main scales to remaining width */
  --design-height: 1055px; /* 40 (main top pad) + 987 (content min-height) + 28 (main bottom pad) */
  /* Sidebar design metrics */
  --sb-design-width: 192px; /* sidebar width */
  --sb-margin-left: 8px;    /* sidebar left margin in design */
  --sb-margin-top: 8px;     /* top margin */
  --sb-margin-bottom: 8px;  /* bottom margin */
  --sb-design-total-width: calc(var(--sb-design-width) + var(--sb-margin-left));
  --sb-design-total-height: calc(883px + var(--sb-margin-top) + var(--sb-margin-bottom));
  --sb-scale: calc(100vh / var(--sb-design-total-height));
  /* Main design metrics */
  --design-main-width: 1212px; /* 60 (main left pad) + 1120 (content) + 32 (main right pad) */
  --main-scale: calc((100vw - (var(--sb-design-total-width) * var(--sb-scale))) / var(--design-main-width));
  /* Global bleed around fixed search bar to prevent perceived clipping of shadows */
  --agent-search-bleed-x: 12px;
  --agent-search-bleed-y: 12px;
}
*{box-sizing:border-box}
html{overflow-x:hidden; overflow-y:visible !important;}
body{margin:0; font-family: 'Inter', system-ui, Segoe UI, Arial, sans-serif; background:var(--bg); color:var(--text); overflow-y:visible !important;}
.app{display:flex; min-height:100vh;}
/* When showing client-facing flow (QR), hide the sidebar and expand main to full width.
   However, if the demo flag is present (client-demo-mode), we want to show a reduced
   sidebar instead — so these overrides should NOT apply when client-demo-mode is set. */
.app.client-flow-mode:not(.client-demo-mode):not(.page-zip_trends):not(.page-sales_trends) .sb-shell{display:none !important}
.app.client-flow-mode:not(.client-demo-mode) .main-shell{flex:1 1 auto; width:100%}
/* Ensure sidebar is explicitly visible on Trends pages in client-flow mode */
.app.client-flow-mode.page-zip_trends .sb-shell,
.app.client-flow-mode.page-sales_trends .sb-shell{ display:block !important; }

/* When sidebar is hidden for client-facing flows, listing content should be centered
  (original .content-wrap adds a sidebar offset; remove that offset here). */
/* Centering adjustments for client flow handled by scaled main-wrapper; remove legacy left offsets */
/* (previous left offset removed) */

/* (agent search bar positioning consolidated later to a single authoritative rule) */

/* Stronger overrides: the main-wrapper uses transform scaling which can still
   shift elements; when sidebar is hidden we remove that transform so content
   can be positioned normally and centered. This applies only in client-flow mode. */
/* Allow defaults for transform-based scaling to apply in client flow (desktop) */
/* Keep overflow auto on main-shell so content scrolls */
.app.client-flow-mode:not(.client-demo-mode) .main-shell{ overflow:auto; }
/* Center intro pages horizontally */
.app.client-flow-mode:not(.client-demo-mode) .content { margin-left:auto; margin-right:auto; }
/* Remove left-heavy padding on main for client-flow intro pages so content centers visually */
.app.client-flow-mode:not(.client-demo-mode) .main{ padding:40px 32px 28px 32px !important; }
/* Center the scaled main-wrapper horizontally to avoid left shift when sidebar is hidden */
.app.client-flow-mode:not(.client-demo-mode) .main-wrapper{ margin: 0 auto !important; }

/* Client-flow: allow inner pages and graph/agent cards to render shadows without clipping,
  but keep generic .card and stat shapes clipped to their card to avoid translucent shapes
  overflowing their cards. Also restore vertical gaps inside the sliding inner wrapper
  so rows retain spacing when wrapped by the SlideTransition. */
.app.client-flow-mode .page-slide-wrapper { overflow: visible !important; }
.app.client-flow-mode .page-slide-inner { overflow: visible !important; display:flex; flex-direction:column; gap:35px; }
.app.client-flow-mode .content { overflow: visible !important; }
/* Allow graph cards and the agent card to show shadows outside their bounds */
.app.client-flow-mode .graph-card,
.app.client-flow-mode .agent-card { overflow: visible !important; z-index:1; }
/* Keep general .card and stat shapes clipped so decorative shapes don't overflow */
.app.client-flow-mode .card,
.app.client-flow-mode .card.stat { overflow: hidden !important; }
.app.client-flow-mode .small-charts-row { gap:14px !important; }

/* In client-flow mode, match root's main-scale so desktop pages (Zip/Sales Trends)
   render at the same visual size as root instead of expanding to full viewport width. */
/* Only apply root-like main-scale calculation once we enter the demo (Zip/Sales Trends) phase */
.app.client-flow-mode.client-demo-mode { --main-scale: calc((100vw - (var(--sb-design-total-width) * var(--sb-scale))) / var(--design-main-width)); }
/* For client flow intro pages (signup, zipcode, prefs), avoid transform scaling */
.app.client-flow-mode:not(.client-demo-mode){ --main-scale: 1; }

/* When we transition to client demo mode (after prefs -> Zip/Sales Trends),
   force the main content area to use full available width and remove any
   residual transform scaling so charts/pages are not narrower than root. */
/* Remove client-demo-mode full-width overrides; rely on transform scaling like root */

/* Also ensure full width in client-flow mode on desktop for Zip/Sales Trends,
   even before demo-mode is applied (e.g., direct nav). Scope to desktop widths. */
/* Desktop keeps transform scaling for client flow; mobile overrides appear later */

/* Centering handled dynamically by AgentSearchPortal; use CSS variable so client-flow
  mode aligns with the dashboard content instead of the viewport. */
/* Make the search bar span the dashboard content: center it and match the
   content max-width and inner padding so it lines up with the content edges.
   This uses pure CSS (no JS writes) and avoids positional flashes. */
.app.client-flow-mode:not(.client-demo-mode) .agent-search-wrap.fixed-bottom{
  position: fixed !important;
  bottom: calc((28px + 10px) * 1px - var(--agent-search-bleed-y)) !important;
  /* Compute left as the centered content left plus the left gutter so the
     bar begins at the avatar column. */
  /* client-flow hides the sidebar; align to centered content (no sidebar shift) */
  left: calc((100vw - var(--agent-search-content-width)) / 2 + var(--agent-search-gutter-left) - var(--agent-search-bleed-x)) !important;
  /* Width should reach from avatar column to message edge: content width minus gutters */
  width: calc(var(--agent-search-content-width) - var(--agent-search-gutter-left) - var(--agent-search-gutter-right) + (var(--agent-search-bleed-x) * 2)) !important;
  max-width: none !important;
  padding-left: 0 !important; /* gutters baked into left/width */
  padding-right: 0 !important;
  box-sizing: border-box !important;
  transition: none !important;
  z-index: 1300 !important;
}
/* CSS-only default variables for the agent search bar. The center shift should
  be half the sidebar width (192px / 2 = 96px) so the bar centers over the
  dashboard content rather than the viewport. Tweak this value if your layout
  uses different sidebar sizing or paddings. */
/* CSS-only default variables for the agent search bar and chat alignment. */
:root{
  --agent-search-center-shift: 96px;
  --agent-search-width: 920px;
  --agent-search-content-width: 1120px; /* equals .content max-width */
  /* gutters tuned to match the main layout paddings so the bar spans
     from the avatar column (main left pad + content padding) to the
     message edge (main right pad + content padding). */
  /* left gutter: main left pad (60px) + content padding-left (12px) => 72px */
  --agent-search-gutter-left: 72px;
  /* right gutter: main right pad (32px) + content padding-right (12px) => 44px */
  --agent-search-gutter-right: 44px;
}

/* Listing CSS removed from top-level to avoid conflicts with the client-flow listing
  which now injects the authoritative listing styles scoped into the component. */

/* === 2. SIDEBAR & MAIN LAYOUT === */

/* Sidebar: height-based scaling */
.sb-shell{flex: 0 0 calc(var(--sb-design-total-width) * var(--sb-scale)); height:100vh; overflow:visible; position:relative; z-index:5;}
.sb-wrapper{width:var(--sb-design-total-width); height:var(--sb-design-total-height); transform-origin: top left; transform: scale(var(--sb-scale));}
.sb-inner{width:100%; height:100%; padding-left:var(--sb-margin-left); padding-top:var(--sb-margin-top); padding-bottom:var(--sb-margin-bottom);}    
.sb-wrapper .sidebar{margin:0;}

/* Main: width-based scaling using remaining width */
.main-shell{flex: 0 0 calc(var(--design-main-width) * var(--main-scale)); height:100vh; overflow:auto; overflow-x:hidden;}

/* Mobile-only fixes for client flow to prevent clipping and ensure full-width content (applies even in client-demo-mode) */
@media (max-width:640px){
  /* Force wrappers to remove any transform/scale that causes children to shrink or fixed elements to clip */
  .app.client-flow-mode .main-wrapper,
  .app.client-flow-mode .main-shell,
  .app.client-flow-mode .content-wrap,
  .app.client-flow-mode .content,
  .app.client-flow-mode .page-slide-wrapper,
  .app.client-flow-mode .page-slide-inner{
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Ensure the fixed-bottom search bar sits full-bleed within the viewport and doesn't inherit ancestor transforms */
  .app.client-flow-mode .agent-search-wrap.fixed-bottom{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    z-index: 1300 !important;
    /* Ensure CSS fallback variables reflect mobile full-bleed layout */
    --agent-search-left: 0px;
    --agent-search-width: 100vw;
    /* Avoid creating an extra scrollbar by not using viewport-based width */
  }

  /* Make sure graph-card shadows don't cause extra overflow on tiny screens */
  .app.client-flow-mode .graph-card,
  .app.client-flow-mode .agent-card{ overflow: visible !important; }
}
.main-wrapper{width:var(--design-main-width); height:var(--design-height); transform-origin: top left; transform: scale(var(--main-scale));}

/* Sidebar */
.sidebar{
  width:192px; height:883px; border-radius:32px; position:sticky; top:8px; margin:8px 0 8px 8px; overflow:hidden;
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px);
  box-shadow: 0px 10px 20px 0px #0000000A, 0px 30px 40px 0px #00000014;
  display:flex; flex-direction:column; justify-content:space-between; padding:0;
}
/* Client demo mode uses the same sidebar width as normal to match production layout */
.brand{display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:0;}
.brand-logo{
  width:calc(100% - 16px); height:102px; border-radius:26px; margin:8px; padding:16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, #FFFFFF 100%);
  border:1px solid #FFFFFF;
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  box-shadow: 0 2px 8px var(--black-6);
  display:flex; align-items:center; justify-content:center;
}
.brand-logo img{width:60px; height:40px; object-fit:contain; display:block;}
.nav{display:flex; flex-direction:column; gap:24px; padding:0 24px; margin-top:16px;}
.nav-group{display:flex; flex-direction:column; gap:12px;}
.separator{width:100%; height:0; border-top:1px solid var(--black-6);}
.nav-item{position:relative; display:flex; align-items:center; gap:12px; width:100%; height:40px; color:var(--black); text-decoration:none;}
.nav-item .ico{width:40px; height:40px; border-radius:40px; padding:4px; display:flex; align-items:center; justify-content:center; gap:8px;
  background: var(--white-70); border:1px solid var(--white-70);
  -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px);
  box-shadow: 0px 0px 2px 0px #0000000A, 0px 4px 8px 0px #00000005, 0px 10px 20px 0px #00000008;
}
.nav-item .ico svg{width:16px; height:16px;}
.nav-item .ico i{font-size:16px; line-height:1; display:inline-block;}
.nav-item span{font-size:14px; line-height:130%; font-weight:500; color:var(--black);}
.nav-item.active .ico{background: var(--black); color: var(--white); border-color: var(--black);}
/* Sidebar messages alert dot */
.nav-item.messages-alert .ico{position:relative;}
.nav-item.messages-alert .ico .alert-dot{position:absolute; top:2px; right:2px; width:6px; height:6px; background:#F30D52; border-radius:50%;}
/* Ensure <img> icons turn white when active. Using filter to approximate white regardless of original color */
.nav-item .ico img{width:20px; height:20px; display:block; transition:filter .25s, opacity .25s;}
.nav-item.active .ico img{filter: brightness(0) invert(1);}
.nav-item.active::before{content:""; position:absolute; left:-24px; transform: translateX(-50%); width:6px; height:32px; background: var(--black); border-radius:999px;}
.sidebar-footer{display:flex; flex-direction:column; gap:24px; padding:0 16px; margin-bottom:16px;}
.user-separator{width:100%; height:0; border-top:1px solid var(--black-6);}
.user-row{display:flex; align-items:center; gap:12px; width:100%; height:40px;}
.avatar{width:40px; height:40px; border-radius:100px; overflow:hidden; background:var(--white-70);
  -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px);
  box-shadow: 0px 0px 2px 0px #0000000A, 0px 4px 8px 0px #00000005, 0px 10px 20px 0px #00000008;
}
.avatar img{width:100%; height:100%; object-fit:cover}
.user-name{font-size:14px; line-height:130%; font-weight:500; color:var(--black);}

/* Main content */
.main{flex:1; background:transparent; border-top-left-radius:0; padding:40px 32px 28px 60px; position:relative; z-index:10;}
.content{position:relative; width:100%; max-width:1120px; min-height:987px; display:flex; flex-direction:column; gap:35px; padding-left:12px; padding-right:12px;
    /* Add bottom padding so the fixed agent search bar does not cover page content
       when the user scrolls to the bottom. The padding is computed in the design
       coordinate space by dividing the desired visual padding (bar height + offset + buffer)
       by the current main scale so the visual result matches the fixed bar. */
  /* bar height (60px) + visual offset (28px + 10px) + extra buffer (12px) */
  padding-bottom: calc((60px + (28px + 10px) + 12px + env(safe-area-inset-bottom)) / var(--main-scale));
  }
.content.home-mode{gap:20px;} /* tighter vertical rhythm for home so toolbar sits closer to cards */
.content.admin-mode{gap:20px;} /* same tighter rhythm for admin so toolbar sits closer to cards */
.top-actions{position:absolute; right:0; top:44px;}
.pill{width:42px; height:42px; border-radius:999px; background:var(--panel); box-shadow:var(--soft-shadow); display:flex; align-items:center; justify-content:center; color:var(--black);} /* default pill */
.pill.filter{width:56px; height:48px; border-radius:40px; gap:8px; padding:11px 20px; background: var(--white-50); border:1px solid transparent; border-image-source: radial-gradient(50.4% 100% at 50.4% 0%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%); border-image-slice:1; -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px); box-shadow: 0px 0px 2px 0px #0000000A, 0px 4px 8px 0px #00000005, 0px 10px 20px 0px #00000008;}
.pill.filter svg{width:16px; height:16px;}
/* Typography per provided scale */
.heading{display:flex; flex-direction:column; gap:16px; width:513px; padding-left:4px;}
.heading h1{margin:0; font-size:48px; line-height:110%; font-weight:600; letter-spacing:0; color:var(--black); opacity:0.9;}
.heading p{margin:0; color:var(--muted); font-size:16px; line-height:135%; font-weight:400; white-space:nowrap; width:auto;}
/* Zip/Sales search inline UI */
.title-row{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;}
.zip-search{display:flex; align-items:center; gap:8px;}
.zip-search input{height:40px; border-radius:999px; border:1px solid var(--black-6); background:var(--panel); padding:0 12px; width:140px; font-family:inherit; font-size:14px; color:var(--black);} 
.zip-search button{height:40px; border-radius:999px; border:none; padding:0 14px; background:var(--black); color:var(--white); font-weight:600; cursor:pointer;}
.zip-search .error{color:var(--danger); font-size:12px; margin-left:8px;}

/* Stat summary row - use fractional columns so the row matches the parent content width (respecting .content padding)
  Cards themselves become fluid (width:100%) so the total never overflows the content box. */
.summary{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; width:100%; max-width:100%;}
.card{background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; position:relative; overflow:hidden;}
.card.stat{width:100%; height:119px; border-radius:28px; padding:32px; background: var(--white-50); -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px); box-shadow: 0px 10px 20px 0px #0000000A, 0px 30px 40px 0px #00000014;}
.card.soft{box-shadow:var(--soft-shadow)}

/* Property Overview images per spec: main 762x388, thumbs 370x188, gap 12 */
.page-property-overview .img-thumb{position:relative; overflow:hidden}
.page-property-overview .images{
  width: 100%; /* fit inside the content area */
  max-width: 100%;
  height: 388px;
  display:flex; gap: 12px !important; /* override inline gap */
}
.page-property-overview .img-main{
  /* Use flex-basis to allocate the 762px portion while respecting container width */
  flex: 762 0 0 !important;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px);
  box-shadow: 0px 10px 20px 0px #0000000A, 0px 30px 40px 0px #00000014;
  background:#ddd;
}
.page-property-overview .img-side{
  /* Reserve the 370px column for thumbs */
  flex: 370 0 0;
  height: 100%;
  display:flex; flex-direction:column; gap: 12px;
}
.page-property-overview .img-thumb{
  width: 100%;
  height: 188px;
  border-radius: 24px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px);
  box-shadow: 0px 10px 20px 0px #0000000A, 0px 30px 40px 0px #00000014;
  background:#eee;
}
.page-property-overview .img-thumb img, .page-property-overview .img-main img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
}
/* Property Overview stat pills (exact spec) */
.page-property-overview .stat-pills{ display:flex; gap:12px; }
.page-property-overview .stat-pill{
  height:32px; border-radius:12px; padding:8px 8px; display:flex; align-items:center; gap:8px; white-space:nowrap;
  background:#FFFFFF80; -webkit-backdrop-filter:blur(80px); backdrop-filter:blur(80px);
  box-shadow: 0px 0px 2px 0px #0000000A, 0px 4px 8px 0px #00000005, 0px 10px 20px 0px #00000008;
  font-family: Inter, sans-serif; font-weight:500; font-size:12px; line-height:140%; letter-spacing:0;
  color:#1A1D25;
}
.page-property-overview .stat-pill img{ width:16px; height:16px; display:block; }
/* Let pills auto-size to content so text has exactly 8px on right and 8px gap from icon */
.page-property-overview .stat-pill.beds-pill,
.page-property-overview .stat-pill.baths-pill,
.page-property-overview .stat-pill.sqft-pill{ width:auto; }
/* Stronger, high-specificity see-all button rules to override other styles */
.page-property-overview .img-thumb .see-all-btn,
.page-property-overview .see-all-btn{position:absolute !important; right:12px !important; bottom:12px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; padding:8px 12px !important; border-radius:9999px !important; background:rgba(0,0,0,0.6) !important; color:#fff !important; font-weight:600 !important; font-size:14px !important; box-shadow:0 6px 18px rgba(0,0,0,0.14) !important; border:0 !important; cursor:pointer !important; white-space:nowrap !important; width:auto !important; z-index:30 !important}
.page-property-overview .see-all-btn:focus{outline:2px solid rgba(255,255,255,0.12)}
/* Skeleton utility (gradient + shimmer) */
.skeleton{background:linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.06) 100%); position:relative; overflow:hidden}
.skeleton::after{content:''; position:absolute; left:-120%; top:0; height:100%; width:120%; background:linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.02) 100%); transform:skewX(-20deg); animation:sk-shimmer 1.2s linear infinite}
@keyframes sk-shimmer{ 100% { transform: translateX(220%) skewX(-20deg); } }
.stat-title{color:var(--muted); font-size:14px; font-weight:500;}
.stat-row{display:flex; align-items:baseline; gap:4px; margin-top:8px;}
.stat-value{font-size:24px; font-weight:600; line-height:120%; color:var(--black);}
.stat-delta{font-size:12px; font-weight:500; line-height:140%; display:inline-block; height:23px; padding-top:6px;}
.up{color:var(--accent)}
.down{color:var(--danger)}
/* Translucent overlapping shapes in stat cards */
.shapes{position:absolute; top:32px; right:10px; width:120px; height:120px; z-index:0;}
.shape{position:absolute; width:120px; height:120px; border-radius:16px; background: linear-gradient(180deg, rgba(197, 203, 216, 0.16) 0%, rgba(197, 203, 216, 0.06) 100%); -webkit-backdrop-filter: blur(23.04px); backdrop-filter: blur(23.04px); box-shadow: 0px -11.52px 24.96px 0px #FFFFFFCC, inset 2px 1px 0px 0px #FFFFFF; z-index:0; pointer-events:none; filter: blur(2px);}
.shape.s1{top:0; left:10px;}
.shape.s2{top:35px; left:55px;}
.card.stat .stat-title, .card.stat .stat-row{position:relative; z-index:1;}

/* Per-card overrides for shapes */
/* Card 1 uses defaults above */
/* Stat 2: circles */
.card.stat.stat-2 .shape{border-radius:50%; background: linear-gradient(180deg, rgba(197, 203, 216, 0.2) 0%, rgba(197, 203, 216, 0.04) 100%); box-shadow: 0px -11.52px 24.96px 0px #FFFFFFCC, inset 0px 1px 0px 0px #FFFFFF;}
.card.stat.stat-2 .shape.s1{width:116px; height:116px; top:4px; left:11px;}
.card.stat.stat-2 .shape.s2{width:76px; height:76px; top:24px; left:31px;}

/* Stat 3: rounded triangles */
.card.stat.stat-3 .shape{
  border-radius:0;
  background: linear-gradient(180deg, rgba(197, 203, 216, 0.18) 0%, rgba(197, 203, 216, 0.036) 100%);
  box-shadow: 0px -11.52px 24.96px 0px #FFFFFFCC, inset 0px 1px 0px 0px #FFFFFF;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* Fallback sharp triangle */
  clip-path: polygon(50% 6%, 6% 94%, 94% 94%);
  /* Rounded triangle (supported browsers override polygon) */
  clip-path: path('M50 6 Q52 6 53 8 L86 86 Q88 88 86 90 L14 90 Q12 88 14 86 L47 8 Q48 6 50 6 Z');
  /* Replace global blur with a subtle drop-shadow that follows the clip-path */
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.06));
} 
.card.stat.stat-3 .shape.s1{width:110px; height:110px; top:0; left:0;}
.card.stat.stat-3 .shape.s2{width:110px; height:110px; top:30px; left:44px;}

.card.stat.stat-4 .shapes{height:140px;}
.card.stat.stat-4 .shape{border-radius:5.76px; background: linear-gradient(180deg, rgba(197, 203, 216, 0.18) 0%, rgba(197, 203, 216, 0.18) 100%); box-shadow: 0px -11.52px 24.96px 0px #FFFFFFCC, inset 0px 1px 0px 0px #FFFFFF;}
.card.stat.stat-4 .shape.s1{width:149.75999450683594px; height:61.44000244140625px; top:71.04px; left:0; z-index:3;}
.card.stat.stat-4 .shape.s2{width:149.75999450683594px; height:61.44000244140625px; top:41.28px; left:20px; z-index:2;}
.card.stat.stat-4 .shape.s3{width:149.75999450683594px; height:61.44000244140625px; top:10.52px; left:40px; z-index:1;}

/* Chart cards - keep default small-card width globally, but make cards inside
  the .charts grid fill their column (width:100%). This prevents breaking
  other uses of .graph-card (e.g., flex-based rows) while keeping the 3-up
  grid responsive. */
.charts{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; width:100%; max-width:100%;}
.graph-card{width:364px; height:336px; border-radius:28px; padding:32px; background: var(--white-50); -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px); box-shadow: 0px 10px 20px 0px #0000000A, 0px 30px 40px 0px #00000014; position:relative; overflow:hidden;}
.charts .graph-card{width:100%;}
/* Grid for the three small cards row (Lifestyle, Financial Services, Zip Insights) */
.small-charts-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; width:100%; max-width:1120px; margin-top:18px;}
.small-charts-row .graph-card{width:100%;}
.graph-top{display:flex; width:auto; height:76px; gap:32px; align-items:center;}
.graph-details{width:220px; height:76px; display:flex; flex-direction:column; gap:8px;}
.graph-title{color:var(--muted); font-size:14px; font-weight:500; line-height:130%;}
.graph-number{font-size:24px; font-weight:600; line-height:120%; color:var(--black);} /* matches .stat-value */
/* Sales Trends: make graph numbers match the section's stat card numbers (18px) */
.embedded-sales-trends .graph-number{ font-size:18px; }
.graph-percent{font-size:12px; line-height:140%; color:var(--accent);} 
/* Pin MoM/percent text to the bottom of the graph-details column */
/* MoM/percent now sits directly under the title via markup order */
/* Override color for signed percent changes (needs to come AFTER base .graph-percent) */
.graph-percent.up{color:var(--accent);} /* explicit for clarity */
.graph-percent.down{color:var(--danger);} 
.icon-box{position:absolute; top:32px; right:32px; width:48px; height:48px; border-radius:40px; padding:4px; background: var(--white-70); border:1px solid var(--white-50); -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px); box-shadow: 0px 0px 2px 0px #0000000A, 0px 4px 8px 0px #00000005, 0px 10px 20px 0px #00000008; display:flex; align-items:center; justify-content:center;}
.icon-box svg{width:20px; height:20px;}
.icon-box i{font-size:20px; line-height:1; display:inline-block;}
.graph-plot{width:100%; height:164px; margin-top:32px;}
.graph-plot svg{width:100%; height:100%;}
.graph-plot canvas{width:100% !important; height:100% !important; display:block}
/* Client flow preferences (genre select) responsive tweaks */
.prefs-title{ font-family:Inter; font-weight:700; font-size:28px; }
.prefs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:640px){
  .prefs-title{ font-size:16px; }
  .prefs-grid{ grid-template-columns:1fr; gap:12px; }
  .prefs-grid > div{ width:100%; }
}
.card-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.card-title{font-weight:600; font-size:20px; line-height:130%;}
.muted{color:var(--muted); font-size:14px;}
.chart{height:100%; border-radius:14px; background:transparent; position:relative; overflow:hidden;}
  .line{position:absolute; left:0; right:0; bottom:20px; height:2px; background:repeating-linear-gradient(90deg, transparent 0 10%, var(--black-6) 10% 11%, transparent 11% 20%);} /* faint grid using black-6 */
  .sparkline{position:absolute; left:12px; right:12px; bottom:22px; height:120px;}
  /* simple inline SVG lines/bars to mimic charts */
  .sparkline svg{width:100%; height:100%;}
  .bargrid{position:absolute; left:12px; right:12px; bottom:22px; height:120px; display:grid; grid-template-columns:repeat(5,1fr); align-items:flex-end; gap:12px;}
  .bar{background:var(--green); border-radius:8px 8px 2px 2px; box-shadow:0 2px 8px var(--black-20)}

/* Bottom wide graph card */
.large{margin-top:0; display:grid; grid-template-columns:1fr; width:100%;}
.graph-card.big{width:100%; height:336px; max-width:1120px; border-radius:28px; padding:32px; background: var(--white-50); -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px); box-shadow: 0px 10px 20px 0px #0000000A, 0px 30px 40px 0px #00000014; position:relative; overflow:hidden;}

/* In client-facing flows, allow large charts/rows to span the full available width on desktop */
/* Remove client-only full-width overrides for charts; allow design width + scale */
/* Personal Agent compact full-width card (stat card height) */
.agent-card{width:100%; max-width:1120px; height:119px; border-radius:28px; padding:20px 28px; background: var(--white-50); -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px); box-shadow: 0px 10px 20px 0px #0000000A, 0px 30px 40px 0px #00000014; display:flex; align-items:center; gap:24px; position:relative; overflow:hidden;}
.agent-card .desc{font-size:12px; color:#555; line-height:1.45; max-width:760px; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
/* New Personal Agent dual-card layout */
/* Adjusted margin-top from 24px to 0 to tighten spacing below city/state (match Sales Trends spacing) */
.agent-dual-wrap{width:100%; max-width:1120px; height:210px; display:flex; gap:12px; position:relative; margin-top:0;}
.agent-primary{flex:1 1 auto; height:210px; position:relative; border-radius:32px; background:#FFFFFF80; backdrop-filter:blur(80px); -webkit-backdrop-filter:blur(80px); box-shadow:0px 0px 2px 0px #0000000A, 0px 4px 8px 0px #00000005, 0px 10px 20px 0px #00000008; overflow:hidden; min-width:0;}
.agent-primary .text-block{position:absolute; top:40.5px; left:40px; width:380px; display:flex; flex-direction:column; gap:12px;}
.agent-primary .label{font-family:Inter, sans-serif; font-weight:500; font-size:12px; line-height:1.4; color:rgba(26,29,37,0.5); letter-spacing:0; text-transform:uppercase;}
.agent-primary .agent-name{font-family:Inter, sans-serif; font-weight:600; font-size:28px; line-height:1.2; color:#1A1D25;}
.agent-primary .agent-desc{font-family:Inter, sans-serif; font-weight:400; font-size:14px; line-height:1.3; color:#1A1D25;}
/* Match listing page hero sizing/position so text doesn't overlap the image */
.agent-primary .hero-figure{position:absolute; width:360px; height:320px; top:-56px; right:-36px; object-fit:cover;}
.agent-primary .hero-mask{position:absolute; width:420px; height:380px; top:-86px; right:-80px; mix-blend-mode:darken; pointer-events:none;}
.agent-secondary{width:260px; height:210px; border-radius:32px; background:#FFFFFF80; backdrop-filter:blur(80px); -webkit-backdrop-filter:blur(80px); box-shadow:0px 0px 2px 0px #0000000A, 0px 4px 8px 0px #00000005, 0px 10px 20px 0px #00000008; padding:24px; display:flex; flex-direction:column; align-items:center; gap:16px;}
.agent-secondary .avatar-wrap{width:64px; height:64px; border-radius:40px; position:relative; background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35)); display:flex; align-items:center; justify-content:center; box-shadow:0px 0px 2px 0px #0000000A, 0px 4px 8px 0px #00000005, 0px 10px 20px 0px #00000008;}
.agent-secondary .avatar{width:64px; height:64px; border-radius:50%; background:#D9D9D9;}
.agent-secondary .status-dot{position:absolute; width:10px; height:10px; background:#3FBC5C; border-radius:50%; top:4px; right:4px; box-shadow:0 0 0 2px #fff;}
.agent-secondary .status-text{font-family:Inter, sans-serif; font-size:14px; line-height:1.3; color:rgba(26,29,37,0.5); text-align:center;}
.agent-secondary .status-text span{color:#3FBC5C; font-weight:500;}
.agent-secondary .msg-btn{width:182px; height:48px; border-radius:40px; background:#1A1D25; color:#fff; display:flex; align-items:center; justify-content:center; font-family:Inter, sans-serif; font-weight:500; font-size:14px; line-height:1.3; cursor:pointer; box-shadow:0px 0px 2px 0px #00000008, 0px 4px 8px 0px #00000003, 0px 10px 20px 0px #00000005; transition:background .2s, transform .2s;}
.agent-secondary .msg-btn:hover{background:#27303A; transform:translateY(-2px);}  
/* Agent Ask Search Bar */
.agent-search-wrap{width:100%; max-width:1120px; height:60px; display:flex; gap:12px; align-items:stretch;}
/* Pin the agent search bar to the bottom of the viewport so it behaves like a chat input.
   Keep dimensions and internal layout the same; only change positioning. */
/* Default desktop fixed-bottom positioning: center the bar under the main content
  and keep it above page content. Client-flow and mobile overrides later remain
  authoritative for client-flow contexts and small screens. */
.agent-search-wrap.fixed-bottom{
  position: fixed !important;
  bottom: calc(30px + env(safe-area-inset-bottom) - var(--agent-search-bleed-y));
  /* Align left to the centered content left plus left gutter to start at avatar */
  /* Center by default; mode-specific rule below will shift when sidebar is visible */
  left: calc((100vw - var(--agent-search-content-width)) / 2 + var(--agent-search-gutter-left) - var(--agent-search-bleed-x));
  /* Width spans from avatar start to message right edge */
  width: calc(var(--agent-search-content-width) - var(--agent-search-gutter-left) - var(--agent-search-gutter-right) + (var(--agent-search-bleed-x) * 2));
  max-width: none;
  box-sizing: border-box;
  overflow: visible;
  isolation: isolate;
  transition: none !important;
  z-index: 4000; /* keep above any page chrome */
  pointer-events: none; /* allow clicks to pass except on form elements */
  padding-bottom: 2px; /* Allow space for button hover animation and shadow */
  /* Provide an outer shadow that isn't affected by child border radii */
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.04)) drop-shadow(0 4px 8px rgba(0,0,0,0.03)) drop-shadow(0 10px 20px rgba(0,0,0,0.05));
}
.agent-search-wrap.fixed-bottom *{ pointer-events: auto; }

/* Scale up the pinned (fixed-bottom) search bar slightly for better readability
   while preserving the same alignment and aspect; scope only to fixed-bottom */
/* Use a scale variable to enlarge vertically while preserving proportions */
.agent-search-wrap.fixed-bottom{ --asb-scale: 1.33; height: calc(60px * var(--asb-scale)); }
.agent-search-wrap.fixed-bottom .agent-search-bar{ height: calc(60px * var(--asb-scale)); padding: calc(19px * var(--asb-scale)) calc(20px * var(--asb-scale)) calc(19px * var(--asb-scale)) calc(24px * var(--asb-scale)); }
.agent-search-wrap.fixed-bottom .agent-search-bar input{ font-size: calc(16px * var(--asb-scale)); }
.agent-search-wrap.fixed-bottom .agent-search-go{ height: calc(60px * var(--asb-scale)); width: calc(92px * var(--asb-scale)); }
.agent-search-wrap.fixed-bottom .asb-icon{ width: calc(22px * var(--asb-scale)); height: calc(22px * var(--asb-scale)); }

/* When the app is NOT in client-flow mode (sidebar visible), shift the fixed
   bottom search bar right by the rendered sidebar width so it lines up with
   the main dashboard content. This is CSS-only and uses the scaled design width. */
.app:not(.client-flow-mode) .agent-search-wrap.fixed-bottom{
  /* adjusted fixed offset: move right 28px -> 68px + 28px = 96px */
  left: calc((100vw - var(--agent-search-content-width)) / 2 + var(--agent-search-gutter-left) + 96px - var(--agent-search-bleed-x)) !important;
  width: calc(var(--agent-search-content-width) - var(--agent-search-gutter-left) - var(--agent-search-gutter-right) + (var(--agent-search-bleed-x) * 2)) !important;
}

/* The search form is rendered into #global-modal-root (outside .app) via a portal.
   Ensure the same behaviors apply using body-scoped selectors so the rule matches. */
body:not(.client-flow-mode) .agent-search-wrap.fixed-bottom{
  /* adjusted fixed offset: move right 28px -> 68px + 28px = 96px (portal path) */
  left: calc((100vw - var(--agent-search-content-width)) / 2 + var(--agent-search-gutter-left) + 96px - var(--agent-search-bleed-x)) !important;
  width: calc(var(--agent-search-content-width) - var(--agent-search-gutter-left) - var(--agent-search-gutter-right) + (var(--agent-search-bleed-x) * 2)) !important;
}

/* When the page is in client-flow mode (body has the class), keep the bar centered
   because the sidebar is hidden in that mode. */
body.client-flow-mode:not(.client-demo-mode) .agent-search-wrap.fixed-bottom{
  left: calc((100vw - var(--agent-search-content-width)) / 2 + var(--agent-search-gutter-left) - var(--agent-search-bleed-x)) !important;
  width: calc(var(--agent-search-content-width) - var(--agent-search-gutter-left) - var(--agent-search-gutter-right) + (var(--agent-search-bleed-x) * 2)) !important;
}
.agent-search-bar{flex:1 1 auto; height:60px; border-radius:40px; padding:19px 20px 19px 24px; display:flex; align-items:center; gap:16px; background:#FFFFFF; backdrop-filter:blur(80px); -webkit-backdrop-filter:blur(80px); border:1px solid #FFFFFF; box-shadow:0px 0px 2px 0px #0000000A, 0px 4px 8px 0px #00000005, 0px 10px 20px 0px #00000008; position:relative; overflow:visible; z-index: 1;}
.agent-search-bar:before{content:""; position:absolute; inset:0; border-radius:40px; pointer-events:none; background:radial-gradient(50.4% 100% at 50.4% 0%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);} 
.agent-search-bar input{flex:1; border:0; outline:none; background:transparent; font-family:Inter, sans-serif; font-size:16px; font-weight:400; line-height:1.35; color:rgba(26,29,37,0.5); min-width:0;}
.agent-search-bar input::placeholder{color:rgba(26,29,37,0.5);}
.asb-icons{display:flex; align-items:center; gap:14px;}
.asb-icon{width:22px; height:22px; display:block; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.06));}
.agent-search-go{width:92px; height:60px; border-radius:80px; border:0; background:#1A1D25; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0px 0px 2px 0px #00000008, 0px 4px 8px 0px #00000003, 0px 10px 20px 0px #00000005; backdrop-filter:blur(80px); -webkit-backdrop-filter:blur(80px); transition:background .18s, transform .18s, box-shadow .18s; position:relative; z-index: 3;}
.agent-search-go:hover{background:#232A33; transform:translateY(-2px); box-shadow:0px 2px 4px 0px #00000008, 0px 6px 10px 0px #00000003, 0px 12px 22px 0px #00000005;} 
.agent-search-go img{width:22px; height:22px; display:block;}
/* Ensure search bar shadows are never clipped (portal root and wrappers) */
#global-modal-root{ overflow:visible !important; z-index:2000 !important; }
#global-modal-root .agent-search-wrap{ overflow:visible !important; }
#global-modal-root .agent-search-wrap.fixed-bottom{ overflow:visible !important; z-index:3000 !important; }
#global-modal-root > *{ overflow:visible !important; }
.agent-search-wrap, .agent-search-bar, .agent-search-go{ overflow:visible !important; }
.graph-plot.big{width:100%; height:164px; margin-top:32px;}
.area-big{width:100%; height:164px; border-radius:16px; background:transparent; position:relative; overflow:visible;}
/* Sales Trends (embedded) - reduce top spacing above charts to match text spacing (8px)
  and make the cards more compact so top/bottom whitespace is balanced. */
.embedded-sales-trends .graph-plot{ margin-top:8px; margin-bottom:8px; height:132px; }
.embedded-sales-trends .graph-plot.big{ margin-top:8px; margin-bottom:8px; height:132px; }
/* Shrink graph cards in Sales Trends contexts so there's no extra bottom space
  and reduce internal padding to make the overall card height shorter. */
.embedded-sales-trends .graph-card{ height:auto; padding:20px; }
.embedded-sales-trends .graph-card.big{ height:auto; padding:20px; }
/* Crime Rate section styles */
.crime-rate-section{ width:100%; max-width:1120px; margin:28px auto 16px; }
.crime-rate-section .crime-title-row .heading > div{ padding-right:0 !important; }
.crime-row{ display:flex; gap:12px; margin-top:8px; }
.crime-detail-card{ display:flex; flex-direction:column; }
.crime-blank-card{ display:flex; align-items:center; justify-content:center; }
.crime-zip-card{ display:flex; align-items:center; justify-content:center; }
.incident-card .incident-avatar{ box-shadow:0px 10px 20px 0px #0000000A, 0px 30px 40px 0px #00000014; background:#E8EBF2; }
.incident-card{ display:flex; align-items:center; box-sizing:border-box; flex:1 1 0; min-width:0; max-width: calc((100% - 24px) / 3); }
.incident-card .progress{ height:4px; border-radius:4px; background:transparent; overflow:hidden; }
.area-big svg{position:absolute; inset:0; width:100%; height:100%;}
.area-big canvas{position:absolute; inset:0; width:100% !important; height:100% !important; display:block}
/* Leaflet control size overrides for Zip Trends map */
/* Base zoom control before pill enhancement */
.leaflet-control-zoom{border:none; background:transparent; box-shadow:none;}
/* Pill container style */
.leaflet-control-zoom.leaflet-bar{
  display:flex;
  flex-direction:column; /* vertical pill */
  align-items:center;
  justify-content:center;
  gap:2px; /* small separation without divider */
  padding:1px 1px; /* tighter padding to make pill narrower */
  border-radius:999px;
  background:rgba(255,255,255,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:0 4px 12px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.12);
  border:1px solid rgba(255,255,255,0.6);
}
.leaflet-control-zoom.leaflet-bar a,
#ziptrends-map .leaflet-control-zoom.leaflet-bar a{
  width:18px; height:18px; line-height:18px; font-size:13px; font-weight:500;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color:#1A1D25; background:transparent !important; border:none !important; box-shadow:none !important;
  display:flex; align-items:center; justify-content:center; padding:0; margin:0; position:relative;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.leaflet-touch .leaflet-control-zoom a{width:20px; height:20px; line-height:20px; font-size:12px;}
/* Remove divider & square hover; add subtle focus/hover circle */
.leaflet-control-zoom a + a{margin-left:0; margin-top:0; position:relative;}
/* Limit hover circle effect to ZipTrends map only */
#ziptrends-map .leaflet-control-zoom a:hover{background:rgba(255,255,255,0.28) !important; border-radius:50%;}
/* Stronger override so the box itself shrinks (Leaflet CSS loads after ours) */
.graph-card #ziptrends-map .leaflet-control-zoom a,
#ziptrends-map .leaflet-control-zoom a{padding:0 !important;}
/* Grayscale (black & white) ONLY for raster map tiles */
#ziptrends-map .leaflet-tile{filter:grayscale(1) saturate(0) contrast(1.05);}  
/* Preserve marker & overlay colors */
#ziptrends-map .leaflet-marker-icon,
#ziptrends-map .leaflet-marker-shadow,
#ziptrends-map .leaflet-overlay-pane svg path,
#ziptrends-map .leaflet-marker-pane svg path{filter:none !important;}
/* Smaller Leaflet attribution (keep visible for licensing) */
#ziptrends-map .leaflet-control-attribution{
  font-size:7px !important;
  line-height:1.1 !important;
  padding-right: 20px !important;
  background:rgba(255,255,255,0.55) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:6px !important;
  color:#333 !important;
}
#ziptrends-map .leaflet-control-attribution a{color:#222 !important; text-decoration:none;}
#ziptrends-map .leaflet-control-attribution a:hover{text-decoration:underline;}
/* Admin map should visually match ZipTrends */
#admin-map .leaflet-tile{filter:grayscale(1) saturate(0) contrast(1.05);}  
#admin-map .leaflet-marker-icon,
#admin-map .leaflet-marker-shadow,
#admin-map .leaflet-overlay-pane svg path,
#admin-map .leaflet-marker-pane svg path{filter:none !important;}
#admin-map .leaflet-control-attribution{
  font-size:7px !important;
  line-height:1.1 !important;
  padding-right: 14px !important;
  background:rgba(255,255,255,0.55) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:6px !important;
  color:#333 !important;
}
#admin-map .leaflet-control-attribution a{color:#222 !important; text-decoration:none;}
#admin-map .leaflet-control-attribution a:hover{text-decoration:underline;}
/* Disable scroll anchoring for containers that dynamically grow to avoid jump-to-previous-content */
.no-anchor{ overflow-anchor: none; }
/* Property Overview map should match ZipTrends look */
#overview-map .leaflet-tile{filter:grayscale(1) saturate(0) contrast(1.05);}  
#overview-map .leaflet-marker-icon,
#overview-map .leaflet-marker-shadow,
#overview-map .leaflet-overlay-pane svg path,
#overview-map .leaflet-marker-pane svg path{filter:none !important;}
#overview-map .leaflet-control-attribution{
  background:rgba(255,255,255,0.65) !important; border-radius:8px; padding:2px 6px !important; margin:6px !important; box-shadow:0 2px 6px rgba(0,0,0,0.08);
  font-size:10px !important; color:#222 !important;
}
#overview-map .leaflet-control-attribution a{color:#222 !important; text-decoration:none;}
#overview-map .leaflet-control-attribution a:hover{text-decoration:underline;}
/* Move zoom control to middle-right, 20px from right, vertically centered */
#overview-map .leaflet-top.leaflet-right{ top:0; right:0; height:100%; pointer-events:none; }
#overview-map .leaflet-top.leaflet-right .leaflet-control{ pointer-events:auto; }
/* Zoom control pill styling and placement */
#overview-map .leaflet-control-zoom{
  position:absolute !important;
  top:50% !important;
  right:20px !important;
  left:auto !important;
  margin:0 !important;
  transform:translateY(-50%);
  z-index:1001;
  width:32px !important;
  height:72px !important;
  border-radius:40px !important;
  background:#FFFFFFB2 !important;
  border:1px solid rgba(255,255,255,0.6) !important;
  box-shadow:0px 0px 2px 0px #00000008, 0px 4px 8px 0px #00000003, 0px 10px 20px 0px #00000005 !important;
  -webkit-backdrop-filter:blur(80px);
  backdrop-filter:blur(80px);
  overflow:hidden;
}
/* Ensure inner buttons fit pill and show 16px icons; remove transitions/hover */
#overview-map .leaflet-control-zoom a{
  width:32px !important;
  height:36px !important;
  line-height:36px !important;
  font-size:16px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  color:#1A1D25 !important;
  box-shadow:none !important;
  outline:none !important;
  transition:none !important;
}
/* No hover effect (no background, no circle) */
#overview-map .leaflet-control-zoom a:hover{ background:transparent !important; border-radius:0 !important; }
/* Ensure no divider between + and - */
#overview-map .leaflet-control-zoom a + a{ border-top:0 !important; }
/* Clientflow-specific map styles removed: client flow listing was deprecated. */
/* Properties table (Sales Trends) */
.table-area{width:100%; height:164px; max-width:1056px; border-radius:16px; background:transparent; position:relative; overflow:visible; display:flex; flex-direction:column;}
.table-controls{display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:8px 10px;}
.table-controls select{height:32px; border-radius:999px; border:1px solid var(--black-6); background:var(--panel); padding:0 10px; font-size:13px; box-shadow:none !important; transition:none !important;}
.properties-table{width:100%; border-collapse:separate; border-spacing:0; font-size:14px; table-layout:fixed;}
/* Sticky header for better readability while scrolling */
.properties-table thead th{ position:sticky; top:0; z-index:1; background:rgba(255,255,255,0.85); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
/* Cell padding, borders and alignment */
.properties-table th, .properties-table td{ padding:8px 10px; border-bottom:1px solid var(--black-6); vertical-align:middle; }
.properties-table th{ color:var(--muted); font-weight:600; text-align:left; }
.properties-table th.right, .properties-table td.right{text-align:right;}
/* Column sizing: Date ~ 110px, Address flexible, Price ~ 140px */
.properties-table colgroup col:nth-child(1){ width:110px; }
.properties-table colgroup col:nth-child(2){ width:auto; }
.properties-table colgroup col:nth-child(3){ width:140px; }
/* Ellipsis for long addresses */
.properties-table td.addr{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Zebra rows for readability */
.properties-table tbody tr:nth-child(odd){ background:rgba(26,29,37,0.02); }
/* Scroll container: fixed height with smooth scrolling */
.properties-scroll{ max-height:164px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; border-radius:12px; }
/* Hover highlight */
.properties-table tbody tr:hover{ background:rgba(26,29,37,0.06); }
/* Ensure the dropdown/select in table-controls doesn’t wrap awkwardly */
.table-controls{ flex-wrap:wrap; }
#overview-map .leaflet-control-zoom a:hover{ background:transparent !important; }

@media (max-width:1100px){
  .summary{grid-template-columns:repeat(2,1fr)}
  .charts{grid-template-columns:1fr}
}
/* === Home Page Additions === */
/* Home layout and typography adjustments per spec */
.home-header-row{display:flex; align-items:flex-start; justify-content:space-between; width:100%;}
.home-greeting{display:flex; flex-direction:column; gap:12px; width:100%;}
.home-greeting h1{margin:0; font-size:48px; line-height:110%; font-weight:600; color:var(--black); white-space:nowrap;}
.attention-inline{display:flex; align-items:center; gap:6px; height:22px;}
.attn-bar{width:3px; height:22px; border-radius:23.46px; background:#F30D52; flex-shrink:0;}
.attn-text{font-family:Inter, sans-serif; font-weight:400; font-size:16px; line-height:135%; color:#1A1D2580;}
.attn-text .count{font-weight:500; color:#1A1D25;}
/* Map button (home only, replaces filter pill) */
.map-btn{width:94px; height:48px; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; margin-left:auto; margin-top:2px; border-radius:40px; border:1px solid; border-image-source:radial-gradient(50.4% 100% at 50.4% 0%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%); border-image-slice:1; background:#FFFFFF80; -webkit-backdrop-filter:blur(80px); backdrop-filter:blur(80px); box-shadow:0 0 2px #0000000A,0 4px 8px #00000005,0 10px 20px #00000008; font-family:Inter, sans-serif; font-weight:500; font-size:14px; line-height:130%; color:#1A1D25; cursor:pointer;}
.map-btn img{width:16px; height:16px; display:block;}
/* Listing toolbar */
.listing-toolbar{width:100%; max-width:1120px; display:flex; align-items:center; justify-content:space-between; margin-top:10px;}

.listing-filters{display:flex; align-items:center; gap:8px;}
.list-tab{height:40px; border-radius:40px; padding:12px 16px; display:flex; align-items:center; gap:8px; border:1px solid; border-image-source:radial-gradient(50.4% 100% at 50.4% 0%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%); border-image-slice:1; background:#1A1D250F; color:#1A1D25; font-family:Inter, sans-serif; font-weight:500; font-size:12px; line-height:140%; cursor:pointer; -webkit-backdrop-filter:blur(80px); backdrop-filter:blur(80px); box-shadow:0 0 2px #0000000A,0 4px 8px #00000005,0 10px 20px #00000008;}
.list-tab.active{background:#FFFFFF80; color:#1A1D25;}
.list-tab img{width:16px; height:16px; display:block;}
/* Smaller map pills used inside the map (same styling as list-tab but reduced) */
.map-pill{height:32px; border-radius:28px; padding:8px 12px; display:flex; align-items:center; gap:6px; border:1px solid; border-image-source:radial-gradient(50.4% 100% at 50.4% 0%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%); border-image-slice:1; background:#1A1D250F; color:#1A1D25; font-family:Inter, sans-serif; font-weight:500; font-size:11px; line-height:140%; cursor:pointer; -webkit-backdrop-filter:blur(80px); backdrop-filter:blur(80px); box-shadow:0 0 2px #0000000A,0 4px 8px #00000005,0 10px 20px #00000008;}
.map-pill.active{background:#FFFFFF80; color:#1A1D25;}
.map-pill-group{position:absolute; top:12px; right:12px; display:flex; gap:8px; z-index:1001;}
/* Actions (filter/add) */
.listing-actions{display:flex; width:104px; height:40px; gap:8px; align-items:center; justify-content:flex-end;}
.icon-btn{width:48px; height:40px; border-radius:40px; padding:12px 16px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid; border-image-source:radial-gradient(50.4% 100% at 50.4% 0%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%); border-image-slice:1; background:#FFFFFF80; -webkit-backdrop-filter:blur(80px); backdrop-filter:blur(80px); box-shadow:0 0 2px #0000000A,0 4px 8px #00000005,0 10px 20px #00000008; cursor:pointer;}
.icon-btn img{width:16px; height:16px; display:block;}
/* Cards grid */
.property-grid{width:100%; max-width:1120px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px;}
.property-card{width:100%; height:305px; position:relative; border-radius:28px; background:#FFFFFF80; -webkit-backdrop-filter:blur(80px); backdrop-filter:blur(80px); box-shadow:0 10px 20px #0000000A, 0 30px 40px #00000014; overflow:hidden; display:flex; flex-direction:column;}
.prop-img-wrap{position:relative; width:100%; height:170px;}
.prop-img-wrap img{width:100%; height:170px; object-fit:cover; border-radius:28px; display:block;}
.options-btn{position:absolute; top:16px; right:16px; width:30px; height:30px; padding:8px; border-radius:40px; border:1px solid; border-image-source:radial-gradient(50.4% 100% at 50.4% 0%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%); border-image-slice:1; background:#FFFFFF; -webkit-backdrop-filter:blur(80px); backdrop-filter:blur(80px); box-shadow:0 0 2px #0000000A,0 4px 8px #00000005,0 10px 20px #00000008; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.options-btn img{width:16px; height:16px; display:block;}
.prop-body{width:100%; padding:12px; display:flex; flex-direction:column; gap:12px;}
.price-address{width:100%; padding:4px 8px; display:flex; flex-direction:column; gap:6px;}
.prop-price{font-family:Inter, sans-serif; font-weight:500; font-size:18px; line-height:130%; color:#1A1D25;}
.prop-address{font-family:Inter, sans-serif; font-weight:400; font-size:12px; line-height:130%; color:#1A1D2599; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.prop-actions{width:100%; height:44px; display:flex; align-items:center; gap:12px;}
.msg-btn{width:52px; height:44px; border-radius:40px; padding:11px 18px; border:1px solid; border-image-source:radial-gradient(50.4% 100% at 50.4% 0%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%); border-image-slice:1; background:#FFFFFF80; -webkit-backdrop-filter:blur(80px); backdrop-filter:blur(80px); box-shadow:0 0 2px #0000000A,0 4px 8px #00000005,0 10px 20px #00000008; position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.msg-btn img{width:16px; height:16px; display:block;}
.msg-btn .new-dot{position:absolute; top:3px; right:3px; width:6px; height:6px; background:#F30D52; border-radius:50%;}
.openhouse-btn{width:131px; height:44px; border-radius:40px; padding:11px 24px; border:1px solid; border-image-source:radial-gradient(50.4% 100% at 50.4% 0%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%); border-image-slice:1; background:#FFFFFF80; -webkit-backdrop-filter:blur(80px); backdrop-filter:blur(80px); box-shadow:0 0 2px #0000000A,0 4px 8px #00000005,0 10px 20px #00000008; font-family:Inter, sans-serif; font-weight:500; font-size:14px; line-height:125%; color:#1A1D25; cursor:pointer; display:flex; align-items:center; justify-content:center; white-space:nowrap;}
.invite-btn{width:129px; height:44px; border-radius:40px; padding:11px 20px 11px 16px; background:#1A1D25; border:0; border-image:none; box-shadow:0 0 2px #0000000A,0 4px 8px #00000005,0 10px 20px #00000008; font-family:Inter, sans-serif; font-weight:500; font-size:14px; line-height:125%; color:#FFFFFF; cursor:pointer; display:flex; align-items:center; gap:8px; justify-content:center;}
/* Invitation modal partner select customization */
.invite-select-wrapper{position:relative; width:568px; height:48px;}
.invite-select{width:100%; height:100%; padding:14px 16px; border-radius:32px; border:1px solid rgba(255,255,255,0.6); background:#FFFFFFB2; -webkit-backdrop-filter:blur(80px); backdrop-filter:blur(80px); box-shadow:0 0 2px #0000000A,0 4px 8px #00000005,0 10px 20px #00000008; font-family:Inter; font-size:14px; font-weight:400; line-height:130%; color:#1A1D25; outline:none; appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:48px;}
.invite-select:focus{box-shadow:0 0 0 2px #1A1D2514 inset, 0 0 2px #0000000A,0 4px 8px #00000005,0 10px 20px #00000008;}
.invite-select-arrow{pointer-events:none; position:absolute; top:50%; transform:translateY(-50%); right:16px; width:16px; height:16px; display:flex; align-items:center; justify-content:center;}
.invite-select-arrow svg{width:16px; height:16px; stroke:#1A1D25; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.invite-btn img{width:16px; height:16px; display:block;}
.no-results{font-size:14px; color:var(--black-50); padding:12px 4px;}
@media (max-width:1400px){ .property-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:980px){ .property-grid{grid-template-columns:repeat(1, 1fr);} }
/* Print rules: hide the app chrome and print only the modal overlay (e.g. Open House) */
@media print{
  /* hide everything first */
  body *{ visibility: hidden !important; }
  /* show only the modal root and its descendants */
  #global-modal-root, #global-modal-root *{ visibility: visible !important; }
  /* ensure the modal root fills the printed page */
  #global-modal-root{ position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: visible !important; background: transparent !important; z-index: 2000 !important; }
  /* prefer exact color printing for backgrounds/images inside the modal */
  html, body, #global-modal-root{ -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* hide UI elements that shouldn't appear on the PDF (download button, close X) if they have .print-hide */
  #global-modal-root .print-hide{ display: none !important; }
  /* make sure fixed-position background images inside the modal are printed full-bleed and use cover (clip) behavior */
  /* Force the modal background image to fill the printed page and preserve object-fit:cover so it is clipped rather than scaled to fit vertically */
  /* only target the modal background image (direct child) or elements explicitly marked as .oh-bg-image */
  #global-modal-root > img, #global-modal-root .oh-bg-image{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }
  /* page size and margins can be adjusted as needed */
  @page { size: auto; margin: 10mm; }
}

/* === Overview topbar styling for SPA property overview (scaled to main layout) === */
/* Keep the topbar inside the SPA content flow so it centers correctly and does not go off-screen */
/* Nudge the topbar up by ~20px visually (scaled) so it sits closer to the top edge */
/* Use a fixed pixel top margin so the space above the topbar remains constant across viewports */
/* Ensure the gap below the topbar matches other page gaps (32px * main-scale) */
.overview-topbar{ position: relative; margin: -36px auto calc(24px * var(--main-scale)); width: calc(1144px * var(--main-scale)); max-width:100%; height: calc(24px * var(--main-scale)); display:flex; gap: calc(6px * var(--main-scale)); align-items:center; z-index:900; }
/* Menu pill: back button and menu items sit inside a rounded pill with translucent background */
.overview-topbar .menu{ flex: 0 1 calc(680px * var(--main-scale)); height: calc(24px * var(--main-scale)); border-radius: calc(16px * var(--main-scale)); padding: calc(2px * var(--main-scale)) calc(8px * var(--main-scale)); background: rgba(255,255,255,0.5); backdrop-filter: blur(80px); -webkit-backdrop-filter: blur(80px); box-shadow: 0px 0px 2px 0px #0000000A, 0px 4px 8px 0px #00000005, 0px 10px 20px 0px #00000008; display:flex; align-items:center; min-width:0; }
/* allow shadows from the back button to overflow the inner container */
.overview-topbar .menu .menu-inner{ flex:1 1 auto; min-width:0; height: calc(18px * var(--main-scale)); display:flex; gap: calc(4px * var(--main-scale)); align-items:center; overflow:visible; padding-left:0; }
  /* Make menu item font smaller per spec (more compact) */
.overview-topbar .menu .menu-inner .menu-item{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; display:inline-block; max-width:140px; font-size:10px; font-family:Inter, sans-serif; font-weight:500; line-height:1.4; text-align:center; vertical-align:middle; }
/* Back button: align with equal left/top/bottom gap inside pill */
/* Nudge the back button left so it sits closer to the pill's left edge */
.overview-topbar .menu .menu-inner .back-btn{ flex:0 0 auto; margin-top:-1px; margin-right:calc(4px * var(--main-scale)); margin-left:calc(-4px * var(--main-scale)); width: calc(18px * var(--main-scale)); height: calc(18px * var(--main-scale)); border-radius:9999px; box-shadow: 0px 6px 14px rgba(0,0,0,0.12); display:flex; align-items:center; justify-content:center; }
  /* Back button: circular */
  .overview-topbar .back-btn{ width: calc(32px * var(--main-scale)); height: calc(32px * var(--main-scale)); background: #FFFFFF; border-radius: 9999px; display:flex; align-items:center; justify-content:center; box-shadow: 0px 0px 2px 0px #0000000A, 0px 4px 8px 0px #00000005, 0px 10px 20px 0px #00000008; cursor:pointer; }
  .overview-topbar .back-btn img{ width: calc(14px * var(--main-scale)); height: calc(14px * var(--main-scale)); }
  /* Menu items: text only, color indicates active/inactive. No background boxes. */
.overview-topbar .menu-item{ font-family:Inter, sans-serif; font-weight:500; font-size:10px; line-height:140%; padding: 0 calc(8px * var(--main-scale)); border-radius: 0; cursor:pointer; background:transparent; }
  .overview-topbar .menu-item.active{ color: var(--red); font-weight:600; }
  .overview-topbar .menu-item.inactive{ color: rgba(26,29,37,0.6); }
  .overview-topbar .actions{ display:flex; gap: calc(8px * var(--main-scale)); align-items:center; margin-left:auto; }
/* Action buttons: smaller font and icon per user's compact request */
.overview-topbar .action-btn{ height: calc(24px * var(--main-scale)); border-radius: calc(24px * var(--main-scale)); padding: calc(2px * var(--main-scale)) calc(6px * var(--main-scale)); display:flex; align-items:center; gap: calc(6px * var(--main-scale)); background: rgba(255,255,255,0.5); border:1px solid rgba(0,0,0,0.06); box-shadow: 0px 0px 2px 0px #0000000A, 0px 4px 8px 0px #00000005, 0px 10px 20px 0px #00000008; cursor:pointer; font-size:12px; font-family:Inter, sans-serif; font-weight:500; line-height:1.4; vertical-align:middle; }
.overview-topbar .action-btn img{ width: calc(11px * var(--main-scale)); height: calc(11px * var(--main-scale)); }
/* Share button: pill-shaped, match action/menu height and rounded */
.overview-topbar .share-btn{ height: calc(24px * var(--main-scale)); padding: 0 calc(10px * var(--main-scale)); border-radius: calc(18px * var(--main-scale)); display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.5); border:1px solid rgba(0,0,0,0.06); box-shadow: 0px 4px 10px rgba(0,0,0,0.06); }
.overview-topbar .share-btn img{ width: calc(14px * var(--main-scale)); height: calc(14px * var(--main-scale)); }
/* Action button text colors per spec */
.overview-topbar .promote-btn, .overview-topbar .prepare-btn{ color: #1A1D25; font-size:8px; font-family:Inter, sans-serif; font-weight:500; line-height:1.4; }
.overview-topbar .menu .menu-inner .menu-item.active{ color: #F30D52; }
.overview-topbar .menu .menu-inner .menu-item.inactive{ color: #1A1D25; }
.overview-topbar .promote-btn{ padding-left: calc(14px * var(--main-scale)); padding-right: calc(14px * var(--main-scale)); background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), linear-gradient(91.47deg, rgba(51, 146, 240, 0.36) -0.07%, rgba(51, 101, 240, 0.36) 99.93%); border-image-source: linear-gradient(91.47deg, rgba(51,146,240,0.18) -0.07%, rgba(51,101,240,0.18) 99.93%); color: #1A1D25; font-weight:600; font-size:10px; font-family:Inter, sans-serif; white-space:nowrap; }
.overview-topbar .prepare-btn{ padding-left: calc(14px * var(--main-scale)); padding-right: calc(14px * var(--main-scale)); background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), linear-gradient(96.34deg, rgba(243, 116, 13, 0.36) 0%, rgba(243, 13, 82, 0.36) 100%); border-image-source: linear-gradient(96.34deg, rgba(243,116,13,0.18) 0%, rgba(243,13,82,0.18) 100%); color: #1A1D25; font-weight:600; font-size:10px; font-family:Inter, sans-serif; white-space:nowrap; }

/* === Property Overview: Progress Steps under topbar === */
.page-property-overview .progress-steps{ width:100%; max-width:1120px; background: transparent; border:none; border-radius:0; padding:0; box-shadow:none; }
.page-property-overview .progress-steps .steps{ display:flex; align-items:flex-start; gap:8px; }
/* Build an explicit sequence: step, connector, step, connector, ... */
.page-property-overview .progress-steps .step{ flex:0 0 auto; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.page-property-overview .progress-steps .dot{ width:18px; height:18px; border-radius:999px; background: var(--black-20); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.65), 0 2px 6px rgba(0,0,0,0.08); }
.page-property-overview .progress-steps .step.completed .dot{ background: var(--red); }
.page-property-overview .progress-steps .step.current .dot{ background: var(--black); }
.page-property-overview .progress-steps .label{ color: var(--black); font: 500 10px/1.4 Inter, system-ui, Segoe UI, Arial, sans-serif; white-space:nowrap; }
.page-property-overview .progress-steps .connector{ flex:1 1 auto; height:2px; background: var(--black-6); border-radius:2px; margin-top:9px; }
.page-property-overview .progress-steps .connector.completed{ background: var(--red); }
@media (max-width: 640px){
  .page-property-overview .progress-steps{ padding:0; }
  .page-property-overview .progress-steps .label{ font-size:10px; }
}

/* === Mobile sidebar toggle button (top-left) and mobile sidebar behavior === */
.mobile-sb-toggle{ display:none; }
.mobile-sb-close{ display:none; }
@media (max-width:768px){
  .mobile-sb-toggle{
    display:flex !important; position:fixed; left:12px; top:12px; z-index:1500; width:44px; height:44px; align-items:center; justify-content:center; border-radius:10px; background:var(--panel); box-shadow:var(--soft-shadow); border:0; cursor:pointer;
  }
  /* When body has .sb-open-mobile, show the sidebar even in client-flow mode */
  body.sb-open-mobile .app.client-flow-mode .sb-shell{ display:block !important; position:fixed !important; left:0 !important; top:0 !important; height:100vh !important; z-index:1600 !important; transform:none !important; }
  /* show close button inside sidebar */
  .mobile-sb-close{ display:flex !important; position:absolute !important; right:12px !important; top:12px !important; width:36px !important; height:36px !important; align-items:center !important; justify-content:center !important; border-radius:8px !important; background:transparent !important; border:0 !important; cursor:pointer !important; z-index:1610 !important; }
}

/* === Page slide transitions used for client demo flows === */
.page-slide-wrapper{ position:relative; overflow:hidden; }
.page-slide-inner{ position:relative; width:100%; height:100%; will-change: transform, opacity; transition: transform 360ms cubic-bezier(.22,.9,.35,1), opacity 260ms ease; }
/* Entering state: start off-screen to the right */
.page-slide-entering{ transform: translateX(100%); opacity: 0; }
/* Visible state: on-screen */
.page-slide-visible{ transform: translateX(0%); opacity: 1; }
/* Exiting previous view: slide slightly left and fade */
.page-slide-exit{ transform: translateX(-20%); opacity: 0; }
/* === Mobile styles for client-flow pages (<= 768px) === */
@media (max-width: 768px){
  /* Reduce main padding on mobile */
  .main{ padding:18px 12px 20px 12px; }
  .heading{ width:100%; gap:8px; }
  .heading h1{ font-size:28px; }
  .heading p{ font-size:14px; white-space:normal; }
  /* Make the zip search full width and compact */
  .zip-search{ width:100%; justify-content:flex-start; }
  .zip-search input{ width:100% !important; height:44px; }
  /* Ensure the search submit button is visible on mobile again and centered */
  .zip-search button{ display:flex !important; align-items:center !important; justify-content:center !important; height:44px !important; padding:0 12px !important; }
  /* Allow the title-row inner container to wrap and remove the large right padding that squishes the search input */
  .title-row .heading > div{ padding-right:0 !important; flex-wrap:wrap !important; min-width:0 !important; }
  /* Ensure the zip-search can grow to fill available space and not be constrained by min-width */
  .zip-search{ flex:1 1 auto !important; min-width:0 !important; width:auto !important; }
  /* Move the filter pill up into the header area so it's visible above the search bar */
  .title-row{ position:relative; }
  .pill.filter{ position:absolute; top:-8px; right:0; z-index:50; }
  /* Collapse sidebar for small screens in client-flow mode */
  .app.client-flow-mode:not(.page-zip_trends):not(.page-sales_trends) .sb-shell{ display:none !important; }
  .app.client-flow-mode .main-shell{ width:100% !important; }
  /* Stack cards vertically with sensible gaps */
  .small-charts-row{ grid-template-columns: 1fr !important; gap:12px !important; }
  .graph-card{ padding:16px !important; }
  .graph-card.big{ padding:20px !important; }
  .agent-dual-wrap{ flex-direction:column !important; height:auto !important; gap:12px !important; }
  .agent-primary, .agent-secondary{ width:100% !important; max-width:none !important; }
  /* Mobile: ensure agent cards render horizontally with text taking half and image taking half to avoid squish */
  .agent-primary{ min-height: auto !important; display:flex; flex-direction:row; gap:12px; align-items:center; }
  .agent-primary .text-block{ position:static !important; width:auto !important; padding:12px 16px !important; top:auto !important; left:auto !important; flex:1 1 50% !important; min-width:0 !important; }
  /* Make the hero image occupy ~50% of the card on mobile and remove translation that pushed it left */
  .agent-primary{ overflow:hidden !important; }
  .agent-primary .hero-figure{ position:relative !important; width:50% !important; flex:0 0 50% !important; max-width:none !important; height:180px !important; top:0 !important; right:0 !important; object-fit:cover !important; border-radius:12px !important; margin:0 !important; transform: none !important; }
  .agent-primary .hero-mask{ display:none !important; }
  /* If text needs to wrap under the image on very small screens, make hero figure full width */
  @media (max-width:420px){
    .agent-primary{ flex-direction:column !important; align-items:stretch !important; }
    .agent-primary .hero-figure{ width:100% !important; max-width:100% !important; height:180px !important; transform:none !important; margin:0 0 8px 0 !important; }
  }
  /* Reduce agent text sizes on mobile to prevent vertical clipping */
  .agent-primary .text-block .label{ font-size:11px !important; }
  .agent-primary .text-block .agent-name{ font-size:18px !important; line-height:1.1 !important; }
  .agent-primary .text-block .agent-desc{ font-size:13px !important; line-height:1.2 !important; }
  /* Stack map and agent recommendation panels on mobile to avoid cramped horizontal layout */
  .map-reviews-row{ display:flex; flex-direction:column !important; gap:12px !important; }
  .map-reviews-row .graph-card{ width:100% !important; max-width:100% !important; }
  /* Your Zipcodes pills: wrap and make them fill horizontally */
  .app.client-flow-mode .page-slide-inner > .heading .your-zip-pills,
  .your-zip-pills{ display:flex; gap:8px; flex-wrap:wrap; width:100%; }
  .your-zip-pills button{ flex:1 1 auto; min-width:0; justify-content:center; }
  /* Reduce title-row spacing */
  .title-row{ gap:8px; }
  /* Agent search fixed bottom adjustments for mobile */
  .agent-search-wrap.fixed-bottom{ left:0 !important; right:0 !important; transform:none !important; bottom:0 !important; padding:12px; }
  .agent-search-bar{ padding:12px; height:56px; border-radius:12px; }
  /* Prevent any page-level scrolling while on the signup/locations steps on mobile.
     We only apply this when the app is in client-flow mode to avoid impacting other pages. */
  .app.client-flow-mode .client-openflow-root.step-signup,
  .app.client-flow-mode .client-openflow-root.step-locations {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important; /* no scrolling inside the flow */
    -webkit-overflow-scrolling: auto !important;
    z-index: 9999 !important;
    background: var(--panel); /* ensure visual consistency */
  }
  /* Also prevent the document body from scrolling while those steps are active */
  @supports (overflow: clip) {
    .app.client-flow-mode .client-openflow-root.step-signup,
    .app.client-flow-mode .client-openflow-root.step-locations { overflow: clip !important; }
  }
}

/* AI Chat Button Icon - Force white color with full opacity */
.ai-chat-icon {
  filter: brightness(0) invert(1) opacity(1) !important;
  -webkit-filter: brightness(0) invert(1) opacity(1) !important;
  opacity: 1 !important;
}

/* Override SVG stroke opacity to ensure full white */
.ai-chat-icon[src*="Chat Round Line"] {
  filter: brightness(0) invert(1) opacity(1) !important;
  -webkit-filter: brightness(0) invert(1) opacity(1) !important;
}