:root {
  --orange: #2E6BF0;
  --orange-2: #0FB5DE;
  --navy: #142136;
  --text: #1c1c1e;
  --muted: #6b6b70;
  --bg: #fafafb;
  --card: #ffffff;
  --border: #e6e6ea;
  --red: #ff3b30;
  --green: #34c759;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); }
input, button { font: inherit; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--red); font-size: 13px; margin-top: 8px; }

/* Splash + Name-Prompt + Loading */
.screen { position: fixed; inset: 0; }
.splash-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--card); padding: 32px 28px; border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,.08); width: 90%; max-width: 360px; text-align: center;
}
.splash-card .logo { width: 64px; height: 64px; border-radius: 16px; }
.logo-link { display: inline-block; line-height: 0; }
.back-home { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--muted); text-decoration: none; }
.back-home:hover { color: var(--orange); text-decoration: underline; }
.splash-card h1 { font-size: 22px; margin: 16px 0 4px; font-weight: 800; }
.splash-card p { margin: 0 0 16px; font-size: 14px; }
.splash-card input {
  width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 12px;
  font-size: 16px; text-align: center; letter-spacing: 2px; font-weight: 600;
}
/* Nur der Code-Input wird zwangs-uppercase dargestellt (Beitrittscodes
   sind 6-stellige Großbuchstaben + Ziffern, dann sieht "abc123" und
   "ABC123" gleich aus während das Tippen). Der Name-Input bleibt frei
   in Groß-/Kleinschreibung wie der User ihn eingibt. */
.splash-card input#code-input {
  text-transform: uppercase;
}
/* Code-Feld beim Direkt-Link: vorausgefüllt + gesperrt (man sieht nur, welchem
   Trip man beitritt; geändert wird hier nur der Name darüber). */
.splash-card input.readonly {
  background: var(--bg, #f2f2f4); color: var(--muted, #777);
  cursor: default; letter-spacing: 3px;
}
.splash-card input:focus { outline: 2px solid var(--orange); border-color: transparent; }
.splash-card input.readonly:focus { outline: none; }
.splash-card button {
  width: 100%; margin-top: 12px; padding: 14px; border: none; border-radius: 12px;
  background: var(--orange); color: white; font-weight: 600; font-size: 16px; cursor: pointer;
}
.splash-card button:hover { background: var(--orange-2); }
.splash-card button:disabled { opacity: .5; cursor: not-allowed; }

/* Sprachumschalter (im Splash- und Name-Prompt-Card) */
.lang-switch {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 5px; margin-top: 18px;
}
.lang-switch a {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  padding: 4px 9px; border-radius: 999px; text-decoration: none;
  color: var(--muted); background: var(--bg);
  border: 1px solid var(--border);
}
.lang-switch a:hover { background: #f0f0f2; }
.lang-switch a.active { background: var(--orange); color: white; border-color: var(--orange); }

/* Loading spinner */
#loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--bg); }
.spinner {
  width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--orange);
  border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Main app layout */
#app {
  display: grid;
  grid-template-rows: 56px 1fr;
  grid-template-columns: 1fr 360px;
  grid-template-areas:
    "topbar topbar"
    "map sidebar";
}
@media (max-width: 720px) {
  #app {
    grid-template-rows: 56px 60% 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "map"
      "sidebar";
  }
}

.topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

/* S2G-Brand-Lockup in der Topbar — werbewirksame Platzierung damit
   Web-Trip-Gäste die App-Identität sehen und über den Klick zurück zur
   Marketing-Landing kommen. Auf schmalen Screens (Mobile) nur das Logo,
   ohne Wordmark, damit der Trip-Pill nicht aus der Bar gequetscht wird. */
.brand-lockup {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: inherit;
  padding: 4px 6px; border-radius: 8px;
  transition: background 0.15s ease;
}
.brand-lockup:hover { background: var(--bg); }
.brand-logo {
  width: 30px; height: 30px;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.brand-text { display: none; flex-direction: column; line-height: 1.05; }
.brand-name { font-size: 15px; font-weight: 800; letter-spacing: -0.3px; color: var(--navy); }
.brand-tag  { font-size: 10px; font-weight: 600; color: var(--orange); }
@media (min-width: 540px) {
  .brand-text { display: inline-flex; }
}
.trip-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: var(--bg); border-radius: 999px;
  font-weight: 600; font-size: 13px;
}
.pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }
.topbar button {
  margin-left: auto; background: var(--bg); border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 10px; cursor: pointer; font-size: 16px;
}

#map { grid-area: map; position: relative; }
#map .me-marker, #map .other-marker {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid white; box-shadow: 0 2px 6px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: white;
  position: relative;
}
/* Activity-Symbol als kleines Overlay rechts unten am Member-Pin —
   analog zur iOS-App: 🚶 walking · 🚗 driving · 🧍 stationary. */
#map .me-marker .activity, #map .other-marker .activity {
  position: absolute;
  bottom: -4px; right: -6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  border: none;
}
#map .goal-marker {
  width: 36px; height: 36px; border-radius: 50%; background: var(--red);
  border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 18px;
  cursor: pointer;
}

/* Map-Action-Bar (Floating Controls, rechts oben) — Leaflet's Pane-
   z-Indizes gehen bis 700 (popup-pane), daher 1000 für die Action-Bar
   damit sie auch über ggf. geöffneten Marker-Popups bleibt. */
.map-actions {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 1000;
  display: flex; flex-direction: column; gap: 8px;
}
.map-action {
  width: 44px; height: 44px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.map-action:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.map-action:active { transform: scale(0.95); }
.map-action.muted { background: var(--orange, #2E6BF0); }

/* Popover für Marker-Tap */
.map-popover {
  position: absolute;
  z-index: 1100; /* über Action-Bar damit klicks aufs Popover nicht versehentlich durchschlagen */
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 12px 14px;
  min-width: 200px;
  border: 1px solid var(--border);
}
.popover-title {
  font-weight: 700; font-size: 14px;
  margin-bottom: 8px;
  color: var(--text);
}
.popover-actions {
  display: flex; flex-direction: column; gap: 4px;
}
.popover-actions button {
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.popover-actions button:hover { background: var(--bg); }
.popover-actions .icon { font-size: 16px; width: 20px; text-align: center; }
.popover-actions .danger { color: var(--red); }

/* Hold-to-Talk-Button im Member-Aktions-Popover („Funk an X"). */
.popover-actions button.hold {
  background: var(--orange, #2E6BF0);
  color: white;
  font-weight: 600;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.popover-actions button.hold:hover {
  background: var(--orange, #2E6BF0);
  filter: brightness(1.05);
}
.popover-actions button.hold.active {
  background: #d9743a;
  box-shadow: 0 0 0 3px rgba(240, 140, 74, 0.4);
}

/* Member-Header im Popover (Avatar + Name + Subtitle) — analog iOS MemberActionsSheet. */
.popover-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  margin-bottom: 6px;
}
.popover-header .member-avatar { width: 36px; height: 36px; font-size: 13px; flex: 0 0 36px; }
.popover-name-block { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.popover-name {
  font-weight: 700; font-size: 15px; color: var(--text);
  display: flex; align-items: center; gap: 4px;
}
.popover-name .lbl-you { color: var(--orange, #2E6BF0); font-weight: 400; font-size: 13px; }
.popover-name .lead-crown { font-size: 13px; }
.popover-sub { font-size: 12px; color: var(--muted, #888); }

/* Lead-Krone in der Crew-Liste */
.member-row .lead-crown { font-size: 12px; margin-left: 3px; opacity: .9; }

/* Sidebar (Crew + Chat) */
#sidebar {
  grid-area: sidebar;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  background: var(--card);
  overflow: hidden;
}
@media (max-width: 720px) {
  #sidebar { border-left: none; border-top: 1px solid var(--border); }
}

.tabs { display: flex; border-bottom: 1px solid var(--border); }
.tab {
  flex: 1; padding: 14px; background: none; border: none; cursor: pointer;
  font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent;
}
.tab.active { color: var(--orange); border-bottom-color: var(--orange); }
.tab .badge {
  display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; background: var(--bg); color: var(--muted); min-width: 22px;
}
.tab .badge.red { background: var(--red); color: white; }

.panel { flex: 1; display: none; overflow: hidden; flex-direction: column; }
.panel.active { display: flex; }

#member-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; }
.member-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.member-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 14px; font-weight: 600; }
.member-sub { font-size: 12px; color: var(--muted); }
.member-row.stale { opacity: .55; }
.member-row.stale .member-sub { color: var(--orange); }
.member-row.hidden-by-me { opacity: .4; }
.member-row.hidden-by-me .member-sub::after { content: var(--lbl-hidden, " · ausgeblendet"); font-style: italic; }
.member-row.me .member-name::after { content: var(--lbl-me, " · du"); color: var(--orange); font-weight: 400; }
.member-row .member-toggle {
  background: none; border: none; padding: 6px;
  cursor: pointer; font-size: 16px; opacity: 0.5;
  color: var(--muted);
}
.member-row .member-toggle:hover { opacity: 1; }
.member-row.hidden-by-me .member-toggle { opacity: 0.9; }
/* Inline-Aktionsbuttons in der Crewliste — Kompass + Mic (Eye nutzt
   member-toggle s.o.). Optisch deckungsgleich mit dem Eye-Button. */
.member-row .member-action {
  background: none; border: none; padding: 6px;
  cursor: pointer; font-size: 16px; opacity: 0.55;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.member-row .member-action:hover:not(:disabled) { opacity: 1; }
.member-row .member-action:disabled { opacity: 0.2; cursor: not-allowed; }
/* Mic-Button blinkt rot solange aktiv gefunkt wird (Hold-to-Talk). */
.member-row .member-mic.transmitting { color: var(--red); opacity: 1; }
/* Wenn das Mitglied gerade nichts hoeren kann: 🔇 rot statt 📡. */
.member-row .member-mic.blocked { color: var(--red); opacity: 0.85; }
/* TravelMode-Emoji etwas kleiner und gedämpft neben dem Namen — analog
   iOS' tertiary travelMode-Icon. */
.member-row .travel-mode { font-size: 12px; margin-left: 3px; opacity: 0.8; }

#messages { flex: 1; overflow-y: auto; padding: 12px; }
.msg { margin-bottom: 6px; max-width: 80%; }
.msg.incoming { align-self: flex-start; }
.msg.outgoing { align-self: flex-end; margin-left: auto; }
.msg.system { text-align: center; font-size: 11px; color: var(--muted); margin: 8px 0; max-width: 100%; }
.msg .author { font-size: 11px; font-weight: 700; color: var(--orange); margin-bottom: 2px; }
.msg .bubble {
  padding: 8px 12px; border-radius: 16px;
  background: var(--bg); font-size: 14px;
}
.msg.outgoing .bubble { background: var(--orange); color: white; border-bottom-right-radius: 6px; }
.msg.incoming .bubble { border-bottom-left-radius: 6px; }

.input-row {
  display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--card);
}
.input-row input {
  flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px;
}
.input-row input:focus { outline: 2px solid var(--orange); border-color: transparent; }
.input-row button {
  background: var(--orange); color: white; border: none; padding: 0 16px; border-radius: 999px;
  font-weight: 600; cursor: pointer;
}
.input-row button:disabled { opacity: .4; cursor: not-allowed; }

.hint {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%);
  background: var(--orange); color: white; padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  z-index: 100;
}

/* ─── Web-PTT (Funk-Leiste, schwebt unten in der Karte) ─────────────── */
.ptt-bar {
  position: absolute;
  bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 1000;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ptt-activate {
  background: var(--navy); color: white; border: none;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: 14px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.ptt-activate:hover { background: #2a4d75; }
.ptt-activate:disabled { opacity: .7; cursor: default; }
.ptt-live { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ptt-talk {
  display: flex; align-items: center; gap: 10px;
  background: var(--orange); color: white; border: none;
  padding: 15px 28px; border-radius: 999px;
  font-weight: 800; font-size: 15px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(46,107,240,.5);
  user-select: none; -webkit-user-select: none; touch-action: none;
  transition: background .1s ease, box-shadow .1s ease, transform .1s ease;
}
.ptt-talk:active { transform: scale(.97); }
.ptt-talk.transmitting {
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(255,59,48,.22), 0 4px 16px rgba(255,59,48,.5);
}
.ptt-talk-icon { font-size: 19px; }
.ptt-meta {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 4px 6px 4px 12px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.ptt-status { font-size: 12px; font-weight: 600; color: var(--muted); }
.ptt-status.speaking { color: var(--green); }
.ptt-leave {
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 50%; cursor: pointer;
  font-size: 11px; line-height: 1; color: var(--muted);
}
.ptt-leave:hover { color: var(--red); }

/* Zahnrad-Button für Funk-Einstellungen (Empfangs-Lautstärke + Mic-Hinweis).
   Tester-Feedback Jörgen: Erst-Permission-Slider war nicht wiederzufinden,
   jetzt persistent erreichbar. */
.ptt-settings {
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 50%; cursor: pointer;
  font-size: 12px; line-height: 1; color: var(--muted);
  padding: 0;
}
.ptt-settings:hover { color: var(--navy); }
.ptt-settings-popover {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 10px;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  width: 260px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 10px;
  z-index: 1001;
}
.ptt-setting-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink);
}
.ptt-setting-label { flex-shrink: 0; font-weight: 600; }
.ptt-setting-row input[type=range] {
  flex: 1; accent-color: var(--orange);
}
.ptt-setting-value {
  flex-shrink: 0; font-size: 12px; color: var(--muted);
  min-width: 36px; text-align: right; font-variant-numeric: tabular-nums;
}
.ptt-setting-hint {
  margin: 0; font-size: 11px; line-height: 1.4; color: var(--muted);
}