/* Vibers — phones and small tablets. Loaded after every other stylesheet. */

/* Safety net: nothing may make the page wider than the screen (that is what "zoomed out" pages on phones were). */
html, body { overflow-x: clip; }

/* ---------- Tablets and phones ---------- */
@media (max-width: 991.98px) {
    /* Sign in / sign up: the big side panel is for desktops; on phones the form comes first. */
    .sf-auth-hero { display: none !important; }
    .sf-auth-grid { display: block; min-height: 100vh; }
    .sf-auth-panel { min-height: 100vh; }

    /* Chat: the team as a compact row with names (roles are for big screens). */
    .sf-chatx-team { justify-content: space-around; overflow: visible; gap: .25rem; padding: .25rem 0 .5rem; border-bottom: 1px solid var(--cx-line); }
    .sf-chatx-team .sf-agent-card { flex: 1 1 0; min-width: 0; padding: .3rem .1rem; gap: .25rem; }
    .sf-chatx-team .sf-agent-card .sf-vib { --s: 40px; }
    .sf-chatx-team .sf-agent-label b { display: none; }
    .sf-chatx-team .sf-agent-label small { display: block; font-size: .78rem; font-weight: 700; color: var(--cx-text); }
}

/* ---------- Phones ---------- */
@media (max-width: 767.98px) {
    /* Bootstrap's big gutters (g-5) poke out of a 375px screen. */
    .row.g-5 { --bs-gutter-x: 1.5rem; }

    /* Public header: language and radio move into the ☰ menu. */
    .sf-public-nav .container { gap: .5rem !important; }
    .sf-public-nav .sf-lang, .sf-public-nav .sf-radio-btn { display: none !important; }
    .sf-public-nav .btn-sf-primary { padding: .45rem .8rem; font-size: .9rem; }
    .sf-public-nav .sf-logo-img { height: 26px; width: auto; }
    .sf-public-nav .btn-sf-primary .bi-arrow-right { display: none; }
    .sf-public-nav .sf-theme-btn, .sf-public-nav .sf-icon-btn { width: 38px; height: 38px; }
    .sf-public-menu .dropdown-menu { min-width: 230px; }
    .sf-public-menu .sf-lang { display: inline-flex !important; margin: .25rem 1rem .5rem; }

    .sf-laptop-base { max-width: 100%; }
    .sf-explore-search { width: 100%; max-width: 100%; }

    /* Panel top bar: language and radio live in the user menu; the title gets the room. */
    .sf-topbar { gap: .4rem; }
    .sf-topbar .sf-lang, .sf-topbar .sf-radio-btn { display: none !important; }
    .sf-topbar .sf-user-lang { display: block; }
    .sf-topbar-edit { flex: 1 1 auto; min-width: 0; gap: .35rem; }
    .sf-topbar-edit .sf-topbar-back { width: 34px; height: 34px; }
    .sf-chatx-title { font-size: .95rem; padding-right: 1.4rem; }
    .sf-topbar-status .badge, .sf-topbar-status > * { font-size: .64rem; padding: .2rem .45rem; }
    .sf-page-title { font-size: 1.55rem; }

    /* Chat: tools row wraps; the message box gets the whole width, buttons go below it. */
    .sf-chatx-tools { flex-wrap: wrap; justify-content: center; gap: .4rem; }
    .sf-chatx-main { height: calc(100dvh - 210px); min-height: 420px; }
    .sf-chatx-composer { flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: .3rem 0 .2rem; }
    .sf-chatx-box { flex: 1 1 100%; min-height: 50px; padding: .3rem .8rem .3rem .4rem; border-radius: 22px; }
    .sf-chatx-cost { display: none; }
    .sf-chatx-mic, .sf-chatx-send { width: 44px; height: 44px; font-size: 1.1rem; }
    .sf-chatx-send { border-radius: 14px; }
    .sf-cmsg { max-width: 100%; }
    .sf-cmsg > .sf-vib { --s: 30px; }
    .sf-chatx-hello h1 { font-size: 1.6rem; }

    /* Carousel: one agent per screen, buttons wrap. */
    .sf-view-bar { flex-wrap: wrap; gap: .5rem; }
    .sf-carousel-dots { width: 100%; }
    .sf-carousel-dots button { flex: 1 1 calc(50% - .4rem); }
    .sf-chats.is-carousel .sf-chat { flex-basis: 92%; }
    .sf-chat { height: calc(100dvh - 250px); min-height: 440px; }

    /* Task board: one column at a time, snapping. */
    .sf-board { scroll-snap-type: x mandatory; }
    .sf-board-col { scroll-snap-align: start; }

    /* Dashboard numbers and cards. */
    .sf-kpi-big { font-size: 2rem; }
    .sf-stat { padding: 1rem; }
}

/* The language switch inside the menus (phones). */
@media (max-width: 767.98px) {
    .sf-topbar .sf-dropdown .sf-lang { display: inline-flex !important; }
}