/* Snaps wie Snapchat (15.10.2026, snaps.js). Nur Variablen aus meeyo.css — Hell und Dunkel stimmen von selbst.
   🟥 Foto-Snap = Korall, 🟪 Video-Snap = Violett; gefuellt = neu / unterwegs, nur Rand = geoeffnet (wie Snapchat). */

.snap-kachel { max-width: min(300px, 72vw) }
.snap-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--linie);
  background: var(--pflaume); color: var(--milch); font: inherit; text-align: left; width: 100% }
button.snap-zeile { cursor: pointer; margin: 0; box-shadow: none }
button.snap-zeile:disabled { cursor: default; color: var(--nebel) }
.snap-knopf:not(:disabled) { border-color: var(--korall) }
.snap-text { font-weight: 700; font-size: .9rem }
.snap-unter { font-size: .78rem; color: var(--nebel); padding-left: 4px }
.snap-sym { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px; border: 2.5px solid var(--korall); background: transparent }
.snap-sym.snap-video { border-color: var(--violett) }
.snap-sym.voll { background: var(--korall) }
.snap-sym.snap-video.voll { background: var(--violett) }
.snap-zurueck, .snap-retten { justify-self: start }

/* Serie in der Chatliste und im Gespraechskopf */
.snap-serie { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: .82rem; font-weight: 800; color: var(--milch); white-space: nowrap }
.snap-serie.laeuft-ab { color: var(--gelb) }

/* Vollbild mit Zeitbalken */
.snap-voll { position: fixed; inset: 0; z-index: 210; background: #000; display: grid; place-items: center; padding: 0;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer }
.snap-rahmen { position: relative; width: 100vw; height: 100vh; height: 100dvh; display: grid; place-items: center; overflow: hidden; container-type: inline-size }
.snap-rahmen img, .snap-rahmen video { max-width: 100vw; max-height: 100vh; max-height: 100dvh; object-fit: contain; -webkit-user-drag: none; pointer-events: none }
.snap-balken { position: absolute; z-index: 3; top: calc(10px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, .28); overflow: hidden }
.snap-balken i { display: block; height: 100%; width: 0; background: #fff }
.snap-balken.laeuft i { animation: snap-lauf linear forwards; animation-duration: 5s }
.snap-balken.unendlich i { width: 100% }
@keyframes snap-lauf { from { width: 100% } to { width: 0 } }
@media (prefers-reduced-motion: reduce) { .snap-balken.laeuft i { animation: none; width: 100% } }
.snap-zu, .snap-melden { position: absolute; z-index: 4; top: calc(22px + env(safe-area-inset-top, 0px)); width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.15rem; cursor: pointer; padding: 0; margin: 0; box-shadow: none }
.snap-zu { right: 14px } .snap-melden { right: 64px }
.snap-hinweis { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); margin: 0; color: rgba(255, 255, 255, .78);
  font-size: .74rem; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .7) }
.snap-wasserzeichen { position: absolute; inset: -20%; z-index: 2; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around;
  gap: 18px 40px; transform: rotate(-24deg); pointer-events: none }
.snap-wasserzeichen span { color: rgba(255, 255, 255, .16); font-weight: 800; font-size: .95rem; letter-spacing: .04em; white-space: nowrap;
  text-shadow: 0 0 2px rgba(0, 0, 0, .25) }

/* Kamera «Senden an …»: Als Snap / Als Foto im Chat, Anzeigedauer, Video halten */
.snap-art { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px }
.snap-art label { flex: 1 1 140px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--linie);
  background: var(--pflaume); cursor: pointer; font-weight: 700 }
.snap-art label:has(input:checked) { border-color: var(--korall); background: var(--pflaume-hell) }
.snap-art input { accent-color: var(--korall); margin: 0; width: auto; min-width: 0; flex: 0 0 auto; padding: 0; border: 0; box-shadow: none }
.snap-art label > .snap-sym { width: 16px; height: 16px }
.snap-zeit { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 8px }
.snap-zeit .chip.an { background: var(--verlauf); color: #fff; border-color: transparent }
.ew-ausloeser.nimmt-auf { background: conic-gradient(var(--korall) calc(var(--anteil, 0) * 1turn), rgba(255, 255, 255, .25) 0); box-shadow: 0 0 0 6px rgba(255, 79, 122, .3) }
.snap-aufnahme { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; background: rgba(0, 0, 0, .55); color: #fff;
  border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: .85rem }
.snap-aufnahme::before { content: '●'; color: var(--rot); margin-right: 6px }

/* 16.10.2026 (Owner: «so einfach wie bei Snapchat selbst»): Fortschritt am Auslöser (oben, --anteil), leiser Zähler, Antworten,
   Halten = Pause, «Senden an …» mit Abschnitten (Beste Freunde · Zuletzt · Alle), Suche und gesperrten Zeilen samt Grund */
.snap-noch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; background: rgba(0, 0, 0, .35); color: rgba(255, 255, 255, .88);
  border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: .78rem; pointer-events: none; white-space: nowrap }
.snap-antworten { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); bottom: calc(52px + env(safe-area-inset-bottom, 0px)); border: 0;
  border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-weight: 800; padding: 10px 18px; cursor: pointer; margin: 0; box-shadow: none }
.snap-antworten:focus-visible { outline: 3px solid var(--korall); outline-offset: 3px }
.snap-voll.pause .snap-balken i { animation-play-state: paused }
.ew-senden-abschnitt { list-style: none; color: var(--nebel); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 12px 2px 4px }
.ew-senden-zeile.gesperrt { opacity: .55; cursor: not-allowed }
.ew-senden-zeile small { display: block; color: var(--nebel); font-weight: 400; font-size: .76rem }
.ew-senden-suche { width: 100%; margin: 4px 0 8px }
.ew-senden-gewaehlt { font-weight: 700; margin: 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }