/* =====================================================================
   TELINHA NO CELULAR (só na versão de navegador)
   O mais perto possível do app do Discord: chat na tela toda, gaveta da
   esquerda com as turmas + quem está online, live em cima do chat.
   ===================================================================== */

/* ---------- em qualquer navegador (celular ou PC): o que só existe no app ---------- */
body.web .tb-win, body.web .tb-gap, body.web #tb-invite { display: none !important; }
body.web #titlebar { -webkit-app-region: initial; }
body.web #btn-stream, body.web #btn-switch, body.web #btn-rec, body.web #btn-rec-mic, body.web #my-stream-card,
body.web #btn-cam-settings, body.web #home-turma, body.web #btn-create, body.web .home-turma-row ~ .divider,
body.web .join-row, body.web #home .quick-create { display: none !important; }
body.web .home-turma-row { grid-template-columns: 1fr; }
body.web .set-sec[data-sec="transmissao"], body.web .set-sec[data-sec="discord"], body.web .set-sec[data-sec="avancado"],
body.web #set-tray, body.web #set-autostart, body.web #set-notify, body.web #set-mini, body.web .upd-row { display: none !important; }
body.web label.check:has(> #set-tray), body.web label.check:has(> #set-autostart), body.web label.check:has(> #set-notify),
body.web label.check:has(> #set-mini) { display: none !important; }
.on-phone { display: inline-grid; place-items: center; margin-left: 5px; color: var(--faint); vertical-align: -2px; }
.on-phone svg { width: 13px; height: 13px; }
.tap-sound {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8;
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px;
  background: rgba(0,0,0,.72); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.45); backdrop-filter: blur(6px);
}
.tap-sound svg { width: 18px; height: 18px; }

/* ---------- celular ---------- */
body.mobile {
  --tb: calc(52px + env(safe-area-inset-top));
  --rail: 72px;
  --drawer: min(84vw, 360px);
  --safe-b: env(safe-area-inset-bottom);
  font-size: 15px;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
body.mobile, body.mobile html { height: var(--vh, 100%); }
body.mobile .screen { margin-left: 0; height: calc(var(--vh, 100vh) - var(--tb)); }

/* topo: ☰ · nome da turma · configurações */
body.mobile #titlebar {
  height: var(--tb); padding-top: env(safe-area-inset-top);
  grid-template-columns: auto 1fr auto; gap: 6px; background: var(--bg2); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
body.mobile .tb-left { padding-left: 6px; gap: 0; }
body.mobile .tb-logo, body.mobile .tb-app { display: none; }
body.mobile .tb-center { justify-content: flex-start; font-size: 16px; font-weight: 700; padding-left: 2px; }
body.mobile #tb-title { max-width: 60vw; }
body.mobile .tb-btn { width: 44px; height: 44px; margin: 0; border-radius: 10px; }
body.mobile .tb-btn svg { width: 22px; height: 22px; }
body.mobile .tb-right { align-items: center; padding-right: 6px; }
.m-menu { position: relative; color: var(--text) !important; }
.m-menu-live {
  position: absolute; top: 5px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--live); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--bg2);
}

/* gaveta da esquerda: turmas (rail) + membros (sidebar), como o Discord */
body.mobile .rail {
  top: var(--tb); bottom: 0; width: var(--rail); z-index: 120; padding-bottom: calc(10px + var(--safe-b));
  transform: translateX(-100%); transition: transform .22s ease; border-right: 0;
}
body.mobile #room .sidebar {
  position: fixed; top: var(--tb); bottom: 0; left: var(--rail); width: calc(var(--drawer) - var(--rail)); z-index: 120;
  transform: translateX(calc(-100% - var(--rail))); transition: transform .22s ease; border-radius: 0 14px 14px 0;
  padding-bottom: var(--safe-b); box-shadow: 8px 0 30px rgba(0,0,0,.35);
}
body.mobile.drawer-open .rail, body.mobile.drawer-open #room .sidebar { transform: none; }
.m-backdrop { position: fixed; inset: var(--tb) 0 0 0; background: rgba(0,0,0,.5); z-index: 110; opacity: 0; pointer-events: none; transition: opacity .22s; }
body.mobile.drawer-open .m-backdrop { opacity: 1; pointer-events: auto; }
/* (fora da turma, a gaveta mostra só as turmas) */
body.mobile:not(.in-room) #room .sidebar { display: none; }

body.mobile .member { padding: 10px 8px; }
body.mobile .member .btn.watch { padding: 8px 14px; font-size: 14px; border-radius: 9px; }
body.mobile .member .avatar { width: 38px; height: 38px; }
body.mobile .me-panel { padding: 12px 12px calc(12px + var(--safe-b)); }
body.mobile .stream-row { display: none; } /* (a câmera fica na barra de baixo) */
body.mobile .room-head { padding: 14px 14px 10px; }

/* sala: chat na tela toda; a live aparece em cima quando você assiste */
body.mobile #room { flex-direction: column; }
body.mobile #room .stage-wrap { display: none; flex: none; background: #000; }
body.mobile.m-watching #room .stage-wrap, body.mobile #room .stage-wrap.has-cams { display: flex; height: auto; max-height: 46vh; }
body.mobile .stage { padding: 0; gap: 2px; align-content: start; }
body.mobile .stage .tile { border-radius: 0; max-height: 46vh; }
body.mobile .stage.n2, body.mobile .stage.n3, body.mobile .stage.n4 { grid-template-columns: 1fr 1fr; }
body.mobile .stage .tile.live-card { display: none; } /* (os cartões "Assistir" ficam na gaveta) */
body.mobile .chat-toggle { display: none !important; }
body.mobile #room .chat { width: 100%; flex: 1; border-left: 0; min-height: 0; display: flex !important; }
body.mobile .chat-head { display: none; }
body.mobile .chat-log { padding: 10px 12px; -webkit-overflow-scrolling: touch; }
body.mobile .chat-form { padding: 8px 10px calc(8px + var(--safe-b)); background: var(--bg2); }
body.mobile .chat-form input, body.mobile #chat-input { font-size: 16px; /* (menos que 16 e o iPhone dá zoom) */ min-height: 42px; }
body.mobile .chat-in-btn { width: 38px; height: 38px; }
body.mobile .msg-tools { opacity: 1; } /* (sem mouse: os botões da mensagem aparecem ao tocar) */

/* barra da "chamada": live que está assistindo + câmera */
.m-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg3); border-bottom: 1px solid var(--line);
}
.m-bar-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.m-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.m-bar.active .m-bar-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(47,210,122,.22); }
.m-bar.active .m-bar-info { color: var(--text); font-weight: 600; }
.m-bar-btn { width: 42px; height: 38px; border: 0; border-radius: 10px; background: var(--bg4); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.m-bar-btn svg { width: 20px; height: 20px; }
.m-bar-btn.on { background: var(--accent); color: #fff; }
.m-bar-btn.danger { background: #4a1f26; color: #ff8d98; }
body:not(.mobile) .m-bar { display: none; }

/* controles do vídeo: tocar mostra/esconde (sem mouse) */
body.mobile .tile .tile-bar { padding: 30px 8px 6px; }
body.mobile .tile .tile-actions .icon-btn { width: 40px; height: 40px; }
body.mobile .tile .tile-actions .icon-btn svg { width: 20px; height: 20px; }
body.mobile .tile .vol, body.mobile .tile .act-pointer { display: none; } /* (volume do celular é pelos botões dele) */
body.mobile .tile-title { font-size: 13px; }

/* tela cheia deitada */
body.mobile .tile:fullscreen { max-height: none; aspect-ratio: auto; border-radius: 0; }
body.mobile .tile:fullscreen video { object-fit: contain; }

/* câmeras: bolinhas do lado da live, como no app */
body.mobile .cam-tile { border-radius: 12px; }

/* tela inicial (entrar pelo convite) */
body.mobile #home { align-items: flex-start; padding: 24px 16px calc(24px + var(--safe-b)); overflow-y: auto; }
body.mobile .home-card { width: 100%; max-width: 440px; margin: 0 auto; padding: 22px 18px; border-radius: 18px; }
body.mobile .home-choice { min-height: 64px; }
body.mobile input, body.mobile select, body.mobile textarea { font-size: 16px; }

/* janelas (configurações, convite...): ocupam a tela, como folhas que sobem */
body.mobile .modal { inset: 0; place-items: end center; z-index: 300; }
body.mobile .modal-card { width: 100%; max-width: 100%; max-height: calc(var(--vh, 100vh) - env(safe-area-inset-top) - 12px); border-radius: 18px 18px 0 0; padding-bottom: var(--safe-b); animation: m-sheet .22s ease; }
@keyframes m-sheet { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
body.mobile .toasts { top: calc(var(--tb) + 8px); width: calc(100% - 24px); }
body.mobile .toast { max-width: 100%; font-size: 14px; }

/* emoji / GIF / "+": em cima do teclado */
body.mobile .gif-pop, body.mobile .emoji-pop, body.mobile .plus-pop { left: 8px; right: 8px; bottom: calc(62px + var(--safe-b)); }
body.mobile .gif-pop { height: min(52vh, 420px); }

/* mini player do celular (fora da turma): canto de baixo */
body.mobile .mplayer { width: 52vw; bottom: calc(14px + var(--safe-b)) !important; }

/* app na tela de início: sem a barra do navegador, o topo encosta no relógio */
body.mobile.standalone #titlebar { background: var(--bg2); }

/* celular deitado: live grande à esquerda, chat estreito à direita */
@media (orientation: landscape) and (max-height: 520px) {
  body.mobile.m-watching #room { flex-direction: row; }
  body.mobile.m-watching #room .stage-wrap { max-height: none; height: auto; width: 62vw; }
  body.mobile.m-watching .stage .tile { max-height: calc(var(--vh, 100vh) - var(--tb)); }
  body.mobile.m-watching #room .chat { width: 38vw; flex: none; }
}

/* convite aberto no celular */
.m-invite { display: flex; flex-direction: column; gap: 12px; padding: 14px; margin: 4px 0 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(123,97,255,.22), rgba(123,97,255,.06)); border: 1px solid rgba(123,97,255,.45); }
.m-invite-txt { display: flex; flex-direction: column; gap: 4px; }
.m-invite-txt span { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.m-invite .btn { width: 100%; padding: 13px; font-size: 15.5px; }
body.web #home .home-turma-row .home-choice.join { width: 100%; }

/* sua câmera: bolinha no canto da live (a live fica com a largura toda) */
body.mobile .stage { grid-template-columns: 1fr !important; overflow-y: auto; max-height: 46vh; }
body.mobile.m-watching #self-cam-tile {
  position: absolute; top: 8px; left: 8px; width: 26vw; max-width: 120px; aspect-ratio: 3 / 4; height: auto; z-index: 7;
  border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.15);
}
body.mobile.m-watching #self-cam-tile video { object-fit: cover; }
body.mobile.m-watching #self-cam-tile .tile-bar, body.mobile.m-watching #self-cam-tile .cam-name { display: none; }
body.mobile:not(.m-watching) .stage .cam-tile { max-height: 46vh; }
@media (orientation: landscape) and (max-height: 520px) {
  body.mobile .stage, body.mobile.m-watching .stage { max-height: none; }
  body.mobile.m-watching #self-cam-tile { width: 14vw; }
}