/* MEEYO im Web als App (01.11.2026, Owner: «vergleiche mal WhatsApp auf dem PC mit MEEYO … komplett im Design»). Schalter «web_app_neu».
   Zwei Teile: (1) die Huelle /web (web_app.html) — Symbolleiste · Liste · Hauptbereich, volle Fensterhoehe, keine Website-Kopfzeile;
   (2) html.eingebettet — dieselben Seiten IN der Huelle: ohne Kopf, Leisten, Fuss und Saison-Hintergrund, Liste dicht wie WhatsApp,
   Gespraech fuellt den Rahmen. Farben: nur die Marken-Token aus meeyo.css (hell/dunkel kommen von dort). */

/* ---------- (1) Huelle ---------- */
:root { --wn-leiste: color-mix(in srgb, var(--nacht) 62%, #000); --wn-leiste-schrift: color-mix(in srgb, var(--nebel) 88%, var(--milch));
  --wn-aktiv-grund: color-mix(in srgb, var(--korall) 30%, transparent); --wn-aktiv-schrift: #ff8fa9; --wn-schwebe: color-mix(in srgb, var(--milch) 8%, transparent);
  --wn-breite-leiste: 82px; --wn-breite-liste: clamp(330px, 27vw, 430px); --wn-trennlinie: var(--linie) }
/* Hell (02.11.2026, Owner: «zu verwaschen»): Leiste deutlich getoent, Liste weiss, Gespraech leicht grau — drei klar getrennte Flaechen;
   Schrift der Leiste 6.9:1, aktives Wort 6.1:1 auf seiner Flaeche (WCAG AA) */
:root[data-theme="light"] { --wn-leiste: #ece4f3; --wn-leiste-schrift: #4f4160; --wn-aktiv-grund: #f9cbd8; --wn-aktiv-schrift: #b0103b;
  --wn-schwebe: #e0d5ea; --wn-trennlinie: #d9cde4 }
body.wn-seite { margin: 0; overflow: hidden; background: var(--nacht) }
body.wn-seite .inhalt { max-width: none; padding: 0; margin: 0 }
body.wn-seite .saison-ecke, body.wn-seite .hw-himmel, body.wn-seite .hw-vorn, body.wn-seite #saison-kopf { display: none !important }
:root[data-saison] body.wn-seite::before { opacity: .5 }   /* die Saison bleibt nur als feine Linie oben */
.wn { display: grid; grid-template-columns: var(--wn-breite-leiste) var(--wn-breite-liste) minmax(0, 1fr); height: 100vh; height: 100dvh; width: 100%; overflow: hidden }

/* Symbolleiste: Symbol + Wort, eine Flaeche in der Markenfarbe zeigt, wo man ist */
.wn-leiste { background: var(--wn-leiste); border-right: 1px solid var(--wn-trennlinie); display: flex; flex-direction: column; align-items: center;
  padding: 12px 0 12px; gap: 6px; min-height: 0; overflow-y: auto; scrollbar-width: none }
.wn-leiste::-webkit-scrollbar { display: none }
.wn-leiste-gruppe { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100% }
.wn-unten { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--wn-trennlinie); width: 56px }
.wn-marke { display: block; width: 40px; height: 40px; margin: 0 0 10px; border-radius: 12px; overflow: hidden; flex: 0 0 auto }
.wn-marke img { width: 100%; height: 100%; display: block }
.wn .wn-sym { position: relative; width: 76px; min-height: 54px; padding: 6px 2px 5px; border: 0; border-radius: 14px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; color: var(--wn-leiste-schrift); font: inherit; line-height: 1; transition: background .15s, color .15s }
.wn-sym-bild { position: relative; display: grid; place-items: center; width: 48px; height: 30px; border-radius: 15px; transition: background .15s }
.wn-sym svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.wn-sym-wort { font-size: .655rem; font-weight: 600; letter-spacing: -.005em; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wn .wn-sym:hover { color: var(--milch) }
.wn .wn-sym:hover .wn-sym-bild { background: var(--wn-schwebe) }
.wn .wn-sym:focus-visible { outline: 2px solid var(--violett); outline-offset: -2px }
.wn .wn-sym.an { color: var(--wn-aktiv-schrift) }
.wn .wn-sym.an .wn-sym-bild { background: var(--wn-aktiv-grund) }
.wn .wn-sym.an .wn-sym-wort { font-weight: 800 }
.wn .wn-sym.an svg { stroke-width: 2.1 }
.wn-ich-bild { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; color: #fff; background: var(--verlauf) }
.wn-sym.an .wn-ich-bild { box-shadow: 0 0 0 2px var(--wn-leiste), 0 0 0 4px var(--wn-aktiv-schrift) }
.wn-sym.wn-ich .wn-sym-bild, .wn-sym.wn-ich.an .wn-sym-bild { background: transparent }
#wn-thema .wn-thema-mond { display: none } #wn-thema.ist-hell .wn-thema-mond { display: block } #wn-thema.ist-hell .wn-thema-sonne { display: none }
.wn-zahl { position: absolute; top: -5px; left: 28px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--korall); color: #fff;
  font: 800 .64rem/18px inherit; font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--wn-leiste) }

.wn-liste { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--pflaume); border-right: 1px solid var(--wn-trennlinie) }
:root[data-theme="light"] .wn-haupt { background-color: #efe8f4 }   /* hell: Gespraech leicht getoent, Liste weiss — sichtbar getrennt */
.wn-liste-kopf { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 6px 18px }
.wn-liste-kopf h1 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em }
.wn-liste-knoepfe { display: flex; gap: 4px }
.wn .wn-rund { width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: transparent; color: var(--nebel); cursor: pointer }
.wn-rund svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.wn .wn-rund:hover, .wn .wn-rund:focus-visible { background: var(--pflaume-hell); color: var(--milch) }
.wn-rahmen { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; display: block; background: transparent }

.wn-haupt { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background-color: var(--nacht);
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--milch) 7%, transparent) 1px, transparent 0);
  background-size: 22px 22px }
.wn[data-voll="1"] { grid-template-columns: 64px minmax(0, 1fr) }
.wn[data-voll="1"] .wn-liste { display: none }
.wn-haupt .wn-rahmen { height: 100% }

.wn-leer { margin: auto; max-width: 30rem; padding: 32px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px }
.wn-leer-marke { width: 112px; height: 112px; border-radius: 34px; padding: 3px; margin-bottom: 18px; background: conic-gradient(from 210deg, var(--korall), var(--violett), var(--korall));
  box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--violett) 70%, transparent) }
.wn-leer-marke img { width: 100%; height: 100%; border-radius: 31px; display: block }
.wn-leer h2 { margin: 0; font-size: clamp(1.5rem, 2.1vw, 1.9rem); font-weight: 800; letter-spacing: -.02em }
.wn-leer p { margin: .5em 0 0; color: var(--nebel); line-height: 1.55 }
.wn-leer .wn-leer-tipp { font-size: .88rem; max-width: 26rem; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--linie) }
.wn-leer .wa-push { margin-top: 18px; text-align: left; width: 100% }
.wn-tasten { font-size: .78rem; margin-top: 22px !important }
.wn-tasten kbd { font: 600 .74rem/1 inherit; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--linie); background: var(--pflaume); color: var(--milch) }

.wn .wn-zurueck { position: absolute; z-index: 5; top: 10px; left: 8px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--pflaume); color: var(--milch); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.25) }
.wn-zurueck svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.wn-ablegen { position: absolute; inset: 14px; z-index: 6; border-radius: 22px; border: 2px dashed var(--violett); display: grid; place-items: center;
  background: color-mix(in srgb, var(--nacht) 82%, transparent); pointer-events: none }
.wn-ablegen span { font-weight: 800; font-size: 1.1rem }
.wn-melde { position: fixed; z-index: 90; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; padding: 10px 16px; border-radius: 12px; background: var(--pflaume-hell); color: var(--milch); box-shadow: 0 10px 30px rgba(0,0,0,.3) }

/* Ein Gespraech/Bereich ist offen: Tinus Gesicht und die schwebende MEE-Hilfe lagen auf Anruf-Knopf und Eingabe — MEE steht in der Leiste */
body.wn-offen .tinu-oben, body.wn-offen .mee-knopf-schwebend, body.wn-offen .tinu { display: none !important }
@media (max-width: 899px) { body.wn-seite .tinu-oben { display: none !important } }

/* Schmal (unter 900 px): wie am Handy — Liste ODER Gespraech, die Symbolleiste wird zur Leiste unten (fuenf Hauptziele mit Wort) */
@media (max-width: 899px) {
  .wn { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) calc(62px + env(safe-area-inset-bottom)) }
  .wn[data-voll="1"] { grid-template-columns: minmax(0, 1fr) }
  .wn-leiste { grid-row: 2; flex-direction: row; justify-content: space-around; padding: 4px 4px env(safe-area-inset-bottom); overflow: hidden;
    border-right: 0; border-top: 1px solid var(--wn-trennlinie) }
  .wn-leiste-gruppe { flex-direction: row; justify-content: space-around; gap: 0; width: auto; flex: 1 1 auto }
  .wn-unten { margin: 0; padding: 0; border: 0; width: auto; flex: 0 0 auto }
  .wn-marke, .wn-leiste #wn-thema, .wn-leiste [data-bereich="einstellungen"], .wn-leiste [data-bereich="glocke"], .wn-leiste [data-bereich="meetings"],
  .wn-leiste [data-bereich="status"], .wn-leiste #wn-promoter, .wn-leiste #wn-admin { display: none !important }
  .wn .wn-sym { width: 62px; min-height: 52px }
  .wn-liste, .wn-haupt { grid-row: 1; grid-column: 1 }
  .wn-liste { border-right: 0 }
  .wn[data-offen="1"] .wn-liste { display: none }
  .wn[data-offen="0"] .wn-haupt { display: none }
  .wn[data-offen="1"] { grid-template-rows: minmax(0, 1fr) 0 }
  .wn[data-offen="1"] .wn-leiste { display: none }
  .wn[data-voll="1"][data-offen="1"] { grid-template-rows: minmax(0, 1fr) calc(62px + env(safe-area-inset-bottom)) }
  .wn[data-voll="1"][data-offen="1"] .wn-leiste { display: flex }
}
@media (prefers-reduced-motion: reduce) { .wn .wn-sym, .wn-sym-bild { transition: none } }

/* ---------- (2) eingebettet: die echten Seiten im Rahmen der Huelle ---------- */
html.eingebettet .kopf, html.eingebettet .ca-kopf, html.eingebettet .tab-leiste, html.eingebettet .fuss, html.eingebettet #chat-entdecken,
html.eingebettet .saison-ecke, html.eingebettet .hw-himmel, html.eingebettet .hw-vorn, html.eingebettet #saison-kopf, html.eingebettet .messung { display: none !important }
html.eingebettet body::before { display: none !important }
html.eingebettet body { background: var(--nacht) !important; padding-bottom: 0 !important }
html.eingebettet .inhalt, html.eingebettet body.breit .inhalt { max-width: none; margin: 0; padding: 18px clamp(14px, 2.4vw, 36px) 32px }

/* Liste (= /chats): kein eigener Titel/Reiter/«＋» (macht die Huelle), Zeilen dicht wie WhatsApp, die offene Zeile markiert */
html.eingebettet[data-rahmen="liste"] body { background: var(--pflaume) !important }
html.eingebettet[data-rahmen="liste"] .inhalt { padding: 2px 8px 24px }
html.eingebettet[data-rahmen="liste"] .pe-seite { max-width: none }
html.eingebettet[data-rahmen="liste"] .pe-kopf h1, html.eingebettet[data-rahmen="liste"] #wa-reiter, html.eingebettet[data-rahmen="liste"] #gc-fab,
html.eingebettet[data-rahmen="liste"] #ca-install, html.eingebettet[data-rahmen="liste"] #wa-push, html.eingebettet[data-rahmen="liste"] .tinu-oben { display: none !important }
html.eingebettet[data-rahmen="liste"] .pe-kopf, html.eingebettet[data-rahmen="liste"] #wa-standort,
html.eingebettet[data-rahmen="liste"] #wa-status, html.eingebettet[data-rahmen="liste"] #kf-karte, html.eingebettet[data-rahmen="liste"] #gc-neu:not([open]), html.eingebettet[data-rahmen="liste"] .mee-knopf-schwebend,
html.eingebettet[data-rahmen="liste"] .tinu, html.eingebettet .tinu-oben { display: none !important }   /* Status, Freunde, Anstecken: in der Symbolleiste bzw. hinter «＋» */
html.eingebettet[data-rahmen="liste"] .pe-suche-feld { margin: 2px 6px 8px; border-radius: 10px; background: var(--pflaume-hell); border-color: transparent }
html.eingebettet[data-rahmen="liste"] .pe-filter { padding: 0 6px 8px; gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none ; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent) }   /* 02.11.: weicher Rand rechts = man kann schieben */
html.eingebettet[data-rahmen="liste"] .pe-filter::-webkit-scrollbar { display: none }
html.eingebettet[data-rahmen="liste"] .pe-chip { padding: 4px 10px; font-size: .78rem; flex: 0 0 auto }
html.eingebettet[data-rahmen="liste"] .pe-link { gap: 11px; padding: 7px 10px; border-radius: 12px }
html.eingebettet[data-rahmen="liste"] .pe-bild { flex-basis: 40px; width: 40px; height: 40px; font-size: 1rem }
html.eingebettet[data-rahmen="liste"] .pe-zeile.neu .pe-bild-person { box-shadow: 0 0 0 2px var(--pflaume), 0 0 0 3.5px color-mix(in srgb, var(--korall) 65%, transparent) }
html.eingebettet[data-rahmen="liste"] .pe-link.wn-aktiv { background: var(--pflaume-hell) }
html.eingebettet[data-rahmen="liste"] .pe-link.wn-aktiv .pe-name { color: var(--milch) }
html.eingebettet[data-rahmen="liste"] .karte { border-radius: 14px; margin-left: 6px; margin-right: 6px }

/* Hauptbereich: das Gespraech fuellt den ganzen Rahmen (Kopf oben, Eingabe unten), Nachrichten auf ruhigem Punktgrund */
html.eingebettet[data-rahmen="haupt"] body.chat-gespraech { overflow: hidden }
html.eingebettet[data-rahmen="haupt"] body.chat-gespraech #seite, html.eingebettet[data-rahmen="haupt"] body.chat-gespraech .tabs,
html.eingebettet[data-rahmen="haupt"] body.chat-gespraech #tab-fuer-dich, html.eingebettet[data-rahmen="haupt"] body.chat-gespraech .virus-band { display: none !important }
html.eingebettet[data-rahmen="haupt"] body .chat-panel:not([hidden]) { position: fixed !important; inset: 0 !important; z-index: 50; height: auto !important; min-height: 0 !important; max-height: none !important;
  max-width: none !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; display: flex; flex-direction: column }
html.eingebettet[data-rahmen="haupt"] body .chat-panel:not([hidden]) .chat-kopf { flex: 0 0 auto; padding: 10px 18px; border-bottom: 1px solid var(--linie); background: var(--pflaume) }
html.eingebettet[data-rahmen="haupt"] body .chat-panel:not([hidden]) .chat-nachrichten { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: 16px clamp(16px, 6%, 72px);
  background-color: var(--nacht); background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--milch) 6%, transparent) 1px, transparent 0); background-size: 22px 22px }
html.eingebettet[data-rahmen="haupt"] body .chat-panel:not([hidden]) #chat-form { flex: 0 0 auto; padding: 10px clamp(12px, 3%, 32px); border-top: 1px solid var(--linie); background: var(--pflaume) }

/* ---------- «Mit dem Handy anmelden» auf /login (geraet_qr.js) ---------- */
.qr-anmelden { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid var(--linie) }
.qr-anmelden h2 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 800 }
.qr-anmelden ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; color: var(--milch); line-height: 1.45 }
.qr-warn { margin: 14px 0 0; font-size: .82rem; color: var(--nebel); line-height: 1.45; padding-left: 10px; border-left: 3px solid var(--gelb) }
.qr-feld { display: grid; justify-items: center; gap: 6px }
.qr-ring { --qr-rest: 1; position: relative; width: 236px; height: 236px; border-radius: 22px; padding: 4px; display: grid; place-items: center;
  background: conic-gradient(var(--korall) calc(var(--qr-rest) * 360deg), var(--linie) 0) }
.qr-ring img { width: 220px; height: 220px; border-radius: 16px; background: #fff; padding: 10px; box-sizing: border-box; image-rendering: pixelated }
.qr-ring #qr-neu { position: absolute }
.qr-ring:has(#qr-neu:not([hidden])) { background: var(--pflaume-hell) }
.qr-stand { min-height: 1.2em; margin: 0; text-align: center }
@media (max-width: 560px) { .qr-anmelden { grid-template-columns: 1fr } .qr-feld { order: -1 } }
@media (prefers-reduced-motion: reduce) { .qr-ring { background: var(--korall) } }
body.mit-qr .buehne { grid-template-columns: minmax(0, .8fr) minmax(360px, 700px) }
@media (max-width: 900px) { body.mit-qr .buehne { grid-template-columns: 1fr } }

/* Entdecken im Hauptbereich: die eigene Chat-Seitenleiste von /entdecken fiele doppelt neben die Liste der Huelle — nur «Für dich» */
html.eingebettet[data-rahmen="haupt"] #entdecken { display: block }
html.eingebettet[data-rahmen="haupt"] #entdecken > .seitenleiste, html.eingebettet[data-rahmen="haupt"] #entdecken > .tabs { display: none !important }
html.eingebettet[data-rahmen="haupt"] body:not(.chat-gespraech) #entdecken > #tab-matches { display: none }
html.eingebettet .mee-knopf-schwebend { display: none !important }   /* MEE steht in der Symbolleiste; die schwebende Hilfe zeigt die Huelle, solange nichts offen ist */

/* 02.11.2026 (Owner «ja das ist gut so»): «Steck deine Freunde an» als eine schmale Zeile oben in der Liste statt grosser Karte —
   Titel einzeilig, «Anstecken» (WhatsApp, eigener Link wie bisher), ✕. Text, Teilen-Knopf und Zaehler stehen auf /chats im alten Web. */
html.eingebettet[data-rahmen="liste"] #vk-karte:not([hidden]) { display: flex; align-items: center; gap: 8px; margin: 4px 6px 10px; padding: 6px 6px 6px 12px; border-radius: 12px; min-height: 0 }
html.eingebettet[data-rahmen="liste"] #vk-karte h2 { order: 1; flex: 1 1 auto; min-width: 0; margin: 0; font-size: .86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
html.eingebettet[data-rahmen="liste"] #vk-karte [data-vk-text], html.eingebettet[data-rahmen="liste"] #vk-karte [data-vk-zaehler],
html.eingebettet[data-rahmen="liste"] #vk-karte [data-vk-ok], html.eingebettet[data-rahmen="liste"] #vk-karte .vk-teilen { display: none !important }
html.eingebettet[data-rahmen="liste"] #vk-karte .vk-knoepfe { order: 2; margin: 0; flex: 0 0 auto }
html.eingebettet[data-rahmen="liste"] #vk-karte .vk-wa { flex: 0 0 auto; min-height: 30px; padding: 5px 12px; font-size: 0; border-radius: 999px }
html.eingebettet[data-rahmen="liste"] #vk-karte .vk-wa::after { content: attr(data-wn-kurz); font-size: .78rem; font-weight: 800 }
html.eingebettet[data-rahmen="liste"] #vk-karte .vk-aus { order: 3; position: static; flex: 0 0 auto; width: 28px; height: 28px; padding: 0; font-size: .8rem; background: transparent }

/* Hell: das Gespraech auf getoentem Grund, eingehende Blasen weiss mit feinem Schatten — sonst verschwammen Blase und Grund (02.11.2026) */
html.eingebettet[data-rahmen="haupt"][data-theme="light"] body .chat-panel:not([hidden]) .chat-nachrichten { background-color: #efe8f4 }
html.eingebettet[data-rahmen="haupt"][data-theme="light"] .chat-nachrichten .nachricht.du { background: #fff; box-shadow: 0 1px 2px rgba(60, 20, 90, .14) }