/* ==========================================================================/* ==========================================================================/* ==========================================================================/* ==========================================================================

   OVERLAY SYSTEM STYLES - Sistema de Overlays Moderno v2.0

   Author: Nossa TV   OVERLAY SYSTEM STYLES - Sistema de Overlays Moderno v2.0

   ========================================================================== */

   Author: Nossa TV   OVERLAY SYSTEM STYLES - Sistema de Overlays Moderno v2.0   OVERLAY SYSTEM STYLES - Sistema de Overlays Moderno

:root {

    /* Base size variables */   Updated: 2025

    --overlay-min-width: 280px;

    --overlay-min-height: 200px;   ========================================================================== */   Author: Nossa TV   ========================================================================== */

    --overlay-padding: 1rem;

    --overlay-margin: 0.5rem;

    --overlay-border-radius: 8px;

:root {   Updated: 2025

    /* Responsive breakpoints */

    --mobile-width: 480px;    /* Variáveis de tamanho base */

    --tablet-width: 768px;

    --desktop-width: 1024px;    --overlay-min-width: 280px;   ========================================================================== *//* Container principal dos overlays */



    /* Z-index layers */    --overlay-min-height: 200px;

    --z-overlay-base: 1000;

    --z-overlay-top: 1100;    --overlay-padding: 1rem;#overlay-container, .overlay-container {

}

    --overlay-margin: 0.5rem;

/* Main overlay container */

#overlay-container,    --overlay-border-radius: 8px;:root {    position: absolute;

.overlay-container {

    position: fixed;

    inset: 0;

    width: 100%;    /* Breakpoints responsivos */  /* Colors */    top: 0;

    height: 100%;

    z-index: var(--z-overlay-base);    --mobile-width: 480px;

    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;

    pointer-events: none;    --tablet-width: 768px;  --overlay-primary: #667eea;    left: 0;

    overflow: hidden;

}    --desktop-width: 1024px;



/* Base overlay styles */  --overlay-secondary: #764ba2;    width: 100%;

.overlay-item {

    position: absolute;    /* Z-index layers */

    pointer-events: auto;

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),    --z-overlay-base: 1000;  --overlay-success: #10b981;    height: 100%;

                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),

                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);    --z-overlay-top: 1100;

    border-radius: var(--overlay-border-radius);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);}  --overlay-danger: #ef4444;    z-index: 10;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    z-index: var(--z-overlay-base);

    padding: var(--overlay-padding);/* Container principal dos overlays - Mobile First */  --overlay-warning: #f59e0b;    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    margin: var(--overlay-margin);

    box-sizing: border-box;#overlay-container, 

    background: rgba(255, 255, 255, 0.9);

.overlay-container {  --overlay-info: #3b82f6;    pointer-events: none; /* Permite que os cliques passem através do container */

    /* Flexible default sizes */

    min-width: min(var(--overlay-min-width), 90vw);    position: fixed;

    min-height: min(var(--overlay-min-height), 70vh);

    width: fit-content;    inset: 0;  }

    max-width: 90vw;

}    width: 100%;



/* Dynamic positioning system */    height: 100%;  /* Gradients */

.overlay-item[data-position="top"] {

    top: var(--overlay-margin);    z-index: var(--z-overlay-base);

}

    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;  --gradient-primary: linear-gradient(135deg, var(--overlay-primary), var(--overlay-secondary));/* Ajuste de posicionamento para overlays do topo */

.overlay-item[data-position="bottom"] {

    bottom: var(--overlay-margin);    pointer-events: none;

}

    overflow: hidden;  --gradient-success: linear-gradient(135deg, var(--overlay-success), #059669);/* Removido para permitir que as posições definidas no PHP funcionem corretamente */

.overlay-item[data-position="left"] {

    left: var(--overlay-margin);}

}

  --gradient-danger: linear-gradient(135deg, var(--overlay-danger), #dc2626);

.overlay-item[data-position="right"] {

    right: var(--overlay-margin);/* Base para todos os overlays - Sistema Flexível */

}

.overlay-item {  /* Base para todos os overlays */

.overlay-item[data-position="center"] {

    top: 50%;    position: absolute;

    left: 50%;

    transform: translate(-50%, -50%);    pointer-events: auto;  /* Shadows */.overlay-item {

}

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),

/* Predefined size variations */

.overlay-item[data-size="small"] {                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);    position: absolute;

    --overlay-min-width: 200px;

    --overlay-min-height: 150px;                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

    border-radius: var(--overlay-border-radius);  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);    pointer-events: auto; /* Garante que os itens de overlay recebam interações */

.overlay-item[data-size="medium"] {

    --overlay-min-width: 400px;    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

    --overlay-min-height: 300px;

}    backdrop-filter: blur(8px);  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);



.overlay-item[data-size="large"] {    -webkit-backdrop-filter: blur(8px);

    --overlay-min-width: 600px;

    --overlay-min-height: 450px;    z-index: var(--z-overlay-base);  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);    border-radius: 8px;

}

    padding: var(--overlay-padding);

/* Automatic responsiveness */

@media (max-width: 768px) {    margin: var(--overlay-margin);      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

    .overlay-item {

        --overlay-min-width: min(280px, 90vw);    box-sizing: border-box;

        --overlay-min-height: min(200px, 70vh);

        margin: 0.25rem;  /* Typography */    backdrop-filter: blur(10px);

        width: calc(100% - 0.5rem) !important;

        max-width: none !important;    /* Tamanhos padrão flexíveis */

    }

    min-width: min(var(--overlay-min-width), 90vw);  --font-primary: 'Segoe UI', system-ui, -apple-system, sans-serif;    -webkit-backdrop-filter: blur(10px);

    .overlay-item[data-position="center"] {

        transform: none;    min-height: min(var(--overlay-min-height), 70vh);

        top: 50%;

        left: 0;    width: fit-content;  --font-size-xs: 0.75rem;    /* Garantir que as posições definidas no PHP sejam respeitadas */

        transform: translateY(-50%);

    }    max-width: 90vw;

}

}  --font-size-sm: 0.875rem;    z-index: 1000;

/* Dark mode support */

@media (prefers-color-scheme: dark) {

    .overlay-item {

        background: rgba(0, 0, 0, 0.8);/* Sistema de posicionamento dinâmico */  --font-size-base: 1rem;}

        color: white;

    }.overlay-item[data-position="top"] { top: var(--overlay-margin); }

}

.overlay-item[data-position="bottom"] { bottom: var(--overlay-margin); }  --font-size-lg: 1.125rem;

/* Animations */

.overlay-fade-in {.overlay-item[data-position="left"] { left: var(--overlay-margin); }

    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}.overlay-item[data-position="right"] { right: var(--overlay-margin); }  --font-size-xl: 1.25rem;.overlay-item:hover {



@keyframes fadeIn {.overlay-item[data-position="center"] {

    from {

        opacity: 0;    top: 50%;      transform: translateY(-2px);

        transform: translateY(10px);

    }    left: 50%;

    to {

        opacity: 1;    transform: translate(-50%, -50%);  /* Spacing */    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);

        transform: translateY(0);

    }}

}

  --spacing-1: 0.25rem;}

/* Accessibility utilities */

.overlay-hidden {/* Variações de tamanho pré-definidas */

    display: none !important;

}.overlay-item[data-size="small"] {  --spacing-2: 0.5rem;



/* Performance optimizations */    --overlay-min-width: 200px;

.overlay-hardware-accelerated {

    transform: translateZ(0);    --overlay-min-height: 150px;  --spacing-3: 0.75rem;/* ==========================================================================

    backface-visibility: hidden;

    will-change: transform;}

}

  --spacing-4: 1rem;   OVERLAY DE TEXTO

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {.overlay-item[data-size="medium"] {

    .overlay-item {

        transition: none !important;    --overlay-min-width: 400px;  --spacing-6: 1.5rem;   ========================================================================== */

    }

        --overlay-min-height: 300px;

    .overlay-fade-in {

        animation: none !important;}  --spacing-8: 2rem;.overlay-text {

    }

}



/* Specific overlay types */.overlay-item[data-size="large"] {      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));

.overlay-sorteio {

    --overlay-min-width: 400px;    --overlay-min-width: 600px;

    --overlay-min-height: 350px;

}    --overlay-min-height: 450px;  /* Border Radius */    border: 1px solid rgba(255, 255, 255, 0.2);



@media (max-width: 768px) {}

    .overlay-sorteio {

        --overlay-min-width: min(400px, 90vw);  --radius-sm: 0.25rem;    padding: 16px 24px;

        --overlay-min-height: min(350px, 70vh);

    }/* Responsividade automática */

}
@media (max-width: 768px) {  --radius-md: 0.375rem;    border-radius: 12px;

    .overlay-item {

        --overlay-min-width: min(280px, 90vw);  --radius-lg: 0.5rem;    font-size: 16px;

        --overlay-min-height: min(200px, 70vh);

        margin: 0.25rem;  --radius-xl: 1rem;    line-height: 1.5;

        width: calc(100% - 0.5rem) !important;

        max-width: none !important;  --radius-full: 9999px;    color: #333;

    }

      max-width: 400px;

    .overlay-item[data-position="center"] {

        transform: none;  /* Transitions */    word-wrap: break-word;

        top: 50%;

        left: 0;  --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);}

        transform: translateY(-50%);

    }  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);.overlay-text.dark {

/* Suporte para modo escuro */

@media (prefers-color-scheme: dark) {      background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.75));

    .overlay-item {

        background: rgba(0, 0, 0, 0.8);  /* Z-index layers */    border: 1px solid rgba(255, 255, 255, 0.1);

        color: white;

    }  --z-overlay-base: 1000;    color: #fff;

}

  --z-overlay-top: 1100;}

/* Animações e transições */

.overlay-fade-in {  --z-overlay-max: 9999;

    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}}/* ==========================================================================



@keyframes fadeIn {   OVERLAY DE TICKER (TEXTO ROLANTE)

    from {

        opacity: 0;/* Container principal dos overlays - Mobile First */   ========================================================================== */

        transform: translateY(10px);

    }#overlay-container, .overlay-ticker {

    to {

        opacity: 1;.overlay-container {    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

        transform: translateY(0);

    }  position: fixed;    color: white;

}

  inset: 0;    padding: 12px 0;

/* Utilitários de acessibilidade */

.overlay-hidden {  width: 100%;    overflow: hidden;

    display: none !important;

}  height: 100%;    white-space: nowrap;



/* Otimizações de performance */  z-index: var(--z-overlay-base);    border-radius: 6px;

.overlay-hardware-accelerated {

    transform: translateZ(0);  font-family: var(--font-primary);    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);

    backface-visibility: hidden;

    will-change: transform;  pointer-events: none;}

}

  overflow: hidden;

/* Suporte para preferências de movimento reduzido */

@media (prefers-reduced-motion: reduce) {}.overlay-ticker-content {

    .overlay-item {

        transition: none !important;    display: inline-block;

    }

    /* Base para todos os overlays - Mobile First */    animation: ticker-scroll 30s linear infinite;

    .overlay-fade-in {

        animation: none !important;.overlay-item {    padding-left: 100%;

    }

}  --overlay-padding: var(--spacing-4);    font-weight: 500;



/* Tipos específicos de overlay */  --overlay-margin: var(--spacing-2);    font-size: 18px;

.overlay-sorteio {

    /* Tamanhos específicos para sorteio que podem ser sobrescritos pelo OverlayManager */      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

    --overlay-min-width: 400px;

    --overlay-min-height: 350px;  position: absolute;}

}

  pointer-events: auto;

@media (max-width: 768px) {

    .overlay-sorteio {  transition: transform var(--transition-smooth),@keyframes ticker-scroll {

        --overlay-min-width: min(400px, 90vw);

        --overlay-min-height: min(350px, 70vh);              box-shadow var(--transition-smooth),    0% { transform: translateX(0); }

    }

}              opacity var(--transition-smooth);    100% { transform: translateX(-100%); }

  border-radius: var(--radius-lg);}

  box-shadow: var(--shadow-lg);

  backdrop-filter: blur(8px);/* ==========================================================================

  -webkit-backdrop-filter: blur(8px);   OVERLAY DE IMAGEM

  z-index: var(--z-overlay-base);   ========================================================================== */

  padding: var(--overlay-padding);.overlay-image {

  margin: var(--overlay-margin);    border-radius: 12px;

  width: calc(100% - (var(--overlay-margin) * 2));    overflow: hidden;

  max-width: 100%;    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

  box-sizing: border-box;}

  min-width: min(280px, 90vw);

  min-height: min(200px, 70vh);.overlay-image img {

}    width: 100%;

    height: auto;

/* Sistema de posicionamento flexível */    display: block;

.overlay-item[data-position="top"] { top: var(--overlay-margin); }    transition: transform 0.3s ease;

.overlay-item[data-position="bottom"] { bottom: var(--overlay-margin); }}

.overlay-item[data-position="left"] { left: var(--overlay-margin); }

.overlay-item[data-position="right"] { right: var(--overlay-margin); }.overlay-image:hover img {

.overlay-item[data-position="center"] {    transform: scale(1.05);

  top: 50%;}

  left: 50%;

  transform: translate(-50%, -50%);/* ==========================================================================

}   OVERLAY DE ENQUETE (POLL)

   ========================================================================== */

.overlay-item:hover {

  transform: translateY(-2px);.layer-hidden {

  box-shadow: var(--shadow-xl);    height: 0 !important;

}    opacity: 0 !important;

    overflow: hidden !important;

/* Overlay de texto com melhor legibilidade */    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out;

.overlay-text {}

  --text-background: linear-gradient(135deg, 

                    rgba(255, 255, 255, 0.95),/* Ensure layers have a default transition for smooth appearance */

                    rgba(255, 255, 255, 0.85));.overlay-system > div {

  background: var(--text-background);    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out;

  border: 1px solid rgba(255, 255, 255, 0.2);}

  padding: var(--spacing-4) var(--spacing-6);.overlay-poll {

  border-radius: var(--radius-xl);    background: linear-gradient(135deg, rgba(112, 224, 255, 0.95), rgba(108, 240, 222, 0.95));

  font-size: var(--font-size-base);    border: 1px solid rgba(151, 191, 242, 0.8);

  line-height: 1.6;    border-radius: 16px;

  color: rgba(0, 0, 0, 0.8);    padding: 24px;

  width: fit-content;    min-width: 400px;

  min-width: min(200px, 90vw);    max-width: 550px;

  max-width: min(90vw, 500px);}

  word-wrap: break-word;

}.overlay-poll h3 {

    margin: 0 0 16px 0;

.overlay-text.dark {    font-size: 20px;

  --text-background: linear-gradient(135deg,    font-weight: 600;

                    rgba(0, 0, 0, 0.85),    color: #1a202c;

                    rgba(0, 0, 0, 0.75));    text-align: center;

  color: rgba(255, 255, 255, 0.9);}

}

.poll-options {

/* Ticker com performance otimizada */    display: flex;

.overlay-ticker {    flex-direction: column;

  background: var(--gradient-primary);    gap: 12px;

  color: white;}

  padding: var(--spacing-3) 0;

  border-radius: var(--radius-md);.poll-option {

  box-shadow: var(--shadow-lg);    position: relative;

  overflow: hidden;    background: #f8fafc;

  width: 100%;    border: 2px solid #e2e8f0;

}    border-radius: 12px;

    padding: 16px 20px;

.overlay-ticker-content {    cursor: pointer;

  display: inline-block;    transition: all 0.3s ease;

  white-space: nowrap;    overflow: hidden;

  animation: ticker 30s linear infinite;}

  will-change: transform;

  padding-left: 100%;.poll-option:hover {

  font-weight: 500;    border-color: #667eea;

  font-size: clamp(14px, 2.5vw, 18px);    background: #f1f5f9;

}    transform: translateX(4px);

}

@media (prefers-reduced-motion: reduce) {

  .overlay-ticker-content {.poll-option.selected {

    animation-duration: 60s;    border-color: #667eea;

  }    background: linear-gradient(135deg, #667eea, #764ba2);

}    color: white;

}

/* Poll com design adaptativo */

.overlay-poll {.poll-option-text {

  --poll-max-width: min(90vw, 550px);    font-weight: 500;

  --poll-min-width: min(280px, 90vw);    font-size: 16px;

      position: relative;

  background: linear-gradient(135deg,    z-index: 2;

              rgba(112, 224, 255, 0.95),}

              rgba(108, 240, 222, 0.95));

  border: 1px solid rgba(151, 191, 242, 0.8);.poll-option-percentage {

  border-radius: var(--radius-xl);    position: absolute;

  padding: clamp(var(--spacing-4), 5vw, var(--spacing-8));    top: 0;

  width: clamp(var(--poll-min-width), 90vw, var(--poll-max-width));    left: 0;

  margin: 0 auto;    height: 100%;

}    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));

    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);

.poll-header {    border-radius: 10px;

  text-align: center;}

  margin-bottom: var(--spacing-6);

}.poll-stats {

    margin-top: 16px;

.poll-header h3 {    padding-top: 16px;

  font-size: clamp(var(--font-size-lg), 4vw, var(--font-size-xl));    border-top: 1px solid #e2e8f0;

  font-weight: 600;    font-size: 14px;

  color: rgba(0, 0, 0, 0.8);    color: #64748b;

  margin: 0;    text-align: center;

}}



.poll-options {.poll-vote-btn {

  display: flex;    background: linear-gradient(135deg, #667eea, #764ba2);

  flex-direction: column;    color: white;

  gap: var(--spacing-3);    border: none;

}    border-radius: 12px;

    padding: 12px 24px;

.poll-option {    font-size: 16px;

  position: relative;    font-weight: 600;

  background: rgba(255, 255, 255, 0.9);    cursor: pointer;

  border: 2px solid rgba(255, 255, 255, 0.2);    transition: all 0.3s ease;

  border-radius: var(--radius-lg);    margin-top: 16px;

  padding: var(--spacing-4) var(--spacing-6);    width: 100%;

  cursor: pointer;}

  transition: all var(--transition-base);

  overflow: hidden;.poll-vote-btn:hover {

}    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);

.poll-option:hover {}

  border-color: var(--overlay-primary);

  background: rgba(255, 255, 255, 0.95);.poll-vote-btn:disabled {

  transform: translateX(var(--spacing-1));    background: #94a3b8;

}    cursor: not-allowed;

    transform: none;

.poll-option.selected {    box-shadow: none;

  border-color: var(--overlay-primary);}

  background: var(--gradient-primary);

  color: white;/* ==========================================================================

}   OVERLAY DE WIDGET

   ========================================================================== */

/* Chat Widget Responsivo */.overlay-widget {

.overlay-chat {    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));

  --chat-max-height: min(600px, 80vh);    border: 1px solid rgba(226, 232, 240, 0.8);

  --chat-width: clamp(280px, 90vw, 400px);    border-radius: 16px;

      padding: 20px;

  display: flex;    min-width: 300px;

  flex-direction: column;    max-width: 500px;

  height: var(--chat-max-height);}

  width: var(--chat-width);

  background: rgba(255, 255, 255, 0.95);.widget-header {

  border-radius: var(--radius-xl);    display: flex;

  overflow: hidden;    align-items: center;

}    justify-content: space-between;

    margin-bottom: 16px;

.chat-messages {    padding-bottom: 12px;

  flex: 1;    border-bottom: 1px solid #e2e8f0;

  overflow-y: auto;}

  padding: var(--spacing-4);

  display: flex;.widget-title {

  flex-direction: column;    font-size: 18px;

  gap: var(--spacing-2);    font-weight: 600;

}    color: #1a202c;

    margin: 0;

.chat-message {}

  --message-max-width: 85%;

  .widget-close {

  background: rgba(0, 0, 0, 0.05);    background: none;

  padding: var(--spacing-3);    border: none;

  border-radius: var(--radius-lg);    font-size: 20px;

  max-width: var(--message-max-width);    color: #64748b;

  word-wrap: break-word;    cursor: pointer;

}    padding: 4px;

    border-radius: 6px;

.chat-message.sent {    transition: all 0.2s ease;

  align-self: flex-end;}

  background: var(--gradient-primary);

  color: white;.widget-close:hover {

}    background: #f1f5f9;

    color: #1a202c;

.chat-input {}

  display: flex;

  gap: var(--spacing-2);.widget-content {

  padding: var(--spacing-3);    color: #374151;

  background: rgba(255, 255, 255, 0.98);    line-height: 1.6;

  border-top: 1px solid rgba(0, 0, 0, 0.1);}

}

/* Widget de Chat */

.chat-input input {.widget-chat {

  flex: 1;    max-height: 400px;

  padding: var(--spacing-3);    display: flex;

  border: 1px solid rgba(0, 0, 0, 0.1);    flex-direction: column;

  border-radius: var(--radius-md);}

  font-size: var(--font-size-base);

}.chat-messages {

    flex: 1;

/* Schedule Overlay Responsivo */    max-height: 250px;

.overlay-schedule {    overflow-y: auto;

  --schedule-max-width: min(90vw, 600px);    padding: 12px;

  --schedule-padding: clamp(var(--spacing-4), 3vw, var(--spacing-6));    background: #f8fafc;

      border-radius: 8px;

  width: var(--schedule-max-width);    margin-bottom: 12px;

  background: rgba(0, 0, 0, 0.85);}

  backdrop-filter: blur(10px);

  border-radius: var(--radius-xl);.chat-message {

  padding: var(--schedule-padding);    margin-bottom: 8px;

  color: white;    padding: 8px 12px;

}    background: white;

    border-radius: 8px;

.schedule-header {    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  display: flex;}

  align-items: center;

  justify-content: space-between;.chat-message-author {

  margin-bottom: var(--spacing-4);    font-weight: 600;

}    color: #667eea;

    font-size: 14px;

.schedule-items {}

  display: grid;

  gap: var(--spacing-3);.chat-message-text {

}    margin-top: 4px;

    color: #374151;

.schedule-item {}

  display: grid;

  grid-template-columns: auto 1fr;.chat-input-container {

  gap: var(--spacing-4);    display: flex;

  padding: var(--spacing-3);    gap: 8px;

  background: rgba(255, 255, 255, 0.1);}

  border-radius: var(--radius-lg);

}.chat-input {

    flex: 1;

/* Animações Otimizadas */    padding: 10px 12px;

@keyframes ticker {    border: 1px solid #d1d5db;

  0% { transform: translate3d(100%, 0, 0); }    border-radius: 8px;

  100% { transform: translate3d(-100%, 0, 0); }    font-size: 14px;

}    transition: border-color 0.2s ease;

}

@keyframes fadeIn {

  from { opacity: 0; }.chat-input:focus {

  to { opacity: 1; }    outline: none;

}    border-color: #667eea;

    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);

@keyframes slideUp {}

  from { 

    opacity: 0;.chat-send-btn {

    transform: translateY(20px);    background: #667eea;

  }    color: white;

  to {    border: none;

    opacity: 1;    border-radius: 8px;

    transform: translateY(0);    padding: 10px 16px;

  }    cursor: pointer;

}    transition: background-color 0.2s ease;

}

/* Breakpoints Responsivos */

@media (min-width: 640px) {.chat-send-btn:hover {

  .overlay-item {    background: #5a67d8;

    --overlay-margin: var(--spacing-4);}

  }

/* ==========================================================================

  .overlay-item[data-width="narrow"] {   ANIMAÇÕES E EFEITOS

    width: min(400px, 90vw);   ========================================================================== */

  }.overlay-fade-in {

      animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  .overlay-item[data-width="medium"] {}

    width: min(600px, 90vw);

  }.overlay-slide-in {

      animation: slideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  .overlay-item[data-width="wide"] {}

    width: min(800px, 90vw);

  }@keyframes fadeIn {

      from {

  .schedule-item {        opacity: 0;

    grid-template-columns: auto 1fr auto;        transform: translateY(20px);

  }    }

}    to {

        opacity: 1;

@media (min-width: 1024px) {        transform: translateY(0);

  .overlay-item {    }

    --overlay-margin: var(--spacing-6);}

  }

  @keyframes slideIn {

  .overlay-text {    from {

    font-size: var(--font-size-lg);        opacity: 0;

  }        transform: translateX(-100%);

      }

  .chat-messages {    to {

    padding: var(--spacing-6);        opacity: 1;

  }        transform: translateX(0);

}    }

}

/* Dark Mode Support */

@media (prefers-color-scheme: dark) {/* ==========================================================================

  :root {   RESPONSIVIDADE

    --overlay-background-dark: linear-gradient(135deg,   ========================================================================== */

                              rgba(30, 41, 59, 0.95),@media (max-width: 768px) {

                              rgba(15, 23, 42, 0.95));    .overlay-item {

  }        max-width: 90vw;

          margin: 0 5vw;

  .overlay-item {    }

    background: var(--overlay-background-dark);    

  }    .overlay-poll {

          min-width: 280px;

  .overlay-text:not(.light) {        padding: 20px;

    background: var(--overlay-background-dark);    }

    color: rgba(255, 255, 255, 0.9);    

  }    .overlay-widget {

          min-width: 280px;

  .overlay-chat {        padding: 16px;

    background: var(--overlay-background-dark);    }

    color: white;    

  }    .overlay-ticker {

          font-size: 16px;

  .chat-message {    }

    background: rgba(255, 255, 255, 0.1);    

  }    .overlay-ticker-content {

          font-size: 16px;

  .chat-input {    }

    background: rgba(0, 0, 0, 0.2);}

    border-top-color: rgba(255, 255, 255, 0.1);

  }@media (max-width: 480px) {

      .overlay-item {

  .chat-input input {        max-width: 95vw;

    background: rgba(0, 0, 0, 0.3);        margin: 0 2.5vw;

    border-color: rgba(255, 255, 255, 0.1);    }

    color: white;    

  }    .overlay-poll {

}        min-width: 260px;

        padding: 16px;

/* Reduced Motion Support */    }

@media (prefers-reduced-motion: reduce) {    

  * {    .overlay-widget {

    animation-duration: 0.01ms !important;        min-width: 260px;

    animation-iteration-count: 1 !important;        padding: 12px;

    transition-duration: 0.01ms !important;    }

    scroll-behavior: auto !important;}

  }

}
/* ==========================================================================

   TEMAS ESCUROS

/* Utilitários de Acessibilidade */   ========================================================================== */

.overlay-hidden {@media (prefers-color-scheme: dark) {

  display: none !important;    .overlay-poll {

}        background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));

        border-color: rgba(71, 85, 105, 0.8);

.visually-hidden {        color: #f1f5f9;

  position: absolute;    }

  width: 1px;    

  height: 1px;    .overlay-poll h3 {

  padding: 0;        color: #f1f5f9;

  margin: -1px;    }

  overflow: hidden;    

  clip: rect(0, 0, 0, 0);    .poll-option {

  white-space: nowrap;        background: rgba(51, 65, 85, 0.8);

  border: 0;        border-color: rgba(71, 85, 105, 0.8);

}        color: #f1f5f9;

    }

/* Performance Optimizations */    

.hardware-accelerated {    .overlay-widget {

  transform: translateZ(0);        background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));

  backface-visibility: hidden;        border-color: rgba(71, 85, 105, 0.8);

  perspective: 1000px;        color: #f1f5f9;

}    }
    
    .widget-title {
        color: #f1f5f9;
    }
    
    .chat-messages {
        background: rgba(15, 23, 42, 0.8);
    }
    
    .chat-message {
        background: rgba(51, 65, 85, 0.8);
        color: #f1f5f9;
    }
}

/* ==========================================================================
   BOTÕES E INPUTS ESPECÍFICOS DOS OVERLAYS
   ========================================================================== */

/* Botões de Poll */
.poll-button {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 8px 0;
    width: 100%;
    min-height: 50px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.poll-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
}

.poll-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.poll-button.disabled {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

.poll-button.disabled:hover {
    transform: none;
    box-shadow: none;
    background: #94a3b8;
}

/* Input de Chat */
.chat-message-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    background: white;
    transition: all 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
    outline: none;
}

.chat-message-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: #fefefe;
}

.chat-message-input::placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* Input de Nickname do Chat */
.chat-nickname-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    background: white;
    transition: all 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
    outline: none;
    margin-right: 8px;
}

.chat-nickname-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: #fefefe;
}

.chat-nickname-input::placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* Botão de Entrar no Chat */
.chat-enter-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    white-space: nowrap;
}

.chat-enter-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Containers de Input do Chat */
.chat-login {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0 4px;
}

.chat-input {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0 4px;
}

/* Poll Results Panel (standardized) */
.poll-results-display {
  margin-top: 15px;
  max-height: 220px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 14px;
  backdrop-filter: blur(5px);
}
.poll-results-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

/* ========================================================================== */
/* OVERLAY DE PROGRAMAÇÃO (SCHEDULE)                                          */
/* ========================================================================== */
.overlay-schedule, .overlay-schedule-fullscreen { font-family: Arial, Helvetica, sans-serif; }
.overlay-schedule { backdrop-filter: blur(2px); }
.overlay-schedule .schedule-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.overlay-schedule .schedule-title { font-weight: 700; font-size: 1.1em; }
.overlay-schedule .schedule-date { opacity: 0.9; font-size: 0.9em; }
.overlay-schedule .schedule-items { display: flex; flex-direction: column; gap: 6px; }
.overlay-schedule .schedule-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(2px); }
.overlay-schedule .schedule-item .schedule-time { font-weight: 700; opacity: 0.95; }
.overlay-schedule .schedule-item .schedule-program { font-weight: 600; }
.overlay-schedule .schedule-item .schedule-desc { opacity: 0.9; font-size: 0.95em; }
.overlay-schedule .schedule-item.empty { opacity: 0.8; font-style: italic; }
.overlay-schedule .schedule-item.current { border-color: rgba(255,255,255,0.25); background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)); box-shadow: 0 6px 18px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.05); }
.overlay-schedule .schedule-item .schedule-time { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 6px 8px; border-radius: 999px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); }
.overlay-schedule .schedule-header { display:flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px dashed rgba(255,255,255,0.15); }
.overlay-schedule { box-shadow: 0 10px 30px rgba(0,0,0,0.35); }

/* Ícones inline */
.overlay-schedule .icon, .overlay-schedule-fullscreen .icon { display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; opacity: 0.9; }
.overlay-schedule .icon svg, .overlay-schedule-fullscreen .icon svg { display: block; }
.overlay-schedule .schedule-program, .overlay-schedule-fullscreen .schedule-fs-row .cell.program { display: inline-flex; align-items: center; }
.overlay-schedule .schedule-program .badge-live { margin-left: 8px; }
.overlay-schedule .schedule-time .icon { margin-right: 6px; }

/* Badge Ao vivo */
.overlay-schedule .badge-live, .overlay-schedule-fullscreen .badge-live { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: linear-gradient(180deg, #ff3b3b, #c41919); color: #fff; font-weight: 800; font-size: 0.72em; letter-spacing: 0.2px; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.08); }
.overlay-schedule-fullscreen .schedule-fs-row.current .badge-live { filter: saturate(1.1) brightness(1.05); }

/* Fullscreen schedule */
.overlay-schedule-fullscreen { width: 100%; height: 100%; }
.overlay-schedule-fullscreen .schedule-fs-stage { position: relative; width: min(96vw, calc(96vh * 16/9)); aspect-ratio: 16/9; margin: auto; top: 50%; transform: translateY(-50%); box-shadow: 0 10px 30px rgba(0,0,0,0.45); border-radius: 12px; overflow: hidden; }
.overlay-schedule-fullscreen .schedule-hero { position:absolute; inset:0; width:100%; height:100%; filter: saturate(1.05) contrast(1.05); }
.overlay-schedule-fullscreen .schedule-fs-scrim { position:absolute; inset:0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.75) 100%); }
.overlay-schedule-fullscreen .schedule-fs-content { position:relative; inset:auto; padding: 20px 24px; width: 100%; height: 100%; display:flex; flex-direction: column; justify-content: flex-start; }
.overlay-schedule-fullscreen .schedule-fs-header { display:flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.overlay-schedule-fullscreen .schedule-fs-header .schedule-title { font-weight: 800; font-size: 1.6em; letter-spacing: 0.3px; }
.overlay-schedule-fullscreen .schedule-fs-header .schedule-date { opacity: 0.9; font-size: 1.1em; }
.overlay-schedule-fullscreen .schedule-fs-table { display:flex; flex-direction: column; gap:8px; backdrop-filter: blur(2px); border-radius: 8px; overflow: hidden; }
.overlay-schedule-fullscreen .schedule-fs-row { display:grid; grid-template-columns: 120px 1fr 35%; gap: 12px; align-items:center; padding: 10px 12px; background: rgba(0,0,0,0.28); border-bottom: 1px solid rgba(255,255,255,0.08); }
.overlay-schedule-fullscreen .schedule-fs-row:nth-child(odd) { background: rgba(0,0,0,0.18); }
.overlay-schedule-fullscreen .schedule-fs-row.empty { font-style: italic; opacity: 0.9; }
.overlay-schedule-fullscreen .schedule-fs-row .cell.time { font-weight: 800; opacity: 0.95; display: inline-flex; align-items: center; }
.overlay-schedule-fullscreen .schedule-fs-row .cell.program { font-weight: 700; display: inline-flex; align-items: center; }
.overlay-schedule-fullscreen .schedule-fs-row .cell.desc { opacity: 0.95; }
.overlay-schedule-fullscreen .schedule-fs-row.current { background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)); box-shadow: inset 3px 0 0 rgba(255,255,255,0.6); }
.overlay-schedule .schedule-thumb-top { margin-bottom: 8px; }
/* ===== Correção de visibilidade dos itens da programação ===== */
/* Em alguns builds, .schedule-item estava com opacity:0 por engano.
   Garantimos que itens da programação fiquem visíveis por padrão. */
.overlay-schedule .schedule-item { opacity: 1 !important; transition: opacity 0.25s ease-in; }
.overlay-schedule .schedule-items { scroll-behavior: smooth; }