/* ============================================================
   GLASS.CSS — Glass Bubble shell components (SP1)
   Container-level frosting only (blur never per-row). @supports
   fallback to solid where backdrop-filter is unsupported;
   prefers-reduced-motion respected. Tokens live in base.css.
   ============================================================ */

/* ── Utility: a frosted "bubble" surface ─────────────────── */
.glass-bubble {
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  box-shadow: var(--gb-shadow);
  -webkit-backdrop-filter: var(--gb-blur);
  backdrop-filter: var(--gb-blur);
}
/* Cobalt radial wash overlay (Home + empty states only — never behind lists). */
.glass-wash { position: relative; }
.glass-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gb-wash);
  pointer-events: none;
  z-index: 0;
}
.glass-wash > * { position: relative; z-index: 1; }

/* Decorative blurred blob accents — Home + empty states ONLY. */
.gb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.gb-blob--cobalt { background: radial-gradient(circle, rgba(59,111,224,0.32), rgba(59,111,224,0) 70%); }
.gb-blob--mid    { background: radial-gradient(circle, rgba(28,43,74,0.22),  rgba(28,43,74,0)  70%); }
[data-theme="dark"] .gb-blob--cobalt { background: radial-gradient(circle, rgba(91,141,239,0.30), rgba(91,141,239,0) 70%); }

/* ── Frosted floating sidebar (spec §3.1) — conservative:
   kept in flow, only the surface is frosted so layout is unchanged. */
#sidebar {
  background: var(--gb-surface);
  -webkit-backdrop-filter: var(--gb-blur);
  backdrop-filter: var(--gb-blur);
}

/* ── @supports fallback: solid surfaces where blur is unsupported ── */
@supports not (backdrop-filter: blur(1px)) {
  .glass-bubble { background: var(--bg-surface); }
  #sidebar      { background: var(--bg-base); }
}

/* ── Reduced motion: no blob/wash animation, honor global damping ── */
@media (prefers-reduced-motion: reduce) {
  .gb-blob { animation: none !important; }
}

/* ── Omnibar inputs (SP1) ─────────────────────────────────── */
.omnibar-input {
  width: 100%;
  font-family: var(--font-ui);
  color: var(--text-primary);
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-control-radius);
  -webkit-backdrop-filter: var(--gb-blur);
  backdrop-filter: var(--gb-blur);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.omnibar-input:focus { border-color: var(--border-accent); box-shadow: 0 0 0 3.5px var(--cobalt-wash); outline: none; }
.omnibar-input--hero { font-size: var(--text-lg); padding: 14px 20px; box-shadow: var(--gb-shadow); }
.omnibar-input--slim { font-size: var(--text-sm); padding: 7px 14px; height: 34px; }
@supports not (backdrop-filter: blur(1px)) { .omnibar-input { background: var(--bg-input); } }
#topbar-omnibar { flex: 1; max-width: 420px; }

/* ── Topbar search sequence (js/topbar-search.js) ─────────────
   Data type → property type → location → Filters, left to right.
   With the sequence present the omnibar shrinks to a compact jump/ask
   field and the brand title steps aside to give the controls room. */
.topbar-left.has-search { min-width: 0; }
.topbar-left.has-search .topbar-title { display: none; }
.topbar-left.has-search #topbar-omnibar { flex: 0 1 200px; min-width: 120px; }
#topbar-search { flex: 1 1 auto; min-width: 0; }
.ts-bar { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ts-types {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 2px; gap: 2px; height: 34px;
  background: var(--gb-surface); border: 1px solid var(--gb-border);
  border-radius: var(--gb-control-radius);
}
.ts-era {
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); padding: 0 4px 0 6px;
}
.ts-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--gb-border); }
.ts-type {
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-secondary);
  background: transparent; border: 0; border-radius: calc(var(--gb-control-radius) - 2px);
  height: 28px; padding: 0 10px; cursor: pointer; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.ts-type:hover { color: var(--text-primary); background: var(--cobalt-wash); }
.ts-type:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 1px; }
.ts-type.is-active { color: #fff; background: #3B6FE0; font-weight: 600; }
/* Historical (comps) selections read amber — the same hue as comp pins. */
.ts-type.is-active[data-type="sold"], .ts-type.is-active[data-type="leased"] { background: #B7791F; }
.ts-control {
  height: 34px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-primary);
  background: var(--gb-surface); border: 1px solid var(--gb-border);
  border-radius: var(--gb-control-radius);
}
.ts-control:focus { border-color: var(--border-accent); box-shadow: 0 0 0 3.5px var(--cobalt-wash); outline: none; }
.ts-category { flex: 0 1 170px; min-width: 110px; padding: 0 8px; }
.ts-location { position: relative; flex: 1 1 220px; min-width: 140px; }
.ts-location-input { width: 100%; padding: 0 12px; }
.ts-filters { flex-shrink: 0; padding: 0 14px; cursor: pointer; font-weight: 500; }
.ts-filters:hover { border-color: var(--border-accent); }
.ts-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 900;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px;
  box-shadow: 0 10px 26px rgba(20,28,44,.20); max-height: 280px; overflow: auto;
}
.ts-suggest-item { padding: 8px 12px; font-size: var(--text-sm); cursor: pointer; }
.ts-suggest-item:hover { background: var(--cobalt-wash); }
.ts-suggest-sub { display: block; font-size: 11px; color: var(--text-muted); }
@media (max-width: 1280px) { .ts-era { display: none; } }

/* Live map Filters panel: key fields for the selected data type lead. */
.lm-f-group { margin-top: 8px; }
.lm-f-heading { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.lm-f-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 12px; }
.lm-f { display: inline-flex; align-items: center; gap: 4px; }
.lm-f-label { color: var(--text-muted); white-space: nowrap; }
.lm-f-key { padding: 8px; border-radius: 10px; background: var(--cobalt-wash); }
.lm-f-key .lm-f-heading { color: var(--text-primary); }
.lm-mode-chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600; color: #fff; background: #3B6FE0;
}
.lm-mode-chip[data-era="historical"] { background: #B7791F; }

/* ── Home: chat-first canvas (ChatGPT/Claude-style) ──────────
   #content hands Home its full height; the transcript fills and scrolls
   (newest turn pinned at the bottom) and the composer is parked at the
   bottom. Greeting + digest + "Backend noticed" live in the welcome
   (empty) state and step aside once a conversation has messages. */
#content:has(.home-shell) { padding: 0; overflow: hidden; display: flex; }
.home-shell { flex: 1; min-height: 0; display: flex; flex-direction: row; width: 100%; }
.home-chat { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }

#home-welcome {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--space-7) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.home-chat.has-messages #home-welcome { display: none; }

#home-thread.home-thread-live {
  flex: 1; min-height: 0; overflow-y: auto; display: none;
  padding: var(--space-6) var(--space-8);
}
.home-chat.has-messages #home-thread.home-thread-live { display: flex; flex-direction: column; gap: var(--space-4); }

.home-composer-bar {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-8) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-base);
}
.home-composer-bar .home-omnibar { max-width: 820px; margin: 0 auto; }

/* Welcome-state bits */
.home-hero { position: relative; overflow: hidden; border-radius: var(--gb-radius); padding: var(--space-6); }
.home-omnibar { max-width: 640px; }
.home-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.home-chip {
  font-size: var(--text-sm); padding: 7px 14px; border-radius: var(--gb-control-radius);
  background: var(--bg-highlight); color: var(--text-primary); border: 1px solid var(--border-color);
  transition: background var(--transition), transform 120ms var(--ease-ios);
}
.home-chip:hover { background: var(--bg-surface); }
.home-chip:active { transform: scale(0.96); }
.home-thread { min-height: 120px; display: flex; flex-direction: column; gap: var(--space-3); }
.home-digest { margin-bottom: 0; }
.home-digest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.home-digest-stat { text-align: center; padding: var(--space-2); }
.home-digest-num { font-size: var(--text-2xl); font-weight: 700; color: var(--accent); }
.home-digest-label { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* ── Home chat: previous-chats sidebar ── */
.home-chat-sidebar {
  flex: 0 0 240px; min-width: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border-subtle); background: var(--bg-surface);
  overflow: hidden; transition: flex-basis 160ms var(--ease-ios);
}
.home-chat-sidebar.collapsed { flex-basis: 52px; }
.home-cc-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); }
.home-cc-new {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--text-sm); padding: 8px 10px; border-radius: var(--gb-control-radius);
  background: var(--bg-highlight); color: var(--text-primary); border: 1px solid var(--border-color);
}
.home-cc-new:hover { background: var(--bg-base); }
.home-cc-collapse { color: var(--text-muted); padding: 6px; border-radius: 8px; background: none; }
.home-cc-collapse:hover { background: var(--bg-highlight); }
.home-chat-sidebar.collapsed .home-cc-new span,
.home-chat-sidebar.collapsed .home-cc-list { display: none; }
.home-chat-sidebar.collapsed .home-cc-collapse { transform: rotate(180deg); }
.home-cc-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.home-cc-row { display: flex; align-items: center; border-radius: 8px; }
.home-cc-row:hover { background: var(--bg-highlight); }
.home-cc-row.is-active { background: var(--bg-highlight); }
.home-cc-open {
  flex: 1; min-width: 0; text-align: left; font-size: var(--text-sm); color: var(--text-primary);
  padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none;
}
.home-cc-del { opacity: 0; color: var(--text-muted); padding: 4px 8px; font-size: 15px; background: none; }
.home-cc-row:hover .home-cc-del { opacity: 1; }
.home-cc-del:hover { color: var(--text-primary); }
.home-cc-empty { color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-3); }

/* ── Home chat: attach tray + drag ── */
.home-composer-inline { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 820px; margin: 0 auto; }
.home-composer-inline .home-omnibar { flex: 1; max-width: none; }
.home-attach-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); padding: 8px; border-radius: 10px; cursor: pointer; }
.home-attach-btn:hover { background: var(--bg-highlight); color: var(--text-primary); }
.home-attach-send { font-size: var(--text-sm); padding: 8px 16px; border-radius: var(--gb-control-radius); background: var(--accent); color: #fff; }
.home-attach-row { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 820px; margin: 0 auto var(--space-2); }
.home-attach-banner { max-width: 820px; margin: 0 auto var(--space-2); color: var(--danger, #b4232a); font-size: var(--text-sm); }
.home-chat--drag { outline: 2px dashed var(--accent); outline-offset: -8px; }

/* Below 900px the sidebar starts collapsed — but only STARTS. `:not(.expanded)`
   keeps the chevron a working control: HomeCopilot stamps .expanded when the
   broker explicitly opens the sidebar, and these rules then stop matching.
   Written as a plain `.home-chat-sidebar` selector this out-specified the base
   `.home-cc-list { display: flex }` unconditionally, so once narrow, previous
   chats could never be reached from Home at all (review finding 4). */
@media (max-width: 900px) {
  .home-chat-sidebar:not(.expanded) { flex-basis: 52px; }
  .home-chat-sidebar:not(.expanded) .home-cc-new span,
  .home-chat-sidebar:not(.expanded) .home-cc-list { display: none; }
  .home-chat-sidebar:not(.expanded) .home-cc-collapse { transform: rotate(180deg); }
}

/* Footer nav group (Team/Settings) pushed to the bottom of the sidebar. */
.nav-footer-spacer { margin-top: auto; height: var(--space-4); }
.sidebar-nav { display: flex; flex-direction: column; }

/* ── Segmented control → Glass Bubble pills (SP2) ─────────────
   Overrides the layout.css .inner-tabs base (glass.css loads after
   layout.css). Class names unchanged — all wrappers + legacy
   renderers share them. Container frosting only (blur never per-row). */
.inner-tabs {
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-control-radius);
  padding: 4px;
  gap: 3px;
  -webkit-backdrop-filter: var(--gb-blur);
  backdrop-filter: var(--gb-blur);
  box-shadow: var(--gb-shadow);
}
.inner-tab {
  border-radius: var(--gb-control-radius);
  padding: 6px 16px;
  transition: color var(--transition), background var(--transition-md),
              box-shadow var(--transition-md), transform 140ms var(--ease-spring, var(--ease-ios));
}
.inner-tab.active {
  background: var(--accent);
  color: var(--gb-on-accent);
  box-shadow: 0 2px 8px rgba(59,111,224,0.28);
}
.inner-tab.active:hover { color: var(--gb-on-accent); }
@supports not (backdrop-filter: blur(1px)) { .inner-tabs { background: var(--bg-highlight); } }
@media (prefers-reduced-motion: reduce) { .inner-tab { transition: color var(--transition), background var(--transition-md); } }

/* ── Auto-nav "took you here" chip (SP3) — fixed, survives content nav ── */
.copilot-nav-chip {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 16px;
  border-radius: var(--gb-control-radius);
  font-size: var(--text-sm);
  color: var(--text-primary);
  animation: gb-navchip-in 220ms var(--ease-spring, var(--ease-ios)) both;
}
.copilot-nav-chip-mark { color: var(--accent); font-weight: 700; }
.copilot-nav-chip-act {
  border: 1px solid var(--border-accent);
  background: transparent;
  color: var(--accent);
  border-radius: var(--gb-control-radius);
  padding: 4px 12px;
  font-size: var(--text-sm);
  cursor: pointer;
}
.copilot-nav-chip-act:hover { background: var(--cobalt-wash); }
.copilot-nav-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; padding: 2px;
}
@keyframes gb-navchip-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .copilot-nav-chip { animation: none; } }