/* ===== Erweiterung „App (PWA)“ ===== */

/* Smartphone-Symbol hinter dem Nick in der Online-Liste (für alle sichtbar) */
.u-pwa{font-size:.78rem;margin-left:.15rem;line-height:1;opacity:.9;cursor:help}

/* Installations-Hinweis, Benachrichtigungs-Hinweis, Toast */
.pwa-banner{position:fixed;left:.6rem;right:.6rem;bottom:calc(.6rem + env(safe-area-inset-bottom,0px));z-index:80;display:flex;align-items:center;gap:.6rem;max-width:32rem;margin:0 auto;padding:.7rem .8rem;background:#fff;color:#1e293b;border:1px solid #e2e8f0;border-radius:1.1rem;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.dark .pwa-banner{background:#1e293b;color:#e2e8f0;border-color:#334155}
.pwa-b-t{flex:1;font-size:.82rem;line-height:1.25}
.pwa-b-t b{display:block;font-size:.9rem;margin-bottom:.1rem}
.pwa-b-x{border:0;background:none;color:#94a3b8;font-size:1.1rem;cursor:pointer;padding:.2rem .4rem}
.pwa-toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(4.5rem + env(safe-area-inset-top,0px));z-index:90;padding:.6rem 1rem;background:#0f172a;color:#fff;border-radius:99px;font-size:.85rem;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.35);transition:opacity .7s}
.pwa-toast.out{opacity:0}
.pwa-backwrap{display:flex;align-items:center;gap:.5rem;min-width:0}
.pwa-back{flex:0 0 auto;width:2.25rem;height:2.25rem;border:0;border-radius:.8rem;background:rgba(255,255,255,.2);color:#fff;font-size:1.15rem;font-weight:800;cursor:pointer}

/* ===== Nur in der installierten App (html.pwa) ===== */
html.pwa{-webkit-text-size-adjust:100%}
html.pwa body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
html.pwa body:not(.h-screen){padding-bottom:env(safe-area-inset-bottom,0px)}
html.pwa body.h-screen{height:100vh;height:100dvh}
html.pwa header{padding-top:env(safe-area-inset-top,0px)}
html.pwa header>div:first-child{height:3.25rem}
html.pwa a,html.pwa button,html.pwa .u-li,html.pwa .roomlink{touch-action:manipulation}

/* Eingabe: 16px verhindert das Hineinzoomen auf dem iPhone, große Tippflächen */
html.pwa .inp,html.pwa input,html.pwa textarea,html.pwa select{font-size:16px}
html.pwa #sendform{padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom,0px))}
html.pwa #sendform .btn{min-width:2.9rem;min-height:2.9rem;padding:.4rem .7rem}
html.pwa #msg{min-height:2.9rem}

/* Chatverlauf */
html.pwa .chatlog{padding:.6rem .75rem;font-size:.98rem;line-height:1.45;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html.pwa .m{padding:.2rem 0}
html.pwa .m-r{opacity:.45}

/* Räume und Online-Liste als Schubladen */
html.pwa .roomlink{padding:.7rem .8rem;font-size:.95rem}
html.pwa .u-li{padding:.55rem .5rem;font-size:1rem}
html.pwa .chat-aside.open{width:min(86vw,20rem)}
html.pwa .umenu{max-width:calc(100vw - 1rem)}
html.pwa .umenu a,html.pwa .umenu button.ui{padding:.65rem .8rem}

/* Emoji-Auswahl */
html.pwa .emp{width:calc(100vw - 1rem)}
html.pwa .emp-grid{grid-template-columns:repeat(8,1fr);max-height:40vh}
html.pwa .emp-grid button{font-size:1.5rem;line-height:2.3rem}