/* Meet: anonymous random video chat (#/meet) and Admin > Meet */
.meet { max-width:760px; margin:0 auto; padding:12px 12px 28px; }
.meet .card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; }
.meet .card h2 { margin:0 0 6px; }
.meet .card ul { margin:6px 0 14px; padding-left:20px; line-height:1.6; color:var(--soft); }
.meet .card b { display:block; margin-top:10px; }
.meet .mgate .row { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.meet .agree { margin:8px 0; }
.meet .btn[disabled] { opacity:.45; cursor:not-allowed; }

.mwrap { display:flex; flex-direction:column; gap:12px; }
.mshell { position:relative; width:100%; aspect-ratio:3/4; max-height:calc(100vh - 190px); min-height:320px; border-radius:20px; overflow:hidden; background:#050508; border:1px solid var(--line); }
@media (min-width:760px) { .mshell { aspect-ratio:4/3; } }
.mremote { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#050508; }
.mshell[data-state="idle"] .mremote, .mshell[data-state="waiting"] .mremote { opacity:0; }
.mself { position:absolute; right:10px; bottom:10px; width:28%; max-width:190px; aspect-ratio:3/4; object-fit:cover; border-radius:14px; border:2px solid rgba(255,255,255,.25); background:#111; transform:scaleX(-1); box-shadow:0 6px 18px rgba(0,0,0,.5); z-index:2; }
.mself[hidden], .midle[hidden], .mnote[hidden] { display:none; }
.midle { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px; background:radial-gradient(120% 90% at 50% 0%, rgba(124,92,255,.28), transparent 60%), #08080d; z-index:1; }
.mbig { font-size:clamp(24px, 6vw, 36px); font-weight:900; letter-spacing:-.01em; }
.btn.big { padding:14px 38px; font-size:18px; border-radius:999px; }
.mnote { position:absolute; left:50%; top:14px; transform:translateX(-50%); max-width:86%; padding:8px 14px; border-radius:999px; background:rgba(10,10,16,.78); color:#fff; font-weight:700; font-size:14px; text-align:center; z-index:3; backdrop-filter:blur(6px); }
.mshell[data-state="waiting"]::after { content:''; position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px; border-radius:50%; border:4px solid rgba(255,255,255,.18); border-top-color:var(--accent); animation:mspin 1s linear infinite; z-index:1; }
@keyframes mspin { to { transform:rotate(360deg); } }
.mbar { display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; min-height:48px; }
.mbar .btn { min-width:84px; display:inline-flex; align-items:center; justify-content:center; gap:4px; }
.mbar .round { width:46px; height:46px; border-radius:50%; border:0; cursor:pointer; background:var(--raised); color:var(--text); display:flex; align-items:center; justify-content:center; }
.mbar .round.off { background:var(--live); color:#fff; }
.mfine { text-align:center; font-size:12px; margin:0; }
@media (prefers-reduced-motion:reduce) { .mshell[data-state="waiting"]::after { animation:none; } }

/* admin */
.tag { display:inline-block; font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; background:var(--raised); color:var(--soft); }
.tag.new { background:var(--live); color:#fff; } .tag.warn { background:#5c3b00; color:#ffd34d; } .tag.ok { background:#0d4a34; color:#6ff0b8; }
.msw { display:flex; gap:10px; align-items:flex-start; padding:7px 0; cursor:pointer; } .msw input { width:auto; margin:4px 0 0; flex:none; }
.mstats { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:10px; }
.mrep { margin:10px 0; padding:12px; display:flex; flex-direction:column; gap:8px; } .mrep.minor { border-color:var(--live); }
.mevs { gap:8px; flex-wrap:wrap; } .mev { width:150px; height:112px; object-fit:cover; border-radius:10px; border:1px solid var(--line); cursor:zoom-in; background:#000; }
.mev.big { width:min(100%, 480px); height:auto; cursor:zoom-out; }
.mact { display:flex; flex-wrap:wrap; gap:6px; } .mrep > .row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .mevs { display:flex; }
.mban { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:6px 0; padding:10px 12px; }
.mdone { font-size:13px; padding:3px 0; }
.mtablewrap { overflow-x:auto; } .mtable { width:100%; border-collapse:collapse; font-size:13px; } .mtable th { text-align:left; color:var(--mute); font-weight:700; padding:6px 8px; } .mtable td { padding:7px 8px; border-top:1px solid var(--line); vertical-align:top; }

/* inside the phone app (a WebView): hide the website's own chrome so Meet fills the screen */
.inapp header, .inapp #sitebar, .inapp #promo, .inapp .adrail, .inapp #adbottom, .inapp footer.legal, .inapp #banner { display:none !important; }
.inapp .meet { padding:6px 6px 14px; } .inapp .mshell { max-height:calc(100vh - 150px); }
.inapp #se-bar { top:4px !important; }