/* Dashboard shell: persistent top bar shared by the map, scoring, feed and
   chat sections, plus the property detail page. Kept as a slim top bar
   (not a sidebar) to match the app's existing full-bleed-map pattern --
   the map/feed/chat content still owns the rest of the viewport. */

.shell-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; gap: 4px; padding: 0 20px;
  height: 56px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.shell-brand {
  display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink);
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em; margin-right: 12px;
}
.shell-brand .brand-mark { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.shell-brand .brand-mark img, .shell-brand .brand-mark svg { width: 100%; height: 100%; display: block; }

.shell-nav { display: flex; align-items: center; gap: 2px; }
.shell-nav a {
  display: flex; align-items: center; gap: 6px; text-decoration: none;
  color: var(--ink-soft); font-size: 13.5px; font-weight: 500;
  padding: 8px 12px; border-radius: 6px; transition: background 140ms ease, color 140ms ease;
}
.shell-nav a:hover { color: var(--ink); background: var(--canvas); }
.shell-nav a.active { color: var(--ink); background: var(--accent-soft); }

.shell-auth { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.shell-auth .user-email { font-size: 13px; color: var(--ink-soft); }
.shell-auth a.text-link {
  text-decoration: none; color: var(--ink-soft); font-size: 13px; font-weight: 500;
  transition: color 140ms ease;
}
.shell-auth a.text-link:hover { color: var(--ink); }

/* Content below the fixed topbar. Pages that manage their own full-bleed
   layout (the map) add shell-content--flush to skip the top padding and
   handle the offset themselves. */
.shell-content { padding-top: 56px; min-height: 100vh; }
.shell-content--flush { padding-top: 0; }

/* Multi-select filter pill bar, used at the top of the map view. */
.filter-bar {
  position: fixed; top: 56px; left: 0; right: 0; z-index: 550;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.filter-bar .filter-group { position: relative; }
.filter-bar .filter-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ink);
  transition: border-color 140ms ease, background 140ms ease;
}
.filter-bar .filter-toggle:hover { border-color: var(--ink-soft); }
.filter-bar .filter-toggle.has-selection { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.filter-bar .filter-toggle .count {
  background: var(--accent); color: #fff; border-radius: 999px; font-size: 10.5px;
  padding: 1px 6px; font-weight: 700;
}
.filter-bar .filter-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 700;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08); padding: 14px; display: none; min-width: 240px;
}
.filter-bar .filter-panel.open { display: block; }
.filter-bar .filter-panel .pill-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.filter-bar .year-range { display: flex; gap: 6px; align-items: center; }
.filter-bar .year-range input { width: 72px; }
.filter-bar .clear-link {
  font-size: 12px; color: var(--ink-soft); text-decoration: underline; cursor: pointer; margin-top: 4px; display: inline-block;
}

/* Floating chat launcher, present on every /dashboard/* page. */
.chat-launcher {
  position: fixed; bottom: 20px; right: 20px; z-index: 950;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(37,99,235,0.35);
  transition: transform 140ms ease-out;
}
.chat-launcher:hover { transform: scale(1.06); }
.chat-launcher svg { width: 24px; height: 24px; }

.chat-drawer {
  position: fixed; bottom: 84px; right: 20px; z-index: 950;
  width: 360px; max-width: calc(100vw - 40px); height: 480px; max-height: calc(100vh - 140px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
  display: none; flex-direction: column; overflow: hidden;
}
.chat-drawer.open { display: flex; }
.chat-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13.5px;
}
.chat-drawer-header button { background: none; border: none; cursor: pointer; color: var(--ink-soft); font-size: 16px; }
.chat-drawer-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 85%; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.chat-msg.user { align-self: flex-end; background: var(--accent); color: #fff; }
.chat-msg.assistant { align-self: flex-start; background: var(--canvas); color: var(--ink); }
.chat-drawer-composer { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.chat-drawer-composer input { flex: 1; }