/* =============================================================================
   DOCK — o único lugar onde ficam os elementos que flutuam sobre a página.

   Problema que resolve: cada botão/aviso tinha o seu próprio `position: fixed` com distâncias escritas à mão
   (bottom: 16px, 76px, 84px…), sem saber dos outros; qualquer combinação nova (aviso de cookies + convite de
   notificações + feedback + compartilhar + anúncio fixo…) sobrepunha alguém.

   Como resolve: UM contêiner fixo (.dock) cola na borda inferior e empilha os filhos em fluxo normal. Elementos em
   fluxo não se sobrepõem por construção, e o contêiner respeita as áreas seguras do aparelho (entalhe, barra de gestos).

     .dock
       .dock__layer   cartões e avisos (cookies, convite de notificações, janela de feedback…), empilhados de baixo
                      para cima; se não couberem, a camada rola por dentro, nunca por cima do resto.
       .dock__bar     faixa de botões: .dock__start (esquerda: compartilhar/like) e .dock__end (direita: feedback,
                      lembrete de avisos). Se a largura não der para os dois, o da direita sobe para uma linha acima.
       .dock__ad      anúncio fixo do celular, sempre por último (a base da tela).

   REGRA PARA COMPONENTES NOVOS: não use `position: fixed`. Coloque o componente em um destes encaixes em
   app/Views/layouts/base.php e deixe-o em fluxo normal. O dock.js ainda vigia elementos fixos de fora (scripts de
   anúncio, widgets de terceiros) e desvia o dock deles. tests/run.php falha se surgir `position: fixed` novo
   fora da lista de exceções.
   ========================================================================== */

:root {
  --dock-gap: 16px;
  /* escala de camadas: tudo que flutua usa estes valores */
  --z-header: 40;      /* cabeçalho fixo da página */
  --z-dock: 50;        /* dock: botões, cartões e avisos */
  --z-overlay: 60;     /* folhas e dicas que cobrem o dock de propósito (folha do estado, tooltip) */
  --z-top-banner: 75;  /* faixa do topo da tela (convite de notificações no computador) */
  --z-modal: 90;       /* janela "Apoie" (modal centralizada): cobre tudo de propósito, com fundo escurecido */
  --dock-top: 150px;   /* espaço que o dock deixa livre no topo da tela: a faixa de notificações (computador) e o cabeçalho */
}
/* Telas estreitas ou baixas não têm a faixa do topo (ela vira cartão dentro do dock): o dock pode crescer mais. */
@media (max-width: 640px), (max-height: 599px) { :root { --dock-top: 64px; } }

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--dock-lift, 0px); /* o dock.js sobe o dock inteiro quando um elemento de fora ocupa a base da tela */
  z-index: var(--z-dock);
  display: flex;
  flex-direction: column;
  pointer-events: none; /* o dock em si é transparente: só os itens recebem toque, o resto da página continua clicável */
  /* O dock nunca passa daqui (sobra --dock-top livre no topo). Se os cartões não couberem, só a camada de cartões
     encolhe e passa a rolar; a faixa de botões e o anúncio não encolhem. */
  max-height: calc(100vh - var(--dock-top));
  max-height: calc(100dvh - var(--dock-top));
}
.dock__bar, .dock__ad { flex: 0 0 auto; }
.dock__layer, .dock__bar {
  padding-left: max(var(--dock-gap), env(safe-area-inset-left));
  padding-right: max(var(--dock-gap), env(safe-area-inset-right));
}

/* cartões e avisos */
.dock__layer {
  display: flex;
  flex-direction: column-reverse; /* o primeiro filho fica junto da faixa de botões */
  align-items: flex-end;
  gap: 8px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 24px;   /* folga transparente: a sombra dos cartões não é cortada pela rolagem */
  padding-bottom: 8px;
}
:where(.dock__layer > *) { pointer-events: auto; max-width: 100%; } /* :where = especificidade zero: não atropela o max-width próprio de cada cartão (ex.: aviso de cookies, 520 px) */

/* faixa de botões */
.dock__bar {
  display: flex;
  flex-wrap: wrap-reverse;      /* sem espaço na linha: o grupo da direita passa para a linha de cima */
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px 10px;
  padding-bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom));
}
.dock__start, .dock__end { pointer-events: auto; transition: margin-bottom .2s ease; }
.dock__start { display: flex; align-items: flex-end; min-width: 0; max-width: 100%; margin-bottom: var(--dock-lift-start, 0px); }
.dock__end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; margin-bottom: var(--dock-lift-end, 0px); }
.dock__start:not(:has(*)), .dock__end:not(:has(*)) { display: none; }

/* anúncio fixo do celular: a base da tela. Ele mesmo cuida da área segura de baixo, então a faixa de botões não repete. */
.dock__ad { pointer-events: auto; }
.dock__ad:not(:has(*)) { display: none; }
.dock:has(.dock__ad > *) .dock__bar { padding-bottom: var(--dock-gap); }

/* painéis que abrem acima dos botões nunca passam da altura da tela (em telas baixas, rolam por dentro) */
/* Contas: --dock-top + a faixa de botões (≈ 70 px) + o grupo da direita que sobe para outra linha quando a largura é estreita (≈ 120 px) + o anúncio fixo (≈ 80 px). */
.dock .share-panel, .dock .push-help { overflow-y: auto; overscroll-behavior: contain; max-height: calc(100vh - var(--dock-top) - 200px); max-height: calc(100dvh - var(--dock-top) - 200px); }
.dock:has(.dock__ad > *) .share-panel, .dock:has(.dock__ad > *) .push-help { max-height: calc(100vh - var(--dock-top) - 280px); max-height: calc(100dvh - var(--dock-top) - 280px); }
@media (min-width: 520px) { .dock .share-panel, .dock .push-help { max-height: calc(100vh - var(--dock-top) - 90px); max-height: calc(100dvh - var(--dock-top) - 90px); } }
.dock .share:has(.share-panel:not([hidden])) .share-tip { display: none; } /* painel aberto: a dica de "Compartilhe" sai de cena */

/* folha de detalhes do estado (celular/tablet) cobre a base da tela de propósito: o dock sai de cena enquanto ela está aberta */
body:has(.state-sheet:not([hidden])) .dock { visibility: hidden; }

/* o fim da página nunca fica escondido atrás dos botões: o dock.js mede o quanto eles ocupam e reserva esse espaço */
body { padding-bottom: var(--dock-reserve, 0px); }

@media (max-width: 640px) {
  .dock { --dock-gap: 12px; }
  .dock__layer { align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .dock__start, .dock__end { transition: none; } }
@media print { .dock { display: none !important; } body { padding-bottom: 0; } }