/*
 * pwa.css — acabamento iOS/PWA do shell moderno.
 *
 * Aditivo e cirúrgico de propósito: só ajusta elementos fixos que colidem com
 * a safe-area (botão flutuante + banner de instalação) e aplica toques de iOS.
 * Não toca no grid/sidebar/header pra não regredir o layout — com
 * apple-mobile-web-app-status-bar-style=default não há overlap no topo.
 */

/* ---------- Toques de iOS (todas as páginas modernas) ---------- */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

a,
button,
[role="button"],
.header-icon-btn {
    -webkit-tap-highlight-color: rgba(0, 71, 135, 0.12);
}

/* iOS dá zoom no foco quando o input tem font-size < 16px. Só no mobile,
   pra não inflar inputs no desktop. */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px;
    }
}

/* Botão flutuante do WhatsApp acima do indicador de home / notch (landscape). */
@supports (padding: env(safe-area-inset-bottom)) {
    .whatsapp-floating-button {
        bottom: calc(26px + env(safe-area-inset-bottom));
        right: calc(20px + env(safe-area-inset-right));
    }
}

/* ---------- Banner de instalação (Android/desktop e dica iOS) ---------- */

.pwa-install-banner {
    position: fixed;
    z-index: 2147483000; /* acima de tudo, inclusive modais */
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, calc(100% + 40px)) scale(0.96);
    transform-origin: bottom center;
    width: min(440px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 44px 16px 18px;
    background: #ffffff;
    color: #1f2328;
    border-radius: 16px;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 71, 135, 0.12);
    opacity: 0;
    transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.32s ease;
    font-family:
        "Roboto",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.pwa-install-banner.is-visible {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
}

.pwa-install-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Título do banner. Seletor de filho direto (>) de propósito: o texto de
   instrução do iOS tem um <strong> aninhado ("Adicionar à Tela de Início") que
   NÃO pode herdar este display:block — senão quebra a frase numa linha própria. */
.pwa-install-content > strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #004787;
    margin-bottom: 2px;
}

.pwa-install-content span {
    display: block;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #57606a;
}

/* Ênfase inline dentro da instrução (ex.: "Adicionar à Tela de Início"):
   fica na mesma linha, herda o tamanho do <span>, só reforça o peso/cor. */
.pwa-install-content span strong {
    font-weight: 700;
    color: #1f2328;
}

.pwa-share-glyph {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: #004787;
}

.pwa-install-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pwa-install-btn {
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    border: 0;
    border-radius: 9px;
    padding: 9px 16px;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease;
}

.pwa-install-btn--primary {
    background: #004787;
    color: #fff;
}

.pwa-install-btn--primary:hover {
    background: #0056a3;
}

.pwa-install-btn--ghost {
    background: transparent;
    color: #57606a;
}

.pwa-install-btn--ghost:hover {
    background: rgba(0, 0, 0, 0.05);
}

.pwa-install-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8b949e;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pwa-install-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #57606a;
}

/* Em telas estreitas o banner ocupa a largura e empilha as ações embaixo. */
@media (max-width: 480px) {
    .pwa-install-banner {
        flex-wrap: wrap;
        padding-right: 18px;
    }

    .pwa-install-actions {
        flex-direction: row;
        width: 100%;
        justify-content: flex-end;
    }
}

/* Modo escuro */
[data-theme="dark"] .pwa-install-banner {
    background: #161b22;
    color: #e6edf3;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .pwa-install-content > strong {
    color: #58a6ff;
}

[data-theme="dark"] .pwa-install-content span strong {
    color: #e6edf3;
}

[data-theme="dark"] .pwa-install-content span {
    color: #8b949e;
}

[data-theme="dark"] .pwa-install-btn--ghost {
    color: #8b949e;
}

[data-theme="dark"] .pwa-install-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ---------- Item "Instalar Intranet" na sidebar (entrada manual) ----------
   <button> reaproveitando o visual dos .nav-item (que são <a>). pwa.js
   alterna o display inline; aqui só zeramos a aparência nativa do botão pra
   não destoar dos demais itens da nav. */
.sidebar-pwa-install {
    width: 100%;
    margin: 0;
    background: transparent;
    border: 0;
    border-left: 4px solid transparent; /* alinha com o marcador dos outros itens */
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: var(--line-height-normal) !important;
    color: var(--color-white) !important;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- Alvos de toque >= 44px (telas touch) ----------
   Só em ponteiro grosso (dedo) e só nos botões-ícone pequenos — não infla
   links/chips de texto nem altera o desktop. O .header-icon-btn já é 44px;
   reforçado aqui por segurança. */
@media (pointer: coarse) {
    .header-icon-btn,
    .btn-send,
    .btn-suggestions-refresh,
    .btn-chat-clear {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ---------- Rede de segurança: tabelas largas roláveis no mobile ----------
   mobile-enhance.js embrulha tabelas de conteúdo neste container. Tabela que
   couber não mostra scroll; tabela larga rola no eixo X com inércia, em vez de
   estourar a largura da página. */
.pwa-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}