/* Shell do KOREOS no celular — topo e flutuantes (dono, 2026-10-07: "KOREOS web no mobile tá bem merda").
   Arquivo separado (carregado no header.php DEPOIS de navigation-refinement.css) para não editar o
   style.css / footer.php vivos. Só apresentação. Relatório: /opt/koreos-ai-shared/KOREOS-MOBILE-HEADER-20261007.md */

@media (max-width: 767.98px) {
    /* 1) Botão de atalhos recolhido: navigation-refinement.css o define com 34px, mas o style.css
          (≤767) mantém min-width:76px → caixa vazia larga que transbordava o .topbar-main e
          encostava/passava por baixo da casinha. */
    .topbar-shortcuts-hub-card.is-compact {
        min-width: 0;
    }

    /* 2) Menu de atalhos ABERTO: no celular ele era uma grade 2×N com background:transparent,
          sem borda/sombra, em position:fixed — os cartões (Gestão de Dev, IA Komori, Tarefas…)
          ficavam soltos POR CIMA da home, com o conteúdo aparecendo entre eles e cortando os KPIs
          (print do dono 2026-10-07 15:06). Agora é um painel sólido. */
    .topbar-shortcuts-hub-menu.dropdown-menu.show,
    .topbar-shortcuts-hub-menu.dropdown-menu[data-bs-popper].show {
        background: #ffffff;
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: 14px;
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22), 0 0 0 100vmax rgba(15, 23, 42, 0.18);
        padding: 8px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* 3) Trilho dos flutuantes da borda direita (Orçamento › Pendências › Chat › Relato "!").
          No desktop/tablet ele fica no meio da altura (#2097/#2098). No celular ficava em
          cima dos cartões e números (ex.: "17" e "10" da home) e os balões de conversa
          empilhavam mais 38px cada. Aqui: abinhas compactas, ancoradas embaixo, uma coluna
          só (Relato embaixo de tudo) e a página ganha respiro no fim. */
    html:root {
        --kmr-rail-w: 44px;
        --kmr-rail-h: 40px;
        --kmr-rail-gap: 6px;
        --kmr-rail-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        /* topo da abinha do chat = acima do slot do Relato */
        --kmr-rail-chat-top: calc(100% - var(--kmr-rail-bottom) - (2 * var(--kmr-rail-h)) - var(--kmr-rail-gap));
        --kmr-rail-nags-top: calc(var(--kmr-rail-chat-top) - var(--kmr-rail-h) - var(--kmr-rail-gap));
        --kmr-rail-quote-top: calc(var(--kmr-rail-nags-top) - var(--kmr-rail-h) - var(--kmr-rail-gap));
    }

    /* Enquanto o aviso "baixe o app" (kab-banner, fixo embaixo, z-index máximo) está aberto,
       o trilho sobe acima dele em vez de ficar escondido atrás. Ao fechar o aviso, desce. */
    html:root:has(.kab-banner[data-kab-banner]:not([hidden])) {
        --kmr-rail-bottom: calc(126px + env(safe-area-inset-bottom, 0px));
    }

    html body .komori-dock-root[data-collapsed="1"] .komori-dock-launcher {
        width: var(--kmr-rail-w);
        min-width: var(--kmr-rail-w);
        height: var(--kmr-rail-h);
        padding: 0 3px;
        gap: 0;
        border-radius: 12px 0 0 12px;
    }
    html body .komori-dock-root[data-collapsed="1"] .komori-dock-launcher-icon {
        width: 26px;
        height: 26px;
    }
    /* Ícone de "conversa" ao lado do avatar não cabe em 44px; o avatar + badge já dizem que é o chat. */
    html body .komori-dock-root[data-collapsed="1"] .komori-dock-launcher-chip {
        display: none;
    }
    /* Balões de conversa com o chat FECHADO: no celular viram só o contador da abinha
       (a abinha já mostra o total de não lidas). Com o chat aberto nada muda. */
    html body:not([data-komori-dock-open="1"]) .komori-dock-root[data-collapsed="1"] .komori-dock-balloons {
        display: none !important;
    }

    html body .fin-edge-handle {
        border-radius: 12px 0 0 12px;
    }
    html body .fin-edge-bell {
        font-size: 1rem;
    }

    /* Relato "!": vira o último slot do mesmo trilho (antes: bolota 40px solta a 72px do rodapé). */
    html body .bug-report-fab {
        right: 0 !important;
        left: auto !important;
        top: auto !important;
        bottom: var(--kmr-rail-bottom) !important;
        width: var(--kmr-rail-w) !important;
        height: var(--kmr-rail-h) !important;
        border-radius: 12px 0 0 12px !important;
        border-right: 0;
        box-shadow: -2px 2px 10px rgba(255, 122, 0, 0.3);
    }

    /* Respiro no fim da página: o último cartão sobe acima do trilho (3 abinhas + margem). */
    html body .content,
    html body .container-fluid.content,
    html body.app-scroll-lock #page-content-wrapper > .content,
    html body.app-scroll-lock #page-content-wrapper > .container-fluid.content,
    html body.app-scroll-lock #page-content-wrapper > main {
        padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
    }
}