/* ===================================================================
   RESENHA — visual fiel ao Discord (cinzas neutros + verde #23a559)
   Fonte: Inter (local). Ícones: SVG traço.
   =================================================================== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }

:root {
  --rail:      #1e1f22;   /* barra de servidores */
  --sidebar:   #2b2d31;   /* canais / membros */
  --chat:      #313338;   /* área de mensagens */
  --floating:  #111214;   /* modais / popovers */
  --input:     #383a40;   /* campos e composer */
  --input-2:   #404249;
  --hover:     #35373c;
  --active:    #404249;
  --selected:  rgba(78,80,88,0.6);

  --accent:      #23a559;  /* verde do Discord (online + marca) */
  --accent-hover:#1a8546;
  --accent-press:#17713b;
  --danger:      #da373c;
  --danger-hover:#a12828;
  --yellow:      #f0b232;
  --link:        #00a8fc;

  --txt:       #f2f3f5;   /* títulos */
  --txt-1:     #dbdee1;   /* corpo */
  --txt-2:     #b5bac1;   /* secundário */
  --txt-3:     #949ba4;   /* muted */
  --txt-4:     #80848e;   /* canais inativos */
  --line:      #26282c;
  --radius: 8px;
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--app-font, var(--font));
  background: var(--chat);
  color: var(--txt-1);
  overflow: hidden;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#app { height: 100vh; width: 100vw; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }
.icon { display: block; flex-shrink: 0; }
::selection { background: rgba(35,165,89,0.3); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #1a1b1e; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
.thin::-webkit-scrollbar { width: 0; }

.muted { color: var(--txt-3); font-size: 14px; }
.screen-center { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--txt-3); }
.spin { width: 34px; height: 34px; border: 3px solid var(--input); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 4px; font-weight: 500; font-size: 14px; background: var(--input-2); color: var(--txt); transition: background 0.15s; white-space: nowrap; }
.btn:hover { background: #4e5058; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--hover); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.link { color: var(--link); cursor: pointer; }
.link:hover { text-decoration: underline; }

/* ===================================================================
   AUTENTICAÇÃO
   =================================================================== */
.auth-wrap { height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%, #232529 0%, #16171a 100%); padding: 20px; }
.auth-card { width: 100%; max-width: 480px; background: var(--sidebar); border-radius: 6px; padding: 32px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 6px; }
.auth-brand .mark { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), #0d7a3f); display: flex; align-items: center; justify-content: center; color: #fff; }
.auth-brand h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }
.auth-sub { color: var(--txt-2); text-align: center; margin-bottom: 24px; font-size: 15px; }
.field { margin-bottom: 18px; }
.field > label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--txt-2); margin-bottom: 8px; font-weight: 600; }
.field input, .field textarea, .inp { width: 100%; padding: 11px 12px; border-radius: 4px; background: #1e1f22; border: 1px solid #111214; color: var(--txt); font-size: 15px; transition: border-color 0.15s; }
.field input:focus, .field textarea:focus, .inp:focus { outline: none; border-color: var(--accent); }
select.inp { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23949ba4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
select.inp option { background: #1e1f22; color: var(--txt); }
.auth-switch { margin-top: 8px; font-size: 14px; color: var(--txt-3); }
.auth-switch .link { font-weight: 500; }
.auth-error { background: rgba(218,55,60,0.1); border: 1px solid rgba(218,55,60,0.3); color: #f5a3a3; padding: 10px 12px; border-radius: 4px; font-size: 14px; margin-bottom: 16px; }

/* ===================================================================
   LAYOUT
   =================================================================== */
.layout { display: grid; grid-template-columns: 72px 240px 1fr; height: 100vh; }
.layout.has-members { grid-template-columns: 72px 240px 1fr 240px; }

/* ---------- Rail servidores ---------- */
.rail { background: var(--rail); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 8px; overflow-y: auto; }
.rail::-webkit-scrollbar { width: 0; }
.server-pill { position: relative; width: 48px; height: 48px; border-radius: 24px; background: var(--sidebar); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; transition: border-radius 0.15s, background 0.15s; color: var(--txt-1); cursor: pointer; flex-shrink: 0; user-select: none; }
.server-pill:hover { border-radius: 16px; background: var(--accent); color: #fff; }
.server-pill.active { border-radius: 16px; background: var(--accent); color: #fff; }
.server-pill.home.active { background: var(--accent); }
.pill-indicator { position: absolute; left: -16px; width: 4px; background: #fff; border-radius: 0 4px 4px 0; transition: height 0.15s; height: 0; }
.server-pill:hover .pill-indicator { height: 20px; }
.server-pill.active .pill-indicator { height: 40px; }
.server-pill .badge { position: absolute; bottom: -2px; right: -2px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--rail); padding: 0 4px; }
.rail-sep { width: 32px; height: 2px; background: #35363c; border-radius: 2px; flex-shrink: 0; }
.server-add { width: 48px; height: 48px; border-radius: 24px; background: var(--sidebar); color: var(--accent); display: flex; align-items: center; justify-content: center; transition: border-radius 0.15s, background 0.15s; flex-shrink: 0; }
.server-add:hover { border-radius: 16px; background: var(--accent); color: #fff; }

/* ---------- Sidebar canais ---------- */
.channels { background: var(--sidebar); display: flex; flex-direction: column; min-width: 0; }
.ch-header { height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 0 rgba(0,0,0,0.2); flex-shrink: 0; cursor: pointer; transition: background 0.1s; }
.ch-header:hover { background: var(--hover); }
.ch-header h2 { font-size: 15px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-header .icon { color: var(--txt-2); }
.ch-list { flex: 1; overflow-y: auto; padding: 8px; }
.ch-list::-webkit-scrollbar { width: 8px; }
.ch-cat { display: flex; align-items: center; gap: 4px; padding: 16px 8px 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--txt-4); cursor: default; }
.ch-cat .chev { transition: transform 0.1s; }
.ch-cat .spacer { flex: 1; }
.ch-cat button { color: var(--txt-4); display: flex; opacity: 0; }
.ch-cat:hover button { opacity: 1; }
.ch-cat button:hover { color: var(--txt-1); }
.ch-cat.cat-click { cursor: pointer; }
.ch-cat.cat-click:hover { color: var(--txt-2); }
.ch-cat .cat-rot { transform: rotate(-90deg); transition: transform 0.12s; }
.ch-item { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 4px; color: var(--txt-4); font-size: 15px; font-weight: 500; cursor: pointer; margin-bottom: 1px; transition: background 0.1s, color 0.1s; }
.ch-item:hover { background: var(--hover); color: var(--txt-2); }
.ch-item.active { background: var(--selected); color: var(--txt); }
.ch-item .icon { color: var(--txt-4); }
.ch-item.active .icon { color: var(--txt-2); }
.ch-item .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-item .ch-del { opacity: 0; color: var(--txt-4); display: flex; }
.ch-item:hover .ch-del { opacity: 1; }
.ch-item .ch-del:hover { color: var(--txt); }
.voice-users { margin: 2px 0 6px 22px; display: flex; flex-direction: column; gap: 2px; }
.voice-user { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 14px; color: var(--txt-3); border-radius: 4px; font-weight: 500; }
.voice-user:hover { background: var(--hover); }
.voice-user .mini-av { width: 24px; height: 24px; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; box-shadow: 0 0 0 0 var(--accent); transition: box-shadow 0.1s; }
.voice-user.speaking .mini-av { box-shadow: 0 0 0 2px var(--accent); }
.voice-user.speaking span { color: var(--accent); }
.voice-user .vu-icons { margin-left: auto; display: flex; gap: 6px; color: var(--txt-4); }
.voice-user .vu-icons .icon { width: 15px; height: 15px; }

/* ---------- Painel usuário ---------- */
.user-panel { height: 52px; background: #232428; display: flex; align-items: center; gap: 6px; padding: 0 8px; flex-shrink: 0; }
.user-panel .me { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 4px; border-radius: 4px; cursor: pointer; }
.user-panel .me:hover { background: var(--hover); }
.user-panel .info { min-width: 0; }
.user-panel .info .n { font-size: 14px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-panel .info .s { font-size: 12px; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-panel .info .spotify-line { display: flex; align-items: center; gap: 4px; color: #1DB954; font-weight: 600; }
.user-panel .info .spotify-line .sl-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-panel .info .spotify-line .sp-logo { display: inline-flex; line-height: 0; flex-shrink: 0; }
.user-panel .actions { display: flex; }
.user-panel .actions button { width: 32px; height: 32px; border-radius: 4px; color: var(--txt-2); display: flex; align-items: center; justify-content: center; }
.user-panel .actions button:hover { background: var(--hover); color: var(--txt); }
.user-panel .actions button.live { color: var(--accent); }

/* ---------- Avatares ---------- */
.avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; flex-shrink: 0; position: relative; user-select: none; overflow: visible; }
.avatar.xs { width: 24px; height: 24px; font-size: 10px; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.md { width: 40px; height: 40px; font-size: 15px; }
.avatar.lg { width: 80px; height: 80px; font-size: 30px; }
.avatar .dot { position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--sidebar); background: #80848e; }
/* efeito neon (glow) no avatar e no card de perfil */
.avatar.neon { box-shadow: 0 0 8px var(--glow, #23a559), 0 0 16px var(--glow, #23a559); animation: neonpulse 1.8s ease-in-out infinite; }
@keyframes neonpulse { 50% { box-shadow: 0 0 14px var(--glow, #23a559), 0 0 28px var(--glow, #23a559); } }
.avatar.neon-rainbow { animation: neonrainbow 3s linear infinite; }
/* efeitos novos de anel no avatar */
.avatar.fx-ring { box-shadow: 0 0 0 3px var(--glow, #23a559), 0 0 0 5px rgba(0,0,0,.25); }
.avatar.fx-pulse::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--glow, #23a559); animation: fxpulse 1.8s ease-out infinite; pointer-events: none; }
@keyframes fxpulse { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.3); opacity: 0; } }
.avatar.fx-ring, .avatar.fx-pulse { --dummy: 0; }
@keyframes neonrainbow { 0% { box-shadow: 0 0 12px #ff2d55, 0 0 22px #ff2d55; } 25% { box-shadow: 0 0 12px #ffcc00, 0 0 22px #ffcc00; } 50% { box-shadow: 0 0 12px #23a559, 0 0 22px #23a559; } 75% { box-shadow: 0 0 12px #00a8fc, 0 0 22px #00a8fc; } 100% { box-shadow: 0 0 12px #eb459e, 0 0 22px #eb459e; } }
.profile-card.pc-neon { box-shadow: 0 0 0 1px var(--glow, #23a559), 0 0 20px -2px var(--glow, #23a559); }
/* tema de 2 cores (degradê) — texto se ajusta pra ficar legível */
.profile-card.pc-themed .pc-dname,
.profile-card.pc-themed .pc-status,
.profile-card.pc-themed .pc-text { color: var(--pc-txt, #fff); }
.profile-card.pc-themed .pc-username,
.profile-card.pc-themed .pc-section,
.profile-card.pc-themed .pc-pronouns { color: var(--pc-txt-dim, rgba(255,255,255,.7)); }
.profile-card.pc-themed .pc-inner { background: rgba(127,127,127,.18); }
.profile-card.pc-neon.neon-rainbow { animation: neonrainbow 3s linear infinite; }
.avatar .dot.on { background: var(--accent); }
.user-panel .avatar .dot { border-color: #232428; }
/* ondas/pulso quando a pessoa tá ouvindo Spotify */
.avatar.sp-wave::after, .avatar.sp-wave::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #1DB954; pointer-events: none; animation: spwave 1.6s ease-out infinite; }
.avatar.sp-wave::before { animation-delay: .8s; }
@keyframes spwave { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.4); opacity: 0; } }
/* cropper de imagem (avatar/banner) */
.cropper-view { position: relative; overflow: hidden; border-radius: 8px; background: #1e1f22; cursor: grab; touch-action: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.cropper-view.round { border-radius: 50%; }
.cropper-view:active { cursor: grabbing; }
.cropper-img { position: absolute; inset: 0; }
/* seletor de cor inline (estilo Discord) */
.cp2 { display: flex; flex-direction: column; gap: 10px; }
.cp2-sv { position: relative; width: 100%; height: 84px; border-radius: 8px; cursor: crosshair; touch-action: none; }
.cp2-sv-cursor { position: absolute; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(0,0,0,.5); pointer-events: none; }
.cp2-hue { position: relative; height: 14px; border-radius: 7px; cursor: pointer; touch-action: none; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp2-hue-cursor { position: absolute; top: 50%; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(0,0,0,.5); pointer-events: none; }
.cp2-bottom { display: flex; gap: 8px; align-items: center; }
.cp2-hex { width: 96px; flex-shrink: 0; font-family: monospace; text-transform: uppercase; }
.cp2-presets { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.cp2-presets .swatch { width: 22px; height: 22px; }

/* ===================================================================
   CHAT
   =================================================================== */
.main { background: var(--chat); display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.main-header { height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 8px; box-shadow: 0 1px 0 rgba(0,0,0,0.2); flex-shrink: 0; z-index: 2; }
.main-header .icon.ch { color: var(--txt-4); }
.main-header h3 { font-size: 16px; font-weight: 700; color: var(--txt); }
.main-header .topic { color: var(--txt-3); font-size: 14px; border-left: 1px solid #3f4147; padding-left: 12px; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-header .spacer { flex: 1; }
.header-btn { width: 34px; height: 34px; border-radius: 4px; color: var(--txt-2); display: flex; align-items: center; justify-content: center; }
.header-btn:hover { background: var(--hover); color: var(--txt); }
.header-btn.active { color: var(--txt); }

.messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-bottom: 8px; }
.messages::-webkit-scrollbar { width: 14px; }
.messages::-webkit-scrollbar-thumb { border: 3px solid var(--chat); }

.msg { display: flex; gap: 16px; padding: 2px 16px 2px 16px; position: relative; margin-top: 0; }
.msg.fresh { margin-top: 16px; }
.msg:hover { background: rgba(2,2,2,0.06); }
.msg .col-av { width: 40px; flex-shrink: 0; padding-top: 2px; }
.msg.grouped .col-av { display: flex; align-items: center; justify-content: flex-end; height: 22px; }
.msg.grouped .ts-hover { display: none; font-size: 10px; color: var(--txt-4); font-weight: 500; padding-right: 2px; }
.msg.grouped:hover .ts-hover { display: block; }
.msg .body { flex: 1; min-width: 0; }
.msg .meta { display: flex; align-items: baseline; gap: 8px; }
.msg .meta .author { font-weight: 600; font-size: 15px; color: var(--txt); cursor: pointer; }
.msg .meta .author { cursor: pointer; }
.msg .meta .author:hover { text-decoration: underline; }

/* perfil mini (popout) */
.user-popout { position: fixed; z-index: 350; width: 320px; max-height: calc(100vh - 20px); overflow-y: auto; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); animation: pop 0.12s ease; }
.user-popout .profile-card { background: var(--floating); }
.user-popout .pc-avatar, .user-popout .pc-avatar .dot { box-shadow: 0 0 0 6px var(--floating); }
.popout-foot { margin-top: 12px; }
.popout-foot .inp { background: #1e1f22; }
.msg .meta .ts { font-size: 12px; color: var(--txt-4); font-weight: 500; }
.msg .text { font-size: 15px; line-height: 1.375; color: var(--txt-1); word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg .text .edited { font-size: 10px; color: var(--txt-4); margin-left: 4px; }
.msg .actions { position: absolute; top: -16px; right: 16px; background: var(--sidebar); border: 1px solid rgba(0,0,0,0.2); border-radius: 6px; display: none; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.msg:hover .actions { display: flex; }
.msg .actions button { padding: 6px; color: var(--txt-2); display: flex; }
.msg .actions button:hover { color: var(--txt); background: var(--hover); }
.msg .actions button.del:hover { color: var(--danger); }
.msg .edit-area { width: 100%; background: var(--input); border: none; border-radius: 8px; padding: 10px 12px; color: var(--txt-1); font-size: 15px; resize: none; line-height: 1.375; }
.msg .edit-area:focus { outline: none; }
.msg .edit-hint { font-size: 12px; color: var(--txt-3); margin-top: 4px; }

/* markdown */
.text strong { font-weight: 700; }
.text em { font-style: italic; }
.md-strike { text-decoration: line-through; }
.md-code { background: #1e1f22; border-radius: 4px; padding: 1px 5px; font-family: Consolas, "Courier New", monospace; font-size: 13px; border: 1px solid rgba(0,0,0,0.2); }
.md-pre { background: #1e1f22; border: 1px solid rgba(0,0,0,0.3); border-radius: 6px; padding: 10px 12px; margin: 4px 0; overflow-x: auto; }
.md-pre code { font-family: Consolas, "Courier New", monospace; font-size: 13px; color: #d5d8db; white-space: pre; }
.md-quote { border-left: 4px solid #4e5058; padding-left: 10px; margin: 2px 0; color: var(--txt-2); }
.md-link { color: var(--link); text-decoration: none; } .md-link:hover { text-decoration: underline; }
.md-spoiler { background: #1e1f22; color: transparent; border-radius: 4px; padding: 0 2px; cursor: pointer; }
.md-spoiler.revealed { background: rgba(0,0,0,0.25); color: inherit; cursor: text; }

/* resposta (preview em cima da msg + na composer) */
.reply-preview { display: flex; align-items: center; gap: 6px; margin-left: 56px; font-size: 13px; color: var(--txt-3); cursor: pointer; margin-bottom: 2px; position: relative; }
.reply-preview::before { content: ""; position: absolute; left: -34px; top: 50%; width: 24px; height: 10px; border-left: 2px solid #4e5058; border-top: 2px solid #4e5058; border-top-left-radius: 6px; }
.reply-preview:hover .reply-snippet { color: var(--txt-1); }
.reply-author { font-weight: 600; }
.reply-snippet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.reply-preview.deleted { font-style: italic; }
.msg.flash { animation: flash 0.9s ease; }
@keyframes flash { 0%, 100% { background: transparent; } 30% { background: rgba(35,165,89,0.12); } }

/* anexos */
.attachments { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; max-width: 550px; }
.att-img { display: inline-block; max-width: 400px; border-radius: 8px; overflow: hidden; cursor: zoom-in; }
.att-img img { max-width: 400px; max-height: 350px; border-radius: 8px; display: block; }

/* visualizador de imagem (lightbox) */
.lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.88); display: flex; flex-direction: column; animation: pop 0.12s ease; }
.lb-bar { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; }
.lb-btn { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.1); color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.lb-btn:hover { background: rgba(255,255,255,0.2); }
.lb-stage { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.lb-img { max-width: 92vw; max-height: 82vh; transition: transform 0.08s; user-select: none; -webkit-user-drag: none; }
.att-video { max-width: 450px; max-height: 350px; border-radius: 8px; background: #000; }
.att-audio { background: var(--input); border-radius: 8px; padding: 8px 10px; max-width: 400px; }
.att-audio .att-name { font-size: 13px; color: var(--txt-1); margin-bottom: 6px; }
.att-audio audio { width: 100%; height: 36px; }

/* player de áudio (voz) estilo Discord */
.audio-player { display: flex; align-items: center; gap: 12px; background: var(--input); border-radius: 22px; padding: 8px 14px 8px 8px; max-width: 380px; min-width: 260px; }
.audio-player .ap-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.audio-player .ap-btn:hover { background: var(--accent-hover); }
.ap-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; }
.ap-wave span { flex: 1; min-width: 2px; background: var(--txt-4); border-radius: 2px; transition: background 0.1s; }
.ap-wave span.on { background: var(--accent); }
.ap-time { font-size: 12px; color: var(--txt-2); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 32px; text-align: right; }
.att-file { display: flex; align-items: center; gap: 10px; background: var(--input); border: 1px solid #111214; border-radius: 8px; padding: 12px 14px; max-width: 380px; text-decoration: none; color: var(--link); }
.att-file:hover { background: var(--input-2); }
.att-file .att-name { color: var(--link); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-file .att-size { color: var(--txt-3); font-size: 12px; }

/* reações */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reactions:empty { display: none; }
.reaction { display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,0.2); border: 1px solid transparent; border-radius: 8px; padding: 2px 8px; cursor: pointer; }
.reaction:hover { border-color: #4e5058; }
.reaction.me { background: rgba(35,165,89,0.16); border-color: var(--accent); }
.rx-emoji { font-size: 15px; }
.rx-count { font-size: 13px; font-weight: 600; color: var(--txt-2); }
.reaction.me .rx-count { color: var(--accent); }

/* emoji picker */
.emoji-pop { position: fixed; z-index: 300; background: var(--floating); border: 1px solid #111214; border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); width: 300px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 240px; overflow-y: auto; }
.emoji-btn { font-size: 20px; width: 34px; height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.emoji-btn:hover { background: var(--hover); }

/* composer extras */
.reply-bar { display: flex; align-items: center; gap: 6px; background: #2b2d31; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; margin-bottom: -6px; }
.reply-to-name { font-weight: 600; color: var(--txt-1); }
.reply-cancel { margin-left: auto; color: var(--txt-3); display: flex; } .reply-cancel:hover { color: var(--txt); }
.attach-preview { display: flex; flex-wrap: wrap; gap: 8px; background: var(--input); border-radius: 8px 8px 0 0; padding: 10px; margin-bottom: -6px; }
.attach-chip { display: flex; align-items: center; gap: 6px; background: #1e1f22; border-radius: 6px; padding: 6px 8px; font-size: 12px; max-width: 200px; }
.attach-chip img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; }
.attach-chip .ac-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--txt-2); }
.attach-chip button { color: var(--txt-3); display: flex; } .attach-chip button:hover { color: var(--danger); }
.rec-bar { display: flex; align-items: center; gap: 10px; background: var(--input); border-radius: 8px; padding: 8px 14px; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); animation: recblink 1s infinite; flex-shrink: 0; }
@keyframes recblink { 50% { opacity: 0.3; } }
.rec-time { font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; }
.composer .emoji-c-btn { color: var(--txt-2); display: flex; align-self: center; padding: 6px; }
.composer .emoji-c-btn:hover { color: var(--txt); }

.day-sep { display: flex; align-items: center; gap: 8px; margin: 8px 16px; color: var(--txt-4); font-size: 12px; font-weight: 600; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: #3f4147; }

.welcome-block { padding: 16px 16px 8px; margin-top: auto; }
.welcome-block .big-icon { width: 68px; height: 68px; border-radius: 50%; background: var(--input); display: flex; align-items: center; justify-content: center; color: var(--txt-1); margin-bottom: 8px; }
.welcome-block h1 { font-size: 28px; font-weight: 700; color: var(--txt); margin-bottom: 4px; letter-spacing: -0.5px; }
.welcome-block p { color: var(--txt-2); font-size: 15px; }
.e2e-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--accent); background: rgba(35,165,89,0.12); padding: 4px 10px; border-radius: 12px; font-weight: 600; }

.typing-row { height: 26px; padding: 0 16px; font-size: 13px; color: var(--txt-1); display: flex; align-items: center; gap: 8px; margin-top: -4px; }
.typing-row b { font-weight: 600; }
.typing-row .dots { display: inline-flex; gap: 3px; }
.typing-row .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--txt-2); animation: blink 1.4s infinite both; }
.typing-row .dots i:nth-child(2) { animation-delay: 0.2s; } .typing-row .dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

.composer { padding: 0 16px 24px; flex-shrink: 0; }
.composer-inner { background: var(--input); border-radius: 8px; display: flex; align-items: flex-end; gap: 12px; padding: 0 16px; }
.composer .plus-btn { color: var(--txt-2); display: flex; align-self: center; padding: 4px; }
.composer .plus-btn:hover { color: var(--txt); }
.composer textarea { flex: 1; background: transparent; border: none; color: var(--txt-1); font-size: 15px; resize: none; padding: 12px 0; max-height: 200px; line-height: 1.375; }
.composer textarea::placeholder { color: var(--txt-3); }
.composer textarea:focus { outline: none; }
.composer .send-btn { color: var(--accent); display: flex; align-self: center; padding: 6px; }
.composer .send-btn:hover { color: var(--accent-hover); }

/* ===================================================================
   VOZ / VÍDEO / TELA
   =================================================================== */
.stage { flex: 1; background: #1a1b1e; display: flex; flex-direction: column; padding: 16px; min-height: 0; }
.stage-grid { flex: 1; display: grid; gap: 12px; align-content: center; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow-y: auto; padding: 8px; max-width: 1100px; margin: 0 auto; width: 100%; }
.tile { position: relative; background: #000; border-radius: 10px; aspect-ratio: 16/9; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 3px solid transparent; transition: border-color 0.1s, box-shadow 0.1s; min-height: 160px; }
.tile.speaking { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(35,165,89,0.25); }
.tile.speaking .no-cam .avatar { box-shadow: 0 0 0 4px var(--accent); border-radius: 50%; }
.tile video { width: 100%; height: 100%; object-fit: cover; }
/* transmissão de tela: mostra a tela INTEIRA (sem cortar/deformar) */
.tile.screen-tile { aspect-ratio: auto; }
.tile.screen-tile video { object-fit: contain; background: #000; }
/* tela cheia: mostra inteiro, sem cortar/dar zoom */
video:fullscreen, video:-webkit-full-screen { object-fit: contain !important; background: #000; width: 100vw !important; height: 100vh !important; }
/* slider */
.range { width: 100%; accent-color: var(--accent); height: 6px; cursor: pointer; }
.tile .no-cam { display: flex; flex-direction: column; align-items: center; gap: 12px; background: #2b2d31; width: 100%; height: 100%; justify-content: center; }
.tile .no-cam .nm { color: var(--txt-2); font-size: 14px; font-weight: 500; }
.tile .tag { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.65); color: #fff; padding: 4px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.tile .tag .icon { width: 15px; height: 15px; }
.tile .tag .muted-ic { color: var(--danger); }
.tile .badge-screen { position: absolute; top: 8px; left: 8px; background: var(--accent); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 5px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.stage-title { text-align: center; margin-bottom: 4px; }
.stage-title h2 { font-size: 15px; font-weight: 600; color: var(--txt); display: inline-flex; align-items: center; gap: 6px; }
.stage-title p { color: var(--txt-3); font-size: 13px; margin-top: 2px; }

.voice-controls { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 0 6px; }
.vc-btn { width: 48px; height: 48px; border-radius: 50%; background: #2b2d31; color: var(--txt); display: flex; align-items: center; justify-content: center; transition: background 0.12s, transform 0.12s; }
.vc-btn:hover { background: #35373c; }
.vc-btn.off { background: #fff; color: #1a1b1e; }
.vc-btn.danger { background: var(--danger); color: #fff; }
.vc-btn.danger:hover { background: var(--danger-hover); }

.join-cta { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.join-cta .cta-icon { width: 80px; height: 80px; border-radius: 50%; background: #2b2d31; display: flex; align-items: center; justify-content: center; color: var(--txt-2); margin-bottom: 10px; }
.join-cta h2 { font-size: 20px; font-weight: 700; color: var(--txt); }
.join-cta p { color: var(--txt-3); font-size: 14px; margin-bottom: 14px; }
.join-cta .faces { display: flex; gap: -8px; margin-bottom: 16px; }
.join-cta .btns { display: flex; gap: 10px; }

/* ações do espectador na tile (fullscreen / flutuante) */
.tile-actions { position: absolute; top: 8px; right: 8px; display: none; gap: 6px; }
.tile:hover .tile-actions { display: flex; }
.tile-actions button { width: 32px; height: 32px; border-radius: 6px; background: rgba(0,0,0,0.6); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.tile-actions button:hover { background: rgba(0,0,0,0.85); }
.tile-quality { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); color: #fff; border: none; border-radius: 6px; padding: 4px 6px; font-size: 12px; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity 0.1s; backdrop-filter: blur(4px); }
.tile:hover .tile-quality { opacity: 1; }
.tile-quality option { background: #1e1f22; color: #fff; }

/* seletor de qualidade da transmissão */
.quality-row { display: flex; flex-wrap: wrap; gap: 8px; }
.quality-chip { padding: 8px 12px; border-radius: 6px; background: #1e1f22; border: 1px solid #111214; color: var(--txt-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.1s; }
.quality-chip:hover { background: var(--hover); color: var(--txt); }
.quality-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* grade de fontes de tela (Electron) */
.source-grid { max-height: 340px; overflow-y: auto; }
.source-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--txt-4); margin: 12px 0 6px; }
.source-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.source-card { border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: #1e1f22; transition: 0.1s; }
.source-card:hover { border-color: var(--txt-3); }
.source-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(35,165,89,0.3); }
.source-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #000; }
.source-name { padding: 6px 8px; font-size: 12px; color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===================================================================
   MEMBROS
   =================================================================== */
.members { background: var(--sidebar); overflow-y: auto; padding: 8px; }
.members::-webkit-scrollbar { width: 8px; }
.m-cat { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--txt-4); padding: 16px 8px 4px; }
.member { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 4px; cursor: pointer; }
.member:hover { background: var(--hover); }
.member.off { opacity: 0.45; }
.member .info { min-width: 0; flex: 1; display: flex; align-items: center; gap: 6px; }
.member .info .n { font-size: 15px; font-weight: 500; color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member .role-tag { display: inline-flex; align-items: center; }
.member .role-tag .icon { width: 15px; height: 15px; }
.role-owner { color: var(--yellow); }
.role-admin { color: var(--link); }

/* ===================================================================
   MODAIS / TOASTS
   =================================================================== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal { background: var(--sidebar); border-radius: 6px; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); box-shadow: 0 8px 24px rgba(0,0,0,0.5); overflow: hidden; animation: pop 0.12s ease; position: relative; display: flex; flex-direction: column; }
@keyframes pop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-head { padding: 24px 16px 8px; text-align: center; flex-shrink: 0; }
.modal-head h3 { font-size: 22px; font-weight: 700; color: var(--txt); letter-spacing: -0.3px; }
.modal-head p { color: var(--txt-2); font-size: 15px; margin-top: 6px; }
.modal-body { padding: 12px 16px 16px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-foot { flex-shrink: 0; }
.modal-foot { padding: 16px; background: #2b2d31; display: flex; justify-content: flex-end; gap: 8px; }
.modal-close { position: absolute; top: 12px; right: 12px; color: var(--txt-3); display: flex; padding: 4px; border-radius: 4px; }
.modal-close:hover { color: var(--txt); }
.color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; color: #fff; }
.swatch.active { border-color: #fff; }
.invite-box { display: flex; gap: 8px; }
.invite-box input { flex: 1; padding: 10px 12px; border-radius: 4px; background: #1e1f22; border: 1px solid #111214; color: var(--txt); font-weight: 600; font-size: 15px; }
/* ---- card de perfil (estilo Discord) ---- */
.pc-modal-body { margin: -12px -16px -4px; }
.profile-card { background: var(--floating); border-radius: 8px; overflow: hidden; }
.pc-banner { height: 100px; }
.pc-avatar { margin: -46px 0 0 16px; box-shadow: 0 0 0 6px var(--floating); }
.pc-avatar .dot { border-color: var(--floating); width: 18px; height: 18px; }
.pc-body { padding: 8px 16px 16px; }
.pc-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-dname { font-size: 20px; font-weight: 700; color: var(--txt); }
.pc-pronouns { font-size: 13px; color: var(--txt-3); }
.pc-username { font-size: 14px; color: var(--txt-2); margin-top: 1px; }
.pc-status { font-size: 14px; color: var(--txt-1); margin-top: 8px; }
.pc-inner { background: rgba(0,0,0,0.2); border-radius: 8px; padding: 12px; margin-top: 12px; }
.pc-section { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--txt-2); margin-bottom: 4px; }
.pc-section:not(:first-child) { margin-top: 12px; }
.pc-text { font-size: 14px; color: var(--txt-1); white-space: pre-wrap; word-break: break-word; }
.pc-actions { margin-top: 14px; }
/* card "Ouvindo Spotify" (estilo Discord) */
.spotify-card { background: linear-gradient(135deg, #1db95422, rgba(0,0,0,0.25)); border: 1px solid #1db95455; border-radius: 8px; padding: 10px 12px; margin-top: 12px; }
.sp-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #1DB954; text-transform: none; margin-bottom: 8px; }
.sp-logo { display: inline-flex; line-height: 0; }
.sp-row { display: flex; gap: 10px; }
.sp-art { width: 60px; height: 60px; border-radius: 6px; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.sp-art-ph { background: #1db95433; display: flex; align-items: center; justify-content: center; color: #1DB954; }
.sp-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.sp-title { font-size: 14px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-artist, .sp-album { font-size: 12px; color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.15); margin-top: 10px; overflow: hidden; }
.sp-fill { height: 100%; width: 0%; background: #1DB954; border-radius: 2px; transition: width 0.5s linear; }
.sp-times { display: flex; justify-content: space-between; font-size: 11px; color: var(--txt-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.sp-btn { margin-top: 10px; width: 100%; background: #1DB954; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; border-radius: 20px; padding: 7px; }
.sp-btn:hover { background: #1ed760; }
.sp-btn .sp-logo svg { fill: #fff; }
.spotify-card.paused { border-color: #ffffff22; background: linear-gradient(135deg, #ffffff11, rgba(0,0,0,0.25)); }
.spotify-card.paused .sp-head { color: var(--txt-3); }
.spotify-card.paused .sp-fill { background: #b9bbbe; }
.spotify-card.paused .sp-art { filter: grayscale(0.4) brightness(0.85); }
/* editor: card de preview em cima dos campos */
/* Editor de perfil em 2 colunas: prévia (esquerda, fixa) + campos (direita, rola) */
.modal:has(.profile-editor) { max-width: 760px; }
.profile-editor { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.profile-editor .pc-wrap { position: sticky; top: 0; border-radius: 10px; overflow: hidden;
  background: var(--sidebar); box-shadow: 0 6px 14px rgba(0,0,0,0.35); padding-bottom: 8px; }
.profile-editor .pc-wrap .profile-card { max-width: 100%; margin: 0; }
.profile-editor .pe-fields { min-width: 0; }
.pc-live-hint { text-align: center; font-size: 11px; color: var(--txt-3); margin-top: 6px; }
@media (max-width: 720px) {
  .modal:has(.profile-editor) { max-width: 100%; }
  .profile-editor { grid-template-columns: 1fr; gap: 12px; }
  .profile-editor .pc-wrap { position: sticky; top: -12px; z-index: 6; margin: 0 -16px 6px; border-radius: 0; padding: 10px 16px 8px; border-bottom: 1px solid var(--line); }
}
.profile-editor .profile-card { background: var(--sidebar); }
.profile-editor .pc-avatar, .profile-editor .pc-avatar .dot { box-shadow: 0 0 0 6px var(--sidebar); }
.profile-editor .pc-inner { background: rgba(0,0,0,0.18); }

.search-result { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 4px; cursor: pointer; }
.search-result:hover { background: var(--hover); }
.divider { text-align: center; color: var(--txt-4); margin: 16px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; position: relative; }

.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--floating); color: var(--txt-1); padding: 12px 18px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); font-size: 14px; font-weight: 500; border-left: 3px solid var(--txt-3); display: flex; align-items: center; gap: 8px; animation: pop 0.12s ease; }
.toast.err { border-left-color: var(--danger); }
.toast.ok { border-left-color: var(--accent); }

.empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--txt-3); text-align: center; padding: 40px; }
.empty-state .es-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--input); display: flex; align-items: center; justify-content: center; color: var(--txt-2); }
.empty-state h2 { font-size: 20px; color: var(--txt); font-weight: 700; }
.empty-state p { max-width: 380px; }

.dm-item { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 4px; cursor: pointer; margin-bottom: 1px; }
.dm-item:hover { background: var(--hover); }
.dm-item.active { background: var(--selected); }
.dm-item .info { min-width: 0; flex: 1; }
.dm-item .info .n { font-size: 15px; font-weight: 500; color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-item.active .info .n { color: var(--txt); }
.dm-item .info .last { font-size: 12px; color: var(--txt-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-item .info .last b { color: var(--txt-3); font-weight: 600; }
.dm-item.unread .info .n { color: var(--txt); font-weight: 700; }
.dm-item.unread .info .last { color: var(--txt-2); }
.dm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
/* ===== BOTS ===== */
.bot-badge { display: inline-flex; align-items: center; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 4px; letter-spacing: .02em; vertical-align: middle; margin-left: 2px; text-transform: uppercase; }
/* botões/componentes nas mensagens */
.msg-components { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.comp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.comp-btn { font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 6px; color: #fff; background: #4e5058; transition: filter .1s, transform .05s; text-decoration: none; display: inline-flex; align-items: center; }
.comp-btn:hover { filter: brightness(1.12); }
.comp-btn.clicked { transform: scale(0.94); }
.comp-btn.cb-primary { background: var(--accent); }
.comp-btn.cb-success { background: #248046; }
.comp-btn.cb-danger { background: #da373c; }
.comp-btn.cb-secondary { background: #4e5058; }
.comp-btn.cb-link { background: transparent; color: var(--link); border: 1px solid var(--line); }
/* card/embed (estilo Discord/Mudae) */
.msg-embed { max-width: 440px; margin-top: 6px; padding: 12px 14px; background: rgba(0,0,0,.22); border-radius: 6px; border-left: 4px solid var(--embed-color, var(--accent)); overflow: hidden; }
.embed-title { font-weight: 700; font-size: 15px; color: var(--txt); margin-bottom: 4px; }
.embed-desc { font-size: 14px; color: var(--txt-1); white-space: pre-wrap; word-break: break-word; }
.embed-image { display: block; margin-top: 8px; max-width: 320px; max-height: 240px; border-radius: 6px; cursor: zoom-in; }
.embed-thumb { float: right; width: 72px; height: 72px; object-fit: cover; border-radius: 6px; margin: 0 0 6px 10px; }
.embed-footer { margin-top: 8px; font-size: 12px; color: var(--txt-3); }
/* lista de bots no gerenciador */
.bot-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.bot-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: rgba(0,0,0,.15); }
.bot-info { flex: 1; min-width: 0; }
.bot-name { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--txt); }
.bot-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bot-actions .btn { padding: 6px 10px; font-size: 13px; }
.bot-pub { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.bot-pub .toggle { width: 36px; height: 20px; }
.bot-pub .toggle .knob { width: 14px; height: 14px; }
.bot-pub .toggle.on .knob { transform: translateX(16px); }
.call-timer { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }

/* upload de imagem no perfil */
.img-upload-row { display: flex; gap: 8px; align-items: center; }
/* conta e segurança */
.acct-section { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--txt-3); margin: 18px 0 8px; }
.acct-section:first-child { margin-top: 4px; }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.acct-label { font-size: 12px; color: var(--txt-3); text-transform: uppercase; font-weight: 600; }
.acct-value { font-size: 15px; color: var(--txt); margin-top: 2px; word-break: break-all; }
/* encaminhar */
.forward-list { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.forward-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; }
.forward-item:hover { background: var(--hover); }
.fw-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--input); display: flex; align-items: center; justify-content: center; color: var(--txt-3); }
.fw-name { font-size: 14px; font-weight: 600; color: var(--txt); }
.fw-sub { font-size: 12px; color: var(--txt-4); }
/* status na lista de membros */
.member .info-col { min-width: 0; flex: 1; }
.member-status { font-size: 12px; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* não-lido */
.server-pill.has-unread::after { content: ""; position: absolute; left: -12px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.server-pill.active.has-unread::after { display: none; }
.ch-item.unread { color: var(--txt); font-weight: 600; }
.ch-item.unread::before { content: ""; position: absolute; left: -8px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.ch-item { position: relative; }

/* emojis custom */
.custom-emoji { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; display: inline-block; }
.rx-emoji .custom-emoji, .reaction .custom-emoji { width: 18px; height: 18px; vertical-align: middle; }
.emoji-btn .custom-emoji { width: 24px; height: 24px; }
.emoji-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--txt-4); padding: 6px 4px 2px; }
.emoji-manage { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.emoji-manage-item { display: flex; align-items: center; gap: 6px; background: #1e1f22; border-radius: 6px; padding: 5px 8px; font-size: 12px; color: var(--txt-2); }
.emoji-manage-item button { color: var(--txt-3); display: flex; } .emoji-manage-item button:hover { color: var(--danger); }

/* mensagens salvas */
.saved-card { background: var(--bg-3, #313338); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.saved-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.saved-author { font-weight: 700; font-size: 14px; }
.saved-src { font-size: 12px; color: var(--txt-4); }
.saved-del { margin-left: auto; color: var(--txt-4); display: flex; } .saved-del:hover { color: var(--danger); }

/* descobrir */
.discover-list { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.disc-card { display: flex; align-items: center; gap: 12px; background: var(--floating); border-radius: 8px; padding: 12px; }
.disc-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; }
.disc-info { flex: 1; min-width: 0; }
.disc-name { font-weight: 700; color: var(--txt); }
.disc-desc { font-size: 13px; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-members { font-size: 12px; color: var(--txt-4); margin-top: 2px; }

/* atalhos DM (salvas/descobrir) */
.dm-shortcut { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; cursor: pointer; color: var(--txt-2); font-weight: 500; font-size: 15px; margin-bottom: 2px; }
.dm-shortcut:hover { background: var(--hover); color: var(--txt); }
.dm-shortcut.active { background: var(--selected); color: var(--txt); }
.dm-shortcut .sc-icon { color: var(--txt-3); display: flex; }

/* toggle público */
.toggle { width: 44px; height: 24px; border-radius: 12px; background: #4e5058; position: relative; transition: background 0.15s; flex-shrink: 0; }
.toggle.on { background: var(--accent); }
.toggle .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.toggle.on .knob { transform: translateX(20px); }
.toggle-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* volume do microfone + medidor de teste */
.vol-row { display: flex; align-items: center; gap: 10px; }
.vol-range { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: #4e5058; outline: none; }
.vol-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.vol-val { width: 46px; text-align: right; font-size: 12px; color: var(--txt-2); font-variant-numeric: tabular-nums; }
.mic-meter { height: 12px; border-radius: 6px; background: #1e1f22; overflow: hidden; }
.mic-meter-fill { height: 100%; width: 0%; border-radius: 6px; background: linear-gradient(90deg, #23a559 0%, #f0b232 70%, #ed4245 100%); transition: width 0.06s linear; }
.srv-icon-prev { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; }
.discover-btn { color: var(--link) !important; }

/* enquetes */
.poll { background: rgba(0,0,0,0.2); border-radius: 8px; padding: 12px 14px; margin-top: 6px; max-width: 460px; }
.poll-q { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--txt); margin-bottom: 10px; }
.poll-opt { position: relative; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; overflow: hidden; }
.poll-opt:hover { border-color: var(--txt-3); }
.poll-opt.voted { border-color: var(--accent); }
.poll-bar { position: absolute; inset: 0 auto 0 0; background: rgba(35,165,89,0.18); transition: width 0.3s ease; }
.poll-opt.voted .poll-bar { background: rgba(35,165,89,0.3); }
.poll-opt-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.poll-opt-text { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--txt-1); }
.poll-check { color: var(--accent); display: flex; }
.poll-opt-pct { font-size: 13px; font-weight: 700; color: var(--txt-2); }
.poll-total { font-size: 12px; color: var(--txt-4); margin-top: 4px; }

/* amigos */
.friends-box { flex: 1; overflow-y: auto; padding: 16px; }
.friends-add { display: flex; gap: 8px; margin-bottom: 16px; }
.friends-add .inp { flex: 1; }
.friends-cat { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--txt-3); margin: 16px 0 6px; }
.friend-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 8px; border-top: 1px solid var(--line); cursor: pointer; }
.friend-row:hover { background: var(--hover); }
.friend-row .n { font-weight: 600; color: var(--txt); }
.friend-actions { margin-left: auto; display: flex; gap: 6px; }
.sc-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }

/* atividade */
.pc-activity { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--accent); margin-top: 6px; }
.color-native { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); cursor: pointer; }

/* fundo do chat custom: dá um leve respiro atrás das mensagens */
.main.has-bg .messages { background: transparent; }

/* call na DM: stage compacta em cima do chat */
.dm-call-stage { flex: none !important; height: 42vh; min-height: 260px; border-radius: 0; border-bottom: 1px solid var(--line); }
.dm-call-stage .stage-grid { padding: 4px; }

/* chamada recebida (toque) */
.incoming-call { position: fixed; bottom: 20px; right: 20px; z-index: 400; background: var(--floating); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); animation: ring-pop 0.3s ease, ring-shake 1.6s ease-in-out infinite; min-width: 300px; }
@keyframes ring-pop { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ring-shake { 0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.5); } 50% { box-shadow: 0 8px 24px rgba(35,165,89,0.4); } }
.incoming-call .ic-info { flex: 1; min-width: 0; }
.incoming-call .ic-name { font-weight: 700; color: var(--txt); }
.incoming-call .ic-sub { font-size: 12px; color: var(--accent); }
.incoming-call .ic-actions { display: flex; gap: 8px; }
.ic-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.ic-btn.accept { background: var(--accent); } .ic-btn.accept:hover { background: var(--accent-hover); }
.ic-btn.decline { background: var(--danger); } .ic-btn.decline:hover { background: var(--danger-hover); }

/* hambúrguer só no mobile */
.mobile-menu-btn { display: none; }

/* ===================== MOBILE ===================== */
@media (max-width: 768px) {
  .layout, .layout.has-members { grid-template-columns: 1fr; }
  .rail, .channels { position: fixed; top: 0; bottom: 0; z-index: 60; transition: transform 0.2s ease; }
  .rail { left: 0; transform: translateX(-100%); }
  .channels { left: 72px; width: 240px; transform: translateX(-320px); box-shadow: 4px 0 20px rgba(0,0,0,0.4); }
  .layout.nav-open .rail { transform: translateX(0); }
  .layout.nav-open .channels { transform: translateX(0); }
  .layout.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 50; }
  .members { display: none !important; }
  .mobile-menu-btn { display: flex; }
  .main { grid-column: 1 / -1; }
  .att-img img, .att-video { max-width: 100%; }
  .attachments { max-width: 100%; }
  .msg { padding-left: 12px; padding-right: 12px; }
  .composer { padding: 0 10px 14px; }
  .modal { max-width: 100%; }
}
@media (max-width: 500px) {
  .msg { gap: 10px; }
  .msg .col-av { width: 36px; }
  .avatar.md { width: 36px; height: 36px; }
}

/* Música do perfil (botão pausar/tocar no popout) */
.pc-song-btn{ position:absolute; top:8px; right:8px; z-index:5; display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:20px;
  padding:5px 10px; font-size:13px; cursor:pointer; backdrop-filter:blur(4px); line-height:1; }
.pc-song-btn:hover{ background:rgba(0,0,0,.72); }
.pc-song-eq{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.pc-song-eq i{ width:3px; background:#1ed760; border-radius:2px; height:100%; animation:pcEq .9s ease-in-out infinite; }
.pc-song-eq i:nth-child(2){ animation-delay:.25s; } .pc-song-eq i:nth-child(3){ animation-delay:.5s; }
.pc-song-btn.paused .pc-song-eq i{ animation-play-state:paused; height:40%; }
@keyframes pcEq{ 0%,100%{ height:35%; } 50%{ height:100%; } }

/* Volume por-pessoa na call (tile) */
.tag .uvol { position: relative; margin-left: auto; display: inline-flex; }
.uvol-btn { background: rgba(0,0,0,.45); color: #fff; border: none; border-radius: 6px; width: 24px; height: 20px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.uvol-btn:hover { background: rgba(0,0,0,.7); }
.uvol-pop { position: absolute; bottom: 26px; right: 0; display: none; flex-direction: column; gap: 6px; width: 150px;
  background: var(--floating); border: 1px solid var(--line); border-radius: 8px; padding: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.5); z-index: 20; }
.uvol-pop.open { display: flex; }
.uvol-name { font-size: 12px; color: var(--txt-2); font-weight: 600; }
.uvol-mute { font-size: 12px; padding: 4px 8px; }

/* Música na call */
.vc-music { font-size: 18px; line-height: 1; }
.music-bar { display: flex; align-items: center; gap: 8px; background: rgba(30,215,96,.12); border: 1px solid rgba(30,215,96,.4);
  border-radius: 10px; padding: 6px 10px; margin: 0 auto 8px; max-width: 420px; }
.music-bar .mb-title { font-size: 13px; color: var(--txt-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.music-bar .mb-btn { background: none; border: none; cursor: pointer; font-size: 15px; }
.mb-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.mb-eq i { width: 3px; background: #1ed760; border-radius: 2px; height: 100%; animation: pcEq .9s ease-in-out infinite; }
.mb-eq i:nth-child(2) { animation-delay: .3s; } .mb-eq i:nth-child(3) { animation-delay: .6s; }

/* Mini-player do YouTube (música na call) — fica visível pra não ser "estrangulado" pelo navegador */
.music-host { position: fixed; right: 14px; bottom: 84px; width: 240px; height: 135px; z-index: 500;
  border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.55); border: 1px solid var(--line);
  display: none; background: #000; }
.music-host.on { display: block; }
.music-host iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 600px){ .music-host{ width: 160px; height: 90px; right: 8px; bottom: 76px; } }

/* Editor mais compacto (menos espaço vazio) */
.profile-editor .pe-fields .field { margin-bottom: 11px; }
.profile-editor .pe-fields .field > label { margin-bottom: 4px; display: block; font-size: 12px; }
.profile-editor .acct-section { margin: 2px 0 8px; }
.profile-editor .cp2-wrap, .profile-editor .cp2 { gap: 6px; }

/* Label com ícone (no lugar de emoji) */
.lbl-ic { display: inline-flex; align-items: center; gap: 6px; }
.lbl-ic svg { color: var(--txt-3); flex: 0 0 auto; }