/* Cores personalizadas para overlays */
:root {
    --overlay-primary: #0d6efd;
    --overlay-secondary: #495057;
    --overlay-text: #212529;
    --overlay-background: #212529;
    --overlay-accent: #20c997;
    --overlay-border: #dee2e6;
    --overlay-primary-rgba: rgba(13, 110, 253, 0.1);
    --overlay-secondary-rgba: rgba(73, 80, 87, 0.1);
    --overlay-background-rgba: rgba(33, 37, 41, 0.95);
    --overlay-accent-rgba: rgba(32, 201, 151, 0.1);
    --overlay-border-rgba: rgba(222, 226, 230, 0.5);
}

/* Aplicar cores personalizadas aos overlays */
.overlay-ticker {
    background: linear-gradient(90deg, var(--overlay-primary) 0%, var(--overlay-secondary) 100%) !important;
    color: var(--overlay-text) !important;
}

.overlay-poll {
    background: var(--overlay-background-rgba) !important;
    color: var(--overlay-text) !important;
}

.overlay-poll h3 {
    color: var(--overlay-text) !important;
}

.poll-option:hover {
    border-color: var(--overlay-primary) !important;
}

.poll-option.selected {
    border-color: var(--overlay-primary) !important;
    background: linear-gradient(135deg, var(--overlay-primary), var(--overlay-secondary)) !important;
    color: var(--overlay-text) !important;
}

.poll-option-percentage {
    background: linear-gradient(90deg, var(--overlay-primary-rgba), var(--overlay-secondary-rgba)) !important;
}

.poll-vote-btn {
    background: linear-gradient(135deg, var(--overlay-primary), var(--overlay-secondary)) !important;
    color: var(--overlay-text) !important;
}

.poll-vote-btn:hover {
    box-shadow: 0 8px 25px rgba(13, 110, 253, 0.4) !important;
}

.overlay-widget {
    background: var(--overlay-background-rgba) !important;
    color: var(--overlay-text) !important;
}

.widget-title {
    color: var(--overlay-text) !important;
}

.overlay-text {
    background: var(--overlay-background-rgba) !important;
    color: var(--overlay-text) !important;
}

/* ==========================================================================
   CHAT OVERLAY - Cores personalizadas
   ========================================================================== */
.overlay-chat {
    background: var(--overlay-background-rgba) !important;
    color: var(--overlay-text) !important;
    border: 1px solid var(--overlay-border) !important;
}

.chat-messages {
    background: rgba(33, 37, 41, 0.8) !important;
}

.chat-message {
    background: rgba(33, 37, 41, 0.9) !important;
    color: var(--overlay-text) !important;
    border: 1px solid var(--overlay-border-rgba) !important;
}

.chat-message-author {
    color: var(--overlay-primary) !important;
}

.chat-message-text {
    color: var(--overlay-text) !important;
}

/* Input do chat com melhor visibilidade - Prioridade máxima */
.chat-input, .chat-message-input, .chat-input input, .chat-login input {
    background: rgba(33, 37, 41, 0.98) !important;
    color: var(--overlay-background) !important;
    border: 2px solid var(--overlay-primary) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--overlay-background) !important;
}

.chat-input:focus, .chat-message-input:focus, .chat-input input:focus, .chat-login input:focus {
    border-color: var(--overlay-accent) !important;
    box-shadow: 0 0 0 3px var(--overlay-primary-rgba) !important;
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.chat-input::placeholder, .chat-message-input::placeholder, .chat-input input::placeholder, .chat-login input::placeholder {
    color: rgba(33, 37, 41, 0.6) !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

.chat-nickname-input {
    background: rgba(33, 37, 41, 0.95) !important;
    color: var(--overlay-background) !important;
    border: 2px solid var(--overlay-primary) !important;
}

.chat-nickname-input:focus {
    border-color: var(--overlay-accent) !important;
    box-shadow: 0 0 0 3px var(--overlay-primary-rgba) !important;
    background: rgba(33, 37, 41, 1) !important;
}

.chat-nickname-input::placeholder {
    color: rgba(33, 37, 41, 0.7) !important;
}

.chat-send-btn, .chat-enter-btn {
    background: linear-gradient(135deg, var(--overlay-primary), var(--overlay-secondary)) !important;
    color: var(--overlay-text) !important;
}

.chat-send-btn:hover, .chat-enter-btn:hover {
    background: linear-gradient(135deg, var(--overlay-accent), var(--overlay-primary)) !important;
    box-shadow: 0 4px 12px var(--overlay-primary-rgba) !important;
}

/* ===========================================================================
   QR CODE OVERLAY - Cores personalizadas
   ========================================================================== */
.overlay-qr {
    background: var(--overlay-background-rgba) !important;
    color: var(--overlay-text) !important;
    border: 2px solid var(--overlay-primary) !important;
}

.qr-title {
    color: var(--overlay-text) !important;
    background: linear-gradient(135deg, var(--overlay-primary), var(--overlay-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.qr-description {
    color: var(--overlay-text) !important;
}

/* ===========================================================================
   IMAGE OVERLAY - Cores personalizadas
   ========================================================================== */
.overlay-image {
    border: 2px solid var(--overlay-primary) !important;
    box-shadow: 0 8px 32px var(--overlay-primary-rgba) !important;
}

/* ==========================================================================
   CUSTOM HTML OVERLAY - Cores personalizadas
   ========================================================================== */
.overlay-custom {
    background: var(--overlay-background-rgba) !important;
    color: var(--overlay-text) !important;
    border: 1px solid var(--overlay-border) !important;
}

/* Estilos adicionais com novas cores */
.overlay-item {
    border-color: var(--overlay-border) !important;
}

.overlay-accent {
    background: var(--overlay-accent) !important;
    color: var(--overlay-text) !important;
}

.overlay-border {
    border: 1px solid var(--overlay-border) !important;
}

/* Ajuste de posicionamento para overlays do topo */
.overlay-item[data-position*="top"] {
    margin-top: 60px !important;
}

/* Responsividade para cores personalizadas */
@media (max-width: 768px) {
    .overlay-item[data-position*="top"] {
        margin-top: 50px !important;
    }
}

@media (max-width: 480px) {
    .overlay-item[data-position*="top"] {
        margin-top: 45px !important;
    }
}

/* CSS Customizado do Canal - Funcionalidade futura */