@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── RESET & BASE ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sidebar-w:  240px;
  --guild-rail-w: 56px;
  --bg-app:     #0d0d1a;
  --bg-sidebar: #111125;
  --bg-card:    #16162e;
  --bg-hover:   #1e1e3a;
  --bg-active:  #26264a;
  --bg-secondary: #0f0f22;
  --bg-tertiary:  #141432;
  --bg-floating:  rgba(124,93,239,0.18);
  --accent:     #7c5def;
  --accent-hover:#6b4ff5;
  --accent-dim: #4f3da8;
  --accent-glow:#a478ff;
  --cyan:       #22d3ee;
  --green:      #22c55e;
  --yellow:     #f59e0b;
  --red:        #ef4444;
  --text-1:     #f1f0ff;
  --text-2:     #9491b4;
  --text-3:     #5c5980;
  --text-muted: var(--text-2);
  --text-normal: var(--text-1);
  --border:     rgba(255,255,255,0.06);
  --border2:    rgba(255,255,255,0.1);
  --radius:     12px;
  --radius-sm:  8px;
  --titlebar-h: 36px;
  /* Espaço vertical “fixo” (titlebar global + cabeçalho da sala + margens da grelha). A barra de sons é overlay — não empurra layout. */
  --room-expanded-reserved-y: calc(var(--titlebar-h) + 56px + 48px);
  /* Com mais participantes: altura mínima para os cartões que ficam abaixo do ampliado (16:9 + gap) */
  --room-expanded-peers-below-y: min(280px, 34vh);
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-app);
  color: var(--text-1);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ─── UTILITIES ─────────────────────────────── */
.hidden { display: none !important; }

/* ─── OVERLAYS (setup / connecting) ────────── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 0%, #1e1054 0%, var(--bg-app) 70%);
}

/* Acima de auth/guild-pick (mesmo z-index 900, mas mais tarde no DOM) e dos modais (~10045–10060). */
#screen-updating.overlay {
  z-index: 10070;
}

/* Versão discreta no canto (telas iniciais / onboarding) */
.overlay-app-version {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  opacity: 0.72;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.02em;
  z-index: 2;
}

/* ─── SETUP CARD ────────────────────────────── */
.setup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
  gap: 18px;
  padding: 20px 0 32px;
}

.setup-logo img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 48px rgba(124,93,239,0.45);
}

.setup-title {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}
.setup-title span {
  background: linear-gradient(135deg, var(--accent-glow), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.setup-title .setup-title-lead {
  background: none;
  -webkit-text-fill-color: var(--text-1);
  color: var(--text-1);
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.setup-subtitle { font-size: 13px; color: var(--text-2); text-align: center; }
.auth-subtitle-wrap { max-width: 340px; line-height: 1.45; }
.auth-subtitle-terms-line { display: inline-block; margin-top: 4px; }
.auth-inline-link {
  display: inline;
  margin: 0 1px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--accent-glow);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-inline-link:hover { color: var(--cyan); }

.auth-terms-overlay {
  z-index: 10065;
  background: rgba(8, 6, 20, 0.72);
  backdrop-filter: blur(6px);
  padding: 24px 16px;
}
.auth-terms-dialog {
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated, #1a1530);
  border: 1px solid rgba(124, 93, 239, 0.22);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.auth-terms-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.auth-terms-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.25;
  padding-right: 8px;
}
.auth-terms-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-terms-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-1);
}
.auth-terms-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 18px 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  -webkit-overflow-scrolling: touch;
}
.auth-terms-scroll .terms-accord-sec { margin-bottom: 18px; }
.auth-terms-scroll .terms-accord-sec h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
.auth-terms-scroll .terms-accord-sec p { margin: 0 0 10px; }
.auth-terms-scroll .terms-accord-sec ul {
  margin: 0 0 10px;
  padding-left: 1.15em;
}
.auth-terms-scroll .terms-accord-sec li { margin-bottom: 4px; }
.auth-terms-scroll .terms-accord-load-error {
  margin: 0;
  color: var(--text-2);
}
/* ─── Settings card ─────────────────────────── */
.settings-card {
  width: 380px;
  gap: 24px;
  padding: 28px 0 40px;
}
.settings-avatar-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.settings-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.settings-form-profile {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.settings-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.settings-actions .btn-ghost-sm { margin-top: 0; }

.avatar-picker { cursor: pointer; }

.avatar-ring {
  position: relative;
  width: 96px;
  height: 96px;
}
.avatar-ring img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
  transition: opacity 0.2s;
}
.avatar-overlay {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.avatar-overlay-icon {
  color: #fff;
  opacity: 0.85;
}
.avatar-picker:hover .avatar-overlay { opacity: 1; }
.avatar-picker:hover .avatar-ring img { opacity: 0.7; }

.avatar-error {
  font-size: 11px;
  color: var(--red);
  text-align: center;
  margin-top: 8px;
  width: 100%;
  max-width: 240px;
  line-height: 1.4;
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}

.input-group { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.input-group label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-2);
}
.input-group input {
  width: 100%; padding: 11px 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text-1); font-size: 14px; font-family: inherit;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.input-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,93,239,0.2);
}
.input-group input::placeholder { color: var(--text-3); }

/* Inputs reutilizados em telas/modais (soundboard, etc) */
.modern-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.modern-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,93,239,0.2);
}
.modern-input::placeholder { color: var(--text-3); }

.modern-file-input {
  width: 100%;
  background: var(--bg-card);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text-2);
  font-size: 12px;
}
.modern-file-input::file-selector-button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  margin-right: 10px;
}

.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  border: none; border-radius: var(--radius-sm);
  color: #fff; font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(124,93,239,0.35);
}
.btn-primary:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(124,93,239,0.45); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.4; cursor: default; }

/* Connecting overlay */
.connecting-card {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.spinner {
  width: 44px; height: 44px;
  border: 3px solid var(--bg-hover);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#connecting-label { color: var(--text-2); font-size: 14px; }

/* ─── MAIN LAYOUT ───────────────────────────── */
#app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Global Titlebar drag region */
.titlebar-drag { -webkit-app-region: drag; }
.no-drag       { -webkit-app-region: no-drag; }

.app-titlebar {
  height: var(--titlebar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.brand-info {
  display: flex; align-items: center; gap: 8px;
}
.brand-icon { width: 20px; height: 20px; border-radius: 5px; }
.brand-name { font-weight: 700; font-size: 14px; letter-spacing: 0.01em; }

#app-layout {
  display: grid;
  grid-template-columns: var(--guild-rail-w) var(--sidebar-w) 1fr;
  grid-template-rows: 1fr auto;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ─── SIDEBAR (só canais; barra de utilizador está fora, em app-user-bar) ─── */
.sidebar {
  grid-column: 2;
  grid-row: 1;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
  min-height: 0;
}

.titlebar-controls {
  display: flex; gap: 2px;
}
.titlebar-update-btn {
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(124, 93, 239, 0.45);
  border-radius: 6px;
  background: rgba(124, 93, 239, 0.16);
  color: var(--accent-glow);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}
.titlebar-update-btn:hover {
  background: rgba(124, 93, 239, 0.28);
  border-color: rgba(124, 93, 239, 0.75);
  color: #fff;
}
.titlebar-update-btn:disabled {
  opacity: 0.65;
  cursor: default;
}
.titlebar-update-btn--spinning svg {
  animation: refresh-spin 0.8s linear infinite;
}
.titlebar-controls button {
  width: 26px; height: 22px;
  border: none; border-radius: 5px;
  background: transparent; color: var(--text-2);
  cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.titlebar-controls button:hover { background: var(--bg-hover); color: var(--text-1); }
#btn-close:hover { background: var(--red) !important; color: #fff !important; }

/* Channels section */
.channels-section {
  flex: 1;
  overflow: hidden; /* scroll somente na lista */
  padding-bottom: 10px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.channels-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 12px 6px 14px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-3);
}
.channels-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.channels-header-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-3);
  opacity: 0.85;
}
.btn-add-channel {
  width: 18px; height: 18px;
  border: none; border-radius: 4px;
  background: transparent; color: var(--text-3);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
  padding: 0;
}
.btn-add-channel:hover { color: var(--text-1); background: var(--bg-hover); }

/* Create room (modal) */
.modal--create-room {
  z-index: 10045;
  backdrop-filter: blur(4px);
}
.modal-card--create-room {
  max-width: calc(100vw - 32px);
}
#create-room-modal .create-room-form {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#create-room-modal .modern-input.input-error {
  border-color: var(--red) !important;
}

.create-room-error {
  font-size: 11px;
  color: var(--red, #ef4444);
  padding: 0 2px;
  line-height: 1.4;
}
.create-room-error.hidden { display: none; }

.create-room-actions { display: flex; gap: 6px; justify-content: flex-end; }
.btn-ghost-sm {
  padding: 5px 10px; border-radius: 5px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-2); font-size: 12px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: background 0.15s;
}
.btn-ghost-sm:hover { background: var(--bg-hover); }
.btn-accent-sm {
  padding: 5px 12px; border-radius: 5px; border: none;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: opacity 0.2s;
}
.btn-accent-sm:hover { opacity: 0.85; }

/* Sidebar room rows */
.sidebar-rooms {
  display: flex; flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.empty-channels {
  padding: 8px 14px;
  font-size: 12px; color: var(--text-3);
}

/* ─── Estado "sem servidor" na sidebar ─────── */
.sidebar-no-guild {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 18px 24px;
  text-align: center;
  flex: 1;
  min-height: 0;
}
.sidebar-no-guild-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(124, 93, 239, 0.10);
  border: 1px solid rgba(124, 93, 239, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  animation: no-guild-float 3.2s ease-in-out infinite;
}
.sidebar-no-guild-icon svg {
  width: 22px;
  height: 22px;
  opacity: 0.65;
}
@keyframes no-guild-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}
.sidebar-no-guild-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.3;
}
.sidebar-no-guild-sub {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.55;
  opacity: 0.9;
}

.channel-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 14px;
  border-radius: 6px;
  margin: 1px 6px;
  cursor: pointer;
  color: var(--text-3);
  font-size: 14px; font-weight: 500;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.channel-row:hover { background: var(--bg-hover); color: var(--text-1); }
.channel-row.active {
  background: var(--bg-active);
  color: var(--text-1);
}
.channel-row.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.channel-icon {
  flex-shrink: 0;
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.channel-row.active .channel-icon,
.channel-row:hover .channel-icon { opacity: 1; }
.channel-lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  opacity: 0.85;
  flex-shrink: 0;
}
.channel-row-locked .channel-lock-icon { color: #e8c170; }
.channel-row-drop-target {
  outline: 1px dashed rgba(124, 93, 239, 0.9);
  background: rgba(124, 93, 239, 0.18);
}

.channel-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.channel-count {
  font-size: 11px; color: var(--text-3);
  background: var(--bg-active);
  padding: 1px 6px; border-radius: 10px;
  flex-shrink: 0;
}


/* Channel sub-users (like Discord sidebar) */
.channel-users {
  display: flex; flex-direction: column; gap: 1px;
  margin: 1px 0 2px;
}
.channel-user-row {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 3px 10px 3px 32px;
  border-radius: 5px; margin: 0 6px;
  cursor: default;
  transition: background 0.1s;
}
.channel-user-row:hover { background: var(--bg-hover); }
.channel-user-row[draggable="true"] { cursor: grab; }
.channel-user-row-dragging { opacity: 0.5; }

.cu-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.cu-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.cu-avatar.speaking { /* fallback legacy */ 
  box-shadow: 0 0 0 2px var(--green);
  animation: speaking-pulse 0.8s ease-in-out infinite alternate;
}

.cu-avatar.speaking-local {
  box-shadow: 0 0 0 2px var(--green);
  animation: speaking-pulse 0.8s ease-in-out infinite alternate;
}

.cu-avatar.speaking-remote {
  box-shadow: 0 0 0 2px var(--cyan);
  animation: speaking-pulse-remote 0.8s ease-in-out infinite alternate;
}
@keyframes speaking-pulse {
  from { box-shadow: 0 0 0 2px rgba(34,197,94,0.6); }
  to   { box-shadow: 0 0 0 3px rgba(34,197,94,0.0); }
}

@keyframes speaking-pulse-remote {
  from { box-shadow: 0 0 0 2px rgba(34,211,238,0.6); }
  to   { box-shadow: 0 0 0 3px rgba(34,211,238,0.0); }
}
.cu-name { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cu-live-badge {
  flex-shrink: 0;
  background: #eb2d2d;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 4px;
}
.cu-voice-badge {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.6);
  color: #f2f3f5;
  opacity: 0.95;
}
.cu-voice-badge-mic {
  color: #f2f3f5;
}
.cu-voice-badge-sound {
  color: #f2f3f5;
}

/* Barra de utilizador: ocupa as duas colunas (lista de servidores + lista de salas) */
.app-user-bar {
  grid-column: 1 / 3;
  grid-row: 2;
  padding: 12px 10px 12px;
  border-top: none;
  background: var(--bg-sidebar);
  z-index: 2;
  flex-shrink: 0;
  box-sizing: border-box;
}

.user-bar-panel {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    180deg,
    rgba(124, 93, 239, 0.13) 0%,
    rgba(34, 211, 238, 0.04) 18%,
    rgba(22, 22, 46, 0.97) 40%,
    #16162e 62%,
    #13132a 100%
  );
  border: 1px solid var(--border2);
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow:
    0 -6px 28px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.28);
  margin-top: 2px;
}

.user-bar-panel--voice {
  padding-top: 10px;
}

.user-bar-voice-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
}

.user-bar-voice-top-left {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.user-bar-signal-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  margin-top: 1px;
}
.user-bar-signal-ico svg {
  color: inherit;
}

.user-bar-voice-titles { min-width: 0; }

.user-bar-voice-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.02em;
}

.user-bar-voice-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.user-bar-voice-top-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.user-bar-ico-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.user-bar-ico-btn:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}
.user-bar-ico-btn--danger:hover {
  background: rgba(239, 68, 68, 0.18);
  color: var(--red);
}

.user-bar-quick-row {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  gap: 6px;
}

/* Câmera / ecrã / sons: mesmo tamanho; fundo só no hover ou estado activo (evita “pastilha” só no soundboard). */
.user-bar-quick-row .user-bar-qbtn {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 36px;
  min-height: 36px;
  box-sizing: border-box;
  background: transparent;
  color: var(--text-2);
}
.user-bar-quick-row .user-bar-qbtn:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-1);
}
.user-bar-quick-row .user-bar-qbtn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.user-bar-qbtn {
  flex: 1;
  min-width: 0;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.user-bar-qbtn:hover:not(:disabled) {
  background: var(--bg-hover);
}
.user-bar-qbtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.user-bar-qbtn.screen-on,
.user-bar-qbtn.camera-on,
.user-bar-qbtn.ctrl-icon.screen-on {
  background: var(--accent);
  color: #fff;
}
.user-bar-qbtn.user-bar-soundboard-active,
.user-bar-qbtn.user-bar-soundboard-active:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}
.user-bar-quick-row .user-bar-qbtn.screen-on,
.user-bar-quick-row .user-bar-qbtn.camera-on,
.user-bar-quick-row .user-bar-qbtn.user-bar-soundboard-active {
  background: var(--accent);
  color: #fff;
}
.user-bar-quick-row .user-bar-qbtn.screen-on:hover:not(:disabled),
.user-bar-quick-row .user-bar-qbtn.camera-on:hover:not(:disabled),
.user-bar-quick-row .user-bar-qbtn.user-bar-soundboard-active:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.user-bar-divider {
  height: 1px;
  background: var(--border);
  margin: 0 -2px;
}

.user-bar-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
}

.user-bar-audio-controls {
  gap: 4px;
}

.user-bar-split {
  display: flex;
  align-items: stretch;
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
}
.user-bar-split:hover {
  background: var(--bg-hover);
}
.user-bar-split .user-bar-split-main {
  border-radius: 0;
  width: 30px;
  min-width: 30px;
}
.user-bar-chev {
  width: 18px;
  min-width: 18px;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s, background 0.15s;
}
.user-bar-chev:hover {
  color: var(--text-1);
  background: rgba(255,255,255,0.04);
}

.profile-status-line.profile-room-tag--in-voice {
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-status-line .user-bar-inline-vol {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-status-line.profile-room-tag--in-voice .user-bar-inline-vol svg {
  color: inherit;
}

.profile-info { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}
#my-sidebar-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-dim);
  display: block;
}
.profile-avatar-wrap .profile-status-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  height: 30%;
  min-width: 10px;
  min-height: 10px;
  max-width: 13px;
  max-height: 13px;
  border-radius: 50%;
  border: 2px solid var(--bg-sidebar);
  box-sizing: border-box;
  pointer-events: none;
}
.profile-status-dot.status-online { background: var(--green); }
.profile-status-dot.status-busy  { background: var(--red); }
.profile-status-dot.status-away   { background: var(--yellow); }
.profile-status-dot.speaking.status-online { box-shadow: 0 0 6px var(--green); }
.profile-status-dot.speaking.status-busy  { box-shadow: 0 0 6px var(--red); }

.profile-popover {
  position: fixed;
  z-index: 9000;
  min-width: 180px;
  padding: 6px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
.profile-popover.hidden { display: none; }
.profile-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.profile-popover-item:hover { background: var(--bg-hover); }
.profile-popover-divider {
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
}
.profile-popover-item.profile-popover-item-danger {
  color: #ffb3b3;
}
.profile-popover-item.profile-popover-item-danger:hover {
  background: rgba(255, 90, 90, 0.12);
}
.profile-popover-item .lucide {
  width: 14px;
  height: 14px;
}
.presence-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.presence-swatch.status-online { background: var(--green); }
.presence-swatch.status-busy  { background: var(--red); }
.presence-swatch.status-away   { background: var(--yellow); }

/* Volume por usuário (popover estilo Discord) */
.user-volume-popover {
  position: fixed;
  z-index: 9000;
  min-width: 260px;
  max-width: 320px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(30,33,44,0.98) 0%, rgba(24,27,36,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
}
.user-volume-popover.hidden { display: none !important; }
.user-volume-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.user-volume-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.user-volume-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
}
.user-volume-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.user-volume-display-name {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-volume-popover-divider {
  height: 1px;
  margin: 8px 0 9px;
  background: rgba(255,255,255,0.1);
}
.user-volume-popover-divider.hidden { display: none !important; }
.user-volume-privilege-btn {
  width: 100%;
  border: none;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: var(--text-1);
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 2px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.1);
}
.user-volume-privilege-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.18);
}
.user-volume-privilege-btn.hidden { display: none !important; }
.user-volume-privilege-btn svg { color: inherit; }
.user-volume-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 1px 8px;
}
.user-volume-slider-title {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.user-volume-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
}
.user-volume-slider {
  display: block;
  width: 100%;
  height: 8px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.user-volume-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 5px;
  background: linear-gradient(90deg, #5865F2 0%, #5865F2 var(--vol-pct, 50%), #3f3f46 var(--vol-pct, 50%), #3f3f46 100%);
}
.user-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  border: none;
}
.user-volume-slider::-moz-range-track {
  height: 8px;
  border-radius: 5px;
  background: #3f3f46;
}
.user-volume-slider::-moz-range-progress {
  height: 8px;
  border-radius: 5px;
  background: #5865F2;
}
.user-volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.channel-user-row--volume {
  cursor: pointer;
}
.channel-user-row--volume:hover {
  background: var(--bg-hover);
}
/* .participant-tile--volume — removido: volume só na sidebar */

.tile-avatar-wrap .tile-presence-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  height: 30%;
  min-width: 12px;
  min-height: 12px;
  max-width: 20px;
  max-height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg-app);
  box-sizing: border-box;
  pointer-events: none;
}
.tile-presence-dot.status-online { background: var(--green); }
.tile-presence-dot.status-busy  { background: var(--red); }
.tile-presence-dot.status-away   { background: var(--yellow); }

.cu-avatar-wrap .cu-presence-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32%;
  height: 32%;
  min-width: 8px;
  min-height: 8px;
  max-width: 11px;
  max-height: 11px;
  border-radius: 50%;
  border: 2px solid var(--bg-sidebar);
  box-sizing: border-box;
  pointer-events: none;
}
.cu-presence-dot.status-online { background: var(--green); }
.cu-presence-dot.status-busy  { background: var(--red); }
.cu-presence-dot.status-away   { background: var(--yellow); }

.profile-text { flex: 1; min-width: 0; }
.profile-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-room-tag { font-size: 10px; color: var(--text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.profile-controls { display: flex; gap: 2px; flex-shrink: 0; }
.ctrl-icon {
  width: 32px; height: 32px;
  border-radius: 6px; border: none;
  background: transparent; color: var(--text-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.ctrl-icon:hover { background: var(--bg-hover); color: var(--text-1); }
.ctrl-icon.muted { background: var(--red); color: #fff; }
.ctrl-icon.deafened { background: var(--red); color: #fff; }
.ctrl-icon.screen-on { background: var(--accent); color: #fff; }

/* ─── MAIN CONTENT ──────────────────────────── */
.main-content {
  grid-column: 3;
  grid-row: 1 / -1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  overflow: hidden;
  position: relative;
}

/* Empty state */
.content-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; color: var(--text-3);
}
.empty-icon-wrap {
  width: 100px;
  height: 100px;
  background: rgba(88, 101, 242, 0.08);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  animation: empty-icon-float 4s ease-in-out infinite;
}
.empty-icon-glyph {
  width: 58px;
  height: 58px;
  color: var(--text-3);
  stroke-width: 1.25;
}

@keyframes empty-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  margin-bottom: 2px;
}
.empty-icon svg {
  width: 52px;
  height: 52px;
  stroke-width: 1.35;
}
.content-empty h2 { font-size: 18px; font-weight: 600; color: var(--text-2); }
.content-empty p { font-size: 13px; text-align: center; line-height: 1.7; }

.empty-actions {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* In-room content */
.content-room {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  position: relative;
  min-height: 0;
}

/* Câmara ampliada: cabeçalho da sala mantém-se estável; vídeo usa mais altura útil (16:9) */
.content-room.content-room--camera-expanded .room-header {
  flex-shrink: 0;
  position: relative;
  z-index: 6;
}

.room-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  min-height: 44px;
  height: auto;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  color: var(--text-2);
}
.room-header-voice-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  opacity: 0.7;
}
.room-header-voice-ico svg {
  color: inherit;
}

#btn-guild-invite.btn-guild-invite-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-guild-invite-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-guild-invite-icon svg {
  color: inherit;
}
.room-header > span[id="room-title"] {
  font-weight: 700; font-size: 15px;
  color: var(--text-1);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-timer {
  font-size: 11px;
  opacity: 0.6;
  margin-left: 6px;
  font-weight: normal;
  color: var(--text-2);
  white-space: nowrap;
}

.room-header-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }

.room-stage {
  position: relative;
  flex-shrink: 0;
  margin: 10px 14px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #060611;
  min-height: 220px;
  height: min(38vh, 360px);
}
.content-room.room-with-stage .room-stage {
  position: absolute;
  width: min(70%, 1180px);
  height: min(70%, 74vh);
  min-height: 280px;
  max-height: 84vh;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 40;
  border-color: rgba(124,93,239,0.55);
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
}
.room-stage-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.room-stage-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0.1));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.room-stage:hover .room-stage-overlay {
  opacity: 1;
  pointer-events: auto;
}
.room-stage-label {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-stage-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.room-stage-btn {
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.room-stage-btn:hover {
  background: rgba(0,0,0,0.52);
}
.room-stage-btn-stop {
  border-color: rgba(239,68,68,0.45);
  background: rgba(239,68,68,0.2);
}
.room-stage-btn-stop:hover {
  background: rgba(239,68,68,0.3);
}

.room-action-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px; border: none;
  background: var(--bg-card);
  color: var(--text-2); font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.room-action-btn:hover { background: var(--bg-hover); color: var(--text-1); }
.room-action-btn.screen-on { background: var(--accent); color: #fff; }
.room-action-btn.leave { color: var(--red); }
.room-action-btn.leave:hover { background: var(--red); color: #fff; }

/* Participant tiles grid — “palco” tipo Discord: margens, conteúdo centrado quando cabe, scroll quando não */
.participant-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: unset;
  gap: clamp(12px, 1.8vmin, 18px);
  padding: clamp(16px, 2.5vmin, 28px);
  overflow: auto;
  overflow-x: hidden; /* cartão expandido não “vaza” para a direita */
  align-content: start;
  justify-content: start;
  justify-items: stretch;
  min-width: 0; /* flex: filho encolhe dentro da main-content */
  min-height: 0;
}
.content-room.content-room--camera-expanded .participant-grid {
  flex: 1;
  min-height: 0;
  /* Último cartão não “colado” ao fundo ao fazer scroll */
  scroll-padding-bottom: 16px;
}
/* Barra de sons em overlay: não reservamos padding na grelha (evita “vão” entre cartões e barra).
   Só ajustamos o alvo de scroll para o fim do scroll não ficar escondido atrás da barra. */
.content-room.content-room--soundboard-open .participant-grid {
  scroll-padding-bottom: 88px;
}
.content-room.room-with-stage .participant-grid {
  padding-top: 12px;
}

@supports (align-content: safe center) {
  .participant-grid {
    align-content: safe center;
    justify-content: safe center;
  }
}

.participant-tile {
  background: var(--bg-card);
  border-radius: var(--radius);
  height: auto;
  min-height: clamp(150px, 22vh, 250px);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.15s;
  overflow: hidden;
  container-type: inline-size;
}
.participant-tile:hover { transform: none; }
.participant-tile.speaking { border-color: var(--green); } /* fallback legacy */
.participant-tile.speaking-local { border-color: var(--green); }
.participant-tile.speaking-remote { border-color: var(--cyan); }
.participant-tile.sharing-screen .tile-avatar-wrap { display: none; }

/* Gradient background per tile */
.tile-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(124,93,239,0.08), rgba(34,211,238,0.04));
}

/* Preview do primeiro frame da tela compartilhada (fundo do card com blur/opacidade) */
.tile-screen-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.tile-screen-preview.hidden { display: none; }
.tile-screen-preview-video,
.tile-screen-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px);
  opacity: 0.38;
}
.tile-screen-preview-img.hidden { display: none; }

.tile-screen {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.tile-screen-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile-screen-overlay {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}
.participant-tile.watching-screen:hover .tile-screen-overlay { opacity: 1; }

.tile-screen-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s, transform 0.1s, opacity 0.15s;
}
.tile-screen-btn:hover:not(:disabled) {
  background: rgba(0,0,0,0.62);
  border-color: rgba(255,255,255,0.35);
}
.tile-screen-btn:active:not(:disabled) { transform: scale(0.98); }
.tile-screen-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tile-screen-btn svg { width: 18px; height: 18px; }

.tile-camera {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
}
.tile-camera-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tile-camera-captions-strip {
  position: absolute;
  left: 0;
  right: 0;
  /* Acima do avatar (≈28px + 10px do fundo) e do nome — evita corte no canto inferior esquerdo */
  bottom: clamp(46px, 14%, 56px);
  padding: 6px 10px 8px;
  box-sizing: border-box;
  width: 100%;
  background: transparent;
  color: #fff;
  font-size: clamp(10px, 2.8vw, 13px);
  font-size: clamp(10px, 2.85cqw, 13px);
  line-height: 1.57;
  max-height: calc(1.42em * 2 + 10px);
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
  text-align: center;
}
.tile-camera-captions-strip .tile-camera-captions-text {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 2px 6px 3px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(1.2px);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 650;
  letter-spacing: 0.015em;
  line-height: 1.42;
  color: #f7f7f6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  text-overflow: ellipsis;
  /* Look cinematográfico: contraste forte com sombra curta + sombra suave. */
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.9),
    0 2px 5px rgba(0, 0, 0, 0.7),
    0 0 14px rgba(0, 0, 0, 0.5);
}
.tile-screen-btn.tile-camera-captions--on {
  background: rgba(80, 140, 255, 0.38);
  border-color: rgba(160, 200, 255, 0.55);
}

.tile-camera-overlay {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}
.participant-tile.has-camera:hover .tile-camera-overlay { opacity: 1; }
/* Cartão ampliado: primeiro na grelha (order), largura da área útil, altura limitada à janela */
.participant-tile.participant-tile--camera-expanded {
  grid-column: 1 / -1;
  order: -10;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 0;
  /* Altura útil da janela (titlebar + cabeçalho + grelha + soundboard); prioriza 16:9 sem “faixa” demasiado baixa */
  max-height: min(72vh, calc(100dvh - var(--room-expanded-reserved-y)), calc(100vh - var(--room-expanded-reserved-y)));
  aspect-ratio: 16 / 9;
  height: auto;
  z-index: 5;
  outline: 2px solid rgba(124, 93, 239, 0.55);
  outline-offset: -2px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.35),
    0 0 32px rgba(124, 93, 239, 0.18);
}
/* Há outros cartões além do ampliado: não ocupar toda a altura — encaixa o vídeo e deixa espaço visível para a grelha abaixo */
.participant-grid:has(.participant-tile--camera-expanded):has(.participant-tile:not(.participant-tile--camera-expanded))
  .participant-tile.participant-tile--camera-expanded {
  max-height: min(
    58vh,
    calc(100dvh - var(--room-expanded-reserved-y) - var(--room-expanded-peers-below-y)),
    calc(100vh - var(--room-expanded-reserved-y) - var(--room-expanded-peers-below-y))
  );
}
.participant-tile.participant-tile--camera-expanded .tile-camera-overlay {
  opacity: 1;
}
.tile-screen-btn.tile-camera-expand--active {
  background: rgba(124, 93, 239, 0.35);
  border-color: rgba(180, 160, 255, 0.55);
}
.tile-camera-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s, transform 0.1s, opacity 0.15s;
}
.tile-camera-btn:hover:not(:disabled) {
  background: rgba(0,0,0,0.62);
  border-color: rgba(255,255,255,0.35);
}
.tile-camera-btn:active:not(:disabled) { transform: scale(0.98); }
.tile-camera-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tile-camera-btn svg { width: 18px; height: 18px; }

/* Expand de webcam removido */

.tile-avatar-wrap {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
}
.tile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.1);
  transition: border-color 0.2s;
  display: block;
  box-sizing: border-box;
}

.participant-tile.has-camera .tile-avatar-wrap,
.participant-tile.watching-screen .tile-avatar-wrap {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  width: 28px;
  height: 28px;
}
.participant-tile.has-camera .tile-avatar,
.participant-tile.watching-screen .tile-avatar {
  border-width: 2px;
  border-color: rgba(255,255,255,0.35);
}
.participant-tile.has-camera .tile-avatar-wrap .tile-presence-dot,
.participant-tile.watching-screen .tile-avatar-wrap .tile-presence-dot {
  min-width: 8px;
  min-height: 8px;
  max-width: 12px;
  max-height: 12px;
}

/* Screen-share "Assistir" (não inicia vídeo até o usuário clicar) */
.tile-watch-screen-btn {
  z-index: 2;
  margin-top: 10px;
  background: rgba(124,93,239,0.18);
  border: 1px solid rgba(124,93,239,0.45);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.tile-share-hint,
.tile-remote-screen-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--cyan);
  font-weight: 700;
  text-align: center;
}
.tile-watch-screen-btn:hover {
  background: rgba(124,93,239,0.26);
  border-color: rgba(124,93,239,0.70);
}
.tile-watch-screen-btn:active {
  transform: scale(0.98);
}
.participant-tile.speaking .tile-avatar {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(34,197,94,0.2);
}

.tile-name {
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(0,0,0,0.65);
  padding: 3px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.participant-tile.has-camera .tile-name {
  left: 44px;
  padding: 2px 8px;
  font-size: 11px;
  z-index: 3;
  max-width: calc(100% - 54px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.participant-tile.watching-screen .tile-name {
  left: 44px;
  padding: 2px 8px;
  font-size: 11px;
  z-index: 3;
  max-width: calc(100% - 54px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-name .host-badge {
  font-size: 10px; color: var(--accent-glow); margin-left: 4px;
}
.participant-tile.has-camera .tile-name .host-badge {
  font-size: 9px;
}
.participant-tile.watching-screen .tile-name .host-badge {
  font-size: 9px;
}

.tile-muted-badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(239,68,68,0.85);
  padding: 3px 5px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}

/* Screen share view */
.screen-share-view {
  margin: 0 20px 20px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(124,93,239,0.3);
  background: #000;
  flex-shrink: 0;
}
.share-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: rgba(124,93,239,0.15);
  font-size: 12px; font-weight: 500; color: var(--accent-glow);
}
.share-bar button {
  background: none; border: none; color: var(--text-2); cursor: pointer; font-size: 14px;
}
#remote-screen { width: 100%; max-height: 200px; display: block; object-fit: contain; }

/* Modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 999; backdrop-filter: blur(4px);
}
.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  width: 380px; max-height: 480px;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 14px;
}
.modal-header button { background: none; border: none; color: var(--text-2); cursor: pointer; font-size: 16px; }

/* Modal de escolha de fonte de partilha: grande, horizontal, encaixa na janela com margem */
.modal--source-picker {
  padding: clamp(16px, 4vmin, 40px);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
.modal-card--source-picker {
  width: min(1320px, calc(100vw - clamp(24px, 5vmin, 56px)));
  max-width: calc(100vw - clamp(24px, 5vmin, 56px));
  max-height: calc(100vh - clamp(24px, 5vmin, 56px));
  height: min(82vh, calc(100vh - clamp(24px, 5vmin, 56px)));
  min-height: min(420px, 70vh);
}
.modal-header--source-picker {
  flex-shrink: 0;
  padding: 14px 18px;
  font-size: 15px;
}
.modal-header--source-picker span {
  line-height: 1.35;
  padding-right: 12px;
}
.source-list--picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px 14px;
  padding: 16px 18px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  align-content: start;
}
@media (min-width: 900px) {
  .source-list--picker {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}
@media (min-width: 1200px) {
  .source-list--picker {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 520px) {
  .source-list--picker {
    grid-template-columns: 1fr 1fr;
  }
  .modal-card--source-picker {
    height: min(88vh, calc(100vh - 32px));
    min-height: 280px;
  }
}

.source-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.source-item:hover { border-color: var(--accent); background: var(--bg-hover); }
.source-item img { width: 100%; border-radius: 4px; aspect-ratio: 16/9; object-fit: cover; }
.source-item span { font-size: 11px; color: var(--text-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

/* Ajuste rápido: microfone / saída (por cima do layout) — painel + lista lateral */
.modal--audio-quick {
  z-index: 10060;
  backdrop-filter: blur(6px);
}
.modal-card.modal-card--audio-quick {
  width: auto;
  max-width: min(688px, calc(100vw - 28px));
  max-height: min(520px, 86vh);
  padding: 0;
  overflow: visible;
}
.audio-quick-shell {
  display: flex;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
}
.audio-quick-shell--subopen .audio-quick-main {
  border-right: 1px solid var(--border);
}
.audio-quick-main {
  width: min(308px, 44vw);
  min-width: 248px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  max-height: min(480px, 82vh);
  box-sizing: border-box;
}
.audio-quick-modal-header {
  flex-shrink: 0;
}
.audio-quick-body {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.audio-quick-section {
  display: flex;
  flex-direction: column;
}
.audio-quick-nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 10px;
  margin: 0 0 4px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.audio-quick-nav-row:hover {
  background: var(--bg-hover);
}
.audio-quick-nav-text {
  flex: 1;
  min-width: 0;
}
.audio-quick-nav-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.audio-quick-nav-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-quick-nav-chev {
  flex-shrink: 0;
  color: var(--text-3);
  width: 18px;
  height: 18px;
}
.audio-quick-volume-block {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.audio-quick-volume-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 8px;
}
.audio-quick-volume-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}
.audio-quick-volume-hint {
  font-size: 10px;
  color: var(--text-3);
  flex-shrink: 0;
}
.audio-quick-gain-slider {
  width: 100%;
  height: 8px;
  accent-color: var(--accent);
  margin-bottom: 10px;
}
.audio-quick-meter {
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
  gap: 3px;
  height: 42px;
  padding: 0 2px;
}
.audio-quick-meter-bar {
  flex: 1;
  min-width: 3px;
  min-height: 14%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  transition: height 0.06s ease-out, background 0.12s;
  align-self: flex-end;
}
.audio-quick-meter-bar--hot {
  background: linear-gradient(180deg, #fde047 0%, #ca8a04 100%);
}
.audio-quick-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 16px);
  margin: 4px 8px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.audio-quick-settings-row:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}
.audio-quick-settings-row svg {
  width: 18px;
  height: 18px;
  color: var(--text-3);
}
.audio-quick-subpanel {
  width: min(292px, calc(100vw - 48px));
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-height: min(460px, 76vh);
  background: rgba(0, 0, 0, 0.12);
}
.audio-quick-subpanel.hidden {
  display: none !important;
}
.audio-quick-subpanel-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 6px 8px 4px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.audio-quick-sub-back {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.audio-quick-sub-back:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}
.audio-quick-sub-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  flex: 1;
  min-width: 0;
}
.audio-quick-sub-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 14px 14px 10px;
  box-sizing: border-box;
}
.audio-quick-radio-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  padding: 10px 6px 10px 10px;
  margin-bottom: 2px;
  box-sizing: border-box;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.audio-quick-radio-item:hover {
  background: var(--bg-hover);
}
.audio-quick-radio-text {
  flex: 1;
  min-width: 0;
}
.audio-quick-radio-title {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
}
.audio-quick-radio-desc {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.35;
}
.audio-quick-radio-dot {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  flex-shrink: 0;
  box-sizing: border-box;
}
.audio-quick-radio-dot--on {
  border-color: var(--accent);
  background: var(--accent);
}
.audio-quick-radio-dot--on::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
}

/* Modal de confirmação (excluir sala) */
.modal--confirm {
  z-index: 10050;
  backdrop-filter: blur(6px);
}
.modal-card--confirm {
  width: min(400px, calc(100vw - 32px));
  max-height: none;
  box-shadow: 0 24px 48px rgba(0,0,0,0.55);
}
.delete-room-modal-body {
  padding: 22px 22px 8px;
  text-align: center;
}
.delete-room-modal-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
}
.delete-room-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 10px;
}
.delete-room-modal-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 8px;
}
.delete-room-modal-name {
  color: var(--text-1);
  font-weight: 600;
}
.delete-room-modal-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}
.delete-room-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
}
.btn-dialog-secondary {
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-dialog-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}
.btn-dialog-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 8px;
  border: none;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}
.btn-dialog-danger > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-dialog-danger svg {
  color: inherit;
}
.btn-dialog-danger:hover { filter: brightness(1.08); }
.btn-dialog-danger:active { transform: scale(0.98); }

/* Menu contextual da sala (in-app) */
.room-context-menu {
  position: fixed;
  z-index: 10040;
  min-width: 168px;
  padding: 6px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.room-context-menu.hidden { display: none !important; }
.room-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.room-context-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.room-context-item-danger {
  color: var(--red);
}
.room-context-item-danger:hover {
  background: rgba(239, 68, 68, 0.12);
}
.room-context-icon {
  flex-shrink: 0;
  opacity: 0.95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.room-context-icon svg {
  color: inherit;
}

.context-menu {
  position: fixed;
  z-index: 10050;
  min-width: 180px;
  padding: 6px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.context-menu.hidden { display: none !important; }
.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.context-menu-item-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.context-menu-item-icon svg {
  color: inherit;
}
.context-menu-item:hover { background: var(--bg-hover); }
.context-menu-item--danger { color: var(--red); }
.context-menu-item--danger:hover { background: rgba(239, 68, 68, 0.12); }

.edit-guild-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.edit-guild-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.edit-guild-avatar-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.edit-guild-avatar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
}
.edit-guild-avatar-hint {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.35;
  max-width: 260px;
}
.edit-guild-id-block {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.edit-guild-id-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin: 0 0 6px;
}
.edit-guild-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.edit-guild-id-text {
  margin: 0;
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.45;
  word-break: break-all;
}
.edit-guild-invite-inline {
  flex-shrink: 0;
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  white-space: nowrap;
}
.edit-guild-id-footnote {
  font-size: 11px;
  color: var(--text-3);
  margin: 8px 0 0;
  line-height: 1.35;
}
.edit-guild-save-btn {
  width: 100%;
  margin: 0;
}

/* Scrollbars */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 4px; }

/* Avatar fallback */
img[src="default-avatar.svg"] { background: linear-gradient(135deg, var(--accent-dim), var(--bg-hover)); }

/* Update toast */
.update-toast {
  margin: 10px 14px 0;
  padding: 8px 12px;
  background: var(--green);
  color: white;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 4px 12px rgba(34,197,94,0.3);
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Update blocking modal ───────────────────────────── */
.updating-progress {
  width: 100%;
  margin-top: 10px;
}
.updating-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.updating-bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(124,93,239,0.14);
  border: 1px solid rgba(124,93,239,0.25);
  overflow: hidden;
}
.updating-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  transition: width 0.2s ease;
}
.updating-percent {
  min-width: 44px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-2);
}
.updating-detail {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  min-height: 16px;
}

/* ─── Sound upload modal ───────────────────────────── */
.sound-add-body {
  width: 100%;
  max-height: calc(82vh - 60px);
  overflow-y: auto;
}
.sound-upload-toast {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: rgba(124,93,239,0.12);
  color: var(--text-1);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.sound-upload-toast.hidden { display: none !important; }

.sound-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.sound-emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.sound-emoji-btn {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.sound-emoji-btn:hover {
  background: rgba(124,93,239,0.18);
  border-color: rgba(124,93,239,0.4);
  transform: scale(1.03);
}

/* =========================================================
   SOUNDBOARD BAR (overlay no palco da sala — não empurra a grelha; como painéis Amigos/Mensagens)
   ========================================================= */
.soundboard-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 88; /* acima dos cartões (~5), abaixo do painel Amigos/Mensagens (90) */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: rgba(15, 15, 34, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  /* Sombra só para baixo — evita halo escuro “por cima” da barra */
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.42),
    0 4px 12px rgba(0, 0, 0, 0.22);
  flex-shrink: 0;
  width: auto;
  max-width: min(960px, 100%);
  margin-left: auto;
  margin-right: auto;
  min-height: 66px;
  max-height: 80px;
  box-sizing: border-box;
  clip-path: inset(-10px 0 0 0); /* permite overflow só no topo (para o X do delete) */
  overflow: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 0.34s cubic-bezier(0.32, 0.72, 0, 1),
    min-height 0.34s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.28s ease,
    transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
    padding-top 0.3s ease,
    padding-bottom 0.3s ease,
    border-color 0.22s ease;
}
.soundboard-bar--collapsed {
  min-height: 0;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
  overflow: hidden;
  transform: translateY(16px);
  box-shadow: none;
}

.btn-add-sound {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.btn-add-sound:hover {
  background: var(--accent-hover);
  transform: scale(1.05);
}

.soundboard-items {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: visible;
  padding: 0;
}

.btn-sound-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,0.5);
  border: 1.5px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
}
.btn-sound-nav:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}
.btn-sound-nav.hidden { display: none; }

.sound-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  height: 36px;
  flex: 1;
  min-width: 60px;
  max-width: 180px;
  position: relative;
  border-radius: 8px;
  overflow: visible;
  background: var(--bg-tertiary);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  color: var(--text-normal);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s ease;
  user-select: none;
}
.sound-btn:hover {
  background: var(--bg-floating);
  border-color: rgba(255,255,255,0.2);
}
.sound-btn:active {
  opacity: 0.8;
}

.sound-btn-delete {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(239,68,68,0.85);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  z-index: 3;
  box-shadow: 0 6px 18px rgba(239,68,68,0.25);
  transform: none;
  transition: filter 0.1s ease;
}
.sound-btn:hover .sound-btn-delete { display: flex; }
.sound-btn-delete:hover { filter: brightness(1.08); }
.sound-btn-delete:active { filter: brightness(1.0); }

/* ─── Overlay de stop (aparece quando o som está a tocar) ─── */
.sound-btn-stop-overlay {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: rgba(34, 197, 94, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none; /* clique gerido pelo botão pai */
}
/* Ícone de stop SVG */
.sound-btn-stop-overlay::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #fff;
  flex-shrink: 0;
}
.sound-btn.playing .sound-btn-stop-overlay {
  display: flex;
}
/* Animação inset — fica 100% dentro do botão, sem overflow */
.sound-btn.playing {
  border-color: rgba(34, 197, 94, 0.6) !important;
  animation: sound-pulse 1.8s ease-in-out infinite;
}
@keyframes sound-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0px rgba(34, 197, 94, 0.0); }
  50%       { box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.35); }
}

/* =========================================================
   FRIENDS PANEL (lado direito)
   ========================================================= */
.btn-friends-open {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,0.55);
  border: 1.5px solid rgba(255,255,255,0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  padding: 0;
}
.btn-friends-fab { display: none; }

.friends-fixed-bar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Indicador de nova versão (polling GitHub) — à direita de Amigos/Mensagens, compacto */
.app-update-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  padding: 0;
  margin: 0;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.08));
  color: #fbbf24;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.18);
  animation: app-update-hint-pulse 2.4s ease-in-out infinite;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.app-update-hint:hover {
  filter: brightness(1.08);
  transform: scale(1.06);
}
.app-update-hint:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.65);
  outline-offset: 1px;
}
.app-update-hint--header {
  width: 26px;
  height: 24px;
}
.app-update-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-update-hint-icon svg {
  color: inherit;
}
@keyframes app-update-hint-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.2); }
  50% { box-shadow: 0 0 14px rgba(245, 158, 11, 0.36); }
}

.friends-fixed-bar .btn-ghost-sm {
  position: relative;
}

/* Badges também no header da sala (quando a barra fixa está escondida) */
.room-header-actions .btn-ghost-sm {
  position: relative;
}

/* Ajuste fino do badge dentro do header (alinha com padding do botão) */
.room-header-actions .friends-notif-badge {
  top: -8px;
  right: -6px;
}

.friends-notif-badge {
  position: absolute;
  top: -10px;
  right: -8px;
  background: #eb2d2d;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  pointer-events: none;
}

.btn-friends-ghost-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-friends-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-friends-icon svg,
.btn-friends-messages-icon svg {
  color: inherit;
}
.btn-friends-messages-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.friends-fixed-bar .btn-friends-ghost-row:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
  border-color: rgba(255,255,255,0.45);
  transform: scale(1.04);
}

.friends-panel {
  position: absolute;
  top: 0;
  /* Encostar no lado direito do content/app */
  right: 0;
  bottom: 0;
  height: auto;
  width: min(560px, 100%);
  max-width: 100%;
  min-width: 300px;
  background: rgba(11, 12, 31, 0.92);
  border-left: 1px solid var(--border);
  box-shadow: -26px 0 70px rgba(0,0,0,0.5);
  z-index: 90; /* acima da barra fixa/close */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  transition:
    transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.28s ease,
    box-shadow 0.3s ease,
    border-left-color 0.25s ease;
}

.friends-panel--collapsed {
  transform: translateX(calc(100% + 14px));
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
  border-left-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .friends-panel {
    transition-duration: 0.12s;
  }
}

.friends-panel-header {
  flex-shrink: 0;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid var(--border);
}

.friends-panel-title {
  font-weight: 700;
  color: var(--text-1);
  font-size: 14px;
}

.btn-friends-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--text-2);
}
.btn-friends-close:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}

.friends-panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.friends-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.friends-view--manage .friends-left {
  border-right: none;
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.friends-view--messages {
  flex-direction: row;
  display: flex;
  min-height: 0;
}

.friends-dm-sidebar {
  width: 172px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(0,0,0,0.18);
}
.friends-dm-sidebar-title {
  flex-shrink: 0;
  padding: 10px 10px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.friends-dm-peers {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.friends-dm-peer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 8px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text-1);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.25;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.friends-dm-peer-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.friends-dm-peer:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}
.friends-dm-peer--active {
  border-color: rgba(124,93,239,0.45);
  background: rgba(124,93,239,0.14);
}
.friends-dm-peer-name {
  flex: 1;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friends-dm-peer-unread-badge {
  flex-shrink: 0;
  background: #eb2d2d;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.friends-view--messages .friends-chat {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.friends-left {
  border-right: 1px solid rgba(255,255,255,0.06);
  overflow: auto;
  min-height: 0;
}
.friends-empty--compact {
  padding: 8px 6px;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}

.friends-section {
  padding: 12px;
}
.friends-section + .friends-section {
  border-top: 1px solid rgba(255,255,255,0.05);
}

.friends-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.friends-section--add .friends-add-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.friends-add-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--text-1);
  padding: 0 10px;
  font-size: 13px;
  outline: none;
}
.btn-friends-invite-send {
  flex-shrink: 0;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: rgba(124,93,239,0.28);
  color: var(--accent-glow);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.btn-friends-invite-send:hover {
  background: rgba(124,93,239,0.38);
}
.btn-friends-invite-send:disabled {
  opacity: 0.45;
  cursor: default;
}
.friends-add-hint {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-3);
}

.friends-card {
  padding: 8px 10px;
  border-radius: 10px;
  border: none;
  background: rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.friends-card--incoming,
.friends-card--outgoing {
  /* Espaço à direita do último botão, alinhado ao “frame” (simétrico ao lado esquerdo) */
  padding: 7px 12px 7px 12px;
}
.friends-card--friend {
  /* Mesmo “peso” visual dos cards com ações */
  padding: 7px 12px 7px 12px;
}
.friends-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.friends-card-meta {
  font-size: 11px;
  color: var(--text-3);
  word-break: break-all;
}

.friends-card-meta--single {
  word-break: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.friends-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  justify-content: flex-start;
}

/* Não usar flex:1 no nome — senão a badge vai parar colada à direita do cartão. */
.friends-card-name-row .friends-card-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friends-card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.friends-card-meta-row .friends-card-meta--single {
  flex: 0 1 auto;
  min-width: 0;
}

.friends-age-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.03em;
}

.friends-age-badge--under {
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd;
}

.friends-age-badge--teen {
  background: rgba(234, 179, 8, 0.2);
  color: #fbbf24;
}

.friends-age-badge--adult {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}
.friends-card-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.friends-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  align-self: center;
}

.friends-card-icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}

.friends-card-icon-wrap .friends-card-appicon {
  display: block;
  width: 100%;
  height: 100%;
}

.friends-row-dm-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 1;
  background: #eb2d2d;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  line-height: 1;
}

.friends-card-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
}

.friends-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 8px;
}

.friends-card-appicon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  padding: 6px;
  object-fit: contain;
  /* Ícone do app (preparado para grayscale se necessário) */
  transition: filter 0.2s, opacity 0.2s;
}

.avatar-grayscale {
  filter: grayscale(1) brightness(0.9) !important;
  opacity: 0.7;
}

.avatar--real {
  filter: none !important;
  opacity: 1 !important;
  padding: 0 !important;
  background: none !important;
  object-fit: cover !important;
}

.friends-card--incoming .friends-card-appicon {
  opacity: 0.62;
}

.friends-card--outgoing .friends-card-appicon {
  opacity: 0.45;
}
.friends-card-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  justify-content: flex-end;
  align-self: stretch;
  width: fit-content;
  flex-shrink: 0;
}
.friends-card--outgoing .friends-card-actions {
  justify-content: flex-end;
}

.friends-card--incoming .friends-card-actions {
  justify-content: flex-end;
}

.btn-friends-mini {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text-1);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
/* Botões de convite: ícones, altura = card, encostados à borda direita (sem borda entre “zones”) */
.friends-card-actions .btn-friends-mini--icon {
  height: 100%;
  min-height: 0;
  width: 48px;
  min-width: 48px;
  padding: 0;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.friends-card-actions .btn-friends-mini--icon svg {
  flex-shrink: 0;
}
.friends-card-actions .btn-friends-mini--icon:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.friends-card-actions .btn-friends-mini--icon:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.friends-card-actions .btn-friends-mini--icon:only-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.btn-friends-mini--ok {
  border-color: rgba(74, 180, 120, 0.35);
  background: rgba(74, 180, 120, 0.15);
  color: #9fe0b8;
}
.btn-friends-mini--no {
  border-color: rgba(220, 90, 90, 0.28);
  background: rgba(220, 90, 90, 0.12);
  color: #f0a8a8;
}
.btn-friends-mini--muted {
  opacity: 0.85;
}

.friends-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.friends-empty {
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: var(--text-3);
  font-size: 12px;
}

.friends-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.friends-chat-header {
  flex-shrink: 0;
  padding: 12px 12px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.friends-chat-header-main {
  min-width: 0;
  flex: 1;
}
.friends-chat-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  line-height: 1.35;
}
.friends-chat-title-lead {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  min-width: 0;
  max-width: 100%;
}
.friends-chat-title-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friends-chat-subtitle {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-3);
}
.btn-friends-chat-clear {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-friends-chat-clear:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.48);
}
.btn-friends-chat-clear.hidden { display: none !important; }
.btn-friends-chat-clear-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.friends-messages-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.friends-dm-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.friends-message-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.friends-message-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.friends-message-body {
  min-width: 0;
  flex: 1;
}
.friends-message-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.friends-message-name {
  font-size: 12px;
  color: var(--text-1);
  font-weight: 700;
}
.friends-message-time {
  font-size: 10px;
  color: var(--text-3);
}
.friends-message-text {
  margin-top: 2px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
.friends-message-item--mine .friends-message-name {
  color: var(--accent-glow);
}

.friends-chat-input-block {
  flex-shrink: 0;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.friends-dm-emoji-popover {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 6px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(22, 22, 46, 0.98);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.45);
  z-index: 5;
  max-height: 120px;
  overflow-y: auto;
}

.friends-dm-emoji-popover.hidden {
  display: none !important;
}

.friends-dm-emoji-opt {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, transform 0.1s ease;
}

.friends-dm-emoji-opt:hover {
  background: rgba(124,93,239,0.28);
  transform: scale(1.08);
}

.btn-friends-chat-emoji {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-friends-chat-emoji:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  color: var(--text-1);
}

.btn-friends-chat-emoji:disabled {
  opacity: 0.45;
  cursor: default;
}

.friends-chat-input-row {
  flex-shrink: 0;
  padding: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.friends-chat-input {
  flex: 1;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--text-1);
  padding: 0 10px;
  outline: none;
}
.friends-chat-input:disabled {
  opacity: 0.6;
}

.btn-friends-chat-send {
  flex-shrink: 0;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: rgba(124,93,239,0.25);
  color: var(--accent-glow);
  font-weight: 700;
}
.btn-friends-chat-send:disabled {
  opacity: 0.55;
  cursor: default;
}

.btn-friends-chat-send:not(:disabled):hover {
  background: rgba(124,93,239,0.36);
}

.sound-btn-icon {
  font-size: 16px;
  line-height: 1;
}

.btn-refresh {
  transition: transform 0.15s ease, color 0.2s ease, opacity 0.2s ease;
}
.btn-refresh:hover {
  color: var(--text-normal) !important;
  opacity: 1 !important;
  transform: scale(1.08);
}

.btn-refresh--spinning {
  animation: refresh-spin 0.8s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes refresh-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── Auth + guild pick ─────────────────────── */
.auth-card { width: 360px; max-width: 92vw; }
.auth-tabs {
  display: flex;
  width: 100%;
  gap: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 4px;
}
.auth-tab {
  flex: 1;
  padding: 10px 12px;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.auth-tab--active {
  background: var(--bg-active);
  color: var(--text-1);
}
.auth-panel { width: 100%; display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.auth-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.auth-grid .input-group { margin: 0; }
.auth-grid .auth-grid-full { grid-column: 1 / -1; }
@media (max-width: 460px) {
  .auth-grid { grid-template-columns: 1fr; }
}

.date-input-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.date-input-wrap input[type="text"] {
  padding-right: 12px;
}

.password-input-wrap {
  position: relative;
}
.password-input-wrap input {
  padding-right: 88px;
}
.password-input-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
}
.password-input-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.password-input-btn:hover { color: var(--accent-glow); }
.password-input-btn:focus,
.password-input-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
.password-input-btn svg {
  width: 16px;
  height: 16px;
}

.under16-panel {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(124,93,239,0.10);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.under16-title {
  font-weight: 800;
  color: var(--text-1);
  text-align: center;
}
.under16-desc {
  color: var(--text-2);
  font-size: 12px;
  text-align: center;
  line-height: 1.35;
}
.under16-email-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.under16-email-row input { flex: 1; }
.under16-send-inline {
  width: 96px;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: nowrap;
}
.under16-code-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.under16-code-row input { flex: 1; }
.under16-hint {
  color: var(--text-2);
  font-size: 11px;
  text-align: center;
  opacity: 0.95;
}

.auth-panel .input-group { gap: 8px; }
.auth-panel .input-group label {
  margin-bottom: 2px;
  letter-spacing: 0.04em;
}
.auth-panel .input-group input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-hover);
  border: 1.5px solid var(--border2);
  border-radius: 8px;
  color: var(--text-1);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.auth-panel .input-group input:focus { border-color: var(--accent); }

/* Cadastro: dá mais respiro antes do botão */
#auth-register-form #auth-btn-register {
  margin-top: 14px;
}
.auth-error {
  font-size: 12px;
  color: var(--red);
  text-align: center;
  margin: 0;
  line-height: 1.4;
}
.auth-error.auth-error--success {
  color: #23a559;
  font-weight: 600;
}

.confirm-body {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.btn-ghost {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255,255,255,0.05);
  color: var(--text-1);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.08);
}
.btn-danger {
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(239, 68, 68, 0.16);
  color: #f0a8a8;
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.24);
}
.auth--busy .auth-btn-submit {
  opacity: 0.75;
  pointer-events: none;
}

.guild-pick-card { width: 340px; max-width: 92vw; align-items: stretch; }
.guild-pick-card .setup-logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
}
.guild-pick-list {
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 16px;
}
.guild-pick-list--empty {
  min-height: 0;
  max-height: none;
  margin: 4px 0 14px;
}
.guild-pick-empty {
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  padding: 16px 8px;
}
.guild-pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.guild-pick-row:hover {
  background: var(--bg-hover);
  border-color: var(--border2);
}
.guild-pick-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* ─── Guild rail (Discord-style) ───────────── */
.guild-rail {
  grid-column: 1;
  grid-row: 1;
  width: var(--guild-rail-w);
  min-width: var(--guild-rail-w);
  min-height: 0;
  align-self: stretch;
  background: #0a0a14;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 8px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.guild-rail-scroll {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0 6px;
}
.guild-rail-item {
  position: relative;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
  overflow: visible;
}
.guild-rail-item--dragging {
  opacity: 0.88;
}
.guild-rail-scroll--drag-active .guild-rail-item--drop-target {
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.85);
}
.guild-rail-presence-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3ba55d;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  text-align: center;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 2;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  /* Centragem óptica de dígitos em círculos pequenos */
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.guild-rail-presence-badge--wide {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  font-size: 7px;
}
.guild-rail-presence-badge--plus {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  font-size: 6px;
  letter-spacing: -0.03em;
}
.guild-rail-item:hover {
  background: var(--accent);
}
.guild-rail-item--active {
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}
.guild-rail-ico {
  font-size: 16px;
  line-height: 1;
  max-width: 40px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
/* Imagem circular dentro do slot; anel roxo fino (~3px). */
.guild-rail-ico-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.guild-pick-ico-img {
  border-radius: 50%;
  object-fit: cover;
}
/* + nova guilda: mesmo estilo circular roxo que “Adicionar som” */
.guild-rail-add-btn {
  flex-shrink: 0;
  margin-top: 6px;
  margin-bottom: 4px;
}

/* ─── Layout responsivo (web / mobile) ─────────────────── */
.mobile-channels-toolbar {
  display: none;
  flex-shrink: 0;
  align-items: center;
  padding: 8px 10px 8px max(10px, env(safe-area-inset-left, 0));
  border-bottom: 1px solid var(--border);
  background: var(--bg-app);
  z-index: 5;
}
.btn-mobile-open-channels {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.btn-mobile-open-channels:hover {
  background: var(--bg-hover);
  border-color: var(--border2);
}
.btn-mobile-open-channels svg {
  width: 22px;
  height: 22px;
}
.btn-mobile-menu-inline {
  display: none; /* oculto no desktop; visível apenas no mobile via media query */
}
.channels-drawer-backdrop {
  display: none;
}

/* Desktop: o wrapper não cria caixa — guild rail, sidebar e user bar continuam no grid de #app-layout */
.app-left-dock {
  display: contents;
}

@media (max-width: 900px) {
  html, body {
    overflow: auto;
    height: auto;
    min-height: 100%;
    min-height: 100dvh;
  }
  #app-wrapper {
    min-height: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #app-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
  }
  /* Painel único: servidores + salas + card do utilizador */
  .app-left-dock {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(360px, 92vw);
    max-width: 100%;
    z-index: 100;
    background: var(--bg-sidebar);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.5);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #app-layout.channels-drawer-open .app-left-dock {
    transform: translateX(0);
  }
  #guild-rail {
    flex-shrink: 0;
    flex-direction: row;
    width: 100%;
    min-width: 0;
    height: 52px;
    max-height: 52px;
    min-height: 52px;
    padding: 6px 8px 6px max(8px, env(safe-area-inset-left, 0));
    border-right: none;
    border-bottom: 1px solid var(--border);
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }
  .guild-rail-scroll {
    flex: 1;
    flex-direction: row;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0 4px;
    align-items: center;
  }
  .guild-rail-add-btn {
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .sidebar {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    border-right: none;
    transform: none;
    box-shadow: none;
  }
  .channels-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .app-user-bar {
    flex-shrink: 0;
    width: 100%;
    grid-column: auto;
    grid-row: auto;
    border-top: 1px solid var(--border);
    padding: 10px max(10px, env(safe-area-inset-right, 0)) max(10px, env(safe-area-inset-bottom, 0)) max(10px, env(safe-area-inset-left, 0));
  }
  .channels-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  #app-layout.channels-drawer-open .channels-drawer-backdrop:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
  }
  .channels-drawer-backdrop.hidden {
    display: none !important;
  }
  .main-content {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  /* Botão menu inline: visível no mobile dentro do room-header / friends-fixed-bar */
  .btn-mobile-menu-inline {
    display: inline-flex;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
  }
  /* Toolbar standalone agora desnecessária (botão foi para inline) */
  .mobile-channels-toolbar {
    display: none !important;
  }
  /* Oculta textos dos botões Amigos/Mensagens — fica só o ícone */
  .btn-label-desktop {
    display: none;
  }
  /* friends-fixed-bar: alinhar botões incluindo o menu inline */
  .friends-fixed-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: max(8px, env(safe-area-inset-left, 0));
    left: 12px;
    right: 12px;
    justify-content: flex-start;
  }
  /* Menu fica à esquerda; Amigos/Mensagens ficam sempre à direita */
  #btn-friends-open {
    margin-left: auto;
  }
  /* Remove a “linha tipo HR” no topo no mobile */
  .room-header {
    border-bottom: none;
  }
  /* room-header: garante que botão menu fica junto ao título */
  .room-header {
    gap: 6px;
  }
  .main-content > .content-empty,
  .main-content > .content-room {
    flex: 1;
    min-height: 0;
  }
  .main-content > .friends-fixed-bar {
    flex-shrink: 0;
  }
  .main-content > .friends-panel {
    /* Mantém painel Amigos/Mensagens por cima do conteúdo principal */
    z-index: 110;
  }
}