/* avatar-hub-mobile.css — overrides do dropdown para viewport ≤767px.
   Centraliza o dropdown na viewport (position: fixed + left:50% + transform
   translateX(-50%)) em vez de ancorá-lo à direita do botão, evitando que ele
   extrapole a borda esquerda da tela quando o avatar fica na ponta direita
   do header. Cap de width por calc(100vw - 2rem) protege viewports <340px.

   Split do avatar-hub.css para respeitar o limite de 200 linhas por CSS
   declarado em `CONTRIBUTING.md` e no `.github/PULL_REQUEST_TEMPLATE.md`.
   O arquivo base permanece carregado primeiro em
   `templates/components/header.html`; este override aplica via cascata. */

@media (max-width: 767px) {
  .avatar-hub__dropdown {
    position: fixed;
    top: calc(var(--gf-header-height, 5rem) + 0.5rem);
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-4px) scale(0.98);
    min-width: 0;
    max-width: calc(100vw - 2rem);
    width: min(22rem, calc(100vw - 2rem));
  }

  .avatar-hub__dropdown:not([hidden]) {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}