/* App-Over (Stufe 1) — digitales Hold-to-talk Over */

.over-hold-btn {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: linear-gradient(135deg, #e63946, #b71c1c);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, background 0.2s, opacity 0.2s;
}
.over-hold-btn:active { transform: scale(0.96); }
.over-hold-btn.is-recording {
  background: linear-gradient(135deg, #ff6b35, #d84315);
  box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.35);
  animation: over-pulse 1s infinite;
}
.over-hold-btn.is-busy {
  background: #555;
  cursor: not-allowed;
  opacity: 0.75;
}
.over-hold-btn:disabled { cursor: not-allowed; }

.over-mic-icon { font-size: 1.1rem; }
.over-hold-label { font-size: 0.8rem; letter-spacing: 0.04em; }

/* Floating-Mikro-Button (nur wenn QRV oder Mithören an) */
.over-float-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: linear-gradient(135deg, #e63946, #b71c1c);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 9990;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.over-float-btn[hidden] { display: none; }
.over-float-btn.is-busy { background: #555; }
.over-float-btn.is-recording { box-shadow: 0 0 0 5px rgba(230,57,70,0.4); }

/* Mithören-Schalter */
.over-mithoeren {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Eingehendes Over — Banner-Zeile */
.over-banner {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9995;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 520px);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(20, 20, 30, 0.92);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 0.9rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.over-banner[hidden] { display: none; }
.over-banner .over-ring {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e63946;
  animation: over-pulse 1s infinite;
}
.over-distanz-badge {
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
}
.over-banner-bar {
  flex: 1;
  height: 5px;
  min-width: 60px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  overflow: hidden;
}
.over-banner-fill {
  height: 100%;
  width: 100%;
  background: #4caf50;
  border-radius: 999px;
  transition: width 0.2s linear;
}
.over-banner-report { color: #ffcc80; font-size: 0.75rem; text-decoration: none; }

/* Hinweis (Mikro verweigert etc.) */
.over-hint {
  position: fixed;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9996;
  background: #b71c1c;
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.over-hint[hidden] { display: none; }

/* Karten-Pin pulsiert */
.over-map-pin {
  position: absolute;
  z-index: 1000;
  transform: translate(-50%, -100%);
  pointer-events: none;
  font-size: 0.85rem;
}
.over-map-pin.is-pulsing { animation: over-pulse 0.9s infinite; }

.over-feed-entry .activity-icon { font-size: 1rem; }

@keyframes over-pulse {
  0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(230, 57, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}


/* Floating-Cluster: Mithören-Schalter + Mikro-Button gestapelt */
.over-float-cluster {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(164px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 9990;
}
.over-mithoeren-float {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.over-mithoeren-float input { display: none; }
.over-mithoeren-float .over-mithoeren-icon { font-size: 1.1rem; opacity: 0.45; }
.over-mithoeren-float input:checked + .over-mithoeren-icon {
  opacity: 1;
  filter: drop-shadow(0 0 4px #4caf50);
}
.over-mithoeren-float input:checked ~ .over-mithoeren-icon,
.over-mithoeren-float:has(input:checked) {
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.6);
}

/* Mithören-Gruppe (mit Untermenü und Hinweisblase) */
.over-mithoeren-group {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ⋮ hängt außerhalb des Flusses, damit der Kopfhörer exakt über dem Mikro-Button zentriert bleibt */
.over-info-btn {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.over-info-btn:hover,
.over-info-btn:focus-visible {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
.over-sub-menu {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
  background: rgba(30,30,40,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 6px 10px;
  white-space: nowrap;
  z-index: 9991;
}
.over-sub-menu[hidden] { display: none; }
.over-sub-menu .over-roger {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-size: 0.8rem;
  color: #fff;
}
.over-sub-menu .over-roger input { display: none; }
.over-sub-menu .over-roger-icon { font-size: 1rem; opacity: 0.45; }
.over-sub-menu .over-roger input:checked + .over-roger-icon {
  opacity: 1;
  filter: drop-shadow(0 0 4px #ffcc80);
}

/* Hilfe-Link (?-Icon) */
.over-help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
  font-size: 0.65rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.over-help-link:hover,
.over-help-link:focus-visible {
  background: rgba(255,255,255,0.3);
  color: #fff;
}
.over-banner-help {
  margin-left: 4px;
}

/* Abbrechen-Button (nur waehrend der Aufnahme sichtbar) */
.over-cancel-float {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(230,57,70,0.85);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.over-cancel-float[hidden] { display: none; }

@media (max-width: 768px) {
  .over-float-cluster {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(152px + env(safe-area-inset-bottom, 0px));
  }
}