/* ======================================================================
   TerraFind.AI – Consolidated Styles
   Replicated from Angular component CSS
   ====================================================================== */

/* --- Design Tokens --- */
:root {
   --bg-primary: #020617;
   --bg-secondary: #0f172a;
   --glass-bg: rgba(30, 41, 59, 0.6);
   --glass-border: rgba(255, 255, 255, 0.1);
   --accent-green: #22c55e;
   --brand-green: #16a34a;
   --brand-green-dark: #15803d;
   --text-primary: #ffffff;
   --text-secondary: #94a3b8;
   --shadow-premium: 0 8px 32px rgba(0, 0, 0, 0.3);
   /* --font-main: 'Inter', system-ui, -apple-system, sans-serif; */ /* v1.7.5 — trying Space Grotesk */
   --font-main: 'Space Grotesk', system-ui, sans-serif;

   /* Aerial Survey Theme */
   --as-bg: #c4bbae;
   --as-ui-bg: rgba(210, 204, 196, 0.96);
   --as-ui-border: #a09488;
   --as-text: #3a2e28;
   --as-muted: #7a6e64;
   --as-accent: #c0502a;
   --as-font-mono: 'DM Mono', monospace;
   --as-font-condensed: 'Barlow Condensed', sans-serif;
}

/* --- Mapbox Controls Override --- */
.mapboxgl-ctrl-group {
   background: var(--as-ui-bg) !important;
   border: 1px solid var(--as-ui-border) !important;
   border-radius: 0 !important;
   box-shadow: none !important;
}

.mapboxgl-ctrl-group button {
   background: transparent !important;
   border-bottom: 1px solid var(--as-ui-border) !important;
}

.mapboxgl-ctrl-group button:last-child {
   border-bottom: none !important;
}

.mapboxgl-ctrl-icon {
   filter: sepia(1) saturate(0.4) brightness(0.7);
}

.mapboxgl-ctrl-scale {
   background: var(--as-ui-bg) !important;
   border-color: var(--as-accent) !important;
   color: var(--as-muted) !important;
   font-family: var(--as-font-mono) !important;
   font-size: 8px !important;
   letter-spacing: 0.1em !important;
   border-radius: 0 !important;
   box-shadow: none !important;
   padding: 2px 6px !important;
}

.mapboxgl-ctrl-attrib {
   background: var(--as-ui-bg) !important;
   font-size: 9px !important;
   color: var(--as-muted) !important;
}

.mapboxgl-ctrl-attrib a {
   color: var(--as-muted) !important;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
   box-sizing: border-box;
}

body {
   display: block;
   margin: 0;
   font-family: var(--font-main);
   background-color: var(--bg-primary);
   color: var(--text-primary);
   line-height: 1.5;
}

a {
   text-decoration: none;
   color: var(--accent-green);
}

/* --- Premium Utilities --- */
.premium-card {
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   box-shadow: var(--shadow-premium);
   border-radius: 16px;
   padding: 24px;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.premium-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
}

.text-bold {
   font-weight: 700;
}

.text-huge {
   font-size: 2.5rem;
   line-height: 1.2;
}

.text-muted {
   color: var(--text-secondary);
}


/* ─────────────────────────────────────────────────────────────────────
   Location Pin Markers  — beeping pin anchored at the coordinate tip
   -----------------------------------------------------------------------
   Design:
     · .tf-pin-wrapper  — 28×42px container; Mapbox anchor='bottom' puts
                          the BOTTOM-CENTER at the map coordinate (the tip)
     · .tf-pin-icon     — SVG teardrop fills the wrapper; tip at bottom
     · .tf-pin-pulse    — rings at the TIP (bottom of wrapper) so beeping
                          emanates from the exact coordinate point
   Used by: search sites (blue), historical projects (orange), feasibility (teal)
   ───────────────────────────────────────────────────────────────────── */
.tf-pin-wrapper {
  /*
   * DO NOT set position here — Mapbox adds class 'mapboxgl-marker' to this
   * element and its CSS sets { position: absolute; top: 0; left: 0 }.
   * Overriding that with 'position: relative' breaks Mapbox's transform-
   * based positioning and makes every marker drift to a wrong location.
   * 'position: absolute' (from Mapbox) still creates a containing block,
   * so inner absolute children (.tf-pin-icon, .tf-pin-pulse) work correctly.
   */
  cursor: pointer;
  width: 28px;
  height: 42px;
  overflow: visible;   /* allow rings to expand beyond wrapper bounds */
}

/* SVG teardrop pin — absolutely fills wrapper so tip lands at element bottom */
.tf-pin-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  transition: transform 0.15s ease;
}
.tf-pin-wrapper:hover .tf-pin-icon {
  transform: translateY(-4px) scale(1.1);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
}

/*
 * Beeping rings — centred at the PIN TIP (coordinate point).
 * Each ring is a small 8×8 circle anchored at the bottom-center of
 * the wrapper. transform: scale() expands it outward from that point.
 * Three rings with 650 ms stagger create the continuous "beep" effect.
 */
.tf-pin-pulse {
  display: block;
  position: absolute;
  bottom: -1px;        /* sit right at the tip / map coordinate */
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;   /* center the 8px circle horizontally */
  border-radius: 50%;
  z-index: 1;
  animation: tf-pin-beep 2.2s ease-out infinite;
}
.tf-pin-pulse:nth-child(1) { animation-delay: 0s;     }
.tf-pin-pulse:nth-child(2) { animation-delay: 0.73s;  }
.tf-pin-pulse:nth-child(3) { animation-delay: 1.46s;  }

@keyframes tf-pin-beep {
  0%   { transform: scale(1);   opacity: 0.80; }
  60%  { opacity: 0.35; }
  100% { transform: scale(6.5); opacity: 0;    }
}

/* ── Color variants ─────────────────────────────────────────────── */
.tf-pin-blue   { color: #2563eb; }
.tf-pin-blue   .tf-pin-pulse { background: rgba(37,  99,  235, 0.55); }

.tf-pin-orange { color: #f97316; }
.tf-pin-orange .tf-pin-pulse { background: rgba(249, 115,  22, 0.55); }

.tf-pin-teal   { color: #1a9e8f; }
.tf-pin-teal   .tf-pin-pulse { background: rgba(26,  158, 143, 0.45); }

.tf-pin-green  { color: #22c55e; }
.tf-pin-green  .tf-pin-pulse { background: rgba(34,  197,  94, 0.45); }

/* --- Mapbox popup override --- */
.mapboxgl-popup-content {
   color: black;
   padding: 0;
   border-radius: 10px;
   background: #ffffff;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
   color: #1a1a1a;
   /* font-family: Inter, system-ui, -apple-system, sans-serif; */ /* v1.7.5 */
   font-family: 'Space Grotesk', system-ui, sans-serif;
}

.mapboxgl-popup-tip {
   border-top-color: #ffffff !important;
}

.mapboxgl-popup-close-button {
   color: #22c55e !important;
   font-size: 20px;
   font-weight: bold;
   padding: 4px;
}

/* ======================================================================
   AUTH PAGE
   ====================================================================== */
.auth-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   background: var(--bg-primary);
}

.auth-card {
   width: 460px;
   margin: 24px;
   padding: 40px;
   border-radius: 24px;
   background: var(--glass-bg);
   backdrop-filter: blur(16px);
   border: 1px solid var(--glass-border);
   box-shadow: var(--shadow-premium);
   animation: pop .26s cubic-bezier(.2, .9, .3, 1);
}

.auth-card .brand {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 6px
}

.auth-card .brand .title {
   font-weight: 800;
   color: var(--accent-green);
   font-size: 24px;
   text-align: center;
   width: 100%;
   margin-bottom: 12px;
}

.auth-card .heading {
   margin: 0 0 24px;
   font-size: 18px;
   color: var(--text-secondary);
   text-align: center;
}

.auth-card .field {
   margin-bottom: 14px
}

.auth-card .field label {
   display: block;
   font-size: 13px;
   margin-bottom: 6px;
   color: var(--text-secondary);
}

.auth-card .field input {
   width: 100%;
   padding: 12px 14px;
   box-sizing: border-box;
   border-radius: 12px;
   border: 1px solid var(--glass-border);
   background: rgba(15, 23, 42, 0.4);
   color: var(--text-primary);
   font-size: 14px;
}

.auth-card .field input::placeholder {
   color: #9aaea0
}

.auth-card .field input:focus {
   outline: none;
   border-color: rgba(34, 197, 94, 0.28);
   box-shadow: 0 8px 20px rgba(34, 197, 94, 0.06)
}

.auth-card .pw-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 8px
}

.auth-card .strength {
   font-size: 12px;
   padding: 5px 10px;
   border-radius: 999px;
   color: #fff;
   background: #b0b8bf
}

.auth-card .strength[data-score="0"],
.auth-card .strength[data-score="1"] {
   background: #b00020
}

.auth-card .strength[data-score="2"] {
   background: #f59e0b
}

.auth-card .strength[data-score="3"] {
   background: #0ea5a3
}

.auth-card .strength[data-score="4"] {
   background: var(--brand-green-dark)
}

.auth-card .pw-hint {
   font-size: 12px;
   color: #6b7280
}

.auth-card .options {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 6px
}

.auth-card .remember {
   font-size: 13px;
   color: var(--text-secondary);
}

.auth-card .forgot {
   font-size: 13px;
   color: var(--brand-green-dark);
   text-decoration: none
}

.auth-card .forgot:hover {
   text-decoration: underline
}

.auth-card .actions {
   display: flex;
   gap: 12px;
   margin-top: 18px
}

.auth-card .primary {
   flex: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 12px 18px;
   border-radius: 12px;
   background: linear-gradient(180deg, var(--brand-green), var(--brand-green-dark));
   color: #fff;
   border: none;
   font-weight: 700;
   cursor: pointer;
   box-shadow: 0 10px 28px rgba(34, 197, 94, 0.16);
   transform: translateZ(0);
   transition: transform .16s ease, box-shadow .16s ease, opacity .12s;
   font-size: 14px;
}

.auth-card .primary:hover {
   transform: translateY(-4px);
   box-shadow: 0 30px 60px rgba(34, 197, 94, 0.14)
}

.auth-card .primary:active {
   transform: translateY(-2px)
}

.auth-card .primary[disabled] {
   opacity: 0.85;
   cursor: default;
   transform: none;
   box-shadow: none
}

.auth-card .ghost {
   padding: 12px 18px;
   border-radius: 12px;
   background: #fff;
   border: 1px solid rgba(34, 197, 94, 0.12);
   color: var(--brand-green-dark);
   cursor: pointer;
   font-weight: 600;
   font-size: 14px;
}

.auth-card .spinner {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid rgba(255, 255, 255, 0.25);
   border-top-color: rgba(255, 255, 255, 0.95);
   animation: spin .9s linear infinite;
   display: inline-block;
}

.auth-card .primary:focus,
.auth-card .ghost:focus,
.auth-card .field input:focus {
   outline: 3px solid rgba(34, 197, 94, 0.12);
   outline-offset: 2px
}

.auth-card .message {
   margin-top: 12px;
   color: #b00020;
   font-size: 13px
}

.auth-card .message.success {
   color: var(--brand-green-dark)
}

.auth-card .legal {
   margin-top: 14px;
   font-size: 12px;
   color: #6b7280
}

.auth-card .legal a {
   color: var(--brand-green-dark);
   text-decoration: none
}

.auth-card .legal a:hover {
   text-decoration: underline
}

@keyframes pop {
   from {
      transform: translateY(6px) scale(.995);
      opacity: 0
   }

   to {
      transform: none;
      opacity: 1
   }
}

@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}

/* ======================================================================
   CHAT PAGE
   ====================================================================== */
.chat-container {
   max-width: 700px;
   margin: 20px auto;
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.chat-container h2 {
   font-size: 20px;
   color: #333;
}

.chat-window {
   height: 400px;
   overflow-y: auto;
   border: 1px solid #ddd;
   padding: 15px;
   border-radius: 10px;
   background: #fafafa;
   display: flex;
   flex-direction: column;
}

.chat-container .message {
   padding: 10px;
   margin-bottom: 10px;
   border-radius: 10px;
   max-width: 80%;
}

.chat-container .message.user {
   background: #d2ffd2;
   align-self: flex-end;
}

.chat-container .message.bot {
   background: #e0e0e0;
   align-self: flex-start;
}

.chat-container .input-row {
   display: flex;
   gap: 2px;
}

.chat-container .input-row input {
   flex: 1;
   padding: 10px;
   border-radius: 8px;
   border: 1px solid #bbb;
   font-size: 14px;
}

.chat-container .input-row button {
   padding: 10px 15px;
   background: #004aad;
   color: white;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   font-size: 14px;
}

.chat-container .input-row button.clear {
   background: gray;
}

/* ======================================================================
   LAND FINDER PAGE
   ====================================================================== */
/* --- Land Finder Layout --- */
.ai-page {
   display: flex;
   height: 100vh;
   background: var(--bg-primary);
   color: var(--text-primary);
}

.ai-left {
   width: 440px;
   padding: 24px;
   overflow-y: auto;
   box-sizing: border-box;
   border-right: 1px solid var(--glass-border);
}

.ai-right {
   flex: 1;
   position: relative;
   transition: opacity 0.3s ease;
}

.ai-right.map-hidden {
   flex: 0;
   opacity: 0;
   pointer-events: none;
   overflow: hidden;
}

.ai-page #map {
   position: absolute;
   inset: 0;
}

.ai-page:has(.map-hidden) .ai-left {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   border-right: none;
}

.ai-header h2 {
   font-size: 20px;
   margin-bottom: 4px;
}

.ai-header p {
   font-size: 13px;
   color: #9ca3af;
   margin-bottom: 12px;
}

.ai-card {
   background: #020617;
   border-radius: 10px;
   padding: 12px 14px;
   margin-bottom: 12px;
   border: 1px solid rgba(148, 163, 184, 0.3);
}

.ai-card label {
   font-size: 12px;
   color: #9ca3af;
   display: block;
   margin-bottom: 4px;
}

.ai-page textarea {
   width: 100%;
   border-radius: 8px;
   border: 1px solid rgba(148, 163, 184, 0.6);
   background: transparent;
   color: #e5e7eb;
   font-size: 13px;
   padding: 8px;
   resize: vertical;
   min-height: 80px;
   font-family: inherit;
}

.ai-page textarea::placeholder {
   color: #6b7280;
   opacity: 1;
}

.search-textarea {
   background: #020617;
}

.controls-row {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 10px;
   margin-top: 10px;
}

.ai-page select {
   width: 100%;
   border-radius: 6px;
   border: 1px solid rgba(148, 163, 184, 0.6);
   background: #020617;
   color: #e5e7eb;
   font-size: 12px;
   padding: 4px 6px;
}

.run-btn {
   padding: 8px 16px;
   background: #22c55e;
   border: none;
   color: #022c22;
   font-weight: 600;
   border-radius: 999px;
   cursor: pointer;
   font-size: 13px;
}

.run-btn:hover {
   background: #16a34a;
}

.mode-btn {
   flex: 1;
   padding: 10px 14px;
   background: #020617;
   border: 1px solid rgba(148, 163, 184, 0.4);
   color: #e5e7eb;
   font-weight: 600;
   border-radius: 8px;
   cursor: pointer;
   font-size: 13px;
   transition: all 0.2s ease;
}

.mode-btn:hover {
   border-color: rgba(148, 163, 184, 0.6);
   background: #0b1220;
}

.mode-btn.active {
   background: #22c55e;
   border-color: #22c55e;
   color: #022c22;
}

.ai-clarification .bot-label {
   font-size: 11px;
   color: #a855f7;
   margin-bottom: 4px;
}

.chip-row {
   display: flex;
   gap: 8px;
   margin-top: 8px;
}

.chip-btn {
   border-radius: 999px;
   border: 1px solid rgba(148, 163, 184, 0.5);
   background: #020617;
   color: #e5e7eb;
   font-size: 11px;
   padding: 4px 10px;
   cursor: pointer;
}

.chip-btn:hover {
   border-color: #22c55e;
}

.ai-error {
   border-color: #ef4444;
   color: #fecaca;
}

.results-card h3,
.ai-card h3 {
   font-size: 14px;
   margin-bottom: 6px;
}

.site-card {
   border-radius: 8px;
   padding: 8px;
   background: #020617;
   border: 1px solid rgba(148, 163, 184, 0.4);
   margin-bottom: 8px;
   cursor: pointer;
   transition: border-color 0.15s ease, background 0.15s ease;
}

.site-card.active {
   border-color: #22c55e;
   background: #022c22;
}

.site-title-row {
   display: flex;
   justify-content: space-between;
   margin-bottom: 4px;
}

.site-name {
   font-size: 13px;
   font-weight: 600;
}

.site-state {
   font-size: 11px;
   color: #9ca3af;
}

.score-row {
   display: flex;
   justify-content: space-between;
   font-size: 12px;
}

.score-row.small {
   font-size: 11px;
   color: #9ca3af;
}

.score-value {
   font-weight: 600;
   color: #bbf7d0;
}

.ghost-btn {
   background: transparent;
   border: 1px solid var(--glass-border);
   color: var(--text-secondary);
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s;
}

.ghost-btn:hover {
   background: var(--glass-bg);
   color: var(--text-primary);
   border-color: var(--accent-green);
}

.view-dashboard-btn {
   width: 100%;
   margin-top: 10px;
   padding: 6px;
   background: rgba(34, 197, 94, 0.1);
   border: 1px solid #22c55e;
   color: #22c55e;
   border-radius: 6px;
   font-size: 11px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
}

.view-dashboard-btn:hover {
   background: #22c55e;
   color: #022c22;
}

.citations-box h4 {
   font-size: 12px;
   margin-top: 8px;
   margin-bottom: 4px;
}

.citations-box ul {
   list-style: none;
   padding-left: 0;
   margin: 0;
   font-size: 11px;
}

.citations-box li {
   margin-bottom: 3px;
}

.citations-box a {
   color: #38bdf8;
}

.panel-section {
   margin-bottom: 12px;
}

.section-heading {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 10px;
}

.weights-block label {
   font-weight: 500;
}

.weight-row {
   margin-bottom: 10px;
}

.weight-row label {
   font-size: 13px;
   color: #d1d5db;
   margin-bottom: 4px;
   display: block;
}

.weight-row input[type="range"] {
   width: 100%;
}

.error-banner {
   color: red;
   margin-top: 10px;
}

.ai-section {
   margin-top: 18px;
   margin-bottom: 12px;
}

.ai-section-title {
   font-size: 15px;
   font-weight: 600;
   margin-bottom: 8px;
   color: #f3f4f6;
}

/* Layer toggles */
.layer-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 10px;
   margin-bottom: 6px;
   border-radius: 8px;
   background: #0b1220;
   border: 1px solid rgba(148, 163, 184, 0.2);
   cursor: pointer;
   transition: background 0.2s ease, border-color 0.2s ease;
}

.layer-item:hover {
   background: #111827;
   border-color: rgba(148, 163, 184, 0.4);
}

.left-part {
   display: flex;
   align-items: center;
   gap: 8px;
}

.color-dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   border: 1px solid #ffffff50;
   display: inline-block;
}

.layer-label {
   font-size: 13px;
   color: #e5e7eb;
}

.eye-icon {
   font-size: 16px;
   opacity: 0.9;
}

/* --- Aerial Survey HUD --- */
.as-map-header {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 13px 24px;
   background: var(--as-ui-bg);
   border-bottom: 1px solid var(--as-ui-border);
   backdrop-filter: blur(8px);
}

.as-header-title {
   font-family: var(--as-font-condensed);
   font-size: 0.95rem;
   font-weight: 600;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--as-text);
   margin: 0;
}

.header-right {
   display: flex;
   align-items: center;
   gap: 24px;
   font-size: 0.6rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--as-muted);
}

.as-zoom-pill {
   padding: 3px 10px;
   border: 1px solid var(--as-ui-border);
   background: transparent;
   font-family: var(--as-font-mono);
   font-size: 0.6rem;
   letter-spacing: 0.12em;
   color: var(--as-muted);
   min-width: 80px;
   text-align: center;
}

.as-coords-bar {
   position: absolute;
   bottom: 32px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--as-ui-bg);
   border: 1px solid var(--as-ui-border);
   padding: 5px 14px;
   font-size: 0.58rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--as-muted);
   z-index: 5;
   pointer-events: none;
   white-space: nowrap;
}

/* Download overlay */
.download-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.55);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 3000;
   backdrop-filter: blur(4px);
}

.download-box {
   background: #0f172a;
   border: 1px solid #334155;
   padding: 24px 32px;
   border-radius: 12px;
   text-align: center;
   width: 280px;
}

.download-box .typing {
   margin-top: 12px;
   color: #38bdf8;
   font-size: 14px;
   white-space: pre-wrap;
}

.download-box .loader {
   width: 32px;
   height: 32px;
   border: 3px solid #fff;
   border-top-color: transparent;
   border-radius: 50%;
   margin: 0 auto;
   animation: spin 0.8s linear infinite;
}

/* Mapbox popup body */
.site-popup {
   padding: 14px 16px;
   min-width: 220px;
}

.site-popup .site-title {
   font-size: 16px;
   font-weight: 700;
   color: #1a1a1a;
   margin-bottom: 4px;
}

.site-popup .site-subtitle {
   font-size: 13px;
   color: #4a5568;
   margin-bottom: 12px;
   font-weight: 500;
}

.site-popup .site-score {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #e0f2fe;
   padding: 10px 12px;
   border-radius: 6px;
   margin-bottom: 10px;
   font-size: 13px;
   color: #1a1a1a;
   font-weight: 500;
}

.site-popup .site-score strong {
   font-size: 16px;
   color: #0369a1;
   font-weight: 700;
}

.site-popup .site-breakdown {
   font-size: 12px;
   color: #2d3748;
   font-weight: 500;
}

.site-popup .site-breakdown div {
   display: flex;
   justify-content: space-between;
   margin-top: 6px;
   padding: 4px 0;
}

.site-popup .site-breakdown strong {
   color: #101828;
}

/* Feasibility chat */
.chat-wrap {
   display: flex;
   flex-direction: column;
   flex: 1;
}

.chat-messages {
   flex: 1;
   overflow: auto;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   background: #f9fafb;
   border-radius: 8px;
   max-height: 400px;
}

.msg {
   display: flex;
}

.msg.user {
   justify-content: flex-end;
}

.bubble {
   max-width: 92%;
   border: 1px solid #e6e6e6;
   border-radius: 14px;
   padding: 12px 14px;
   background: #fff;
   color: #000;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.msg.user .bubble {
   background: #1a1a1a;
   color: #fff;
   border-color: #1a1a1a;
}

.msg-text {
   font-size: 14px;
   line-height: 1.4;
}

.feas-card {
   margin-top: 12px;
   padding-top: 10px;
   border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.msg.user .feas-card {
   border-top-color: rgba(255, 255, 255, 0.15);
}

.feas-title {
   font-weight: 700;
   margin-bottom: 8px;
}

.feas-scores {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6px 12px;
}

.feas-scores div {
   display: flex;
   justify-content: space-between;
   font-size: 13px;
   opacity: 0.95;
}

.evidence {
   margin-top: 10px;
}

.evidence-title {
   font-weight: 700;
   font-size: 13px;
   margin-bottom: 6px;
}

.ev {
   font-size: 12px;
   padding: 8px;
   border-radius: 10px;
   background: #f7f7f7;
   margin-bottom: 6px;
}

.msg.user .ev {
   background: rgba(255, 255, 255, 0.08);
}

.snippet {
   margin-top: 4px;
   opacity: 0.9;
}

.chat-input {
   display: flex;
   padding: 12px 0;
   gap: 8px;
}

/* ── Site Entry helpers ──────────────────────────────────────── */

/* Coord helper (FIND mode) */
.coord-helper-wrap {
   margin: 8px 0 4px 0;
}

.coord-helper-panel {
   background: #0b1220;
   border: 1px solid rgba(148, 163, 184, 0.25);
   border-radius: 10px;
   padding: 12px;
   margin-bottom: 8px;
   animation: fadeSlideDown 0.18s ease;
}

.coord-helper-row {
   display: flex;
   gap: 6px;
   align-items: stretch;
}

.coord-input {
   flex: 1 1 0;
   min-width: 0;
   padding: 7px 10px;
   border: 1px solid rgba(148, 163, 184, 0.4);
   border-radius: 8px;
   background: #020617;
   color: #e5e7eb;
   font-size: 12px;
   font-family: inherit;
}

.coord-input::placeholder {
   color: #6b7280;
}

.coord-name-input {
   width: 110px;
   padding: 7px 10px;
   border: 1px solid rgba(148, 163, 184, 0.4);
   border-radius: 8px;
   background: #020617;
   color: #e5e7eb;
   font-size: 12px;
   font-family: inherit;
}

.coord-name-input::placeholder {
   color: #6b7280;
}

.insert-site-btn {
   padding: 7px 12px;
   font-size: 12px;
   font-weight: 600;
   white-space: nowrap;
   border-color: #22c55e;
   color: #22c55e;
}

.insert-site-btn:hover {
   background: rgba(34, 197, 94, 0.12);
   border-color: #22c55e;
   color: #22c55e;
}

.coord-hint {
   font-size: 11px;
   color: #6b7280;
   margin: 6px 0 0 0;
   line-height: 1.5;
}

.coord-hint code {
   background: rgba(148, 163, 184, 0.12);
   padding: 1px 4px;
   border-radius: 3px;
   font-size: 10px;
   color: #94a3b8;
}

/* Multi-site queue (FEASIBILITY mode) */
.site-queue-wrap {
   margin-bottom: 8px;
}

.site-queue-panel {
   background: #0b1220;
   border: 1px solid rgba(148, 163, 184, 0.25);
   border-radius: 10px;
   padding: 12px;
   margin-bottom: 8px;
   animation: fadeSlideDown 0.18s ease;
}

.queue-row {
   display: flex;
   gap: 6px;
   align-items: center;
   margin-bottom: 6px;
}

.queue-input {
   flex: 1 1 0;
   min-width: 0;
   padding: 7px 10px;
   border: 1px solid rgba(148, 163, 184, 0.4);
   border-radius: 8px;
   background: #020617;
   color: #e5e7eb;
   font-size: 12px;
   font-family: inherit;
}

.queue-input::placeholder {
   color: #6b7280;
}

.queue-name {
   width: 90px;
   flex-shrink: 0;
   padding: 7px 8px;
   border: 1px solid rgba(148, 163, 184, 0.4);
   border-radius: 8px;
   background: #020617;
   color: #e5e7eb;
   font-size: 12px;
   font-family: inherit;
}

.queue-name::placeholder {
   color: #6b7280;
}

.queue-remove-btn {
   padding: 5px 8px;
   font-size: 13px;
   flex-shrink: 0;
   border-color: rgba(239, 68, 68, 0.4);
   color: #ef4444;
}

.queue-remove-btn:hover:not([disabled]) {
   background: rgba(239, 68, 68, 0.1);
   border-color: #ef4444;
}

.queue-remove-btn[disabled] {
   opacity: 0.3;
   cursor: not-allowed;
}

@keyframes fadeSlideDown {
   from {
      opacity: 0;
      transform: translateY(-6px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* ── Professional Feasibility Card ──────────────────────────────── */
.feas-pro-card {
   background: #ffffff;
   border-radius: 12px;
   border: 1px solid rgba(0, 0, 0, 0.08);
   padding: 16px;
   margin-top: 10px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.feas-pro-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 12px;
}

.feas-pro-name {
   font-weight: 700;
   font-size: 15px;
   color: #111827;
   line-height: 1.3;
}

.feas-pro-coords {
   font-size: 11px;
   color: #6b7280;
   margin-top: 3px;
   font-family: monospace;
}

.feas-pro-verdict {
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
   margin-left: 10px;
   padding: 4px 10px;
   border-radius: 999px;
   background: rgba(0, 0, 0, 0.04);
}

.feas-total-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 13px;
   font-weight: 600;
   color: #374151;
   padding: 8px 0;
   border-top: 1px solid rgba(0, 0, 0, 0.06);
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   margin-bottom: 10px;
}

.feas-total-val {
   font-size: 20px;
   font-weight: 700;
}

.feas-bars {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 12px;
}

.feas-score-row {
   display: flex;
   align-items: center;
   gap: 8px;
}

.feas-score-label {
   width: 100px;
   font-size: 12px;
   color: #6b7280;
   flex-shrink: 0;
}

.feas-score-bar-wrap {
   flex: 1;
   height: 6px;
   background: rgba(0, 0, 0, 0.06);
   border-radius: 999px;
   overflow: hidden;
}

.feas-score-bar-fill {
   height: 100%;
   border-radius: 999px;
   transition: width 0.4s ease;
}

.feas-score-num {
   width: 34px;
   text-align: right;
   font-size: 12px;
   font-weight: 700;
   flex-shrink: 0;
}

.feas-reasoning {
   font-size: 13px;
   color: #374151;
   line-height: 1.55;
   padding: 10px 12px;
   background: #f9fafb;
   border-radius: 8px;
   border-left: 3px solid #22c55e;
   margin-bottom: 12px;
}

.feas-dashboard-btn {
   display: block;
   width: 100%;
   padding: 10px 16px;
   background: #111827;
   color: #ffffff;
   border: none;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   text-align: center;
   transition: background 0.2s ease;
}

.feas-dashboard-btn:hover {
   background: #1f2937;
}

.feas-saving-note {
   font-size: 11px;
   color: #9ca3af;
   text-align: center;
   padding: 6px 0;
}





.chat-input-field {
   flex: 1;
   padding: 12px 14px;
   border: 1px solid #ddd;
   border-radius: 12px;
   font-size: 14px;
   background: #fff;
   color: #000;
}

.chat-input-field::placeholder {
   color: #9ca3af;
   opacity: 1;
}

.chat-send-btn {
   padding: 12px 16px;
   border-radius: 12px;
   border: 0;
   background: #22c55e;
   color: #022c22;
   font-weight: 600;
   cursor: pointer;
   font-size: 13px;
   transition: background 0.2s ease;
}

.chat-send-btn:hover {
   background: #16a34a;
}

.hint {
   padding: 8px 12px;
   font-size: 12px;
   opacity: 0.7;
}

.lf-error {
   padding: 8px 12px;
   font-size: 12px;
   color: #fecaca;
}

/* ======================================================================
   RESULTS PAGE
   ====================================================================== */
.results-container {
   padding: 20px;
}

.results-layout {
   display: flex;
   gap: 20px;
}

.site-list {
   flex: 1;
}

.results-container .site-item {
   border: 1px solid #ccc;
   padding: 10px;
   margin-bottom: 10px;
   cursor: pointer;
   border-radius: 8px;
}

.results-container .site-item:hover {
   background-color: #f0f0f0;
}

.map-placeholder {
   flex: 1;
   border: 1px solid #ccc;
   height: 400px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
}

/* ======================================================================
   SITE DASHBOARD PAGE
   ====================================================================== */
.dashboard-container {
   padding: 48px;
   max-width: 1400px;
   margin: 0 auto;
}

.dashboard-header h1 {
   font-size: 32px;
   color: var(--text-primary);
}

.site-location-tag {
   font-size: 16px;
   color: var(--text-secondary);
   margin-top: 8px;
   display: block;
}

/* KPI Cards */
.kpi-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 16px;
   margin-bottom: 20px;
}

.kpi-card {
   border: 1px solid #e5e7eb;
   padding: 20px;
   text-align: center;
   background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   transition: transform 0.2s, box-shadow 0.2s;
}

.kpi-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.kpi-card h4 {
   margin: 0 0 10px 0;
   font-size: 12px;
   color: #6b7280;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.kpi-card p {
   margin: 0;
   font-size: 24px;
   font-weight: 700;
   color: var(--text-primary);
}

/* Risk Drivers */
.risk-drivers {
   border: 1px solid var(--glass-border);
   padding: 24px;
   background: var(--glass-bg);
   backdrop-filter: blur(12px);
   border-radius: 16px;
}

.risk-drivers h3 {
   font-size: 15px;
   margin-bottom: 14px;
   color: #333;
}

.driver-item {
   display: flex;
   align-items: center;
   margin-bottom: 12px;
}

.driver-label {
   flex: 1;
   font-weight: 600;
   font-size: 13px;
   color: #374151;
}

.driver-bar {
   flex: 2;
   height: 20px;
   background-color: #f3f4f6;
   margin: 0 10px;
   border-radius: 10px;
   overflow: hidden;
}

.bar-fill {
   height: 100%;
   background: linear-gradient(90deg, #ef4444, #dc2626);
   transition: width 0.5s ease;
   border-radius: 10px;
}

.driver-value {
   flex: 0 0 50px;
   text-align: right;
   font-weight: 600;
   font-size: 13px;
   color: #374151;
}

/* Benchmarks */
.benchmarks-panel {
   border: 1px solid #e5e7eb;
   padding: 20px;
   background: #fff;
   border-radius: 12px;
}

.benchmarks-panel h3 {
   font-size: 15px;
   margin-bottom: 14px;
   color: #333;
}

.benchmarks-panel table {
   width: 100%;
   border-collapse: collapse;
}

.benchmarks-panel th,
.benchmarks-panel td {
   border: 1px solid #e5e7eb;
   padding: 10px;
   text-align: left;
   font-size: 13px;
}

.benchmarks-panel th {
   background-color: #f9fafb;
   font-weight: 600;
   color: #374151;
}

/* IRR Summary */
.irr-summary {
   border: 1px solid #e5e7eb;
   padding: 20px;
   background: #fff;
   border-radius: 12px;
}

.irr-summary h3 {
   font-size: 15px;
   margin-bottom: 14px;
   color: #333;
}

.irr-bars {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.irr-item {
   display: flex;
   align-items: center;
}

.irr-item label {
   width: 150px;
   font-weight: 600;
   font-size: 13px;
   color: #374151;
}

.irr-item .bar {
   height: 24px;
   background: linear-gradient(90deg, #22c55e, #16a34a);
   margin: 0 10px;
   border-radius: 10px;
   transition: width 0.5s ease;
   min-width: 4px;
}

.irr-item span {
   width: 60px;
   text-align: right;
   font-weight: 600;
   font-size: 13px;
}

/* Sensitivity Panel */
.sensitivity-panel {
   border: 1px solid #e5e7eb;
   padding: 20px;
   background: #fff;
   border-radius: 12px;
}

.sensitivity-panel h3 {
   font-size: 15px;
   margin-bottom: 14px;
   color: #333;
}

.sensitivity-content {
   display: flex;
   gap: 20px;
}

.chart-container {
   flex: 1;
   min-height: 200px;
}

.scenario-table {
   flex: 1;
}

.sensitivity-panel table {
   width: 100%;
   border-collapse: collapse;
}

.sensitivity-panel th,
.sensitivity-panel td {
   border: 1px solid #e5e7eb;
   padding: 8px;
   text-align: left;
   font-size: 13px;
}

.sensitivity-panel th {
   background-color: #f9fafb;
   font-weight: 600;
}

.sensitivity-panel input[type="range"] {
   width: 100%;
}

/* Ranking Table */
.ranking-table {
   border: 1px solid var(--glass-border);
   padding: 24px;
   background: var(--glass-bg);
   backdrop-filter: blur(12px);
   border-radius: 16px;
   box-shadow: var(--shadow-premium);
}

.ranking-table h3 {
   font-size: 15px;
   margin-bottom: 14px;
   color: var(--accent-green);
}

.ranking-table table {
   width: 100%;
   border-collapse: collapse;
}

.ranking-table th,
.ranking-table td {
   border: 1px solid var(--glass-border);
   padding: 12px;
   text-align: left;
   font-size: 13px;
   color: var(--text-secondary);
}

.ranking-table th {
   background-color: rgba(255, 255, 255, 0.05);
   font-weight: 600;
   color: var(--text-primary);
}

.ranking-table tr:hover {
   background-color: rgba(255, 255, 255, 0.02);
}

.ranking-table a {
   color: var(--accent-green);
   text-decoration: none;
   cursor: pointer;
   font-weight: 500;
}

.ranking-table a:hover {
   text-decoration: underline;
}

/* Simple bar chart for sensitivity */
.bar-chart {
   display: flex;
   align-items: flex-end;
   gap: 20px;
   height: 100%;
   padding-bottom: 20px;
}

.bar-chart .bar-col {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.bar-chart .bar-col .bar-rect {
   width: 100%;
   border-radius: 4px;
   background: linear-gradient(180deg, var(--accent-green), var(--brand-green));
   opacity: 0.8;
   transition: height 0.4s ease;
}

.bar-chart .bar-col .bar-rect:hover {
   opacity: 1;
   transform: scaleX(1.1);
}

.bar-chart .bar-col .bar-label {
   font-size: 11px;
   margin-top: 8px;
   opacity: 0.6;
   text-align: center;
   word-break: break-word;
}

.bar-chart .bar-col .bar-value {
   font-size: 12px;
   font-weight: 700;
   margin-bottom: 4px;
}

/* Loading spinner for pages */
.page-loading {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   font-size: 16px;
   color: #6b7280;
}

/* Hidden utility */
.hidden {
   display: none !important;
}

/* ======================================================================
   BOARDROOM RISK ENGINE - Dashboard Styles
   ====================================================================== */

.site-location-tag {
   font-size: 13px;
   color: #6b7280;
   margin-top: 4px;
   display: block;
}

/* Risk Verdict Banner - Fixed for Premium */
.verdict-text {
   font-size: 16px;
   color: var(--text-primary);
   font-weight: 500;
   line-height: 1.5;
   opacity: 0.95;
}

.boardroom-risk-cards {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 24px;
}

.risk-card {
   text-align: center;
   background: var(--glass-bg);
   backdrop-filter: blur(12px);
   border: 1px solid var(--glass-border);
   border-radius: 16px;
   padding: 24px 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   box-shadow: var(--shadow-premium);
   transition: transform .2s, box-shadow .2s;
   position: relative;
}

.risk-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
}

.risk-card-value {
   font-size: 32px;
   font-weight: 800;
   color: var(--text-primary);
   line-height: 1;
}

.risk-card-sub {
   font-size: 11px;
   color: var(--text-secondary);
}

.risk-badge {
   padding: 6px 14px;
   border-radius: 99px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.5px;
}

.badge-low {
   background: rgba(34, 197, 94, 0.1);
   color: var(--accent-green);
   border: 1px solid var(--accent-green);
}

.badge-med {
   background: rgba(245, 158, 11, 0.1);
   color: #fbbf24;
   border: 1px solid #fbbf24;
}

.badge-high,
.badge-critical {
   background: rgba(239, 68, 68, 0.1);
   color: #ef4444;
   border: 1px solid #ef4444;
}

/* Specific Bio Badges (Mapped to colors) */
.badge-bio-negligible {
   background: rgba(34, 197, 94, 0.1);
   color: var(--accent-green);
   border: 1px solid var(--accent-green);
}

.badge-bio-moderate {
   background: rgba(30, 64, 175, 0.1);
   color: #60a5fa;
   border: 1px solid #60a5fa;
}

.badge-bio-elevated {
   background: rgba(245, 158, 11, 0.1);
   color: #fbbf24;
   border: 1px solid #fbbf24;
}

.badge-bio-critical {
   background: rgba(239, 68, 68, 0.1);
   color: #ef4444;
   border: 1px solid #ef4444;
}

.badge-bio-low {
   background: rgba(34, 197, 94, 0.1);
   color: var(--accent-green);
   border: 1px solid var(--accent-green);
}

.eia-gauge {
   display: block;
}

.eia-gauge circle {
   transition: stroke-dashoffset 0.8s ease;
}

.timeline-display {
   margin: 4px 0;
}

.timeline-range {
   font-size: 22px;
   font-weight: 800;
   color: var(--text-primary);
}

.timeline-bar-wrap {
   width: 100%;
   padding: 0 4px;
}

.timeline-track {
   height: 8px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 4px;
   position: relative;
   margin: 24px 0 16px;
}

.timeline-fill {
   height: 100%;
   background: var(--accent-green);
   border-radius: 4px;
   position: absolute;
}

.timeline-label-left {
   font-size: 10px;
   position: absolute;
   top: 12px;
   opacity: 0.8;
   color: var(--text-secondary);
}

.timeline-label-right {
   font-size: 10px;
   position: absolute;
   top: 12px;
   opacity: 0.8;
   color: var(--text-secondary);
   right: 0;
}

/* Table styling */
table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 10px;
}

th {
   text-align: left;
   padding: 12px;
   border-bottom: 1px solid var(--glass-border);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   opacity: 0.9;
   color: var(--text-secondary);
}

td {
   padding: 16px 12px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   font-size: 14px;
}

tr:last-child td {
   border-bottom: none;
}

@keyframes fadeSlideIn {
   from {
      opacity: 0;
      transform: translateY(-8px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.premium-card {
   animation: fadeIn 0.4s ease-out forwards;
}

/* --- Water Screening Specifics --- */
.risk-banner {
   padding: 10px 12px;
   border-radius: 8px;
   margin-bottom: 12px;
   font-size: 13px;
   font-weight: 600;
}
.risk-HIGH   { background: rgba(224, 82, 82, 0.15); color: #e05252; border: 1px solid rgba(224, 82, 82, 0.3); }
.risk-MEDIUM { background: rgba(230, 168, 23, 0.15); color: #e6a817; border: 1px solid rgba(230, 168, 23, 0.3); }
.risk-LOW, .risk-CLEAR { background: rgba(63, 185, 80, 0.15); color: #3fb950; border: 1px solid rgba(63, 185, 80, 0.3); }

.breach-card {
   background: #0d1117;
   border: 1px solid #30363d;
   border-radius: 6px;
   padding: 10px 12px;
   margin-bottom: 8px;
   font-size: 12px;
}
.breach-name { font-weight: 600; margin-bottom: 5px; color: #c9d1d9; }
.breach-row  { display: flex; justify-content: space-between; color: #8b949e; margin-bottom: 2px; }
.breach-val  { color: #c9d1d9; font-weight: 500; }

.rec-box {
   background: rgba(26, 158, 143, 0.08);
   border: 1px solid rgba(26, 158, 143, 0.2);
   border-radius: 6px;
   padding: 10px 12px;
   font-size: 12px;
   color: #8b949e;
   line-height: 1.6;
   margin-top: 10px;
}
/* --- Enhanced Screening UI --- */
.sidebar-tabs { display: flex; border-bottom: 1px solid var(--glass-border); margin: -25px -24px 20px -24px; background: rgba(15, 23, 42, 0.4); }
.sidebar-tab {
  flex: 1; padding: 12px 6px; font-size: 11px; font-weight: 600;
  text-align: center; cursor: pointer; color: var(--text-secondary);
  border-bottom: 2px solid transparent; transition: all 0.15s;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.sidebar-tab.active { color: var(--accent-green); border-bottom-color: var(--accent-green); background: rgba(34, 197, 94, 0.05); }

.layer-group { margin-bottom: 20px; }
.layer-title {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-secondary); margin-bottom: 10px; border-bottom: 1px solid var(--glass-border); padding-bottom: 4px;
}
.layer-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  border-radius: 6px; cursor: pointer; transition: background .1s; margin-bottom: 2px;
}
.layer-row:hover { background: rgba(255,255,255,.05); }
.layer-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.layer-label { font-size: 12px; flex: 1; color: var(--text-primary); }
.layer-toggle {
  width: 28px; height: 16px; background: var(--border);
  border-radius: 8px; position: relative; transition: background .2s; flex-shrink: 0;
}
.layer-toggle.on { background: var(--accent-green); }
.layer-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; background: #fff;
  border-radius: 50%; transition: transform .2s;
}
.layer-toggle.on::after { transform: translateX(12px); }

.map-hint-banner {
  position: absolute; top: 16px; left: 16px;
  background: var(--bg-secondary); border: 1px solid var(--glass-border);
  border-radius: 6px; padding: 7px 12px; font-size: 11px;
  color: var(--text-secondary); z-index: 5; pointer-events: none;
  backdrop-filter: blur(8px);
}
.map-status-toast {
  position: absolute; bottom: 32px; left: 16px;
  background: var(--bg-secondary); border: 1px solid var(--glass-border);
  border-radius: 6px; padding: 5px 10px; font-size: 10px;
  color: var(--text-secondary); z-index: 5; pointer-events: none;
  backdrop-filter: blur(8px);
}
.map-legend {
  position: absolute; bottom: 32px; right: 48px;
  background: var(--bg-secondary); border: 1px solid var(--glass-border);
  border-radius: 8px; padding: 12px; z-index: 5; font-size: 10px;
  backdrop-filter: blur(8px); min-width: 140px;
}
.legend-title { color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; font-size: 9px; border-bottom: 1px solid var(--glass-border); padding-bottom: 4px; }
.legend-item  { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: var(--text-primary); }
.legend-swatch-line  { width: 18px; height: 2px; border-radius: 1px; flex-shrink: 0; }
.legend-swatch-poly  { width: 14px; height: 10px; border-radius: 2px; opacity: .7; flex-shrink: 0; }

/* --- Environmental Floating Panels --- */
.env-panel-btn {
  border: none; color: #fff; border-radius: 8px; padding: 8px 14px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; opacity: .75; transition: opacity .2s;
}
.env-panel-btn:hover, .env-panel-btn.active { opacity: 1; }
.env-float-panel {
  position: absolute; top: 62px; right: 138px;
  width: 290px; max-height: calc(100% - 100px);
  background: rgba(13,17,23,.93); border: 1px solid #30363d;
  border-radius: 12px; backdrop-filter: blur(14px);
  flex-direction: column; z-index: 20;
  box-shadow: 0 8px 32px rgba(0,0,0,.55); overflow: hidden;
}
.env-panel-header {
  padding: 11px 14px; border-bottom: 1px solid #30363d;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; font-size: 13px; color: #c9d1d9;
  border-left: 3px solid #1a9e8f;
}
.env-panel-close { background: none; border: none; color: #8b949e; font-size: 18px; cursor: pointer; line-height: 1; padding: 0; }
.env-panel-close:hover { color: #e05252; }
.env-panel-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.env-action-btn {
  display: block; width: 100%; margin-bottom: 8px;
  padding: 8px 10px; border-radius: 6px; font-size: 12px;
  cursor: pointer; border: 1px solid #30363d;
  background: transparent; color: #c9d1d9;
}
.env-action-btn.primary { background: #1a9e8f; border-color: #1a9e8f; color: #fff; font-weight: 600; }
.env-action-btn.primary:hover { background: #16877a; }

/* ======================================================================
   FLOATING UI REFACTOR
   ====================================================================== */

/* Full Window Map Adjustment */
.ai-page {
   overflow: hidden;
}

.ai-right.full-window {
   width: 100%;
   height: 100vh;
}

/* Glassmorphism Floating Control Bubble */
.floating-control-bubble {
   position: absolute;
   bottom: 32px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 1000;
   background: rgba(15, 23, 42, 0.75);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 32px;
   padding: 12px 28px;
   box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
   display: flex;
   align-items: center;
   gap: 20px;
   max-width: 95vw;
   width: fit-content;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-control-bubble:hover {
   background: rgba(15, 23, 42, 0.9);
   box-shadow: 0 20px 80px rgba(0, 0, 0, 0.7);
   border-color: rgba(255, 255, 255, 0.2);
}

.floating-bubble-section {
   display: flex;
   align-items: center;
   gap: 16px;
}

.floating-bubble-divider {
   width: 1px;
   height: 36px;
   background: rgba(255, 255, 255, 0.15);
}

.floating-input-group {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.floating-input-group label {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--text-secondary);
   font-weight: 700;
   opacity: 0.8;
}

.floating-input {
   background: transparent;
   border: none;
   border-bottom: 1px solid rgba(255, 255, 255, 0.15);
   color: var(--text-primary);
   font-size: 14px;
   padding: 4px 0;
   outline: none;
   transition: all 0.3s ease;
   min-width: 120px;
}

.floating-input:focus {
   border-bottom-color: var(--accent-green);
   min-width: 140px;
}
 
.floating-select {
   background: transparent;
   border: none;
   border-bottom: 1px solid rgba(255, 255, 255, 0.15);
   color: var(--text-primary);
   font-size: 13px;
   padding: 4px 0;
   outline: none;
   cursor: pointer;
   appearance: none;
   min-width: 120px;
   transition: border-color 0.3s ease;
}
 
.floating-select:focus {
   border-bottom-color: var(--accent-green);
}
 
.floating-select option {
   background: #0f172a;
   color: white;
}

.floating-run-btn {
   background: var(--accent-green);
   color: var(--bg-primary);
   border: none;
   border-radius: 20px;
   padding: 10px 24px;
   font-weight: 700;
   font-size: 14px;
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.floating-run-btn:hover {
   background: #16a34a;
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.floating-run-btn:active {
   transform: translateY(0);
}

/* Visibility Toggles on the Right */
.visibility-side-panel {
   position: absolute;
   top: 100px;
   right: 20px;
   z-index: 999;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.visibility-box {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   background: rgba(15, 23, 42, 0.7);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: var(--text-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   font-size: 22px;
   box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.visibility-box:hover {
   background: rgba(15, 23, 42, 0.95);
   color: var(--text-primary);
   transform: translateX(-4px);
   border-color: rgba(255, 255, 255, 0.2);
}

.visibility-box.active {
   background: var(--accent-green);
   color: var(--bg-primary);
   border-color: var(--accent-green);
   box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
}