/* Pi Chatbot — cross-cutting rules that don't belong to one component: small-viewport
   layout, keyboard-focus visibility, and prefers-reduced-motion. Loaded LAST so it can
   override any component partial above it. */

@media (max-width: 767px) {
    #pi-chatbot-panel {
        left: 12px !important;
        right: 12px !important;
        top: calc(76px + env(safe-area-inset-top, 0px) + 16px) !important; /* Header is ~76px, add 16px gap so it doesn't overlap header's bottom border */
        /* Matches the EXACT mobile bottom of #sh-floating-buttons (calc(65px + safe-area),
           floating-buttons.css) instead of a separately offset formula like before. */
        bottom: calc(65px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        height: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #pi-chatbot-panel {
        width: min(400px, calc(100vw - 28px));
        height: min(600px, calc(100dvh - 80px));
        right: 80px;
    }
}

/* Previously ONLY .pi-cb-input had focus-visible — the close/reset/send buttons, source
   links, and <summary> were completely invisible when receiving keyboard focus. The
   focus trap moves Tab through these elements but the user couldn't see where they were. */
#pi-chatbot-panel button:focus-visible,
#pi-chatbot-panel a[href]:focus-visible,
#pi-chatbot-panel summary:focus-visible {
    outline: 2px solid var(--cb-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #pi-chatbot-panel {
        transition: none;
    }
    #pi-chatbot-panel.is-open {
        animation: none;
    }
    /* Disables the infinite motion of the 3 typing dots — the longest-lived animation in
       the whole widget (runs for the entire 8-40s wait for the LLM), exactly the kind of
       "infinite animation" that prefers-reduced-motion users want turned off. The 3 dots
       still show at their natural size (no animation = no shrinking to scale(0)), which
       is safe because #pi-cb-status now provides the real status as text and no longer
       depends on this animation. */
    /* Still allow the 3 dots to bounce gently (or normally) since users want to see a
       signal that typing is happening. animation: none; has been removed. */
    #pi-chatbot-panel .pi-cb-typing .dot {
        /* animation: none; */
    }
    #pi-chatbot-panel .pi-cb-qr-btn:hover,
    #pi-chatbot-panel .pi-cb-send:hover:not(:disabled):not([aria-disabled="true"]) {
        transform: none;
    }
    #pi-chatbot-panel .pi-cb-actions button,
    #pi-chatbot-panel .pi-cb-input,
    #pi-chatbot-panel .pi-cb-qr-btn,
    #pi-chatbot-panel .pi-cb-send,
    #pi-chatbot-panel .pi-cb-sources summary,
    #pi-chatbot-panel .pi-cb-step-row summary,
    #pi-chatbot-panel .pi-cb-step-row summary::after {
        transition: none;
    }
}