*{box-sizing:border-box}
html,body{width:100%;height:100%}
:root{ --radius:12px; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;background:#0b141a;color:#e9edef;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Noto Sans,sans-serif;
  display:grid;place-items:center
}
.app{
  width:100%;max-width:480px;height:100dvh;display:flex;align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom);
}

/* Telas */
.tela{display:none;width:100%}
.tela.ativa, .tela[style*="display: flex"]{display:flex;flex-direction:column}

/* Topo */
.topbar{
  display:flex;align-items:center;gap:10px;padding:10px 12px;color:#fff;z-index:5;
  min-width:0;
}
.topbar.verde-escuro{background:#075E54}
.ico{background:transparent;border:none;color:#fff;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.ico.back:hover{background:#ffffff22}
.contato{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:#1f2c34;color:#fff;overflow:hidden;flex:0 0 auto
}
.avatar img{width:100%;height:100%;object-fit:cover}
.contato-info{min-width:0}
.nome{margin:0;font-size:clamp(14px,2.8vw,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{margin:0;color:#cfe8df;opacity:.9;font-size:clamp(11px,2.4vw,12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acoes-topo{display:flex;align-items:center;gap:6px;flex:0 0 auto}

/* Vídeo */
.video-area{position:relative;background:#000;flex:1;overflow:hidden}
.wallpaper{
  position:absolute;inset:0;z-index:0;
  background:url('assets/wallpaper.jpg') center center no-repeat;background-size:cover;
  opacity:0;transition:opacity .2s ease;pointer-events:none
}
.video-area.camera-off .wallpaper{opacity:1}
video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:1}
video.remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:2}
video.pip{
  position:absolute;right:12px;bottom:12px;z-index:4;
  width:clamp(104px, 30vw, 140px);height:clamp(150px, 40vw, 190px);
  object-fit:cover;background:#000;border-radius:12px;border:2px solid #ffffff22;box-shadow:0 10px 20px rgba(0,0,0,.35)
}

/* Overlays */
.overlay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  background:#1f2c34cc;border:1px solid #0f1a20;color:#e9edef;
  padding:12px 16px;border-radius:var(--radius);display:flex;align-items:center;gap:8px;
  cursor:pointer;backdrop-filter:blur(2px)
}

/* Oculta qualquer overlay com [hidden] (mesmo se alguma regra tentar exibir) */
.overlay[hidden]{display:none !important}

/* Dock */
.dock{
  height:84px;display:flex;align-items:center;justify-content:space-evenly;
  background:#111b21;border-top:1px solid #0f1a20;z-index:5
}
.ctrl{
  width:58px;height:58px;border:none;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:#24343c;
  transition:transform .06s ease
}
.ctrl:active{transform:scale(.96)}
.ctrl.encerrar{background:#eb3349}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background:#1f2c34;border:1px solid #0f1a20;color:#e9edef;
  padding:10px 14px;border-radius:var(--radius);box-shadow:0 10px 20px rgba(0,0,0,.4);
  font-size:14px;z-index:6;max-width:min(92vw,420px)
}

@supports not (height: 100dvh) {
  .app { height: 100vh; }
}

/* Estilo do SVG que entra no lugar do <span class="material-symbols-outlined">arrow_back</span> */
.ico-svg {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  fill: #e9edef; /* cor do ícone */
}
/* Se sua topbar usa tema verde-escuro e o ícone precisa ficar branco */
.topbar.verde-escuro .ico-svg { fill: #fff; }

/* iOS: camadas corretas e área com altura */
#video-area { position: relative; overflow: hidden; height: 100%; }
#bg-video,
#video-principal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#bg-video { z-index: 0; }
#video-principal { z-index: 1; background: #000; }
#wallpaper { position: absolute; inset: 0; z-index: 2; transition: opacity .25s; }
.video-playing #wallpaper { opacity: 0; pointer-events: none; }
/* Altura real da tela e camadas corretas (iOS) */
:root { --app-vh: 100dvh; }
@supports not (height: 100dvh) {
  :root { --app-vh: 100vh; }
}

main.app, .tela { min-height: var(--app-vh); }

#video-area {
  position: relative;
  width: 100%;
  height: 100%;               /* ocupa todo o espaço que o JS vai calcular */
  overflow: hidden;
}

#bg-video,
#video-principal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
#bg-video { z-index: 0; }
#video-principal { z-index: 1; }

/* Esconde o wallpaper assim que o vídeo realmente tocar */
#wallpaper { position:absolute; inset:0; z-index:2; transition:opacity .25s; }
.video-playing #wallpaper { opacity:0; pointer-events:none; }
/* === FIXES DE LAYOUT (cola no FINAL do style.css) ======================= */

/* Selfie no topo à direita (evita colidir com a dock/botões inferiores) */
video.pip{
  top:12px !important;
  right:12px !important;
  bottom:auto !important;
}

/* Altura estável em Android/iOS modernos */
.app{
  height:100svh !important;      /* viewport "small" estável */
  min-height:100dvh !important;  /* fallback moderno */
}
.video-area{
  position:relative !important;
  overflow:hidden !important;
}

/* Garante que o vídeo remoto sempre preencha toda a área visível */
#video-principal, #bg-video{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
/* Botões por cima do vídeo (evita que o <video> "roube" o clique) */
#bg-video, #video-principal { pointer-events: none; }
/* === SELFIE PIP (preview da câmera) fixo lá embaixo === */
#video-self{
  position: fixed;
  right: 16px;                        /* fica no canto inferior direito */
  bottom: calc(84px + env(safe-area-inset-bottom, 0px)); /* não encosta na barra de botões */
  width: min(32vw, 180px);            /* responsivo: até ~180px */
  height: auto;                       /* mantém proporção do vídeo */
  object-fit: cover;                  /* preenche sem distorcer */
  border-radius: 14px;
  background: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 40;                        /* acima do fundo/players */
  pointer-events: none;               /* não rouba cliques dos botões */
}

/* Mobile bem pequeno */
@media (max-width: 480px){
  #video-self{ width: 120px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* Telas maiores */
@media (min-width: 768px){
  #video-self{ width: 200px; right: 24px; bottom: 24px; }
}

/* Se preferir CENTRALIZADO embaixo, troque o canto direito por isto:
#video-self{
  left: 50%;
  transform: translateX(-50%);
  right: auto;
}
*/
/* === FORÇA O PREVIEW (#video-self) LÁ EMBAIXO, PERTO DOS BOTÕES === */
:root{
  --controls-height: 84px; /* ajuste se sua barra de botões for mais alta/baixa */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

#video-self{
  position: fixed !important;
  /* zera qualquer top/left antigo */
  top: auto !important;
  left: auto !important;

  /* fica embaixo, acima da barra de botões */
  right: 16px !important; /* canto direito (muda pra left:16px se quiser no canto esquerdo) */
  bottom: calc(var(--controls-height) + var(--safe-bottom)) !important;

  width: min(32vw, 180px) !important; /* responsivo */
  height: auto !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  background: #000 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;

  z-index: 4000 !important;     /* bem acima do fundo e dos players */
  pointer-events: none !important; /* não atrapalha toques nos botões */
}

/* --- OPCIONAL: CENTRALIZAR EMBAIXO, SE PREFERIR --- */
/* Ative removendo os comentários deste bloco e comente o right:16px lá em cima
#video-self{
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
}
*/

/* Mobile menor */
@media (max-width: 480px){
  #video-self{
    width: 120px !important;
    right: 12px !important;
    bottom: calc(80px + var(--safe-bottom)) !important;
  }
}

/* Telas maiores */
@media (min-width: 768px){
  #video-self{
    width: 200px !important;
    right: 24px !important;
    bottom: calc(24px + var(--safe-bottom)) !important; /* se sua barra no desktop for menor */
  }
}