:root { --rail-width: 238px; --bella-width: 360px; }

.app,
.app.calendar-mode,
.app.comps-mode,
.app.settings-mode,
.app.year-mode {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

.property-rail {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  height: 100vh;
  overflow: auto;
  padding: 14px 10px;
  background: #123428;
  color: #fff;
}
.property-rail h1 { margin: 3px 8px 14px; font-size: 18px; }
.rail-home,.rail-unit,.rail-pin,.complex-compare { border: 0; background: transparent; color: inherit; cursor: pointer; }
.rail-home { width: 100%; padding: 9px; border-radius: 8px; background: rgba(255,255,255,.08); text-align: left; font-weight: 800; }
.rail-group summary { padding: 10px 8px 4px; color: #d8c783; cursor: pointer; font-size: 11px; text-transform: uppercase; }
.rail-complex { padding: 5px 0 5px 8px; }
.rail-complex-title { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 800; }
.rail-unit { display: flex; width: 100%; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 7px; text-align: left; font-size: 12px; }
.rail-unit:hover,.rail-unit.active { background: rgba(255,255,255,.12); }
.rail-pin { margin-left: auto; color: #d8c783; }
.complex-compare { padding: 2px 6px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; font-size: 10px; }

.app > .main,
.app.calendar-mode > .main,
.app.comps-mode > .main,
.app.settings-mode > .main,
.app.year-mode > .main {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.main > .topbar {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: max-content max-content minmax(80px, 1fr) max-content;
  align-items: center;
  justify-content: initial;
  column-gap: 12px;
  row-gap: 8px;
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  container-name: lens-topbar;
  container-type: inline-size;
}
.topbar-title { min-width: 0; }
.main > .topbar .topbar-brand { margin-right: 0; }
.main > .advisory-banner { grid-column: 1; grid-row: 2; }
.main > .lens-notice {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #d8c783;
  background: #fff8df;
  color: #654f00;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}
.main > .lens-notice[hidden] { display: none; }
.lens-notice button { padding: 6px 12px; border: 0; border-radius: 999px; background: var(--forest); color: #fff; cursor: pointer; font-weight: 900; }

.main > .sidebar,
.main > .portfolio-landing,
.main > .tab-panel:not(#chatPanel) {
  grid-column: 1;
  grid-row: 4;
  min-width: 0;
  min-height: 0;
}
.main > .sidebar { display: none; width: 100%; overflow: auto; border-right: 0; padding: 20px; }
.app.calendar-mode .main > .sidebar { display: block; grid-column: 1; grid-row: 4; }

.portfolio-landing {
  position: relative;
  inset: auto;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 24px;
  background: var(--bg);
}
.portfolio-landing[hidden] { display: none; }
.app.portfolio-open .main > .sidebar,
.app.portfolio-open .main > .tab-panel:not(#chatPanel) { display: none !important; }
.app.portfolio-open .main > .portfolio-landing { display: block; }
.portfolio-title { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 18px; }
.resume-card { margin-bottom: 20px; padding: 15px; border: 1px solid #c9b46a; border-radius: 14px; background: #fff8df; cursor: pointer; }
.market-heading { margin: 22px 0 10px; color: var(--forest); }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 12px; }
.property-card { padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: #fff; cursor: pointer; text-align: left; }
.property-card:hover { border-color: var(--forest); transform: translateY(-1px); }
.property-card h3 { margin: 0 0 4px; color: var(--forest); }
.property-card-meta,.property-card-flags { margin-top: 8px; color: var(--muted); font-size: 11px; }
.property-card-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 10px; font-size: 11px; }
.property-card-metrics strong { display: block; font-size: 14px; }

.main > #chatPanel { display: none; position: relative; grid-column: 2; grid-row: 1 / -1; width: 100%; min-width: 0; min-height: 0; padding: 12px; border-left: 1px solid var(--border); background: var(--bg); }
.app.chat-open { grid-template-columns: 72px minmax(0,1fr); }
.app.chat-open > .main { grid-template-columns: minmax(520px,1fr) var(--bella-width); }
.app.chat-open .property-rail { width: 72px; }
.app.chat-open .property-rail h1,.app.chat-open .rail-label,.app.chat-open .rail-group summary,.app.chat-open .rail-complex-title { display: none; }
/* Bella is reachable in every mode. Comps, Settings and Year used to hide both
   the tab and the panel; asking Bella about a comp set or a year curve is at
   least as useful as asking about a calendar, and the rail layout above gives
   those modes the same two-column grid the calendar has. */
.app.chat-open .main > #chatPanel.active { display: flex; }
.bella-resizer { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; background: transparent; cursor: col-resize; }

/* The property rail is the desktop picker; panel selects remain as mobile fallbacks. */
@media (min-width: 981px) {
  .app.comps-mode,
  .app.settings-mode,
  .app.year-mode {
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
  }
  .app.comps-mode > .main,
  .app.settings-mode > .main,
  .app.year-mode > .main {
    grid-column: 2;
    min-width: 0;
  }
  #propertySelect,
  #compPropertySelect,
  #settingsPropertySelect,
  #yearPropertySelect,
  label[for="propertySelect"] {
    display: none;
  }
}

.bella-dashboard-tab {
  position: fixed;
  right: 0;
  left: auto;
  top: 45%;
  z-index: 12001;
  display: grid;
  place-items: center;
  width: 38px;
  height: 106px;
  padding: 0;
  border: 1px solid rgba(31, 111, 91, 0.22);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #1f6f5b;
  color: #fff;
  box-shadow: -8px 8px 24px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 0;
}
.bella-dashboard-tab span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.bella-dashboard-tab:hover,
.bella-dashboard-tab:focus-visible,
.bella-dashboard-tab.active {
  background: #d4a853;
  color: #173d32;
}
.bella-dashboard-tab:focus-visible { outline: 3px solid rgba(212, 168, 83, .42); outline-offset: 2px; }
html.bella-pos-left .bella-dashboard-tab {
  right: auto;
  left: 0;
  border: 1px solid rgba(31, 111, 91, 0.22);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  box-shadow: 8px 8px 24px rgba(15, 23, 42, 0.18);
}
html.bella-pos-bottom .bella-dashboard-tab { display: none; }
html.bella-pos-bottom .app:not(.chat-open) .bella-dashboard-tab {
  position: fixed;
  right: 16px;
  left: auto;
  top: auto;
  bottom: 16px;
  z-index: 12001;
  display: flex;
  width: auto;
  height: auto;
  min-width: unset;
  max-width: unset;
  padding: 10px 20px;
  border: 1px solid rgba(31, 111, 91, 0.22);
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .2);
  font-size: .85rem;
}
html.bella-pos-bottom .app:not(.chat-open) .bella-dashboard-tab span {
  writing-mode: horizontal-tb;
  transform: none;
}
.bella-panel-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(31, 111, 91, .22);
  border-radius: 50%;
  background: #fff;
  color: var(--forest);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}
html.bella-pos-bottom .app.chat-open .bella-panel-close { display: grid; }
html.bella-pos-bottom .app.chat-open .messages { padding-top: 44px; }

/* Bella stays in the Listing Lens grid so the workspace reflows around it. */
@media (min-width: 981px) {
  html:not(.bella-pos-bottom) .app.chat-open .main > .topbar {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    padding-block: 13px;
  }
  html:not(.bella-pos-bottom) .app.chat-open .topbar-brand { grid-column: 1; grid-row: 1; }
  html:not(.bella-pos-bottom) .app.chat-open .topbar-title { grid-column: 2 / -1; grid-row: 1; }
  html:not(.bella-pos-bottom) .app.chat-open .lens-header-tools { grid-column: 1 / 3; grid-row: 2; }
  html:not(.bella-pos-bottom) .app.chat-open .tabs { grid-column: 3; grid-row: 2; }

  html.bella-pos-left .app.chat-open > .main {
    grid-template-columns: var(--bella-width) minmax(520px, 1fr);
  }
  html.bella-pos-left .app.chat-open .main > :not(#chatPanel) { grid-column: 2; }
  html.bella-pos-left .app.chat-open .main > #chatPanel.active {
    grid-column: 1;
    grid-row: 1 / -1;
    border-right: 1px solid var(--border);
    border-left: 0;
  }
  html.bella-pos-left .bella-resizer { right: -3px; left: auto; }

  html.bella-pos-bottom .app.chat-open > .main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) min(380px, 50vh);
  }
  html.bella-pos-bottom .app.chat-open .main > #chatPanel.active {
    grid-column: 1;
    grid-row: 5;
    border-top: 1px solid var(--border);
    border-left: 0;
  }
  html.bella-pos-bottom .bella-resizer { display: none; }
  html.bella-pos-left .app.chat-open .compare-tray { left: calc(var(--bella-width) + 90px); right: 18px; }
  html.bella-pos-bottom .app.chat-open .compare-tray { right: 18px; bottom: calc(min(380px, 50vh) + 16px); }
}

/* The workspace width changes independently of the viewport when the property
   rail or Bella is docked. Query the rendered topbar width, keeping its search
   usable without making the 1440px closed state grow a second row. */
@media (min-width: 981px) {
  @container lens-topbar (max-width: 1450px) {
    .app:not(.chat-open) .main > .topbar > .topbar-title { display: none; }
  }

  @container lens-topbar (min-width: 1101px) and (max-width: 1450px) {
    .app:not(.chat-open) .main > .topbar > .topbar-brand .brand-name { display: none; }
    .app:not(.chat-open) .main > .topbar > .topbar-brand { grid-column: 1; grid-row: 1; }
    .app:not(.chat-open) .main > .topbar > .lens-header-tools { grid-column: 2 / 4; grid-row: 1; }
    .app:not(.chat-open) .main > .topbar > .tabs { grid-column: 4; grid-row: 1; justify-self: end; }
  }

  @container lens-topbar (max-width: 1400px) {
    .app.chat-open .main > .topbar > .topbar-brand { grid-column: 1; grid-row: 1; }
    .app.chat-open .main > .topbar > .topbar-title { grid-column: 2 / 4; grid-row: 1; }
    .app.chat-open .main > .topbar > .tabs { grid-column: 4; grid-row: 1; }
    .app.chat-open .main > .topbar > .lens-header-tools {
      grid-column: 1 / 5;
      grid-row: 2;
      max-width: none;
    }
  }

  @container lens-topbar (max-width: 1100px) {
    .main > .topbar > .topbar-brand { grid-column: 1; grid-row: 1; }
    .main > .topbar > .topbar-title { grid-column: 2 / 4; grid-row: 1; }
    .main > .topbar > .tabs { grid-column: 4; grid-row: 1; }
    .main > .topbar > .lens-header-tools {
      grid-column: 1 / 5;
      grid-row: 2;
      max-width: none;
    }
  }

  @container lens-topbar (max-width: 700px) {
    .app.chat-open .main > .topbar > .topbar-brand,
    .app.chat-open .main > .topbar > .topbar-title { display: none; }
    .app.chat-open .main > .topbar > .lens-header-tools { display: contents; }
    .app.chat-open .main > .topbar > .lens-header-tools > .lens-search {
      grid-column: 2 / -1;
      grid-row: 2;
      width: 100%;
      min-width: 280px;
      max-width: none;
    }
    .app.chat-open .main > .topbar > .lens-header-tools > .scope-toggle {
      grid-column: 1;
      grid-row: 2;
      align-self: center;
      font-size: 10px;
    }
    .app.chat-open .main > .topbar > .lens-header-tools > .scope-toggle button { padding: 4px; }
    .app.chat-open .main > .topbar > .lens-header-tools > .review-filter {
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
      padding: 6px 8px;
      font-size: 12px;
    }
    .app.chat-open .main > .topbar > .tabs {
      grid-column: 3;
      grid-row: 1;
      justify-self: end;
    }
  }

  html.bella-pos-bottom .app.chat-open .main > .topbar { padding-block: 13px; }
}

@media (min-width: 981px) and (max-width: 1100px) {
  html:not(.bella-pos-bottom) .app.chat-open .main > .topbar { padding-block: 15.5px; }
}

.lens-header-tools { display: flex; min-width: 0; width: 100%; gap: 8px; align-items: center; }
.lens-search { flex: 1 1 80px; width: auto; min-width: 0; max-width: 420px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 9px; }
.review-filter { flex: 0 0 auto; white-space: nowrap; }
.scope-toggle { display: flex; flex-shrink: 0; padding: 2px; border-radius: 99px; background: rgba(255,255,255,.12); }
.topbar .tabs { flex-shrink: 0; }
.scope-toggle button { padding: 7px 10px; border: 0; border-radius: 99px; cursor: pointer; }
.scope-toggle button.active { background: #fff; color: #123428; }

.compare-tray { position: fixed; left: calc(var(--rail-width) + 18px); right: 18px; bottom: 16px; z-index: 30; padding: 12px 16px; border-radius: 12px; background: #123428; color: #fff; box-shadow: 0 8px 30px #0004; }
.app.chat-open .compare-tray { left: 90px; right: calc(var(--bella-width) + 18px); }
.compare-tray[hidden] { display: none; }
.comp-eligibility { margin-bottom: 12px; padding: 12px; border: 1px solid #d5bd70; border-radius: 10px; background: #fff8df; }
.evidence-quote { margin-top: 6px; padding-left: 10px; border-left: 3px solid #d5bd70; color: var(--muted); font-size: 11px; }
.settings-status-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 10px; margin: 12px 0; }
.settings-status-card { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.bella-position-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.bella-position-row > span { color: var(--muted); font-size: 12px; }
.bella-pos-btn { padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--forest); cursor: pointer; font-weight: 800; }
.bella-pos-btn:hover,.bella-pos-btn:focus-visible { border-color: var(--gold); outline: 2px solid rgba(212,168,83,.22); }
.bella-pos-btn.active { border-color: var(--forest); background: var(--forest); color: #fff; }
.calendar-view-toggle { display: flex; gap: 5px; margin: 0 0 10px; }
.calendar-view-toggle button { padding: 6px 10px; border: 1px solid var(--border); border-radius: 99px; background: #fff; cursor: pointer; }
.calendar-view-toggle button.active { background: var(--forest); color: #fff; }
.gantt-view { overflow: auto; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.gantt-grid { display: grid; grid-template-columns: repeat(30,minmax(58px,1fr)); gap: 4px; min-width: 1740px; }
.gantt-day { display: grid; gap: 3px; padding: 7px 5px; border: 1px solid var(--border); border-top: 4px solid #79a98d; border-radius: 7px; background: #fff; cursor: pointer; text-align: left; }
.gantt-day.booked { border-top-color: #8b5cf6; background: #ede9fe; }
.gantt-day.held { border-top-color: #f59e0b; background: #fff3cd; }
.gantt-day small { color: var(--muted); font-size: 8px; text-transform: uppercase; }

@media (max-width: 980px) {
  .app,.app.calendar-mode,.app.comps-mode,.app.settings-mode,.app.year-mode,.app.chat-open { grid-template-columns: 1fr; height: auto; min-height: 100vh; overflow: visible; }
  .property-rail { display: none; }
  .app > .main,.app.calendar-mode > .main,.app.comps-mode > .main,.app.settings-mode > .main,.app.year-mode > .main { grid-column: 1; height: 100vh; }
  .app.chat-open > .main { grid-template-columns: 1fr; }
  .app.chat-open .main > #chatPanel.active { grid-column: 1; grid-row: 4; }
  .app.chat-open .main > .sidebar,.app.chat-open .main > .portfolio-landing,.app.chat-open .main > .tab-panel:not(#chatPanel) { display: none !important; }
  .lens-search { min-width: 120px; }
  .main > .sidebar { padding: 12px; }
  .bella-resizer { display: none; }
  .bella-dashboard-tab { display: none !important; }
  .app.chat-open .bella-panel-close { display: grid; }
  .app.chat-open .messages { padding-top: 44px; }
}

@media (max-width: 980px) {
  .main > .topbar {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
  }
  .topbar-brand { grid-column: 1; grid-row: 1; }
  .topbar-title { grid-column: 2; grid-row: 1; }
  .lens-header-tools { grid-column: 1 / -1; grid-row: 2; }
  .topbar > .tabs { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 560px) {
  .topbar-title { display: none; }
  .topbar-brand { grid-column: 1 / 3; }
}