:root {
    /* Variáveis para garantir consistência */
    --primary-color: #007acc;
    --secondary-color: #34568b;
    --success-color: #2f9613;
    --background-light: #f9f9f9;
    --background-panel: #eaf4ff;
    --text-dark: #333;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    /* Dimensões responsivas baseadas no viewport */
    --container-padding: 20px;
    --gap-size: 20px;
    --border-radius: 10px;
    --font-size-base: 1vw;
}

body {
    margin: 0;
    padding: var(--container-padding);
    font-family: 'Arial', sans-serif;
    background-color: var(--background-light);
    color: var(--text-dark);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

.container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gap-size);
    height: 95vh;
    transition: all 0.5s ease;
    width: 100%;
    box-sizing: border-box;
}

/* MENSAGENS SUPERIORES E INFERIORES (QUANDO VÍDEO ATIVO) */
.top-message {
    top: 50px;
}

.bottom-message {
    bottom: 45px;
}

.top-message, .bottom-message {
    display: none;
    position: fixed;
    width: 70.3%;
    text-align: center;
    font-size: 42px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    color: var(--primary-color);
    padding: 30px 0px;
    pointer-events: none;
    left: 20px;
    z-index: 1000;
}

.video-container.active ~ .top-message,
.video-container.active ~ .bottom-message {
    display: block;
}

/* CONTAINER DO VÍDEO - SISTEMA DE ENQUADRAMENTO PERFEITO */
.video-container {
    width: 0;
    overflow: hidden;
    transition: width 0.5s ease;
    background-color: var(--background-panel);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    position: relative;
}

.video-container.active {
    /* Largura fixa que se adapta à resolução */
    width: min(1350px, 70vw);

    /* Altura calculada para manter proporção 16:9 perfeita */
    height: calc(min(1350px, 70vw) * 9 / 16);

    /* Posicionamento vertical otimizado */
    position: relative;
    top: 44.5%;
    transform: translateY(-50%);

    /* Garantir que não ultrapasse os limites da tela */
    max-height: calc(100vh - 200px);
}

/* Se a altura calculada for maior que o disponível, ajustar pela altura */
@media (max-height: 900px) {
    .video-container.active {
        height: min(calc(min(1350px, 70vw) * 9 / 16), calc(100vh - 200px));
        width: calc(min(calc(min(1350px, 70vw) * 9 / 16), calc(100vh - 200px)) * 16 / 9);
    }
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
    display: block;
}

/* LAYOUT DOS CONTEÚDOS */
.content-panel {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--gap-size);
    height: 100%;
}

.current-call {
    background-color: var(--background-panel);
    padding: 38px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.current-call h1 {
    font-size: 48px;
    color: var(--secondary-color);
    margin-bottom: 20px;
    text-align: center;
}

.history {
    background-color: var(--background-panel);
    padding: 20px;
    padding-top: 100px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow-y: auto;
    height: calc(100vh - 90px);
    transition: all 0.3s ease;
    margin: -25px;
}

/* OCULTAR HISTÓRICO DURANTE O VÍDEO */
.video-container.active ~ .content-panel {
    grid-template-columns: 1fr;
}

.video-container.active ~ .content-panel .current-call {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(-8%);
}

.video-container.active ~ .content-panel .history {
    opacity: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.current-number {
    font-size: 180px;
    font-weight: bold;
    margin: 15px 0;
    color: var(--success-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.guiche {
    font-size: 65px;
    color: #5983d3;
    margin-top: -10px;
    font-weight: 600;
    text-align: center;
}

.history h2 {
    font-size: 34px;
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 15px;
    margin-top: -20px;
    font-weight: 600;
}

/* Listas de Atendimentos e Histórico */
.history-list {
    position: relative;
    overflow: hidden;
    height: 790px; /* ou o valor que desejar fixar */
}

.history-list-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.attending-list {
    height: 300px;
    overflow: hidden;
    position: relative;
    display: block;
}

.attending-list-inner {
    position: absolute;
    width: 100%;
    transition: transform 1s ease-in-out;
}

.attending-panel {
    margin-top: 50px;
}

.attending-panel h2 {
    font-size: 36px;
    margin-bottom: 15px;
    color: var(--secondary-color);
    text-align: center;
    font-weight: 600;
}

.attending-item,
.history-item {
    background-color: #d9eaff;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    font-size: 38px;
    color: var(--secondary-color);
    box-sizing: border-box;
    transition: transform 0.2s ease, background-color 0.3s ease;
    justify-content: space-between;
    font-weight: 500;
}

/* Estilo de opacidade APENAS para a lista que terá animação */
.attending-item {
    opacity: 0; /* Para animação de entrada */
}

.item-animated {
    animation: fadeInUp 0.5s ease-out forwards;
}

.attending-item:hover,
.history-item:hover {
    transform: scale(1.02);
    background-color: #c7dcff;
}

.attending-number,
.history-number {
    font-weight: bold;
    font-size: 42px;
    margin-bottom: 0;
}

.attending-number {
    color: var(--success-color);
}

.history-number {
    color: var(--primary-color);
}

.attending-guiche,
.history-guiche {
    color: var(--secondary-color);
    font-size: 36px;
    margin-top: 0;
    font-weight: 500;
}

/* Indicador de mais itens */
.more-items-indicator {
    background-color: #b3d9ff;
    padding: 8px 12px;
    border-radius: 6px;
    text-align: center;
    font-size: 24px;
    color: var(--secondary-color);
    font-style: italic;
    margin-top: 5px;
    border: 1px dashed var(--primary-color);
}

/* Mensagens de estado vazio/erro */
.empty-message,
.error-message {
    text-align: center;
    font-size: 24px;
    color: #666;
    font-style: italic;
    padding: 20px;
    background-color: #f0f8ff;
    border-radius: 8px;
    margin: 10px 0;
}

.error-message {
    color: #d32f2f;
    background-color: #ffebee;
}

/* RELÓGIO */
.date-time {
    position: fixed;
    top: 15px;
    left: 25px;
    font-size: 36px;
    font-weight: 600;
    color: var(--text-dark);
    background-color: #ffffff;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 1100;
    border: 2px solid var(--primary-color);
    transition: left 0.5s ease;
    min-width: 200px;
    text-align: center;
}

/* ANIMAÇÕES */
@keyframes highlight {
    0% {
        transform: scale(1);
        color: var(--success-color);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: scale(1.1);
        color: #1a5c08;
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
    }
    100% {
        transform: scale(1);
        color: var(--success-color);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }
}

.highlight {
    animation: highlight 1s ease-in-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVIDADE OTIMIZADA PARA VÍDEO */
@media (max-width: 1600px) {
    .video-container.active {
        width: min(1100px, 68vw);
        height: calc(min(1100px, 68vw) * 9 / 16);
    }
}

@media (max-width: 1400px) {
    .content-panel {
        grid-template-columns: 1fr;
    }

    .history {
        grid-column: 1;
        height: auto;
        margin-top: 20px;
        padding-top: 20px;
    }

    .history h2 {
        margin-top: 0;
    }

    .date-time {
        left: 25px;
    }

    .video-container.active {
        width: min(900px, 65vw);
        height: calc(min(900px, 65vw) * 9 / 16);
    }
}

@media (max-width: 1200px) {
    .video-container.active {
        width: min(800px, 60vw);
        height: calc(min(800px, 60vw) * 9 / 16);
    }
}

@media (max-width: 992px) {
    .container {
        grid-template-columns: 1fr;
    }

    .video-container.active {
        width: min(700px, 85vw);
        height: calc(min(700px, 85vw) * 9 / 16);
        top: 45%;
        transform: translateY(-50%);
    }

    .date-time {
        font-size: 24px;
        padding: 12px 16px;
        left: 25px;
    }

    .history {
        padding-top: 20px;
    }

    .history h2 {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .current-number {
        font-size: 120px;
    }

    .guiche {
        font-size: 45px;
    }

    .history {
        padding: 15px;
        padding-top: 20px;
    }

    .attending-list {
        height: 250px;
    }

    .video-container.active {
        width: min(500px, 90vw);
        height: calc(min(500px, 90vw) * 9 / 16);
        top: 40%;
    }

    .video-container.active ~ .content-panel .history {
        opacity: 1;
        max-height: none;
        filter: brightness(0.9);
    }

    .date-time {
        font-size: 22px;
        padding: 10px 14px;
    }
}

@media (max-width: 480px) {
    .date-time {
        font-size: 20px;
        padding: 8px 12px;
    }

    .history-item,
    .attending-item {
        font-size: 18px;
        padding: 10px;
    }

    .attending-list {
        height: 200px;
    }

    .attending-number,
    .history-number {
        font-size: 20px;
    }

    .attending-guiche,
    .history-guiche {
        font-size: 16px;
    }

    .video-container.active {
        width: min(400px, 95vw);
        height: calc(min(400px, 95vw) * 9 / 16);
        top: 35%;
    }
}

/* AJUSTES ESPECIAIS PARA TELAS MUITO GRANDES (TVs) */
@media (min-width: 1920px) {
    .video-container.active {
        width: min(1600px, 70vw);
        height: calc(min(1600px, 70vw) * 9 / 16);
    }
}

@media (min-width: 2560px) {
    .video-container.active {
        width: min(2000px, 65vw);
        height: calc(min(2000px, 65vw) * 9 / 16);
    }
}

/* AJUSTES PARA TELAS MUITO BAIXAS */
@media (max-height: 600px) {
    .video-container.active {
        height: calc(100vh - 150px);
        width: calc((100vh - 150px) * 16 / 9);
        top: 50%;
        transform: translateY(-50%);
    }
}

@media (max-height: 480px) {
    .video-container.active {
        height: calc(100vh - 100px);
        width: calc((100vh - 100px) * 16 / 9);
    }
}

/* Garantir que o layout funcione em orientação landscape em tablets */
@media (orientation: landscape) and (max-height: 768px) {
    .container {
        height: 92vh;
    }

    .attending-list {
        height: 25vh;
    }

    .history {
        height: calc(100vh - 3vh);
    }

    .video-container.active {
        height: calc(100vh - 120px);
        width: calc((100vh - 120px) * 16 / 9);
        top: 50%;
        transform: translateY(-50%);
    }
}