/* Identidade visual DiscMotiva - base do ReadyRoom (Bootstrap 5 dark + Inter)
com paleta própria, camada de motion design e shell de chat estilo Discord
(rail + canais + chat + membros). Ver DOCUMENTACAO_TECNICA.md. */
:root {
--dm-primary: #007BBB;
--dm-primary-rgb: 0, 123, 187;
--dm-secondary: #0B2545;
--dm-secondary-rgb: 11, 37, 69;
--dm-accent: #22D3EE;
--dm-accent-rgb: 34, 211, 238;
--dm-success: #1F9D55;
/* Cor de texto/realces translúcidos. É branco no escuro (nada muda) e vira
escuro no tema claro - por isso os rgba(...) do CSS usam esta variável. */
--dm-fg-rgb: 255, 255, 255;
/* Fundo da página: gradiente COMPLEMENTAR ao tema (não sólido). Cada tema o
redefine com o próprio tom; as duas luzes de accent ficam por cima (body). */
--dm-bg: radial-gradient(circle at 50% -12%, #131a26, #0d111a 62%);
/* Superfícies do shell de chat (mais escuro -> mais claro) */
--dm-rail: #0a101c;
--dm-col: #101827;
--dm-main: #141c2b;
--dm-raised: #1c2536;
--dm-ease: cubic-bezier(0.22, 1, 0.36, 1);
--dm-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ---------- Temas (paleta trocável no perfil) --------------------------------
Cada tema sobrescreve só o trio primary/secondary/accent (+ rgb) sobre o mesmo
shell escuro. Como botões, gradientes, foco e até o brilho do fundo referenciam
essas variáveis, trocar aqui muda o app inteiro. Seleciona-se por [data-theme]
em QUALQUER elemento: o recebe o tema global; cada miniatura do perfil
recebe o seu, então mostra a própria paleta independente do tema ativo. */
[data-theme="padrao"] {
--dm-primary: #007BBB; --dm-primary-rgb: 0, 123, 187;
--dm-secondary: #0B2545; --dm-secondary-rgb: 11, 37, 69;
--dm-accent: #22D3EE; --dm-accent-rgb: 34, 211, 238;
--dm-bg: radial-gradient(circle at 50% -12%, #131a26, #0d111a 62%);
}
[data-theme="ametista"] {
--dm-primary: #7C3AED; --dm-primary-rgb: 124, 58, 237;
--dm-secondary: #2E1065; --dm-secondary-rgb: 46, 16, 101;
--dm-accent: #C084FC; --dm-accent-rgb: 192, 132, 252;
--dm-bg: radial-gradient(circle at 50% -12%, #17102a, #0d0a16 62%);
}
[data-theme="esmeralda"] {
--dm-primary: #059669; --dm-primary-rgb: 5, 150, 105;
--dm-secondary: #064E3B; --dm-secondary-rgb: 6, 78, 59;
--dm-accent: #34D399; --dm-accent-rgb: 52, 211, 153;
--dm-bg: radial-gradient(circle at 50% -12%, #0c1c16, #07110c 62%);
}
[data-theme="por-do-sol"] {
--dm-primary: #EA580C; --dm-primary-rgb: 234, 88, 12;
--dm-secondary: #4A1D05; --dm-secondary-rgb: 74, 29, 5;
--dm-accent: #FBBF24; --dm-accent-rgb: 251, 191, 36;
--dm-bg: radial-gradient(circle at 50% -12%, #1e140b, #110b05 62%);
}
[data-theme="framboesa"] {
--dm-primary: #DB2777; --dm-primary-rgb: 219, 39, 119;
--dm-secondary: #500724; --dm-secondary-rgb: 80, 7, 36;
--dm-accent: #F472B6; --dm-accent-rgb: 244, 114, 182;
--dm-bg: radial-gradient(circle at 50% -12%, #1f0f18, #11080d 62%);
}
[data-theme="grafite"] {
--dm-primary: #64748B; --dm-primary-rgb: 100, 116, 139;
--dm-secondary: #1E293B; --dm-secondary-rgb: 30, 41, 59;
--dm-accent: #94A3B8; --dm-accent-rgb: 148, 163, 184;
--dm-bg: radial-gradient(circle at 50% -12%, #161b24, #0c0f15 62%);
}
/* Tema CLARO: inverte a cor de texto (--dm-fg-rgb vira escuro), clareia as
superfícies do shell e o fundo. O também recebe data-bs-theme="light"
(script no ), então os componentes do Bootstrap acompanham. */
[data-theme="claro"] {
--dm-fg-rgb: 28, 37, 54;
--dm-primary: #0369A1; --dm-primary-rgb: 3, 105, 161;
--dm-secondary: #0B2545; --dm-secondary-rgb: 11, 37, 69;
--dm-accent: #0891B2; --dm-accent-rgb: 8, 145, 178;
--dm-bg: radial-gradient(circle at 50% -12%, #f4f8fd, #e7eef7 70%);
--dm-rail: #dce4ef;
--dm-col: #e9eff6;
--dm-main: #f5f8fc;
--dm-raised: #ffffff;
}
/* ---------- Seletor de temas + miniaturas (perfil) ---------- */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 0.8rem; }
.theme-card {
display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; cursor: pointer; text-align: left;
background: rgba(var(--dm-fg-rgb), 0.03); border: 1px solid rgba(var(--dm-fg-rgb), 0.1);
border-radius: 12px; transition: border-color 0.15s var(--dm-ease), transform 0.15s var(--dm-ease);
}
.theme-card:hover { transform: translateY(-2px); border-color: rgba(var(--dm-fg-rgb), 0.28); }
.theme-card.active { border-color: var(--dm-accent); box-shadow: 0 0 0 1px var(--dm-accent); }
.theme-card-name { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; font-weight: 600; padding: 0 0.15rem; }
.theme-card-check { color: var(--dm-accent); opacity: 0; transition: opacity 0.15s; }
.theme-card.active .theme-card-check { opacity: 1; }
/* Miniatura = mini-app na paleta do PRÓPRIO card ([data-theme] no elemento). */
.theme-preview {
height: 84px; border-radius: 8px; overflow: hidden; display: flex;
background:
radial-gradient(circle at 12% 0%, rgba(var(--dm-primary-rgb), 0.30), transparent 55%),
radial-gradient(circle at 92% 115%, rgba(var(--dm-accent-rgb), 0.22), transparent 55%),
var(--dm-bg);
}
.tp-rail { width: 22px; background: var(--dm-rail); display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; }
.tp-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(var(--dm-fg-rgb), 0.16); }
.tp-dot.on { border-radius: 30%; background: linear-gradient(135deg, var(--dm-primary), var(--dm-accent)); }
.tp-main { flex: 1; padding: 7px 8px; display: flex; flex-direction: column; gap: 5px; }
.tp-head { height: 8px; width: 62%; border-radius: 3px; background: linear-gradient(90deg, var(--dm-primary), var(--dm-secondary)); }
.tp-msg { height: 6px; border-radius: 3px; background: rgba(var(--dm-fg-rgb), 0.14); }
.tp-msg.short { width: 45%; }
.tp-msg.me { width: 68%; align-self: flex-end; background: linear-gradient(135deg, var(--dm-primary), var(--dm-accent)); }
.tp-btn { margin-top: auto; height: 10px; width: 42px; border-radius: 4px; align-self: flex-start; background: linear-gradient(135deg, var(--dm-primary), var(--dm-accent)); }
* {
scrollbar-color: rgba(var(--dm-primary-rgb), 0.5) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(var(--dm-primary-rgb), 0.45);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(var(--dm-primary-rgb), 0.7);
background-clip: padding-box;
}
body {
font-family: "Inter", system-ui, sans-serif;
background:
radial-gradient(circle at 15% 0%, rgba(var(--dm-primary-rgb), 0.12), transparent 46%),
radial-gradient(circle at 85% 100%, rgba(var(--dm-accent-rgb), 0.10), transparent 46%),
var(--dm-bg);
background-attachment: fixed;
animation: bodyFadeIn 0.4s var(--dm-ease) both;
}
@keyframes bodyFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.55s var(--dm-ease) both; }
/* ---------- Avatares (chat, membros, painel do usuário) ---------- */
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 50%;
background: hsl(var(--hue, 205) 55% 42%);
color: #fff;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.02em;
transition: transform 0.2s var(--dm-ease-snap);
}
.avatar:hover { transform: scale(1.08); }
.avatar-sm { width: 30px; height: 30px; font-size: 0.66rem; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.5rem; }
.avatar-spacer { width: 38px; flex-shrink: 0; }
/* Avatar renderizado como ![]()
(foto de perfil) - cobre o círculo */
img.avatar { object-fit: cover; background: #0d1420; }
/* ---------- Tela de login ---------- */
.auth-shell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
}
.auth-blob {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: 0.55;
pointer-events: none;
z-index: 0;
animation: blobFloat 16s ease-in-out infinite alternate;
}
.auth-blob-1 {
width: 420px; height: 420px; top: -120px; left: -100px;
background: radial-gradient(circle, var(--dm-primary), transparent 70%);
animation-duration: 18s;
}
.auth-blob-2 {
width: 380px; height: 380px; bottom: -140px; right: -100px;
background: radial-gradient(circle, var(--dm-accent), transparent 70%);
animation-duration: 22s;
animation-delay: -4s;
}
.auth-blob-3 {
width: 280px; height: 280px; bottom: 10%; left: 8%;
background: radial-gradient(circle, var(--dm-secondary), transparent 70%);
animation-duration: 14s;
animation-delay: -8s;
opacity: 0.4;
}
@keyframes blobFloat {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(30px, -20px) scale(1.08); }
100% { transform: translate(-20px, 25px) scale(0.96); }
}
.card-auth {
position: relative;
z-index: 1;
width: 100%;
max-width: 380px;
background: rgba(23, 28, 37, 0.72) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(var(--dm-fg-rgb), 0.06) !important;
}
/* ---------- Login: foco minimal (sem card) ---------- */
/* Coluna central sem card: a marca e os campos sobre o fundo do app. */
.auth-focus {
position: relative;
z-index: 1;
width: 100%;
max-width: 340px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.auth-focus-head {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
margin-bottom: 0.6rem;
}
.auth-focus-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; margin: 0.35rem 0 0; }
.auth-focus-sub { color: rgba(var(--dm-fg-rgb), 0.6); font-size: 0.85rem; margin: 0; max-width: 32ch; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; }
.auth-label { font-size: 0.8rem; font-weight: 600; color: rgba(var(--dm-fg-rgb), 0.75); }
.auth-err { font-size: 0.78rem; color: #ff9c9c; }
.auth-pass { position: relative; display: block; }
.auth-pass .form-control { padding-right: 2.7rem; }
.auth-pass-toggle {
position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
width: 2rem; height: 2rem; border: none; background: none; cursor: pointer;
color: rgba(var(--dm-fg-rgb), 0.5); border-radius: 6px;
display: flex; align-items: center; justify-content: center;
transition: color 0.15s var(--dm-ease), background 0.15s var(--dm-ease);
}
.auth-pass-toggle:hover { color: #fff; background: rgba(var(--dm-fg-rgb), 0.08); }
.auth-pass-toggle.on { color: var(--dm-accent); }
.auth-caps { font-size: 0.76rem; color: #ffcf7a; }
.auth-caps[hidden] { display: none; }
.auth-submit { margin-top: 0.4rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.auth-submit.is-loading { opacity: 0.9; pointer-events: none; }
.auth-spin {
display: none; width: 1rem; height: 1rem; border-radius: 50%;
border: 2px solid rgba(var(--dm-fg-rgb), 0.5); border-top-color: #fff;
animation: authSpin 0.6s linear infinite;
}
.auth-submit.is-loading .auth-spin { display: inline-block; }
@keyframes authSpin { to { transform: rotate(360deg); } }
/* ---------- Marca ---------- */
.brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: linear-gradient(135deg, var(--dm-primary), var(--dm-accent));
color: #fff;
font-weight: 700;
font-size: 0.75rem;
box-shadow: 0 0 0 0 rgba(var(--dm-primary-rgb), 0.55);
animation: brandPulse 3.2s ease-in-out infinite;
}
.brand-mark-lg { width: 44px; height: 44px; font-size: 1.05rem; border-radius: 12px; }
.brand-mark-xl { width: 72px; height: 72px; font-size: 1.6rem; border-radius: 20px; }
@keyframes brandPulse {
0% { box-shadow: 0 0 0 0 rgba(var(--dm-primary-rgb), 0.45); }
70% { box-shadow: 0 0 0 10px rgba(var(--dm-primary-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--dm-primary-rgb), 0); }
}
.online-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--dm-success);
box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.6);
animation: onlinePulse 2.2s ease-in-out infinite;
}
@keyframes onlinePulse {
0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.55); }
70% { box-shadow: 0 0 0 6px rgba(31, 157, 85, 0); }
100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); }
}
/* ---------- Botões e formulários ---------- */
.btn {
transition: transform 0.15s var(--dm-ease-snap), box-shadow 0.25s var(--dm-ease), filter 0.2s var(--dm-ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn-primary {
background: linear-gradient(135deg, var(--dm-primary), #0091d6);
border-color: var(--dm-primary);
}
.btn-primary:hover {
background: linear-gradient(135deg, #0091d6, var(--dm-accent));
border-color: var(--dm-accent);
box-shadow: 0 6px 18px -6px rgba(var(--dm-primary-rgb), 0.6);
}
.btn-send.is-sending { animation: sendPulse 0.3s var(--dm-ease-snap); }
@keyframes sendPulse {
0% { transform: scale(1); } 50% { transform: scale(0.9); } 100% { transform: scale(1); }
}
.form-control, .form-select {
transition: border-color 0.2s var(--dm-ease), box-shadow 0.2s var(--dm-ease), background-color 0.2s var(--dm-ease);
}
.form-control:focus, .form-select:focus {
border-color: var(--dm-primary);
box-shadow: 0 0 0 0.2rem rgba(var(--dm-primary-rgb), 0.22);
}
/* ================================================================
SHELL DE CHAT (estilo Discord): rail | canais | chat | membros
================================================================ */
body.chat-shell {
overflow: hidden;
animation: none;
}
.chat-app {
position: relative;
display: grid;
grid-template-columns: var(--rail-w, 72px) var(--chan-w, 240px) 1fr 240px;
height: 100vh;
height: 100dvh; /* mobile: desconta a barra do navegador (evita corte/scroll) */
animation: bodyFadeIn 0.35s var(--dm-ease) both;
}
/* Home (listagem geral): sem a coluna de canais - só rail | conteúdo | membros.
3 faixas (a coluna oculta sai do grid), então o conteúdo herda o 1fr. */
.chat-app.no-channel-col { grid-template-columns: var(--rail-w, 72px) 1fr 240px; }
.chat-app.no-channel-col .channel-col,
.chat-app.no-channel-col .chan-resizer { display: none; }
/* ---------- Coluna 1: rail ---------- */
.rail {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 14px 0;
background: var(--dm-rail);
/* A rail INTEIRA não rola: quem rola é só a faixa dos servidores, senão em
produção (muitos servidores) os botões de baixo - acesso/permissões,
auditoria, sair - eram empurrados para fora da tela. */
overflow: hidden;
min-height: 0;
}
.rail > * { flex-shrink: 0; }
/* Faixa rolável: os servidores e o "+". Come a sobra de altura (flex:1), então
é ela que empurra o rodapé para baixo (antes isso era papel de um spacer). */
.rail-scroll {
flex: 1;
min-height: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain; /* rolar até o fim não arrasta a página */
scrollbar-width: none; /* Firefox: sem barra visível */
}
.rail-scroll::-webkit-scrollbar { width: 0; height: 0; } /* WebKit: idem */
.rail-scroll > * { flex-shrink: 0; }
/* Rodapé fixo da rail: sempre visível, não importa quantos servidores existam. */
.rail-foot {
flex-shrink: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
/* Perfil no rodapé da rail: o avatar É o botão (mesmo círculo de 46px dos
vizinhos). O nome e o papel, que antes ficavam no cartão do rodapé da coluna
de canais, agora vivem no title - a rail é estreita demais para texto. */
.rail-me {
position: relative;
overflow: visible; /* o pip de "online" fica FORA do círculo */
padding: 0;
background: none; /* quem pinta é a foto/iniciais */
/* Borda: separa o avatar do fundo da rail (foto escura encostava no preto).
Com box-sizing:border-box o botão continua com 46px - quem cede 2px de
cada lado é a foto/iniciais lá dentro. */
border: 2px solid rgba(var(--dm-fg-rgb), 0.22);
transition: border-color 0.2s var(--dm-ease),
border-radius 0.25s var(--dm-ease),
transform 0.2s var(--dm-ease-snap);
}
.rail-me:hover { border-color: rgba(var(--dm-fg-rgb), 0.55); }
.rail-me.active { border-color: var(--dm-accent); }
.rail-me-img,
.rail-me-iniciais {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
pointer-events: none; /* o clique cai sempre no */
}
.rail-me-iniciais {
display: flex;
align-items: center;
justify-content: center;
background: hsl(var(--hue, 205) 55% 38%);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
}
/* Pip de presença, encostado na borda do avatar e recortado do fundo da rail. */
.rail-me-dot {
position: absolute;
right: -1px;
bottom: -1px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--dm-success);
border: 3px solid var(--dm-rail);
pointer-events: none;
}
.rail-me:hover,
.rail-me.active { border-radius: 30%; }
.rail-me:hover .rail-me-img,
.rail-me:hover .rail-me-iniciais,
.rail-me.active .rail-me-img,
.rail-me.active .rail-me-iniciais { border-radius: 30%; }
/* Alças para ajustar a largura das colunas (arrastar). Na borda direita de cada. */
.col-resizer {
position: absolute;
top: 0;
bottom: 0;
width: 8px;
transform: translateX(-4px);
cursor: col-resize;
z-index: 60;
background: transparent;
transition: background-color 0.15s var(--dm-ease);
}
.col-resizer:hover,
.col-resizer.dragging { background: rgba(var(--dm-primary-rgb), 0.5); }
.rail-resizer { left: var(--rail-w, 72px); }
.chan-resizer { left: calc(var(--rail-w, 72px) + var(--chan-w, 240px)); }
.rail-brand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 14px;
background: linear-gradient(135deg, var(--dm-primary), var(--dm-accent));
color: #fff;
font-weight: 800;
font-size: 0.95rem;
text-decoration: none;
transition: border-radius 0.25s var(--dm-ease), transform 0.2s var(--dm-ease-snap), box-shadow 0.25s var(--dm-ease);
animation: brandPulse 3.2s ease-in-out infinite;
}
.rail-brand:hover {
border-radius: 30%;
transform: translateY(-2px);
color: #fff;
}
/* Logo do site (Meet Motiva) FLUTUANTE no lugar do texto "DM" em TODAS as marcas:
o botão brand da rail e o componente .brand-mark (login, boas-vindas, listagem
geral, páginas de convidado). PNG transparente recortado/centrado, exibido
inteiro (contain) SEM tile/gradiente atrás e SEM o halo do brandPulse — o ícone
fica solto. Cobre os 3 tamanhos do brand-mark. */
.rail-brand,
.brand-mark {
background: transparent url("../source/meet-motiva-logo.png") center / contain no-repeat;
/* Some com o texto "DM" em QUALQUER estado: só color:transparent não basta
porque o .rail-brand:hover volta color:#fff; font-size:0 garante. */
color: transparent;
font-size: 0;
box-shadow: none;
animation: none;
}
.rail-sep {
width: 32px;
height: 2px;
border-radius: 2px;
background: rgba(var(--dm-fg-rgb), 0.08);
}
.rail-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--dm-raised);
color: rgba(var(--dm-fg-rgb), 0.65);
text-decoration: none; /* é um : sem isto o "+" do rail-add fica sublinhado */
transition: border-radius 0.25s var(--dm-ease), background-color 0.25s var(--dm-ease),
color 0.2s var(--dm-ease), transform 0.2s var(--dm-ease-snap);
}
.rail-btn:hover, .rail-btn.active {
border-radius: 30%;
background: var(--dm-primary);
color: #fff;
transform: translateY(-2px);
}
.rail-btn-danger:hover {
background: #b02a37;
}
/* "+" de criar servidor no rail (admin) */
.rail-add {
font-size: 1.5rem;
line-height: 1;
color: #6ee7a8;
background: transparent;
box-shadow: inset 0 0 0 1.5px rgba(110, 231, 168, 0.35);
}
.rail-add:hover {
background: rgba(35, 165, 90, 0.9);
color: #fff;
box-shadow: none;
}
.rail-server {
background: hsl(var(--hue, 205) 45% 32%);
color: #fff;
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.02em;
position: relative;
}
.rail-server:hover {
background: hsl(var(--hue, 205) 55% 42%);
}
.rail-server.active {
border-radius: 30%;
background: hsl(var(--hue, 205) 60% 46%);
box-shadow: 0 0 14px -2px hsl(var(--hue, 205) 70% 50% / 0.6);
}
.rail-server.active::before {
content: "";
position: absolute;
left: -13px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 60%;
border-radius: 0 4px 4px 0;
background: #fff;
animation: railPip 0.25s var(--dm-ease) both;
}
@keyframes railPip {
from { height: 0; opacity: 0; }
to { height: 60%; opacity: 1; }
}
/* Célula do servidor no rail: o círculo (.rail-server) em cima e o NOME COMPLETO
embaixo. O nome quebra em várias linhas em vez de ser cortado nas iniciais. */
.rail-server-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
max-width: 100%;
text-decoration: none;
}
.rail-server-name {
max-width: 66px;
font-size: 0.66rem;
line-height: 1.15;
text-align: center;
color: rgba(var(--dm-fg-rgb), 0.55);
word-break: break-word;
overflow-wrap: anywhere;
transition: color 0.2s var(--dm-ease);
}
/* Grupo (abinha) da rail: cabeçalho clicável que recolhe os servidores. */
.rail-group {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.rail-group-body {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px; /* mesmo ritmo das células soltas na rail (.rail gap) */
}
.rail-group.collapsed .rail-group-body { display: none; }
/* Abinha (categoria) da rail: rótulo curto separando Vendas / Staff. É um botão
(recolhe o grupo ao clicar), então zera o estilo padrão de