/* Customer portal phone layout. Desktop, admin and application handlers are unchanged. */
@media (max-width: 768px) {
  /* Let the content take the remaining height; never subtract a guessed toolbar height. */
  #root .app-window {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
  }
  #root .app-window > .window-toolbar {
    display: flex !important;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
    min-height: 64px !important;
    height: auto !important;
    padding: 10px 8px !important;
  }
  #root .window-toolbar > .mobile-menu {
    flex: 0 0 36px;
    width: 36px;
    height: 44px;
    margin: 0;
  }
  #root .window-toolbar > .toolbar-title {
    flex: 0 0 36px;
    width: 36px;
    min-width: 0;
    height: 36px;
    padding: 3px;
    margin: 0;
  }
  #root .window-toolbar > .toolbar-title > .ac-brand-image {
    width: 28px;
    height: 28px;
    /* The wide logo switches at 600px in the brand script. Use its supplied symbol throughout mobile. */
    content: url('./brand-kit/allchip-symbol-dark.svg');
  }
  #root .window-toolbar > .command-search { display: none !important; }
  #root .window-toolbar > .toolbar-actions {
    display: flex !important;
    flex: 1 1 0;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 4px;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    padding: 0 !important;
    margin: 0 !important;
  }
  #root .toolbar-actions > .ac-language-customer {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 260px;
    margin-inline-start: auto;
  }
  #root .ac-language-customer .ac-language-trigger {
    gap: 5px;
    min-width: 0;
    height: 44px;
    padding: 6px;
  }
  #root .ac-language-customer .ac-language-trigger > .ac-language-mark {
    flex: 0 0 24px;
    width: 24px;
  }
  #root .ac-language-customer .ac-language-trigger-copy { flex: 1 1 0; }
  #root .ac-language-customer .ac-language-trigger-copy small { display: none; }
  #root .ac-language-customer .ac-language-trigger-copy strong {
    display: block;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.3;
  }
  #root .ac-language-customer .ac-language-chevron { flex: 0 0 auto; }
  #root .toolbar-actions .round-control,
  #root .toolbar-actions .avatar-button {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    height: 44px;
    margin: 0;
  }
  #root .toolbar-actions .avatar-button { height: 36px; }
  #root .app-window > .window-body {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    height: auto;
  }
  #root .app-window .content-stage {
    min-width: 0;
    min-height: 0;
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-block: 16px calc(140px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }
  #root .app-window .view-page {
    min-width: 0;
    max-width: 100%;
    padding: 20px 14px 24px;
  }
  #root .app-window .page-heading {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px;
    min-width: 0;
    margin-bottom: 20px;
  }
  #root .app-window .page-heading > div { min-width: 0; width: 100%; }
  #root .app-window .page-heading h1 { font-size: 30px; line-height: 1.12; overflow-wrap: anywhere; }
  #root .app-window .page-heading p { max-width: 100%; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  #root .app-window .page-heading .eyebrow { align-items: flex-start; font-size: 11px; line-height: 1.5; }
  #root .app-window .page-heading .live-pulse { flex: 0 0 auto; margin-top: 5px; }
  #root .app-window .heading-actions { flex-wrap: wrap; gap: 8px; }
  #root .app-window .heading-actions > button { min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  #root .app-window .overview-page .heading-actions > .primary-action { width: 100%; justify-content: center; font-size: 14px; }

  /* Charts get their own row so translated captions can grow without colliding. */
  #root .app-window .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  #root .app-window .metric-tile { display: flex; flex-direction: column; min-width: 0; padding: 14px; }
  #root .app-window .metric-value { flex-wrap: wrap; min-width: 0; margin-top: 12px; }
  #root .app-window .metric-value strong { max-width: 100%; font-size: 30px; line-height: 1.15; overflow-wrap: anywhere; }
  #root .app-window .metric-value span { font-size: 12px; }
  #root .app-window .metric-tile > p { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
  #root .app-window .metric-tile > small { margin: 6px 0 10px; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
  #root .app-window .metric-tile .mini-chart { position: relative; inset: auto; flex: 0 0 30px; width: 100%; height: 30px; margin-top: auto; }
  #root .app-window .dashboard-grid { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  #root .app-window .dashboard-grid > * { min-width: 0; }
  #root .app-window .support-contact { min-width: 0; padding: 20px; }
  #root .app-window .support-contact > div { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  #root .app-window .support-contact button { max-width: 100%; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }

  /* Keep all shortcuts, with one intentional horizontal scroller inside the dock. */
  #root .app-window .glass-dock {
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 5px;
    padding: 6px;
    border-radius: 18px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  #root .app-window .glass-dock > button { flex: 0 0 44px; scroll-snap-align: start; }
  #root .app-window .glass-dock > button:hover { transform: none; }
  #root .app-window .glass-dock > em { margin-inline: 1px; }
  body:has(.app-window) .live-support-bubble {
    position: fixed;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 5px;
    border-radius: 16px;
  }
  body:has(.app-window) .live-support-bubble > strong { display: none; }

  /* Personal size/account controls are available from the mobile menu. */
  body:has(.app-window) .ac-zoom-trigger,
  body:has(.app-window) .live-account-mobile-toggle { display: none; }
  #root .app-window .liquid-sidebar { width: min(230px, 100%); padding-bottom: 80px; overflow-y: auto; overscroll-behavior: contain; }
  /* An off-canvas transform contributes negative scroll width in RTL browsers. */
  #root .app-window .liquid-sidebar:not(.sidebar-open) { display: none; pointer-events: none; transform: none; }
  #root .app-window .liquid-sidebar > * { flex-shrink: 0; }
  body:has(.app-window .sidebar-open) .ac-zoom-trigger,
  body:has(.app-window .sidebar-open) .live-account-mobile-toggle {
    display: flex;
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    height: 44px;
    border: 1px solid #899aff70;
    border-radius: 12px;
  }
  body:has(.app-window .sidebar-open) .ac-zoom-trigger { left: 12px; }
  body:has(.app-window .sidebar-open) .live-account-mobile-toggle {
    left: 110px;
    right: auto;
    width: min(104px, calc(100% - 122px));
    gap: 7px;
    font-size: 12px;
  }
  body:has(.app-window .sidebar-open) .live-account-mobile-toggle span { display: inline; }
  body:has(.app-window) .live-account-pill.mobile-open {
    width: min(360px, calc(100% - 24px));
    right: 12px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body:has(.app-window .sidebar-open) .glass-dock,
  body:has(.app-window .sidebar-open) .live-support-bubble { display: none; }
  body:has(.app-window):has(.customer-file-sheet, .request-dialog, .runtime-overlay, .support-ticket-modal, dialog[open]) .ac-zoom-trigger,
  body:has(.app-window):has(.customer-file-sheet, .request-dialog, .runtime-overlay, .support-ticket-modal, dialog[open]) .live-account-mobile-toggle,
  body:has(.app-window):has(.customer-file-sheet, .request-dialog, .runtime-overlay, .support-ticket-modal, dialog[open]) .live-support-bubble,
  body:has(.app-window):has(.customer-file-sheet, .request-dialog, .runtime-overlay, .support-ticket-modal, dialog[open]) .glass-dock { display: none; }

  body:has(.app-window) .customer-message-stream > article > p { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  body:has(.app-window) .customer-message-stream > article > small,
  body:has(.app-window) .customer-message-stream time { font-size: 11px; line-height: 1.4; }
  body:has(.app-window) .customer-message-stream a { max-width: 100%; font-size: 12px; overflow-wrap: anywhere; }
  body:has(.app-window) .customer-request-chat > header strong { font-size: 14px; }
  body:has(.app-window) .customer-request-chat > header small { font-size: 11px; letter-spacing: .02em; overflow-wrap: anywhere; }
  body:has(.app-window) .customer-request-workspace { scroll-padding-bottom: 90px; }
  body:has(.app-window) .customer-chat-compose { scroll-margin-bottom: 90px; }
  body:has(.app-window) .customer-chat-compose textarea { scroll-margin-bottom: 90px; }

  /* Avoid Safari's form-focus zoom without disabling user zoom. */
  #root .app-window input:not([type=checkbox]):not([type=radio]),
  #root .app-window textarea,
  #root .app-window select,
  body:has(.app-window) .customer-file-sheet textarea,
  body:has(.app-window) .request-dialog input:not([type=checkbox]):not([type=radio]),
  body:has(.app-window) .request-dialog textarea,
  body:has(.app-window) .request-dialog select { font-size: 16px; }
}

@media (max-width: 359px) {
  #root .app-window .metrics-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #root .ac-language-customer .ac-language-trigger-copy { display: none; }
  #root .ac-language-customer .ac-language-trigger { justify-content: center; }
  #root .ac-language-customer .ac-language-chevron { margin-inline-start: 0; }
  /* Increased personal zoom needs a second row, with its height included in the flex shell. */
  #root[data-ac-scaled] .app-window > .window-toolbar { display: grid !important; grid-template-columns: 36px minmax(0, 1fr); }
  #root[data-ac-scaled] .window-toolbar > .mobile-menu { grid-row: 1; grid-column: 1; }
  #root[data-ac-scaled] .window-toolbar > .toolbar-title { grid-row: 1; grid-column: 2; }
  #root[data-ac-scaled] .window-toolbar > .toolbar-actions { grid-row: 2; grid-column: 1 / -1; width: 100%; }
}