:root {
    --bg-page: #f9fafb; --bg-card: #ffffff; --text-main: #1f2937;
    --primary: #4f46e5; --border: #e5e7eb; --shadow: 0 4px 6px rgba(0,0,0,0.1);
    --toast-bg: #1f2937; --toast-text: #ffffff;
    --chat-width: 350px;
}
[data-theme="dark"] {
    --bg-page: #111827; --bg-card: #1f2937; --text-main: #f9fafb; --border: #374151;
    --toast-bg: #e5e7eb; --toast-text: #1f2937;
}

body { background: var(--bg-page); color: var(--text-main); font-family: sans-serif; margin: 0; padding-bottom: 60px; transition: 0.3s; }
.top-menu { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.nav-buttons { flex: 1; display: flex; gap: 0.5rem; }
.nav-controls { flex: 1; display: flex; justify-content: flex-end; gap: 0.5rem; }
.logo-container { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: bold; font-size: 1.2rem; white-space: nowrap; }
.logo-container img { width: 32px; height: 32px; object-fit: contain; }
.container { max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
section, aside { background: var(--bg-card); padding: 2rem; border-radius: 1rem; border: 1px solid var(--border); box-shadow: var(--shadow); }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 1000; }
.modal-content { background: var(--bg-card); width: 400px; margin: 10% auto; padding: 2rem; border-radius: 1rem; }

.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: var(--toast-bg); color: var(--toast-text); padding: 1rem 1.5rem; border-radius: 0.5rem; box-shadow: var(--shadow); opacity: 0; transform: translateY(-20px); transition: all 0.3s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

.participants-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; }
.participant-card { background: var(--bg-page); padding: 1rem; border-radius: 0.5rem; text-align: center; border: 1px solid var(--border); min-width: 100px; }
.vote-badge { font-size: 1.5rem; display: block; margin-top: 0.5rem; }

button { padding: 0.6rem 1.2rem; border-radius: 0.5rem; border: none; cursor: pointer; font-weight: bold; transition: opacity 0.2s ease; }
button:not(.flag-btn):not(:disabled):hover { opacity: 0.8; }
.btn-primary { background: var(--primary); color: white; }
input, select, textarea { box-sizing: border-box; width: 100%; padding: 0.8rem; margin: 0.5rem 0 1.2rem; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--bg-page); color: var(--text-main); font-family: inherit; font-size: 1rem; }
textarea { resize: vertical; min-height: 80px; }

.fixed-footer { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--bg-card); border-top: 1px solid var(--border); padding: 0.8rem 1rem; font-size: 0.9rem; z-index: 1000; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; }
.footer-left { flex: 1; }
.footer-center { flex: 1; text-align: center; }
.footer-right { flex: 1; display: flex; justify-content: flex-end; gap: 0.5rem; }
.flag-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 0; transition: transform 0.2s; }
.flag-btn:hover { transform: scale(1.1); }
.flag-btn img { display: block; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }

.role-icon-clickable { display: inline-block; transition: transform 0.2s ease; }
.role-icon-clickable:hover { transform: scale(1.3); }

@keyframes pulse {
    0% { transform: scale(1); color: inherit; }
    50% { transform: scale(1.5); color: var(--primary); }
    100% { transform: scale(1); color: inherit; }
}
.pulse-animation { display: inline-block; animation: pulse 0.5s ease-out; }

/* Animação do botão de nome aleatório */
.btn-random-name {
    transition: transform 0.2s ease-in-out;
}
.btn-random-name:hover {
    transform: scale(1.2);
}
@keyframes spin {
    0% { transform: scale(1.2) rotate(0deg); }
    100% { transform: scale(1.2) rotate(360deg); }
}
.spin-animation {
    animation: spin 0.4s ease-in-out;
}

/* Barra lateral de anúncios */
.ad-left-sidebar { position: fixed; top: 100px; left: 10px; width: 160px; bottom: 80px; z-index: 100; overflow: hidden; display: flex; justify-content: center; }
@media (max-width: 1360px) { .ad-left-sidebar { display: none; } }

/* Chat Flutuante */
.chat-widget { position: fixed; bottom: 80px; right: 20px; z-index: 1000; display: none; }
.chat-toggle { background: var(--primary); color: white; border: none; border-radius: 50%; width: 60px; height: 60px; font-size: 1.5rem; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; transition: transform 0.2s; position: relative; }
.chat-toggle:hover { transform: scale(1.1); }
.chat-badge { position: absolute; top: -5px; right: -5px; background: #dc3545; color: white; border-radius: 50%; padding: 0.2rem 0.5rem; font-size: 0.75rem; font-weight: bold; display: none; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.chat-panel { position: absolute; bottom: 70px; right: 0; width: 320px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: var(--shadow); display: none; flex-direction: column; overflow: hidden; }
.chat-panel.open { display: flex; }
.chat-header { background: var(--primary); color: white; padding: 0.8rem 1rem; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.chat-close { background: none; border: none; color: white; cursor: pointer; font-size: 1.2rem; }
.chat-messages { height: 300px; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; background: var(--bg-page); }
.chat-message { padding: 0.5rem; border-radius: 0.5rem; font-size: 0.9rem; max-width: 85%; word-wrap: break-word; position: relative; margin-bottom: 0.2rem; }
.chat-message.self { align-self: flex-end; background: var(--primary); color: white; border-bottom-right-radius: 0; }
.chat-message.other { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-main); border-bottom-left-radius: 0; }
.chat-message-author { font-size: 0.75rem; opacity: 0.8; margin-bottom: 0.2rem; font-weight: bold; }
.chat-timestamp { font-weight: normal; opacity: 0.8; font-size: 0.7rem; margin-left: 0.5rem; }
.chat-input-area { display: flex; padding: 0.5rem; border-top: 1px solid var(--border); background: var(--bg-card); gap: 0.5rem; position: relative; align-items: center; }
.chat-input-area input { margin: 0; flex: 1; padding: 0.5rem; }
.chat-input-area button { margin: 0; padding: 0.5rem 1rem; }
.emoji-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 0; margin: 0; transition: transform 0.2s; }
.emoji-btn:hover { transform: scale(1.1); }
.emoji-picker { position: absolute; bottom: 100%; left: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.5rem; box-shadow: var(--shadow); display: none; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; z-index: 1001; margin-bottom: 0.5rem; }
.emoji-picker span { cursor: pointer; font-size: 1.2rem; text-align: center; transition: transform 0.2s; user-select: none; }
.emoji-picker span:hover { transform: scale(1.2); }
.gif-picker { position: absolute; bottom: 100%; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.5rem; box-shadow: var(--shadow); display: none; flex-direction: column; width: 260px; z-index: 1001; margin-bottom: 0.5rem; }
.gif-picker input { margin: 0 0 0.5rem 0; padding: 0.5rem; width: 100%; box-sizing: border-box; }
.gif-results { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; max-height: 220px; overflow-y: auto; }
.gif-results img { width: 100%; height: 80px; object-fit: cover; cursor: pointer; border-radius: 4px; transition: transform 0.2s; }
.gif-results img:hover { transform: scale(1.05); }
.chat-mention { color: var(--primary); background: rgba(79, 70, 229, 0.15); padding: 0.1rem 0.3rem; border-radius: 0.3rem; font-weight: bold; }
.chat-typing-indicator { font-size: 0.75rem; color: var(--text-main); opacity: 0.7; padding: 0.2rem 1rem; font-style: italic; display: none; background: var(--bg-card); min-height: 18px; border-top: 1px solid var(--border); }
.chat-autocomplete { position: absolute; bottom: 100%; left: 0; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: var(--shadow); display: none; flex-direction: column; z-index: 1002; max-height: 150px; overflow-y: auto; margin-bottom: 0.5rem; }
.chat-autocomplete-item { padding: 0.5rem 1rem; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.2s; font-size: 0.9rem; }
.chat-autocomplete-item:last-child { border-bottom: none; }
.chat-autocomplete-item:hover, .chat-autocomplete-item.active { background: var(--primary); color: white; }
.chat-message-reactions-bar { position: absolute; top: -12px; left: 10px; right: unset; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; display: none; gap: 5px; padding: 2px 8px; box-shadow: var(--shadow); z-index: 10; user-select: none; white-space: nowrap; }
.chat-message.self .chat-message-reactions-bar { left: unset; right: 10px; }
.chat-message:hover .chat-message-reactions-bar { display: flex; }
.chat-message-reactions-bar span { cursor: pointer; font-size: 1rem; transition: transform 0.2s; }
.chat-message-reactions-bar span:hover { transform: scale(1.3); }
.chat-message-reactions-display { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; user-select: none; }
.chat-reaction-badge { background: rgba(0,0,0,0.05); border: 1px solid transparent; border-radius: 10px; padding: 2px 6px; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 3px; transition: background 0.2s; }
[data-theme="dark"] .chat-reaction-badge { background: rgba(255,255,255,0.1); }
.chat-reaction-badge:hover { background: rgba(0,0,0,0.1); }
[data-theme="dark"] .chat-reaction-badge:hover { background: rgba(255,255,255,0.15); }
.chat-reaction-badge.reacted { border-color: var(--primary); background: rgba(79, 70, 229, 0.15); }
[data-theme="dark"] .chat-reaction-badge.reacted { background: rgba(79, 70, 229, 0.3); }
.chat-message-actions { position: absolute; top: -12px; left: 115px; right: unset; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; display: none; gap: 5px; padding: 2px 8px; box-shadow: var(--shadow); z-index: 10; white-space: nowrap; }
.chat-message.self .chat-message-actions { left: unset; right: 115px; }
.chat-message:hover .chat-message-actions { display: flex; }
.chat-message-actions button { background: none; border: none; padding: 0; font-size: 0.9rem; cursor: pointer; transition: transform 0.2s; }
.chat-message-actions button:hover { transform: scale(1.2); }
.chat-edited-label { font-size: 0.7rem; opacity: 0.6; font-style: italic; margin-left: 5px; }
.chat-scroll-bottom-btn { position: absolute; bottom: 80px; right: 15px; background: var(--primary); color: white; border: none; border-radius: 50%; width: 35px; height: 35px; font-size: 1.2rem; cursor: pointer; box-shadow: var(--shadow); display: none; align-items: center; justify-content: center; z-index: 1001; transition: transform 0.2s; padding: 0; }
.chat-scroll-bottom-btn:hover { transform: scale(1.1); }
.chat-scroll-badge { position: absolute; top: -5px; right: -5px; background: #dc3545; color: white; border-radius: 50%; padding: 0.1rem 0.3rem; font-size: 0.7rem; font-weight: bold; display: none; box-shadow: 0 2px 4px rgba(0,0,0,0.2); line-height: 1; }
.chat-quote { background: rgba(0,0,0,0.05); border-left: 3px solid var(--primary); padding: 0.3rem 0.5rem; margin-bottom: 0.5rem; font-size: 0.8rem; border-radius: 0 0.3rem 0.3rem 0; opacity: 0.9; }
[data-theme="dark"] .chat-quote { background: rgba(255,255,255,0.05); }
.chat-reply-preview { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.05); padding: 0.4rem 0.6rem; border-left: 3px solid var(--primary); font-size: 0.8rem; border-radius: 0 0.3rem 0.3rem 0; width: 100%; box-sizing: border-box; }
[data-theme="dark"] .chat-reply-preview { background: rgba(255,255,255,0.05); }

/* Chat Fixado (Side Panel) */
.chat-widget.is-fixed { bottom: 0; right: 0; width: var(--chat-width); height: 100vh; display: flex; flex-direction: column; top: 0; z-index: 1005; }
.chat-widget.is-fixed .chat-panel { position: relative; bottom: 0; width: 100%; height: 100%; flex-grow: 1; border-radius: 0; border: none; border-left: 1px solid var(--border); box-shadow: none; display: flex; }
.chat-widget.is-fixed .chat-messages { flex-grow: 1; height: auto; }
.chat-widget.is-fixed .chat-toggle { display: none; }
.chat-resizer { display: none; position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 20; transition: background 0.2s; }
.chat-widget.is-fixed .chat-resizer { display: block; }
.chat-widget.is-fixed .chat-resizer:hover { background: var(--primary); opacity: 0.5; }
@media (min-width: 769px) {
    body.chat-is-fixed { padding-right: var(--chat-width); }
    body.chat-is-fixed .fixed-footer { width: calc(100% - var(--chat-width)); }
}
@media (max-width: 768px) {
    .chat-widget.is-fixed { width: 100%; }
}

/* Prévia de Links (Open Graph / Cards) */
.chat-link-preview-card { display: flex; flex-direction: column; margin-top: 5px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; background: var(--bg-card); transition: transform 0.2s; max-width: 100%; }
.chat-link-preview-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.chat-link-preview-card img { width: 100%; height: 120px; object-fit: cover; border-bottom: 1px solid var(--border); }
.chat-link-preview-info { padding: 0.5rem; }
.chat-link-preview-info strong { display: block; font-size: 0.85rem; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-link-preview-info span { display: block; font-size: 0.75rem; opacity: 0.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }

/* Agrupamento de Mensagens Consecutivas */
.chat-message.is-consecutive .chat-message-author {
    display: none;
}
.chat-message.is-consecutive {
    margin-top: -0.4rem; /* Reduz o espaço entre balões agrupados */
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
}
.chat-message.has-consecutive {
    border-bottom-left-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}
/* Restaura o "rabicho" do balão na última mensagem do grupo */
.chat-message.self.is-consecutive:not(.has-consecutive) {
    border-bottom-right-radius: 0;
}
.chat-message.other.is-consecutive:not(.has-consecutive) {
    border-bottom-left-radius: 0;
}

/* Separador de Novas Mensagens */
.chat-new-messages-separator { display: flex; align-items: center; text-align: center; margin: 1rem 0; color: var(--accent-danger, #dc3545); font-size: 0.75rem; font-weight: bold; text-transform: uppercase; user-select: none; }
.chat-new-messages-separator::before, .chat-new-messages-separator::after { content: ''; flex: 1; border-bottom: 1px solid var(--accent-danger, #dc3545); }
.chat-new-messages-separator::before { margin-right: 10px; }
.chat-new-messages-separator::after { margin-left: 10px; }

/* Utilitários para remover 'unsafe-inline' */
.font-btn { background: none; border: none; font-weight: bold; cursor: pointer; color: var(--text-main, #333); }
.font-btn-minus { font-size: 1rem; margin-right: 5px; }
.font-btn-plus { font-size: 1.2rem; margin-right: 15px; }
.cookie-consent-bar { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: var(--bg-card); border-top: 1px solid var(--border); padding: 1rem; text-align: center; z-index: 1001; box-sizing: border-box; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); }
.btn-accept-cookie { margin-left: 1rem; padding: 0.4rem 1rem; }
.rooms-created-label { font-size: 0.85rem; opacity: 0.7; font-weight: bold; }
.link-reset { color: inherit; text-decoration: none; }
.chat-pin-btn { background: none; border: none; color: white; cursor: pointer; font-size: 1.1rem; margin-right: 5px; }
.chat-input-controls { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.5rem; }
.chat-reply-header { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.chat-cancel-reply-btn { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--text-main); padding: 0; }
.chat-toolbar { display: flex; gap: 0.5rem; align-items: center; width: 100%; position: relative; }
.btn-gif-toggle { font-size: 0.9rem; font-weight: bold; background: var(--border); padding: 0.2rem 0.5rem; border-radius: 0.3rem; }
.gif-picker-input { margin: 0 0 0.5rem 0; padding: 0.5rem; width: 100%; box-sizing: border-box; }
.btn-cancel-edit { display: none; background: var(--border); color: var(--text-main); }

/* --- Utilitários de Estilo para remover 'unsafe-inline' --- */
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }

.flex-1 { flex: 1; }
.flex-grow-1 { flex-grow: 1; }
.flex-wrap { flex-wrap: wrap; }

.align-items-stretch { align-items: stretch; }
.align-items-center { align-items: center; }

.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }

.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.my-3 { margin-top: 1.5rem; margin-bottom: 1.5rem; }

.px-1 { padding-left: 0.5rem; padding-right: 0.5rem; }

.w-100 { width: 100%; }
.w-auto { width: auto; }
.h-auto { height: auto; }
.min-w-300 { min-width: 300px; }
.max-w-150 { max-width: 150px; }
.max-w-500 { max-width: 500px; }
.max-w-1000 { max-width: 1000px; }
.max-h-80vh { max-height: 80vh; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-decoration-none { text-decoration: none; }

.font-sm { font-size: 0.8rem; }
.font-xl { font-size: 1.5rem; }
.font-xxl { font-size: 2rem; }
.font-semibold { font-weight: 600; }

.line-height-1 { line-height: 1; }
.line-height-md { line-height: 1.5; }

.bg-transparent { background: transparent; }
.bg-success { background-color: #28a745; }
.bg-warning { background-color: #ffc107; color: #000; }
.bg-danger { background-color: var(--accent-danger, #dc3545); color: white; }

.border-none { border: none; }
.rounded-circle { border-radius: 50%; }
.rounded-lg { border-radius: 8px; }

.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }

.white-space-nowrap { white-space: nowrap; }
.white-space-prewrap { white-space: pre-wrap; }
.word-break { word-break: break-word; }
.overflow-y-auto { overflow-y: auto; }

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

.transition-transform { transition: transform 0.2s; }
.hover-scale-102:hover { transform: scale(1.02); }

.modal.is-open { display: block; }
.alert-danger { color: #842029; background-color: #f8d7da; border: 1px solid #f5c2c7; padding: 0.8rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.9rem; }

/* Classes específicas da aplicação */
.form-inline-group { display: flex; gap: 0.5rem; align-items: stretch; }
.form-check-label { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.form-check-input { margin: 0; width: auto; }

.feature-card { display: flex; align-items: center; gap: 1rem; background: var(--bg-page); padding: 1rem; border-radius: 8px; border: 1px solid var(--border); transition: transform 0.2s; cursor: default; }
.feature-card-icon { font-size: 1.8rem; line-height: 1; }
.feature-card-text { font-weight: 600; opacity: 0.9; font-size: 0.95rem; }

.vote-card { padding: 1rem 1.5rem; font-size: 1.2rem; cursor: pointer; border-radius: 4px; transition: all 0.2s ease-in-out; }

.admin-panel { margin-top: 3rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; align-items: center; }

.topic-textarea { width: 90%; margin: 0 auto; display: block; resize: vertical; min-height: 80px; padding: 0.8rem; border-radius: 8px; border: 1px solid var(--border, #ccc); background: var(--bg-card, #fff); color: var(--text-main, #333); }
.topic-display { width: 90%; margin: 0 auto; display: block; min-height: 80px; padding: 0.8rem; border-radius: 8px; border: 1px solid var(--border, #ccc); background: var(--bg-card, #fff); color: var(--text-main, #333); text-align: left; white-space: pre-wrap; word-break: break-word; }

/* Animação para novos participantes */
@keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}
.animate-fade-in { animation: fadeInScale 0.4s ease-out forwards; }