:root {
  --bg: #0b121c;
  --bg-panel: #101a28;
  --bg-panel-2: #16223377;
  --border: #223148;
  --text: #dbe4f0;
  --text-dim: #7b8ba3;
  --accent: #3b82f6;
  --accent-2: #22c55e;
  --orange: #f0883e;
  --red: #ef4444;
  --green-bar: #22c55e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ---------- Top bar ---------- */
#topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  height: 48px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#topbar .brand {
  display: flex;
  align-items: center;
  margin-right: 8px;
}
/* Shared logo sizing -- topbar, login gates, trader chat, room viewer.
   The source PNG (frontend/img/logo.png) had its own opaque navy fill
   baked in around the wordmark; converted to a real transparent PNG
   (soft edge + color un-mixing, not a hard color-key -- a naive cutout
   left the anti-aliased text edges broken) so it sits cleanly on this
   app's own dark theme instead of showing a mismatched navy box. */
.brand-logo { height: 30px; width: auto; display: block; }
.tab-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.tab-btn:hover { color: var(--text); background: #1a2536; }
.tab-btn.active { color: #fff; background: var(--accent); }
#topbar .spacer { flex: 1; }
#topbar .status-pill {
  font-size: 11px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 999px;
}

/* ---------- Views ---------- */
.view { flex: 1; min-height: 0; display: none; }
.view.active { display: flex; }

/* ---------- Map view ---------- */
#map-view { position: relative; }
#map-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px;
  position: relative;
  transition: width 0.18s ease, padding 0.18s ease;
}
#map-sidebar.collapsed,
#trades-panel.collapsed {
  flex: 0 0 0px !important;
  width: 0 !important;
  min-width: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}
#map-sidebar.collapsed > *:not(.panel-toggle),
#trades-panel.collapsed > *:not(.panel-toggle) { display: none; }

/* Collapse/expand toggle -- floating "<" panel arrow, Google-Earth-ish feel */
.panel-toggle {
  position: absolute;
  top: 50%;
  right: -13px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  /* Above Leaflet's own stack (tile/marker/popup panes go up to z-index
     700, .leaflet-control-container to 1000) -- otherwise once a panel
     collapses to width:0, the map expands into that space and its tiles
     paint over this button at the old z-index:60, making the only way
     to reopen the panel invisible. Verified this was actually happening
     (button existed in the DOM at the right coordinates, just hidden
     under the map) before raising this. */
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.panel-toggle:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
#trades-panel { position: relative; }
#trades-toggle { right: auto; left: -13px; }
#map-sidebar.collapsed #sidebar-toggle,
#trades-panel.collapsed #trades-toggle {
  display: flex;
  position: fixed;
  top: 60px;
}
#map-sidebar.collapsed #sidebar-toggle { left: 0; }
#trades-panel.collapsed #trades-toggle { right: 0; }
#map-sidebar h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 0;
}

/* ---------- Watchlist (compact, searchable, not a wall of
   fixed rows) ---------- */
.watchlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.small-btn {
  font-size: 10.5px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 5px;
  padding: 3px 7px;
  cursor: pointer;
}
.small-btn:hover { color: #fff; border-color: var(--accent); background: #1a2536; }
.watchlist-search {
  position: relative;
  margin-bottom: 8px;
}
.watchlist-search input {
  width: 100%;
  background: #0e1725;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  padding: 6px 8px;
}
.watchlist-search .filter-suggestions { top: calc(100% + 2px); }
.watchlist-list {
  max-height: 38vh;
  overflow-y: auto;
  margin-bottom: 4px;
}
.terminal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 2px;
}
.terminal-row:hover { background: #1a2536; }
.terminal-row .name { color: var(--text); }
.terminal-row .country { color: var(--text-dim); font-size: 11px; }
.watchlist-remove {
  color: var(--text-dim);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  visibility: hidden;
}
.terminal-row:hover .watchlist-remove { visibility: visible; }
.watchlist-remove:hover { color: var(--red); background: #24151a; }

/* Legend/source blurb tucked behind a native <details> disclosure --
   keeps the sidebar from being a wall of always-on text below the list */
.sidebar-details {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.sidebar-details summary {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  cursor: pointer;
}
.sidebar-details summary:hover { color: var(--text); }
.badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #1a2536;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.badge.loading { color: var(--orange); border-color: var(--orange); }
.badge.discharging { color: var(--accent-2); border-color: var(--accent-2); }

#map-container { flex: 1; position: relative; }
#leaflet-map { position: absolute; inset: 0; }
#vesselfinder-map { position: absolute; inset: 0; background: #0b121c; overflow: hidden; }
#vesselfinder-map iframe { width: 100% !important; height: 100% !important; border: none; }
#map-source-toggle {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 500;
  background: rgba(16, 26, 40, 0.9);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
#map-source-toggle:hover { background: rgba(16, 26, 40, 1); }

#map-legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 500;
  background: rgba(16, 26, 40, 0.9);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-dim);
}
#map-legend div { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.orange { background: var(--orange); }
.dot.green { background: var(--accent-2); }

/* ---------- Trades panel (right side, on Map view) ---------- */
#trades-panel {
  width: 400px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
#trades-panel .panel-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
#trades-panel .panel-header .title { font-weight: 600; color: #fff; margin-bottom: 8px; }
#trades-panel select, #trades-panel input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  margin-right: 6px;
  margin-bottom: 6px;
}
.filter-field { position: relative; margin-bottom: 8px; }
.filter-field label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
  margin-bottom: 3px;
}
.filter-field input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12.5px;
}
.filter-field input:focus { border-color: var(--accent); outline: none; }
.filter-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: #0e1725;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 3px;
  max-height: 220px;
  overflow-y: auto;
}
.filter-suggestions.open { display: block; }
.filter-suggestions .sugg-item {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.filter-suggestions .sugg-item:hover { background: #1a2536; }
.filter-suggestions .sugg-item .count { color: var(--text-dim); font-size: 10.5px; }

#active-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.filter-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #1a2536;
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
}
.filter-chip .chip-remove { cursor: pointer; color: var(--text-dim); font-weight: 700; }
.filter-chip .chip-remove:hover { color: var(--red); }
#trades-reset { color: var(--accent); font-size: 11px; cursor: pointer; margin-top: 6px; }
#trades-reset:hover { text-decoration: underline; }

#trades-export-row { display: flex; gap: 6px; margin-top: 10px; }
#trades-export-format {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 11.5px;
}
#trades-export-btn {
  flex: 1;
  background: var(--accent-2);
  color: #06240f;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
#trades-export-btn:hover { filter: brightness(1.1); }
.filter-field input[type="date"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
}

.clickable-name { color: var(--accent); cursor: pointer; }
.clickable-name:hover { text-decoration: underline; }
.player-chip {
  display: inline-block;
  font-size: 10px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  cursor: pointer;
}
.player-chip:hover { background: var(--accent); color: #fff; }

#trades-list { flex: 1; overflow-y: auto; padding: 6px; }
.trade-card {
  border-bottom: 1px solid var(--border);
  padding: 10px 8px;
}
.trade-card .vessel-name { color: var(--accent); font-weight: 600; cursor: default; }
.qty-bar-wrap {
  background: #1a2536;
  border-radius: 4px;
  height: 20px;
  width: 130px;
  position: relative;
  overflow: hidden;
  margin: 4px 0;
}
.qty-bar-fill {
  background: var(--green-bar);
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 6px;
  color: #06240f;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.product-chip {
  display: inline-block;
  font-size: 11px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 4px;
  padding: 1px 6px;
  margin-top: 2px;
}
.trade-route {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11.5px;
}
.trade-route .col { width: 46%; }
.trade-route .loc { color: var(--text); font-weight: 600; }
.trade-route .date { color: var(--text-dim); }
.chain {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
}
.chain .tag { font-size: 9px; color: var(--text-dim); text-transform: uppercase; }
.chain .party {
  background: #1a2536;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--text-dim);
}
.status-pill-inline {
  font-size: 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  color: var(--text-dim);
}

/* ---------- Voyage calculator view ---------- */
#voyage-view { padding: 20px; overflow-y: auto; gap: 20px; }
.voy-col { flex: 1; max-width: 560px; }
.voy-form-section {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.voy-form-section h4 {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.field-row { display: flex; gap: 10px; margin-bottom: 8px; }
.field { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.field label { font-size: 11px; color: var(--text-dim); }
.field input, .field select {
  background: #0e1725;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12.5px;
}
.field.input-blue input, .field.input-blue select { border-color: #2b4f8a; }
.field.input-yellow input, .field.input-yellow select { border-color: #7a6a1f; }
.legend-key { display: flex; gap: 14px; font-size: 11px; color: var(--text-dim); margin-bottom: 14px; }
.legend-key .sw { width: 10px; height: 10px; display: inline-block; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.sw.blue { background: #2b4f8a; }
.sw.yellow { background: #7a6a1f; }
.sw.grey { background: #445267; }

#voy-calc-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}
#voy-calc-btn:hover { background: #2f6fe0; }

#voy-results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.result-tile {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.result-tile .k { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.result-tile .v { font-size: 18px; font-weight: 700; color: #fff; margin-top: 2px; }
.result-tile.pnl-pos .v { color: var(--accent-2); }
.result-tile.pnl-neg .v { color: var(--red); }

/* ---------- Cargo analytics view ---------- */
#cargo-view { padding: 20px; flex-direction: column; overflow-y: auto; }
#cargo-controls { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
#cargo-controls select {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
}
#cargo-chart-wrap {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  flex: 1;
  min-height: 420px;
}
#cargo-summary { display: flex; gap: 14px; margin-bottom: 16px; }
.stat-tile {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 140px;
}
.stat-tile .k { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; }
.stat-tile .v { font-size: 20px; font-weight: 700; color: #fff; }

.section-header {
  margin: 26px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.section-sub { display: block; font-size: 11px; font-weight: 400; color: var(--text-dim); margin-top: 3px; }

/* ---------- Investigate view (Planet satellite imagery) ---------- */
#investigate-view { padding: 20px; flex-direction: column; overflow-y: auto; }
#investigate-controls {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.investigate-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}
.investigate-form select, .investigate-form input[type="number"], .investigate-form input[type="date"] {
  width: 100%;
  background: #0e1725;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12.5px;
  padding: 6px 8px;
}
.banner {
  background: #24151a;
  border: 1px solid var(--red);
  color: #fca5a5;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  margin-bottom: 12px;
}
.investigate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.investigate-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.investigate-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #0e1725;
}
.investigate-card-body { padding: 10px 12px; }
#transport-tiles { display: flex; gap: 14px; flex-wrap: wrap; }

#kpler-controls { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
#kpler-controls input {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  width: 160px;
}
#kpler-table-wrap { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; }
#kpler-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#kpler-table th { text-align: left; padding: 10px 14px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); border-bottom: 1px solid var(--border); white-space: nowrap; }
#kpler-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
#kpler-table tbody tr:last-child td { border-bottom: none; }
#kpler-table tbody tr:hover { background: #1a2536; }
.kpler-tabs { display:flex; gap:6px; margin:0 0 10px; }
.kpler-tab { padding:8px 14px; border:1px solid var(--border); border-radius:8px; color:var(--text-dim); background:var(--bg-panel); cursor:pointer; }
.kpler-tab.active { color:#fff; border-color:var(--accent); background:rgba(59,130,246,.16); }
.kpler-panel { background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; padding:12px; }
.kpler-player-card { padding:12px; border-bottom:1px solid var(--border); display:grid; gap:7px; }
.kpler-player-card:last-child { border-bottom:0; }
.kpler-role { margin-left:8px; color:var(--accent-2); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.kpler-player-metrics { display:flex; flex-wrap:wrap; gap:14px; color:#dbeafe; font-size:12px; }
.kpler-loading,.kpler-empty,.kpler-access-note { color:var(--text-dim); padding:10px; font-size:12px; }
.kpler-capability { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px; border-top:1px solid var(--border); }
.kpler-capability-state { font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.state-integrated { color:#4ade80; }.state-accessible_not_integrated { color:#60a5fa; }.state-subscription_blocked,.state-route_not_found { color:#f87171; }.state-contract_unverified { color:#fbbf24; }
.transport-tile {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 200px;
  flex: 1;
}
.transport-tile .k { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; }
.transport-tile .v { font-size: 20px; font-weight: 700; color: #fff; margin: 4px 0 2px; }
.transport-tile .period { font-size: 10.5px; color: var(--text-dim); }
.transport-tile .delta { font-size: 11px; margin-top: 4px; }
.transport-tile .delta.up { color: var(--accent-2); }
.transport-tile .delta.down { color: var(--red); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #223148; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Entity drawer (vessel/player drill-down, 2nd panel) ---------- */
.drawer {
  position: fixed;
  top: 48px;
  right: 0;
  bottom: 0;
  width: 420px;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.4);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-type { font-size: 10.5px; text-transform: uppercase; color: var(--text-dim); letter-spacing: .05em; }
.drawer-title { font-size: 18px; font-weight: 700; color: #fff; margin-top: 2px; }
#drawer-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
}
#drawer-close:hover { color: #fff; border-color: var(--text-dim); }
/* Tab strip across the top of the drawer body -- same filled-pill style
   as the app's own top navbar tabs (.tab-btn), per an explicit ask to
   make each subsection (Overview/Commodities/Vessels/Trades/...) its
   own clickable full-height view instead of one long scrolling sheet. */
.drawer-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}
.drawer-tabs button {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.drawer-tabs button:hover { color: var(--text); background: #1a2536; }
.drawer-tabs button.active { color: #fff; background: var(--accent); }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; }
.drawer-tab-panel { display: none; }
.drawer-tab-panel.active { display: block; }

.drawer-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-summary .tile { background: #0e1725; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.drawer-summary .tile .k { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }
.drawer-summary .tile .v { font-size: 15px; font-weight: 700; color: #fff; margin-top: 2px; }
.drawer-summary .tile .v small { font-size: 11px; color: var(--text-dim); font-weight: 400; }
.drawer-market-context {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.drawer-market-context b { color: var(--text); }
.drawer-market-context .share-bar-wrap {
  background: #0e1725;
  border-radius: 4px;
  height: 8px;
  margin-top: 6px;
  overflow: hidden;
}
.drawer-market-context .share-bar-fill { background: var(--accent-2); height: 100%; }

.drawer-vessels {
  padding: 10px 16px;
  font-size: 11px;
  color: var(--text-dim);
  /* No max-height here anymore -- this now fills its own dedicated tab
     panel (see .drawer-tab-panel), which is what actually scrolls, via
     .drawer-body's overflow-y, rather than this needing its own capped
     scroll box squeezed between sibling sections on one long page. */
}
.drawer-vessels .veh-chip {
  display: inline-block;
  background: #1a2536;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  margin: 2px 3px 0 0;
  color: var(--text);
  cursor: pointer;
}
.drawer-trades-header {
  padding: 10px 16px 4px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: .05em;
}
#drawer-trades-list { padding: 0 6px 12px; }

.popup-view-trades { color: var(--accent); font-size: 11px; }

/* Terminal drill-down: commodity breakdown is the headline of a location
   entity (main capability -- see /trades/entity?type=location) -- fills
   its own dedicated tab now, see .drawer-tab-panel, no capped height. */
#drawer-commodity-breakdown {
  padding: 4px 16px 10px;
}
.commodity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
  cursor: pointer;
}
.commodity-row .name { flex: 0 0 128px; font-size: 11.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.commodity-row .bar-wrap { flex: 1; background: #0e1725; border-radius: 4px; height: 14px; overflow: hidden; }
.commodity-row .bar-fill { background: var(--accent); height: 100%; display: flex; align-items: center; }
.commodity-row .qty { font-size: 10px; color: #fff; padding-left: 6px; white-space: nowrap; }
.commodity-row .count { flex: 0 0 auto; font-size: 10px; color: var(--text-dim); }

/* leaflet dark popup */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: #101a28;
  color: var(--text);
  border: 1px solid var(--border);
}
.leaflet-popup-content b { color: #fff; }

/* leaflet dark layer switcher (satellite/streets/dark toggle) */
.leaflet-control-layers {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
}
.leaflet-control-layers-toggle {
  filter: invert(0.85);
}
.leaflet-control-layers-expanded {
  padding: 8px 12px !important;
  font-size: 12px;
}
.leaflet-control-layers label { color: var(--text) !important; margin: 3px 0; }
.leaflet-control-layers-separator { border-top: 1px solid var(--border) !important; }
.leaflet-bar a {
  background: var(--bg-panel) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.leaflet-bar a:hover { background: #1a2536 !important; }

/* live AIS ship name tooltip (MarineTraffic-style label) */
.ship-label {
  background: rgba(16, 26, 40, 0.85) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 10.5px !important;
  padding: 1px 5px !important;
  box-shadow: none !important;
}
.ship-label::before { display: none; }

/* ---------- Gemini popup (Ctrl+G) ---------- */
.gemini-popup {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 340px;
  height: 440px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 2500;
  display: flex;
  flex-direction: column;
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.gemini-popup.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.gemini-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.gemini-popup-header button {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
}
.gemini-popup-header button:hover { color: #fff; }
.gemini-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gemini-msg {
  font-size: 12.5px;
  line-height: 1.4;
  padding: 7px 10px;
  border-radius: 8px;
  max-width: 88%;
  white-space: pre-wrap;
}
.gemini-msg-user { align-self: flex-end; background: var(--accent); color: #fff; }
.gemini-msg-model { align-self: flex-start; background: #1a2536; color: var(--text); }
.gemini-msg-error { align-self: flex-start; background: #24151a; color: #fca5a5; border: 1px solid var(--red); }
.gemini-thinking { color: var(--text-dim); }
.gemini-input-row {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid var(--border);
}
.gemini-input-row input {
  flex: 1;
  background: #0e1725;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12.5px;
  padding: 7px 9px;
}

/* ---------- Outreach view (Sales-Navigator-style lead list) ---------- */
#outreach-view { padding: 20px; flex-direction: column; overflow-y: auto; }
#outreach-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: end;
}
#outreach-controls .filter-field { margin-bottom: 0; min-width: 160px; }
#outreach-controls input, #outreach-controls select {
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12.5px;
  padding: 6px 10px;
}
#outreach-table-wrap {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
}
#outreach-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#outreach-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
#outreach-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
#outreach-table tbody tr:last-child td { border-bottom: none; }
#outreach-table tbody tr:hover { background: #1a2536; }
#outreach-table select {
  background: #0e1725;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11.5px;
  padding: 3px 6px;
}

/* ---------- Private trader mailbox (Outreach tab + frontend/trader.html) ---------- */
.chat-shell { flex: 1; min-height: 0; display: flex; background: #f6f8fb; color:#172033; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; box-shadow:0 8px 28px rgba(0,0,0,.18); }
.chat-sidebar { width: 320px; flex-shrink: 0; background:#fff; border-right: 1px solid #dce3ec; overflow-y: auto; display: flex; flex-direction: column; }
.mailbox-brand { display:flex; align-items:center; gap:10px; padding:16px; border-bottom:1px solid #e5eaf1; }
.mailbox-brand b { display:block; font-size:15px; color:#111827; }
.mailbox-brand small { display:block; color:#64748b; margin-top:2px; }
.mailbox-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:#0f766e; color:#fff; font-size:17px; }
.mailbox-folders { display:flex; gap:5px; padding:10px 12px; border-bottom:1px solid #edf0f4; }
.mailbox-folders button { flex:1; border:0; background:transparent; color:#64748b; padding:7px 5px; border-radius:6px; font-size:11.5px; }
.mailbox-folders button.active { background:#e6f4f1; color:#0f766e; font-weight:700; }
.mailbox-compose { margin:10px 12px !important; background:#0f766e !important; color:#fff !important; border-color:#0f766e !important; }
.chat-sidebar-header { padding: 10px 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.chat-pending-item { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
.chat-channel-list { flex: 1; overflow-y: auto; }
.chat-channel-row { padding: 13px 14px; cursor: pointer; border-bottom: 1px solid #edf0f4; border-left:3px solid transparent; }
.chat-channel-row:hover { background: #f5f8fb; }
.chat-channel-row.active { background: #eaf4f3; border-left-color:#0f766e; }
.chat-channel-row.active .name { color:#0f4f4a; }
.chat-channel-row.active .dr-meta { color:#526273; }
.chat-channel-row .name { font-size: 13px; font-weight: 600; }

.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-header { padding: 16px 22px; background:#fff; border-bottom: 1px solid #dce3ec; }
.chat-header span { display:block; font-weight:700; font-size:15px; color:#111827; }
.chat-header small { display:block; margin-top:3px; color:#64748b; font-weight:400; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.chat-bubble-row { display: flex; }
.chat-bubble-row.mine { justify-content: stretch; }
.chat-bubble { width:100%; max-width:none; background: #fff; border:1px solid #dfe5ec; border-radius: 8px; padding: 14px 16px; font-size: 13px; box-shadow:0 2px 7px rgba(15,23,42,.05); }
.chat-bubble-row.mine .chat-bubble { background:#f0f8f7; border-left:3px solid #0f766e; }
.chat-bubble-meta { display:flex; justify-content:space-between; gap:16px; font-size: 11px; color: #64748b; margin-bottom: 10px; }
.chat-bubble-meta b { color:#1f2937; font-size:12.5px; }
.chat-bubble-meta time { white-space:nowrap; }
.mail-message-body { color:#253047; line-height:1.6; white-space:pre-wrap; }
.chat-input-row { display: flex; align-items:flex-end; gap: 10px; padding: 14px 18px; background:#fff; border-top: 1px solid #dce3ec; }
.chat-input-row textarea { flex: 1; resize: vertical; min-height: 70px; max-height:180px; background:#fff; border: 1px solid #aeb9c7; border-radius: 7px; color:#172033; font-size: 13px; padding: 10px 12px; }
.chat-input-row button { background:#0f766e; border-color:#0f766e; color:#fff; padding:10px 15px; }

/* ---------- App-wide login gate (frontend/js/app.js) ----------
   Covers the entire maritime suite -- backend/app/main.py requires a
   real login on every one of those routers now (SUITE_AUTH), so a
   visitor who only ever gets a /room/{token} link genuinely cannot
   reach this data even by guessing the bare domain, not just "unlikely
   to". Reuses the same account/token as the Data Rooms tab (drToken/
   drSaveSession in dataroom.js) -- one login covers both. */
.app-gate-overlay { display: none; position: fixed; inset: 0; z-index: 30000; background: var(--bg); align-items: center; justify-content: center; }
.app-gate-overlay .dr-gate { margin: 0; }
/* Authentication is a real UI boundary, not a translucent curtain. The
   terminal is absent from layout, focus navigation and the accessibility
   tree until /auth/me has accepted the session. */
body.auth-locked #app { display: none !important; }
body.auth-locked .onboarding-overlay,
body.auth-locked .context-help-tooltip { display: none !important; }

/* Real in-app modal replacing window.prompt() -- verified live that a
   real user's browser context throws "prompt() is not supported" (not
   just an automation-tool quirk), so every text-input flow in the Data
   Rooms admin UI (drPromptModal, dataroom.js) needs an actual DOM
   modal instead of a native dialog. */
.dr-modal-overlay { position: fixed; inset: 0; z-index: 2100; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; }
.dr-modal-overlay .dr-gate { margin: 0; }
.dr-nda-text-copy { background: #0e1725; border: 1px solid var(--border); border-radius: 6px; padding: 12px; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; }

/* ---------- Data Rooms view (M&A-style deal room) ---------- */
#dataroom-view { padding: 20px; flex-direction: column; overflow-y: auto; gap: 16px; }

.dr-gate { max-width: 380px; margin: 60px auto; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 24px; }
.dr-gate h3 { margin: 0 0 4px; }
.dr-gate .dr-sub { color: var(--text-dim); font-size: 12px; margin-bottom: 16px; }
.dr-gate input { width: 100%; box-sizing: border-box; background: #0e1725; border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12.5px; padding: 8px 10px; margin-bottom: 10px; }
.dr-gate button { width: 100%; }
.dr-gate-toggle { background: none; border: none; color: var(--accent); font-size: 11.5px; cursor: pointer; padding: 0; margin-top: 10px; }

#dr-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
#dr-topbar .dr-user { color: var(--text-dim); font-size: 12px; }
#dr-topbar .dr-user b { color: var(--text); }

.dr-table-wrap { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; }
.dr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dr-table th { text-align: left; padding: 10px 14px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); border-bottom: 1px solid var(--border); white-space: nowrap; }
.dr-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dr-table tbody tr:last-child td { border-bottom: none; }
.dr-table tbody tr:hover { background: #1a2536; }
.dr-table input[type="text"], .dr-table input[type="email"], .dr-table input[type="date"], .dr-table input[type="datetime-local"], .dr-table select {
  background: #0e1725; border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: 11.5px; padding: 4px 6px;
}
.dr-clickable { color: var(--accent); cursor: pointer; }
.dr-clickable:hover { text-decoration: underline; }

.dr-room-header { display: flex; align-items: center; gap: 12px; }
.dr-room-header h2 { margin: 0; font-size: 18px; }
.dr-back { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 4px 0; }
.dr-back:hover { color: var(--text); }
.dr-pill { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.dr-pill.active { background: #14351f; color: var(--accent-2); }
.dr-pill.archived { background: #2a2115; color: #fbbf24; }

.dr-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dr-nav button { background: none; border: none; color: var(--text-dim); padding: 9px 14px; cursor: pointer; font-size: 12.5px; border-bottom: 2px solid transparent; }
.dr-nav button:hover { color: var(--text); }
.dr-nav button.active { color: #fff; border-bottom-color: var(--accent); }

.dr-panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.dr-panel h4 { margin: 0 0 10px; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }
.dr-toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }

.dr-tree-node { }
.dr-folder-row, .dr-file-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.dr-folder-row:last-child, .dr-file-row:last-child { border-bottom: none; }
.dr-folder-row .name, .dr-file-row .name { flex: 1; }
.dr-file-row .name { color: var(--text); }
.dr-folder-row .name { color: var(--text); font-weight: 600; cursor: pointer; }
.dr-tree-children { margin-left: 22px; border-left: 1px dashed var(--border); padding-left: 10px; }
.dr-file-icon, .dr-folder-icon { color: var(--text-dim); }
.dr-meta { color: var(--text-dim); font-size: 11px; }

/* Permission grid tree (renderTabPermissions' renderPermGridTree) --
   real folder/file rows with inline View/Download/Print/Comment
   checkboxes showing the actually-resolved permission per node. */
.dr-perm-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid var(--border); font-size: 12px; }
.dr-perm-row:last-child { border-bottom: none; }
.dr-perm-row .name { flex: 1; color: var(--text); }
.dr-perm-checks { display: flex; gap: 12px; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.dr-perm-checks input { margin-right: 3px; vertical-align: middle; }

.dr-form-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.dr-form-inline input, .dr-form-inline select { background: #0e1725; border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12px; padding: 6px 9px; }
.dr-form-inline label { font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; }

.dr-checkbox-grid td { text-align: center; }
.dr-checkbox-grid th.perm-col { text-align: center; }

.dr-tile { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; min-width: 120px; }
.dr-tile .k { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.dr-tile .v { font-size: 20px; font-weight: 600; margin-top: 2px; }
.dr-empty { color: var(--text-dim); text-align: center; padding: 24px; font-size: 12.5px; }
.dr-audit-time { color: var(--text-dim); font-size: 11px; white-space: nowrap; }
.dr-danger { color: var(--red); }

/* ---------- Public room viewer (frontend/room.html) ----------
   Modeled directly on a real DocSend space (africonn.docsend.com),
   inspected live: hero banner + wordmark, search + "View FAQ", a
   breadcrumb'd folder browser with All files/Recently added, and a
   dedicated full-screen continuous document viewer with a thumbnail
   picker and an inline "Ask a question" entry point. The banner is a CSS
   gradient + text wordmark rather than a per-deal photo -- this app has
   no real uploaded cover-image asset per room, and a fabricated one
   would misrepresent branding nobody actually supplied. */
body.rv-body { margin: 0; background: var(--bg); color: var(--text); font-family: inherit; min-height: 100vh; overflow: hidden; }
.rv-gate { max-width: 420px; margin: 80px auto; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 28px; }
.rv-gate h2 { margin: 0 0 4px; }
.rv-gate .rv-sub { color: var(--text-dim); font-size: 12.5px; margin-bottom: 18px; }
.rv-gate input { width: 100%; box-sizing: border-box; background: #0e1725; border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; padding: 9px 11px; margin-bottom: 10px; }
.rv-gate button { width: 100%; padding: 10px; font-size: 13px; }
.rv-password-wrap { position:relative; display:flex; width:100%; }
.rv-password-wrap input { padding-right:58px; }
.rv-gate .rv-password-toggle { position:absolute; right:6px; top:5px; width:auto; padding:5px 8px; border:0; background:transparent; color:#60a5fa; font-size:11px; }
.rv-nda-shell { width:min(1120px, calc(100vw - 40px)); height:min(760px, calc(100vh - 40px)); margin:20px auto; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); gap:16px; overflow:hidden; }
.rv-nda-document, .rv-nda-form-panel { min-height:0; background:var(--bg-panel); border:1px solid var(--border); border-radius:12px; }
.rv-nda-document { display:flex; flex-direction:column; padding:20px; overflow:hidden; }
.rv-nda-heading { display:flex; align-items:center; gap:14px; flex:0 0 auto; margin-bottom:14px; }
.rv-nda-heading .brand-logo { height:28px; }
.rv-nda-heading h2, .rv-nda-form-panel h2 { margin:0 0 4px; }
.rv-nda-heading .rv-sub, .rv-nda-form-panel .rv-sub { color:var(--text-dim); font-size:12.5px; margin-bottom:0; }
.rv-nda-text { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; background:#0e1725; border:1px solid var(--border); border-radius:8px; padding:18px; font-size:13px; line-height:1.65; white-space:pre-wrap; }
.rv-nda-form-panel { overflow:hidden; }
.rv-nda-form-scroll { height:100%; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; box-sizing:border-box; padding:24px; }
.rv-nda-agree { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.4; margin-bottom:16px; }
.rv-nda-agree input { width:auto; margin:2px 0 0; }
.rv-nda-form-panel button { width:100%; padding:11px; }
.rv-field-label { display:block; text-align:left; margin:0 0 4px; color:#b8c5d3; font-size:12px; font-weight:600; }
#rv-nda-name, #rv-nda-company, #rv-nda-title { width:100%; box-sizing:border-box; margin-bottom:10px; background:#0e1725; border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:14px; padding:11px 12px; }
.rv-error { color: var(--red); font-size: 12px; margin-bottom: 10px; min-height: 16px; }

.rv-app { display: flex; flex-direction: column; height: 100vh; overflow-y: auto; }

/* -- Browse mode: hero banner + folder/file list, DocSend space-home shaped -- */
.rv-banner { height: 140px; background: linear-gradient(120deg, #0b3d2e 0%, #16223a 55%, #0b121c 100%); position: relative; flex-shrink: 0; }
.rv-banner-inner { max-width: 860px; margin: 0 auto; padding: 0 24px; position: relative; height: 100%; }
.rv-logo { position: absolute; left: 24px; bottom: -34px; width: 168px; height: 72px; border-radius: 12px; background: #0a2b46; border: 3px solid var(--bg); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.4); overflow:hidden; }
.rv-logo img { width:148px; height:auto; display:block; opacity:1; filter:none; }
.rv-identity-row { max-width: 860px; margin: 0 auto; padding: 44px 24px 18px 112px; }
.rv-identity-row h1 { margin: 0; font-size: 20px; }
.rv-identity-row .rv-stage { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.rv-toolbar-row { max-width: 860px; margin: 0 auto; padding: 0 24px 18px; display: flex; gap: 10px; align-items: center; }
.rv-search-input { flex: 1; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; padding: 10px 14px; }
.rv-faq-btn { background: var(--bg-panel); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 10px 16px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.rv-faq-btn:hover { background: #1a2536; }
.rv-logout-btn { background:transparent; border:1px solid #53657b; color:var(--text-dim); border-radius:8px; padding:10px 14px; font-size:12.5px; cursor:pointer; white-space:nowrap; }
.rv-logout-btn:hover { color:#fff; border-color:#94a3b8; }

.rv-browse-body { max-width: 860px; margin: 0 auto; padding: 8px 24px 40px; width: 100%; box-sizing: border-box; }
.rv-breadcrumb { font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
.rv-breadcrumb span { cursor: pointer; }
.rv-breadcrumb span:hover { color: var(--accent); text-decoration: underline; }
.rv-browse-body h2 { margin: 4px 0 14px; font-size: 20px; }
.rv-folder-back { width:auto; flex:0 0 auto; padding:7px 10px; border:1px solid #53657b; border-radius:7px; background:#0e1725; color:#dbeafe; font-size:11px; cursor:pointer; }
.rv-folder-back:hover { border-color:#60a5fa; color:#fff; }
.rv-view-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.rv-view-toggle button { background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-dim); border-radius: 20px; padding: 6px 14px; font-size: 12px; cursor: pointer; }
.rv-view-toggle button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.rv-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--border); cursor: pointer; }
.rv-list-row:hover { background: #1a2536; }
.rv-list-row:last-child { border-bottom: none; }
.rv-list-icon { font-size: 20px; width: 24px; text-align: center; flex-shrink: 0; }
.rv-list-name { font-size: 13.5px; flex: 1; }
.rv-list-meta { font-size: 11.5px; color: var(--text-dim); }

.rv-empty-state { color: var(--text-dim); text-align: center; margin-top: 40px; font-size: 13px; padding: 0 20px; }

/* -- Full-screen document viewer, DocSend-viewer shaped -- */
.rv-viewer-overlay { position: fixed; inset: 0; background: #06090f; z-index: 500; display: flex; flex-direction: column; }
.rv-viewer-toolbar { height: 52px; flex-shrink: 0; background: #0a0a0a; display: flex; align-items: center; padding: 0 16px; gap: 14px; }
.rv-viewer-back { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 18px; padding: 4px 6px; }
.rv-viewer-back:hover { color: #fff; }
.rv-page-counter { color: #cfd8e6; font-size: 13px; min-width: 56px; text-align: center; }
.rv-thumb-toggle { background: none; border: none; color: #cfd8e6; cursor: pointer; font-size: 16px; padding: 6px 8px; border-radius: 5px; }
.rv-thumb-toggle:hover { background: #1a2536; }
.rv-ask-inline { background: #1f2937; color: #fff; border: none; border-radius: 20px; padding: 8px 16px; font-size: 12.5px; cursor: pointer; }
.rv-ask-inline:hover { background: #29384c; }
.rv-viewer-toolbar .spacer { flex: 1; }
.rv-viewer-toolbar .small-btn { background: #1f2937; color: #fff; border: none; }

.rv-viewer-stage { flex: 1; position: relative; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: 24px 0 60px; }
.rv-viewer-stage canvas, .rv-viewer-stage img { max-width:100%; display:block; background:#fff; }
.rv-pdf-page { max-width:calc(100% - 48px); margin:0 auto 22px; background:#fff; box-shadow:0 6px 24px rgba(0,0,0,.5); scroll-margin-top:18px; }
.rv-viewer-stage iframe { width: 100%; height: 100%; border: none; background: #fff; }
.rv-watermark { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 5; }
.rv-watermark span {
  /* mix-blend-mode: difference inverts against whatever's underneath, so
     this stays legible over both a white PDF/image page and this app's
     dark chrome -- a plain low-opacity color only worked on one of the two. */
  color: #fff; mix-blend-mode: difference; opacity: 0.35;
  font-size: 22px; font-weight: 700; transform: rotate(-30deg); white-space: nowrap;
}

.rv-viewer-footer { position: absolute; left: 16px; bottom: 16px; background: rgba(20,20,20,0.85); color: #cfd8e6; font-size: 12px; padding: 6px 12px; border-radius: 6px; display: flex; align-items: center; gap: 6px; }
.rv-loading { position:fixed; inset:0; z-index:20000; display:none; align-items:flex-start; justify-content:center; padding-top:18px; pointer-events:auto; background:rgba(2,6,14,.28); }
.rv-loading.visible { display:flex; }
.rv-loading-track { position:absolute; left:0; right:0; top:0; height:4px; background:rgba(148,163,184,.25); }
.rv-loading-fill { height:100%; width:0; background:linear-gradient(90deg,#22c55e,#60a5fa); transition:width .2s ease; box-shadow:0 0 12px rgba(96,165,250,.7); }
.rv-loading-label { padding:8px 12px; border:1px solid #334155; border-radius:7px; background:#07101d; color:#dbeafe; font-size:12px; box-shadow:0 8px 28px rgba(0,0,0,.4); }

@media (max-width: 760px) {
  .rv-nda-shell { width:calc(100vw - 20px); height:calc(100vh - 20px); margin:10px; grid-template-columns:1fr; grid-template-rows:minmax(240px,1fr) minmax(280px,1fr); gap:10px; }
  .rv-nda-document { padding:14px; }
  .rv-nda-form-scroll { padding:18px; }
  .rv-viewer-toolbar { padding:0 8px; gap:7px; }
  .rv-ask-inline { padding:7px 10px; }
  .rv-pdf-page { max-width:calc(100% - 20px); margin-bottom:14px; }
}

.rv-thumb-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 600; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.rv-thumb-modal-inner { background: #fff; color: #111; border-radius: 8px; padding: 24px; max-width: 640px; width: 100%; }
.rv-thumb-modal-inner h3 { margin: 0 0 4px; font-weight: 600; }
.rv-thumb-modal-close { position: absolute; top: 50px; right: 40px; background: none; border: none; font-size: 22px; cursor: pointer; color: #fff; }
.rv-thumb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.rv-thumb-item { text-align: center; cursor: pointer; }
.rv-thumb-item canvas { width: 100%; border: 2px solid transparent; }
.rv-thumb-item.active canvas { border-color: var(--accent-2); }
.rv-thumb-item .num { font-size: 12px; color: #666; margin-top: 6px; }

/* -- Q&A / Tasks panels (reached from the header's tab strip) -- */
.rv-panel-tabs { max-width: 860px; margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; }
.rv-panel-tabs button { background: none; border: none; color: var(--text-dim); padding: 10px 4px; margin-right: 20px; cursor: pointer; font-size: 12.5px; border-bottom: 2px solid transparent; }
.rv-panel-tabs button.active { color: #fff; border-bottom-color: var(--accent); }
.rv-panel { max-width: 860px; margin: 0 auto; padding: 20px 24px 60px; }
.rv-faq-item, .rv-task-item { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 10px; }
.rv-ask-box { display: flex; gap: 8px; margin-top: 16px; }
.rv-ask-box textarea { flex: 1; background: #0e1725; border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12.5px; padding: 8px; min-height: 60px; }
/* First-use walkthrough and contextual hover help. Kept in one compact
   layer so it never changes the map/sidebar layout. */
.help-tour-btn { width:28px; height:28px; border-radius:50%; border:1px solid var(--border); background:var(--panel); color:var(--text); font-weight:800; cursor:pointer; }
.context-help-tooltip { position:fixed; z-index:10020; max-width:280px; padding:8px 10px; border:1px solid #334155; border-radius:7px; background:#07101d; color:#dbeafe; font-size:11px; line-height:1.45; box-shadow:0 8px 30px rgba(0,0,0,.42); pointer-events:none; opacity:0; transform:translateY(-3px); transition:opacity .12s ease,transform .12s ease; }
.context-help-tooltip.visible { opacity:1; transform:translateY(0); }
.onboarding-overlay { position:fixed; inset:0; z-index:10010; background:rgba(2,6,14,.54); pointer-events:auto; }
.onboarding-card { position:absolute; left:24px; bottom:24px; width:min(410px,calc(100vw - 48px)); box-sizing:border-box; padding:20px; border:1px solid #36516f; border-radius:12px; background:#0a1422; color:var(--text); box-shadow:0 18px 60px rgba(0,0,0,.55); }
.onboarding-progress { color:#60a5fa; font-size:10px; font-weight:800; letter-spacing:.12em; }

/* Platform boot feedback and on-land resource intelligence layers. */
.platform-loading { position:fixed; inset:0; z-index:30000; display:none; align-items:flex-start; justify-content:center; padding-top:18px; background:rgba(2,6,14,.32); pointer-events:auto; }
.platform-loading.visible { display:flex; }
.platform-loading-track { position:absolute; top:0; left:0; right:0; height:4px; background:rgba(148,163,184,.25); }
.platform-loading-fill { height:100%; width:18%; background:linear-gradient(90deg,#22c55e,#60a5fa); animation:platform-progress 1.5s ease-in-out infinite; }
.platform-loading span { padding:8px 12px; border:1px solid #334155; border-radius:7px; background:#07101d; color:#dbeafe; font-size:12px; box-shadow:0 8px 28px rgba(0,0,0,.4); }
@keyframes platform-progress { 0%{transform:translateX(-110%);width:28%} 60%{width:55%} 100%{transform:translateX(360%);width:28%} }
.app-password-wrap { position:relative; display:flex; }
.app-password-wrap input { padding-right:58px; }
.app-password-toggle { position:absolute; top:5px; right:6px; width:auto!important; padding:5px 8px!important; border:0!important; background:transparent!important; color:#60a5fa!important; font-size:11px!important; }
.resource-map-panel { position:absolute; z-index:700; left:14px; bottom:60px; width:min(330px,calc(100% - 28px)); box-sizing:border-box; padding:13px; border:1px solid rgba(96,165,250,.35); border-radius:10px; background:rgba(7,16,29,.92); color:#e5edf7; box-shadow:0 12px 34px rgba(0,0,0,.36); backdrop-filter:blur(8px); }
.resource-panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.resource-panel-head > div { display:flex; align-items:baseline; gap:9px; }
.resource-panel-head strong { font-size:13px; }
#resource-layer-status { color:#94a3b8; font-size:10px; }
#resource-layer-status.ready { color:#22c55e; }
#resource-layer-status.error { color:#ef4444; }
.resource-panel-head button { width:auto; padding:5px 9px; font-size:10px; }
.resource-panel-actions { display:flex; gap:6px; }
.resource-counts { display:flex; gap:12px; flex-wrap:wrap; margin:10px 0; color:#bac7d7; font-size:10.5px; }
.resource-counts b { color:#fff; }
.resource-map-panel label { display:block; margin-bottom:4px; color:#94a3b8; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.resource-map-panel input { width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid #334155; border-radius:6px; background:#0e1725; color:#fff; font-size:11px; }
.resource-visible { margin-top:7px; color:#94a3b8; font-size:10px; }
.resource-detail-panel { position:absolute; z-index:760; top:66px; right:14px; width:min(360px,calc(100% - 28px)); max-height:calc(100% - 132px); display:none; overflow-y:auto; box-sizing:border-box; padding:17px; border:1px solid #334155; border-radius:10px; background:#07101d; color:#e5edf7; box-shadow:0 18px 44px rgba(0,0,0,.48); }
.resource-detail-panel.open { display:block; }
.resource-detail-close { float:right; width:auto; padding:2px 7px; border:0; background:transparent; color:#94a3b8; font-size:22px; }
.resource-popup { font-size:11px; line-height:1.42; }
.resource-popup-type { color:#60a5fa; font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.resource-popup h3 { margin:5px 24px 10px 0; color:inherit; font-size:15px; line-height:1.25; }
.resource-popup dl { display:grid; grid-template-columns:86px minmax(0,1fr); gap:5px 9px; margin:0; }
.resource-popup dt { color:#94a3b8; }
.resource-popup dd { margin:0; overflow-wrap:anywhere; }
.resource-popup a { display:inline-block; margin-top:10px; color:#60a5fa; }
.resource-accuracy { margin-top:10px; padding-top:8px; border-top:1px solid #334155; color:#fbbf24; font-size:9.5px; }
.leaflet-popup-content .resource-popup { color:#111827; }
.leaflet-popup-content .resource-popup dt { color:#64748b; }
.leaflet-popup-content .resource-accuracy { border-color:#e2e8f0; color:#92400e; }
.resource-globe-modal { position:absolute; inset:10px; z-index:1200; display:none; overflow:hidden; border:1px solid #334155; border-radius:14px; background:#030712; box-shadow:0 22px 70px rgba(0,0,0,.62); }
.resource-globe-modal.open { display:block; }
.resource-globe-toolbar { position:absolute; z-index:2; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
.resource-globe-toolbar > div { display:flex; flex-direction:column; gap:2px; padding:9px 12px; border:1px solid rgba(148,163,184,.35); border-radius:8px; background:rgba(7,16,29,.88); color:#fff; }
.resource-globe-toolbar strong { font-size:13px; }
.resource-globe-toolbar span { color:#aebed0; font-size:10px; }
.resource-globe-toolbar button { width:34px; height:34px; padding:0; border-radius:50%; background:rgba(7,16,29,.92); color:#fff; font-size:21px; pointer-events:auto; }
#resource-globe-map { position:absolute; inset:0; }
.resource-globe-legend { position:absolute; z-index:2; left:14px; bottom:14px; display:flex; gap:12px; flex-wrap:wrap; padding:8px 11px; border:1px solid rgba(148,163,184,.3); border-radius:7px; background:rgba(7,16,29,.86); color:#dbeafe; font-size:10px; pointer-events:none; }
.resource-globe-legend i { display:inline-block; width:8px; height:8px; margin-right:4px; border-radius:50%; }
.resource-globe-legend i.steel { background:#ef4444; }
.resource-globe-legend i.mine { background:#f59e0b; }
.resource-globe-modal .maplibregl-popup-content { color:#111827; }
@media (max-width:760px) { .resource-map-panel{bottom:52px}.resource-detail-panel{top:54px;max-height:calc(100% - 108px)} }
.onboarding-card h3 { margin:8px 0; font-size:18px; }
.onboarding-card p { margin:0 0 18px; color:var(--text-dim); font-size:13px; line-height:1.55; }
.onboarding-actions { display:flex; align-items:center; gap:8px; }
.onboarding-actions button { border:1px solid var(--border); border-radius:6px; padding:7px 12px; background:#142033; color:var(--text); cursor:pointer; }
.onboarding-actions .tour-skip { border-color:transparent; background:transparent; color:var(--text-dim); }
.onboarding-actions .tour-next { border-color:#2563eb; background:#2563eb; color:white; }
.onboarding-highlight { position:relative; z-index:10011 !important; outline:3px solid #60a5fa !important; outline-offset:3px; box-shadow:0 0 0 8px rgba(96,165,250,.2) !important; }