/* =========================================================================
   Webrole — identidade visual própria
   Conceito: o rolê da turma, de noite. Vidro escuro sobre um fundo vivo quase preto,
   e a "roda": quem está na voz senta em círculo e quem fala se destaca.
   Cores: Obsidiana (base) · Vidro (painéis) · Gelo (ação) · Lavanda (apoio) · Rubi (ao vivo) · Menta (online)
   Tipos: Bricolage Grotesque (títulos) + Instrument Sans (texto)
   ========================================================================= */

@font-face { font-family: "Bricolage Grotesque"; src: url(vendor/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(vendor/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --obsidiana: #05060b; --obsidiana-2: #0d0f1c;
  --vidro: rgba(255,255,255,.05); --vidro-2: rgba(255,255,255,.09); --linha: rgba(255,255,255,.10);
  --gelo: rgb(var(--gelo-rgb)); --lavanda: rgb(var(--lavanda-rgb)); --rubi: rgb(var(--rubi-rgb));
  --gelo-rgb: 89,215,255; --lavanda-rgb: 154,140,255; --rubi-rgb: 255,77,109; --aur1: 98,64,255; --aur2: 190,40,150; --aur3: 40,120,255; --fundo-glow: #10132e; --menta: #3dffb0;
  --espuma: #eef0ff; --suave: #8a90b0; --tinta: #050a1a;
  --r-lg: 28px; --r-md: 18px; --r-sm: 12px;
  --suave-out: cubic-bezier(.2,.8,.2,1); --mola: cubic-bezier(.34,1.56,.64,1);
  --titulo: "Bricolage Grotesque", "Segoe UI Variable Display", system-ui, sans-serif;
  --texto: "Instrument Sans", "Segoe UI Variable Text", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--obsidiana); color: var(--espuma); font: 15px/1.45 var(--texto); overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 2px solid var(--lavanda); outline-offset: 2px; }
ul { list-style: none; margin: 0; padding: 0; }
.ic { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.grow { flex: 1; }
.pad { padding: 0 14px; }
.hint { color: var(--suave); font-size: 13px; margin: 6px 0; }

/* ---------- fundo vivo (só transform; pausa quando a janela está escondida) ---------- */
#aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 90% at 8% 0%, var(--fundo-glow) 0%, var(--obsidiana) 60%); }
/* grão fino por cima de tudo: dá profundidade ao escuro (estático, não pesa) */
body::after { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
#aurora i { position: absolute; border-radius: 50%; will-change: transform; animation: deriva 38s ease-in-out infinite alternate; }
#aurora i:nth-child(1) { width: 62vmax; height: 62vmax; left: -20vmax; bottom: -32vmax; background: radial-gradient(circle, rgba(var(--aur1),.40), transparent 62%); }
#aurora i:nth-child(2) { width: 50vmax; height: 50vmax; right: -16vmax; top: -24vmax; background: radial-gradient(circle, rgba(var(--aur2),.26), transparent 62%); animation-duration: 46s; animation-delay: -12s; }
#aurora i:nth-child(3) { width: 42vmax; height: 42vmax; left: 40%; top: 34%; background: radial-gradient(circle, rgba(var(--aur3),.16), transparent 65%); animation-duration: 54s; animation-delay: -26s; }
html.pausa #aurora i, html.pausa .wheel, html.pausa .logo-mark { animation-play-state: paused; }
@keyframes deriva { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(7vmax,-5vmax,0) scale(1.18); } }

/* ---------- vidro ---------- */
.glass {
  position: relative; border: 1px solid var(--linha); border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 28px 60px -26px rgba(0,0,0,.85);
}
.glass::before { /* brilho que acompanha o mouse */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.11), transparent 62%);
}
.glass:hover::before { opacity: 1; }

/* ---------- entrada (uma só coreografia, quando o app abre) ---------- */
#app.entrar > * { animation: sobe .75s var(--suave-out) both; animation-delay: calc(var(--d, 0s) + var(--atraso, 0s)); }
#app.entrar > :nth-child(2) { --d: .08s; }
#app.entrar > :nth-child(3) { --d: .16s; }
#app.entrar > :nth-child(4) { --d: .24s; }
@keyframes sobe { from { opacity: 0; transform: translateY(22px) scale(.97); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- login ---------- */
#login { position: fixed; inset: 0; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 4vw; padding: 5vw 7vw; }
.login-hero { display: grid; justify-items: start; }
.wheel { position: relative; width: 210px; height: 210px; margin: 0 0 30px 6px; animation: gira 46s linear infinite; }
.wheel i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%;
  background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 22px -8px rgba(0,0,0,.5);
  transform: rotate(calc(var(--n) * 45deg)) translateY(-86px) rotate(calc(var(--n) * -45deg)); }
.wheel i:nth-child(1) { --n: 0; --c1: #9a8cff; --c2: #59d7ff; }
.wheel i:nth-child(2) { --n: 1; --c1: #3dffb0; --c2: #12a37a; }
.wheel i:nth-child(3) { --n: 2; --c1: #ff7ab0; --c2: #ff4d6d; }
.wheel i:nth-child(4) { --n: 3; --c1: #9a8cff; --c2: #ff4d6d; animation: fala 2.4s ease-in-out infinite; }
.wheel i:nth-child(5) { --n: 4; --c1: #b8f2ff; --c2: #3a6df0; }
.wheel i:nth-child(6) { --n: 5; --c1: #c1b8ff; --c2: #59d7ff; }
.wheel i:nth-child(7) { --n: 6; --c1: #8dffd0; --c2: #0f7a5a; }
.wheel i:nth-child(8) { --n: 7; --c1: #d6d0ff; --c2: #7a6bff; }
@keyframes gira { to { transform: rotate(360deg); } }
.wordmark { margin: 0; font: 800 clamp(58px, 9vw, 128px)/.86 var(--titulo); letter-spacing: -.045em;
  background: linear-gradient(100deg, #fff 0%, var(--lavanda) 38%, var(--gelo) 62%, #fff 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: brilho 9s ease-in-out infinite alternate; }
@keyframes brilho { to { background-position: 100% 0; } }
.tagline { margin: 18px 0 0; max-width: 24ch; font: 500 clamp(18px, 1.7vw, 24px)/1.3 var(--titulo); color: var(--suave); }

#login-form { padding: 26px; display: grid; gap: 12px; max-width: 420px; width: 100%; justify-self: end; animation: sobe .8s .1s var(--suave-out) both; }
.auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: rgba(0,0,0,.25); border-radius: 999px; padding: 4px; }
.auth-tabs button { position: relative; z-index: 1; padding: 9px; border-radius: 999px; color: var(--suave); font-weight: 600; transition: color .25s; }
.auth-tabs button.on { color: var(--tinta); }
.auth-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(120deg, var(--lavanda), var(--gelo)); transition: transform .4s var(--mola); }
.auth-tabs:has(button[data-mode="register"].on) .auth-pill { transform: translateX(100%); }
.auth-hint { margin: 2px 4px 4px; min-height: 2.6em; color: var(--suave); font-size: 13px; }
#login-error, #fg-error { color: #ff9db3; min-height: 1.3em; font-size: 13px; }
#login-form .linkbtn { color: var(--lavanda); font-size: 13px; justify-self: center; }
#login-form .linkbtn:hover { text-decoration: underline; }

/* ---------- campos e botões ---------- */
input, select { width: 100%; background: rgba(0,0,0,.24); border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
input::placeholder { color: rgba(238,240,255,.42); }
input:focus, select:focus { border-color: var(--gelo); box-shadow: 0 0 0 4px rgba(var(--gelo-rgb),.2); background: rgba(0,0,0,.32); }
select option { background: #12152a; }
input[type="checkbox"] { width: auto; accent-color: var(--gelo); }
input[type="range"] { padding: 0; accent-color: var(--gelo); }
input[type="color"] { padding: 3px; width: 54px; flex: none; }

#auth-submit, .primary, .send {
  background: linear-gradient(120deg, var(--lavanda), var(--gelo)); color: var(--tinta); font-weight: 700; border-radius: 14px; padding: 12px 18px;
  box-shadow: 0 10px 24px -10px rgba(var(--gelo-rgb),.8); transition: transform .25s var(--mola), box-shadow .25s, filter .2s;
}
#auth-submit:hover, .primary:hover, .send:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 30px -10px rgba(var(--gelo-rgb),.9); }
#auth-submit:active, .primary:active, .send:active { transform: scale(.97); }
.danger { background: rgba(var(--rubi-rgb),.16); color: #ffc0cc; border: 1px solid rgba(var(--rubi-rgb),.4); }
.danger:hover { background: var(--rubi); color: #fff; }
dialog button:not(.primary):not(.danger):not(.icon-btn), .inline button:not(.primary) { background: var(--vidro-2); border-radius: 14px; padding: 11px 16px; transition: background .2s, transform .2s var(--mola); }
dialog button:not(.primary):not(.danger):hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.danger:not(.pill-btn):not(.icon-btn) { border-radius: 14px; padding: 11px 16px; }

.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--vidro); color: var(--espuma); transition: transform .25s var(--mola), background .2s, color .2s; }
.icon-btn:hover { background: var(--vidro-2); transform: translateY(-2px) scale(1.08); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.sm { width: 28px; height: 28px; background: none; color: var(--suave); }
.icon-btn.on { background: var(--rubi); color: #fff; }
.pill-btn { height: 38px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--vidro-2); font-weight: 600; transition: transform .25s var(--mola), background .2s; }
.pill-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.2); }
.pill-btn.on { background: linear-gradient(120deg, var(--lavanda), var(--gelo)); color: var(--tinta); }
.pill-btn.danger { background: rgba(var(--rubi-rgb),.2); }
.pill-btn.danger:hover { background: var(--rubi); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--vidro); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--lavanda); transition: background .2s, transform .25s var(--mola); }
.chip:hover { background: var(--vidro-2); transform: translateY(-1px); }

/* ---------- estrutura do app ---------- */
#app { position: fixed; inset: 0; display: grid; grid-template-columns: 68px 268px minmax(0, 1fr) 236px; gap: 12px; padding: 12px; }
#app:has(#members[hidden]) { grid-template-columns: 68px 268px minmax(0, 1fr); }
#rail, #sidebar, main, #members { min-height: 0; }

/* dock de servidores */
#rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; overflow-y: auto; border-radius: 34px; scrollbar-width: none; }
.logo-mark { position: relative; width: 38px; height: 38px; flex: none; margin-bottom: 4px; animation: gira 30s linear infinite; }
.logo-mark i { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%; background: var(--gelo);
  transform: rotate(calc(var(--n) * 60deg)) translateY(-14px); }
.logo-mark i:nth-child(1) { --n: 0; background: var(--lavanda); } .logo-mark i:nth-child(2) { --n: 1; }
.logo-mark i:nth-child(3) { --n: 2; background: var(--rubi); } .logo-mark i:nth-child(4) { --n: 3; background: var(--menta); }
.logo-mark i:nth-child(5) { --n: 4; background: var(--lavanda); } .logo-mark i:nth-child(6) { --n: 5; }
.rail-sep { width: 28px; height: 1px; background: var(--linha); flex: none; }
#servers { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.rail-btn { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 17px; background: var(--vidro); font: 700 18px var(--titulo); transition: border-radius .35s var(--mola), transform .3s var(--mola), background .25s; }
.rail-btn:hover { border-radius: 50%; transform: translateY(-3px) scale(1.08); background: var(--vidro-2); }
.rail-btn.active { border-radius: 50%; background: linear-gradient(135deg, var(--lavanda), var(--gelo)); color: var(--tinta); box-shadow: 0 10px 22px -8px rgba(var(--gelo-rgb),.9); }
.rail-btn.active::before { content: ""; position: absolute; left: -11px; top: 50%; width: 5px; height: 22px; border-radius: 0 5px 5px 0; background: var(--lavanda); transform: translateY(-50%); animation: cresce .4s var(--mola); }
@keyframes cresce { from { height: 0; } }
.rail-btn.unread::after, #btn-home[data-unread="1"]::after { content: ""; position: absolute; right: -2px; top: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--rubi); border: 2px solid var(--obsidiana-2); animation: pop .4s var(--mola); }
.rail-btn.add { color: var(--menta); background: rgba(61,255,176,.12); }

/* lugares */
#sidebar { display: flex; flex-direction: column; padding: 14px 12px 12px; overflow-y: auto; }
.brand { display: grid; gap: 8px; padding: 4px 6px 12px; }
#server-name { font: 700 22px/1.1 var(--titulo); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-actions { display: flex; align-items: center; gap: 6px; }
.brand-actions .icon-btn { width: 30px; height: 30px; }
.section { display: flex; align-items: center; justify-content: space-between; margin: 12px 6px 4px; color: var(--suave); font: 600 13px var(--texto); }
.ch { position: relative; display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 10px; border-radius: 13px; color: var(--suave); cursor: pointer; transition: background .2s, color .2s, transform .25s var(--mola); }
.ch .ic { opacity: .75; }
.ch:hover { background: var(--vidro); color: var(--espuma); transform: translateX(3px); }
.ch.active { background: var(--vidro-2); color: var(--espuma); }
.ch.active::before { content: ""; position: absolute; left: -2px; top: 9px; bottom: 9px; width: 4px; border-radius: 4px; background: linear-gradient(var(--lavanda), var(--gelo)); animation: cresce .35s var(--mola); }
.ch .del { margin-left: auto; opacity: 0; color: var(--suave); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; transition: opacity .2s, background .2s; }
.ch:hover .del { opacity: 1; }
.ch .del:hover { background: var(--rubi); color: #fff; }
.unread { width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: var(--rubi); box-shadow: 0 0 10px var(--rubi); animation: pop .4s var(--mola); }
.dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--menta); box-shadow: 0 0 8px rgba(61,255,176,.7); }
.dot.off { background: #4a4f6b; box-shadow: none; }
.members { padding: 2px 0 6px 20px; display: grid; gap: 2px; }
.member { display: flex; align-items: center; gap: 9px; padding: 3px 8px; margin-right: 4px; border-radius: 12px; font-size: 14px; animation: pop .45s var(--mola) both; }
.member .avatar { width: 26px; height: 26px; font-size: 12px; }
.badge { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--rubi); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; animation: pulsa 1.8s ease-in-out infinite; }
.spacer { flex: 1; min-height: 12px; }

.avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: #fff; font: 700 14px var(--titulo); text-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 0 rgba(var(--lavanda-rgb),0); transition: box-shadow .25s, transform .35s var(--mola); }
.speaking > .avatar, .avatar.speaking, #userbar.speaking .avatar { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 3px var(--lavanda), 0 0 22px 4px rgba(var(--lavanda-rgb),.6); }

/* cartão "na roda" + barra do usuário */
#voice-status { display: grid; gap: 10px; margin: 10px 0 8px; padding: 12px; border-radius: 22px; background: linear-gradient(150deg, rgba(var(--gelo-rgb),.22), rgba(var(--lavanda-rgb),.08)); border: 1px solid rgba(var(--lavanda-rgb),.35); animation: pop .5s var(--mola); }
.vs-head { display: flex; align-items: center; gap: 10px; }
.vs-head b { display: block; font: 700 15px var(--titulo); }
.vs-head small { color: var(--suave); }
.vs-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lavanda); animation: onda 1.8s ease-out infinite; }
#voice-status .row { display: flex; gap: 8px; }
#voice-status .pill-btn { flex: 1; justify-content: center; padding: 0 10px; }
#userbar { display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 22px; background: rgba(0,0,0,.22); }
#userbar .avatar { width: 36px; height: 36px; }
#userbar #me-name { flex: 1; min-width: 0; padding-left: 4px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#userbar .icon-btn { width: 32px; height: 32px; background: none; }
#userbar .icon-btn:hover { background: var(--vidro-2); }
#userbar .icon-btn.on { background: var(--rubi); }

/* ---------- centro ---------- */
main { display: flex; flex-direction: column; overflow: hidden; }
#chat-title { display: flex; align-items: center; gap: 8px; padding: 14px 18px 10px 24px; }
#chat-name { font: 700 24px/1.1 var(--titulo); letter-spacing: -.02em; }

/* a roda */
#roda { position: relative; margin: 4px 16px 10px; padding: 16px; border-radius: var(--r-lg); display: grid; place-items: center; min-height: 290px;
  background: radial-gradient(circle at 50% 50%, rgba(var(--gelo-rgb),.16), transparent 62%), rgba(0,0,0,.2); border: 1px solid var(--linha); animation: pop .6s var(--mola); transition: min-height .5s var(--suave-out); }
.roda-ring { --size: 220px; position: relative; width: var(--size); height: var(--size); }
.roda-core { position: absolute; inset: 27%; display: grid; place-content: center; text-align: center; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.22); }
.roda-core b { font: 700 17px/1.1 var(--titulo); }
.roda-core small { color: var(--suave); font-size: 12px; }
.seat { position: absolute; left: 50%; top: 50%; width: 76px; margin: -32px 0 0 -38px; display: grid; justify-items: center; gap: 5px; text-align: center; font-size: 12px; font-weight: 600;
  transform: rotate(var(--a)) translateY(calc(var(--size) / -2)) rotate(calc(var(--a) * -1)); animation: senta .7s var(--mola) both; animation-delay: calc(var(--i) * 60ms); }
.seat .avatar { width: 64px; height: 64px; font-size: 24px; position: relative; }
.seat .nm { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.seat.speaking .avatar { transform: scale(1.14); }
.seat.speaking .avatar::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--lavanda); animation: ondaBorda 1.3s ease-out infinite; }
.seat .estado { position: absolute; right: 2px; top: 44px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--rubi); color: #fff; font-size: 12px; border: 2px solid var(--obsidiana-2); }
.seat .ao-vivo { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; background: var(--rubi); color: #fff; font-size: 10px; letter-spacing: .05em; }
#roda.compacta { min-height: 0; padding: 10px 14px; justify-items: start; }
#roda.compacta .roda-ring { --size: auto; width: auto; height: auto; display: flex; gap: 12px; flex-wrap: wrap; }
#roda.compacta .roda-core { display: none; }
#roda.compacta .seat { position: static; margin: 0; width: auto; grid-auto-flow: column; align-items: center; gap: 8px; transform: none; animation-name: pop; }
#roda.compacta .seat .avatar { width: 38px; height: 38px; font-size: 15px; }
#roda.compacta .seat .estado, #roda.compacta .seat .ao-vivo { display: none; }
@keyframes senta { from { opacity: 0; transform: rotate(calc(var(--a) - 40deg)) translateY(calc(var(--size) / -2 + 26px)) rotate(calc((var(--a) - 40deg) * -1)) scale(.6); } }

/* telas compartilhadas */
#stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 10px; margin: 0 16px 10px; max-height: 66vh; overflow-y: auto; flex: 0 1 auto; scrollbar-width: none; }
#stage[data-count="1"] { grid-template-columns: minmax(0, 1100px); justify-content: center; }
.tile { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #04050d; border: 1px solid var(--linha); cursor: pointer; animation: zoom .55s var(--mola) both; transition: transform .3s var(--mola), box-shadow .3s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); }
.tile video { width: 100%; height: 100%; object-fit: contain; }
.tile .label { position: absolute; left: 10px; bottom: 10px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(7,9,22,.68); backdrop-filter: blur(10px); border: 1px solid var(--linha); }
.tile.focused { box-shadow: 0 0 0 2px var(--gelo), 0 20px 44px -16px rgba(var(--gelo-rgb),.55); }
#stage.focus { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
#stage.focus .tile { flex: 0 0 200px; }
#stage.focus .tile.focused { flex: 0 0 min(100%, calc(56vh * 16 / 9)); order: -1; }

/* conversa: balões */
#messages { flex: 1; min-height: 100px; overflow-y: auto; padding: 6px 22px 8px; display: flex; flex-direction: column; gap: 4px; }
#messages::before { content: ""; flex: 1; } /* mensagens ficam coladas embaixo */
.msg { position: relative; display: flex; align-items: flex-start; gap: 14px; max-width: 100%; margin: 0 -8px; padding: 6px 54px 6px 12px; border-radius: 14px; border-left: 3px solid transparent; transition: background .2s; }
.msg:hover { background: rgba(255,255,255,.04); }
.msg.fresh { animation: balao .45s var(--mola) both; }
.msg .avatar { width: 40px; height: 40px; flex: none; margin-top: 2px; }
.msg .body { flex: 1; min-width: 0; word-break: break-word; }
.msg .body > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.msg b { font: 700 15px var(--titulo); }
.msg time { color: var(--suave); font-size: 11.5px; }
.msg .text { margin-top: 2px; }
.msg .edited { color: var(--suave); font-size: 11px; margin-left: 6px; }
.msg .actions-m { position: absolute; right: 10px; top: -10px; display: none; gap: 2px; padding: 2px; border-radius: 12px; background: rgba(13,15,32,.95); border: 1px solid var(--linha); }
.msg:hover .actions-m { display: flex; }
.msg .actions-m button { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--suave); }
.msg .actions-m button:hover { background: rgba(255,255,255,.1); color: var(--espuma); }
.msg-edit { padding: 6px 10px; width: 100%; }
/* mensagens seguidas da mesma pessoa: sem foto nem nome, só a hora ao passar o mouse */
.msg.grouped { padding-top: 1px; padding-bottom: 1px; }
.msg.grouped .avatar { visibility: hidden; height: 0; margin: 0; }
.msg.grouped .body > div:first-child b, .msg.grouped .body > div:first-child > time { display: none; }
.msg .side { display: none; position: absolute; left: 12px; top: 5px; width: 40px; text-align: center; font-size: 10.5px; }
.msg:hover .side { display: block; }
/* a SUA mensagem (só você vê assim): fundo suave e uma barrinha na lateral */
.msg.mine { background: rgba(var(--lavanda-rgb), .09); border-left-color: var(--lavanda); }
.msg.mine:hover { background: rgba(var(--lavanda-rgb), .14); }

#composer { display: flex; gap: 8px; margin: 4px 16px 16px; padding: 7px; border-radius: 999px; background: rgba(0,0,0,.26); border: 1px solid var(--linha); transition: border-color .25s, box-shadow .25s; }
#composer:focus-within { border-color: var(--gelo); box-shadow: 0 0 0 4px rgba(var(--gelo-rgb),.18); }
#composer input { flex: 1; background: none; border: 0; box-shadow: none; padding: 0 14px; }
#composer input:focus { box-shadow: none; background: none; }
.send { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; }

/* turma */
#members { padding: 16px 8px; overflow-y: auto; }
.mgroup { margin: 12px 10px 4px; color: var(--suave); font: 600 13px var(--texto); }
.mrow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 15px; cursor: pointer; transition: background .2s, transform .25s var(--mola); }
.mrow:hover { background: var(--vidro); transform: translateX(3px); }
.mrow .avatar { position: relative; }
.mrow:not(.offline) .avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--menta); border: 2px solid #0d0f1c; }
.mrow.offline { opacity: .45; }
.mrow .nm { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mrow .nm .ic { color: var(--lavanda); }

/* ---------- janelas ---------- */
dialog { width: min(440px, 92vw); max-height: 88vh; overflow-y: auto; padding: 24px; color: var(--espuma); border: 1px solid var(--linha); border-radius: 30px;
  background: linear-gradient(160deg, rgba(26,28,58,.9), rgba(9,11,24,.95)); backdrop-filter: blur(30px) saturate(1.4); box-shadow: 0 40px 90px -30px #000, inset 0 1px 0 rgba(255,255,255,.14); }
dialog[open] { animation: abre .42s var(--mola); }
dialog::backdrop { background: rgba(1,2,8,.68); backdrop-filter: blur(6px); }
dialog h3 { margin: 0 0 12px; font: 700 24px/1.1 var(--titulo); letter-spacing: -.02em; }
dialog label { display: grid; gap: 5px; margin: 12px 0; color: var(--suave); font-size: 13px; }
dialog label.check { display: flex; align-items: center; gap: 9px; color: var(--espuma); font-size: 14px; }
.inline { display: flex; gap: 8px; }
.inline input { flex: 1; min-width: 0; }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
#form-forgot-1, #form-forgot-2 { display: grid; gap: 10px; margin-bottom: 8px; }
#form-forgot-1[hidden], #form-forgot-2[hidden] { display: none; }
#mb-code { color: var(--espuma); background: rgba(0,0,0,.28); border-radius: 14px; padding: 10px 12px; user-select: all; }
#roles-list, #mb-roles { display: grid; gap: 6px; margin: 8px 0; }
.role-row { display: flex; align-items: center; gap: 9px; }
.role-row .sw, .sw { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.role-row .grow { overflow: hidden; text-overflow: ellipsis; }
#role-perms { display: grid; gap: 5px; margin: 8px 0; }
#form-role { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
dialog button .ic { vertical-align: -3px; }

/* aviso */
#toast { position: fixed; top: 18px; left: 50%; z-index: 20; max-width: min(560px, 90vw); padding: 11px 20px; border-radius: 999px; font-weight: 500; transform: translateX(-50%);
  background: rgba(13,15,32,.88); backdrop-filter: blur(20px); border: 1px solid var(--linha); box-shadow: 0 18px 40px -16px #000; animation: desce .5s var(--mola); }

/* ---------- movimento ---------- */
@keyframes pop { from { opacity: 0; transform: scale(.86); } }
@keyframes zoom { from { opacity: 0; transform: scale(.9) translateY(10px); } }
@keyframes balao { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@keyframes abre { from { opacity: 0; transform: translateY(16px) scale(.94); filter: blur(6px); } }
@keyframes desce { from { opacity: 0; transform: translate(-50%, -16px) scale(.92); } }
@keyframes onda { 0% { box-shadow: 0 0 0 0 rgba(var(--lavanda-rgb),.55); } 100% { box-shadow: 0 0 0 16px rgba(var(--lavanda-rgb),0); } }
@keyframes ondaBorda { from { transform: scale(1); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@keyframes pulsa { 50% { box-shadow: 0 0 0 5px rgba(var(--rubi-rgb),.25); } }
@keyframes fala { 0%, 100% { transform: rotate(calc(var(--n) * 45deg)) translateY(-86px) rotate(calc(var(--n) * -45deg)) scale(1); } 50% { transform: rotate(calc(var(--n) * 45deg)) translateY(-86px) rotate(calc(var(--n) * -45deg)) scale(1.35); box-shadow: 0 0 0 10px rgba(var(--lavanda-rgb),.25), 0 0 34px rgba(var(--lavanda-rgb),.7); } }

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

/* ---------- telas menores ---------- */
@media (max-width: 1180px) {
  #app, #app:has(#members[hidden]) { grid-template-columns: 64px 236px minmax(0, 1fr); }
  #members { position: fixed; right: 12px; top: 12px; bottom: 12px; width: 250px; z-index: 5; background: rgba(9,11,24,.95); }
}
@media (max-width: 860px) {
  #login { grid-template-columns: 1fr; align-content: center; gap: 24px; padding: 28px; }
  #login-form { justify-self: stretch; max-width: none; }
  .wheel { width: 150px; height: 150px; }
  #app, #app:has(#members[hidden]) { grid-template-columns: 58px minmax(0, 1fr); }
  #sidebar { position: fixed; left: 78px; top: 12px; bottom: 12px; width: min(280px, 70vw); z-index: 4; background: rgba(9,11,24,.96); transform: translateX(-130%); transition: transform .4s var(--suave-out); }
  #rail:hover ~ #sidebar, #sidebar:hover, #sidebar:focus-within { transform: none; }
}

/* ajustes finos dos controles de voz */
.roda-ring.quieto .seat { animation: none; }
#voice-status .icon-btn { flex: none; background: var(--vidro-2); }
#voice-status .icon-btn.on { background: linear-gradient(120deg, var(--lavanda), var(--gelo)); color: var(--tinta); }
#voice-status .pill-btn.on { background: linear-gradient(120deg, var(--lavanda), var(--gelo)); color: var(--tinta); }
.badge { text-transform: none; }

/* login em telas baixas ou estreitas: rola em vez de cortar */
#login { overflow-y: auto; align-content: safe center; }
@media (max-width: 860px), (max-height: 720px) {
  .wheel { zoom: .6; margin-bottom: 0; }
  .wordmark { font-size: clamp(48px, 12vw, 84px); }
  .tagline { margin-top: 10px; }
}

/* correções de encaixe */
#sidebar { overflow-x: hidden; }
#voice-status .row { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px; }
#voice-status .pill-btn { min-width: 0; padding: 0 10px; gap: 6px; }
#voice-status .pill-btn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#roda.compacta .seat .nm { max-width: none; font-size: 13px; }
.seat .nm { max-width: 92px; }

/* a roda precisa de folga para os lugares e nomes */
#roda { min-height: 0; padding: 62px 16px 70px; }
#roda.compacta { padding: 10px 14px; }

/* lateral: a lista rola; o cartão da voz e a barra do usuário ficam sempre visíveis embaixo */
#sidebar { overflow: hidden; }
#server-view, #home-view { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; }
.spacer { display: none; }
#voice-status, #userbar { flex: none; }
.members { padding-left: 14px; }

/* encaixe final: lateral um pouco mais larga e tela única sempre inteira na janela */
#app { grid-template-columns: 68px var(--w-side, 284px) minmax(0, 1fr) var(--w-mem, 236px); }
#app:has(#members[hidden]) { grid-template-columns: 68px var(--w-side, 284px) minmax(0, 1fr); }
#voice-status { padding: 10px; }
#voice-status .row { gap: 6px; }
#voice-status .icon-btn { width: 36px; height: 36px; }
#voice-status .pill-btn { height: 36px; padding: 0 8px; gap: 5px; font-size: 14px; justify-content: center; }
#stage[data-count="1"] { grid-template-columns: minmax(0, min(1100px, calc((100vh - 360px) * 16 / 9))); }
@media (max-width: 1180px) {
  #app, #app:has(#members[hidden]) { grid-template-columns: 64px 256px minmax(0, 1fr); }
}

/* =========================================================================
   Movimento v2 — só transform/opacity (leve para a GPU)
   ========================================================================= */

/* login: o logotipo se revela, as bolinhas brotam do centro, o formulário entra em cascata */
@keyframes revela { from { clip-path: inset(0 100% 0 0); filter: blur(14px); opacity: 0; } to { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 1; } }
.wordmark { animation: revela 1.1s var(--suave-out) .25s both, brilho 9s ease-in-out 1.4s infinite alternate; }
@keyframes brota { from { opacity: 0; transform: rotate(calc(var(--n) * 45deg)) translateY(0) rotate(calc(var(--n) * -45deg)) scale(.2); } }
.wheel i { animation: brota .9s var(--mola) both; animation-delay: calc(var(--n) * 70ms + .1s); }
.wheel i:nth-child(4) { animation: brota .9s var(--mola) .38s both, fala 2.4s ease-in-out 1.6s infinite; }
@keyframes sobe-leve { from { opacity: 0; transform: translateY(14px); } }
.tagline { animation: sobe-leve .8s var(--suave-out) .7s both; }
#login-form > * { animation: sobe-leve .6s var(--suave-out) both; }
#login-form > :nth-child(1) { animation-delay: .5s; } #login-form > :nth-child(2) { animation-delay: .56s; }
#login-form > :nth-child(3) { animation-delay: .62s; } #login-form > :nth-child(4) { animation-delay: .68s; }
#login-form > :nth-child(5) { animation-delay: .74s; } #login-form > :nth-child(6) { animation-delay: .8s; }
#login-form > :nth-child(7) { animation-delay: .86s; } #login-form > :nth-child(8) { animation-delay: .92s; }
/* do login para o app: o login se dissolve enquanto os painéis sobem */
#login.saindo { animation: sai .5s var(--suave-out) forwards; pointer-events: none; }
@keyframes sai { to { opacity: 0; transform: scale(1.05); filter: blur(12px); } }

/* o fundo reage ao mouse (propriedade `translate`, independente da animação de deriva) */
#aurora i { translate: calc(var(--px, 0) * var(--k, 0) * 1px) calc(var(--py, 0) * var(--k, 0) * 1px); transition: translate .9s ease-out; }
#aurora i:nth-child(1) { --k: 38; } #aurora i:nth-child(2) { --k: -28; } #aurora i:nth-child(3) { --k: 20; }

/* onda de toque nos botões */
.icon-btn, .pill-btn, .primary, #auth-submit, .send, .chip { position: relative; overflow: hidden; }
.rip { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.38); transform: scale(0); animation: ripple .65s ease-out forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* a roda ganha vida: lugares flutuam, o centro respira, quem fala mostra um equalizador */
@keyframes flutua { 50% { translate: 0 -6px; } }
.seat .avatar { animation: flutua 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
#roda.compacta .seat .avatar { animation: none; }
@keyframes respira { 50% { transform: scale(1.05); border-color: rgba(var(--lavanda-rgb),.55); } }
.roda-core { animation: respira 6s ease-in-out infinite; }
.seat .eq { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); display: none; align-items: flex-end; gap: 3px; height: 18px; padding: 4px 8px; border-radius: 999px; background: rgba(5,6,11,.78); border: 1px solid var(--linha); }
.seat.speaking .eq { display: flex; animation: pop .3s var(--mola); }
.seat .eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--gelo); transform-origin: bottom; animation: barra .7s ease-in-out infinite; }
.seat .eq i:nth-child(2) { animation-delay: -.25s; background: var(--lavanda); }
.seat .eq i:nth-child(3) { animation-delay: -.5s; }
@keyframes barra { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
#roda.compacta .seat .eq { display: none !important; }

/* trocar de conversa/servidor: só a área de mensagens faz a transição */
#messages { view-transition-name: chat; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(chat) { animation: vtout .14s ease both; }
::view-transition-new(chat) { animation: vtin .34s var(--mola) both; }
@keyframes vtout { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtin { from { opacity: 0; transform: translateY(16px); } }

/* mais vida nos detalhes */
.rail-btn:hover .ic, .icon-btn:hover .ic { animation: balanca .5s var(--mola); }
@keyframes balanca { 40% { transform: rotate(-10deg) scale(1.12); } 70% { transform: rotate(6deg); } }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pisca 1.2s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .25; } }
#composer .send { transition: transform .25s var(--mola); }
#composer:focus-within .send { transform: rotate(-12deg) scale(1.06); }

/* barra do usuário: mais espaço para o nome */
#userbar { gap: 2px; padding: 8px 6px; }
#userbar .avatar { width: 34px; height: 34px; margin-right: 4px; }
#userbar .icon-btn { width: 28px; height: 28px; font-size: 14px; }

/* =========================================================================
   Celular e telas estreitas
   ========================================================================= */
#btn-nav, #nav-backdrop { display: none; }
@media (max-width: 860px) {
  html, body { height: 100dvh; }
  #app, #app:has(#members[hidden]) { grid-template-columns: minmax(0, 1fr); gap: 0; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  #app > main { min-width: 0; }
  #rail { position: fixed; left: 8px; top: 8px; bottom: 8px; width: 58px; z-index: 22; transform: translateX(-130%); transition: transform .35s var(--suave-out); }
  #sidebar, #rail:hover ~ #sidebar, #sidebar:hover, #sidebar:focus-within { position: fixed; left: 74px; top: 8px; bottom: 8px; width: min(300px, calc(100vw - 90px)); z-index: 21; transform: translateX(-130%); transition: transform .35s var(--suave-out); }
  #app.nav-open #rail, #app.nav-open #sidebar { transform: none; }
  #nav-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .3s; }
  #app.nav-open #nav-backdrop { display: block; opacity: 1; pointer-events: auto; }
  #btn-nav { display: grid; }
  #members { left: 8px; right: 8px; width: auto; top: 8px; bottom: 8px; z-index: 19; }
  .rz { display: none !important; }
  #chat-title { padding: 10px 10px 6px 10px; }
  #chat-name { font-size: 20px; }
  #chat-sub { display: none; }
  #chat-title .icon-btn { width: 40px; height: 40px; }
  #messages { padding: 8px 10px; }
  #composer { margin: 4px 8px 8px; }
  input, textarea, select { font-size: 16px; } /* evita o zoom automático do iPhone ao tocar no campo */
  dialog { width: calc(100vw - 16px); max-width: none; max-height: calc(100dvh - 16px); padding: 18px; border-radius: 24px; }
  #dlg-fun .tabs, dialog .tabs { overflow-x: auto; flex-wrap: nowrap; }
  #userbar { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .msg .att img, .msg .att video { max-width: 100%; height: auto; }
  #watch-panel { left: 8px; right: 8px; width: auto; bottom: 80px; }
}
@media (hover: none) { .icon-btn:hover, .rail-btn:hover { transform: none; } }