/* =====================================================================
   VibeCall — recursos novos: temas, wallpapers, molduras, nomes, banners,
   animação do perfil, configurações, moderação, eventos, webhooks e transmissões
   ===================================================================== */

/* ---------- temas (cores de fundo do app) ---------- */
[data-theme="meia-noite"] { --bg-rail: #000; --bg-side: #0b0b0d; --bg-main: #121214; --bg-input: #1c1c20; --bg-hover: #1a1a1e; --bg-active: #26262b; --bg-dark: #060607; }
[data-theme="roxo"] { --bg-rail: #19132a; --bg-side: #231a38; --bg-main: #2b2144; --bg-input: #392c57; --bg-hover: #33274d; --bg-active: #42345f; --bg-dark: #1d1631; }
[data-theme="oceano"] { --bg-rail: #0c1a25; --bg-side: #102332; --bg-main: #142e3e; --bg-input: #1c3c50; --bg-hover: #193547; --bg-active: #234559; --bg-dark: #0d1f2b; }
[data-theme="floresta"] { --bg-rail: #0e1912; --bg-side: #14231a; --bg-main: #1a2d22; --bg-input: #243b2d; --bg-hover: #1f3428; --bg-active: #2a4535; --bg-dark: #101c15; }
[data-theme="cereja"] { --bg-rail: #1e1113; --bg-side: #2a171b; --bg-main: #331c21; --bg-input: #42252b; --bg-hover: #3a2026; --bg-active: #4a2a31; --bg-dark: #231419; }
:root { --accent2: #eb459e; }
body { background: var(--bg-main); }
.shop-hero { background: linear-gradient(120deg, var(--brand), var(--accent2) 60%, #ff8a3d); }
.update-bar { background: linear-gradient(90deg, var(--brand), var(--accent2)); }
.turbo-card { border-color: color-mix(in srgb, var(--accent2) 45%, transparent); }

/* ---------- wallpaper atrás das mensagens (sem atrapalhar a leitura) ---------- */
.text-view > .wallpaper, .text-view > .wallpaper-dim { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.text-view > :not(.wallpaper):not(.wallpaper-dim):not(.mention-pop) { position: relative; z-index: 1; }
.wallpaper { background-size: cover; background-position: center; transition: opacity .2s, filter .2s; }
.wallpaper-dim { background: #000; }
.has-wallpaper .text-view .messages { background: transparent; }
.has-wallpaper .text-view .msg-text, .has-wallpaper .text-view .msg-head, .has-wallpaper .text-view .welcome { text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.has-wallpaper .text-view .msg:hover { background: rgba(0, 0, 0, .28); }
.has-wallpaper .text-view .composer { background: color-mix(in srgb, var(--bg-input) 88%, transparent); backdrop-filter: blur(6px); }

/* galeria de wallpapers (gerados aqui mesmo, sem baixar imagens) */
.wp-aurora { background: radial-gradient(ellipse at 20% 10%, #5ee7a0aa, transparent 50%), radial-gradient(ellipse at 80% 30%, #a77bf3aa, transparent 55%), radial-gradient(ellipse at 50% 100%, #4facfe88, transparent 60%), #0b1220; }
.wp-galaxia { background: radial-gradient(1px 1px at 10% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 80%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 70% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 75%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 55%, #fff 50%, transparent 51%), radial-gradient(ellipse at 30% 40%, #7b2fbe88, transparent 55%), radial-gradient(ellipse at 75% 65%, #c471f566, transparent 50%), #07051a; }
.wp-ondas { background: repeating-radial-gradient(circle at 50% 120%, #1e3a8a 0 18px, #1d4ed8 18px 36px, #2563eb 36px 54px); }
.wp-grade-neon { background: linear-gradient(transparent 95%, #ff4fd855 95%) 0 0 / 40px 40px, linear-gradient(90deg, transparent 95%, #00e5ff55 95%) 0 0 / 40px 40px, linear-gradient(180deg, #12002b, #2b0045); }
.wp-por-do-sol { background: linear-gradient(180deg, #ff9a5a 0%, #ff5f6d 35%, #a43ad9 70%, #2b1055 100%); }
.wp-floresta { background: radial-gradient(ellipse at 30% 20%, #71b28066, transparent 55%), linear-gradient(160deg, #0f2a1d, #134e5e 55%, #0b1d14); }
.wp-bolinhas { background: radial-gradient(circle, #ffffff22 2px, transparent 2.5px) 0 0 / 22px 22px, linear-gradient(135deg, #1e1f3a, #2b2d55); }
.wp-cyber { background: repeating-linear-gradient(-45deg, #ff00a81a 0 2px, transparent 2px 14px), linear-gradient(135deg, #050b2b, #1a0b3a 60%, #3a0b3a); }
.wp-nuvens { background: radial-gradient(ellipse at 20% 30%, #ffffffaa, transparent 40%), radial-gradient(ellipse at 70% 20%, #ffffff88, transparent 35%), radial-gradient(ellipse at 50% 80%, #ffffff66, transparent 45%), linear-gradient(180deg, #7ec8ff, #4f8ff7); }
.wp-geometrico { background: conic-gradient(from 45deg at 50% 50%, #2b2d31 0 25%, #383a40 0 50%, #2b2d31 0 75%, #313338 0) 0 0 / 48px 48px; }

/* ---------- molduras novas ---------- */
.deco-holografico, .deco-aurora, .deco-espiral, .deco-pixel, .deco-diamante {
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%);
}
.deco-holografico { background: conic-gradient(#ffd1dc, #c2f0fc, #e0c3fc, #fdf6b2, #c1f7d5, #ffd1dc); animation: deco-spin 4s linear infinite; filter: saturate(1.3); }
.deco-aurora { background: conic-gradient(#5ee7a0, #34d3c4, #4facfe, #a77bf3, #5ee7a0); animation: deco-spin 5s linear infinite; box-shadow: 0 0 10px 2px #5ee7a066; }
.deco-espiral { background: repeating-conic-gradient(#f472b6 0 18deg, transparent 18deg 36deg); animation: deco-spin 2.6s linear infinite; }
.deco-pixel { background: repeating-conic-gradient(#facc15 0 15deg, #22d3ee 15deg 30deg, #f472b6 30deg 45deg, transparent 45deg 60deg); animation: deco-spin 6s steps(12) infinite; }
.deco-diamante { background: conic-gradient(#e0f2fe, #7dd3fc, #ffffff, #38bdf8, #e0f2fe); animation: deco-spin 3.2s linear infinite; }
.deco-wrap.e-diamante::after { content: '💎'; top: -.6em; animation: deco-twinkle 2s ease-in-out infinite; }
.deco-onda { box-shadow: 0 0 0 2px #60a5fa; animation: deco-wave 1.8s ease-out infinite; }
@keyframes deco-wave { 0% { box-shadow: 0 0 0 2px #60a5fa, 0 0 0 2px #60a5fa88; } 100% { box-shadow: 0 0 0 2px #60a5fa, 0 0 0 10px #60a5fa00; } }
.deco-matrix { box-shadow: 0 0 0 2px #22c55e, 0 0 10px 2px #22c55e88; animation: deco-flash 1s steps(2) infinite; }
.deco-matrix::after { content: '01'; top: -.75em; font-size: .4em; font-family: ui-monospace, Consolas, monospace; color: #4ade80; text-shadow: 0 0 4px #22c55e; }
.deco-cyber { box-shadow: -2px 0 0 2px #ff00a8, 2px 0 0 2px #00e5ff; animation: deco-cyber 1.4s steps(4) infinite; }
@keyframes deco-cyber { 50% { box-shadow: 2px 0 0 2px #ff00a8, -2px 0 0 2px #00e5ff; } }
.deco-brilho { box-shadow: 0 0 0 2px #fff, 0 0 12px 3px #ffffffaa; animation: deco-pulse 2s ease-in-out infinite; }
.deco-brilho::after { content: '✨'; top: -.55em; animation: deco-twinkle 1.2s ease-in-out infinite; }
.deco-hexagono { inset: -6px; border-radius: 0; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: linear-gradient(135deg, #f59e0b, #ef4444, #8b5cf6); -webkit-mask: radial-gradient(circle, transparent 57%, #000 58%); mask: radial-gradient(circle, transparent 57%, #000 58%); animation: deco-pulse 2.4s ease-in-out infinite; }
.deco-fantasma { box-shadow: 0 0 0 2px #e5e7eb, 0 0 14px 4px #ffffff55; }
.deco-fantasma::after { content: '👻'; top: -.65em; animation: deco-float 2.2s ease-in-out infinite; }
.deco-estrelas { box-shadow: 0 0 0 2px #fbbf24, 0 0 10px 2px #fde04788; }
.deco-estrelas::after { content: '🌟'; top: -.6em; animation: deco-twinkle 1.4s ease-in-out infinite; }
.deco-chamas-azuis { box-shadow: 0 0 0 3px #3b82f6, 0 0 12px 4px #22d3eeaa; animation: deco-blue-flicker .55s ease-in-out infinite alternate; }
.deco-chamas-azuis::after { content: '🔥'; top: -.55em; filter: hue-rotate(190deg) saturate(1.5); }
@keyframes deco-blue-flicker { to { box-shadow: 0 0 0 3px #60a5fa, 0 0 18px 6px #22d3eecc; } }
.deco-toxico { box-shadow: 0 0 0 3px #84cc16, 0 0 12px 4px #a3e63588; animation: deco-pulse 1.6s ease-in-out infinite; }
.deco-toxico::after { content: '☢️'; top: -.6em; }
.deco-nuvem { box-shadow: 0 0 0 3px #bae6fd, 0 0 10px 3px #e0f2fe99; }
.deco-nuvem::after { content: '☁️'; top: -.6em; animation: deco-float 2.6s ease-in-out infinite; }
.deco-orbita { box-shadow: 0 0 0 1px #a78bfa88; animation: deco-spin 3s linear infinite; }
.deco-orbita::after { content: ''; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #c4b5fd; box-shadow: 0 0 8px 2px #a78bfa; }

/* ---------- estilos de nome novos (leves: só se mexem ao passar o mouse e no perfil) ---------- */
.ns-lava { background-image: linear-gradient(90deg, #7f1d1d, #ef4444, #f97316, #facc15, #ef4444, #7f1d1d); }
.ns-arcoiris { background-image: linear-gradient(90deg, #ff5f6d, #ffc371, #f9f871, #5ee7a0, #4facfe, #a77bf3, #ff5f6d); }
.ns-neon-rosa { background-image: linear-gradient(90deg, #ff4fd8, #ff9ae9, #ff4fd8); filter: drop-shadow(0 0 3px #ff4fd8aa); }
.ns-gelo-brilhante { background-image: linear-gradient(110deg, #67e8f9 35%, #ffffff 50%, #67e8f9 65%); background-size: 250% auto; }
.ns-galaxia { background-image: linear-gradient(90deg, #7597de, #c471f5, #fa71cd, #7597de); }
.ns-brilho { background-image: linear-gradient(110deg, #e5e7eb 35%, #ffffff 50%, #e5e7eb 65%); background-size: 250% auto; }
.ns-pulso { background-image: linear-gradient(90deg, #22d3ee, #a5f3fc, #22d3ee); animation: ns-shift 3s linear infinite, ns-glow 1.6s ease-in-out infinite; }
@keyframes ns-glow { 50% { filter: drop-shadow(0 0 5px #22d3ee); } }
.ns-glitch { background-image: linear-gradient(90deg, #f0abfc, #67e8f9, #f0abfc); animation: ns-shift 3s linear infinite, ns-glitch 2.6s steps(1) infinite; }
@keyframes ns-glitch { 0%, 92%, 100% { transform: none; } 93% { transform: translate(1px, -1px) skewX(-8deg); } 95% { transform: translate(-1px, 1px); } 97% { transform: translate(1px, 0) skewX(6deg); } }
.ns-cromado { background-image: linear-gradient(90deg, #9ca3af, #f9fafb, #6b7280, #e5e7eb, #9ca3af); }
.ns-menta { background-image: linear-gradient(90deg, #34d399, #a7f3d0, #10b981, #34d399); }
.ns-por-do-sol { background-image: linear-gradient(90deg, #ff9a5a, #ff5f6d, #c471f5, #ff9a5a); }
.ns-toxico { background-image: linear-gradient(90deg, #a3e635, #4ade80, #d9f99d, #a3e635); filter: drop-shadow(0 0 2px #84cc1688); }
.ns-vapor { background-image: linear-gradient(90deg, #ff71ce, #01cdfe, #b967ff, #ff71ce); }
.ns-real { background-image: linear-gradient(110deg, #b8860b 30%, #fff6c2 50%, #ffd700 60%, #b8860b 75%); background-size: 250% auto; }
.ns { display: inline-block; }

/* ---------- banners novos (os com ✦ são animados) ---------- */
@keyframes bn-move { to { background-position: 300% 50%; } }
@keyframes bn-up { to { background-position: 0 -200%; } }
.bn-vaporwave { background: linear-gradient(120deg, #ff71ce, #01cdfe, #05ffa1, #b967ff, #ff71ce) 0 50% / 300% 100% !important; animation: bn-move 10s linear infinite; }
.bn-aurora-animada { background: linear-gradient(120deg, #0b1220, #5ee7a0, #4facfe, #a77bf3, #0b1220) 0 50% / 300% 100% !important; animation: bn-move 12s linear infinite; }
.bn-ondas { background: repeating-linear-gradient(170deg, #1d4ed8 0 14px, #2563eb 14px 28px, #3b82f6 28px 42px) 0 0 / 300% 300% !important; animation: bn-move 14s linear infinite; }
.bn-festa { background: radial-gradient(circle at 10% 30%, #f23f43 3px, transparent 4px) 0 0 / 34px 34px, radial-gradient(circle at 60% 70%, #f0b232 3px, transparent 4px) 0 0 / 40px 40px, radial-gradient(circle at 40% 20%, #23a55a 3px, transparent 4px) 0 0 / 46px 46px, linear-gradient(135deg, #5865f2, #eb459e) !important; animation: bn-party 6s linear infinite; }
@keyframes bn-party { to { background-position: 34px 68px, -40px 80px, 46px -92px, 0 0; } }
.bn-cyberpunk { background: linear-gradient(transparent 90%, #00e5ff55 90%) 0 0 / 100% 18px, linear-gradient(135deg, #12002b, #ff00a8 120%) !important; }
.bn-lava { background: linear-gradient(120deg, #450a0a, #dc2626, #f97316, #facc15, #dc2626, #450a0a) 0 50% / 300% 100% !important; animation: bn-move 9s linear infinite; }
.bn-cerejeira { background: radial-gradient(circle at 20% 40%, #fff1f5 3px, transparent 4px) 0 0 / 30px 30px, linear-gradient(135deg, #fbcfe8, #f9a8d4, #fda4af) !important; }
.bn-estrelas { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%) 0 0 / 60px 60px, radial-gradient(1px 1px at 70% 60%, #fff 50%, transparent 51%) 0 0 / 45px 45px, linear-gradient(180deg, #020617, #1e1b4b) !important; animation: bn-stars 30s linear infinite; }
@keyframes bn-stars { to { background-position: 60px 60px, -45px 45px, 0 0; } }
.bn-matrix { background: repeating-linear-gradient(90deg, #052e16 0 6px, #14532d 6px 7px), linear-gradient(180deg, transparent, #22c55e44 50%, transparent) 0 0 / 100% 200% !important; animation: bn-up 4s linear infinite; }
.bn-holografico { background: linear-gradient(120deg, #ffd1dc, #c2f0fc, #e0c3fc, #fdf6b2, #c1f7d5, #ffd1dc) 0 50% / 300% 100% !important; animation: bn-move 10s linear infinite; }
.bn-arco-iris { background: linear-gradient(90deg, #ff5f6d, #ffc371, #f9f871, #5ee7a0, #4facfe, #a77bf3, #ff5f6d) 0 50% / 300% 100% !important; animation: bn-move 8s linear infinite; }
.bn-noite { background: linear-gradient(180deg, #0f172a 0%, #1e3a8a 70%, #f59e0b 140%) !important; }
.bn-menta { background: linear-gradient(135deg, #a7f3d0, #34d399, #0d9488) !important; }
.bn-fogo-animado { background: linear-gradient(0deg, #7c2d12, #ea580c, #facc15, #ea580c, #7c2d12) 0 0 / 100% 300% !important; animation: bn-up 3s linear infinite; }
.shop-item .show[class*="bn-"] { animation-play-state: paused; }
.shop-item:hover .show[class*="bn-"] { animation-play-state: running; }
html[data-motion="off"] [class*="bn-"], html[data-motion="off"] .ns, html[data-motion="off"] .deco, html[data-motion="off"] .deco::after { animation: none !important; }

/* ---------- cartão de perfil: animação ao abrir e efeitos escolhidos ---------- */
.pc-banner { position: relative; overflow: hidden; background-size: cover; background-position: center; }
.preview-col .profile-card, .shop-preview .profile-card { position: relative; }
.profile-card.pc-anim { animation: pc-in .3s cubic-bezier(.2, .9, .3, 1.15) both; }
.profile-card.pc-anim .pc-banner { animation: pc-banner .5s ease-out both; }
.profile-card.pc-anim .pc-avatar { animation: pc-pop .42s .08s cubic-bezier(.2, .9, .3, 1.3) both; }
.profile-card.pc-anim .pc-body > * { animation: pc-up .36s ease-out both; }
.profile-card.pc-anim .pc-body > :nth-child(1) { animation-delay: .1s; }
.profile-card.pc-anim .pc-body > :nth-child(2) { animation-delay: .14s; }
.profile-card.pc-anim .pc-body > :nth-child(3) { animation-delay: .18s; }
.profile-card.pc-anim .pc-body > :nth-child(4) { animation-delay: .22s; }
.profile-card.pc-anim .pc-body > :nth-child(5) { animation-delay: .26s; }
.profile-card.pc-anim .pc-body > :nth-child(n+6) { animation-delay: .3s; }
.profile-card.pc-closing { animation: pc-out .16s ease-in both !important; }
@keyframes pc-in { from { opacity: 0; transform: scale(.9) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pc-banner { from { clip-path: inset(0 0 100% 0); filter: brightness(1.5); } to { clip-path: inset(0); filter: none; } }
@keyframes pc-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pc-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pc-out { to { opacity: 0; transform: scale(.94) translateY(4px); } }
.pc-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.fx-brilho .pc-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-110%); animation: pc-shine 1.1s .25s ease-out both; }
@keyframes pc-shine { to { transform: translateX(110%); } }
.fx-aurora .pc-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(94, 231, 160, .55), rgba(167, 123, 243, .55), transparent) 0 0 / 300% 100%; mix-blend-mode: screen; animation: pc-aurora 2.4s ease-in-out both; }
@keyframes pc-aurora { from { background-position: 0 0; opacity: 0; } 30% { opacity: 1; } to { background-position: 300% 0; opacity: 0; } }
.profile-card.pc-anim.fx-neon { animation: pc-in .3s cubic-bezier(.2, .9, .3, 1.15) both, pc-neon 1.4s .3s ease-in-out 2; }
@keyframes pc-neon { 50% { box-shadow: 0 0 0 2px var(--brand), 0 0 26px 6px var(--brand), 0 12px 40px rgba(0, 0, 0, .6); } }
.fx-confete .pc-fx i { position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px; animation: pc-confetti 1.7s ease-in both; }
@keyframes pc-confetti { to { transform: translate(var(--x), 360px) rotate(var(--r)); opacity: 0; } }
.fx-estrelas .pc-fx i { position: absolute; color: #fff8c4; font-style: normal; font-size: 14px; text-shadow: 0 0 6px #ffd54a; animation: pc-twinkle 1.4s ease-in-out both; }
@keyframes pc-twinkle { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(.6) translateY(-10px); } }
html[data-motion="off"] .profile-card, html[data-motion="off"] .profile-card *, html[data-motion="off"] .pc-fx { animation: none !important; }

/* atividade, moderação e selos no perfil */
.pc-activity .act-row { display: flex; gap: 10px; align-items: center; }
.act-icon { width: 42px; height: 42px; border-radius: 10px; background: #1e1f22; display: grid; place-items: center; font-size: 22px; overflow: hidden; flex: none; }
.act-icon img { width: 32px; height: 32px; image-rendering: auto; }
.act-text { min-width: 0; display: flex; flex-direction: column; }
.act-text strong { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-line { display: flex !important; align-items: center; gap: 4px; color: #a3e6b8 !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.activity-line img { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.pc-mod { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pc-mod .btn-primary { margin: 0; padding: 6px 10px; font-size: 12px; flex: none; }
.pc-mod select, .pc-move { background: var(--bg-main); border: 0; border-radius: 4px; color: var(--text); font-size: 12px; padding: 5px 6px; }
.warn-btn { background: #f0b232 !important; color: #1e1f22 !important; }
.pc-timeout { margin-top: 8px; background: rgba(240, 178, 50, .12); border: 1px solid rgba(240, 178, 50, .35); color: #fde68a; border-radius: 6px; padding: 6px 8px; font-size: 12px; }
.pc-actions .pc-report { flex: none !important; margin: 0; padding: 8px 10px; background: var(--bg-side); border-radius: 4px; }
.pc-actions .pc-report:hover { background: #da373c33; text-decoration: none; }
.verified-badge { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--green); color: #fff; font-size: 10px; font-weight: 800; flex: none; line-height: 1; }
.verified-chip { background: #23a55a33; color: #3ba55c; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 8px; }
.live-btn { border: 0; cursor: pointer; font: inherit; font-size: 10px; }
.live-btn:hover { filter: brightness(1.2); }
.events-link { font-weight: 600; }
.grow-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#btnSettings.alert { color: #f0b232; }
.status-menu button .ubadge { margin-left: auto; }

.grow { flex: 1; min-width: 0; }

/* ---------- caixa de diálogo com campos ---------- */
.dlg-fields { display: flex; flex-direction: column; gap: 10px; }
.dlg-field { display: flex; flex-direction: column; gap: 4px; }
.dlg-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.dlg-field select, .dlg-field textarea, .dlg-field input { background: var(--bg-rail); border: 0; border-radius: 6px; padding: 10px 12px; color: var(--text); font: inherit; outline: none; width: 100%; resize: vertical; }

/* ---------- cargos: grupos, hierarquia e travas ---------- */
.role-group { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .04em; margin: 10px 0 2px; text-transform: uppercase; }
.role-perm.disabled { opacity: .5; cursor: not-allowed; }
.role-row { display: flex; gap: 2px; align-items: center; }
.role-row .role-item { flex: 1; min-width: 0; }
.role-move { width: 24px; height: 28px; border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 10px; flex: none; }
.role-move:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
.role-move:disabled { opacity: .25; cursor: default; }
.role-item.everyone { color: #f0b232; }
.role-item .lock { margin-left: auto; font-size: 11px; }
#roleSave:disabled { opacity: .5; }

/* ---------- configurações ---------- */
.settings-card { width: min(1000px, 100%); height: min(88vh, 780px); padding: 0; gap: 0; overflow: hidden; }
.settings-layout { display: flex; height: 100%; min-height: 0; }
.settings-nav { width: 230px; flex: none; background: var(--bg-side); padding: 16px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.settings-nav .tab { text-align: left; padding: 9px 10px; display: flex; align-items: center; gap: 6px; }
.settings-nav .tab .ubadge { margin-left: auto; }
.settings-nav hr { border: 0; border-top: 1px solid var(--bg-active); width: 100%; margin: 6px 0; }
.settings-main { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 24px 24px; }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.settings-head h2 { margin: 0; color: var(--text-strong); }
.st-box { background: var(--bg-side); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.st-box h3 { margin: 0; color: var(--text-strong); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.st-box input:not([type=checkbox]):not([type=color]):not([type=range]), #stManName { background: var(--bg-rail); border: 0; border-radius: 6px; padding: 10px 12px; color: var(--text); font: inherit; outline: none; width: 100%; min-width: 0; }
.st-box .btn-primary { margin: 0; align-self: flex-start; }
.st-box .invite-row .btn-primary { align-self: auto; }
.danger-box { border: 1px solid rgba(218, 55, 60, .35); }
.st-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.st-item { display: flex; align-items: center; gap: 10px; background: var(--bg-main); border-radius: 8px; padding: 8px 10px; }
.st-item.warn { border-left: 3px solid #f0b232; }
.st-item strong { color: var(--text-strong); }
.chip-ok { background: #23a55a33; color: #3ba55c; font-size: 11px; padding: 1px 6px; border-radius: 6px; margin-left: 6px; font-weight: 700; }
.ok-text { color: #b5f5c8; font-size: 14px; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.codes .code { font-family: ui-monospace, Consolas, monospace; background: var(--bg-rail); padding: 6px 8px; border-radius: 6px; text-align: center; letter-spacing: .05em; color: var(--text-strong); }
.qr-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
svg.qr { width: 220px; height: 220px; border-radius: 8px; background: #fff; flex: none; max-width: 100%; }
.secret-key { font-family: ui-monospace, Consolas, monospace; background: var(--bg-rail); padding: 8px 10px; border-radius: 6px; word-break: break-all; letter-spacing: .06em; color: var(--text-strong); }
.row.wrap { flex-wrap: wrap; }
.narrow-select { width: auto; flex: none; }
.link-btn.center { align-self: center; }

/* aparência */
.ap-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
.ap-controls { display: flex; flex-direction: column; gap: 8px; }
.ap-controls h3, .ap-preview-col h3 { margin: 6px 0 2px; font-size: 14px; color: var(--text-strong); }
.ap-controls .file-btn { align-self: flex-start; }
.ap-controls input[type=color] { width: 100%; height: 34px; border: 0; background: none; padding: 0; cursor: pointer; }
.ap-controls label.stack { font-size: 11px; font-weight: 700; color: var(--muted); }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-card { display: flex; flex-direction: column; gap: 6px; align-items: center; background: var(--bg-side); border: 2px solid transparent; border-radius: 10px; padding: 8px; color: var(--text); font-size: 13px; }
.theme-card.on { border-color: var(--brand); }
.theme-swatch { width: 100%; height: 38px; border-radius: 6px; }
.t-escuro { background: linear-gradient(90deg, #1e1f22 0 20%, #2b2d31 20% 45%, #313338 45%); }
.t-meia-noite { background: linear-gradient(90deg, #000 0 20%, #0b0b0d 20% 45%, #121214 45%); }
.t-roxo { background: linear-gradient(90deg, #19132a 0 20%, #231a38 20% 45%, #2b2144 45%); }
.t-oceano { background: linear-gradient(90deg, #0c1a25 0 20%, #102332 20% 45%, #142e3e 45%); }
.t-floresta { background: linear-gradient(90deg, #0e1912 0 20%, #14231a 20% 45%, #1a2d22 45%); }
.t-cereja { background: linear-gradient(90deg, #1e1113 0 20%, #2a171b 20% 45%, #331c21 45%); }
.wp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wp-card { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; border: 2px solid transparent; overflow: hidden; background-size: cover; background-position: center; padding: 0; }
.wp-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.wp-card .wp-name { position: absolute; left: 4px; bottom: 4px; font-size: 10px; background: rgba(0, 0, 0, .6); color: #fff; padding: 1px 5px; border-radius: 4px; }
.wp-none { background: var(--bg-main); }
.ap-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.ap-sliders label { font-size: 11px; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.ap-sliders input { accent-color: var(--brand); }
.ap-sliders input:disabled { opacity: .4; }
.ap-preview-col { display: flex; flex-direction: column; gap: 8px; }
.ap-preview { display: flex; height: 320px; border-radius: 10px; overflow: hidden; border: 1px solid var(--bg-active); background: var(--bg-main); }
.ap-side { width: 46px; background: var(--bg-rail); display: flex; flex-direction: column; gap: 6px; padding: 8px 0; align-items: center; flex: none; }
.ap-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-main); display: grid; place-items: center; font-size: 10px; color: var(--text); font-weight: 700; }
.ap-dot:first-child { background: var(--brand); color: #fff; border-radius: 10px; }
.ap-chat { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-main); }
.ap-chat > .wallpaper, .ap-chat > .wallpaper-dim { position: absolute; inset: 0; }
.ap-msgs { position: relative; z-index: 1; flex: 1; overflow: hidden; padding: 6px 0; display: flex; flex-direction: column; justify-content: flex-end; }
.ap-msgs .msg { margin-top: 8px; padding: 2px 10px; gap: 10px; }
.ap-msgs .msg .avatar { width: 30px; height: 30px; font-size: 12px; }
.ap-msgs .msg-text, .ap-msgs .msg-head { text-shadow: 0 1px 2px rgba(0, 0, 0, .55); font-size: 13px; }
.ap-composer { position: relative; z-index: 1; margin: 6px 10px 10px; background: var(--bg-input); border-radius: 8px; padding: 9px 12px; color: var(--muted); font-size: 13px; }

/* ---------- moderação ---------- */
.mod-card { width: min(920px, 100%); height: min(88vh, 780px); }
.mod-tabs { flex-wrap: wrap; }
.mod-tabs .tab { display: flex; align-items: center; gap: 6px; }
.mod-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.mod-filter { gap: 6px; flex-wrap: wrap; }
.mod-filter select { background: var(--bg-rail); border: 0; border-radius: 6px; padding: 8px; color: var(--text); font: inherit; font-size: 13px; }
.mod-row { display: flex; align-items: center; gap: 10px; background: var(--bg-side); border-radius: 8px; padding: 10px 12px; }
.mod-row .btn-primary { margin: 0; padding: 6px 12px; font-size: 13px; }
.report-card { background: var(--bg-side); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; border-left: 4px solid #f0b232; }
.report-card.st-approved { border-left-color: var(--green); }
.report-card.st-rejected { border-left-color: var(--red); }
.report-card.st-closed { border-left-color: #4e5058; opacity: .85; }
.rc-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rc-reason { font-weight: 700; color: var(--text-strong); }
.rc-status { font-size: 11px; font-weight: 800; background: rgba(255, 255, 255, .08); padding: 1px 6px; border-radius: 6px; }
.rc-quote { margin: 0; background: var(--bg-main); border-radius: 8px; padding: 8px 10px; border-left: 3px solid #4e5058; max-height: 220px; overflow: auto; }
.rc-desc { font-style: italic; color: var(--text); white-space: pre-wrap; }
.rc-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rc-actions input, .rc-actions select { background: var(--bg-rail); border: 0; border-radius: 6px; padding: 7px 10px; color: var(--text); font: inherit; font-size: 13px; }
.rc-actions input { flex: 1 1 180px; min-width: 0; }
.rc-actions .btn-primary { margin: 0; padding: 6px 12px; font-size: 13px; }
.ghost-btn { background: var(--bg-active) !important; color: var(--text) !important; }
.audit-row { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-side); border-radius: 8px; padding: 8px 12px; }
.au-icon { font-size: 18px; width: 24px; text-align: center; flex: none; }
.au-extra { word-break: break-word; max-height: 120px; overflow: auto; }
.ulink { font-weight: 700; color: var(--text-strong); cursor: pointer; }
.ulink:hover { text-decoration: underline; }
.automod-form .am-num { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.am-num input, .am-num select { background: var(--bg-rail); border: 0; border-radius: 6px; padding: 6px 8px; color: var(--text); width: 110px; font: inherit; }
.am-num select { width: auto; max-width: 60%; }
.automod-form .btn-primary { align-self: flex-start; }

/* ---------- eventos e webhooks ---------- */
.events-card { width: min(580px, 100%); overflow-y: auto; }
.event-card { background: var(--bg-side); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.event-card strong { color: var(--text-strong); font-size: 16px; }
.event-card.live { border: 1px solid var(--green); }
.event-card .btn-primary { margin: 0; padding: 6px 12px; font-size: 13px; }
.ev-when { color: #c9cdfb; font-size: 12px; font-weight: 700; }
.ev-desc { white-space: pre-wrap; }
.event-form { background: var(--bg-side); border-radius: 10px; padding: 12px; }
.event-form input, .event-form select, .event-form textarea, #webhooksBody input, #webhooksBody select { background: var(--bg-rail); border: 0; border-radius: 6px; padding: 9px 10px; color: var(--text); font: inherit; width: 100%; outline: none; color-scheme: dark; }
.event-form .row > * { width: auto; flex: 1 1 140px; }
#webhooksBody .btn-primary { margin: 0; }
.wh-example { display: block; white-space: pre-wrap; word-break: break-all; font-size: 11px; background: var(--bg-rail); padding: 8px; border-radius: 6px; }
.ok-box { border: 1px solid #23a55a66; }

/* ---------- música: avançar/voltar/pular e intensidade do Abafar ---------- */
.music-ctrls { display: flex; gap: 4px; flex: none; }
.music-duck-box { display: flex; align-items: center; gap: 6px; flex: none; }
.duck-level { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #e9d5ff; }
.duck-level input { width: 70px; accent-color: #c084fc; cursor: pointer; }

/* ---------- loja: prévia e itens premium ---------- */
.shop-body { display: flex; align-items: flex-start; }
.shop-body .shop-grid { flex: 1; min-width: 0; }
.shop-preview { width: 320px; flex: none; padding: 16px 24px 24px 0; position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; }
.shop-preview label { font-size: 12px; font-weight: 700; color: var(--muted); }
.shop-preview .profile-card { width: 100%; box-shadow: none; }
.shop-item { cursor: pointer; }
.shop-item.previewing { border-color: var(--brand); }
.badge-premium { position: absolute; top: 8px; right: 8px; background: linear-gradient(90deg, #a78bfa, #f472b6); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; }

/* ---------- transmissões: assistir uma, duas lado a lado ou várias em grade ---------- */
.stage-wrap { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.stage-wrap > .stage { flex: 1; min-height: 0; }
.stream-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px 0; flex-wrap: wrap; }
.sb-list { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.stream-pill { display: flex; align-items: center; gap: 8px; background: #1e1f22; border: 1px solid #2b2d31; border-radius: 12px; padding: 6px 8px 6px 6px; min-width: 0; max-width: 100%; }
.stream-pill.on { border-color: var(--green); background: #1a2a20; }
.stream-pill .avatar { width: 32px; height: 32px; font-size: 13px; }
.sp-text { display: flex; flex-direction: column; min-width: 0; max-width: 220px; }
.sp-text .uname-text { font-weight: 700; color: #f2f3f5; }
.sp-text .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream-pill .btn-primary { margin: 0; padding: 6px 12px; font-size: 13px; flex: none; }
.live-mini { background: var(--red); color: #fff; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 3px; flex: none; letter-spacing: .03em; }
.wp-top .live-mini { margin-left: auto; }
/* barra de baixo: o nome cabe melhor */
.userbar { gap: 4px; padding: 0 6px; }
.userbar .icon-btn { width: 30px; flex: none; }
.userbar .me-btn { min-width: 0; }
.layout-btns { display: flex; gap: 4px; background: #1e1f22; border-radius: 10px; padding: 4px; }
.layout-btn { width: 34px; height: 30px; border: 0; border-radius: 8px; background: none; color: #b5bac1; font-size: 16px; }
.layout-btn:hover { background: #2b2d31; color: #fff; }
.layout-btn.on { background: var(--brand); color: #fff; }
.watch-area { flex: 3 1 0; min-height: 0; display: grid; gap: 8px; padding: 8px 16px 0; }
.watch-area[data-layout="focus"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.watch-area[data-layout="focus"]:not([data-count="1"]) { grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr)); }
.watch-area[data-layout="focus"] .watch-panel.focus { grid-column: 1; grid-row: 1 / -1; }
.watch-area[data-layout="focus"] .watch-panel.thumb { grid-column: 2; }
.watch-area[data-layout="split"] { grid-template-columns: minmax(0, var(--split, 50%)) 8px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.watch-area[data-layout="grid"] { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.watch-panel { position: relative; background: #000; border-radius: 10px; overflow: hidden; min-height: 120px; cursor: pointer; outline: 2px solid transparent; transition: outline-color .15s; }
.watch-panel:hover { outline-color: #4e5058; }
.watch-panel.focus { outline-color: transparent; }
.watch-panel video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.wp-wait { position: absolute; inset: 0; display: grid; place-items: center; color: #b5bac1; font-size: 14px; background: radial-gradient(circle, #1e1f22, #000); }
.wp-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent); color: #fff; pointer-events: none; }
.wp-top .avatar { width: 28px; height: 28px; font-size: 12px; }
.wp-who { display: flex; flex-direction: column; min-width: 0; }
.wp-who .uname-text { font-weight: 700; }
.wp-who .small { color: #d0d3d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-ctrls { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; align-items: center; opacity: 0; transition: opacity .15s; }
.watch-panel:hover .wp-ctrls, .watch-panel:focus-within .wp-ctrls, .watch-panel:fullscreen .wp-ctrls { opacity: 1; }
.wp-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; font-size: 14px; display: grid; place-items: center; }
.wp-btn:hover { background: rgba(0, 0, 0, .9); }
.wp-btn.close:hover { background: var(--red); }
.wp-quality { height: 32px; border-radius: 16px; border: 0; background: rgba(0, 0, 0, .7); color: #fff; font: inherit; font-size: 12px; padding: 0 8px; }
.watch-panel.thumb .wp-ctrls .wp-quality, .watch-panel.thumb .wp-btn.solo { display: none; }
.watch-panel:fullscreen { border-radius: 0; }
.wp-divider { background: #2b2d31; border-radius: 4px; cursor: col-resize; }
.wp-divider:hover, .wp-divider:active { background: var(--brand); }
.stage.strip { flex: 0 0 auto; display: flex; overflow-x: auto; gap: 8px; padding: 8px 16px; align-content: normal; grid-template-columns: none; }
.stage.strip .tile { width: 160px; flex: none; }
.stage.strip .tile .avatar { width: 44px; height: 44px; font-size: 18px; }
.stage.strip .tile-label { font-size: 11px; }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .settings-card, .mod-card { height: 94dvh; }
  .settings-layout { flex-direction: column; }
  .settings-nav { width: auto; flex-direction: row; overflow-x: auto; padding: 8px; flex: none; }
  .settings-nav .tab { white-space: nowrap; }
  .settings-nav hr { display: none; }
  .settings-main { padding: 12px; }
  .ap-layout { grid-template-columns: 1fr; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .wp-grid { grid-template-columns: repeat(3, 1fr); }
  .shop-body { flex-direction: column-reverse; }
  .shop-preview { width: auto; padding: 12px 16px 0; position: static; }
  .watch-area { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-auto-rows: minmax(200px, 1fr); overflow-y: auto; padding: 8px; }
  .watch-panel.focus, .watch-panel.thumb { grid-column: auto !important; grid-row: auto !important; }
  .wp-divider { display: none; }
  .wp-ctrls { opacity: 1; }
  .stream-bar { padding: 8px 8px 0; }
  .sb-list { flex-direction: column; width: 100%; }
  .stream-pill { width: 100%; }
  .sp-text { flex: 1 1 auto; min-width: 40px; max-width: none; }
  .stream-pill .btn-primary { padding: 5px 9px; font-size: 12px; }
  .layout-btns { display: none; } /* no celular as transmissões ficam uma embaixo da outra */
  .music-ctrls .music-btn { min-width: 28px; padding: 0 6px; }
  .codes { grid-template-columns: 1fr; }
}

/* ---------- música: controles com ícones (sem emoji) ---------- */
.music-label { font-size: 10.5px; letter-spacing: .09em; }
.music-ctrls { align-items: center; gap: 6px; }
.music-ctrls .music-btn {
  width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: background .15s, transform .15s;
}
.music-ctrls .music-btn:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }
.music-ctrls .music-btn:active { transform: scale(.94); }
.music-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.music-btn svg .f { fill: currentColor; stroke: none; }
.music-ctrls #musicPlay { width: 44px; height: 44px; min-width: 44px; background: #fff; color: #5b21b6; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.music-ctrls #musicPlay:hover { background: #f5ecff; transform: scale(1.06); }
.music-ctrls #musicPlay svg { width: 22px; height: 22px; }
.music-duck-box { gap: 8px; }
.music-btn.pill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 11px; border-radius: 17px; font-size: 12px; }
.music-btn.pill svg { width: 16px; height: 16px; }

/* ---------- botões de efeitos sonoros e playlists na chamada ---------- */
.round.fx-pads, .round.fx-list { background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; box-shadow: 0 4px 14px rgba(124,58,237,.38); }
.round.fx-pads:hover, .round.fx-list:hover { background: linear-gradient(135deg, #8b5cf6, #ec4899); transform: translateY(-1px); }
.round.fx-pads svg, .round.fx-list svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.round.fx-pads svg rect { fill: rgba(255,255,255,.18); }
#vcFx svg { width: 22px; height: 22px; }

/* ---------- ligar: botão do topo e janela de chamada recebida ---------- */
#btnCall svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#btnCall:hover { color: #23a55a; }
.call-rings { position: fixed; top: 16px; right: 16px; z-index: 900; display: flex; flex-direction: column; gap: 10px; }
.call-ring {
  width: 340px; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 12px; padding: 14px;
  border-radius: 18px; background: linear-gradient(135deg, #2b1055, #5b21b6); color: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12);
  animation: ringIn .28s cubic-bezier(.2,.9,.3,1.2), ringPulse 1.8s ease-in-out .3s infinite;
}
.call-ring .cr-avatar { width: 46px; height: 46px; flex: none; }
.cr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cr-title { font-weight: 800; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-sub { font-size: 12.5px; color: #e9d5ff; }
.cr-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; display: grid; place-items: center; flex: none; transition: transform .15s, filter .15s; }
.cr-btn:hover { transform: scale(1.08); filter: brightness(1.1); }
.cr-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cr-btn.ok { background: #23a55a; animation: ringShake 1.1s ease-in-out infinite; }
.cr-btn.no { background: #ed4245; }
.cr-btn.no svg { transform: rotate(135deg); }
@keyframes ringIn { from { opacity: 0; transform: translateY(-14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ringPulse { 50% { box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 5px rgba(168,85,247,.28); } }
@keyframes ringShake { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .call-ring, .cr-btn.ok { animation: none; } }

/* ---------- grupos privados ---------- */
.group-pick { max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.gp-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg-side); cursor: pointer; }
.gp-item:hover { background: var(--bg-rail); }
.gp-item input { accent-color: #7c3aed; width: 16px; height: 16px; }
.gp-item .avatar { width: 28px; height: 28px; }
.gp-name { font-weight: 600; color: var(--text-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chan.group .grp-avatar { width: 28px; height: 28px; }
.dm-menu .grp-only.hidden { display: none; }

/* ---------- playlists do DJ ---------- */
.pl-modal { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 40px); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.pl-top { display: flex; align-items: center; justify-content: space-between; }
.pl-top h2 { margin: 0; }
.pl-new { display: flex; gap: 8px; }
.pl-new input, .pl-rename, .pl-edit textarea { flex: 1; min-width: 0; background: var(--bg-rail); border: 0; border-radius: 8px; padding: 10px 12px; color: var(--text); font: inherit; outline: none; }
.pl-new .btn-primary { margin: 0; width: auto; padding: 0 18px; }
.pl-body { overflow: auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding-right: 2px; }
.pl-empty { padding: 14px; text-align: center; }
.pl-card { background: var(--bg-side); border-radius: 12px; padding: 10px 12px; border: 1px solid transparent; }
.pl-card.open { border-color: #7c3aed; }
.pl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-info { flex: 1; min-width: 140px; display: flex; flex-direction: column; cursor: pointer; }
.pl-name { font-weight: 700; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-count { font-size: 12px; color: var(--muted); }
.pl-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-btn { height: 30px; padding: 0 12px; border-radius: 15px; border: 0; background: var(--bg-rail); color: var(--text); font-weight: 700; font-size: 12px; cursor: pointer; transition: background .15s, filter .15s; }
.pl-btn:hover:not(:disabled) { filter: brightness(1.25); }
.pl-btn.primary { background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; }
.pl-btn.danger { color: #ff8a8c; }
.pl-btn:disabled { opacity: .4; cursor: not-allowed; }
.pl-edit { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pl-edit textarea { flex: none; resize: vertical; }
.pl-edit .pl-btn { align-self: flex-start; height: 34px; }
.pl-tracks { margin: 0; padding: 0; list-style: none; max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 2px; counter-reset: t; }
.pl-tracks li { counter-increment: t; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--bg-rail); }
.pl-tracks li::before { content: counter(t); width: 22px; text-align: right; color: var(--muted); font-size: 12px; flex: none; }
.pl-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.pl-x { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; flex: none; }
.pl-x:hover { background: rgba(237,66,69,.2); color: #ff8a8c; }
.pl-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

@media (max-width: 760px) {
  .music-ctrls .music-btn { width: 32px; height: 32px; min-width: 32px; }
  .music-ctrls #musicPlay { width: 38px; height: 38px; min-width: 38px; }
  .call-rings { left: 16px; right: 16px; top: 10px; }
  .call-ring { width: 100%; }
}

/* ---------- "Voz conectada" clicável ---------- */
#voicePanel .vp-row > div:first-child { cursor: pointer; border-radius: 8px; padding: 3px 6px; margin: -3px -6px; min-width: 0; transition: background .15s; }
#voicePanel .vp-row > div:first-child:hover, #voicePanel .vp-row > div:first-child:focus-visible { background: rgba(255,255,255,.08); outline: none; }

/* ---------- painel do seu perfil ---------- */
.status-menu.me-pop { width: 300px; max-width: calc(100vw - 16px); padding: 0; overflow: hidden auto; max-height: calc(100vh - 80px); background: #111214; border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,.65); }
.me-pop .mp-top { position: relative; padding-bottom: 6px; }
.me-pop .pc-banner { height: 78px; }
.me-pop .pc-avatar { margin: -38px 0 0 16px; }
.me-pop .pc-avatar .avatar { width: 76px; height: 76px; font-size: 28px; box-shadow: 0 0 0 5px #111214; }
.me-pop .pc-avatar .avatar.status-dot::after { width: 17px; height: 17px; border-width: 4px; border-color: #111214; }
.me-pop .mp-name { padding: 6px 16px 0; display: flex; flex-direction: column; gap: 1px; }
.me-pop .mp-name .uname { font-size: 20px; font-weight: 800; }
.me-pop .mp-user { font-size: 13px; color: var(--muted); }
.me-pop .mp-pad { padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 10px; }
.me-pop .mp-song { display: flex; align-items: center; gap: 8px; background: #1e1f22; border-radius: 22px; padding: 0 12px; height: 38px; cursor: text; }
.me-pop .mp-song:focus-within { box-shadow: 0 0 0 2px var(--brand); }
.me-pop .mp-plus { width: 22px; height: 22px; border-radius: 50%; background: #2b2d31; display: grid; place-items: center; flex: none; color: var(--muted); }
.me-pop .mp-plus svg, .me-pop .mp-list svg, .me-pop .mp-promo-btns svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.me-pop .mp-song input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 14px; }
.me-pop .mp-act .pc-box, .me-pop .mp-act > * { margin: 0; }
.me-pop .mp-promo { border-radius: 12px; padding: 12px; background: linear-gradient(#1b1c20, #1b1c20) padding-box, linear-gradient(120deg, #7c3aed, #db2777, #f59e0b) border-box; border: 1.5px solid transparent; }
.me-pop .mp-promo strong { display: block; margin-bottom: 8px; font-size: 14px; color: var(--text-strong); }
.me-pop .mp-promo-btns { display: flex; gap: 8px; }
.me-pop .mp-promo-btns button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 34px; border: 0; border-radius: 8px; background: #2b2d31; color: var(--text-strong); font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s; }
.me-pop .mp-promo-btns button:hover { background: #3a3d44; }
.me-pop .mp-promo-btns button.hidden { display: none; }
.me-pop .mp-list { padding: 4px 8px 8px; border-top: 1px solid #1e1f22; display: flex; flex-direction: column; gap: 1px; }
.me-pop .mp-list > button, .me-pop .mp-sublist button { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.me-pop .mp-list > button:hover, .me-pop .mp-sublist button:hover { background: #2b2d31; color: var(--text-strong); }
.me-pop .mp-list > button.hidden { display: none; }
.me-pop .mp-chev { margin-left: auto; color: var(--muted); font-size: 18px; transition: transform .15s; }
.me-pop #mpStatusRow[aria-expanded="true"] .mp-chev { transform: rotate(90deg); }
.me-pop .mp-sublist { display: flex; flex-direction: column; gap: 1px; margin: 0 0 4px 22px; padding-left: 8px; border-left: 2px solid #2b2d31; }
.me-pop .mp-sublist.hidden { display: none; }
.me-pop .sdot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.me-pop .mp-switch { margin-left: auto; width: 34px; height: 20px; border-radius: 10px; background: #4e5058; position: relative; flex: none; transition: background .15s; }
.me-pop .mp-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.me-pop .mp-switch.on { background: #23a55a; }
.me-pop .mp-switch.on::after { transform: translateX(14px); }
.me-pop .deco, .me-pop .deco::before, .me-pop .deco::after { animation-play-state: running; }
#avOverlayBox select { background: #1e1f22; border: 0; border-radius: 6px; padding: 9px 10px; color: var(--text); font: inherit; color-scheme: dark; }

/* ---------- banner que se ajusta sozinho ao tamanho do cartão ---------- */
.pc-banner { height: auto; aspect-ratio: 10 / 3; min-height: 84px; max-height: 170px; background-size: cover; background-position: center; }
.me-pop .pc-banner { height: auto; aspect-ratio: 10 / 3; min-height: 78px; max-height: 120px; }

/* ---------- mini janela da apresentação ---------- */
.mini-player { position: fixed; right: 16px; bottom: 76px; width: 340px; max-width: calc(100vw - 24px); aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; z-index: 80; box-shadow: 0 14px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1); cursor: grab; touch-action: none; resize: both; min-width: 200px; }
.mini-player:active { cursor: grabbing; }
.mini-player video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.mini-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: linear-gradient(rgba(0,0,0,.7), transparent); opacity: 0; transition: opacity .15s; }
.mini-player:hover .mini-bar, .mini-player:focus-within .mini-bar { opacity: 1; }
.mini-label { flex: 1; min-width: 0; color: #fff; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.mini-bar button, .viewer-pip { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: background .15s; }
.mini-bar button:hover, .viewer-pip:hover { background: rgba(255,255,255,.3); }
.mini-bar svg, .viewer-pip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini-bar svg .f, .viewer-pip svg .f { fill: currentColor; stroke: none; }
.viewer-pip { position: absolute; top: 14px; right: 62px; width: 36px; height: 36px; z-index: 3; }
@media (max-width: 760px) { .mini-player { width: 220px; bottom: 120px; right: 10px; } }