:root {
  /* Identidade WifiCord — void azulado + degradê violeta→ciano.
     Substitui a paleta anterior (clone das cores do Discord). */
  --bg-deepest: #05060C;
  --bg-dark: #0A0C16;
  --bg-main: #10121D;
  --bg-elevated: #171A28;
  --bg-hover: #1F2333;

  --accent-primary-start: #02d2e3;
  --accent-primary-end: #22D3EE;
  --accent-secondary: #6fe9f2;
  --accent-violet-deep: #02a3b0;
  --accent-cyan: #22D3EE;

  --text-primary: #F5F6FC;
  --text-secondary: #AEB4CC;
  --text-muted: #6E7590;

  --status-online: #2FE38A;
  --status-away: #FFC24B;
  --status-offline: #565D75;

  --danger: #FF4D6D;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --glow-violet: rgba(2,210,227,.45);
  --glow-cyan: rgba(34,211,238,.32);
  --glass-bg: rgba(19,21,33,.62);
  --glass-border: rgba(255,255,255,.08);
  --ease-smooth: cubic-bezier(.22,1,.36,1);

  --font-body: "Inter", "gg sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-deepest);
  color: var(--text-primary);
  font-family: var(--font-body);
}

.hidden { display: none !important; }

.mention { background: rgba(2,210,227,.25); color: #a6f2f7; border-radius: 4px; padding: 0 3px; font-weight: 600; }
.mention-self { background: rgba(251,191,36,.3); color: #fde68a; }
.icon-svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.message-pin-btn .icon-svg, .message-delete-btn .icon-svg { width: 14px; height: 14px; }
.mini-call-status .icon-svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }
.call-stage-empty .icon-svg { width: 42px; height: 42px; opacity: .5; }
#home-btn, #join-server-btn, #admin-btn, #store-btn, #games-btn, #settings-btn, #logout-btn,
#start-voice-call-btn, #start-video-call-btn, #media-btn, #emoji-btn,
.call-btn, .incoming-call-btn, .message-pin-btn, .message-delete-btn,
#mini-call-mic, #mini-call-cam, #mini-call-screen, #mini-call-headphones, #mini-call-hangup {
  display: inline-flex; align-items: center; justify-content: center;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  color: inherit;
}

input, textarea {
  font-family: inherit;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-hover);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s ease;
}

input:focus, textarea:focus {
  border-color: var(--accent-secondary);
}

.text-muted { color: var(--text-muted); }

.btn {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-weight: 600;
  font-size: 14px;
  transition: transform .1s ease, opacity .15s ease, background .15s ease;
}
.btn:active { transform: scale(0.97); }
.btn:hover { opacity: .92; }

.btn-primary {
  background: var(--accent-primary-start);
  color: #fff;
}
.btn-primary:hover { opacity: .92; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-ghost {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-small { padding: 6px 10px; font-size: 12px; }

.btn-icon {
  background: transparent;
  font-size: 16px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.btn-icon:hover { background: var(--bg-hover); }

/* ===================== AUTH ===================== */

#auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-deepest);
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-main);
  border: 1px solid var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.auth-brand { text-align: center; margin-bottom: 24px; }

.brand-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 6px;
  background: var(--accent-primary-start);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 26px;
  color: #fff;
}

.auth-brand h1 { margin: 0 0 6px; font-size: 22px; }
.auth-brand p { margin: 0; font-size: 13px; }

.auth-tabs {
  display: flex;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  background: transparent;
  padding: 8px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 13px;
}

.auth-tab.active {
  background: var(--accent-primary-start);
  color: #fff;
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }

/* ===================== APP LAYOUT ===================== */

#app-screen {
  display: grid;
  /* minmax(0, 1fr) e não só "1fr": sem o mínimo 0 explícito, essa coluna
     nunca pode encolher além do conteúdo mais largo lá dentro (uma mensagem
     longa, por exemplo), o que empurra a área principal para fora da
     viewport (overflow horizontal). As camadas de CSS mais recentes deste
     arquivo já corrigem isso via !important, mas a regra base é mantida seg
     ura aqui também para não depender só delas. */
  grid-template-columns: 76px 260px minmax(0, 1fr);
  height: 100vh;
  background: var(--bg-deepest);
}

#server-rail {
  background: var(--bg-deepest);
  border-right: 1px solid var(--bg-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 10px;
  overflow-y: auto;
}

.rail-divider {
  width: 32px;
  height: 1px;
  background: var(--bg-hover);
  margin: 2px 0;
}

.rail-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: border-radius .15s ease, background .15s ease;
}
.rail-btn:hover { background: var(--bg-hover); border-radius: 30%; }
.rail-btn.active {
  background: var(--accent-primary-start);
  border-radius: 30%;
}

.rail-btn-ghost { color: var(--accent-secondary); font-weight: 700; }

.rail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: center;
}

.server-item {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 700;
  transition: border-radius .15s ease, background .15s ease;
}
/* Indicador da barrinha à esquerda, igual ao Discord: cresce no hover e fica cheia quando ativo */
.server-item::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 8px;
  border-radius: 0 4px 4px 0;
  background: var(--text-primary);
  opacity: 0;
  transition: height .15s ease, opacity .15s ease;
}
.server-item:hover { background: var(--bg-hover); border-radius: 30%; }
.server-item:hover::before { height: 20px; opacity: .6; }
.server-item.active { background: var(--accent-primary-start); border-radius: 30%; }
.server-item.active::before { height: 40px; opacity: 1; }
.server-item .server-name { display: none; }

#sidebar {
  background: var(--bg-dark);
  border-right: 1px solid var(--bg-main);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#dm-panel, #channels-panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-header h2 { font-size: 15px; margin: 0; }

.sidebar-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.friend-item, .channel-item, .friend-request-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.friend-item:hover, .channel-item:hover { background: var(--bg-hover); }
.friend-item.active, .channel-item.active { background: var(--bg-elevated); }

.channel-item { cursor: pointer; }
.channel-hash { color: var(--text-muted); font-weight: 700; }
.channel-name { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-item.has-unread .channel-name { color: var(--text-primary, #fff); font-weight: 700; }
.channel-slowmode-badge { font-size: 11px; opacity: .75; flex: 0 0 auto; }
.channel-edit-btn { flex: 0 0 auto; background: none; border: 0; color: var(--text-muted); font-size: 13px; cursor: pointer; opacity: 0; padding: 2px 4px; border-radius: 6px; transition: opacity .15s ease, background .15s ease; }
.channel-item:hover .channel-edit-btn, .channel-item.active .channel-edit-btn { opacity: .8; }
.channel-edit-btn:hover { opacity: 1 !important; background: rgba(255,255,255,.08); }
.channel-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: auto; flex: 0 0 8px; }

.mention-autocomplete { position: absolute; bottom: 70px; left: 15px; right: 15px; max-height: 220px; overflow-y: auto; background: #201d30; border: 1px solid #393451; border-radius: 12px; padding: 6px; box-shadow: 0 12px 35px #0008; z-index: 25; }
.mention-autocomplete.hidden { display: none; }
.mention-autocomplete-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.mention-autocomplete-item img, .mention-autocomplete-item .avatar-fallback { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 28px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.mention-autocomplete-item .mention-name { font-size: 14px; font-weight: 600; color: #fff; }
.mention-autocomplete-item .mention-username { font-size: 12px; color: #a6a0bd; margin-left: 2px; }
.mention-autocomplete-item:hover, .mention-autocomplete-item.active { background: var(--accent); }
.mention-autocomplete-item:hover .mention-username, .mention-autocomplete-item.active .mention-username { color: #fff; opacity: .85; }

/* Sem tamanho fixo aqui, esse container ficava do tamanho do conteúdo
   dentro dele — e pra quem tem qualquer cosmético de perfil equipado
   (moldura/decoração/efeito), o avatar vira ".avatar-decorated", cujo
   tamanho é sempre 100% do pai (ver mais abaixo). Sem essa âncora, o
   avatar aparecia no tamanho real da imagem enviada (podia ser um
   upload de vários megapixels) em vez de um círculo pequeno — a "foto
   gigante" na barra do usuário e na lista de amigos/pedidos. */
.avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; width: 40px; height: 40px; }

.avatar-fallback, .avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: var(--accent-primary-start);
  color: #fff;
  object-fit: cover;
  flex-shrink: 0;
}

.status-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--bg-dark);
}
.status-online { background: var(--status-online); }
.status-away { background: var(--status-away); }
.status-offline { background: var(--status-offline); }

.friend-meta, .user-meta { display: flex; flex-direction: column; min-width: 0; }
.friend-name, .user-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-username, .user-username { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.friend-request-item { justify-content: space-between; }
.friend-request-name { flex: 1; font-size: 13px; margin-left: 4px; }
.friend-request-actions { display: flex; gap: 6px; }
.btn-accept, .btn-reject {
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
}
.btn-accept { background: var(--status-online); color: #05270f; }
.btn-reject { background: var(--danger); color: #2c0705; }

.invite-code-display { font-size: 13px; background: var(--bg-elevated); padding: 8px 10px; border-radius: var(--radius-sm); }

#user-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-main);
  border-top: 1px solid var(--bg-elevated);
}
#user-bar .user-meta { flex: 1; min-width: 0; }
#user-bar .btn-icon { padding: 6px; flex-shrink: 0; }
#user-bar .icon-svg { width: 16px; height: 16px; }

.user-bar-more-wrap { position: relative; flex-shrink: 0; }
.user-bar-more-menu {
  position: absolute;
  bottom: 42px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-hover);
  border-radius: var(--radius-sm);
  padding: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  z-index: 30;
}

/* ===================== MAIN PANEL ===================== */

#main-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-main);
  position: relative;
}

/* --- Fundo personalizado do servidor --- */
.server-background-layer{position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.5;filter:saturate(1.05) brightness(.7) blur(1px);transition:opacity .3s}
.server-background-layer.hidden{display:none}

/* --- Papel de parede por conversa --- */
.chat-wallpaper-layer{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;background-repeat:no-repeat;filter:saturate(var(--wc-wp-sat,1)) contrast(var(--wc-wp-con,1)) brightness(var(--wc-wp-bri,1));transition:opacity .25s}
.chat-wallpaper-layer.hidden{display:none}
.chat-wallpaper-layer::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--wc-wp-dim,.35)}
.modal-wallpaper{width:min(680px,calc(100vw - 28px))!important;max-height:calc(100vh - 24px)!important;overflow:auto!important;padding:22px!important;background:rgba(20,17,36,.86)!important;-webkit-backdrop-filter:blur(22px)!important;backdrop-filter:blur(22px)!important;border:1px solid rgba(255,255,255,.09)!important}
.wallpaper-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.wallpaper-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-bottom:16px}
.wallpaper-preset-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;padding:4px;border-radius:12px;color:var(--text-muted);font-size:11px;transition:.15s}
.wallpaper-preset-swatch:hover{background:rgba(255,255,255,.05)}
.wallpaper-preset-swatch.active{color:var(--text-primary)}
.wallpaper-preset-swatch i{display:block;width:100%;height:52px;border-radius:10px;border:2px solid transparent;background-size:cover;background-position:center}
.wallpaper-preset-swatch.active i{border-color:var(--accent,#02d2e3);box-shadow:0 0 0 3px #02d2e333}
.wc-wallpaper-preset-none{background:repeating-conic-gradient(#232035 0 25%,#1a1830 0 50%) 0 0/16px 16px}
.wc-wallpaper-preset-nebula{background:radial-gradient(circle at 30% 20%,#4c2f8f,transparent 60%),radial-gradient(circle at 75% 70%,#2f4f8f,transparent 55%),linear-gradient(160deg,#1a1330,#0c0a18)}
.wc-wallpaper-preset-aurora{background:linear-gradient(120deg,#0c1a1e,#0a0f22),radial-gradient(circle at 50% 0%,#5cf6ff44,transparent 60%),radial-gradient(circle at 20% 40%,#a66cff44,transparent 55%),radial-gradient(circle at 80% 60%,#ff7ad944,transparent 55%)}
.wc-wallpaper-preset-sunset{background:linear-gradient(200deg,#ff8a5c,#ff5c9a 45%,#3c2277 85%)}
.wc-wallpaper-preset-ocean{background:linear-gradient(180deg,#0a2a3d,#062033 60%,#03121e)}
.wc-wallpaper-preset-forest{background:linear-gradient(160deg,#0e2418,#152e1c 55%,#0a1a10)}
.wc-wallpaper-preset-midnight{background:radial-gradient(circle at 20% 20%,#1c2340,transparent 50%),radial-gradient(circle at 80% 80%,#141a30,transparent 50%),#080a14}
.wc-wallpaper-preset-cyberpunk{background:linear-gradient(#0a0616,#0a0616),repeating-linear-gradient(0deg,#ff2d9522 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,#21e6ff22 0 1px,transparent 1px 26px)}
.wc-wallpaper-preset-sakura{background:radial-gradient(circle at 20% 30%,#ffb3d955,transparent 45%),radial-gradient(circle at 70% 60%,#ff8fc755,transparent 45%),linear-gradient(160deg,#2a1830,#170e20)}
.wc-wallpaper-preset-gold{background:radial-gradient(circle at 30% 30%,#ffdb7c33,transparent 55%),linear-gradient(160deg,#231a10,#120d08)}
.wc-wallpaper-preset-galaxy{background:radial-gradient(circle at 15% 25%,#fff 0 1px,transparent 2px),radial-gradient(circle at 45% 65%,#fff 0 1px,transparent 2px),radial-gradient(circle at 75% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 85% 80%,#fff 0 1px,transparent 2px),radial-gradient(circle at 30% 85%,#8b5cff33,transparent 50%),linear-gradient(160deg,#161027,#08060f)}
.wc-wallpaper-preset-candy{background:linear-gradient(135deg,#ff9ecb,#a78bfa 50%,#7dd3fc)}
.wc-wallpaper-preset-mono{background:linear-gradient(160deg,#2b2b33,#121215)}
.wallpaper-preview{position:relative;height:120px;border-radius:14px;overflow:hidden;margin-bottom:16px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;border:1px solid rgba(255,255,255,.08)}
.wallpaper-preview-layer{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(var(--wc-wp-sat,1)) contrast(var(--wc-wp-con,1)) brightness(var(--wc-wp-bri,1))}
.wallpaper-preview-layer::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--wc-wp-dim,.35)}
.wallpaper-preview-msg{position:relative;z-index:1;background:#02d2e3;color:#fff;padding:6px 12px;border-radius:14px;font-size:12px;font-weight:600}
.wallpaper-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 16px}
.wallpaper-controls label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-muted)}
.wallpaper-controls input[type="range"]{width:100%}
.camera-popover{display:flex;flex-direction:column;gap:4px;min-width:180px}
.camera-popover-option{background:transparent;border:0;text-align:left;padding:10px 12px;border-radius:8px;font-size:14px;color:var(--text-primary);cursor:pointer}
.camera-popover-option:hover{background:rgba(255,255,255,.06)}
.invite-card{position:relative;display:flex;align-items:center;gap:8px;padding:10px 10px 10px 12px;border-radius:12px;background:linear-gradient(160deg,#241f3d,#171429);border:1px solid #ffffff14;overflow:hidden}
.invite-card-glow{position:absolute;inset:-40%;background:conic-gradient(from 0deg,#02d2e333,transparent 30%,#5cd8ff33,transparent 60%,#02d2e333);animation:inviteGlowSpin 6s linear infinite;pointer-events:none;opacity:.7}
@keyframes inviteGlowSpin{to{transform:rotate(360deg)}}
.invite-card-icon{position:relative;font-size:16px;flex:0 0 auto}
.invite-card-code{position:relative;min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25;font-size:12px;overflow:hidden}
.invite-card-code small{color:var(--text-muted)}
.invite-card-code strong{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.invite-copy-btn{position:relative;flex:0 0 auto}
.invite-copy-btn.copied{background:#2fbf71!important;color:#fff!important}

#chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#chat-header h2 { margin: 0; font-size: 16px; }

.chat-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chat-header-actions .btn-icon { font-size: 18px; }
.chat-header-actions .btn-icon:disabled { opacity: .4; cursor: not-allowed; }
.chat-header-actions .btn-icon:disabled:hover { background: transparent; }

/* ===================== CHAMADA DE VOZ/VÍDEO ===================== */

.call-bar {
  background: var(--bg-dark);
  border-bottom: 1px solid var(--bg-elevated);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.call-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.call-video-tile {
  position: relative;
  background: var(--bg-deepest);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.call-video-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-deepest);
}

.call-video-label {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(15, 11, 30, .65);
  padding: 3px 8px;
  border-radius: 6px;
}

.call-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.call-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background .15s ease, opacity .15s ease;
}
.call-btn:hover { background: var(--bg-hover); }
.call-btn-off { background: var(--danger); color: #2c0705; }
.call-btn-active { background: var(--accent-secondary); color: #06232a; }
.call-btn-danger { background: var(--danger); color: #2c0705; }
.call-btn-danger:hover { opacity: .85; }

/* ===================== CONFIGURAÇÕES ===================== */

.modal-settings { max-width: 640px; }

.settings-layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  min-height: 280px;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--bg-elevated);
  padding-right: 12px;
}

.settings-tab {
  text-align: left;
  background: transparent;
  color: var(--text-muted);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
}
.settings-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.settings-tab.active { background: var(--bg-elevated); color: var(--text-primary); }
.settings-tab-danger { color: var(--danger); }
.settings-tab-danger:hover { background: rgba(248, 113, 113, .12); color: var(--danger); }

.settings-content { min-width: 0; }
.settings-pane { display: none; flex-direction: column; gap: 12px; }
.settings-pane.active { display: flex; }
.settings-pane h4 { margin: 0; font-size: 15px; }
.settings-pane label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }

.settings-toggle {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  font-size: 13px;
  color: var(--text-primary) !important;
}
.settings-toggle input { width: 16px; height: 16px; }

.messages-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.message-item { display: flex; gap: 12px; align-items: flex-start; }
.message-avatar { flex-shrink: 0; cursor: pointer; }
.message-body { min-width: 0; }
.message-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.message-author { font-weight: 700; font-size: 14px; cursor: pointer; }
.message-author:hover { text-decoration: underline; }
.message-time { font-size: 11px; color: var(--text-muted); }
.message-content { font-size: 14px; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; }

.loading-state, .empty-state, .error-state {
  color: var(--text-muted);
  font-size: 13px;
  padding: 16px;
  text-align: center;
}
.error-state { color: var(--danger); }

.typing-indicator {
  min-height: 18px;
  padding: 0 20px;
  font-size: 12px;
  color: var(--accent-secondary);
  font-style: italic;
}

.message-form {
  display: flex;
  gap: 10px;
  padding: 14px 20px 20px;
  align-items: flex-end;
}
.message-form textarea {
  flex: 1;
  resize: none;
  max-height: 140px;
  min-height: 42px;
}

/* --- "Ativar administrador" (config. > Avançado) --- */
.admin-claim-section{ margin-top:24px; padding-top:20px; border-top:1px solid var(--bg-hover); }
.admin-claim-section h4{ margin:0 0 6px; }
.admin-claim-section label{ display:block; margin:14px 0 10px; }
.admin-claim-status{ margin:10px 0 0; font-size:13px; color:var(--text-muted); min-height:1em; }
.admin-claim-status.error{ color:#e35c5c; }

/* ===================== MODAIS ===================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 11, 30, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}

.modal {
  background: var(--bg-main);
  border: 1px solid var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 360px;
}
.modal h3 { margin: 0 0 16px; font-size: 16px; }
.modal form { display: flex; flex-direction: column; gap: 14px; }
.modal label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* ===================== TOASTS ===================== */

.toast-container {
  position: fixed;
  top: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}

.toast {
  background: var(--bg-elevated);
  border: 1px solid var(--bg-hover);
  border-left: 4px solid var(--accent-secondary);
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  animation: toast-in .2s ease;
}
.toast-success { border-left-color: var(--status-online); }
.toast-error { border-left-color: var(--danger); }
.toast-hide { opacity: 0; transform: translateX(8px); transition: all .3s ease; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===================== SCROLLBARS ===================== */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ===================== RESPONSIVE ===================== */

#mobile-menu-btn {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 40;
  background: var(--bg-elevated);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  font-size: 18px;
}

@media (max-width: 900px) {
  #app-screen {
    grid-template-columns: 1fr;
  }

  #mobile-menu-btn { display: flex; align-items: center; justify-content: center; }

  #server-rail, #sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 30;
    transform: translateX(-110%);
    transition: transform .2s ease;
  }

  #server-rail { left: 0; width: 76px; }
  #sidebar { left: 76px; width: 260px; }

  #app-screen.nav-open #server-rail,
  #app-screen.nav-open #sidebar {
    transform: translateX(0);
  }

  #main-panel { padding-top: 56px; }
}

@media (max-width: 480px) {
  #sidebar { width: calc(100vw - 76px); }
  .auth-card { padding: 24px; }
}

@media (max-width: 640px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--bg-elevated);
    padding-right: 0;
    padding-bottom: 12px;
  }
  .call-videos { grid-template-columns: 1fr; }
}


/* ===================== WIFICORD POLISH ===================== */
.brand-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 18px;
  background: var(--accent-primary-start);
  color: white;
  font-weight: 900;
  font-size: 28px;
  box-shadow: 0 12px 32px rgba(99,102,241,.25);
}
.brand-logo img { width: 56px; height: 56px; border-radius: 18px; display: block; }
.brand-logo::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(2,210,227,.35);
  border-radius: 22px;
  pointer-events: none;
}
.call-bar {
  animation: call-bar-in .22s ease both;
}
@keyframes call-bar-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.message-item {
  position: relative;
  animation: message-in .16s ease both;
}
@keyframes message-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.message-deleting {
  opacity: 0 !important;
  transform: translateX(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.message-delete-btn {
  opacity: 0;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.message-pin-btn, .message-edit-btn {
  opacity: 0;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.message-pin-btn:hover { background: rgba(2,210,227,.16); color: var(--accent-secondary); }
.message-edit-btn:hover { background: rgba(255,255,255,.08); color: var(--text-primary); }
.message-item.pinned .message-pin-btn { opacity: 1; color: var(--accent-secondary); }
.message-item:hover .message-delete-btn,
.message-delete-btn:focus { opacity: 1; }
.message-delete-btn:hover {
  background: rgba(248,113,113,.14);
  color: var(--danger);
}
.profile-editor {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--bg-dark);
  border: 1px solid var(--bg-elevated);
  border-radius: var(--radius-md);
}
.settings-avatar-preview {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-elevated);
  border: 2px solid var(--bg-hover);
}
.avatar-upload-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  cursor: pointer;
  margin-top: 4px;
}
.settings-pane select {
  width: 100%;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--bg-hover);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.device-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 420px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-deepest);
  border: 1px solid var(--bg-elevated);
}
.device-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mic-meter {
  height: 8px;
  border-radius: 99px;
  background: var(--bg-elevated);
  overflow: hidden;
}
.mic-meter span {
  display: block;
  width: var(--level, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary-start));
  transition: width .06s linear;
}
.call-btn {
  transition: transform .12s ease, background .15s ease, opacity .15s ease;
}
.call-btn:active { transform: scale(.92); }
.modal {
  animation: modal-in .18s ease both;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
:root{--accent:#02d2e3}.loading-screen{position:fixed;inset:0;z-index:9999;background:#0f0d18;display:grid;place-content:center;justify-items:center;gap:14px;transition:opacity .45s,visibility .45s}.loading-screen img{width:70px;height:70px}.loading-mark{font-size:28px;font-weight:800}.loading-bar{width:250px;height:5px;background:#242038;border-radius:99px;overflow:hidden}.loading-bar i{display:block;width:45%;height:100%;background:var(--accent);animation:load 1.1s infinite alternate}.loading-hide{opacity:0;visibility:hidden}@keyframes load{to{transform:translateX(130%)}}.composer-tools{display:flex;align-items:center;gap:4px}.composer-btn{background:none;border:0;font-size:20px;cursor:pointer}.emoji-popover{position:absolute;bottom:70px;left:15px;z-index:20;background:#201d30;border:1px solid #393451;border-radius:12px;padding:10px;max-width:320px;box-shadow:0 12px 35px #0008}.emoji-item{border:0;background:transparent;font-size:22px;padding:5px;cursor:pointer}.sticker-item{background:#302a46;color:white;border-radius:8px;margin:3px}.message-form{position:relative}.message-item.own{margin-left:0;flex-direction:row;text-align:left}.message-item .message-body{background:transparent;border-radius:0}.message-item{max-width:none;width:auto;padding:2px 16px;margin:0;border-radius:6px;transition:background .1s ease}.message-item:hover{background:rgba(255,255,255,.035)}.message-item:hover .message-delete-btn,.message-item:hover .message-pin-btn,.message-item:hover .message-edit-btn{opacity:1}.profile-banner-preview{height:100px;border-radius:10px;background:#292440 center/cover;margin-bottom:10px}.settings-avatar-preview{width:82px;height:82px;border-radius:50%;object-fit:cover;display:block;margin:8px 0}.device-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.mic-meter{height:8px;background:#25213a;border-radius:8px}.mic-meter:after{content:'';display:block;height:100%;width:var(--level,0%);background:var(--accent);border-radius:inherit;transition:.08s}#settings-camera-preview{width:100%;max-height:180px;background:#000;border-radius:8px}.compact .message-item{margin-top:4px;margin-bottom:4px}.reduce-motion *{animation:none!important;transition:none!important}
.server-invite-card{display:flex;flex-direction:column;gap:3px;padding:10px;margin-top:6px;border:1px solid #4b426d;border-radius:10px;background:#1c1929;color:#ddd;text-decoration:none}.server-invite-card strong{color:#b8a9ff}
.server-invite-embed{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-top:6px;max-width:340px;border-radius:10px;background:#22212f;color:#ddd;font-size:13px}
.server-invite-embed:not(.invite-embed-loaded){color:#a7a3b8}
.invite-embed-icon{flex:0 0 56px;width:56px;height:56px;border-radius:16px;background:#1c1929;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:22px;font-weight:700;color:#f1eefb}
.invite-embed-icon img{width:100%;height:100%;object-fit:cover}
.invite-embed-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.invite-embed-name{font-weight:700;font-size:15px;color:#fff}
.invite-embed-meta{display:flex;align-items:center;gap:5px;font-size:12px;color:#b9b6c6}
.invite-embed-dot{width:8px;height:8px;border-radius:50%;background:#80848e;margin-left:8px}
.invite-embed-dot:first-child{margin-left:0}
.invite-embed-dot.online{background:#3ba55c}
.invite-embed-since{font-size:12px;color:#8b879b}
.invite-embed-join{align-self:flex-start;margin-top:4px;border:0;border-radius:6px;padding:8px 16px;background:#3ba55c;color:#fff;font-weight:600;font-size:13px;cursor:pointer}
.invite-embed-join:hover{background:#2f9250}

.call-control-group{position:relative;display:inline-flex}.call-device-arrow{border:0;background:transparent;color:inherit;cursor:pointer;padding:0 5px}.call-device-menu{position:absolute;bottom:calc(100% + 8px);left:0;z-index:20;min-width:220px;background:#171923;border:1px solid #3a3d4d;border-radius:8px;padding:5px;box-shadow:0 8px 24px #0008}.call-device-menu.hidden{display:none}.call-device-menu button{display:block;width:100%;text-align:left;background:transparent;color:inherit;border:0;padding:8px;cursor:pointer}.call-device-menu button:hover{background:#ffffff12}.call-btn-off{position:relative}.call-btn-off::after{content:'';position:absolute;width:130%;height:2px;background:#f04747;transform:rotate(-45deg);left:-15%;top:50%;pointer-events:none}

/* ===== WifiCord visual upgrade ===== */
:root{--accent:#02d2e3;--call-bg:#0a0b10}
button,input,textarea,select{font:inherit}
.btn-icon{transition:transform .18s,background .18s}.btn-icon:hover{transform:translateY(-1px)}
.user-bar{cursor:pointer}
.call-bar{position:relative;display:flex;flex-direction:column;min-height:520px;background:radial-gradient(circle at 50% 0,#17152a,#090a0e 70%);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.35);animation:callIn .28s ease}
.call-stage{position:relative;flex:1;min-height:430px;display:flex;align-items:center;justify-content:center;background:#050609;overflow:hidden}
.call-stage #remote-video{width:100%;height:100%;object-fit:contain;background:#050609}
.call-local-preview{position:absolute;right:18px;bottom:18px;width:180px;height:110px;object-fit:cover;border-radius:14px;border:2px solid rgba(255,255,255,.16);box-shadow:0 8px 25px #0008;z-index:5}
.call-local-preview.is-screen-preview{width:100%;height:100%;right:0;bottom:0;border:0;border-radius:0;object-fit:contain;z-index:2}
.call-stage-empty{position:absolute;font-size:64px;opacity:.12;z-index:0}
.call-participant-avatar{position:absolute;left:20px;bottom:20px;width:64px;height:64px;border-radius:50%;padding:3px;background:#252734;border:3px solid rgba(255,255,255,.16);box-shadow:0 8px 30px #0008;z-index:7;transition:box-shadow .16s,transform .16s}
.call-participant-avatar img,.call-participant-avatar .call-avatar-fallback{width:100%;height:100%;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:#252140;color:white;font-weight:800;font-size:24px}
.call-local-avatar{left:auto;right:214px;bottom:26px;width:52px;height:52px}
.call-participant-avatar.speaking{border-color:#3edc78;box-shadow:0 0 0 4px #3edc7840,0 0 24px #3edc7866;transform:scale(1.05)}
.call-screen-label{position:absolute;left:18px;top:18px;z-index:8;background:#090a0dcc;padding:8px 12px;border-radius:10px;font-size:12px;color:#eee}
.call-controls{display:flex;justify-content:center;align-items:center;gap:9px;padding:14px;background:#11131a;border-top:1px solid rgba(255,255,255,.07);z-index:10}
.call-control-group{position:relative;display:flex}.call-btn,.call-device-arrow{border:0;color:#fff;background:#272a34;min-width:46px;height:44px;border-radius:12px;cursor:pointer}.call-device-arrow{min-width:25px;margin-left:2px}.call-btn:hover,.call-device-arrow:hover{background:#353946}.call-btn-off{background:#5b2930!important}.call-btn-active{background:#43339b!important}.call-btn-danger{background:#c43e4c!important}
.call-device-menu{position:absolute;bottom:52px;left:0;width:220px;background:#161821;border:1px solid #ffffff18;border-radius:12px;padding:6px;box-shadow:0 18px 45px #000b;z-index:50}.call-device-menu button{display:block;width:100%;text-align:left;background:transparent;border:0;color:#eee;padding:10px;border-radius:8px;cursor:pointer}.call-device-menu button:hover{background:#ffffff10}
@keyframes callIn{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@keyframes superPop{0%{transform:scale(.4);opacity:0}35%{transform:scale(1.45);opacity:1}70%{transform:scale(1)}100%{transform:scale(1.15);opacity:0}}
.super-emoji-message{font-size:76px;line-height:1;filter:drop-shadow(0 8px 18px #0008);display:inline-block;cursor:pointer}.super-pop{animation:superPop .7s ease}
.sticker-message{font-size:86px;line-height:1;padding:8px;display:inline-block;filter:drop-shadow(0 10px 16px #0006)}
.message-special .message-content{background:transparent!important;padding-left:0!important}
.wc-context{position:fixed;z-index:9999;width:210px;background:#151720;border:1px solid #ffffff14;border-radius:12px;padding:6px;box-shadow:0 18px 55px #000b;animation:ctxIn .12s ease}.wc-context button{display:block;width:100%;border:0;background:transparent;color:#eee;text-align:left;padding:10px 12px;border-radius:8px;cursor:pointer}.wc-context button:hover{background:var(--accent);color:#fff}@keyframes ctxIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.modal-profile,.modal-store{width:min(680px,calc(100vw - 30px));max-height:85vh;overflow:auto}
.profile-card{overflow:hidden;background:var(--bg-main);border:1px solid var(--bg-elevated);border-radius:8px}.profile-card-banner{height:130px;background:var(--bg-elevated)}.profile-avatar{width:104px;height:104px;margin:-52px 0 0 28px;border:6px solid #141620;border-radius:50%;background:#262943;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:38px;font-weight:800}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-card-body{padding:12px 28px 28px}.profile-card-body h3{font-size:25px;margin:4px 0}.profile-card-body>span{opacity:.6}.profile-card-body p{min-height:42px;color:#bfc1cc}.profile-status-line{padding:10px 12px;border-radius:10px;background:#0e1017;margin:12px 0}.profile-stats{display:flex;gap:10px}.profile-stats span{padding:9px 12px;background:#1d202c;border-radius:9px}
.store-header{display:flex;justify-content:space-between;gap:20px;align-items:start}.store-header>strong{padding:10px 14px;border-radius:10px;background:#29213f;color:#c9baff;white-space:nowrap}.store-items{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.store-item{display:flex;align-items:center;gap:12px;padding:12px;background:#151822;border:1px solid #ffffff0d;border-radius:13px}.store-item>div:nth-child(2){flex:1}.store-item small{display:block;opacity:.6;margin-top:3px}.store-art{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:25px;background:#272038}.store-art.decoration{background:#243342}.store-art.effect{background:#3b2630}.wfna-card{display:flex;gap:14px;align-items:center;padding:16px;background:linear-gradient(135deg,#21163b,#151725);border:1px solid #29d8e633;border-radius:14px}.wfna-card>div{flex:1}.wfna-card p{margin:5px 0 0;opacity:.65;font-size:13px}
.profile-status-editor{margin-top:20px;padding-top:18px;border-top:1px solid #ffffff0d}.status-options{display:flex;gap:8px;flex-wrap:wrap}.status-options button{background:#181b26;color:#ddd;border:1px solid #ffffff12;border-radius:10px;padding:9px 12px;cursor:pointer}.status-options button.selected{border-color:var(--accent);box-shadow:0 0 0 2px #02d2e322}.status-custom-row{display:flex;gap:8px;margin:10px 0}.status-custom-row input:first-child{max-width:65px;text-align:center}
.modal-settings{width:min(1040px,calc(100vw - 28px));height:min(760px,calc(100vh - 40px));padding:0;overflow:hidden}.modal-settings>h3{display:none}.settings-layout{display:grid;grid-template-columns:250px 1fr;height:calc(100% - 64px)}.settings-nav{background:#10121a;padding:24px 12px;border-right:1px solid #ffffff0c}.settings-tab{width:100%;text-align:left;padding:13px 15px;margin:3px 0;background:transparent;color:#aaa;border:0;border-radius:10px;cursor:pointer;font-weight:600}.settings-tab:hover{background:#ffffff07;color:#eee}.settings-tab.active{background:#02d2e318;color:#c8bbff}.settings-content{padding:34px 40px;overflow:auto}.settings-pane h4{font-size:24px;margin:0 0 8px}.settings-pane label{display:block;margin:18px 0}.settings-pane input,.settings-pane textarea,.settings-pane select{margin-top:7px;padding:12px;border-radius:10px;border:1px solid #ffffff13;background:#10121a;color:#eee;width:100%}.settings-pane .settings-toggle{display:flex;align-items:center;gap:10px}.settings-pane .settings-toggle input{width:auto;margin:0}.settings-avatar-preview{width:100px;height:100px;border-radius:50%;object-fit:cover;border:4px solid #ffffff12}.device-actions{display:flex;gap:8px;flex-wrap:wrap}.mic-meter{height:12px;border-radius:99px;background:#20232d;margin:14px 0;overflow:hidden;position:relative}.mic-meter:after{content:"";display:block;width:var(--level,0%);height:100%;background:linear-gradient(90deg,#49c97b,#d7d84d,#e35c5c);transition:width .06s}.settings-camera-preview{max-width:100%;border-radius:12px;background:#08090d}
@media(max-width:800px){.settings-layout{grid-template-columns:1fr}.settings-nav{display:flex;overflow:auto}.settings-tab{min-width:140px}.settings-content{padding:22px}.store-items{grid-template-columns:1fr}.call-stage{min-height:360px}.call-local-preview{width:120px;height:78px}.call-local-avatar{right:150px}.call-participant-avatar{width:54px;height:54px}}

.admin-tools{display:flex;gap:8px;margin:15px 0}.admin-tools input{flex:1}.admin-users{display:grid;gap:8px}.admin-user{display:flex;align-items:center;gap:10px;padding:11px;background:#171a23;border-radius:10px}.admin-user>span:first-child{width:36px;height:36px;border-radius:50%;background:#292d3b;display:flex;align-items:center;justify-content:center}.admin-user .admin-actions{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap}.admin-actions button{font-size:12px;padding:7px}

.message-emoji-only .message-content{background:transparent!important;border:0!important;padding:2px 0!important;font-size:48px;line-height:1.1}.message-emoji-only .message-content::first-letter{font-size:1.05em}

/* ===== Final UX / admin / calls fixes ===== */
.modal-settings{width:min(1180px,calc(100vw - 40px));max-width:none;height:min(820px,calc(100vh - 40px));max-height:calc(100vh - 40px);border-radius:20px;}
.settings-layout{grid-template-columns:280px minmax(0,1fr)!important;height:calc(100% - 58px)!important;min-height:0!important;}
.settings-nav{padding:24px 18px!important;gap:7px!important;}
.settings-tab{padding:15px 16px!important;font-size:14px!important;min-height:48px;}
.settings-content{padding:36px 48px!important;}
.settings-pane{gap:16px!important;max-width:900px;}
.settings-pane h4{font-size:28px!important;}
.settings-pane label{font-size:14px!important;margin:16px 0!important;}
.settings-pane input,.settings-pane textarea,.settings-pane select{font-size:15px!important;padding:14px 15px!important;min-height:46px;}
#settings-camera-preview{width:min(680px,100%);max-height:380px;aspect-ratio:16/9;object-fit:cover;}
.call-bar{min-height:0!important;padding:0!important;border-radius:18px!important;overflow:hidden!important;}
.call-stage{position:relative;min-height:500px;background:#050608;overflow:hidden;}
.call-stage>video#remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#050608;}
.call-stage-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:52px;pointer-events:none;opacity:.45;}
.call-local-preview{position:absolute!important;right:20px;bottom:20px;width:230px;height:135px;object-fit:cover;background:#0b0c11;border:2px solid rgba(255,255,255,.15);border-radius:14px;z-index:5;box-shadow:0 10px 30px #0008;}
.call-local-preview:not(.is-screen-preview){display:block;}
.call-participant-avatar{position:absolute;z-index:7;bottom:26px;left:26px;width:70px;height:70px;border-radius:50%;border:3px solid rgba(255,255,255,.25);background:#25233a;display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 24px #0008;}
.call-local-avatar{left:auto;right:270px;}
.call-participant-avatar img{width:100%;height:100%;object-fit:cover;}
.call-participant-avatar.speaking{border-color:#43e26d;box-shadow:0 0 0 4px rgba(67,226,109,.22),0 8px 28px #0008;}
.call-screen-label{left:18px;top:18px;z-index:9;}
.call-controls{position:relative;z-index:20;padding:14px;background:#101219;}
.sticker-message{font-size:0!important;padding:0!important;background:transparent!important;filter:none!important;}
.sticker-message img{width:160px;height:160px;object-fit:contain;display:block;}
.message-emoji-only .message-content{background:transparent!important;}
.modal-admin{width:min(1200px,calc(100vw - 36px));max-width:none;max-height:calc(100vh - 36px);overflow:auto;}
.admin-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px;}
.admin-header h3{font-size:26px;margin:0 0 5px}.admin-badge{padding:7px 11px;border-radius:999px;background:#02d2e3;color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;}
.admin-tools{display:flex;gap:10px;margin-bottom:16px}.admin-tools input{flex:1;min-height:46px;padding:12px 14px;border-radius:10px;background:#11131c;color:#eee;border:1px solid #ffffff12;}
.admin-users{display:grid;gap:10px;max-height:430px;overflow:auto;padding-right:4px;}
.admin-user{display:grid;grid-template-columns:44px minmax(180px,1fr) minmax(420px,auto);gap:12px;align-items:center;padding:13px;background:#141521;border:1px solid #ffffff0d;border-radius:14px;}
.admin-user>span img,.admin-user>span>span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;object-fit:cover;background:#2d2850;}
.admin-user small{display:block;color:#8f91a4;margin-top:3px}.admin-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.admin-actions .btn{min-height:36px;}
.admin-logs{max-height:180px;overflow:auto;background:#0f1017;border-radius:12px;padding:8px}.admin-log{padding:8px;border-bottom:1px solid #ffffff08;font-size:12px;color:#aaa}.admin-log:last-child{border-bottom:0}
.admin-rainbow{animation:wcRainbow 3s linear infinite;background-size:400% 400%!important;}
@keyframes wcRainbow{0%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(180deg)}100%{filter:hue-rotate(360deg)}}
.admin-scare-overlay{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;background:radial-gradient(circle,#3b0b45,#050008 70%);opacity:0;pointer-events:none;transition:opacity .08s}.admin-scare-overlay.show{opacity:1}.admin-scare-symbol{font-size:min(24vw,240px);animation:wcScare .35s infinite alternate}.admin-scare-text{position:absolute;bottom:14%;font-size:clamp(32px,7vw,90px);font-weight:900;letter-spacing:.08em}.moderation-blocked{opacity:.72}
@media(max-width:900px){.modal-settings{width:calc(100vw - 20px);height:calc(100vh - 20px)}.settings-layout{grid-template-columns:1fr!important}.settings-nav{display:flex;flex-direction:row;overflow:auto}.settings-content{padding:24px!important}.admin-user{grid-template-columns:44px 1fr}.admin-actions{grid-column:1/-1;justify-content:flex-start}.call-stage{min-height:420px}.call-local-preview{width:160px;height:100px}.call-local-avatar{right:190px}}
@keyframes wcScare{from{transform:scale(.82) rotate(-3deg)}to{transform:scale(1.08) rotate(3deg)}}

.call-bar.audio-call .call-local-preview{display:none}.call-bar.audio-call .call-stage-empty{display:none}.call-bar.audio-call .call-remote-avatar{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:104px;height:104px}.call-bar.has-remote .call-stage-empty{display:none}.call-bar:not(.sharing) .call-screen-label{display:none!important}.call-bar.sharing .call-local-preview{width:38%;height:38%;max-width:520px;max-height:300px;right:20px;bottom:20px}.call-bar.sharing .call-local-avatar{right:calc(38% + 40px);}

/* Correções visuais e interações adicionadas */
.wc-reaction-picker{position:fixed;z-index:10050;display:flex;flex-wrap:wrap;gap:6px;width:230px;padding:9px;background:#171525;border:1px solid #ffffff18;border-radius:14px;box-shadow:0 18px 45px #000b}.wc-reaction-picker button{width:34px;height:34px;border:0;border-radius:9px;background:#25213a;color:#fff;font-size:20px;cursor:pointer}.wc-reaction-picker button:hover{background:#3a315b;transform:scale(1.08)}
.message-reactions{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.message-reaction{border:1px solid #ffffff12;background:#171827;color:#ddd;border-radius:999px;padding:3px 8px;font-size:13px;cursor:pointer}.message-reaction:hover,.message-reaction.reacted{background:#34285d;border-color:#02d2e366;color:#fff}.message-reaction span{opacity:.8;margin-left:2px}
.modal-store{width:min(1120px,calc(100vw - 36px));max-width:none;max-height:calc(100vh - 36px);padding:28px}.store-header{padding-bottom:18px;border-bottom:1px solid #ffffff0c}.store-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}.store-item{min-height:118px;padding:18px;gap:16px}.store-art{width:64px;height:64px;flex:0 0 64px;font-size:32px}.store-item strong{font-size:16px}.store-item small{font-size:13px}.store-item .btn{min-width:94px}.wfna-card{padding:22px;margin-top:18px}
.admin-actions{max-height:210px;overflow:auto;padding:2px}.admin-actions .btn{min-width:86px}.admin-user{align-items:start}
#remote-audio{display:none}
@media(max-width:1100px){.store-items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.modal-store{width:calc(100vw - 16px);padding:18px}.store-items{grid-template-columns:1fr}.store-item{min-height:100px}}

/* ===== Server member rail ===== */
.members-panel{width:255px;background:#11101b;border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;min-width:0;overflow:hidden}.members-panel.hidden{display:none}.members-panel-header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.08em;color:#a6a0bd;border-bottom:1px solid rgba(255,255,255,.05)}.members-panel-header span:last-child{background:#28233d;padding:3px 7px;border-radius:999px;color:#c7bdf0}.server-members-list{padding:14px 10px;overflow:auto}.member-role-group{margin-bottom:16px}.member-role-group h4{display:flex;justify-content:space-between;margin:0 7px 7px;color:#8f8aa5;text-transform:uppercase;font-size:11px;letter-spacing:.08em}.member-role-group h4 small{font-size:10px;opacity:.7}.server-member-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;transition:.15s}.server-member-row:hover{background:rgba(255,255,255,.055)}.server-member-avatar{width:34px;height:34px;position:relative;flex:0 0 34px}.server-member-avatar img,.server-member-avatar .avatar-fallback{width:34px;height:34px;border-radius:50%;object-fit:cover}.server-member-avatar .status-dot{position:absolute;right:-1px;bottom:-1px;border:3px solid #11101b}.server-member-name{min-width:0;display:flex;flex-direction:column}.server-member-name>span{font-size:13px;font-weight:650;color:var(--role-color,#ddd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.server-member-name small{font-size:10px;color:#77738b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.server-owner-crown{font-size:12px;color:#ffd66e}.members-panel+.main-panel{min-width:0}

/* ===== Super emoji full-screen effects ===== */
.super-effect-overlay{position:fixed;inset:0;z-index:100001;pointer-events:none;opacity:0;overflow:hidden}.super-effect-overlay.show{opacity:1}.super-effect-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.25);font-size:min(24vw,220px);filter:drop-shadow(0 20px 35px #0009);animation:superCenter 1.45s cubic-bezier(.18,.8,.2,1) forwards}.super-effect-overlay[data-effect=rainbow]{background:linear-gradient(110deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);background-size:500% 500%;animation:rainbowScreen 1.5s ease}.super-effect-overlay[data-effect=lightning]{background:rgba(235,245,255,.08)}.lightning-bolt{position:absolute;top:-15%;width:7px;height:135%;background:linear-gradient(180deg,transparent,#fff,transparent);transform:rotate(8deg);filter:drop-shadow(0 0 16px #fff);animation:boltFall .55s ease-in-out forwards}.effect-particle{position:absolute;top:-10%;width:9px;height:18px;background:linear-gradient(135deg,#fff,#02d2e3);border-radius:3px;animation:particleFall 1.4s ease-in forwards}.super-effect-overlay[data-effect=rocket]{background:radial-gradient(circle at 50% 80%,#02d2e320,transparent 55%)}.super-effect-overlay[data-effect=fire]{background:radial-gradient(circle,#ff6b001c,transparent 60%);animation:fireFlash 1.2s}.super-effect-overlay[data-effect=flash]{background:#fff;animation:flashBang .45s}.super-effect-overlay[data-effect=rain]{background:linear-gradient(#12253a66,#17293f44);animation:rainFlash 1.4s}.super-effect-overlay[data-effect=snow]{background:#bfe8ff14}.super-effect-overlay[data-effect=hearts]{background:#ff3d7a0e}.super-effect-overlay[data-effect=vortex]{background:conic-gradient(from 0deg,#02d2e322,#00d9ff22,#ff2b8a22,#02d2e322);animation:vortexSpin 1.5s}.super-effect-overlay[data-effect=skull]{background:#0009}.super-effect-overlay[data-effect=cool]{background:linear-gradient(90deg,#00eaff12,#02d2e322,#00eaff12)}
@keyframes superCenter{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-15deg)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(4deg)}70%{opacity:1;transform:translate(-50%,-50%) scale(.95) rotate(-2deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25) rotate(0)}}@keyframes rainbowScreen{0%{opacity:0;background-position:0 50%;filter:saturate(1)}15%{opacity:.48}100%{opacity:0;background-position:100% 50%;filter:saturate(2)}}@keyframes boltFall{0%{opacity:0;transform:translateY(-20%) rotate(8deg)}35%{opacity:1}100%{opacity:0;transform:translateY(18%) rotate(8deg)}}@keyframes particleFall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(115vh) rotate(600deg);opacity:0}}@keyframes flashBang{0%{opacity:0}10%{opacity:.85}100%{opacity:0}}@keyframes fireFlash{0%,100%{opacity:0}20%{opacity:.45}45%{opacity:.1}65%{opacity:.3}}@keyframes rainFlash{0%{opacity:0}30%{opacity:.3}100%{opacity:0}}@keyframes vortexSpin{0%{opacity:0;transform:rotate(0)}35%{opacity:1}100%{opacity:0;transform:rotate(720deg)}}

/* ===== WFNA rocket ===== */
.rocket-overlay{position:fixed;inset:0;z-index:100002;pointer-events:none;background:radial-gradient(circle at 50% 100%,#02d2e322,transparent 55%);overflow:hidden}.rocket{position:absolute;left:-12vw;bottom:8vh;font-size:min(10vw,110px);filter:drop-shadow(0 0 20px #8f72ff);animation:rocketFly 2s cubic-bezier(.2,.7,.15,1) forwards}.rocket-trail{position:absolute;left:-8vw;bottom:10vh;width:40vw;height:18px;background:linear-gradient(90deg,transparent,#ffb34d,#02d2e3,transparent);filter:blur(8px);transform:rotate(-17deg);animation:rocketTrail 2s ease-out forwards}@keyframes rocketFly{0%{transform:translate(0,30vh) rotate(-15deg) scale(.6);opacity:0}12%{opacity:1}100%{transform:translate(125vw,-80vh) rotate(-25deg) scale(1.15);opacity:0}}@keyframes rocketTrail{0%{opacity:0;transform:translate(0,20vh) rotate(-17deg) scaleX(.2)}20%{opacity:1}100%{opacity:0;transform:translate(120vw,-70vh) rotate(-17deg) scaleX(1.5)}}

/* ===== Store ===== */
.modal-store{width:min(1320px,calc(100vw - 28px))!important;max-height:calc(100vh - 24px)!important;padding:30px!important}.store-items{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-height:58vh;overflow:auto;padding:4px}.store-item{display:grid!important;grid-template-columns:72px 1fr auto;align-items:center;min-height:128px!important;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:linear-gradient(145deg,#191827,#12121c);box-shadow:0 10px 25px #0003}.store-item-info{display:flex;flex-direction:column;gap:5px}.store-item-info small{color:#9b96ac}.wfna-actions{display:flex;gap:8px;flex-wrap:wrap}.wfna-card{min-height:110px}

/* ===== Advanced settings ===== */
.settings-pane{animation:settingsPaneIn .18s ease}.settings-pane label input[type=range]{padding:0;accent-color:var(--accent)}@keyframes settingsPaneIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ===== Audio / call participant placement ===== */
#remote-audio{display:block!important;position:absolute!important;width:1px!important;height:1px!important;opacity:.001!important;pointer-events:none!important;left:-100px!important;top:-100px!important}.call-bar.audio-call .call-stage{background:radial-gradient(circle at 50% 50%,#24213c,#08090e 65%)}.call-bar.audio-call .call-remote-avatar{left:calc(50% - 70px)!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:116px!important;height:116px!important}.call-bar.audio-call .call-local-avatar{left:calc(50% + 70px)!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:96px!important;height:96px!important}.call-bar.audio-call .call-local-avatar.speaking,.call-bar.audio-call .call-remote-avatar.speaking{transform:translate(-50%,-50%) scale(1.06)!important}.call-bar:not(.audio-call):not(.sharing) .call-remote-avatar{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%)}.call-bar:not(.audio-call):not(.sharing) .call-local-avatar{left:calc(50% + 92px);right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%)}

@media(max-width:1200px){.members-panel{width:225px}.store-items{grid-template-columns:repeat(3,minmax(0,1fr))!important}}@media(max-width:900px){.members-panel{display:none!important}.store-items{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media(max-width:650px){.store-items{grid-template-columns:1fr!important}.modal-store{padding:18px!important}}
#app-screen.with-members{grid-template-columns:76px 260px minmax(0,1fr) 255px}#app-screen.with-members #main-panel{grid-column:3;grid-row:1}#app-screen.with-members .members-panel{grid-column:4;grid-row:1}@media(max-width:1200px){#app-screen.with-members{grid-template-columns:76px 260px minmax(0,1fr) 225px}}@media(max-width:900px){#app-screen.with-members{grid-template-columns:76px 260px 1fr}.members-panel{display:none!important}}
.wc-screen-shake{animation:wcShake .12s linear 8!important}@keyframes wcShake{0%{transform:translate(0)}25%{transform:translate(6px,-3px)}50%{transform:translate(-5px,4px)}75%{transform:translate(4px,2px)}100%{transform:translate(0)}}
.super-effect-overlay[data-effect=invert]{background:#fff;mix-blend-mode:difference}.super-effect-overlay[data-effect=matrix]{background:linear-gradient(90deg,#001a00,#003b00,#001a00);color:#6f6}.super-effect-overlay[data-effect=freeze]{background:linear-gradient(#dff7ff2b,#8bdcff0f)}.super-effect-overlay[data-effect=glitch]{background:repeating-linear-gradient(0deg,#ff00ff16 0 3px,#00ffff16 3px 6px);animation:glitchFx .18s steps(2) 8}.super-effect-overlay[data-effect=fireworks]{background:radial-gradient(circle at 20% 30%,#fff0 0 3%,#ff4d0033 4%,transparent 10%),radial-gradient(circle at 75% 35%,#fff0 0 3%,#02d2e344 4%,transparent 10%),radial-gradient(circle at 50% 65%,#fff0 0 3%,#00d9ff33 4%,transparent 10%);animation:fireworksFx 1.4s ease-out}.super-effect-overlay[data-effect=party]{background:conic-gradient(from 0deg,#ff0a,#0ff0,#f0f0,#ff0a);animation:partyFx 1.3s linear}.super-effect-overlay[data-effect=rocket]{background:linear-gradient(180deg,#080b16,#1a1235)}@keyframes glitchFx{0%{transform:translate(0)}50%{transform:translate(7px,-2px)}100%{transform:translate(-5px,3px)}}@keyframes fireworksFx{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.3)}}@keyframes partyFx{0%{opacity:0;transform:rotate(0)}35%{opacity:.25}100%{opacity:0;transform:rotate(360deg)}}

/* WifiCord v4 — layout, media, WFNA, call dock and advanced controls */
html, body { width:100%; height:100%; overflow:hidden; }
body { min-height:100vh; }
#app-screen { height:100dvh; min-height:0; overflow:hidden; grid-template-rows: minmax(0,1fr); }
#sidebar, #main-panel, #dm-panel, #channels-panel { min-height:0; }
#main-panel { height:100%; min-height:0; overflow:hidden; }
#messages-list { min-height:0; height:auto; overflow-y:auto; overscroll-behavior:contain; }
.message-form { flex:0 0 auto; }
.channel-header-actions { display:flex; gap:6px; align-items:center; }

.mini-call-status { flex:1; min-width:0; font-size:11px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-call-dock button { width:28px; height:28px; border-radius:8px; background:var(--bg-elevated); display:grid; place-items:center; }
.mini-call-dock button:hover { background:var(--bg-hover); }
.mini-call-dock .danger { background:var(--danger); }
#user-bar { position:relative; }

/* Call becomes an in-conversation stage; outside the active call DM it is minimized.
   flex:1 1 auto (em vez de 0 0 auto) deixa o call-bar ENCOLHER quando header +
   call-bar + composer não cabem no viewport — sem isso ele sempre reivindicava
   sua altura em vh "cheia" e o resto da coluna (empty-state do chat, composer)
   acabava desenhando por cima dos controles da chamada em janelas mais baixas
   (a media query de emergência só cobria <620px de altura, deixando uma faixa
   de ~620-750px sem proteção nenhuma). */
.call-bar { flex:1 1 auto; min-height:0; max-height:min(48vh,560px); overflow:hidden; }
.call-stage { min-height:180px; max-height:38vh; position:relative; display:grid; place-items:center; overflow:hidden; border-radius:14px; background:radial-gradient(circle at center,#25203f,#100d1d 72%); }
.call-stage .call-participant-avatar { position:absolute; z-index:4; width:104px; height:104px; border-radius:50%; display:grid; place-items:center; background:var(--bg-elevated); border:4px solid var(--bg-hover); box-shadow:0 16px 45px rgba(0,0,0,.35); overflow:hidden; }
.call-stage .call-participant-avatar img { width:100%; height:100%; object-fit:cover; }
.call-local-avatar { transform:translate(62px,62px); }
.call-stage:not(.sharing) .call-local-avatar { transform:translate(72px,72px); }
.call-stage:not(.sharing) .call-remote-avatar { transform:translate(-72px,-72px); }
.call-stage .call-participant-avatar.speaking { border-color:var(--accent-secondary); box-shadow:0 0 0 6px rgba(85,220,255,.16),0 16px 45px rgba(0,0,0,.35); }
.call-stage video { max-width:100%; max-height:100%; object-fit:contain; }
.call-stage .call-stage-empty { opacity:.18; font-size:46px; }
.call-bar.audio-call .call-stage { min-height:260px; }
.call-bar.audio-call #local-video, .call-bar.audio-call #remote-video { display:none; }
.call-bar.audio-call .call-remote-avatar { position:relative; transform:none!important; }
.call-bar.audio-call .call-local-avatar { transform:translate(86px,86px)!important; }

.modal-store, .modal-media, .modal-share-screen, .modal-server-settings { width:min(1080px,calc(100vw - 40px)); max-width:1080px; max-height:calc(100vh - 40px); overflow:auto; }
.modal-store { min-height:640px; }
.store-items { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); max-height:none; }
.store-item { min-height:170px; }

.profile-custom-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.profile-custom-grid label { min-width:0; }

.server-settings-tabs,.share-tabs,.media-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; border-bottom:1px solid var(--bg-elevated); padding-bottom:8px; }
.server-settings-tab,.share-tab,.media-tab { padding:8px 12px; border-radius:8px; background:transparent; color:var(--text-muted); }
.server-settings-tab.active,.share-tab.active,.media-tab.active { background:var(--bg-elevated); color:var(--text-primary); }
.server-settings-pane,.share-pane { display:none; flex-direction:column; gap:12px; }
.server-settings-pane.active,.share-pane.active { display:flex; }
.server-settings-pane label { display:flex; flex-direction:column; gap:6px; color:var(--text-muted); font-size:13px; }
.server-settings-pane .settings-toggle { flex-direction:row; color:var(--text-primary); }
.server-settings-header,.share-header,.media-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.share-lock { background:var(--bg-elevated); padding:7px 10px; border-radius:9px; font-weight:800; }
.share-source-card { padding:18px; border:1px solid var(--bg-hover); border-radius:12px; background:var(--bg-dark); display:flex; gap:14px; align-items:center; }
.share-source-icon { font-size:30px; }
.share-source-card small { display:block; color:var(--text-muted); margin-top:4px; }
.resolution-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0; }
.resolution-grid button { padding:14px 10px; border-radius:10px; background:var(--bg-elevated); border:1px solid transparent; font-weight:800; }
.resolution-grid button.active { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent); }
.resolution-grid button.locked { opacity:.55; }
.resolution-grid small { display:block; color:var(--text-muted); font-weight:500; margin-top:4px; }

.media-library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; min-height:240px; }
.media-card { border:1px solid var(--bg-hover); background:var(--bg-dark); border-radius:12px; overflow:hidden; }
.media-preview { position:relative; width:100%; aspect-ratio:16/10; display:grid; place-items:center; background:#0b0912; overflow:hidden; }
.media-preview img,.media-preview video { width:100%; height:100%; object-fit:cover; }
.media-preview .file-icon { font-size:42px; }
.media-info { padding:9px 10px; }
.media-info strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.media-info small { color:var(--text-muted); }
.media-actions { display:flex; gap:6px; padding:0 10px 10px; }
.media-actions button { flex:1; }

/* Selo de "play" sobre a prévia de vídeo na biblioteca de mídia — deixa
   claro que é um vídeo mesmo quando o navegador não consegue desenhar um
   quadro real (ex.: modo de economia de dados do celular). Ver
   client/js/media.js (preview/onVideoFrame). */
.media-preview-play {
  position: absolute; inset: 0; margin: auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(5, 6, 12, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  pointer-events: none;
}
.media-preview-play::after {
  content: ''; margin-left: 3px;
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}
.media-preview-error-label { display:block; margin-top:6px; color:var(--text-muted); font-size:11px; }
.media-upload-progress { height:7px; background:var(--bg-elevated); border-radius:99px; overflow:hidden; margin:10px 0; }
.media-upload-progress span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent-primary-start),var(--accent-primary-end)); transition:width .12s linear; }

/* Personalization */
.profile-card.profile-glow-soft { box-shadow:0 0 35px rgba(2,210,227,.28); }
.profile-card.profile-glow-strong { box-shadow:0 0 70px rgba(2,210,227,.5); }
.profile-card.profile-glow-rainbow { box-shadow:0 0 55px rgba(255,80,180,.45),0 0 85px rgba(80,200,255,.35); }

@media (max-width:900px){
  #app-screen.with-members { grid-template-columns:76px 230px 1fr; }
  .resolution-grid { grid-template-columns:repeat(2,1fr); }
  .profile-custom-grid { grid-template-columns:1fr; }
}
.call-bar.call-context-hidden { display:none !important; }
.chat-media { max-width:min(720px,100%); margin-top:4px; border-radius:12px; overflow:hidden; background:#0a0810; }
.chat-media img,.chat-media video { display:block; width:100%; max-height:520px; object-fit:contain; }
.chat-media audio { width:100%; }
.media-file-link { display:inline-block; margin-top:6px; color:var(--accent-secondary); }
.media-file-card { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:12px; border:1px solid var(--bg-hover); border-radius:10px; background:var(--bg-dark); max-width:520px; }
.media-file-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-file-card small { color:var(--text-muted); }
.media-file-card.media-file-unavailable { border-color:#ff5c5c44; background:linear-gradient(145deg,#2a1a1a,#1a1010); }
.media-file-card.media-file-unavailable strong { color:#ffb3b3; }
.server-role-row { display:grid; grid-template-columns:14px auto auto 1fr; gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--bg-hover); border-radius:9px; background:var(--bg-dark); margin-bottom:6px; }
.server-role-row small,.server-role-row code { color:var(--text-muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; }
.role-color { width:12px; height:12px; border-radius:50%; }
.wfna-benefits { margin:10px 0 0; padding-left:18px; color:var(--text-muted); font-size:12px; line-height:1.7; }
.store-super-quota { color:var(--text-muted); font-size:12px; margin-left:auto; }
.mic-test-status { font-size:12px; color:var(--text-muted); padding:8px 10px; background:var(--bg-dark); border-radius:8px; }
.mic-meter { position:relative; height:10px; border-radius:99px; overflow:hidden; background:var(--bg-elevated); }
.mic-meter::after { content:""; display:block; width:var(--level,0%); height:100%; background:linear-gradient(90deg,var(--accent-primary-start),var(--accent-primary-end)); transition:width .08s linear; }
.profile-card { border-color:color-mix(in srgb,var(--profile-color,#02d2e3) 45%,var(--bg-hover)); }
.profile-card .profile-card-banner { box-shadow:inset 0 -2px 0 var(--profile-color,#02d2e3); }

/* v5 — Discord-like permissions, profile cosmetics and stable chat layout */
.avatar-decorated,.profile-avatar-decorated{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;isolation:isolate;overflow:visible}
.avatar-decorated .avatar-img,.avatar-decorated .avatar-fallback,.profile-avatar-decorated img,.profile-avatar-decorated>span{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;overflow:hidden}
.avatar-frame-overlay,.profile-avatar-decorated i{position:absolute;inset:-5px;border-radius:50%;z-index:3;pointer-events:none;border:3px solid transparent}
.avatar-frame-overlay:after,.profile-avatar-decorated i:after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid currentColor;opacity:.8}
.frame-neon .avatar-frame-overlay,.profile-avatar-decorated.frame-neon i{color:#5ff6ff;box-shadow:0 0 12px #5ff6ff,0 0 26px #02d2e3;animation:framePulse 1.8s ease-in-out infinite}
.frame-cyber .avatar-frame-overlay,.profile-avatar-decorated.frame-cyber i{color:#d36cff;border-style:dashed;transform:rotate(12deg)}
.frame-gold .avatar-frame-overlay,.profile-avatar-decorated.frame-gold i{color:#ffd76b;border:4px solid #ffd76b;box-shadow:0 0 18px #ffd76b66}
.frame-fire .avatar-frame-overlay,.profile-avatar-decorated.frame-fire i{color:#ff6a36;box-shadow:0 0 15px #ff6a36,0 0 30px #ff3d0044;animation:frameFire .8s ease-in-out infinite alternate}
.frame-rainbow .avatar-frame-overlay,.profile-avatar-decorated.frame-rainbow i{border:4px solid transparent;background:conic-gradient(#ff4d6d,#ffd93d,#4dffb8,#4db8ff,#b45cff,#ff4d6d) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:spinFrame 2.2s linear infinite}
.frame-void .avatar-frame-overlay,.profile-avatar-decorated.frame-void i{color:#9c7cff;border:3px double #9c7cff;box-shadow:0 0 22px #5a2cff88}
.decoration-stars .avatar-decoration-overlay,.decoration-hearts .avatar-decoration-overlay,.decoration-lightning .avatar-decoration-overlay,.decoration-snow .avatar-decoration-overlay,.decoration-particles .avatar-decoration-overlay{position:absolute;inset:-10px;z-index:4;pointer-events:none}
.decoration-stars .avatar-decoration-overlay:after{content:'✦  ·  ✧';position:absolute;inset:0;display:grid;place-items:center;color:#ffe68a;font-size:11px;animation:decorFloat 2s ease-in-out infinite}
.decoration-hearts .avatar-decoration-overlay:after{content:'♥  ♡';position:absolute;inset:0;display:grid;place-items:center;color:#ff6d9c;font-size:11px;animation:decorFloat 1.6s ease-in-out infinite}
.decoration-lightning .avatar-decoration-overlay:after{content:'⚡';position:absolute;right:-7px;top:2px;font-size:18px;filter:drop-shadow(0 0 7px #ffe45c)}
.decoration-snow .avatar-decoration-overlay:after{content:'❄';position:absolute;left:-7px;bottom:0;font-size:17px;filter:drop-shadow(0 0 7px #8ee8ff)}
.decoration-particles .avatar-decoration-overlay:after{content:'·  ✦  ·  ✧';position:absolute;inset:0;display:grid;place-items:center;color:#b9b5ff;font-size:12px;animation:decorFloat 1.2s linear infinite}

/* ---------------------------------------------------------------------
   Camada "mini-efeito" do avatar (.avatar-effect-overlay dentro de
   .profile-mini-effect-X) — a MESMA escolha de efeito de perfil
   (settings.profileEffect) também aparece, numa versão reduzida, em
   volta do avatar. Isso é o que faz o efeito "viajar" com a pessoa pra
   fora da tela de perfil (chat, listas, chamadas, popovers) sempre que
   quem renderiza o avatar usa a mesma classe.
   Antes desse bloco, 16 dos 28 efeitos só tinham essa regra dentro de
   "#modal-profile .profile-avatar-decorated.profile-mini-effect-X", ou
   seja, aaraeciam no card de perfil mas ficavam invisíveis em qualquer
   outro lugar do app (a marcação de classe já saía certa do avatarHtml/
   avatar() — só faltava a regra de CSS "global"/sem escopo). E outros
   7 efeitos (float/particles/orbit/neon/rainbow/fire/snow/hologram)
   nunca tiveram versão de avatar nenhuma. As regras abaixo cobrem os
   28, com uma pegada própria pra escala de avatar (não é só herdar o
   efeito de fundo em tamanho pequeno) — mantidas sem !important porque
   agora são a base; o bloco #modal-profile mais abaixo continua valendo
   como reforço/ajuste fino só daquele contexto. --------------------- */
.profile-mini-effect-glitch .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;background:repeating-linear-gradient(0deg,transparent 0 3px,#fff2 3px 5px);animation:glitchPhoto .5s steps(2) infinite;mix-blend-mode:screen}
.profile-mini-effect-aurora .avatar-effect-overlay{inset:-12px;position:absolute;border-radius:50%;z-index:4;background:conic-gradient(from 0deg,#5cf6ff44,#a66cff55,#ff7ad955,#5cf6ff44);animation:auroraFrame 4s linear infinite}
.profile-mini-effect-matrix .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;background:repeating-linear-gradient(90deg,#3cff6b18 0 2px,transparent 2px 8px);animation:matrixMove 1s linear infinite}
.profile-mini-effect-electric .avatar-effect-overlay{inset:-9px;position:absolute;border-radius:50%;z-index:4;box-shadow:0 0 18px #63eaff;animation:electricFrame .4s steps(2) infinite}
.profile-mini-effect-galaxy .avatar-effect-overlay{inset:-10px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 70%,#fff 0 1px,transparent 2px),radial-gradient(circle at 50% 20%,#fff 0 1px,transparent 2px);animation:galaxyFrame 3s linear infinite}
.profile-mini-effect-sakura .avatar-effect-overlay{inset:-10px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 20% 15%,#ffb3d9 0 3px,transparent 4px),radial-gradient(circle at 65% 55%,#ff8fc7 0 3px,transparent 4px),radial-gradient(circle at 40% 80%,#ffd6ea 0 3px,transparent 4px),radial-gradient(circle at 85% 30%,#ffb3d9 0 2px,transparent 3px);animation:sakuraFall 3s linear infinite}
.profile-mini-effect-bolhas .avatar-effect-overlay{inset:-10px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 25% 85%,#8ff2ff88 0 3px,transparent 4px),radial-gradient(circle at 60% 90%,#c2fbffaa 0 2px,transparent 3px),radial-gradient(circle at 45% 95%,#8ff2ff88 0 2px,transparent 3px);animation:bolhasRise 2.4s linear infinite}
.profile-mini-effect-meteoros .avatar-effect-overlay{inset:-12px;position:absolute;border-radius:50%;z-index:4;overflow:hidden;background:linear-gradient(115deg,transparent 40%,#fff 41%,#fff 42%,transparent 43%),linear-gradient(115deg,transparent 65%,#a9d4ff 66%,#a9d4ff 67%,transparent 68%);background-size:220% 220%;animation:meteorosSweep 1.4s linear infinite}
.profile-mini-effect-lava .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 50% 100%,#ff5a1f66,transparent 55%),radial-gradient(circle at 30% 90%,#ff8a3d55,transparent 45%);animation:lavaPulse 1.6s ease-in-out infinite alternate}
.profile-mini-effect-gelo .avatar-effect-overlay{inset:-9px;position:absolute;border-radius:50%;z-index:4;background:conic-gradient(from 0deg,#eafcff33,#bff3ff88,#eafcff33,#7fe3ff66,#eafcff33);animation:geloShimmer 3.5s linear infinite;box-shadow:0 0 14px #bff3ff88}
.profile-mini-effect-confete .avatar-effect-overlay{inset:-11px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 15% 25%,#ff5c7a 0 2px,transparent 3px),radial-gradient(circle at 75% 20%,#ffd75c 0 2px,transparent 3px),radial-gradient(circle at 30% 75%,#5cffb0 0 2px,transparent 3px),radial-gradient(circle at 80% 70%,#5cd8ff 0 2px,transparent 3px),radial-gradient(circle at 55% 45%,#a95cff 0 2px,transparent 3px);animation:confeteSpin 2.6s linear infinite}
.profile-mini-effect-sonar .avatar-effect-overlay{inset:-6px;position:absolute;border-radius:50%;z-index:4;border:2px solid #5cd8ffaa;animation:sonarPulse 1.8s ease-out infinite}
.profile-mini-effect-tempestade .avatar-effect-overlay{inset:-9px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle,#dfe8ff 0%,transparent 70%);opacity:0;animation:tempestadeFlash 2.4s steps(1) infinite}
.profile-mini-effect-nebulosa .avatar-effect-overlay{inset:-12px;position:absolute;border-radius:50%;z-index:4;background:conic-gradient(from 90deg,#6c4cff55,#2d1b63aa,#ff6ca055,#4c9bff55,#6c4cff55);filter:blur(1px);animation:nebulosaDrift 6s linear infinite}
.profile-mini-effect-ouro .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;overflow:hidden;background:linear-gradient(115deg,transparent 30%,#ffe9a3 45%,#fff6d6 50%,#ffe9a3 55%,transparent 70%);background-size:260% 260%;animation:ouroSweep 2.2s linear infinite;box-shadow:0 0 12px #ffdb7c66}
.profile-mini-effect-veneno .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 50% 50%,#8bff4d55,transparent 60%);animation:venenoPulse 1.4s ease-in-out infinite alternate;box-shadow:inset 0 0 20px #6fff3344}
.profile-mini-effect-fantasma .avatar-effect-overlay{inset:-11px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 40% 40%,#e8fff433,transparent 55%),radial-gradient(circle at 65% 65%,#c9fff044,transparent 50%);animation:fantasmaFloat 3.4s ease-in-out infinite}
.profile-mini-effect-circuito .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;background:repeating-linear-gradient(0deg,#3cff9022 0 2px,transparent 2px 9px),repeating-linear-gradient(90deg,#3cff9022 0 2px,transparent 2px 9px);animation:circuitoMove 1.2s linear infinite}
.profile-mini-effect-diamante .avatar-effect-overlay{inset:-10px;position:absolute;border-radius:50%;z-index:4;background:conic-gradient(from 0deg,#fff 0deg 2deg,transparent 2deg 44deg,#e8f6ff 44deg 46deg,transparent 46deg 90deg,#fff 90deg 92deg,transparent 92deg 134deg,#e8f6ff 134deg 136deg,transparent 136deg 180deg);animation:diamanteSpin 2.8s linear infinite}
.profile-mini-effect-oceano .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;overflow:hidden;background:repeating-linear-gradient(100deg,#2b8fd622 0 6px,#7fd4ff33 6px 12px);animation:oceanoWave 2s linear infinite}
.profile-mini-effect-entardecer .avatar-effect-overlay{inset:-9px;position:absolute;border-radius:50%;z-index:4;background:linear-gradient(200deg,#ff8a5c55,#ff5c9a55,#7a5cff55);background-size:200% 200%;animation:entardecerShift 4s ease-in-out infinite}
/* Os 7 efeitos abaixo (float/particles/orbit/neon/rainbow/fire/snow/
   hologram) nunca tiveram versão de avatar — usam uma pegada própria de
   escala pequena (não é o mesmo keyframe do fundo grande, que usa
   translateY de mais de 100px). */
.profile-mini-effect-float .avatar-effect-overlay{inset:-10px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 28% 30%,#a88bffcc 0 2px,transparent 3px),radial-gradient(circle at 70% 65%,#c9b8ffaa 0 2px,transparent 3px);animation:avatarFloatBob 3.2s ease-in-out infinite}
.profile-mini-effect-particles .avatar-effect-overlay{inset:-10px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 50% 90%,#b7a8ff 0 2px,transparent 3px),radial-gradient(circle at 30% 95%,#8f7bffcc 0 2px,transparent 3px),radial-gradient(circle at 70% 95%,#d3c8ffcc 0 2px,transparent 3px);animation:avatarParticleRise 2.1s linear infinite}
.profile-mini-effect-orbit .avatar-effect-overlay{inset:-9px;position:absolute;border-radius:50%;z-index:4;border:1px solid #66e6ffcc;box-shadow:0 0 14px #66e6ff88;animation:avatarOrbitSpin 2.6s linear infinite}
.profile-mini-effect-neon .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;box-shadow:0 0 10px #6e5cffaa,inset 0 0 14px #6e5cff66;animation:avatarNeonPulse 1.5s ease-in-out infinite}
.profile-mini-effect-rainbow .avatar-effect-overlay{inset:-9px;position:absolute;border-radius:50%;z-index:4;background:conic-gradient(from 0deg,#ff5c7a,#ffd75c,#5cffb0,#5cd8ff,#a95cff,#ff5c7a);opacity:.5;-webkit-mask:radial-gradient(circle,transparent 62%,#000 64%);mask:radial-gradient(circle,transparent 62%,#000 64%);animation:spinFrame 3s linear infinite}
.profile-mini-effect-fire .avatar-effect-overlay{inset:-9px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 50% 105%,#ff5a1f77,transparent 55%);animation:avatarFireEmber 1s ease-in-out infinite alternate}
.profile-mini-effect-snow .avatar-effect-overlay{inset:-10px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 30% 15%,#fff 0 2px,transparent 3px),radial-gradient(circle at 70% 30%,#dff9ff 0 2px,transparent 3px),radial-gradient(circle at 50% 55%,#fff 0 1.5px,transparent 2.5px);animation:avatarSnowDrift 3s linear infinite}
.profile-mini-effect-hologram .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;background:repeating-linear-gradient(0deg,#4ce6ff22 0 2px,transparent 2px 6px);animation:avatarHoloScan 1.1s steps(3) infinite}
@keyframes avatarFloatBob{0%,100%{transform:translateY(0) rotate(0deg);opacity:.85}50%{transform:translateY(-5px) rotate(8deg);opacity:.5}}
@keyframes avatarParticleRise{0%{transform:translateY(0);opacity:.9}100%{transform:translateY(-16px);opacity:0}}
@keyframes avatarOrbitSpin{to{transform:rotate(360deg)}}
@keyframes avatarNeonPulse{50%{opacity:.5;box-shadow:0 0 20px #6e5cffee,inset 0 0 22px #6e5cffaa}}
@keyframes avatarFireEmber{to{transform:scale(1.08);filter:brightness(1.3)}}
@keyframes avatarSnowDrift{0%{transform:translateY(-3px) rotate(0deg)}100%{transform:translateY(3px) rotate(12deg)}}
@keyframes avatarHoloScan{50%{opacity:.5;transform:translateX(1px)}}

@keyframes framePulse{50%{filter:brightness(1.35);transform:scale(1.025)}}
@keyframes frameFire{to{filter:brightness(1.3);transform:translateY(-1px)}}
@keyframes spinFrame{to{transform:rotate(360deg)}}
@keyframes decorFloat{50%{transform:translateY(-3px) rotate(4deg);opacity:.7}}

/* ---------------------------------------------------------------------
   Camada NOVA "aura do avatar" (settings.profileCustomization.avatarAura)
   — independente do frame/decoração/mini-efeito acima: é uma camada a
   mais, pensada pra escala de avatar desde o início (não é o efeito de
   fundo do perfil encolhido). Combina com qualquer frame/efeito já
   existente. O quinto filho <u class="avatar-aura-overlay"> é onde tudo
   isso desenha; quando o valor é 'wifi-network' o WCParticles (ver
   particle-engine.js) também liga um <canvas> ao lado, registrado num
   único loop compartilhado (não um rAF por avatar). --------------------- */
/* z-index:1, abaixo da própria foto (que é z-index:2) — assim qualquer
   camada "cheia" (gradiente cobrindo o círculo todo, tipo halo/crystal/
   hologram/prism/shadowwisp) fica escondida atrás da foto no centro e só
   aparece como brilho/anel na borda pra fora, sem precisar de máscara
   em cada uma; as de anel/box-shadow (energy/arc/wifi-*) já são "ocas"
   por natureza e não mudam de leitura com o z-index. */
.avatar-aura-overlay{position:absolute;inset:-15px;z-index:1;pointer-events:none;border-radius:50%}
.avatar-aura-halo .avatar-aura-overlay{background:radial-gradient(circle,#c9b8ff55 0%,transparent 68%);filter:blur(2px);animation:auraHaloBreathe 3.2s ease-in-out infinite}
.avatar-aura-energy .avatar-aura-overlay{inset:-11px;border:2px solid #5ff6ffaa;box-shadow:0 0 16px #5ff6ff,inset 0 0 10px #5ff6ff66;animation:auraEnergyPulse .9s ease-in-out infinite}
.avatar-aura-crystal .avatar-aura-overlay{inset:-13px;background:conic-gradient(from 0deg,#fff 0 3deg,transparent 3deg 42deg,#dff0ff 42deg 45deg,transparent 45deg 87deg,#fff 87deg 90deg,transparent 90deg 132deg,#dff0ff 132deg 135deg,transparent 135deg 177deg,#fff 177deg 180deg,transparent 180deg 222deg,#dff0ff 222deg 225deg,transparent 225deg 267deg,#fff 267deg 270deg,transparent 270deg 312deg,#dff0ff 312deg 315deg,transparent 315deg 357deg,#fff 357deg 360deg);opacity:.75;animation:auraCrystalSpin 5s linear infinite}
.avatar-aura-shadowwisp .avatar-aura-overlay{inset:-16px;background:radial-gradient(circle at 30% 70%,#00000088,transparent 55%),radial-gradient(circle at 75% 30%,#2b1b4488,transparent 55%);filter:blur(3px);animation:auraShadowDrift 4.5s ease-in-out infinite}
.avatar-aura-hologram .avatar-aura-overlay{inset:-10px;background:repeating-linear-gradient(115deg,#5ce7ff33 0 2px,transparent 2px 6px);mix-blend-mode:screen;animation:auraHologramSweep 1.4s linear infinite}
.avatar-aura-arc .avatar-aura-overlay{inset:-12px;border:1px solid transparent;box-shadow:0 -13px 0 -11px #dff6ff,10px -8px 0 -11px #7cf8ff,10px 8px 0 -11px #dff6ff,0 13px 0 -11px #7cf8ff,-10px 8px 0 -11px #dff6ff,-10px -8px 0 -11px #7cf8ff;animation:auraArcJump .5s steps(1) infinite}
.avatar-aura-emberdrift .avatar-aura-overlay{inset:-14px;background:radial-gradient(circle at 20% 80%,#ff8a3d 0 2px,transparent 3px),radial-gradient(circle at 75% 85%,#ff5a1f 0 2px,transparent 3px),radial-gradient(circle at 50% 90%,#ffb066 0 1.5px,transparent 2.5px);animation:auraEmberRise 2.4s ease-in infinite}
.avatar-aura-stardust .avatar-aura-overlay{inset:-15px;background:radial-gradient(circle at 15% 25%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 80% 20%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 25% 80%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 85% 75%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 50% 8%,#fff 0 1.5px,transparent 2.5px);animation:auraStarTwinkle 2.2s ease-in-out infinite}
.avatar-aura-prism .avatar-aura-overlay{inset:-13px;background:conic-gradient(from 90deg,#ff5c7a55,#ffd75c55,#5cffb055,#5cd8ff55,#a95cff55,#ff5c7a55);filter:blur(1.5px) hue-rotate(0deg);animation:auraPrismHue 4s linear infinite}
.avatar-aura-wifi-signal .avatar-aura-overlay{inset:-16px;border-radius:50%;box-shadow:0 0 0 0 #3ddc9700;animation:auraWifiSignal 2.4s ease-out infinite}
.avatar-aura-wifi-pulse .avatar-aura-overlay{inset:-8px;border:2px solid #3ddc97cc;animation:auraWifiPulse 1.3s ease-out infinite}
.avatar-aura-wifi-data .avatar-aura-overlay{inset:-11px;background:repeating-conic-gradient(from 0deg,#3ddc97 0deg 4deg,transparent 4deg 26deg);opacity:.6;-webkit-mask:radial-gradient(circle,transparent 70%,#000 72%);mask:radial-gradient(circle,transparent 70%,#000 72%);animation:auraWifiData 1.6s linear infinite}
.avatar-aura-wifi-orbit .avatar-aura-overlay{inset:-13px}
.avatar-aura-wifi-orbit .avatar-aura-overlay:before,.avatar-aura-wifi-orbit .avatar-aura-overlay:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:#3ddc97;box-shadow:0 0 6px #3ddc97}
.avatar-aura-wifi-orbit .avatar-aura-overlay:before{top:50%;left:50%;margin:-2px 0 0 -2px;animation:auraOrbitA 2.1s linear infinite}
.avatar-aura-wifi-orbit .avatar-aura-overlay:after{top:50%;left:50%;margin:-2px 0 0 -2px;background:#5865F2;box-shadow:0 0 6px #5865F2;animation:auraOrbitB 3.4s linear infinite reverse}
@keyframes auraHaloBreathe{0%,100%{opacity:.65;transform:scale(.96)}50%{opacity:1;transform:scale(1.08)}}
@keyframes auraEnergyPulse{0%,100%{opacity:.7;filter:brightness(1)}50%{opacity:1;filter:brightness(1.5)}}
@keyframes auraCrystalSpin{to{transform:rotate(360deg)}}
@keyframes auraShadowDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-3px)}}
@keyframes auraHologramSweep{to{background-position:20px -14px}}
@keyframes auraArcJump{0%,100%{box-shadow:0 -13px 0 -11px #dff6ff,10px -8px 0 -11px #7cf8ff,10px 8px 0 -11px #dff6ff,0 13px 0 -11px #7cf8ff,-10px 8px 0 -11px #dff6ff,-10px -8px 0 -11px #7cf8ff}50%{box-shadow:0 -13px 0 -11px transparent,10px -8px 0 -11px #dff6ff,10px 8px 0 -11px transparent,0 13px 0 -11px #dff6ff,-10px 8px 0 -11px transparent,-10px -8px 0 -11px #dff6ff}}
@keyframes auraEmberRise{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-18px) translateX(4px);opacity:0}}
@keyframes auraStarTwinkle{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes auraPrismHue{to{filter:blur(1.5px) hue-rotate(360deg)}}
@keyframes auraWifiSignal{0%{box-shadow:0 0 0 0 #3ddc9788}70%{box-shadow:0 0 0 10px #3ddc9700}100%{box-shadow:0 0 0 0 #3ddc9700}}
@keyframes auraWifiPulse{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.3);opacity:0}}
@keyframes auraWifiData{to{transform:rotate(360deg)}}
@keyframes auraOrbitA{to{transform:rotate(360deg) translateX(17px) rotate(-360deg)}}
@keyframes auraOrbitB{to{transform:rotate(360deg) translateX(13px) rotate(-360deg)}}
/* Efeitos de aura reduzem/param sozinhos fora do contexto de perfil (ver
   data-context no wrapper, aplicado por identity.js) — em listas/chat a
   aura roda numa versão mais discreta, e com "reduzir animações" ligado
   (prefers-reduced-motion, ou o novo settings.cosmeticsQuality==='low')
   ela vira estática. */
[data-cq="low"] .avatar-aura-overlay,[data-cq="off"] .avatar-aura-overlay,
[data-cq="low"] .avatar-effect-overlay,[data-cq="off"] .avatar-effect-overlay{animation:none!important;opacity:.55!important}
[data-context="list"] .avatar-aura-overlay,[data-context="chat"] .avatar-aura-overlay{opacity:.72}
/* Avatares pequenos (barra lateral de DMs, listas de membros, avatar de
   mensagem) costumam morar num container justo — sem isso a aura/anel
   de -15px fica cortada pela caixa em vez de "vazar" em volta como no
   perfil grande. */
[data-size="xs"] .avatar-aura-overlay,[data-size="sm"] .avatar-aura-overlay{inset:-6px}
[data-size="xs"] .avatar-effect-overlay,[data-size="sm"] .avatar-effect-overlay{inset:-4px}
[data-size="xs"] .avatar-frame-overlay,[data-size="sm"] .avatar-frame-overlay{inset:-3px}
@media (prefers-reduced-motion: reduce){.avatar-aura-overlay,.avatar-effect-overlay,.avatar-frame-overlay{animation:none!important}}

.profile-effect-layer{position:absolute;inset:0;pointer-events:none;z-index:6;border-radius:18px;overflow:hidden;opacity:0}
.profile-card{position:relative}.profile-effect-layer.is-active{opacity:1}
.profile-effect-layer span{position:absolute;display:block;border-radius:50%;background:currentColor}
.profile-effect-float{color:#a88bff}.profile-effect-float span{width:8px;height:8px;left:20%;bottom:15%;box-shadow:90px -40px 0 1px currentColor,180px -15px 0 0 currentColor;animation:profileFloat 4s ease-in-out infinite}
.profile-effect-particles{color:#b7a8ff}.profile-effect-particles span{width:4px;height:4px;left:20%;top:70%;box-shadow:70px -60px 0 currentColor,150px -20px 0 currentColor,230px -90px 0 currentColor,310px -30px 0 currentColor;animation:profileParticles 3s linear infinite}
.profile-effect-orbit{color:#66e6ff}.profile-effect-orbit:before{content:"";position:absolute;inset:20%;border:1px solid currentColor;border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 16px currentColor}.profile-effect-neon{box-shadow:inset 0 0 35px #6e5cff55}.profile-effect-rainbow{background:conic-gradient(from 0deg,#ff5c7a22,#ffd75c22,#5cffb022,#5cd8ff22,#a95cff22,#ff5c7a22);animation:profileRainbow 4s linear infinite}.profile-effect-fire{background:radial-gradient(circle at 50% 110%,#ff5a1f33,transparent 45%);animation:profileFire 1.1s ease-in-out infinite alternate}.profile-effect-snow span{width:6px;height:6px;background:#dff9ff;box-shadow:80px -40px #fff,160px 15px #dff9ff,250px -65px #fff,320px -10px #dff9ff;animation:profileSnow 3s linear infinite}.profile-effect-hologram{background:repeating-linear-gradient(0deg,#4ce6ff0d 0 2px,transparent 2px 7px);animation:holo 1.2s steps(2) infinite}
@keyframes profileFloat{50%{transform:translateY(-35px) translateX(20px);opacity:.35}}@keyframes profileParticles{to{transform:translateY(-130px);opacity:0}}@keyframes profileRainbow{to{transform:rotate(360deg)}}@keyframes profileFire{to{transform:scale(1.04);filter:brightness(1.25)}}@keyframes profileSnow{to{transform:translateY(140px)}}@keyframes holo{50%{opacity:.65;transform:translateX(2px)}}

.profile-effects-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.wfna-only-tab.hidden{display:none!important}

/* A área principal nunca cresce com o histórico. */
#main-panel{min-height:0;height:100%;overflow:hidden}
#messages-list{flex:1 1 auto!important;min-height:0!important;height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important}
#messages-list .message-item{flex-shrink:0}

/* Editor de permissões de canal/cargos */
.channel-permission-editor,.role-permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.permission-card{padding:12px;border:1px solid var(--bg-hover);border-radius:12px;background:var(--bg-elevated)}
@media(max-width:700px){.profile-effects-grid,.channel-permission-editor,.role-permission-grid{grid-template-columns:1fr}}
.modal-profile{width:min(900px,calc(100vw - 28px));max-height:90vh}.profile-card{min-height:520px}.profile-card-banner{height:180px}.profile-avatar{width:138px;height:138px;margin:-69px 0 0 38px;border-width:7px}.profile-card-body{padding:18px 38px 36px}.profile-card-body h3{font-size:32px}.profile-avatar-decorated{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.profile-avatar-decorated img,.profile-avatar-decorated>span{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center}.profile-avatar-decorated i{position:absolute;inset:-7px;border-radius:50%;z-index:3;pointer-events:none}.profile-avatar-decorated b{position:absolute;inset:-16px;z-index:4;pointer-events:none}
.server-settings-tabs{position:sticky;top:0;z-index:3;background:var(--bg-main,#151320);padding-top:4px}.server-settings-pane{padding:10px 4px 18px}.advanced-role-row{display:grid;grid-template-columns:1fr;gap:12px;padding:14px;border:1px solid var(--bg-hover);border-radius:14px;background:rgba(255,255,255,.025)}.advanced-role-row>div:first-child{display:flex;align-items:center;gap:10px}.advanced-role-row .role-color{width:12px;height:12px;border-radius:50%;display:inline-block}.advanced-role-row small{opacity:.55}.advanced-role-row code{opacity:.55;white-space:normal}

/* v6 — chamadas, notificações, mídia, perfis e minigames */
.rail-divider-small{margin:6px 12px!important}.dm-quick-list{list-style:none;padding:0;margin:0 0 4px;display:flex;flex-direction:column;align-items:center;gap:7px;max-height:42vh;overflow:auto}.dm-quick-item{position:relative;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;cursor:pointer;background:#1b1730;border:1px solid transparent;transition:.15s}.dm-quick-item:hover,.dm-quick-item.active{border-color:var(--accent);transform:translateY(-1px)}.dm-quick-item .avatar,.dm-quick-item .avatar-decorated{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}.dm-quick-item .status-dot{position:absolute;right:3px;bottom:3px;border:2px solid #0f0d18}.dm-quick-item img{width:36px;height:36px;border-radius:50%;object-fit:cover}.incoming-dm-notice{position:fixed;right:22px;top:22px;z-index:100500;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #ffffff18;border-radius:14px;background:rgba(25,21,43,.96);color:var(--text-primary);box-shadow:0 16px 50px #0008;backdrop-filter:blur(14px);transform:translateX(130%);opacity:0;cursor:pointer}.incoming-dm-notice.show{animation:wcNoticeIn .25s ease forwards}.incoming-dm-notice img,.incoming-dm-notice .avatar,.incoming-dm-notice .avatar-decorated{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;flex:0 0 40px!important;border-radius:50%;object-fit:cover}.incoming-dm-notice span{display:flex;flex-direction:column;text-align:left}.incoming-dm-notice small{color:var(--text-muted)}@keyframes wcNoticeIn{to{transform:none;opacity:1}}

.call-bar{position:relative;z-index:8;margin:8px 10px 0;border:1px solid #ffffff10;border-radius:16px;background:#0b0a11;box-shadow:0 16px 45px #0005}.call-stage{height:min(42vh,420px)!important;min-height:280px!important;max-height:none!important;border-radius:14px 14px 8px 8px!important;background:radial-gradient(circle at 50% 45%,#282144,#08090e 72%)!important}.call-stage:not(.sharing) .call-remote-avatar,.call-stage:not(.sharing) .call-local-avatar{left:auto!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}.call-stage:not(.sharing) .call-remote-avatar{left:calc(50% - 88px)!important}.call-stage:not(.sharing) .call-local-avatar{left:calc(50% + 88px)!important}.call-stage:not(.sharing) .call-remote-avatar:only-child{left:50%!important}.call-stage .call-participant-avatar{width:112px!important;height:112px!important;border:4px solid #ffffff18!important}.call-stage .call-local-avatar{width:92px!important;height:92px!important}.call-stage .call-participant-avatar.speaking{border-color:#5de3a0!important;box-shadow:0 0 0 7px #5de3a022,0 16px 45px #0008!important}.call-bar:not(.sharing) #remote-video{position:absolute;inset:0;width:100%;height:100%;z-index:1}.call-bar:not(.sharing) #local-video{position:absolute;width:150px;height:100px;right:18px;bottom:18px;z-index:6;border-radius:12px;border:2px solid #ffffff18;object-fit:cover;background:#08080d}.call-bar:not(.sharing) .call-remote-avatar,.call-bar:not(.sharing) .call-local-avatar{z-index:7}.call-bar.audio-call #local-video,.call-bar.audio-call #remote-video{display:none!important}.call-bar.audio-call .call-stage:not(.sharing) .call-remote-avatar{left:calc(50% - 76px)!important}.call-bar.audio-call .call-stage:not(.sharing) .call-local-avatar{left:calc(50% + 76px)!important}.call-controls{position:relative!important;z-index:20!important;background:#111019;padding:10px!important;border-radius:0 0 14px 14px;display:flex;justify-content:center;gap:7px}.call-btn,.call-device-arrow{width:40px!important;height:40px!important}.call-unavailable{opacity:.75!important;filter:none!important}

.chat-audio-player{display:flex;align-items:center;gap:12px;min-width:min(420px,100%);padding:10px 12px;border:1px solid #ffffff12;border-radius:14px;background:linear-gradient(145deg,#1d1930,#11101a);box-shadow:0 8px 22px #0003}.chat-audio-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#02d2e3,#3C45A5);font-size:21px}.chat-audio-main{min-width:0;flex:1}.chat-audio-main strong{display:block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;margin-bottom:5px}.chat-audio-player audio{width:100%;height:34px;filter:invert(.88) hue-rotate(180deg) saturate(.7);opacity:.95}.chat-media{border:1px solid #ffffff12;box-shadow:0 8px 24px #0003}.chat-media video,.chat-media img{background:#090810}.media-file-card{background:linear-gradient(145deg,#1d1930,#11101a)!important;border-color:#ffffff12!important;box-shadow:0 8px 22px #0003}

/* Banner is strictly contained inside the profile card; never paints the chat. */.profile-card-banner{height:160px!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;position:relative!important;overflow:hidden!important}.profile-card-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(14,14,22,.38));pointer-events:none}.profile-card{position:relative!important;overflow:hidden!important}.profile-card-body{position:relative;z-index:3}.profile-avatar{position:relative;z-index:5}

/* --- Sala de jogos em glassmorphism: painéis translúcidos com blur em
   vez dos blocos de cor sólida de antes, no mesmo espírito visual do
   resto do app (cards com --glass-* já usados alhures). --- */
.modal-games{width:min(900px,calc(100vw - 28px))!important;max-width:min(900px,calc(100vw - 28px))!important;max-height:calc(100vh - 24px)!important;padding:22px!important;background:rgba(20,17,36,.72)!important;-webkit-backdrop-filter:blur(22px)!important;backdrop-filter:blur(22px)!important;border:1px solid rgba(255,255,255,.09)!important}
.games-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.game-cooldown{padding:7px 12px;border-radius:999px;background:rgba(45,214,140,.14);border:1px solid rgba(45,214,140,.35);color:#8ff0bb;font-weight:700;font-size:12px;backdrop-filter:blur(6px)}
.game-cooldown.locked{background:rgba(255,90,100,.14);border-color:rgba(255,90,100,.35);color:#ffadb3}
.game-tabs{display:flex;gap:8px;margin:12px 0;padding:5px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);width:fit-content}
.game-tab{padding:9px 14px;border-radius:10px;background:transparent;color:var(--text-muted);transition:.15s}
.game-tab.active{background:linear-gradient(135deg,var(--accent-primary-start),var(--accent-primary-end));color:#fff;box-shadow:0 6px 18px -8px var(--glow-violet)}
.game-hud{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0}
.game-hud span{padding:8px 13px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums}
.flappy-wrap{position:relative;width:100%;max-width:760px;margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid rgba(2,210,227,.28);background:#090810;box-shadow:0 20px 50px -12px #000a,0 0 0 1px rgba(255,255,255,.04) inset,0 0 40px -18px var(--glow-violet)}
.flappy-wrap canvas{display:block;width:100%;height:auto}
.flappy-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(12,10,20,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:center}
.flappy-overlay.hidden{display:none}
.flappy-overlay strong{font-size:34px;font-family:var(--font-display);background:linear-gradient(135deg,#fff,#c9b8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.flappy-overlay span{color:#c9c4dd}

/* --- Banner de atualização do app desktop (ver client/js/desktop-update.js) --- */
#desktop-update-banner{position:fixed;top:max(14px, env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:999;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 18px;border-radius:var(--radius-lg);background:var(--glass-bg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--glass-border);box-shadow:0 12px 34px -10px rgba(0,0,0,.6),0 0 30px -14px var(--glow-violet);color:var(--text-primary);font-size:13px;animation:wcUpdateBannerIn .35s var(--ease-smooth) both;max-width:calc(100vw - 24px);box-sizing:border-box}
@keyframes wcUpdateBannerIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
#desktop-update-banner span{min-width:0}
#desktop-update-banner button{border:0;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;background:linear-gradient(135deg,var(--accent-primary-start),var(--accent-primary-end));color:#0b0913;cursor:pointer;transition:transform .15s var(--ease-smooth),box-shadow .15s var(--ease-smooth);white-space:nowrap;flex:0 0 auto}
#desktop-update-banner button:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px var(--glow-violet)}
#desktop-update-banner button:disabled{opacity:.7;cursor:default;transform:none;box-shadow:none}
@media (prefers-reduced-motion: reduce){#desktop-update-banner{animation:none}}
/* Abaixo de 680px (mesmo corte usado no resto do app pra "é celular") a
   régua vira coluna, cola nas bordas reais da tela (respeitando notch/
   status bar via env(safe-area-inset-*)) e o botão ocupa a largura toda —
   antes disso o corte era só em 480px e sem safe-area, por isso o botão
   ficava parcialmente escondido atrás da barra de status / cortado pra
   fora da área visível em vários celulares. */
@media (max-width:680px){#desktop-update-banner{left:max(10px, env(safe-area-inset-left));right:max(10px, env(safe-area-inset-right));top:max(10px, env(safe-area-inset-top));transform:none;flex-direction:column;align-items:stretch;text-align:center;max-width:none;width:auto}#desktop-update-banner button{width:100%}}
.game-help{margin-top:10px;color:var(--text-muted);font-size:12px;text-align:center}

@media(max-width:700px){.call-stage{height:300px!important;min-height:240px!important}.call-stage:not(.sharing) .call-remote-avatar{left:calc(50% - 55px)!important}.call-stage:not(.sharing) .call-local-avatar{left:calc(50% + 55px)!important}.chat-audio-player{min-width:0}.incoming-dm-notice{left:12px;right:12px;top:12px}}

/* Premium profile frames and WFNA effects */
.frame-glitch .avatar-frame-overlay,.profile-avatar-decorated.frame-glitch i{border:3px solid #fff;box-shadow:0 0 0 2px #ff2d75,0 0 0 5px #21e6ff,0 0 28px #8b5cff;animation:glitchFrame .65s steps(2) infinite}
.frame-glitch .avatar-img,.profile-avatar-decorated.frame-glitch img{animation:glitchPhoto .55s steps(2) infinite}
.frame-aurora .avatar-frame-overlay,.profile-avatar-decorated.frame-aurora i{border:4px solid transparent;background:linear-gradient(90deg,#5cf6ff,#a66cff,#ff7ad9,#5cf6ff) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:auroraFrame 3s linear infinite;filter:drop-shadow(0 0 14px #8a7cff)}
.frame-electric .avatar-frame-overlay,.profile-avatar-decorated.frame-electric i{border:3px solid #7cf8ff;box-shadow:0 0 8px #7cf8ff,0 0 26px #2d9cff;animation:electricFrame .35s steps(2) infinite}
.frame-galaxy .avatar-frame-overlay,.profile-avatar-decorated.frame-galaxy i{border:3px solid #b78cff;box-shadow:0 0 18px #8b5cff,0 0 38px #3e1b80;animation:galaxyFrame 4s linear infinite;background:radial-gradient(circle at 20% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 65%,#fff 0 1px,transparent 2px)}
.frame-hologram .avatar-frame-overlay,.profile-avatar-decorated.frame-hologram i{border:3px solid #5ce7ff;box-shadow:inset 0 0 12px #5ce7ff,0 0 24px #5ce7ff;animation:holoFrame 1s steps(3) infinite}
/* Três molduras novas (Glass/Crystal/Minimal) — pedido explícito de
   variedade: nenhuma delas é "a mesma moldura só que doutra cor", cada
   uma usa uma técnica visual diferente das 9 que já existiam. */
.frame-glass .avatar-frame-overlay,.profile-avatar-decorated.frame-glass i{border:2px solid #ffffff55;background:linear-gradient(160deg,#ffffff22,transparent 55%);backdrop-filter:blur(1px);box-shadow:inset 0 1px 0 #ffffff44,0 0 14px #ffffff22}
.frame-crystal .avatar-frame-overlay,.profile-avatar-decorated.frame-crystal i{border:3px solid transparent;background:conic-gradient(from 45deg,#dff0ff,#fff,#c9e6ff,#fff,#dff0ff) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;filter:drop-shadow(0 0 8px #bfe3ff88);animation:crystalGleam 3.4s ease-in-out infinite}
.frame-minimal .avatar-frame-overlay,.profile-avatar-decorated.frame-minimal i{border:1.5px solid #ffffff88}
@keyframes crystalGleam{0%,100%{filter:drop-shadow(0 0 6px #bfe3ff66)}50%{filter:drop-shadow(0 0 13px #bfe3ffcc)}}
.profile-mini-effect-glitch .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;background:repeating-linear-gradient(0deg,transparent 0 3px,#fff2 3px 5px);animation:glitchPhoto .5s steps(2) infinite;mix-blend-mode:screen}
.profile-mini-effect-aurora .avatar-effect-overlay{inset:-12px;position:absolute;border-radius:50%;z-index:4;background:conic-gradient(from 0deg,#5cf6ff44,#a66cff55,#ff7ad955,#5cf6ff44);animation:auroraFrame 4s linear infinite}
.profile-mini-effect-matrix .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;background:repeating-linear-gradient(90deg,#3cff6b18 0 2px,transparent 2px 8px);animation:matrixMove 1s linear infinite}
.profile-mini-effect-electric .avatar-effect-overlay{inset:-9px;position:absolute;border-radius:50%;z-index:4;box-shadow:0 0 18px #63eaff;animation:electricFrame .4s steps(2) infinite}
.profile-mini-effect-galaxy .avatar-effect-overlay{inset:-10px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 70%,#fff 0 1px,transparent 2px),radial-gradient(circle at 50% 20%,#fff 0 1px,transparent 2px);animation:galaxyFrame 3s linear infinite}
/* --- WFNA: novos presets de efeito de perfil (lote 2) --- */
.profile-mini-effect-sakura .avatar-effect-overlay{inset:-10px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 20% 15%,#ffb3d9 0 3px,transparent 4px),radial-gradient(circle at 65% 55%,#ff8fc7 0 3px,transparent 4px),radial-gradient(circle at 40% 80%,#ffd6ea 0 3px,transparent 4px),radial-gradient(circle at 85% 30%,#ffb3d9 0 2px,transparent 3px);animation:sakuraFall 3s linear infinite}
.profile-mini-effect-bolhas .avatar-effect-overlay{inset:-10px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 25% 85%,#8ff2ff88 0 3px,transparent 4px),radial-gradient(circle at 60% 90%,#c2fbffaa 0 2px,transparent 3px),radial-gradient(circle at 45% 95%,#8ff2ff88 0 2px,transparent 3px);animation:bolhasRise 2.4s linear infinite}
.profile-mini-effect-meteoros .avatar-effect-overlay{inset:-12px;position:absolute;border-radius:50%;z-index:4;overflow:hidden;background:linear-gradient(115deg,transparent 40%,#fff 41%,#fff 42%,transparent 43%),linear-gradient(115deg,transparent 65%,#a9d4ff 66%,#a9d4ff 67%,transparent 68%);background-size:220% 220%;animation:meteorosSweep 1.4s linear infinite}
.profile-mini-effect-lava .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 50% 100%,#ff5a1f66,transparent 55%),radial-gradient(circle at 30% 90%,#ff8a3d55,transparent 45%);animation:lavaPulse 1.6s ease-in-out infinite alternate}
.profile-mini-effect-gelo .avatar-effect-overlay{inset:-9px;position:absolute;border-radius:50%;z-index:4;background:conic-gradient(from 0deg,#eafcff33,#bff3ff88,#eafcff33,#7fe3ff66,#eafcff33);animation:geloShimmer 3.5s linear infinite;box-shadow:0 0 14px #bff3ff88}
.profile-mini-effect-confete .avatar-effect-overlay{inset:-11px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 15% 25%,#ff5c7a 0 2px,transparent 3px),radial-gradient(circle at 75% 20%,#ffd75c 0 2px,transparent 3px),radial-gradient(circle at 30% 75%,#5cffb0 0 2px,transparent 3px),radial-gradient(circle at 80% 70%,#5cd8ff 0 2px,transparent 3px),radial-gradient(circle at 55% 45%,#a95cff 0 2px,transparent 3px);animation:confeteSpin 2.6s linear infinite}
.profile-mini-effect-sonar .avatar-effect-overlay{inset:-6px;position:absolute;border-radius:50%;z-index:4;border:2px solid #5cd8ffaa;animation:sonarPulse 1.8s ease-out infinite}
.profile-mini-effect-tempestade .avatar-effect-overlay{inset:-9px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle,#dfe8ff 0%,transparent 70%);opacity:0;animation:tempestadeFlash 2.4s steps(1) infinite}
.profile-mini-effect-nebulosa .avatar-effect-overlay{inset:-12px;position:absolute;border-radius:50%;z-index:4;background:conic-gradient(from 90deg,#6c4cff55,#2d1b63aa,#ff6ca055,#4c9bff55,#6c4cff55);filter:blur(1px);animation:nebulosaDrift 6s linear infinite}
.profile-mini-effect-ouro .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;overflow:hidden;background:linear-gradient(115deg,transparent 30%,#ffe9a3 45%,#fff6d6 50%,#ffe9a3 55%,transparent 70%);background-size:260% 260%;animation:ouroSweep 2.2s linear infinite;box-shadow:0 0 12px #ffdb7c66}
.profile-mini-effect-veneno .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 50% 50%,#8bff4d55,transparent 60%);animation:venenoPulse 1.4s ease-in-out infinite alternate;box-shadow:inset 0 0 20px #6fff3344}
.profile-mini-effect-fantasma .avatar-effect-overlay{inset:-11px;position:absolute;border-radius:50%;z-index:4;background:radial-gradient(circle at 40% 40%,#e8fff433,transparent 55%),radial-gradient(circle at 65% 65%,#c9fff044,transparent 50%);animation:fantasmaFloat 3.4s ease-in-out infinite}
.profile-mini-effect-circuito .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;background:repeating-linear-gradient(0deg,#3cff9022 0 2px,transparent 2px 9px),repeating-linear-gradient(90deg,#3cff9022 0 2px,transparent 2px 9px);animation:circuitoMove 1.2s linear infinite}
.profile-mini-effect-diamante .avatar-effect-overlay{inset:-10px;position:absolute;border-radius:50%;z-index:4;background:conic-gradient(from 0deg,#fff 0deg 2deg,transparent 2deg 44deg,#e8f6ff 44deg 46deg,transparent 46deg 90deg,#fff 90deg 92deg,transparent 92deg 134deg,#e8f6ff 134deg 136deg,transparent 136deg 180deg);animation:diamanteSpin 2.8s linear infinite}
.profile-mini-effect-oceano .avatar-effect-overlay{inset:-8px;position:absolute;border-radius:50%;z-index:4;overflow:hidden;background:repeating-linear-gradient(100deg,#2b8fd622 0 6px,#7fd4ff33 6px 12px);animation:oceanoWave 2s linear infinite}
.profile-mini-effect-entardecer .avatar-effect-overlay{inset:-9px;position:absolute;border-radius:50%;z-index:4;background:linear-gradient(200deg,#ff8a5c55,#ff5c9a55,#7a5cff55);background-size:200% 200%;animation:entardecerShift 4s ease-in-out infinite}
@keyframes glitchFrame{0%,100%{transform:translate(0)}25%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px)}}
@keyframes glitchPhoto{0%,100%{filter:none;transform:translate(0)}20%{filter:hue-rotate(40deg) saturate(1.4);transform:translate(-2px,1px)}40%{filter:hue-rotate(-50deg);transform:translate(2px,-1px)}60%{clip-path:inset(8% 0 62% 0)}80%{clip-path:inset(60% 0 8% 0)}}
@keyframes auroraFrame{to{transform:rotate(360deg)}}
@keyframes electricFrame{0%,100%{opacity:.9;filter:brightness(1)}50%{opacity:.55;filter:brightness(1.8)}}
@keyframes galaxyFrame{to{transform:rotate(360deg)}}
@keyframes holoFrame{0%,100%{opacity:.9}50%{opacity:.45;filter:hue-rotate(40deg)}}
@keyframes matrixMove{to{background-position:24px 0}}
@keyframes sakuraFall{0%{background-position:0 0,0 0,0 0,0 0}100%{background-position:-14px 30px,10px 34px,-8px 26px,12px 28px}}
@keyframes bolhasRise{0%{background-position:0 0,0 0,0 0;opacity:.9}100%{background-position:6px -40px,-8px -44px,4px -38px;opacity:.3}}
@keyframes meteorosSweep{0%{background-position:120% -20%,120% -20%}100%{background-position:-20% 120%,-20% 120%}}
@keyframes lavaPulse{0%{opacity:.55;transform:scale(.94)}100%{opacity:1;transform:scale(1.05)}}
@keyframes geloShimmer{to{transform:rotate(360deg)}}
@keyframes confeteSpin{to{transform:rotate(360deg)}}
@keyframes sonarPulse{0%{transform:scale(.75);opacity:1;box-shadow:0 0 0 0 #5cd8ff66}70%{opacity:.15}100%{transform:scale(1.35);opacity:0;box-shadow:0 0 0 12px #5cd8ff00}}
@keyframes tempestadeFlash{0%,88%,92%,100%{opacity:0}89%,91%{opacity:.85}}
@keyframes nebulosaDrift{to{transform:rotate(360deg)}}
@keyframes ouroSweep{0%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes venenoPulse{0%{opacity:.5;transform:scale(.92)}100%{opacity:1;transform:scale(1.06)}}
@keyframes fantasmaFloat{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(-4px);opacity:.9}}
@keyframes circuitoMove{to{background-position:9px 0,0 9px}}
@keyframes diamanteSpin{to{transform:rotate(360deg)}}
@keyframes oceanoWave{to{background-position:24px 0}}
@keyframes entardecerShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.server-branding-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px;border:1px solid var(--bg-hover);border-radius:14px;background:rgba(255,255,255,.025);margin-bottom:14px}.server-branding-box label{display:flex;flex-direction:column;gap:6px;color:var(--text-muted);font-size:13px}
@media(max-width:800px){.server-branding-box{grid-template-columns:1fr}}

@media(max-width:1180px){#user-bar{gap:5px;padding:8px}.admin-actions{width:100%;justify-content:flex-start}.admin-actions .btn{flex:1 1 110px}.admin-user{flex-wrap:wrap}.user-meta{min-width:80px}}
.server-call-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;padding:14px;z-index:8;overflow:auto;background:radial-gradient(circle at center,#201b38,#07080c 75%)}.server-call-grid.hidden{display:none}.server-call-tile{position:relative;min-height:150px;border-radius:14px;overflow:hidden;background:#11131b;border:1px solid #ffffff12;display:grid;place-items:center}.server-call-tile video{width:100%;height:100%;object-fit:contain}.server-call-tile-head{position:absolute;left:8px;top:8px;z-index:4;background:#08090dcc;padding:5px 8px;border-radius:8px;font-size:12px}.server-call-tile-avatar{position:absolute;inset:0;display:grid;place-items:center}.server-call-tile video:not(.hidden)+.server-call-tile-avatar{display:none}

.chat-peer-avatar{width:38px;height:38px;flex:0 0 38px}.chat-peer-avatar.hidden{display:none}.chat-peer-avatar .avatar-decorated{width:38px;height:38px}.chat-peer-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}


/* v8 hard fixes: banner is contained ONLY in the profile card */
#app-screen .profile-card-banner, #modal-profile .profile-card-banner { position:relative!important; width:100%!important; height:160px!important; min-height:160px!important; max-height:160px!important; overflow:hidden!important; background-size:cover!important; background-position:center!important; border-radius:16px 16px 0 0!important; }
#app-screen:not(:has(#modal-profile:not(.hidden))) .profile-card-banner { display:none!important; }
#modal-profile { z-index:10000!important; }
#modal-profile .profile-card { width:min(720px,calc(100vw - 40px))!important; max-width:720px!important; min-height:0!important; max-height:calc(100vh - 80px)!important; overflow:hidden!important; margin:auto!important; }
#modal-profile .profile-avatar { width:112px!important; height:112px!important; min-width:112px!important; min-height:112px!important; margin:-56px 0 0 30px!important; overflow:visible!important; }
#modal-profile .profile-avatar-decorated { width:100%!important; height:100%!important; }
#modal-profile .profile-card-body { padding:14px 30px 28px!important; }
#modal-profile .profile-effect-layer { position:absolute!important; inset:0!important; z-index:2!important; pointer-events:none!important; }
#modal-profile .profile-avatar { z-index:8!important; }
#modal-profile .profile-name-badge { display:inline-grid; place-items:center; width:32px; height:32px; margin-right:8px; vertical-align:middle; }
.wfna-profile-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; background:linear-gradient(135deg,#261d55,#17122c); border:1px solid #8c6cff55; color:#dcd3ff; font-weight:800; }
.wfna-profile-badge.active { box-shadow:0 0 18px #02d2e344; }
.wfna-profile-rocket { position:absolute!important; right:-8px!important; bottom:-5px!important; z-index:9!important; width:30px!important; height:30px!important; display:grid!important; place-items:center!important; font-size:20px!important; filter:drop-shadow(0 0 7px #02d2e3); animation:wfnaRocketFloat 1.8s ease-in-out infinite; pointer-events:none!important; }
@keyframes wfnaRocketFloat { 0%,100%{transform:translateY(2px) rotate(-8deg)}50%{transform:translateY(-5px) rotate(-8deg)} }
/* Full-profile effect overlays: visible over the avatar and inside the card. */
#modal-profile .profile-avatar-decorated .avatar-effect-overlay { position:absolute!important; inset:-7px!important; z-index:6!important; border-radius:50%!important; pointer-events:none!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-glitch img { animation:glitchPhoto .42s steps(2) infinite!important; filter:saturate(1.35) contrast(1.08)!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-glitch .avatar-effect-overlay { background:repeating-linear-gradient(0deg,transparent 0 3px,#fff3 3px 5px); mix-blend-mode:screen; animation:glitchPhoto .42s steps(2) infinite!important; box-shadow:inset 4px 0 #ff2d75,inset -4px 0 #21e6ff,0 0 24px #8b5cff88; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-aurora .avatar-effect-overlay { background:conic-gradient(from 0deg,#5cf6ff55,#a66cff66,#ff7ad955,#5cf6ff55); animation:auroraFrame 3s linear infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-matrix .avatar-effect-overlay { background:repeating-linear-gradient(90deg,#3cff6b22 0 2px,transparent 2px 8px); animation:matrixMove 1s linear infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-electric .avatar-effect-overlay { box-shadow:0 0 12px #63eaff,0 0 30px #2d9cff; animation:electricFrame .35s steps(2) infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-galaxy .avatar-effect-overlay { background:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 70%,#fff 0 1px,transparent 2px),radial-gradient(circle at 50% 20%,#fff 0 1px,transparent 2px); animation:galaxyFrame 3s linear infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-sakura .avatar-effect-overlay { background:radial-gradient(circle at 20% 15%,#ffb3d9 0 3px,transparent 4px),radial-gradient(circle at 65% 55%,#ff8fc7 0 3px,transparent 4px),radial-gradient(circle at 40% 80%,#ffd6ea 0 3px,transparent 4px),radial-gradient(circle at 85% 30%,#ffb3d9 0 2px,transparent 3px); animation:sakuraFall 3s linear infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-bolhas .avatar-effect-overlay { background:radial-gradient(circle at 25% 85%,#8ff2ff88 0 3px,transparent 4px),radial-gradient(circle at 60% 90%,#c2fbffaa 0 2px,transparent 3px),radial-gradient(circle at 45% 95%,#8ff2ff88 0 2px,transparent 3px); animation:bolhasRise 2.4s linear infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-meteoros .avatar-effect-overlay { overflow:hidden; background:linear-gradient(115deg,transparent 40%,#fff 41%,#fff 42%,transparent 43%),linear-gradient(115deg,transparent 65%,#a9d4ff 66%,#a9d4ff 67%,transparent 68%); background-size:220% 220%; animation:meteorosSweep 1.4s linear infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-lava .avatar-effect-overlay { background:radial-gradient(circle at 50% 100%,#ff5a1f66,transparent 55%),radial-gradient(circle at 30% 90%,#ff8a3d55,transparent 45%); animation:lavaPulse 1.6s ease-in-out infinite alternate!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-gelo .avatar-effect-overlay { background:conic-gradient(from 0deg,#eafcff33,#bff3ff88,#eafcff33,#7fe3ff66,#eafcff33); animation:geloShimmer 3.5s linear infinite!important; box-shadow:0 0 14px #bff3ff88; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-confete .avatar-effect-overlay { background:radial-gradient(circle at 15% 25%,#ff5c7a 0 2px,transparent 3px),radial-gradient(circle at 75% 20%,#ffd75c 0 2px,transparent 3px),radial-gradient(circle at 30% 75%,#5cffb0 0 2px,transparent 3px),radial-gradient(circle at 80% 70%,#5cd8ff 0 2px,transparent 3px),radial-gradient(circle at 55% 45%,#a95cff 0 2px,transparent 3px); animation:confeteSpin 2.6s linear infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-sonar .avatar-effect-overlay { border:2px solid #5cd8ffaa; animation:sonarPulse 1.8s ease-out infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-tempestade .avatar-effect-overlay { background:radial-gradient(circle,#dfe8ff 0%,transparent 70%); animation:tempestadeFlash 2.4s steps(1) infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-nebulosa .avatar-effect-overlay { background:conic-gradient(from 90deg,#6c4cff55,#2d1b63aa,#ff6ca055,#4c9bff55,#6c4cff55); filter:blur(1px); animation:nebulosaDrift 6s linear infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-ouro .avatar-effect-overlay { overflow:hidden; background:linear-gradient(115deg,transparent 30%,#ffe9a3 45%,#fff6d6 50%,#ffe9a3 55%,transparent 70%); background-size:260% 260%; animation:ouroSweep 2.2s linear infinite!important; box-shadow:0 0 12px #ffdb7c66; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-veneno .avatar-effect-overlay { background:radial-gradient(circle at 50% 50%,#8bff4d55,transparent 60%); animation:venenoPulse 1.4s ease-in-out infinite alternate!important; box-shadow:inset 0 0 20px #6fff3344; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-fantasma .avatar-effect-overlay { background:radial-gradient(circle at 40% 40%,#e8fff433,transparent 55%),radial-gradient(circle at 65% 65%,#c9fff044,transparent 50%); animation:fantasmaFloat 3.4s ease-in-out infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-circuito .avatar-effect-overlay { background:repeating-linear-gradient(0deg,#3cff9022 0 2px,transparent 2px 9px),repeating-linear-gradient(90deg,#3cff9022 0 2px,transparent 2px 9px); animation:circuitoMove 1.2s linear infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-diamante .avatar-effect-overlay { background:conic-gradient(from 0deg,#fff 0deg 2deg,transparent 2deg 44deg,#e8f6ff 44deg 46deg,transparent 46deg 90deg,#fff 90deg 92deg,transparent 92deg 134deg,#e8f6ff 134deg 136deg,transparent 136deg 180deg); animation:diamanteSpin 2.8s linear infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-oceano .avatar-effect-overlay { overflow:hidden; background:repeating-linear-gradient(100deg,#2b8fd622 0 6px,#7fd4ff33 6px 12px); animation:oceanoWave 2s linear infinite!important; }
#modal-profile .profile-avatar-decorated.profile-mini-effect-entardecer .avatar-effect-overlay { background:linear-gradient(200deg,#ff8a5c55,#ff5c9a55,#7a5cff55); background-size:200% 200%; animation:entardecerShift 4s ease-in-out infinite!important; }
/* Never let a profile/banner image become a full-chat image. */
#messages-list .chat-media img, #messages-list .chat-media video { max-width:100%!important; width:auto!important; max-height:460px!important; height:auto!important; object-fit:contain!important; margin:0 auto!important; }
#messages-list .message-content > img:not(.avatar-img) { max-width:min(520px,100%)!important; max-height:460px!important; object-fit:contain!important; }
/* Screen share: both presenter and viewer get a visible video surface. */
.call-bar.sharing .call-stage #local-video.is-screen-preview { display:block!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; right:0!important; bottom:0!important; object-fit:contain!important; z-index:2!important; background:#050609!important; }
.call-bar.sharing .call-stage #remote-video { display:block!important; position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:contain!important; z-index:1!important; }
/* Durante uma apresentação de tela (minha ou da outra pessoa) a tela ocupa
   o palco inteiro — os avatares circulares por cima dela é exatamente o bug
   "nossas fotos estão em cima da transmissão". Em vez de forçar os avatares
   pra cima do vídeo (como a regra antiga fazia com z-index:7), escondem-se
   os avatares nesse estado; a câmera de quem está apresentando (se também
   estiver ligada) aparece como uma bolinha própria (#local-camera-pip /
   #remote-camera-pip — ver call.js), não como o avatar estático. */
.call-bar.sharing .call-local-avatar, .call-bar.sharing .call-remote-avatar,
.call-bar.remote-sharing .call-local-avatar, .call-bar.remote-sharing .call-remote-avatar { display:none!important; }
.call-stage video { background:#050609; }
@media(max-width:760px){#modal-profile .profile-card{width:calc(100vw - 24px)!important}#modal-profile .profile-card-body{padding:14px 18px 24px!important}#modal-profile .profile-avatar{margin-left:18px!important}}

/* ===== v9 — profile sizing + microphone diagnostics hardening ===== */
#modal-profile {
  width: min(820px, calc(100vw - 32px)) !important;
  max-width: min(820px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
  overflow: auto !important;
  box-sizing: border-box !important;
  padding: 18px !important;
}
#modal-profile .profile-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 20px !important;
}
#modal-profile .profile-card-banner {
  width: 100% !important;
  height: clamp(110px, 16vw, 155px) !important;
  max-height: 155px !important;
  min-height: 110px !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden !important;
}
#modal-profile .profile-avatar {
  position: relative !important;
  width: clamp(88px, 10vw, 112px) !important;
  height: clamp(88px, 10vw, 112px) !important;
  min-width: 88px !important;
  min-height: 88px !important;
  max-width: 112px !important;
  max-height: 112px !important;
  margin: clamp(-48px, -5vw, -42px) 0 0 28px !important;
  border-width: 5px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}
#modal-profile .profile-avatar-decorated {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
#modal-profile .profile-avatar-decorated > .avatar-img,
#modal-profile .profile-avatar-decorated > span:not(.wfna-profile-rocket),
#modal-profile .profile-avatar-decorated > .avatar-fallback {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-sizing: border-box !important;
}
#modal-profile .profile-avatar-decorated .avatar-effect-overlay,
#modal-profile .profile-avatar-decorated .avatar-frame-overlay,
#modal-profile .profile-avatar-decorated .avatar-decoration-overlay {
  position: absolute !important;
  pointer-events: none !important;
  border-radius: 50% !important;
}
#modal-profile .profile-card-body {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 28px 24px !important;
  overflow-wrap: anywhere !important;
}
#modal-profile .profile-card-body h3,
#modal-profile .profile-card-body p,
#modal-profile .profile-card-body > span {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}
#modal-profile .profile-stats {
  flex-wrap: wrap !important;
}
#modal-profile .modal-actions {
  flex-wrap: wrap !important;
}
#modal-profile .profile-effect-layer {
  inset: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Profile effects should be visibly clipped to the avatar as well as the card. */
#modal-profile .profile-avatar-decorated.profile-mini-effect-glitch img {
  animation: glitchPhoto .38s steps(2) infinite !important;
}
#modal-profile .profile-avatar-decorated.profile-mini-effect-glitch .avatar-effect-overlay {
  inset: -4px !important;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.22) 3px 5px) !important;
  box-shadow: inset 4px 0 rgba(255,45,117,.9), inset -4px 0 rgba(33,230,255,.9), 0 0 24px rgba(139,92,255,.55) !important;
}

/* Never allow profile media to participate in page sizing. */
#modal-profile img,
#modal-profile video,
#modal-profile canvas {
  max-width: 100% !important;
}

/* The microphone meter must represent silence as zero; no artificial 3% floor. */
#settings-mic-meter {
  position: relative !important;
  min-height: 10px !important;
}
#settings-mic-meter::after {
  width: var(--level, 0%) !important;
  min-width: 0 !important;
  transition: width .04s linear !important;
}
#settings-mic-test-status {
  line-height: 1.5 !important;
  min-height: 20px !important;
}

@media (max-width: 700px) {
  #modal-profile {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    padding: 10px !important;
  }
  #modal-profile .profile-avatar {
    margin-left: 18px !important;
  }
  #modal-profile .profile-card-body {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}


/* ===== v10 hardening ===== */
/* Avatar/profile media can never determine the size of the application. */
#modal-profile .profile-avatar,
#modal-profile .profile-avatar-view,
#modal-profile .profile-avatar-decorated {
  width:112px !important;
  height:112px !important;
  min-width:112px !important;
  max-width:112px !important;
  min-height:112px !important;
  max-height:112px !important;
  flex:0 0 112px !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
#modal-profile .profile-avatar-decorated > .avatar-img,
#modal-profile .profile-avatar-decorated > .avatar-fallback,
#modal-profile .profile-avatar-decorated > span:not(.wfna-profile-rocket) {
  width:112px !important;
  height:112px !important;
  min-width:112px !important;
  max-width:112px !important;
  min-height:112px !important;
  max-height:112px !important;
  object-fit:cover !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
}
#modal-profile .profile-card { width:min(760px,calc(100vw - 32px)) !important; max-width:min(760px,calc(100vw - 32px)) !important; overflow:hidden !important; }
#modal-profile { width:min(800px,calc(100vw - 20px)) !important; max-width:min(800px,calc(100vw - 20px)) !important; overflow:auto !important; overflow-x:hidden !important; box-sizing:border-box !important; }
#modal-profile .profile-card-banner { width:100% !important; max-width:100% !important; height:150px !important; max-height:150px !important; }
#modal-profile img,#modal-profile video,#modal-profile canvas { max-width:100% !important; }

/* Admin panel: dense but responsive instead of crossing the screen. */
.modal-admin .admin-users { display:flex; flex-direction:column; gap:12px; max-height:55vh; overflow:auto; }
.modal-admin .admin-user { display:grid; grid-template-columns:44px minmax(150px,1fr); gap:10px; align-items:start; }
.modal-admin .admin-actions { grid-column:1/-1; display:grid !important; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:6px; width:100% !important; }
.modal-admin .admin-actions .btn { min-width:0 !important; width:100% !important; white-space:normal; }
.admin-tools-hint { opacity:.65; font-size:12px; align-self:center; }

/* Voice channels are visual destinations, not a row of call buttons. */
.channel-item[data-channel-type="voice"] .channel-name::before { content:''; }

/* More admin effect particles. */
.admin-effect-overlay[data-effect="blackout"] { background:#000 !important; }
.admin-effect-overlay[data-effect="disco"] { animation:wcDisco .35s steps(2) infinite; }
@keyframes wcDisco { 0%{filter:hue-rotate(0deg)} 50%{filter:hue-rotate(180deg) brightness(1.7)} 100%{filter:hue-rotate(360deg)} }

/* ================================================================
   WifiCord Responsive System — consolidated final layer
   The legacy file contains older responsive rules; this section is
   intentionally last so the layout has one deterministic contract.
   ================================================================ */
:root {
  --wc-rail: clamp(64px, 5vw, 76px);
  --wc-sidebar: clamp(210px, 18vw, 260px);
  --wc-members: clamp(210px, 18vw, 255px);
  --wc-gap: clamp(8px, 1vw, 16px);
  --wc-control: clamp(42px, 4vw, 48px);
}

html { overflow: hidden; }
body { min-width: 0; min-height: 100dvh; overflow: hidden; }
#app-screen {
  width: 100%;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  grid-template-columns: var(--wc-rail) var(--wc-sidebar) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
#server-rail,
#sidebar,
#main-panel,
#members-panel { min-width: 0; min-height: 0; }
#server-rail { position: relative; inset: auto; transform: none; width: auto; height: 100%; overflow-x: hidden; overflow-y: auto; }
#sidebar { position: relative; inset: auto; transform: none; width: auto; height: 100%; overflow: hidden; }
#main-panel { grid-column: 3; grid-row: 1; width: 100%; height: 100%; overflow: hidden; min-width: 0; }
#dm-panel, #channels-panel { min-width: 0; min-height: 0; overflow: auto; }
#members-panel { grid-column: 4; grid-row: 1; width: var(--wc-members); height: 100%; overflow: hidden; }
#app-screen.with-members { grid-template-columns: var(--wc-rail) var(--wc-sidebar) minmax(0, 1fr) var(--wc-members); }
#app-screen.with-members #main-panel { grid-column: 3; grid-row: 1; }
#app-screen.with-members #members-panel { grid-column: 4; grid-row: 1; display: flex; }

#chat-header { min-width: 0; flex: 0 0 auto; }
#chat-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header-actions { min-width: max-content; }
#messages-list { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; }
#message-form { min-width: 0; width: 100%; box-sizing: border-box; }
/* O textarea precisa dividir o espaço com os botões de mídia/emoji/figurinha
   e o botão "Enviar" dentro do mesmo container flex. "width: 100%" força o
   item a pedir 100% da largura do container mesmo com os irmãos ocupando
   espaço, o que é a causa estrutural do botão "Enviar" ficar espremido ou
   parcialmente fora da área visível quando o painel de membros está aberto
   ou a janela é mais estreita. "flex: 1 1 0%" faz o textarea crescer/encolher
   corretamente dentro do espaço realmente disponível, sempre respeitando os
   botões ao lado. */
#message-input { min-width: 0; flex: 1 1 0%; width: auto; resize: none; box-sizing: border-box; }
.message-content, .message-text, .message-item { min-width: 0; overflow-wrap: anywhere; }

.avatar-img,
.avatar-fallback,
.avatar-decorated .avatar-img,
.avatar-decorated .avatar-fallback,
.profile-avatar-decorated img,
.chat-peer-avatar img,
.server-member-avatar img,
.call-participant-avatar img,
.server-call-tile-avatar img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.avatar-wrap,
.chat-peer-avatar,
.server-member-avatar,
.call-participant-avatar,
.server-call-tile-avatar,
.avatar-decorated,
.profile-avatar-decorated { overflow: hidden; }

/* Desktop/tablet: never let the old mobile drawer rules activate here. */
#mobile-menu-btn { display: none; }
@media (min-width: 681px) {
  #server-rail, #sidebar { position: relative !important; transform: none !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; }
  #main-panel { padding-top: 0 !important; }
  #app-screen { grid-template-columns: var(--wc-rail) var(--wc-sidebar) minmax(0, 1fr) !important; }
  #app-screen.with-members { grid-template-columns: var(--wc-rail) var(--wc-sidebar) minmax(0, 1fr) var(--wc-members) !important; }
  #app-screen.with-members #members-panel { display: flex !important; }
  #mobile-menu-btn { display: none !important; }
}

@media (max-width: 1080px) and (min-width: 681px) {
  :root { --wc-sidebar: 220px; }
  #app-screen.with-members { grid-template-columns: var(--wc-rail) var(--wc-sidebar) minmax(0, 1fr) 220px !important; }
  #members-panel { width: 220px; }
  .admin-user { grid-template-columns: 44px minmax(0, 1fr); }
  .admin-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 900px) and (min-width: 681px) {
  #app-screen { grid-template-columns: 68px minmax(200px, 220px) minmax(0, 1fr) !important; }
  #app-screen.with-members { grid-template-columns: 68px minmax(200px, 220px) minmax(0, 1fr) !important; }
  #app-screen.with-members #members-panel { display: none !important; }
  #sidebar { width: auto; }
  .settings-content { min-width: 0; }
}

/* Real mobile: only when there genuinely is not enough CSS viewport space. */
@media (max-width: 680px) {
  #app-screen { display: grid; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr); }
  #server-rail, #sidebar {
    position: fixed !important;
    top: 0 !important; bottom: 0 !important;
    height: 100dvh !important;
    z-index: 10030 !important;
    transform: translateX(-120%) !important;
    transition: transform .2s ease;
  }
  #server-rail { left: 0 !important; width: 68px !important; }
  #sidebar { left: 68px !important; width: min(300px, calc(100vw - 68px)) !important; }
  #app-screen.nav-open #server-rail,
  #app-screen.nav-open #sidebar { transform: translateX(0) !important; }
  #mobile-menu-btn { display: grid !important; place-items: center; }
  #main-panel { grid-column: 1; grid-row: 1; padding-top: 0 !important; }
  #members-panel { position: fixed; inset: 0 0 0 auto; width: min(320px, 88vw); z-index: 10040; }
  #app-screen.with-members #members-panel { display: flex !important; }
  #app-screen.with-members { grid-template-columns: minmax(0, 1fr) !important; }
  #chat-header { padding: 10px 12px; min-height: 56px; }
  .chat-header-actions { gap: 2px; }
  .chat-header-actions .btn-icon { min-width: 40px; min-height: 40px; }
  #message-form { gap: 6px; padding: 8px; }
  .composer-tools { gap: 3px; }
  .composer-btn { width: 38px; min-width: 38px; }
  #message-form > .btn { min-width: 68px; padding-inline: 10px; }
}

/* ================================================================
   Call UI — Discord-like interaction model, WifiCord identity
   ================================================================ */
.call-bar {
  position: relative !important;
  z-index: 20 !important;
  width: min(100% - 20px, 1180px);
  max-width: none !important;
  margin: 8px auto 0;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-left: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  background: #0a0910 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.call-stage {
  position: relative !important;
  width: 100% !important;
  /* flex (não height fixo em vh) deixa o stage ceder espaço pro resto da
     coluna (topbar da chamada + controles + o que sobra da janela) em vez
     de sempre exigir 52vh mesmo quando isso não cabe — ver comentário em
     .call-bar acima sobre o bug de sobreposição em janelas mais baixas. */
  flex: 1 1 auto !important;
  min-height: 220px !important;
  max-height: calc(100dvh - 220px) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 35%, #25203d, #08080d 72%) !important;
  border-radius: 16px 16px 10px 10px !important;
}
.call-stage-topbar {
  position: absolute; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(5,5,10,.8), transparent);
  pointer-events: none;
}
.call-stage-title, .call-stage-peer { display: flex; align-items: center; gap: 8px; min-width: 0; }
.call-stage-title strong { font-size: 13px; }
.call-stage-peer { color: #aaa2c4; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-stage-title #call-connection-status { color: #a9a1bb; font-size: 11px; }
#call-connection-status[data-state="connected"] { color: #65e59b; }
#call-connection-status[data-state="reconnecting"], #call-connection-status[data-state="connecting"] { color: #f2c76a; }
#call-connection-status[data-state="failed"] { color: #ff7d86; }
.call-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #f2c76a; box-shadow: 0 0 12px #f2c76a; }
.call-bar:not(.call-reconnecting) .call-live-dot { animation: wcCallPulse 1.8s ease-in-out infinite; }
.call-bar:not(.call-reconnecting) #call-connection-status[data-state="connected"] + * { color: inherit; }
@keyframes wcCallPulse { 50% { opacity: .45; transform: scale(.8); } }

/* Bolinha de qualidade da chamada (RTT/perda de pacote via getStats) */
.call-quality-dot { width: 7px; height: 7px; border-radius: 50%; background: #6a6478; flex: 0 0 auto; }
.call-quality-dot[data-quality="good"] { background: #63e8a3; box-shadow: 0 0 8px rgba(99,232,163,.6); }
.call-quality-dot[data-quality="ok"] { background: #f2c76a; box-shadow: 0 0 8px rgba(242,199,106,.55); }
.call-quality-dot[data-quality="poor"] { background: #ff7d86; box-shadow: 0 0 8px rgba(255,125,134,.6); }
.call-quality-dot[data-quality="unknown"] { background: #6a6478; box-shadow: none; }

/* Volume individual do participante (chamada 1:1) */
.call-stage-peer-wrap { display: flex; align-items: center; gap: 4px; min-width: 0; pointer-events: auto; }
.call-volume-group { position: relative; }
.call-volume-btn { width: 26px !important; height: 26px !important; min-width: 26px; font-size: 13px !important; background: rgba(255,255,255,.08) !important; margin-left: 0 !important; }
.call-volume-btn:hover { background: rgba(255,255,255,.16) !important; }
.call-volume-menu { bottom: auto; top: calc(100% + 8px); left: auto; right: 0; min-width: 180px; }
.call-volume-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; color: #cfc9e0; white-space: nowrap; }
.call-volume-row input[type="range"] { flex: 1; accent-color: var(--accent-primary-start, #02d2e3); }
#call-remote-volume-value { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: #fff; }

.call-stage > #remote-video,
.call-stage > #local-video { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; background: #050609; }
.call-stage > #remote-video { z-index: 1; object-fit: contain !important; }
.call-stage > #local-video { z-index: 5; inset: auto 16px 16px auto; width: clamp(120px, 17vw, 220px) !important; height: clamp(78px, 11vw, 132px) !important; border: 2px solid rgba(255,255,255,.14); border-radius: 14px; object-fit: cover !important; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.call-stage > #local-video.hidden { display: none !important; }
.call-bar.audio-call #local-video, .call-bar.audio-call #remote-video { display: none !important; }
.call-bar.sharing #local-video.is-screen-preview { inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; border: 0; border-radius: 0; z-index: 2 !important; }
.call-bar.sharing #remote-video, .call-bar.remote-sharing #remote-video { z-index: 1 !important; }

/* Bolinhas de câmera (Discord-like) que aparecem SÓ enquanto uma
   apresentação de tela está rolando E a câmera de quem apresenta também
   está ligada — câmera e tela agora chegam em faixas separadas (ver
   call.js), então as duas podem estar ativas ao mesmo tempo sem uma cortar
   a outra. Cantos opostos aos da pré-visualização de tela pra nunca
   sobrepor: a minha (#local-camera-pip) no canto onde a câmera normal já
   fica; a da outra pessoa (#remote-camera-pip) no canto oposto. */
#local-camera-pip, #remote-camera-pip {
  position: absolute; z-index: 6; width: clamp(100px, 14vw, 168px); height: clamp(66px, 9vw, 108px);
  border: 2px solid rgba(255,255,255,.16); border-radius: 12px; object-fit: cover;
  background: #050609; box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
#local-camera-pip { right: 16px; bottom: 16px; }
#remote-camera-pip { left: 16px; bottom: 16px; }
#local-camera-pip.hidden, #remote-camera-pip.hidden { display: none !important; }

.call-stage .call-participant-avatar {
  position: absolute !important; left: 50% !important; top: 50% !important;
  width: clamp(82px, 10vw, 124px) !important; height: clamp(82px, 10vw, 124px) !important;
  transform: translate(-50%, -50%); z-index: 8;
  border: 4px solid rgba(255,255,255,.1) !important;
  border-radius: 50%; background: #211d36;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  overflow: hidden !important;
}
.call-stage .call-participant-avatar img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; }
.call-stage .call-remote-avatar { transform: translate(calc(-50% - clamp(55px, 7vw, 86px)), -50%); }
.call-stage .call-local-avatar { transform: translate(calc(-50% + clamp(55px, 7vw, 86px)), -50%); width: clamp(70px, 8vw, 104px) !important; height: clamp(70px, 8vw, 104px) !important; }
.call-stage .call-participant-avatar.speaking { border-color: #63e8a3 !important; box-shadow: 0 0 0 6px rgba(99,232,163,.15), 0 18px 50px rgba(0,0,0,.45); }
.call-stage .call-stage-empty { z-index: 0; font-size: clamp(36px, 5vw, 64px); opacity: .12; }
.call-stage .call-screen-label { position: absolute; left: 14px; bottom: 14px; z-index: 25; padding: 7px 10px; border-radius: 9px; background: rgba(7,7,12,.78); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px); font-size: 11px; font-weight: 800; }

.call-controls {
  position: relative !important; z-index: 40 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-wrap: wrap; gap: 8px; padding: 12px !important;
  background: #111019 !important; border-top: 1px solid rgba(255,255,255,.07);
}
.call-control-group { position: relative; display: inline-flex; align-items: center; }
.call-btn, .call-device-arrow {
  width: var(--wc-control) !important; height: var(--wc-control) !important;
  min-width: var(--wc-control); border-radius: 50% !important;
  display: grid; place-items: center; background: #28243a !important;
  color: #f4f0ff; font-size: 18px; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.call-btn:hover, .call-device-arrow:hover { background: #39324f !important; transform: translateY(-1px); }
.call-btn:focus-visible, .call-device-arrow:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
.call-btn-off { background: #5d2630 !important; }
.call-btn-active { background: #315d65 !important; box-shadow: 0 0 0 3px rgba(34,211,238,.12); }
.call-btn-danger { background: #b83c4b !important; }
.call-device-arrow { width: 24px !important; min-width: 24px; height: 30px !important; margin-left: -12px; border-radius: 0 50% 50% 0 !important; font-size: 13px; z-index: 2; }
.call-device-menu { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 100; min-width: 220px; max-width: min(320px, 80vw); max-height: 260px; overflow: auto; padding: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: #171522; box-shadow: 0 18px 45px rgba(0,0,0,.5); }
.call-device-menu button { display: block; width: 100%; padding: 9px 10px; border-radius: 8px; background: transparent; color: #eee; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-device-menu button:hover { background: #29233e; }

.server-call-grid { position: absolute !important; inset: 0 !important; z-index: 10 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); grid-auto-rows: minmax(150px, 1fr); gap: 10px; padding: 14px; overflow: auto; background: #08080d; }
.server-call-grid.hidden { display: none !important; }
.server-call-tile { position: relative; min-width: 0; min-height: 150px; overflow: hidden; border-radius: 14px; background: #11131b; border: 1px solid rgba(255,255,255,.08); }
.server-call-tile video { display: block; width: 100%; height: 100%; object-fit: contain; }
.server-call-tile-head { position: absolute; left: 9px; top: 9px; z-index: 4; display: flex; gap: 7px; align-items: center; max-width: calc(100% - 18px); padding: 6px 9px; border-radius: 8px; background: rgba(8,9,14,.78); backdrop-filter: blur(10px); font-size: 12px; }
.server-call-tile-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-call-tile-state { color: #9d95b8; font-size: 10px; }
.server-call-tile-avatar { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: radial-gradient(circle, #28213f, #09090e); }
.server-call-tile-avatar img { width: clamp(58px, 7vw, 96px) !important; height: clamp(58px, 7vw, 96px) !important; border-radius: 50%; object-fit: cover; }
/* Quem não tem foto de perfil usa avatarMarkup() com uma bolinha com a
   inicial do nome (.call-avatar-fallback) em vez de <img> — essa classe só
   tinha estilo dentro de .call-participant-avatar (chamada 1:1), nunca
   aqui dentro de .server-call-tile-avatar (chamada de servidor/grupo), então
   pra quem não tinha avatar a "bolinha" saía sem tamanho/círculo nenhum,
   quase invisível — dando a impressão de retângulo vazio/preto no quadro
   dela em vez de um avatar de verdade. */
.server-call-tile-avatar .call-avatar-fallback { width: clamp(58px, 7vw, 96px); height: clamp(58px, 7vw, 96px); border-radius: 50%; display: grid; place-items: center; background: #252140; color: #fff; font-weight: 800; font-size: clamp(20px, 3vw, 34px); }
.server-call-tile video:not(.hidden) + .server-call-tile-avatar { display: none; }
.server-call-tile-volume-wrap { position: absolute; right: 8px; bottom: 8px; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: rgba(8,9,14,.78); backdrop-filter: blur(10px); opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.server-call-tile:hover .server-call-tile-volume-wrap,
.server-call-tile:focus-within .server-call-tile-volume-wrap { opacity: 1; transform: translateY(0); }
.server-call-tile-volume-icon { font-size: 11px; flex: 0 0 auto; }
.server-call-tile-volume { width: 70px; accent-color: var(--accent-primary-start, #02d2e3); }
@media (hover: none) { .server-call-tile-volume-wrap { opacity: 1; transform: none; } }

/* right/bottom/left/top e max-width AQUI NÃO usam !important de propósito:
   é a posição de reserva (só entra em ação se, por algum motivo, o
   #user-bar não for encontrado na hora). O posicionamento normal vem de
   positionMiniDock() em call.js, que calcula left/bottom/max-width por
   JS pra grudar o dock bem em cima do cartão do seu usuário (em vez de
   flutuar solto num canto qualquer da tela) — estilo inline sempre vence
   uma regra do CSS sem !important, então isso não atrapalha o JS. */
.mini-call-dock { position: fixed !important; z-index: 10020 !important; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); left: auto; top: auto; width: fit-content; max-width: calc(100vw - 24px); display: flex; align-items: center; gap: 6px; padding: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(20,18,30,.94); backdrop-filter: blur(14px); box-shadow: 0 14px 40px rgba(0,0,0,.45); cursor: pointer; }
.mini-call-dock button { width: 34px; height: 34px; border-radius: 10px; background: #29243c; color: #fff; }
.mini-call-dock button:hover { background: #3b3356; }
.mini-call-dock button.danger { background: #9e3342; }
.mini-call-status { color: #c8c1db; font-size: 11px; font-weight: 700; padding: 0 5px; }
/* Some enquanto o Meia-Lua está em tela cheia (ver updateMeiaLuaFullscreenBtn
   em games.js) — sem isso esses elementos fixos de z-index altíssimo ficam
   flutuando por cima do jogo mesmo dentro do :fullscreen de verdade. */
.mini-call-dock.meialua-fs-hide, .call-float-popup.meialua-fs-hide { display: none !important; }

/* =======================================================================
   Popup flutuante da apresentação de tela (#call-float-popup)
   ========================================================================
   O JS (updateFloatPopup em call.js) sempre existiu e sempre calculou
   certinho quando mostrar isso — só que o elemento nunca tinha HTML nem
   CSS nenhum, então `$('call-float-popup')` sempre voltava null e a
   função inteira desistia na primeira linha (`if (!el.floatPopup) return`).
   Na prática o recurso nunca apareceu pra ninguém. Isso aqui é o visual
   que faltava: uma janelinha arrastável (ver bindFloatPopupDrag em
   call.js) que aparece quando você sai da tela da call (troca de canal/DM)
   enquanto alguém — você mesmo ou outra pessoa — continua apresentando a
   tela, do jeito que o Discord/Meet fazem com "picture-in-picture".
   ================================================================ */
.call-float-popup {
  position: fixed !important;
  z-index: 10021 !important;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(84px, env(safe-area-inset-bottom));
  left: auto;
  top: auto;
  width: min(340px, calc(100vw - 24px));
  border-radius: 14px;
  overflow: hidden;
  background: #0b0a11;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 55px rgba(0,0,0,.55);
  transition: opacity .15s ease, transform .15s ease;
}
.call-float-popup.hidden { display: none !important; }
.call-float-popup.dragging { transition: none; }
.call-float-handle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 6px 7px 12px; cursor: grab; background: rgba(20,18,30,.96);
  border-bottom: 1px solid rgba(255,255,255,.08); user-select: none;
}
.call-float-popup.dragging .call-float-handle { cursor: grabbing; }
.call-float-name { font-size: 12px; font-weight: 700; color: #e9e6f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-float-handle-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.call-float-icon-btn { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: transparent; color: #cfc9e0; font-size: 13px; }
.call-float-icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.call-float-body { position: relative; width: 100%; aspect-ratio: 16/9; background: #050609; display: flex; }
.call-float-body video { width: 100%; height: 100%; object-fit: contain; background: #050609; }
.call-float-body video.hidden { display: none; }
.call-float-popup.split .call-float-body { gap: 2px; }
.call-float-popup.split .call-float-body video { width: 50%; }
.call-float-switcher { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: rgba(20,18,30,.96); }
.call-float-switcher.hidden { display: none; }
.call-float-pill { padding: 5px 10px; border-radius: 999px; background: #241f38; color: #cfc9e0; font-size: 11px; font-weight: 700; }
.call-float-pill:hover { background: #342c53; }
.call-float-pill.active { background: var(--accent-primary-start, #02d2e3); color: #fff; }
@media (max-width: 680px) {
  .call-float-popup { width: min(260px, calc(100vw - 24px)); bottom: max(76px, env(safe-area-inset-bottom)); }
}

@media (max-width: 680px) {
  .call-bar { width: calc(100% - 12px); margin: 6px auto 0; border-radius: 14px !important; }
  .call-stage { height: min(56vh, 460px) !important; min-height: 230px !important; }
  .call-stage > #local-video { width: 116px !important; height: 78px !important; right: 10px; bottom: 10px; border-radius: 10px; }
  .call-stage .call-participant-avatar { width: 76px !important; height: 76px !important; }
  .call-stage .call-local-avatar { width: 62px !important; height: 62px !important; }
  .call-stage .call-remote-avatar { transform: translate(calc(-50% - 38px), -50%); }
  .call-stage .call-local-avatar { transform: translate(calc(-50% + 38px), -50%); }
  .call-controls { gap: 6px; padding: 9px !important; }
  .call-device-arrow { display: none; }
  .call-device-menu { left: 50%; transform: translateX(-50%); }
  .server-call-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(180px, 1fr); padding: 8px; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .call-stage { height: calc(100dvh - 150px) !important; min-height: 190px !important; }
  .call-stage-topbar { padding: 7px 10px; }
  .call-controls { padding: 7px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Chamada recebida — visual mais próximo do Discord: avatar grande com anel
   pulsando enquanto toca, e botões circulares de aceitar/recusar. */
.modal-incoming-call {
  width: min(340px, calc(100vw - 32px));
  text-align: center;
  padding-top: 32px;
}
.incoming-call-avatar-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.incoming-call-avatar {
  position: relative;
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--bg-elevated); overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  animation: wcIncomingRing 1.4s ease-in-out infinite;
}
.incoming-call-avatar img { width: 100%; height: 100%; object-fit: cover; }
.incoming-call-avatar .call-avatar-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-size: 30px; font-weight: 800; color: #fff; background: var(--accent-primary-start); }
@keyframes wcIncomingRing {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(74,222,128,.35); }
  50% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 12px rgba(74,222,128,0); }
}
.modal-incoming-call h3 { margin: 0 0 4px; }
.modal-incoming-call #incoming-call-text { margin: 0 0 22px; }
.incoming-call-actions { display: flex; justify-content: center; gap: 28px; }
.incoming-call-btn {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 22px; color: #fff; display: grid; place-items: center;
  transition: transform .15s ease, filter .15s ease;
}
.incoming-call-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.incoming-call-btn:active { transform: scale(.94); }
.incoming-call-reject { background: var(--danger); }
.incoming-call-accept { background: var(--status-online); }

/* =========================================================================
   AJUSTES: bolhas de mensagem estilo chat (minhas à direita, outras à
   esquerda), destaque de mensagem fixada e transições mais suaves.
   ========================================================================= */
.message-item {
  align-items: flex-end;
  transition: background .18s ease;
}
.message-item.own {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.message-item .message-body {
  max-width: 68%;
  display: flex;
  flex-direction: column;
}
.message-item:not(.own) .message-body { align-items: flex-start; }
.message-item.own .message-body { align-items: flex-end; }
.message-item.own .message-header { flex-direction: row-reverse; }
.message-item.own .message-reactions { justify-content: flex-end; }

.message-item .message-content {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 14px 14px 14px 4px;
  padding: 8px 12px;
  transition: transform .15s ease, box-shadow .15s ease, background .18s ease;
}
.message-item.own .message-content {
  background: linear-gradient(135deg, var(--accent, #02d2e3), #02a3b0);
  border-color: transparent;
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.message-item .message-content:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.message-item.own .message-time { color: rgba(255, 255, 255, .75); }

/* Mensagem fixada: destaque visível na própria mensagem, não só no ícone */
.message-item.pinned {
  background: rgba(2, 210, 227, .07);
  border-radius: 10px;
}
.message-item.pinned .message-content {
  border-color: rgba(2, 210, 227, .45);
  box-shadow: 0 0 0 1px rgba(2, 210, 227, .25);
}

/* Mensagem que me menciona: destaque na mensagem inteira (igual ao Discord),
   não só no pedacinho "@fulano" dentro dela — antes só o texto do @ ficava
   amarelo, o resto da mensagem passava despercebido na rolagem do chat. */
.message-item.mentions-me {
  background: rgba(251, 191, 36, .09);
  border-radius: 10px;
  box-shadow: inset 2px 0 0 rgba(251, 191, 36, .55);
}
.message-item.mentions-me .message-content {
  border-color: rgba(251, 191, 36, .4);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, .22);
}
.message-pinned-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--accent-secondary, #02d2e3);
  background: rgba(2,210,227, .14);
  padding: 2px 7px;
  border-radius: 999px;
  animation: pinned-tag-in .22s ease both;
}
.message-pinned-tag .icon-svg { width: 11px; height: 11px; }
@keyframes pinned-tag-in {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: scale(1); }
}
.message-pin-btn { transition: opacity .12s ease, background .12s ease, color .12s ease, transform .12s ease; }
.message-item.pinned .message-pin-btn { transform: rotate(-25deg); }

/* Barra fixa de "tem mensagem fixada" acima do chat (ver index.html,
   #pinned-bar) — some quando o canal não tem nenhuma fixada. */
.pinned-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(2, 210, 227, .1);
  border-bottom: 1px solid rgba(2, 210, 227, .22);
  cursor: pointer;
  flex: 0 0 auto;
}
.pinned-bar:hover { background: rgba(2, 210, 227, .16); }
.pinned-bar.hidden { display: none; }
.pinned-bar-icon { flex: 0 0 auto; font-size: 13px; }
.pinned-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text-secondary, #c8c3d6);
}
.pinned-bar-text strong { color: var(--text-primary, #eee); font-weight: 700; }
.pinned-bar-viewall {
  flex: 0 0 auto;
  background: rgba(2, 210, 227, .18);
  color: var(--accent-secondary, #02d2e3);
  border: none;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.pinned-bar-viewall:hover { background: rgba(2, 210, 227, .3); }

/* Lista dentro do modal "Mensagens fixadas" (ver openPinnedMessagesModal
   em client/js/app.js). */
.pinned-messages-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.pinned-message-item {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-elevated, #201c2e);
  border: 1px solid rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.pinned-message-item:hover { background: rgba(2, 210, 227, .1); border-color: rgba(2, 210, 227, .3); }
.pinned-message-author {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-primary, #eee);
  margin-bottom: 3px;
}
.pinned-message-author .message-time { font-weight: 500; color: var(--text-muted, #9a95ab); font-size: 11px; }
.pinned-message-content {
  font-size: 13px;
  color: var(--text-secondary, #c8c3d6);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Reações com pequena entrada suave */
.message-reactions .message-reaction {
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.message-reactions .message-reaction:hover { transform: translateY(-1px) scale(1.05); }

/* Avatar com leve resposta ao passar o mouse, mais "vivo" */
.message-avatar img, .message-avatar .avatar-fallback {
  transition: transform .18s ease;
}
.message-item:hover .message-avatar img,
.message-item:hover .message-avatar .avatar-fallback {
  transform: scale(1.04);
}

/* =========================================================================
   CORREÇÕES DE BUGS + REFINAMENTO VISUAL (varredura completa)
   ========================================================================= */

/* --- BUG: avatar das mensagens sem tamanho definido, colapsava e ficava
   um circulozinho torto sobreposto na bolha --- */
.message-avatar { width: 40px; height: 40px; }
.message-avatar .avatar-decorated { width: 40px; height: 40px; }

/* --- BUG: cards da loja com o botão "Comprar" cortado na borda do modal
   (coluna interna do grid não encolhia e a linha extrapolava o card) --- */
.store-items {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}
.store-item {
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  overflow: hidden;
}
.store-item-info { min-width: 0; }
.store-item-info strong { display: block; overflow-wrap: break-word; }
.store-item .btn { white-space: nowrap; }

/* --- Tipografia geral: um pouco mais de peso/contraste nos títulos --- */
.sidebar-header h2 { font-weight: 800; letter-spacing: -.01em; }
#chat-title, .chat-title { font-weight: 800; letter-spacing: -.01em; }
.sidebar-section h3, .members-panel-header, .member-role-group h4 {
  font-weight: 800;
}

/* --- Scrollbar customizada (o padrão do navegador quebra o clima) --- */
* { scrollbar-width: thin; scrollbar-color: #3a3457 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #3a3457; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: #4a4270; }

/* --- Botões com mais profundidade e resposta ao toque --- */
.btn {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 2px 6px rgba(0, 0, 0, .18);
  transition: transform .12s ease, opacity .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .28); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-primary {
  box-shadow: 0 4px 16px rgba(2, 210, 227, .35);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(2, 210, 227, .5); }

/* --- Rail de servidores com mais profundidade --- */
#server-rail { box-shadow: 2px 0 12px rgba(0, 0, 0, .2); }
.server-item, .rail-btn {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  transition: border-radius .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.server-item:hover, .rail-btn:hover { transform: translateY(-2px); }
.server-item.active, .rail-btn.active {
  box-shadow: 0 4px 14px rgba(2, 210, 227, .45);
}

/* --- Campo de mensagem com foco mais elegante --- */
.message-form textarea {
  border-radius: 14px;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.message-form textarea:focus {
  box-shadow: 0 0 0 2px rgba(2, 210, 227, .45);
}

/* --- Cards elevados (loja, modais) com leve efeito hover --- */
.store-item, .wfna-card, .friend-item, .channel-item {
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.store-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .35);
  border-color: rgba(2, 210, 227, .35);
}

/* --- Modal com entrada mais suave e fundo com leve blur --- */
.modal-overlay { backdrop-filter: blur(6px); }
.modal { box-shadow: 0 24px 64px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04); }

/* =========================================================================
   IDENTIDADE VISUAL — WifiCord
   Paleta: violeta de sinal + âmbar de transmissão (referência ao nome/wifi)
   sobre um fundo quase-preto azulado. Tipografia: Space Grotesk para marca
   e títulos, Inter para o resto — dois papéis nítidos, não um genérico só.
   ========================================================================= */
:root {
  --bg-deepest: #05060C;
  --bg-dark: #0A0C16;
  --bg-main: #10121D;
  --bg-elevated: #171A28;
  --bg-hover: #1F2333;
  --accent-primary-start: #02d2e3;
  --accent-primary-end: #22D3EE;
  --accent-signal: #22D3EE;
  --font-display: "Space Grotesk", var(--font-body);
}

.auth-brand h1, .loading-mark, .sidebar-header h2, #chat-title, .chat-title,
.store-header h3, .modal h3, .profile-card-body h3 {
  font-family: var(--font-display);
  letter-spacing: -.01em;
}

/* --- Selo de sinal: o motivo de marca do WifiCord (arcos de transmissão) --- */
.signal-mark { position: relative; width: 168px; height: 168px; margin: 0 auto; color: var(--accent-primary-start); }
.signal-mark-sm { width: 76px; height: 76px; }
.signal-dot {
  position: absolute; left: 10%; bottom: 10%; width: 15%; height: 15%;
  border-radius: 50%;
  background: var(--accent-primary-start);
}
.signal-arc {
  position: absolute; left: 10%; bottom: 10%;
  border-style: solid; border-width: 4px; border-color: transparent;
  border-top-color: currentColor; border-right-color: currentColor;
  border-radius: 50%; opacity: 0;
  animation: signalPulse 2.6s ease-out infinite;
}
.signal-arc-1 { width: 38%; height: 38%; animation-delay: 0s; color: var(--accent-signal); }
.signal-arc-2 { width: 66%; height: 66%; animation-delay: .35s; color: var(--accent-primary-start); }
.signal-arc-3 { width: 96%; height: 96%; animation-delay: .7s; color: var(--accent-primary-end); }
@keyframes signalPulse {
  0% { opacity: 0; transform: scale(.72) rotate(0deg); }
  18% { opacity: .95; }
  100% { opacity: 0; transform: scale(1) rotate(0deg); }
}
.reduce-motion .signal-arc { animation: none; opacity: .8; }

/* --- Tela de carregamento --- */
.loading-screen { gap: 18px !important; }
.loading-mark { font-size: 30px; font-weight: 700; }
#loading-phrase { color: var(--text-muted); font-size: 13px; margin: -8px 0 0; min-height: 1em; }

/* --- Tela de login: painel dividido, com o selo de sinal como o momento
   de destaque, em vez do cartão genérico centralizado com blobs --- */
#auth-screen {
  background: var(--bg-deepest);
  padding: 24px;
}
.auth-shell {
  display: grid;
  grid-template-columns: 1fr 400px;
  width: 100%;
  max-width: 940px;
  min-height: 560px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--bg-elevated);
}
.auth-showcase {
  position: relative;
  background: var(--bg-dark);
  border-right: 1px solid var(--bg-elevated);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.auth-showcase-title {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}
.auth-showcase-sub {
  margin: 0;
  max-width: 30ch;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.auth-card {
  width: 100%;
  max-width: none;
  background: var(--bg-main);
  border: none;
  border-radius: 0;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brand-logo { border-radius: 6px; }
.brand-logo img { border-radius: 6px; }
@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; max-width: 420px; }
  .auth-showcase { display: none; }
  .auth-card { padding: 32px 26px; }
}

/* --- Hierarquia de raio: elementos interativos (botões, avatares, pílulas,
   painéis flutuantes como modais) ficam arredondados; a grade principal do
   app permanece reta, como convém a um layout de colunas encostadas --- */
.message-form textarea { border-radius: var(--radius-md); }

/* =========================================================================
   CONTROLES DE FORMULÁRIO PERSONALIZADOS
   Nada de widget padrão do sistema operacional: checkbox vira interruptor,
   select ganha seta e menu no estilo do site, range ganha trilho e alça
   próprios, e o campo de cor ganha uma moldura consistente com o resto.
   ========================================================================= */

/* --- Checkbox → interruptor (toggle) --- */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 40px !important;
  height: 22px !important;
  min-width: 40px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-hover);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
  transition: background .2s ease, border-color .2s ease;
}
input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #cfc9e0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s ease;
}
input[type="checkbox"]:checked {
  background: var(--accent-primary-start);
  border-color: transparent;
}
input[type="checkbox"]:checked::after { transform: translateX(18px); background: #fff; }
input[type="checkbox"]:disabled { opacity: .4; cursor: not-allowed; }
input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px rgba(143, 104, 255, .4); }
.settings-toggle { cursor: pointer; }

/* --- Select: reset do widget nativo + seta própria --- */
select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: var(--bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239d95b8' stroke-width='2'%3E%3Cpath d='M6 8l4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  color: var(--text-primary);
  border: 1px solid var(--bg-hover);
  border-radius: var(--radius-sm);
  padding: 10px 34px 10px 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
select:hover { border-color: var(--accent-primary-start); }
select:focus { outline: none; border-color: var(--accent-secondary); }
select option { background: var(--bg-elevated); color: var(--text-primary); }

/* --- Range slider --- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--bg-hover);
  border: none;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-primary-start), var(--accent-primary-end));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent-primary-start);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  transition: transform .12s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--bg-hover);
}
input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-primary-start), var(--accent-primary-end));
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent-primary-start);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

/* --- Campo de cor: moldura própria em volta do seletor nativo --- */
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 32px;
  padding: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 6px; }

/* =========================================================================
   POLIMENTO PROFISSIONAL — micro-transições, profundidade e o novo fluxo
   de troca de foto/banner (lápis sobre o avatar, como referência de sites
   premium). Tudo aqui é aditivo sobre o sistema visual existente.
   ========================================================================= */

/* --- Easing consistente para qualquer coisa que já tenha transition --- */
button, a, .btn, .btn-icon, input, textarea, select,
.rail-btn, .server-item, .friend-item, .channel-item, .settings-tab,
.modal, .toast, .status-dot, input[type="checkbox"], input[type="checkbox"]::after {
  transition-timing-function: cubic-bezier(.2, .7, .2, 1);
}

/* --- Scrollbar discreta, no tom do app --- */
* { scrollbar-width: thin; scrollbar-color: var(--bg-hover) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent-primary-start); }

/* --- Botões: leve elevação ao passar o mouse/pressionar --- */
.btn, .btn-icon, .rail-btn, .server-item {
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .16s ease, background .16s ease, border-radius .16s ease, opacity .16s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn-primary:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.btn:active, .btn-primary:active { transform: scale(.98); }
.rail-btn:hover, .server-item:hover { box-shadow: none; }
.server-item.active, .rail-btn.active { box-shadow: none; }

/* --- Itens de lista (canais, amigos, abas de configurações) --- */
.friend-item, .channel-item, .friend-request-item {
  transition: background .16s ease, transform .16s cubic-bezier(.2, .7, .2, 1), padding-left .16s ease;
}
.friend-item:hover, .channel-item:hover { padding-left: 12px; }

.settings-tab {
  position: relative;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.settings-tab:active { transform: scale(.98); }
.settings-tab.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent-primary-start);
}

/* --- Modais: entrada suave (sem mexer no JS que só alterna .hidden) --- */
.modal-overlay:not(.hidden) { animation: wcOverlayIn .18s ease both; }
.modal:not(.hidden) { animation: wcModalIn .22s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes wcOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wcModalIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.reduce-motion .modal-overlay:not(.hidden),
.reduce-motion .modal:not(.hidden) { animation: none; }

/* --- Interruptores: reforço do formato pílula + brilho quando ativo --- */
input[type="checkbox"] { box-sizing: border-box; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
input[type="checkbox"]:checked { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
input[type="checkbox"]:hover { border-color: var(--accent-primary-start); }

/* --- Troca de foto/banner estilo Discord: lápis sobre a mídia --- */
.settings-avatar-wrap { position: relative; display: inline-block; width: 100px; height: 100px; margin: 8px 0; }
.settings-avatar-wrap .settings-avatar-preview { margin: 0; cursor: pointer; }
.profile-banner-preview { position: relative; cursor: pointer; }
.media-edit-btn {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 3px solid var(--bg-main);
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .16s ease, transform .16s cubic-bezier(.2, .7, .2, 1), border-color .16s ease;
}
.media-edit-btn:hover { background: var(--accent-primary-start); transform: scale(1.08); }
.media-edit-btn:active { transform: scale(.94); }
.media-edit-btn-banner { right: 10px; bottom: 10px; border-color: var(--bg-elevated); background: rgba(15, 11, 30, .65); backdrop-filter: blur(4px); }
.media-edit-btn-banner:hover { background: var(--accent-primary-start); }
.server-icon-wrap { position: relative; display: inline-block; width: 72px; height: 72px; margin-top: 6px; }
.server-icon-preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #292440; display: block; cursor: pointer; }
.server-banner-box { position: relative; height: 84px; border-radius: 10px; background: #292440 center/cover; cursor: pointer; margin-top: 6px; }

/* ===================================================================
   REDESIGN — Dark glass premium, limpo (bloco único, substitui versões anteriores)
   =================================================================== */
:root{
  --rd-purple:#02d2e3; --rd-purple-2:#3adde9; --rd-purple-3:#22D3EE; --rd-purple-deep:#02a3b0;
  --rd-panel:var(--bg-main);
  --rd-border:var(--bg-elevated);
  --rd-border-glow:rgba(2,210,227,.28);
  --rd-shadow:0 6px 18px rgba(0,0,0,.3);
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }
*{ box-sizing:border-box; }

/* --- Fundo --- */
body{ padding:0; background: var(--bg-deepest); }

/* --- Casca do app --- */
#app-screen{
  height:100dvh !important; width:100% !important; margin:0 !important;
  border-radius:0 !important; overflow:hidden !important;
  background:var(--bg-deepest); border:none;
}

/* --- Rail: só ícones sobre o fundo, sem cartão próprio --- */
#server-rail{ display:flex !important; flex-direction:column; align-items:center; gap:10px; padding:18px 10px; min-width:0; }
.rail-logo{
  width:38px; height:38px; border-radius:50%; margin-bottom:6px; flex-shrink:0; display:grid; place-items:center;
  background:radial-gradient(circle at 32% 28%, var(--rd-purple-3), var(--rd-purple-deep) 72%);
  box-shadow:0 0 18px rgba(2,210,227,.5);
}
.rail-logo span{ width:13px; height:13px; border-radius:50%; background:rgba(255,255,255,.4); }
.rail-btn{
  width:42px !important; height:42px !important; flex-shrink:0; display:grid !important; place-items:center;
  border-radius:13px !important; color:var(--text-muted) !important;
  background:transparent !important; border:1px solid transparent !important;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.rail-btn:hover{ background:rgba(255,255,255,.05) !important; color:var(--text-primary) !important; }
.rail-btn.active, .server-item.active{
  background:rgba(2,210,227,.18) !important; border:1px solid var(--rd-border-glow) !important;
  color:#fff !important; box-shadow:0 0 16px rgba(2,210,227,.3) !important;
}
.rail-divider{ width:22px; height:1px; background:rgba(255,255,255,.08); margin:4px 0; }

/* --- Painel de Amigos: ÚNICA camada de vidro desta coluna --- */
#sidebar{
  display:flex !important; flex-direction:column; min-width:0;
  margin:0; border-radius:0;
  background:var(--bg-elevated);
  border-right:1px solid var(--bg-deepest);
}
#dm-panel, #channels-panel{ display:flex; flex-direction:column; min-width:0; min-height:0; }

/* Cabeçalho do sidebar (título "Amigos" / nome do servidor + ações).
   Causa raiz do corte: o título tinha overflow:hidden (necessário para o
   ellipsis) mas nenhum piso de largura nem prioridade sobre os botões de
   ação. Em flexbox, overflow != visible zera a largura mínima automática
   do item, então ele encolhia antes mesmo de faltar espaço de verdade.
   Agora: o título tem prioridade (flex-basis maior, cresce para preencher),
   e as ações nunca encolhem (flex:0 0 auto). Se ainda assim não couber tudo
   numa linha, o cabeçalho quebra (flex-wrap) e as ações vão para a linha de
   baixo — sem cortar nome nem botão. O ellipsis só entra quando o nome é
   realmente maior que a linha inteira disponível. */
.sidebar-header{
  display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between;
  gap:6px 12px; padding:22px 20px 4px;
}
.sidebar-header > div,
.sidebar-header > h2{ min-width:0; flex:1 1 140px; }
.sidebar-header h2{ font-family:var(--font-display); font-size:19px; font-weight:800; margin:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-header-sub{ margin:3px 0 0; font-size:11.5px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-header .channel-header-actions{ flex:0 0 auto; min-width:max-content; }
.sidebar-header .btn-small, #add-friend-btn{
  flex-shrink:0;
  background:var(--rd-purple) !important;
  border:none !important; border-radius:4px !important; padding:8px 12px !important;
  font-weight:600; font-size:12.5px; white-space:nowrap;
  transition:background .15s ease;
}
.sidebar-header .btn-small:hover, #add-friend-btn:hover{ background:var(--rd-purple-deep) !important; }

.friend-search-wrap{ padding:14px 20px 2px; position:relative; }
.friend-search-input{
  width:100%; padding:10px 14px 10px 34px; border-radius:11px; border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03); color:var(--text-primary); font-size:13px; outline:none;
  transition:border-color .18s ease, background .18s ease;
}
.friend-search-wrap::before{ content:''; position:absolute; left:14px; top:50%; width:13px; height:13px; transform:translateY(-50%); opacity:.5; pointer-events:none; background:currentColor; -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>') center/contain no-repeat; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>') center/contain no-repeat; }
.friend-search-input::placeholder{ color:var(--text-muted); }
.friend-search-input:focus{ border-color:var(--rd-purple); background:rgba(2,210,227,.05); }

/* Seções sem "caixa": só rótulo + conteúdo + linha fina de separação */
.sidebar-section{ padding:18px 20px; margin:0; border-top:1px solid rgba(255,255,255,.05); }
.sidebar-section:first-of-type{ border-top:none; }
.sidebar-section h3{
  font-size:10.5px; font-weight:800; letter-spacing:.1em; opacity:.5; margin:0 0 10px; text-transform:uppercase;
}
.list{ gap:2px; }
.list .list-item, .list li:not(.empty-state):not(.error-state){
  border-radius:10px !important; padding:8px 8px !important; transition:background .15s ease;
}
.list .list-item:hover, .list li:not(.empty-state):hover{ background:rgba(255,255,255,.045) !important; }

/* Estado vazio: sem card, sem borda pontilhada — só texto discreto com um ícone pequeno */
.empty-state{
  list-style:none; display:flex; align-items:center; gap:9px; padding:6px 2px;
  color:var(--text-muted); font-size:13px; line-height:1.5; background:none; border:none;
}
.empty-state::before{ content:''; }

/* --- Perfil (user-bar) --- */
#user-bar{
  margin:0 14px 14px; padding:10px 12px !important;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); border-radius:14px;
}
#user-bar .avatar-fallback, #user-bar .avatar-img{ box-shadow:0 0 0 2px rgba(2,210,227,.4); }

/* --- Área principal / header --- */
#main-panel{ display:flex !important; flex-direction:column; min-width:0; }
#chat-header{ padding:18px 24px 14px; background:transparent; border-bottom:1px solid rgba(255,255,255,.05); min-width:0; }
.chat-title-wrap{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; overflow:hidden; }
#chat-header h2{ font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-title-sub{ margin:0; font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#main-panel:has(#messages-list:not(:empty)) .chat-title-sub{ display:none; }
.chat-header-actions{ flex-shrink:0; }
.chat-header-actions .btn-icon{
  width:38px; height:38px; flex-shrink:0; display:grid; place-items:center;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:11px;
  transition:border-color .18s ease, background .18s ease;
}
.chat-header-actions .btn-icon:hover{ border-color:var(--rd-border-glow); background:rgba(2,210,227,.08); }

/* --- Hero de estado vazio: focal, mas contido --- */
.messages-list:empty{ display:none; }
.chat-empty-hero{ display:none; }
#messages-list:empty ~ .chat-empty-hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  flex:1; gap:18px; padding:32px 24px; position:relative; min-height:0;
  /* Sem overflow:hidden aqui, se essa área ficar espremida (call-bar + composer
     ocupando quase tudo) o conteúdo (ícone/título/cartões) vazava pra cima dos
     vizinhos em vez de só cortar — segurança extra além do fix de flex acima. */
  overflow: hidden;
}
.chat-empty-icon{
  position:relative; z-index:1; width:110px; height:110px; display:grid; place-items:center; font-size:44px;
  border-radius:12px; background:rgba(2,210,227,.12); border:1px solid rgba(2,210,227,.25);
}
.chat-empty-title{ position:relative; z-index:1; margin:0; font-family:var(--font-display); font-size:clamp(24px,3vw,34px); font-weight:700; }
.chat-empty-title span{ color:var(--rd-purple-3); }
.chat-empty-sub{ position:relative; z-index:1; margin:0; color:var(--text-muted); font-size:14px; max-width:420px; }
.chat-empty-cards{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:4px; max-width:720px; }
.chat-empty-card{
  display:flex; align-items:center; gap:10px; text-align:left; width:auto;
  padding:12px 16px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05);
  transition:background .18s ease, border-color .18s ease;
}
.chat-empty-card:hover{ background:rgba(2,210,227,.06); border-color:rgba(2,210,227,.2); }
.chat-empty-card-icon{ font-size:17px; flex-shrink:0; opacity:.85; }
.chat-empty-card b{ display:block; font-size:13px; font-weight:700; }
.chat-empty-card small{ display:block; color:var(--text-muted); font-size:11px; }

/* --- Barra de mensagem: flutuante, um contêiner só --- */
#message-form{
  background:var(--bg-main) !important;
  border:1px solid var(--bg-elevated) !important; border-radius:8px !important;
  margin:0 18px 18px !important; padding:10px 14px !important;
  display:flex; align-items:center; gap:8px; min-width:0;
  transition:border-color .2s ease;
}
#message-form:focus-within{ border-color:var(--rd-border-glow) !important; }
#message-input{ background:transparent !important; border:none !important; font-size:14px; min-width:0; }
.composer-btn{ width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; border-radius:10px; font-size:16px; transition:background .15s ease; }
.composer-btn:hover{ background:rgba(255,255,255,.05); }
#message-form .btn-primary{
  flex-shrink:0;
  background:var(--rd-purple) !important;
  border:none !important; border-radius:4px !important; padding:10px 16px !important;
  font-weight:600; font-size:13.5px;
  transition:background .15s ease;
}
#message-form .btn-primary:hover{ background:var(--rd-purple-deep) !important; }
#message-form .btn-primary:active{ transform:scale(.97); }

/* --- Modais: mesma linguagem, sem excesso de borda --- */
.modal, #modal-overlay .modal{
  background:var(--bg-main) !important;
  border:1px solid var(--bg-elevated) !important; border-radius:8px !important; box-shadow:var(--rd-shadow) !important;
}
.settings-nav{ background:transparent !important; }
.settings-pane input, .settings-pane textarea, .settings-pane select{
  border-color:rgba(255,255,255,.07) !important; background:rgba(255,255,255,.03) !important;
}

/* --- Responsivo --- */
@media (max-width:900px){
  #sidebar{ margin:10px; border-radius:16px; }
  .chat-empty-icon{ width:92px; height:92px; font-size:38px; }
  .chat-empty-cards{ flex-direction:column; align-items:stretch; }
}
@media (max-width:640px){
  body{ padding:0; }
  #app-screen{ border-radius:0 !important; height:100dvh !important; width:100% !important; }
  #sidebar{ margin:0; border-radius:0; }
  #message-form{ margin:0 10px 10px !important; border-radius:16px !important; }
}


/* ===================== PERFIL PRO / CUSTOMIZÁVEL ===================== */
.profile-editor-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.profile-editor-head h4{font-size:25px!important;margin:0 0 6px!important}
.wc-profile-editor{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:24px;align-items:start}
.wc-profile-controls{min-width:0}
.wc-editor-section{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.wc-editor-section:first-child{padding-top:4px}
.wc-editor-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px}
.wc-editor-section-title span{font-weight:800;color:#f4f0ff;font-size:14px}
.wc-editor-section-title small{color:#77728d;font-size:11px}
.wc-editor-grid,.wc-select-grid,.wc-color-grid,.wc-name-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wc-editor-grid label:nth-child(4),.wc-editor-section>label{grid-column:1/-1}
.wc-editor-section label{margin:0!important;color:#9b96ad!important;font-size:12px!important}
.wc-editor-section input,.wc-editor-section textarea,.wc-editor-section select{box-sizing:border-box;margin-top:6px!important;width:100%;min-width:0;padding:10px 11px!important;border:1px solid rgba(255,255,255,.08)!important;background:rgba(15,13,26,.72)!important;border-radius:10px!important;color:#eee!important;outline:none}
.wc-editor-section textarea{min-height:74px;resize:vertical}
.wc-editor-section input:focus,.wc-editor-section textarea:focus,.wc-editor-section select:focus{border-color:#29d8e6!important;box-shadow:0 0 0 3px rgba(2,210,227,.12)}
.wc-color-grid{grid-template-columns:repeat(4,1fr);margin-top:12px}
.wc-color-grid input{height:40px;padding:3px!important;cursor:pointer}
.wc-name-options{grid-template-columns:repeat(4,1fr);margin-top:12px}
.wc-name-options input[type=color]{height:40px;padding:3px!important}
.wc-name-options input[type=range]{accent-color:#8b63ff;padding:0!important}
.wc-media-actions{display:grid;gap:10px}
.wc-media-box{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.018)}
.wc-media-box strong,.wc-media-box small{display:block}.wc-media-box strong{font-size:13px;color:#eee}.wc-media-box small{font-size:11px;color:#77728d;margin-top:3px}
.wc-media-thumb{width:48px;height:48px;border-radius:11px;background:#1b1730 center/cover no-repeat;border:1px solid rgba(255,255,255,.08)}
.wc-media-avatar-thumb{border-radius:50%}
.wc-preset-row{display:flex;flex-wrap:wrap;gap:7px}
.wc-preset-row button{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#a7a2b8;border-radius:9px;padding:8px 10px;cursor:pointer;transition:.16s}
.wc-preset-row button:hover,.wc-preset-row button.active{background:rgba(2,210,227,.14);border-color:rgba(150,119,255,.55);color:#eee;transform:translateY(-1px)}
.wc-connections-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:8px}
.wc-hidden-field{display:none!important}

/* --- Seletor de cosméticos em cards (efeitos/aura/moldura) — usado no
   painel "✨ Perfil WFNA" e na seção "Decoração". Genérico o bastante pra
   nunca precisar de HTML novo quando um efeito é adicionado em
   cosmetics-data.js: é só entrar na lista lá e um card nasce aqui. --- */
.wc-cosmetic-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.wc-cosmetic-presets button{border:1px solid rgba(255,255,255,.09);background:linear-gradient(160deg,rgba(2,210,227,.14),rgba(255,255,255,.02));color:#d8d3ec;border-radius:11px;padding:8px 13px;cursor:pointer;font-size:12.5px;font-weight:650;transition:.16s;display:inline-flex;align-items:center;gap:6px}
.wc-cosmetic-presets button:hover{border-color:rgba(150,119,255,.6);transform:translateY(-1px)}
#wc-cosmetic-surprise{margin-bottom:14px}
.wc-cosmetic-toolbar{display:flex;flex-direction:column;gap:9px;margin:4px 0 16px}
.wc-cosmetic-toolbar input[type=search]{box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid rgba(255,255,255,.08);background:rgba(15,13,26,.72);border-radius:10px;color:#eee;outline:none}
.wc-cosmetic-toolbar input[type=search]:focus{border-color:#29d8e6;box-shadow:0 0 0 3px rgba(2,210,227,.12)}
.wc-cosmetic-chips{display:flex;flex-wrap:wrap;gap:6px}
.wc-cosmetic-chip{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);color:#8f8aa5;border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;cursor:pointer;letter-spacing:.02em;transition:.15s}
.wc-cosmetic-chip:hover{color:#d8d3ec}
.wc-cosmetic-chip.active{background:rgba(2,210,227,.22);border-color:rgba(150,119,255,.65);color:#fff}
.wc-cosmetic-section{margin-bottom:8px}
.wc-cosmetic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:9px}
.wc-cosmetic-grid-compact{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.wc-cosmetic-grid:empty::after{content:attr(data-empty);grid-column:1/-1;color:#6f6a80;font-size:12.5px;padding:18px 0;text-align:center}
.wc-cosmetic-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 6px 9px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.02);color:#c7c2da;cursor:pointer;transition:.15s;text-align:center}
.wc-cosmetic-card:hover{border-color:rgba(150,119,255,.4);transform:translateY(-1px);background:rgba(2,210,227,.07)}
.wc-cosmetic-card:focus-visible,.wc-cc-fav:focus-visible{outline:2px solid #29d8e6;outline-offset:2px}
.wc-cosmetic-card.active{border-color:var(--wc-rarity,#29d8e6);background:linear-gradient(160deg,color-mix(in srgb,var(--wc-rarity,#29d8e6) 20%,transparent),rgba(255,255,255,.02));box-shadow:0 0 0 1px var(--wc-rarity,#29d8e6),0 6px 18px -8px var(--wc-rarity,#29d8e6)}
.wc-cosmetic-card .wc-cc-icon{font-size:22px;line-height:1}
.wc-cosmetic-card .wc-cc-name{font-size:11px;font-weight:650;color:#e8e4f6;line-height:1.2}
.wc-cosmetic-card .wc-cc-rarity{position:absolute;left:8px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--wc-rarity,#9aa0ac);box-shadow:0 0 6px var(--wc-rarity,#9aa0ac)}
.wc-cosmetic-card .wc-cc-fav{position:absolute;right:5px;top:5px;background:none;border:0;color:#4d4860;font-size:13px;cursor:pointer;padding:3px;line-height:1;border-radius:6px}
.wc-cosmetic-card .wc-cc-fav:hover{color:#e8c94a}
.wc-cosmetic-card .wc-cc-fav.is-fav{color:#ffd76b}
.wc-cosmetic-card.is-locked{opacity:.5}
.wc-cosmetic-card.is-locked .wc-cc-name::after{content:' 🔒'}
.wc-editor-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:18px}
.wc-profile-live{position:sticky;top:0;min-width:0}
.wc-live-label{display:flex;justify-content:space-between;align-items:center;margin:3px 0 10px;color:#8d88a0;font-size:10px;letter-spacing:.14em;font-weight:800}
.wc-live-label small{letter-spacing:0;color:#6f6a80;font-weight:600}
.wc-preview-card{--p1:#02d2e3;--p2:#24104d;--pa:#c59cff;--pt:#f6f1ff;position:relative;overflow:hidden;border:1px solid var(--bg-elevated);border-radius:8px;background:var(--bg-main);box-shadow:0 8px 24px rgba(0,0,0,.35);color:var(--pt)}
.wc-preview-banner{height:130px;background:radial-gradient(circle at 70% 30%,var(--p1),var(--p2) 62%,#08080e);background-position:center;background-size:cover}
.wc-preview-avatar-wrap{position:relative;width:88px;height:88px;margin:-44px 0 0 22px;border:5px solid #151321;border-radius:50%;background:#211b37;z-index:2;box-shadow:0 12px 35px rgba(0,0,0,.35)}
.wc-preview-avatar{width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:30px;font-weight:800}
.wc-preview-avatar img{width:100%;height:100%;object-fit:cover}
.wc-preview-avatar-wrap[data-frame=neon]{box-shadow:0 0 0 2px var(--pa),0 0 25px var(--p1)}
.wc-preview-avatar-wrap[data-frame=galactic]{box-shadow:0 0 0 2px #4de3ee,0 0 0 6px rgba(2,210,227,.15),0 0 30px rgba(2,210,227,.55)}
.wc-preview-avatar-wrap[data-frame=chrome]{box-shadow:0 0 0 3px #d7d9e8,0 0 20px rgba(220,220,255,.25)}
.wc-preview-avatar-wrap[data-frame=holographic]{box-shadow:0 0 0 2px #7cf7dc,0 0 24px rgba(124,247,220,.35)}
.wc-preview-body{padding:12px 22px 22px}
.wc-preview-name-row{display:flex;align-items:center;gap:8px;min-width:0}
.wc-preview-name-row h3{margin:0;color:var(--pt);font-size:var(--name-size);font-weight:var(--name-weight);line-height:1.15;min-width:0;word-break:break-word}
.wc-preview-name-row #wc-preview-nameplate{font-size:8px;padding:4px 6px;border-radius:5px;background:rgba(255,255,255,.08);color:var(--pa);font-weight:800;letter-spacing:.08em;white-space:nowrap}
.wc-preview-username{display:block;color:#858095;font-size:12px;margin-top:4px}
.wc-preview-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.wc-preview-badges span{font-size:11px;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.055);color:#cfc9dd}
.wc-preview-bio{font-size:12px;line-height:1.55;color:#a6a0b3;min-height:38px;margin:13px 0 10px}
.wc-preview-status,.wc-preview-activity{padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.035);font-size:11px;color:#c4bfd0;margin-top:7px}
.wc-preview-activity b,.wc-preview-activity strong,.wc-preview-activity small{display:block}.wc-preview-activity strong{color:#eee;margin-top:3px}.wc-preview-activity small{color:#77728d;margin-top:2px}
.wc-preview-connections{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.wc-preview-connections span{font-size:10px;color:#9f96b7}
.wc-live-hint{font-size:10px;line-height:1.5;color:#666177;margin:10px 2px}
.profile-card{--profile-color:#02d2e3;--profile-secondary:#24104d;--profile-accent:#c59cff;--profile-text:#f6f1ff;background:var(--bg-main)!important;border:1px solid var(--bg-elevated)!important;box-shadow:0 8px 24px rgba(0,0,0,.35)!important}
.modal-profile{width:min(760px,calc(100vw - 30px))!important;max-height:calc(100vh - 30px)!important;background:transparent!important;border:0!important;padding:0!important}
.profile-card-banner{height:185px!important;position:relative}
.profile-card-banner-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(12,11,18,.35))}
.profile-avatar{position:relative!important;width:116px!important;height:116px!important;margin:-58px 0 0 30px!important;border:6px solid #171424!important;background:#211b37!important;z-index:4!important}
.profile-card-body{padding:14px 30px 28px!important}
.profile-identity-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.profile-identity{min-width:0}
.profile-name-wrap{display:flex;align-items:center;gap:8px;min-width:0}
.profile-name-wrap h3{margin:0!important;font-size:var(--name-size,30px)!important;font-weight:var(--name-weight,700)!important;color:var(--profile-text)!important;line-height:1.15;word-break:break-word}
.profile-name-wrap #profile-nameplate{font-size:9px;padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.07);color:var(--profile-accent);font-weight:800;letter-spacing:.08em}
.profile-card[data-font=modern] #profile-name,.wc-preview-card[data-font=modern] #wc-preview-name{font-family:Inter,system-ui,sans-serif}
.profile-card[data-font=elegant] #profile-name,.wc-preview-card[data-font=elegant] #wc-preview-name{font-family:Georgia,serif}
.profile-card[data-font=pixel] #profile-name,.wc-preview-card[data-font=pixel] #wc-preview-name{font-family:"Courier New",monospace;letter-spacing:.02em}
.profile-card[data-font=retro] #profile-name,.wc-preview-card[data-font=retro] #wc-preview-name{font-family:"Trebuchet MS",sans-serif}
.profile-card[data-font=cyber] #profile-name,.wc-preview-card[data-font=cyber] #wc-preview-name{font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:.04em}
.profile-card[data-font=gothic] #profile-name,.wc-preview-card[data-font=gothic] #wc-preview-name{font-family:"Times New Roman",serif;letter-spacing:.02em}
.profile-card[data-font=bold] #profile-name,.wc-preview-card[data-font=bold] #wc-preview-name{font-family:Arial,sans-serif;font-weight:900!important}
.profile-card[data-font=rounded] #profile-name,.wc-preview-card[data-font=rounded] #wc-preview-name{font-family:"Trebuchet MS",Arial,sans-serif;border-radius:12px}
.profile-card[data-name-effect=neon] #profile-name,.wc-preview-card[data-effect=neon] #wc-preview-name{color:#fff!important;text-shadow:0 0 8px var(--profile-accent),0 0 24px var(--profile-color)}
.profile-card[data-name-effect=glow] #profile-name,.wc-preview-card[data-effect=glow] #wc-preview-name{color:#fff!important;text-shadow:0 0 14px var(--profile-color)}
.profile-card[data-name-effect=shimmer] #profile-name,.wc-preview-card[data-effect=shimmer] #wc-preview-name{background:linear-gradient(90deg,var(--profile-text),var(--profile-accent),var(--profile-text));background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent!important}
.profile-card[data-name-effect=rainbow] #profile-name,.wc-preview-card[data-effect=rainbow] #wc-preview-name{background:linear-gradient(90deg,#ff6bcb,#4de3ee,#54e6ff,#73f59a,#ffdf6b,#ff6bcb);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent!important}
.profile-card[data-name-effect=gold] #profile-name,.wc-preview-card[data-effect=gold] #wc-preview-name{color:#ffe29a!important;text-shadow:0 0 14px rgba(255,208,94,.3)}
.profile-card[data-name-effect=ice] #profile-name,.wc-preview-card[data-effect=ice] #wc-preview-name{color:#dff8ff!important;text-shadow:0 0 14px #8beaff}
.profile-card[data-name-effect=holographic] #profile-name,.wc-preview-card[data-effect=holographic] #wc-preview-name{background:linear-gradient(90deg,#8fffea,#b38cff,#ff9bdc,#8fffea);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent!important}
.profile-card[data-name-effect=glitch] #profile-name,.wc-preview-card[data-effect=glitch] #wc-preview-name{text-shadow:2px 0 #ff4e91,-2px 0 #5fe9ff}
.profile-card[data-name-animation=shimmer] #profile-name,.wc-preview-card[data-animation=shimmer] #wc-preview-name{animation:wcNameShimmer 2.7s linear infinite}
.profile-card[data-name-animation=pulse] #profile-name,.wc-preview-card[data-animation=pulse] #wc-preview-name{animation:wcNamePulse 2.2s ease-in-out infinite}
.profile-card[data-name-animation=flow] #profile-name,.wc-preview-card[data-animation=flow] #wc-preview-name{animation:wcNameFlow 3.5s linear infinite}
.profile-card[data-name-animation=glitch] #profile-name,.wc-preview-card[data-animation=glitch] #wc-preview-name{animation:wcNameGlitch 2.8s steps(2,end) infinite}
@keyframes wcNameShimmer{to{background-position:-220% center}}@keyframes wcNamePulse{50%{filter:brightness(1.3)}}@keyframes wcNameFlow{to{background-position:250% center}}@keyframes wcNameGlitch{0%,92%,100%{transform:none}94%{transform:translateX(1px)}96%{transform:translateX(-1px)}}
.profile-card[data-glow=soft]{box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 55px color-mix(in srgb,var(--profile-color),transparent 76%)!important}
.profile-card[data-glow=strong]{box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 80px color-mix(in srgb,var(--profile-color),transparent 58%)!important}
.profile-card[data-glow=rainbow]{box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 80px rgba(165,105,255,.24),0 0 130px rgba(72,220,255,.1)!important}
.profile-username{color:#827c91!important;font-size:12px}
.profile-pronouns{display:block;color:#7f788d;font-size:11px;margin-top:2px}
.profile-actions{display:flex;gap:8px}.profile-actions .btn{white-space:nowrap}
.profile-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.profile-badges>span{padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.055);font-size:11px;color:#d8d2e2}
.profile-tag{border:1px solid color-mix(in srgb,var(--profile-color),transparent 45%)!important;color:#c8b8ff!important}
.profile-status-line{margin:13px 0!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.06);color:#c8c1d2}
.profile-activity{padding:12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:3px;margin:10px 0}.profile-activity span{font-size:10px;color:#938aa5;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.profile-activity strong{font-size:14px}.profile-activity small{font-size:11px;color:#777186}
.profile-section-block{margin-top:16px}.profile-section-label{display:block;font-size:9px;font-weight:900;letter-spacing:.13em;color:#777087;margin-bottom:8px}
.profile-section-block p{margin:0!important;min-height:0!important;color:#b7b0c3!important;line-height:1.55}
.profile-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.profile-chips{display:flex;flex-wrap:wrap;gap:6px}.profile-chips>a,.profile-chips>span{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);color:#c7bfd3;text-decoration:none;font-size:11px}
.profile-role{border-left:3px solid var(--role-color)!important}.profile-role::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--role-color)}
.profile-empty{background:transparent!important;border:0!important;padding:0!important;color:#686276!important}
.profile-common-servers{display:flex;gap:7px;flex-wrap:wrap}.profile-server-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:9px;background:rgba(255,255,255,.04);font-size:11px}.profile-server-chip img{width:20px;height:20px;border-radius:6px;object-fit:cover}
.profile-meta{margin-top:16px;color:#6f687c;font-size:10px}.profile-stats{display:flex;gap:7px;margin-top:14px}.profile-stats span{padding:7px 9px!important;border-radius:8px!important;background:rgba(255,255,255,.035)!important;color:#80788e}
.profile-avatar-decorated.frame-neon .avatar-frame-overlay{box-shadow:0 0 0 2px #a778ff,0 0 20px #02d2e3}
.profile-avatar-decorated.frame-galactic .avatar-frame-overlay{box-shadow:0 0 0 2px #4de3ee,0 0 0 5px rgba(2,210,227,.14),0 0 24px rgba(2,210,227,.6)}
.profile-avatar-decorated.frame-chrome .avatar-frame-overlay{box-shadow:0 0 0 2px #dfe3f4,0 0 15px rgba(220,225,255,.3)}
.profile-avatar-decorated.frame-holographic .avatar-frame-overlay{box-shadow:0 0 0 2px #7cf7dc,0 0 22px rgba(124,247,220,.35)}
.profile-avatar-decorated.decoration-stars .avatar-decoration-overlay::after{content:'✦ · ✧';position:absolute;inset:-20px;display:grid;place-items:center;color:#c8aaff;font-size:12px;letter-spacing:28px}
.profile-avatar-decorated.decoration-orbit .avatar-decoration-overlay{inset:-12px!important;border:1px solid rgba(175,137,255,.6);border-radius:50%;transform:rotate(-22deg)}
.profile-avatar-decorated.decoration-orbit .avatar-decoration-overlay::after{content:'•';position:absolute;right:-3px;top:28%;color:#fff;font-size:12px}
.profile-avatar-decorated.decoration-spark .avatar-decoration-overlay::after{content:'✦';position:absolute;right:-12px;top:2px;color:#ffd66d;font-size:18px;text-shadow:0 0 12px #ffd66d}
.profile-avatar-decorated.decoration-cyber .avatar-decoration-overlay{inset:-8px!important;border:1px dashed rgba(91,229,255,.5);border-radius:50%}
@media(max-width:900px){.wc-profile-editor{grid-template-columns:1fr}.wc-profile-live{position:static}.wc-preview-card{max-width:520px}.profile-info-grid{grid-template-columns:1fr}}
@media(max-width:600px){.wc-editor-grid,.wc-select-grid,.wc-color-grid,.wc-name-options{grid-template-columns:1fr}.wc-connections-grid{grid-template-columns:1fr}.profile-identity-row{align-items:flex-start;flex-direction:column}.profile-card-body{padding:12px 18px 22px!important}.profile-avatar{margin-left:18px!important}.profile-card-banner{height:150px!important}}
@media(prefers-reduced-motion:reduce){.profile-card[data-name-animation] #profile-name,.wc-preview-card[data-animation] #wc-preview-name{animation:none!important}}

.profile-card[data-color-mode=solid] #profile-name,.wc-preview-card[data-color-mode=solid] #wc-preview-name{color:var(--name-color)!important}
.profile-card[data-color-mode=gradient] #profile-name,.wc-preview-card[data-color-mode=gradient] #wc-preview-name{background:linear-gradient(90deg,var(--name-color),var(--name-color2));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* =========================================================================
   WIFICORD FUTURISTA — camada de aprimoramento visual
   Tudo aqui é aditivo: usa as variáveis de :root já atualizadas acima e
   só acrescenta vidro fosco, brilho, textura e transições. Nada dos blocos
   anteriores foi removido, então esta seção pode ser revertida sozinha
   apagando só o que vem depois deste comentário.
   ========================================================================= */

/* Fontes (Space Grotesk / Inter / IBM Plex Mono) são carregadas via
   <link> no <head> do index.html — @import não pode ficar no meio de um
   arquivo CSS, então evitamos isso aqui de propósito. */

/* --- Fundo ambiente: glow violeta/ciano atrás da tela de entrada e do
   painel de chat, mais uma textura de pontos bem sutil (identidade "sinal"). --- */
#auth-screen {
  background:
    radial-gradient(760px 560px at 14% -10%, rgba(2,210,227,.16), transparent 60%),
    radial-gradient(680px 520px at 108% 22%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/26px 26px,
    var(--bg-deepest);
}
#main-panel {
  position: relative;
  background:
    radial-gradient(620px 380px at 100% -6%, rgba(34,211,238,.07), transparent 60%),
    var(--bg-main);
}

/* --- Vidro fosco nos painéis estruturais --- */
#server-rail, #sidebar, #members-panel, .auth-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.modal {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--glass-border) !important;
}

/* --- Assinatura tipográfica: nome do app e títulos em degradê --- */
.auth-brand h1, .loading-mark {
  background: linear-gradient(90deg, var(--accent-primary-start), var(--accent-primary-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Botões, campos e cartões: transições consistentes + brilho no foco --- */
.btn, .btn-primary, input, select, textarea,
.chat-empty-card, .media-card, .server-role-row, .share-source-card, .wc-preview-card {
  transition: transform .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth),
    border-color .2s var(--ease-smooth), background-color .2s var(--ease-smooth), filter .2s var(--ease-smooth);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-primary:active { transform: translateY(0); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-primary-start) !important;
  box-shadow: 0 0 0 3px var(--glow-violet);
}
.chat-empty-card:hover, .media-card:hover, .share-source-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -16px var(--glow-violet);
  border-color: rgba(2,210,227,.35);
}

/* --- Órbita 3D da tela de entrada (ver client/js/auth-3d.js) ---
   Antes ficava "position:absolute" cobrindo quase o painel inteiro por
   cima do texto (só com opacidade baixa pra disfarçar) — dava pra ver as
   linhas cruzando "sem travar, sem ruído" em telas mais baixas. Agora ela
   é um item normal do flex, com altura fixa e reservada só pra ela: o
   texto vem depois, no fluxo, nunca por baixo. Zero sobreposição possível,
   não só "menos provável".
   O selo de sinal antigo (.signal-mark) some daqui porque a órbita 3D
   passa a cumprir esse papel — assim não ficam dois "logos" disputando
   espaço. */
.auth-showcase .signal-mark { display: none; }
.auth-showcase { overflow: hidden; }
.auth-showcase-art {
  position: relative;
  width: 100%;
  height: clamp(160px, 26vh, 230px);
  flex: 0 0 auto;
}
#auth-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
  /* Interativo de propósito: dá pra arrastar e girar (ver auth-3d.js).
     touch-action:none evita que o gesto vire scroll da página no celular. */
  cursor: grab;
  touch-action: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
#auth-orbit:active { cursor: grabbing; }
.auth-showcase-title, .auth-showcase-sub {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce), (max-width: 820px) {
  #auth-orbit { display: none; }
  .auth-showcase-art { display: none; }
}

/* --- Entrada suave da tela de login/registro: o painel some 12px abaixo
   da posição final e sobe enquanto aparece, em vez de simplesmente surgir
   estático. Respeita quem pediu menos movimento no sistema. --- */
.auth-shell {
  animation: authShellIn .5s cubic-bezier(.16,.9,.3,1) both;
}
.auth-showcase-title, .auth-showcase-sub, .auth-card > * {
  animation: authFadeUp .5s cubic-bezier(.16,.9,.3,1) both;
}
.auth-showcase-sub { animation-delay: .06s; }
.auth-card .brand-logo { animation-delay: .02s; }
.auth-card form { animation-delay: .1s; }
@keyframes authShellIn {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes authFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-shell, .auth-showcase-title, .auth-showcase-sub, .auth-card > * {
    animation: none !important;
  }
}

/* --- Transições mais "premium" nos controles principais: elevação suave
   no hover/active, em vez de mudança instantânea de cor. --- */
.btn-primary, .auth-tab, button.btn {
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px var(--glow-violet);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 12px -6px var(--glow-violet);
}
input, select, textarea {
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

/* --- Autofill do navegador: sem isso o Chrome/Edge força um fundo claro
   nos campos preenchidos automaticamente, quebrando o tema escuro. --- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0px 1000px var(--bg-elevated) inset;
  box-shadow: 0 0 0px 1000px var(--bg-elevated) inset;
  caret-color: var(--text-primary);
  transition: background-color 9999s ease-in-out 0s;
}

/* --- Ícones injetados por data-icon (ver client/js/icons.js) --- */
.icon-svg { display: block; width: 1em; height: 1em; }
[data-icon] svg { display: block; }
.share-tab [data-icon] { font-size: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* --- Status: bolinha colorida em vez de emoji --- */
.status-dot-icon { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: var(--status-offline); vertical-align: 1px; }
.status-options button[data-status="online"] .status-dot-icon { background: var(--status-online); box-shadow: 0 0 6px var(--status-online); }
.status-options button[data-status="away"] .status-dot-icon { background: var(--status-away); box-shadow: 0 0 6px var(--status-away); }
.status-options button[data-status="offline"] .status-dot-icon { background: var(--status-offline); }

/* =======================================================================
   Modo compacto da apresentação de tela + menu de botão direito na chamada
   ========================================================================
   Bloco colocado de propósito no FINAL do arquivo: o CSS de chamada tem
   várias regras antigas duplicadas de ":not(.sharing)" espalhadas (mesma
   especificidade, todas !important) — a única forma confiável de garantir
   que as regras novas abaixo vençam sem precisar caçar e editar cada uma
   delas é vir depois de todas no arquivo (em empate de especificidade +
   importância, quem vem depois vence). */

/* Clicar na transmissão (a própria tela compartilhada, não a câmera normal)
   encolhe o vídeo pro centro do palco e volta a mostrar os avatares dos
   dois participantes nas laterais — clicar de novo volta ao modo cheio. */
#remote-video, .call-bar.sharing #local-video.is-screen-preview { cursor: zoom-in; }
.call-bar.screen-minimized #remote-video,
.call-bar.screen-minimized #local-video.is-screen-preview { cursor: zoom-out; }

.call-bar.screen-minimized .call-stage #remote-video,
.call-bar.screen-minimized .call-stage #local-video.is-screen-preview {
  position: absolute !important;
  inset: auto !important;
  width: min(56%, 640px) !important;
  height: min(60%, 420px) !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 16px !important;
  object-fit: contain !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
  z-index: 2 !important;
  background: #050609 !important;
}
.call-bar.screen-minimized .call-local-avatar,
.call-bar.screen-minimized .call-remote-avatar {
  display: grid !important;
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
.call-bar.screen-minimized .call-remote-avatar { left: 32px !important; right: auto !important; }
.call-bar.screen-minimized .call-local-avatar { right: 32px !important; left: auto !important; }

/* Menu de botão direito (participante ou transmissão) — volume rápido e
   silenciar, iguais ao popover de volume que já existe no topo da chamada,
   só que abre no ponto onde a pessoa clicou, como no Discord. */
.call-context-menu {
  position: fixed;
  z-index: 200;
  min-width: 200px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: #171522;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.call-context-menu.hidden { display: none; }
.call-context-menu-title {
  font-size: 12px;
  font-weight: 700;
  color: #cfc9e0;
  padding: 0 2px 2px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 2px;
}
.call-context-menu .call-volume-row { padding: 0 2px; }
.call-context-menu-btn { width: 100%; text-align: left; justify-content: flex-start; }

/* =======================================================================
   Layout adequado por TIPO de dispositivo (ver o script no topo do
   index.html que detecta isso de verdade, não só pela largura da tela, e
   marca <html> com .device-mobile/.device-desktop e .device-touch/
   .device-no-touch). O resto do arquivo já tem bastante @media(max-width)
   pra reorganizar colunas/grades em telas estreitas — o que falta aqui é
   adaptar FUNÇÕES ao dispositivo, não só o tamanho: em celular não existe
   botão direito de mouse, e um popover que nasce exatamente embaixo do
   dedo fica dificil de alcançar/tocar (o dedo cobre o próprio menu). Bloco
   colocado no fim do arquivo pelo mesmo motivo do bloco de cima (vencer as
   regras antigas duplicadas por ordem, já que a especificidade empata). */

/* Toque real (independente do tamanho da tela) merece alvos maiores — 44px
   já era o mínimo recomendado, sobe um pouco mais pra folga confortável. */
.device-touch .call-btn,
.device-touch .call-device-arrow {
  min-width: 50px !important;
  height: 50px !important;
}
.device-touch .call-context-menu-btn,
.device-touch .call-context-menu .call-volume-row input[type="range"] {
  min-height: 40px;
}

/* Em celular (detecção real de dispositivo, não de largura) o menu de
   botão direito vira uma folha inferior (bottom sheet) em vez de um
   popover flutuando no ponto exato do toque — no Discord mobile é assim
   que o menu de participante/transmissão aparece, e evita o dedo tampar o
   próprio menu ou ele nascer cortado perto da borda da tela. */
.device-mobile .call-context-menu {
  left: 0 !important;
  right: 0;
  bottom: 0;
  top: auto !important;
  width: 100%;
  min-width: 0;
  border-radius: 16px 16px 0 0;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -20px 50px rgba(0,0,0,.55);
}
.device-mobile .call-context-menu-title { font-size: 14px; }
.device-mobile .call-context-menu-btn,
.device-mobile .call-context-menu .call-volume-row input[type="range"] {
  min-height: 44px;
}

/* Segurar o dedo (toque longo) faz as mesmas vezes do botão direito do
   mouse — ver bindLongPress()/bindCallContextMenu() em call.js. Sem isso
   não tinha NENHUMA forma de abrir esse menu em quem só usa a chamada pelo
   celular. */
.device-touch #call-remote-avatar,
.device-touch #remote-video,
.device-touch #remote-camera-pip { -webkit-touch-callout: none; user-select: none; }

/* =======================================================================
   Barra de título própria do app desktop (ver frame:false em main.js e
   client/js/titlebar.js — só existe dentro do Electron, nunca numa aba de
   navegador normal). Escura e discreta em vez da barra vermelha padrão do
   Windows/Linux com o nome do app.

   MUDANÇA IMPORTANTE: a primeira versão disso encolhia #app-screen/
   #auth-screen em 32px (height: calc(100dvh - 32px)) pra "abrir espaço"
   pra barra sem sobrepor nada. Isso quebrou o layout da chamada inteiro
   (avatar enorme cobrindo a tela, áreas pretas onde devia ter vídeo) —
   o resto do arquivo tem MUITO código de chamada que assume implicitamente
   que #app-screen/.call-stage ocupam a viewport inteira (100vh/100dvh)
   sem desconto nenhum, incluindo contas de JS que usam
   getBoundingClientRect() pra posicionar coisas. Mexer nessa altura por
   um lado bagunçou essas contas por outro. Agora a barra é uma faixa fixa
   SOBREPOSTA no topo (position:fixed), sem tirar nem somar altura de
   NADA abaixo dela — o resto do app continua exatamente do tamanho que
   sempre foi, só os 32px mais no topo (que normalmente já são só respiro/
   ícone do topo da barra lateral) ficam por baixo da faixa. */
html.has-custom-titlebar #wc-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  min-height: 32px;
  background: var(--bg-deepest, #05060C);
  border-bottom: 1px solid rgba(255,255,255,.06);
  -webkit-app-region: drag;
  user-select: none;
  /* position:fixed cobrindo a largura toda, sempre no topo — não empurra
     nem encolhe mais nada do resto da página (ver comentário acima). O
     z-index bem alto garante que fica visível/clicável mesmo com um modal
     aberto por cima (.modal-overlay cobre a tela inteira, mas só com
     z-index:50) — sem isso não dava pra minimizar/fechar a janela com
     qualquer modal (configurações, chamada recebida, etc.) aberto. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999;
}
html.has-custom-titlebar #wc-titlebar .wc-titlebar-drag {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 12px;
  flex: 1;
  min-width: 0;
}
html.has-custom-titlebar .wc-titlebar-logo { width: 15px; height: 15px; flex: none; opacity: .9; }
html.has-custom-titlebar .wc-titlebar-name {
  font-size: 12px;
  font-weight: 600;
  color: #8b8698;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.has-custom-titlebar .wc-titlebar-controls { display: flex; height: 100%; -webkit-app-region: no-drag; }
html.has-custom-titlebar .wc-titlebar-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 100%;
  border: 0;
  background: transparent;
  color: #b7b2c6;
  cursor: pointer;
}
html.has-custom-titlebar .wc-titlebar-btn svg { width: 14px; height: 14px; overflow: visible; }
html.has-custom-titlebar .wc-titlebar-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
html.has-custom-titlebar .wc-titlebar-btn:active { background: rgba(255,255,255,.14); }
html.has-custom-titlebar .wc-titlebar-btn-close:hover { background: var(--danger, #FF4D6D); color: #fff; }
html.has-custom-titlebar .wc-ico-restore-back { display: none; }
html.has-custom-titlebar .wc-titlebar-btn.is-maximized .wc-ico-restore-back { display: block; }
html.has-custom-titlebar .wc-titlebar-btn.is-maximized .wc-ico-sq { transform: translate(-2px,-2px); }

/* ================================================================
   Correções de 2026-09-11 (prints do usuário): barra de título por
   cima de botões, selo "APRESENTANDO" virando um retângulo em pé, e
   avatar gigante fora do lugar durante chamada de vídeo/apresentação.
   Bloco final — depois de TODO o resto do arquivo — de propósito,
   pra ganhar de qualquer regra antiga sem precisar caçar e editar
   uma por uma num arquivo com anos de blocos sobrepostos.
   ================================================================ */

/* --- Item 1: a barra de título cobria botões de verdade (o ícone de
   início da barra lateral, o cabeçalho da conversa com os botões de
   chamada, etc.) porque ela é position:fixed por cima de tudo e nada
   media espaço pra ela.
   NÃO repete o erro de antes (encolher #app-screen/#auth-screen
   inteiros com height:calc(100dvh - 32px) — isso quebrou o layout da
   call porque .call-stage e outras partes calculam o próprio tamanho
   com 100dvh "cru", sem saber que o pai ficou 32px mais baixo).
   Em vez disso só empurra pra baixo o CONTEÚDO das colunas que ficam
   coladas no topo (border-box: o tamanho de fora de cada uma continua
   sendo o mesmo de sempre, só o conteúdo desce 32px) — nada usa
   100dvh dentro dessas três colunas pra esse cálculo dar errado. */
html.has-custom-titlebar #server-rail,
html.has-custom-titlebar #sidebar,
html.has-custom-titlebar #main-panel,
html.has-custom-titlebar #members-panel {
  padding-top: 32px !important;
}

/* --- Item 4: o selo "🔴 APRESENTANDO" tinha DUAS regras valendo ao
   mesmo tempo neste arquivo — uma antiga com "top:18px" e uma mais
   nova com "bottom:14px". Como são propriedades diferentes, o CSS não
   escolhe uma e descarta a outra: as duas ficam valendo juntas, e sem
   uma altura própria definida a caixa esticava do topo quase até o
   fim do palco — exatamente o "retângulo em pé" atrás do texto
   "Chamada" relatado. Fixando os 4 lados + o tamanho pelo próprio
   conteúdo aqui garante uma leitura só.
   Posição: canto de baixo à esquerda era o MESMO canto onde os
   avatares pequenos (ver bloco abaixo) agora ficam — o selo tampava a
   bolinha da pessoa ali ("o nome... tá na frente de um dos
   usuários"). Movido pra baixo do cabeçalho da chamada, no topo, onde
   não tem mais nada — nem os avatares (embaixo) nem os controles
   (também embaixo). */
#call-live-label.call-screen-label {
  top: 50px !important;
  bottom: auto !important;
  left: 14px !important;
  right: auto !important;
  height: auto !important;
  width: max-content !important;
  max-width: calc(100% - 28px) !important;
  white-space: nowrap !important;
}

/* --- Item 2: nada de avatar gigante disputando o centro do palco com
   o vídeo. Fora do modo só-áudio (onde o avatar grande centralizado
   continua fazendo sentido, é o único conteúdo da tela), os dois
   participantes agora são só uma bolinha pequena e fixa em cada canto
   de baixo — a outra pessoa à esquerda, você à direita — nunca no
   meio, nunca um por cima do outro, do jeito do desenho enviado (o
   retângulo em paisagem é o palco/transmissão, as pessoinhas são só
   indicadores pequenos e separados). */
#call-bar:not(.audio-call) .call-stage .call-participant-avatar {
  top: auto !important;
  bottom: 16px !important;
  transform: none !important;
  width: 56px !important;
  height: 56px !important;
}
#call-bar:not(.audio-call) .call-stage .call-remote-avatar { left: 16px !important; right: auto !important; }
#call-bar:not(.audio-call) .call-stage .call-local-avatar { right: 16px !important; left: auto !important; }


/* --- Correção mobile: painéis viram gavetas sobrepostas em telas pequenas,
   e o fundo translúcido deixava o conteúdo por trás borrado por cima. --- */
@media (max-width: 900px) {
  #server-rail, #sidebar, #members-panel {
    background: #14121f !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 12px 0 40px -12px rgba(0,0,0,.65);
  }
}

/* ===== Ajustes mobile (rodada 2) ===== */
@media (max-width: 900px) {
  #server-rail, #sidebar, #members-panel {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }
}
@media (max-width: 680px) {
  #app-screen.with-members #members-panel { display: none !important; }
  #members-panel { display: none !important; }
  #members-panel.mobile-open { display: flex !important; }
  #mobile-nav-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    z-index: 10030; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  #mobile-nav-backdrop.visible { opacity: 1; pointer-events: auto; }
}
.message-form textarea { scrollbar-width: none; }
.message-form textarea::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
  #chat-header { padding-left: 58px !important; }
}
.mobile-only { display: none; }
@media (max-width: 680px) {
  .mobile-only { display: grid !important; }
}

/* ===== Ajustes mobile (rodada 2) ===== */
@media (max-width: 900px) {
  #server-rail, #sidebar, #members-panel {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }
}
@media (max-width: 680px) {
  #app-screen.with-members #members-panel { display: none !important; }
  #members-panel { display: none !important; }
  #members-panel.mobile-open { display: flex !important; }
  #mobile-nav-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    z-index: 10030; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  #mobile-nav-backdrop.visible { opacity: 1; pointer-events: auto; }
}
.message-form textarea { scrollbar-width: none; }
.message-form textarea::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
  #chat-header { padding-left: 58px !important; }
}
.mobile-only { display: none; }
@media (max-width: 680px) {
  .mobile-only { display: grid !important; }
}

/* Performance mobile: o borrão do vidro fosco é pesado pra GPU de
   celular, principalmente enquanto os paineis deslizam. Reduz o raio do
   blur só no celular e ajuda o navegador a usar aceleração de GPU no
   deslizar, sem tirar o efeito translúcido. */
@media (max-width: 900px) {
  #server-rail, #sidebar, #members-panel {
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    will-change: transform;
    transform: translateZ(0);
  }
}

.server-danger-zone{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,77,109,.25);}
.server-danger-zone h4{color:#ff4d6d;margin:0 0 6px;}
.server-danger-zone p{color:var(--text-muted);font-size:13px;margin:0 0 14px;}
.btn-danger{background:rgba(255,77,109,.12);border:1px solid rgba(255,77,109,.4);color:#ff4d6d;}
.btn-danger:hover{background:rgba(255,77,109,.22);}
.server-transfer-box{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,178,50,.25);}
.server-transfer-box h4{color:#f0b232;margin:0 0 6px;}
.server-transfer-box p{color:var(--text-muted);font-size:13px;margin:0 0 12px;}
.server-transfer-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.server-transfer-row select{flex:1;min-width:180px;}
.btn-warning{background:rgba(240,178,50,.12);border:1px solid rgba(240,178,50,.4);color:#f0b232;}
.btn-warning:hover{background:rgba(240,178,50,.22);}

/* ===== Temas do aplicativo (vários presets, incluindo claro e escuro) =====
   Cada preset redefine as mesmas variáveis do :root padrão — o tema
   "escuro" é o visual original do app, os demais trocam a paleta inteira. */
[data-app-theme="claro"] {
  --bg-deepest: #F3F4FA;
  --bg-dark: #ECEEF6;
  --bg-main: #FFFFFF;
  --bg-elevated: #F7F8FC;
  --bg-hover: #ECEEF7;
  --accent-primary-start: #6C4CFF;
  --accent-primary-end: #0EA5C4;
  --accent-secondary: #8B6CF0;
  --accent-violet-deep: #5B3FE0;
  --accent-cyan: #0EA5C4;
  --text-primary: #181A2A;
  --text-secondary: #4A4F68;
  --text-muted: #868DA8;
  --glow-violet: rgba(108,76,255,.16);
  --glow-cyan: rgba(14,165,196,.14);
  --glass-bg: rgba(255,255,255,.66);
  --glass-border: rgba(10,10,30,.08);
}
[data-app-theme="cyber"] {
  --bg-deepest: #07040D;
  --bg-dark: #0C0714;
  --bg-main: #120A1E;
  --bg-elevated: #1A1028;
  --bg-hover: #241536;
  --accent-primary-start: #FF2E88;
  --accent-primary-end: #00F0FF;
  --accent-secondary: #FF6EC7;
  --accent-violet-deep: #B0179E;
  --accent-cyan: #00F0FF;
  --text-primary: #F8F5FF;
  --text-secondary: #C9B8E6;
  --text-muted: #8B7AA8;
  --glow-violet: rgba(255,46,136,.4);
  --glow-cyan: rgba(0,240,255,.35);
  --glass-bg: rgba(24,10,32,.6);
  --glass-border: rgba(255,110,199,.14);
}
[data-app-theme="sunset"] {
  --bg-deepest: #150B08;
  --bg-dark: #1C0F0A;
  --bg-main: #24140E;
  --bg-elevated: #2E1B12;
  --bg-hover: #3A2417;
  --accent-primary-start: #FF7A45;
  --accent-primary-end: #FFC24B;
  --accent-secondary: #FF9E6D;
  --accent-violet-deep: #C2410C;
  --accent-cyan: #FFB199;
  --text-primary: #FFF3EA;
  --text-secondary: #E3B79B;
  --text-muted: #A6816D;
  --glow-violet: rgba(255,122,69,.4);
  --glow-cyan: rgba(255,194,75,.3);
  --glass-bg: rgba(36,20,14,.6);
  --glass-border: rgba(255,158,109,.14);
}
[data-app-theme="floresta"] {
  --bg-deepest: #050C08;
  --bg-dark: #08120C;
  --bg-main: #0C1811;
  --bg-elevated: #122217;
  --bg-hover: #182D1F;
  --accent-primary-start: #34D399;
  --accent-primary-end: #A3E635;
  --accent-secondary: #6EE7B7;
  --accent-violet-deep: #0F766E;
  --accent-cyan: #5EEAD4;
  --text-primary: #EFFCF4;
  --text-secondary: #A9D8BE;
  --text-muted: #6E9683;
  --glow-violet: rgba(52,211,153,.35);
  --glow-cyan: rgba(163,230,53,.25);
  --glass-bg: rgba(10,24,16,.6);
  --glass-border: rgba(110,231,183,.14);
}
[data-app-theme="meianoite"] {
  --bg-deepest: #02040D;
  --bg-dark: #050815;
  --bg-main: #080C1E;
  --bg-elevated: #0F1530;
  --bg-hover: #171F42;
  --accent-primary-start: #4F6BFF;
  --accent-primary-end: #38BDF8;
  --accent-secondary: #818CF8;
  --accent-violet-deep: #3730A3;
  --accent-cyan: #38BDF8;
  --text-primary: #EEF1FF;
  --text-secondary: #AEB8E6;
  --text-muted: #6C77A6;
  --glow-violet: rgba(79,107,255,.4);
  --glow-cyan: rgba(56,189,248,.3);
  --glass-bg: rgba(8,12,30,.62);
  --glass-border: rgba(129,140,248,.14);
}
[data-app-theme="quartzo"] {
  --bg-deepest: #FFF3F7;
  --bg-dark: #FFE9F0;
  --bg-main: #FFFFFF;
  --bg-elevated: #FFF5F9;
  --bg-hover: #FFE9F1;
  --accent-primary-start: #FF5C8A;
  --accent-primary-end: #FFB199;
  --accent-secondary: #FF8FB3;
  --accent-violet-deep: #D6336C;
  --accent-cyan: #FF9EC4;
  --text-primary: #3A1220;
  --text-secondary: #7A3348;
  --text-muted: #A9748C;
  --glow-violet: rgba(255,92,138,.18);
  --glow-cyan: rgba(255,177,153,.16);
  --glass-bg: rgba(255,255,255,.68);
  --glass-border: rgba(214,51,108,.1);
}
[data-app-theme="mono"] {
  --bg-deepest: #0A0A0C;
  --bg-dark: #101012;
  --bg-main: #16161A;
  --bg-elevated: #1E1E23;
  --bg-hover: #28282F;
  --accent-primary-start: #9AA0AE;
  --accent-primary-end: #D8DBE3;
  --accent-secondary: #B6BBC7;
  --accent-violet-deep: #6B7280;
  --accent-cyan: #D8DBE3;
  --text-primary: #F2F2F4;
  --text-secondary: #B4B6BF;
  --text-muted: #77787F;
  --glow-violet: rgba(154,160,174,.22);
  --glow-cyan: rgba(216,219,227,.16);
  --glass-bg: rgba(20,20,23,.62);
  --glass-border: rgba(255,255,255,.08);
}

/* Seletor visual de temas (Configurações > Aparência) */
.theme-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px;margin:10px 0 16px;}
.theme-preset-swatch{border:2px solid transparent;border-radius:var(--radius-md);padding:8px 4px 6px;background:var(--bg-elevated);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .15s ease,transform .15s ease;}
.theme-preset-swatch:hover{transform:translateY(-2px);}
.theme-preset-swatch.active{border-color:var(--accent-primary-start);}
.theme-preset-swatch i{display:block;width:32px;height:32px;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.35);}
.theme-preset-swatch span{font-size:11px;color:var(--text-secondary);}

/* ================================================================
   Palco da chamada 1:1 — pedido explícito do usuário, em cima de tudo
   que veio antes (várias regras anteriores do arquivo mexiam nesses
   mesmos elementos com !important; como CSS resolve empate de
   especificidade pela ORDEM NO ARQUIVO, ficar no final garante que
   este bloco vence sem precisar caçar/apagar cada regra antiga).

   1) Ninguém com câmera ligada (.stage-circles): os dois avatares
      ficam GRANDES e CENTRALIZADOS lado a lado — nunca uma tela preta
      vazia com bolinhas pequenas de canto.
   2) Qualquer um dos dois liga a câmera (.stage-grid): os dois viram
      RETÂNGULOS do MESMO TAMANHO lado a lado; o lado sem câmera mostra
      o avatar dentro do próprio retângulo, no lugar de vídeo preto.
   3) Apresentação de tela em modo imersivo (.stage-immersive): some
      com bolinhas de câmera, avatares, barra de topo e controles,
      deixando só a transmissão — a setinha (#call-stage-immersive-
      toggle) e um toque na própria transmissão alternam de volta.
   Nada disso mexe na chamada de servidor/grupo (#server-call-grid tem
   sua própria grade — ver renderGroupTiles em call.js).
   ================================================================ */

.call-bar.stage-circles:not(.sharing):not(.remote-sharing) #remote-video,
.call-bar.stage-circles:not(.sharing):not(.remote-sharing) #local-video.call-local-preview {
  display: none !important;
}
.call-bar.stage-circles:not(.sharing):not(.remote-sharing) .call-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(28px, 7vw, 84px) !important;
}
.call-bar.stage-circles:not(.sharing):not(.remote-sharing) .call-stage .call-participant-avatar {
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important;
  width: clamp(88px, 14vw, 136px) !important;
  height: clamp(88px, 14vw, 136px) !important;
}

.call-bar.stage-grid:not(.sharing):not(.remote-sharing) .call-stage {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr !important;
  gap: 8px !important;
  padding: 8px !important;
  place-items: stretch !important;
}
.call-bar.stage-grid:not(.sharing):not(.remote-sharing) #remote-video,
.call-bar.stage-grid:not(.sharing):not(.remote-sharing) #local-video.call-local-preview,
.call-bar.stage-grid:not(.sharing):not(.remote-sharing) .call-stage .call-participant-avatar {
  position: relative !important;
  inset: auto !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 12px !important;
  grid-row: 1 !important;
}
.call-bar.stage-grid:not(.sharing):not(.remote-sharing) #remote-video,
.call-bar.stage-grid:not(.sharing):not(.remote-sharing) .call-remote-avatar {
  grid-column: 1 !important;
}
.call-bar.stage-grid:not(.sharing):not(.remote-sharing) #local-video.call-local-preview,
.call-bar.stage-grid:not(.sharing):not(.remote-sharing) .call-local-avatar {
  grid-column: 2 !important;
}
.call-bar.stage-grid:not(.sharing):not(.remote-sharing) #remote-video,
.call-bar.stage-grid:not(.sharing):not(.remote-sharing) #local-video.call-local-preview {
  /* "contain" (não "cover"): a câmera precisa aparecer INTEIRA dentro do
     retângulo, mesmo que sobre uma tarja escura nas laterais — "cover"
     cortava/dava zoom pesado sempre que a proporção da câmera não batia
     exatamente com a da célula (praticamente sempre). */
  object-fit: contain !important;
  background: radial-gradient(circle, #28213f, #09090e) !important;
  display: block !important;
}
.call-bar.stage-grid:not(.sharing):not(.remote-sharing) .call-stage .call-participant-avatar {
  display: grid !important;
  place-items: center !important;
  background: radial-gradient(circle, #28213f, #09090e) !important;
}
.call-bar.stage-grid:not(.sharing):not(.remote-sharing) .call-participant-avatar img {
  width: clamp(64px, 15vw, 112px) !important;
  height: clamp(64px, 15vw, 112px) !important;
  border-radius: 50% !important;
}
/* Câmera daquele lado ativa: o vídeo já cobre a célula toda, então some
   com o avatar embaixo dele pra nunca ter os dois brigando por espaço. */
.call-bar.stage-grid.stage-grid-remote-on:not(.sharing):not(.remote-sharing) .call-remote-avatar,
.call-bar.stage-grid.stage-grid-local-on:not(.sharing):not(.remote-sharing) .call-local-avatar {
  display: none !important;
}
@media (max-width: 680px) {
  .call-bar.stage-grid:not(.sharing):not(.remote-sharing) .call-stage {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr !important;
  }
  .call-bar.stage-grid:not(.sharing):not(.remote-sharing) #remote-video,
  .call-bar.stage-grid:not(.sharing):not(.remote-sharing) .call-remote-avatar { grid-column: 1 !important; grid-row: 1 !important; }
  .call-bar.stage-grid:not(.sharing):not(.remote-sharing) #local-video.call-local-preview,
  .call-bar.stage-grid:not(.sharing):not(.remote-sharing) .call-local-avatar { grid-column: 1 !important; grid-row: 2 !important; }
}

/* --- Modo imersivo da apresentação de tela --- */
.call-stage-immersive-toggle {
  display: none;
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  z-index: 50;
  width: 38px; height: 24px;
  align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(10,9,15,.65);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease, background .15s ease;
}
.call-stage-immersive-toggle:hover { background: rgba(20,18,30,.85); }
.call-bar.sharing .call-stage-immersive-toggle,
.call-bar.remote-sharing .call-stage-immersive-toggle {
  display: flex !important;
}
.call-bar.stage-immersive .call-stage-immersive-toggle {
  transform: translateX(-50%) rotate(180deg);
}
.call-bar.stage-immersive .call-controls,
.call-bar.stage-immersive .call-stage-topbar,
.call-bar.stage-immersive #local-camera-pip,
.call-bar.stage-immersive #remote-camera-pip,
.call-bar.stage-immersive .call-local-avatar,
.call-bar.stage-immersive .call-remote-avatar,
.call-bar.stage-immersive .call-screen-label {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.call-bar.stage-immersive .call-stage { border-radius: 18px !important; }
.call-bar.stage-immersive #remote-video,
.call-bar.stage-immersive #local-video.is-screen-preview {
  cursor: pointer;
}

/* ================================================================
   Botão de fechar genérico pra modais que não tinham nenhum (o único
   jeito de fechar era clicar fora ou apertar Esc — no celular, sem
   teclado físico e com o modal ocupando quase a tela toda, isso virava
   um beco sem saída). Cada modal que usa essa classe fica com
   position:relative pra servir de referência.
   ================================================================ */
.modal-close-btn {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 5;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-secondary, #aaa);
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.modal-close-btn:hover { background: rgba(255,255,255,.14); color: var(--text-primary, #fff); }
.modal-settings { position: relative; }

/* ================================================================
   Configurações da conta no celular — antes disputava largura fixa de
   250-280px pro menu lateral + padding grande de desktop dentro de uma
   tela de ~380-430px, isso é o que ficava "quebrado" (texto cortado,
   menu apertado, conteúdo espremido). Empilha o menu de abas em cima
   (rolando na horizontal, estilo pílula) e o conteúdo embaixo, cada um
   ocupando a largura toda. Fica no final do arquivo de propósito: várias
   regras mais antigas de .modal-settings/.settings-* usam !important em
   pontos diferentes do arquivo, e empate de especificidade em CSS é
   resolvido pela ORDEM — aqui no final este bloco sempre vence, sem
   precisar caçar e apagar cada regra antiga uma por uma.
   ================================================================ */
@media (max-width: 680px) {
  .modal-settings {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    height: calc(100dvh - 16px) !important;
    max-height: none !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .modal-settings > h3 { display: none !important; }
  .modal-close-btn { top: 10px !important; right: 10px !important; }
  .settings-layout {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  .settings-nav {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding: 44px 12px 10px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    width: auto !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    font-size: 12.5px !important;
    min-height: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.05) !important;
  }
  .settings-tab.active { background: rgba(2,210,227,.22) !important; }
  .settings-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 16px 28px !important;
  }
  .settings-pane { max-width: none !important; gap: 14px !important; }
  .settings-pane h4 { font-size: 19px !important; }
  .settings-pane label { margin: 0 !important; font-size: 13px !important; }
  /* 16px trava o zoom automático que o iOS/Android faz ao focar um campo
     menor que isso — é o que dava a sensação de "layout quebrado" ao
     digitar. */
  .settings-pane input, .settings-pane textarea, .settings-pane select {
    font-size: 16px !important;
    padding: 11px 12px !important;
    min-height: 0 !important;
  }
  .settings-avatar-preview { width: 80px !important; height: 80px !important; }
  .wc-profile-editor { grid-template-columns: 1fr !important; gap: 16px !important; }
  .device-actions { flex-direction: column !important; align-items: stretch !important; }
}

/* ================================================================
   Painel "Editar cargos" do menu de contexto (clique direito num
   membro do servidor) — reaproveita a base visual do .wc-context.
   ================================================================ */
.wc-role-editor {
  width: 230px;
  max-height: 320px;
  overflow-y: auto;
  padding-bottom: 8px;
}
.wc-role-editor-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary, #9a9aa6);
  padding: 8px 10px 6px;
}
.wc-role-editor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.wc-role-editor-row:hover { background: rgba(255,255,255,.06); }
.wc-role-editor-row input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent, #02d2e3);
  flex-shrink: 0;
}
.wc-role-editor-row .role-color { flex-shrink: 0; }
.wc-role-editor-empty {
  padding: 10px;
  font-size: 13px;
  color: var(--text-secondary, #9a9aa6);
}

/* ================================================================
   Fix: no celular, a lista de membros do servidor nunca aparecia ao
   puxar a tela da direita pra o meio. Existiam duas regras conflitantes
   com a MESMA especificidade "#app-screen.with-members #members-panel"
   — uma escondendo (display:none!important) e outra mostrando — e a que
   escondia vinha depois no arquivo, então sempre vencia, cancelando a
   classe .mobile-open sempre que havia um servidor ativo (que é
   justamente quando a lista de membros faz sentido aparecer). Esse
   seletor abaixo tem especificidade maior que os dois (ID+classe dos
   dois lados), então vence não importa a ordem no arquivo.
   ================================================================ */
@media (max-width: 680px) {
  #app-screen.with-members #members-panel.mobile-open {
    display: flex !important;
  }
}

/* ================================================================
   Fix: apresentação de tela em "tela cheia" (Fullscreen API real, ver
   fullscreen() em call.js) não cobria a tela toda — pedíamos tela cheia
   na .call-bar inteira, mas o .call-stage dentro dela continuava com
   altura fixa (min(42vh,420px)) mesmo em tela cheia, deixando um monte
   de espaço vazio ao redor do vídeo. Isso faz o palco esticar pra
   preencher o monitor inteiro só quando o navegador está de verdade em
   modo tela cheia.
   ================================================================ */
.call-bar:fullscreen,
.call-bar:-webkit-full-screen {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}
.call-bar:fullscreen .call-stage,
.call-bar:-webkit-full-screen .call-stage {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 0 !important;
}

/* ================================================================
   Fix: o mini-dock de chamada minimizada (que fica flutuando no canto
   quando a call some da tela) tinha várias regras conflitantes de
   posição/largura acumuladas — no celular ele saía cortado/quebrado. Isso
   trava a largura dentro do que cabe na tela e deixa o texto de status
   encolher com "..." em vez de empurrar os botões pra fora da tela.
   ================================================================ */
@media (max-width: 680px) {
  /* left/right/bottom/width sem !important pelo mesmo motivo do bloco
     acima: positionMiniDock() (call.js) manda por JS, sobrescrevendo isso
     aqui normalmente — o que sobra fixo é só o "não deixa vazar da tela"
     (overflow/flex-wrap) que já valia antes.

     ACHADO (bug do mini-dock preso na tela no celular, mesmo sem estar
     em chamada): esse "display: flex !important" valia SEMPRE, mesmo
     quando o elemento tinha a classe "hidden" — porque ".hidden{display:
     none!important}" (bem no topo do arquivo) tem a MESMA especificidade
     (uma classe) e o MESMO !important, e em caso de empate quem vem
     DEPOIS no arquivo ganha. Como este bloco fica bem mais abaixo, ele
     sempre vencia e o dock nunca sumia — não importava se endCall()
     tinha rodado certinho e adicionado "hidden" (e ele sempre rodava
     certo, foi confirmado no debug). ":not(.hidden)" faz essa regra só
     valer quando o dock realmente deve aparecer, deixando ".hidden"
     funcionar normalmente quando a chamada termina. */
  .mini-call-dock:not(.hidden) {
    position: fixed !important;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    max-width: calc(100vw - 16px);
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow: hidden !important;
    z-index: 10020 !important;
  }
  .mini-call-status {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .mini-call-dock button {
    flex: 0 0 auto !important;
  }
}

/* --- v10: corrige papel de parede/fundo do servidor invisíveis -----------
   #main-panel nunca definia um z-index próprio, então as camadas com
   z-index negativo (.chat-wallpaper-layer, .server-background-layer)
   escapavam para um contexto de empilhamento mais alto e ficavam atrás do
   próprio fundo opaco do #main-panel. isolation:isolate força #main-panel a
   criar seu próprio contexto, mantendo as camadas visíveis por trás do
   conteúdo do chat, na frente do fundo do painel. */
#main-panel { isolation: isolate !important; }

/* --- Banner do servidor atrás do nome, no topo da lista de canais -------- */
#channels-panel .sidebar-header.has-server-banner {
  background-size: cover !important;
  background-position: center !important;
  padding: 54px 20px 10px !important;
  align-items: flex-end !important;
  border-radius: 0 0 12px 12px;
  transition: background-image .2s ease;
}
#channels-panel .sidebar-header.has-server-banner h2,
#channels-panel .sidebar-header.has-server-banner .sidebar-header-sub {
  text-shadow: 0 2px 6px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.7);
}

/* --- Avatares + contagem ao vivo nos canais de voz do servidor ----------- */
.channel-item[data-channel-type="voice"] .channel-item-row { display: flex; align-items: center; gap: 6px; }
.channel-voice-count {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted, #9a95ab);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 1px 7px;
  flex: 0 0 auto;
}
.channel-item.has-voice-presence .channel-voice-count { color: #3ba55d; background: rgba(59,165,93,.15); }
.channel-item .channel-edit-btn { margin-left: 4px; }
.channel-voice-avatars {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 0 6px 26px;
  flex-wrap: wrap;
}
.channel-voice-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: #2b2740;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-primary, #eee);
  border: 1px solid rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.channel-voice-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.channel-voice-avatar-more { background: rgba(255,255,255,.08); font-size: 8.5px; }

/* --- Indicador de mensagem não lida / menção nos ícones de servidor ------ */
.server-item { overflow: visible !important; }
.server-unread-dot {
  position: absolute;
  left: -3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bg-deepest, #0b0913);
  pointer-events: none;
}
#share-system-audio-row.disabled { opacity: .45; }
#share-system-audio-row.disabled input { cursor: not-allowed; }

.server-mention-badge {
  position: absolute;
  right: -4px;
  top: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ed4245;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  border: 2px solid var(--bg-deepest, #0b0913);
  box-sizing: border-box;
  pointer-events: none;
}

/* ================================================================
   Amigos / bloqueio / denúncias — cartão de perfil, contexto de membro e
   mensagem, e a aba "Denúncias" do painel de admin.
   Ver client/js/features.js (renderProfileActions, memberContext,
   messageContext, adminPanel/loadReports) e server/routes/moderation.js.
   ================================================================ */
.admin-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-tabs .btn.active { background: var(--accent); color: #fff; border-color: transparent; }

.admin-reports { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.report-card { background: #141521; border: 1px solid #ffffff0d; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.report-card-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; }
.report-reported { font-size: 14px; }
.report-meta { font-size: 12px; color: #8f91a4; }
.report-reason { font-size: 13px; color: #ddd; white-space: pre-wrap; }
.report-context { font-size: 12px; color: #aaa; font-style: italic; background: #0f1017; border-radius: 8px; padding: 8px; }
.report-evidence { display: flex; gap: 8px; flex-wrap: wrap; }
.report-evidence img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid #ffffff14; }
.report-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.report-resolution { font-size: 12px; color: #8f91a4; }

.profile-blocked-note { font-size: 13px; color: #ff8fa3; }

#report-form label { display: block; margin-bottom: 12px; }
.report-evidence-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.report-evidence-thumb { position: relative; width: 64px; height: 64px; }
.report-evidence-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.report-evidence-thumb button {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border-radius: 50%; background: #ff4d6d; color: #fff; border: 0;
  cursor: pointer; font-size: 11px; line-height: 20px; padding: 0;
}

@media (max-width: 900px) {
  .admin-reports { max-height: 50vh; }
  .report-evidence img, .report-evidence-thumb { width: 70px; height: 70px; }
}

/* ================================================================
   Avisos da equipe — aba "Avisos" do painel de admin (ao lado de
   "Denúncias") e o pop-up de aviso exibido pra todo mundo quando um
   admin publica um. Ver client/js/announcements.js, client/js/features.js
   (adminPanel) e server/routes/announcements.js.
   ================================================================ */
.admin-announcements-hint { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; max-width: 52ch; }

.admin-announcement-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.admin-announcement-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
.admin-announcement-form textarea { min-height: 110px; resize: vertical; }

.admin-announcement-current { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--bg-hover); }
.admin-announcement-current-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px; }
.admin-announcement-current-card { background: #141521; border: 1px solid #ffffff0d; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.admin-announcement-current-card strong { font-size: 14px; color: var(--text-primary); }
.admin-announcement-current-card p { margin: 0; font-size: 13px; color: #ccc; white-space: pre-wrap; }
.admin-announcement-current-card time { font-size: 11px; color: var(--text-muted); }
.admin-announcement-empty { font-size: 13px; color: var(--text-muted); font-style: italic; }

/* Pop-up exibido pra todo mundo. Cartão com degradê violeta escuro
   (identidade WifiCord), badge "AVISO", ícone de megafone (SVG, ver
   client/js/icons.js — sem emoji, conforme pedido). */
.announcement-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center;
  background: rgba(5, 6, 12, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 20px;
  animation: wcOverlayIn .18s ease both;
}
.announcement-overlay.hidden { display: none; }

.announcement-card {
  position: relative;
  width: min(420px, 100%);
  padding: 28px 26px 26px;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(2, 210, 227, .35), transparent 55%),
    linear-gradient(165deg, #221B3D 0%, #171130 55%, #0F0C22 100%);
  border: 1px solid rgba(167, 139, 250, .28);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  color: var(--text-primary);
  animation: wcModalIn .22s cubic-bezier(.16, 1, .3, 1) both;
}

.announcement-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

.announcement-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(2, 210, 227, .18);
  border: 1px solid rgba(167, 139, 250, .4);
  color: var(--accent-secondary);
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
}
.announcement-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); }

.announcement-close-btn {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid transparent;
  background: transparent; color: var(--text-muted);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.announcement-close-btn:hover { background: rgba(255, 255, 255, .08); color: var(--text-primary); }
.announcement-close-btn .icon-svg { width: 16px; height: 16px; }

.announcement-icon {
  width: 52px; height: 52px; margin: 14px 0 16px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-primary-start), var(--accent-primary-end));
  color: #fff;
  box-shadow: 0 10px 26px var(--glow-violet);
}
.announcement-icon .icon-svg { width: 26px; height: 26px; }

.announcement-heading {
  margin: 0 0 4px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted);
}
.announcement-heading span { color: var(--accent-secondary); }

.announcement-title {
  margin: 0 0 10px;
  font-size: 21px; font-weight: 800; line-height: 1.3;
  color: var(--text-primary);
  text-wrap: balance;
}

.announcement-message {
  margin: 0 0 24px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.announcement-ok-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px;
  border: 0; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-primary-start), var(--accent-violet-deep));
  color: #fff; font-size: 14.5px; font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 10px 24px var(--glow-violet);
}
.announcement-ok-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px var(--glow-violet); }
.announcement-ok-btn:active { transform: translateY(0); }
.announcement-ok-btn .icon-svg { width: 17px; height: 17px; }

@media (max-width: 480px) {
  .announcement-card { padding: 24px 20px 22px; border-radius: 16px; }
  .announcement-title { font-size: 19px; }
}

/* ================================================================
   Avatar interativo — presets "Pirueta", "Brilho ao passar o mouse" e
   os companheiros (gatinho/passarinho). Pixel art original desenhada
   à mão (client/assets/avatarfx-*.png — gatinho/passarinho: sprite
   sheet de 6 frames num "loaf" bem expressivo, com respiro, rabo/asa
   balançando, piscada e um coraçãozinho/notinha de vez em quando;
   brilho: burst de 7 frames com anel de choque se expandindo) — nada
   de emoji solto. Cada preset anima por steps() trocando de frame,
   com image-rendering:pixelated pra manter os pixels nítidos em
   qualquer escala. Reaproveita as classes .profile-avatar-decorated
   já existentes (cartão de perfil, lista de amigos, mensagens,
   membros do servidor...); os blocos #wc-preview-avatar-wrap logo
   abaixo espelham o mesmo efeito pro preview ao vivo no editor de
   perfil. */
@keyframes avatarPirouette { to { transform: rotate(360deg); } }
.profile-avatar-decorated.avatar-fx-pirouette img,
.profile-avatar-decorated.avatar-fx-pirouette > span { animation: avatarPirouette 2.6s linear infinite; }

/* Poeira de pixels girando junto da pirueta — mesma sprite sheet do
   brilho ao passar o mouse, só que em loop contínuo e bem discreta. */
@keyframes avatarPirouetteDustSpin { to { transform: rotate(-360deg); } }
@keyframes avatarPirouetteDustFrames { to { background-position: -672px 0; } }
.profile-avatar-decorated.avatar-fx-pirouette::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 96px; height: 96px; z-index: 4; pointer-events: none;
  background-image: url('../assets/avatarfx-sparkle.png'); background-repeat: no-repeat;
  background-position: 0 0; background-size: 672px 96px; image-rendering: pixelated;
  opacity: .6; mix-blend-mode: screen;
  animation: avatarPirouetteDustSpin 2.6s linear infinite, avatarPirouetteDustFrames 1.6s steps(7) infinite;
}

/* .profile-avatar-decorated normalmente corta tudo que passa da borda
   (overflow:hidden, ver a regra .avatar-wrap,...,.profile-avatar-decorated
   mais acima) pra manter a foto redondinha. Isso cortaria o brilho/poeira
   de pixels bem no meio do cartão de perfil, que é justamente onde esses
   efeitos deveriam aparecer — então libera overflow só quando um desses
   dois presets está ativo (maior especificidade que a regra genérica,
   então ganha independente da ordem no arquivo). */
.profile-avatar-decorated.avatar-fx-hover-burst,
.profile-avatar-decorated.avatar-fx-pirouette { overflow: visible; }
.profile-avatar-decorated.avatar-fx-hover-burst { cursor: pointer; }
.profile-avatar-decorated.avatar-fx-hover-burst::after {
  content: ''; position: absolute; inset: 0; margin: auto; z-index: 5;
  width: 96px; height: 96px; pointer-events: none; opacity: 0;
  background-image: url('../assets/avatarfx-sparkle.png'); background-repeat: no-repeat;
  background-position: 0 0; background-size: 672px 96px; image-rendering: pixelated;
}
.profile-avatar-decorated.avatar-fx-hover-burst:hover::after {
  opacity: 1; animation: avatarSparkleFrames .9s steps(7) forwards;
}
@keyframes avatarSparkleFrames { to { background-position: -672px 0; } }

/* Companheiros (gatinho/passarinho): sprite de 6 frames em loop
   (respiro/bounce, rabo ou asa se mexendo, piscada, e um coraçãozinho
   ou notinha musical de vez em quando pra dar personalidade de
   verdade). startAvatarPet() (client/js/features.js) só troca a
   classe is-cat/is-bird — a posição continua vindo do requestAnimationFrame
   que segue o mouse, então o "bounce" do sprite some por cima disso. */
.wc-avatar-pet {
  position: absolute; top: 0; left: 0; width: 72px; height: 72px; pointer-events: none;
  z-index: 6; filter: drop-shadow(0 4px 5px #000b); will-change: transform;
  background-repeat: no-repeat; image-rendering: pixelated;
}
@keyframes avatarPetCatFrames { to { background-position: -432px 0; } }
@keyframes avatarPetBirdFrames { to { background-position: -432px 0; } }
.wc-avatar-pet.is-cat {
  background-image: url('../assets/avatarfx-cat.png'); background-size: 432px 72px;
  animation: avatarPetCatFrames 2.1s steps(6) infinite;
}
.wc-avatar-pet.is-bird {
  background-image: url('../assets/avatarfx-bird.png'); background-size: 432px 72px;
  animation: avatarPetBirdFrames .85s steps(6) infinite;
}

/* Preview ao vivo no editor de perfil (aba de personalização) — mesmos
   efeitos, mesmas sprite sheets, só trocando o seletor pro wrapper do
   preview em vez de .profile-avatar-decorated. */
#wc-preview-avatar-wrap[data-avatarfx="pirouette"] .wc-preview-avatar img,
#wc-preview-avatar-wrap[data-avatarfx="pirouette"] .wc-preview-avatar span { animation: avatarPirouette 2.6s linear infinite; }
#wc-preview-avatar-wrap[data-avatarfx="pirouette"]::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 96px; height: 96px; z-index: 4; pointer-events: none;
  background-image: url('../assets/avatarfx-sparkle.png'); background-repeat: no-repeat;
  background-position: 0 0; background-size: 672px 96px; image-rendering: pixelated;
  opacity: .6; mix-blend-mode: screen;
  animation: avatarPirouetteDustSpin 2.6s linear infinite, avatarPirouetteDustFrames 1.6s steps(7) infinite;
}
#wc-preview-avatar-wrap[data-avatarfx="hover-burst"] { cursor: pointer; }
#wc-preview-avatar-wrap[data-avatarfx="hover-burst"]::after {
  content: ''; position: absolute; inset: 0; margin: auto; z-index: 5;
  width: 96px; height: 96px; pointer-events: none; opacity: 0;
  background-image: url('../assets/avatarfx-sparkle.png'); background-repeat: no-repeat;
  background-position: 0 0; background-size: 672px 96px; image-rendering: pixelated;
}
#wc-preview-avatar-wrap[data-avatarfx="hover-burst"]:hover::after {
  opacity: 1; animation: avatarSparkleFrames .9s steps(7) forwards;
}

/* Botão "mortal": só aparece para a allowlist (ver features.js) e faz a
   própria foto de perfil de quem clicou dar um mortal, visível pra todos. */
@keyframes avatarBackflip {
  0% { transform: rotate(0deg) scaleY(1); }
  15% { transform: rotate(60deg) scaleY(.6); }
  30% { transform: rotate(150deg) scaleY(1); }
  50% { transform: rotate(270deg) scaleY(.6); }
  70% { transform: rotate(360deg) scaleY(1) translateY(-10px); }
  85% { transform: rotate(360deg) translateY(-4px); }
  100% { transform: rotate(360deg) translateY(0); }
}
.avatar-backflip { display: inline-block; animation: avatarBackflip .8s cubic-bezier(.34,1.56,.64,1); }
#backflip-btn { font-size: 18px; }

/* ================================================================
   "Modo ampliado" dos vídeos de chamada (câmera, bolinha de câmera
   durante apresentação, vídeo de participante em chamada de grupo) —
   ver fullscreenVideoElement() em call.js pro porquê disso existir em
   vez de usar video.requestFullscreen() nativo (resumo: o navegador
   desenha controles de player — play/pause/barra de progresso — por
   cima de um <video> em fullscreen nativo, mesmo sem o atributo
   "controls", o que não faz sentido numa chamada ao vivo).
   #remote-video/#local-video/etc já têm várias regras de posição
   !important espalhadas pelo arquivo (cada uma pra um contexto
   diferente: chamada normal, apresentando, grupo...) — combinar ID +
   classe aqui (em vez de só ".wc-video-zoom") garante especificidade
   MAIOR que qualquer uma delas, então essa regra sempre ganha
   enquanto a classe estiver no elemento, não importa a ordem no
   arquivo (foi exatamente a falta disso que causou o bug do mini-dock
   preso no celular — ver comentário lá perto de @media(max-width:680px)). */
#remote-video.wc-video-zoom,
#local-video.wc-video-zoom,
#remote-camera-pip.wc-video-zoom,
#local-camera-pip.wc-video-zoom,
.server-call-tile video.wc-video-zoom {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  object-fit: contain !important;
  background: #000 !important;
  z-index: 1000000 !important;
  cursor: zoom-out !important;
}

/* ================================================================
   Layout da chamada no celular — reescrito do zero num bloco só.
   ("quase nada tá utilizável, fica tudo torto, pequeno" — o motivo
   real: existiam VÁRIAS regras antigas de #call-bar/.call-stage/
   .call-controls espalhadas pelo arquivo, de eras diferentes, cada
   uma pensada isoladamente sem saber das outras — o resultado prático
   dependia só de qual delas por acaso "ganhava" a cascata, não do que
   fazia sentido. E o problema maior nem era CSS: a chamada dividia a
   tela com o cabeçalho do chat E a lista de mensagens por trás dela ao
   mesmo tempo (nada escondia isso durante a chamada), então sobrava
   pouquíssima altura de verdade pra câmera/apresentação — é POR ISSO
   que tudo parecia espremido e torto, não por causa só de tamanho de
   botão. Esse bloco fica no fim do arquivo de propósito: como quase
   tudo aqui usa !important, "quem vem por último no arquivo" decide o
   empate de especificidade — é a mesma lição do bug do mini-dock preso
   (ver comentário lá perto do primeiro @media(max-width:680px)).

   SEXTO ACHADO: esse bloco inteiro só valia com "max-width:680px" — ou
   seja, só na LARGURA da tela. Com o celular deitado (paisagem), a
   largura vira o lado comprido (normalmente 700-950px em qualquer
   aparelho — é a altura de pé dele) e some do alcance desse media query,
   então NENHUMA dessas correções (tela cheia de verdade, esconder o chat
   atrás, tirar o teto de altura etc.) valia — a chamada caía de volta no
   layout de desktop (dividindo espaço com o cabeçalho/lista de mensagens,
   com teto de altura), que é exatamente "nem fica em tela cheia" no
   celular deitado. Adicionar a condição por ALTURA (o lado curto, que
   continua pequeno tanto de pé quanto deitado em qualquer celular) cobre
   os dois casos com a mesma regra. */
@media (max-width: 680px), (max-height: 680px) and (orientation: landscape) {
  /* A chamada passa a ocupar a tela inteira (como WhatsApp/Discord no
     celular) em vez de dividir espaço com o chat por trás — o resto do
     chat continua intacto, só reaparece quando a chamada termina
     (#call-bar volta a ganhar a classe "hidden" via endCall()). */
  #main-panel:has(> #call-bar:not(.hidden)) > #chat-header,
  #main-panel:has(> #call-bar:not(.hidden)) > #messages-list,
  #main-panel:has(> #call-bar:not(.hidden)) > #chat-empty-hero,
  #main-panel:has(> #call-bar:not(.hidden)) > #typing-indicator,
  #main-panel:has(> #call-bar:not(.hidden)) > #message-form {
    display: none !important;
  }

  /* ACHADO (mesmo tipo de bug do mini-dock, ver o outro comentário sobre
     isso perto do primeiro @media(max-width:680px)): ".call-bar{display:
     flex!important}" sem essa proteção tinha a MESMA especificidade +
     !important que ".hidden{display:none!important}" (lá no topo do
     arquivo), e como essa regra vem DEPOIS no arquivo, ela ganhava o
     empate — chamada aparecia em tela cheia mesmo com a classe "hidden"
     presente, mesmo SEM nenhuma chamada ativa de verdade. ":not(.hidden)"
     faz essa regra só valer quando a chamada realmente deve aparecer. */
  /* ACHADO #2 (mesma causa raiz, forma diferente): mesmo com o bloco
     acima, o vídeo continuava um risco fino em cima de uma área vazia
     enorme. Motivo: lá na regra ".call-bar{flex:1 1 auto;...}" (perto do
     início do arquivo, pensada pra quando a chamada divide espaço com o
     chat — "in-conversation stage") existe um "max-height:min(48vh,560px)"
     SEM !important. Como esta regra aqui embaixo nunca tocava em
     max-height, aquele limite de ~48% da tela continuava valendo mesmo
     em tela cheia no celular: o .call-bar ficava "pendurado" no topo com
     no máximo 48vh de altura, e o resto da viewport (os outros ~52%)
     sobrava vazio atrás dele. "max-height:none" aqui remove esse teto. */
  .call-bar:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    z-index: 5000 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Menu de contexto (clique/toque longo num participante da chamada)
     é um elemento à parte, fora de #call-bar — sem isso ficava atrás do
     overlay em tela cheia acima e nunca aparecia no celular. */
  .call-context-menu { z-index: 5001 !important; }

  /* A câmera/apresentação agora ocupa TODO o espaço que sobra (o resto
     da tela menos a barra de controles abaixo) em vez de uma altura
     fixa pequena (min(...vh, ...px) — que era o principal motivo de
     ficar tudo minúsculo). flex:1 1 auto deixa o flex column acima
     calcular isso sozinho, sempre certo pro tamanho real da tela. */
  .call-stage {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  .call-stage-topbar {
    padding: max(10px, env(safe-area-inset-top)) 12px 8px !important;
  }
  .call-stage-title strong { font-size: 13px !important; }
  .call-stage-peer { max-width: 34vw; font-size: 11px !important; }

  /* Botões de verdade tocáveis (48px é o mínimo recomendado pra alvo de
     toque) e permitidos quebrar linha em vez de cortar/espremer horizontal
     quando não cabem todos numa linha só. */
  .call-controls {
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    column-gap: 10px !important;
    padding: 12px 12px max(12px, env(safe-area-inset-bottom)) !important;
  }
  .call-btn, .call-device-arrow {
    width: 50px !important;
    height: 50px !important;
    font-size: 19px !important;
  }
  .call-device-arrow {
    /* Volta a aparecer (a versão antiga escondia pra "economizar
       espaço"), só que agora cabe de sobra — e sem ela não dava pra
       trocar de câmera/microfone pelo celular de jeito nenhum. */
    display: inline-flex !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 50px !important;
  }
  .call-device-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 24px);
  }

  /* Câmera pequena (PIP) num tamanho de verdade visível, sem encostar
     nos controles nem no topo. */
  .call-stage > #local-video {
    width: clamp(96px, 30vw, 168px) !important;
    height: clamp(64px, 20vw, 112px) !important;
    right: 12px !important;
    bottom: 12px !important;
  }

  /* Bolinhas de câmera durante apresentação de tela — um pouco menores
     no celular (a tela já é pequena, cantos opostos continuam valendo
     pra nunca sobrepor a apresentação nem uma na outra). */
  #local-camera-pip, #remote-camera-pip {
    width: clamp(84px, 26vw, 130px) !important;
    height: clamp(56px, 17vw, 88px) !important;
  }
  #local-camera-pip { right: 12px !important; bottom: 12px !important; }
  #remote-camera-pip { left: 12px !important; bottom: 12px !important; }

  .call-stage .call-participant-avatar {
    width: clamp(76px, 22vw, 108px) !important;
    height: clamp(76px, 22vw, 108px) !important;
  }

  #server-call-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(160px, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .call-stage-immersive-toggle {
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}

/* ================================================================
   Aba "Jogos" — hub com cards (Flappy Cubes + Meia-Lua: Turno da Noite)
   dentro de #modal-games. Todas as classes/ids abaixo são novas (nada aqui
   reaproveita um nome já usado em outro lugar do arquivo), então não entra
   na mesma armadilha de empate de especificidade que os blocos de call
   acima — mesmo assim isso fica no fim do arquivo por consistência com o
   resto do arquivo (ver comentários lá em cima sobre a ordem importar pra
   !important). ver client/js/games.js pra troca hub <-> painel de jogo.
   ================================================================ */
#modal-games { display: flex; flex-direction: column; }
#games-hub { display: flex; flex-direction: column; min-height: 0; }
.game-panel { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.game-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.game-card:hover, .game-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(2, 210, 227, .4);
  box-shadow: 0 14px 34px -14px var(--glow-violet, rgba(2, 210, 227, .5));
}
.game-card-cover {
  height: 132px;
  display: grid;
  place-items: center;
  font-size: 44px;
  background: radial-gradient(circle at 30% 20%, rgba(2, 210, 227, .28), transparent 60%), #14111f;
}
.game-card-cover-flappy { background: radial-gradient(circle at 30% 20%, rgba(2, 210, 227, .28), transparent 60%), linear-gradient(160deg, #241a45, #0b0913); }
.game-card-cover-meialua {
  background:
    radial-gradient(circle at 50% 30%, rgba(2, 210, 227, .22), transparent 65%),
    linear-gradient(180deg, #1a1424, #07060a);
  background-image:
    linear-gradient(180deg, rgba(7,6,10,0) 45%, rgba(7,6,10,.92) 100%),
    url('/jogos/meia-lua/assets/sprites/face_gregorio.png');
  background-repeat: no-repeat;
  /* ACHADO: face_gregorio.png não é um ícone único — é uma folha com 3
     poses de 128x128 lado a lado (384x128, ver sprites.json). O
     background-size antigo ("96px 96px") esticava a folha inteira num
     quadrado, embaralhando as 3 poses numa imagem distorcida. Agora a
     escala é só pela altura (mantém a proporção 1:1 de cada quadro) e o
     recorte mostra só o 1º quadro (o mais calmo).  */
  background-position: center 18px, 18px 14px;
  background-size: auto, auto 96px;
  image-rendering: pixelated;
}
.game-card-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.game-card-body b { font-size: 14px; }
.game-card-body small { color: var(--text-muted); font-size: 12px; line-height: 1.4; }

.meialua-frame-wrap {
  position: relative; /* ACHADO: o iframe usava height:100%, mas isso só
    resolve se o ancestral tiver altura "definida" de verdade — aqui a
    altura vem de flex-grow + min-height dentro de várias camadas de
    flex, que o navegador não conta como definida, então o height:100%
    falhava e o iframe caía no tamanho padrão dele (150px). position:
    absolute + inset:0 no iframe não depende disso, preenche sempre. */
  flex: 1 1 auto;
  min-height: min(80vh, 720px); /* um pouco mais alto que antes — o menu
    do jogo (logo + 7 botões) precisa dessa folga pra não precisar rolar
    e sobrepor a notinha do rodapé (que é position:absolute lá dentro) */
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(2, 210, 227, .28);
  background: #050308;
  box-shadow: 0 20px 50px -12px #000a, 0 0 0 1px rgba(255, 255, 255, .04) inset;
}
#meialua-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #050308; }

/* Botão "Tela cheia" (client/js/games.js chama requestFullscreen() no
   próprio .meialua-frame-wrap) — fica sobreposto no canto do iframe (não
   no cabeçalho, que é irmão do wrap: em :fullscreen o navegador só
   desenha o elemento escolhido e quem está DENTRO dele, então um botão
   de fora ficaria com o clique bloqueado pelo próprio iframe por cima). */
.meialua-fullscreen-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(10, 8, 16, .65);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s ease;
}
.meialua-fullscreen-btn:hover, .meialua-fullscreen-btn:focus-visible { opacity: 1; }
@media (max-height: 460px) {
  /* celular deitado: botão bem compacto pra não brigar com o HUD do
     jogo (painel de missões), que já dá espaço pra essa altura. */
  .meialua-fullscreen-btn { top: 6px; right: 6px; padding: 3px 8px; font-size: 10px; border-radius: 6px; }
}

.meialua-frame-wrap:fullscreen {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
}

@media (max-width: 680px) {
  .modal-games { height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; }
  .games-grid { grid-template-columns: 1fr; }
  .meialua-frame-wrap { min-height: 0; }
}
@media (max-width: 480px) {
  .game-card-cover { height: 104px; font-size: 36px; }
  .game-card-cover-meialua { background-size: auto, auto 72px; }
}

/* "Vire o celular": games.js liga .meialua-mobile no wrap só quando detecta
   um aparelho de celular de verdade (nada de janela de desktop estreita —
   ver isMobileDevice() lá) no instante em que abre o jogo, então esse aviso
   nunca aparece à toa numa janela redimensionada. Escondido por padrão e
   revelado pelo @media(orientation:portrait) abaixo, que reage sozinho a
   girar o aparelho, sem precisar de JS ouvindo resize/orientationchange. */
.meialua-rotate-hint {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  background: rgba(5, 3, 8, .94);
  color: #fff;
}
.meialua-rotate-icon { font-size: 46px; animation: meialua-rotate-swing 1.6s ease-in-out infinite; }
.meialua-rotate-hint p { max-width: 260px; margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
@keyframes meialua-rotate-swing {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .meialua-rotate-icon { animation: none; } }
@media (orientation: portrait) {
  .meialua-frame-wrap.meialua-mobile .meialua-rotate-hint { display: flex; }
}