/*
 * Dr Q leaflet chat — mobile treatment for the Tabler drug pages.
 * Loads AFTER dq-chat.css, so these rules win on specificity ties without !important.
 *
 * WHY THIS FILE EXISTS
 * The legacy chat is a desktop panel that the JS "docks" beside its launcher button:
 * `.leaflet_chat_modal_bg.is-docked { inset:auto; right:126px; bottom:66px; width:auto }`.
 * With a 477px panel on a 375px screen that lands at left:-245 — most of the chat,
 * including the whole input row, sits off-screen and the message text is cut in half.
 * Shrinking it is not enough: at phone width a floating panel has nowhere to float.
 * So on phones it becomes a FULL-SCREEN SHEET (the customer's point that some
 * components need a different UI on mobile, not a smaller desktop one).
 *
 * Breakpoint 767.98px matches the rest of the mobile work (dq-legacy-fixes.css).
 */

@media (max-width: 767.98px) {

    /* ---- The sheet itself ------------------------------------------------ */
    /* Kill the docked offsets; the overlay covers the viewport instead. */
    .leaflet_chat_modal_bg.is-docked,
    .leaflet_chat_modal_bg.is-expanded,
    .leaflet_chat_modal_bg {
        inset: 0;
        /* width:auto lets inset:0 define the box — an explicit 100% resolves against
           the containing block and comes up short wherever a scrollbar is counted. */
        width: auto;
        height: auto;
        padding: 0;
        justify-content: stretch;
        align-items: stretch;
        background: rgba(0, 0, 0, .5);
    }

    /* Fill the sheet; drop the desktop fixed size and the 40px pill radius.
       NOTE the body-prefixed selectors: dq-chat.css pins the panel to 477x474 with
       TWO !important rules at (0,3,1) —
         body.medicament .leaflet_chat_modal:not(.is-expanded)
         body.medicament .leaflet_chat_modal.is-loading:not(.is-expanded)
       A plain `.leaflet_chat_modal` (0,2,0) loses those ties even with !important,
       which is what left the sheet 474px tall in a 629px viewport. Match the body
       context so these win in both the loading and the loaded state. */
    body.medicament .leaflet_chat_modal:not(.is-expanded),
    body.medicament_info .leaflet_chat_modal:not(.is-expanded),
    body.medicament .leaflet_chat_modal.is-loading:not(.is-expanded),
    body.medicament_info .leaflet_chat_modal.is-loading:not(.is-expanded),
    .leaflet_chat_modal,
    .leaflet_chat_modal.is-expanded,
    .leaflet_chat_modal.is-loading:not(.is-expanded) {
        width: 100% !important;
        height: 100% !important;
        max-width: none;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* The expanded state paints a decorative doctor image positioned for a 1149px
       panel; on a phone it only overlaps the conversation. */
    .leaflet_chat_modal.is-expanded::after {
        display: none;
    }

    /* Header: keep it clear of the notch / status bar. */
    .leaflet_chat_header {
        padding-top: calc(10px + env(safe-area-inset-top));
    }

    /* The corner "expand" control is meaningless when the sheet is already
       full-screen — hide it and leave the close button as the only affordance. */
    .leaflet_chat_corner_arrow {
        display: none;
    }

    /* ---- Conversation ---------------------------------------------------- */
    .leaflet_chat_messages {
        padding: 12px 14px;
        /* Momentum scrolling; the sheet itself must not rubber-band the page. */
        -webkit-overflow-scrolling: touch;
    }

    /* ---- Input row ------------------------------------------------------- */
    /* Desktop reserves 143px on the right for a 119px send button. On a phone the
       button is 48px, so that padding would swallow most of the typing area. */
    .leaflet_chat_input_wrap {
        min-height: 56px;
        padding-left: 14px;
        padding-right: 68px;   /* 48px button + 12px inset + 8px breathing room */
        border-radius: 28px;
    }

    .leaflet_chat_form {
        gap: 8px;
        margin-top: 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }

    .leaflet_chat_send.btn {
        right: 6px;
        width: 44px !important;
        height: 44px !important;
    }

    .leaflet_chat_send.btn svg {
        width: 44px;
        height: 44px;
    }

    /* 16px keeps iOS Safari from zooming the page when the field is focused. */
    .leaflet_chat_input {
        font-size: 16px;
    }

    /* ---- Launcher button: face-only circle (designer request, PPT 2026-07-30, A1)
       An earlier unprompted shrink was reverted; this one is the designer's spec:
       on phones the launcher is a ~56px circle showing ONLY the doctor's face on
       the brand purple — like the minimized state — with the green "online" dot
       appearing only after the chat has loaded (JS adds .is-open-image once the
       token exists, see dqSetChatTriggerOpenState in leaflet_chat.php).

       Implementation: the <img> (which JS swaps between the 285x131 banner and
       the 141x106 minimized asset) is hidden; the button paints the minimized
       asset as a background, zoomed and offset so the face fills the circle and
       the BAKED-IN green dot (pixels x15..34,y0..19 of ask_dr_q_open.png) falls
       outside the border-radius clip. The after-load dot is a CSS pseudo-element,
       so it can be toggled independently of the artwork.
       56px ≈ half the desktop launcher's 106px height, a bit taller than the
       report-a-mistake circle — exactly the size the designer asked for. */
    body .leaflet_chat_btn,
    body .leaflet_chat_btn.is-open-image {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        /* 141x106 asset at 100px wide → face center (x70,y52 → x49.6,y36.9)
           lands on the button center (28,28); the baked-in dot ends up fully
           outside the rounded clip. */
        background: #9c5884 url(/images/ask_dr_q_open.png) no-repeat -22px -9px / 100px auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    }

    body .leaflet_chat_btn img {
        display: none;
    }

    /* Green "loaded" dot — same #34C759 as the baked-in one, white ring, top-left
       like the original asset. No overflow:hidden on the button, so it may sit on
       the circle's edge without being clipped. */
    body .leaflet_chat_btn.is-open-image::after {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #34c759;
        border: 2px solid #fff;
    }

    /* ---- Loading card ---------------------------------------------------- */
    .leaflet_chat_modal.is-loading .leaflet_chat_loader_card {
        width: calc(100% - 32px);
    }
}