/* GeoAI — tabaqat-inspired styling */
:root {
  --teal:        #1ba7a6;
  --teal-deep:   #004d5d;
  --orange:      #f9971c;
  --red:         #de1f26;
  --link:        #0b66c2;
  --bg:          #f8fafc;
  --surface:     #ffffff;
  --border:      #e2e8f0;
  --text:        #1e293b;
  --muted:       #64748b;
  --panel-w:     420px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  /* Lock the page so the only thing that can scroll is the chat log inside
     the chat panel. Without this, a tall chat log pushes the body taller
     than the viewport and the *page* gets a scrollbar that visually moves
     the map. */
  overflow: hidden;
  font-family: "Montserrat", "Cairo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* ── slide-out app menu (drawer) — replaces the old top bar ───────────────── */
/* Round teal button — matches the chat send button (.composer-send). */
.app-menu-btn {
  position: fixed; top: 12px; left: 12px; z-index: 60;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal); color: #fff;
  border: none; box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer; transition: background .15s;
}
.app-menu-btn:hover { background: var(--teal-deep); }

#app-drawer-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,0.28); opacity: 0; transition: opacity 0.2s ease;
}
#app-drawer-backdrop.open { opacity: 1; }

.app-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 71;
  width: 300px; max-width: 86vw;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 12px;
  background: var(--surface); border-right: 1px solid var(--border);
  box-shadow: 2px 0 16px rgba(0,0,0,0.16);
  transform: translateX(-100%); transition: transform 0.2s ease;
  overflow-y: auto;
}
.app-drawer.open { transform: translateX(0); }

.drawer-logo { padding: 2px 6px 8px; }
.drawer-logo .logo { height: 34px; width: auto; }
.drawer-mapname { display: flex; flex-direction: column; padding: 2px 8px 10px; }
.drawer-mapname-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.drawer-mapname .title { font-weight: 700; font-size: 15px; color: var(--teal-deep); border-radius: 4px; padding: 1px 4px; margin: -1px -4px; }
/* Click-to-rename affordance, only when a map is loaded (toggled in map_menu.js). */
.drawer-mapname .title.renamable { cursor: text; }
.drawer-mapname .title.renamable:hover { background: #f1f5f9; box-shadow: inset 0 0 0 1px var(--border); }
.drawer-mapname .title[contenteditable="true"] { background: #fff; box-shadow: inset 0 0 0 1px var(--teal); outline: none; cursor: text; white-space: nowrap; overflow: hidden; }

.drawer-section { display: flex; flex-direction: column; }
.drawer-heading { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 8px 8px 4px; }

/* Unlabelled section separator in the drawer (Google-Maps hamburger style):
   a hairline with generous breathing room, no title. Deliberately not a
   .drawer-item — app_menu.js closes the drawer when one of those is clicked. */
.drawer-sep {
  height: 1px;
  margin: 8px 0;
  background: var(--border);
  flex: 0 0 auto;
}

/* ── Collapsible drawer groups (Map / Layers / Settings) ─────────────────── */
.drawer-group { display: flex; flex-direction: column; }
.drawer-group-header {
  display: flex; align-items: center; gap: 7px;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: none;
  font: 600 11px/1.2 "Montserrat", system-ui;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  padding: 10px 8px 5px;
}
.drawer-group-header:hover { color: var(--teal-deep); }
.drawer-group-header:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: 4px; }
/* Caret: a right-pointing triangle, rotated down when the group is expanded. */
.drawer-caret {
  width: 0; height: 0; flex: none;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.15s ease; transform: rotate(90deg);
}
.drawer-group.collapsed .drawer-caret { transform: rotate(0deg); }
.drawer-group-body { display: flex; flex-direction: column; }
.drawer-group.collapsed .drawer-group-body { display: none; }
/* Indent sub-items so they read as nested under the group header. */
.drawer-group-body .drawer-item { padding-left: 18px; }

.drawer-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: 9px 10px; border-radius: 6px; color: var(--text);
  font: inherit; text-decoration: none;
}
/* `display:block` above outranks the UA `[hidden]{display:none}` rule, so the
   hidden attribute alone wouldn't hide the item (see #add-data-btn) — restore
   it explicitly. Same hazard as .command-cards[hidden] and #table-drawer[hidden]. */
.drawer-item[hidden] { display: none; }
.drawer-item:hover, .drawer-item:focus-visible { background: #f1f5f9; color: var(--teal-deep); outline: none; }
.drawer-item:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.55; }
.drawer-item:disabled:hover { background: transparent; color: var(--muted); }
/* Nested sub-action (e.g. "+ Add layer" under "Layers"). */
.drawer-subitem { padding-left: 24px; font-size: 13px; color: var(--teal-deep); }

/* Flat top-level menu buttons (Layers / Legend / Basemaps / Tables / Charts).
   Styled like the group headers so they read as peers of the "Map" menu. */
.drawer-item.drawer-top {
  font: 600 11px/1.2 "Montserrat", system-ui;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  padding: 10px 8px 5px; border-radius: 4px;
}
.drawer-item.drawer-top:hover, .drawer-item.drawer-top:focus-visible { color: var(--teal-deep); background: #f1f5f9; }


/* `margin-top: auto` pins the footer to the bottom of the flex-column
   .app-drawer now that the old `.drawer-spacer` filler div is gone — do not
   "tidy" this back to a fixed value, or the footer floats up under the last
   menu item with a large empty gap below it. */
.drawer-footer { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: auto; }
.drawer-userrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drawer-user { font-size: 13px; font-weight: 600; color: var(--text); padding: 2px 10px; }
.drawer-signout { border: 1px solid var(--red); background: transparent; border-radius: 6px; padding: 4px 12px; cursor: pointer; font: inherit; }
.drawer-lang { display: flex; gap: 6px; padding: 0 6px; }
.drawer-lang-btn {
  flex: 1; padding: 6px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit;
}
.drawer-lang-btn[aria-pressed="true"] { background: var(--teal); color: #fff; border-color: var(--teal); }
.drawer-signout { color: var(--red); }
.drawer-signout:hover { background: #fff1f2; color: var(--red); }

/* Top bar — still used by admin.html (the main app uses the drawer instead, so
   these rules match nothing there). */
#app-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  height: 56px;
}
.header-right { display: flex; align-items: center; gap: 8px; }

/* `.brand` is shared with admin.html's header and the drawer logo. */
.brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--teal-deep); text-decoration: none;
}
.brand .logo { height: 32px; width: auto; }
.brand .title { font-weight: 700; font-size: 16px; letter-spacing: 0.2px; }

.hbtn {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  background: var(--teal); color: #fff; border: 1px solid var(--teal);
}
.hbtn:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.hbtn.ghost { background: transparent; color: var(--teal-deep); }
.hbtn.primary { background: var(--orange); border-color: var(--orange); }
.hbtn.primary:hover { background: #d6800d; border-color: #d6800d; }

/* Settings hub tab bar — injected under #app-header by settings_nav.js on each
   settings page (Layer Reference / Embeddings / MCP Server / Basemaps). */
.settings-tabs {
  position: sticky; top: 56px; z-index: 49;
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.settings-tab {
  font-size: 13px; text-decoration: none;
  padding: 6px 14px; border-radius: 999px;
  color: var(--teal-deep); background: transparent;
  border: 1px solid var(--border);
}
.settings-tab:hover { background: #f1f5f9; }
.settings-tab.active {
  background: var(--teal-deep); color: #fff; border-color: var(--teal-deep);
}

/* Debug-mode toggle. Lives inside the Chat ▾ dropdown (see chat_menu.js).
   Off = neutral; on = pulsing orange dot + bold label, so it's visually
   obvious that every chat question is being captured to disk. The
   `display:flex` here OVERRIDES `.dropdown-menu .dropdown-item { display:block }`
   so the dot and label sit side-by-side instead of stacking. */
#debug-toggle { display: flex; align-items: center; gap: 8px; }
#debug-toggle .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: 0.45;
}
#debug-toggle[aria-pressed="true"] {
  color: var(--orange); font-weight: 600;
}
#debug-toggle[aria-pressed="true"] .dot {
  background: var(--orange);
  opacity: 1;
  animation: debug-pulse 1.2s ease-in-out infinite;
}
@keyframes debug-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.75); }
}
/* Show-thoughts toggle. Lives inside the Chat ▾ dropdown. When pressed
   ("Hide thoughts"), tint teal to signal the alternate state — matches the
   look the inline #chat-header button used to have. */
#cot-toggle[aria-pressed="true"] {
  color: var(--teal-deep); font-weight: 600;
}
/* Destructive menu items (Clear chat). Same layout as a regular
   .dropdown-item but in red — and the hover floods red instead of teal so
   the user can't miss that the action is destructive. */
.dropdown-menu .dropdown-item-danger { color: var(--red); }
.dropdown-menu .dropdown-item-danger:hover,
.dropdown-menu .dropdown-item-danger:focus-visible {
  background: var(--red); color: #fff;
}

/* Toast stack shown bottom-right when debug mode captures a question. */
#debug-toast-host {
  position: fixed; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9999; pointer-events: none;
}
.debug-toast {
  pointer-events: auto;
  background: #1f2937; color: #e5e7eb;
  border: 1px solid #374151; border-left: 3px solid var(--orange);
  border-radius: 6px; padding: 8px 12px;
  font-size: 12px; line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  cursor: pointer; max-width: 480px;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.debug-toast.fade { opacity: 0; transform: translateY(8px); }
.debug-toast-label { font-weight: 600; margin-right: 6px; color: var(--orange); }
.debug-toast-path { font-family: ui-monospace, SFMono-Regular, monospace; word-break: break-all; }

/* ── dropdown menu (Map ▾ in the header) ─────────────────────────────────── */
.dropdown-wrap { position: relative; display: inline-flex; }
.dropdown-wrap .caret { font-size: 10px; margin-left: 4px; opacity: 0.85; }

.dropdown-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  z-index: 60;
  min-width: 200px; margin: 0; padding: 4px 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  font: 13px "Montserrat", system-ui;
}
.dropdown-menu .dropdown-item {
  display: block; width: 100%;
  text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: 7px 14px; color: var(--text);
  font: inherit;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus-visible {
  background: #f1f5f9; color: var(--teal-deep); outline: none;
}
.dropdown-menu .dropdown-item:disabled {
  color: var(--muted); cursor: not-allowed; opacity: 0.55;
}
.dropdown-menu .dropdown-item:disabled:hover {
  background: transparent; color: var(--muted);
}
.dropdown-menu .dropdown-sep {
  list-style: none;
  border-top: 1px solid var(--border);
  margin: 4px 0;
  height: 0;
}

/* ── main layout ────────────────────────────────────────────────────────── */
#app-main {
  display: grid;
  grid-template-columns: 1fr 6px var(--panel-w);
  height: 100vh;
}
#map-pane { position: relative; overflow: hidden; min-width: 0; }
/* `arcgis-map` is a custom element and defaults to `display: inline`, which
   collapses to 0 height. Force it to block and fill the pane completely so
   the map canvas always occupies 100% of its container. */
#map, arcgis-map { display: block; width: 100%; height: 100%; }

/* drag splitter */
#splitter {
  background: var(--border); cursor: col-resize;
  outline: none;
}
#splitter:hover { background: var(--teal); }

/* Chat collapse / expand — a small tab on the map's right edge. */
#chat-toggle {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  z-index: 15;
  width: 18px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; line-height: 1; font-size: 14px;
  background: var(--surface); color: var(--teal-deep);
  border: 1px solid var(--border); border-right: none;
  border-radius: 8px 0 0 8px;
  box-shadow: -1px 0 4px rgba(0, 0, 0, .07);
}
#chat-toggle:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
/* Collapsed: the chat track + splitter go to zero and the map fills the row. */
body.chat-collapsed #app-main { grid-template-columns: 1fr 0 0; }
body.chat-collapsed #splitter, body.chat-collapsed #chat-pane { display: none; }

/* ── chat ───────────────────────────────────────────────────────────────── */
#chat-pane {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--surface);
  /* `min-height: 0` lets the flex children (especially #chat-log) own the
     scroll instead of overflowing the grid track and pushing the body
     taller than the viewport. */
  min-height: 0; min-width: 0;
}
/* Status strip — now under the composer (model name + connection pill). */
#chat-header {
  display: flex; gap: 8px; align-items: center;
  padding: 4px 14px 8px; font-size: 12px;
}
#chat-header .chat-title { font-weight: 600; color: var(--muted); }
/* Right-side control group (cancel button, suggest pill, status pill) hugs the
   right edge; flex gap keeps whatever is visible neatly spaced. */
.chat-header-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
#suggest-questions {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--teal-deep, #0f766e);
  background: #f0fdfa;
  color: var(--teal-deep, #0f766e);
  cursor: pointer;
  white-space: nowrap;
}
#suggest-questions:hover { background: #ccfbf1; }
#turn-cancel {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid #fca5a5;
  background: #fee2e2;
  color: #991b1b;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#turn-cancel:hover { background: #fecaca; }
#turn-cancel:disabled { opacity: 0.6; cursor: default; }
#turn-cancel.urgent { background: #dc2626; color: #fff; border-color: #b91c1c; font-weight: 600; }
#turn-cancel.urgent:hover { background: #b91c1c; }
.pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.pill.green  { background: #dcfce7; color: #166534; }
.pill.amber  { background: #fef3c7; color: #92400e; }
.pill.red    { background: #fee2e2; color: #991b1b; }
.iconbtn {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 4px; padding: 2px 8px; cursor: pointer;
  font-size: 13px; color: var(--muted);
  margin-left: auto;
}
/* (Removed `.clear-chat-btn` and `.cot-toggle-btn` rules — both buttons
   moved into the header-bar Chat ▾ dropdown and now inherit `.dropdown-item`
   styling, with `.dropdown-item-danger` providing the red destructive look
   for Clear chat.) */
#chat-log {
  flex: 1 1 0; min-height: 0;        /* required for overflow inside a flex column */
  overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13.5px;
}
.bubble {
  padding: 8px 12px; border-radius: 8px; max-width: 90%;
  word-wrap: break-word; white-space: pre-wrap;
}
.bubble.user      { background: var(--teal); color: #fff; align-self: flex-end; }
.bubble.assistant { background: #f1f5f9; color: var(--text); }
.bubble.tool      { background: #fef9c3; color: #713f12; font-family: Consolas, monospace; font-size: 12px; }
.bubble.agent     { font-size: 11px; color: var(--muted); align-self: flex-start; }
/* Chain-of-thought: the model's reasoning between tool calls. Default
   hidden via `body[data-show-cot="0"]` — toggled by the "Show thoughts"
   button in #chat-header (see chat.js / cotEnabled). Indented + dashed
   border to read as a sub-comment on the adjacent tool call. */
.bubble.cot {
  align-self: flex-start; max-width: 90%;
  background: #fafaf9; color: #57534e;
  border: 1px dashed #d6d3d1; border-radius: 6px;
  padding: 6px 10px; margin-left: 14px;
  font-size: 12px; font-style: italic;
  white-space: pre-wrap;
}
body[data-show-cot="0"] .bubble.cot { display: none; }
/* "Thinking…" placeholder shown while the AI is composing a reply. */
.bubble.thinking {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-style: italic;
}
.bubble.thinking .spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #cbd5e1; border-top-color: var(--teal);
  animation: cng-spin 0.9s linear infinite;
  display: inline-block;
}
@keyframes cng-spin { to { transform: rotate(360deg); } }
/* Sketch-request bubble — surfaced when the agent calls
   request_user_geometry. Styled like an assistant bubble but with an icon
   + inline Cancel button. Auto-clears on sketch.completed in ws_client.js. */
.bubble.sketch-hint {
  background: #fff7ed; color: #7c2d12;
  border: 1px solid #fdba74;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.bubble.sketch-hint .sketch-hint-icon { font-size: 16px; flex: 0 0 auto; }
.bubble.sketch-hint .sketch-hint-text { flex: 1 1 auto; }
.bubble.sketch-hint .sketch-hint-cancel {
  flex: 0 0 auto; padding: 4px 10px; border-radius: 6px;
  background: #fff; border: 1px solid #fdba74; color: #7c2d12;
  font-size: 11px; cursor: pointer;
}
.bubble.sketch-hint .sketch-hint-cancel:hover { background: #ffedd5; }
#chat-form { border-top: 1px solid var(--border); padding: 10px 12px 12px; }

/* Rounded composer: auto-growing textarea on top, a control bar underneath. */
#composer {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 8px 8px 6px 14px;
  transition: border-color .15s, box-shadow .15s;
}
#composer:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 150, 150, .12); }

/* Composer text + its highlight backdrop share one box. The backdrop sits
   underneath and renders the same text (transparent), drawing a pill only
   behind menu-picked reference tokens; the real textarea is on top. Both MUST
   use identical typography/padding/wrapping or the pills drift off the text. */
#chat-input-wrap { position: relative; width: 100%; }
#chat-input, #chat-input-backdrop {
  font: inherit; line-height: 1.45;
  padding: 4px 2px;
  box-sizing: border-box;
  width: 100%;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
}
#chat-input {
  position: relative;            /* defines the wrap height; sits above backdrop */
  border: none; background: transparent; resize: none;
  max-height: 200px; overflow-y: auto;
}
#chat-input-backdrop {
  position: absolute; inset: 0;
  overflow: hidden;              /* scroll is kept in sync with the textarea via JS */
  color: transparent;            /* only the pills show; text is drawn by the textarea */
  pointer-events: none;
  border: none;
}
#chat-input:focus { outline: none; }
#chat-input::placeholder { color: var(--muted); }

/* Reference pills — background + box-shadow ring only (never padding/border),
   so the highlighted run occupies the exact same width as the plain text and
   stays aligned with the textarea above. */
#chat-input-backdrop .mention-hl {
  border-radius: 5px;
  box-shadow: 0 0 0 2px transparent;   /* spread gives a padded look, no reflow */
}
#chat-input-backdrop .m-layer { background: rgba(0, 150, 150, .20); box-shadow: 0 0 0 2px rgba(0, 150, 150, .20); }
#chat-input-backdrop .m-field { background: rgba(196, 132, 0, .22); box-shadow: 0 0 0 2px rgba(196, 132, 0, .22); }
#chat-input-backdrop .m-value { background: rgba(124, 92, 196, .20); box-shadow: 0 0 0 2px rgba(124, 92, 196, .20); }
#chat-input-backdrop .m-rs    { background: rgba(120, 120, 120, .22); box-shadow: 0 0 0 2px rgba(120, 120, 120, .22); }

#composer-bar { display: flex; align-items: center; gap: 6px; }
.composer-spacer { flex: 1 1 auto; }

/* Round icon buttons in the bar. */
.composer-icon, .composer-send {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; padding: 0;
}
.composer-icon { border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.composer-icon:hover { color: var(--teal-deep); border-color: var(--teal); }

.composer-send { border: none; background: var(--teal); color: #fff; transition: background .15s, opacity .15s; }
.composer-send:hover:not(:disabled) { background: var(--teal-deep); }
.composer-send:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }

.composer-stop {
  flex: 0 0 auto; font: inherit; font-size: 12px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}
.composer-stop:hover { border-color: var(--red); color: var(--red); }

/* Slash-command autocomplete. Floats just above the composer (which is
   position:relative). Built + driven by slash_commands.js. */
.slash-menu {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  max-height: 280px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .16);
  padding: 4px;
}
.slash-item {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%; text-align: left;
  font: inherit; cursor: pointer;
  border: none; background: transparent; color: var(--text);
  padding: 7px 10px; border-radius: 8px;
}
.slash-item:hover, .slash-item.active { background: rgba(27, 167, 166, .12); }
.slash-item.disabled { cursor: default; opacity: .6; }
.slash-item.disabled:hover { background: transparent; }
.slash-item.disabled .slash-item-label { color: var(--muted); font-weight: 400; font-style: italic; }
.slash-item-label { flex: 0 0 auto; font-weight: 600; color: var(--teal-deep); }
.slash-item-detail {
  flex: 1 1 auto; min-width: 0;
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* "/commands" card palette — verb-first command browser anchored above the
   composer (see webmap/command_cards.js). Wider/taller than the slash menu. */
.command-cards {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% + 8px);
  z-index: 45;
  max-height: 60vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
}
/* `display:flex` above outranks the UA `[hidden]{display:none}` rule, so the
   hidden attribute alone wouldn't hide the panel — restore it explicitly. */
.command-cards[hidden] { display: none; }
.command-cards .cc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.command-cards .cc-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); flex: 0 0 auto;
}
.command-cards .cc-filter {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 13px;
  padding: 5px 9px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text);
}
.command-cards .cc-filter:focus { outline: none; border-color: var(--teal); }
.command-cards .cc-close {
  flex: 0 0 auto;
  font: inherit; font-size: 13px; line-height: 1;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.command-cards .cc-close:hover { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.command-cards .cc-body { overflow-y: auto; padding: 8px 10px 10px; }
.command-cards .cc-empty { color: var(--muted); font-size: 13px; padding: 12px 4px; }

/* Group-chip row (5 top-level groups + All) above the command cards. */
.command-cards .cc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.command-cards .cc-chip {
  padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
}
.command-cards .cc-chip:hover { background: #f1f5f9; border-color: var(--teal); }
.command-cards .cc-chip.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.command-cards .cc-group { margin-bottom: 10px; }
.command-cards .cc-group-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 4px 2px 6px;
}
.command-cards .cc-grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.command-cards .cc-card {
  display: grid;
  grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 8px; row-gap: 2px;
  text-align: left; cursor: pointer;
  font: inherit; color: var(--text);
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid var(--border); border-radius: 9px;
}
.command-cards .cc-card:hover { background: rgba(27, 167, 166, .12); border-color: var(--teal); }
.command-cards .cc-icon { grid-row: 1 / 3; align-self: center; font-size: 18px; line-height: 1; }
.command-cards .cc-card-name { font-weight: 600; font-size: 13px; color: var(--teal-deep); }
.command-cards .cc-card-desc {
  font-size: 11px; color: var(--muted); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Wizard bubbles — the inline conversational form the /commands cards launch
   (see webmap/wizard.js). They live in #chat-log alongside normal bubbles. */
.bubble.wizard {
  border: 1px solid var(--border); border-radius: 10px;
  background: #f8fafc; padding: 8px 10px; margin: 4px 0;
  max-width: 100%;
}
.bubble.wizard.wiz-head {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(27, 167, 166, .10); border-color: var(--teal);
  font-weight: 600; color: var(--teal-deep);
}
.bubble.wizard .wiz-cancel {
  font: inherit; line-height: 1; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.bubble.wizard .wiz-cancel:hover { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.bubble.wizard.wiz-note { color: var(--muted); font-size: 12px; font-style: italic; }
.bubble.wizard.wiz-progress {
  color: var(--teal-deep); font-size: 13px;
  background: rgba(27, 167, 166, .08); border-color: var(--teal);
  animation: wiz-pulse 1.2s ease-in-out infinite;
}
@keyframes wiz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.bubble.wizard.wiz-warn { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.bubble.wizard .wiz-prompt { font-size: 13px; margin-bottom: 6px; color: var(--text); }

/* Collapsed recap line after a step is answered. */
.bubble.wizard.wiz-done { display: flex; gap: 8px; align-items: baseline; background: var(--surface); }
.bubble.wizard .wiz-recap-k { font-size: 12px; color: var(--muted); }
.bubble.wizard .wiz-recap-v { font-weight: 600; color: var(--teal-deep); }
.bubble.wizard .wiz-recap-v::after { content: " ✓"; color: var(--teal); font-weight: 400; }

/* Layer / field / option pick lists. */
.bubble.wizard .wiz-layers, .bubble.wizard .wiz-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.bubble.wizard .wiz-options { display: flex; flex-direction: column; gap: 6px; }
.bubble.wizard .wiz-layer, .bubble.wizard .wiz-field {
  font: inherit; font-size: 12px; cursor: pointer;
  padding: 5px 10px; border-radius: 999px;
  background: #f1f5f9; color: var(--teal-deep);
  border: 1px solid var(--border);
}
.bubble.wizard .wiz-layer:hover, .bubble.wizard .wiz-field:hover { background: #e2e8f0; border-color: var(--teal-deep); }
.bubble.wizard .wiz-layer.wiz-active { border-color: var(--teal-deep); background: rgba(27, 167, 166, .14); }
.bubble.wizard .wiz-active-badge {
  margin-left: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 999px; background: var(--teal); color: #fff; vertical-align: middle;
}
.bubble.wizard .wiz-toggle.on { background: var(--teal); color: #fff; border-color: var(--teal-deep); }
.bubble.wizard .wiz-toggle.on::before { content: "✓ "; }
.bubble.wizard .wiz-skip { font-style: italic; color: var(--muted); }
.bubble.wizard .wiz-multi { margin-bottom: 8px; }
.bubble.wizard .wiz-option {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  font: inherit; cursor: pointer;
  padding: 7px 10px; border-radius: 8px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
}
.bubble.wizard .wiz-option:hover { background: rgba(27, 167, 166, .10); border-color: var(--teal); }
.bubble.wizard .wiz-option-top { font-weight: 600; font-size: 13px; color: var(--teal-deep); }
.bubble.wizard .wiz-option-desc { font-size: 11px; color: var(--muted); }

/* Inline value entry (number+unit, free text). */
.bubble.wizard .wiz-inline { display: flex; gap: 6px; align-items: center; }
.bubble.wizard .wiz-input {
  font: inherit; font-size: 13px; padding: 5px 9px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); width: 90px;
}
.bubble.wizard .wiz-input.wiz-grow { flex: 1 1 auto; width: auto; }
.bubble.wizard .wiz-input.wiz-bad { border-color: #fca5a5; background: #fef2f2; }
.bubble.wizard .wiz-unit {
  font: inherit; font-size: 13px; padding: 5px 6px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text);
}
.bubble.wizard .wiz-ok {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 14px; border-radius: 7px;
  background: var(--teal); color: #fff; border: 1px solid var(--teal-deep);
}
.bubble.wizard .wiz-ok:hover { background: var(--teal-deep); }

/* SQL where-builder (§1d) */
.bubble.wizard .wiz-where { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.bubble.wizard .wiz-where-rows { display: flex; flex-direction: column; gap: 5px; }
.bubble.wizard .wiz-where-row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.bubble.wizard .wiz-where-row select, .bubble.wizard .wiz-where-row input {
  font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
.bubble.wizard .wiz-where-field { max-width: 150px; }
.bubble.wizard .wiz-where-val, .bubble.wizard .wiz-where-val2 { flex: 1 1 90px; min-width: 70px; }
.bubble.wizard .wiz-where-del {
  border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px;
}
.bubble.wizard .wiz-where-del:hover { color: var(--red); }
.bubble.wizard .wiz-where-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.bubble.wizard .wiz-where-add {
  font: inherit; font-size: 12px; cursor: pointer; padding: 3px 9px; border-radius: 6px;
  background: #f1f5f9; border: 1px solid var(--border); color: var(--teal-deep);
}
.bubble.wizard .wiz-where-join select { font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid var(--border); border-radius: 5px; }
.bubble.wizard .wiz-where-ci { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.bubble.wizard .wiz-where-err { color: var(--red); font-size: 12px; }
.bubble.wizard .wiz-where-apply { align-self: flex-start; }

/* Upward-opening variant of the shared dropdown (composer sits at the bottom). */
.dropdown-menu.dropdown-up { top: auto; bottom: calc(100% + 6px); }

/* "Model" section inside the chat menu. */
.dropdown-menu .dropdown-heading {
  list-style: none; padding: 6px 14px 2px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
/* LLM model switcher items in the chat ☰ menu (one per provider; active checked). */
#chat-model-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.dropdown-menu .model-item { display: flex; align-items: center; gap: 8px; }
.dropdown-menu .model-item .model-check { flex: 0 0 14px; width: 14px; color: var(--teal); text-align: center; }
.dropdown-menu .model-item[aria-checked="true"] { color: var(--teal-deep); font-weight: 600; }

/* A provider row = the radio (model-item) + its API-key badge button. */
.dropdown-menu .model-row { display: flex; align-items: center; }
.dropdown-menu .model-row .model-item { flex: 1 1 auto; min-width: 0; }
.dropdown-menu .model-row .model-item .model-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-key-badge {
  flex: 0 0 auto; margin-right: 8px; padding: 2px 6px;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; line-height: 1.2; cursor: pointer; color: var(--muted);
}
.model-key-badge:hover, .model-key-badge:focus-visible { background: #f1f5f9; border-color: var(--teal); }
.model-key-badge.no-key { color: var(--orange); border-color: var(--orange); }
.model-key-badge.has-key { color: var(--teal); }

/* Inline key editor row injected under a provider when adding/changing a key. */
.model-key-editor { padding: 6px 12px 10px 30px; }
.model-key-editor .key-editor-row { display: flex; align-items: center; gap: 6px; }
.model-key-editor .key-input {
  flex: 1 1 auto; min-width: 0; padding: 5px 7px; font: inherit; font-size: 12px;
  border: 1px solid var(--border); border-radius: 4px;
}
.model-key-editor .key-input:focus { outline: none; border-color: var(--teal); }
.model-key-editor .key-btn {
  flex: 0 0 auto; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
}
.model-key-editor .key-btn.primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.model-key-editor .key-btn:hover { filter: brightness(0.97); }
.model-key-editor .key-status { display: block; margin-top: 4px; min-height: 14px; }

/* The "Manage API keys…" footer item — a quieter sub-action. */
.dropdown-menu .dropdown-item-sub { color: var(--muted); font-size: 12px; }

/* Starter-prompts row above the chat input. Visible until first send;
   then hidden via [hidden]. Chips wrap on narrow chat-panel widths. */
.chat-starters {
  border-top: 1px solid var(--border);
  padding: 8px 8px 0 8px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.chat-starters-label {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; margin-right: 4px;
}
.chat-starter {
  font: inherit; font-size: 12px;
  padding: 4px 10px;
  background: #f1f5f9; color: var(--teal-deep);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
  line-height: 1.3;
}
.chat-starter:hover { background: #e2e8f0; border-color: var(--teal-deep); }
/* Dismiss-all "×" at the end of the starter row. */
.chat-starters-dismiss {
  font: inherit; font-size: 13px; line-height: 1;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin-left: 2px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
}
.chat-starters-dismiss:hover { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* ── floating map controls ──────────────────────────────────────────────── */
/* Top-right vertical toolbar. Starts at top:60 so it clears the top edge; the
   left half of the map stays clean for content. (The map search box was removed
   — geocoding now lives in the chat composer via "/search.address".) */
.map-controls {
  position: absolute; top: 60px; right: 12px; z-index: 10;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.ctrl {
  position: relative;
  width: 36px; height: 36px;
  border: none; background: transparent; cursor: pointer;
  font-size: 18px; color: var(--teal-deep);
}
.ctrl:hover { background: #f1f5f9; }
.ctrl:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

/* Custom hover tooltip for map-control buttons. Instant (no native ~700ms
   delay), readable. The toolbar lives at the RIGHT edge of the map pane so
   the tooltip flies out to the LEFT of each button — pointing right with the
   arrow on its right side. Activated by `data-tip="…"` in index.html. */
.ctrl[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  background: var(--teal-deep); color: #fff;
  font: 500 12px/1.2 "Montserrat", system-ui;
  padding: 5px 9px; border-radius: 4px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s ease-in 0.05s;
  z-index: 30;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.ctrl[data-tip]::before {
  content: "";
  position: absolute;
  right: calc(100% + 2px); top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--teal-deep);
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s ease-in 0.05s;
  z-index: 30;
}
.ctrl:hover[data-tip]::after,
.ctrl:focus-visible[data-tip]::after,
.ctrl:hover[data-tip]::before,
.ctrl:focus-visible[data-tip]::before { opacity: 1; }

/* ── Esri widgets mounted as map-pane chrome ─────────────────────────────── */
/* All three of these are siblings of <arcgis-map> inside #map-pane, not
   slotted via the v5 SDK's `position` attribute (which silently falls back to
   the top-left default slot when it can't resolve "top-right"/"bottom-right").
   We pin them ourselves so they always land where we expect. */

/* Legend — pinned top-right, directly under the vertical toolbar. The toolbar
   (#map-controls) starts at top:60 and now holds 6 × 36px buttons (≈238px tall
   incl. border), so the legend starts at ~306px. Update this if the toolbar's
   button count changes. Toggled from the drawer's "Legend" item. */
/* Legend lives in a draggable .float-panel (built in legend.js from each
   layer's renderer def). Opens pinned top-right under the toolbar; draggable. */
#legend-panel { top: 306px; right: 12px; width: 260px; }
#legend-panel .legend-body {
  display: block;
  max-height: calc(70vh - 48px);
  overflow: auto;
  padding: 6px 10px 10px;
}
.lg-empty { color: var(--muted); font-size: 12px; padding: 6px 2px; line-height: 1.4; }
.lg-layer { padding: 6px 0; }
.lg-layer + .lg-layer { border-top: 1px solid var(--border); }
.lg-layer-title {
  font-weight: 600; font-size: 12.5px; color: var(--text);
  margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lg-sub {
  font-size: 11px; color: var(--muted); margin: -2px 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lg-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.lg-label {
  font-size: 12px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lg-note { font-size: 11px; color: var(--muted); margin-top: 4px; font-style: italic; }
/* swatches — 16×16 band, shape by class */
.lg-swatch {
  flex: 0 0 auto; width: 16px; height: 16px; display: inline-flex;
  align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid transparent; border-radius: 3px;
}
.lg-swatch.lg-marker, .lg-swatch.lg-dot { border-radius: 50%; border-color: #fff; }
.lg-swatch.lg-line { border: none; }
.lg-linebar { display: block; width: 16px; height: 3px; border-radius: 2px; }
.lg-img { max-width: 16px; max-height: 16px; object-fit: contain; }

/* Filter popup — reuses the .meta-dialog modal shell; just give the WHERE
   builder some breathing room. */
.filter-dialog { width: 460px; }
.filter-dialog .filter-where { margin-top: 4px; }

/* Compass — bottom-right, above the scale bar. */
#esri-compass {
  position: absolute;
  bottom: 56px; right: 12px;
  z-index: 11;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}

/* Scale bar — bottom-right, below the compass. */
#esri-scale-bar {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 11;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.18));
}

/* ── floating panels (basemap / layer) ─────────────────────────────────── */
/* Anchored to the LEFT of the toolbar (which lives at right:12 + ~36px wide
   ≈ 56px from the right edge). Aligned vertically with the toolbar so the
   panel and its launching button share the same horizontal band. */
.float-panel {
  position: absolute; top: 60px; right: 60px; z-index: 11;
  width: 300px; max-height: 70%; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  font-size: 13px;
}
.float-panel header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
/* Draggable panels: the header is the grab handle (buttons/tabs stay clickable). */
.float-panel header.drag-handle,
.float-panel .rw-head.drag-handle { cursor: move; user-select: none; }
.float-panel header.drag-handle button,
.float-panel .rw-head.drag-handle button { cursor: pointer; }
.float-panel header h4 { margin: 0; font-size: 14px; color: var(--teal-deep); }
.float-panel header .tabs {
  display: flex; gap: 4px; margin-left: 8px;
}
.float-panel header .tabs .tab {
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 10px; font: inherit; font-size: 11px;
  color: var(--muted); cursor: pointer;
}
.float-panel header .tabs .tab.active {
  background: var(--teal-deep); color: #fff; border-color: var(--teal-deep);
}
#esri-layer-list-host {
  padding: 8px; min-height: 180px;
}
#esri-layer-list-host arcgis-layer-list { display: block; }
.float-panel header .close {
  background: transparent; border: none; cursor: pointer; font-size: 16px; color: var(--muted);
}
/* (+) add button in a panel header — sits just left of the close (✕). */
.float-panel header .panel-head-spacer { flex: 1 1 auto; }
.float-panel header .panel-add {
  margin-left: auto;
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--muted); padding: 0 4px;
}
.float-panel header .panel-add:hover, .float-panel header .panel-add:focus-visible {
  color: var(--teal-deep); outline: none;
}
.float-panel header .panel-add + .close { margin-left: 2px; }

/* Chart wizard dialog — reuses the meta/save dialog look. */
dialog.chart-wizard-dialog { width: 380px; border: none; border-radius: 12px; padding: 0;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28); }
.chart-wizard-dialog::backdrop { background: rgba(15, 23, 42, 0.35); }
.chart-wizard-dialog .cw-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px;
  font: 13px system-ui; }
.chart-wizard-dialog .cw-body label { display: flex; flex-direction: column; gap: 4px;
  font-weight: 600; color: var(--text); }
.chart-wizard-dialog .cw-body label small { font-weight: 400; color: var(--muted); }
.chart-wizard-dialog .cw-body select, .chart-wizard-dialog .cw-body input {
  font: inherit; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.chart-wizard-dialog .cw-error { color: var(--red); margin: 0; font-weight: 500; }
.chart-wizard-dialog .cw-menu { display: flex; justify-content: flex-end; gap: 6px;
  padding: 0 18px 16px; margin: 0; }
.chart-wizard-dialog .cw-menu button {
  font: inherit; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border);
  background: #fff; color: var(--text); cursor: pointer; }
.chart-wizard-dialog .cw-menu button.primary {
  background: var(--orange); color: #fff; border-color: var(--orange); }
.chart-wizard-dialog .cw-menu button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Floating result windows (tables + charts) — replaced the docked bottom drawer.
   Draggable by the header (.rw-head), resizable from the bottom-right corner. */
.result-window {
  width: 480px; height: 440px; max-height: 88vh; max-width: 92vw;
  overflow: hidden; display: none; flex-direction: column; resize: both; z-index: 12;
}
.result-window:not([hidden]) { display: flex; }
.result-window .rw-head { cursor: move; flex: 0 0 auto; }
.result-window .rw-title {
  margin: 0; font-size: 14px; color: var(--teal-deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.result-window .rw-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.result-window .rw-body > cng-feature-table,
.result-window .rw-body > cng-chart { display: block; height: 100%; }
/* "+ Add" button inside the Layers panel header (relocated from the top bar). */
.layer-panel-add {
  font: 12px "Montserrat", system-ui;
  padding: 3px 10px; border-radius: 4px; cursor: pointer;
  background: var(--teal); color: #fff; border: 1px solid var(--teal);
  margin-left: 6px;
}
.layer-panel-add:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
#basemap-list, #layer-list { padding: 8px; margin: 0; list-style: none; }
.basemap-item {
  padding: 6px 8px; border-radius: 4px; cursor: pointer;
  display: flex; gap: 8px; align-items: center;
}
.basemap-item:hover { background: #f1f5f9; }
.basemap-item.active { background: var(--teal); color: #fff; }
.layer-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px; user-select: none;
}
.layer-item .drag    { cursor: grab; color: var(--muted); }
/* Per-row legend swatch was removed — symbol previews live in the dedicated
   Legend panel (toggle from the `⌬` toolbar button). */
.layer-item .title   { flex: 1; cursor: pointer; }
.layer-item input[type=checkbox] { accent-color: var(--teal); }
/* WS4.11 — per-row "in scope for the question" toggle (✦ + checkbox), distinct
   from the left visibility checkbox; brightens when checked. */
.layer-item .scope-box { display: inline-flex; align-items: center; gap: 2px;
  flex: 0 0 auto; cursor: pointer; color: var(--muted); opacity: .5; font-size: 12px; }
.layer-item .scope-box:hover { opacity: .85; }
.layer-item:has(.scope-cb:checked) .scope-box { opacity: 1; color: var(--teal-deep); font-weight: 600; }
.layer-item .scope-cb { accent-color: var(--teal-deep); }
/* Layer-vs-table type glyph before the title. */
.layer-item .layer-type-icon { flex: 0 0 auto; display: inline-flex; align-items: center;
  color: var(--teal-deep); opacity: .6; }
/* Show/hide-table eye toggle (table rows; sits where the checkbox is for layers). */
.layer-item .tbl-eye { flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  padding: 1px 3px; border-radius: 4px; color: var(--muted); display: inline-flex; align-items: center; }
.layer-item .tbl-eye:hover { background: #f1f5f9; color: var(--teal-deep); }
.layer-item .tbl-eye.on { color: var(--teal); opacity: 1; }
/* Active layer — clicking the name toggles it; the default subject for the LLM
   and layer-less tools. Tinted row + accent bar, title emphasised. */
.layer-item.active { background: rgba(27, 167, 166, .14); box-shadow: inset 3px 0 0 var(--teal-deep); }
.layer-item.active .title { color: var(--teal-deep); font-weight: 600; }
.layer-item .ti {
  width: 14px; display: inline-block; text-align: center;
  font-size: 12px; color: var(--teal-deep); opacity: 0.7;
}
.layer-item[data-layer-type="table"] { cursor: pointer; }
.layer-item[data-layer-type="table"]:hover { background: #f1f5f9; }
.layer-item.dragging { opacity: 0.55; }
.layer-item .row-menu {
  margin-left: auto; border: none; background: transparent;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
  color: var(--muted); font-size: 16px; line-height: 1;
}
.layer-item .row-menu:hover { background: #f1f5f9; color: var(--teal-deep); }

/* ── layer context menu ─────────────────────────────────────────────────── */
.ctx-menu {
  position: fixed; z-index: 80; min-width: 200px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 6px 0;
  font: 13px "Montserrat", system-ui;
}
.ctx-menu button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: 6px 14px; color: var(--text);
  font: inherit;
}
.ctx-menu button:hover:not(.disabled) { background: #f1f5f9; color: var(--teal-deep); }
.ctx-menu button.disabled { color: var(--muted); cursor: not-allowed; }
.ctx-menu button.danger   { color: var(--red); }
.ctx-menu button.danger:hover { background: #fee2e2; color: var(--red); }
.ctx-menu hr {
  border: none; border-top: 1px solid var(--border); margin: 4px 0;
}
.ctx-menu.opacity-pop {
  padding: 10px 14px; min-width: 220px;
}
.ctx-menu.opacity-pop label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--teal-deep); margin-bottom: 6px;
}
.ctx-menu.opacity-pop .val { color: var(--muted); font-weight: 600; }
.ctx-menu.opacity-pop input[type=range] { width: 100%; accent-color: var(--teal); }

/* ── metadata dialog ────────────────────────────────────────────────────── */
dialog.meta-dialog {
  width: 460px; max-width: 90%; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.meta-dialog form { padding: 20px; display: flex; flex-direction: column; gap: 8px; font: 13px system-ui; }
.meta-dialog h3 { margin: 0 0 4px; color: var(--teal-deep); font-size: 15px; }
.meta-dialog h3 small { color: var(--muted); font-weight: 400; }
/* Title row with a corner dismiss — the footer Close button stays as well. */
.meta-dialog .meta-head { display: flex; align-items: flex-start; gap: 12px; }
.meta-dialog .meta-head h3 { flex: 1; min-width: 0; }
.meta-dialog button.meta-close {
  flex: none; margin: -6px -6px 0 0; padding: 2px 8px;
  font-size: 18px; line-height: 1.1; color: var(--muted);
  background: transparent; border-color: transparent;
}
.meta-dialog button.meta-close:hover { background: #f1f5f9; color: var(--text); }
.meta-dialog .meta-row { margin: 4px 0; word-break: break-word; }
.meta-dialog .meta-row .muted { color: var(--muted); font-size: 12px; font-family: Consolas, monospace; }
.meta-dialog .meta-link { color: var(--teal-deep); font-size: 12px; font-family: Consolas, monospace; word-break: break-all; }
.meta-dialog .meta-fields {
  margin: 4px 0 8px; padding: 8px 12px;
  background: #f8fafc; border: 1px solid var(--border); border-radius: 6px;
  font-family: Consolas, monospace; font-size: 12px;
  max-height: 200px; overflow: auto;
  list-style: none;
}
.meta-dialog .meta-fields li { padding: 2px 0; }
.meta-dialog .meta-fields small { color: var(--muted); margin-left: 6px; }
.meta-dialog menu { display: flex; justify-content: flex-end; padding: 0; margin: 8px 0 0; gap: 6px; }

/* Manage-fields modal — checkbox list + bulk-toggle buttons. */
dialog.manage-fields-dialog { width: 540px; }
.manage-fields-dialog .manage-fields-actions { display: flex; gap: 6px; margin: 0 0 4px; }
.manage-fields-dialog .manage-fields-actions .hbtn { font-size: 12px; padding: 4px 10px; }
.manage-fields-list { max-height: 380px; padding: 8px 14px; }
.manage-fields-list li { display: block; padding: 3px 0; }
.manage-fields-list label { display: flex; align-items: baseline; gap: 8px; cursor: pointer; user-select: none; }
.manage-fields-list label:hover { background: #eef2f7; }
.manage-fields-list input[type="checkbox"] { margin: 0; }
.manage-fields-list code { font-family: Consolas, monospace; font-size: 12px; }
.manage-fields-list .muted { color: var(--muted); font-size: 11px; font-family: system-ui; }
.meta-dialog button {
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); font: inherit;
}
.meta-dialog button.primary { background: var(--orange); color: #fff; border-color: var(--orange); }

/* ── chart panel ────────────────────────────────────────────────────────── */
#chart-panel {
  position: absolute; bottom: 12px; right: 12px;
  width: 360px; height: 240px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  padding: 8px;
}

/* ── save-map dialog ────────────────────────────────────────────────────── */
dialog#save-map-dialog, dialog#map-properties-dialog {
  width: 480px; max-width: 90%; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
#save-map-dialog form, #map-properties-dialog form { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
#save-map-dialog h3, #map-properties-dialog h3 { margin: 0; color: var(--teal-deep); }
#save-map-dialog label, #map-properties-dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
#save-map-dialog small, #map-properties-dialog small { color: var(--muted); font-weight: 400; }
#save-map-dialog input, #save-map-dialog textarea,
#map-properties-dialog input, #map-properties-dialog textarea {
  padding: 8px; border: 1px solid var(--border); border-radius: 4px; font: inherit;
}
#save-map-dialog menu, #map-properties-dialog menu {
  display: flex; gap: 8px; justify-content: flex-end; margin: 0; padding: 0;
}
#save-map-dialog button, #map-properties-dialog button {
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); font: inherit;
}
#save-map-dialog button.primary, #map-properties-dialog button.primary { background: var(--orange); color: #fff; border-color: var(--orange); }
#map-properties-dialog .map-properties-error { color: var(--danger, #c0392b); font-size: 12px; }

/* ── attribute table drawer (bottom of the map pane) ────────────────────── */
#table-drawer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 12;
  /* Height is user-resizable via #table-drawer-resize; persisted in localStorage. */
  height: var(--table-drawer-h, 38vh); min-height: 160px; max-height: 85vh;
  background: var(--surface); border-top: 2px solid var(--teal);
  box-shadow: 0 -6px 18px rgba(0,0,0,0.10);
  flex-direction: column;
}
#table-drawer:not([hidden]) { display: flex; }
#table-drawer[hidden] { display: none; }
/* Drag grip along the top edge — resizes the drawer height. */
#table-drawer-resize {
  flex: 0 0 auto; height: 8px; cursor: ns-resize; background: #f1f5f9;
  border-bottom: 1px solid var(--border); position: relative;
}
#table-drawer-resize::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 3px; border-radius: 2px; background: #cbd5e1;
}
#table-drawer-resize:hover::before, #table-drawer-resize:focus-visible::before { background: var(--teal); }
#table-drawer-body { flex: 1; min-height: 0; overflow: hidden; }
#table-drawer-body > * { display: block; height: 100%; }
/* While dragging the vertical panel splitter, skip laying out the (heavy)
   FeatureTable each frame — the map width is changing, not the table's content.
   The drawer keeps its box (fixed height), so nothing collapses; the table
   re-renders once on pointer release. */
body.resizing-panel #table-drawer-body { content-visibility: hidden; }

/* ── open-map dialog (list of saved maps) ───────────────────────────────── */
dialog#open-map-dialog {
  width: 640px; max-width: 92%; max-height: 80vh; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  overflow: hidden;
}
#open-map-dialog form {
  display: flex; flex-direction: column;
  max-height: 80vh;
}
#open-map-dialog .dlg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
#open-map-dialog h3 { margin: 0; color: var(--teal-deep); font-size: 16px; }
#open-map-dialog .dlg-x {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; color: var(--muted); padding: 2px 6px; border-radius: 4px;
}
#open-map-dialog .dlg-x:hover { background: #f1f5f9; color: var(--teal-deep); }
#open-map-dialog .dlg-help {
  margin: 12px 20px 0; font-size: 12px; color: var(--muted); line-height: 1.5;
}
#open-map-dialog .dlg-help code {
  background: #f1f5f9; padding: 1px 4px; border-radius: 3px;
  font-family: Consolas, monospace; font-size: 11.5px;
}
#open-map-dialog .map-list {
  padding: 12px 20px; overflow-y: auto;
  flex: 1; min-height: 120px;
  display: flex; flex-direction: column; gap: 8px;
}
#open-map-dialog menu {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 20px; margin: 0;
  border-top: 1px solid var(--border); background: #f8fafc;
}
#open-map-dialog menu button {
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); font: inherit;
}

/* Map cards inside the dialog. */
.map-list-loading, .map-list-empty, .map-list-error {
  padding: 28px 12px; text-align: center; color: var(--muted); font-size: 13px;
}
.map-list-empty p     { margin: 4px 0; }
.map-list-empty .muted { color: var(--muted); font-size: 12px; }
.map-list-error       { color: var(--red); }

.map-card {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; background: var(--surface);
  cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s;
  display: flex; flex-direction: column; gap: 6px;
}
.map-card:hover, .map-card:focus-visible {
  border-color: var(--teal); box-shadow: 0 2px 8px rgba(27,167,166,0.12);
  outline: none;
}
.map-card header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.map-card h4 { margin: 0; font-size: 14px; color: var(--teal-deep); }
.map-card-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }
.map-card-desc { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.45; }
.map-card-kw   { display: flex; flex-wrap: wrap; gap: 4px; }
.map-card-kw span {
  font-size: 10.5px; padding: 1px 6px; border-radius: 999px;
  background: #f1f5f9; color: var(--muted);
}
.map-card footer {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.map-card footer .spacer { flex: 1; }
.map-card-slug { font: 11px Consolas, monospace; color: var(--muted); }
.map-card-open, .map-card-del {
  font: 12px inherit; padding: 4px 10px; border-radius: 4px; cursor: pointer;
}
.map-card-open {
  background: var(--teal); color: #fff; border: 1px solid var(--teal);
}
.map-card-open:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
/* Destructive action lives on its own row, below and away from "Open →", so a
   mis-aimed click can't delete a map. Quiet until hovered. */
.map-card-danger {
  display: flex; justify-content: flex-end;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}
.map-card-del {
  font-size: 11.5px; padding: 3px 9px;
  background: transparent; color: var(--muted); border: 1px solid transparent;
}
.map-card-del:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ── add-layer dialog (mirrors save-map dialog) ─────────────────────────── */
dialog#add-layer-dialog {
  width: 460px; max-width: 90%; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
/* Horizontal inset lives on .add-layer-section (below), not here, so both
   sibling sections — the catalog list and this URL form — share the same
   left/right inset instead of only the form's contents being indented. */
#add-layer-dialog form { display: flex; flex-direction: column; gap: 12px; }
/* Dialog padding is 0 (see below), so the stacked header needs its own inset
   to line up with .add-layer-section's 20px — otherwise the close button and
   title sit flush against the border while the sections beneath are indented. */
#add-layer-dialog .dlg-head { padding: 14px 20px 0; }
#add-layer-dialog h3 { margin: 0; color: var(--teal-deep); }
#add-layer-dialog .dlg-help { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
#add-layer-dialog .dlg-help code {
  background: #f1f5f9; padding: 1px 4px; border-radius: 3px;
  font-family: Consolas, monospace; font-size: 11.5px;
}
#add-layer-dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--teal-deep); }
#add-layer-dialog small { color: var(--muted); font-weight: 400; }
#add-layer-dialog input, #add-layer-dialog select {
  padding: 8px; border: 1px solid var(--border); border-radius: 4px; font: inherit; background: #fff;
}
#add-layer-dialog menu {
  display: flex; gap: 8px; justify-content: flex-end; margin: 0; padding: 0;
}
#add-layer-dialog button {
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); font: inherit;
}
#add-layer-dialog button.primary { background: var(--orange); color: #fff; border-color: var(--orange); }
#add-layer-dialog .add-layer-error {
  margin: 0; padding: 8px 10px; border-radius: 4px;
  background: #fee2e2; color: var(--red); font-size: 12px;
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 800px) {
  #app-main { grid-template-columns: 1fr; }
  #splitter, #chat-pane, #chat-toggle { display: none; }
  #table-drawer { height: 50vh; }
}

/* ── add-layer catalog picker ───────────────────────────────────────────── */
.add-layer-search { width: 100%; box-sizing: border-box; margin: .25rem 0 .5rem; padding: .45rem .6rem; }
.catalog-list { list-style: none; margin: 0 0 .5rem; padding: 0; max-height: 320px; overflow: auto;
  border: 1px solid rgba(0,0,0,.1); border-radius: 8px; }
.catalog-list:empty { display: none; }
.catalog-item { display: flex; flex-direction: row; align-items: center; gap: .55rem;
  width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid rgba(0,0,0,.06); padding: .5rem .7rem; cursor: pointer; font: inherit; }
.catalog-item:last-child { border-bottom: 0; }
.catalog-item:hover, .catalog-item:focus-visible { background: rgba(0,0,0,.05); }
.catalog-type-icon { flex: 0 0 auto; display: inline-flex; align-items: center; opacity: .65; }
.catalog-text { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 0; }
.catalog-title { font-weight: 600; }
.catalog-id { font-size: .78rem; opacity: .6; }
.catalog-empty { list-style: none; padding: .6rem .7rem; opacity: .7; font-size: .88rem; }
/* Close control sits on its own row above the title, per the panel spec. */
.dlg-head-stacked { display: block; }
.dlg-head-stacked .dlg-x { float: right; }
.dlg-head-stacked h3 { clear: both; margin: 4px 0 0; }

/* The two add paths are peers — same heading weight, same spacing. Neither is
   a subordinate fallback of the other. Horizontal padding lives here (not on
   #add-layer-dialog form, above) so the catalog section's heading/search/list
   get the same 20px inset that used to apply only to the URL form's fields —
   previously the catalog content sat flush at x=0 while the form's did not. */
.add-layer-section { margin-top: 18px; padding: 0 20px; }
/* Bottom padding only on the last section, replacing the 20px the URL form
   used to contribute on its own — the first (catalog) section's bottom
   spacing to its sibling stays the plain 18px margin-top above. */
.add-layer-section:last-of-type { padding-bottom: 20px; }
.add-layer-section h4 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }

/* ── Demo build ─────────────────────────────────────────────────────────────
   Only active when demo.js adds body.demo-edition. Locked features are greyed
   (not hidden) per the design — visibly present but inert. */
.demo-locked {
  opacity: .4;
  pointer-events: none;
  cursor: not-allowed;
  position: relative;
}
.demo-locked::after {
  /* small lock glyph so it reads as intentionally disabled, not broken */
  content: " 🔒";
  font-size: .8em;
  opacity: .8;
}

/* Simplified Gemini-only key dialog (demo). */
.demo-key-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: 420px;
  width: calc(100vw - 2rem);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
  background: var(--surface, #fff);
  color: inherit;
}
.demo-key-dialog::backdrop { background: rgba(0, 0, 0, .35); }
.demo-key-form { display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem; }
.demo-key-form h3 { margin: 0; font-size: 1.05rem; }
.demo-key-note { margin: 0; font-size: .85rem; opacity: .75; line-height: 1.4; }
.demo-key-label { font-size: .8rem; font-weight: 600; margin-top: .2rem; }
#demo-key-input {
  width: 100%; box-sizing: border-box; padding: .55rem .65rem;
  border: 1px solid rgba(0, 0, 0, .2); border-radius: 8px;
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.demo-key-getlink { font-size: .85rem; color: var(--teal, #1ba7a6); }
.demo-key-status { margin: 0; font-size: .82rem; opacity: .8; }
.demo-key-status.err { color: #b00020; opacity: 1; }
.demo-key-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .4rem; }

/* ── Feature popups (PopupEngine) ─────────────────────────────────────────
   MapLibre draws the popup container/tip; we style the content we inject. */
.maplibregl-popup-content {
  padding: 0; border-radius: 8px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18); font: 13px "Montserrat", system-ui;
}
.maplibregl-popup-close-button { font-size: 16px; color: #64748b; padding: 2px 7px; }
.sg-popup { max-height: 340px; overflow: auto; }
.sg-popup-loading { padding: 14px 16px; color: #64748b; }
.sg-popup-title {
  padding: 8px 12px; background: #004d5d; color: #fff; font-weight: 600;
  font-size: 13px; position: sticky; top: 0;
}
.sg-popup-body { padding: 4px 0; }
.sg-popup-text { padding: 6px 12px; color: #1e293b; }
.sg-popup-note { padding: 6px 12px; color: #94a3b8; font-size: 12px; }
.sg-popup-fields { width: 100%; border-collapse: collapse; }
.sg-popup-fields th, .sg-popup-fields td {
  text-align: left; padding: 4px 12px; font-size: 12px; vertical-align: top;
  border-bottom: 1px solid #f1f5f9;
}
.sg-popup-fields th { color: #64748b; font-weight: 600; white-space: nowrap; width: 40%; }
.sg-popup-fields td { color: #0f172a; word-break: break-word; }
.sg-popup-actions {
  display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid #e2e8f0;
  background: #f8fafc; position: sticky; bottom: 0;
}
.sg-popup-btn {
  font: 12px "Montserrat", system-ui; cursor: pointer; border: 1px solid #1ba7a6;
  background: #1ba7a6; color: #fff; border-radius: 6px; padding: 4px 12px;
}
.sg-popup-btn:hover { background: #168f8e; }