/* ============================================================
   TELEPROMPTER PRO — reconstruído do zero
   ============================================================
   REGRA DE OURO (não quebrar de novo):
   Nada que fica dentro do #mirror-stage (a camada que gira) pode
   usar unidades vh/vw. vh/vw variam sozinhas no Safari do iPhone
   conforme a barra de endereço aparece/some, e isso é o que
   causava o corte de texto nas versões anteriores. Tudo dentro
   do #mirror-stage é medido e aplicado em PIXELS via JavaScript,
   recalculado continuamente (ver mirror.php).
   ============================================================ */

html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    background: #000; color: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: bold; line-height: 1.4;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}

/* ============================================================
   MASTER (tela de controle)
   ============================================================ */

#master-scroll-area {
    position: absolute; top: 0; left: 0; right: 0;
    bottom: 260px; /* altura fixa do painel de controle */
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

#master-text {
    padding: 0 6%; /* padding vertical (top/bottom) é escrito via JS, em px */
    margin: 0 auto;
    text-align: center;
    word-wrap: break-word; white-space: pre-wrap;
    box-sizing: border-box;
    transition: width 0.2s ease, font-size 0.2s ease;
}

/* Caixa-guia: representa a proporção do que aparece no Espelho.
   É só uma referência visual pro operador — nunca gira sozinha. */
#viewfinder-box {
    position: fixed; left: 50%; top: 22%;
    transform: translate(-50%, 0);
    border: 3px solid #e83e8c;
    border-radius: 8px;
    pointer-events: none;
    z-index: 20;
    box-sizing: border-box;
    transition: width 0.25s ease, height 0.25s ease;
}
#viewfinder-box .vf-label {
    position: absolute; top: -26px; left: 6px;
    font-size: 12px; letter-spacing: .5px; color: #e83e8c;
}
#viewfinder-box .vf-line {
    position: absolute; top: 50%; left: 0; width: 100%; height: 2px;
    background: rgba(232, 62, 140, .55);
}

.control-panel {
    position: absolute; left: 0; right: 0; bottom: 0; height: 260px;
    background: #101114; border-top: 2px solid #2b2e36;
    box-sizing: border-box; padding: 10px;
    display: flex; flex-direction: column; justify-content: space-evenly;
    z-index: 100;
}
.control-row { display: flex; gap: 8px; align-items: center; }

.btn {
    background: #262a33; color: #fff; border: 1px solid #3a3f4a;
    border-radius: 8px; font-size: 12.5px; font-weight: 700;
    padding: 12px 6px; flex: 1; text-align: center; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.btn:active { background: #33394a; }
.btn-danger { background: #dc3545; border-color: #dc3545; flex: 0 0 auto; padding: 12px 16px; }
.btn-primary { background: #0d6efd; border-color: #0d6efd; font-size: 15px; }
.btn-toggle.active { background: #10b981; border-color: #10b981; }
.btn-accent { background: #e83e8c; border-color: #e83e8c; }

.speed-box {
    display: flex; align-items: center; flex: 1;
    background: #181b21; border: 1px solid #3a3f4a; border-radius: 8px; padding: 0 8px;
}
.speed-box span { font-size: 12px; color: #9aa0aa; width: 56px; text-align: center; }
input[type=range] { -webkit-appearance: none; flex: 1; height: 30px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; background: #3a3f4a; border-radius: 4px; }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
    background: #0d6efd; margin-top: -9px; cursor: pointer;
}

#editor-modal, #import-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999;
    display: none; align-items: center; justify-content: center;
}
.editor-box { background: #15171c; padding: 22px; border-radius: 12px; width: 92%; max-width: 720px; box-sizing: border-box; }
.editor-box h3 { margin: 0 0 12px; font-weight: 400; }
#texto-edit {
    width: 100%; height: 380px; background: #0c0d10; color: #fff;
    border: 1px solid #333; border-radius: 8px; padding: 14px; font-size: 17px;
    box-sizing: border-box; resize: vertical;
}
.editor-actions { text-align: right; margin-top: 14px; }

@media (max-width: 768px) {
    .btn { font-size: 10.5px; padding: 10px 3px; }
    .btn-primary { font-size: 13px; }
}

/* ============================================================
   ESPELHO (tela que reflete o texto)
   ============================================================ */

/* A camada que gira de verdade. Largura/altura e transform são
   escritos via JS, sempre em px, nunca via classe/vh. */
#mirror-stage {
    position: fixed; top: 0; left: 0;
    transform-origin: top left;
    background: #000;
}

#mirror-scroll {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

#mirror-flip { transition: transform 0.3s ease; }

#mirror-text-box { margin: 0 auto; box-sizing: border-box; }

#mirror-content {
    text-align: center;
    word-wrap: break-word; white-space: pre-wrap;
    box-sizing: border-box;
    /* padding-top/bottom são definidos via JS, em px */
}

#mirror-recalibrar {
    position: fixed; z-index: 99998; bottom: 14px; right: 14px;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.08); color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
}

#start-overlay {
    position: fixed; inset: 0; background: #000; z-index: 999999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#start-overlay h2 { font-weight: 400; margin-bottom: 18px; }
#start-warning {
    max-width: 320px; text-align: center; color: #ffb020;
    background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.4);
    border-radius: 10px; padding: 14px 18px; margin-bottom: 26px;
    font-size: 14px; line-height: 1.5; font-weight: 600;
}
#start-overlay button {
    background: #3b82f6; color: #fff; border: none; border-radius: 12px;
    padding: 22px 36px; font-size: 19px; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 20px rgba(59,130,246,.5);
}

.sair-link {
    position: fixed; top: 16px; right: 16px; z-index: 100000;
    background: rgba(255,255,255,.1); color: #fff; text-decoration: none;
    padding: 8px 12px; border-radius: 8px; font-size: 13px; opacity: .25;
}