:root {
  --bg: #0b0e14;
  --panel: #131824;
  --panel-2: #1b2130;
  --panel-3: #232a3b;
  --accent: #6c8cff;
  --accent-2: #8b5cf6;
  --text: #e6e9f0;
  --muted: #9aa3b5;
  --danger: #ef4444;
  --ok: #22c55e;
  --speaking: #22c55e;
  --border: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

.hidden { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------------- Auth (login / convite / troca senha) ---------------- */
.auth-view {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Fundo tematico (setup gamer / VoIP) + overlay escuro para manter o card legivel */
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(108, 140, 255, 0.25), transparent 70%),
    linear-gradient(180deg, rgba(11, 14, 20, 0.82), rgba(11, 14, 20, 0.92)),
    url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1920&q=80') center / cover no-repeat,
    var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.brand h1 { font-size: 22px; margin: 0; font-weight: 800; letter-spacing: -0.5px; }
.brand h1 span { color: var(--accent); }
.brand-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px var(--accent);
  flex: none;
}

.subtitle { color: var(--muted); font-size: 14px; margin: 0 0 24px; }

.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); font-size: 15px; outline: none;
}
.field input:focus { border-color: var(--accent); }

.btn-primary {
  width: 100%; padding: 13px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.92; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 14px;
}
.btn-secondary:hover { background: var(--panel-3); }

.error { color: var(--danger); font-size: 13px; min-height: 18px; margin: 12px 0 0; }
.auth-footer { margin-top: 24px; color: var(--muted); font-size: 12px; }

/* ---------------- App layout ---------------- */
.app {
  height: 100%;
  display: grid;
  grid-template-columns: 56px 300px 1fr;
}

.guild-rail { background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 8px 0; overflow-y: auto; min-height: 0; }
.guild-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.guild-rail-item { width: 40px; height: 40px; border-radius: 50%; background: var(--panel-2); border: 2px solid transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: border-radius 0.15s, border-color 0.15s; font-size: 14px; font-weight: 700; color: var(--muted); }
.guild-rail-item:hover { border-radius: 30%; background: var(--panel-3); color: var(--text); }
.guild-rail-item.active { border-color: var(--accent); border-radius: 30%; color: var(--text); }
.guild-rail-item img { width: 100%; height: 100%; object-fit: cover; }
.guild-rail-sep { width: 28px; height: 2px; background: var(--border); border-radius: 1px; margin: 4px 0; }

/* Sidebar */
.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar-head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px; border-bottom: 1px solid var(--border); font-size: 15px;
}
.channels-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 6px; color: var(--muted); font-size: 11px; letter-spacing: 0.5px;
}
.channel-list { list-style: none; margin: 0; padding: 4px 8px; overflow-y: auto; flex: 1; min-height: 60px; }
.channel-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--muted);
  font-size: 14px; margin-bottom: 2px;
}
.channel-item:hover { background: var(--panel-2); color: var(--text); }
.channel-item.active { background: var(--panel-3); color: var(--text); }
.channel-item .hash { opacity: 0.6; }
.channel-item .chan-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-item .chan-count { font-size: 11px; color: var(--muted); }
.channel-item .del-chan {
  opacity: 0; border: none; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 14px; padding: 0 4px;
}
.channel-item:hover .del-chan { opacity: 1; }
.channel-item .del-chan:hover { color: var(--danger); }

/* membros dentro de um canal (mini lista) */
.channel-members { list-style: none; margin: 2px 0 6px; padding: 0 0 0 26px; }
.channel-member {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); padding: 3px 0;
}
.channel-member.speaking { color: var(--speaking); }
.channel-member .mini-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none;
  box-shadow: none; transition: background 0.1s, box-shadow 0.1s;
}
.channel-member.speaking .mini-dot { background: var(--speaking); box-shadow: 0 0 8px var(--speaking); }
.channel-member .m-icon { font-size: 11px; }

.sidebar-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--border); background: var(--panel-2);
}
.me { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  background: transparent; border: none; color: inherit; cursor: pointer;
  padding: 4px 6px; border-radius: 8px; text-align: left; font: inherit; }
.me:hover { background: var(--panel-3); }
.me-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.status-dot.online { background: var(--ok); box-shadow: 0 0 8px var(--ok); }

.icon-btn {
  border: none; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 16px; padding: 6px; border-radius: 8px; line-height: 1;
}
.icon-btn:hover { background: var(--panel-3); color: var(--text); }

/* Main */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.main-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.main-title { font-size: 16px; font-weight: 600; }
.voice-mode { font-size: 13px; color: var(--muted); }
.switch-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* Palco: por padrao so o chat (grande). Com video, divide em fatias iguais. */
.stage-area { flex: 1; display: flex; min-height: 0; min-width: 0; overflow: hidden; }
/* ===== Grade de transmissoes OBS (HLS) - MULTI-STREAMER ===== */
.live-grid {
  flex: 1; min-width: 0; min-height: 0; margin: 6px; gap: 8px;
  display: grid; grid-template-columns: 1fr;
}
.live-grid.hidden { display: none; }
.live-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.live-grid[data-count="3"], .live-grid[data-count="4"] { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.live-grid[data-count="many"] { grid-template-columns: repeat(3, 1fr); }
/* modo palco: um card grande em cima, miniaturas embaixo */
.live-grid.expanded { display: flex; flex-direction: column; }
.live-card {
  position: relative; background: #000; border-radius: 10px; overflow: hidden;
  min-height: 0; min-width: 0; cursor: pointer; border: 1px solid rgba(255,255,255,.06);
}
.live-card .lc-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.live-grid.expanded .live-card.main { flex: 1; }
.live-grid.expanded .live-card.mini { flex: none; height: 92px; width: 160px; }
.live-grid.expanded { }
.live-grid.expanded .mini-row { display: flex; gap: 8px; }
/* quando expandido, as minis ficam numa faixa no rodape */
.live-grid.expanded { position: relative; }
.live-grid.expanded .live-card.mini {
  position: static;
}
.live-grid.expanded .live-card.main { order: 0; }
.live-grid.expanded .live-card.mini { order: 1; }
.lc-badge {
  position: absolute; top: 8px; left: 8px; z-index: 5; display: flex; align-items: center; gap: 6px;
  background: rgba(239,68,68,.92); color: #fff; font-weight: 800; font-size: 11px;
  padding: 3px 9px; border-radius: 6px; letter-spacing: .5px;
}
.hls-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: hlsPulse 1.2s infinite; }
@keyframes hlsPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.lc-name {
  position: absolute; top: 8px; left: 84px; right: 8px; z-index: 5; color: #fff;
  font-size: 12px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.lc-fps {
  position: absolute; bottom: 8px; left: 8px; z-index: 5; color: #4ade80;
  font-size: 11px; font-weight: 800; font-family: ui-monospace, Menlo, monospace;
  background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 5px; pointer-events: none;
}
.lc-like {
  position: absolute; top: 8px; right: 8px; z-index: 6; width: 30px; height: 30px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 15px;
  cursor: pointer; opacity: 0; transition: opacity .2s, transform .1s;
}
.live-card:hover .lc-like { opacity: 1; }
.lc-like:hover { background: rgba(37,99,235,.9); }
.lc-like:active { transform: scale(1.35); }
.lc-vol {
  position: absolute; bottom: 8px; right: 8px; z-index: 6; width: 90px; height: 5px;
  accent-color: #22c55e; cursor: pointer; opacity: 0; transition: opacity .2s;
}
.live-card:hover .lc-vol { opacity: .95; }
.lc-unmute {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 7;
  background: rgba(124,58,237,.95); color: #fff; font-size: 12px; font-weight: 800;
  padding: 7px 14px; border-radius: 20px; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.5);
  animation: hlsPulse 1.6s infinite; white-space: nowrap;
}
.live-card .tile-heart { position: absolute; bottom: 30px; z-index: 8; pointer-events: none;
  animation: tileHeartRise 1.6s ease-out forwards; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.live-card:fullscreen .lc-video { width: 100%; height: 100%; }
.app.has-video .live-grid:not(.hidden) { flex: 1 1 auto; align-self: stretch; }
/* garante altura cheia da area de palco */
.stage-area { align-items: stretch; }
.stage-grid {
  display: none; /* escondido ate haver video/tela */
  gap: 6px; padding: 6px; overflow: hidden;
}
/* Com transmissao ativa: o grid de video ocupa o espaco e o chat vira lateral. */
.app.has-video .stage-grid {
  display: grid;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  /* Fallback: se o data-count nao casar com nenhuma regra abaixo, ainda assim
     as fatias ficam limitadas (evita videos gigantes empilhados). */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}
.app.has-video .chat { width: 320px; flex: none; border-left: 1px solid var(--border); }

/* Divisao em fatias IGUAIS que preenchem toda a area, conforme a quantidade.
   Desktop (paisagem): divide em colunas. Cada tile preenche sua fatia. */
.stage-grid[data-count="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.stage-grid[data-count="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.stage-grid[data-count="3"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; }
.stage-grid[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.stage-grid[data-count="5"], .stage-grid[data-count="6"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.stage-grid[data-count="7"], .stage-grid[data-count="8"], .stage-grid[data-count="9"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
.stage-grid[data-count="many"] { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }

/* Tiles preenchem a fatia inteira (sem aspect-ratio fixo, sem sobra). */
.app.has-video .stage-grid .tile {
  aspect-ratio: auto !important;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  min-height: 0; min-width: 0;
  margin: 0;
}
.app.has-video .stage-grid .tile video {
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain; background: #000;
}
/* Sem video: o chat ocupa todo o palco central */
.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }

.empty-hint { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); }

.tile {
  position: relative; background: var(--panel-2); border: 2px solid var(--border);
  border-radius: 14px; aspect-ratio: 16 / 10; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.tile.speaking { border-color: var(--speaking); box-shadow: 0 0 0 2px var(--speaking); }
.tile video { width: 100%; height: 100%; object-fit: cover; background: #000; }

.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 28px; height: 28px; font-size: 13px; }
.avatar-xs { width: 20px; height: 20px; font-size: 10px; }
.avatar-lg { width: 96px; height: 96px; font-size: 38px; }

.tile .avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 700; color: #fff; overflow: hidden;
}
.tile .avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes speakingPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.user-row.speaking .avatar,
.channel-member.speaking .avatar,
.tile.speaking .avatar {
  border-color: var(--speaking);
  animation: speakingPulse 1.1s ease-out infinite;
}
.tile .name-tag {
  position: absolute; left: 10px; bottom: 10px; background: rgba(0, 0, 0, 0.55);
  padding: 4px 10px; border-radius: 8px; font-size: 13px;
  display: flex; align-items: center; gap: 6px;
}
.tile .muted-icon { color: var(--danger); }

.status-bar { min-height: 20px; padding: 0 20px 6px; color: var(--muted); font-size: 13px; text-align: center; }

.controls {
  display: flex; gap: 14px; justify-content: center;
  padding: 16px; border-top: 1px solid var(--border); background: var(--panel);
}
.ctrl {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 72px; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--panel-2); color: var(--text);
  cursor: pointer; transition: background 0.15s;
}
.ctrl:hover { background: var(--panel-3); }
.ctrl-icon { font-size: 22px; }
.ctrl-label { font-size: 12px; color: var(--muted); }
.ctrl.off { background: #2a2030; border-color: rgba(239, 68, 68, 0.5); }
.ctrl.off .ctrl-icon { filter: grayscale(1) brightness(0.7); }
.ctrl.active { background: rgba(108, 140, 255, 0.18); border-color: var(--accent); }
.ctrl-danger { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.4); }
.ctrl-danger:hover { background: rgba(239, 68, 68, 0.28); }

/* Users (agora na sidebar esquerda) */
.users-head { padding: 14px 16px 6px; color: var(--muted); font-size: 11px; letter-spacing: 0.5px; }
.user-list { list-style: none; margin: 0; padding: 4px 8px; overflow-y: auto; max-height: 34%; }
.user-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 14px; }
.user-row .u-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-row.offline { color: var(--muted); opacity: 0.7; }
.user-row .role-badge { font-size: 10px; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 0 4px; }
.user-row.speaking { color: var(--speaking); }
.user-row.speaking .status-dot { background: var(--speaking); box-shadow: 0 0 8px var(--speaking); }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-card { width: 100%; max-width: 460px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.modal-card.wide { max-width: 700px; max-height: 80vh; display: flex; flex-direction: column; }
.modal-card.wide .modal-body { flex: 1; overflow-y: auto; min-height: 0; }
.admin-tabs { display: flex; gap: 6px; margin: -24px -24px 16px; padding: 14px 16px 0; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.admin-tab { padding: 9px 16px; font-size: 13.5px; font-weight: 700; color: var(--muted); cursor: pointer; border: none; background: transparent; border-radius: 9px 9px 0 0; border-bottom: 2px solid transparent; transition: color .12s, background .12s, border-color .12s; }
.admin-tab:hover { color: var(--text); background: rgba(255,255,255,.05); }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(108,140,255,.08); }
.admin-pane { display: none; }
.admin-pane.active { display: block; animation: adminFade .18s ease; }
@keyframes adminFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* titulo de secao dentro das abas */
.admin-pane .subtitle { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; margin: 18px 0 10px; }
.admin-pane .subtitle:first-child { margin-top: 0; }
.modal-card h2 { margin: 0 0 16px; font-size: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.invite-link-box { display: flex; gap: 8px; margin: 12px 0; }
.invite-link-box input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 13px; }
.admin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.admin-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); font-size: 14px; }
.admin-list li > span:first-child { font-weight: 700; margin-right: auto; }
/* botoes de acao viram "pills" compactas e legiveis */
.admin-list .danger-link { background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 20px; padding: 5px 11px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text); transition: background .12s, border-color .12s; }
.admin-list .danger-link:hover { background: rgba(255,255,255,.12); }

/* Painel de audio (nivel + selecao mic + monitor) */
.audio-panel {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--border); background: var(--panel);
}
.mic-meter { display: flex; align-items: center; gap: 8px; }
.mic-meter-icon { font-size: 16px; }
.mic-meter-track {
  width: 140px; height: 8px; border-radius: 4px; background: var(--panel-3); overflow: hidden;
}
.mic-meter-bar {
  height: 100%; width: 0%; border-radius: 4px;
  background: linear-gradient(90deg, var(--ok), #a3e635); transition: width 0.06s linear;
}
.mic-select {
  max-width: 220px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 13px;
}
.chip-btn {
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 13px;
}
.chip-btn:hover { background: var(--panel-3); }
.chip-btn[aria-pressed="true"] { background: rgba(108,140,255,0.18); border-color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gain-control { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.gain-control input[type="range"] { width: 90px; accent-color: var(--accent); }
.gain-val { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }

/* Chat */
.chat-head { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; background: var(--panel); }
.chat-messages { list-style: none; margin: 0; padding: 12px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { display: flex; flex-direction: column; gap: 2px; }
.chat-msg .cm-head { display: flex; align-items: baseline; gap: 8px; }
.chat-msg .cm-name { font-size: 13px; font-weight: 600; color: var(--accent); }
.chat-msg .cm-time { font-size: 10px; color: var(--muted); }
.chat-msg .cm-text { font-size: 14px; color: var(--text); word-wrap: break-word; white-space: pre-wrap; }
.chat-msg.mine .cm-name { color: var(--accent-2); }
.chat-empty { color: var(--muted); font-size: 13px; text-align: center; margin: auto; }
.chat-attach-preview {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
}
.chat-attach-preview img { max-height: 60px; max-width: 100px; border-radius: 6px; object-fit: cover; }
.chat-attach-preview .ap-info { flex: 1; font-size: 13px; overflow: hidden; }
.chat-attach-preview .ap-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attach-preview .ap-size { color: var(--muted); font-size: 11px; }
.chat-attach-preview .ap-remove { border: none; background: transparent; color: var(--danger); cursor: pointer; font-size: 16px; }
.chat-upload-bar { height: 4px; background: var(--panel-3); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.chat-upload-bar > div { height: 100%; width: 0; background: var(--accent); transition: width 0.1s; }

.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); align-items: center; }
.chat-attach-btn { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px; padding: 4px 6px; border-radius: 8px; }
.chat-attach-btn:hover { background: var(--panel-3); color: var(--text); }
.chat-attach-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Anexos dentro das mensagens */
.cm-attach { margin-top: 4px; }
.cm-attach img { max-width: 100%; max-height: 300px; border-radius: 8px; cursor: pointer; display: block; }
.cm-file {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border); max-width: 280px;
}
.cm-file .cf-icon { font-size: 22px; }
.cm-file .cf-info { flex: 1; overflow: hidden; }
.cm-file .cf-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-file .cf-size { font-size: 11px; color: var(--muted); }
.cm-file .cf-dl { border: none; background: var(--accent); color: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; text-decoration: none; }
.cm-file.expired { opacity: 0.6; }
.cm-file.expired .cf-dl { display: none; }
.cm-file .cf-expired { font-size: 11px; color: var(--danger); }
.chat-drop { outline: 2px dashed var(--accent); outline-offset: -8px; }
.chat-form input {
  flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-size: 14px; outline: none;
}
.chat-form input:focus { border-color: var(--accent); }
.chat-form input:disabled { opacity: 0.5; }
.chat-send {
  border: none; border-radius: 10px; padding: 0 16px; cursor: pointer; font-size: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
}
.chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Navegacao inferior mobile (escondida no desktop) */
.mobile-nav { display: none; }

/* MODO PALCO (/stage): tela limpa so com os videos, para o OBS capturar.
   Esconde sidebar, chat, controles, cabecalhos. */
body.stage-mode .sidebar,
body.stage-mode .chat,
body.stage-mode .main-head,
body.stage-mode .controls,
body.stage-mode .audio-panel,
body.stage-mode .mobile-nav,
body.stage-mode .empty-hint,
body.stage-mode .status-bar { display: none !important; }
body.stage-mode .app { grid-template-columns: 1fr; }
body.stage-mode .main { position: absolute; inset: 0; }
body.stage-mode .stage-area { flex: 1; }
body.stage-mode .app.has-video .stage-grid { width: 100%; height: 100%; }
body.stage-mode { background: #000; }
body.stage-mode .tile { border-radius: 0; border: none; }

@media (min-width: 821px) {
  /* desktop: layout de video lado a lado com chat */
  .app.has-video .stage-area { flex-direction: row; }
}

/* ============ MOBILE (<= 820px): painarel navegavel estilo app ============ */
@media (max-width: 820px) {
  .guild-rail { display: none !important; }
  .app {
    display: block !important;
    grid-template-columns: none !important;
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  /* Sidebar e main viram paineis full-screen sobrepostos */
  .sidebar, .main {
    position: absolute;
    inset: 0;
    bottom: 56px; /* espaco para a nav inferior */
    width: 100%;
    border: none;
    transition: transform 0.2s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Por padrao mostra a sidebar (canais). Alterna via data-mobile-panel */
  .sidebar { transform: translateX(0); z-index: 2; }
  .main { transform: translateX(100%); z-index: 1; }
  .app[data-mobile-panel="main"] .sidebar { transform: translateX(-100%); }
  .app[data-mobile-panel="main"] .main { transform: translateX(0); z-index: 3; }

  /* Sidebar mobile: canais e usuarios com mais espaco */
  .sidebar { display: flex; flex-direction: column; }
  .channel-list { flex: none; max-height: 45%; }
  .user-list { max-height: none; flex: 1; }
  .channel-item { padding: 12px 12px; font-size: 15px; }
  .user-row { padding: 10px 8px; font-size: 15px; }

  /* Area principal mobile */
  .main-head { padding: 12px 16px; }
  .stage-area { flex-direction: column; }
  .chat { width: auto !important; border: none; }

  /* Mobile: stage-grid sempre visivel (flex). Se nao houver tiles, colapsa.
     Quando houver video, tiles lado a lado dividindo a tela. */
  .stage-area { min-height: 0; flex: none; }
  .app.has-video .stage-area { flex: none; }
  .stage-grid { display: flex !important; flex-direction: row; flex-wrap: wrap; max-height: 40vh; }
  .stage-grid .tile { flex: 1 1 45%; height: auto; max-height: 50vh; min-width: 0; aspect-ratio: 16/9; }
  .chat-messages { padding: 12px; }
  .chat-msg .cm-text { font-size: 15px; }

  /* Controles de voz: barra compacta */
  .controls { padding: 10px; gap: 8px; flex-wrap: wrap; }
  .ctrl { min-width: 60px; padding: 8px 10px; }
  .ctrl-icon { font-size: 20px; }

  /* Painel de audio: rola horizontalmente para caber */
  .audio-panel { flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 8px 12px; -webkit-overflow-scrolling: touch; }
  .audio-panel > * { flex: none; }
  .mic-select { max-width: 150px; }

  /* Voice mode (PTT toggle) menor */
  .main-head .voice-mode { font-size: 12px; }

  /* Barra de navegacao inferior */
  .mobile-nav {
    display: flex;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    background: var(--panel);
    border-top: 1px solid var(--border);
    z-index: 10;
  }
  .mnav-btn {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: none; background: transparent; color: var(--muted);
    font-size: 20px; cursor: pointer;
  }
  .mnav-btn .mnav-label { font-size: 11px; }
  .mnav-btn.active { color: var(--accent); }
  .mnav-btn .mnav-badge {
    position: absolute; top: 6px; margin-left: 20px;
    background: var(--danger); color: #fff; border-radius: 10px;
    font-size: 10px; padding: 0 5px; min-width: 16px; text-align: center;
  }

  /* Modais ocupam mais espaco no celular */
  .modal-card:not(.wide) { max-width: 92vw; max-height: 85vh; overflow-y: auto; }

  /* Login/registro: cartao ocupa a largura */
  .auth-card { max-width: 92vw; padding: 24px; }
}

/* Popup de moderacao (contexto do usuario) */
.user-popup { position: fixed; z-index: 150; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px; min-width: 180px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.user-popup .popup-header { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.user-popup .popup-header .avatar { width: 32px; height: 32px; font-size: 14px; }
.user-popup .popup-name { font-weight: 600; font-size: 14px; }
.user-popup .popup-role { font-size: 11px; color: var(--muted); }
.user-popup .popup-action { display: block; width: 100%; text-align: left; padding: 8px 10px; border: none; background: transparent; color: var(--text); font-size: 13px; cursor: pointer; border-radius: 6px; }
.user-popup .popup-action:hover { background: var(--panel-2); }
.user-popup .popup-action.danger { color: var(--danger); }
.user-popup .popup-action.accent { color: var(--accent); }

/* Bot de musica: barra "Tocando agora" */
.music-bar { display: none; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel-2); border-top: 1px solid var(--border); font-size: 13px; }
.music-bar.active { display: flex; }
.music-bar .music-icon { font-size: 18px; animation: musicPulse 1.5s ease-in-out infinite; }
@keyframes musicPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.music-bar .music-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--accent); }
.music-bar .music-btn { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; padding: 4px; border-radius: 6px; }
.music-bar .music-btn:hover { background: var(--panel-3); color: var(--text); }

/* Visor digital de radio (LED marquee) */
.radio-display { display: none; align-items: center; gap: 8px; margin-top: 6px; padding: 5px 12px; background: #050805; border: 1px solid #0f3; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 8px rgba(0,255,60,0.25), 0 0 4px rgba(0,255,60,0.15); max-width: 420px; }
.radio-display.active { display: flex; }
.radio-display .radio-led { width: 8px; height: 8px; border-radius: 50%; background: #0f3; box-shadow: 0 0 6px #0f3; flex: none; animation: radioBlink 1.2s infinite; }
@keyframes radioBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.radio-marquee { overflow: hidden; flex: 1; white-space: nowrap; }
.radio-marquee span { display: inline-block; padding-left: 100%; color: #0f6; font-family: 'Courier New', monospace; font-weight: 700; font-size: 13px; letter-spacing: 2px; text-shadow: 0 0 5px rgba(0,255,60,0.7); animation: radioScroll 12s linear infinite; }
@keyframes radioScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* Espectro de barras vintage (equalizer) ao lado do visor de radio */
.radio-eq { display: flex; align-items: flex-end; gap: 2px; height: 22px; flex: none; padding: 0 4px; }
.radio-eq .eq-bar {
  width: 3px; height: 20%; border-radius: 1px;
  background: linear-gradient(to top, #0f3 0%, #0f3 40%, #ff0 70%, #f30 100%);
  box-shadow: 0 0 3px rgba(0,255,60,0.6);
  transition: height 0.06s linear;
}

/* Controles da radio (mute + volume) no visor */
.radio-ctrl-btn { border: none; background: transparent; color: #0f6; cursor: pointer; font-size: 15px; padding: 2px 4px; flex: none; text-shadow: 0 0 5px rgba(0,255,60,0.6); }
.radio-ctrl-btn:hover { color: #0f9; }
.radio-ctrl-btn.muted { color: #f55; text-shadow: 0 0 5px rgba(255,60,60,0.6); }
.radio-vol { width: 60px; flex: none; accent-color: #0f6; cursor: pointer; height: 4px; }

/* FX Pads: efeitos de voz */
.fx-bar { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; border-top: 1px solid var(--border); -webkit-overflow-scrolling: touch; }
.fx-pad { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; white-space: nowrap; transition: background 0.12s, border-color 0.12s; flex: none; }
.fx-pad:hover { background: var(--panel-3); }
.fx-pad.active { border-color: var(--accent); background: rgba(108,140,255,0.15); color: var(--accent); font-weight: 600; }

/* Botao "Segure para falar" (PTT na tela - essencial no mobile) */
.ptt-hold {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; margin-left: 8px; padding: 10px 18px;
  font-size: 14px; font-weight: 600; color: #fff;
  background: #2563eb; border: none; border-radius: 24px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: none; -webkit-tap-highlight-color: transparent;
  transition: background .12s, transform .08s;
}
.ptt-hold:hover { background: #1d4ed8; }
.ptt-hold.talking { background: #16a34a; transform: scale(0.97); box-shadow: 0 0 0 4px rgba(22,163,74,.3); }
.ptt-hold.hidden { display: none; }

/* No mobile: botao grande e fixo na base, facil de segurar com o polegar */
@media (max-width: 820px) {
  .ptt-hold {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 72px; z-index: 50; width: 80%; max-width: 320px;
    padding: 16px; font-size: 16px; border-radius: 32px;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
  }
  .ptt-hold.talking { transform: translateX(-50%) scale(0.98); }
}

/* ===== Postagem fixa: tutorial PTT global (radio militar) ===== */
.ptt-pinned {
  margin: 8px 12px; border: 1px solid #16a34a; border-radius: 10px;
  background: linear-gradient(180deg, #0f1c14, #111827); overflow: hidden;
}
.ptt-pinned-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; background: transparent; border: none; cursor: pointer;
  color: #e5e7eb; text-align: left; font-size: 14px;
}
.ptt-ht-icon { flex: 0 0 auto; }
.ptt-pinned-title { font-weight: 700; color: #22c55e; flex: 1; }
.ptt-pinned-caret { transition: transform .2s; color: #22c55e; }
.ptt-global-badge {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 12px; white-space: nowrap;
}
.ptt-global-badge.ok  { background: #16a34a; color: #fff; }
.ptt-global-badge.off { background: #3f3f46; color: #d4d4d8; }
.ptt-pinned-body { padding: 4px 16px 14px; border-top: 1px solid #1f3a29; }
.ptt-pinned-body.hidden { display: none; }
.ptt-pinned-intro { color: #cbd5e1; font-size: 13px; margin: 10px 0; }
.ptt-steps { color: #d4d4d8; font-size: 13px; line-height: 1.6; margin: 8px 0; padding-left: 20px; }
.ptt-steps a { color: #4ade80; }
.ptt-download-btn {
  display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 6px;
  padding: 10px 18px; background: #22c55e; color: #04120a; font-weight: 700;
  border-radius: 8px; text-decoration: none; font-size: 14px;
}
.ptt-download-btn:hover { background: #16a34a; color: #fff; }
.ptt-pinned-note { color: #9ca3af; font-size: 11px; margin-top: 8px; }
@media (max-width: 820px) {
  .ptt-pinned-title { font-size: 13px; }
  .ptt-global-badge { display: none; }
}

/* ===== Banner fixo no topo: modo radio militar ===== */
.ptt-banner {
  margin: 0; border-bottom: 2px solid #16a34a;
  background: linear-gradient(180deg, #0f1c14, #0c1220);
}
.ptt-banner.hidden { display: none; }
.ptt-banner-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 16px; background: transparent; border: none; cursor: pointer;
  color: #e5e7eb; text-align: left;
}
.ptt-banner-titles { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ptt-banner-title { font-weight: 800; color: #22c55e; font-size: 14px; }
.ptt-banner-sub { font-size: 12px; color: #9ca3af; }
.ptt-pinned-caret { transition: transform .2s; color: #22c55e; }
.ptt-global-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 12px; white-space: nowrap; }
.ptt-global-badge.ok  { background: #16a34a; color: #fff; }
.ptt-global-badge.off { background: #3f3f46; color: #d4d4d8; }
.ptt-banner-body { padding: 4px 18px 16px; border-top: 1px solid #1f3a29; background: rgba(0,0,0,.2); }
.ptt-banner-body.hidden { display: none; }
.ptt-pinned-intro { color: #cbd5e1; font-size: 13px; line-height: 1.5; margin: 12px 0; }
.ptt-steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 10px 0; }
.ptt-step { display: flex; gap: 10px; align-items: flex-start; color: #d4d4d8; font-size: 12.5px; }
.ptt-step a { color: #4ade80; }
.ptt-step-n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #16a34a; color: #04120a; font-weight: 800; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ptt-step-done .ptt-step-n { background: #22c55e; }
.ptt-download-btn {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 6px;
  padding: 11px 22px; background: #22c55e; color: #04120a; font-weight: 800;
  border-radius: 8px; text-decoration: none; font-size: 14px;
}
.ptt-download-btn:hover { background: #16a34a; color: #fff; }
.ptt-pinned-note { color: #9ca3af; font-size: 11px; margin-top: 10px; line-height: 1.5; }
@media (max-width: 820px) {
  .ptt-steps-grid { grid-template-columns: 1fr; }
  .ptt-banner-sub { display: none; }
  .ptt-global-badge { display: none; }
}

/* ===== Toast: aviso "segure para falar" ao entrar em canal de radio ===== */
.radio-toast {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-20px);
  z-index: 200; display: flex; align-items: center; gap: 14px;
  max-width: 90vw; padding: 14px 20px; border-radius: 12px;
  background: linear-gradient(180deg, #0f1c14, #111827);
  border: 2px solid #22c55e; box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 20px rgba(34,197,94,.25);
  color: #e5e7eb; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.radio-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.radio-toast .rt-icon { font-size: 28px; }
.radio-toast .rt-title { font-weight: 800; color: #22c55e; font-size: 14px; letter-spacing: .5px; }
.radio-toast .rt-text { font-size: 13px; color: #cbd5e1; margin-top: 2px; }
.radio-toast .rt-text b { color: #4ade80; }
@media (max-width: 820px) {
  .radio-toast { top: 12px; padding: 12px 16px; gap: 10px; }
  .radio-toast .rt-icon { font-size: 22px; }
  .radio-toast .rt-title { font-size: 13px; }
  .radio-toast .rt-text { font-size: 12px; }
}

/* ===== Mensagem fixada (pin) + botao de fixar ===== */
.cm-pin-btn {
  background: none; border: none; cursor: pointer; opacity: .4;
  font-size: 12px; margin-left: auto; padding: 0 4px; transition: opacity .12s;
}
.cm-pin-btn:hover { opacity: 1; }
.chat-msg .cm-head { display: flex; align-items: center; gap: 6px; }
.chat-pinned {
  margin: 8px 12px; padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(180deg, #14210f, #111827);
  border: 1px solid #b8860b; border-left: 4px solid #eab308;
}
.chat-pinned.hidden { display: none; }
.chat-pinned .cp-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #eab308; margin-bottom: 4px; }
.chat-pinned .cp-icon { font-size: 14px; }
.chat-pinned .cp-unpin { margin-left: auto; background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 13px; }
.chat-pinned .cp-unpin:hover { color: #ef4444; }
.chat-pinned .cp-text { font-size: 14px; color: #e5e7eb; margin: 4px 0; white-space: pre-wrap; }
/* vídeo/imagem no painel fixado: enquadrado, alinhado a esquerda, nao gigante */
.chat-pinned .cm-attach { max-width: 360px; }
.chat-pinned .cm-attach video,
.chat-pinned video { max-width: 360px !important; max-height: 200px !important; width: auto !important; height: auto !important; border-radius: 8px; margin-top: 6px; display: block; }
.chat-pinned .cm-attach img,
.chat-pinned img { max-width: 360px !important; max-height: 180px !important; width: auto !important; height: auto !important; border-radius: 8px; }
/* video/imagem no chat normal */
.cm-attach video { max-width: 320px; max-height: 200px; width: auto; border-radius: 8px; display: block; }
.cm-attach img { max-width: 280px; max-height: 180px; }
@media (max-width: 820px) {
  .chat-pinned .cm-attach { max-width: 100%; }
  .chat-pinned .cm-attach video, .chat-pinned video { max-width: 100% !important; max-height: 160px !important; }
  .cm-attach video { max-width: 100%; max-height: 160px; }
}

/* ===== Slider de volume por usuario (menu do usuario) ===== */
.popup-vol { padding: 8px 10px; border-top: 1px solid var(--border); margin-top: 4px; }
.popup-vol .pv-label { font-size: 12px; color: var(--text); margin-bottom: 6px; }
.popup-vol .pv-val { color: var(--accent); font-weight: 600; }
.popup-vol .pv-slider { width: 100%; cursor: pointer; accent-color: var(--accent); }

/* Botao apagar no painel fixado */
.chat-pinned .cp-del { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 13px; margin-left: auto; }
.chat-pinned .cp-del:hover { color: #ef4444; }
.chat-pinned .cp-del + .cp-unpin { margin-left: 4px; }

/* esconde a copia da mensagem no chat quando ela esta fixada no topo (evita duplicata) */
#chatMessages li.pinned-hidden { display: none; }

/* Ilustracao do radio no banner do tutorial */
.ptt-intro-row { display: flex; gap: 16px; align-items: center; }
.ptt-radio-shot {
  flex: 0 0 auto; width: 160px; max-width: 40%; height: auto;
  border-radius: 8px; border: 1px solid #2a3a22; box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.ptt-intro-row .ptt-pinned-intro { flex: 1; margin: 0; }
@media (max-width: 820px) {
  .ptt-intro-row { flex-direction: column; align-items: flex-start; }
  .ptt-radio-shot { width: 140px; max-width: 60%; }
}

/* ===== Modal de configuracoes: mais largo e responsivo ===== */
.modal-card.wide { max-width: 760px; max-height: 86vh; display: flex; flex-direction: column; }
.modal-card.wide h2 { flex: 0 0 auto; }
/* o container de conteudo (#modalBody) e o body interno rolam */
.modal-card.wide #modalBody { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-right: 6px; }
.modal-card.wide #modalBody .modal-body { overflow: visible; }
/* abas dentro do modal wide: visiveis, sem margem negativa (que era cortada) */
.modal-card.wide .admin-tabs { margin: 0 0 16px; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.modal-card.wide .admin-tab { flex: 0 0 auto; white-space: nowrap; }
/* campos e selects ocupam a largura toda dentro do modal */
.modal-card .field { display: block; margin-bottom: 14px; }
.modal-card .field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.modal-card .field input, .modal-card .field select { width: 100%; box-sizing: border-box; }

/* ===== Grade organizada das sugestoes de radio ===== */
.radio-suggest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px; margin-top: 8px;
}
.radio-suggest-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-2); color: var(--text); cursor: pointer; text-align: left;
  transition: background .12s, border-color .12s; min-width: 0; width: 100%;
}
.radio-suggest-chip:hover { background: var(--panel-3); border-color: var(--accent); }
.radio-suggest-chip strong { font-size: 13px; font-weight: 700; }
.radio-suggest-chip span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

@media (max-width: 820px) {
  .modal-card.wide { max-width: 96vw; max-height: 90vh; }
  .radio-suggest-grid { grid-template-columns: 1fr 1fr; }
  .admin-tabs { flex-wrap: wrap; gap: 2px; padding: 8px 10px 0; margin: -16px -16px 12px; }
  .admin-tabs button, .admin-tabs .tab { font-size: 13px; padding: 6px 10px; }
  .modal-card.wide { padding: 16px; }
}
@media (max-width: 520px) {
  .radio-suggest-grid { grid-template-columns: 1fr; }
}

/* Modal de acesso a canais */
.access-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.access-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); cursor: pointer; }
.access-row:hover { background: var(--panel-3); }
.access-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.access-row span { font-size: 14px; }

/* ===== Expandir tile em tela cheia enquadrada (com animacao) ===== */
.tile { position: relative; transition: transform .28s ease, box-shadow .28s ease; }
.tile-expand {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: rgba(0,0,0,.55); color: #fff; font-size: 16px; cursor: pointer;
  opacity: 0; transition: opacity .15s, background .15s;
}
.tile:hover .tile-expand { opacity: 1; }
.tile-expand:hover { background: rgba(37,99,235,.9); }
/* ===== MODO PALCO: um video grande enquadrado + miniaturas no rodape ===== */
.stage-area.has-expanded .stage-grid {
  display: grid !important;
  grid-template-rows: 1fr 98px;
  grid-auto-flow: column;
  position: relative; width: 100%; height: 100%; gap: 8px;
}
/* o video em destaque: grande, enquadrado dentro da area (object-fit contain) */
.stage-area.has-expanded .stage-grid .tile.expanded {
  display: block !important; min-height: 0;
  grid-row: 1; grid-column: 1 / -1;
  width: 100%; height: 100%;
  border-radius: 10px; border: 2px solid var(--accent);
  background: #000; animation: tileExpandIn .3s ease;
}
.stage-area.has-expanded .stage-grid .tile.expanded video {
  width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 8px;
}
/* as outras transmissoes viram MINIATURAS numa faixa no rodape */
.stage-area.has-expanded .stage-grid .tile:not(.expanded) {
  display: block !important;
  grid-row: 2;
  width: 160px; height: 90px; min-height: 0;
  border-radius: 8px; cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.stage-area.has-expanded .stage-grid .tile:not(.expanded):hover {
  transform: translateY(-3px); border-color: var(--accent);
}
.stage-area.has-expanded .stage-grid .tile:not(.expanded) video { object-fit: cover; }
/* faixa de miniaturas: agrupa os nao-expandidos horizontalmente com scroll */
.stage-area.has-expanded .stage-grid {
  --thumb-row: 98px;
}
.tile.expanded .tile-expand { opacity: 1; background: rgba(0,0,0,.6); }
@keyframes tileExpandIn {
  from { transform: scale(0.94); opacity: 0.5; }
  to   { transform: scale(1); opacity: 1; }
}

/* ===== Like direcionado: botao (joinha) no tile + explosao de curtidas ===== */
.tile-like {
  position: absolute; top: 8px; right: 46px; z-index: 6;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; font-size: 15px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .2s, transform .1s, background .2s;
  display: flex; align-items: center; justify-content: center;
}
.tile:hover .tile-like { opacity: 1; }
.tile-like:hover { background: rgba(37,99,235,.9); }
.tile-like:active { transform: scale(1.4); }

/* Botao de audio da tela (screen-audio): so aparece quando aquele peer compartilha audio.
   Fica SEMPRE visivel (nao so no hover) e destacado quando e o audio ativo/liberado. */
.tile-audio {
  position: absolute; top: 8px; right: 84px; z-index: 6;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 15px; line-height: 1;
  cursor: pointer; opacity: .9; transition: opacity .2s, transform .1s, background .2s;
  display: flex; align-items: center; justify-content: center;
}
.tile-audio:hover { opacity: 1; background: rgba(0,0,0,.75); }
.tile-audio:active { transform: scale(1.25); }
.tile-vol {
  position: absolute; left: 8px; bottom: 8px; z-index: 7; width: 110px;
  height: 5px; accent-color: #22c55e; cursor: pointer;
  background: transparent; opacity: 0; transition: opacity .2s;
}
.tile:hover .tile-vol { opacity: .95; }
.tile-vol:focus { opacity: 1; outline: none; }

.tile-audio.on {
  background: rgba(34,197,94,.9);
  box-shadow: 0 0 0 2px rgba(34,197,94,.5), 0 0 12px rgba(34,197,94,.6);
}

/* "pop" central da explosao */
.like-pop {
  position: absolute; left: 50%; top: 52%; z-index: 8; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.2); font-size: 46px;
  will-change: transform, opacity;
  animation: likePop .65s cubic-bezier(.2,1.4,.5,1) forwards;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
@keyframes likePop {
  0%   { transform: translate(-50%,-50%) scale(0.2); opacity: 0; }
  35%  { transform: translate(-50%,-50%) scale(1.25); opacity: 1; }
  70%  { transform: translate(-50%,-55%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-70%) scale(0.9); opacity: 0; }
}

/* particulas que espalham para todos os lados */
.like-burst {
  position: absolute; left: 50%; top: 52%; z-index: 7; pointer-events: none;
  transform: translate(-50%, -50%); will-change: transform, opacity;
  animation: likeBurst 1.1s ease-out forwards;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
@keyframes likeBurst {
  0%   { transform: translate(-50%,-50%) scale(0.3) rotate(0deg); opacity: 0; }
  20%  { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--rot));
    opacity: 0;
  }
}

/* Chave de transmissao no perfil */
.streamkey-row { display: flex; gap: 6px; align-items: center; }
.streamkey-row input { flex: 1; font-family: ui-monospace, Menlo, monospace; }
.streamkey-row .btn-secondary { padding: 8px 10px; white-space: nowrap; }
.streamkey-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.streamkey-actions .btn-primary { flex: 1; min-width: 200px; }

/* ===========================================================================
   Icones vetorizados (SVG inline). Herdam cor (currentColor) e tamanho (1em).
   =========================================================================== */
.ic {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  flex: 0 0 auto;
  pointer-events: none;
}
.admin-tab .ic,
.popup-action .ic,
.danger-link .ic,
.btn-primary .ic,
.btn-secondary .ic { margin-right: 6px; }
.tile-audio .ic,
.tile-expand .ic,
.tile-like .ic,
.lc-like .ic,
.lc-unmute .ic {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
}

/* ===========================================================================
   Modal Configuracoes - reorganizacao visual (secoes consistentes)
   =========================================================================== */
.admin-section { margin-bottom: 22px; }
.admin-section:last-child { margin-bottom: 0; }
.admin-section-head { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; }
.admin-section-head .ic { width: 1.15em; height: 1.15em; color: var(--accent); vertical-align: middle; }
.admin-section-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: .2px; }
.admin-section-desc { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.admin-section-desc b { color: var(--text); font-weight: 700; }

/* Item de canal reorganizado: cabecalho (nome) + linha de acoes/toggles */
.admin-list li.chan-item { flex-direction: column; align-items: stretch; gap: 10px; }
.chan-item-head { display: flex; align-items: center; gap: 8px; }
.chan-item-head .chan-name { font-weight: 800; font-size: 14.5px; margin-right: auto; }
.chan-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.chan-actions .danger-link { display: inline-flex; align-items: center; gap: 4px; }

/* Botao de acao neutro (toggle) com estados coloridos por style inline mantido */
.admin-list .danger-link.is-on { border-color: rgba(34,197,94,.5); }
.admin-list .danger-link.is-off { opacity: .78; }

/* ===========================================================================
   Tamanhos dos icones SVG por contexto (barra, filtros, canais, player)
   =========================================================================== */
/* Barra inferior (Mic/Camera/Tela/OBS/Sair) */
.ctrl-icon .ic { width: 22px; height: 22px; vertical-align: middle; }
/* Filtros de voz (fx-pads): icone alinhado ao texto, um pouco maior que a fonte */
.fx-pad { display: inline-flex; align-items: center; gap: 6px; }
.fx-pad .ic { width: 15px; height: 15px; }
/* Chip de anuncio */
.chip-btn { display: inline-flex; align-items: center; gap: 6px; }
.chip-btn .ic { width: 15px; height: 15px; }
/* PTT segurar */
.ptt-hold .ic { width: 16px; height: 16px; vertical-align: -0.18em; margin-right: 4px; }
/* Player de musica */
.music-bar .music-icon .ic { width: 16px; height: 16px; color: var(--accent); vertical-align: middle; }
.music-bar .music-btn .ic { width: 15px; height: 15px; vertical-align: middle; }
/* Icone do canal na lista lateral */
.channel-item .hash .ic { width: 16px; height: 16px; vertical-align: -0.2em; }
/* Nav mobile */
.mnav-btn .ic { width: 20px; height: 20px; }

/* Icones pequenos de status/acao vetorizados */
.channel-member .m-icon .ic { width: 12px; height: 12px; vertical-align: middle; color: var(--muted); }
.channel-item .del-chan .ic { width: 14px; height: 14px; vertical-align: middle; }
.cp-unpin .ic, .ap-remove .ic { width: 13px; height: 13px; vertical-align: middle; }
.muted-icon .ic { width: 13px; height: 13px; vertical-align: middle; color: var(--danger); }

/* Rotulo do papel no menu do usuario (admin global / dono / comum) */
.popup-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.popup-role-tag { display: inline-block; margin-top: 5px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: .3px; }
.popup-role-tag.role-admin { color: #f59e0b; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.4); }
.popup-role-tag.role-owner { color: #a78bfa; background: rgba(167,139,250,.14); border: 1px solid rgba(167,139,250,.4); }
.popup-role-tag.role-user  { color: var(--muted); background: rgba(255,255,255,.06); border: 1px solid var(--border); }

/* Overlay de reconexao (servidor reiniciando) */
#reconnectOverlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10, 12, 20, .82); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
#reconnectOverlay .reconnect-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 34px; text-align: center; box-shadow: 0 12px 50px rgba(0,0,0,.5);
}
#reconnectOverlay .reconnect-spinner {
  width: 42px; height: 42px; margin: 0 auto 16px;
  border: 4px solid rgba(255,255,255,.15); border-top-color: var(--accent);
  border-radius: 50%; animation: reconnectSpin .8s linear infinite;
}
@keyframes reconnectSpin { to { transform: rotate(360deg); } }
#reconnectOverlay .reconnect-title { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
#reconnectOverlay .reconnect-sub { font-size: 13px; color: var(--muted); }

/* Extras do modal de manutencao: contagem regressiva */
#reconnectOverlay .reconnect-count { margin-top: 14px; font-size: 15px; color: var(--text); font-weight: 600; }
#reconnectOverlay .reconnect-count b { color: var(--accent); font-size: 18px; font-weight: 800; }
#reconnectOverlay .reconnect-hint { margin-top: 8px; font-size: 12px; color: var(--muted); }
#reconnectOverlay .reconnect-dots::after { content: ''; animation: reconnectDots 1.2s steps(4, end) infinite; }
@keyframes reconnectDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* ===== Chat: curtidas nas mensagens ===== */
.chat-msg { position: relative; }
.cm-like-btn {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 3px 6px; border-radius: 14px; transition: color .12s, background .12s;
}
.cm-like-btn:hover { background: rgba(255,255,255,.07); color: var(--text); }
.cm-like-btn.liked { color: #ef4444; }
.cm-like-btn .ic { width: 15px; height: 15px; }
.cm-like-count { font-weight: 700; }
.cm-like-btn.liked { animation: likePulse .3s ease; }
@keyframes likePulse { 50% { transform: scale(1.25); } }

/* ===== Chat: botao "novas mensagens" ===== */
.chat { position: relative; }
.chat-newmsg {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(10px);
  bottom: 76px; z-index: 20; background: var(--accent); color: #fff; border: none;
  border-radius: 20px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.chat-newmsg.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.chat-newmsg:hover { filter: brightness(1.08); }

/* ===== Chat: responder mensagem ===== */
.cm-reply-btn {
  display: inline-flex; align-items: center; margin-top: 4px; margin-right: 4px;
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  padding: 3px 6px; border-radius: 14px; transition: color .12s, background .12s;
}
.cm-reply-btn:hover { background: rgba(255,255,255,.07); color: var(--text); }
.cm-reply-btn .ic { width: 15px; height: 15px; }
/* bloco citado dentro da mensagem */
.cm-reply {
  border-left: 3px solid var(--accent); background: rgba(108,140,255,.08);
  border-radius: 6px; padding: 4px 8px; margin: 2px 0 5px; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px; max-width: 100%;
}
.cm-reply:hover { background: rgba(108,140,255,.16); }
.cm-reply-name { font-size: 12px; font-weight: 700; color: var(--accent); }
.cm-reply-text { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* barra "Respondendo a" acima do input */
.chat-reply-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: var(--panel-2); border-top: 1px solid var(--border); border-left: 3px solid var(--accent);
}
.chat-reply-bar .crb-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-reply-bar .crb-label { font-size: 12px; color: var(--muted); }
.chat-reply-bar .crb-label b { color: var(--accent); }
.chat-reply-bar .crb-text { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-reply-bar .crb-close { background: transparent; border: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.chat-reply-bar .crb-close:hover { background: rgba(255,255,255,.08); color: var(--text); }
/* destaque ao pular para a mensagem original */
.cm-flash { animation: cmFlash 1.2s ease; }
@keyframes cmFlash { 0%,100% { background: transparent; } 30% { background: rgba(108,140,255,.22); } }

/* ===========================================================================
   REDESIGN PREMIUM (padrao de mercado - dark gamer profissional estilo Discord)
   Bloco no final = sobrescreve o anterior. Reversivel (backup .bak).
   =========================================================================== */
:root {
  --bg: #0a0c11;
  --panel: #10131b;
  --panel-2: #171b26;
  --panel-3: #1f2532;
  --accent: #5b8cff;
  --accent-2: #7c5cff;
  --text: #e9edf5;
  --muted: #8b93a7;
  --danger: #ef4444;
  --ok: #2ecc71;
  --speaking: #2ecc71;
  --border: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.10);
  --shadow: 0 10px 40px rgba(0,0,0,.45);
}
html, body { background: var(--bg); }
/* leve textura de profundidade no fundo geral */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(91,140,255,.06), transparent 60%),
    radial-gradient(800px 500px at 100% 110%, rgba(124,92,255,.05), transparent 60%);
}
.app { position: relative; z-index: 1; }

/* ---- Rail de servidores ---- */
.guild-rail { background: #070409; background: var(--bg); border-right: 1px solid var(--border); }
.guild-rail-item { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--border); }
.guild-rail-item.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(91,140,255,.35); }

/* ---- Sidebar ---- */
.sidebar { background: linear-gradient(180deg, var(--panel), #0e111a); border-right: 1px solid var(--border); }
.sidebar-head { font-weight: 800; letter-spacing: .2px; border-bottom: 1px solid var(--border); }
.channels-head { text-transform: uppercase; font-weight: 700; font-size: 10.5px; letter-spacing: 1px; color: #6b7386; }
.channel-item { border-radius: 10px; font-weight: 600; transition: background .12s, color .12s; }
.channel-item .hash .ic { opacity: .7; }
.channel-item:hover { background: var(--panel-2); }
.channel-item.active { background: linear-gradient(90deg, rgba(91,140,255,.16), rgba(91,140,255,.05)); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.channel-item.active .hash .ic { color: var(--accent); opacity: 1; }

/* ---- Painel de usuarios (com moldura + secoes) ---- */
.user-list { max-height: 38%; padding: 8px; margin: 8px; background: rgba(0,0,0,.18); border: 1px solid var(--border); border-radius: 12px; }
.user-list-title { display: block; padding: 4px 6px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #6b7386; }
.user-row { padding: 7px 8px; border-radius: 10px; transition: background .12s; }
.user-row:hover { background: var(--panel-2); }
.user-row .avatar { box-shadow: 0 0 0 2px var(--panel); border-radius: 50%; }
.user-row.speaking .avatar { box-shadow: 0 0 0 2px var(--speaking), 0 0 10px rgba(46,204,113,.5); }
.user-row .role-badge { font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 1px 6px; border-radius: 20px; color: var(--accent); border: 1px solid rgba(91,140,255,.4); background: rgba(91,140,255,.08); }
.user-row.offline .avatar { filter: grayscale(.6); opacity: .7; }

/* ---- Rodape do usuario (eu) ---- */
.sidebar-foot { background: #0c0f16; border-top: 1px solid var(--border); }
.icon-btn { color: var(--muted); border-radius: 8px; transition: background .12s, color .12s; }
.icon-btn:hover { background: var(--panel-3); color: var(--text); }

/* ---- Barra de controles inferior (premium) ---- */
.controls { gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.25)); border-top: 1px solid var(--border); }
.ctrl {
  min-width: 66px; padding: 9px 14px 8px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .1s, background .12s, border-color .12s, box-shadow .12s;
}
.ctrl:hover { background: var(--panel-3); border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.ctrl:active { transform: translateY(0); }
.ctrl-icon .ic { width: 22px; height: 22px; color: var(--text); }
.ctrl-label { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .2px; }
.ctrl.active { background: linear-gradient(180deg, rgba(91,140,255,.22), rgba(91,140,255,.10)); border-color: rgba(91,140,255,.55); }
.ctrl.active .ctrl-icon .ic, .ctrl.active .ctrl-label { color: #cfe0ff; }
.ctrl.off { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.45); }
.ctrl.off .ctrl-icon .ic { color: #ff8b8b; filter: none; }
/* Botao Sair: coerente, vermelho discreto com icone de telefone */
.ctrl-danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); }
.ctrl-danger .ctrl-icon .ic { color: #ff7a7a; }
.ctrl-danger:hover { background: rgba(239,68,68,.22); border-color: rgba(239,68,68,.6); }

/* ---- FX bar (efeitos de voz) agrupada ---- */
.fx-bar { gap: 8px; padding: 10px 14px; background: rgba(0,0,0,.15); border-top: 1px solid var(--border); }
.fx-pad { border-radius: 10px; padding: 7px 13px; font-weight: 600; background: var(--panel-2); border: 1px solid var(--border); }
.fx-pad:hover { background: var(--panel-3); border-color: var(--border-strong); }
.fx-pad.active { background: linear-gradient(180deg, rgba(91,140,255,.20), rgba(91,140,255,.08)); border-color: rgba(91,140,255,.5); color: #cfe0ff; }
.fx-pad .ic { color: currentColor; }

/* ===========================================================================
   REDESIGN PREMIUM - MODAL DE CONFIGURACOES (padrao de mercado)
   =========================================================================== */
.modal { background: rgba(4,6,10,.72); backdrop-filter: blur(6px); }
.modal-card { border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--border-strong); }
.modal-card.wide { max-width: 820px; max-height: 88vh; padding: 0; }
.modal-card.wide h2 { display: none; } /* usamos cabecalho proprio abaixo */

/* Cabecalho do modal */
.modal-card.wide::before {
  content: 'Configuracoes';
  display: block; padding: 20px 26px 16px; font-size: 19px; font-weight: 800; color: #fff;
  letter-spacing: .3px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(91,140,255,.06), transparent);
}

/* Abas tipo "segmented control" */
.modal-card.wide .admin-tabs {
  margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--border);
  gap: 6px; background: rgba(0,0,0,.15);
}
.admin-tab {
  border-radius: 10px !important; border-bottom: none !important;
  padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
}
.admin-tab:hover { background: var(--panel-2); color: var(--text); }
.admin-tab.active {
  background: linear-gradient(180deg, rgba(91,140,255,.22), rgba(91,140,255,.10)) !important;
  color: #cfe0ff !important; box-shadow: inset 0 0 0 1px rgba(91,140,255,.4);
}
.admin-tab.active .ic { color: #cfe0ff; }
.admin-tab .ic { width: 16px; height: 16px; }

/* Corpo do modal com respiro */
.modal-card.wide #modalBody { padding: 22px 26px; }
.admin-pane .subtitle { color: #6b7386; font-size: 11px; letter-spacing: 1px; }

/* Cabecalho de secao */
.admin-section-head h3 { font-size: 16px; }
.admin-section-head .ic { color: var(--accent); }
.admin-section-desc { font-size: 13px; }

/* Botao primario grande (Criar canal, etc.) - mais discreto e elegante */
.admin-pane .btn-primary {
  background: linear-gradient(180deg, #3f6fe0, #3559c4) !important;
  border: 1px solid rgba(91,140,255,.5); border-radius: 12px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(53,89,196,.35); padding: 12px 16px;
}
.admin-pane .btn-primary:hover { filter: brightness(1.08); }
.admin-pane .btn-secondary { border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border-strong); font-weight: 600; }
.admin-pane .btn-secondary:hover { background: var(--panel-3); }

/* Cards da lista (canais/membros/servidores) */
.admin-list li { background: linear-gradient(180deg, var(--panel-2), #14171f); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.admin-list li:hover { border-color: var(--border-strong); }
.admin-list li > span:first-child, .chan-item-head .chan-name { font-size: 14.5px; font-weight: 800; color: #fff; }

/* Item de canal: nome em cima, acoes em pills compactas embaixo (NAO full-width) */
.admin-list li.chan-item { gap: 12px; }
.chan-item-head { align-items: center; }
.chan-actions { gap: 8px; }
.chan-actions .danger-link,
.admin-list .danger-link {
  background: var(--panel-3); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px; width: auto;
}
.admin-list .danger-link:hover { background: #262d3d; border-color: rgba(255,255,255,.18); }
.admin-list .danger-link .ic { width: 14px; height: 14px; }

/* Campos (radio, etc.) */
.modal-card .field > span { font-size: 12px; letter-spacing: .3px; color: var(--muted); font-weight: 600; }
.modal-card .field input, .modal-card .field select { border-radius: 12px; padding: 11px 13px; background: var(--panel-2); border: 1px solid var(--border-strong); }
.modal-card .field input:focus, .modal-card .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,140,255,.18); outline: none; }

/* Chips de radio sugerida */
.radio-suggest-chip { border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); }
.radio-suggest-chip:hover { border-color: var(--accent); background: var(--panel-3); }

/* Rodape fixo com botao Fechar */
.modal-card.wide #modalBody { padding-bottom: 26px; }

/* Badges de cargo no modal */
.role-badge { border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 2px 8px; }

/* Rodape do modal (barra do botao Fechar) - padrao de mercado */
.modal-card.wide .modal-actions {
  margin: 0; padding: 14px 26px; border-top: 1px solid var(--border);
  background: rgba(0,0,0,.18); border-radius: 0 0 18px 18px;
}
.modal-card.wide .modal-actions .btn-secondary {
  border-radius: 11px; padding: 10px 22px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--border-strong);
}
.modal-card.wide .modal-actions .btn-secondary:hover { background: var(--panel-3); }

/* ===== Multi-live: botao de som por card + destaque da live com audio ativo ===== */
.lc-mute {
  position: absolute; top: 8px; right: 44px; z-index: 6; width: 30px; height: 30px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff;
  cursor: pointer; opacity: 0; transition: opacity .2s, background .12s, transform .1s;
  display: inline-flex; align-items: center; justify-content: center;
}
.live-card:hover .lc-mute { opacity: 1; }
.lc-mute .ic { width: 16px; height: 16px; }
.lc-mute:hover { background: rgba(91,140,255,.9); }
/* live com audio ativo: botao verde sempre visivel + moldura destacada */
.lc-mute.on { opacity: 1; background: var(--ok); color: #05210f; box-shadow: 0 0 10px rgba(46,204,113,.6); }
.live-card.audio-active { box-shadow: inset 0 0 0 2px var(--ok), 0 0 18px rgba(46,204,113,.25); }
.live-card.audio-active .lc-badge { background: var(--ok); color: #05210f; }
/* etiqueta discreta "com som" no card ativo */
.live-card.audio-active::after {
  content: 'SOM'; position: absolute; bottom: 8px; left: 8px; z-index: 6;
  background: var(--ok); color: #05210f; font-size: 10px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 6px;
}

/* Volume por usuario ate 200% (estilo Discord) */
.popup-vol .pv-hint { font-size: 10px; color: var(--muted); font-weight: 600; }
.popup-vol .pv-slider { accent-color: var(--accent); }
.popup-vol .pv-val { font-weight: 800; }

/* Botao Cancelar ruido (IA) - verde quando ativo */
#denoiseBtn[aria-pressed="true"] { background: rgba(46,204,113,.18); border-color: var(--ok); color: #b8f5d0; }
#denoiseBtn[aria-pressed="true"] .ic { color: var(--ok); }

/* ===========================================================================
   TV StreamTube (canal com modo TV): player + lista de canais
   =========================================================================== */
.tv-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 12px; padding: 12px; }
.tv-panel.hidden { display: none; }
.tv-stage { position: relative; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); flex: 1 1 auto; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.tv-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.tv-now { position: absolute; top: 10px; left: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 20px; backdrop-filter: blur(4px); }
.tv-list-wrap { flex: 0 0 auto; max-height: 34%; display: flex; flex-direction: column; background: rgba(0,0,0,.18); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.tv-list-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.tv-search { flex: 1; padding: 9px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border-strong); color: var(--text); font-size: 13px; }
.tv-search:focus { outline: none; border-color: var(--accent); }
.tv-watchers { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tv-list { overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.tv-ch { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 9px 11px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; transition: background .12s, border-color .12s; position: relative; }
.tv-ch:hover { background: var(--panel-3); border-color: var(--border-strong); }
.tv-ch.active { background: linear-gradient(180deg, rgba(91,140,255,.22), rgba(91,140,255,.08)); border-color: rgba(91,140,255,.55); }
.tv-ch-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tv-ch-meta { font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.tv-hd { background: var(--ok); color: #05210f; font-size: 9px; font-weight: 800; padding: 0 4px; border-radius: 4px; letter-spacing: .3px; }
.tv-ch-watch { position: absolute; top: 8px; right: 8px; font-size: 11px; color: var(--accent); font-weight: 700; }
.tv-empty { padding: 20px; text-align: center; color: var(--muted); grid-column: 1 / -1; }
@media (max-width: 640px) { .tv-list { grid-template-columns: 1fr 1fr; } .tv-list-wrap { max-height: 40%; } }

/* Abas de categoria da TV */
.tv-tabs { display: flex; gap: 6px; padding: 8px 12px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tv-tab { flex: 0 0 auto; white-space: nowrap; padding: 6px 13px; border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.tv-tab:hover { background: var(--panel-3); color: var(--text); }
.tv-tab.active { background: linear-gradient(180deg, rgba(91,140,255,.22), rgba(91,140,255,.08)); color: #cfe0ff; border-color: rgba(91,140,255,.5); }

/* Fix layout painel TV: reserva espaco para as abas e da mais altura a lista */
.tv-list-wrap { max-height: 46% !important; }
.tv-list-head { flex: 0 0 auto; }
.tv-tabs { flex: 0 0 auto; padding-bottom: 8px; }
.tv-list { flex: 1 1 auto; min-height: 0; }
@media (max-width: 640px) { .tv-list-wrap { max-height: 52% !important; } }

/* ===== Logos dos canais de TV ===== */
.tv-ch { flex-direction: row; align-items: center; gap: 10px; }
.tv-ch-thumb { width: 44px; height: 44px; flex: none; border-radius: 8px; background: #0d1017; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tv-ch-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.tv-ch-logo-fb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--accent); font-size: 18px; }
.tv-ch-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tv-ch-info .tv-ch-name { max-width: 100%; }
.tv-now { display: flex; align-items: center; gap: 8px; }
.tv-now-logo { height: 22px; width: auto; max-width: 60px; object-fit: contain; vertical-align: middle; }

/* ===== Fix dimensionamento do player de TV (16:9 centralizado) ===== */
.tv-panel { align-items: stretch; }
.tv-stage {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;          /* moldura de TV correta */
  max-height: 62vh;              /* nao passa da area disponivel */
  margin: 0 auto;
  align-self: center;
}
/* quando a altura e o limitador, mantem 16:9 pela altura */
@supports (aspect-ratio: 1) {
  .tv-stage { height: auto; }
}
.tv-video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* stage nao deve ser esticado pelo flex; o aspect-ratio manda */
.tv-stage { flex: 0 0 auto !important; min-height: 0 !important; }
.tv-list-wrap { max-height: none !important; flex: 1 1 auto; }

/* ===========================================================================
   Canal de TV: so assistir + chat. Esconde toda a UI de voz/controles.
   =========================================================================== */
.app.tv-active #controls,
.app.tv-active #audioPanel,
.app.tv-active #fxBar,
.app.tv-active #voiceModeBox,
.app.tv-active #pttHoldBtn { display: none !important; }
/* botao Sair (TV) so aparece no modo TV, no cabecalho */
.tv-leave-btn { display: none; }
.app.tv-active .tv-leave-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.45); color: #ff8b8b;
  border-radius: 10px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.app.tv-active .tv-leave-btn:hover { background: rgba(239,68,68,.24); }
.tv-leave-btn .ic { width: 16px; height: 16px; }
/* deixa o cabecalho alinhar o Sair a direita */
.app.tv-active .main-head { align-items: center; }

/* ===== Logo do StreamTube (substitui o brand-dot) ===== */
.brand-logo { border-radius: 10px; object-fit: cover; display: block; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
/* nas telas de login/cadastro/convite: logo destacada e centralizada */
.auth-card .brand { flex-direction: column; align-items: center; gap: 12px; margin-bottom: 14px; }
.auth-card .brand-logo { width: 180px; height: auto; border-radius: 14px; }
.auth-card .brand h1 { font-size: 24px; }
/* na sidebar (cabecalho do servidor): logo pequena ao lado do nome */
.sidebar-head .brand-logo { width: 34px; height: 34px; }

/* ===== Barra rotativa de info abaixo do video de TV ===== */
.tv-infobar {
  min-height: 34px; display: flex; align-items: center; justify-content: center;
  margin-top: -4px; padding: 4px 12px;
}
.tv-info-text {
  font-size: 14px; color: var(--muted); opacity: 0; transform: translateY(4px);
  transition: opacity .45s ease, transform .45s ease; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.tv-info-text.show { opacity: 1; transform: translateY(0); }
.tv-info-text b { color: var(--text); font-weight: 700; }

/* ===== Ajuste de proporcao TV: player menor, lista maior ===== */
.tv-panel { gap: 8px; padding: 10px; }
.tv-stage { max-height: 44vh !important; }
.tv-list-wrap { flex: 1 1 auto; min-height: 210px; }
.tv-list { min-height: 120px; }
.tv-infobar { min-height: 26px; padding: 2px 12px; }

/* Player YouTube (embed) no painel de TV */
.tv-youtube { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.tv-youtube.hidden { display: none; }
.tv-ext { background: #ff0000; color: #fff; font-size: 9px; font-weight: 800; padding: 0 5px; border-radius: 4px; letter-spacing: .2px; }
/* Drag & drop: admin move usuario de canal */
.channel-member.draggable-member { cursor: grab; }
.channel-member.draggable-member:active { cursor: grabbing; }
.channel-member.dragging { opacity: .45; }
.channel-item.drag-over { outline: 2px dashed var(--accent, #5865f2); outline-offset: -2px; background: rgba(88,101,242,.14); border-radius: 6px; }
/* Lightbox de imagem (visualizar antes de baixar) */
.img-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .82); backdrop-filter: blur(4px);
  padding: 24px; gap: 14px;
  animation: ilbFade .18s ease-out;
}
.img-lightbox.hidden { display: none; }
@keyframes ilbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ilbZoom { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
.img-lightbox .ilb-stage {
  flex: 1; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.img-lightbox img {
  max-width: 92vw; max-height: 78vh; object-fit: contain;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  animation: ilbZoom .22s cubic-bezier(.2, .8, .2, 1);
}
.img-lightbox .ilb-bar {
  display: flex; align-items: center; gap: 16px;
  background: rgba(20, 22, 30, .9); border: 1px solid rgba(255, 255, 255, .08);
  padding: 10px 16px; border-radius: 12px; max-width: 92vw;
}
.img-lightbox .ilb-name { color: #cfd3dc; font-size: 13px; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-lightbox .ilb-dl { width: auto; padding: 9px 20px; }
.img-lightbox .ilb-close {
  position: absolute; top: 16px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff; border: none;
  font-size: 26px; line-height: 1; cursor: pointer; transition: background .15s;
}
.img-lightbox .ilb-close:hover { background: rgba(255, 255, 255, .22); }
/* Player do YouTube embutido no chat */
.cm-yt { margin-top: 8px; max-width: 420px; width: 100%; }
.cm-yt-thumb {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden; cursor: pointer;
  background: #000; border: 1px solid rgba(255, 255, 255, .08);
}
.cm-yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s, filter .25s; }
.cm-yt-thumb:hover img { transform: scale(1.03); filter: brightness(.85); }
.cm-yt-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
  opacity: .92; transition: opacity .2s, transform .2s;
}
.cm-yt-thumb:hover .cm-yt-play { opacity: 1; transform: scale(1.06); }
.cm-yt-frame {
  width: 100%; aspect-ratio: 16 / 9; border: none;
  border-radius: 10px; display: block; background: #000;
}
/* Gravador de tutorial: overlay de desenho + toolbar */
.trec-overlay { position: fixed; inset: 0; z-index: 3000; }
.trec-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.trec-toolbar {
  position: fixed;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  background: rgba(18, 20, 28, .96); border: 1px solid rgba(255, 255, 255, .1);
  padding: 8px 12px; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  max-width: 94vw;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
/* posicoes da barra */
.trec-toolbar.pos-bottom { left: 50%; bottom: 20px; transform: translateX(-50%); }
.trec-toolbar.pos-top { left: 50%; top: 20px; transform: translateX(-50%); }
.trec-toolbar.pos-left { left: 16px; top: 50%; transform: translateY(-50%); flex-direction: column; max-width: none; }
.trec-toolbar.pos-right { right: 16px; top: 50%; transform: translateY(-50%); flex-direction: column; max-width: none; }
/* auto-ocultar (fade + desliza para fora, estilo Mac Dock) */
.trec-toolbar.trec-hidden { opacity: 0; pointer-events: none; }
.trec-toolbar.pos-bottom.trec-hidden { transform: translateX(-50%) translateY(30px); }
.trec-toolbar.pos-top.trec-hidden { transform: translateX(-50%) translateY(-30px); }
.trec-toolbar.pos-left.trec-hidden { transform: translateY(-50%) translateX(-30px); }
.trec-toolbar.pos-right.trec-hidden { transform: translateY(-50%) translateX(30px); }
.trec-sep { width: 1px; height: 24px; background: rgba(255,255,255,.14); }
.trec-toolbar.pos-left .trec-sep, .trec-toolbar.pos-right .trec-sep { width: 24px; height: 1px; }
.trec-font { height: 34px; background: #1c2029; color: #e8eaf0; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 0 6px; font-size: 13px; }
.trec-live { height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: #262a36; color: #e8eaf0; font-weight: 700; cursor: pointer; }
.trec-live.active { background: #ff3b30; border-color: #ff3b30; color: #fff; animation: trecBlink 1.2s steps(2) infinite; }
.trec-rec { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; font-size: 13px; padding-right: 6px; border-right: 1px solid rgba(255,255,255,.12); }
.trec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; animation: trecBlink 1s steps(2) infinite; }
@keyframes trecBlink { 50% { opacity: .25; } }
.trec-tool {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .12);
  background: #262a36; color: #e8eaf0; font-size: 17px; cursor: pointer; transition: background .15s, border-color .15s;
}
.trec-tool:hover { background: #323847; }
.trec-tool.active { background: #5865f2; border-color: #5865f2; color: #fff; }
.trec-colors { display: flex; gap: 4px; padding: 0 4px; }
.trec-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); cursor: pointer; padding: 0; }
.trec-color.active { border-color: #fff; box-shadow: 0 0 0 2px #5865f2; }
.trec-range { width: 90px; accent-color: #5865f2; }
.trec-stop {
  height: 36px; padding: 0 16px; border-radius: 9px; border: none;
  background: #ff3b30; color: #fff; font-weight: 700; cursor: pointer; transition: background .15s;
}
.trec-stop:hover { background: #d92c22; }
/* Modal de publicacao do tutorial */
.tut-card { max-width: 860px; width: 92vw; }
.tut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 12px 0; }
.tut-preview { width: 100%; border-radius: 10px; background: #000; max-height: 300px; }
.tut-thumbrow { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.tut-sub { color: #aeb4c0; font-size: 12px; }
.tut-thumb-canvas { width: 100%; margin-top: 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: #000; aspect-ratio: 16/9; }
.tut-right .field { display: block; margin-bottom: 12px; }
.tut-right .field span { display: block; font-size: 12px; color: #aeb4c0; margin-bottom: 4px; }
.tut-right input, .tut-right textarea, .tut-right select {
  width: 100%; background: #1c2029; border: 1px solid rgba(255,255,255,.1);
  color: #e8eaf0; border-radius: 8px; padding: 9px 11px; font: inherit;
}
.tut-right textarea { resize: vertical; }
@media (max-width: 720px) { .tut-grid { grid-template-columns: 1fr; } }
/* Card de tutorial no chat (poster + play) */
.cm-tut { margin-top: 8px; max-width: 440px; width: 100%; }
.cm-tut-cover { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; cursor: pointer; background: #000; border: 1px solid rgba(255,255,255,.08); }
.cm-tut-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s, filter .25s; }
.cm-tut-cover:hover img { transform: scale(1.03); filter: brightness(.8); }
.cm-tut-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cm-tut-play svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); background: rgba(0,0,0,.45); border-radius: 50%; padding: 12px; }
.cm-tut-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 8px; color: #fff; font-weight: 700; font-size: 14px; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
/* Tutorial: titulo e descricao abaixo do video */
.cm-tut-videoarea { width: 100%; }
.cm-tut-caption { margin-top: 8px; font-weight: 700; font-size: 15px; color: #f2f3f5; line-height: 1.3; }
.cm-tut-desc { margin-top: 3px; font-size: 13px; color: #b6bcc6; line-height: 1.4; white-space: pre-wrap; }
/* animacao de publicacao de tutorial no chat */
@keyframes tutPop { 0% { opacity: 0; transform: translateY(14px) scale(.97); } 60% { transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.cm-tut-new { animation: tutPop .5s cubic-bezier(.2,.8,.2,1); }
.cm-tut-new .cm-tut-cover { box-shadow: 0 0 0 0 rgba(88,101,242,.6); animation: tutGlow 1.4s ease-out; }
@keyframes tutGlow { 0% { box-shadow: 0 0 0 0 rgba(88,101,242,.7); } 100% { box-shadow: 0 0 0 16px rgba(88,101,242,0); } }
/* Editor de thumbnail */
.thumb-editor-card { max-width: 1000px; width: 94vw; }
.te-grid { display: grid; grid-template-columns: 1fr 300px; gap: 18px; margin: 12px 0; }
.te-stage-wrap { min-width: 0; }
.te-stage { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.1); user-select: none; }
.te-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.te-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.te-preset { background: #262a36; color: #e8eaf0; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.te-preset:hover { background: #323847; }
.te-panel { min-width: 0; }
.te-panel .field { display: block; margin-bottom: 10px; }
.te-panel .field span { display: block; font-size: 12px; color: #aeb4c0; margin-bottom: 4px; }
.te-panel input[type=text], .te-panel select { width: 100%; background: #1c2029; border: 1px solid rgba(255,255,255,.1); color: #e8eaf0; border-radius: 8px; padding: 9px 11px; font: inherit; }
.te-panel input[type=range] { width: 100%; accent-color: #5865f2; }
.te-panel input[type=color] { width: 100%; height: 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: #1c2029; cursor: pointer; }
.te-hr { border: none; border-top: 1px solid rgba(255,255,255,.1); margin: 12px 0; }
.te-row { display: flex; gap: 8px; }
.te-half { flex: 1; }
.te-toggle { flex: 1; background: #262a36; color: #e8eaf0; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px; cursor: pointer; font-size: 12px; }
.te-toggle.active { background: #5865f2; border-color: #5865f2; color: #fff; }
.te-toggle.danger { background: #3a2226; border-color: #5a2a2a; color: #ff8a8a; }
.te-toggle.danger:hover { background: #4a2a2e; }
@media (max-width: 760px) { .te-grid { grid-template-columns: 1fr; } }
/* Editor de thumbnail sempre acima do modal de publicar */
#thumbEditor { z-index: 110; }
/* Editor v2: abas e paineis */
.te-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.te-tab { flex: 1; background: #1c2029; color: #aeb4c0; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 4px; cursor: pointer; font-size: 12px; font-weight: 600; }
.te-tab.active { background: #5865f2; border-color: #5865f2; color: #fff; }
.te-tabpane { margin-bottom: 8px; }
.te-search { width: 100%; background: #1c2029; border: 1px solid rgba(255,255,255,.1); color: #e8eaf0; border-radius: 8px; padding: 8px 10px; font: inherit; margin-bottom: 8px; }
.te-shape-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; max-height: 240px; overflow-y: auto; padding-right: 4px; }
.te-shape-cell { aspect-ratio: 1; background: #1c2029; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.te-shape-cell:hover { background: #2a2f3d; }
.te-shape-cell.active { border-color: #5865f2; box-shadow: 0 0 0 2px rgba(88,101,242,.5); }
.te-shape-badge { grid-column: span 3; background: #ff2b2b; color: #fff; border: none; border-radius: 8px; font-weight: 900; font-size: 12px; padding: 8px 4px; cursor: pointer; }
.te-shape-badge:hover { filter: brightness(1.1); }
.te-frame-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.te-frame-cell { background: #1c2029; color: #e8eaf0; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 12px 6px; cursor: pointer; font-size: 12px; }
.te-frame-cell:hover { background: #2a2f3d; }
.te-frame-cell.active { background: #5865f2; border-color: #5865f2; color: #fff; }
.te-spray-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 10px; }
/* Corrige: a capa/video do tutorial preenche todo o card (sem barras pretas) */
.cm-tut-cover img { max-width: none !important; max-height: none !important; width: 100% !important; height: 100% !important; }
.cm-tut-videoarea video { max-width: 100% !important; max-height: none !important; width: 100% !important; aspect-ratio: 16/9; object-fit: contain; background: #000; }
/* Botao excluir mensagem (mesma pegada do responder) */
.cm-del-btn {
  display: inline-flex; align-items: center; margin-top: 4px; margin-right: 4px;
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  padding: 3px 6px; border-radius: 14px; transition: color .12s, background .12s;
}
.cm-del-btn:hover { background: rgba(239,68,68,.14); color: #ef4444; }
.cm-del-btn .ic { width: 15px; height: 15px; }
/* Previa ao vivo da webcam e do QR durante a gravacao (o que vai pro video) */
.trec-cam-preview { width: 26vh; height: 26vh; object-fit: cover; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 6px 24px rgba(0,0,0,.5); z-index: 3001; pointer-events: none; background: #000; }
.trec-qr-preview { width: 20vh; height: 20vh; border-radius: 8px; border: 6px solid #fff; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.5); z-index: 3001; pointer-events: none; }
/* Nudge estilo MSN: tremor da tela + popup */
@keyframes nudgeShake {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-10px, 6px) rotate(-.6deg); }
  20% { transform: translate(9px, -8px) rotate(.5deg); }
  30% { transform: translate(-11px, 7px) rotate(-.5deg); }
  40% { transform: translate(10px, -6px) rotate(.5deg); }
  50% { transform: translate(-8px, 8px); }
  60% { transform: translate(8px, -7px); }
  70% { transform: translate(-6px, 5px); }
  80% { transform: translate(5px, -4px); }
  90% { transform: translate(-3px, 2px); }
}
.nudge-shake { animation: nudgeShake .9s cubic-bezier(.36,.07,.19,.97); }
.nudge-pop {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-20px);
  z-index: 4000; background: #5865f2; color: #fff; padding: 14px 22px; border-radius: 14px;
  font-size: 15px; box-shadow: 0 12px 40px rgba(0,0,0,.5); display: flex; align-items: center; gap: 10px;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.nudge-pop.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.nudge-pop .nudge-ico { font-size: 22px; animation: nudgeShake .9s infinite; display: inline-block; }
/* Modais de chamada (telefone) */
.call-modal { position: fixed; inset: 0; z-index: 4100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.call-modal.hidden { display: none; }
.call-card { background: #1a1d27; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 30px 34px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6); min-width: 300px; animation: callPop .25s ease-out; }
@keyframes callPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.call-ring { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; background: #5865f2; display: flex; align-items: center; justify-content: center; }
.call-ring .call-emoji { font-size: 40px; display: inline-block; }
.call-ring.calling .call-emoji, #incomingCall .call-emoji { animation: callShake .5s infinite; }
@keyframes callShake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 75% { transform: rotate(18deg); } }
.call-title { font-size: 18px; color: #f2f3f5; margin-bottom: 4px; }
.call-sub { font-size: 13px; color: #aeb4c0; margin-bottom: 20px; min-height: 16px; }
.call-actions { display: flex; gap: 12px; justify-content: center; }
.call-btn { border: none; border-radius: 10px; padding: 12px 24px; font-size: 15px; font-weight: 700; cursor: pointer; color: #fff; transition: filter .15s; }
.call-btn:hover { filter: brightness(1.1); }
.call-btn.accept { background: #22c55e; }
.call-btn.reject { background: #ef4444; }

/* Modal de download do app desktop */
.dl-modal .modal-card { max-width: 480px; }
.dl-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dl-hero img { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.dl-hero .dl-h-title { font-size: 17px; font-weight: 700; }
.dl-hero .dl-h-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.dl-feats { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 8px; }
.dl-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text); }
.dl-feats .dl-ic { color: var(--accent); flex: none; }
.dl-download {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 16px; border: none; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 700; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transition: filter 0.15s;
}
.dl-download:hover { filter: brightness(1.08); }
.dl-meta { text-align: center; font-size: 11px; color: var(--muted); margin-top: 10px; }
.dl-skip { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 13px; text-decoration: underline; }
.dl-actions { display: flex; align-items: center; justify-content: center; margin-top: 14px; }

/* Modal de marketing (apresentacao da plataforma + download) */
.mk-modal .modal-card {
  max-width: 620px; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 18px;
}
.mk-hero {
  padding: 26px 28px 20px; text-align: center;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(88,101,242,0.35), transparent 60%),
    linear-gradient(180deg, #171b2b, var(--panel));
  border-bottom: 1px solid var(--border);
}
.mk-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: #cdd2e0;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.mk-badge img { width: 16px; height: 16px; }
.mk-title { margin: 0; font-size: 23px; font-weight: 800; line-height: 1.2; color: #fff; }
.mk-title span { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mk-sub { margin: 10px auto 0; max-width: 440px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.mk-feats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 22px 28px 8px;
}
.mk-feat { display: flex; align-items: flex-start; gap: 11px; }
.mk-feat .mk-ic {
  font-size: 20px; line-height: 1; flex: none; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 10px;
}
.mk-feat b { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 2px; }
.mk-feat small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.mk-modal .dl-download { width: auto; margin: 16px 28px 0; }
.mk-modal .dl-meta { margin: 10px 28px 0; }
.mk-modal .dl-actions { margin: 12px 28px 22px; }

@media (max-width: 640px) {
  .mk-feats { grid-template-columns: 1fr; }
  .mk-title { font-size: 20px; }
}

/* Botao "Baixar app" em destaque no topo (main-head) */
.get-app-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border: none; border-radius: 10px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  background-size: 180% 180%;
  box-shadow: 0 4px 14px rgba(88,101,242,0.35);
  transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
  animation: getAppPulse 2.6s ease-in-out infinite;
}
.get-app-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(88,101,242,0.5); }
.get-app-btn:active { transform: translateY(0); }
.get-app-btn .ic { width: 15px; height: 15px; }
@keyframes getAppPulse {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 4px 14px rgba(88,101,242,0.35); }
  50% { background-position: 100% 50%; box-shadow: 0 4px 20px rgba(124,58,237,0.55); }
}
@media (max-width: 640px) {
  .get-app-btn { padding: 7px 12px; font-size: 12px; }
  .get-app-btn .get-app-label { display: none; }
}

/* Modal de nova versao do site (push em tempo real) */
.su-card { max-width: 460px; }
.su-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.su-spark { font-size: 30px; filter: drop-shadow(0 2px 8px rgba(124,58,237,.6)); }
.su-title { font-size: 18px; font-weight: 800; color: #fff; }
.su-ver { font-size: 12px; color: var(--accent); font-weight: 700; margin-top: 2px; }
.su-notes-t { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 7px; }
.su-notes { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #dfe3ee; line-height: 1.55; white-space: pre-wrap; max-height: 220px; overflow-y: auto; }
.su-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.su-later { margin-left: auto; background: rgba(255,255,255,.07); color: #c3c8db; border: none; border-radius: 10px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.su-later:hover { background: rgba(255,255,255,.12); color: #fff; }
.su-now { background: linear-gradient(135deg,#5865f2,#7c3aed); color: #fff; border: none; border-radius: 10px; padding: 10px 22px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.su-now:hover { filter: brightness(1.08); }
.su-now:disabled { opacity: .6; cursor: default; }
.su-badge { position: fixed; right: 16px; bottom: 16px; z-index: 2147483000; background: linear-gradient(135deg,#5865f2,#7c3aed); color: #fff; border: none; padding: 9px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 20px rgba(88,101,242,.5); animation: suPulse 2.4s ease-in-out infinite; }
.su-badge:hover { filter: brightness(1.1); }
@keyframes suPulse { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }

/* No app Electron, a barra de titulo injetada cobre o topo com -webkit-app-region:drag,
   o que ENGOLE os cliques nos controles do topo (ex.: checkbox Push-to-talk).
   Marcamos os controles interativos do topo como no-drag para voltarem a clicar. */
.main-head, .main-head * { -webkit-app-region: no-drag; }
.voice-mode, .voice-mode *, #pttToggle, .switch-label, .get-app-btn,
#pttBindBtn, #tvLeaveBtn, #pttHoldBtn { -webkit-app-region: no-drag; }

/* Versao do software no rodape da barra lateral */
.app-version {
  padding: 6px 12px 10px; text-align: center; font-size: 10.5px; color: var(--muted);
  opacity: .7; letter-spacing: .3px; -webkit-app-region: no-drag;
}

/* PTT clicavel no app: controles do topo ACIMA da barra de titulo injetada. */
/* App Electron injeta uma barra de titulo de 32px no topo com area de arrastar
   que engole cliques. Empurramos os controles do topo para ABAIXO desses 32px,
   assim o Push-to-talk fica clicavel e o botao Fechar do app fica livre. */
html.in-app .main-head { padding-top: 42px; }
.voice-mode, .voice-mode *, #pttToggle, .switch-label { -webkit-app-region: no-drag; }

/* Saudacao "Bem-vindo, <Nome>" no topo (fora de canal) */
.welcome-greeting { font-size: 20px; font-weight: 800; color: #e7e9f0; letter-spacing: .2px; }
.welcome-greeting b {
  background: linear-gradient(90deg,#8b93ff,#c4b5fd,#22d3ee,#8b93ff);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: welcomeShine 4s linear infinite;
}
@keyframes welcomeShine { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
.hidden { display: none !important; }

/* Topo: saudacao sempre visivel + nome do canal ao lado */
.main-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.channel-name-top { font-size: 14px; font-weight: 600; color: var(--muted); }
.channel-name-top:not(:empty)::before { content: '#  '; opacity: .5; }

/* Indicador discreto de compartilhamento ativo (topo) */
.screen-share-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #ff6b6b;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.screen-share-badge .ss-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
  animation: ssPulse 1.4s ease-in-out infinite;
}
@keyframes ssPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }

/* Modal de informacoes da versao (notas + verificar atualizacao) */
.vi-card { max-width: 440px; }
.vi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.vi-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; color: #cdd2e0; background: rgba(255,255,255,.06); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; }
.vi-title { font-size: 17px; font-weight: 800; color: #fff; }
.vi-notes-t { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 7px; }
.vi-notes { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #dfe3ee; line-height: 1.55; white-space: pre-wrap; max-height: 240px; overflow-y: auto; }
.vi-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.vi-check { background: linear-gradient(135deg,#5865f2,#7c3aed); color: #fff; border: none; border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.vi-check:hover { filter: brightness(1.08); }
.vi-close { margin-left: auto; background: rgba(255,255,255,.07); color: #c3c8db; border: none; border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.vi-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.vi-status { margin-top: 10px; font-size: 12.5px; color: var(--accent); min-height: 16px; text-align: center; }

.app-version:hover { color: var(--accent); text-decoration: underline; }

/* Botao de testar vinheta (admin) na barra da radio */
#testVinhetaBtn { font-size: 11px; font-weight: 700; padding: 3px 8px; white-space: nowrap; }

/* ===== Favoritos de TV: estrela + layout de lista vertical ===== */
/* wrapper de cada canal (botao + estrela) */
.tv-ch-row { position: relative; display: flex; align-items: stretch; }
.tv-ch-row .tv-ch { flex: 1 1 auto; }
.tv-ch-row.active .tv-ch { background: linear-gradient(180deg, rgba(91,140,255,.22), rgba(91,140,255,.08)); border-color: rgba(91,140,255,.55); }
/* estrela de favorito */
.tv-fav { position: absolute; top: 6px; right: 6px; z-index: 2; cursor: pointer; font-size: 15px; line-height: 1; color: #8890a8; padding: 3px; border-radius: 6px; transition: transform .1s, color .12s; -webkit-app-region: no-drag; }
.tv-fav:hover { transform: scale(1.2); color: #ffd54a; }
.tv-fav.on { color: #ffcc33; }

/* MODO LISTA (aba Favoritos): coluna unica, logo esquerda + descricao direita, rolavel */
.tv-list.fav-mode { display: flex !important; flex-direction: column; gap: 6px; }
.tv-list.fav-mode .tv-ch-row { width: 100%; }
.tv-list.fav-mode .tv-ch {
  flex-direction: row !important; align-items: center; gap: 12px;
  width: 100%; padding: 10px 42px 10px 12px;
}
.tv-list.fav-mode .tv-ch-thumb { flex: 0 0 auto; width: 52px; height: 52px; }
.tv-list.fav-mode .tv-ch-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tv-list.fav-mode .tv-ch-name { font-size: 14px; }
.tv-list.fav-mode .tv-fav { top: 50%; transform: translateY(-50%); right: 10px; font-size: 18px; }
.tv-list.fav-mode .tv-fav:hover { transform: translateY(-50%) scale(1.2); }

/* Controles rapidos no rodape (mute mic / deafen) estilo Discord */
.self-ctrl { flex: 0 0 auto; }
.self-ctrl.active-off { color: #ef4444 !important; }
.self-ctrl.active-off:hover { color: #ff6b6b !important; }
.status-dot.offline { background: #6b7280 !important; box-shadow: none !important; }
#meStatusDot { transition: background .15s; }
#meStatusDot:hover { filter: brightness(1.3); }

/* Alerta "Fulano esta on-line!" (canto inferior direito) */
#onlineToasts { position: fixed; right: 18px; bottom: 18px; z-index: 2147482000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.online-toast {
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(135deg, #171b2b, #12151f);
  border: 1px solid var(--border); border-left: 3px solid #22c55e;
  border-radius: 12px; padding: 11px 15px 11px 12px; min-width: 210px; max-width: 300px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transform: translateX(120%); opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.2,1.1), opacity .35s;
}
.online-toast.show { transform: translateX(0); opacity: 1; }
.online-toast .ot-av { flex: 0 0 auto; }
.online-toast .ot-av .avatar { width: 38px; height: 38px; }
.online-toast .ot-txt { font-size: 13px; color: #dfe3ee; }
.online-toast .ot-txt b { color: #fff; font-weight: 700; }

/* Overlay "in-game": quase invisivel, so os NOMES de quem esta na sala.
   Aparece apenas quando o StreamTube esta em segundo plano (voce no jogo).
   Sem fundo pesado, sem barra de rolagem, sem interacao. */
.room-overlay {
  position: fixed; top: 8px; left: 8px; z-index: 2147481000;
  max-width: 260px; padding: 0; margin: 0;
  background: transparent; border: none; box-shadow: none; backdrop-filter: none;
  pointer-events: none; overflow: visible;
}
.room-overlay .ro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.room-overlay .ro-item { display: block; padding: 0; margin: 0; border: none; background: none; }
.room-overlay .ro-name {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.35);
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9);
  white-space: nowrap; letter-spacing: .2px; transition: color .12s;
}
/* acende (verde vivo) quando a pessoa esta falando */
.room-overlay .ro-item.speaking .ro-name { color: #46e08a; text-shadow: 0 0 6px rgba(70,224,138,.7), 0 1px 3px rgba(0,0,0,.9); }
@media (max-width: 820px) { .room-overlay { display: none; } }

/* ===========================================================================
   Botao de versao animado (rodape da sidebar) - discreto e profissional.
   Mostra "StreamTube vX.Y.Z" + CTA "Verificar atualizacao" que so aparece no
   hover; um pontinho pulsa suavemente para sinalizar que e clicavel.
   =========================================================================== */
.app-version.app-version-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 4px auto 8px; padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  color: var(--muted); opacity: 1;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  -webkit-app-region: no-drag; user-select: none;
}
.app-version.app-version-btn:hover,
.app-version.app-version-btn:focus-visible {
  background: rgba(88,101,242,.10);
  border-color: rgba(124,58,237,.45);
  color: #dfe3ee; text-decoration: none;
  box-shadow: 0 0 0 3px rgba(88,101,242,.12);
  outline: none;
}
.app-version.app-version-btn .av-label { font-weight: 700; letter-spacing: .3px; }
.app-version.app-version-btn .av-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #7c3aed;
  box-shadow: 0 0 0 0 rgba(124,58,237,.55);
  animation: avPulse 2.4s ease-in-out infinite;
}
@keyframes avPulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,58,237,.45); opacity: .95; }
  50%  { box-shadow: 0 0 0 5px rgba(124,58,237,0); opacity: .6; }
  100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); opacity: .95; }
}
/* CTA sutil: recolhida por padrao, revela no hover/foco sem "pular" o layout */
.app-version.app-version-btn .av-cta {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font-weight: 700; color: #c4b5fd;
  transition: max-width .28s ease, opacity .2s ease, margin-left .2s ease;
}
.app-version.app-version-btn:hover .av-cta,
.app-version.app-version-btn:focus-visible .av-cta {
  max-width: 160px; opacity: 1; margin-left: 2px;
}
.app-version.app-version-btn .av-cta::before { content: "·"; margin-right: 6px; opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  .app-version.app-version-btn .av-dot { animation: none; }
  .app-version.app-version-btn .av-cta { transition: none; }
}

/* ==========================================================================
   Scrollbars discretas, no estilo do app (substituem a barra cinza padrao do
   Windows por uma fina que combina com o tema). Aplicada globalmente + realce
   sutil no hover. WebKit (Chrome/Electron) + Firefox.
   ========================================================================== */
* {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: var(--panel-3) transparent; /* thumb / track (Firefox) */
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--panel-3);
  border-radius: 8px;
  border: 2px solid transparent;   /* cria um respiro em volta do thumb */
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #3a4560; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ==========================================================================
   MODO APP DESKTOP: quando o site roda dentro do app (Electron marca o <html>
   com .stv-desktop-app), NUNCA usar o layout mobile de paineis sobrepostos,
   mesmo com a janela estreita. Assim a sidebar e o chat aparecem lado a lado e
   o chat nao "some" no canto direito ao abrir o app em tamanho reduzido.
   ========================================================================== */
html.stv-desktop-app .app {
  display: grid !important;
  grid-template-columns: 56px 300px 1fr !important;
  height: 100%;
  overflow: hidden;
}
html.stv-desktop-app .guild-rail { display: flex !important; }
html.stv-desktop-app .mobile-nav { display: none !important; }

/* Desfaz a sobreposicao mobile: sidebar e main voltam a ser colunas normais. */
html.stv-desktop-app .sidebar,
html.stv-desktop-app .main {
  position: static !important;
  inset: auto !important;
  bottom: auto !important;
  width: auto !important;
  transform: none !important;
  z-index: auto !important;
}
/* Chat volta a ocupar o centro (lado a lado com o video quando houver). */
html.stv-desktop-app .stage-area { flex-direction: row; }
html.stv-desktop-app .chat { width: auto; flex: 1; border: none; }
html.stv-desktop-app.has-video .chat,
html.stv-desktop-app .app.has-video .chat { width: 320px; flex: none; border-left: 1px solid var(--border); }

/* ==========================================================================
   Status AUSENTE: bolinha vermelha + rotulo "Ausente" ao lado do nome. O
   usuario continua no canal, apenas sinaliza que esta ausente. Diferente de
   offline (cinza) e online (verde).
   ========================================================================== */
.status-dot.away { background: #ef4444 !important; box-shadow: 0 0 8px rgba(239,68,68,.7) !important; }
.user-row.away { color: var(--text); opacity: 1; }
.user-row.away .avatar { filter: none; opacity: 1; }
.u-status-label {
  font-size: 11px; font-weight: 600; color: #ef4444;
  margin-left: 6px; letter-spacing: .2px; flex: none;
}

/* Bolinha de status do proprio perfil: apenas o ponto (verde/vermelho/cinza),
   sem borda nem realce. A area de clique e ampliada de forma invisivel. */
#meStatusDot { cursor: pointer; position: relative; }
/* pseudo-elemento invisivel amplia a area clicavel sem mudar a aparencia */
#meStatusDot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
#meStatusDot:focus-visible { outline: none; }

/* ==========================================================================
   Reportar Bug / Sugestao
   ========================================================================== */

/* Formulario do report */
.rep-type-row { display: flex; gap: 8px; margin-bottom: 12px; }
.rep-type-btn {
  flex: 1; padding: 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color .12s, background .12s;
}
.rep-type-btn.active { border-color: var(--accent); background: rgba(108,140,255,.15); color: var(--accent); }
.rep-field { margin-bottom: 12px; }
.rep-field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.rep-field input[type="text"], .rep-field textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); font-size: 14px; outline: none; font-family: inherit;
}
.rep-field input:focus, .rep-field textarea:focus { border-color: var(--accent); }
.rep-field textarea { min-height: 110px; resize: vertical; }
.rep-img-row { display: flex; align-items: center; gap: 10px; }
.rep-img-preview { max-height: 64px; max-width: 110px; border-radius: 8px; border: 1px solid var(--border); object-fit: cover; display: none; }
.rep-hint { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Lista de chamados (painel admin) */
.rep-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.rep-item { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--panel-2); }
.rep-item.resolved { opacity: .6; }
.rep-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.rep-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
.rep-tag.bug { background: rgba(239,68,68,.2); color: #f87171; }
.rep-tag.suggestion { background: rgba(108,140,255,.2); color: var(--accent); }
.rep-tag.done { background: rgba(59,165,93,.2); color: #4ade80; }
.rep-item-title { font-weight: 700; font-size: 14px; flex: 1; }
.rep-item-meta { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.rep-item-msg { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.rep-item-img { margin-top: 8px; max-width: 260px; max-height: 200px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; display: block; }
.rep-item-actions { display: flex; gap: 8px; margin-top: 10px; }
.rep-item-actions button { font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); background: var(--panel-3); color: var(--text); }
.rep-item-actions .rep-resolve:hover { border-color: #3ba55d; color: #4ade80; }
.rep-item-actions .rep-del:hover { border-color: var(--danger); color: #f87171; }
.rep-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 20px; }

/* Area de COLAR o print (Ctrl+V) no formulario de report */
.rep-paste {
  position: relative; border: 1.5px dashed var(--border); border-radius: 12px;
  min-height: 88px; display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); cursor: text; transition: border-color .15s, background .15s;
  padding: 10px; text-align: center;
}
.rep-paste:hover, .rep-paste:focus { outline: none; border-color: var(--accent); }
.rep-paste.has-img { border-style: solid; cursor: default; }
.rep-paste-empty { color: var(--muted); font-size: 13px; line-height: 1.5; }
.rep-paste-empty small { font-size: 11.5px; }
.rep-paste-empty u { color: var(--accent); cursor: pointer; }
.rep-paste .rep-img-preview { max-height: 180px; max-width: 100%; border-radius: 8px; display: none; object-fit: contain; }
.rep-paste-clear {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff;
  cursor: pointer; font-size: 16px; line-height: 1; align-items: center; justify-content: center;
}
.rep-paste-clear:hover { background: var(--danger); }

/* ==========================================================================
   Botao flutuante "Reportar bug": canto inferior direito, discreto, com um
   pulso sutil e profissional. Expande o rotulo ao passar o mouse.
   ========================================================================== */
.report-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  display: inline-flex; align-items: center; gap: 0;
  height: 44px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(27, 33, 48, .92); color: var(--muted);
  cursor: pointer; overflow: hidden; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  transition: color .18s, border-color .18s, background .18s, box-shadow .18s;
  animation: repFabPulse 3.2s ease-in-out infinite;
}
.report-fab .ic { width: 19px; height: 19px; flex: none; }
.report-fab .rf-label {
  max-width: 0; opacity: 0; margin-left: 0;
  font-size: 13px; font-weight: 600;
  transition: max-width .25s ease, opacity .2s ease, margin-left .25s ease;
}
.report-fab:hover, .report-fab:focus-visible {
  color: #fff; border-color: rgba(239,68,68,.6);
  background: rgba(34, 24, 30, .96);
  box-shadow: 0 6px 22px rgba(239,68,68,.28);
  outline: none; animation: none;
}
.report-fab:hover .rf-label, .report-fab:focus-visible .rf-label {
  max-width: 140px; opacity: 1; margin-left: 8px;
}
.report-fab:active { transform: translateY(1px); }
/* Pulso discreto: um leve halo que respira, chamando atencao sem incomodar. */
@keyframes repFabPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,.35), 0 0 0 0 rgba(239,68,68,.0); }
  50%      { box-shadow: 0 4px 16px rgba(0,0,0,.35), 0 0 0 5px rgba(239,68,68,.14); }
}
@media (prefers-reduced-motion: reduce) { .report-fab { animation: none; } }

/* Bolinha de status ao lado do nick DENTRO do canal (mesma logica da lista de usuarios) */
.channel-member { display: flex; align-items: center; gap: 6px; }
.channel-member .cm-status { width: 8px; height: 8px; flex: none; }
.channel-member .u-status-label { font-size: 10px; margin-left: 2px; }

/* ===== Rich Presence de jogo (feature 10): "jogando X" ao lado do nick ===== */
.cm-game {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: #8b93ff;
  margin-left: 6px; max-width: 120px; flex: none;
  overflow: hidden; white-space: nowrap;
}
.cm-game .ic { width: 12px; height: 12px; flex: none; }
.cm-game-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Feature 9: painel de diagnostico de conexao ===== */
.netdiag-fab {
  position: fixed; right: 18px; bottom: 76px; z-index: 9998;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  display: none; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(135deg, #6c8cff, #8b5cf6); color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.45); transition: transform .15s, filter .15s;
}
.netdiag-fab:hover { transform: translateY(-2px); filter: brightness(1.08); }
.netdiag-panel {
  position: fixed; right: 18px; bottom: 128px; z-index: 9999;
  width: 320px; max-width: calc(100vw - 36px); max-height: 60vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: #171b26; color: #eaecf3; border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px; box-shadow: 0 16px 44px rgba(0,0,0,.6);
}
.netdiag-panel.hidden { display: none; }
.netdiag-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.netdiag-title { font-weight: 700; font-size: 14px; }
.netdiag-close { background: none; border: none; color: #9aa3b5; cursor: pointer; font-size: 14px; }
.netdiag-close:hover { color: #fff; }
.netdiag-sub { padding: 8px 14px; font-size: 12px; color: #9aa3b5; }
.netdiag-list { padding: 4px 10px 10px; overflow-y: auto; }
.netdiag-empty { padding: 16px 6px; font-size: 12px; color: #9aa3b5; text-align: center; }
.netdiag-row { padding: 9px 8px; border-radius: 10px; }
.netdiag-row + .netdiag-row { margin-top: 4px; border-top: 1px solid rgba(255,255,255,.05); }
.netdiag-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.netdiag-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netdiag-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: .3px; flex: none; }
.netdiag-badge.q-otima { background: rgba(34,197,94,.18); color: #4ade80; }
.netdiag-badge.q-boa { background: rgba(59,130,246,.18); color: #60a5fa; }
.netdiag-badge.q-instavel { background: rgba(234,179,8,.18); color: #facc15; }
.netdiag-badge.q-ruim { background: rgba(239,68,68,.20); color: #f87171; }
.netdiag-metrics { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 11px; color: #9aa3b5; }
.netdiag-metrics b { color: #cdd3e0; font-weight: 700; }
.netdiag-foot { padding: 8px 14px; font-size: 10px; color: #6b7280; border-top: 1px solid rgba(255,255,255,.06); }

/* ===== Feature 9: modal de teste de microfone e conexao ===== */
.mictest-back {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
.mictest-back.hidden { display: none; }
.mictest-card {
  width: 380px; max-width: calc(100vw - 32px);
  background: #171b26; color: #eaecf3; border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.6); padding: 16px 18px;
}
.mictest-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mictest-title { font-weight: 700; font-size: 15px; }
.mictest-close { background: none; border: none; color: #9aa3b5; cursor: pointer; font-size: 15px; }
.mictest-close:hover { color: #fff; }
.mictest-label { display: block; font-size: 12px; color: #9aa3b5; margin: 8px 0 4px; }
.mictest-select {
  width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px;
  background: #0f131c; color: #eaecf3; border: 1px solid rgba(255,255,255,.12);
}
.mictest-meter-label { font-size: 12px; color: #9aa3b5; margin: 12px 0 5px; }
.mictest-meter-label #micTestHint { color: #6b7280; }
.mictest-meter { height: 12px; border-radius: 999px; background: #0f131c; overflow: hidden; border: 1px solid rgba(255,255,255,.10); }
.mictest-meter-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #6c8cff); transition: width .08s linear; }
.mictest-conn { margin-top: 16px; }
.mictest-btn {
  width: 100%; padding: 9px 12px; border: none; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #6c8cff, #8b5cf6);
}
.mictest-btn:hover { filter: brightness(1.08); }
.mictest-btn:disabled { opacity: .6; cursor: default; }
.mictest-conn-result { margin-top: 8px; font-size: 12px; color: #9aa3b5; min-height: 16px; }
.mictest-conn-result.good { color: #4ade80; }
.mictest-conn-result.ok { color: #60a5fa; }
.mictest-conn-result.bad { color: #f87171; }
.mictest-foot { margin-top: 14px; font-size: 10px; color: #6b7280; }
/* botao "Testar meu mic e conexao" dentro do painel de diagnostico */
.netdiag-actions { padding: 4px 12px 0; }
.netdiag-testbtn {
  width: 100%; padding: 7px 10px; border: 1px solid rgba(108,140,255,.4); border-radius: 8px;
  background: rgba(108,140,255,.12); color: #aab4ff; font-size: 12px; font-weight: 600; cursor: pointer;
}
.netdiag-testbtn:hover { background: rgba(108,140,255,.2); }

/* ===== Card de promoção Steam (canal de promoções) ===== */
.sd-card {
  margin: 8px 0 4px; border-radius: 14px; overflow: hidden; max-width: 460px;
  background: #10141d; border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.sd-hero { position: relative; line-height: 0; background: #0b0e15; }
.sd-hero-img { width: 100%; height: auto; display: block; object-fit: cover; }
.sd-disc {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: #4c9a2a; color: #fff; font-weight: 800; font-size: 13px;
  padding: 3px 9px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.sd-body { padding: 12px 14px; }
.sd-title { font-size: 16px; font-weight: 800; color: #eaecf3; margin-bottom: 6px; }
.sd-genres { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.sd-genre { font-size: 10px; font-weight: 600; color: #9fb4ff; background: rgba(108,140,255,.14); padding: 2px 8px; border-radius: 999px; }
.sd-desc { font-size: 12px; color: #aab2c2; line-height: 1.45; margin-bottom: 10px; }
.sd-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 12px; }
.sd-shot { width: 100%; height: 48px; object-fit: cover; border-radius: 6px; cursor: pointer; transition: transform .12s; }
.sd-shot:hover { transform: scale(1.05); }
.sd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sd-price { display: flex; align-items: baseline; gap: 8px; }
.sd-price-old { font-size: 12px; color: #7c8598; text-decoration: line-through; }
.sd-price-new { font-size: 16px; font-weight: 800; color: #4ade80; }
.sd-btn {
  flex: none; text-decoration: none; font-size: 13px; font-weight: 700; color: #fff;
  padding: 9px 16px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #1b2838, #2a475e); border: 1px solid #66c0f4;
}
.sd-btn:hover { filter: brightness(1.15); }

/* ===== Reordenar canais (drag & drop, admin/dono) ===== */
.channel-item.chan-draggable { cursor: grab; }
.channel-item.chan-draggable:active { cursor: grabbing; }
.channel-item.chan-dragging { opacity: .5; }
.channel-item.drag-over { box-shadow: inset 0 2px 0 0 #6c8cff; background: rgba(108,140,255,.10); }

/* ===== Contagem regressiva das promoções Steam ===== */
.sd-countdown {
  display: inline-flex; align-items: center; gap: 7px; margin: 6px 0 4px;
  padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(108,140,255,.14), rgba(139,92,246,.14));
  border: 1px solid rgba(108,140,255,.3); color: #cdd3e0; font-size: 13px;
}
.sd-cd-ic { font-size: 14px; }
.sd-cd-label { color: #9aa3b5; }
.sd-cd-time { font-weight: 800; font-variant-numeric: tabular-nums; color: #8b93ff; font-size: 15px; letter-spacing: .5px; }
.sd-countdown.sd-cd-done .sd-cd-time { color: #4ade80; }

/* ===== Compartilhar Área: overlay de seleção de retângulo ===== */
.area-pick-back { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.72); backdrop-filter: blur(2px); }
.area-pick-card { width: min(92vw, 1000px); max-height: 92vh; background: #12151d; border: 1px solid rgba(255,255,255,.10); border-radius: 16px; box-shadow: 0 18px 60px rgba(0,0,0,.6); padding: 16px 18px; display: flex; flex-direction: column; }
.area-pick-head { font-size: 15px; font-weight: 700; color: #eaecf3; margin-bottom: 10px; }
.area-pick-hint { font-size: 12px; font-weight: 400; color: #9aa3b5; margin-left: 4px; }
.area-pick-stage { position: relative; flex: 1; min-height: 0; background: #000; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: crosshair; }
.area-pick-video { max-width: 100%; max-height: 68vh; display: block; object-fit: contain; user-select: none; pointer-events: none; }
.area-pick-sel { position: absolute; display: none; border: 2px solid #6c8cff; background: rgba(108,140,255,.18); box-shadow: 0 0 0 9999px rgba(0,0,0,.45); pointer-events: none; }
.area-pick-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.area-pick-btn { padding: 9px 18px; border: none; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 700; }
.area-pick-cancel { background: rgba(255,255,255,.08); color: #cdd3e0; }
.area-pick-cancel:hover { background: rgba(255,255,255,.14); }
.area-pick-ok { background: linear-gradient(135deg, #6c8cff, #8b5cf6); color: #fff; }
.area-pick-ok:hover { filter: brightness(1.1); }
.area-pick-ok:disabled { opacity: .5; cursor: default; }

/* ===== Botões de compartilhar no modo TV (Tela / Área) ===== */
.tv-share-btn { display: none; }
.app.tv-active .tv-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(108,140,255,.14); border: 1px solid rgba(108,140,255,.45); color: #aab4ff;
  border-radius: 10px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
}
/* o primeiro botão de share empurra o grupo para a direita (o Sair vem depois) */
.app.tv-active #tvScreenBtn { margin-left: auto; }
.app.tv-active .tv-share-btn:hover { background: rgba(108,140,255,.24); }
.app.tv-active .tv-share-btn.active { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.5); color: #4ade80; }
.tv-share-btn .ic { width: 16px; height: 16px; }
/* como o tvScreenBtn agora tem o margin-left:auto, tira do Sair pra ficarem juntos */
.app.tv-active .tv-leave-btn { margin-left: 8px; }

/* ===== Recado privado: modal de envio ===== */
.dm-back { position: fixed; inset: 0; z-index: 10002; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.dm-card { width: 380px; max-width: calc(100vw - 32px); background: #171b26; color: #eaecf3; border: 1px solid rgba(255,255,255,.10); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.6); padding: 16px 18px; }
.dm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dm-av { width: 42px; height: 42px; font-size: 17px; flex: none; }
.dm-to { font-size: 11px; color: #9aa3b5; }
.dm-name { font-size: 15px; font-weight: 800; }
.dm-x { margin-left: auto; background: none; border: none; color: #9aa3b5; cursor: pointer; font-size: 15px; }
.dm-x:hover { color: #fff; }
.dm-text { width: 100%; resize: none; background: #0f131c; color: #eaecf3; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 10px 12px; font: 14px 'Segoe UI', system-ui, sans-serif; }
.dm-text:focus { outline: none; border-color: #6c8cff; }
.dm-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.dm-cancel, .dm-send { padding: 9px 16px; border: none; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 700; }
.dm-cancel { background: rgba(255,255,255,.08); color: #cdd3e0; }
.dm-cancel:hover { background: rgba(255,255,255,.14); }
.dm-send { background: linear-gradient(135deg, #6c8cff, #8b5cf6); color: #fff; }
.dm-send:hover { filter: brightness(1.1); }
.dm-send:disabled { opacity: .6; cursor: default; }

/* ===== Recado privado: popup de recebimento (canto inferior direito) ===== */
#dmPopups { position: fixed; right: 16px; bottom: 16px; z-index: 10003; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.dm-pop { background: linear-gradient(135deg, #1b2130, #131824); border: 1px solid rgba(255,255,255,.12); border-left: 4px solid #8b5cf6; border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 34px rgba(0,0,0,.55); transform: translateX(120%); opacity: 0; transition: transform .32s cubic-bezier(.2,.9,.3,1.2), opacity .3s; }
.dm-pop.show { transform: translateX(0); opacity: 1; }
.dm-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dm-pop-av { width: 30px; height: 30px; font-size: 13px; flex: none; }
.dm-pop-name { font-size: 14px; font-weight: 800; color: #eaecf3; }
.dm-pop-x { margin-left: auto; background: none; border: none; color: #9aa3b5; cursor: pointer; font-size: 13px; }
.dm-pop-x:hover { color: #fff; }
.dm-pop-text { font-size: 14px; color: #cdd3e0; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }

/* Botão de fechar o recado (fica fixo até o usuário clicar) */
.dm-pop-ok { margin-top: 10px; width: 100%; padding: 8px 12px; border: none; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #6c8cff, #8b5cf6); }
.dm-pop-ok:hover { filter: brightness(1.1); }