:root {
  /* escuro em camadas (como Discord / Min Dark): coluna de servidores mais funda, painéis médios, área principal mais clara */
  --rail: #1b1c21; --bg: #2c2e36; --panel: #24262c; --raised: #363942; --hover: #3d404a;
  --line: #3a3d46; --line-2: #4b4f5a;
  --text: #f3f4f6; --text-2: #bcc0c8; --text-3: #979ca6;
  --accent-1: #f5b83d; --accent-2: #ff4d6d; --accent: #fa8255; --accent-ink: #1d1016;
  --grad: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  --grad-btn: linear-gradient(100deg, #f0902e, #ff3f68);
  --green: #3ddc84; --red: #f0565a;
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --modal-window-width: 1400px; --modal-window-height: 900px; --modal-form-width: 560px;
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ui: "Space Grotesk", "Manrope", system-ui, sans-serif; /* nomes, títulos e canais: cara própria; texto corrido fica na Manrope */
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; border-radius: var(--r-sm); }
button:disabled { opacity: .5; cursor: default; }
input { font: inherit; }
audio { display: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
.muted { color: var(--text-2); }
.tiny { font-size: 12px; color: var(--text-3); }
.ic { width: 18px; height: 18px; flex: none; }
.ic .slash { stroke: var(--red); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- entrada ---------- */
.screen { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); padding: 16px; }
.card {
  width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 14px;
}
.card .logo { align-self: center; width: 56px; height: 56px; margin-bottom: 2px; }
.wordmark { font-family: "Unbounded", "Manrope", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.03em; }
.brand .wordmark { font-size: 16px; line-height: 1; padding-bottom: 1px; }
.card .logo.retro { display: none; }
.card.busy .logo { animation: signin 1s ease-in-out infinite; }
@keyframes signin { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12) rotate(-4deg); } }
.card h1 { margin: 0; text-align: center; font-size: 28px; line-height: 1; }
.card > p { margin: -8px 0 6px; text-align: center; font-size: 13px; }
.card label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.card input {
  background: var(--rail); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: 14px; outline: none; transition: border-color .12s, box-shadow .12s;
}
.card input:focus, .card select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(250, 130, 85, .2); }
.card select { background: var(--rail); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 9px 12px; font-size: 14px; outline: none; }
.card label.check { flex-direction: row; align-items: center; gap: 10px; font-size: 13px; color: var(--text); cursor: pointer; }
.card label.check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.err { color: var(--red); font-size: 13px; min-height: 1em; margin: -6px 0; }
.btn { height: 40px; padding: 0 16px; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line-2); font-weight: 600; transition: background .12s; }
.btn:hover { background: var(--hover); }
.btn:has(> .ic) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:not(.small) > .ic { width: 16px; height: 16px; }
.btn.primary { background: var(--grad-btn, var(--grad)); border-color: transparent; color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.btn.primary:hover { filter: brightness(1.06); }
.link { color: var(--text-2); font-size: 13px; padding: 0; align-self: center; }
.link:hover { color: var(--text); text-decoration: underline; }

.downloads { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.downloads .tiny { margin: 0; text-align: center; width: 100%; }
.downloads .tiny.ver { font-size: 11px; opacity: .8; }
.downloads .row { width: 100%; }
.downloads .row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.downloads .btn { height: 32px; padding: 0 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--text); }
.downloads .btn.primary { color: #fff; }
.downloads .btn .ic { width: 15px; height: 15px; }
[data-theme="nostalgia"] .downloads a.btn { color: #000; }

/* ---------- estrutura ---------- */
#app { display: flex; flex-direction: column; height: 100%; }
#body { display: flex; flex: 1; min-height: 0; }
#xp-title { display: none; }
#sidebar {
  width: 248px; flex: none; background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.brand { height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--line); }
.brand img { width: 24px; height: 24px; }
.create {
  margin: 12px 12px 4px; height: 36px; padding: 0 12px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-2); color: var(--text); font-weight: 600; transition: background .12s;
}
.create:hover { background: var(--hover); }
.create .ic { width: 16px; height: 16px; color: var(--accent); }
.scroll { overflow-y: auto; min-height: 0; }
#rooms { flex: 1; padding: 6px 12px; }
.section { font-size: 12px; font-weight: 600; color: var(--text-3); padding: 12px 8px 4px; }
.empty { padding: 10px 8px; font-size: 13px; color: var(--text-3); }

.room { margin-bottom: 2px; }
.room-row {
  height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: var(--r-sm);
  cursor: pointer; color: var(--text-2); font-weight: 500; transition: background .12s, color .12s;
}
.room-row:hover { background: var(--hover); color: var(--text); }
.room.active .room-row { background: var(--raised); color: var(--text); }
.room-row .ic { width: 16px; height: 16px; }
.room-row .ic + .ic, .room-row .room-name + .ic { width: 13px; height: 13px; color: var(--text-3); }
.room-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-row .rchat { width: 22px; height: 22px; opacity: 0; position: relative; flex: none; }
.room-row .rchat .ic { width: 15px; height: 15px; }
.room-row:hover .rchat, .room-row .rchat.has { opacity: 1; }
.room-row .rchat .badge { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; font-size: 10px; }
.members { padding: 2px 0 4px 24px; }
.member { height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: var(--r-sm); font-size: 13px; color: var(--text-2); cursor: pointer; }
.member:hover { background: var(--hover); color: var(--text); }
.member .ic { width: 15px; height: 15px; color: var(--text-3); }
.member .mname { flex: 0 1 auto; min-width: 3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member .mstatus { flex: 1 1 0; min-width: 0; }
.member.lobby { color: var(--text-3); }
.member .kick { opacity: 0; width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-3); padding: 0; }
.member:hover .kick { opacity: 1; }
.member .kick:hover { color: var(--red); background: var(--hover); }
.member.speaking .mname { color: var(--text); }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  font-weight: 600; flex: none; user-select: none; position: relative; --lvl: 0;
}
/* Falando: anel fino em degradê (2 px, com 1 px de respiro) + halo discreto que cresce com o volume (--lvl 0..1). */
.avatar { --ring: 2px; --gap: 1.5px; }
.avatar.sm { --ring: 1.5px; --gap: 1px; }
.avatar.big { --ring: 2px; --gap: 2px; }
.speaking .avatar::after, .avatar.talk::after {
  content: ""; position: absolute; inset: calc(-1 * (var(--ring) + var(--gap))); border-radius: inherit; pointer-events: none;
  border: var(--ring) solid transparent; background: var(--grad) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.speaking .avatar::before, .avatar.talk::before {
  content: ""; position: absolute; inset: calc(-4px - var(--lvl) * 5px); border-radius: inherit; background: var(--grad); pointer-events: none;
  opacity: calc(.08 + var(--lvl) * .22); filter: blur(5px); z-index: -1; transition: inset .1s, opacity .1s;
}
.tile .avatar, .member .avatar, .urow .avatar { z-index: 0; }
.avatar.sm { width: 20px; height: 20px; font-size: 11px; }
.avatar.big { width: 64px; height: 64px; font-size: 24px; }

.me-bar { height: 52px; flex: none; display: flex; align-items: center; gap: 2px; padding: 0 8px 0 12px; border-top: 1px solid var(--line); background: var(--panel); }
.me-bar .avatar.sm { margin-right: 8px; }
.me-bar .me-text { margin-right: 4px; }
.me-bar .mstatus { display: flex; align-items: center; gap: 4px; }
.me-bar .mstatus .ic { width: 11px; height: 11px; color: var(--green); }
.me-bar button.icon.off { color: var(--red); }
.me-bar button.icon.off:hover { color: var(--red); background: rgba(240, 86, 90, .14); }

/* ---------- central de voz na lateral ---------- */
#voice { flex: none; border-top: 1px solid var(--line); padding: 10px 10px 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.vhead { display: flex; align-items: center; gap: 10px; }
.vsig { width: 16px; height: 14px; display: flex; align-items: flex-end; gap: 2px; flex: none; }
.vsig i { flex: 1; height: 40%; border-radius: 1px; background: var(--line-2); transition: background .2s; }
.vsig i:nth-child(2) { height: 70%; } .vsig i:nth-child(3) { height: 100%; }
.vsig[data-bars="1"] i:nth-child(1), .vsig[data-bars="2"] i:nth-child(-n+2), .vsig[data-bars="3"] i { background: var(--vcolor, var(--green)); }
#voice[data-state="ok"] { --vcolor: var(--green); } #voice[data-state="meh"] { --vcolor: #f0b232; }
#voice[data-state="warn"] { --vcolor: var(--red); } #voice[data-state="wait"] { --vcolor: var(--text-3); }
#voice[data-state="wait"] .vsig i { animation: vwait 1s ease-in-out infinite alternate; }
@keyframes vwait { from { background: var(--line-2); } to { background: var(--text-3); } }
.vtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vtext b { font-size: 13px; font-weight: 600; color: var(--vcolor, var(--green)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vtext span { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#voice .icon.leave { color: var(--text-2); }
#voice .icon.leave .ic { transform: rotate(135deg); }
#voice .icon.leave:hover { color: #fff; background: var(--red); }
.vacts { display: flex; gap: 6px; }
.vact { flex: 1; height: 32px; min-width: 0; border-radius: var(--r-sm); background: var(--raised); color: var(--text-2); display: grid; place-items: center; position: relative; transition: background .12s, color .12s; }
.vact:hover { background: var(--hover); color: var(--text); }
.vact.on { background: var(--grad-btn, var(--grad)); color: #fff; }
.vact .ic { width: 18px; height: 18px; }
.vact .badge { position: absolute; top: -5px; right: -4px; }
.vact:disabled { opacity: .45; }
[data-theme="nostalgia"] #voice { background: linear-gradient(#fff, #e3edf9); border-top: 1px solid var(--line-2); }
[data-theme="nostalgia"] .vact { background: linear-gradient(#fff, #ecebe5); border: 1px solid #003c74; border-radius: 3px; color: #1e395b; }
[data-theme="nostalgia"] .vact:hover { background: linear-gradient(#fff, #fde9b7); border-color: #e5a63b; }
[data-theme="nostalgia"] .vact.on { background: #c7d8f2; border-color: #316ac5; color: #1e395b; }
[data-theme="nostalgia"] .vtext b { color: #2f7d0e; }
.me-bar .avatar.sm { width: 26px; height: 26px; font-size: 12px; }
.me-bar .me-text { flex: 1; min-width: 0; }
.me-bar .mname { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-bar .mstatus { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-bar .mstatus:empty { display: none; }
.member .mstatus { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--text-3); padding: 0; transition: background .12s, color .12s; }
button.icon:hover { background: var(--hover); color: var(--text); }
button.icon .ic { width: 17px; height: 17px; }

/* ---------- principal ---------- */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
#status { background: var(--grad); color: var(--accent-ink); text-align: center; font-size: 12px; font-weight: 600; padding: 4px; }
#room-head { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px; border-bottom: 1px solid var(--line); color: var(--text-3); }
#room-head .ic { width: 16px; height: 16px; }
#room-head .title { color: var(--text); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#room-head .title + .ic { width: 13px; height: 13px; }
#room-head .count { font-size: 13px; margin-left: 8px; flex: 1; }
#room-head .muted { font-size: 13px; }

#stage { flex: 1; min-height: 0; padding: 20px 20px 92px; display: flex; flex-direction: column; gap: 12px; }
.stage-main { flex: 1; min-height: 0; display: grid; gap: 12px; justify-content: center; align-content: center; }
.stage-main .tile { width: 100%; }
.stage-strip { display: none; flex: none; height: 132px; gap: 8px; justify-content: center; overflow-x: auto; overflow-y: hidden; padding: 2px; }
#stage.focus .stage-strip { display: flex; }
.stage-strip .tile { height: 100%; width: auto; aspect-ratio: 16 / 9; flex: none; cursor: pointer; }
.stage-strip .avatar.big { width: 40px; height: 40px; font-size: 16px; }
.stage-strip .label { font-size: 11px; }
.stage-strip .who { gap: 6px; }
.stage-strip .tile .name { font-size: 11px; padding: 2px 6px; left: 6px; bottom: 6px; }
.stage-main .tile { cursor: pointer; }
#stage.focus .stage-main .tile { cursor: zoom-out; }
#stage.lobby { display: grid; grid-template-columns: 1fr; place-items: center; padding-bottom: 20px; }
.hello { text-align: center; max-width: 380px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.hello img { width: 72px; height: 72px; margin-bottom: 6px; }
.hello h2 { margin: 0; font-size: 18px; font-weight: 600; }
.hello p { margin: 0 0 10px; font-size: 13px; color: var(--text-2); }
.hello-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.hello .btn.primary { min-width: 160px; }

.tile {
  position: relative; aspect-ratio: 16 / 9; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: border-color .12s;
}
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; }
.tile.has-video video { display: block; }
.tile.screen video { object-fit: contain; }
.tile.mirror video { transform: scaleX(-1); }
.tile .who { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tile .label, .tile .name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.tile .label .ic, .tile .name .ic { width: 14px; height: 14px; color: var(--text-3); }
.tile .ic.warn { color: var(--red); }
.tile .name { position: absolute; left: 10px; bottom: 10px; display: none; padding: 4px 9px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; color: #fff; background: rgba(12, 13, 17, .6); backdrop-filter: blur(8px); }
.tile .name .ic { color: #fff; opacity: .8; }
.tile.has-video .who, .tile.preview-hidden .who { display: none; }
/* pill de nome: aparece no hover; quando a pessoa está muda ou ensurdecida fica só o ícone */
.tile:hover .name, .tile .name.has-ic { display: flex; }
.tile .name .nm { display: none; align-items: center; gap: 6px; }
.tile:hover .name .nm { display: inline-flex; }
.tile.speaking .label { color: var(--text); }
.tile.speaking.has-video { border-color: var(--accent); }
.tile .state { position: absolute; top: 10px; right: 10px; font-size: 11px; color: var(--text-3); background: var(--panel); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }
.tile .q { position: absolute; left: 10px; top: 10px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(0,0,0,.35); }
.tile .q.good { background: var(--green); } .tile .q.meh { background: #f0b232; } .tile .q.bad { background: var(--red); }
.tile .fs { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: none; place-items: center; background: rgba(12, 13, 17, .6); color: #fff; border-radius: var(--r-sm); backdrop-filter: blur(8px); }
.tile .fs .ic { width: 16px; height: 16px; }
.tile.has-video:hover .fs, .tile.preview-hidden .fs { display: grid; }
.tile .fs:hover { background: rgba(12, 13, 17, .85); }
.stage-strip .tile .fs { display: none !important; }
.tile .stop-watch { position: absolute; top: 8px; right: 46px; min-height: 32px; padding: 6px 9px; display: flex; align-items: center; gap: 6px; background: rgba(12, 13, 17, .85); color: #fff; font-size: 12px; }
.tile .stop-watch .ic { width: 14px; height: 14px; }
.tile .stop-watch:hover { background: #0c0d11; }
.tile .watch-prompt { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; max-width: 100%; text-align: center; }
.tile .watch-prompt > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.tile .watch-prompt small { max-width: 40ch; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.tile.preview-hidden .watch-prompt { padding: 40px 16px; }
.tile.preview-hidden .watch-prompt > span { white-space: normal; }
.stage-main .tile.preview-hidden { min-height: 240px; }
.tile.stopped .who { display: none; }
.tile:focus-within .fs, .tile.has-video:focus-within .fs { display: grid; }
.stage-strip .stop-watch { right: 8px; }
.stage-strip .watch-prompt { gap: 6px; }
.stage-strip .watch-prompt small { display: none; }
.stage-strip .tile.preview-hidden .watch-prompt { padding: 8px; }
.tile .screen-sound { position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); background: #0c0d11; color: #fff; }
.tile .screen-sound:hover { background: #30333d; }
.tile .screen-sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile .screen-sound .ic { width: 18px; height: 18px; }
.tile.screen .name { max-width: calc(100% - 62px); }
.tile.screen .name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#controls {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.ctl { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--text); transition: background .12s, color .12s; }
.ctl .ic { width: 20px; height: 20px; }
.ctl:hover { background: var(--hover); }
.ctl.off { background: rgba(240, 86, 90, .14); color: var(--red); }
.ctl.on { background: var(--grad-btn, var(--grad)); color: #fff; }
.ctl.leave { background: var(--red); color: #fff; width: 60px; border-radius: 21px; margin-left: 6px; }
.ctl.leave:hover { background: #ff6b6f; }
.ctl.leave .ic { transform: rotate(135deg); }
#controls::before { content: ""; order: 6; width: 1px; height: 24px; background: var(--line-2); margin: 0 4px; }
#btn-mic { order: 0; } #btn-deaf { order: 1; } #btn-cam { order: 2; } #btn-screen { order: 3; } #btn-nudge { order: 4; } #btn-wink { order: 5; } #btn-leave { order: 7; }
.ctl .lbl { display: none; }
.ctl:disabled { opacity: .45; }

/* ---------- membros, amigos e mensagens ---------- */
#members { width: 340px; flex: none; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
#members .mh { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; }
#members .mh span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#members-list { flex: 1; padding: 6px 10px; }
#members .section { display: flex; justify-content: space-between; padding: 12px 6px 4px; }
.urow { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--r-sm); cursor: pointer; }
.urow:hover { background: var(--hover); }
.urow .avatar { width: 28px; height: 28px; font-size: 12px; }
.urow.off .avatar { opacity: .45; }
.urow .ut { flex: 1; min-width: 0; }
.urow .un { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.urow.off .un { color: var(--text-3); }
.urow .us { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urow .tag { font-size: 10px; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 6px; flex: none; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.urow .acts { display: flex; gap: 2px; }
.urow .acts .icon { width: 26px; height: 26px; }
.urow .acts .icon.ok { color: var(--green); }
.urow .acts .icon.no { color: var(--red); }
#btn-members { position: relative; }
#btn-members .badge { position: absolute; top: -4px; right: -6px; }
#umenu { position: fixed; z-index: 41; min-width: 180px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 2px; }
#umenu .uh { padding: 6px 10px 8px; font-size: 12px; color: var(--text-3); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
#umenu .uh b { display: block; color: var(--text); font-size: 13px; }
#umenu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; text-align: left; width: 100%; }
#umenu button:hover { background: var(--hover); }
#umenu button.danger { color: var(--red); }
#umenu button .ic { width: 16px; height: 16px; }
#dm, #chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#chat .mh { border-top: 0; }
#members.chat-mode > .mh { display: none; }
#dm-msgs, #chat-msgs { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.msg .txt a { color: var(--accent); text-decoration: underline; }
.msg { font-size: 13px; line-height: 1.4; display: flex; gap: 10px; position: relative; padding: 3px 4px; border-radius: var(--r-sm); }
.msg:hover { background: var(--hover); }
.msg .av { flex: none; width: 32px; cursor: pointer; }
.msg .meta b { cursor: pointer; }
.msg .meta b:hover { text-decoration: underline; }
#me-avatar { cursor: pointer; padding: 0; }
.msg .av .avatar { width: 32px; height: 32px; font-size: 13px; }
.msg .body { flex: 1; min-width: 0; }
.msg.cont { margin-top: -6px; }
.msg.cont .av { visibility: hidden; height: 0; }
.msg.cont .meta { display: none; }
.msg .meta { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--text-3); }
.msg .meta b { color: var(--text-2); font-weight: 600; font-size: 13px; }
.msg .txt { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.msg .txt a { color: var(--accent); text-decoration: underline; }
.msg .reply { font-size: 12px; color: var(--text-3); border-left: 2px solid var(--line-2); padding-left: 6px; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg .reply b { color: var(--text-2); }
.msg .thumb { display: block; max-width: 100%; max-height: 220px; border-radius: var(--r-sm); margin-top: 4px; border: 1px solid var(--line); }
.msg .reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg .re { font-size: 12px; padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--raised); color: var(--text-2); }
.msg .re.on { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 18%, var(--raised)); }
.msg .acts { position: absolute; z-index: 1; right: 6px; top: -12px; display: flex; visibility: hidden; gap: 2px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 2px; }
.msg:hover .acts, .msg:focus-within .acts { visibility: visible; }
.msg .acts button { width: 26px; height: 26px; display: grid; place-items: center; font-size: 14px; color: var(--text-2); }
.msg .acts button:hover { background: var(--hover); color: var(--text); }
.msg .acts button .ic { width: 15px; height: 15px; }
.message-edited { display: inline-block; color: var(--text-2); font-size: 11px; margin: 2px 0; }
.message-action { margin: 6px 0; padding: 10px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.message-edit textarea { width: 100%; min-height: 84px; max-height: 300px; resize: vertical; padding: 8px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--rail); color: var(--text); font: inherit; line-height: 1.5; }
.message-edit-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.message-edit-footer small { flex: 1; min-width: 140px; color: var(--text-2); font-size: 11px; }
.message-edit-count { color: var(--text-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.message-delete p { margin: 0 0 8px; }
.message-action .message-error { margin: 8px 0; color: var(--text); font-size: 12px; }
.msg .acts [data-message-delete]:hover { color: var(--red); }
@media (pointer: coarse) {
  .msg[data-message] { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; row-gap: 4px; }
  .msg[data-message] > .av { grid-column: 1; grid-row: 1; }
  .msg[data-message] > .body { grid-column: 2; }
  .msg .acts { grid-column: 2; position: static; visibility: visible; flex-wrap: wrap; max-width: 100%; padding: 0; border: 0; background: none; }
  .msg .acts > [data-react] { display: none; }
  .msg .acts button, .message-action .btn { min-width: 44px; min-height: 44px; }
}
@media (max-width: 600px) {
  .message-edit-footer small { flex-basis: 100%; }
  .message-edit-count { margin-right: auto; }
}
.msg.day { display: block; text-align: center; font-size: 11px; color: var(--text-3); padding: 6px 0 2px; }
.msg.day:hover { background: none; }
.filecard { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 10px; background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--text); text-decoration: none; max-width: 100%; }
.filecard .ic { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.filecard > span { display: flex; flex-direction: column; min-width: 0; }
.filecard > span > b, .text-file-name b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filecard small { font-size: 11px; color: var(--text-3); }
.filecard:hover { border-color: var(--accent); }
.filecard.text-file { display: block; width: min(100%, 960px); padding: 0; overflow: hidden; background: var(--rail); }
.text-file-name { flex: 1; min-width: 0; }
.text-file-name b { display: block; }
.text-file small { color: var(--text-2); }
.msg .text-file-preview.txt { margin: 0; padding: 16px 18px; max-height: 360px; overflow: auto; overscroll-behavior: contain; white-space: normal; overflow-wrap: anywhere; color: var(--text); font-size: 14px; line-height: 1.6; }
.text-file.is-expanded .text-file-preview { max-height: min(70dvh, 720px); }
.msg .text-file-preview p { margin: 0 0 10px; }
.msg .text-file-preview h3 { margin: 0 0 12px; font-size: 1.6em; }
.msg .text-file-preview h4 { margin: 18px 0 8px; font-size: 1.25em; }
.msg .text-file-preview h5 { margin: 16px 0 6px; font-size: 1.1em; }
.msg .text-file-preview ul { margin: 8px 0 12px; padding-left: 20px; }
.text-file-preview hr { margin: 16px 0; border: 0; border-top: 1px solid var(--line); }
.msg .text-file-preview .text-file-source { margin: 0; padding: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 "JetBrains Mono", ui-monospace, monospace; }
.text-file-preview .text-file-partial { color: var(--text-2); font-size: 12px; }
.text-file-preview > :last-child { margin-bottom: 0; }
.text-file-preview:focus-visible { outline-offset: -2px; }
.text-file-status { margin: 0; min-height: 72px; padding: 4px 12px 12px; color: var(--text-2); font-size: 12px; }
.text-file-footer { display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--line); background: var(--panel); }
.text-file-tools { display: flex; align-items: center; flex: none; gap: 2px; }
.text-file-control, .text-file-retry { display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: 32px; padding: 6px; border-radius: var(--r-sm); color: var(--text); font-size: 12px; text-decoration: none; }
.text-file-control { width: 32px; }
.text-file-control:hover, .text-file-retry:hover { background: var(--hover); }
.text-file-control:active, .text-file-retry:active { background: var(--raised); }
.text-file-control:focus-visible, .text-file-retry:focus-visible { outline-offset: -2px; }
@media (max-width: 600px) {
  .text-file-footer { gap: 4px; flex-wrap: wrap; }
  .text-file-tools { margin-left: auto; }
  .text-file-name { min-width: 90px; }
  .msg .text-file-preview.txt { padding: 12px; font-size: 13px; }
}
@media (pointer: coarse) {
  .text-file-control, .text-file-retry { min-height: 44px; }
  .text-file-control { width: 44px; }
}
#members.drop { outline: 2px dashed var(--accent); outline-offset: -4px; }
#chat-reply { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; color: var(--text-3); border-top: 1px solid var(--line); background: var(--raised); }
#chat-reply b { color: var(--text-2); } #chat-reply span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chat-reply .icon { width: 22px; height: 22px; }
#emoji { position: fixed; z-index: 16; width: 296px; max-height: 240px; overflow-y: auto; padding: 8px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0,0,0,.35); display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
#emoji:not(.expressions) button { font-size: 20px; height: 34px; border-radius: var(--r-sm); }
#emoji:not(.expressions) button:hover { background: var(--hover); }
#dm-form, #chat-form { flex: none; display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
#dm-form input, #chat-form input, #chat-form textarea, #dm-form textarea { flex: 1; min-width: 0; background: var(--rail); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; font-size: 13px; outline: none; }
#dm-form input:focus, #chat-form input:focus, #chat-form textarea:focus, #dm-form textarea:focus { border-color: var(--accent); }
.text-file-hint { flex: none; padding: 8px 12px; color: var(--text-2); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#dm .empty, #chat .empty { text-align: center; padding: 20px 10px; }
#btn-chat { position: relative; }
#btn-chat .badge { position: absolute; top: -4px; right: -6px; }
@media (max-width: 1100px) {
  #members { position: absolute !important; right: 0; top: 0; bottom: 0; z-index: 6; width: min(340px, 100%); box-shadow: -10px 0 30px rgba(0,0,0,.35); }
}
[data-theme="nostalgia"] #members { border-left: 1px solid var(--line-2); }
[data-theme="nostalgia"] #members .mh { background: linear-gradient(#fff, #dbe8f8); border-bottom: 1px solid var(--line-2); color: #1e395b; }
[data-theme="nostalgia"] .urow .avatar { display: none; }
[data-theme="nostalgia"] .urow::before { content: ""; width: 18px; height: 18px; flex: none; background: url(/buddy.svg) center / contain no-repeat; }
[data-theme="nostalgia"] .urow.off::before { filter: grayscale(1) opacity(.5); }
[data-theme="nostalgia"] .urow .un { color: #000; }
[data-theme="nostalgia"] .urow.off .un { color: #7c8aa0; }
[data-theme="nostalgia"] #umenu { background: #fff; border: 1px solid #7f9db9; border-radius: 0; box-shadow: 3px 3px 0 rgba(0,0,0,.2); }
[data-theme="nostalgia"] #umenu button:hover { background: #316ac5; color: #fff; }
[data-theme="nostalgia"] #dm-msgs, [data-theme="nostalgia"] #chat-msgs { background: #fff; margin: 8px; border: 1px solid var(--line-2); }
[data-theme="nostalgia"] .msg .meta b { color: #1e395b; }
[data-theme="nostalgia"] .msg.me .meta b { color: #2f7d0e; }
[data-theme="nostalgia"] #dm-form input, [data-theme="nostalgia"] #chat-form input, [data-theme="nostalgia"] #chat-form textarea, [data-theme="nostalgia"] #dm-form textarea { border-radius: 0; }

.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.avatar.xl { width: 72px; height: 72px; font-size: 28px; }
#ucard, .pprev { position: fixed; z-index: 15; width: 300px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0,0,0,.4); overflow: hidden; }
#ucard .banner, .pprev .banner { height: 70px; }
#ucard .cbody, .pprev .cbody { padding: 0 16px 14px; }
#ucard .cav, .pprev .cav { position: relative; width: 80px; height: 80px; margin-top: -40px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; }
#ucard .cav .dot, .pprev .cav .dot { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-3); border: 3px solid var(--panel); }
#ucard .cav .dot.on, .pprev .cav .dot.on { background: var(--green); }
#ucard .cname, .pprev .cname { font-size: 18px; font-weight: 700; margin-top: 8px; }
#ucard .cstatus, .pprev .cstatus { font-size: 12px; color: var(--text-3); }
#ucard .cbio, .pprev .cbio { font-size: 13px; color: var(--text); margin-top: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
#ucard .cwhere, .pprev .cwhere { margin-top: 10px; padding: 8px 10px; background: var(--raised); border-radius: var(--r-sm); font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#ucard .cwhere .ic, .pprev .cwhere .ic { width: 14px; height: 14px; }
#ucard .cacts, .pprev .cacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.btn.small { height: 30px; padding: 0 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
a.btn { text-decoration: none; color: var(--text); }
.btn.small .ic { width: 14px; height: 14px; }
.btn.danger { color: var(--red); }
.mention { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); border-radius: 3px; padding: 0 3px; font-weight: 600; }
.mention.me { background: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); }
.msg.pinged { background: color-mix(in srgb, var(--accent) 10%, transparent); border-left: 2px solid var(--accent); }
.imgload { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 10px; font-size: 12px; color: var(--text-2); background: var(--raised); border: 1px dashed var(--line-2); border-radius: var(--r-sm); }
.imgload .ic { width: 14px; height: 14px; }
/* chat lateral (sala de voz): ícone à esquerda, título e texto ao lado; no canal de texto o ícone fica em cima, grande */
.chat-intro { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 12px 4px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.chat-intro .hash { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; background: var(--raised); display: grid; place-items: center; font-size: 20px; font-weight: 700; color: var(--text-2); }
.chat-intro .hash .ic { width: 18px; height: 18px; }
.chat-intro b { font-size: 15px; align-self: end; } .chat-intro span { font-size: 12px; color: var(--text-3); align-self: start; }
#chat.main .chat-intro { grid-template-columns: 64px 1fr; column-gap: 14px; }
#chat.main .chat-intro .hash .ic { width: 28px; height: 28px; }
#emoji { display: flex; flex-direction: column; gap: 6px; }
#emoji .esearch { background: var(--rail); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 6px 8px; font-size: 13px; outline: none; }
#emoji .egrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
#mention { position: fixed; left: 10px; bottom: 58px; width: 360px; max-height: 340px; overflow: auto; z-index: 7; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
#mention button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; font-size: 13px; text-align: left; }
#mention button.sel, #mention button:hover { background: var(--hover); }
#members { position: relative; }
.card textarea { background: var(--rail); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 9px 12px; font: inherit; font-size: 14px; resize: vertical; outline: none; }
.card textarea:focus { border-color: var(--accent); }
.card label.colorf { flex-direction: row; align-items: center; justify-content: space-between; }
.card input[type="color"] { width: 44px; height: 30px; padding: 2px; cursor: pointer; }
.card input[type="file"] { padding: 6px; font-size: 12px; }

/* ---------- configurações ---------- */
#settings { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; background: rgba(8, 8, 12, .72); padding: 16px; }
.sbox { width: min(var(--modal-window-width), 100%); height: min(var(--modal-window-height), calc(100dvh - 64px)); display: flex; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }
.snav { width: 250px; min-height: 0; flex: none; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 18px 10px; gap: 8px; }
.sme { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.sme .avatar { width: 40px; height: 40px; font-size: 16px; flex: none; }
.sme > div { flex: 1; min-width: 0; }
.sme b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sme span { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stabs { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.stab { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--text-2); font-weight: 500; font-size: 14px; text-align: left; position: relative; }
.stab .ic { width: 17px; height: 17px; }
.stab:hover { background: var(--hover); color: var(--text); }
.stab.on { background: var(--raised); color: var(--text); }
.stab.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--grad); }
.sme, .sfoot { flex-shrink: 0; }
.sfoot { margin-top: auto; padding: 0 12px; }
.sbody { flex: 1; min-width: 0; overflow-y: auto; position: relative; }
.sclose { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; z-index: 1; background: var(--bg); }
/* O fechamento fica acessível mesmo no fim de uma lista longa de configurações. */
.sbody > .sclose { position: sticky; top: 14px; right: auto; float: right; width: 44px; height: 44px; margin: 14px 16px -58px 0; }
.spane { width: 100%; max-width: 960px; margin-inline: auto; padding: 56px 48px 64px; }
.spane h2 { padding-inline-end: 44px; }
.spane h2 { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.spane .lead { margin: 0 0 24px; color: var(--text-2); font-size: 13px; }
.spane h3 { margin: 28px 0 8px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.opt { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.opt .ot { flex: 1; min-width: 0; }
.opt .ot b { display: block; font-size: 14px; font-weight: 600; }
.opt .ot span { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.opt select, .opt input[type="text"], .opt textarea { background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; font-size: 13px; outline: none; min-width: 220px; }
.opt select, .opt input[type="text"] { width: 260px; max-width: 55%; flex: none; }
.opt textarea { width: 100%; min-height: 72px; resize: vertical; }
.opt.col { flex-direction: column; align-items: stretch; gap: 8px; }
.opt select:focus, .opt input:focus, .opt textarea:focus { border-color: var(--accent); }
.opt input[type="color"] { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); cursor: pointer; }
.switch { position: relative; width: 42px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--line-2); border-radius: 999px; transition: background .15s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + span { background: var(--grad); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tcard { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 2px solid var(--line); border-radius: var(--r); background: var(--panel); text-align: left; }
.tcard:hover { border-color: var(--line-2); }
.tcard.on { border-color: var(--accent); }
.tcard .sw { height: 54px; border-radius: 6px; position: relative; overflow: hidden; }
.tcard .sw i { position: absolute; left: 10px; bottom: 10px; width: 28px; height: 8px; border-radius: 4px; }
.tcard .sw em { position: absolute; left: 44px; bottom: 10px; width: 48px; height: 8px; border-radius: 4px; opacity: .5; }
.tcard b { font-size: 13px; font-weight: 600; }
.tcard small { font-size: 11px; color: var(--text-3); }
.pav { display: flex; align-items: center; gap: 16px; }
.pav .avatar { width: 72px; height: 72px; font-size: 28px; cursor: pointer; }
.pav .btn { height: 34px; }
.meter { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; flex: 1; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--accent-1) 60%, var(--accent-2)); transition: width .08s; }
.saved { position: sticky; bottom: 0; float: right; margin-top: 12px; font-size: 12px; color: var(--text-3); opacity: 0; transition: opacity .2s; }
.saved.show { opacity: 1; }
@media (max-width: 760px) {
  #settings { padding: 0; }
  .sbox { flex-direction: column; height: 100%; border-radius: 0; border: 0; }
  .snav { width: 100%; flex-direction: row; overflow-x: auto; padding: 10px; gap: 6px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sme, .sfoot { display: none; } .stabs { flex-direction: row; align-items: center; overflow: visible; flex: none; }
  .snav .stab { flex: none; min-height: 44px; white-space: nowrap; }
  .snav .commerce-settings-links { display: flex; margin: 0 0 0 8px; padding: 0 0 0 8px; border-top: 0; border-left: 1px solid var(--line); }
  .spane { padding: 64px 20px 60px; }
  .spane h2 { padding-inline-end: 0; }
  .sbody > .sclose { top: 10px; margin: 10px 12px -54px 0; }
  .opt { flex-wrap: wrap; } .opt select { min-width: 0; width: 100%; }
}

.dlopts { display: flex; flex-direction: column; gap: 8px; }
.dlopt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--raised); color: var(--text); text-decoration: none; text-align: left; width: 100%; font: inherit; }
.dlopt:hover { border-color: var(--accent); }
.dlopt .ic { width: 18px; height: 18px; color: var(--accent); flex: none; }
.dlopt span { display: flex; flex-direction: column; min-width: 0; }
.dlopt b { font-size: 13px; } .dlopt small { font-size: 11px; color: var(--text-3); }
#modal .card.dl { max-width: var(--modal-form-width); }
#dlmenu { position: fixed; z-index: 16; width: 280px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* ---------- modal / aviso ---------- */
#modal { position: fixed; inset: 0; background: rgba(10, 11, 14, .72); display: grid; place-items: center; z-index: 40; padding: 16px; }
#modal .card { max-width: var(--modal-form-width); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 28px; gap: 14px; }
#modal h2 { margin: 0; font-size: 17px; font-weight: 600; }
#modal p { margin: -4px 0 0; font-size: 13px; }
#modal .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
#toasts { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 36; pointer-events: none; }
.toast { background: var(--raised); border: 1px solid var(--line-2); color: var(--text); padding: 9px 14px; border-radius: var(--r-sm); font-size: 13px; animation: pop .15s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }

/* ---------- celular ----------
   A tela é estreita demais para três colunas: servidores + canais viram uma gaveta
   por cima, a área principal ocupa tudo e a lista de membros abre como painel inteiro. */
#room-head .navbtn { display: none; }
@media (max-width: 760px) {
  #app { height: 100dvh; }
  #body { position: relative; overflow: hidden; }
  #body::after {
    content: ""; position: fixed; inset: 0; z-index: 29; background: rgba(6, 7, 10, .55);
    opacity: 0; pointer-events: none; transition: opacity .18s;
  }
  body.nav-open #body::after { opacity: 1; pointer-events: auto; }
  #body > #servers, #body > #sidebar {
    position: fixed !important; top: 0; bottom: 0; z-index: 30; transition: transform .18s ease;
  }
  #body > #servers { left: 0; width: 60px !important; transform: translateX(-100%); }
  #body > #sidebar { left: 60px; width: min(74vw, 290px) !important; max-width: none; border-right: 1px solid var(--line-2); transform: translateX(-380px); }
  body.nav-open #body > #servers, body.nav-open #body > #sidebar { transform: none; }
  #sb-resize { display: none; }
  #main { width: 100%; }
  #room-head .navbtn { display: grid; margin-left: -6px; }
  #app #mailbar { font-size: 12px; padding: 6px 10px; gap: 8px; line-height: 1.25; }
  #app #mailbar > .ic { width: 14px; height: 14px; }
  #app #mailbar .btn { height: 26px; padding: 0 8px; font-size: 12px; }
  #app #mailbar .link { font-size: 12px; }
  /* cartões de "sozinho na sala" empilham e encolhem */
  .stage-cards { flex-wrap: wrap; gap: 8px; }
  .scard { width: 100%; padding: 12px 14px; }
  .scard span { font-size: 12px; }
  #room-head { padding: 0 10px; gap: 6px; }
  #room-head .count, #room-head .topic { display: none; }
  #room-head .title { font-size: 15px; }
  #members { position: absolute !important; inset: 0; width: 100% !important; z-index: 20; box-shadow: none; }
  /* barra de controles: menos botões cabem, então encolhem e sobem do rodapé seguro */
  #controls { bottom: calc(12px + env(safe-area-inset-bottom)); gap: 2px; padding: 5px; }
  .ctl { width: 40px; height: 40px; }
  .ctl .ic { width: 18px; height: 18px; }
  .ctl.leave { width: 52px; }
  #stage { padding: 10px 10px calc(84px + env(safe-area-inset-bottom)); gap: 8px; }
  .stage-strip { height: 84px; }
  .stage-main .tile .avatar.big { width: 64px; height: 64px; font-size: 24px; }
  .me-bar { padding-bottom: env(safe-area-inset-bottom); height: calc(52px + env(safe-area-inset-bottom)); }
  #chat.main #chat-msgs { padding: 12px 12px; }
  #chat.main #chat-form, #dm.main #dm-form { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
  #chat.main .chat-intro { padding: 16px 4px 12px; grid-template-columns: 44px 1fr; column-gap: 10px; }
  #chat.main .chat-intro .hash { width: 44px; height: 44px; font-size: 22px; }
  #chat.main .chat-intro .hash .ic { width: 20px; height: 20px; }
  #chat.main .chat-intro b { font-size: 17px; }
  #chat.main .msg .av { width: 34px; }
  #chat.main .msg .av .avatar { width: 34px; height: 34px; font-size: 14px; }
  .msg .acts { top: -10px; right: 4px; }
  #ucard, .pprev { width: min(300px, calc(100vw - 24px)); }
  #pop { width: min(440px, calc(100vw - 16px)); }
  .dmrow, .frow2 { padding: 8px 10px; }
  #discover .dgrid { grid-template-columns: 1fr; }
}

/* ---------- chamar atenção, winks ---------- */
#app.shake { animation: shake .6s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  10%, 90% { transform: translate(-4px, 2px); } 20%, 80% { transform: translate(6px, -3px); }
  30%, 50%, 70% { transform: translate(-9px, 4px); } 40%, 60% { transform: translate(9px, -4px); }
}
#winks {
  position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%); z-index: 5;
  display: grid; grid-template-columns: repeat(4, 76px); gap: 4px; padding: 8px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.wink-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; font-size: 11px; color: var(--text-2); }
.wink-btn b { font-size: 26px; line-height: 1; font-weight: 400; }
.wink-btn:hover { background: var(--hover); color: var(--text); }
.wink-hint { grid-column: 1 / -1; font-size: 11px; color: var(--text-3); text-align: center; padding: 4px 0 0; }
#wink-layer { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.wink span { position: absolute; font-size: 120px; line-height: 1; will-change: transform; }
.wk-zoom span { left: 50%; top: 50%; animation: wk-zoom 1.8s ease-out forwards; }
@keyframes wk-zoom { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 30% { transform: translate(-50%,-50%) scale(1.6); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; } }
.wk-walk span { bottom: 6vh; left: 0; animation: wk-walk 3s linear forwards; }
@keyframes wk-walk { from { transform: translateX(-30vw) rotate(-8deg); } 25% { transform: translateX(10vw) rotate(8deg); } 50% { transform: translateX(45vw) rotate(-8deg); } 75% { transform: translateX(80vw) rotate(8deg); } to { transform: translateX(115vw) rotate(-8deg); } }
.wk-drop span { left: 50%; top: 0; animation: wk-drop 1.1s ease-in forwards; }
@keyframes wk-drop { from { transform: translate(-50%, -150px) rotate(-20deg); } to { transform: translate(-50%, 45vh) rotate(20deg); } }
.wk-drop.boom span { font-size: 170px; animation: wk-boom 1s ease-out forwards; }
@keyframes wk-boom { 0% { transform: translate(-50%, 42vh) scale(.4); opacity: 1; } 100% { transform: translate(-50%, 30vh) scale(3); opacity: 0; } }
.wk-drop.boom::before { content: ""; position: absolute; inset: 0; background: #fff; animation: wk-flash .5s ease-out forwards; }
@keyframes wk-flash { from { opacity: .9; } to { opacity: 0; } }
.wk-float span { bottom: -150px; left: calc(var(--x) * 88vw); font-size: 96px; animation: wk-float 3.4s ease-in var(--dl) both; }
@keyframes wk-float { 0% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-60vh) rotate(6deg); } 100% { transform: translateY(-130vh) rotate(-6deg); } }
.wk-bounce span { left: 50%; top: 50%; animation: wk-bounce 2s ease-in-out forwards; }
@keyframes wk-bounce { 0% { transform: translate(-50%,-50%) scale(0); } 20% { transform: translate(-50%,-50%) scale(1.5) rotate(-12deg); } 40% { transform: translate(-50%,-50%) scale(1.2) rotate(12deg); } 60% { transform: translate(-50%,-50%) scale(1.5) rotate(-12deg); } 80% { transform: translate(-50%,-50%) scale(1.2) rotate(12deg); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1.6); opacity: 0; } }
.wk-rain span { top: -150px; left: calc(var(--x) * 90vw); font-size: 72px; animation: wk-rain 3s linear var(--dl) both; }
@keyframes wk-rain { from { transform: translateY(0) rotate(0); } to { transform: translateY(130vh) rotate(40deg); } }
.wk-clink span { left: 50%; top: 50%; animation: wk-clink 2s ease-in-out forwards; }
@keyframes wk-clink { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 0; } 25% { transform: translate(-50%,-50%) scale(1.6) rotate(-15deg); opacity: 1; } 45% { transform: translate(-50%,-50%) scale(1.5) rotate(15deg); } 65% { transform: translate(-50%,-50%) scale(1.6) rotate(-15deg); } 100% { transform: translate(-50%,-50%) scale(1.8); opacity: 0; } }
.wk-cloud span { left: 8vw; bottom: 8vh; animation: wk-cloud 1.8s ease-out forwards; }
@keyframes wk-cloud { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(4) translate(20px, -40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wink span { animation-duration: .01s !important; } #app.shake { animation: none; } }

/* ---------- tema Nostalgia 2005 (janela estilo XP) ---------- */
:root[data-theme="nostalgia"] {
  --bg: #cddff5; --panel: #ffffff; --raised: #f4f8fe; --hover: #e2ecfa; --rail: var(--bg);
  --line: #a9c3e4; --line-2: #7f9db9;
  --text: #1b1b1b; --text-2: #4a5a70; --text-3: #7c8aa0;
  --accent: #6cbf3c; --grad: linear-gradient(90deg, #6cbf3c, #6cbf3c); --accent-ink: #ffffff; --green: #4fae1f; --red: #cf2f27;
  --r-sm: 3px; --r: 4px; --r-lg: 6px;
  --font: Tahoma, Verdana, "Segoe UI", sans-serif; --font-ui: var(--font);
}
[data-theme="nostalgia"] body { font-size: 12px; }
[data-theme="nostalgia"] #app { border: 3px solid #0831d9; border-top: 0; }
[data-theme="nostalgia"] #xp-title {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; color: #fff; font-weight: 700; font-size: 13px;
  background: linear-gradient(#3d8bff, #0a5bef 20%, #0a4fd8 60%, #0831d9); text-shadow: 1px 1px 0 #0a246a;
}
[data-theme="nostalgia"] #xp-title img { width: 20px; height: 20px; }
[data-theme="nostalgia"] #xp-title .xp-btns { margin-left: auto; display: flex; gap: 2px; }
[data-theme="nostalgia"] #xp-title .xp-btns b {
  width: 21px; height: 21px; display: grid; place-items: center; border-radius: 3px; font-size: 12px; font-weight: 700; text-shadow: none;
  background: linear-gradient(#5ea0ff, #2f70e9); border: 1px solid #fff; box-shadow: inset 0 0 0 1px #1d5bd6;
}
[data-theme="nostalgia"] #xp-title .xp-btns b:last-child { background: linear-gradient(#ef8a6d, #d5472b); box-shadow: inset 0 0 0 1px #b73a1e; }
[data-theme="nostalgia"] .brand { display: none; }
[data-theme="nostalgia"] #sidebar { border-right: 1px solid var(--line-2); }
[data-theme="nostalgia"] .create {
  border: 1px solid #003c74; background: linear-gradient(#fff, #ecebe5); color: #000; font-weight: 400; height: 24px; margin: 10px 10px 6px;
}
[data-theme="nostalgia"] .create:hover { background: linear-gradient(#fff, #fde9b7); border-color: #e5a63b; }
[data-theme="nostalgia"] .create .ic { color: #3f8a1f; }
[data-theme="nostalgia"] .section { color: #1e395b; font-weight: 700; }
[data-theme="nostalgia"] .room-row { height: 24px; font-weight: 700; color: #1e395b; }
[data-theme="nostalgia"] .room.active .room-row { background: #d9e6f7; }
[data-theme="nostalgia"] .room-row:hover { background: #e9f1fb; }
[data-theme="nostalgia"] .member { height: 24px; font-size: 12px; color: #000; }
[data-theme="nostalgia"] .member .avatar { display: none; }
[data-theme="nostalgia"] .member::before { content: ""; width: 16px; height: 16px; flex: none; background: url(/buddy.svg) center / contain no-repeat; }
[data-theme="nostalgia"] .member.lobby::before { filter: grayscale(1) opacity(.6); }
[data-theme="nostalgia"] .member.nonost::before { filter: grayscale(1) opacity(.45); }
[data-theme="nostalgia"] .member.nonost .mname { color: #6c7380; }
[data-theme="nostalgia"] .member.speaking .mname { color: #2f7d0e; font-weight: 700; }
[data-theme="nostalgia"] .me-bar { background: linear-gradient(#fff, #e3edf9); border-top: 1px solid var(--line-2); }
[data-theme="nostalgia"] .me-bar .avatar.sm { border-radius: 2px; }
[data-theme="nostalgia"] #room-head { height: 44px; background: linear-gradient(#fff, #dbe8f8); border-bottom: 1px solid var(--line-2); }
[data-theme="nostalgia"] #room-head .title { color: #1e395b; font-size: 13px; }
[data-theme="nostalgia"] #stage { padding-bottom: 20px; background: #cddff5; }
[data-theme="nostalgia"] .tile .fs { background: #ffffe1; color: #000; border: 1px solid #000; }
[data-theme="nostalgia"] .tile { background: linear-gradient(#fff, #eef4fb 60%, #e3edf9); border: 1px solid var(--line-2); box-shadow: 1px 1px 0 #fff inset, 2px 2px 4px rgba(30, 57, 91, .15); }
[data-theme="nostalgia"] .tile .avatar.big { border-radius: 3px; border: 1px solid var(--line-2); box-shadow: 2px 2px 3px rgba(0,0,0,.2); }

[data-theme="nostalgia"] .tile .label { color: #1e395b; font-weight: 700; }
[data-theme="nostalgia"] .tile .state { background: #ffffe1; border-color: #000; color: #000; border-radius: 0; }
[data-theme="nostalgia"] #controls {
  position: static; transform: none; border-radius: 0; width: 100%; justify-content: center; gap: 2px; padding: 4px 8px;
  background: linear-gradient(#fdfdfd, #e3edf9); border: 0; border-top: 1px solid var(--line-2); box-shadow: none;
}
[data-theme="nostalgia"] #controls::before { height: 36px; margin: 0 6px; }
[data-theme="nostalgia"] .ctl {
  width: auto; height: auto; min-width: 64px; padding: 4px 8px 3px; border-radius: 3px; border: 1px solid transparent;
  display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: #000;
}
[data-theme="nostalgia"] .ctl .ic { width: 22px; height: 22px; color: #2f6ec4; }
[data-theme="nostalgia"] .ctl .lbl { display: block; }
[data-theme="nostalgia"] .ctl:hover { background: #e3edf9; border-color: #316ac5; }
[data-theme="nostalgia"] .ctl.on { background: #c7d8f2; border-color: #316ac5; }
[data-theme="nostalgia"] .ctl.on .ic { color: #1e395b; }
[data-theme="nostalgia"] .ctl.off { background: transparent; color: var(--red); }
[data-theme="nostalgia"] .ctl.off .ic { color: var(--red); }
[data-theme="nostalgia"] .ctl.leave { background: transparent; color: var(--red); width: auto; margin-left: 0; }
[data-theme="nostalgia"] .ctl.leave .ic { color: var(--red); }
[data-theme="nostalgia"] .ctl.leave:hover { background: #fde4e2; border-color: #c75050; }
[data-theme="nostalgia"] #winks { bottom: 76px; grid-template-columns: repeat(4, 80px); background: #ffffe1; border: 1px solid #000; border-radius: 0; box-shadow: 3px 3px 0 rgba(0,0,0,.25); }
[data-theme="nostalgia"] .wink-btn { color: #000; }
[data-theme="nostalgia"] .wink-btn:hover { background: #c7d8f2; }
[data-theme="nostalgia"] .screen { background: linear-gradient(#7ba2e7, #cddff5 40%, #cddff5); }
[data-theme="nostalgia"] .card { background: linear-gradient(#fff, #e3eefb); border: 1px solid var(--line-2); box-shadow: 3px 3px 8px rgba(30, 57, 91, .25); }
[data-theme="nostalgia"] .card .logo { display: none; }
[data-theme="nostalgia"] .card .logo.retro { display: block; width: 72px; height: 72px; border-radius: 0; }
[data-theme="nostalgia"] .card h1 { color: #1e395b; }
[data-theme="nostalgia"] .card label { color: #1e395b; }
[data-theme="nostalgia"] .card input { background: #fff; border: 1px solid var(--line-2); border-radius: 0; padding: 5px 7px; font-size: 12px; }
[data-theme="nostalgia"] .card input:focus { border-color: #316ac5; box-shadow: none; }
[data-theme="nostalgia"] .btn { height: 26px; border: 1px solid #003c74; background: linear-gradient(#fff, #ecebe5); color: #000; font-weight: 400; }
[data-theme="nostalgia"] .btn:hover { background: linear-gradient(#fff, #fde9b7); border-color: #e5a63b; }
[data-theme="nostalgia"] .btn.primary { background: linear-gradient(#fff, #ecebe5); color: #000; border-color: #003c74; box-shadow: inset 0 0 0 1px #c3d3f0; }
[data-theme="nostalgia"] .btn.primary:hover { background: linear-gradient(#fff, #fde9b7); }
[data-theme="nostalgia"] .link { color: #0a4fd8; text-decoration: underline; }
[data-theme="nostalgia"] .hello h2 { color: #1e395b; }
[data-theme="nostalgia"] .hello img { width: 64px; height: 64px; border-radius: 0; content: url(/buddy.svg); }
[data-theme="nostalgia"] .toast { background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 0; box-shadow: 2px 2px 0 rgba(0,0,0,.25); }
[data-theme="nostalgia"] #modal .card { background: #ece9d8; border: 1px solid #0831d9; }
[data-theme="nostalgia"] #modal input, [data-theme="nostalgia"] #modal select { background: #fff; border: 1px solid var(--line-2); border-radius: 0; }
[data-theme="nostalgia"] #status { background: #ffffe1; color: #000; border-bottom: 1px solid #000; }
[data-theme="nostalgia"] ::-webkit-scrollbar { width: 16px; }
[data-theme="nostalgia"] ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #c6d8f5, #a8c3ea); border: 1px solid #7f9db9; border-radius: 0; }
[data-theme="nostalgia"] ::-webkit-scrollbar-track { background: #eef3fb; }

/* ---------- temas clássicos (paletas conhecidas) ---------- */
:root[data-theme="tokyo"] {
  --bg: #1a1b26; --panel: #16161e; --raised: #24283b; --hover: #2f3449; --line: #292e42; --line-2: #3b4261; --rail: var(--bg);
  --text: #c0caf5; --text-2: #a9b1d6; --text-3: #565f89; --accent: #7aa2f7; --grad: linear-gradient(90deg, #7aa2f7, #7aa2f7); --accent-ink: #15161e; --green: #9ece6a; --red: #f7768e;
}
:root[data-theme="dracula"] {
  --bg: #282a36; --panel: #21222c; --raised: #343746; --hover: #3c3f52; --line: #44475a; --line-2: #5a5e78; --rail: var(--bg);
  --text: #f8f8f2; --text-2: #bfbfd0; --text-3: #6272a4; --accent: #bd93f9; --grad: linear-gradient(90deg, #bd93f9, #bd93f9); --accent-ink: #1b1a24; --green: #50fa7b; --red: #ff5555;
}
:root[data-theme="nord"] {
  --bg: #2e3440; --panel: #3b4252; --raised: #434c5e; --hover: #4c566a; --line: #434c5e; --line-2: #4c566a; --rail: var(--bg);
  --text: #eceff4; --text-2: #d8dee9; --text-3: #9aa3b5; --accent: #88c0d0; --grad: linear-gradient(90deg, #88c0d0, #88c0d0); --accent-ink: #2e3440; --green: #a3be8c; --red: #bf616a;
}
:root[data-theme="catppuccin"] {
  --bg: #1e1e2e; --panel: #181825; --raised: #313244; --hover: #3b3d55; --line: #313244; --line-2: #45475a; --rail: var(--bg);
  --text: #cdd6f4; --text-2: #a6adc8; --text-3: #6c7086; --accent: #cba6f7; --grad: linear-gradient(90deg, #cba6f7, #cba6f7); --accent-ink: #1e1e2e; --green: #a6e3a1; --red: #f38ba8;
}
:root[data-theme="gruvbox"] {
  --bg: #282828; --panel: #1d2021; --raised: #3c3836; --hover: #504945; --line: #3c3836; --line-2: #665c54; --rail: var(--bg);
  --text: #ebdbb2; --text-2: #d5c4a1; --text-3: #928374; --accent: #fabd2f; --grad: linear-gradient(90deg, #fabd2f, #fabd2f); --accent-ink: #282828; --green: #b8bb26; --red: #fb4934;
  --r-sm: 3px; --r: 6px; --r-lg: 8px;
}

/* ---------- temas autorais ---------- */
:root[data-theme="claro"] {
  --bg: #f4f5f8; --panel: #ffffff; --raised: #f1f3f7; --hover: #e8ebf1; --line: #e1e5ec; --line-2: #c9cfda; --rail: var(--bg);
  --text: #1c2130; --text-2: #5b6475; --text-3: #8a93a5; --accent: #2f6fed; --grad: linear-gradient(90deg, #2f6fed, #2f6fed); --accent-ink: #ffffff; --green: #1f9d55; --red: #d93c3c;
}
[data-theme="claro"] #controls { box-shadow: 0 10px 30px rgba(28, 33, 48, .12); }
[data-theme="claro"] .tile { background: #e9ecf2; }
[data-theme="claro"] #status { color: #fff; }
[data-theme="claro"] .card .logo, [data-theme="claro"] .hello img, [data-theme="cafe"] .card .logo, [data-theme="cafe"] .hello img { content: url(/logo-dark.svg); }
[data-theme="claro"] .brand img, [data-theme="cafe"] .brand img { content: url(/icon-dark.svg); }

:root[data-theme="terminal"] {
  --bg: #050806; --panel: #0a0f0b; --raised: #0f1711; --hover: #152016; --line: #1f3324; --line-2: #2f4d36; --rail: var(--bg);
  --text: #b6f2c3; --text-2: #6fcf85; --text-3: #3f8f52; --accent: #39ff6a; --grad: linear-gradient(90deg, #39ff6a, #39ff6a); --accent-ink: #02140a; --green: #39ff6a; --red: #ff5f5f;
  --r-sm: 0; --r: 0; --r-lg: 0; --font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-ui: var(--font);
}
[data-theme="terminal"] body { font-size: 13px; }
[data-theme="terminal"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); }
[data-theme="terminal"] .brand, [data-theme="terminal"] #room-head .title, [data-theme="terminal"] .card h1 { text-shadow: 0 0 8px rgba(57, 255, 106, .45); }
[data-theme="terminal"] .brand::before { content: "> "; color: var(--accent); }
[data-theme="terminal"] .btn.primary { box-shadow: 0 0 14px rgba(57, 255, 106, .35); }

[data-theme="terminal"] .avatar { border-radius: 0; }

:root[data-theme="synthwave"] {
  --bg: #130b2b; --panel: #1a0f3a; --raised: #241552; --hover: #2d1b66; --line: #35237a; --line-2: #4a339a; --rail: var(--bg);
  --text: #f3ecff; --text-2: #b9a7e8; --text-3: #7f6cb8; --accent: #ff3ea5; --grad: linear-gradient(90deg, #ff3ea5, #ff3ea5); --accent-ink: #ffffff; --green: #2bf0d3; --red: #ff6b6b;
  --font: "Space Grotesk", "Manrope", system-ui, sans-serif; --font-ui: var(--font);
}
[data-theme="synthwave"] #room-head, [data-theme="synthwave"] .brand { border-bottom: 2px solid; border-image: linear-gradient(90deg, #ff3ea5, #2bf0d3) 1; }
[data-theme="synthwave"] .brand { background: linear-gradient(90deg, #ff3ea5, #2bf0d3); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="synthwave"] .brand img { filter: hue-rotate(260deg) saturate(1.4); }
[data-theme="synthwave"] .tile { box-shadow: 0 0 24px rgba(255, 62, 165, .14); }
[data-theme="synthwave"] .ctl.on, [data-theme="synthwave"] .btn.primary { box-shadow: 0 0 14px rgba(255, 62, 165, .55); }
[data-theme="synthwave"] #stage { background: radial-gradient(ellipse at bottom, rgba(255, 62, 165, .12), transparent 60%); }

:root[data-theme="cafe"] {
  --bg: #f3ece2; --panel: #faf5ec; --raised: #efe6d8; --hover: #e8dcc9; --line: #dccfbb; --line-2: #c4b39a; --rail: var(--bg);
  --text: #2f241a; --text-2: #6d5c4b; --text-3: #9a8874; --accent: #a0522d; --grad: linear-gradient(90deg, #a0522d, #a0522d); --accent-ink: #ffffff; --green: #4e8a3e; --red: #c0392b;
  --r-sm: 8px; --r: 14px; --r-lg: 18px; --font: "Lora", Georgia, "Times New Roman", serif; --font-ui: var(--font);
}
[data-theme="cafe"] body { font-size: 14px; }
[data-theme="cafe"] .tile { background: #e7dccb; }
[data-theme="cafe"] #status { color: #fff; }

:root[data-theme="fliperama"] {
  --bg: #000000; --panel: #0b0b2a; --raised: #141452; --hover: #1d1d6e; --line: #3333aa; --line-2: #5555ff; --rail: var(--bg);
  --text: #ffffff; --text-2: #c8c8ff; --text-3: #8888cc; --accent: #ffd400; --grad: linear-gradient(90deg, #ffd400, #ffd400); --accent-ink: #000000; --green: #00ff66; --red: #ff2d55;
  --r-sm: 0; --r: 0; --r-lg: 0;
}
/* fonte pixel só em títulos; o corpo continua legível */
[data-theme="fliperama"] .brand, [data-theme="fliperama"] #room-head .title, [data-theme="fliperama"] .section,
[data-theme="fliperama"] .card h1, [data-theme="fliperama"] #members .mh span, [data-theme="fliperama"] .hello h2,
[data-theme="fliperama"] #modal h2, [data-theme="fliperama"] .room-row { font-family: "Press Start 2P", "Courier New", monospace; font-size: 11px; line-height: 1.6; }
[data-theme="fliperama"] .card h1 { font-size: 16px; }
[data-theme="fliperama"] .hello h2, [data-theme="fliperama"] #modal h2 { font-size: 13px; }
[data-theme="fliperama"] .btn, [data-theme="fliperama"] .create, [data-theme="fliperama"] #controls, [data-theme="fliperama"] #winks, [data-theme="fliperama"] #umenu, [data-theme="fliperama"] #ucard { border: 2px solid #fff; box-shadow: 4px 4px 0 #fff; }
[data-theme="fliperama"] .btn.primary { box-shadow: 4px 4px 0 var(--accent); border-color: var(--accent); }
[data-theme="fliperama"] .tile { border: 3px solid var(--line-2); }

[data-theme="fliperama"] .avatar { border-radius: 4px; }
[data-theme="fliperama"] .ctl.on { box-shadow: 3px 3px 0 #fff; }

/* ---------- servidores: coluna de bolinhas ---------- */
#servers { width: 68px; flex: none; background: var(--rail); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; min-height: 0; }
#servers .brand { height: auto; padding: 0; border: 0; margin-bottom: 4px; }
#servers .brand img { width: 26px; height: 26px; }
#server-list { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; flex: 1; overflow-x: hidden; }
.sbubble { position: relative; width: 44px; height: 44px; padding: 0; border-radius: 16px; background: var(--raised); color: var(--text-2); display: grid; place-items: center; font-weight: 700; font-size: 14px; transition: border-radius .15s, background .15s, color .15s; flex: none; overflow: visible; }
.sbubble img { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: inherit; }
.sbubble:hover { border-radius: 12px; background: var(--hover); color: var(--text); }
.sbubble.on { border-radius: 12px; background: var(--grad-btn, var(--grad)); color: #fff; }
.sbubble:has(img), .sbubble.on:has(img), .sbubble:has(img):hover { background: transparent; }
.sbubble:has(img):hover img, .sbubble.on img { border-radius: 12px; }
.sbubble::before { content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 0; border-radius: 0 3px 3px 0; background: var(--text); transform: translateY(-50%); transition: height .15s; }
.sbubble.unread::before { height: 10px; }
.sbubble.on::before { height: 28px; background: var(--accent); }
.sbubble .badge { position: absolute; right: -4px; bottom: -4px; border: 2px solid var(--rail); }
.sbubble .sv { position: absolute; left: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #0b1a0d; display: grid; place-items: center; border: 2px solid var(--bg); }
.sbubble .sv .ic { width: 10px; height: 10px; }
.sbubble.add { background: transparent; border: 1px dashed var(--line-2); color: var(--text-3); }
.sbubble.add:hover { background: var(--hover); color: var(--accent); border-style: solid; }
.sbubble.add .ic { width: 20px; height: 20px; }

#server-preview {
  position: fixed; z-index: 8; width: max-content; max-width: min(260px, calc(100vw - 84px));
  padding: 10px 12px; border-radius: var(--r); background: var(--rail); color: var(--text);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
#server-preview::before { content: ""; position: absolute; left: -6px; top: calc(var(--pointer-top) - 6px); width: 12px; height: 12px; background: var(--rail); transform: rotate(45deg); }
.server-preview-head { position: relative; display: flex; align-items: center; gap: 8px; }
.server-preview-head img { width: 20px; height: 20px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.server-preview-head strong { font-size: 14px; overflow-wrap: anywhere; min-width: 0; }
.server-preview-voice { max-height: min(340px, calc(100dvh - 140px)); overflow-y: auto; }
.server-preview-channel { margin-top: 10px; }
.server-preview-label { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12px; }
.server-preview-label .ic { width: 14px; height: 14px; }
.server-preview-label span { min-width: 0; overflow-wrap: anywhere; }
.server-preview-members { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 0 20px; }
.server-preview-members .avatar { width: 28px; height: 28px; font-size: 12px; }

/* ---------- lateral: cabeçalho do servidor e canais ---------- */
.shead { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 15px; }
.shead.menu { cursor: pointer; }
.shead.menu:hover { background: var(--hover); }
.shead .sname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shead .ic { width: 16px; height: 16px; color: var(--text-3); }
.cat { display: flex; align-items: center; gap: 6px; padding: 14px 4px 4px 8px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.cat span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat .icon { width: 22px; height: 22px; opacity: 0; }
.cat:hover .icon { opacity: 1; }
.cat .icon .ic { width: 14px; height: 14px; }
.ch { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 6px 0 8px; border-radius: var(--r-sm); cursor: pointer; color: var(--text-2); font-weight: 500; transition: background .12s, color .12s; margin-bottom: 1px; }
.ch:hover { background: var(--hover); color: var(--text); }
.ch.active { background: var(--raised); color: var(--text); }
.ch > .ic { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.ch em { font-style: normal; font-size: 14px; line-height: 1; flex: none; }
.ch .cname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch.unread { color: var(--text); font-weight: 600; }
.ch.unread::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--text); margin-left: -8px; flex: none; }
.ch .badge { flex: none; }
.ch .cnt { font-size: 11px; color: var(--text-3); background: var(--raised); border-radius: 999px; padding: 1px 7px; flex: none; }
.ch .cedit, .ch .rchat { width: 22px; height: 22px; opacity: 0; flex: none; position: relative; }
.ch .cedit .ic, .ch .rchat .ic { width: 14px; height: 14px; }
.ch:hover .cedit, .ch:hover .rchat, .ch .rchat.has { opacity: 1; }
.ch .rchat .ndot { position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid var(--panel); box-sizing: content-box; }
.ch.create { color: var(--text-3); font-weight: 500; }
.ch.create > .ic { color: var(--accent); }
.ch.create:hover { color: var(--text); }
.sempty { padding: 24px 14px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: center; }
.sempty p { margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
.sempty .btn.small { justify-content: center; }
#room-head .cemoji { font-style: normal; font-size: 16px; line-height: 1; }
#room-head #btn-chat.on { color: var(--accent); }

/* ---------- canal de texto no meio ---------- */
#textview { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#textview.drop { outline: 2px dashed var(--accent); outline-offset: -8px; }
#chat.main { flex: 1; min-height: 0; }
#chat.main > .mh { display: none; }
#chat.main #chat-msgs { padding: 16px 24px; gap: 10px; }
#chat.main .msg { font-size: 14px; line-height: 1.5; padding: 4px 8px; }
#chat.main .msg .av { width: 38px; }
#chat.main .msg .av .avatar { width: 38px; height: 38px; font-size: 15px; }
#chat.main .msg .thumb { max-height: 360px; }
#chat.main #chat-form { padding: 12px 24px 18px; }
#chat.main #chat-reply { margin: 0 24px; }
#chat.main .chat-intro { padding: 24px 8px 16px; }
#chat.main .chat-intro .hash { width: 64px; height: 64px; font-size: 34px; }
#chat.main .chat-intro b { font-size: 22px; }
#chat-input, #dm-input { resize: none; min-height: 36px; max-height: 160px; line-height: 1.4; padding: 8px 10px; font-family: inherit; }
#chat.main .text-file-hint { padding-inline: 24px; }
.btn.more { align-self: center; margin: 4px 0 8px; }

/* ---------- markdown nas mensagens ---------- */
.msg .txt p { margin: 0; }
.msg .txt h3, .msg .txt h4, .msg .txt h5 { margin: 4px 0 2px; line-height: 1.25; }
.msg .txt h3 { font-size: 1.35em; } .msg .txt h4 { font-size: 1.2em; } .msg .txt h5 { font-size: 1.05em; }
.msg .txt code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .9em; background: var(--rail); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.msg .txt .code-block {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  margin: 4px 0; background: var(--rail); border: 1px solid var(--line); border-radius: var(--r-sm);
}
/* Mantém o botão Copiar livre enquanto a pessoa interage com o código. */
.msg:has(.code-block:hover, .code-copy:focus-visible) > .acts { display: none; }
.msg .txt pre {
  --code-string: #8bd5a0; --code-keyword: #c7a9f7; --code-number: #f4bf87;
  --code-name: #8ccaff; --code-comment: #a3acbc; --code-tag: #f4a5ae;
  margin: 0; padding: 6px 8px; min-width: 0; max-width: 100%; overflow-x: auto;
  white-space: pre; tab-size: 4; line-height: 1.5;
}
.code-copy { display: flex; align-items: center; justify-content: center; position: relative; width: 28px; min-height: 26px; margin: 2px 3px; padding: 4px; border-radius: 4px; color: var(--text-2); }
.code-copy .ic { width: 14px; height: 14px; }
.code-copy:hover { background: var(--hover); color: var(--text); }
.code-copy:active { background: var(--raised); }
.code-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.code-copy:disabled { cursor: progress; }
@media (pointer: coarse) {
  .code-copy { width: 44px; min-height: 44px; }
}
.msg .txt pre code { display: block; min-height: 1.5em; background: none; border: 0; padding: 0; color: var(--text); font-size: 12px; line-height: inherit; }
:is([data-theme="claro"], [data-theme="cafe"], [data-theme="nostalgia"]) .msg .txt pre {
  --code-string: #246238; --code-keyword: #6940a0; --code-number: #854b12;
  --code-name: #175a91; --code-comment: #4f5d70; --code-tag: #963c4a;
}
.msg .txt pre :is(.hljs-string, .hljs-regexp, .hljs-addition) { color: var(--code-string); }
.msg .txt pre :is(.hljs-keyword, .hljs-selector-tag, .hljs-doctag, .hljs-meta) { color: var(--code-keyword); }
.msg .txt pre :is(.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet) { color: var(--code-number); }
.msg .txt pre :is(.hljs-title, .hljs-attr, .hljs-attribute, .hljs-built_in, .hljs-type, .hljs-selector-id, .hljs-selector-class) { color: var(--code-name); }
.msg .txt pre :is(.hljs-comment, .hljs-quote) { color: var(--code-comment); }
.msg .txt pre :is(.hljs-name, .hljs-variable, .hljs-template-variable, .hljs-deletion) { color: var(--code-tag); }
.msg .txt pre .hljs-emphasis { font-style: italic; }
.msg .txt pre :is(.hljs-strong, .hljs-section) { font-weight: 700; }
.msg .txt blockquote { margin: 2px 0; padding: 2px 10px; border-left: 3px solid var(--line-2); color: var(--text-2); }
.msg .txt ul { margin: 2px 0; padding-left: 20px; }
.msg .txt li { margin: 1px 0; }
.msg .txt .spoiler { background: var(--text); color: var(--text); border-radius: 3px; padding: 0 3px; cursor: pointer; }
.msg .txt .spoiler.show { background: var(--raised); color: inherit; }
.msg .txt u { text-decoration: underline; }
#mention .avatar.all { background: var(--grad); color: #fff; font-weight: 700; }
#mention small { color: var(--text-3); margin-left: 4px; }
.urow .un .ic { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; color: var(--text-3); }
.urow .un .ic.fr { color: var(--green); }
.ucard .cname .tag, #ucard .cname .tag { font-size: 10px; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 6px; vertical-align: middle; }

/* ---------- convite ---------- */
.invite { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 4px; background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r); text-align: left; }
.invite img, .invite .sini { width: 40px; height: 40px; border-radius: 12px; flex: none; object-fit: cover; }
.invite .sini { background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.invite b { display: block; font-size: 13px; }
.invite span { font-size: 12px; color: var(--text-3); }
.invite-row { display: flex; gap: 8px; margin: 6px 0 10px; }
.invite-row input { flex: 1; min-width: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }

[data-theme="nostalgia"] #servers { background: linear-gradient(90deg, #dbe8f8, #c7d8f2); border-right: 1px solid var(--line-2); }
[data-theme="nostalgia"] .sbubble { border-radius: 3px; border: 1px solid #7f9db9; background: linear-gradient(#fff, #e3edf9); color: #1e395b; }
[data-theme="nostalgia"] .sbubble.on { background: #316ac5; color: #fff; border-color: #0a246a; }
[data-theme="nostalgia"] .sbubble::before { display: none; }
[data-theme="nostalgia"] .shead { background: linear-gradient(#fff, #dbe8f8); border-bottom: 1px solid var(--line-2); color: #1e395b; }
[data-theme="nostalgia"] .ch.active { background: #316ac5; color: #fff; }
[data-theme="nostalgia"] .ch.active > .ic, [data-theme="nostalgia"] .ch.active .cnt { color: #fff; }

/* ---------- criar servidor ---------- */
.card.srv { position: relative; text-align: center; }
.card.srv .sclose { position: absolute; top: 10px; right: 10px; }
.card.srv h2 { margin: 4px 0 0; }
.card.srv > .muted { margin: 0 0 6px; }
.card.srv label:not(.iconpick) { text-align: left; }
.card label.iconpick { display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 10px 0 6px; }
.iconpick .ring { position: relative; width: 84px; height: 84px; border-radius: 50%; border: 2px dashed var(--line-2); display: grid; place-items: center; color: var(--text-3); transition: border-color .12s, color .12s; overflow: visible; }
.iconpick:hover .ring { border-color: var(--accent); color: var(--text); }
.iconpick .cam { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; }
.iconpick .cam .ic { width: 22px; height: 22px; }
.iconpick img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.iconpick .plus { position: absolute; top: -2px; right: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--grad-btn, var(--grad)); color: #fff; display: grid; place-items: center; border: 3px solid var(--panel); font-style: normal; }
.iconpick .plus .ic { width: 12px; height: 12px; }
.card.srv .tiny { margin: 0 0 4px; }

/* ---------- convidar amigos ---------- */
.card.inv { position: relative; width: min(92vw, 460px); }
.card.inv .sclose { position: absolute; top: 10px; right: 10px; }
.card.inv h2 { margin: 0; padding-right: 32px; }
.card.inv > .muted { margin: 0; }
.card.inv .fsearch { width: 100%; }
.flist { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; }
.frow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); }
.frow:hover { background: var(--hover); }
.frow .avatar { width: 32px; height: 32px; font-size: 13px; }
.frow .ut { flex: 1; min-width: 0; }
.frow .un { font-size: 13px; font-weight: 600; }
.frow .us { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .tag { font-size: 11px; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 4px; }
.frow .tag.ok { color: var(--green); border-color: var(--green); }
.frow .tag .ic { width: 12px; height: 12px; }
.or { font-size: 12px; font-weight: 600; color: var(--text-3); margin-top: 6px; }
.card.inv .invite-row { margin: 4px 0 0; }
.card.inv .tiny a { color: var(--accent); text-decoration: underline; }
.invcard { display: flex; align-items: center; gap: 12px; max-width: 420px; margin: 6px 0; padding: 10px 12px; background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r); color: var(--text); text-decoration: none !important; }
.invcard .ici { width: 44px; height: 44px; border-radius: 14px; background: var(--rail); display: grid; place-items: center; color: var(--text-3); flex: none; overflow: hidden; }
.invcard .ici img { width: 100%; height: 100%; object-fit: cover; }
.invcard .ici .ic { width: 20px; height: 20px; }
.invcard .ict { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.invcard .ict b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invcard .ict small { font-size: 12px; color: var(--text-3); }
.invcard .go { flex: none; }

/* ---------- sozinho na sala: blocos de convite e compartilhar ---------- */
.stage-cards { flex: none; display: flex; gap: 12px; justify-content: center; padding: 0 0 4px; }
.scard { width: 300px; padding: 18px 18px 16px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.scard .sci { width: 36px; height: 36px; border-radius: 12px; background: var(--grad-btn, var(--grad)); color: #fff; display: grid; place-items: center; margin-bottom: 4px; }
.scard .sci .ic { width: 18px; height: 18px; }
.scard b { font-size: 14px; }
.scard span { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.scard .btn, .scard .row { margin-top: 8px; }
.scard .row { display: flex; gap: 6px; }
#stage.focus .stage-cards { display: none; }
[data-theme="nostalgia"] .scard { background: linear-gradient(#fff, #eef4fb); border-color: var(--line-2); }

.ch.create { margin-top: 6px; }
.temps { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }

/* cadastro estilo Discord: campos extras só no modo "criar conta" */
#auth-form:not(.reg) .reg { display: none; }
#auth-form label small { font-weight: 400; color: var(--text-3); margin-left: 4px; }
#auth-form .birth { display: grid; grid-template-columns: 1fr 1.5fr 1.1fr; gap: 8px; }
#auth-form .birth select { min-width: 0; }
/* faixa de confirmação de e-mail */
#mailbar { display: flex; align-items: center; gap: 10px; padding: 7px 14px; font-size: 13px; color: var(--text); background: linear-gradient(90deg, rgba(245, 184, 61, .14), rgba(255, 77, 109, .14)); border-bottom: 1px solid var(--line); }
#mailbar > .ic { width: 16px; height: 16px; color: var(--accent); flex: none; }
#mailbar span { flex: 1; min-width: 0; }
#mailbar .link { font-size: 13px; }
/* presença */
.avatar { position: relative; }
.pdot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--panel); background: var(--text-3); box-sizing: content-box; }
.avatar.sm .pdot { width: 9px; height: 9px; }
.pdot.online { background: var(--green); } .pdot.idle { background: #f5b83d; } .pdot.dnd { background: var(--red); } .pdot.offline, .pdot.invisible { background: var(--text-3); }
#ucard .cav .dot.online, .pprev .cav .dot.online { background: var(--green); } #ucard .cav .dot.idle, .pprev .cav .dot.idle { background: #f5b83d; } #ucard .cav .dot.dnd, .pprev .cav .dot.dnd { background: var(--red); }
.chandle { font-size: 12px; color: var(--text-3); margin-top: 1px; }
#umenu button.pres::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); flex: none; margin-right: 2px; }
#umenu button.pres.online::before { background: var(--green); } #umenu button.pres.idle::before { background: #f5b83d; } #umenu button.pres.dnd::before { background: var(--red); }
#umenu button.pres.on { font-weight: 700; }
#umenu .uh small { display: block; color: var(--text-3); font-weight: 400; font-size: 11px; }
.me-text { background: none; border: 0; padding: 2px 6px; margin: 0 0 0 -6px; text-align: left; color: inherit; font: inherit; cursor: pointer; flex: 1; min-width: 0; border-radius: var(--r-sm); }
.me-text:hover { background: var(--hover); }
/* popup de menção */
#mention .mh { font-size: 11px; font-weight: 600; color: var(--text-3); padding: 6px 8px 4px; text-transform: uppercase; letter-spacing: .03em; }
#mention button .mn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mention button small { margin-left: auto; font-size: 12px; flex: none; }
/* conta */
.mailf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mailf input { flex: 1; min-width: 200px; background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; font-size: 13px; outline: none; }
/* perfil com prévia ao vivo */
.spane.wide { max-width: 1150px; }
.pcols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.pprev { position: sticky; top: 0; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
@media (max-width: 900px) { .pcols { grid-template-columns: 1fr; } .pprev { position: static; } }
/* perfil: campos empilhados para caber ao lado da prévia */
.pfields .opt:not(:has(.pav)) { flex-direction: column; align-items: stretch; gap: 8px; }
.pfields .opt .ot span { margin-top: 2px; }
.pfields .opt input[type="text"], .pfields .opt textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.pfields .opt input[type="color"] { align-self: flex-start; }

/* tela inicial: mensagens diretas */
.brand { cursor: pointer; position: relative; background: none; border: 0; border-bottom: 1px solid var(--line); color: inherit; width: 100%; justify-content: center; padding: 0; }
.brand img { transition: transform .12s, filter .12s; }
.brand:hover img, .brand.on img { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(250, 130, 85, .55)); }
.brand .badge { position: absolute; right: 6px; bottom: 6px; }
#dmview { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#dm.main { flex: 1; min-height: 0; }
#dm.main > .mh { display: none; }
#dm.main #dm-msgs { padding: 16px 24px; gap: 10px; }
#dm.main .msg { font-size: 14px; line-height: 1.5; padding: 4px 8px; }
.dmempty { flex: 1; }
.dmrow { height: 44px; gap: 10px; }
.dmrow .dmt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.dmrow .dmt small { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* zoom na tela compartilhada */
.tile video { transform-origin: center; will-change: transform; }
.tile.zoomed { cursor: grab; }
.tile.zoomed:active { cursor: grabbing; }
.dmempty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }

/* ícones de estado (mic, câmera, coroa) alinhados à direita na lista da sala */
.member .mname + .ic, .member .mstatus + .ic { margin-left: auto; }
/* menu: separador */
#umenu button.sep { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
/* som bloqueado pelo navegador */
#sndbar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 14px; font-size: 13px; background: rgba(255, 77, 109, .14); border-bottom: 1px solid var(--line); }
/* card de perfil */
#ucard { width: 320px; }
#ucard .banner { height: 88px; }
#ucard .ctop { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
#ucard .ctop .icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(12, 13, 17, .55); color: #fff; backdrop-filter: blur(4px); }
#ucard .ctop .icon:hover { background: rgba(12, 13, 17, .8); }
#ucard .ctop .icon[disabled] { opacity: .75; cursor: default; }
#ucard .ctop .icon.ok { color: var(--green); }
#ucard .chandle { display: flex; align-items: center; gap: 8px; }
#ucard .cpres { display: inline-flex; align-items: center; gap: 5px; }
#ucard .cpres::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
#ucard .cpres.online::before { background: var(--green); } #ucard .cpres.idle::before { background: #f5b83d; } #ucard .cpres.dnd::before { background: var(--red); }
#ucard .cstatus { margin-top: 6px; font-size: 13px; color: var(--text-2); }
#ucard .cmutual { display: flex; align-items: center; margin-top: 10px; font-size: 12px; color: var(--text-2); }
#ucard .cmutual img, #ucard .cmutual > span { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 9px; font-weight: 700; background: var(--raised); border: 2px solid var(--panel); margin-right: -8px; box-sizing: border-box; }
#ucard .cmutual small { margin-left: 14px; font-size: 12px; }
#ucard .csec { margin-top: 12px; }
#ucard .csec > b, #ucard .cwhere > b { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: 4px; }
#ucard .csec .cbio { margin-top: 0; }
#ucard .cwhere { display: block; margin-top: 12px; padding: 10px; }
#ucard .cwroom { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
#ucard .cwroom .ic { width: 16px; height: 16px; color: var(--text-2); }
#ucard .cwroom small { display: block; font-size: 11px; color: var(--text-3); }
#ucard .cwhere .btn { margin-top: 8px; width: 100%; justify-content: center; }
#ucard .cacts { align-items: center; }
#ucard .cacts .tiny { margin: 0; }
#ucard .cmsg { display: flex; align-items: center; gap: 4px; margin-top: 12px; background: var(--raised); border: 1px solid var(--line-2); border-radius: 10px; padding: 3px 3px 3px 12px; }
#ucard .cmsg:focus-within { border-color: var(--accent); }
#ucard .cmsg input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: inherit; font-size: 13px; outline: none; padding: 7px 0; }

/* configurações de voz e vídeo */
.meter { position: relative; overflow: visible; }
.meter i { border-radius: 999px; }
.meter i.below { filter: grayscale(1); opacity: .55; }
.meter .thr { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); border-radius: 1px; }
.opt input[type="range"] { width: 100%; accent-color: var(--accent); margin: 2px 0; }
.campv { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; }
.campv video { width: 100%; max-width: 380px; aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: #000; transform: scaleX(-1); object-fit: cover; }
.bgpick { display: flex; flex-wrap: wrap; gap: 8px; }
.bgopt { width: 104px; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--panel); padding: 4px 4px 6px; display: flex; flex-direction: column; gap: 5px; align-items: stretch; cursor: pointer; color: var(--text-2); font: inherit; font-size: 11px; font-weight: 600; text-align: center; }
.bgopt:hover { border-color: var(--line-2); }
.bgopt.on { border-color: var(--accent); color: var(--text); }
.bgopt .sw { height: 54px; border-radius: 6px; background: var(--raised); display: grid; place-items: center; overflow: hidden; color: var(--text-3); }
.bgopt .sw .ic { width: 20px; height: 20px; }
.bgopt .sw img { width: 100%; height: 100%; object-fit: cover; }
.bgopt .sw.light::before, .bgopt .sw.strong::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--text-2); filter: blur(3px); }
.bgopt .sw.strong::before { filter: blur(7px); }
.bgopt .sw.grad { background: linear-gradient(135deg, #f5b83d, #ff4d6d); }
.bgopt .sw.night { background: linear-gradient(135deg, #0f1118, #262a3d); }
.dmempty { margin: auto; width: 100%; max-width: 520px; }

/* menu do usuário: volume */
#umenu .vol { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin-top: 8px; font-size: 12px; color: var(--text-2); align-items: center; }
#umenu .vol b { color: var(--text); font-size: 12px; }
#umenu .vol input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); margin: 2px 0 0; }

/* assistente de áudio */
.card.wiz { max-width: 460px; text-align: left; gap: 12px; }
.card.wiz h2 { margin: 0; font-size: 20px; }
.card.wiz > .muted { margin: 0; text-align: left; }
.wdots { display: flex; gap: 6px; }
.wdots i { width: 22px; height: 4px; border-radius: 2px; background: var(--line-2); }
.wdots i.on { background: var(--grad, linear-gradient(90deg, #f5b83d, #ff4d6d)); }
.wbox { background: var(--raised); border-radius: var(--r-sm); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.wtext { font-size: 14px; line-height: 1.45; }
.wres { border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; border: 1px solid var(--line-2); }
.wres b { font-size: 14px; }
.wres small { color: var(--text-3); font-size: 11px; }
.wres.great { border-color: var(--green); } .wres.ok { border-color: var(--accent); } .wres.weak { border-color: #f5b83d; } .wres.bad, .wres.none { border-color: var(--red); }
.wsum { display: grid; gap: 8px; }
.wsum > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 8px 10px; background: var(--raised); border-radius: var(--r-sm); }
.wsum span { color: var(--text-2); text-align: right; }
.card.wiz .row { justify-content: flex-end; }

/* blocos da sala: cor do perfil, só o avatar no centro, "…" no hover */
.tile .who .label { display: none; }
.stage-main .tile .avatar.big { width: 84px; height: 84px; font-size: 30px; }
.tile .avatar.big { box-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
.tile .more { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: var(--r-sm); display: none; place-items: center; background: rgba(12, 13, 17, .6); color: #fff; backdrop-filter: blur(8px); }
.tile .more .ic { width: 16px; height: 16px; }
.tile:hover .more { display: grid; }
.tile.zoomed .more, .stage-strip .tile .more { display: none !important; }
.tile.screen .more { display: none !important; }

/* ---- tipografia com personalidade + tamanhos como no Discord ---- */
.ch .cname, .member .mname, .shead .sname, #room-head .title, .urow .un, .msg .meta b, .me-bar .mname, .tile .name, #ucard .cname, .pprev .cname,
.dmrow .cname, #umenu .uh b, .spane h2, .card h2, .hello h2, .cat, .btn, .sbubble span, .stab, #mention button .mn, .section span:first-child { font-family: var(--font-ui); letter-spacing: -0.01em; }
.cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ch { height: 34px; font-size: 15px; gap: 8px; }
.ch > .ic { width: 20px; height: 20px; }
.ch em { font-size: 16px; }
.ch .cedit .ic, .ch .rchat .ic { width: 16px; height: 16px; }
.member { height: 32px; font-size: 14px; gap: 10px; }
.member .ic { width: 16px; height: 16px; }
.members .avatar.sm { width: 24px; height: 24px; font-size: 12px; }
.members { padding-left: 22px; }
.shead { font-size: 16px; }
#room-head .title { font-size: 16px; }
.urow .un { font-size: 15px; }
.msg .meta b { font-size: 14px; }
.me-bar .mname { font-size: 14px; }
.dmrow .cname { font-size: 15px; }

/* tela cheia própria */
#stage.full { position: fixed; inset: 0; z-index: 30; background: #000; padding: 0; display: block; }
#stage.full .stage-strip, #stage.full .stage-cards { display: none !important; }
#stage.full .stage-main { position: absolute; inset: 0; padding: 0; display: block; }
#stage.full .stage-main > .tile { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
#stage.full .tile video { object-fit: contain; }
#stage.full .tile .fs { display: grid; }
#main.full #controls { position: fixed; z-index: 31; left: 50%; bottom: 20px; width: max-content; max-width: calc(100% - 16px); transform: translateX(-50%); }
/* foto pelo card */
#self-card { position: fixed; z-index: 16; width: min(324px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; background: var(--panel); border-radius: var(--r-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, .4); }
.self-cover { height: 80px; background-size: cover; position: relative; }
.self-cover .icon { position: absolute; right: 8px; top: 8px; color: #fff; background: rgba(12, 13, 17, .7); }
.self-info { padding: 0 16px 12px; }
.self-identity { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.self-identity > .avatar { width: 52px; height: 52px; font-size: 23px; margin-top: -24px; outline: 4px solid var(--panel); }
.self-identity > div:last-child { min-width: 0; display: flex; flex-direction: column; }
.self-identity strong { font-size: 17px; overflow-wrap: anywhere; }
.self-identity span { color: var(--text-3); font-size: 12px; overflow-wrap: anywhere; }
.self-bio { margin: 0 0 12px; font-size: 13px; overflow-wrap: anywhere; max-height: 100px; overflow-y: auto; }
.self-bio p { margin: 3px 0; }
.self-bio a { color: var(--accent); }
.self-status, .self-presence { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px; text-align: left; min-height: 40px; }
.self-status { color: var(--text-2); font-size: 12px; }
.self-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.self-presence { background: var(--raised); margin: 4px 0 8px; }
.self-presence span { flex: 1; }
#self-card .dot { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--text-3); }
#self-card .dot.online { background: var(--green); }
#self-card .dot.idle { background: #f5b83d; }
#self-card .dot.dnd { background: var(--red); }
#self-card .dot.invisible { background: transparent; border: 2px solid var(--text-3); }
#self-presences { padding: 4px; background: var(--rail); border-radius: var(--r-sm); margin-bottom: 8px; }
#self-presences button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px; font-size: 13px; }
#self-presences .ic { width: 14px; margin-left: auto; }
.self-actions { display: grid; border-top: 1px solid var(--line); padding-top: 8px; }
.self-actions button, .self-logout { min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 9px 10px; width: 100%; text-align: left; font-size: 13px; }
.self-actions .ic, .self-status .ic, .self-logout .ic { width: 16px; height: 16px; color: var(--text-3); }
.self-logout { margin-top: 8px; color: var(--text-2); }
.self-info button:hover { background: var(--hover); }
#ucard .cav.mine { cursor: pointer; }
#ucard .cav.mine .cam { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: rgba(12, 13, 17, .55); color: #fff; opacity: 0; transition: opacity .12s; }
#ucard .cav.mine:hover .cam { opacity: 1; }
#ucard .cav.mine .cam .ic { width: 22px; height: 22px; }
/* checkbox pequena nas opções */
.opt .check.tiny { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.opt .check.tiny input { accent-color: var(--accent); margin: 0; }

/* sem indicador de qualidade nos blocos (fica nas barras da caixa de voz) */
.tile .q { display: none !important; }
/* aba Amigos */
.friends { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 24px 24px; overflow: auto; }
.ftabs { display: flex; align-items: center; gap: 6px; min-height: 52px; border-bottom: 1px solid var(--line); margin: 0 -24px 14px; padding: 0 20px; flex-wrap: wrap; }
.ftabs > .ic { width: 20px; height: 20px; color: var(--text-3); }
.ftabs > b { margin-right: 10px; font-family: var(--font-ui); font-size: 15px; }
.ftab { padding: 6px 10px; border-radius: var(--r-sm); font-size: 14px; color: var(--text-2); font-family: var(--font-ui); display: inline-flex; align-items: center; gap: 6px; }
.ftab:hover { background: var(--hover); color: var(--text); }
.ftab.on { background: var(--raised); color: var(--text); }
.ftab.add { background: var(--grad-btn, var(--grad)); color: #fff; font-weight: 600; }
.ftab.add.on { opacity: .85; }
.friends .fsearch { width: 100%; max-width: 640px; margin-bottom: 8px; }
.flist2 { max-width: 760px; }
.frow2 { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--line); cursor: pointer; border-radius: var(--r-sm); }
.frow2:hover { background: var(--hover); }
.frow2 .ut { min-width: 0; }
.frow2 .un { font-family: var(--font-ui); font-size: 15px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.frow2 .un small { color: var(--text-3); font-size: 12px; font-weight: 400; display: none; }
.frow2:hover .un small { display: inline; }
.frow2 .us { font-size: 12px; color: var(--text-3); }
.frow2 .facts { margin-left: auto; display: flex; gap: 8px; }
.frow2 .facts .icon { width: 36px; height: 36px; border-radius: 50%; background: var(--raised); color: var(--text-2); }
.frow2 .facts .icon:hover { color: var(--text); }
.frow2 .facts .icon.ok:hover { color: var(--green); } .frow2 .facts .icon.no:hover { color: var(--red); }
.fadd { max-width: 620px; }
.fadd h3 { margin: 8px 0 4px; font-size: 16px; font-family: var(--font-ui); }
.faddf { display: flex; gap: 8px; margin-top: 12px; }
.faddf input { flex: 1; min-width: 0; background: var(--rail); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; font: inherit; font-size: 14px; outline: none; }
.faddf input:focus { border-color: var(--accent); }
.friends-link .ic { width: 20px; height: 20px; }
.friends .fsearch { background: var(--rail); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 9px 12px; font: inherit; font-size: 14px; outline: none; }
.friends .fsearch:focus { border-color: var(--accent); }
.flist2 .section { display: flex; justify-content: space-between; padding: 10px 8px 6px; font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
/* ícone do Concord no topo da coluna: mesma bolha dos servidores, fundo mais claro */
#servers .brand { width: 44px; height: 44px; margin: 0 auto 12px; padding: 0; border: 0; border-radius: 16px; background: var(--raised); display: grid; place-items: center; transition: border-radius .12s, background .12s; }
#servers .brand img { width: 28px; height: 28px; transition: none; }
#servers .brand:hover, #servers .brand.on { border-radius: 12px; background: var(--hover); }
#servers .brand:hover img, #servers .brand.on img { transform: none; filter: none; }
#servers .brand::before { content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 0; border-radius: 0 3px 3px 0; background: var(--accent); transform: translateY(-50%); transition: height .15s; }
#servers .brand.on::before { height: 28px; }
#servers .brand::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -7px; height: 1px; background: var(--line); opacity: .8; }
#servers .brand .badge { right: -4px; bottom: -4px; border: 2px solid var(--rail); }

.sfxrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* dropdown: espaço para a seta */
.opt select, .card select { padding-right: 32px; }
/* mensagens diretas: linhas maiores, respiro e busca no topo (como no Discord) */
.dmsearch { padding: 10px 8px 4px; }
.dmsearch input { width: 100%; background: var(--rail); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; font-size: 13px; outline: none; }
.dmsearch input:focus { border-color: var(--accent); }
.dmrow { height: 48px; gap: 12px; margin: 1px 4px; padding: 0 8px; }
.dmrow .avatar { width: 32px; height: 32px; font-size: 13px; }
.dmrow .dmt { gap: 1px; }
.dmrow .dmt .cname { font-size: 15px; }
.dmrow .dmt small { font-size: 12px; }
.dmrow.friends-link { height: 42px; margin-bottom: 6px; }
.dmrow.friends-link .cname { font-size: 15px; font-weight: 600; }
.dmrow .badge { margin-left: auto; }

/* coluna de canais com largura ajustável */
#sidebar { width: var(--sbw, 300px); position: relative; }
#sb-resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 6; }
#sb-resize:hover, #sb-resize.on { background: var(--accent); opacity: .6; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe, body.resizing video { pointer-events: none; }


/* ---------- cargos, fundos de perfil e lista de membros ---------- */
.urow { position: relative; overflow: hidden; }
.urow > * { position: relative; }
.urow.bg::before { content: ""; position: absolute; inset: 0; background: var(--ub); background-size: cover; background-position: center; opacity: .3; -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 78%); mask-image: linear-gradient(90deg, transparent 22%, #000 78%); pointer-events: none; transition: opacity .12s; }
.urow.bg:hover::before { opacity: .48; }
#members .section { color: var(--text-3); }
.rtag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1; padding: 4px 8px 4px 6px; border-radius: 4px; background: var(--raised); border: 1px solid var(--line-2); color: var(--text); white-space: nowrap; }
.rtag i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.croles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
#ucard .banner.img, .pprev .banner.img { background-size: cover !important; background-position: center !important; }
.rck { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13px; cursor: pointer; border-radius: var(--r-sm); }
.rck:hover { background: var(--hover); }
.rck.off { opacity: .5; cursor: default; }
.rck i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.rck input { accent-color: var(--accent); margin: 0; }
#umenu .uh small { display: block; color: var(--text-3); font-size: 11px; }
.bpick { display: flex; flex-wrap: wrap; gap: 8px; }
.bsw { width: 56px; height: 32px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; color: #fff; padding: 0; background-size: cover !important; background-position: center !important; }
.bsw.on { border-color: var(--accent); }
.bsw.none, .bsw.img:not([style]) { background: var(--raised) !important; color: var(--text-3); border: 2px dashed var(--line-2); }
.bsw.none.on, .bsw.img.on { border-style: solid; border-color: var(--accent); }
.bsw .ic { width: 16px; height: 16px; }

/* ---------- janelas de configuração (servidor e canal) ---------- */
.win { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; background: rgba(8, 8, 12, .72); padding: 16px; }
.win .spane.wide { max-width: 1150px; }
@media (max-width: 760px) { .win { padding: 0; } }
.stab.danger { color: var(--red); }
.stab.danger.on::before { background: var(--red); }
.swh .sico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; flex: none; }
.swh .sico .ic { width: 18px; height: 18px; }
img.sico { object-fit: cover; }
.sico.big { width: 72px; height: 72px; border-radius: 20px; font-size: 24px; display: grid; place-items: center; color: #fff; font-weight: 700; }
.sicow { cursor: pointer; }
.sprev { border-radius: var(--r); overflow: hidden; background: var(--panel); border: 1px solid var(--line); margin-bottom: 16px; }
.sprev .spb { height: 120px; background-size: cover !important; background-position: center !important; }
.sprev .spi { display: flex; gap: 14px; padding: 0 16px 16px; margin-top: -30px; align-items: flex-end; }
.sprev .spi .sico { border: 4px solid var(--panel); box-sizing: content-box; }
.sprev .spi > div { min-width: 0; padding-bottom: 2px; }
.sprev .spi > div > b { display: block; font-size: 18px; font-family: var(--font-ui); }
.sprev .spi > div > span { display: block; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sprev .spi > div > small { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.spane h2.sub { font-size: 18px; margin: 28px 0 0; }
.row-r { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.row-l { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.danger { color: var(--red); border-color: rgba(240, 86, 90, .4); }
.btn.danger:hover { background: rgba(240, 86, 90, .12); }
.icon.danger { color: var(--red); }
.roles { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.rlist { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; }
.rlist .btn { margin-bottom: 8px; justify-content: center; }
.rrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; text-align: left; color: var(--text-2); width: 100%; font: inherit; }
.rrow:hover { background: var(--hover); color: var(--text); }
.rrow.on { background: var(--raised); color: var(--text); }
.rrow i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.rrow span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; font-family: var(--font-ui); }
.rrow small { color: var(--text-3); font-size: 12px; }
.rrow .mv { display: none; }
.rrow:hover .mv { display: flex; }
.rrow:hover .mv + small, .rrow:hover small { display: none; }
.rrow .mv .icon { width: 22px; height: 22px; }
.rrow .mv .ic { width: 14px; height: 14px; }
.rrow.locked { opacity: .6; }
.rrow > .ic { width: 14px; height: 14px; color: var(--text-3); }
.redit { min-width: 0; }
.rhead { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rhead i { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.rhead > div { flex: 1; min-width: 0; }
.rhead b { display: block; font-size: 16px; font-family: var(--font-ui); }
.rhead span { font-size: 12px; color: var(--text-3); }
.rcolors { display: flex; flex-wrap: wrap; gap: 6px; }
.rc { width: 28px; height: 28px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; color: #fff; padding: 0; position: relative; }
.rc.on { border-color: var(--text); }
.rc.none { background: var(--raised); color: var(--text-3); border: 2px dashed var(--line-2); }
.rc .ic { width: 14px; height: 14px; }
.rc.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.fsearch2 { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 10px; margin-bottom: 10px; }
.fsearch2 .ic { width: 16px; height: 16px; color: var(--text-3); }
.fsearch2 input { flex: 1; background: none; border: 0; color: var(--text); padding: 9px 0; outline: none; font: inherit; }
.mlist, .ilist, .alist { display: flex; flex-direction: column; gap: 2px; }
.mrow, .brow, .irow, .arow { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm); }
.mrow:hover, .brow:hover, .irow:hover { background: var(--hover); }
.mrow, .brow { cursor: pointer; }
.mrow .avatar, .brow .avatar { width: 32px; height: 32px; font-size: 13px; }
.mt { flex: 1; min-width: 0; }
.mt b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-family: var(--font-ui); }
.mt b .ic { width: 14px; height: 14px; color: var(--accent-1); }
.mt small { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mroles { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 45%; justify-content: flex-end; }
.mroles .icon { width: 24px; height: 24px; border: 1px dashed var(--line-2); border-radius: 4px; }
.mroles .ic { width: 12px; height: 12px; }
.macts { display: flex; gap: 2px; opacity: 0; }
.mrow:hover .macts { opacity: 1; }
.macts .icon { width: 30px; height: 30px; }
.irow code { font-family: "JetBrains Mono", monospace; font-size: 12px; background: var(--rail); padding: 5px 8px; border-radius: 4px; cursor: pointer; }
.irow .it { flex: 1; min-width: 0; }
.irow .it b { font-size: 13px; }
.irow .it small { display: block; font-size: 12px; color: var(--text-3); }
.irow .uses { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.arow { align-items: flex-start; }
.arow .aic { width: 30px; height: 30px; border-radius: 50%; background: var(--raised); display: grid; place-items: center; flex: none; color: var(--text-2); }
.arow .aic .ic { width: 15px; height: 15px; }
.arow .at { flex: 1; font-size: 13px; min-width: 0; }
.arow .at small { display: block; color: var(--text-3); font-size: 12px; margin-top: 2px; word-break: break-word; }
.arow time { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.checks { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.chk .ic { width: 16px; height: 16px; color: var(--red); }
.chk.ok { color: var(--text-2); }
.chk.ok .ic { color: var(--green); }

/* ---------- notificações, tópicos e fixadas ---------- */
.ncards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ncard { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 2px solid var(--line); border-radius: var(--r); background: var(--panel); text-align: left; }
.ncard:hover { border-color: var(--line-2); }
.ncard.on { border-color: var(--accent); }
.ncard b { font-size: 13px; }
.ncard span { font-size: 12px; color: var(--text-3); }
.ch.muted { opacity: .55; }
.ch .mutedic { width: 14px; height: 14px; color: var(--text-3); flex: none; }
.ch.thread { height: 30px; font-size: 14px; margin-left: 22px; position: relative; color: var(--text-3); }
.ch.thread::after { content: ""; position: absolute; left: -13px; top: -6px; width: 10px; height: 20px; border-left: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); border-radius: 0 0 0 6px; }
.ch.thread > .ic { width: 16px; height: 16px; }
.ch.thread.active, .ch.thread:hover { color: var(--text); }
#room-head .topic { flex: 1; min-width: 0; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 1px solid var(--line-2); padding-left: 12px; margin-left: 4px; }
#room-head .lnk { color: var(--text-2); padding: 0; font: inherit; }
#room-head .lnk:hover { text-decoration: underline; color: var(--text); }
#room-head .icon.warn { color: var(--accent-1); }
#pop { position: fixed; z-index: 14; width: min(440px, 92vw); max-height: 70vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 16px 48px rgba(0, 0, 0, .45); overflow: hidden; }
#pop .ph { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600; font-family: var(--font-ui); }
#pop .ph b { flex: 1; }
#pop .ph > .ic { width: 16px; height: 16px; color: var(--text-3); }
#pop .pb { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pmsg { display: flex; gap: 10px; padding: 10px 34px 10px 10px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); position: relative; }
.pmsg .av .avatar { width: 32px; height: 32px; font-size: 13px; }
.pmsg .body { flex: 1; min-width: 0; font-size: 13px; }
.pmsg .meta { display: flex; gap: 8px; align-items: baseline; }
.pmsg .meta b { font-family: var(--font-ui); }
.pmsg .meta span { font-size: 11px; color: var(--text-3); }
.pmsg .txt { margin-top: 2px; word-break: break-word; }
.pmsg > .icon { width: 26px; height: 26px; position: absolute; top: 6px; right: 6px; }
.trow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); text-align: left; width: 100%; }
.trow:hover { border-color: var(--line-2); background: var(--hover); }
.trow .tn { flex: 1; min-width: 0; }
.trow b { display: block; font-size: 14px; font-family: var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow small { font-size: 12px; color: var(--text-3); }
.trow .ic { width: 16px; height: 16px; color: var(--text-3); flex: none; }
#pop .section { display: flex; justify-content: space-between; padding: 10px 6px 2px; font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.msg .meta .pinned { color: var(--text-3); display: inline-flex; margin-left: 2px; }
.msg .meta .pinned .ic { width: 13px; height: 13px; }
.thr { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line-2); font-size: 13px; color: var(--text-2); max-width: 100%; }
.thr:hover { border-color: var(--accent); }
.thr .ic { width: 16px; height: 16px; color: var(--accent-1); flex: none; }
.thr b { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thr span { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.thr em { font-style: normal; color: var(--accent); font-weight: 600; margin-left: 6px; white-space: nowrap; }
.spoilimg { position: relative; display: inline-block; cursor: pointer; overflow: hidden; border-radius: 8px; }
.spoilimg img { filter: blur(26px); }
.spoilimg > span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 12px; letter-spacing: .1em; background: rgba(0, 0, 0, .35); }
.spoilimg.show img { filter: none; }
.spoilimg.show > span { display: none; }
#chat-form .slow { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-3); padding: 0 6px; white-space: nowrap; }
#chat-form .slow .ic { width: 14px; height: 14px; }
#chat-form.blocked textarea { opacity: .6; cursor: not-allowed; }
.vroom { font: inherit; font-size: 11px; color: var(--text-3); padding: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 0; }
.vroom:hover { text-decoration: underline; color: var(--text); }

/* ---------- compartilhar tela: seletor ---------- */
#modal .card.scr { max-width: 640px; text-align: left; position: relative; }
.card.scr .sclose { position: absolute; top: 10px; right: 10px; }
.card.scr h3 { margin: 4px 0 -4px; font-size: 12px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pcards.two { grid-template-columns: repeat(2, 1fr); }
.pcard { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--r); background: var(--panel); text-align: left; }
.pcard:hover { border-color: var(--line-2); }
.pcard.on { border-color: var(--accent); }
.pcard b { font-size: 14px; }
.pcard span { font-size: 11px; color: var(--text-3); }
.card.scr .tiny { margin: 0; min-height: 1em; }

/* ---------- criar servidor: assistente ---------- */
#modal .card.srv.wiz { max-width: 760px; }
.tpls { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; text-align: left; }
.tpl { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--raised); text-align: left; width: 100%; }
.tpl:hover { border-color: var(--accent); }
.tpl.main { background: var(--panel); border-color: var(--accent); }
.tpl .te { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 20px; flex: none; }
.tpl .tl { flex: 1; font-weight: 600; font-family: var(--font-ui); min-width: 0; }
.tpl .tl small { display: block; font-weight: 400; font-family: var(--font); font-size: 12px; color: var(--text-3); margin-top: 2px; white-space: normal; }
.tpl .chv { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.card.srv.wiz .tiny a { color: var(--accent); }
.card.srv.wiz .or { margin-top: 4px; }
.card.srv.wiz > .btn { align-self: stretch; }

/* ---------- descobrir comunidades ---------- */
#discover { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 40px; }
.dhero { padding: 44px 32px 30px; background: radial-gradient(900px 300px at 20% 0%, rgba(250, 130, 85, .22), transparent 60%), radial-gradient(700px 300px at 90% 20%, rgba(255, 77, 109, .16), transparent 60%), var(--panel); border-bottom: 1px solid var(--line); text-align: center; }
.dhero h2 { margin: 0 0 6px; font-size: 26px; font-family: var(--font-ui); letter-spacing: -.01em; }
.dhero p { margin: 0 0 18px; color: var(--text-2); font-size: 14px; }
.dsearch { display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto; background: var(--rail); border: 1px solid var(--line-2); border-radius: 8px; padding: 0 12px; }
.dsearch:focus-within { border-color: var(--accent); }
.dsearch .ic { width: 18px; height: 18px; color: var(--text-3); }
.dsearch input { flex: 1; background: none; border: 0; color: var(--text); font: inherit; font-size: 15px; padding: 11px 0; outline: none; }
.dchips { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 32px 6px; }
.chip { padding: 6px 12px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line-2); font-size: 13px; font-weight: 500; color: var(--text-2); }
.chip:hover { color: var(--text); }
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; padding: 14px 32px; }
.dgrid .empty { grid-column: 1 / -1; text-align: center; padding: 40px 0; }
.dcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: transform .12s, border-color .12s; }
.dcard:hover { transform: translateY(-2px); border-color: var(--line-2); }
.dcard .db { height: 96px; background-size: cover !important; background-position: center !important; }
.dcard .dc { padding: 0 14px 14px; position: relative; }
.dcard .di { width: 48px; height: 48px; border-radius: 14px; border: 4px solid var(--panel); margin-top: -24px; display: grid; place-items: center; font-weight: 700; color: #fff; object-fit: cover; box-sizing: content-box; }
.dcard b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-family: var(--font-ui); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard b .vf { width: 16px; height: 16px; color: var(--green); flex: none; }
.dcard p { margin: 4px 0 10px; font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.dcard .dm { display: flex; gap: 12px; font-size: 12px; color: var(--text-3); align-items: center; flex-wrap: wrap; }
.dcard .dm i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); margin-right: 5px; }
.dcard .dm i.on { background: var(--green); }
.dcard .dcat { margin-left: auto; background: var(--raised); padding: 2px 8px; border-radius: 4px; }
.dcard .dt { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dcard .dt .btn { margin-left: auto; flex: none; }
#btn-discover.on { color: var(--accent); border-style: solid; background: var(--hover); }
@media (max-width: 760px) {
  .roles { grid-template-columns: 1fr; }
  .rlist { position: static; }
  .dhero, .dchips, .dgrid { padding-left: 16px; padding-right: 16px; }
}

/* ---------- lightbox de imagens ---------- */
#lightbox { position: fixed; inset: 0; z-index: 18; background: rgba(6, 7, 10, .9); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px 24px; cursor: zoom-out; }
#lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
#lightbox .lbbar { position: absolute; top: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; cursor: default; }
#lightbox .lbbar span { flex: 1; min-width: 0; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lightbox .lbbar .btn { color: var(--text); text-decoration: none; }
#lightbox .lbbar .icon { width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 50%; }

.self-logout .ic { color: var(--red); }

/* Feedback rápido mantém a interface responsiva durante chamadas. */
:root { --motion-quick: 140ms; --motion-state: 220ms; --motion-ease: cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: no-preference) {
  .ctl, .vact, .btn, button.icon, .sbubble {
    transition: background var(--motion-quick), color var(--motion-quick), border-color var(--motion-quick), transform var(--motion-quick) var(--motion-ease);
  }
  .ctl:active:not(:disabled), .vact:active:not(:disabled), .btn:active:not(:disabled), button.icon:active:not(:disabled) { transform: scale(.95); }
  .sbubble { transition: border-radius var(--motion-state) var(--motion-ease), background var(--motion-quick), color var(--motion-quick); }
  .tile .who, .tile .name { transition: opacity var(--motion-quick); }
  .switch span::after { transition: transform var(--motion-state) var(--motion-ease); }
}
.toast { animation: none; }