@charset "UTF-8";

/*
 * mobile-auth.css
 * Mobile-optimized UI layer for authenticated (post-login) screens.
 *
 * Safety model (must not affect PC / other environments):
 *   - Loaded only when config('app.mobile_auth_ui_enabled') is true (Staging via MOBILE_AUTH_UI_ENABLED).
 *   - Every rule is scoped under `body.mobile-auth-ui`.
 *   - Every visual override lives inside a mobile media query, so PC widths are never restyled.
 *
 * Breakpoints:
 *   - <= 1024px : tablet/phone. Existing template CSS already collapses the sidebar here.
 *   - <= 767.98px : phone. Where we flatten PC-fixed widths and 2-column layouts.
 */

/* ------------------------------------------------------------------ */
/* Sidebar toggle (hamburger) — only meaningful once the sidebar hides */
/* Hidden on PC (sidebar is always visible there); shown as a clear,    */
/* labeled button on tablet/phone where the sidebar collapses.          */
/* ------------------------------------------------------------------ */
body.mobile-auth-ui .mobile-auth-sidebar-toggle {
  display: none;
}

@media (max-width: 1024px) {
  body.mobile-auth-ui .mobile-auth-sidebar-toggle {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    z-index: 895;
  }

  /* Shared control height so Menu / Phone / Avatar line up cleanly */
  body.mobile-auth-ui .mobile-auth-hamburger {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    width: auto;
    min-width: 4.4rem;
    height: 4.4rem;
    min-height: 4.4rem;
    padding: 0 1.2rem !important;
    background-color: #5aa087;
    color: #fff !important;
    border-radius: 0.6rem;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.15);
    line-height: 1;
  }

  body.mobile-auth-ui .mobile-auth-hamburger i {
    font-size: 1.8rem;
  }

  body.mobile-auth-ui .mobile-auth-hamburger__label {
    font-size: 1.4rem;
    font-weight: 700;
  }

  body.mobile-auth-ui .mobile-auth-hamburger:hover,
  body.mobile-auth-ui .mobile-auth-hamburger:focus,
  body.mobile-auth-ui .mobile-auth-hamburger:active {
    color: #fff !important;
    background-color: #4c8a73;
    text-decoration: none;
  }

  /*
   * Fixed header. Layout: [Menu] …… [Phone (parent)] [Avatar]
   * Avatar sits at the far right of the iframe; the parent phone button is
   * offset left of it (see respondent/index.blade.php).
   * Do not override background-color — keep each theme's PC navbar color
   * (admin white.css: #e7f2ee, staff white-staff.css: #DFE5F1).
   */
  body.mobile-auth-ui .main-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 5.6rem !important;
    min-height: 5.6rem;
    padding: 0 0.8rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 900;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.08);
  }

  body.mobile-auth-ui .navbar-bg {
    display: none;
  }

  body.mobile-auth-ui.sidebar-show .main-sidebar {
    z-index: 910;
  }

  /* Keep the PC avatar + caret look; only align vertically in the header */
  body.mobile-auth-ui .main-navbar .navbar-right {
    margin-left: auto !important;
    margin-right: 0 !important;
    height: 4.4rem;
    align-items: center;
    gap: 0.6rem;
  }

  body.mobile-auth-ui .main-navbar .navbar-right > li {
    display: flex;
    align-items: center;
  }

  body.mobile-auth-ui .main-navbar .navbar-right .nav-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 4.4rem;
    min-height: 4.4rem;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  /* Clear the fixed header (also needed between 768px and 1024px) */
  body.mobile-auth-ui .main-content {
    padding-top: 8rem !important;
  }
}

/* ------------------------------------------------------------------ */
/* Phone layout: flatten PC-fixed widths and paddings                  */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  /* Main content: drop the sidebar-width left padding, clear the fixed header */
  body.mobile-auth-ui .main-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 8rem !important;
    width: 100% !important;
    overflow-x: hidden;
  }

  /* Keep page titles fully visible below the fixed header */
  body.mobile-auth-ui .section-header {
    margin-top: 0 !important;
    padding-top: 0.5rem;
  }

  /* Root cause of horizontal overflow: the template fixes .section-body to
     127rem (1270px). Let it follow the viewport width on phones. */
  body.mobile-auth-ui .section-body {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Safety net: never let a stray fixed-width child force a wider page */
  body.mobile-auth-ui .section,
  body.mobile-auth-ui .section-header {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Footer: remove the hard-coded 157rem width / 280px left padding */
  body.mobile-auth-ui .main-footer {
    width: 100% !important;
    padding: 1.5rem !important;
    text-align: center;
  }

  body.mobile-auth-ui .main-footer .footer-left,
  body.mobile-auth-ui .main-footer .footer-right {
    float: none;
    display: block;
  }

  body.mobile-auth-ui .main-footer .footer-right {
    margin-top: 0.5rem;
  }

  /* Ticket detail: PC uses a fixed 2-column (left-body + right-body). Stack them. */
  body.mobile-auth-ui .left-body,
  body.mobile-auth-ui .right-body {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body.mobile-auth-ui .right-body {
    margin-top: 2rem;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.mobile-auth-ui .reply-divider {
    width: 100% !important;
  }

  body.mobile-auth-ui #status_management_title {
    width: 100%;
  }

  /* First contact block has PC negative margins that break on narrow widths */
  body.mobile-auth-ui .first-contact {
    padding-left: 1rem;
  }

  body.mobile-auth-ui .first-contact > div.avatar-block {
    margin-right: 0;
  }

  /* Cards: a touch more rounding + no PC side margins */
  body.mobile-auth-ui .card {
    margin-left: 0;
    margin-right: 0;
  }

  body.mobile-auth-ui .article_card {
    margin-left: 0;
  }

  /* Any wide table should scroll horizontally instead of breaking layout */
  body.mobile-auth-ui .table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  /* Reply textarea reserves 20rem right padding on PC for the toolbar; reclaim it */
  body.mobile-auth-ui .reply-textarea,
  body.mobile-auth-ui .note-editor .note-editable {
    padding-right: 1.5rem !important;
  }

  body.mobile-auth-ui #attachment_files {
    position: static;
    margin-top: 1rem;
  }

  /* Section nav (breadcrumb/back buttons) wrap instead of overflowing */
  body.mobile-auth-ui .section-nav {
    margin-left: 0;
    flex-wrap: wrap;
  }
}

/* ------------------------------------------------------------------ */
/* Ticket status filter: PC keeps horizontal tabs, phone uses a select */
/* Base hidden state comes from Bootstrap `.d-none` on the element, so  */
/* themes that don't load this file keep tabs-only (no stray select).   */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  /* Hide the horizontal pill tabs on phones */
  body.mobile-auth-ui .points-month-tabs .nav-pills.ticket-status-pills {
    display: none;
  }

  /* Show the select-based filter instead (override Bootstrap .d-none) */
  body.mobile-auth-ui .ticket-status-mobile-filter.d-none {
    display: block !important;
    margin-bottom: 1rem;
  }

  body.mobile-auth-ui .ticket-status-mobile-filter select {
    width: 100%;
    height: auto;
    padding: 0.9rem 1rem;
    font-size: 1.5rem;
    border: 0.1rem solid #ddd;
    border-radius: 0.6rem;
    background-color: #fff;
  }

  body.mobile-auth-ui .ticket-status-mobile-filter label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #555;
  }
}

/* ------------------------------------------------------------------ */
/* Guest / auth screens (login, register, password reset, etc.)        */
/* Only active on public-white layout (body.mobile-auth-guest), so PC   */
/* and non-white themes are untouched. All overrides are phone-scoped.  */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  /* Content area: PC reserves a big left padding; reclaim full width.
     !important on padding-top beats body.mobile-auth-ui's 8rem navbar
     clearance (guest pages have no fixed post-login navbar). */
  body.mobile-auth-guest .main-content.main-user {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 2rem !important;
    width: 100% !important;
    overflow-x: hidden;
  }

  body.mobile-auth-guest .section.mt-30 {
    margin-top: 1.5rem !important;
  }

  /* Login/register card fills the width cleanly */
  body.mobile-auth-guest .card.card-custom {
    margin-left: 0;
    margin-right: 0;
  }

  body.mobile-auth-guest .card.card-custom .card-header,
  body.mobile-auth-guest .card.card-custom .card-body {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  /* Brand bar: less tall on phones */
  body.mobile-auth-guest #header_sign_in {
    height: auto;
    min-height: 5.6rem;
    padding: 1.2rem 1rem;
  }

  /* white.css hard-codes 54rem (540px) for the sign-in column — flatten */
  body.mobile-auth-guest #signin_input_parts,
  body.mobile-auth-guest #signin_input_parts input#email,
  body.mobile-auth-guest #signin_input_parts input#password,
  body.mobile-auth-guest #forgot_pwd {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.mobile-auth-guest #signin_input_parts input#email,
  body.mobile-auth-guest #signin_input_parts input#password {
    height: 4.8rem;
  }

  /* PC hero title (~60px) → readable mobile size */
  body.mobile-auth-guest #sign_in {
    font-size: 3.2rem;
    line-height: 1.2;
  }

  body.mobile-auth-guest #password_title {
    font-size: 2rem;
    line-height: 1.3;
  }

  /* Full-width submit; override .w-240 + heavy btn-lg padding */
  body.mobile-auth-guest button#submit_sign_in {
    width: 100% !important;
    max-width: 100%;
    font-size: 1.8rem;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  body.mobile-auth-guest a#create_one_sign_in {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Eye toggle sits in #password_sign_in (also contains #forgot_pwd),
     so top:50% would center against the whole group and drift down.
     Align to the 4.8rem password input only. */
  body.mobile-auth-guest #toggle_password {
    top: 0.9rem;
    right: 0.8rem;
    transform: none;
  }

  /* Footer: stack the two columns and center them on phones */
  body.mobile-auth-guest .main-footer.public-footer {
    padding: 1.5rem !important;
    text-align: center;
  }

  body.mobile-auth-guest .main-footer.public-footer .footer-left,
  body.mobile-auth-guest .main-footer.public-footer .footer-right {
    float: none;
    display: block;
  }

  body.mobile-auth-guest .main-footer.public-footer .footer-right {
    margin-top: 0.5rem;
  }

  /* reCAPTCHA: keep the fixed-width widget from spilling off-screen */
  body.mobile-auth-guest .recaptcha-wrapper {
    overflow-x: hidden;
    display: flex;
    justify-content: center;
  }
}

/* Very narrow phones: the reCAPTCHA widget is a fixed 304px; scale it   */
/* down slightly so it never overflows the smallest devices.            */
@media (max-width: 340px) {
  body.mobile-auth-guest .g-recaptcha {
    transform: scale(0.9);
    transform-origin: top center;
  }
}

/* ------------------------------------------------------------------ */
/* Ticket list: PC keeps the wide table, phone switches to card list.  */
/* .mobile-auth-pc-only wraps the existing <table>; the card block is   */
/* only rendered when the flag is on, and only shown at phone widths.   */
/* ------------------------------------------------------------------ */

/* Cards are hidden by default (PC / tablet), even when the flag is on */
body.mobile-auth-ui .mobile-auth-ticket-cards {
  display: none;
}

@media (max-width: 767.98px) {
  /* Hide the PC table wrapper, reveal the card list */
  body.mobile-auth-ui .mobile-auth-pc-only {
    display: none !important;
  }

  body.mobile-auth-ui .mobile-auth-ticket-cards {
    display: block;
  }

  body.mobile-auth-ui .mobile-auth-ticket-card {
    display: block;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.2rem;
    border: 0.1rem solid #e3e6ea;
    border-radius: 0.8rem;
    background-color: #fff;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.06);
    color: inherit;
    text-decoration: none;
  }

  body.mobile-auth-ui .mobile-auth-ticket-card:active {
    background-color: #f7f9fa;
  }

  /* Unread cards get a colored left accent to match the PC bold/bg cue */
  body.mobile-auth-ui .mobile-auth-ticket-card.is-unread {
    border-left: 0.4rem solid #e74c3c;
    background-color: #fff8f7;
  }

  body.mobile-auth-ui .mobile-auth-ticket-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
  }

  body.mobile-auth-ui .mobile-auth-ticket-card__status {
    font-size: 1.2rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.4rem;
  }

  body.mobile-auth-ui .mobile-auth-ticket-card__id {
    font-size: 1.2rem;
    color: #888;
  }

  body.mobile-auth-ui .mobile-auth-ticket-card__subject {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
    margin-bottom: 0.6rem;
    word-break: break-word;
  }

  body.mobile-auth-ui .mobile-auth-ticket-card__tags {
    margin-bottom: 0.8rem;
  }

  body.mobile-auth-ui .mobile-auth-ticket-card__meta {
    margin: 0;
  }

  body.mobile-auth-ui .mobile-auth-ticket-card__meta > div {
    display: flex;
    gap: 0.8rem;
    padding: 0.3rem 0;
    font-size: 1.3rem;
  }

  body.mobile-auth-ui .mobile-auth-ticket-card__meta dt {
    flex: 0 0 9rem;
    margin: 0;
    font-weight: 700;
    color: #888;
  }

  body.mobile-auth-ui .mobile-auth-ticket-card__meta dd {
    flex: 1 1 auto;
    margin: 0;
    color: #444;
    word-break: break-word;
  }
}

/* ------------------------------------------------------------------ */
/* Dashboard: stack stat cards, cardify voicemail + ticket list        */
/* ------------------------------------------------------------------ */

/* Voicemail cards hidden on PC/tablet (same pattern as ticket cards) */
body.mobile-auth-ui .mobile-auth-voicemail-cards {
  display: none;
}

@media (max-width: 767.98px) {
  /* Summary stat rows: 4-across col-3 → full-width stack */
  body.mobile-auth-ui .mobile-auth-dashboard .mobile-auth-stat-row > .col-3 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.2rem;
  }

  body.mobile-auth-ui .mobile-auth-dashboard .card-statistic-1 {
    margin-bottom: 0;
  }

  /* Dashboard ticket tabs: hide pills, show select */
  body.mobile-auth-ui .dashboard-ticket-tabs .nav-pills.dashboard-ticket-pills {
    display: none;
  }

  body.mobile-auth-ui .dashboard-ticket-mobile-filter.d-none {
    display: block !important;
    margin-bottom: 1rem;
  }

  body.mobile-auth-ui .dashboard-ticket-mobile-filter select {
    width: 100%;
    height: auto;
    padding: 0.9rem 1rem;
    font-size: 1.5rem;
    border: 0.1rem solid #ddd;
    border-radius: 0.6rem;
    background-color: #fff;
  }

  body.mobile-auth-ui .dashboard-ticket-mobile-filter label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #555;
  }

  /* Voicemail settings: hide table, show cards */
  body.mobile-auth-ui .mobile-auth-voicemail-cards {
    display: block;
    margin-bottom: 2rem;
  }

  body.mobile-auth-ui .mobile-auth-voicemail-card {
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.2rem;
    border: 0.1rem solid #e3e6ea;
    border-radius: 0.8rem;
    background-color: #fff;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.06);
  }

  body.mobile-auth-ui .mobile-auth-voicemail-card__dept {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.8rem;
  }

  body.mobile-auth-ui .mobile-auth-voicemail-card__phone-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
  }

  body.mobile-auth-ui .mobile-auth-voicemail-card__phone {
    font-size: 1.4rem;
    color: #444;
    word-break: break-all;
  }

  /* Section titles: slightly smaller on phones */
  body.mobile-auth-ui .mobile-auth-dashboard .section-title {
    font-size: 1.6rem;
    flex-wrap: wrap;
  }

  body.mobile-auth-ui .mobile-auth-dashboard .section-header h1 {
    font-size: 2rem;
  }
}

/* ------------------------------------------------------------------ */
/* Ticket search: collapse on phone, keep PC horizontal layout.         */
/* Native <details> so open/close survives Vue (#app1) remount.         */
/* ------------------------------------------------------------------ */

body.mobile-auth-ui .mobile-auth-search-details > .mobile-auth-search-toggle {
  display: none;
  list-style: none;
}

body.mobile-auth-ui .mobile-auth-search-details > .mobile-auth-search-toggle::-webkit-details-marker {
  display: none;
}

/*
 * PC / tablet: keep search fields visible.
 * Primary fix is always-open <details> + mobile-auth-search.js.
 * display:contents is a fallback so closed details still paint on desktop.
 */
@media (min-width: 768px) {
  body.mobile-auth-ui .mobile-auth-search-details {
    display: contents;
  }

  body.mobile-auth-ui .mobile-auth-search-details > .mobile-auth-search-toggle {
    display: none !important;
  }

  body.mobile-auth-ui .mobile-auth-search-details > .mobile-auth-search-fields,
  body.mobile-auth-ui .mobile-auth-search-details[open] > .mobile-auth-search-fields {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.mobile-auth-ui .mobile-auth-search-details::details-content {
    display: block;
    content-visibility: visible;
  }
}

@media (max-width: 767.98px) {
  body.mobile-auth-ui .search-condition-area {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1.2rem 1.4rem !important;
    margin-bottom: 1.2rem;
  }

  body.mobile-auth-ui .mobile-auth-search-details > .mobile-auth-search-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
    padding: 1rem 1.2rem;
    border: 0.1rem solid #ddd;
    border-radius: 0.6rem;
    background-color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    text-align: left;
    cursor: pointer;
  }

  body.mobile-auth-ui .mobile-auth-search-toggle__label {
    flex: 1 1 auto;
  }

  body.mobile-auth-ui .mobile-auth-search-toggle__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.6rem;
    border-radius: 1.1rem;
    background-color: #5aa087;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
  }

  body.mobile-auth-ui .mobile-auth-search-toggle__chevron {
    width: 0.8rem;
    height: 0.8rem;
    border-right: 0.2rem solid #666;
    border-bottom: 0.2rem solid #666;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex: 0 0 auto;
  }

  body.mobile-auth-ui .mobile-auth-search-details[open] > .mobile-auth-search-toggle .mobile-auth-search-toggle__chevron {
    transform: rotate(-135deg);
    margin-top: 0.4rem;
  }

  body.mobile-auth-ui .mobile-auth-search-details > .mobile-auth-search-fields {
    margin-top: 1.2rem;
  }

  /* Stack selects / keyword full-width */
  body.mobile-auth-ui .search-condition-area .mobile-auth-search-fields > .d-flex {
    flex-direction: column;
    align-items: stretch;
  }

  body.mobile-auth-ui .search-condition-area .mobile-auth-search-fields .form-group {
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 1rem;
  }

  body.mobile-auth-ui .search-condition-area .mobile-auth-search-fields .selectric,
  body.mobile-auth-ui .search-condition-area .mobile-auth-search-fields .selectric-wrapper,
  body.mobile-auth-ui .search-condition-area .mobile-auth-search-fields .vs--searchable,
  body.mobile-auth-ui .search-condition-area .mobile-auth-search-fields #search {
    width: 100% !important;
    max-width: 100%;
  }

  /* Status is already available via the mobile status select — hide duplicate */
  body.mobile-auth-ui .search-condition-area .mobile-auth-search-status-field {
    display: none !important;
  }

  body.mobile-auth-ui .search-condition-area .mobile-auth-search-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }

  body.mobile-auth-ui .search-condition-area .mobile-auth-search-actions > div {
    margin-right: 0 !important;
    width: 100%;
  }

  body.mobile-auth-ui .search-condition-area .mobile-auth-search-actions .btn,
  body.mobile-auth-ui .search-condition-area .mobile-auth-search-actions .btn.w-130 {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ------------------------------------------------------------------ */
/* Ticket detail / reply page: mobile layout                            */
/* Also covers create/my-ticket (imap + voicemail) which wraps the      */
/* left-body/right-body pair inside a <form>.                           */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  /* .w-900 forces 90rem — let it follow the viewport */
  body.mobile-auth-ui .section-header.w-900 {
    width: 100% !important;
    max-width: 100%;
  }

  /* Stack left-body + right-body (direct child, or inside create <form>) */
  body.mobile-auth-ui .section-body > .d-flex,
  body.mobile-auth-ui .section-body > form > .d-flex {
    flex-wrap: wrap;
  }

  /* Breadcrumb row: allow wrapping */
  body.mobile-auth-ui .section-header-breadcrumb {
    flex-wrap: wrap;
    gap: 0.2rem;
    font-size: 1.2rem;
  }

  body.mobile-auth-ui .page-titile-reply {
    font-size: 1.6rem !important;
    padding-bottom: 1rem;
    margin-bottom: 0;
  }

  /* Customer / user ID box: col-6 is too narrow on phones */
  body.mobile-auth-ui #app1 .row.mb-3 > .col-6,
  body.mobile-auth-ui #app1 .row.mb-3 > .col-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  body.mobile-auth-ui .both-customer-user,
  body.mobile-auth-ui .only-customer,
  body.mobile-auth-ui .only-user {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  body.mobile-auth-ui .both-customer-user-line {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  body.mobile-auth-ui .both-customer-user-line__label {
    white-space: normal;
  }

  body.mobile-auth-ui .both-customer-user-lines {
    min-width: 0;
    flex: 1 1 auto;
  }

  body.mobile-auth-ui .customer-header,
  body.mobile-auth-ui .user-header {
    word-break: break-word;
  }

  /* ---- First contact (ticket header) ---- */
  /* imap/web: col-1 avatar + col-11 info → full-width info, shrink avatar */
  body.mobile-auth-ui .left-body .col-1.avatar-block {
    flex: 0 0 4rem;
    max-width: 4rem;
    padding: 0 0.4rem;
  }

  body.mobile-auth-ui .left-body .col-11 {
    flex: 1 1 0;
    max-width: calc(100% - 4.8rem);
  }

  /* create/my-ticket (imap): avatar + col-8 form fields */
  body.mobile-auth-ui .left-body .row > .col-1.avatar-block + .col-8 {
    flex: 1 1 0;
    max-width: calc(100% - 4.8rem);
  }

  /* audio/voicemail: IP-phone button inline margin → remove */
  body.mobile-auth-ui .left-body .d-flex[style*="margin-left: 100px"] {
    margin-left: 0 !important;
  }

  /* audio/voicemail (+ create): header flex row → wrap on narrow screens */
  body.mobile-auth-ui .left-body .d-flex.align-items-start {
    flex-wrap: wrap;
    gap: 1rem !important;
  }

  /* create forms: To/From selects and subject fill the width */
  body.mobile-auth-ui .left-body #ele_inquiry_source {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  body.mobile-auth-ui .left-body #ele_inquiry_source .selectric,
  body.mobile-auth-ui .left-body #ele_inquiry_source .selectric-wrapper,
  body.mobile-auth-ui .left-body #ele_inquiry_source .form-select,
  body.mobile-auth-ui .left-body .selectric-response .selectric,
  body.mobile-auth-ui .left-body .selectric-response .selectric-wrapper,
  body.mobile-auth-ui .left-body #subject {
    width: 100% !important;
    max-width: 100%;
  }

  body.mobile-auth-ui .left-body .ticket-header-meta__inquiry--wrap {
    flex-wrap: wrap;
  }

  /* Create / reply submit button: don't overflow with miw-180 */
  body.mobile-auth-ui .left-body #btn_submit.miw-180,
  body.mobile-auth-ui .left-body .btn-custom-reply.miw-180 {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  /* ---- Reply thread chat bubbles ---- */
  /* Keep a PC-like staggered layout, but with a smaller mobile-safe offset. */
  body.mobile-auth-ui .left-body .col-9.offset-3 {
    flex: 0 0 92%;
    max-width: 92%;
    margin-left: 8%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
  }

  /* Customer reply: slightly inset, left aligned */
  body.mobile-auth-ui .left-body .row.mb-4 > .col-10 {
    flex: 0 0 92%;
    max-width: 92%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
  }

  body.mobile-auth-ui .left-body .row.mb-4 {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  body.mobile-auth-ui .left-body .row.mb-4.first-contact-bbs {
    justify-content: flex-end;
  }

  body.mobile-auth-ui .left-body .ticket-content,
  body.mobile-auth-ui .left-body .ticket-content-bbs,
  body.mobile-auth-ui .left-body .ticket-content-bbs-reply {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  body.mobile-auth-ui .left-body .ticket-description {
    margin-left: 0;
    margin-right: 0;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  /* Avatar inside replies: col-2 → compact */
  body.mobile-auth-ui .left-body .ticket-description > .col-2 {
    flex: 0 0 4.8rem;
    max-width: 4.8rem;
    padding: 0 0.4rem;
  }

  /* Reset PC negative overlap (white.css .reply-block { margin-left: -4.5rem; }) */
  body.mobile-auth-ui .left-body .reply-block {
    margin-left: 0 !important;
  }

  body.mobile-auth-ui .left-body .ticket-description > .col-10.reply-block {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(100% - 4.8rem);
    padding-left: 0.8rem;
    padding-right: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  body.mobile-auth-ui .left-body .replied_user_name,
  body.mobile-auth-ui .left-body .ticket-description .whitespace-preserve,
  body.mobile-auth-ui .left-body .ticket-description > .col-10.reply-block > div {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  body.mobile-auth-ui .left-body .ticket-header .reply-created_at {
    white-space: normal;
    text-align: left;
    word-break: break-word;
  }

  body.mobile-auth-ui .left-body #app1 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Attachment clip icon column: same compact sizing */
  body.mobile-auth-ui .left-body .attachments-info-myself > .col-2,
  body.mobile-auth-ui .left-body .attachments-info-reply > .col-2,
  body.mobile-auth-ui .left-body .attachments-info > .col-2 {
    flex: 0 0 4rem;
    max-width: 4rem;
    padding: 0 0.4rem;
  }

  body.mobile-auth-ui .left-body .attachments-info-myself > .col-10,
  body.mobile-auth-ui .left-body .attachments-info-reply > .col-10,
  body.mobile-auth-ui .left-body .attachments-info > .col-10 {
    flex: 1 1 0;
    max-width: calc(100% - 4.8rem);
  }

  /* Attachment thumbnails: col-4 → col-6 on mobile */
  body.mobile-auth-ui .left-body .attachments-info-myself .col-4,
  body.mobile-auth-ui .left-body .attachments-info-reply .col-4,
  body.mobile-auth-ui .left-body .attachments-info .col-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Thread summary card: reduce left/right padding */
  body.mobile-auth-ui .left-body .blade.card #blade_summary {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Right-body: status management fits the width */
  body.mobile-auth-ui .right-body #status_management {
    padding-left: 0;
    padding-right: 0;
  }

  /* Memo tabs: PC fixes tab-content to 30rem — use full width on phones */
  body.mobile-auth-ui .right-body #right_block,
  body.mobile-auth-ui .right-body #memo_block,
  body.mobile-auth-ui .right-body .tab-wrap {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  body.mobile-auth-ui .right-body #memo_block.row {
    margin-left: 0;
    margin-right: 0;
  }

  body.mobile-auth-ui .right-body #memo_block > .col-12 {
    padding-left: 0;
    padding-right: 0;
  }

  body.mobile-auth-ui .right-body .tab-content {
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  body.mobile-auth-ui .right-body .tab-switch:checked + .tab-label + .tab-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 0 100% !important;
  }

  /* Keep "Add Memo" above Live Chat / FAQ FABs */
  body.mobile-auth-ui .right-body .memo-submit-wrap {
    padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
  }

  body.mobile-auth-ui .right-body .note-frame-border {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.mobile-auth-ui .right-body .tab-label,
  body.mobile-auth-ui .right-body .tab-label-first {
    max-width: none;
    flex: 1 1 auto;
  }

  body.mobile-auth-ui .right-body .tab-wrap form,
  body.mobile-auth-ui .right-body .tab-wrap .form-group,
  body.mobile-auth-ui .right-body .tab-wrap textarea.notebook-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Audio player: don't overflow */
  body.mobile-auth-ui .left-body audio {
    width: 100%;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Back-to-top FAB (above the existing bottom-right chat FABs)          */
/* ------------------------------------------------------------------ */
body.mobile-auth-ui .mobile-auth-back-to-top {
  display: none;
}

@media (max-width: 767.98px) {
  body.mobile-auth-ui .mobile-auth-back-to-top {
    position: fixed;
    right: 1.6rem;
    bottom: 9.5rem;
    z-index: 8890;
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #5aa087;
    color: #fff;
    font-size: 1.8rem;
    box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(0.6rem);
  }

  body.mobile-auth-ui .mobile-auth-back-to-top.is-visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------------ */
/* Customers / Users list (customers.index)                            */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  /* Header actions: stack Add / CSV Import / Export full-width */
  body.mobile-auth-ui .mobile-auth-customers-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
    padding: 1.2rem !important;
  }

  body.mobile-auth-ui .mobile-auth-customers-actions .btn,
  body.mobile-auth-ui .mobile-auth-customers-actions .btn.float-left,
  body.mobile-auth-ui .mobile-auth-customers-actions .btn.ml-5,
  body.mobile-auth-ui .mobile-auth-customers-actions .btn.ml-3 {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    text-align: center;
  }

  /* Search keyword field uses Bootstrap .col-5 on PC — full width on phone */
  body.mobile-auth-ui .mobile-auth-customers .search-condition-area .mobile-auth-search-fields .form-group.col-5 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* Customer cards reuse ticket-card chrome; add link + actions */
  body.mobile-auth-ui .mobile-auth-customer-card {
    padding-bottom: 0.8rem;
  }

  body.mobile-auth-ui .mobile-auth-customer-card.is-inactive {
    opacity: 0.72;
    background-color: #f5f5f5;
  }

  body.mobile-auth-ui .mobile-auth-customer-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  body.mobile-auth-ui .mobile-auth-customer-card__related {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
    color: #666;
  }

  body.mobile-auth-ui .mobile-auth-customer-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 0.1rem solid #eee;
  }
}

/* ------------------------------------------------------------------ */
/* Customers / Users edit + create form                                */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  body.mobile-auth-ui .mobile-auth-customer-form {
    overflow-x: hidden;
  }

  body.mobile-auth-ui .mobile-auth-customer-form .card-body {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }

  /* Title + Back: stack full width */
  body.mobile-auth-ui .mobile-auth-customer-form__header > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  body.mobile-auth-ui .mobile-auth-customer-form__header h1.fa-28x {
    font-size: 2rem !important;
    line-height: 1.3;
    margin-bottom: 1rem;
  }

  body.mobile-auth-ui .mobile-auth-customer-form__header .d-flex.justify-content-end {
    justify-content: stretch !important;
  }

  body.mobile-auth-ui .mobile-auth-customer-form__header .btn-back-to-list {
    max-width: none;
    width: 100%;
    justify-content: center;
  }

  /* Main form column: full width (was col-8) */
  body.mobile-auth-ui .mobile-auth-customer-form__main {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Avatar + content / avatar + inputs: stack */
  body.mobile-auth-ui .mobile-auth-customer-form .form-group.row > [class*="col-"],
  body.mobile-auth-ui .mobile-auth-customer-form .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  body.mobile-auth-ui .mobile-auth-customer-form .form-group.row > .col-2.text-center,
  body.mobile-auth-ui .mobile-auth-customer-form .row > .col-2.text-center {
    margin-bottom: 1rem;
  }

  body.mobile-auth-ui .mobile-auth-customer-form .text-right {
    text-align: left !important;
  }

  /* Channel blocks (phone / email / nav): stack with gap */
  body.mobile-auth-ui .mobile-auth-customer-form .customer-edit-channel-row,
  body.mobile-auth-ui .mobile-auth-customer-form .customer-edit-nav-row {
    gap: 1rem 0;
  }

  body.mobile-auth-ui .mobile-auth-customer-form .customer-info-block {
    padding: 1rem;
  }

  /* Name table: label above value */
  body.mobile-auth-ui .mobile-auth-customer-form .tbl-customer-user-input,
  body.mobile-auth-ui .mobile-auth-customer-form .tbl-customer-user-input tbody,
  body.mobile-auth-ui .mobile-auth-customer-form .tbl-customer-user-input tr,
  body.mobile-auth-ui .mobile-auth-customer-form .tbl-customer-user-input td {
    display: block;
    width: 100% !important;
  }

  body.mobile-auth-ui .mobile-auth-customer-form .tbl-customer-user-input tr td:first-child {
    width: 100% !important;
    border-bottom: none !important;
    padding-bottom: 0.4rem;
  }

  body.mobile-auth-ui .mobile-auth-customer-form .tbl-customer-user-input .pl-5 {
    padding-left: 0 !important;
  }

  /* Form controls + fixed-width buttons fill the phone width */
  body.mobile-auth-ui .mobile-auth-customer-form .form-control,
  body.mobile-auth-ui .mobile-auth-customer-form .selectric,
  body.mobile-auth-ui .mobile-auth-customer-form .selectric-wrapper {
    width: 100% !important;
    max-width: 100%;
  }

  body.mobile-auth-ui .mobile-auth-customer-form .btn.w-130,
  body.mobile-auth-ui .mobile-auth-customer-form .btn-edit-mode,
  body.mobile-auth-ui .mobile-auth-customer-form .btn-update,
  body.mobile-auth-ui .mobile-auth-customer-form .btn-change {
    max-width: none !important;
    width: 100% !important;
  }

  body.mobile-auth-ui .mobile-auth-customer-form .btn-customer-user {
    width: 100%;
  }

  /* Email / phone input groups: wrap unlink buttons */
  body.mobile-auth-ui .mobile-auth-customer-form .input-group {
    flex-wrap: wrap;
  }

  body.mobile-auth-ui .mobile-auth-customer-form .modal-dialog {
    margin: 1rem;
    max-width: calc(100% - 2rem);
  }

  body.mobile-auth-ui .mobile-auth-customer-form .nav-tabs {
    flex-wrap: wrap;
  }
}

/* ------------------------------------------------------------------ */
/* Global staff pages: fixed widths, headers, forms, timeline/issue    */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  /* Flatten common PC fixed-width wrappers */
  body.mobile-auth-ui .w-650,
  body.mobile-auth-ui .w-800,
  body.mobile-auth-ui .w-900,
  body.mobile-auth-ui .w-950,
  body.mobile-auth-ui .w-1000,
  body.mobile-auth-ui .table-800,
  body.mobile-auth-ui .table-100per,
  body.mobile-auth-ui table.w-650,
  body.mobile-auth-ui table.w-800,
  body.mobile-auth-ui table.w-900,
  body.mobile-auth-ui table.w-950,
  body.mobile-auth-ui table.w-1000 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Card headers with floated action buttons → stack */
  body.mobile-auth-ui .section-body .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.8rem;
  }

  body.mobile-auth-ui .section-body .card-header .btn.float-left,
  body.mobile-auth-ui .section-body .card-header .btn.float-right,
  body.mobile-auth-ui .section-body .card-header .btn.ml-3,
  body.mobile-auth-ui .section-body .card-header .btn.mr-4,
  body.mobile-auth-ui .section-body .card-header .btn.w-130 {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  /* Search / filter grids without details wrapper */
  body.mobile-auth-ui .search-condition-area > .row > [class*="col-"],
  body.mobile-auth-ui .faq-search-form .form-group {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin-right: 0 !important;
  }

  body.mobile-auth-ui .faq-search-form .d-flex {
    flex-direction: column;
    align-items: stretch !important;
  }

  body.mobile-auth-ui .faq-search-form .form-group[style] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.mobile-auth-ui .faq-search-form .btn.w-130,
  body.mobile-auth-ui .search-condition-area .btn.w-130 {
    width: 100% !important;
    max-width: 100%;
  }

  /* Generic form rows in section-body (settings create/edit, etc.) */
  body.mobile-auth-ui .section-body .form-group.row > [class*="col-"],
  body.mobile-auth-ui .section-body form .row > [class*="col-md-"],
  body.mobile-auth-ui .section-body form .row > .col-1,
  body.mobile-auth-ui .section-body form .row > .col-2,
  body.mobile-auth-ui .section-body form .row > .col-3,
  body.mobile-auth-ui .section-body form .row > .col-4,
  body.mobile-auth-ui .section-body form .row > .col-5,
  body.mobile-auth-ui .section-body form .row > .col-6,
  body.mobile-auth-ui .section-body form .row > .col-7,
  body.mobile-auth-ui .section-body form .row > .col-8,
  body.mobile-auth-ui .section-body form .row > .col-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Title + back rows (issue-tracking / timeline / forms) */
  body.mobile-auth-ui .section-body .card-body > .row.mb-5 > [class*="col-"],
  body.mobile-auth-ui .section-body .card-body > .row > .col-9,
  body.mobile-auth-ui .section-body .card-body > .row > .col-5,
  body.mobile-auth-ui .section-body .card-body > .row > .col-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  body.mobile-auth-ui .section-body .btn-back-to-list {
    max-width: none;
    width: 100%;
    justify-content: center;
  }

  body.mobile-auth-ui .section-body h1.fa-28x {
    font-size: 2rem !important;
    line-height: 1.3;
  }

  /* Issue-tracking / timeline customer shell */
  body.mobile-auth-ui .section-body .col-1.text-center + .col-11,
  body.mobile-auth-ui .section-body .row > .col-11 {
    flex: 1 1 0;
    max-width: 100%;
  }

  body.mobile-auth-ui .section-body .row > .col-4,
  body.mobile-auth-ui .section-body .row > .col-8,
  body.mobile-auth-ui .section-body .issue-tracking-ai-summary-row > [class*="col-"],
  body.mobile-auth-ui .section-body .timeline-blade-summary-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Timeline ticket rows: drop staff offset */
  body.mobile-auth-ui .timeline-group-row > .col-10 {
    flex: 0 0 92%;
    max-width: 92%;
    margin-left: 0 !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
  }

  body.mobile-auth-ui .timeline-group-row > .col-10.offset-2 {
    flex: 0 0 92%;
    max-width: 92%;
    margin-left: 8% !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
  }

  body.mobile-auth-ui .timeline-group-row {
    margin-left: 0;
    margin-right: 0;
  }

  body.mobile-auth-ui .timline-container {
    max-width: 100%;
    overflow-x: hidden;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    box-sizing: border-box;
  }

  body.mobile-auth-ui .timeline-detail-block {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  body.mobile-auth-ui .timeline-detail-block--nav > .timeline-icon {
    flex: 0 0 4.8rem;
    max-width: 4.8rem;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }

  body.mobile-auth-ui .timeline-content {
    min-width: 0;
    flex: 1 1 0;
  }

  body.mobile-auth-ui .timeline-top {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  body.mobile-auth-ui .timeline-top span {
    word-break: break-word;
  }

  body.mobile-auth-ui .timeline-content .pt-3.pr-5.pb-4.pl-5 {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Ticket note / modify / internal_note tabs */
  body.mobile-auth-ui .section-body .nav-tabs {
    flex-wrap: wrap;
  }

  body.mobile-auth-ui .section-body .row.col-12 > .col-2,
  body.mobile-auth-ui .section-body .row.col-12 > .col-2.col-md-1 {
    flex: 0 0 4rem;
    max-width: 4rem;
  }

  body.mobile-auth-ui .section-body .row.col-12 > .col-10,
  body.mobile-auth-ui .section-body .row.col-12 > .col-10.col-md-11 {
    flex: 1 1 0;
    max-width: calc(100% - 4.8rem);
  }

  /* Settings / staff lists: keep tables scrollable */
  body.mobile-auth-ui .section-body .table-responsive {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Generic staff list cards (reuse ticket-card chrome) */
  body.mobile-auth-ui .mobile-auth-staff-list-card .mobile-auth-ticket-card__subject {
    font-size: 1.4rem;
  }

  body.mobile-auth-ui .mobile-auth-staff-list-card audio {
    width: 100%;
    max-width: 100%;
  }

  body.mobile-auth-ui .mobile-auth-staff-list-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 0.1rem solid #eee;
  }

  body.mobile-auth-ui .mobile-auth-staff-list-card .mobile-auth-ticket-card__meta dd {
    word-break: break-word;
  }

  /* Truncate long FAQ answers in cards */
  body.mobile-auth-ui .mobile-auth-faq-card__answer {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* User announcements: drop offset columns on phone */
  body.mobile-auth-ui .section-header.col-12.col-md-10.offset-md-1,
  body.mobile-auth-ui .announcement-item > .col-12.col-md-10.offset-md-1 {
    max-width: 100%;
    flex: 0 0 100%;
    margin-left: 0 !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Settings menu index */
  body.mobile-auth-ui .settings-menu-table tbody tr {
    display: block;
    border-bottom: 0.1rem solid #eee;
    padding: 0.8rem 0;
  }

  body.mobile-auth-ui .settings-menu-table tbody td {
    display: block;
    width: 100% !important;
    border: none;
    padding: 0.25rem 0;
  }

  /* Audio embed QR: preview modal + card actions */
  body.mobile-auth-ui #embedQrPreviewModal .modal-dialog {
    margin: 1rem auto;
    max-width: calc(100% - 2rem);
    width: calc(100% - 2rem);
  }

  body.mobile-auth-ui #embedQrPreviewModal .modal-body {
    padding: 1rem;
  }

  body.mobile-auth-ui #embedQrPreviewModal .embed-qr-preview-lg {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  body.mobile-auth-ui #embedQrPreviewModal .embed-qr-preview-lg canvas,
  body.mobile-auth-ui #embedQrPreviewModal .embed-qr-preview-lg img {
    max-width: 100%;
    height: auto !important;
    width: auto !important;
  }

  body.mobile-auth-ui #embedQrPreviewModal .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  body.mobile-auth-ui #embedQrPreviewModal .modal-footer .btn {
    width: 100%;
    margin: 0 !important;
  }

  body.mobile-auth-ui .mobile-auth-audio-embed-card__actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  body.mobile-auth-ui .mobile-auth-audio-embed-card__actions .btn-custom-ticket {
    flex: 1 1 100%;
    text-align: center;
  }

  body.mobile-auth-ui .mobile-auth-audio-embed-cards .embed-qr-preview {
    width: 5.6rem;
    height: 5.6rem;
  }

  body.mobile-auth-ui .mobile-auth-audio-embed-cards .embed-qr-preview canvas,
  body.mobile-auth-ui .mobile-auth-audio-embed-cards .embed-qr-preview img {
    max-width: 5.6rem;
    max-height: 5.6rem;
  }

  body.mobile-auth-ui .mobile-auth-customer-form form.w-800,
  body.mobile-auth-ui .mobile-auth-customer-form .w-800 {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.mobile-auth-ui .w-1000,
  body.mobile-auth-ui .w-1200,
  body.mobile-auth-ui table.w-1200 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Points usage summary */
  body.mobile-auth-ui .mobile-auth-points-page .row > [class*="col-"],
  body.mobile-auth-ui .mobile-auth-points-page #pricing_tables > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  body.mobile-auth-ui .mobile-auth-points-page .nav-tabs,
  body.mobile-auth-ui .mobile-auth-points-page .nav-pills {
    flex-wrap: wrap;
  }

  body.mobile-auth-ui .mobile-auth-points-page .nav-tabs .nav-link,
  body.mobile-auth-ui .mobile-auth-points-page .nav-pills .nav-link {
    font-size: 0.9rem;
    padding: 0.45rem 0.65rem;
  }

  body.mobile-auth-ui .mobile-auth-points-page .table-bordered {
    min-width: 36rem;
  }

  body.mobile-auth-ui .mobile-auth-points-page .tab-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Staff profile */
  body.mobile-auth-ui .mobile-auth-profile-page .row > .col-2,
  body.mobile-auth-ui .mobile-auth-profile-page .row > .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  body.mobile-auth-ui .mobile-auth-profile-page .card-footer.text-right {
    text-align: center !important;
  }

  body.mobile-auth-ui .mobile-auth-profile-page .card-footer .btn,
  body.mobile-auth-ui .mobile-auth-profile-page .text-right .btn {
    width: 100%;
    max-width: 100%;
  }

  /* Role permissions matrix */
  body.mobile-auth-ui .role-permissions-page.w-1000 {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.mobile-auth-ui .role-permissions-page .permission-row {
    flex-direction: column;
    align-items: stretch !important;
  }

  body.mobile-auth-ui .role-permissions-page .permission-row-check {
    padding-left: 0;
    margin-top: 0.5rem;
  }

  body.mobile-auth-ui .role-permissions-page .permission-model-toggle-inner {
    flex-direction: column;
    align-items: flex-start !important;
  }

  body.mobile-auth-ui .role-permissions-page .btn-bulk-disable-section {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  /* FAQ conversation log search */
  body.mobile-auth-ui .faq-conversation-log-search .d-flex {
    flex-direction: column;
    align-items: stretch !important;
  }

  body.mobile-auth-ui .faq-conversation-log-search .form-group[style] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Ticket note / modify / internal_note tab pages */
  body.mobile-auth-ui .section-body .card .nav-tabs .nav-link {
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
  }

  body.mobile-auth-ui .section-body .card-body .row.col-12 {
    margin-left: 0;
    margin-right: 0;
  }

  body.mobile-auth-ui .section-body .card-body form .btn.w-130,
  body.mobile-auth-ui .section-body .card-body .btn.rounded-pill.w-130 {
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* Ticket reply: status management → header icon + dialog (phone/tablet) */
/* PC keeps the inline right-body panel; only <=1024px uses the dialog. */
/* ------------------------------------------------------------------ */
body.mobile-auth-ui .mobile-auth-status-nav {
  display: none;
  align-items: center;
  margin-right: 0.6rem;
}

body.mobile-auth-ui .mobile-auth-status-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  min-width: 4.4rem;
  height: 4.4rem;
  min-height: 4.4rem;
  padding: 0;
  border: none;
  border-radius: 0.6rem;
  background-color: #5aa087;
  color: #fff;
  font-size: 1.8rem;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.15);
  cursor: pointer;
  line-height: 1;
}

body.mobile-auth-ui .mobile-auth-status-toggle:hover,
body.mobile-auth-ui .mobile-auth-status-toggle:focus {
  background-color: #4c8a73;
  color: #fff;
  outline: none;
}

body.mobile-auth-ui .mobile-auth-status-toggle[aria-expanded="true"] {
  background-color: #3f7460;
}

/* Desktop: shell is layout-transparent so #status_management stays in right-body */
body.mobile-auth-ui .mobile-auth-status-shell,
body.mobile-auth-ui .mobile-auth-status-dialog__panel {
  display: contents;
}

body.mobile-auth-ui .mobile-auth-status-dialog__backdrop,
body.mobile-auth-ui .mobile-auth-status-dialog__close {
  display: none;
}

@media (max-width: 1024px) {
  body.mobile-auth-ui .mobile-auth-status-nav:not([hidden]) {
    display: flex;
  }

  /* Leave room for parent #mobile_phone_toggle (4.4rem @ right:8rem) + avatar */
  body.mobile-auth-ui .mobile-auth-status-nav--with-phone:not([hidden]) {
    margin-right: 13.2rem;
  }

  body.mobile-auth-ui .section-header h1.page-titile-reply {
    padding-bottom: 1rem;
    margin-bottom: 0;
  }

  /* Customer / user ID box on tablet widths too */
  body.mobile-auth-ui #app1 .row.mb-3 > .col-6,
  body.mobile-auth-ui #app1 .row.mb-3 > .col-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  body.mobile-auth-ui .both-customer-user,
  body.mobile-auth-ui .only-customer,
  body.mobile-auth-ui .only-user {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  body.mobile-auth-ui .both-customer-user-line {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  body.mobile-auth-ui .both-customer-user-line__label {
    white-space: normal;
  }

  body.mobile-auth-ui .both-customer-user-lines {
    min-width: 0;
    flex: 1 1 auto;
  }

  body.mobile-auth-ui .mobile-auth-status-shell {
    display: none;
  }

  body.mobile-auth-ui .mobile-auth-status-shell.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9300;
  }

  body.mobile-auth-ui .mobile-auth-status-dialog__backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
  }

  body.mobile-auth-ui .mobile-auth-status-dialog__panel {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw - 2.4rem);
    max-width: 42rem;
    max-height: calc(100vh - 3.2rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.25);
    padding: 1.2rem 0.4rem 0.8rem;
  }

  body.mobile-auth-ui .mobile-auth-status-dialog__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 2;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f0f0f0;
    color: #444;
    font-size: 1.6rem;
    cursor: pointer;
  }

  body.mobile-auth-ui .mobile-auth-status-shell.is-open #status_management {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  body.mobile-auth-ui .mobile-auth-status-shell.is-open #status_management_title {
    width: calc(100% - 3.6rem);
    margin-right: auto;
    margin-left: 0;
  }

  body.mobile-auth-ui.mobile-auth-status-dialog-open {
    overflow: hidden;
  }
}