:root{
  --primary-color:#002f77;
  --secondary-color:#1d9500;
  --text-light:#080830;
  --text-dark:#ffffff;
  --background-light:#f9f9f9;
  --border-color:#ddd;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:#fff;color:var(--text-light);
  overflow:hidden;
}

/* Layout */
.digitaledu-chat-wrapper{height:100vh;height:100dvh;display:flex;flex-direction:column}

/* Container do iframe responsivo */
.digitaledu-newchat-embed{
  width:100% !important;
  max-width:100% !important;
  height:100vh !important;
  height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
}

/* Sistema de altura dinâmica - FIXO para não ser afetado pelo zoom */
.digitaledu-chat-wrapper.dynamic-height{
  height:100vh;
  height:100dvh;
  min-height:400px;
  max-height:100vh;
  max-height:100dvh;
  /* Forçar tamanho fixo independente do zoom */
  transform: scale(1);
  transform-origin: top left;
}

.digitaledu-newchat-embed.dynamic-height{
  height:100vh !important;
  height:100dvh !important;
  min-height:400px !important;
  max-height:100vh !important;
  max-height:100dvh !important;
  /* Forçar tamanho fixo independente do zoom */
  transform: scale(1) !important;
  transform-origin: top left !important;
}

.digitaledu-newchat-embed iframe{
  width:100% !important;
  height:100% !important;
  border:none !important;
  display:block;
}
.chat-content{flex:1;display:flex;min-height:0}
.stream-section{width:73%;border-right:1px solid var(--border-color);background:#000;display:flex;align-items:stretch;justify-content:center;height:100%;position:relative}
#stream-container{width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center;position:relative}
#stream-container iframe,.stream-placeholder{width:100%;height:100%;min-height:210px;object-fit:cover;aspect-ratio:16/9}

/* Coluna do chat */
.chat-main{width:27%;display:flex;flex-direction:column;height:100%;min-height:0}

/* Header + Tabs */
.chat-header{background:var(--primary-color);color:#fff;padding:8px 12px}
.chat-header h3{margin:0;font-size:14px;font-weight:600;text-align:center}
.chat-tabs{display:flex;gap:6px;justify-content:center;background:#f5f5f5;border-bottom:1px solid var(--border-color);padding:6px 6px;flex-wrap:wrap}
.tab-btn{padding:6px 10px;border:none;background:#e9eef6;color:#053;cursor:pointer;font-size:12px;border-radius:6px;position:relative}
.tab-btn.active{background:var(--primary-color);color:#fff}
.tab-notification{
  position:absolute;
  top:2px;
  right:2px;
  width:8px;
  height:8px;
  background:#ff4444;
  border-radius:50%;
  font-size:8px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:pulse 1.5s infinite;
}
@keyframes pulse{
  0%{opacity:1;transform:scale(1)}
  50%{opacity:0.7;transform:scale(1.1)}
  100%{opacity:1;transform:scale(1)}
}
.tabs-disabled{pointer-events:none;opacity:.55}

/* Conteúdo das abas */
.tab-content{position:relative;display:none;flex:1;min-height:0;padding:10px;overflow:hidden}
.tab-content.active{display:flex;flex-direction:column}
.tab-btn.hidden-flag{display:none}
.tab-content.hidden-flag{display:none}

/* Usuário atual */
.current-user{display:flex;align-items:center;gap:8px;font-size:12px;color:#555;margin:2px 0 2px}
.current-user.small{font-size:11px}
.current-user img{width:20px;height:20px;border-radius:50%;object-fit:cover}

/* Lista de mensagens */
.messages-container{
  flex:1;overflow:auto;border:1px solid var(--border-color);border-radius:8px;padding:8px;background:#fff;
  min-height:320px; /* desktop base maior para manter composer colado ao rodapé */
}

/* Sistema de altura dinâmica para mensagens - AJUSTA APENAS A ÁREA DE MENSAGENS */
.dynamic-height .messages-container{
  /* Remove altura fixa - será controlada pelo JavaScript */
  min-height: auto !important;
  max-height: none !important;
  height: auto !important;
  /* Garante que o input sempre fique visível */
  flex: 1;
  overflow-y: auto;
}

/* Desktop extra grande */
@media (min-width: 1200px){
  .messages-container{ min-height: 500px; } /* altura aumentada para telas grandes */
  .dynamic-height .messages-container{ 
    /* Altura controlada pelo JavaScript */
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
  }
}
/* +15% desktop */
@media (min-width: 901px){
  .messages-container{ min-height: 450px; } /* altura aumentada para desktop */
  .dynamic-height .messages-container{ 
    /* Altura controlada pelo JavaScript */
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
  }
}
/* Mobile: reduzir mais 30% em relação ao ajuste anterior */
@media (max-width: 900px){
  .messages-container{ 
    min-height: 190px !important; 
    height: 190px !important;
    max-height: 190px !important;
  } /* altura reduzida 10% para mobile */
  .dynamic-height .messages-container{ 
    /* Altura controlada pelo JavaScript - prioridade sobre media queries */
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
  }
}

.message{margin:6px 4px;padding:8px;border-radius:8px;background:#f6f8fb;border-left:3px solid var(--primary-color)}
.message-header{display:flex;align-items:center;gap:4px;margin-bottom:4px}
.message-avatar{width:20px;height:20px;border-radius:50%;object-fit:cover;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px}
.message-avatar:not(img){background:var(--primary-color)}
.message-name{font-weight:700;font-size:10px;color:#0b1a33}
.message-meta{font-weight:500;font-size:10px;color:#6b7280;margin-left:2px;gap:2px}
.message-actions{display:flex;gap:4px;margin-left:auto}
.message-actions button{border:none;background:transparent;cursor:pointer;line-height:1}
.message-actions .icon{width:16px;height:16px;opacity:.75}
.message-actions button:hover .icon{opacity:1}
.message-content{font-size:13px;line-height:1.35}

/* Input fixo / Emojis menores */
.message-input{display:flex;align-items:center;gap:8px;padding:8px 0 0 0;margin-top:6px}
.message-input input{flex:1;padding:10px 12px;border:1px solid var(--border-color);border-radius:8px;font-size:14px}
.btn-emoji{padding:6px 8px;background:var(--secondary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.btn-send{padding:10px 16px;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:700}

/* Emoji picker */
.emoji-anchor{position:relative;display:flex;align-items:center}
.emoji-picker{position:absolute;bottom:100%;right:0;background:#fff;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.15);padding:12px;display:none;max-width:280px;margin-bottom:8px;z-index:1000}
.emoji-picker.show{display:block}
.emoji-picker .grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;max-height:200px;overflow-y:auto}
.emoji-picker .item{font-size:20px;cursor:pointer;padding:8px;border-radius:8px;text-align:center;transition:all 0.2s ease}
.emoji-picker .item:hover{background:#f2f5f9;transform:scale(1.1)}
.emoji-picker .item:active{transform:scale(0.95)}

/* Overlay sala fechada */
.room-closed-overlay{display:none;position:absolute;inset:0;background:rgba(0,0,0,.6);align-items:center;justify-content:center;border-radius:8px}
.room-closed-overlay .overlay-card{background:#0b1a33;color:#fff;padding:18px 24px;border-radius:10px;font-weight:700}
.room-closed{display:flex}

/* Participantes */
.participantes-container{flex:1;min-height:0;display:flex;flex-direction:column}
.participantes-list{flex:1;overflow:auto;background:#fff;border:1px solid var(--border-color);border-radius:8px;padding:8px}
.participante{display:flex;align-items:center;gap:10px;padding:8px;border-bottom:1px solid #f1f5f9;position:relative}
.participante:last-child{border-bottom:none}
.participante-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.participante-avatar:not(img){background:var(--primary-color)}
.participante-nome{font-size:13px;font-weight:600;color:#0b1a33;flex:1}
.message-icon{background:#f8f9fa;border:1px solid #e5e7eb;color:#666;cursor:pointer;padding:6px;border-radius:6px;transition:all 0.2s;font-size:12px;margin-left:8px;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}
.message-icon:hover{background:var(--primary-color);color:white;border-color:var(--primary-color)}
.message-icon i{font-size:12px}

/* Mensagens Privadas */
.tab-btn.private-tab{position:relative;padding-right:25px;background:#e8f5e8 !important;color:#2d5a2d !important;border:1px solid #4caf50 !important}
.tab-btn.private-tab:hover{background:#d4edda !important;color:#1e3a1e !important}
.tab-btn.private-tab.active{background:#4caf50 !important;color:white !important}
.close-tab{position:absolute;right:5px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--primary-color);font-size:14px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.2s;font-weight:bold}
.close-tab:hover{background:var(--primary-color);color:white;transform:translateY(-50%) scale(1.1)}
.private-notification{position:fixed;top:20px;right:20px;background:white;border:1px solid #e5e7eb;border-radius:8px;padding:12px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:1000;display:flex;align-items:center;gap:8px;max-width:300px;animation:slideIn 0.3s ease-out}
.private-notification i{color:var(--primary-color);font-size:16px}
.private-notification span{flex:1;font-size:14px;color:#333}
.private-notification button{background:var(--primary-color);color:white;border:none;border-radius:4px;padding:4px 8px;font-size:12px;cursor:pointer;transition:all 0.2s}
.private-notification button:hover{background:#002f77}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* Notificação especial para primeira mensagem */
.private-message-notification{background:#fff3cd;border:2px solid #ffc107;border-radius:12px;padding:16px;margin:12px;box-shadow:0 4px 12px rgba(0,0,0,0.15);animation:slideInMessage 0.3s ease-out}
.private-message-notification .notification-content{display:flex;flex-direction:column;gap:12px}
.private-message-notification .notification-header{display:flex;align-items:center;gap:8px;font-weight:600;color:#856404}
.private-message-notification .notification-icon{font-size:20px}
.private-message-notification .notification-title{font-size:14px}
.private-message-notification .notification-message{background:#fff;padding:8px 12px;border-radius:6px;border:1px solid #ffeaa7;color:#6c757d;font-size:13px;line-height:1.4}
.private-message-notification .notification-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.private-message-notification .notification-btn{background:#ffc107;color:#000;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:all 0.2s}
.private-message-notification .notification-btn:hover{background:#ffb300;transform:scale(1.05)}
.private-message-notification .notification-reject{background:#dc3545;color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:all 0.2s}
.private-message-notification .notification-reject:hover{background:#c82333;transform:scale(1.05)}
.private-message-notification .notification-close{background:none;border:none;color:#6c757d;cursor:pointer;font-size:18px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.2s}
.private-message-notification .notification-close:hover{background:#f8f9fa;color:#000}

@keyframes slideInMessage{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

/* Notificação global (aparece em qualquer aba) */
.private-message-notification.global-notification{position:fixed;top:20px;right:20px;z-index:9999;max-width:400px;min-width:300px;margin:0;animation:slideInFromRight 0.3s ease-out}
@keyframes slideInFromRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* Notificação de rejeição */
.rejection-notification{background:#f8d7da;border:2px solid #dc3545;border-radius:12px;padding:16px;margin:12px;box-shadow:0 4px 12px rgba(0,0,0,0.15);animation:slideInMessage 0.3s ease-out}
.rejection-notification .notification-content{display:flex;flex-direction:column;gap:12px}
.rejection-notification .notification-header{display:flex;align-items:center;gap:8px;font-weight:600;color:#721c24}
.rejection-notification .notification-icon{font-size:20px}
.rejection-notification .notification-title{font-size:14px}
.rejection-notification .notification-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.rejection-notification .notification-close{background:none;border:none;color:#6c757d;cursor:pointer;font-size:18px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.2s}
.rejection-notification .notification-close:hover{background:#f8f9fa;color:#000}


/* Sistema de Curtidas */
.message-likes{display:flex;gap:4px;margin-left:8px;opacity:1;transition:opacity 0.2s}
.like-btn{background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:4px;font-size:12px;transition:all 0.2s;display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;gap:2px}
.like-btn:hover{background:#f0f4f8;transform:scale(1.1)}
.heart-btn:hover{color:#e91e63}
.thumbs-btn:hover{color:#2196f3}
.like-btn.active{background:#e3f2fd;color:#1976d2;font-weight:bold}
.heart-btn.active{background:#fce4ec;color:#e91e63}
.thumbs-btn.active{background:#e8f5e8;color:#4caf50}
.like-result{font-size:12px;color:#666;cursor:pointer;padding:2px 4px;border-radius:4px;transition:all 0.2s;display:flex;align-items:center;justify-content:center;min-width:20px;height:20px}
.like-result:hover{background:#f0f4f8;color:#333}

/* Mensagens do Sistema */
.system-message{text-align:center;margin:10px 0;opacity:0.8}
.system-message-content{background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;padding:8px 12px;display:inline-flex;align-items:center;gap:8px;max-width:80%}
.system-icon{font-size:14px}

/* Sistema de Votação em Perguntas */
.pergunta-vote{display:flex;gap:4px;margin-left:8px}
.vote-btn{background:none;border:none;cursor:pointer;padding:2px 6px;border-radius:4px;font-size:12px;transition:all 0.2s;display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;gap:2px;color:#666;position:relative}
.vote-btn:hover{background:#f0f4f8;transform:scale(1.1);color:#2196f3}
.vote-btn.active{background:#e8f5e8;color:#2e7d32;font-weight:bold;border:1px solid #4caf50}
.vote-btn.active:hover{background:#c8e6c9;color:#1b5e20}
.vote-btn.disabled{opacity:0.5;cursor:not-allowed;color:#999}
.vote-btn.disabled:hover{background:none;transform:none;color:#999}
.vote-btn.loading{opacity:0.7;cursor:wait;animation:pulse 1s infinite}
@keyframes pulse{0%{opacity:0.7}50%{opacity:1}100%{opacity:0.7}}
.pergunta-answered{background:#f0f8f0;border-left:4px solid #4caf50}
.answered-indicator{color:#2e7d32;font-weight:bold;font-size:12px;margin-left:8px}
.admin-btn{background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:4px;font-size:12px;transition:all 0.2s;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:4px;opacity:1}
.admin-btn:hover{background:#f0f4f8;transform:scale(1.1)}
.answer-btn{color:#4caf50;background:#e8f5e8}
.answer-btn:hover{background:#c8e6c9;color:#2e7d32}
.delete-btn{color:#f44336;background:#ffebee}
.delete-btn:hover{background:#ffcdd2;color:#c62828}
.system-text{font-size:13px;color:#856404;font-style:italic}
.system-time{font-size:11px;color:#6c757d}

/* Chat Privado - Layout idêntico ao chat principal */
.tab-content .chat-container{height:100%;display:flex;flex-direction:column}
.tab-content .chat-messages{flex:1;overflow-y:auto;padding:10px;background:#f8f9fa;border-radius:8px;margin-bottom:10px}
.tab-content .chat-input-container{position:sticky;bottom:0;background:white;padding:10px;border-top:1px solid #e5e7eb}
.tab-content .chat-input{display:flex;gap:8px;align-items:center;background:white;border:1px solid #e5e7eb;border-radius:20px;padding:8px 12px}
.tab-content .chat-input input{flex:1;border:none;outline:none;background:transparent;font-size:14px}
.tab-content .chat-input input:focus{border:none;outline:none}
.tab-content .emoji-btn{background:var(--secondary-color);color:#fff;border:none;cursor:pointer;font-size:16px;padding:6px 8px;border-radius:8px;transition:background 0.2s;display:flex;align-items:center;justify-content:center}
.tab-content .emoji-btn:hover{background:#1a7a00;transform:scale(1.05)}
.tab-content .send-btn{background:var(--primary-color);color:white;border:none;border-radius:20px;padding:8px 16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;font-size:12px;font-weight:600;min-width:60px}
.tab-content .send-btn:hover{background:#002f77;transform:scale(1.05)}

/* Cabeçalho fixo do chat privado */
.private-chat-header{position:sticky;top:0;background:white;border-bottom:1px solid #e5e7eb;padding:6px 16px;z-index:10;box-shadow:0 2px 4px rgba(0,0,0,0.05)}
.private-chat-user-info{display:flex;align-items:center;gap:8px}
.private-chat-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid #e5e7eb}
.private-chat-name{font-size:14px;font-weight:600;color:#1f2937}

/* Botões de ação nas mensagens privadas */
.tab-content .message-actions{display:flex;gap:4px;margin-left:8px;opacity:0;transition:opacity 0.2s}
.tab-content .message:hover .message-actions{opacity:1}
.tab-content .message-actions button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;font-size:12px;transition:all 0.2s;display:flex;align-items:center;justify-content:center}
.tab-content .message-actions button:hover{background:#f0f4f8;color:#333}
.tab-content .message-actions button:first-child:hover{color:#007bff}
.tab-content .message-actions button:last-child:hover{color:#dc3545}
.tab-content .message-actions button .icon{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}

/* Enquete / Sorteios */
.enquete-container,.sorteios-container{flex:1;min-height:0;display:flex;flex-direction:column}
.enquete-list,.sorteios-list{flex:1;overflow:auto;background:#fff;border:1px solid var(--border-color);border-radius:8px;padding:8px}
.poll-card{border:1px solid #e5e7eb;border-radius:10px;padding:12px;margin-bottom:10px}
.poll-title{font-weight:700;color:#0b1a33;margin-bottom:8px}
.poll-option{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:8px;cursor:pointer}
.poll-option:hover{background:#f8fafc}
.poll-radio{width:16px;height:16px;border:2px solid #94a3b8;border-radius:50%;display:inline-block;position:relative}
.poll-radio.active{border-color:#1d9500}
.poll-radio.active::after{content:"";position:absolute;inset:3px;background:#1d9500;border-radius:50%}
.poll-result{height:10px;background:#eef2ff;border-radius:999px;overflow:hidden}
.poll-result > div{height:10px;background:#1d4ed8}
.poll-meta{font-size:11px;color:#6b7280;margin-left:auto}

/* Responsivo geral - Telefones pequenos */
@media (max-width: 480px){
  .digitaledu-newchat-embed{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  .digitaledu-newchat-embed.dynamic-height{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  
  .chat-content{flex-direction:column}
  .stream-section,.chat-main{width:100%}
  .stream-section{height:auto;min-height:200px;flex-shrink:0}
  #stream-container{height:auto;min-height:200px;width:100%}
  #stream-container iframe,.stream-placeholder{width:100%;height:200px;min-height:200px}
  
  /* Área de mensagens: ajustar automaticamente para caber na tela */
  .messages-container{max-height:150px;overflow-y:auto}
  
  body{overflow:auto}
  
  /* Emoji picker responsivo para mobile */
  .emoji-picker{max-width:250px;padding:10px}
  .emoji-picker .grid{grid-template-columns:repeat(6,1fr);gap:6px;max-height:150px}
  .emoji-picker .item{font-size:18px;padding:6px}
}

/* Mobile horizontal - chat ao lado do stream */
@media (min-width: 481px) and (max-width: 768px) and (orientation: landscape){
  .chat-content{flex-direction:row}
  .stream-section{width:60%;height:100%;max-height:100vh}
  .chat-main{width:40%;height:100%;max-height:100vh}
  #stream-container{width:100%;height:100%;position:relative}
  #stream-container iframe,.stream-placeholder{position:absolute;top:0;left:0;width:100%;height:100%}
  
  /* Área de mensagens: ajustar automaticamente para caber na tela */
  .messages-container{max-height:calc(100vh - 180px);overflow-y:auto;flex:1}
  
  /* Reduzir tamanho dos campos e botões no input do chat */
  .message-input{gap:4px !important;padding:4px 0 0 0 !important;margin-top:2px !important}
  .message-input input{font-size:11px !important;padding:5px 6px !important}
  .btn-emoji{padding:5px 6px !important;min-width:30px !important;font-size:12px !important}
  .send-btn{padding:5px 10px !important;min-width:50px !important;font-size:11px !important}
  
  /* Remover avatar e nome do usuário no input (economizar espaço) */
  #current-user{display:none !important}
}

/* Mobile vertical - chat abaixo do stream */
@media (min-width: 481px) and (max-width: 768px) and (orientation: portrait){
  .digitaledu-newchat-embed{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  .digitaledu-newchat-embed.dynamic-height{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  
  .chat-content{flex-direction:column}
  .stream-section,.chat-main{width:100%}
  .stream-section{height:auto;min-height:250px;flex-shrink:0}
  #stream-container{height:auto;min-height:250px;width:100%}
  #stream-container iframe,.stream-placeholder{width:100%;height:250px;min-height:250px}
  
  /* Área de mensagens: ajustar automaticamente para caber na tela */
  .messages-container{max-height:200px;overflow-y:auto}
  
  body{overflow:auto}
  
  /* Emoji picker responsivo para mobile */
  .emoji-picker{max-width:250px;padding:10px}
  .emoji-picker .grid{grid-template-columns:repeat(6,1fr);gap:6px;max-height:150px}
  .emoji-picker .item{font-size:18px;padding:6px}
}

/* Tablets - manter chat ao lado quando possível */
@media (min-width: 769px) and (max-width: 1024px){
  .digitaledu-newchat-embed{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  .digitaledu-newchat-embed.dynamic-height{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  
  .chat-content{flex-direction:row}
  .stream-section{width:65%;height:100%}
  .chat-main{width:35%;height:100%}
  #stream-container{height:100%;align-items:stretch;aspect-ratio:16/9}
  #stream-container iframe,.stream-placeholder{aspect-ratio:16/9}
  
  /* Emoji picker para tablets */
  .emoji-picker{max-width:280px;padding:12px}
  .emoji-picker .grid{grid-template-columns:repeat(7,1fr);gap:8px;max-height:180px}
  .emoji-picker .item{font-size:20px;padding:8px}
}

/* Tablets na horizontal - otimizado para landscape */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape){
  .digitaledu-newchat-embed{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  .digitaledu-newchat-embed.dynamic-height{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  
  .chat-content{flex-direction:row}
  .stream-section{width:70%;height:100%}
  .chat-main{width:30%;height:100%}
  #stream-container{height:100%;align-items:stretch;aspect-ratio:16/9}
  #stream-container iframe,.stream-placeholder{aspect-ratio:16/9}
}

/* Tablets na vertical - chat abaixo */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){
  .digitaledu-newchat-embed{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  .digitaledu-newchat-embed.dynamic-height{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  
  .chat-content{flex-direction:column}
  .stream-section,.chat-main{width:100%}
  .stream-section{height:auto;min-height:300px;max-height:300px;flex-shrink:0;aspect-ratio:16/9}
  #stream-container{height:300px;align-items:stretch;aspect-ratio:16/9}
  #stream-container iframe,.stream-placeholder{height:300px;aspect-ratio:16/9}
  body{overflow:auto}
}

/* Dispositivos muito pequenos (antigos) */
@media (max-width: 900px) and (min-width: 769px){
  .digitaledu-newchat-embed{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  .digitaledu-newchat-embed.dynamic-height{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  
  /* Fallback para dispositivos antigos */
  .chat-content{flex-direction:column}
  .stream-section,.chat-main{width:100%}
  .stream-section{height:auto;min-height:210px;max-height:220px;flex-shrink:0;aspect-ratio:16/9}
  #stream-container{height:210px;align-items:stretch;aspect-ratio:16/9}
  #stream-container iframe,.stream-placeholder{height:210px;aspect-ratio:16/9}
  body{overflow:auto}
}

/* Altura do stream para telas maiores (PC) */
@media (min-width: 901px){
  .digitaledu-newchat-embed{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  .digitaledu-newchat-embed.dynamic-height{
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
  }
  
  #stream-container iframe,.stream-placeholder{
    height:100%;
    min-height:400px;
    max-height:100vh;
    aspect-ratio:16/9;
  }
}

/* Sistema de Reações do Stream */
.stream-section {
  position: relative;
  overflow: hidden;
}

.reaction-buttons {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 1000;
}

.reaction-btn {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
}

.reaction-btn:hover {
  transform: scale(1.15);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 3px 12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.5);
}

.reaction-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}

.reaction-btn.reaction-clicked {
  animation: reactionClick 0.3s ease-out;
}

@keyframes reactionClick {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.reaction-icon {
  font-size: 18px;
  display: block;
  transition: transform 0.2s ease;
  filter: 
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))
    drop-shadow(0 0 0 1px rgba(255, 255, 255, 0.5));
}

.reaction-btn:hover .reaction-icon {
  transform: scale(1.1);
}

/* Overlay para as bolinhas de reação */
.reactions-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 500;
  overflow: hidden;
}

/* Bolinhas de reação que sobem na tela */
.reaction-bubble {
  position: absolute;
  font-size: 24px;
  pointer-events: none;
  z-index: 600;
  animation: floatUp 2s linear forwards;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateY(-250px) scale(1.2);
  }
}

/* Efeitos especiais para cada reação - simplificado */
.reaction-bubble[data-reaction="👍"] {
  animation: floatUp 2s linear forwards;
}

.reaction-bubble[data-reaction="❤️"] {
  animation: floatUp 2s linear forwards;
}

.reaction-bubble[data-reaction="🚀"] {
  animation: floatUp 1.8s linear forwards;
}

.reaction-bubble[data-reaction="🔥"] {
  animation: floatUp 2s linear forwards;
}

@keyframes wiggle {
  0%, 100% { transform: translateY(-20px) scale(1) rotate(0deg); }
  25% { transform: translateY(-25px) scale(1.05) rotate(5deg); }
  75% { transform: translateY(-15px) scale(0.95) rotate(-5deg); }
}

@keyframes heartbeat {
  0%, 100% { transform: translateY(-20px) scale(1); }
  50% { transform: translateY(-25px) scale(1.2); }
}

@keyframes rocket {
  0% { transform: translateY(-20px) scale(1) rotate(0deg); }
  50% { transform: translateY(-30px) scale(1.1) rotate(10deg); }
  100% { transform: translateY(-40px) scale(1.2) rotate(0deg); }
}

@keyframes fire {
  0%, 100% { transform: translateY(-20px) scale(1); }
  25% { transform: translateY(-22px) scale(1.1); }
  50% { transform: translateY(-18px) scale(0.9); }
  75% { transform: translateY(-24px) scale(1.05); }
}

/* Botão de Doação - Estilo diferente dos botões de reação */
.donation-button-container {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 1000;
}

.donation-btn {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  border: 3px solid #fff;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 6px 20px rgba(255, 107, 107, 0.4),
    0 3px 12px rgba(238, 90, 36, 0.3),
    0 0 0 2px rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(15px);
  animation: donationPulse 2s ease-in-out infinite;
}

.donation-btn:hover {
  transform: scale(1.2);
  background: linear-gradient(135deg, #ff5252, #d63031);
  box-shadow: 
    0 8px 25px rgba(255, 107, 107, 0.6),
    0 4px 15px rgba(238, 90, 36, 0.4),
    0 0 0 3px rgba(255, 255, 255, 0.7);
}

.donation-btn:active {
  transform: scale(1.1);
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  box-shadow: 
    0 4px 15px rgba(255, 107, 107, 0.5),
    0 2px 8px rgba(238, 90, 36, 0.3),
    0 0 0 2px rgba(255, 255, 255, 0.6);
}

.donation-icon {
  font-size: 18px;
  display: block;
  transition: transform 0.2s ease;
  filter: 
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))
    drop-shadow(0 0 0 1px rgba(255, 255, 255, 0.8));
  animation: donationIconBounce 1.5s ease-in-out infinite;
}

.donation-btn:hover .donation-icon {
  transform: scale(1.15) rotate(5deg);
}

@keyframes donationPulse {
  0%, 100% { 
    box-shadow: 
      0 6px 20px rgba(255, 107, 107, 0.4),
      0 3px 12px rgba(238, 90, 36, 0.3),
      0 0 0 2px rgba(255, 255, 255, 0.5);
  }
  50% { 
    box-shadow: 
      0 8px 25px rgba(255, 107, 107, 0.6),
      0 4px 15px rgba(238, 90, 36, 0.4),
      0 0 0 3px rgba(255, 255, 255, 0.7);
  }
}

@keyframes donationIconBounce {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.1) rotate(-2deg); }
  75% { transform: scale(1.05) rotate(2deg); }
}

/* Responsivo para mobile */
@media (max-width: 900px) {
  .reaction-buttons {
    bottom: 10px;
    gap: 6px;
  }
  
  .reaction-btn {
    width: 32px;
    height: 32px;
  }
  
  .reaction-icon {
    font-size: 16px;
  }
  
  .reaction-bubble {
    font-size: 20px;
  }
  
  .donation-button-container {
    bottom: 10px;
    right: 10px;
  }
  
  .donation-btn {
    width: 45px;
    height: 45px;
  }
  
  .donation-icon {
    font-size: 16px;
  }
}

/* Modal de Doação */
.digitaledu-donation-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.digitaledu-donation-modal .digitaledu-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.digitaledu-donation-modal .digitaledu-modal-content {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  max-height: 90%;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.digitaledu-donation-modal .donation-step {
  display: none;
}

.digitaledu-donation-modal .donation-step.active {
  display: block;
}

.digitaledu-donation-modal .step-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.digitaledu-donation-modal .amount-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}

.digitaledu-donation-modal .amount-btn {
  padding: 12px;
  border: 2px solid #ddd;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: bold;
  color: #333;
}

.digitaledu-donation-modal .amount-btn:hover {
  border-color: #ff6b6b;
  background: #fff5f5;
}

.digitaledu-donation-modal .amount-btn.selected {
  border-color: #ff6b6b;
  background: #ff6b6b;
  color: white;
}

.digitaledu-donation-modal .custom-amount {
  margin: 20px 0;
}

.digitaledu-donation-modal .custom-amount label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.digitaledu-donation-modal .custom-amount input {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
}

.digitaledu-donation-modal .custom-amount input:focus {
  border-color: #ff6b6b;
  outline: none;
}

.digitaledu-donation-modal .modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.digitaledu-donation-modal .btn-primary,
.digitaledu-donation-modal .btn-secondary {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.2s;
}

.digitaledu-donation-modal .btn-primary {
  background: #ff6b6b;
  color: white;
}

.digitaledu-donation-modal .btn-primary:hover:not(:disabled) {
  background: #ff5252;
  transform: translateY(-1px);
}

.digitaledu-donation-modal .btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.digitaledu-donation-modal .btn-secondary {
  background: #f5f5f5;
  color: #333;
  border: 2px solid #ddd;
}

.digitaledu-donation-modal .btn-secondary:hover {
  background: #e0e0e0;
  transform: translateY(-1px);
}

.digitaledu-donation-modal .selected-amount {
  text-align: center;
  font-size: 18px;
  margin-bottom: 20px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  color: #333;
}

.digitaledu-donation-modal .payment-methods {
  margin: 20px 0;
}

.digitaledu-donation-modal .payment-methods h3 {
  margin-bottom: 15px;
  color: #333;
}

.digitaledu-donation-modal .payment-option {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.digitaledu-donation-modal .payment-option:hover {
  border-color: #ff6b6b;
  background: #fff5f5;
}

.digitaledu-donation-modal .payment-option input[type="radio"] {
  margin-right: 12px;
  accent-color: #ff6b6b;
}

.digitaledu-donation-modal .payment-icon {
  margin-right: 8px;
  font-size: 18px;
}

.digitaledu-donation-modal .donor-info {
  margin: 20px 0;
}

.digitaledu-donation-modal .donor-info h3 {
  margin-bottom: 15px;
  color: #333;
}

.digitaledu-donation-modal .form-group {
  margin-bottom: 16px;
}

.digitaledu-donation-modal .form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
  color: #333;
}

.digitaledu-donation-modal .form-group input {
  width: 100%;
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 14px;
}

.digitaledu-donation-modal .form-group input:focus {
  border-color: #ff6b6b;
  outline: none;
}

.digitaledu-donation-modal .form-group small {
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.digitaledu-donation-modal .processing-content {
  text-align: center;
  padding: 40px 20px;
}

.digitaledu-donation-modal .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ff6b6b;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== MODAL DE DOAÇÕES DO PLUGIN ===== */
.digitaledu-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.5) !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.digitaledu-modal .modal-content,
.digitaledu-modal .digitaledu-modal-content {
  position: relative !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 24px !important;
  max-width: 500px !important;
  width: 100% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
  margin: 0 !important;
}

/* ===== ETAPAS DO MODAL (SISTEMA DE STEPS) ===== */
.donation-step {
  display: none !important;
}

.donation-step.active {
  display: block !important;
  animation: fadeIn 0.3s ease-out !important;
}

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

/* ===== ESTILOS DOS ELEMENTOS DO MODAL ===== */
.step-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

.amount-options {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin: 20px 0 !important;
}

.amount-btn {
  padding: 12px 16px !important;
  border: 2px solid #e9ecef !important;
  background: white !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}

.amount-btn:hover {
  border-color: #007bff !important;
  background: #f8f9fa !important;
}

.amount-btn.selected {
  border-color: #007bff !important;
  background: #007bff !important;
  color: white !important;
}

.custom-amount {
  margin: 20px 0 !important;
}

.custom-amount label {
  display: block !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
}

.custom-amount input {
  width: 100% !important;
  padding: 12px !important;
  border: 2px solid #e9ecef !important;
  border-radius: 8px !important;
  font-size: 16px !important;
}

.payment-methods {
  margin: 20px 0 !important;
}

.payment-methods h3 {
  margin-bottom: 15px !important;
  font-size: 18px !important;
}

.payment-option {
  display: flex !important;
  align-items: center !important;
  padding: 12px !important;
  border: 2px solid #e9ecef !important;
  border-radius: 8px !important;
  margin-bottom: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.payment-option:hover {
  border-color: #007bff !important;
  background: #f8f9fa !important;
}

.payment-option input[type="radio"] {
  margin-right: 10px !important;
}

.payment-icon {
  margin-right: 8px !important;
  font-size: 18px !important;
}

.donor-info {
  margin: 20px 0 !important;
}

.donor-info h3 {
  margin-bottom: 15px !important;
  font-size: 18px !important;
}

.form-group {
  margin-bottom: 15px !important;
}

.form-group label {
  display: block !important;
  margin-bottom: 5px !important;
  font-weight: 500 !important;
}

.form-group input {
  width: 100% !important;
  padding: 12px !important;
  border: 2px solid #e9ecef !important;
  border-radius: 8px !important;
  font-size: 16px !important;
}

.form-group input:focus {
  outline: none !important;
  border-color: #007bff !important;
}

.modal-actions {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-top: 20px !important;
}

.btn-primary {
  background: #007bff !important;
  color: white !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}

.btn-primary:hover:not(:disabled) {
  background: #0056b3 !important;
}

.btn-primary:disabled {
  background: #6c757d !important;
  cursor: not-allowed !important;
}

.btn-secondary {
  background: #6c757d !important;
  color: white !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}

.btn-secondary:hover {
  background: #545b62 !important;
}

.selected-amount {
  text-align: center !important;
  font-size: 18px !important;
  margin: 20px 0 !important;
  padding: 15px !important;
  background: #f8f9fa !important;
  border-radius: 8px !important;
}

/* ===== ETAPA DE SUCESSO ===== */
.success-content {
  text-align: center !important;
  padding: 20px !important;
}

.success-icon {
  font-size: 48px !important;
  margin-bottom: 20px !important;
}

.success-content h3 {
  color: #28a745 !important;
  font-size: 24px !important;
  margin-bottom: 15px !important;
}

.success-content p {
  font-size: 16px !important;
  color: #666 !important;
  margin-bottom: 30px !important;
}

/* Responsividade para mobile */
@media (max-width: 768px) {
  .digitaledu-modal {
    padding: 10px !important;
  }
  
  .digitaledu-modal .modal-content,
  .digitaledu-modal .digitaledu-modal-content {
    max-width: 100% !important;
    max-height: 95vh !important;
    padding: 16px !important;
  }
  
  .amount-options {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}