*, *::before, *::after { box-sizing: border-box; }

/* O iPhone não aumenta a fonte sozinho ao virar a tela. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* A barra superior é fixa: âncoras (#envio-12), foco pelo Tab e o scrollIntoView do htmx param
   abaixo dela, e não escondidos atrás. */
html { scroll-padding-top: calc(var(--hub-header-height) + var(--hub-safe-top)); }

/* Rolagens feitas pelo Hub (âncora, descer até a mensagem nova) e pelo teclado (Home, End, espaço)
   correm suaves. É nativo do navegador, leve no celular; a rolagem do dedo, da roda e do trackpad
   continua a do sistema. Quem pede menos movimento fica sem animação. */
@media (prefers-reduced-motion: no-preference) {
  html, .hub-dialog-body, .hub-aside-body, .hub-owner-scroll, .hub-chat-list-scroll { scroll-behavior: smooth; }
}

/* Toque: sem o atraso de espera do duplo toque e sem o realce cinza do navegador, porque cada
   componente tem o próprio estado :active. */
a, button, input, label, select, textarea, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Todo componente que simula um modal trava a rolagem da página de trás: dialog, aside, modal de
   confirmação e, no celular, os menus que viram painel com fundo escurecido. Nos menus do tablet e
   do desktop, que são listas suspensas comuns, a página segue rolando.
   Onde a barra de rolagem ocupa espaço (Windows, ou Mac com "mostrar barras sempre"), ela some ao
   travar; o padding com a largura dela, medida pelo dialog.js ao abrir, evita que a página pule. */
html:has(dialog[open]) { overflow: hidden; padding-right: var(--hub-scrollbar-width, 0px); }
/* A lista de conversas aberta em tela inteira, no celular, trava a conversa de trás. */
@media (max-width: 767.98px) {
  html:has(.hub-chat-layout[data-list-open]) { overflow: hidden; }
}
@media (max-width: 767.98px) {
  html:has(hub-menu .hub-menu-panel:not([hidden])) { overflow: hidden; }
}

/* Barras de rolagem: finas, trilho um pouco mais escuro que o fundo, alça em pílula recuada que
   engrossa e escurece com o mouse.
   Cores e largura em theme.css (--hub-scrollbar-*), por isso seguem o tema claro e escuro.
   Chrome, Edge e Safari usam ::-webkit-scrollbar. O Firefox, que não tem esse seletor, usa
   scrollbar-width/scrollbar-color. Não usar scrollbar-color fora do @supports: no Chrome 121+ ele
   desliga o ::-webkit-scrollbar e a alça perde o formato e o hover. */
::-webkit-scrollbar { width: var(--hub-scrollbar-size); height: var(--hub-scrollbar-size); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--hub-scrollbar-track); }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-thumb {
  min-width: 40px; min-height: 40px;
  background-color: var(--hub-scrollbar-thumb);
  border: 3px solid transparent; background-clip: padding-box; /* alça visível de 4px */
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background-color: var(--hub-scrollbar-thumb-hover); border-width: 2px; } /* 6px */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--hub-scrollbar-thumb) var(--hub-scrollbar-track); }
}

body {
  margin: 0;
  background: var(--hub-background);
  color: var(--hub-text);
  font: 400 16px/24px var(--hub-font-body);
}

h1, h2, h3, h4 { margin: 0; font-family: var(--hub-font-heading); }
h1 { font-size: 32px; line-height: 40px; font-weight: 700; }
h2 { font-size: 28px; line-height: 36px; font-weight: 700; }
h3 { font-size: 24px; line-height: 32px; font-weight: 600; }
h4 { font-size: 20px; line-height: 28px; font-weight: 600; }
p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }

.hub-sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { animation: none !important; transition: none !important; }
}