/* ============================================================
   Sala aberta multi-peer - Estilo
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --azul:        #5b8def;
    --azul-escuro: #3d6bd6;
    --fundo:       #0f1320;
    --fundo-2:     #1a2036;
    --texto:       #e8ecf3;
    --texto-2:     #9aa3b8;
    --vermelho:    #e74c5c;
    --verde:       #2ecc71;
    --amarelo:     #f1c40f;
    --borda:       #2a3148;
}

html, body {
    height: 100%;
    background: var(--fundo);
    color: var(--texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ====================== SALA ====================== */
.tela-sala {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available;
    overflow: hidden;
}

.barra-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: var(--fundo-2);
    border-bottom: 1px solid var(--borda);
    flex-shrink: 0;
}

.barra-topo .titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.contagem {
    color: var(--texto-2);
    font-size: 12px;
    margin-left: 6px;
    padding: 2px 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
}

.bolinha {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #555;
    transition: background .2s;
}
.bolinha[data-estado="desconectado"] { background: #555; }
.bolinha[data-estado="aguardando"]   { background: var(--amarelo); animation: piscar 1.4s infinite; }
.bolinha[data-estado="conectando"]   { background: var(--amarelo); animation: piscar 0.6s infinite; }
.bolinha[data-estado="conectado"]    { background: var(--verde); }
@keyframes piscar { 50% { opacity: 0.3; } }

.btn-sair {
    color: var(--texto-2);
    background: transparent;
    border: 1px solid var(--borda);
    cursor: pointer;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all .15s;
    font-family: inherit;
}
.btn-sair:hover {
    color: white;
    border-color: var(--azul);
    background: rgba(91,141,239,0.1);
}

/* ============== PALCO + GRID DE VIDEOS ============== */
.palco {
    flex: 1;
    position: relative;
    min-height: 0;
    background: #000;
    overflow: hidden;
}

.grid-videos {
    position: absolute;
    inset: 0;
    display: grid;
    gap: 6px;
    padding: 6px;
    background: #000;
}

/* Layout dinamico conforme quantidade de participantes */
.grid-videos[data-qtd="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.grid-videos[data-qtd="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.grid-videos[data-qtd="3"],
.grid-videos[data-qtd="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.grid-videos[data-qtd="5"],
.grid-videos[data-qtd="6"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.grid-videos[data-qtd="7"],
.grid-videos[data-qtd="8"],
.grid-videos[data-qtd="9"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }

/* Mobile (vertical) - prefere coluna unica para 2 pessoas */
@media (max-width: 600px) and (orientation: portrait) {
    .grid-videos[data-qtd="2"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
    .grid-videos[data-qtd="3"],
    .grid-videos[data-qtd="4"] { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
}

.tile {
    position: relative;
    background: #111728;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}
.tile.eu video {
    transform: scaleX(-1);  /* espelho so para o proprio video */
}
.tile .rotulo {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0,0,0,0.55);
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
}
.tile .rotulo:empty { display: none; }

.tile .sem-video {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #1a2036 0%, #0f1320 100%);
}
.tile .sem-video.oculto { display: none; }
.avatar-circ {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--azul);
}

/* Aviso quando esta sozinho na sala */
.aviso-sozinho {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(15,19,32,0.85);
    backdrop-filter: blur(6px);
    text-align: center;
    padding: 24px;
    z-index: 5;
}
.aviso-sozinho.oculto { display: none; }
.aviso-sozinho p { color: var(--texto); font-size: 16px; }
.aviso-sozinho .dica { color: var(--texto-2); font-size: 13px; margin-top: 6px; }

.url-compartilhar {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--azul);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    word-break: break-all;
    max-width: 90vw;
}
.btn-copiar {
    background: var(--azul);
    color: white;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}
.btn-copiar:hover { background: var(--azul-escuro); }

.ico-onda {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.ico-onda span {
    width: 8px; height: 28px;
    background: var(--azul);
    border-radius: 4px;
    animation: ondinha 1.1s ease-in-out infinite;
}
.ico-onda span:nth-child(2) { animation-delay: 0.15s; }
.ico-onda span:nth-child(3) { animation-delay: 0.30s; }
@keyframes ondinha {
    0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
    50%      { transform: scaleY(1.0); opacity: 1; }
}

/* ============== BARRA DE CONTROLES ============== */
.barra-controles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    background: var(--fundo-2);
    border-top: 1px solid var(--borda);
    flex-shrink: 0;
}

.ctrl {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #2c3454;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.ctrl:hover { background: #3a4670; }
.ctrl:active { transform: scale(0.95); }
.ctrl.desligado { background: var(--vermelho); }
.ctrl.encerrar { background: var(--vermelho); }
.ctrl.encerrar:hover { background: #c0392b; }

.ico {
    display: inline-block;
    width: 24px; height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.ico.oculto { display: none; }

.mic-on {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 15a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V22h2v-3.08A7 7 0 0 0 19 12h-2z'/></svg>");
}
.mic-off {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23A6.94 6.94 0 0 0 19 11zM4.41 2.86L3 4.27l6 6V11a3 3 0 0 0 3 3l1.27 1.27c-.4.13-.83.23-1.27.23a3 3 0 0 1-3-3H7a5 5 0 0 0 5 5c.85 0 1.66-.2 2.4-.55l4.6 4.6 1.41-1.41L4.41 2.86zM15 9.6V5a3 3 0 1 0-6 0v.6L15 9.6z'/></svg>");
}
.cam-on {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4z'/></svg>");
}
.cam-off {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M21 6.5l-4 4V7a1 1 0 0 0-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12.73L19.73 21 21 19.73 3.27 2z'/></svg>");
}
.fone-off {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08a.996.996 0 0 1-.29-.7c0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.1-.7-.28a11.27 11.27 0 0 0-2.67-1.85.996.996 0 0 1-.56-.9v-3.1A16.45 16.45 0 0 0 12 9z' transform='rotate(135 12 12)'/></svg>");
}

/* ============== TELA DE BOAS-VINDAS (gesto inicial) ============== */
.boas-vindas {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, #1c2540 0%, #0f1320 70%);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.boas-vindas.oculto { display: none; }

.bv-conteudo {
    background: var(--fundo-2);
    border: 1px solid var(--borda);
    border-radius: 16px;
    padding: 36px 28px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.bv-conteudo .logo { margin-bottom: 14px; }
.bv-conteudo h1 { font-size: 22px; margin-bottom: 8px; }
.bv-conteudo p {
    color: var(--texto-2);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 22px;
}
.bv-rodape { font-size: 11px !important; margin: 16px 0 0 !important; }

.btn-primario {
    background: var(--azul);
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 15px;
    transition: background .15s;
    font-family: inherit;
}
.btn-primario:hover { background: var(--azul-escuro); }
.btn-entrar {
    width: 100%;
    padding: 14px;
    font-size: 17px;
    border-radius: 999px;
}

/* ============== OVERLAY DE AUDIO BLOQUEADO ============== */
.audio-bloqueado {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: pointer;
}
.audio-bloqueado.oculto { display: none; }
.ab-conteudo {
    background: var(--fundo-2);
    border: 1px solid var(--borda);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    max-width: 320px;
}
.ab-icone {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    background: var(--azul);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ab-conteudo p {
    color: var(--texto);
    margin-bottom: 16px;
    font-size: 15px;
}

/* Alerta toast */
.alerta {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fundo-2);
    border: 1px solid var(--borda);
    color: var(--texto);
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 100;
    max-width: 90vw;
    text-align: center;
}
.alerta.oculto { display: none; }

/* ----- Responsivo (mobile) ----- */
@media (max-width: 600px) {
    .barra-topo { padding: 10px 12px; }
    .ctrl { width: 50px; height: 50px; }
    .barra-controles { gap: 14px; padding: 10px;
                       padding-bottom: max(10px, env(safe-area-inset-bottom)); }
    .barra-topo .titulo { font-size: 13px; }
    .contagem { font-size: 11px; }
}