/* ================================================================
   v42.6.15 — Mobile OS layer (phones, not a desktop shrink)
   Loaded last so it wins over mobile-v2.css / totaly-v3.css.
   Gated at max-width: 820px. Desktop rules are untouched.
   ================================================================ */

/* Phone-only chrome. Hidden on desktop so the campaign tab strip stays. */
html body .msg-settings-btn,
html body .msg-settings-backdrop {
  display: none;
}

@media (max-width: 820px) {

  /* ── Foundation: type, overflow, 44px targets ─────────────────── */
  html, body {
    overflow-x: clip;
    max-width: 100%;
  }
  html body,
  html body .main,
  html body .main-content {
    overflow-x: hidden;
    max-width: 100vw;
  }
  /* Charts, tables, and SVGs must keep their own width inside a scroll host. */
  html body .main canvas,
  html body .main svg,
  html body .main table,
  html body .sv-page canvas,
  html body .ac-host canvas,
  html body .sc-host canvas {
    max-width: none;
  }

  html body {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html body button,
  html body .rc-chip,
  html body .rc-icon-btn,
  html body .rc-send,
  html body .chats-new-btn,
  html body .chats-row,
  html body .mt-menu-item,
  html body .mt-avatar-chip,
  html body .mt-kebab-chip,
  html body .mt-switch-opt,
  html body .msg-filter-toggle,
  html body .msg-thread-back,
  html body .msg-composer-send,
  html body .msg-thread-link,
  html body .sv-page .btn,
  html body .sv-page .icon-btn,
  html body .sv-tab {
    min-height: 44px;
    min-width: 44px;
  }

  html body input,
  html body textarea,
  html body select,
  html body [contenteditable="true"] {
    font-size: 16px !important;
  }

  /* ── Nav: one-handed. Hide chrome while the keyboard owns the thumb zone. */
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip,
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip,
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-menu-item {
    min-height: 44px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
  }
  html body.kb-open nav.mobile-topnav {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-8px);
  }
  html body.kb-open .floating-chat,
  html body.kb-open .floating-chat-toggle,
  html body.route-superviz .floating-chat,
  html body.route-superviz .floating-chat-toggle,
  html body.route-chats .floating-chat,
  html body.route-chats .floating-chat-toggle,
  html body.route-ask.ai-has-messages .floating-chat,
  html body.route-ask.ai-has-messages .floating-chat-toggle {
    display: none !important;
    pointer-events: none !important;
  }

  /* ── Ask / Chat: full-screen thread, composer above keyboard ──── */
  html body.route-ask.ai-has-messages .ai-view {
    display: flex !important;
    flex-direction: column !important;
    height: var(--vv-h, 100dvh) !important;
    min-height: var(--vv-h, 100dvh) !important;
    max-height: var(--vv-h, 100dvh) !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
    padding-bottom: calc(var(--composer-h, 72px) + 16px) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  html body.kb-open.route-ask.ai-has-messages .ai-view .ai-messages {
    padding-top: 12px !important;
  }
  html body.route-ask .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-view .ai-composer-wrap {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(var(--kb-inset, 0px) + var(--kb-safe, env(safe-area-inset-bottom, 0px))) !important;
    z-index: 80 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 8px 12px 8px !important;
  }
  html body.kb-open.route-ask .ai-composer-wrap,
  html body.kb-open.route-ask.ai-has-messages .ai-view .ai-composer-wrap {
    padding-bottom: 8px !important;
  }
  html body.route-ask .rich-composer .rc-send,
  html body.route-ask .ai-view .rc-send,
  html body.route-ask.ai-has-messages .rich-composer .rc-send,
  html body.route-ask.ai-has-messages .ai-view .rich-composer .rc-send,
  html body .ai-view .rich-composer .rc-send,
  html body .rich-composer .rc-send {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
  }
  /* Compact Ask bar. Must beat native `#ask-composer` toolbar rules
     (`flex-direction: column`) and must not reuse the old in-thread
     send-only pill (52px cap), which stacked + / mic and clipped the
     next 44px circle into a crescent. */
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer :is(.rc-left, .rc-right) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-right,
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-send-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    overflow: visible !important;
    margin-left: auto !important;
    gap: 8px !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-plus-wrap {
    flex: 0 0 44px !important;
    flex-shrink: 0 !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-chip[data-chip="web"] {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    overflow: hidden !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-chip[data-chip="web"] .rc-chip-web-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
  }
  /* Mode stays in the DOM for JS sync but is not a 100px rival for send. */
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-mode {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  /* Pill stays fully rounded; the label ellipsizes inside instead of
     being sheared by mic/send/stop. */
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-chip--model {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 8px 0 8px !important;
    gap: 5px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-chip--model .rc-chip-label {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-chip--model .rc-chip-caret {
    display: none !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer :is(.rc-plus-wrap, .rc-plus-native-wrap, .rc-mic, .gl-stop-btn) {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-plus-native {
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-mic,
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .gl-stop-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Stop replaces mic on the phone row so the model pill keeps a
     complete rounded end instead of being sheared. */
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer.rc-composer--stopping .rc-mic {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-mic svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2 !important;
  }
  /* Shared inactive chrome: gray hairline, no blue ring. Active Web
     keeps the same border and uses an accent fill. */
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer :is(.rc-plus-native-wrap, .rc-chip, .rc-chip--model, .rc-mic, .gl-stop-btn) {
    border: 1px solid var(--border, #3A3A3A) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
    color: rgba(232, 233, 235, 0.82) !important;
    outline: none !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-chip.rc-chip--active,
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-chip[data-chip="web"].rc-chip--active {
    border: 1px solid var(--border, #3A3A3A) !important;
    background: rgba(33, 150, 243, 0.16) !important;
    color: #EAEBEC !important;
    box-shadow: none !important;
  }
  html body.route-ask .ai-view .rich-composer.rc-controls-native#ask-composer .rc-chip.rc-chip--active svg {
    color: inherit !important;
    stroke: currentColor !important;
  }
  html body.route-ask .ai-view .msg-bubble,
  html body.route-ask .ai-view .ai-messages .msg {
    font-size: 16px !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
  }

  /* Chat history is a tappable list, not a desktop table. */
  html body.route-chats .chats-view {
    padding: 12px 14px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
  }
  html body.route-chats .chats-title {
    font-size: 22px !important;
  }
  html body.route-chats .chats-new-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
  }
  html body.route-chats .chats-search {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
    margin: 10px 0 12px !important;
  }
  html body.route-chats .chats-row {
    display: flex !important;
    align-items: center !important;
    min-height: 64px !important;
    padding: 12px 14px !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
  }
  html body.route-chats .chats-row-title {
    font-size: 16px !important;
  }
  html body.route-chats .chats-row-preview {
    font-size: 14px !important;
  }

  /* ── Messages: list OR full-screen thread; composer above keyboard ─ */
  html body.route-messages .main-content {
    padding: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    height: var(--vv-h, 100dvh) !important;
    max-height: var(--vv-h, 100dvh) !important;
  }
  html body.route-messages .msg-view {
    padding-top: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }
  html body.route-messages .msg-search {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }
  html body.route-messages .msg-filter-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  html body.route-messages .msg-thread-row {
    min-height: 64px !important;
    padding: 12px 14px !important;
  }
  html body.route-messages .msg-thread-name {
    font-size: 16px !important;
  }
  /* Campaigns are not a colliding top bar on phones. A 44px gear in the
     top-right (list and thread) opens them as a sheet. Desktop tab strip
     is unchanged (≥821px). */
  html body.route-messages .msg-tabs-bar {
    display: none !important;
  }
  html body.route-messages .msg-settings-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    z-index: 85 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 12px !important;
    background: rgba(44, 44, 46, 0.96) !important;
    color: #f5f5f7 !important;
    pointer-events: auto !important;
  }
  html body.msg-mobile-thread.route-messages .msg-settings-btn {
    top: 8px !important;
    right: 10px !important;
  }
  html body.route-messages .msg-left-header {
    padding-right: 58px !important;
  }
  html body.route-messages .msg-view[data-msg-tab="campaign"] #lc-mount {
    padding-right: 58px !important;
  }
  html body.route-messages .msg-settings-backdrop {
    display: none !important;
  }
  html body.route-messages .msg-view.is-settings-open .msg-settings-backdrop:not([hidden]) {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 80 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    pointer-events: auto !important;
  }
  html body.route-messages .msg-view.is-settings-open .msg-tabs-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: absolute !important;
    top: 56px !important;
    right: 10px !important;
    left: auto !important;
    width: min(320px, calc(100vw - 20px)) !important;
    max-height: min(70dvh, 480px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 90 !important;
    gap: 4px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: #1c1c1e !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55) !important;
  }
  html body.route-messages .msg-view.is-settings-open .msg-tabs-bar::before {
    content: "Campaigns" !important;
    display: block !important;
    padding: 6px 10px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: rgba(235, 235, 245, 0.55) !important;
  }
  html body.route-messages .msg-view.is-settings-open .msg-tab,
  html body.route-messages .msg-view.is-settings-open .msg-tab-add,
  html body.route-messages .msg-view.is-settings-open .msg-tab-dashboard {
    min-height: 44px !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    border-bottom: none !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
  }
  html body.route-messages .msg-view.is-settings-open .msg-tab-settings {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    margin-left: auto !important;
    border-radius: 10px !important;
    color: rgba(235, 235, 245, 0.7) !important;
  }
  html body.route-messages .msg-view.is-settings-open .msg-tab-settings:hover {
    color: #0a84ff !important;
    background: rgba(10, 132, 255, 0.16) !important;
  }
  html body.route-messages .msg-view.is-settings-open .msg-tab-dashboard {
    margin-left: 0 !important;
  }
  html body.kb-open.route-messages .msg-view.is-settings-open .msg-tabs-bar,
  html body.kb-open.route-messages .msg-view.is-settings-open .msg-settings-backdrop {
    display: none !important;
  }

  /* Debug / boot / log chrome must not paint over a phone thread. */
  html body.route-messages #gl-boot-banner,
  html body.msg-mobile-thread #gl-boot-banner,
  html body.msg-mobile-thread .toast-container,
  html body.msg-mobile-thread #toast-host,
  html body.msg-mobile-thread .holo-hud,
  html body.msg-mobile-thread .ae-drawer,
  html body.msg-mobile-thread .floating-chat,
  html body.msg-mobile-thread .floating-chat-toggle,
  html body.msg-mobile-thread.route-messages .msg-status-bar,
  html body.msg-mobile-thread.route-messages #msg-status-bar,
  html body.msg-mobile-thread.route-messages #lc-mount,
  html body.msg-mobile-thread.route-messages pre {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Live iOS: the thread is one opaque LAYOUT-viewport layer. Inbox, campaign
     tabs, and log HUDs cannot show through the composer or the iOS ^v✓ bar.
     padding-bottom: --kb-inset keeps the composer on the keyboard; the pane
     still covers the keyboard region so the accessory bar composites on black. */
  html body.msg-mobile-thread.route-messages .main,
  html body.msg-mobile-thread.route-messages .main-content,
  html body.msg-mobile-thread.route-messages .msg-view,
  html body.msg-mobile-thread.route-messages .msg-split,
  html body.msg-mobile-thread.route-messages .msg-split.msg-split-2col {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    isolation: auto !important;
    z-index: auto !important;
  }
  html body.msg-mobile-thread.route-messages .msg-split,
  html body.msg-mobile-thread.route-messages .msg-split.msg-split-2col,
  html body.msg-mobile-thread.route-messages .msg-view[data-msg-tab="campaign"] .msg-split,
  html body.msg-mobile-thread.route-messages .msg-view[data-msg-tab="threads"] .msg-split {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  html body.msg-mobile-thread.route-messages .msg-left-pane,
  html[data-app-theme="dark"] body.msg-mobile-thread.route-messages .msg-left-pane {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }
  html body.msg-mobile-thread.route-messages .msg-thread-pane,
  html body.msg-mobile-thread.route-messages .msg-right-pane,
  html[data-app-theme="dark"] body.msg-mobile-thread.route-messages .msg-thread-pane {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100lvh !important;
    max-height: 100lvh !important;
    min-height: 100lvh !important;
    flex: none !important;
    z-index: 70 !important;
    background: #000 !important;
    background-color: #000 !important;
    isolation: isolate !important;
    overflow: hidden !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-bottom: var(--kb-inset, 0px) !important;
    box-sizing: border-box !important;
  }
  html body.kb-open.msg-mobile-thread.route-messages .main-content {
    padding-top: 0 !important;
  }
  html body.kb-open.msg-mobile-thread.route-messages .msg-tabs-bar {
    display: none !important;
  }
  html body.msg-mobile-thread.route-messages .msg-settings-btn {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: 10px !important;
    z-index: 90 !important;
  }
  html body.msg-mobile-thread.route-messages .msg-view.is-settings-open .msg-settings-backdrop:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
  }
  html body.msg-mobile-thread.route-messages .msg-view.is-settings-open .msg-tabs-bar {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    z-index: 92 !important;
  }
  html body.msg-mobile-thread.route-messages .msg-thread-header {
    min-height: 52px !important;
    padding: 10px 58px 10px 12px !important;
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    flex: 0 0 auto !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 1 !important;
    background: #000 !important;
    background-color: #000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body.msg-mobile-thread.route-messages .msg-thread-back,
  html body.msg-mobile-thread.route-messages .msg-thread-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body.msg-mobile-thread.route-messages .msg-thread-link {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  html body.msg-mobile-thread.route-messages .msg-bubble-stream {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px !important;
    background: #000 !important;
  }
  html body.msg-mobile-thread.route-messages .msg-bubble-foot,
  html body.msg-mobile-thread.route-messages .msg-bubble-foot-failed {
    display: block !important;
    position: relative !important;
    z-index: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
    padding: 4px 2px 2px !important;
  }
  html body.msg-mobile-thread.route-messages .msg-composer,
  html[data-app-theme="dark"] body.msg-mobile-thread.route-messages .msg-composer {
    position: relative !important;
    flex: 0 0 auto !important;
    bottom: auto !important;
    padding: 8px 10px 8px !important;
    background: #000 !important;
    background-color: #000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: isolate !important;
    z-index: 6 !important;
    pointer-events: auto !important;
    /* Same layer as the iOS form-assistant bar: extend opaque black under
       the keyboard / ^v✓ so inbox rows cannot composite through it. */
    box-shadow: 0 100vh 0 100vh #000 !important;
  }
  html body.kb-open.msg-mobile-thread.route-messages .msg-composer {
    padding-bottom: 8px !important;
  }
  html body.route-messages .msg-composer-send,
  html[data-app-theme="dark"] body .msg-composer-send {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 7 !important;
  }
  html body.route-messages .msg-composer-input,
  html[data-app-theme="dark"] body .msg-composer-input {
    min-height: 44px !important;
    font-size: 16px !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 7 !important;
  }
  html body.route-messages .msg-composer-plus {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    pointer-events: auto !important;
  }
  html body.route-messages .msg-composer-field {
    pointer-events: auto !important;
    z-index: 7 !important;
  }

  /* ── SuperViz: stacked cards, readable type, no page-level trap ─ */
  html body.route-superviz .main-content,
  html body.route-superviz .sv-page {
    overflow-x: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: calc(var(--gl-floating-pill-h, 60px) + env(safe-area-inset-top, 0px) + 12px) !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body .sv-page {
    --ac-font-size: 13px;
    --ac-number-size: 36px;
  }
  html body .sv-page .sv-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html body .sv-page .sv-card,
  html body .sv-page .sv-card[data-span='4'],
  html body .sv-page .sv-card[data-span='6'],
  html body .sv-page .sv-card[data-span='8'],
  html body .sv-page .sv-card[data-span='12'] {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }
  html body .sv-page .sv-card-body {
    min-height: 280px !important;
    overflow: hidden !important;
  }
  html body .sv-page .sv-card.sv-card-full {
    inset: env(safe-area-inset-top, 0px) 0 0 0 !important;
    border-radius: 0 !important;
    z-index: 200 !important;
  }
  html body .sv-page .sv-card-head {
    min-height: 44px;
    font-size: 15px;
  }
  html body .sv-page .sv-card-actions,
  html body .sv-page .sv-card-actions .icon-btn,
  html body .sv-page .sh-row-actions .icon-btn {
    opacity: 1 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
  html body .sv-page .btn {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }
  html body .sv-page .btn-sm {
    height: 44px !important;
    min-height: 44px !important;
  }
  html body .sv-page .sv-tab {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
  html body .sv-page .page-head,
  html body .sv-page .sh-catalog .page-head {
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-height: 56px !important;
  }
  html body .sv-page .page-title {
    font-size: 18px !important;
  }
  /* Tables scroll inside the card; the page does not. Keep the table's
     intrinsic min-width so columns stay readable — the host is the scroller. */
  html body .sv-page .page-body,
  html body .sv-page .sh-catalog .page-body,
  html body .sv-page .sh-home-catalog,
  html body .sv-page .sh-table-host,
  html body .sv-page .sv-table-host {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  html body .sv-page .sh-toolbar .search {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }
  html body .sv-page .chart-canvas,
  html body .sv-page .tile-body > .ec {
    min-height: 280px !important;
    height: 280px !important;
  }
  html body .sv-page .dash-row {
    flex-direction: column !important;
  }
  html body .sv-page .dash-row > .tile {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* ── Overview / dashboards: two tiles, readable numbers ───────── */
  html body .dh-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html body .dh-tile {
    min-height: 72px !important;
    padding: 12px 10px !important;
  }
  html body .kpi-grid,
  html body .dashboard-view .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body .kpi-card,
  html body .dash-hub-kpi {
    min-height: 88px;
    padding: 14px 12px;
  }
  html body .kpi-value,
  html body .pred-num {
    font-size: 22px !important;
  }

  /* ── Modals / sheets: full screen, 44px actions ───────────────── */
  html body .modal-box,
  html body .modal-box--wide {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: var(--vv-h, 100dvh) !important;
  }
  html body .modal-box button,
  html body .modal-footer button {
    min-height: 44px !important;
  }

  /* ── Ask header: Chat | Dashboards live inside the top chrome ────
     Late-cascade win over mobile-v2 floating chips + blue active rings.
     Solid --ask-bg bar (same as body so iOS status-bar sampling matches).
     Segmented control uses --ty-tab / --chrome tokens — no brand-blue rings. */
  html body nav.mobile-topnav:not(#__never__),
  html body nav.mobile-topnav.mobile-topnav--v1940:not(#__never__),
  html body.route-ask nav.mobile-topnav:not(#__never__),
  html body.route-ask nav.mobile-topnav.mobile-topnav--v1940:not(#__never__) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    height: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    min-height: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    max-height: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    margin: 0 !important;
    padding: env(safe-area-inset-top, 0px) 12px 0 !important;
    background: var(--ask-bg, #191A1A) !important;
    background-color: var(--ask-bg, #191A1A) !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ty-tab-bar-border, rgba(255, 255, 255, 0.06)) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 130 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  html body.route-ask::before:not(#__never__),
  html body.route-ask.sidebar-collapsed::before:not(#__never__) {
    top: 0 !important;
    height: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    background: var(--ask-bg, #191A1A) !important;
    background-color: var(--ask-bg, #191A1A) !important;
    background-image: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  html body nav#mobile-topnav.mobile-topnav--v1940 .mt-switch:not(#__never__),
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch:not(#__never__) {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    margin: 0 auto !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--ty-tab-bar-bg, #1F2121) !important;
    background-color: var(--ty-tab-bar-bg, #1F2121) !important;
    background-image: none !important;
    border: 1px solid var(--ty-tab-bar-border, var(--border, rgba(255, 255, 255, 0.10))) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body nav#mobile-topnav.mobile-topnav--v1940 .mt-switch-opt:not(#__never__),
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt:not(#__never__),
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active:not(#__never__),
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"]:not(#__never__) {
    appearance: none !important;
    -webkit-appearance: none !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    min-width: 44px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-weight: 500 !important;
  }
  html body nav#mobile-topnav.mobile-topnav--v1940 .mt-switch-opt:not(#__never__),
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt:not(#__never__) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--ty-tab-ink, rgba(200, 201, 204, 0.72)) !important;
    border-radius: 999px !important;
  }
  html body nav#mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active:not(#__never__),
  html body nav#mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"]:not(#__never__),
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active:not(#__never__),
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"]:not(#__never__) {
    background: rgba(255, 255, 255, 0.14) !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    background-image: none !important;
    color: var(--ty-tab-ink-active, #f5f5f7) !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
  }
  html[data-app-theme="light"] body nav#mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active:not(#__never__),
  html[data-app-theme="light"] body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active:not(#__never__),
  html[data-app-theme="light"] body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"]:not(#__never__) {
    background: rgba(0, 0, 0, 0.10) !important;
    background-color: rgba(0, 0, 0, 0.10) !important;
  }
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[data-view="ai"]::after {
    content: "Chat" !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 14px !important;
    font-weight: inherit !important;
  }
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[data-view="dashboards"]::after {
    content: "Dashboards" !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 14px !important;
    font-weight: inherit !important;
  }
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip:not(#__never__),
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip:not(#__never__) {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    background: var(--chrome-fill, rgba(255, 255, 255, 0.04)) !important;
    background-color: var(--chrome-fill, rgba(255, 255, 255, 0.04)) !important;
    border: 1px solid var(--ty-tab-bar-border, rgba(255, 255, 255, 0.06)) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--ty-tab-ink, rgba(200, 201, 204, 0.72)) !important;
  }
  html body.ty-has-agent-tabs header.topbar#topbar,
  html body.ty-has-agent-tabs header.topbar .ty-agent-tabs {
    background: var(--ask-bg, #191A1A) !important;
  }
  html body.ty-has-agent-tabs header.topbar#topbar {
    border-bottom: 1px solid var(--ty-tab-bar-border, rgba(255, 255, 255, 0.06)) !important;
  }
}

@media (max-width: 479px) {
  html body .dh-row,
  html body .kpi-grid,
  html body .dashboard-view .kpi-grid,
  html body.route-divisions .division-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}