:root {
  color-scheme: dark;
  --bg: #05070c;
  --bg2: #0b0f18;
  --panel: rgba(16, 21, 32, 0.78);
  --panel2: rgba(8, 12, 20, 0.92);
  --line: rgba(255,255,255,.09);
  --text: #f5f7fb;
  --muted: #8e98aa;
  --accent: #5c7cff;
  --accent2: #8d5cff;
  --danger: #ff5d6c;
  --ok: #34d399;
  --shadow: 0 24px 80px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(92,124,255,.14), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(141,92,255,.10), transparent 30%),
    linear-gradient(180deg, #070a11 0%, var(--bg) 100%);
  color: var(--text);
}

button, input { font: inherit; }
a { color: inherit; }
.glass { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.eyebrow { margin: 0 0 8px; color: #9fb0ff; font-size: 11px; letter-spacing: .18em; font-weight: 800; }

.topbar {
  height: 68px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); background: rgba(5,7,12,.78); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 10;
}
.brand-row { display: flex; align-items: center; gap: 12px; }
.brand-row > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.brand-mark {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; font-weight: 900; font-size: 25px;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 12px 34px rgba(92,124,255,.28);
}
.brand-mark.small { width: 38px; height: 38px; border-radius: 12px; font-size: 17px; }

.shell { width: min(1240px, calc(100% - 32px)); margin: 26px auto 48px; }
.hero-card { border-radius: 24px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hero-card h1 { margin: 0 0 6px; font-size: clamp(24px, 4vw, 38px); letter-spacing: -.035em; }
.hero-card p { margin: 0; }
.status-cluster { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.badge.live { color: #a7f3d0; border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.1); }
.badge.offline { color: #c5cad4; background: rgba(255,255,255,.035); }
.badge.neutral { color: #c8d0ff; background: rgba(92,124,255,.08); }

.grid.two { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .65fr); gap: 18px; margin-top: 18px; }
.panel { border-radius: 22px; padding: 18px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel h2 { margin: 0; font-size: 16px; }
.video-frame, .cinema-screen { position: relative; border-radius: 18px; overflow: hidden; background: #020307; border: 1px solid rgba(255,255,255,.07); }
.video-frame { aspect-ratio: 16 / 9; }
.video-frame video, .cinema-screen video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.video-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 9px; text-align: center; padding: 24px; color: var(--muted); }
.video-placeholder strong { color: var(--text); font-size: 18px; }
.video-placeholder[hidden] { display: none; }
.screen-icon { font-size: 44px; color: #8195ff; text-shadow: 0 0 28px rgba(92,124,255,.42); }
.actions { display: flex; gap: 10px; margin-top: 14px; }

.btn {
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 15px; color: var(--text); cursor: pointer; background: rgba(255,255,255,.04);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.btn:disabled { cursor: not-allowed; opacity: .45; }
.btn.primary { background: linear-gradient(135deg, #526fff, #7358f6); border-color: rgba(142,159,255,.4); box-shadow: 0 10px 28px rgba(82,111,255,.2); }
.btn.danger { background: rgba(255,93,108,.10); color: #ff9ca7; border-color: rgba(255,93,108,.25); }
.btn.ghost { background: rgba(255,255,255,.03); }

.info-list { display: grid; gap: 8px; }
.info-list > div { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.info-list span { color: var(--muted); font-size: 12px; }
code { color: #cad3ff; overflow-wrap: anywhere; }
.notice { margin-top: 16px; padding: 14px; border-radius: 14px; background: rgba(92,124,255,.075); border: 1px solid rgba(92,124,255,.16); color: #b8c2da; line-height: 1.55; font-size: 13px; }

.center-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(440px, 100%); border-radius: 24px; padding: 30px; }
.auth-card h1 { margin: 18px 0 8px; font-size: 28px; }
.auth-card .muted { line-height: 1.55; }
.stack { display: grid; gap: 10px; margin-top: 24px; }
.stack label { font-size: 12px; color: #bbc4d6; font-weight: 700; }
input { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #090d15; color: var(--text); padding: 13px 14px; outline: none; }
input:focus { border-color: rgba(92,124,255,.6); box-shadow: 0 0 0 3px rgba(92,124,255,.10); }
.text-link { display: inline-block; margin-top: 18px; color: #aebaff; text-decoration: none; font-size: 13px; }
.alert { padding: 11px 13px; border-radius: 12px; margin-top: 18px; font-size: 13px; }
.alert.error { background: rgba(255,93,108,.10); color: #ffb1b9; border: 1px solid rgba(255,93,108,.2); }

.viewer-body { overflow: hidden; }
.viewer-shell { width: 100%; max-width: none; margin: 0; height: calc(100vh - 68px); padding: 16px; }
.cinema { height: 100%; border-radius: 22px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cinema-screen { flex: 1; min-height: 0; }
.viewer-placeholder { background: radial-gradient(circle at 50% 40%, rgba(92,124,255,.08), transparent 32%); }
.viewer-placeholder .btn { margin-top: 8px; }
.viewer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; min-height: 42px; }

@media (max-width: 820px) {
  .topbar { padding: 0 16px; }
  .shell { width: min(100% - 20px, 1240px); margin-top: 10px; }
  .hero-card { align-items: flex-start; flex-direction: column; }
  .grid.two { grid-template-columns: 1fr; }
  .viewer-shell { padding: 8px; }
  .cinema { border-radius: 16px; padding: 8px; }
  .viewer-topbar .brand-row span { display: none; }
}

/* =========================================================
   VIEWER ROMÂNTICO
   ========================================================= */
.love-auth-page,
.love-viewer {
  --love-bg: #0b0311;
  --love-bg-2: #16051f;
  --love-panel: rgba(24, 8, 34, .72);
  --love-panel-strong: rgba(18, 6, 27, .91);
  --love-line: rgba(235, 190, 255, .14);
  --love-text: #fff7ff;
  --love-muted: #cbb8d4;
  --love-purple: #a855f7;
  --love-purple-2: #7c3aed;
  --love-pink: #f472b6;
  --love-soft: #e9d5ff;
}

.love-auth-page {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 18% 12%, rgba(168, 85, 247, .26), transparent 32%),
    radial-gradient(circle at 82% 84%, rgba(244, 114, 182, .18), transparent 34%),
    linear-gradient(145deg, var(--love-bg) 0%, var(--love-bg-2) 48%, #08020d 100%);
  color: var(--love-text);
}

.love-bg,
.love-viewer-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.love-orb,
.viewer-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(14px);
  opacity: .65;
}

.orb-one {
  width: 320px;
  height: 320px;
  left: -120px;
  top: -90px;
  background: radial-gradient(circle, rgba(168, 85, 247, .34), transparent 68%);
}

.orb-two {
  width: 380px;
  height: 380px;
  right: -155px;
  bottom: -135px;
  background: radial-gradient(circle, rgba(244, 114, 182, .22), transparent 68%);
}

.floating-heart,
.viewer-heart {
  position: absolute;
  color: rgba(233, 213, 255, .15);
  text-shadow: 0 0 24px rgba(168, 85, 247, .2);
  user-select: none;
  animation: loveFloat 7s ease-in-out infinite;
}

.heart-one { left: 7%; top: 18%; font-size: 22px; }
.heart-two { right: 9%; top: 22%; font-size: 34px; animation-delay: -2s; }
.heart-three { left: 12%; bottom: 15%; font-size: 46px; animation-delay: -4s; }
.heart-four { right: 16%; bottom: 13%; font-size: 18px; animation-delay: -1s; }

@keyframes loveFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); opacity: .12; }
  50% { transform: translate3d(0, -14px, 0) rotate(5deg); opacity: .25; }
}

.love-auth-card {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  padding: clamp(26px, 6vw, 40px);
  border: 1px solid var(--love-line);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 38%),
    var(--love-panel);
  box-shadow:
    0 32px 90px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 60px rgba(124,58,237,.08);
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
}

.love-auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(216,180,254,.10), transparent 38%);
}

.love-lockup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.love-mark,
.viewer-love-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(145deg, var(--love-pink), var(--love-purple) 58%, var(--love-purple-2));
  box-shadow: 0 12px 34px rgba(168,85,247,.30), 0 0 28px rgba(244,114,182,.15);
}

.love-mark {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  font-size: 25px;
}

.love-kicker {
  margin: 0 0 5px;
  color: #e9d5ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .22em;
}

.love-auth-card h1 {
  margin: 0;
  font-size: clamp(25px, 7vw, 34px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.love-copy {
  position: relative;
  margin: 24px 0 0;
  color: var(--love-muted);
  line-height: 1.65;
  font-size: 14px;
}

.love-alert {
  position: relative;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(244,114,182,.22);
  border-radius: 14px;
  background: rgba(244,114,182,.08);
  color: #ffd5ea;
  font-size: 13px;
}

.love-form {
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.love-form label {
  color: #dccce4;
  font-size: 12px;
  font-weight: 750;
}

.love-input-wrap {
  position: relative;
}

.love-input-wrap > span {
  position: absolute;
  z-index: 1;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #d8b4fe;
  font-size: 18px;
  pointer-events: none;
}

.love-input-wrap input {
  height: 52px;
  padding: 0 16px 0 45px;
  border: 1px solid rgba(233,213,255,.14);
  border-radius: 16px;
  background: rgba(8,2,13,.64);
  color: #fff8ff;
  box-shadow: 0 1px 0 rgba(255,255,255,.025) inset;
}

.love-input-wrap input::placeholder { color: #816f8a; }
.love-input-wrap input:focus {
  border-color: rgba(192,132,252,.62);
  box-shadow: 0 0 0 4px rgba(168,85,247,.10), 0 0 32px rgba(168,85,247,.08);
}

.love-btn {
  height: 52px;
  margin-top: 4px;
  border: 1px solid rgba(233,213,255,.20);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-weight: 850;
  cursor: pointer;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 52%, #ec4899 120%);
  box-shadow: 0 16px 36px rgba(124,58,237,.23), 0 0 30px rgba(236,72,153,.08);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.love-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.love-btn:active { transform: translateY(0) scale(.99); }

.love-note {
  position: relative;
  margin: 22px 0 0;
  color: #8f7c99;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
}

.love-viewer {
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 5%, rgba(168,85,247,.18), transparent 31%),
    radial-gradient(circle at 90% 90%, rgba(236,72,153,.12), transparent 32%),
    linear-gradient(145deg, #08020d 0%, #12051d 50%, #07010b 100%);
  color: var(--love-text);
}

.glow-one {
  width: 460px;
  height: 460px;
  left: -220px;
  top: 4%;
  background: radial-gradient(circle, rgba(124,58,237,.20), transparent 69%);
}

.glow-two {
  width: 520px;
  height: 520px;
  right: -260px;
  bottom: -150px;
  background: radial-gradient(circle, rgba(236,72,153,.13), transparent 69%);
}

.vh-one { left: 3%; top: 25%; font-size: 25px; }
.vh-two { right: 4%; top: 36%; font-size: 18px; animation-delay: -3s; }
.vh-three { right: 12%; bottom: 8%; font-size: 34px; animation-delay: -5s; }

.viewer-love-topbar {
  position: relative;
  z-index: 5;
  min-height: 74px;
  padding: max(12px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 12px max(22px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(233,213,255,.08);
  background: rgba(8,2,13,.62);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.viewer-love-brand,
.viewer-love-actions {
  display: flex;
  align-items: center;
}

.viewer-love-brand { gap: 12px; min-width: 0; }
.viewer-love-actions { gap: 10px; }

.viewer-love-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 18px;
}

.viewer-love-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.viewer-love-title strong {
  font-size: 15px;
  letter-spacing: -.015em;
}

.viewer-love-title span {
  color: #a995b4;
  font-size: 11px;
  white-space: nowrap;
}

.love-status .badge {
  border-color: rgba(233,213,255,.12);
  background: rgba(255,255,255,.035);
}

.love-status .badge.live {
  color: #f5d0fe;
  border-color: rgba(216,180,254,.28);
  background: rgba(168,85,247,.12);
  box-shadow: 0 0 18px rgba(168,85,247,.08);
}

.love-status .badge.neutral { color: #d8b4fe; background: rgba(168,85,247,.07); }

.love-exit {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(233,213,255,.10);
  border-radius: 11px;
  color: #bba8c4;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.love-exit:hover { color: #fff; background: rgba(168,85,247,.10); transform: translateY(-1px); }

.love-shell {
  position: relative;
  z-index: 2;
  height: calc(100svh - 74px);
  padding: 14px clamp(10px, 2vw, 20px) max(14px, env(safe-area-inset-bottom));
}

.love-cinema {
  height: 100%;
  padding: 10px;
  gap: 10px;
  border: 1px solid rgba(233,213,255,.11);
  border-radius: 24px;
  background: rgba(16,5,24,.62);
  box-shadow: 0 28px 80px rgba(0,0,0,.40), 0 0 60px rgba(124,58,237,.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.love-screen-frame {
  flex: 1;
  min-height: 0;
  padding: 1px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(216,180,254,.24), rgba(244,114,182,.09), rgba(124,58,237,.20));
}

.love-screen {
  height: 100%;
  border: 0;
  border-radius: 19px;
  background: #020104;
  box-shadow: 0 18px 55px rgba(0,0,0,.42) inset;
}

.love-screen video { border-radius: inherit; }

.love-placeholder {
  gap: 10px;
  background:
    radial-gradient(circle at 50% 42%, rgba(168,85,247,.12), transparent 26%),
    linear-gradient(180deg, rgba(8,2,13,.22), rgba(8,2,13,.68));
}

.love-placeholder strong {
  font-size: clamp(17px, 2.4vw, 22px);
  letter-spacing: -.02em;
}

.love-placeholder > span {
  max-width: 420px;
  color: #a995b4;
  font-size: 13px;
  line-height: 1.5;
}

.love-screen-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  border: 1px solid rgba(233,213,255,.15);
  border-radius: 20px;
  color: #f0d6ff;
  background: linear-gradient(145deg, rgba(168,85,247,.20), rgba(236,72,153,.10));
  box-shadow: 0 14px 40px rgba(124,58,237,.16), 0 0 36px rgba(236,72,153,.06);
  font-size: 24px;
}

.love-placeholder-actions { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; margin-top: 4px; }

.btn.love-primary {
  border-color: rgba(233,213,255,.18);
  background: linear-gradient(135deg, #7c3aed, #a855f7 58%, #d946ef);
  box-shadow: 0 12px 30px rgba(124,58,237,.20);
}

.btn.love-ghost {
  border-color: rgba(233,213,255,.10);
  color: #dccce4;
  background: rgba(255,255,255,.035);
}

.love-footer {
  min-height: 44px;
  padding: 0 4px 0 6px;
  color: #a995b4;
  font-size: 12px;
}

.love-connection {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.love-connection span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.love-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #c084fc;
  box-shadow: 0 0 13px rgba(192,132,252,.62);
  animation: lovePulse 1.8s ease-in-out infinite;
}

@keyframes lovePulse {
  0%, 100% { opacity: .45; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.12); }
}

.session-cards { display: grid; gap: 10px; }
.session-card {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.session-card span { color: var(--muted); font-size: 11px; }
.session-card strong { font-size: 13px; font-weight: 750; }

@media (max-width: 640px) {
  .floating-heart { opacity: .55; }
  .love-auth-card { border-radius: 24px; padding: 25px 20px; }
  .love-mark { width: 52px; height: 52px; border-radius: 18px; }

  .viewer-love-topbar {
    min-height: 66px;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
  }
  .viewer-love-mark { width: 38px; height: 38px; border-radius: 13px; }
  .viewer-love-title span { display: none; }
  .viewer-love-title strong { font-size: 14px; }
  .love-status .badge { padding: 7px 9px; font-size: 9px; }
  .love-status .badge.neutral { display: none; }
  .viewer-love-actions { gap: 7px; }
  .love-shell { height: calc(100svh - 66px); padding: 7px 7px max(7px, env(safe-area-inset-bottom)); }
  .love-cinema { padding: 6px; border-radius: 18px; gap: 6px; }
  .love-screen-frame { border-radius: 15px; }
  .love-screen { border-radius: 14px; }
  .love-placeholder { padding: 18px; }
  .love-screen-icon { width: 50px; height: 50px; border-radius: 17px; font-size: 21px; }
  .love-placeholder > span { font-size: 12px; }
  .love-footer { min-height: 42px; gap: 8px; padding-left: 5px; }
  .love-footer .love-connection { flex: 1; }
  .btn.love-ghost { padding: 9px 11px; white-space: nowrap; font-size: 11px; }
}

@media (max-width: 390px) {
  .viewer-love-title strong { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .love-status .badge.offline { max-width: 83px; overflow: hidden; text-overflow: ellipsis; }
  .love-footer { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-heart,
  .viewer-heart,
  .love-dot { animation: none !important; }
  .love-btn,
  .love-exit { transition: none; }
}

/* Sala e chamada: fluxo responsivo sem altura fixa no celular. */
.viewer-body.love-viewer { overflow-x: clip; overflow-y: auto; }
.love-shell { height: auto; min-height: calc(100svh - 74px); display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 16px; }
.love-cinema { height: min(78svh, 850px); min-height: 340px; min-width: 0; }
.room-panel { padding: 20px; border-radius: 22px; min-width: 0; margin-top: 18px; }
.love-shell > .room-panel { margin-top: 0; }
.room-panel h2 { margin: 0 0 5px; font-size: 18px; }
.profile-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-form label { grid-column: 1 / -1; font-size: 12px; color: #cbb8d4; display: grid; gap: 7px; }
.profile-form input { min-width: 0; }
.photo-picker input { padding: 9px; font-size: 12px; }
.call-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.call-controls .btn { flex: 1 1 120px; }
.call-controls [aria-pressed="true"] { background: #7034b6; border-color: #c084fc; }
#callMessage { line-height: 1.6; }
.participant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.participant { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.03); }
.participant-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: #10091b; }
.participant-media video { width: 100%; height: 100%; object-fit: cover; }
.participant-avatar { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(145deg,#32204d,#191125); font-size: 30px; color: #e9d5ff; }
.participant-avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.participant strong { display: block; font-size: 13px; margin: 9px 0 4px; overflow-wrap: anywhere; }
.participant > span { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }
.btn { min-height: 44px; }
button:focus-visible { outline: 2px solid #d8b4fe; outline-offset: 3px; }
.call-dock {
  position: absolute; z-index: 20; right: 12px; top: 12px;
  width: min(280px, calc(100% - 24px)); max-height: calc(100% - 70px);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #49454f; border-radius: 12px;
  background: #232428; color: #f2f3f5; box-shadow: 0 8px 32px #0009;
}
.call-dock-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 4px 8px 4px 12px; background: #1e1f22; font-size: 13px; font-weight: 700; cursor: grab; touch-action: none; user-select: none; }
.call-dock.dragging .call-dock-header { cursor: grabbing; }
.call-dock-header:focus-visible { outline: 2px solid #a5aaff; outline-offset: -2px; }
.call-dock-toggle { width: 32px; height: 32px; border: 0; border-radius: 6px; background: #313338; color: #fff; cursor: pointer; font-size: 20px; }
.call-dock-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.call-dock .participant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.call-dock .participant { padding: 0; border: 0; position: relative; background: #111214; overflow: hidden; border-radius: 8px; }
.call-dock .participant:only-child { grid-column: 1 / -1; }
.call-dock .participant-media { aspect-ratio: 16 / 10; border-radius: 0; }
.call-dock .participant strong { margin: 0; padding: 5px 7px; font-size: 11px; }
.call-dock .participant > span { padding: 0 7px 6px; font-size: 10px; }
.call-dock .participant-avatar { background: #313338; font-size: 23px; }
.call-dock .participant-avatar img { width: 48px; height: 48px; }
.call-dock .call-controls { margin-top: 8px; gap: 5px; }
.call-dock .call-controls .btn { min-height: 36px; padding: 7px 5px; font-size: 11px; flex-basis: 100px; background: #383a40; border-color: #484a52; }
.call-dock .call-controls [aria-pressed="true"] { background: #5865f2; border-color: #7983f5; }
.screen-exit { display: none; position: absolute; z-index: 21; left: 12px; bottom: 12px; background: #232428e8; }
.cinema-screen:fullscreen, .screen-expanded { width: 100%; height: 100%; max-height: none; min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; }
.cinema-screen:fullscreen .screen-exit, .screen-expanded .screen-exit { display: block; }
.cinema-screen.screen-expanded { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100dvh; }
.cinema-expanded { overflow: hidden !important; }
.cinema-expanded .love-shell { z-index: 100; }
.cinema-expanded .love-cinema { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 640px) {
  .call-dock { width: min(220px, calc(100% - 24px)); max-height: calc(100% - 62px); }
  .call-dock .participant-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 1050px) {
  .love-shell { grid-template-columns: 1fr; }
  .love-cinema { height: auto; min-height: 0; }
  .love-screen-frame { flex: auto; }
  .love-screen { aspect-ratio: 16 / 9; min-height: 260px; }
  .participant-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 640px) {
  .love-shell { height: auto; padding: 10px 8px max(16px, env(safe-area-inset-bottom)); gap: 12px; }
  .viewer-love-topbar { flex-wrap: wrap; gap: 8px; }
  .viewer-love-brand { gap: 7px; }
  .viewer-love-actions { margin-left: auto; }
  .love-screen { min-height: 240px; }
  .love-placeholder { padding: 12px; gap: 6px; }
  .love-placeholder strong { font-size: 16px; }
  .love-screen-icon { width: 38px; height: 38px; font-size: 18px; margin: 0; }
  .love-footer { flex-wrap: wrap; padding: 8px 4px; }
  .love-connection span:last-child { white-space: normal; line-height: 1.5; }
  .room-panel { padding: 14px; border-radius: 18px; }
  .actions { flex-wrap: wrap; }
  .actions .btn { flex: 1 1 140px; }
  .panel-head { flex-wrap: wrap; }
  .topbar { height: auto; min-height: 68px; gap: 10px; padding: 12px; }
  .hero-card { padding: 18px; }
  .panel { padding: 14px; }
  .video-frame { min-height: 220px; }
  .love-auth-page { overflow-y: auto; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .love-screen { min-height: 220px; }
  .love-cinema { height: auto; }
}

/* Sala comunitária responsiva com foco central e miniatura da transmissão. */
.love-shell { width: 100%; max-width: none; margin: 0; padding: 16px clamp(12px, 1.4vw, 24px) max(16px, env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1.4fr) minmax(340px, .85fr); align-items: start; gap: 16px; }
.love-cinema { grid-column: 1; grid-row: 1; width: 100%; height: min(76svh, 820px); min-height: 430px; }
.love-shell > .room-panel { grid-column: 2; grid-row: 1; width: 100%; justify-self: stretch; margin: 0; padding: 18px; border-radius: 20px; background: #15131c; }
.room-panel .eyebrow { margin-bottom: 5px; color: #a78bfa; }
.room-panel h2 { margin-bottom: 4px; }
.room-panel .panel-head { margin-bottom: 14px; }
.call-stage { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: #08080d; margin-bottom: 16px; }
.stage-heading { min-height: 39px; padding: 0 11px; display: flex; align-items: center; gap: 8px; background: #201c29; font-size: 12px; }
.stage-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-indicator { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 12px #a78bfa; }
.stage-hint { margin-left: auto; color: #aaa3b5; font-size: 10px; white-space: nowrap; }
.stage-media { position: relative; display: grid; place-items: center; width: min(100%, 1000px); height: clamp(270px, 43svh, 470px); margin: 0 auto; overflow: hidden; background: radial-gradient(ellipse at center, #251a37 0%, #0b0a10 70%); }
.stage-media > video { width: 100%; height: 100%; object-fit: contain; background: #050409; }
.stage-empty { display: grid; justify-items: center; gap: 7px; text-align: center; padding: 16px; color: #aaa3b5; }
.stage-empty > i { font-size: 28px; color: #a78bfa; }
.stage-empty strong { color: #eee9f5; font-size: 13px; }
.stage-empty small { font-size: 11px; }
.stage-avatar { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at center, #34264c, #111018); color: #e9d5ff; font-size: 50px; font-weight: 800; }
.stage-avatar img { width: 96px; height: 96px; border: 3px solid #ffffff28; border-radius: 50%; object-fit: cover; }
.stage-switch { position: absolute; right: 9px; bottom: 9px; min-height: 36px; padding: 0 11px; border: 1px solid #ffffff1c; border-radius: 10px; background: #15131cdd; color: #f5f1fb; font-size: 12px; cursor: pointer; }
.people-heading { display: flex; justify-content: space-between; align-items: center; margin: 0 0 9px; font-size: 12px; }
.room-panel .participant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.room-panel .participant { display: block; width: 100%; min-width: 0; padding: 0; overflow: hidden; border: 1px solid #ffffff12; border-radius: 12px; background: #201c29; color: var(--text); text-align: left; cursor: pointer; }
.room-panel .participant.is-focused { border-color: #a78bfa; box-shadow: 0 0 0 1px #a78bfa55; }
.room-panel .participant-media { aspect-ratio: 16 / 10; border-radius: 0; }
.room-panel .participant-media video { object-fit: cover; }
.room-panel .participant-avatar { background: linear-gradient(145deg,#392750,#1d1926); }
.room-panel .participant strong { margin: 0; padding: 7px 8px 2px; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.room-panel .participant > span { padding: 0 8px 7px; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.profile-form { margin: 16px 0 0; padding: 14px; gap: 10px; border: 1px solid rgba(233,213,255,.09); border-radius: 14px; background: rgba(255,255,255,.025); }
.profile-form label { color: #cbb8d4; }
.profile-form input:not([type="file"]) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid rgba(233,213,255,.14); border-radius: 11px; background: #100d16; color: #f5f1fb; }
.photo-picker input[type="file"] { width: 100%; min-height: 44px; padding: 5px; border: 1px solid rgba(233,213,255,.14); border-radius: 11px; background: #100d16; color: #bdb4c8; }
.photo-picker input[type="file"]::file-selector-button { min-height: 32px; margin-right: 10px; padding: 0 11px; border: 0; border-radius: 8px; background: #39264e; color: #f3e8ff; font: inherit; cursor: pointer; }
.profile-form .btn { border-color: rgba(192,132,252,.22); background: #251b30; }
.profile-form .btn:hover { background: #332342; }
.profile-form .btn > i { margin-right: 5px; }
.movie-mini { position: fixed; z-index: 40; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: clamp(150px, 24vw, 280px); aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 2px solid #c084fc; border-radius: 13px; background: #100d16; box-shadow: 0 12px 38px #0009, 0 0 24px #8b5cf633; cursor: pointer; }
.movie-mini[hidden] { display: none; }
.movie-mini video { display: block; width: 100%; height: 100%; object-fit: contain; background: #050409; }
.movie-mini-label { position: absolute; right: 5px; bottom: 5px; display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 7px; background: #100d16d9; color: #f3e8ff; font-size: 10px; }
.call-dock { display: none; }
.call-controls { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(100%, 760px); margin: 12px auto; padding: 12px; border: 1px solid rgba(233,213,255,.11); border-radius: 16px; background: #211a2b; box-shadow: 0 10px 28px #0003; }
.call-controls .btn { flex: 1 1 170px; min-height: 48px; padding: 10px 14px; border-color: #ffffff1c; background: #32273f; color: #f8f3ff; }
.call-controls .btn > i { margin-right: 7px; }
.call-controls .btn[aria-pressed="true"] { border-color: #c084fc; background: #673b86; }
.call-controls .btn.danger { background: #482832; color: #ffdce0; }
.call-controls .btn:disabled { opacity: .55; }
.call-message { width: min(100%, 760px); min-height: 18px; margin: 8px auto 12px; text-align: center; line-height: 1.5; }
.call-dock-note { padding: 10px; border-radius: 10px; background: #ffffff08; color: #aaa3b5; font-size: 11px; line-height: 1.5; }
.movie-highlight { outline: 2px solid #a78bfa; outline-offset: 3px; }
@media (max-width: 850px) {
  .love-shell { width: 100%; padding-inline: 12px; grid-template-columns: minmax(0, 1fr); }
  .love-shell > .room-panel { grid-column: 1; grid-row: 2; }
  .love-cinema { grid-column: 1; grid-row: 1; height: auto; min-height: 0; }
  .room-panel .participant-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .stage-media { height: clamp(230px, 43svh, 410px); }
}
@media (max-width: 640px) {
  .love-shell { width: 100%; padding: 9px 9px max(22px, env(safe-area-inset-bottom)); gap: 10px; }
  .love-shell > .room-panel { padding: 14px; border-radius: 18px; }
  .love-cinema { padding: 8px; }
  .room-panel .participant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .room-panel .participant { border-radius: 10px; }
  .room-panel .participant-media { aspect-ratio: 16 / 10; }
  .stage-heading { min-height: 36px; }
  .stage-hint { font-size: 9px; }
  .stage-media { width: 100%; height: clamp(195px, 54vw, 320px); max-height: 44svh; }
  .movie-mini { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: clamp(138px, 39vw, 190px); border-radius: 10px; }
  .profile-form { grid-template-columns: 1fr; }
  .profile-form .btn { min-height: 44px; }
  .call-controls { position: sticky; bottom: max(7px, env(safe-area-inset-bottom)); z-index: 5; gap: 7px; padding: 8px; margin: 12px 0 8px; border-radius: 15px; background: #17141df2; backdrop-filter: blur(16px); }
  .call-controls .btn { min-height: 48px; flex: 1 1 calc(50% - 7px); padding: 9px 6px; font-size: 13px; }
  .call-controls #leaveCallBtn { flex: 1 1 calc(50% - 7px); }
  .love-screen { min-height: 0; height: clamp(190px, 55vw, 360px); aspect-ratio: auto; }
  .love-screen-frame { min-height: 0; flex: none; }
  .love-cinema { height: auto; min-height: 0; }
  .profile-form { grid-template-columns: 1fr 1fr; }
  .profile-form label { grid-column: 1 / -1; }
}
@media (max-width: 390px) {
  .room-panel .participant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-panel .participant > span { font-size: 9px; }
  .stage-hint { display: none; }
}
@media (orientation: portrait) and (max-width: 1200px) {
  .love-shell { width: 100%; padding-inline: 14px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .love-shell > .room-panel { grid-column: 1; grid-row: 1; }
  .love-cinema { grid-column: 1; grid-row: 2; width: 100%; height: auto; min-height: 0; }
  .stage-media { width: 100%; height: clamp(300px, 44svh, 620px); }
  .love-screen { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .love-screen-frame { flex: none; min-height: 0; }
  .movie-mini { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: clamp(210px, 32vw, 360px); }
}

/* A página fica fixa na altura da janela; a área de conteúdo rola dentro do painel. */
.viewer-body.love-viewer { display: flex; flex-direction: column; width: 100%; height: 100svh; min-height: 0; overflow: hidden; }
.viewer-love-topbar { flex: 0 0 auto; }
.viewer-shell.love-shell { flex: 1 1 0; width: 100%; height: auto; min-height: 0; max-height: none; margin: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.love-shell > .love-cinema,
.love-shell > .room-panel { height: 100%; min-height: 0; }
.love-shell > .room-panel { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #75499a #1b1522; scrollbar-width: thin; }
.love-shell > .love-cinema { overflow: hidden; }
.room-panel > .panel-head,
.room-panel > .call-stage,
.room-panel > .call-controls,
.room-panel > .call-message,
.room-panel > .people-heading,
.room-panel > #participantGrid,
.room-panel > .profile-form,
.room-panel > p { flex: 0 0 auto; }
.room-panel > .call-stage { display: block; }
.love-screen-frame { min-height: 0; }
@media (max-width: 850px) {
  .viewer-shell.love-shell { grid-template-rows: minmax(0, 1.05fr) minmax(0, .95fr); }
  .love-shell > .love-cinema,
  .love-shell > .room-panel { height: 100%; min-height: 0; }
}
@media (orientation: portrait) and (max-width: 1200px) {
  .viewer-shell.love-shell { grid-template-rows: minmax(0, 1.2fr) minmax(0, .8fr); }
}