/* =====================================================================
   PERFIL: foto, molduras animadas, status, nomes do Turbo, tags e badges
   ===================================================================== */
.avatar { position: relative; }
.avatar .av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
[data-profile] { cursor: pointer; }

/* bolinha de status (online / ausente / não perturbe / offline) */
.status-dot::after {
  content: ''; position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%;
  border: 3px solid var(--bg-side); background: #80848e; z-index: 2;
}
.status-dot[data-status="online"]::after { background: var(--green); }
.status-dot[data-status="idle"]::after { background: #f0b232; }
.status-dot[data-status="dnd"]::after { background: #f23f43; }
.status-dot[data-status="invisible"]::after, .status-dot[data-status="offline"]::after { background: #80848e; }
.userbar .status-dot::after { border-color: var(--bg-dark); }
.sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: #80848e; }
.sdot[data-status="online"] { background: var(--green); }
.sdot[data-status="idle"] { background: #f0b232; }
.sdot[data-status="dnd"] { background: #f23f43; }

/* molduras animadas */
.deco { position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; z-index: 1; }
.deco::after { position: absolute; left: 50%; transform: translateX(-50%); font-size: .55em; line-height: 1; }
.deco-arco-iris, .deco-ouro, .deco-galaxia, .deco-sakura {
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%);
}
.deco-arco-iris { background: conic-gradient(#ff5f6d, #ffc371, #f9f871, #5ee7a0, #4facfe, #a77bf3, #ff5f6d); animation: deco-spin 3s linear infinite; }
.deco-fogo { box-shadow: 0 0 0 3px #ff7a18, 0 0 10px 4px #ff3d00aa; animation: deco-flicker .5s ease-in-out infinite alternate; }
.deco-fogo::after { content: '🔥'; top: -.55em; }
.deco-neon { box-shadow: 0 0 0 2px #0ff, 0 0 8px 2px #0ff, 0 0 16px 4px #f0f8; animation: deco-pulse 1.6s ease-in-out infinite; }
.deco-ouro { background: conic-gradient(#b8860b, #ffd700, #fff6c2, #ffd700, #b8860b, #ffd700, #b8860b); animation: deco-spin 4s linear infinite; }
.deco-galaxia { background: conic-gradient(#2b1055, #7597de, #c471f5, #fa71cd, #2b1055); animation: deco-spin 6s linear infinite; }
.deco-gelo { box-shadow: 0 0 0 3px #a5f3fc, 0 0 10px 3px #67e8f9aa; animation: deco-pulse 2.2s ease-in-out infinite; }
.deco-gelo::after { content: '❄️'; top: -.5em; animation: deco-float 2.4s ease-in-out infinite; }
.deco-coracoes { box-shadow: 0 0 0 3px #ff6b9d; }
.deco-coracoes::after { content: '💕'; top: -.55em; animation: deco-float 1.8s ease-in-out infinite; }
.deco-chifres { box-shadow: 0 0 0 3px #b91c1c, 0 0 8px 2px #ef444488; }
.deco-chifres::after { content: '😈'; top: -.6em; animation: deco-float 2s ease-in-out infinite; }
.deco-coroa { box-shadow: 0 0 0 3px #facc15; }
.deco-coroa::after { content: '👑'; top: -.7em; animation: deco-float 2.2s ease-in-out infinite; }
.deco-gatinho { box-shadow: 0 0 0 3px #fbbf24; }
.deco-gatinho::after { content: '🐱'; top: -.6em; animation: deco-float 1.6s ease-in-out infinite; }
.deco-sakura { background: conic-gradient(#ffb7c5, #ffe4ec, #ff8fab, #ffb7c5); animation: deco-spin 5s linear infinite reverse; }
.deco-raio { box-shadow: 0 0 0 3px #facc15, 0 0 12px 3px #fde047aa; animation: deco-flash 1.4s steps(2) infinite; }
.deco-raio::after { content: '⚡'; top: -.6em; }
/* emojis das molduras que giram ficam num elemento à parte para não girar junto */
.deco-wrap { position: absolute; inset: -4px; pointer-events: none; z-index: 1; }
.deco-wrap::after { position: absolute; left: 50%; transform: translateX(-50%); font-size: .55em; line-height: 1; }
.deco-wrap.e-galaxia::after { content: '✨'; top: -.5em; animation: deco-twinkle 1.2s ease-in-out infinite; }
.deco-wrap.e-sakura::after { content: '🌸'; top: -.5em; animation: deco-twinkle 2s ease-in-out infinite; }
@keyframes deco-spin { to { transform: rotate(360deg); } }
@keyframes deco-flicker { from { box-shadow: 0 0 0 3px #ff7a18, 0 0 8px 3px #ff3d0099; } to { box-shadow: 0 0 0 3px #ffb347, 0 0 16px 6px #ff3d00cc; } }
@keyframes deco-pulse { 50% { filter: brightness(1.5); transform: scale(1.04); } }
@keyframes deco-twinkle { 50% { opacity: .35; } }
@keyframes deco-float { 50% { transform: translateX(-50%) translateY(-3px); } }
@keyframes deco-flash { 50% { filter: brightness(1.6); } }
html[data-motion="off"] .deco, html[data-motion="off"] .deco::after, html[data-motion="off"] .deco-wrap::after, html[data-motion="off"] .ns { animation: none !important; }

/* nomes do Turbo */
.uname { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; vertical-align: bottom; }
.uname-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns { background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: ns-shift 3s linear infinite; font-weight: 700; }
.ns-aurora { background-image: linear-gradient(90deg, #5ee7a0, #4facfe, #a77bf3, #5ee7a0); }
.ns-fogo { background-image: linear-gradient(90deg, #ff3d00, #ffb347, #ffe259, #ff3d00); }
.ns-oceano { background-image: linear-gradient(90deg, #00c6ff, #0072ff, #7ef9ff, #00c6ff); }
.ns-ouro { background-image: linear-gradient(90deg, #b8860b, #ffd700, #fff6c2, #b8860b); }
.ns-neon { background-image: linear-gradient(90deg, #0ff, #f0f, #0ff); }
.ns-sakura { background-image: linear-gradient(90deg, #ff8fab, #ffe4ec, #ff5d8f, #ff8fab); }
@keyframes ns-shift { to { background-position: 200% center; } }

.turbo-badge { font-size: 12px; }
.bot-badge { background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; flex: none; }
.tag-chip {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--text-strong); font-size: 11px; font-weight: 700;
  padding: 0 6px; border-radius: 6px; line-height: 18px; flex: none; white-space: nowrap;
}
.tag-chip.big { font-size: 13px; line-height: 26px; padding: 0 8px; }

/* banners */
.bn-por-do-sol { background: linear-gradient(135deg, #ff5f6d, #ffc371) !important; }
.bn-oceano { background: linear-gradient(135deg, #00c6ff, #0072ff) !important; }
.bn-floresta { background: linear-gradient(135deg, #134e5e, #71b280) !important; }
.bn-galaxia { background: linear-gradient(135deg, #2b1055, #7597de, #c471f5) !important; }
.bn-neon { background: linear-gradient(135deg, #f0f, #0ff) !important; }
.bn-pessego { background: linear-gradient(135deg, #ffecd2, #fcb69f) !important; }

/* userbar: avatar + nome clicáveis (menu de status) */
.me-btn { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; background: none; border: 0; padding: 4px; border-radius: 4px; text-align: left; }
.me-btn:hover { background: var(--bg-active); }
.status-menu { bottom: 60px; left: 8px; margin: 0; top: auto; }
.status-menu button { display: flex; align-items: center; }

/* cartão de perfil */
.profile-card { position: fixed; z-index: 70; width: 300px; background: #111214; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.pc-banner { height: 90px; }
.pc-avatar { margin: -42px 0 0 16px; }
.pc-avatar .avatar { width: 84px; height: 84px; font-size: 32px; box-shadow: 0 0 0 6px #111214; }
.pc-avatar .avatar.status-dot::after { width: 18px; height: 18px; border-width: 4px; border-color: #111214; }
.pc-body { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.pc-name { font-size: 20px; font-weight: 800; color: var(--text-strong); }
.pc-name .uname { flex-wrap: wrap; }
.pc-user { color: var(--muted); font-size: 13px; margin-top: -6px; }
.pc-box { background: var(--bg-side); border-radius: 8px; padding: 10px; font-size: 13px; }
.pc-box h4 { margin: 0 0 4px; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.pc-box p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.pc-actions { display: flex; gap: 8px; }
.pc-actions .btn-primary { flex: 1; margin: 0; padding: 8px; font-size: 14px; }

/* editar perfil */
.modal-card.wide { width: min(820px, 100%); overflow-y: auto; }
.profile-edit { display: flex; gap: 24px; }
.profile-edit .grow { flex: 1; min-width: 0; }
.profile-edit textarea, .profile-edit select, .tag-edit select, .tag-edit input, .modal-card #pfCustomStatus {
  background: var(--bg-rail); border: 0; border-radius: 4px; padding: 10px 12px; outline: none; width: 100%; color: var(--text); font: inherit; resize: vertical;
}
.modal-card .pf-input { background: var(--bg-rail); border: 0; border-radius: 4px; padding: 10px 12px; outline: none; width: 100%; color: var(--text); font: inherit; }
.profile-edit input[type=color] { width: 100%; height: 36px; border: 0; background: none; padding: 0; cursor: pointer; }
.row { display: flex; gap: 8px; align-items: center; }
.row.two > * { flex: 1; }
.preview-col { width: 300px; flex: none; }
.preview-col .profile-card { position: static; box-shadow: none; }
.tag-edit { display: flex; gap: 8px; align-items: center; }
.tag-edit select { width: 80px; }
.tag-edit input { width: 100px; text-transform: uppercase; }
@media (max-width: 760px) { .profile-edit { flex-direction: column; } .preview-col { width: 100%; } }

/* loja */
.shop-card { width: min(900px, 100%); max-height: 92vh; overflow-y: auto; padding: 0; gap: 0; }
.shop-hero { display: flex; justify-content: space-between; align-items: flex-start; padding: 24px; background: linear-gradient(120deg, #5865f2, #eb459e 60%, #ff8a3d); color: #fff; }
.shop-hero h2 { color: #fff; font-size: 28px; margin: 8px 0 4px; }
.shop-hero p { margin: 0; opacity: .92; }
.shop-hero .icon-btn { color: #fff; }
.shop-pill { background: rgba(0,0,0,.25); padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.turbo-card {
  margin: 16px 24px 0; border-radius: 12px; padding: 18px; display: flex; gap: 16px; align-items: center;
  background: radial-gradient(circle at 0 0, #ff73fa55, transparent 50%), linear-gradient(135deg, #1e1b4b, #4c1d95); border: 1px solid #a78bfa66;
}
.turbo-card h3 { margin: 0 0 6px; font-size: 20px; color: #fff; }
.turbo-card ul { margin: 0; padding-left: 18px; font-size: 14px; color: #e9d5ff; }
.turbo-card .grow { flex: 1; }
.price { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.price s { color: var(--muted); font-size: 13px; }
.price .free { background: var(--green); color: #fff; font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 4px; }
.price .btn-primary { margin: 0; }
.shop-tabs { padding: 16px 24px 0; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; padding: 16px 24px 24px; }
.shop-item { background: var(--bg-side); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; border: 2px solid transparent; transition: transform .15s, border-color .15s; }
.shop-item:hover { transform: translateY(-2px); border-color: #4e5058; }
.shop-item.equipped { border-color: var(--green); }
.shop-item .show { height: 120px; display: grid; place-items: center; background: #1a1b1e; position: relative; }
.shop-item .show .avatar { width: 64px; height: 64px; font-size: 26px; }
.shop-item .show .ns { font-size: 22px; }
.shop-item .info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.shop-item .info strong { color: var(--text-strong); }
.shop-item .row { justify-content: space-between; }
.shop-item .btn-primary { margin: 0; padding: 6px 12px; font-size: 13px; }
.shop-item .badge-new { position: absolute; top: 8px; left: 8px; background: #eb459e; color: #fff; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; }
.rail-item.shop { font-size: 22px; background: var(--bg-main); position: relative; overflow: visible; }
.rail-item.shop:hover { background: #eb459e; border-radius: 16px; }
.free-dot { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 4px; letter-spacing: .02em; }

/* bots */
.bots-list { display: flex; flex-direction: column; gap: 10px; }
.bot-row { display: flex; gap: 12px; align-items: center; background: var(--bg-side); border-radius: 8px; padding: 12px; }
.bot-row .grow { flex: 1; min-width: 0; }
.bot-row .grow strong { color: var(--text-strong); display: block; }
.bot-row select { background: var(--bg-rail); border: 0; border-radius: 4px; padding: 6px; color: var(--text); margin-top: 6px; }
.bot-row .btn-primary { margin: 0; padding: 8px 12px; font-size: 13px; }
.bot-row .btn-primary.danger { background: var(--red); }
.modal-card code, .msg-text code { background: var(--bg-rail); padding: 1px 5px; border-radius: 4px; font-size: .9em; }

/* lista ao lado da tela compartilhada (como no Discord) */
.voice-main { flex: 1; display: flex; min-height: 0; }
.voice-main .stage { flex: 1; }
.voice-people {
  width: 240px; flex: none; padding: 16px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, #0d4f5c, #0b3a52 60%, #102a43);
}
.vp-pill { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 99px; background: rgba(0,0,0,.28); color: #e8f1f4; min-width: 0; }
.vp-pill .avatar { width: 40px; height: 40px; font-size: 16px; flex: none; }
.vp-pill .avatar.speaking { box-shadow: 0 0 0 3px var(--green); }
.vp-pill .uname { flex: 1; min-width: 0; }
.vp-pill .uname-text { font-weight: 600; }
.vp-pill .icons { display: flex; gap: 2px; flex: none; }
.vp-pill .icons svg { width: 14px; height: 14px; color: #f23f43; }
.vp-pill .live-mini { background: var(--red); color: #fff; font-size: 9px; font-weight: 800; padding: 1px 4px; border-radius: 3px; flex: none; }
.stage.has-screen .tile:not(.screen) { display: none; }
@media (max-width: 900px) { .voice-people { width: 180px; } }

/* na chamada, como no Discord: sem lista de membros */
.app.in-voice { grid-template-columns: 72px 240px 1fr 0; }
.app.in-voice .members { display: none; }
@media (max-width: 900px) { .app.in-voice { grid-template-columns: 0 200px 1fr 0; } }

/* =====================================================================
   CELULAR: servidores e canais num menu que desliza da esquerda
   ===================================================================== */
.menu-btn { display: none; font-size: 20px; }
.drawer-backdrop { display: none; }
@media (max-width: 760px) {
  .app, .app.no-members, .app.in-voice { display: block; position: relative; height: 100%; height: 100dvh; }
  .menu-btn { display: grid; margin-left: -8px; }
  .main { height: 100%; height: 100dvh; }
  .members { display: none !important; }
  #btnMembers { display: none; }
  .rail, .sidebar {
    display: flex !important; position: fixed; top: 0; bottom: 0; z-index: 60; transition: transform .25s ease;
  }
  .rail { left: 0; width: 72px; transform: translateX(-100%); }
  .sidebar { left: 72px; width: min(300px, calc(100vw - 112px)); max-height: none; transform: translateX(calc(-100% - 72px)); }
  .app.drawer-open .rail, .app.drawer-open .sidebar { transform: none; }
  .drawer-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.55); }
  .app.drawer-open .drawer-backdrop { display: block; }
  .topbar { padding: 0 10px; gap: 6px; }
  #topDesc, #topSep { display: none; }
  .composer { margin: 0 8px 8px; }
  .composer input, .modal-card input, .modal-card textarea, .login-card input, .add-row input { font-size: 16px; } /* sem zoom do iPhone */
  .msg { padding: 2px 10px; gap: 10px; }
  .msg .avatar { width: 34px; height: 34px; }
  .msg-actions { right: 8px; }
  .msg:hover .msg-actions { display: none; }
  .msg.show-actions .msg-actions { display: flex; }
  .friend-tabs { gap: 4px; padding: 8px; }
  .friend-tabs button { padding: 4px 8px; font-size: 13px; }
  .add-row { flex-direction: column; }
  .stage { padding: 8px; grid-template-columns: 1fr; }
  .voice-main { flex-direction: column; }
  .voice-people { width: auto; flex-direction: row; overflow-x: auto; padding: 8px; }
  .vp-pill { flex: none; }
  .voice-controls { gap: 8px; padding: 10px 8px; flex-wrap: wrap; }
  .round { width: 46px; height: 46px; }
  .quality-select { height: 46px; max-width: 150px; font-size: 12px; }
  .music-bar { flex-wrap: wrap; }
  .music-player { width: 120px; height: 68px; }
  .music-vol { width: 100%; }
  .modal { padding: 8px; }
  .modal-card { padding: 16px; max-height: 94dvh; overflow-y: auto; }
  .profile-card { width: calc(100vw - 16px); left: 8px !important; }
  .update-bar { flex-wrap: wrap; font-size: 13px; }
  .login { padding: 12px; }
  .login-card { padding: 22px; }
}

/* voz e vídeo */
.av-card { width: min(780px, 100%); max-height: 92vh; overflow-y: auto; }
.av-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.av-select { background: var(--bg-rail); border: 0; border-radius: 4px; padding: 10px 12px; color: var(--text); font: inherit; width: 100%; }
.mic-meter { height: 10px; border-radius: 5px; background: var(--bg-rail); overflow: hidden; }
.mic-meter div { height: 100%; width: 0; background: linear-gradient(90deg, var(--green), #f0b232 70%, #f23f43); transition: width .08s; }
.cam-preview { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.cam-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cam-preview span { position: absolute; color: var(--muted); font-size: 13px; text-align: center; padding: 12px; }
.av-card .btn-primary { margin: 0; }
@media (max-width: 640px) { .av-grid { grid-template-columns: 1fr; } }
/* supressão de ruído ligada: botão verde, como o Krisp do Discord */
.vp-btn.noise-toggle.on { background: #23a55a33; color: #3ba55c; }
.round.noise-toggle.on { background: #23a55a; color: #fff; }

/* menos CPU/GPU: molduras e nomes animados só se mexem ao passar o mouse
   (e sempre no cartão de perfil, na Loja, na prévia do perfil e na sua própria barra) */
.deco, .deco::after, .deco-wrap::after, .ns { animation-play-state: paused; }
:hover > .deco, :hover > .deco-wrap::after, .member:hover .deco, .member:hover .ns, .msg:hover .deco, .msg:hover .ns,
.vp-pill:hover .deco, .vp-pill:hover .ns, .friend-row:hover .deco, .friend-row:hover .ns, .chan:hover .deco, .chan:hover .ns,
.profile-card .deco, .profile-card .deco::after, .profile-card .deco-wrap::after, .profile-card .ns,
.shop-item .deco, .shop-item .deco::after, .shop-item .deco-wrap::after, .shop-item .ns,
.member:hover .deco::after, .msg:hover .deco::after, .me-btn .deco, .me-btn .deco::after { animation-play-state: running; }
.deco { will-change: transform; }

/* aviso de atualização */
.update-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 6px 12px; background: linear-gradient(90deg, #5865f2, #eb459e); color: #fff; font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.update-bar .muted { color: #ffffffcc; }
.update-bar .btn-primary { margin: 0; padding: 5px 14px; background: #fff; color: #4752c4; font-size: 13px; }
.update-bar .btn-primary:disabled { opacity: .8; }
.update-bar .icon-btn { color: #fff; width: 26px; height: 26px; }
body.has-update .app, body.has-update .login { padding-top: 40px; }
body.has-update .app { height: 100%; }

/* cargos */
.roles-card { width: min(760px, 100%); max-height: 90vh; overflow-y: auto; }
.roles-layout { display: flex; gap: 16px; }
.roles-list { width: 220px; flex: none; display: flex; flex-direction: column; gap: 4px; }
.role-item { display: flex; align-items: center; gap: 8px; background: none; border: 0; border-radius: 4px; padding: 8px 10px; text-align: left; color: var(--text); }
.role-item:hover { background: var(--bg-hover); }
.role-item.active { background: var(--bg-active); color: var(--text-strong); }
.role-item.new { color: #00a8fc; }
.role-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.role-form { flex: 1; }
.role-form input[type=text], .role-form #roleName { background: var(--bg-rail); border: 0; border-radius: 4px; padding: 10px 12px; outline: none; color: var(--text); font: inherit; }
.role-form input[type=color] { width: 100%; height: 36px; border: 0; background: none; padding: 0; cursor: pointer; }
.role-perms { display: flex; flex-direction: column; gap: 6px; }
.role-perm { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-side); border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.role-perm strong { color: var(--text-strong); font-size: 14px; display: block; }
.role-perm small { color: var(--muted); }
.role-perm input { margin-top: 3px; }
.pc-roles { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.role-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-side); border-radius: 4px; padding: 2px 6px; font-size: 12px; color: var(--text); }
.role-chip button { background: none; border: 0; color: var(--muted); padding: 0 0 0 2px; font-size: 12px; }
.role-chip button:hover { color: #f23f43; }
.pc-roles select { background: var(--bg-side); border: 0; border-radius: 4px; color: var(--text); font-size: 12px; padding: 2px 4px; }
.btn-primary.danger { background: var(--red); }
@media (max-width: 640px) { .roles-layout { flex-direction: column; } .roles-list { width: 100%; } }

.danger-text { color: #f23f43 !important; }
.modal-actions .spacer { flex: 1; }

/* qualidade da transmissão */
.quality-select { background: #2b2d31; color: #fff; border: 0; border-radius: 26px; padding: 0 14px; height: 52px; font: inherit; font-size: 13px; cursor: pointer; max-width: 230px; }
.check .quality-select { height: auto; padding: 6px 10px; border-radius: 6px; background: var(--bg-rail); }

/* DJ VibeCall */
.music-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: linear-gradient(90deg, #2b1055, #5b21b6); }
.music-player { width: 160px; height: 90px; border-radius: 6px; overflow: hidden; background: #000; flex: none; }
.music-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.music-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.music-info strong { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #e9d5ff; }
.music-vol { display: flex; align-items: center; gap: 6px; color: #fff; }

/* mensagens: ações, reações e resposta */
.msg { position: relative; }
.msg-actions { position: absolute; right: 16px; top: -14px; display: none; background: var(--bg-main); border: 1px solid var(--bg-rail); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.3); z-index: 3; }
.msg:hover .msg-actions { display: flex; }
.msg-actions button { background: none; border: 0; padding: 4px 8px; font-size: 15px; color: var(--muted); }
.msg-actions button:hover { background: var(--bg-hover); color: var(--text); }
.reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.reaction { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-side); border: 1px solid transparent; border-radius: 8px; padding: 1px 8px; font-size: 14px; color: var(--text); }
.reaction.mine { background: #5865f233; border-color: var(--brand); }
.reaction:hover { border-color: #4e5058; }
.react-picker { position: fixed; z-index: 80; display: flex; gap: 2px; background: #111214; border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.react-picker button { background: none; border: 0; font-size: 20px; padding: 4px 6px; border-radius: 6px; }
.react-picker button:hover { background: var(--bg-active); }
.msg-reply { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 2px; overflow: hidden; white-space: nowrap; cursor: pointer; }
.msg-reply::before { content: '↱'; }
.msg-reply strong { color: var(--text); }
.msg.flash { background: #5865f222; transition: background .6s; }
.msg-edited { font-size: 11px; color: var(--muted); margin-left: 4px; }
.msg-edit-input { width: 100%; background: var(--bg-input); border: 0; border-radius: 6px; padding: 8px 10px; color: var(--text); font: inherit; outline: none; }
.reply-bar { display: flex; justify-content: space-between; align-items: center; margin: 0 16px; padding: 4px 4px 4px 12px; background: var(--bg-side); border-radius: 8px 8px 0 0; font-size: 13px; color: var(--muted); }
.reply-bar strong { color: var(--text); }
.msg.bot-msg .msg-body { border-left: 3px solid var(--brand); padding-left: 10px; }

/* Google */
.google-box { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.google-box .or { width: 100%; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #fff; color: #1f1f1f; border: 0; border-radius: 4px; padding: 10px; font-weight: 600; }
.btn-google:hover { background: #f1f1f1; }
.g-logo { font-weight: 800; color: #4285f4; }

/* caixa de confirmação do app */
#dialog { z-index: 95; }
.dialog-card { width: min(420px, 100%); gap: 12px; }
.dialog-card h2 { margin: 0; font-size: 20px; color: var(--text-strong); }
.dialog-card p { margin: 0; color: var(--muted); line-height: 1.5; white-space: pre-wrap; }
.dialog-card input { background: var(--bg-rail); border: 0; border-radius: 6px; padding: 11px 12px; color: var(--text); font: inherit; outline: none; width: 100%; }
.dialog-card .modal-actions { margin-top: 6px; }
.dialog-card .btn-primary.danger { background: var(--red); }
.dialog-card .btn-primary.danger:hover { background: #a12828; }

/* barra da música em todo o app */
.main > .music-bar { flex: none; margin: 10px 12px 0; border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 28px rgba(60,20,120,.45); position: relative; z-index: 2; }
.music-vol input[type=range] { accent-color: #c084fc; width: 130px; cursor: pointer; }

/* barra da janela (app do PC) */
.titlebar { position: fixed; top: 0; left: 0; right: 0; height: 32px; z-index: 200; display: flex; align-items: center; justify-content: space-between; background: #1e1f22; color: #dbdee1; -webkit-app-region: drag; user-select: none; font-size: 12px; }
.titlebar.hidden { display: none !important; }
.tb-title { display: flex; align-items: center; gap: 8px; padding-left: 10px; font-weight: 600; }
.tb-title img { width: 16px; height: 16px; }
.tb-ctrls { display: flex; height: 100%; -webkit-app-region: no-drag; }
.tb-ctrls button { width: 46px; height: 100%; background: none; border: 0; color: #dbdee1; display: grid; place-items: center; }
.tb-ctrls button svg { width: 10px; height: 10px; }
.tb-ctrls button:hover { background: #2e3035; }
.tb-ctrls button.close:hover { background: #e81123; color: #fff; }
body.native .login, body.native .app { margin-top: 32px; height: calc(100% - 32px); }
body.native .update-bar { top: 32px; }
body.native .modal { padding-top: 32px; }

/* ícone de volume da música */
.music-vol { gap: 10px; }
.vol-ic { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* bolinhas, menções e silenciar */
.ubadge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #f23f43; color: #fff; font-size: 11px; font-weight: 800; margin-left: auto; flex: none; box-shadow: 0 0 0 2px #2b2d31; }
.ubadge.rail { position: absolute; right: -4px; bottom: -4px; margin: 0; box-shadow: 0 0 0 3px #1e1f22; z-index: 3; }
.ubadge.mention { background: #f23f43; }
.rail-item { position: relative; }
.mention { background: #5865f233; color: #c9cdfb; border-radius: 4px; padding: 0 3px; font-weight: 600; }
.mention.all { background: #f0b23238; color: #fde68a; }
.text-view { position: relative; }
.mention-pop { position: absolute; left: 16px; right: 16px; bottom: 64px; background: #111214; border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 20; display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow: auto; }
.mention-pop.hidden { display: none; }
.mention-item { background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: 6px; color: var(--text); font-size: 14px; }
.mention-item.sel { background: var(--brand); color: #fff; }
.mention-item.all { color: #fbbf24; font-weight: 700; }
.mention-item.all.sel { color: #fff; }

/* lista de membros: nomes longos ficam com reticências em vez de cortar */
.member { min-width: 0; }
.member-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.member-info > .uname, .member-info > span { min-width: 0; max-width: 100%; }
.member .uname-text { max-width: 100%; }
.member .tag-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* painel de voz: mais limpo */
.voice-panel { background: linear-gradient(180deg, #202125, #1a1b1e); border-bottom: 1px solid #111214; padding: 10px 10px 12px; }
.vp-row { gap: 8px; align-items: center; }
.vp-row > div { min-width: 0; flex: 1; }
.vp-status { display: flex; align-items: center; gap: 7px; color: #3ba55c; font-weight: 700; font-size: 12px; letter-spacing: .02em; }
.vp-dot { width: 8px; height: 8px; border-radius: 50%; background: #23a55a; animation: vp-pulse 1.8s infinite; }
@keyframes vp-pulse { 0% { box-shadow: 0 0 0 0 rgba(35,165,90,.6); } 70% { box-shadow: 0 0 0 7px rgba(35,165,90,0); } 100% { box-shadow: 0 0 0 0 rgba(35,165,90,0); } }
.vp-channel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #b5bac1; font-size: 12px; margin-top: 2px; }
#voicePanel .icon-btn.danger { width: 34px; height: 34px; border-radius: 50%; background: #2b2d31; color: #dbdee1; }
#voicePanel .icon-btn.danger:hover { background: #da373c; color: #fff; }
.vp-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.vp-btn { height: 34px; border-radius: 8px; background: #2b2d31; color: #dbdee1; border: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 0 6px; white-space: nowrap; transition: background .15s, color .15s; }
.vp-btn svg { width: 16px; height: 16px; flex: none; }
.vp-btn:hover { background: #383a40; color: #fff; }
.vp-btn.on, .vp-btn.noise-toggle.on { background: #23a55a; color: #fff; }

/* ⋯ e menu da transmissão */
.tile { position: relative; }
.tile-more { position: absolute; top: 8px; right: 8px; z-index: 4; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 18px; line-height: 1; opacity: 0; transition: opacity .15s; }
.tile.screen:hover .tile-more { opacity: 1; }
.tile-more:hover { background: rgba(0,0,0,.85); }
.stream-menu { position: fixed; z-index: 90; width: 230px; background: #111214; border-radius: 10px; padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 4px; }
.stream-menu.hidden { display: none; }
.stream-menu .sm-head { font-size: 12px; font-weight: 700; color: #949ba4; padding: 4px 6px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stream-menu .sm-volume { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.stream-menu .sm-label { font-size: 13px; color: #dbdee1; }
.stream-menu input[type=range] { width: 100%; accent-color: #5865f2; cursor: pointer; }
.stream-menu button { background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: 6px; color: #dbdee1; font-size: 13px; }
.stream-menu button:hover:not(:disabled) { background: #5865f2; color: #fff; }
.stream-menu button:disabled { opacity: .4; cursor: default; }

/* controles da música: pausar e abafar */
.music-btn { height: 30px; min-width: 30px; padding: 0 10px; border-radius: 15px; border: 0; background: rgba(255,255,255,.14); color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; transition: background .15s; }
.music-btn:hover { background: rgba(255,255,255,.26); }
.music-btn.on { background: #fff; color: #5b21b6; }

/* efeitos sonoros da chamada */
.sb-panel { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100vw - 24px)); z-index: 60; background: #111214; border-radius: 12px; padding: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.sb-panel.hidden { display: none; }
.sb-head { display: flex; align-items: center; justify-content: space-between; color: #f2f3f5; margin-bottom: 8px; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; }
.sb-item { position: relative; background: #2b2d31; border: 0; border-radius: 10px; padding: 14px 8px; color: #f2f3f5; font-weight: 600; font-size: 13px; cursor: pointer; transition: background .15s, transform .1s; }
.sb-item:hover { background: #5865f2; }
.sb-item:active { transform: scale(.96); }
.sb-del { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; }
.sb-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.sb-foot .btn-primary { margin: 0; padding: 8px 12px; font-size: 13px; }

/* castigo e adicionar amigos */
.timeout-bar { margin: 8px 16px 0; padding: 10px 14px; border-radius: 10px; background: rgba(218,55,60,.18); border: 1px solid rgba(218,55,60,.5); color: #fecaca; font-size: 13px; font-weight: 600; }
.timeout-bar.hidden { display: none; }
.af-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.af-item { background: var(--bg-side); border-radius: 8px; padding: 8px 10px; }