/**
* @file paginas/AstionGrupo/css/grupo.css
* @versao_deploy 2026-09-25-c-a-busca-nos-livros
* ⚠️ Trocar a data acima ao editar, e a `?v=` do `grupo.html` junto.
* 🔁 Sucede o `-22-u` (não voou): + §13, «Os seus lançamentos» — capa em proporção de livro
* (44×64) no lugar do quadrado, e o selo do livro fora do ar em cor de AVISO, nunca de erro.
* 🔁 Sucede o `-22-r` (VOOU 22/09): o quadrado do ícone da sala foi desenhado para emoji e
* agora recebe ícone de FONTE (Remix Icon) — `.g-sala-icone i` dá tamanho, centro e cor.
* 🔁 Sucede o `-22-n` (não subiu): + §12 (menções, P34). O `-22-n` tinha posto o §11.
*
* AstionGrupo — a página pública do funil (FRENTE 2 · TELA).
* ============================================================================
* 🎨 AS CORES MORAM NOS TOKENS `--g-*`, e os blocos só os consomem.
* O tema escuro não é uma segunda folha: é outro valor para os mesmos tokens.
* São três portas para ele, na ordem:
* 1. o tema que a pessoa escolheu na plataforma (`lit-theme` → o
* `grupo.js` põe no `data-theme` do ), os 8 escuros listados abaixo;
* 2. sem tema escolhido, o `prefers-color-scheme` do aparelho;
* 3. `data-theme="light"` (ou qualquer claro) vence o aparelho.
* ⚠️ `html[data-theme=…]` e não `[data-theme=…]`: o atributo vive no ,
* e sem o `html` a especificidade empata com o `:root` e quem manda passa a
* ser a ordem no arquivo.
* ⚠️ Nada de `color-mix` dentro de token: se falhar ao calcular, a declaração
* vira `unset` e o bloco some em vez de cair no valor de trás.
*
* 📱 Celular primeiro: uma coluna, a lista OU a conversa (o `data-vista` do
* escolhe). A partir de 900px, as duas lado a lado.
* 🔴 Nada pode passar da largura: `min-width:0` nos filhos flex e
* `overflow-wrap:anywhere` nos textos de gente (link comprido não rola a tela).
* 🍎 `viewport-fit=cover` + `env(safe-area-inset-*)`: a barra do iPhone não
* cobre a caixa de escrever. Altura por `100dvh`, com `100vh` de reserva.
*/
/* ═══ 1. TOKENS ═══════════════════════════════════════════════════════════ */
:root {
--g-bg: #f6f3ec;
--g-superficie: #ffffff;
--g-superficie-2: #f0ebe0;
--g-texto: #1f2430;
--g-texto-suave: #5b6272;
--g-borda: #e3dccd;
--g-acento: #8a5a12;
--g-acento-forte: #6d450a;
--g-sobre-acento: #ffffff;
--g-acento-suave: #f6ead2;
--g-minha: #eef4ea;
--g-minha-borda: #cfe0c5;
--g-tranca: #7a6a4f;
--g-aviso-fundo: #fff4d6;
--g-aviso-texto: #6b4a00;
--g-erro-fundo: #fde8e6;
--g-erro-texto: #8f1d12;
--g-mock-fundo: #3a2a6b;
--g-mock-texto: #ffffff;
--g-sombra: 0 1px 2px rgba(31, 36, 48, 0.06), 0 4px 16px rgba(31, 36, 48, 0.06);
--g-raio: 14px;
/* 📐 As larguras da PLATAFORMA (`base_literario.css` l. 312), não inventadas aqui:
`--col1-width: 260px` e `--col3-width: 300px`. Duas telas da mesma casa com colunas
de larguras diferentes leem-se como duas casas. */
--g-col-salas: 260px;
--g-col-pessoas: 300px;
/* 📖 A RÉGUA DA LINHA DE LEITURA. A coluna estica até à borda; a LINHA não.
O `#section-feed` da plataforma usa 680 px para cartões de feed; um chat aguenta mais,
e o número saiu da bancada, não do gosto — ver o comentário em `.g-mensagens`. */
--g-linha-conversa: 900px;
--g-fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
--g-fonte-titulo: "Cinzel", Georgia, "Times New Roman", serif;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--g-bg: #12141a;
--g-superficie: #1b1e26;
--g-superficie-2: #232733;
--g-texto: #e8e6e1;
--g-texto-suave: #a7adbb;
--g-borda: #2f3442;
--g-acento: #e0b357;
--g-acento-forte: #f0c872;
--g-sobre-acento: #1b1405;
--g-acento-suave: #3a2f17;
--g-minha: #1f2c22;
--g-minha-borda: #33503a;
--g-tranca: #c9b58f;
--g-aviso-fundo: #3a2f12;
--g-aviso-texto: #f3d98c;
--g-erro-fundo: #3b1a17;
--g-erro-texto: #ffb4a8;
--g-sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
color-scheme: dark;
}
}
/* Os 8 escuros da plataforma — a mesma lista do `base_literario.css`. */
html[data-theme="midnight"],
html[data-theme="ocean"],
html[data-theme="forest"],
html[data-theme="sunset"],
html[data-theme="rose"],
html[data-theme="carbon"],
html[data-theme="aurora"],
html[data-theme="burgundy"],
html[data-theme="dark"] {
--g-bg: #12141a;
--g-superficie: #1b1e26;
--g-superficie-2: #232733;
--g-texto: #e8e6e1;
--g-texto-suave: #a7adbb;
--g-borda: #2f3442;
--g-acento: #e0b357;
--g-acento-forte: #f0c872;
--g-sobre-acento: #1b1405;
--g-acento-suave: #3a2f17;
--g-minha: #1f2c22;
--g-minha-borda: #33503a;
--g-tranca: #c9b58f;
--g-aviso-fundo: #3a2f12;
--g-aviso-texto: #f3d98c;
--g-erro-fundo: #3b1a17;
--g-erro-texto: #ffb4a8;
--g-sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
color-scheme: dark;
}
/* ═══ 2. BASE ═════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--g-bg);
color: var(--g-texto);
font: 16px/1.5 var(--g-fonte);
min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
display: flex;
flex-direction: column;
}
/* 🔑 Com a conversa aberta, a PÁGINA não rola: rola só a lista de mensagens.
A altura sai do flex (topo + faixa do mock ficam fora da conta), não de um
`calc(100dvh - Npx)` que erra no dia em que o topo mudar de altura. */
body[data-vista="conversa"] {
height: 100vh;
height: 100dvh;
overflow: hidden;
}
a { color: var(--g-acento); }
a:hover { color: var(--g-acento-forte); }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
.g-oculto { display: none !important; }
.g-leitor-de-tela {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--g-acento); outline-offset: 2px; }
/* ═══ 3. FAIXA DO MOCK — tem de ser impossível confundir com a tela real ═══ */
.g-mock {
background: var(--g-mock-fundo);
color: var(--g-mock-texto);
text-align: center;
font-size: 13px;
font-weight: 600;
padding: 6px 16px;
padding-top: calc(6px + env(safe-area-inset-top, 0px));
}
/* ═══ 4. TOPO ═════════════════════════════════════════════════════════════ */
.g-topo {
position: sticky;
top: 0;
/* 🪟 ACIMA das gavetas (30) e do véu (25): é aqui que moram os dois botões, e gaveta
que tapa o próprio botão de fechar só se fecha por tentativa. */
z-index: 40;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
padding-left: calc(16px + env(safe-area-inset-left, 0px));
padding-right: calc(16px + env(safe-area-inset-right, 0px));
background: var(--g-superficie);
border-bottom: 1px solid var(--g-borda);
}
body:not(.g-com-mock) .g-topo { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.g-marca {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
text-decoration: none;
color: var(--g-texto);
}
.g-marca img { width: 28px; height: 28px; }
.g-marca .g-marca-nome {
font-family: var(--g-fonte-titulo);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ☰ 🏛️ 👥 A BARRA EM TRÊS (Rafael, 23/09): hambúrguer · logo ao CENTRO · pessoas.
🔑 `flex: 1 1 0` nos DOIS lados dá-lhes largura IGUAL qualquer que seja o conteúdo — e é
isso, e não um `margin: 0 auto`, que põe a marca no centro de verdade. Com `flex-basis`
automático o lado mais cheio empurraria a logo para o lado, e «ao centro» viraria
«quase ao centro», que é o mesmo que não estar. */
.g-topo-lado {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.g-topo-dir { justify-content: flex-end; }
.g-marca { flex: 0 0 auto; }
.g-bt-gaveta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--g-borda);
border-radius: var(--g-raio);
background: var(--g-superficie);
color: var(--g-acento);
cursor: pointer;
}
.g-bt-gaveta i { font-size: 20px; line-height: 1; }
.g-bt-gaveta:hover, .g-bt-gaveta:focus-visible { color: var(--g-acento-forte); border-color: var(--g-acento); }
.g-bt-gaveta[aria-expanded="true"] { background: var(--g-acento-suave); }
/* 📱 Abaixo de 600 px o NOME da marca sai e fica o símbolo.
🔴 É o que mantém «AstionBooks» INTEIRA no CTA do visitante: sem isto, o lado direito
teria de encolher e cortaria a marca — e marca cortada é pior que nome de página
escondido. O símbolo continua a levar de volta à plataforma. */
@media (max-width: 599px) {
.g-marca-nome { display: none; }
}
.g-link-conta {
font-size: 14px;
white-space: nowrap;
}
/* ═══ 5. BOTÕES ═══════════════════════════════════════════════════════════ */
.g-bt {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 40px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--g-borda);
background: var(--g-superficie);
cursor: pointer;
text-decoration: none;
font-weight: 600;
font-size: 14px;
white-space: nowrap;
}
.g-bt:hover { border-color: var(--g-acento); }
.g-bt:disabled { opacity: 0.6; cursor: default; }
.g-bt-principal {
background: var(--g-acento);
border-color: var(--g-acento);
color: var(--g-sobre-acento);
}
.g-bt-principal:hover { background: var(--g-acento-forte); color: var(--g-sobre-acento); }
.g-bt-texto {
border-color: transparent;
background: transparent;
color: var(--g-acento);
padding-left: 8px;
padding-right: 8px;
}
/* ═══ 6. O CORPO: TRÊS COLUNAS ════════════════════════════════════════════
📐 A CONVERSA é a principal e fica no CENTRO. À esquerda as salas, à direita as
pessoas. Os mínimos são declarados, não emergentes — coluna sem mínimo espreme a
conversa até ela deixar de servir para o que existe:
· conversa 440 px · salas 300 px · pessoas 260 px
🪟 O que muda com a largura:
· ≥ 1200 px → as TRÊS permanentes (300 + 440 + 260 + folgas cabe em 1200);
· 900–1199 → salas permanente, PESSOAS vira gaveta;
· < 900 → a conversa fica com a tela e AS DUAS viram gaveta.
🔑 É a gaveta que fecha o buraco medido em 23/09: os dois «Voltar à plataforma»
moram na coluna das salas, e antes sumiam com ela quando a conversa abria. Com a
gaveta, a saída passa a ser alcançável DE DENTRO da conversa. A marca `sticky`
deixa de ser o único caminho e volta a ser o que devia: um atalho. */
/* 🔴🔴 A RÉGUA É A DA PLATAFORMA, e o defeito era de RÉGUA, não de número.
Subimos o `max-width` de 1200 → 1440 → 1760 e a margem morta continuou lá, porque
**a plataforma não centraliza um corpo**: as colunas ENCOSTAM nas bordas da janela.
📐 Copiado do `AstionLiterario/css/pages/base_literario.css`, conferido no disco:
· l. 312 `--col1-width: 260px` · `--col3-width: 300px`
· l. 336 `.container { display:flex; width:100% }` — **sem `max-width`, sem `margin:auto`**
· l. 344/357 laterais com `width` + `min-width` fixos e borda de um lado
· l. 351 `.col-content { flex: 1 }` — quem recebe a sobra é o MEIO
· l. 636 `#section-feed { max-width: 680px; margin: 0 auto }`
· l. 3933 **UM degrau só**, a 1100 px, com as DUAS laterais a virar gaveta juntas
🔑🔑🔑 ***A plataforma estica a COLUNA até a borda e centraliza o CONTEÚDO dentro dela.***
O fundo vai até ao fim da janela; a linha de texto, não. É isso que resolve as duas
queixas ao mesmo tempo — a borda deixa de sobrar e a leitura não estica.
⚠️ O que NÃO se copia: os `padding` de safe-area laterais ficam. A plataforma não os tem;
o grupo já mediu que precisa deles (a barra do iPhone em paisagem). */
.g-corpo {
flex: 1 1 auto;
display: flex;
min-height: 0;
width: 100%;
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
.g-lista, .g-conversa, .g-coluna-pessoas { min-width: 0; }
.g-lista {
flex: 1 1 auto;
padding: 16px;
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.g-conversa {
flex: 1 1 auto;
display: flex;
flex-direction: column;
background: var(--g-superficie);
min-height: 0;
}
.g-coluna-pessoas { flex: 0 0 var(--g-col-pessoas); }
.g-coluna-pessoas[hidden] { display: none; }
/* 🪟 AS GAVETAS. Fora do celular isto não existe: as colunas são colunas. */
.g-veu {
position: fixed;
inset: 0;
z-index: 25;
background: rgba(31, 36, 48, 0.45);
border: 0;
}
.g-veu[hidden] { display: none; }
/* 📱 CELULAR: a conversa fica com a tela; as duas colunas deslizam por cima.
🔴 O `.g-topo` fica ACIMA da gaveta (z-index 40 × 30), e não debaixo dela: é lá que
moram os dois botões, e gaveta que tapa o próprio botão de fechar só se fecha por
tentativa. O `padding-top` das gavetas desconta a altura do topo — medida na
bancada, não estimada. */
@media (max-width: 1099px) {
.g-lista, .g-coluna-pessoas {
position: fixed;
top: 0;
bottom: 0;
z-index: 30;
width: min(86vw, 340px);
background: var(--g-superficie);
border-right: 1px solid var(--g-borda);
overflow-y: auto;
overscroll-behavior: contain;
padding-top: calc(64px + env(safe-area-inset-top, 0px));
transition: transform .22s ease;
}
.g-lista { left: 0; transform: translateX(-100%); }
.g-coluna-pessoas {
right: 0;
left: auto;
border-right: 0;
border-left: 1px solid var(--g-borda);
transform: translateX(100%);
}
/* A coluna de pessoas existe no DOM mesmo fechada: gaveta que só nasce ao abrir
abre vazia e pisca. O `hidden` só cai para quem PODE vê-la (o JS decide). */
.g-coluna-pessoas:not([hidden]) { display: block; }
body[data-gaveta="salas"] .g-lista { transform: none; }
body[data-gaveta="pessoas"] .g-coluna-pessoas { transform: none; }
.g-conversa { flex: 1 1 100%; }
}
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
.g-lista, .g-coluna-pessoas { transition: none; }
}
/* 🖥️ ≥1100: AS TRÊS COLUNAS, encostadas nas bordas — **um degrau só**, como a plataforma.
🔁 Caíram os degraus de 1200 e 1600: sem `max-width` no corpo, coluna que cresce com a
tela deixou de fazer sentido. Quem recebe a sobra é a CONVERSA, e não as laterais.
🎨 E a conversa deixou de ser CARD (raio + sombra) e virou PAINEL encostado: entre dois
painéis colados às bordas, um cartão flutuante no meio fica órfão. Decisão do regente,
e a leitura fiel de «como no resto da plataforma». */
@media (min-width: 1100px) {
body {
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.g-lista {
flex: 0 0 var(--g-col-salas);
padding: 16px 12px;
border-right: 1px solid var(--g-borda);
overflow-y: auto;
}
.g-conversa {
min-width: 440px;
overflow: hidden;
}
.g-coluna-pessoas {
overflow-y: auto;
padding: 12px 0;
border-left: 1px solid var(--g-borda);
}
.g-voltar { display: none !important; }
#gBtSalas { display: none; }
#gBtPessoas { display: none !important; }
.g-veu { display: none !important; }
}
/* ═══ 7. A LISTA ══════════════════════════════════════════════════════════ */
.g-secao { margin-bottom: 24px; }
.g-secao-titulo {
font-family: var(--g-fonte-titulo);
font-size: 15px;
letter-spacing: 0.04em;
margin: 0 0 4px;
color: var(--g-acento);
}
.g-secao-nota {
font-size: 14px;
color: var(--g-texto-suave);
margin: 0 0 12px;
}
.g-estado {
padding: 16px;
border-radius: var(--g-raio);
background: var(--g-superficie);
border: 1px dashed var(--g-borda);
color: var(--g-texto-suave);
font-size: 14px;
text-align: center;
}
.g-estado .g-bt { margin-top: 10px; }
/* Sala aberta (lê-se): uma linha clicável. */
.g-sala {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px;
margin-bottom: 8px;
border: 1px solid var(--g-borda);
border-radius: var(--g-raio);
background: var(--g-superficie);
box-shadow: var(--g-sombra);
cursor: pointer;
text-align: left;
}
.g-sala:hover { border-color: var(--g-acento); }
.g-sala[aria-current="true"] { border-color: var(--g-acento); background: var(--g-acento-suave); }
.g-sala-icone {
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: var(--g-acento-suave);
font-size: 20px;
}
/* 🎨 O quadrado nasceu para emoji; o que entra nele é ícone de FONTE (Remix Icon).
`line-height: 1` tira a folga que a fonte traz e o centro volta ao centro; a cor é a
do acento, não a do texto, para o ícone não competir com o nome da sala. */
.g-sala-icone i {
font-size: 22px;
line-height: 1;
color: var(--g-acento);
display: block;
}
/* ── 📕 §13 «Os seus lançamentos» — a sala do LIVRO ──────────────────────────
Proporção de livro (44×64) no lugar do quadrado de ícone. As medidas estão
TAMBÉM no `` (width/height): sem elas a lista pula enquanto as capas
chegam — e não há miniatura na casa, então o que chega é a capa de leitura. */
.g-capa-livro {
flex: 0 0 44px;
width: 44px;
height: 64px;
border-radius: 6px;
overflow: hidden;
background: var(--g-acento-suave);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.g-capa-livro img { width: 44px; height: 64px; object-fit: cover; display: block; }
.g-capa-livro i { font-size: 22px; line-height: 1; color: var(--g-acento); }
.g-lancamento { align-items: center; }
.g-lancamento .g-sala-nome { overflow-wrap: anywhere; }
/* O selo do livro fora do ar é AVISO, não erro: a sala está VIVA, e é isso que
ele precisa dizer. Nada de vermelho, nada de cinza de coisa quebrada. */
.g-selo-pausado {
display: inline-block;
margin-top: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
background: var(--g-aviso-fundo);
color: var(--g-aviso-texto);
}
#gConversaIcone img { width: 28px; height: 40px; object-fit: cover; border-radius: 4px; display: block; }
#gConversaIcone:has(img) { background: transparent; }
.g-sala-textos { min-width: 0; flex: 1 1 auto; }
/* ── 🧑🤝🧑 §14 QUEM ESCREVE AQUI (P43 + P50) ────────────────────────────────
🔁 23/09: era uma FAIXA horizontal entre o cabeçalho e as mensagens; passou a ser
a COLUNA DA DIREITA. A faixa cabia numa lista curta (quem escreveu na sala); a
coluna existe porque vai receber os membros da plataforma, progressivamente — e
lista que cresce não cabe numa faixa que rola de lado.
🔴 Cada pessoa tem DOIS gestos: CITAR (o principal) e CONVERSAR. */
.g-pessoas {
flex: 0 0 auto;
padding: 12px 16px;
padding-left: calc(16px + env(safe-area-inset-left, 0px));
padding-right: calc(16px + env(safe-area-inset-right, 0px));
background: var(--g-superficie);
}
.g-pessoas-titulo {
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--g-texto-suave);
}
.g-pessoas-estado, .g-pessoas-aviso { margin: 0; font-size: 13px; color: var(--g-texto-suave); }
.g-pessoas-aviso { color: var(--g-texto); }
/* 🔎 A busca da coluna. Nasce agora com o que a sala tem; quando a F1 mandar o
diretório com cursor, é este mesmo campo que o filtra. */
.g-pessoas-busca {
width: 100%;
min-height: 40px;
margin: 0 0 10px;
padding: 8px 12px;
border: 1px solid var(--g-borda);
border-radius: var(--g-raio);
background: var(--g-bg);
color: var(--g-texto);
font: inherit;
font-size: 14px;
}
.g-pessoas-busca::placeholder { color: var(--g-texto-suave); }
.g-pessoas-lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
/* 📏 ALTURA IGUAL PARA TODOS (Rafael, 23/09: «cada uma está com um tamanho»).
📡 MEDIDO: 94 · 94 · 123 px. O card comprido não era mais alto por causa do nome — era
porque os BOTÕES, empurrados pelo `margin-left: auto`, caíam para a segunda linha **só
nele**. 🔑 *Quem mandava na altura era o comprimento do nome, por um caminho indireto.*
▶️ Agora as ações ficam SEMPRE na própria linha (`flex-basis: 100%`), e o card tem altura
mínima fixa: dois cards com nomes de tamanhos diferentes desenham-se idênticos. */
.g-pessoa {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
align-items: center;
gap: 8px;
min-height: 94px;
padding: 8px 10px;
border: 1px solid var(--g-borda);
border-radius: var(--g-raio);
background: var(--g-superficie-2);
}
/* 🔴 GRELHA, e não `flex-wrap`: com flex, um nome que não coubesse ao lado do avatar ia
para uma LINHA PRÓPRIA e o card ganhava uma terceira fila — 123 px contra 94. O
`min-width: 0` não evita isso, porque a quebra decide-se pelo tamanho hipotético do item,
antes de ele encolher. Na grelha a coluna do nome é `minmax(0, 1fr)`: ela ENCOLHE e as
reticências aparecem, em vez de a linha se partir.
🔑 *Numa flex-wrap, quem manda na altura é o conteúdo mais comprido.* */
.g-pessoa-acoes { display: flex; gap: 6px; grid-column: 1 / -1; }
.g-pessoa-motivo { grid-column: 1 / -1; }
.g-pessoa-foto {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
background: var(--g-acento-suave);
display: flex;
align-items: center;
justify-content: center;
}
.g-pessoa-foto img { width: 36px; height: 36px; object-fit: cover; }
.g-pessoa-foto i { font-size: 18px; line-height: 1; color: var(--g-acento); }
.g-pessoa-nome {
flex: 1 1 auto;
min-width: 0;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* O botão é discreto: a caixa é um convite, não um anúncio. */
.g-pessoa-bt { min-height: 32px; padding: 4px 10px; font-size: 13px; }
/* O motivo ocupa a fila inteira da grelha (o `max-width` de 160 px era do tempo da faixa
horizontal e cortava a frase em duas na coluna). */
.g-pessoa-motivo { font-size: 12px; color: var(--g-texto-suave); white-space: normal; }
/* 👥 Quanta gente entrou: terceira linha da sala, discreta — é informação de contexto,
não chamada. Some sozinha quando não há número (e na Geral, por decisão: P49). */
.g-sala-membros {
display: block;
font-size: 12px;
color: var(--g-texto-suave);
margin-top: 2px;
}
.g-sala-nome { display: block; font-weight: 700; overflow-wrap: anywhere; }
.g-sala-desc {
display: block;
font-size: 13px;
color: var(--g-texto-suave);
overflow-wrap: anywhere;
}
.g-selo-novas {
flex: 0 0 auto;
background: var(--g-acento);
color: var(--g-sobre-acento);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
padding: 2px 8px;
white-space: nowrap;
}
/* 🔒 O CARD — a vitrine do que o visitante ainda não tem. */
.g-cards {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
@media (min-width: 600px) and (max-width: 899px) {
.g-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.g-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
border: 1px solid var(--g-borda);
border-radius: var(--g-raio);
background: var(--g-superficie);
box-shadow: var(--g-sombra);
min-width: 0;
}
.g-card-cab { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.g-card-tranca {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: var(--g-tranca);
margin-top: 2px;
}
.g-card-numeros {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
font-size: 13px;
color: var(--g-texto-suave);
}
.g-card-bloco-titulo {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--g-texto-suave);
margin: 0 0 6px;
}
.g-destaque {
background: var(--g-superficie-2);
border-radius: 10px;
padding: 10px 12px;
font-size: 14px;
}
.g-destaque-pergunta { font-weight: 700; margin: 0 0 4px; overflow-wrap: anywhere; }
.g-destaque-resposta { margin: 0; color: var(--g-texto-suave); overflow-wrap: anywhere; }
.g-capas {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: thin;
}
.g-capa {
flex: 0 0 64px;
width: 64px;
font-size: 11px;
color: var(--g-texto-suave);
}
.g-capa img, .g-capa-vazia {
width: 64px;
height: 92px;
border-radius: 6px;
object-fit: cover;
background: var(--g-superficie-2);
border: 1px solid var(--g-borda);
}
.g-capa-titulo {
display: block;
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.g-card-motivo {
font-size: 13px;
color: var(--g-aviso-texto);
background: var(--g-aviso-fundo);
border-radius: 10px;
padding: 8px 10px;
margin: 0;
}
.g-card .g-bt { align-self: flex-start; }
/* ═══ 8. A CONVERSA ═══════════════════════════════════════════════════════ */
.g-conversa-cab {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--g-borda);
min-width: 0;
}
.g-conversa-cab h1 {
font-size: 17px;
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.g-conversa-cab p {
font-size: 12px;
margin: 0;
color: var(--g-texto-suave);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.g-conversa-titulos { min-width: 0; flex: 1 1 auto; }
.g-voltar { flex: 0 0 auto; }
/* 💬 UM CHAT ENCHE-SE DE BAIXO PARA CIMA (Rafael, 23/09). Com cinco mensagens elas
empilhavam-se no TOPO e sobrava meia tela branca por baixo — quem já usou um
mensageiro lê isso como «está quebrado».
🔑 `margin-top: auto` no PRIMEIRO filho, e não `justify-content: flex-end` no
contentor: com `flex-end`, quando a conversa passa a altura da caixa, o topo da
lista fica INALCANÇÁVEL pela rolagem em vários navegadores. E não um `padding`
calculado, que mente em toda tela que eu não tiver medido. */
.g-mensagens {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.g-mensagens > :first-child { margin-top: auto; }
/* 📖 A COLUNA ESTICA ATÉ À BORDA; A LINHA DE LEITURA, NÃO.
É o truque do `#section-feed` da plataforma (l. 636: `max-width` + `margin: 0 auto`)
aplicado aqui: sem isto, a 1920 a conversa receberia a sobra toda e a linha passaria de
1.300 px — 🔑 *linha de 1.300 px num chat não se lê, percorre-se.*
⚠️ O compositor leva a MESMA régua, senão a caixa de escrever ficaria mais larga que as
mensagens que ela responde, e as duas deixariam de se alinhar.
📡 O número saiu da MEDIÇÃO: o feed usa 680 para cartões; num chat, com o avatar e o
recuo das balas, 900 px dá ~95 caracteres na fonte desta página — dentro da faixa
legível e bem acima dos 680, que apertariam demais uma conversa. */
.g-mensagens > *,
.g-rodape-conversa > * {
width: 100%;
max-width: var(--g-linha-conversa);
margin-left: auto;
margin-right: auto;
}
/* 🔴 O `margin-top: auto` do primeiro filho (que assenta o chat no fundo) tem de
SOBREVIVER à regra de cima, que só mexe nas margens laterais. Por isso ela usa
`margin-left/right` e não o atalho `margin` — atalho aqui apagaria o `auto` de cima e
o chat voltaria a empilhar-se no topo. *Conserto que outra regra desfaz…* */
.g-anteriores { align-self: center; }
/* ⬇️ O aviso de novas mensagens: flutua sobre a conversa, acima da caixa de escrever. */
.g-conversa { position: relative; }
.g-novas {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 84px;
z-index: 15;
min-height: 36px;
padding: 8px 16px;
border: 1px solid var(--g-acento);
border-radius: 999px;
background: var(--g-acento);
color: var(--g-sobre-acento);
font-size: 13px;
font-weight: 700;
cursor: pointer;
box-shadow: var(--g-sombra);
}
.g-novas:hover, .g-novas:focus-visible { background: var(--g-acento-forte); border-color: var(--g-acento-forte); }
.g-msg {
display: flex;
gap: 10px;
/* 🔴 SAIU o `max-width: 100%`: com a mesma especificidade e vindo DEPOIS, ele desfazia a
régua da linha de leitura (`.g-mensagens > *`) e a mensagem voltava a esticar até 1.961 px
a 2560. O `min-width: 0` abaixo é que evita o transbordo — o `100%` era redundante.
🔑 ***Conserto que outra regra desfaz é conserto que nunca houve*** — e desta vez a outra
regra era minha, no mesmo arquivo, escrita na mesma hora. */
min-width: 0;
}
.g-msg-foto {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
background: var(--g-superficie-2);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
color: var(--g-texto-suave);
}
.g-msg-balao {
min-width: 0;
max-width: min(640px, 100%);
background: var(--g-superficie-2);
border: 1px solid var(--g-borda);
border-radius: 4px 14px 14px 14px;
padding: 8px 12px;
}
.g-msg-minha { flex-direction: row-reverse; }
.g-msg-minha .g-msg-balao {
background: var(--g-minha);
border-color: var(--g-minha-borda);
border-radius: 14px 4px 14px 14px;
}
.g-msg-cab {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 8px;
font-size: 13px;
}
.g-msg-nome { font-weight: 700; overflow-wrap: anywhere; }
.g-msg-selo {
font-size: 11px;
font-weight: 600;
color: var(--g-acento);
background: var(--g-acento-suave);
border-radius: 999px;
padding: 0 6px;
}
.g-msg-hora { color: var(--g-texto-suave); font-size: 12px; }
.g-msg-fixada { font-size: 11px; font-weight: 700; color: var(--g-tranca); }
.g-msg-resposta {
font-size: 12px;
color: var(--g-texto-suave);
border-left: 3px solid var(--g-acento);
padding-left: 8px;
margin: 4px 0;
overflow-wrap: anywhere;
}
.g-msg-texto {
margin: 2px 0 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.g-msg-apagada .g-msg-texto { font-style: italic; color: var(--g-texto-suave); }
/* ═══ 🔗 PARTILHAR A SALA (P55) ══════════════════════════════════════════════
🔴 O endereço fica SEMPRE visível e selecionável, mesmo com os botões todos a
funcionar: a cópia pode falhar e o `navigator.share` pode não existir.
*Fallback que também pode falhar precisa de um terceiro que não seja código* —
e o terceiro é a pessoa ler e copiar com os dedos.
🍎 44 px sob ponteiro grosso: são controlos, não alvos em linha. */
/* 🎨 FORMA DO `-24-o`: dois ícones DENTRO do cabeçalho e um painel que NÃO empurra nada.
📡 A forma anterior era um bloco acima das mensagens e custava, medido em 24/09:
**97 px a 1100** e **149 px a 390** — 25 % da conversa e 2 das 7 mensagens visíveis.
Com o endereço a chegar às 99 salas, esse preço passaria a ser pago em todas.
🔑 O painel é `position: absolute`: ele **sobrepõe-se** às mensagens em vez de as
empurrar, e por isso o custo de altura da conversa é **ZERO**, aberto ou fechado. */
.g-partilha {
position: relative;
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
margin-left: auto; /* encosta à direita do cabeçalho, longe do «voltar» */
}
.g-partilha[hidden] { display: none; }
/* O ícone. 🍎 44 px no toque: *ícone poupa pixel de desenho, não pixel de dedo.* */
.g-bt-icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
background: none;
border: 1px solid transparent;
border-radius: 10px;
color: var(--g-texto-suave);
text-decoration: none;
cursor: pointer;
}
.g-bt-icone i { font-size: 1.2rem; line-height: 1; }
.g-bt-icone:hover { color: var(--g-acento-forte); background: var(--g-acento-suave); }
.g-bt-icone:focus-visible { outline: 2px solid var(--g-acento); outline-offset: 2px; }
.g-bt-icone[aria-expanded="true"] { color: var(--g-acento-forte); border-color: var(--g-borda); }
/* 🔗 O PAINEL. Sobrepõe-se, não empurra. Fica preso à DIREITA do cabeçalho para não sair
da tela em coluna estreita — abaixo de 1100 o cabeçalho já é apertado. */
.g-painel-partilha {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 45; /* acima do `.g-topo` (40): painel tapado é painel que não abriu */
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
width: max-content;
max-width: min(320px, calc(100vw - 32px));
padding: 12px;
background: var(--g-superficie);
border: 1px solid var(--g-borda);
border-radius: var(--g-raio);
box-shadow: var(--g-sombra);
}
.g-painel-partilha[hidden] { display: none; }
/* O endereço cru. `anywhere` porque é endereço de gente e não pode furar a caixa —
a mesma régua medida no `-24-e` para o link da mensagem. */
.g-partilha-url {
margin: 2px 0 0;
font-size: .82rem;
color: var(--g-texto-suave);
overflow-wrap: anywhere;
user-select: all;
}
.g-partilha-url code { font-family: inherit; }
.g-partilha-aviso {
margin: 0;
min-height: 1.2em;
font-size: .82rem;
color: var(--g-acento-forte);
}
@media (pointer: coarse), (any-pointer: coarse) {
/* 🍎 O ícone desenha-se a 36 px mas o DEDO precisa de 44. */
.g-bt-icone { width: 44px; height: 44px; }
.g-bt-copiar, .g-bt-mais { min-height: 44px; }
}
/* ═══ 🪗 O ACCORDION DA COLUNA (lote `-24-h`) ════════════════════════════════
📡 A razão, medida em 24/09 às 17h48: 81 salas de acompanhamento puseram a coluna em
**10.644 px** e **13,6 ecrãs**, com a última sala a nascer a **y=9.911**. Fechada,
a coluna passa a ~**318 px** — 2 linhas sempre à vista + 6 cabeçalhos.
♿ O cabeçalho é um `