/* Fotos, Videos, Emojis und Reaktionen in jedem Chat (10.10.2026, chatmedien.js). Nur Variablen aus meeyo.css (--nacht, --pflaume,
   --pflaume-hell, --linie, --milch, --nebel, --korall, --violett, --verlauf, --gelb, --radius, --radius-klein) — Hell und Dunkel
   stimmen damit von selbst. --g ist die Groesse eines Overlay-Textes/Stickers (vom JavaScript je Element gesetzt). */

/* ── Medium in der Nachricht ── */
.cm-medium { display: grid; gap: 6px; margin: 2px 0 4px; max-width: min(320px, 72vw) }
.cm-rahmen { position: relative; width: 100%; max-height: 420px; border-radius: 14px; overflow: hidden; background: var(--nacht); container-type: inline-size }
.cm-inhalt { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; -webkit-user-drag: none; user-select: none }
video.cm-inhalt { cursor: default; object-fit: contain; background: #000 }
.cm-unscharf { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(6px) saturate(1.1); transform: scale(1.08) }
.cm-antippen { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; box-shadow: none; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 12px; text-align: center;
  background: rgba(22, 10, 28, .45); color: #fff; border: 0; cursor: pointer; font: inherit }
.cm-antippen b { font-size: .95rem } .cm-antippen small { font-size: .74rem; opacity: .85; max-width: 22ch }
.cm-antippen-sym { font-size: 1.6rem }
.cm-live { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  padding: 3px 7px; border-radius: 999px }
.cm-platz { padding: 12px 14px; border-radius: 14px; background: var(--pflaume-hell); color: var(--nebel); font-size: .88rem; font-style: italic;
  border: 1px dashed var(--linie) }
.cm-stand { font-size: .78rem; opacity: .9 }
.cm-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.cm-mini { background: transparent; border: 1px solid var(--linie); color: inherit; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .74rem;
  font-weight: 700; cursor: pointer }
.cm-mini:hover, .cm-mini:focus-visible { border-color: var(--korall) }
.cm-bald { font-size: .74rem; color: var(--gelb); font-weight: 700 }
.cm-hinweis-klein { font-size: .76rem; color: var(--nebel) }
/* «Einmal ansehen»: ein klarer Knopf statt eines Bildes — wie bei Snapchat */
.cm-einmal-knopf { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--korall);
  background: var(--pflaume); color: var(--milch); font: inherit; font-weight: 700; cursor: pointer; text-align: left }
.cm-einmal-knopf:disabled { cursor: default; border-color: var(--linie); color: var(--nebel) }
.cm-einmal-sym { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--verlauf); color: #fff;
  font-weight: 800; font-size: .8rem }
.cm-einmal-knopf:disabled .cm-einmal-sym { background: var(--pflaume-hell); color: var(--nebel) }

/* Overlay (App-Bearbeitung und Editor-Ebene) */
.cm-ov { position: absolute; inset: 0; pointer-events: none }
.cm-ov-text, .cm-ov-sticker { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1.1; pointer-events: auto }
.cm-ov-text { font-weight: 800; font-size: calc(var(--g) * 5cqw); text-shadow: 0 1px 4px rgba(0, 0, 0, .55) }
.cm-ov-sticker { font-size: calc(var(--g) * 7cqw) }
.cm-ov-striche { position: absolute; inset: 0; width: 100%; height: 100% }

/* Vollbild */
.cm-voll { position: fixed; inset: 0; z-index: 200; background: rgba(8, 4, 12, .94); display: grid; place-items: center; padding: 48px 12px 24px }
.cm-voll-rahmen { position: relative; max-width: 100%; max-height: 100%; container-type: inline-size; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none }
.cm-voll-rahmen img, .cm-voll-rahmen video { display: block; max-width: 96vw; max-height: 82vh; border-radius: 12px; -webkit-user-drag: none }
.cm-voll-zu { position: absolute; top: 10px; right: 12px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16);
  color: #fff; font-size: 1.2rem; cursor: pointer }
.cm-voll-einmal { position: absolute; top: 14px; left: 16px; right: 64px; margin: 0; color: #fff; font-weight: 700; font-size: .88rem }

/* ── Reaktionen ── */
.cm-reagierbar { position: relative; -webkit-touch-callout: none }
.cm-reaktionen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px }
.cm-reaktion { border: 1px solid var(--linie); background: var(--pflaume); color: var(--milch); border-radius: 999px; padding: 1px 8px; font: inherit;
  font-size: .82rem; line-height: 1.5; cursor: pointer }
.cm-reaktion.meine { border-color: var(--korall); background: var(--pflaume-hell) }
.cm-wahl { position: absolute; z-index: 40; bottom: calc(100% + 6px); left: 0; display: flex; gap: 2px; padding: 5px; border-radius: 999px;
  background: var(--pflaume); border: 1px solid var(--linie); box-shadow: 0 12px 30px rgba(0, 0, 0, .35) }
.nachricht.ich .cm-wahl, .ew-chat-nachricht.ich .cm-wahl, .gr-n.meins .cm-wahl { left: auto; right: 0 }
.cm-wahl-e { border: 0; background: transparent; font-size: 1.45rem; line-height: 1; padding: 6px; border-radius: 50%; cursor: pointer; transition: transform .12s }
.cm-wahl-e:hover, .cm-wahl-e:focus-visible { transform: scale(1.2); background: var(--pflaume-hell) }
.cm-wahl-e.an { background: var(--pflaume-hell); box-shadow: 0 0 0 2px var(--korall) inset }

/* ── Verfasser: 📷 neben dem Feld ── */
.cm-anhang { position: relative; display: inline-flex }
.cm-anhang-knopf { background: transparent; border: 1px solid var(--linie); color: var(--milch); border-radius: var(--radius-klein); width: 40px; height: 40px;
  font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; padding: 0 }
.cm-anhang-knopf:hover { border-color: var(--korall) }
.cm-anhang-menue { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 30; display: grid; gap: 4px; padding: 6px; min-width: 190px;
  background: var(--pflaume); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(0, 0, 0, .45) }
.cm-anhang-wahl { background: transparent; border: 0; color: var(--milch); text-align: left; padding: 9px 10px; border-radius: 10px; font: inherit; cursor: pointer }
.cm-anhang-wahl:hover, .cm-anhang-wahl:focus-visible { background: var(--pflaume-hell) }

/* ── Editor ── */
.cm-schatten { position: fixed; inset: 0; z-index: 180; background: rgba(8, 4, 12, .82); display: grid; place-items: center; padding: 10px }
.cm-editor { width: min(560px, 100%); max-height: calc(100dvh - 20px); overflow-y: auto; background: var(--nacht); color: var(--milch);
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px }
.cm-editor > * { flex: 0 0 auto }   /* nichts schrumpft — sonst schob sich das Bild ueber die Werkzeuge (Sichtprobe 10.10.) */
.cm-ed-kopf { display: flex; align-items: center; gap: 10px }
.cm-ed-weg { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linie); background: transparent; color: var(--milch); cursor: pointer }
.cm-buehne { position: relative; width: 100%; margin: 0 auto; border-radius: 14px; overflow: hidden; background: #000; container-type: inline-size }
.cm-leinwand, .cm-zeichnung, .cm-ed-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.cm-ed-video { object-fit: contain }
.cm-zeichnung { touch-action: auto } .cm-zeichnung.malen { touch-action: none; cursor: crosshair }
.cm-ed-ebene { position: absolute; inset: 0; pointer-events: none }
.cm-ed-ebene .ziehbar { pointer-events: auto; cursor: grab; touch-action: none; padding: 2px 4px; border-radius: 8px }
.cm-ed-ebene .ziehbar:focus-visible { outline: 2px dashed #fff }
.cm-ov-weg { position: absolute; top: -12px; right: -12px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .65); color: #fff;
  font-size: .7rem; cursor: pointer; line-height: 22px; padding: 0 }
.cm-werkzeuge { display: flex; gap: 6px; justify-content: space-between; overflow-x: auto }
.cm-werkzeug { flex: 1 0 54px; display: grid; justify-items: center; gap: 2px; padding: 7px 4px; border-radius: 12px; border: 1px solid var(--linie);
  background: var(--pflaume); color: var(--milch); font: inherit; font-weight: 800; cursor: pointer }
.cm-werkzeug small { font-size: .68rem; font-weight: 700; color: var(--nebel) }
.cm-werkzeug.an { border-color: var(--korall); box-shadow: 0 0 0 1px var(--korall) inset }
.cm-blatt { background: var(--pflaume); border: 1px solid var(--linie); border-radius: 14px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.cm-filter { display: grid; justify-items: center; gap: 4px; background: transparent; border: 0; color: var(--milch); font: inherit; font-size: .74rem; cursor: pointer; padding: 2px }
.cm-filter i { width: 46px; height: 46px; border-radius: 10px; background: var(--verlauf); border: 2px solid transparent }
.cm-filter.an i { border-color: var(--korall) }
.cm-regler { display: flex; align-items: center; gap: 10px; width: 100% } .cm-regler input { flex: 1 }
.cm-farben { display: flex; gap: 6px; flex-wrap: wrap }
.cm-farbe { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--linie); cursor: pointer; padding: 0 }
.cm-farbe.an { border-color: var(--korall); box-shadow: 0 0 0 2px var(--nacht) inset }
.cm-sticker-saison { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100% }
.cm-sticker-saison small { width: 100%; color: var(--nebel); font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em }
.cm-sticker-k { font-size: 1.6rem; background: transparent; border: 0; border-radius: 10px; padding: 4px 6px; cursor: pointer }
.cm-sticker-k:hover { background: var(--pflaume-hell) }
.emoji-tafel.emoji-offen { position: static; width: 100%; max-height: 180px; box-shadow: none }
.cm-ed-reihe { display: flex; gap: 8px; align-items: center; width: 100% }
.cm-ed-text, .cm-ed-feld { flex: 1; min-width: 0; background: var(--pflaume); color: var(--milch); border: 1px solid var(--linie); border-radius: 999px; padding: 10px 14px; font: inherit }
.cm-ed-klein { margin: 0; color: var(--nebel); font-size: .74rem }
.cm-live-wahl { display: flex; align-items: center; gap: 8px; font-size: .86rem }
/* «∞ / 1×» direkt am Senden-Knopf — gut sichtbar, wie bei Snapchat */
.cm-einmal-wahl { flex: 0 0 auto; display: grid; justify-items: center; line-height: 1.1; min-width: 64px; padding: 6px 8px; border-radius: 14px;
  border: 1px solid var(--linie); background: var(--pflaume); color: var(--milch); font: inherit; cursor: pointer }
.cm-einmal-wahl b { font-size: 1.15rem } .cm-einmal-wahl small { font-size: .62rem; font-weight: 700; color: var(--nebel); white-space: nowrap }
.cm-einmal-wahl.an { background: var(--verlauf); border-color: transparent; color: #fff } .cm-einmal-wahl.an small { color: #fff }
.cm-senden { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--verlauf); color: #fff; font-size: 1.2rem; cursor: pointer }
.cm-senden:disabled { opacity: .5 }

/* Hinweis im Posteingang: «In 7 Tagen werden Medien gelöscht – jetzt herunterladen?» */
.cm-ablauf { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--pflaume);
  border: 1px solid var(--gelb); font-size: .88rem }
.cm-ablauf-sym { font-size: 1.2rem }

@media (prefers-reduced-motion: reduce) { .cm-wahl-e { transition: none } }

/* Eingabezeile mit Emoji + 📷: Feld · 🙂 · 📷 · ➤ (gilt fuer den Direktchat, Raum-, Event- und Gruppenchat) */
.chat-form:has(.cm-anhang) { grid-template-columns: minmax(0, 1fr) auto auto 46px; align-items: end; gap: 6px }
.chat-form .emoji-huelle, .chat-form .cm-anhang { align-self: end; margin-bottom: 3px }

/* 👥 oben im Posteingang (/chats) — «Freunde & Kontakte», roter Punkt bei offenen Anfragen */
.pe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.pe-freunde { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; text-decoration: none;
  background: var(--pflaume); border: 1px solid var(--linie) }
.pe-freunde:hover, .pe-freunde:focus-visible { border-color: var(--korall) }
.pe-freunde-punkt, .fs-punkt { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rot);
  color: #fff; font-size: .68rem; font-weight: 800; font-style: normal; line-height: 18px; text-align: center }

/* «Meine Beiträge» (/beitraege), «Freunde & Kontakte» (/freunde) und die Wege dorthin (Konto, Ich) */
.mb-seite, .fs-seite { max-width: 720px; margin: 0 auto }
.mb-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px }
.mb-kachel { background: var(--pflaume); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: grid }
.mb-bild { position: relative; aspect-ratio: 9 / 14; background: var(--pflaume-hell) }
.mb-bild img { width: 100%; height: 100%; object-fit: cover; display: block }
.mb-video, .mb-stand { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: .74rem }
.mb-stand { left: auto; right: 8px }
.mb-info { display: grid; padding: 8px 10px 2px } .mb-info small { color: var(--nebel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mb-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px 10px } .mb-knoepfe .klein-knopf { font-size: .76rem; padding: 5px 9px }
.fs-wege { display: grid; gap: 4px; padding: 6px }
.fs-weg { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 14px; text-decoration: none; color: var(--milch) }
.fs-weg:hover, .fs-weg:focus-visible { background: var(--pflaume-hell) }
.fs-weg b { flex: 1 } .fs-weg .fs-punkt { position: static }
.fs-einladen-knoepfe { display: flex; flex-wrap: wrap; gap: 8px }

/* 15.10.2026 (Owner-Screenshot: «Foto sprengt die Blase, dicker Rahmen, grosser Speichern-Knopf»): Bild-Blase wie WhatsApp — höchstens
   ~75 % der Breite, Seitenverhältnis bleibt (höchstens ~60 % der Höhe, object-fit cover), 3 px Rand in der Blasenfarbe, Zeit + ✓ im Bild
   auf dunklem Verlauf, keine Knöpfe darunter (Speichern/Melden: Vollbild oder langes Drücken). Ab 4 Bildern: 2×2-Raster (chat.js). */
.nachricht.ist-bild { padding: 3px; width: min(75%, 330px); max-width: min(75%, 330px); box-sizing: border-box; border-radius: 17px }
.nachricht.ist-bild .cm-medium { max-width: 100%; margin: 0; width: 100% }
.nachricht.ist-bild .cm-rahmen { border-radius: 14px; max-height: 60vh; max-height: 60dvh }
.nachricht.ist-bild > .text { padding: 4px 8px 0 }
.nachricht.ist-bild > .zeit { padding: 0 8px 2px }
.nachricht.nur-bild > .zeit { position: absolute; right: 3px; bottom: 3px; margin: 0; padding: 14px 9px 4px 26px; border-bottom-right-radius: 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .55)); color: #fff; opacity: 1; pointer-events: none }
.nachricht.nur-bild > .zeit .chat-haken { color: rgba(255, 255, 255, .9) }
.nachricht.nur-bild > .zeit .chat-haken.gelesen { color: #9fe1ff }
.cm-bild-blase .cm-inhalt { cursor: zoom-in }
.cm-play-gross { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; display: grid;
  place-items: center; background: rgba(0, 0, 0, .5); color: #fff; font-size: 1.4rem; pointer-events: none }
.cm-dauer { position: absolute; left: 8px; bottom: 6px; color: #fff; font-size: .72rem; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); pointer-events: none }
.cm-bald-schild { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: .68rem; pointer-events: none }
.cm-voll-speichern { right: 62px } .cm-voll-melden { right: 112px }
.cm-voll-speichern ~ .cm-voll-melden { right: 112px }
.cm-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 100%; position: relative }
.nachricht.ist-bild .cm-raster .cm-medium, .cm-raster .cm-medium { width: auto; max-width: none; min-width: 0 }
.cm-raster .cm-rahmen { aspect-ratio: 1 / 1 !important; border-radius: 10px }
.cm-raster .cm-medium.raster-mehr { display: none }
.cm-raster.offen .cm-medium.raster-mehr { display: grid }
.cm-raster button.cm-raster-plus, .cm-raster-plus { position: absolute; right: 0; bottom: 0; width: calc(50% - 1.5px); aspect-ratio: 1 / 1; margin: 0; border: 0; border-radius: 10px;
  background: rgba(0, 0, 0, .5) !important; color: #fff; font-size: 1.8rem; font-weight: 800; cursor: pointer; box-shadow: none; padding: 0; min-height: 0 }
.nachricht.raster-kopf > .zeit { position: absolute; right: 3px; bottom: 3px }
/* 15.10.: Vollbild — der Rahmen ist ein Container (cqw für die Overlay-Texte) und braucht darum eine feste Breite; sonst rutschte das Bild
   aus der Mitte über den rechten Rand (390 px gemessen). */
.cm-voll-rahmen { width: 96vw; display: grid; place-items: center }
.cm-voll-rahmen img, .cm-voll-rahmen video { width: auto; max-width: 96vw; height: auto; max-height: 82vh; max-height: 82dvh; object-fit: contain }