/* NetShow Communicator — phone hardening (OPUS5-L08 375 sweep).
 *
 * The demo path (agent profile door + /use door) loads the Communicator from a
 * third-party host, so its stylesheet cannot be edited from this repo. That build's
 * own `@media(max-width:640px)` block SHRINKS the controls — .ns-ab to 26px, .ns-x and
 * .ns-gear to 26px — and leaves the composer pinned 694px down a 812px phone, which is
 * 218px BELOW the top of the iOS keyboard: the field and the send button are both
 * unreachable the moment you tap to type.
 *
 * Every rule here is one specificity step above the widget's own (`html #ns-chat-root`
 * vs `#ns-chat-root`) so it wins whichever build loads, and every rule lives inside
 * `@media (max-width:640px)` — at 641px and up this file changes nothing at all.
 *
 * Pairs with public/js/ns-communicator-phone.js, which measures the keyboard off
 * visualViewport and publishes it as --ns-kb.
 */

@media (max-width: 640px) {

    /* ── touch targets: 44px is the smallest thing a thumb hits on the first try ── */
    html #ns-chat-root .ns-ab {
        height: 44px;
        min-width: 44px;
        padding: 0 10px;
        font-size: 11px;
        border-radius: 8px;
    }

    html #ns-chat-root .ns-ab svg {
        width: 13px;
        height: 13px;
    }

    html #ns-chat-root .ns-x,
    html #ns-chat-root .ns-gear {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    html #ns-chat-root .ns-av {
        width: 44px;
        height: 44px;
    }

    html #ns-chat-root .ns-lang-sel {
        min-height: 44px;
        min-width: 44px;
        padding: 0 6px;
        font-size: 13px;
    }

    html #ns-chat-root .ns-cam,
    html #ns-chat-root .ns-mic,
    html #ns-chat-root .ns-snd {
        width: 44px;
        height: 44px;
    }

    html #ns-chat-root .ns-in {
        min-height: 44px;
    }

    html #ns-chat-root .ns-vol-wrap {
        gap: 4px;
        margin-top: 2px;
    }

    html #ns-chat-root .ns-vol-mute {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        font-size: 18px;
    }

    /* a 4px-tall range input is a 4px-tall tap target; grow the control, keep the track thin */
    html #ns-chat-root .ns-vol-slider {
        height: 44px;
        background: transparent;
    }

    html #ns-chat-root .ns-vol-slider::-webkit-slider-runnable-track {
        height: 4px;
        border-radius: 2px;
        background: #253a52;
    }

    html #ns-chat-root .ns-vol-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #d4a847;
        margin-top: -9px;
    }

    html #ns-chat-root .ns-vol-slider::-moz-range-track {
        height: 4px;
        border-radius: 2px;
        background: #253a52;
    }

    html #ns-chat-root .ns-vol-slider::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 0;
        background: #d4a847;
    }

    /* the attribution link sits directly under the composer — a mis-tap opens a new tab
       mid-conversation, so it gets a real target instead of an 11px sliver */
    html #ns-chat-root .ns-pwr {
        margin-top: 0;
    }

    html #ns-chat-root .ns-pwr a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 10px;
    }

    html #ns-game-btn .ns-gb {
        width: 44px;
        height: 44px;
    }

    /* ── software keyboard ──
       iOS pins position:fixed to the LAYOUT viewport, which does not shrink when the
       keyboard opens, and nothing can scroll a fixed panel back into view. --ns-kb is the
       live keyboard height; lifting the root by exactly that keeps the composer and the
       send button on screen, and the two rows below the composer stand down while typing
       so the conversation keeps the space. */
    html #ns-chat-root.ns-kb-open {
        bottom: calc(6px + var(--ns-kb, 0px));
    }

    html #ns-chat-root.ns-kb-open .ns-pnl {
        height: min(calc(100vh - var(--ns-kb, 0px) - 74px), 780px);
    }

    html #ns-chat-root.ns-kb-open .ns-vol-wrap,
    html #ns-chat-root.ns-kb-open .ns-pwr {
        display: none;
    }
}