/* Zefinha IA - PWA: banner de instalação + modal de tutorial (iOS/Android) */

/* Em fluxo normal (não fixed) logo abaixo do topbar — mesmo padrão de
   .compare-bar: empurra o conteúdo em vez de flutuar por cima do composer,
   que já ocupa o rodapé da tela permanentemente. */
.pwa-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}
.pwa-banner-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.pwa-banner-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pwa-banner-text strong { font-size: 13px; }
.pwa-banner-text span { font-size: 12px; color: var(--text-dim); }
.pwa-banner-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.pwa-btn {
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 9px;
    padding: 7px 11px;
    font-size: 12.5px;
    white-space: nowrap;
}
.pwa-btn:hover { background: var(--bg); }
.pwa-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pwa-btn-primary:hover { background: var(--accent-2); }
.pwa-btn-icon {
    background: transparent; border: none; color: var(--text-dim);
    font-size: 18px; line-height: 1; padding: 4px 6px; cursor: pointer;
}
.pwa-btn-icon:hover { color: var(--text); }

@media (max-width: 480px) {
    .pwa-banner { flex-wrap: wrap; }
    .pwa-banner-text { order: 1; width: calc(100% - 44px); }
    .pwa-banner-actions { order: 2; width: 100%; justify-content: flex-end; }
}

/* Modal tutorial */
.pwa-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 70;
    padding: 16px;
}
.pwa-modal {
    position: relative;
    width: min(420px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 20px 18px;
}
.pwa-modal h3 { margin: 0 0 14px; padding-right: 24px; }
.pwa-modal-close {
    position: absolute; top: 10px; right: 10px;
    background: transparent; border: none; color: var(--text-dim);
    font-size: 20px; line-height: 1; cursor: pointer; padding: 6px;
}
.pwa-modal-close:hover { color: var(--text); }

.pwa-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.pwa-tab {
    background: var(--bg-3); border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 9px; padding: 7px 11px; font-size: 12.5px;
}
.pwa-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.pwa-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.pwa-steps li { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.pwa-steps li strong { color: var(--accent); }