/* AISfeed — dark chart-style UI. The map is full-bleed, so every floating control
   is offset by the safe-area insets to clear the Dynamic Island and home indicator
   when running as an installed iOS app. */

:root {
  --bg: #0b1f2a;
  --panel: rgba(9, 26, 36, 0.92);
  --line: rgba(140, 190, 215, 0.22);
  --fg: #e8f2f7;
  --muted: #8fadbd;
  --accent: #47c7f5;
  --ok: #3ddc84;
  --warn: #ffb020;
  --bad: #ff5c5c;

  --footer-h: 28px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Behave like an app, not a document: no rubber-band scroll, no text selection,
     no double-tap zoom fighting the map's own gestures. */
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}

#map { position: absolute; inset: 0; background: var(--bg); }
.leaflet-container { background: #08161e; font: inherit; }

/* --- top bar --- */
#topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(var(--safe-t) + 8px) calc(var(--safe-r) + 12px) 8px calc(var(--safe-l) + 12px);
  background: linear-gradient(to bottom, rgba(7, 20, 28, 0.95), rgba(7, 20, 28, 0));
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }

.brand {
  display: flex; align-items: center; gap: 7px;
  font-weight: 650; letter-spacing: 0.02em;
  color: var(--fg);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.brand svg { color: var(--accent); }

.status {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  backdrop-filter: blur(8px);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot[data-state="connected"] { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot[data-state="connecting"], .dot[data-state="reconnecting"] { background: var(--warn); animation: pulse 1.2s infinite; }
.dot[data-state="offline"] { background: var(--bad); }
@keyframes pulse { 50% { opacity: 0.3; } }

/* --- floating controls --- */
#controls {
  position: absolute;
  right: calc(var(--safe-r) + 12px);
  bottom: calc(var(--safe-b) + 58px);
  z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
}
.btn {
  position: relative;
  width: 44px; height: 44px;      /* 44px is the iOS minimum comfortable tap target */
  display: grid; place-items: center;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.94); }
.btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  color: #04212e; background: var(--accent);
  border-radius: 999px;
}

/* --- nearby list --- */
#panel {
  position: absolute;
  z-index: 600;
  top: calc(var(--safe-t) + 52px);
  right: calc(var(--safe-r) + 12px);
  width: min(320px, calc(100vw - var(--safe-l) - var(--safe-r) - 24px));
  max-height: min(60vh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.panel-head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: inherit;
  border-bottom: 1px solid var(--line);
}
#vesselList { list-style: none; margin: 0; padding: 4px; }
#vesselList li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 8px;
  border-radius: 8px;
  cursor: pointer;
}
#vesselList li:hover { background: rgba(71, 199, 245, 0.1); }
#vesselList .nm { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vesselList .dist { font-variant-numeric: tabular-nums; color: var(--accent); font-size: 12px; }
#vesselList .sub { color: var(--muted); font-size: 11px; }
.swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* --- footer --- */
#footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 500;
  display: flex; align-items: center; gap: 8px;
  padding: 6px calc(var(--safe-r) + 12px) calc(var(--safe-b) + 6px) calc(var(--safe-l) + 12px);
  font-size: 11px;
  background: linear-gradient(to top, rgba(7, 20, 28, 0.95), rgba(7, 20, 28, 0));
}
.muted { color: var(--muted); }
.sep { color: var(--line); }
.linkbtn {
  background: none; border: none; padding: 0;
  color: var(--accent); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

/* --- transient hint / prompt --- */
.hint {
  position: absolute;
  z-index: 700;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b) + 42px);
  max-width: min(420px, calc(100vw - 32px));
  padding: 9px 14px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.hint[data-kind="warn"] { border-color: var(--warn); color: #ffe0a8; }

/* Leaflet parks the zoom control and the attribution at the bottom edge, exactly
   where the footer lives. At phone width they overlap it outright, so lift every
   bottom-anchored Leaflet control clear of the footer and the home indicator. */
.leaflet-bottom { bottom: calc(var(--safe-b) + var(--footer-h)); }
.leaflet-left  { left: var(--safe-l); }
.leaflet-right { right: var(--safe-r); }
.leaflet-control-attribution { font-size: 10px; }

/* On a phone the attribution is wider than the screen and wraps onto two rows,
   eating the map; trim it to the essentials. */
@media (max-width: 520px) {
  .leaflet-control-attribution { max-width: 62vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #footer { font-size: 10px; }
}

/* --- markers --- */
/* The wrapper is the touch target (36px); the glyph inside stays small. */
.vessel-icon {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.vessel-icon svg { display: block; overflow: visible; }
.vessel-icon.stale { opacity: 0.42; }
/* Markers overlap once their hit boxes are this large; keep the pointer cursor and
   let Leaflet's z-ordering surface whichever is on top. */
.leaflet-marker-icon { cursor: pointer; }

/* Same 36px touch target as vessels, so your own position is as clickable. */
.me-icon { width: 100%; height: 100%; display: grid; place-items: center; cursor: pointer; }
.me-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 14px rgba(71, 199, 245, 0.9);
}

/* Leaflet popups restyled to match the dark chart theme. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; -webkit-user-select: text; user-select: text; }
.leaflet-popup-close-button { color: var(--muted) !important; }
.popup h3 { margin: 0 0 6px; font-size: 14px; }
.popup .grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.popup .k { color: var(--muted); }
.popup .v { font-variant-numeric: tabular-nums; }
.leaflet-control-attribution { background: rgba(7, 20, 28, 0.8) !important; color: var(--muted) !important; }
.leaflet-control-attribution a { color: var(--accent) !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}