/* mobile-v2.css - v41.58g Full Mobile Ownership (tokenized)
 *
 * Single source of truth for mobile styling on Totaly (<=820px).
 * Uses theme tokens (--fg-primary, --fg-secondary, --fg-muted, --ntl-sep,
 * --surface, --border, --accent-primary, --totaly-blue-500) so light/dark/
 * high-contrast themes all inherit correctly.
 *
 * Structure:
 *   1. Shell chrome (sidebar hide, topbar, main margin, iOS zoom)
 *   2. Composer (Ask input, rich composer, floating chat)
 *   3. Overview / Dashboard (route-dashboards)
 *   4. Ask (route-ask)
 *   5. Chats (route-chats)
 *   6. Reports (route-reports)
 *   7. Predictions (route-predictions)
 *   8. Divisions (route-divisions)
 *   9. Messages (route-messages)
 *   10. Automations (route-automations)
 *   11. Data Sources / Connectors (route-connectors)
 *   12. Settings (route-settings)
 *   13. Utility (data tables, modals, buttons, forms)
 *
 * Loaded LAST in index.html so it wins by source order.
 * Selectors use `html body` where they need to beat scoped legacy rules.
 * !important is used only where legacy still fights back.
 */

@media (max-width: 820px) {

  /* ============================================================
   * 1. SHELL CHROME
   * ============================================================ */

  /* Hide desktop sidebar entirely on mobile */
  html body .sidebar {
    display: none !important;
  }

  /* Hide desktop topbar chrome, keep only the mobile topbar */
  html body .topbar .topbar-right,
  html body .topbar .status-row,
  html body nav.gl-floating-pill.gl-floating-pill--topbar {
    display: none !important;
  }

  /* Reset .main margin (was pushed right by sidebar on desktop) */
  html body .main,
  html body.cockpit-hidden .main,
  html body.cockpit-revealed .main,
  html body.sidebar-collapsed .main,
  html body.sidebar-collapsed.cockpit-hidden .main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
  }

  /* Kill horizontal overflow globally */
  html body .main * {
    max-width: 100%;
  }

  /* iOS input zoom prevention */
  html body input,
  html body textarea,
  html body select {
    font-size: 16px !important;
  }

  /* Body reset */
  html body {
    padding: 0;
  }

  /* Smooth momentum scroll */
  html body .main-content,
  html body .modal-box {
    -webkit-overflow-scrolling: touch;
  }

  /* Touch target minimum */
  html body button,
  html body .rc-chip,
  html body .rc-icon-btn {
    min-height: 40px;
  }

  /* Bottom scroll clearance for composer + home bar */
  html body main#main-content,
  html body .main-content {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px) !important;
  }

  /* ============================================================
   * 2. COMPOSER (Ask input, rich composer, floating chat)
   * ============================================================ */

  html body .floating-chat,
  html body .rich-composer {
    padding-bottom: env(safe-area-inset-bottom);
  }

  html body .ai-composer-wrap {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }

  html body #floating-chat,
  html body .floating-chat-toggle {
    right: calc(0.75rem + env(safe-area-inset-right));
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }

  html body .rich-composer .rc-toolbar {
    flex-wrap: nowrap;
    row-gap: 0;
    min-width: 0;
    overflow: hidden;
  }
  html body .rich-composer .rc-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 0.4rem;
    overflow: hidden;
  }
  html body .rich-composer .rc-left::-webkit-scrollbar {
    display: none;
  }
  html body .rich-composer .rc-right {
    flex: 0 0 auto;
    margin-left: 0;
  }
  html body .rich-composer .rc-chip {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
  }
  html body .rich-composer .rc-model {
    max-width: 140px;
  }
  html body .rich-composer .rc-model-select {
    max-width: 110px;
    font-size: 0.85rem;
  }
  html body .rc-textarea {
    max-height: 120px;
  }
  html body .rc-send {
    min-width: 44px;
    min-height: 44px;
  }

  /* ============================================================
   * 3. OVERVIEW / DASHBOARD
   * ============================================================ */

  /* Division health tile row */
  html body .dh-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 6px 12px 14px !important;
    padding: 0 !important;
  }
  html body .dh-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    background: var(--surface-2, var(--surface, var(--ask-bg, #191A1A)));
    border: 1px solid var(--border, var(--ntl-sep, #262727));
    border-radius: 10px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    text-align: left;
    color: inherit;
    font: inherit;
  }
  html body .dh-tile:hover,
  html body .dh-tile:active {
    background: color-mix(in srgb, var(--totaly-blue-500, #2196F3) 8%, transparent);
    border-color: color-mix(in srgb, var(--totaly-blue-500, #2196F3) 32%, transparent);
  }
  html body .dh-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
  }
  html body .dh-dot--up   { background: #10B981; }
  html body .dh-dot--down { background: #EF4444; }
  html body .dh-dot--flat { background: var(--fg-muted, #8A8F9C); opacity: 0.5; }
  html body .dh-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-secondary, #B5B7BE);
    letter-spacing: 0.02em;
  }
  html body .dh-status {
    font-size: 10px;
    color: var(--fg-muted, #8A8F9C);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Digital COO hero KPI grid: 2-col */
  html body .dashboard-view .coo-kpi-grid,
  html body .dashboard-view .hero-card .coo-kpi-grid,
  html[data-app-theme="dark"] body .dashboard-view .hero-card .coo-kpi-grid,
  html body .coo-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }
  html body .dashboard-view .coo-kpi-btn,
  html body .dashboard-view .coo-kpi-btn--3,
  html body .dashboard-view .coo-kpi-btn--2,
  html body .coo-kpi-btn,
  html body .coo-kpi-btn--3,
  html body .coo-kpi-btn--2 {
    grid-column: span 1 !important;
    padding: 12px 12px !important;
    min-height: 76px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body .dashboard-view .coo-kpi-btn .coo-kpi-label,
  html body .dashboard-view .coo-kpi-btn .coo-kpi-src {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    white-space: normal !important;
  }
  html body .coo-kpi-label {
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
    color: var(--fg-primary, #E3E1DD) !important;
  }
  html body .coo-kpi-src {
    font-size: 0.68rem !important;
    color: var(--fg-muted, #8A8F9C) !important;
    line-height: 1.3 !important;
  }

  /* Hero card + typography */
  html body .dashboard-view .page-hero .hero-card {
    padding: 16px 14px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html body .dashboard-view .page-hero {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  html body .dashboard-view .hero-headline,
  html body .dashboard-view .hero-card .hero-headline,
  html[data-app-theme="dark"] body .dashboard-view .hero-card .hero-headline {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
    margin: 4px 0 6px !important;
    color: var(--fg-primary, #E3E1DD) !important;
  }
  html body .dashboard-view .hero-lead {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
    color: var(--fg-secondary, #B5B7BE) !important;
    margin: 0 0 10px !important;
  }
  html body .dashboard-view .eyebrow {
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
    color: var(--totaly-blue-500, #2196F3) !important;
  }

  /* Section titles - primary foreground token so light/dark both work */
  html body .dashboard-view .panel-title,
  html body .dashboard-view .panel h3,
  html body .dashboard-view .panel h4,
  html body .dashboard-view .section-label,
  html body .dashboard-view .right-section .section-label,
  html body .dashboard-view .card .panel-title {
    color: var(--fg-primary, #E3E1DD) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin: 0 0 12px !important;
  }

  /* Neutral KPI numbers (blue only on hover) */
  html body .kpi-num,
  html body .kpi-num.is-up,
  html body .kpi-num.is-down,
  html body .kpi-num.is-flat {
    color: var(--fg-primary, #E3E1DD) !important;
  }
  html body .kpi:hover .kpi-num,
  html body .kpi:active .kpi-num {
    color: var(--totaly-blue-500, #2196F3) !important;
  }

  /* Bottom KPI strip labels */
  html body .dashboard-view .kpi-grid .kpi-label,
  html body .dashboard-view .kpi-card .kpi-label {
    color: var(--fg-muted, #8A8F9C) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
  }
  html body .dashboard-view .kpi-grid .kpi-value,
  html body .dashboard-view .kpi-card .kpi-value {
    color: var(--fg-primary, #E3E1DD) !important;
  }

  /* KPI grid: 1-col */
  html body .kpi-grid,
  html body #kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Quick Actions chips 2x2 */
  html body .dashboard-view #hero-quick-actions {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html body .dashboard-view .quick-actions-grid,
  html body .quick-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }
  html body .dashboard-view .quick-actions-grid .qa-btn,
  html body .quick-actions-grid .qa-btn,
  html body .qa-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 10px !important;
    font-size: 0.88rem !important;
    min-height: 44px !important;
    text-align: center !important;
    background: color-mix(in srgb, var(--totaly-blue-500, #2196F3) 6%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--totaly-blue-500, #2196F3) 22%, transparent) !important;
    color: var(--fg-primary, #E3E1DD) !important;
    border-radius: 10px !important;
  }
  html body .qa-btn:hover,
  html body .qa-btn:active {
    background: color-mix(in srgb, var(--totaly-blue-500, #2196F3) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--totaly-blue-500, #2196F3) 42%, transparent) !important;
  }

  /* Dashboard containers - no horizontal overflow */
  html body .dashboard-view,
  html body .dashboard-view .page-hero,
  html body .dashboard-view .hero-card,
  html body .dashboard-view .summary-stack,
  html body .dashboard-view .dashboard-lower,
  html body .dashboard-view .right-panel {
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  html body .dashboard-view .card {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  html body .dashboard-view * {
    max-width: 100%;
  }
  html body .dashboard-view {
    padding-bottom: 32px !important;
  }

  /* Stack lower panels */
  html body .dashboard-lower {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  html body .dashboard-lower .right-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  html body .summary-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .summary-stack > .card.panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Home tab bar */
  html body .home-tabs-row {
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }
  html body .home-tab {
    flex: 1 1 auto;
    min-width: 80px;
    text-align: center;
    font-size: 0.78rem !important;
    min-height: 48px;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 0.5rem;
    border-radius: 12px;
    -webkit-tap-highlight-color: rgba(66, 165, 245, 0.25);
    touch-action: manipulation;
    position: relative;
    z-index: 1;
  }
  html body .home-tab,
  html body .home-tab * {
    pointer-events: auto;
  }

  /* ============================================================
   * 4. ASK (route-ask)
   * ============================================================ */

  html body.route-ask .main-content,
  html body.route-ask-new .main-content,
  html body.route-ask .ai-view {
    padding-top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 140px) !important;
  }

  html body.route-ask .ai-messages,
  html body.route-ask-new .ai-messages {
    max-width: 100% !important;
    padding: 0 12px !important;
  }

  html body.route-ask .ai-composer-wrap,
  html body.route-ask-new .ai-composer-wrap {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(to top, var(--surface, var(--ask-bg, #191A1A)) 60%, transparent) !important;
    z-index: 100 !important;
  }

  /* ============================================================
   * 5. CHATS (route-chats)
   * ============================================================ */

  html body.route-chats .main-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 80px) !important;
    padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 100px) !important;
  }

  html body.route-chats .chat-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ============================================================
   * 6. REPORTS (route-reports)
   * ============================================================ */

  html body.route-reports .main-content,
  html body.route-reports .reports-view {
    padding-top: calc(env(safe-area-inset-top, 0px) + 92px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body.route-reports .report-view {
    padding: 12px !important;
    max-width: 100% !important;
  }

  html body.route-reports .report-kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html body.route-reports .report-section {
    margin-bottom: 24px !important;
  }

  html body.route-reports .report-section-head {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  /* ============================================================
   * 7. PREDICTIONS (route-predictions)
   * ============================================================ */

  html body.route-predictions .main-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 80px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body.route-predictions .pred-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html body.route-predictions .pred-card {
    padding: 16px !important;
  }

  html body.route-predictions .pred-num {
    color: var(--fg-primary, #E3E1DD) !important;
    font-size: 24px !important;
  }
  html body.route-predictions .pred-card:hover .pred-num,
  html body.route-predictions .pred-card:active .pred-num {
    color: var(--totaly-blue-500, #2196F3) !important;
  }

  /* ============================================================
   * 8. DIVISIONS (route-divisions)
   * ============================================================ */

  html body.route-divisions .main-content,
  html body.route-divisions .division-view,
  html body.route-divisions .gl-divisions-view {
    /* v41.90: was safe+80. Topbar sits at safe + 60px, so 12px gap = safe+72. */
    padding-top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body.route-divisions .division-header-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
  }

  html body.route-divisions .division-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ============================================================
   * 9. MESSAGES (route-messages)
   * ============================================================ */

  html body.route-messages .main-content {
    /* v41.90: was safe+80. Content sits inside .msg-view which used to add
       another safe+60px top pad on top of this -- the sum produced ~200px of
       dead space above the KPI strip. Reduce outer to safe+72 and zero out
       the inner .msg-view top pad in the @media 768 block below. */
    padding: 12px !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 100px) !important;
  }

  html body.route-messages .message-bubble {
    max-width: 85% !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
  }

  /* ============================================================
   * 10. AUTOMATIONS (route-automations)
   * ============================================================ */

  html body.route-automations .main-content,
  html body.route-automations .automations-view {
    /* v41.90: was safe+80. Reduce to safe+72 for tighter first-content offset. */
    padding: 12px !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
  }

  html body.route-automations .automation-card {
    padding: 14px !important;
    margin-bottom: 10px !important;
  }

  html body.route-automations .automation-rule-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* ============================================================
   * 11. DATA SOURCES / CONNECTORS (route-connectors)
   * ============================================================ */

  html body.route-connectors .main-content,
  html body.route-connectors .connectors-view {
    padding: 12px !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 80px) !important;
  }

  html body.route-connectors .ds-card {
    padding: 14px !important;
  }

  /* ============================================================
   * 12. SETTINGS (route-settings)
   * ============================================================ */

  html body.route-settings .main-content,
  html body.route-settings .settings-view {
    padding: 1rem 1rem 3rem !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 80px) !important;
  }

  html body.route-settings .settings-section {
    margin-bottom: 24px !important;
  }

  html body.route-settings .settings-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 12px 0 !important;
  }

  /* ============================================================
   * 13. UTILITY - data tables, modals, forms
   * ============================================================ */

  /* Responsive data tables (stack cells) */
  html body .data-table,
  html body .data-table thead,
  html body .data-table tbody,
  html body .data-table tr,
  html body .data-table td,
  html body .data-table th {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Fullscreen modals on mobile */
  html body .modal-box,
  html body .modal-box--wide {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Embed header stack */
  html body .embed-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* Automations / activity feed wrap */
  html body #automations-list > *,
  html body #activity-feed > * {
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;
  }
}

/* ============================================================
 * Small-phone refinements (<=479px)
 * ============================================================ */
@media (max-width: 479px) {
  html body .dashboard-view .kpi-grid,
  html body .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  html body .dh-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
 * SECTION 4b: ASK (consolidated from 24 scattered mobile blocks)
 * v41.58h consolidation - preserves original rules 1:1.
 * Original locations preserved as inline provenance comments.
 * ============================================================ */


@media (max-width: 767px) {

  /* [from style.css L13216-L13292] */

  /* Pull the grid out of ai-view's horizontal padding */

  /* Direct approach: allow home-dash-grid to bleed edge-to-edge */
  .home-launcher .home-dash-grid,
  .ai-view .home-dash-grid,
  body.route-ask .home-dash-grid {
    /* Scroll horizontally, full viewport width */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    /* Show multiple columns so it IS scrollable */
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    /* Bleed out of parent padding */
    margin-left: calc(-1 * var(--mpolish-page-pad, 14px));
    margin-right: calc(-1 * var(--mpolish-page-pad, 14px));
    padding-left: var(--mpolish-page-pad, 14px);
    padding-right: var(--mpolish-page-pad, 14px);
    width: calc(100% + 2 * var(--mpolish-page-pad, 14px));
    max-width: calc(100vw);
    box-sizing: border-box;
    /* Prevent width from being capped by parent max-width rule */
    min-width: 0;
  }
  .home-launcher .home-dash-grid::-webkit-scrollbar,
  .ai-view .home-dash-grid::-webkit-scrollbar,
  body.route-ask .home-dash-grid::-webkit-scrollbar {
    display: none;
  }
  /* Cards keep glass chrome + rounded corners */
  .home-dash-grid .home-dash-card,
  .home-dash-grid .home-dash-card--link {
    min-width: 200px;
    max-width: 220px;
  }

  /* v41.77: Removed the aggressive top fade on ai-messages. It was
     visibly clipping the first line of every answer. Keep content crisp. */
  body.ai-has-messages .ai-view .ai-messages,
  body.route-ask.ai-has-messages .ai-messages {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  /* Also fade the floating-chat messages when open */
  .floating-chat.open .floating-chat-messages {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgba(0,0,0,0.6) 24px,
      black 48px,
      black 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgba(0,0,0,0.6) 24px,
      black 48px,
      black 100%
    ) !important;
  }

  /* [from style.css L13342-L13355] */

  /* Routes that lock height: ensure dvh is used, not vh */
  html body.route-ask:not(.ai-has-messages) section#main.main {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  html body.route-ask:not(.ai-has-messages) .ai-view {
    height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
  }
  html body.route-ask:not(.ai-has-messages) {
    height: 100dvh !important;
  }

  /* [from style.css L13843-L14038] */
html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-img {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    border-radius: 50%;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }@keyframes rsm-pop-mobile {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }/* Inner views must not lock their own viewport. */
  html body main#main-content > .dashboard-view,
  html body main#main-content > .reports-view,
  html body main#main-content > .automations-view,
  html body main#main-content > .settings-view,
  html body main#main-content > .division-view,
  html body main#main-content > .ai-view,
  html body main#main-content > .ai-home,
  html body main#main-content > .chats-view,
  html body main#main-content > .gl-dash-pack-view,
  html body .dashboard-view,
  html body .reports-view,
  html body .automations-view,
  html body .settings-view,
  html body .division-view,
  html body .chats-view,
  html body .ai-view,
  html body .ai-home {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    overflow-x: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Chat (route-ask): the messages list keeps its own internal scroll
  ONLY when there are messages, so the composer stays anchored.
  Empty state scrolls on the document. */
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-messages {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    max-height: calc(100dvh - 200px) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 140px !important;
  }

  /* Composer: floats above content, fixed bottom. */
  html body.route-ask .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: transparent;
    padding: 0;
    margin: 0;
    z-index: 5 !important;
  }
  html body.route-ask .rich-composer {
    background: rgba(31, 33, 33, 0.94);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
  }

  /* Kill any decorative pseudo bands that earlier archs added. */
  html body.route-ask::before,
  html body.route-ask::after,
  html body.route-chats::before,
  html body.route-chats::after,
  html body.route-dashboards::before,
  html body.route-dashboards::after,
  html body.route-reports::before,
  html body.route-reports::after,
  html body.route-divisions::before,
  html body.route-divisions::after,
  html body.route-automations::before,
  html body.route-automations::after,
  html body.route-settings::before,
  html body.route-settings::after,
  html body.route-connectors::before,
  html body.route-connectors::after {
    content: none;
    display: none;
    background: transparent;
    height: 0;
    width: 0;
  }

  /* Hide the desktop history-hover-card portal entirely on mobile.
  It is built unconditionally by JS and was rendering a thin opaque
  bar at the very top of the viewport on Comet. Mobile has no hover. */
  html body #history-portal-card,
  html body .history-hover-card.history-hover-card--portal {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    top: -9999px;
    left: -9999px;
  }

  /* Body / route-* backgrounds: always system grey var(--ask-bg, #191A1A). */
  html body,
  html body.route-ask,
  html body.route-chats,
  html body.route-reports,
  html body.route-dashboards,
  html body.route-automations,
  html body.route-settings,
  html body.route-connectors,
  html body.route-divisions {
    background: var(--ask-bg, #191A1A);
    background-color: var(--ask-bg, #191A1A);
    background-image: none;
  }  /* ── 2) Divisions header + cards centered on mobile ───────────
  Subtitle text + division cards both centered. The grid was
  letting cards sit left-aligned at x=22.5 because the cards
  have a fixed 280px width inside a 348px column. Center via
  justify-items + margin-inline auto.  */
  html body .gl-divisions-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  html body .gl-divisions-grid {
    justify-items: center;
    justify-content: center !important;
  }
  html body .gl-divisions-grid .gl-division-card,
  html body .gl-division-card {
    margin-left: auto;
    margin-right: auto;
  }
  /* ── 4) Chat tightening (empty state) ────────────────────
  iter12d: DO NOT lock height + overflow:hidden on body - that
  triggers an iOS 26 bug where position:fixed loses viewport
  anchoring (sources: Reddit r/css, framer.community, SO).
  Instead use min-height: 100svh (small viewport unit, stable
  across toolbar collapse) and let composer fix to viewport.  */
  html body.route-ask:not(.ai-has-messages) {
    min-height: 100svh;
  }
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home {
    min-height: 100svh !important;
    height: auto;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Composer stays put even at scroll extremes - guard against any
  transform/will-change that breaks position:fixed on iOS.
  Also tighten bottom gap (was 12px causing a visible strand
  above Comet's chrome): pin to safe-area only.  */
  html body.route-ask .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    bottom: env(safe-area-inset-bottom, 0) !important;
    left: 8px !important;
    right: 8px !important;
    transform: none;
    will-change: auto;
    contain: none;
  }

  /* ── 5) Continuous body - no two-tone strands at top/bottom ──
  Force solid var(--ask-bg, #191A1A) through to safe-area edges so iOS status
  bar and Comet chrome zones see the same exact color.  */
  html, html body {
    background: var(--ask-bg, #191A1A) !important;
    background-color: var(--ask-bg, #191A1A) !important;
    background-image: none;
  }  html:not(#__never__) body:not(#__never__) {
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    height: auto;
    max-width: 100vw !important;
    -webkit-overflow-scrolling: auto;
  }

}

@media (max-width: 768px) {

  /* [from style.css L9676-L9681] */

  body.route-ask:not(.ai-has-messages):not(.kpi-active) .ai-view.ai-home .ai-hero {
    position: static;
    top: auto;
  }

  /* [from style.css L25817-L25849] */

  /* Force composer to viewport bottom on the AI/ask route */
  html body.route-ask .ai-composer-wrap,
  html body.route-ask .ai-composer-wrap--chip {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: calc(var(--kb-offset, 0px) + var(--kb-safe, env(safe-area-inset-bottom, 0px))) !important;
    top: auto;
    z-index: 50 !important;
    background: transparent;
    padding: 6px 12px !important;
  }

  /* Give .ai-view enough bottom clearance so messages don't scroll
  under the fixed composer (~56px chip + 6px top padding + safe area).
  Reduced from 140px: composer is ~56px tall, not 140px. */
  html body.route-ask .ai-view {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
  }

  /* Top padding below the mobile topnav (~60px nav + safe-area + 12px gap) */
  html body.route-ask .ai-view .ai-hero,
  html body.route-ask:not(.ai-has-messages) .ai-hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
  }

  /* Messages region: keep clear of both topnav and composer */
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    padding-top: calc(env(safe-area-inset-top, 0px) + 80px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 90px) !important;
  }

  /* [from style.css L25858-L25868] */

  html body.route-ask .ai-queue-region {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--composer-region-h, 60px) + var(--kb-offset, 0px) + var(--kb-safe, env(safe-area-inset-bottom, 0px)));
    z-index: 49;
    padding: 6px 12px;
    background: var(--ask-bg, #191A1A);
  }

  /* [from style.css L26003-L26023] */

  html body.route-ask .ai-view {
    padding-bottom: calc(var(--composer-region-h, 80px) + var(--kb-safe, env(safe-area-inset-bottom, 0px)) + 8px) !important;
  }

  /* ai-messages bottom padding also uses dynamic height */
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    padding-bottom: calc(var(--composer-region-h, 80px) + var(--kb-safe, env(safe-area-inset-bottom, 0px)) + 16px) !important;
  }

  /* Composer wrap: max padding 4px top/bottom to keep chip compact */
  html body.route-ask .ai-composer-wrap,
  html body.route-ask .ai-composer-wrap--chip {
    padding: 4px 12px max(4px, env(safe-area-inset-bottom, 4px)) !important;
  }

  /* Ensure queue region gap to composer is 0 (queue is positioned directly above) */
  .ai-queue-region + .ai-composer-wrap {
    margin-top: 0;
  }

  /* [from style.css L27370-L27401] */

  html.has-tenant-logo body.route-ask:not(.ai-has-messages) .ai-view .ai-bg-mark {
    display: block;
    position: fixed;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0.95;
    pointer-events: none;
    z-index: 1;
    background: transparent;
  }
  html.has-tenant-logo body.route-ask:not(.ai-has-messages) .ai-view .ai-bg-mark .ai-bg-mark__img {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: var(--tenant-logo-url);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: none;
  }
  /* Tenant logo is photographic, not a vector wordmark: hide the shimmer. */
  html.has-tenant-logo body.route-ask:not(.ai-has-messages) .ai-view .ai-bg-mark .ai-bg-mark__shimmer {
    display: none;
  }

  /* [from style.css L28963-L28969] */

  body.route-ask .ai-bg-mark,
  body.route-chats .ai-bg-mark {
    display: block !important;
    opacity: 0.05 !important;
  }

}

@media (max-width: 820px) {

  /* [from style.css L22106-L22191] */

  /* Kill the previous tint sheet entirely on every route. */
  html body.route-ask::before,
  html body.route-chats::before,
  html body.route-dashboards::before,
  html body.route-reports::before,
  html body.route-divisions::before,
  html body.route-automations::before,
  html body.route-settings::before,
  html body.route-connectors::before,
  html body::before {
    content: none;
    display: none;
    background: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
  }

  /* Perplexity-style top fade via a fixed overlay using a NEW dedicated
  element appended at runtime (#perplexity-fade). We avoid body::after
  because earlier route-specific ::after rules (e.g. body.route-ask::after
  at line 13341 sets a flat 2px bottom strip) would conflict. */
  #perplexity-fade {
    content: "";
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    /* v40.5em FIX G (Branson: "bad band at the top of all the tabs"): the
  backdrop-filter:blur below frosted whatever scrolled under this fixed
  overlay and left a hard horizontal seam at its bottom edge on EVERY
  mobile tab - the "bad band". This was already fixed for /hood only
  (override further down); v40.5em promotes that proven treatment to the
  base rule so all tabs get it: drop the blur entirely, cap the band at
  safe-area + 60px (was 92px), and use the lighter gradient (opaque
  status-bar band, then 40% just under the inset fading to fully clear by
  +30px). No frost, no seam. The /hood override below is now redundant but
  harmless. */
    height: calc(env(safe-area-inset-top, 0px) + 60px) !important;
    z-index: 105 !important;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(25, 26, 26, 1.00) 0%,
      rgba(25, 26, 26, 1.00) env(safe-area-inset-top, 0),
      rgba(25, 26, 26, 0.40) calc(env(safe-area-inset-top, 0px) + 1px),
      rgba(25, 26, 26, 0.00) calc(env(safe-area-inset-top, 0px) + 30px),
      rgba(25, 26, 26, 0.00) 100%
    ) !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    display: block;
  }
  body.is-auth-page #perplexity-fade { display: none; }
  /* v40.5dt Bug 1: ROOT CAUSE of the "hard line" on /hood. #perplexity-fade
  sits over the map; its alpha gradient is soft, but backdrop-filter:blur
  frosts the map ABOVE the element and leaves it sharp BELOW the element's
  bottom edge - that boundary reads as a hard horizontal line. On /hood the
  map is directly underneath, so drop the blur: only the soft colour
  gradient remains and the top fades gradually with no seam. /ask keeps the
  blur (scrolling text under it benefits from the frost). */
  /* Hood is a full-bleed map. The shared top veil (and the shortened
     hood gradient that replaced it) still painted a dark band across the
     aerial imagery and the address pill. Other routes keep the fade. */
  body.route-hood #perplexity-fade {
    display: none !important;
    content: none !important;
    height: 0 !important;
    background: none !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* [from style.css L22200-L22215] */

  body.route-ask .ai-view .ai-hero,
  body.route-ask .ai-view .ai-messages { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
  body.route-chats .chats-view, body.route-chats .chats-list { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
  body.route-dashboards .dash-hub { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
  body.route-reports .reports-view { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
    body.route-automations .automations-view { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
    body.route-settings .settings-view { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }

  html body .ai-composer-wrap,
  html body nav.mobile-topnav {
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* [from style.css L22239-L22343] */

  html body.route-ask .ai-view .ai-composer-wrap,
  html body.route-ask:not(.ai-has-messages) .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    position: fixed !important;
    left: 0;
    right: 0;
    /* Prefer visual viewport when available. Fallback to bottom:0. */
    top: auto;
    bottom: calc(var(--kb-offset, 0px) + var(--kb-safe, env(safe-area-inset-bottom, 0px))) !important;
    /* Belt and suspenders: nudge with --vv-h when it deviates from innerHeight.
  The transform stays at 0 in modern browsers, kicks in only on iOS Safari. */
    will-change: transform !important;
  }

  /* v41.77: Legacy chip-mode block removed. Answer view (ai-has-messages)
     uses the same full composer as home; final styling in v41.76+ fix pack
     at the end of this file. */
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer .rc-attachments:empty {
    display: none;
  }

  /* [from style.css L22374-L22423] */

  body:not(.ai-has-messages) .ai-new-chat-btn,
  body.is-auth-page .ai-new-chat-btn { display: none; }

  #perplexity-fade-bottom { display: none; }

  body.route-ask.ai-has-messages .ai-view .ai-messages,
  body.route-ask.ai-has-messages .ai-view {
    padding-top: 8px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px) !important;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* Topnav: solid canvas. No glow. Content disappears cleanly under it. */
  body.route-ask.ai-has-messages .topbar, body.route-ask.ai-has-messages header.topbar {
    background: var(--surface-charcoal-deep);
    background-color: var(--surface-charcoal-deep);
    border-bottom: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  body.ai-has-messages .ai-view .ai-messages {
    gap: 10px !important;
  }
  body.ai-has-messages .ai-view .ai-messages .msg-bubble.msg-user {
    margin-bottom: 0;
  }
  body.ai-has-messages .ai-view .ai-messages .msg-bubble.msg-assistant {
    margin-top: 4px;
  }
  /* Claude thinking block flush to top of assistant bubble */
  body.ai-has-messages .msg-bubble.msg-assistant .cl-block {
    margin-top: 0;
    margin-bottom: 6px;
  }

  /* Composer wrap: solid canvas same as page. Content disappears under it. */
  body.route-ask.ai-has-messages .ai-composer-wrap {
    background: var(--surface-charcoal-deep) !important;
    background-color: var(--surface-charcoal-deep) !important;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-top: 0;
    box-shadow: none;
  }

  /* [from style.css L22924-L23073] */

  :root {
    --gl-floating-pill-h: 60px;
  }

  /* /ask - AI chat view */
  html body.route-ask .ai-view .ai-hero,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  /* /dash - main dashboard overview */
  html body .dashboard-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  /* /chats - chat history list */
  html body .chats-view, html body .chats-list {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px);
  }

  /* /divisions - divisions grid (actual class: gl-divisions-view) */
  html body .gl-divisions-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  /* /data-sources - connector cards (actual class: gl-cn-view) */
  html body .gl-cn-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  /* /automations - automation cards list */
  html body .automations-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  /* /messages - messaging hub (entirely absent from prior layers) */
  html body .msg-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px);
  }

  /* /settings */
  html body .settings-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  /* /reports - reports hub */
  html body .reports-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px);
  }

  /* /superviz - division chart surface. Added after the SuperViz port: the
     view shipped with .sv-page { padding: 0 20px 56px } and no top padding,
     and it was never added to this list, so the division tab strip rendered
     underneath the floating pill and the avatar. Same value as every other
     route so the first row lands in the same place. */
  html body .sv-page {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  html body.route-ask.ai-has-messages, html.route-ask.ai-has-messages, html body.route-ask, html body.route-chats, html body.route-divisions, html body.route-connectors, html body.route-automations, html body.route-messages, html body.route-settings, html body.route-reports, html body.route-superviz {
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: auto;
    height: auto;
    max-height: none;
    min-height: 100dvh;
    position: static;
    top: auto;
    left: auto;
    width: auto;
  }
  html.route-ask, html {
    overflow: auto;
    position: static;
    height: auto;
    max-height: none;
  }

  html body.route-ask.ai-has-messages .ai-view {
    display: flex;
    flex-direction: column !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow: hidden !important;
    position: relative;
  }

  /* Scroll surface: takes remaining space, has the fade mask */
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    flex: 1 1 auto !important;
    min-height: 0;
    max-height: none;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    /* Padding-top clears chip strip (60px chip + safe-area + 8px) */
    padding-top: calc(var(--gl-floating-pill-h, 60px) + env(safe-area-inset-top, 0px) + 8px) !important;
    /* Padding-bottom clears composer + small gap */
    padding-bottom: 16px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    /* PQINA mask: fade top 32px and bottom 24px of the scroll container */
    --mask-fade-top: 32px;
    --mask-fade-bottom: 24px;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--mask-fade-top),
      #000 calc(100% - var(--mask-fade-bottom)),
      transparent 100%
    ) !important;
            mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--mask-fade-top),
      #000 calc(100% - var(--mask-fade-bottom)),
      transparent 100%
    ) !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% 100% !important;
            mask-size: 100% 100% !important;
  }

  /* Composer: pinned inside .ai-view, NOT fixed to viewport */
  html body.route-ask.ai-has-messages .ai-view .ai-composer-wrap {
    position: sticky !important;
    bottom: 0;
    top: auto;
    flex: 0 0 auto !important;
    width: 100%;
    left: auto;
    right: auto;
    background: var(--ask-bg, #191A1A) !important;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-top: 0;
    box-shadow: none;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0;
    z-index: 4 !important;
  }

  /* Tighten composer internal spacing: chip strip closer to textarea */
  html body.route-ask.ai-has-messages .ai-view .ai-composer-wrap .composer-chips {
    padding: 4px 0 0 !important;
    margin: 0;
    gap: 6px !important;
  }

  /* [from style.css L23156-L23221] */


  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    -webkit-mask-image: none;
            mask-image: none;
    /* Padding adjustments: tighter top since chip strip is the topnav edge */
    padding-top: calc(var(--gl-floating-pill-h, 60px) + env(safe-area-inset-top, 0px) + 4px) !important;
    padding-bottom: 8px !important;
  }

  /* Ensure .ai-view is positioning context for fade overlays */
  html body.route-ask.ai-has-messages .ai-view {
    position: relative;
    isolation: isolate !important;
  }

  /* TOP fade overlay: starts at topnav bottom edge, fades to transparent.
  Sits ABOVE scrolling content (z-index 2), pointer-events none so
  scroll still works through it. */
  html body.route-ask.ai-has-messages .ai-view::before {
    content: '' !important;
    position: absolute !important;
    display: block;
    left: 0;
    right: 0;
    top: calc(var(--gl-floating-pill-h, 60px) + env(safe-area-inset-top, 0px)) !important;
    height: 36px !important;
    background: linear-gradient(
      to bottom,
      var(--ask-bg, #191A1A) 0%,
      rgba(25, 26, 26, 0.95) 25%,
      rgba(25, 26, 26, 0.65) 60%,
      transparent 100%
    ) !important;
    pointer-events: none;
    z-index: 2 !important;
  }

  /* BOTTOM fade overlay: starts above composer, fades up to transparent.
  Positioned so it sits IMMEDIATELY above the sticky composer. */
  html body.route-ask.ai-has-messages .ai-view::after {
    content: '' !important;
    position: absolute !important;
    display: block;
    left: 0;
    right: 0;
    /* Bottom anchored at the composer top edge. Composer height ~60-80px
  depending on chip strip + textarea + padding. */
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    height: 40px !important;
    background: linear-gradient(
      to top,
      var(--ask-bg, #191A1A) 0%,
      rgba(25, 26, 26, 0.95) 25%,
      rgba(25, 26, 26, 0.65) 60%,
      transparent 100%
    ) !important;
    pointer-events: none;
    z-index: 2 !important;
  }

  /* Ensure composer sits ABOVE the fade overlay (z-index 4 > 2) */
  html body.route-ask.ai-has-messages .ai-view .ai-composer-wrap {
    z-index: 4 !important;
  }

  /* [from style.css L23382-L23598] */

  html body.route-ask {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100dvh;
    max-height: 100dvh;
    position: fixed;
    width: 100%;
    /* Kill any scroll-triggered chip pop - floating pill should not hide
  on route-ask because body scroll is locked and window.scrollY = 0 */
  }

  /* Ensure html root doesn't scroll either */
  html:has(body.route-ask) {
    overflow: hidden;
    height: 100dvh;
  }

  /* Topnav stays fixed, never scrolls with body */
  html body.route-ask nav.gl-floating-pill,
  html body.route-ask #gl-floating-pill,
  html body.route-ask nav.mobile-topnav,
  html body.route-ask header.topbar {
    position: fixed !important;
    z-index: 100 !important;
    top: 0;
  }

  /* Kill data-mobile-hidden animation on route-ask - pill never hides */
  html body.route-ask #gl-floating-pill[data-mobile-hidden="1"] {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* ai-messages is the ONLY scroll surface on route-ask */
  html body.route-ask .ai-view .ai-messages {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  html body.route-ask .ai-view .ai-messages {
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* Ensure .ai-view is a positioning context so ::before/::after anchor */

  /* Top fade: 24px tall, var(--ask-bg, #191A1A) → transparent, above messages, below topnav */
  html body.route-ask.ai-has-messages .ai-view::before {
    content: '' !important;
    display: block;
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    height: 24px !important;
    background: linear-gradient(
      to bottom,
      var(--ask-bg, #191A1A) 0%,
      transparent 100%
    ) !important;
    pointer-events: none;
    z-index: 3 !important;
  }

  /* Bottom fade: 32px tall, transparent → var(--ask-bg, #191A1A), above messages, below composer */
  html body.route-ask.ai-has-messages .ai-view::after {
    content: '' !important;
    display: block;
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px !important;
    background: linear-gradient(
      to top,
      var(--ask-bg, #191A1A) 0%,
      transparent 100%
    ) !important;
    pointer-events: none;
    z-index: 3 !important;
  }

  /* Composer sits above fade overlays */
  html body.route-ask .ai-view .ai-composer-wrap {
    z-index: 5;
  }

  html body.route-chats .chats-list {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* 64px topnav + 80px bottom clearance */
    height: calc(100dvh - 64px - 80px);
    max-height: calc(100dvh - 64px - 80px);
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }

  /* Ensure chats-view doesn't clip the list */
  html body.route-chats .chats-view {
    overflow: visible;
    overflow-x: hidden;
  }

  html body.route-ask.ai-has-messages .ai-view .ai-composer-wrap .composer-chips {
    margin-top: 12px !important;
    padding-top: 0;
  }

  /* Also tighten any top margin on the composer wrap itself in has-messages */
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    margin-top: 0;
    padding-top: 0;
  }

  html body.route-ask .ai-view .ai-composer-wrap,
  html body.route-ask:not(.ai-has-messages) .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap,
  /* Match the fixed-position rules that JS enforces */
  html body.route-ask .ai-composer-wrap {
    position: fixed !important;
    left: 0;
    right: 0;
    /* flush to bottom; safe-area handled by padding-bottom below */
    bottom: calc(var(--kb-offset, 0px)) !important;
    top: auto;
    margin: 0;
    /* padding: top, sides, safe-area-bottom */
    padding: 8px 12px max(8px, env(safe-area-inset-bottom, 8px)) !important;
    background: transparent;
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    z-index: 5 !important;
  }

  /* Inner rounded pill stays styled; just the outer wrap goes flush */
  html body.route-ask .ai-view .rich-composer {
    /* border-radius and bg are set by JS enforceMobileAskLayout; preserve them */
    border-radius: 22px;
  }

  /* Ensure ai-messages padding-bottom clears the fixed composer (~64px) +
  safe-area-bottom so last message isn't hidden */
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    padding-bottom: calc(72px + max(8px, env(safe-area-inset-bottom, 8px))) !important;
  }

  /* Main content surfaces: enforce var(--ask-bg, #191A1A) bg */
  html body section#main.main, html body #main-content, html body .main-content, html body .ai-view, html body .ai-home, html body .chats-view, html body .dashboard-view, html body .reports-view, html body .automations-view, html body .settings-view, html body .gl-divisions-view {
    background: var(--ask-bg, #191A1A) !important;
    background-color: var(--ask-bg, #191A1A) !important;
  }

  /* Kill any #000 bg leaking into the main content area on mobile
  (auth pages are intentionally #000 and excluded here) */
  html body:not(.is-auth-page) {
    background: var(--ask-bg, #191A1A);
    background-color: var(--ask-bg, #191A1A);
  }

  /* Inactive gfp-item (nav tab) on dark floating pill: #B8B8B8, not white */
  html body .gl-floating-pill .gfp-item:not(.active) {
    color: #B8B8B8;
  }

  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item:not(.active) {
    color: #B8B8B8;
  }

  /* Active tab: keep blue bg, use #E5E5E5 text (not pure #FFF) */
  html body .gl-floating-pill .gfp-item.active,
  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item.active {
    color: #E5E5E5 !important;
  }

  /* topbar--with-pill active tab (light topbar variant): keep blue bg */
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active,
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active span {
    background: #1976D2;
    color: #E5E5E5;
  }

  /* topbar inactive tabs */
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item:not(.active),
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item--newchat {
    color: #B8B8B8;
  }

  /* Card surfaces: #1A1A1A → #1F2121 */
  html body .ai-hero-card,
  html body .home-dash-card,
  html body .kpi-card,
  html body .report-card,
  html body .automation-card,
  html body .gl-division-card,
  html body .gl-cn-card,
  html body .chats-row {
    background-color: #1F2121 !important;
  }

  /* Primary text: never pure #FFF, use #E5E5E5 */
  html body .ai-view,
  html body .ai-messages,
  html body .chats-view,
  html body .settings-view {
    color: #E5E5E5 !important;
  }

  /* [from style.css L25496-L25596] */

  /* GPU compositing on .ai-view so ::before / ::after backdrop-filter works
  on iOS Safari. will-change:transform was removed here because it creates
  a containing block for position:fixed in iOS Safari/Chrome just like
  transform:translateZ(0) does - both promote the element to a stacking
  context that re-parents fixed descendants, pinning the composer under
  the topnav instead of the viewport bottom.
  v40.5at: strip all promoting properties from .ai-view; the sledgehammer
  block at the end of this file enforces fixed positioning via !important
  regardless of any remaining containing-block ancestor. */
  html body.route-ask .ai-view {
    isolation: isolate !important;
    position: relative;
  }

  html body.route-ask::before,
  html body.route-ask::after {
    content: none;
    display: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* v41.18: TOP strip on mobile chat.
     Goal: text must NOT peek into the topnav area, but there must be no
     visible glass "band" smear line.
     Approach: fully opaque var(--ask-bg, #191A1A) behind the entire topnav height (status
     bar + 64px nav), then a short 24px fade to transparent below so the
     transition into the message area is soft. No backdrop-filter, no mask,
     no rgba middle-stops that produce banding. */
  html body.route-ask .ai-view::before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Full opaque region = status bar + 64px nav. Then a 24px soft fade. */
    height: calc(env(safe-area-inset-top, 0px) + 88px);
    pointer-events: none;
    z-index: 90;
    background:
      linear-gradient(
        to bottom,
        var(--ask-bg, #191A1A) 0%,
        var(--ask-bg, #191A1A) calc(100% - 24px),
        transparent 100%
      ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  /* v41.18: BOTTOM strip on mobile chat. Same fix as the top strip:
     opaque var(--ask-bg, #191A1A) behind the composer height, then a short 24px fade
     upward. No blur, no mask, no rgba middle-stops. */
  html body.route-ask .ai-view::after {
    content: '';
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Composer ~76px + safe-area. Solid to 24px below top of strip. */
    height: calc(env(safe-area-inset-bottom, 0px) + 100px);
    pointer-events: none;
    z-index: 4;
    background:
      linear-gradient(
        to top,
        var(--ask-bg, #191A1A) 0%,
        var(--ask-bg, #191A1A) calc(100% - 24px),
        transparent 100%
      ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  /* Layering */
  html body.route-ask .ai-view .ai-composer-wrap,
  html body.route-ask .ai-composer-wrap {
    z-index: 6 !important;
  }
  html body.route-ask nav.mobile-topnav,
  html body.route-ask nav.mobile-topnav.mobile-topnav--v1940 {
    z-index: 130;
  }

  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    /* v41.19: bump padding-top so the first bubble starts BELOW the opaque
       top strip (strip = safe-area + 88px; add 20px cushion so the thinking
       card head is fully visible). */
    padding-top: calc(env(safe-area-inset-top, 0px) + 108px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 140px) !important;
  }

  /* [from style.css L26478-L26502] */

  /* The fixed header band (body.route-ask::before) is 60px but does NOT
  account for safe-area-inset-top on iOS notch. Expand its height so
  it fills the notch zone with the bg color instead of letting the
  background pattern bleed through. */
  html body.route-ask::before,
  html body.route-ask.sidebar-collapsed::before {
    height: calc(env(safe-area-inset-top, 0px) + 60px) !important;
  }

  /* The beaded wordmark is positioned at top:50% (centered). On empty-state
  before keyboard opens, it sits at vertical center which can bleed into
  the status bar area if the phone has a large safe-area-inset-top.
  Ensure it respects the inset by capping its vertical position. */
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-bg-mark {
    top: max(50%, calc(env(safe-area-inset-top, 0px) + 80px)) !important;
  }

  /* If there is a ::before on body.route-ask that paints a color strip,
  ensure it is the exact bg color so no contrast band appears. */
  html body.route-ask::before {
    background: var(--ask-bg, #191A1A) !important;
    background-color: var(--ask-bg, #191A1A) !important;
  }

  /* [from style.css L26593-L26616] */

  html body.route-ask:not(.ai-has-messages) .ai-view {
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    min-height: 100dvh !important;
    padding: 0 16px;
    gap: 0.75rem;
  }

  /* When keyboard is open: dock to bottom */
  html body.route-ask:not(.ai-has-messages).kb-open .ai-view {
    justify-content: flex-end !important;
    padding-bottom: env(safe-area-inset-bottom, 8px) !important;
  }

  html body.route-ask:not(.ai-has-messages) .ai-view .ai-composer-wrap {
    position: static;
    background: transparent;
    padding: 0;
    margin-top: 0;
  }

  /* [from style.css L27129-L27141] */

  html body.route-ask.ai-has-messages .ai-view .ai-messages,
  html body.route-ask.ai-has-messages .ai-messages,
  html body.ai-has-messages .ai-view .ai-messages {
    padding-bottom: calc(var(--composer-h, 120px) + env(safe-area-inset-bottom, 0px) + 80px);
  }

  /* kb-open: same formula, keyboard reduces visual viewport so composer sits at 0 */
  html body.kb-open.route-ask .ai-view .ai-messages,
  html body.kb-open .ai-messages {
    padding-bottom: calc(var(--composer-h, 120px) + 80px);
  }

  /* [from style.css L27156-L27177] */

  /* Ensure the scroll container has enough bottom padding so text never
  hides under the fixed composer. padding-bottom = composer height +
  safe area + generous buffer (120px).
  Also: remove max-height cap from line 1140 so the container can expand
  to fill the viewport and scroll freely. The composer is position:fixed
  so it does NOT reduce available scroll height.
  required to beat v40.5bd at line 31740. */
  html body.route-ask.ai-has-messages .ai-view .ai-messages,
  html body.route-ask.ai-has-messages .ai-messages,
  html body.ai-has-messages .ai-messages {
    padding-bottom: calc(var(--composer-h, 140px) + env(safe-area-inset-bottom, 20px) + 120px);
    max-height: none; /* let page scroll, not inner overflow */
    overflow-y: visible; /* page is the scroller on mobile */
    min-height: 0;
  }

  /* kb-open: keyboard owns the bottom space, composer is fixed at 0 */
  html body.kb-open .ai-messages {
    padding-bottom: calc(var(--composer-h, 140px) + 100px);
  }

  /* [from style.css L27191-L27243] */

  /* v41.58j: Restore beaded totaly splash on /ask empty state only. Preview
     parity with iter12k. Once a message exists (.ai-has-messages), it's
     hidden so it doesn't compete with the answer. Use !important + a full
     opacity so the L1173 opacity:0.05 rule doesn't ghost it. */
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-bg-mark {
    display: block !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(72vw, 300px) !important;
    aspect-ratio: 760 / 193 !important;
    height: auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
    pointer-events: none;
    z-index: 1 !important;
    opacity: 0.95 !important;
    background: transparent !important;
  }
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-bg-mark .ai-bg-mark__img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 0 !important;
    background-image: url('/static/brand-totaly/logo-totaly-beaded-wordmark.png?v=v42.6.28-p-mark') !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    filter: none !important;
  }
  html body.route-ask.ai-has-messages .ai-view .ai-bg-mark,
  html body:not(.route-ask) .ai-view .ai-bg-mark {
    display: none !important;
  }

  /* Solid status-bar cap: pseudo on body covers the safe-area-inset-top zone */
  body.route-ask::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 44px);
    background: var(--surface-charcoal-deep);
    z-index: 9999;
    pointer-events: none;
  }

  /* Also kill any decorative background pattern on the body in ask route */
  body.route-ask:not(.ai-has-messages),
  body.route-ask {
    background-image: none;
  }

  body.route-ask:not(.ai-has-messages)::after {
    display: none;
  }

  html body.route-ask.ai-has-messages .ai-view {
    overflow: visible;
    min-height: unset; /* page grows naturally with content */
  }

  /* Also: the ai-composer-wrap needs to be fixed on mobile in-thread
  so it stays at the bottom of the viewport, not bottom of the page.
  Use #main to beat line 5114 specificity. */
  html body.route-ask.ai-has-messages section#main .ai-view .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 50;
    background: var(--ask-bg, #191A1A);
    background-image: none;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /* [from style.css L42354-L42371] */

  html body.route-ask .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  html body.route-ask .ai-composer-wrap .rich-composer,
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  /* [from style.css L42693-L42797] */

  /* Kill fade masks that were eating message text at the top and bottom. */
  html body .ai-view .ai-messages,
  html body.ai-has-messages .ai-view .ai-messages,
  html body.route-ask .ai-messages,
  html body.route-ask.ai-has-messages .ai-messages,
  html body.route-ask.ai-has-messages .ai-view .ai-messages,
  html body .floating-chat.open .floating-chat-messages {
    -webkit-mask-image: none !important;
            mask-image: none !important;
    --mask-fade-top: 0px;
    --mask-fade-bottom: 0px;
  }

  /* Composer parity: textarea and chip toolbar must be visible. */
  html body.route-ask .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body .ai-composer-wrap .rich-composer,
  html body .ai-view .rich-composer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px 10px 10px !important;
    border-radius: 18px !important;
    min-height: 56px !important;
  }
  html body .ai-composer-wrap .rich-composer .rc-textarea,
  html body .ai-view .rich-composer .rc-textarea,
  html body .ai-composer-wrap textarea,
  html body .ai-view textarea,
  html body .ai-composer-wrap .rich-composer .rc-input,
  html body .ai-view .rich-composer .rc-input {
    display: block !important;
    width: 100% !important;
    min-height: 26px !important;
    max-height: 140px !important;
    padding: 4px 2px !important;
    background: transparent !important;
    border: 0 !important;
    color: #F3F2EF !important;
    font-size: 15px !important;
    text-align: left !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    resize: none !important;
  }
  html body .ai-composer-wrap textarea::placeholder,
  html body .ai-view textarea::placeholder { text-align: left !important; color: #7a7a79 !important; }
  html body .ai-composer-wrap .rich-composer .rc-input:empty::before,
  html body .ai-view .rich-composer .rc-input:empty::before { text-align: left !important; color: #7a7a79 !important; }

  html body .ai-composer-wrap .rc-toolbar,
  html body .ai-view .rc-toolbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 2px 0 !important;
    width: 100% !important;
    order: 2 !important;
  }
  html body .ai-composer-wrap .composer-chips,
  html body .ai-view .composer-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  html body .ai-composer-wrap .composer-chip,
  html body .ai-view .composer-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #D5D4D4 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  html body .ai-composer-wrap .composer-send,
  html body .ai-view .composer-send {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
  }

  /* Also ensure the extra padding-bottom sacrificed for the old 80px fade
     is trimmed to just what the sticky composer needs. */
  html body .ai-view .ai-messages,
  html body.ai-has-messages .ai-view .ai-messages {
    padding-bottom: 16px !important;
  }

}

/* ============================================================
 * SECTION 1b: MOBILE TOPNAV (consolidated v1940 mobile top-navigation)
 * v41.58h consolidation - 6 scattered blocks -> 3 breakpoints.
 * Preserves original rules 1:1. Original locations in inline comments.
 * ============================================================ */


@media (max-width: 480px) {

  /* [from style.css L30588-L30616] */

  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch:not(#__never__) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt:not(#__never__) {
    background: #2A2A2A !important;
    background-color: #2A2A2A !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #E5E5E5 !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__) {
    background: rgba(33, 150, 243, 0.15) !important;
    background-color: rgba(33, 150, 243, 0.15) !important;
    border: 1px solid rgba(33, 150, 243, 0.35) !important;
    outline: none !important;
    box-shadow: none !important;
    color: #2196F3 !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
  }

}

@media (max-width: 767px) {

  /* [from style.css L19274-L19295] */

  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-img {
    /* drop the !important so JS's display:none on error wins */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    border-radius: 50%;
  }  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 14px;
    font-size: 13px !important;
    font-weight: 500;
    border-radius: 999px;
    line-height: 1;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
  }/* If anything was anchored under the bar at 60px, bump it by the inset */

  /* [from style.css L38688-L39196] */


    html body #main,
    html body #main-content,
    html body main.main-content {
      min-height: 100dvh;
    }

    /* Chips themselves accept taps; only the strip between them passes through */

    /* ───── AVATAR (left) ─────
  44x44 perfect circle. Profile photo fills edge-to-edge. */
    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip {
      box-sizing: border-box;
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      max-width: 44px;
      max-height: 44px;
      aspect-ratio: 1 / 1;
      flex: 0 0 44px;
      margin: 0;
      padding: 0;
      border-radius: 50%;
      background: rgba(20, 20, 28, 0.55);
      background-color: rgba(20, 20, 28, 0.55);
      background-image: none;
      border: 1px solid var(--border-overlay-10);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: transform 180ms ease;
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip:active {
      transform: scale(0.96);
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-ring {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      display: block;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
    }

    /* Fallback: hidden by default (img.onerror toggles this on by adding
  .is-fallback to the ring). NEVER shows behind a loaded photo. */
    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-fallback {
      display: none;
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-ring.is-fallback .mt-avatar-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--fg-primary-alpha);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip:active {
      transform: scale(0.96);
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip > svg {
      width: 18px;
      height: 18px;
      display: block;
      color: currentColor;
      fill: currentColor;
    }

    /* Text labels via ::after - single source of truth.
  Hide every direct-child SVG/.mt-switch-ico element underneath. */
    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt > * {
      display: none;
    }

    /* RECONCILE-FIX: raised ::after height from 36px → 44px to match button
  container height (WCAG 2.5.5 - 44px minimum tap target). */
    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[data-view="ai"]::after {
      content: "Chat";
      display: inline-block;
      height: 44px;
      line-height: 44px;
      font: inherit;
      color: inherit;
      letter-spacing: inherit;
      text-align: center;
      vertical-align: middle;
      pointer-events: none;
    }

    /* Active state - locked-token blue with white bold text */
    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active,
    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"] {
      background: var(--accent-primary-hover);
      background-color: var(--accent-primary-hover);
      background-image: none;
      color: var(--fg-inverse);
      font-weight: 600;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt:active {
      transform: scale(0.97);
    }

    /* iter12f: Allow content to scroll all the way to viewport top: 0 so
  it passes UNDER the floating chips and the status-bar zone reads as
  glass (chips have backdrop-filter blur). Initial-load chip overlap
  is prevented by padding-top on the inner view container instead
  of the outer scrolling section, which means content visually sits
  below chips at rest, then slides under them as the user scrolls. */
    html body main#main-content,
    html body main.main-content,
    html body section#main {
      padding-top: 0;
    }

    /* Keep initial content below the chip stack so first card isn't hidden. */
    html body .dashboard-view,
    /* iter12i: views start at y=0 (no safe-area-inset-top padding) so
  content scrolls UP under the iOS status bar zone (clock/battery)
  and ends at the true screen edge. The padding-top reserves only
  enough space for the floating chip row at the top, NOT for the
  status bar itself. The status bar zone is filled by body's solid
  var(--ask-bg, #191A1A) so it reads as one continuous edge-to-edge surface. */
    html body .dashboard-view,
    html body .settings-view,
    html body .reports-view,
    html body .automations-view,
    html body .gl-divisions-view,
    html body .gl-dash-pack-view,
    html body .connectors-view,
    html body .chats-view,
    html body .division-view,

    html body .route-view,
    html body .ai-view {

      padding-top: calc(56px + env(safe-area-inset-top, 0px));
      padding-left: 12px;
      padding-right: 12px;
    }

    /* The header row holds the close X - make sure it sits ABOVE the modal
  body's scroll content and is always visible at the top. */
    html body .rsm-hdr {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--bg-card);
      padding-top: 16px;
      padding-bottom: 14px;
    }

    html body .rsm-close svg {
      width: 22px;
      height: 22px;
    }

    /* ───── KEBAB MENU (popup anchored to kebab chip) ─────
  Absolutely positioned so it doesn't take flex layout space.
  Hidden by default; .is-open shows it. */
    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-menu {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 60px);
      right: 14px;
      left: auto;
      bottom: auto;
      min-width: 220px;
      max-width: calc(100vw - 28px);
      width: max-content;
      padding: 6px;
      margin: 0;
      border-radius: 16px;
      background: rgba(22, 24, 26, 0.96);
      background-color: rgba(22, 24, 26, 0.96);
      background-image: none;
      border: 1px solid var(--overlay-w-08);
      box-shadow: 0 12px 40px var(--shadow-alpha-55), 0 2px 0 var(--overlay-w-03) inset;
      backdrop-filter: blur(20px) saturate(150%);
      -webkit-backdrop-filter: blur(20px) saturate(150%);
      transform-origin: top right;
      opacity: 0;
      transform: scale(0.96) translateY(-6px);
      pointer-events: none;
      transition: opacity 160ms ease, transform 160ms ease;
      z-index: 200;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-menu.is-open {
      opacity: 1;
      transform: scale(1) translateY(0);
      pointer-events: auto;
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-menu-item {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 10px 12px;
      border: 0;
      background: transparent;
      background-color: transparent;
      background-image: none;
      color: rgba(232, 234, 237, 0.95);
      text-align: left;
      text-decoration: none;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.2;
      border-radius: 10px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      -webkit-appearance: none;
      appearance: none;
      transition: background-color 140ms ease;
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-menu-item:hover,
    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-menu-item:active {
      background: var(--border-soft);
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-menu-item > svg {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      color: rgba(230, 232, 235, 0.82);
      fill: none;
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-menu-item > span {
      flex: 1 1 auto;
      color: inherit;
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-menu-sep {
      height: 1px;
      width: auto;
      margin: 6px 8px;
      padding: 0;
      background: var(--overlay-w-08);
      border: 0;
    }

    /* iter12k: Single scroll source = HTML. Body is overflow:visible so the
  window/html is the only scroller - required for Comet/Mobile-Safari
  URL-bar auto-collapse. overscroll-behavior:contain stops the bounce
  that was making the fixed composer rubber-band on overscroll. */
    html:not(#__never2__) {
      height: auto;
      max-height: none;
      min-height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      overscroll-behavior-x: contain;
      background: var(--surface-charcoal-deep);
      background-color: var(--surface-charcoal-deep);
      margin: 0;
      padding: 0;
    }

    html:not(#__never2__) body:not(#__never2__) {
      height: auto;
      max-height: none;
      min-height: 100dvh;
      overflow: visible;
      overflow-x: visible;
      overflow-y: visible;
      overscroll-behavior-y: contain;
      overscroll-behavior-x: contain;
      background: var(--surface-charcoal-deep);
      background-color: var(--surface-charcoal-deep);
      margin: 0;
      padding: 0;
      max-width: 100vw;
    }

    /* main / main-content: NO position:fixed, NO internal scroll lock.
  Content scrolls on the document. Pad top so chip strip clears. */
    html body section#main,
    html body section#main.main,
    html body main#main-content,
    html body main.main-content,
    html body #main-content {
      position: static;
      inset: auto;
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      min-height: auto;
      width: 100%;
      overflow: visible;
      overflow-x: hidden;
      -webkit-mask-image: none;
      mask-image: none;
      transform: none;
      will-change: auto;
      filter: none;
      /* iter12f audit: padding-top/bottom moved to per-view rule below.
  Outer scroll container has zero padding so content extends to
  viewport edges; inner view containers handle chip-clearance. */
      padding-top: 0;
      padding-bottom: 0;
      padding-left: env(safe-area-inset-left, 0);
      padding-right: env(safe-area-inset-right, 0);
      background: transparent;
      background-color: transparent;
      background-image: none;
    }

    /* ── 1) EDGE-TO-EDGE STATUS-BAR FIX (iter12h) ──────────────────
  RESEARCH (Ben Frain, 1ar.io, r/webdev iOS 26 thread):
  - iOS 26 Safari/Comet IGNORES the theme-color meta tag.
  - It samples background-color + backdrop-filter from FIXED elements
  within ~4px of the viewport edge (width >= 80%, height >= 3px).
  - It does NOT sample position:absolute children of fixed elements,
  NOR pseudo-elements, NOR non-fixed flow content.
  - With NO sampled fixed element near the top, Safari falls back to
  sampling the BODY background.
  iter12g BUG: nav had background rgba(25,26,26,0.55) + backdrop-filter,
  so Safari sampled the nav and tinted the status-bar zone with a
  darker glass color than the body (var(--ask-bg, #191A1A)) below it. Result: visible
  two-tone band exactly where the user reported it.
  iter12h FIX: nav = fully transparent, NO backdrop-filter on the nav.
  Body stays solid var(--ask-bg, #191A1A) so Safari falls through to body and tints
  the status-bar zone the SAME shade as the rest of the page. The
  individual chips keep their own glass (they're small, not edge-
  spanning, so they're not sampled as the dominant fixed element). */
    html body nav.mobile-topnav.mobile-topnav--v1940 {
      background: transparent;
      background-color: transparent;
      background-image: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 0;
      box-shadow: none;
      pointer-events: none;
    }

    /* Chips themselves accept taps */
    html body nav.mobile-topnav.mobile-topnav--v1940 > * {
      pointer-events: auto;
    }

    /* ── 3) Closed kebab menu - fully hidden, no paint bleed ────── */
    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-menu:not(.is-open) {
      display: none;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }

    /* iter12f: Single bottom-trim rule for all routed views.
  Removed dead duplicate that re-asserted padding-top:0 on inner
  main (now handled at the outer iter11 padding-top:0 rule).
  Bottom = safe-area only (no extra 7rem/64px dead footer zone).
  Comet's totaly.ai pill sits in iOS safe-area-bottom which is
  already accounted for here. */
    html body main#main-content,
    html body main.main-content,
    html body section#main {
      padding-bottom: 0;
    }

    html body .dashboard-view,
    html body .settings-view,
    html body .reports-view,
    html body .automations-view,
    html body .gl-divisions-view,
    html body .gl-dash-pack-view,
    html body .connectors-view {
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    }

    /* iter12h: BOTTOM STRAND FIX (ROOT CAUSE) ────────────────────
  iter12g WRONG approach: forced composer-wrap bg var(--ask-bg, #191A1A) and added
  a body::after fixed shim. Both are fixed/sticky elements within
  the bottom-edge sample zone, so iOS 26 Safari/Comet sampled their
  var(--ask-bg, #191A1A) background and used it to tint the bottom toolbar zone.
  But the .rich-composer card sitting INSIDE the wrap was #2a2b2c
  (or transparent with a different alpha), so a visible step appeared
  at the wrap's edge - exactly the "black strand" the user described.

  iter12h CORRECT approach: composer-wrap = TRANSPARENT. The .rich-
  composer card is the ONLY visible element. Body's solid var(--ask-bg, #191A1A)
  fills everything below/around it, and Safari samples body for the
  bottom toolbar tint - no two-tone seam. Additionally, the body::after
  fixed shim is REMOVED because as a fixed bottom-edge element, it
  was being sampled and competing with the composer wrap. */
    html body .ai-composer-wrap,
    html body.route-ask .ai-composer-wrap,
    html body.route-ask:not(.ai-has-messages) .ai-composer-wrap,
    html body.route-ask.ai-has-messages .ai-composer-wrap {
      background: transparent;
      background-color: transparent;
      background-image: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: none;
      border: 0;
    }

    /* iter12h: body::after shim REMOVED. It was a fixed bottom element
  near the edge - iOS 26 sampled it and competed with the composer
  wrap for the bottom-toolbar tint. With both wrap AND body::after
  transparent (and body solid var(--ask-bg, #191A1A)), Safari samples body cleanly
  and the bottom toolbar tints to match the page. */
    html body::after {
      content: none;
      display: none;
    }

    /* ── iter12i: SINGLE PAGE SCROLL (chat-style sites pattern) ──
  User feedback: scroll feels weird on chat. Cause: .ai-messages
  had its own overflow-y:auto + max-height creating a nested scroll
  container inside the page (which itself can also scroll). On iOS
  this produces janky momentum, and content shifts during URL-bar
  collapse. Fix: kill the inner scroll on mobile so the document
  root is the ONLY scroll surface (matches ChatGPT, Perplexity,
  Claude.ai mobile patterns). */
    html body .ai-view .ai-messages,
    html body body.ai-has-messages .ai-view .ai-messages,
    html body.ai-has-messages .ai-view .ai-messages {
      max-height: none;
      height: auto;
      overflow-y: visible;
      overflow-x: visible;
      -webkit-overflow-scrolling: auto;
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active {
      font-weight: 600;
    }

    /* Hidden SVG icons (text-only switch) - keep them hidden cleanly */
    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt .mt-switch-ico {
      display: none;
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip .mt-avatar-ring {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-hover-soft-18);
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip .mt-avatar-fallback {
      font-size: 12px;
      font-weight: 600;
      color: var(--fg-inverse-strong);
      letter-spacing: 0.02em;
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-ring.is-fallback .mt-avatar-img {
      display: none;
    }

    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip .mt-avatar-ring,
    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip .mt-avatar-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }

  /* [from style.css L39580-L39861] */


      /* Document scroll headroom - Comet collapses bottom toolbar only when
  real scroll headroom exists. 1px wasn't enough; 200px is plenty.   */
      html body {
        min-height: 100dvh;
      }

      /* iter12j: Window-level scroll (Perplexity pattern). Comet/Mobile-Safari
  collapse the URL bar and bottom toolbar ONLY when the WINDOW is the
  scroll container, not body. Base CSS gives body `height: 100%` which
  locks body height to viewport and turns body into the scroller -
  Comet's auto-collapse heuristic never fires.
  Fix: html owns the scroll (height auto, overflow-y auto). Body has
  height auto and NO overflow-x:hidden (the spec promotes the other
  axis to auto when one is non-visible, which would re-trap scroll on
  body). Horizontal overflow control happens on html only. */
        html body {
        height: auto;
        overflow: visible;
        overflow-x: visible;
        overflow-y: visible;
        max-width: 100vw;
      }

      /* ───── NAV STRIP ─────
  iter12g: Glass strip across the status-bar zone so content blurs
  under it instead of showing flat var(--ask-bg, #191A1A) behind the clock/battery.
  Translucent fill + backdrop-filter = the same glass treatment the
  individual chips already use, applied to the full strip width so
  the iOS status-bar zone reads as one continuous glass surface. */
      html body nav.mobile-topnav.mobile-topnav--v1940 {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 120;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        margin: 0;
        padding-top: max(10px, calc(env(safe-area-inset-top, 0px) + 8px));
        padding-right: 16px;
        padding-bottom: 10px;
        padding-left: 16px;
        /* iter12h: transparent nav + no backdrop-filter so iOS 26 Safari/Comet
  falls through to body's var(--surface-charcoal-deep) and tints the status-bar zone the
  same shade as the page (no two-tone band). */
        background: transparent;
        background-color: transparent;
        background-image: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 0;
        border-top: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
        pointer-events: none;
      }
      /* ───── KEBAB (right) ─────
  44x44 perfect circle, 3 dots centered. */
      html body nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip {
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        max-width: 44px;
        max-height: 44px;
        aspect-ratio: 1 / 1;
        flex: 0 0 44px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        background: rgba(20, 20, 28, 0.55);
        background-color: rgba(20, 20, 28, 0.55);
        background-image: none;
        border: 1px solid var(--border-overlay-10);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);

        color: var(--fg-muted-alpha);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 180ms ease;
      }
      /* ───── SWITCH PILL (center) ─────
  Container: 52 tall, auto width, glass background, 4px inner padding.
  Inner segments: 44 tall (52 - 4 - 4), centered text, 18px horiz padding.
  - updated: inner buttons increased to 44px to meet WCAG 2.5.5 tap target. */
      html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch {
        box-sizing: border-box;
        width: auto;
        min-width: 0;
        max-width: none;
        height: 52px;
        min-height: 52px;
        max-height: 52px;
        flex: 0 1 auto;
        margin: 0 auto;
        padding: 4px;
        border-radius: 999px;

        background: transparent;
        background-color: transparent;
        background-image: none;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        overflow: visible;
      }

      /* Each pill segment - text-only ("Chat" or "Dashboards") via ::after */
      html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt {
        box-sizing: border-box;
        width: auto;
        min-width: 0;
        max-width: none;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        flex: 0 0 auto;
        margin: 0;
        padding: 0 14px;
        border-radius: 999px;
        background: transparent;
        background-color: transparent;
        background-image: none;
        border: 0;
        box-shadow: none;
        color: rgba(255, 255, 255, 0.72);
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
        font-size: 14px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        line-height: 1;               /* flex centering handles vertical alignment */
        letter-spacing: 0.005em;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        cursor: pointer;
        outline: 0;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
        transition: background-color 180ms ease, color 180ms ease, box-shadow 220ms ease;
      }
    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[data-view="dashboards"]::after {
        content: "Dashboards";
        display: inline-block;
        height: 44px;
        line-height: 44px;
        font: inherit;
        color: inherit;
        letter-spacing: inherit;
        text-align: center;
        vertical-align: middle;
        pointer-events: none;
      }
    html body .rsm {
        top: calc(env(safe-area-inset-top, 0px) + 78px);
        left: 12px;
        right: 12px;
        bottom: 12px;
        transform: none;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - 90px - env(safe-area-inset-top, 0px));
        animation: rsm-pop-mobile 160ms ease;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
      }
      /* Bump the close X so the tap target is BIG and obvious on mobile. */
      html body .rsm-close {
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }
    /* iter12j: Document root scroll surface. HTML owns scroll, NOT body.
  Body has overflow:visible so the window/html is the single scroller
  - required for Comet/Mobile-Safari URL-bar auto-collapse on scroll. */
      html {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        height: auto;
        min-height: 100%;
      }

      /* Belt-and-suspenders: when src failed (naturalWidth=0) keep it hidden.
  We can't query naturalWidth in CSS, so we hide by inline only above. */

      /* 2) Switch: clean 36px capsule */
      html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch {
        height: 36px;
        min-height: 36px;
        padding: 3px;
        border-radius: 999px;
        flex: 0 1 auto;
        max-width: 220px;
      }
      /* 3) Avatar + kebab chips to 36px for visual harmony */
      html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip,
      html body nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        border-radius: 50%;
        background: var(--overlay-w-05);
        border: 1px solid var(--border-overlay-10);
        overflow: hidden;
      }
    html body nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip svg,
      html body nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip {

        color: var(--fg-muted-alpha);
      }

      /* Topnav itself: trim height from 72 to 60 */
      html body nav.mobile-topnav.mobile-topnav--v1940 {
        height: 60px;
        padding: 12px 14px;
        gap: 10px;
      }

      html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[data-view="ai"]::after,
      html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[data-view="dashboards"]::after {
        height: 30px;
        line-height: 30px;
        display: inline-flex;
        align-items: center;
        font-size: 13px;
        font-weight: 500;
      }

      html body nav.mobile-topnav.mobile-topnav--v1940 {
        top: max(56px, calc(env(safe-area-inset-top, 0px) + 8px)) !important;
        padding-top: 12px !important;
      }

      html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip,
      html body nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
        aspect-ratio: 1 / 1;
        flex: 0 0 40px;
        border-radius: 50%;
        padding: 0;
        overflow: hidden;
      }

}

@media (max-width: 768px) {

  /* [from style.css L27337-L27497] */

  /* 1. Long, soft fade behind topnav - no visible cut line.
  Position: fixed band at top, taller than the topnav, with a smooth
  gradient that starts solid at the top and trails off slowly. */
  body::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 160px !important;
    z-index: 119 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(25, 26, 26, 1.00) 0%,
      rgba(25, 26, 26, 0.96) 28%,
      rgba(25, 26, 26, 0.80) 52%,
      rgba(25, 26, 26, 0.50) 72%,
      rgba(25, 26, 26, 0.22) 88%,
      rgba(25, 26, 26, 0.00) 100%
    ) !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%) !important;
  }

  /* 2. Mobile topnav - make container transparent so the fade shows through,
  remove visible borders/strip. Chips themselves provide their own pill bg. */
  html body nav.mobile-topnav.mobile-topnav--v1940 {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 121 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 10px !important;
  }

  /* 3. Break the mt-switch container apart - make it a transparent flex row
  with a real gap between Chat and Views chips. Each opt becomes its own
  pill chip. */
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    gap: 8px !important;
    margin: 0 auto !important;
  }

  /* 4. Each chip (Chat, Views) is its own pill - fully self-contained */
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: rgba(20, 20, 28, 0.65) !important;
    background-color: rgba(20, 20, 28, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
  }
  /* 6. Active state for the standalone chip - blue fill, white text */
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active,
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"] {
    background: #2196F3 !important;
    background-color: #2196F3 !important;
    border-color: #2196F3 !important;
    color: #FFF !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  }

  /* 7. Mobile Views dropdown - Apple-style native selector menu */
  .mt-views-menu {
    position: fixed !important;
    top: 70px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-8px) !important;
    z-index: 200 !important;
    min-width: 240px !important;
    background: rgba(31, 33, 33, 0.98) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid var(--overlay-w-12) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.50) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 180ms ease, transform 180ms ease !important;
  }
  .mt-views-menu.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }
  .mt-views-menu-section {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--fg-faint) !important;
    padding: 8px 12px 6px !important;
  }
  .mt-views-menu-divider {
    height: 1px !important;
    background: var(--border-soft) !important;
    margin: 6px 4px !important;
  }
  .mt-views-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    color: var(--border-card-light) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 120ms ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .mt-views-menu-item:active {
    background: var(--accent-primary-soft-18) !important;
  }
  .mt-views-menu-item.is-active {
    background: var(--accent-primary-soft-18) !important;
    color: var(--fg-inverse) !important;
  }
  .mt-views-menu-item-icon {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--fg-muted-warm) !important;
    font-size: 16px !important;
  }

  .mt-views-menu-item-icon svg {
    display: block !important;
    flex-shrink: 0 !important;
    fill: none !important;
  }
  .mt-views-menu-item.is-active .mt-views-menu-item-icon {
    color: var(--fg-inverse) !important;
  }

  /* [from style.css L30561-L30586] */

  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch:not(#__never__) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-width: 0 !important;
    outline: none !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.is-active:not(#__never__),
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"]:not(#__never__) {
    background: rgba(33, 150, 243, 0.15) !important;
    background-color: rgba(33, 150, 243, 0.15) !important;
    background-image: none !important;
    border: 1px solid rgba(33, 150, 243, 0.35) !important;
    border-width: 1px !important;
    outline: none !important;
    box-shadow: none !important;
    color: #2196F3 !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
  }

}

/* ============================================================
 * SECTION 4c: AI-VIEW (consolidated Ask view internals)
 * v41.58h consolidation - 6 scattered blocks -> 3 breakpoints.
 * Preserves original rules 1:1. Original locations in inline comments.
 * ============================================================ */


@media (max-width: 700px) {

  /* [from style.css L9395-L9398] */

  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-unit   { font-size: 11px !important; }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker { font-size: 12px !important; }

}

@media (max-width: 768px) {

  /* [from style.css L4721-L5122] */


  .report-cards, .gl-divisions-grid { grid-template-columns: 1fr !important; padding: 4px 12px !important; }
  .report-cards .report-card, .gl-divisions-grid .gl-division-card { width: 100%; min-width: 0; max-width: 100%; }

  .report-cards, .gl-divisions-grid { flex-direction: column; flex-wrap: nowrap; }
  .report-cards .report-card, .gl-divisions-grid .gl-division-card { flex: 1 1 auto; width: 100%; min-width: 0; max-width: 100%; }

  /* v41.58h fix: topbar was previously rendering visible on mobile (44px height)
     because the source style.css copy at L4729 was in a section the browser
     silently skipped due to earlier parse errors. Consolidating exposed it and
     broke user-facing layout (pushed dashboard-view content up 44px, causing
     KPI overlap with fixed mobile-topnav). Comment out to restore v41.58g visual.
  header.topbar, .topbar.topbar--with-pill, .topbar.topbar--no-header { display: none; }

  .topbar-right, .topbar-left { display: none; }
  */

  body.is-auth-page .auth-view, body.is-auth-page .auth-view--glass { min-height: 100dvh; padding: 0; padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); display: flex; align-items: stretch; justify-content: stretch; background: #000; }

  body.is-auth-page .auth-card, body.is-auth-page .auth-card--glass {
    width: 100%;
    min-height: 100%;
    flex: 1 1 auto;
    margin: 0;
    padding: 32px 22px !important;
    padding-top: max(32px, env(safe-area-inset-top));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    border-radius: 0;
    border: 0;
    background: #000 !important;
    background-color: #000;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
  }

  body.is-auth-page .auth-card--glass > *, body.is-auth-page .auth-card > * { width: 100%; max-width: 380px; margin-left: auto; margin-right: auto; }

  body.is-auth-page .auth-logo--favicon { margin-top: 0; margin-bottom: 18px; }

  body.is-auth-page, body.is-auth-page main#main-content, body.is-auth-page .main-content { background: #000 !important; background-color: #000 !important; }

  body.is-auth-page aside.sidebar, body.is-auth-page #sidebar { display: none; }

  body.is-auth-page main#main-content, body.is-auth-page .main-content { padding-top: 0; margin-top: 0; }
  /* iter12d audit: removed competing #0b0c0d paints - body/main/ai-view
  are painted var(--ask-bg, #191A1A) by the canonical rule below at ~line 4784. */

  .ai-view.ai-home { display: flex; flex-direction: column; min-height: 100dvh; height: 100dvh; padding: 0; gap: 0; position: relative; }

  html body .ai-view .ai-hero          { order: 1; flex: 0 0 auto; }
  html body .ai-view .home-launcher    { order: 3; flex: 0 0 auto; }
  html body .ai-view .ai-composer-wrap { order: 4; flex: 0 0 auto; }

  .ai-view .home-launcher .home-dash-grid { display: none; }

  .ai-view .home-launcher { padding: 8px 0 10px; margin: 0; border-top: 1px solid var(--overlay-w-04); }
  .ai-view .home-tabs-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 14px 4px;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  html body .ai-view .home-tabs-row::-webkit-scrollbar { display: none; }

  .ai-view .home-tab {
    flex: 0 0 auto !important;
    white-space: nowrap;
    padding: 9px 14px !important;
    border-radius: 999px;
    background: var(--overlay-w-05) !important;
    border: 1px solid var(--overlay-w-08) !important;
    color: var(--fg-primary-cream) !important;
    font-size: 13px !important;
    font-weight: 540 !important;
    display: inline-flex;
    align-items: center !important;
    gap: 6px !important;
    scroll-snap-align: start;
  }
  .ai-view .home-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-blue-pure); flex: 0 0 auto; }
  .ai-view .home-tab:active { background: rgba(255,255,255,0.09); }

  html body .ai-view .ai-composer-wrap { margin: 0; }
  .ai-view .ai-composer-wrap .rich-composer { margin: 0; border-radius: 18px; }

  html body .rich-composer.rc-typing .rc-toolbar { padding-top: 4px; padding-bottom: 4px; }
  html body .rich-composer.rc-typing .rc-left, html body .rich-composer.rc-typing .rc-right { gap: 8px; }

  html body .rich-composer .rc-attachments:empty { display: none; }

  html body .rich-composer.rc-typing .rc-toolbar { justify-content: space-between; }

  .rich-composer.rc-typing .rc-left { overflow: hidden; min-width: 0; }
  html body section#main .rich-composer .rc-toolbar, html body .rich-composer .rc-toolbar { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; row-gap: 0; gap: 8px; padding: 8px 10px; width: 100%; }
  html body section#main .rich-composer .rc-left, html body .rich-composer .rc-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }
  section#main .rich-composer .rc-left::-webkit-scrollbar,
  html body .rich-composer .rc-left::-webkit-scrollbar { display: none; }
  html body section#main .rich-composer .rc-right, html body .rich-composer .rc-right { flex: 0 0 auto; margin-left: 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; }
  html body section#main .rich-composer .rc-chip, html body .rich-composer .rc-chip { flex: 0 0 auto; white-space: nowrap; }

  html body .rich-composer .rc-chip { padding: 6px 10px; font-size: 12.5px; }

  .rich-composer .rc-model { flex: 0 0 auto; }
  html body .rich-composer .rc-model-select { max-width: 110px; }

  #floating-chat { display: none; }

  /* iter12d audit: REMOVED two top-fade pseudos:
  1) .ai-view.ai-home::before - 76px sticky gradient using #0b0c0d
  (already had display:none but still parsed; also wrong color)
  2) body.ai-scroll-fade-on::after - 86px fixed gradient at top
  using --ask-bg fallback #0b0c0d. This was the MOVING STRAND
  the user saw behind the totaly logo: it engaged on scroll
  (ai-scroll-fade-on class toggles), and its color (#0b0c0d)
  differs from body (var(--ask-bg, #191A1A)), creating a visible band that
  appeared/disappeared as content scrolled.
  User wants ONE color: no top fade, no scroll-triggered band. */

  /* iter12d audit: removed duplicate var(--ask-bg) paint of body/main
  - now handled by the single :where() rule at ~line 4784. */

  /* v41.40 tombstone: the old fixed-to-floor rule for .ai-composer-wrap
     used to live here. It fought the v41.39 tail rules and pinned the
     composer to the bottom-left. Removed. New behavior is defined in
     the v41.38+ tail block near end of file. */

  /* v41.40 tombstone: earlier .rich-composer look. Removed so v41.39
     rounded pill wins without a fight. */

  html body .ai-view .rich-composer .rc-textarea { background: transparent; border: 0; padding: 4px 2px; min-height: 26px; font-size: 15px; color: #F3F2EF; box-shadow: none; }
  .ai-view .rich-composer .rc-textarea::placeholder { color: #6B6F70; }

  .ai-view.ai-home { height: 100dvh !important; min-height: 100dvh !important; padding-bottom: 80px; box-sizing: border-box; }
  .ai-view .home-launcher {
    position: fixed !important;
    left: 0;
    right: 0;

    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 4 !important;
    background: transparent;
    padding: 6px 0 8px !important;
    border-top: 0;
  }

  .ai-view .rich-composer .rc-toolbar { padding: 8px 2px 2px; margin: 0; gap: 6px; border: 0; }
  .ai-view .rich-composer .rc-chip { padding: 5px 10px; font-size: 12px; border-radius: 999px; background: transparent; border: 1px solid var(--border-overlay-10); color: var(--fg-muted-warm-light); }
  html body .ai-view .rich-composer .rc-chip svg { color: #9A9D9E; }
  .ai-view .rich-composer .rc-icon-btn, .ai-view .rich-composer .rc-send {
    width: 32px !important;
    height: 32px !important;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--border-overlay-10) !important;
    background: transparent;
    color: var(--fg-primary-cream) !important;
    flex: 0 0 32px !important;
  }
  html body .ai-view .rich-composer .rc-send { background: rgba(255, 255, 255, 0.92); color: #0b0c0d; border: 0; }

  .ai-view .ai-hero { padding-top: 90px !important; padding-bottom: 14px !important; }
  .ai-view .ai-hero-card { background: transparent; border: 0; box-shadow: none; }

  html body .floating-chat, html body .floating-chat-toggle { display: none; }

  .ai-view .ai-messages { padding-top: 90px !important; padding-bottom: 20px !important; }

  /* v41.41: --ask-surface removed (no consumers after v41.40 tombstones). */
  :root { --ask-bg:         var(--ask-bg, #191A1A); --ask-border:     #3C3A38;  --ask-text:       #D6D8DE;    }

  :where(html, body, html body section#main.main, html body .ai-view, body, section#main.main, .ai-view, .ai-home, .ai-view .ai-messages, .ai-view .ai-composer-wrap, .ai-view .home-launcher) { background: var(--surface-charcoal-deep); background-color: var(--surface-charcoal-deep); background-image: none; }
  html body { --ask-bg: var(--ask-bg, #191A1A) !important; --color-bg: var(--ask-bg, #191A1A) !important; --bg: var(--ask-bg, #191A1A) !important; }

  .ai-view .home-launcher { background: transparent; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* v41.40 tombstone: the old rule that zeroed .ai-composer-wrap
     border/box-shadow/border-radius used to live here. Removed so the
     v41.39 rounded pill visual on .rich-composer is not fought. */

  /* v41.40 tombstone: the old .rich-composer surface rule (ask-surface
     bg, dark border, 18px radius, no glow) used to live here. Removed
     so the v41.39 blue-bordered rounded pill visual applies cleanly. */

  /* v41.40 tombstone: this rule flipped .rich-composer border-color to
     dark #3C3A38 on focus, killing the v41.39 blue border. Removed. */
  .ai-view .rich-composer:focus-within .rc-textarea, .rich-composer:focus-within .rc-textarea { outline: 0; box-shadow: none; }
  html body .ai-view .rich-composer .rc-textarea { background: transparent; color: var(--ask-text); border: 0; outline: 0; box-shadow: none; }

  .ai-view .rich-composer .rc-chip[data-chip="data"], .ai-view .rich-composer .rc-chip[data-chip="computer"], .rich-composer .rc-chip[data-chip="data"], .rich-composer .rc-chip[data-chip="computer"] { display: none; }

  html body section#main .rich-composer .rc-left, html body .rich-composer .rc-left { overflow-x: hidden; overflow-y: hidden; flex: 1 1 auto; min-width: 0; }

  .ai-view .rich-composer .rc-chip[data-chip="web"] { background: transparent; border: 1px solid var(--ask-border); color: var(--ask-text); padding: 6px 12px; font-size: 13px; border-radius: 999px; }

  .ai-view .rich-composer .rc-model { gap: 4px; border: 1px solid var(--ask-border); background: transparent; padding: 4px 8px 4px 10px; border-radius: 999px; }
  .ai-view .rich-composer .rc-model-select { background: transparent; border: 0; padding: 0; color: var(--ask-text); font-size: 13px; max-width: 90px; }

  /* mob-tap-fix: upgraded from 28px to 44px to meet WCAG 2.5.8 / Apple HIG
  44pt minimum touch target requirement. Fixes mobile Ask score (was 45).
  Actual visual size stays as inner circle - padding absorbs the extra area. */
  .ai-view .rich-composer .rc-icon-btn, .rich-composer .rc-icon-btn, .ai-view .rich-composer .rc-plus-btn, .rich-composer .rc-plus-btn, .ai-view .rich-composer .rc-mic, .rich-composer .rc-mic {
    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;
    padding: 0;
    border: 1px solid var(--ask-border) !important;
    background: transparent;
    color: var(--ask-text) !important;
    border-radius: 50%;
    box-shadow: none;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
  }
  .rich-composer .rc-icon-btn svg, .rich-composer .rc-plus-btn svg, .rich-composer .rc-mic svg { width: 18px; height: 18px; }
  html body .ai-view .rich-composer .rc-send svg, html body .rich-composer .rc-send svg { width: 18px; height: 18px; }

  .ai-view .rich-composer .rc-send, .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;
    padding: 0;
    background: #2A2C2C !important;
    color: var(--ask-text) !important;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
  }

  .rich-composer.rc-typing .rc-chip, .rich-composer.rc-typing .rc-model, .rich-composer.rc-typing .rc-mic {
    display: none;
  }

  .ai-view .ai-bg-mark { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(82vw, 340px); aspect-ratio: 760 / 193; pointer-events: none; z-index: 1; opacity: 1; }

  .ai-view .ai-bg-mark .ai-bg-mark__shimmer {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      105deg,
      transparent 0%,
      transparent 38%,
      rgba(199, 228, 255, 0.0)  42%,
      rgba(199, 228, 255, 0.55) 48%,
      rgba(255, 255, 255, 0.75) 50%,
      rgba(199, 228, 255, 0.55) 52%,
      rgba(199, 228, 255, 0.0)  58%,
      transparent 62%,
      transparent 100%
    );
    background-size: 240% 100%;
    background-position: 180% 0%;

    -webkit-mask-image: url('/static/brand-totaly/logo-totaly-beaded-wordmark.png?v=v42.6.28-p-mark');
            mask-image: url('/static/brand-totaly/logo-totaly-beaded-wordmark.png?v=v42.6.28-p-mark');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center center;
            mask-position: center center;
    -webkit-mask-size: contain;
            mask-size: contain;
    animation: bgmark-shimmer-once 2.6s cubic-bezier(.4,.0,.2,1) 0.45s 1 forwards;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .ai-view .ai-hero, .ai-view #ai-hero, .ai-view .ai-hero-card, .ai-view #ai-hero-canvas { display: none; }

  section#main .ai-view .home-launcher, .ai-view .home-launcher {
    display: flex;
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: calc(134px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 4 !important;
    background: transparent;
    border: 0;
    padding: 4px 10px !important;
    gap: 6px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
  }
  html body .ai-view .home-launcher::-webkit-scrollbar { display: none; }

  .ai-view .home-launcher .home-tab, .ai-view .home-tab, a.home-tab {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 12px;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 500;
    background: var(--bg-card) !important;
    border: 1px solid var(--overlay-w-08) !important;
    color: rgba(214, 216, 222, 0.92) !important;
    border-radius: 999px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center !important;
  }
  .ai-view .home-tab .home-tab-dot { width: 5px; height: 5px; }

  body.ai-has-messages .ai-view .ai-messages { display: flex; flex-direction: column; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 52px) 14px 172px; overflow-y: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; min-height: 100dvh; background: var(--ask-bg); }

  body.ai-has-messages .ai-view .ai-bg-mark { display: none; }

  body.ai-has-messages .ai-view .home-launcher { display: none; }

  /* iter11: scroll-trap rules removed - document-root scroll is asserted in the iter11 block at EOF */

  .ai-view .ai-messages { max-height: calc(100dvh - 260px); overflow-y: auto; -webkit-overflow-scrolling: touch; }

  section#main .ai-view .ai-composer-wrap, .ai-view .ai-composer-wrap { position: fixed; left: 0; right: 0; bottom: 0; top: auto; margin: 0; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 5; }

  section#main .ai-view .home-launcher, .ai-view .home-launcher { bottom: calc(189px + env(safe-area-inset-bottom, 0px)) !important; padding: 2px 10px !important; }
  /* iter12d audit: REMOVED - these rules created the visible strands:
  1) body.route-ask::after = 4px fixed #1c1c1e bar at bottom (BOTTOM STRAND)
  2) body.route-ask .ai-view::before = 64px gradient at top (MOVING TOP BAND)
  3) #1c1c1e and #2a2b2c paints fighting var(--ask-bg, #191A1A) canonical color
  4) html body.route-ask { --ask-bg: #1c1c1e } (overrode root token)
  The user wants ONE color: var(--ask-bg, #191A1A) everywhere, no header band, no
  bottom bar. Composer/messages inherit body color via :where() rule. */

  body.route-ask .ai-composer-wrap { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important; }

  #floating-chat,

  body.route-ask.ai-has-messages .ai-messages { padding-left: 12px !important; padding-right: 12px !important; }

  /* Let the message column scroll freely under the top chrome. Avoid
  double-scroll: page is the scroller, feed is content. */
  body.route-ask.ai-has-messages .ai-view { overflow: visible; }

  .topbar #imsg-pill,
  .topbar #brain-pill { display: none; }

  #gl-floating-pill { transition: transform 220ms ease, opacity 220ms ease; will-change: transform, opacity; }
  #gl-floating-pill[data-mobile-hidden="1"] { transform: translateY(-120%); opacity: 0; pointer-events: none; }

            .home-dash-card .home-dash-week-bars { width: 78px; height: 28px; flex: 0 0 auto; }
  .home-dash-card .home-dash-week-bars .kpi-week-svg { width: 100%; height: 100%; display: block; }

    .home-dash-card .home-dash-week-bars { width: 168px; height: 56px; }

  .home-dash-card .home-dash-week-bars--full { width: 100%; height: 88px; margin-top: 0.4rem; }
  .home-dash-card .home-dash-week-bars--full .kpi-week-svg { width: 100%; height: 100%; display: block; }
  .home-dash-card .home-dash-kpi { align-items: baseline; flex-wrap: wrap; gap: 0.4rem; }

  .home-dash-card .home-dash-week-bars--full { height: 100px; }

  .home-dash-grid .home-dash-bucket-chip {
    color: var(--surface-charcoal-deep);
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(15,23,42,0.10);
    border-radius: 12px;
    padding: 0.5rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  .home-dash-grid .home-dash-bucket-eyebrow { color: var(--surface-charcoal-deep); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; }
  .home-dash-grid .home-dash-bucket-value { color: var(--surface-charcoal-deep); font-size: 1.5rem; font-weight: 800; }
  .home-dash-grid .home-dash-bucket-unit { color: var(--surface-charcoal-deep); opacity: 0.55; font-size: 0.65rem; }
  .home-dash-grid .home-dash-bucket-chip.is-up   .home-dash-bucket-value { color: var(--status-success-deep); }
  .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-value { color: var(--status-danger); }

  /* [from style.css L13571-L13712] */


  /* FIX 1: Unify Web chip + Model chip on mobile.
  Both 32px height, 16px radius, 6px 12px pad, 13px/500, 14px icons, 6px gap.
  Glass dark: bg rgba(255,255,255,0.08), border rgba(255,255,255,0.12).
  Text rgba(255,255,255,0.92), icon #4B9FE8. */
  html body .ai-view .rich-composer .rc-chip[data-chip="web"], html body .rich-composer .rc-chip[data-chip="web"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 6px 12px;
    gap: 6px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    white-space: nowrap;
  }
  html body .ai-view .rich-composer .rc-chip[data-chip="web"] svg, html body .rich-composer .rc-chip[data-chip="web"] svg {
    width: 14px;
    height: 14px;
    color: #4B9FE8;
    stroke: #4B9FE8;
    flex: 0 0 auto;
    opacity: 1;
  }
    /* Hide chevron caret on idle (tap chip itself opens sheet). */

  html body .ai-view .rich-composer .rc-chip[data-chip="web"].rc-chip--active,
  html body .rich-composer .rc-chip[data-chip="web"].rc-chip--active {
    background: rgba(33, 150, 243, 0.15);
    border-color: rgba(33, 150, 243, 0.35);
    color: #2196F3;
  }
  html body .ai-view .rich-composer .rc-chip[data-chip="web"].rc-chip--active svg,
  html body .rich-composer .rc-chip[data-chip="web"].rc-chip--active svg {
    color: #2196F3;
    stroke: #2196F3;
  }
  /* Vertical centering with round +/mic/send buttons. */
  html body .rich-composer .rc-toolbar { align-items: center; }

  /* FIX 2: Composer keyboard hug. Flush with viewport bottom on idle and
  thread state. visualViewport listener drives --kb-offset when keyboard up.
  Override prior rules including 1150 (position: static), 1175 (sticky),
  and ensure base position: fixed wins via attribute selector specificity. */
  html body.route-ask .ai-view .ai-composer-wrap,
  html body.route-ask:not(.ai-has-messages) .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: calc(var(--kb-offset, 0px) + var(--kb-safe, env(safe-area-inset-bottom, 0px))) !important;
    top: auto;
    margin: 0;
    /* iter12j: zero bottom padding eliminates the 8px body-color strand
  between the rich-composer card edge (#2a2b2c) and the viewport
  bottom that iOS Safari/Comet was rendering as a visible black
  band. Card now flush to wrap's bottom edge; safe-area-inset-bottom
  is already absorbed by the wrap's `bottom:` calc above. */
    padding: 8px 12px 0 12px !important;
    /* iter12i: was #1c1c1e (DEAD CODE - off-brand color sampled by
  iOS 26 for the bottom toolbar tint, creating the visible black
  strand). Now transparent so Safari falls through to body's
  var(--ask-bg, #191A1A) and tints the bottom toolbar to match the page edge. */
    background: transparent;
    background-color: transparent;
    background-image: none;
    z-index: 5 !important;
  }
  /* Remove ancestor transform/filter that would break position: fixed. */
  html body .ai-view, html body .ai-home, html body section#main.main {
    transform: none;
    filter: none;
    perspective: none;
    will-change: auto;
  }

  /* FIX 3: Top nav pill (Chat ↔ Dashboards) visible at idle and with messages.
  Pill 32px h, 16px radius, 4px inner pad. Segments 13px/500, 8px 14px pad,
  12px radius, active #1976D2/white, inactive transparent rgba(255,255,255,0.7).
  Background rgba(255,255,255,0.08), border rgba(255,255,255,0.12). */

  /* FIX 4: Remove suggestion / quick-action chip row above composer.
  The .home-launcher / .home-tabs-row sits above composer on idle and after
  messages on mobile; user wants 0 buttons above composer. */
  html body .ai-view .home-launcher,
  html body .ai-view .home-tabs-row,
  html body .home-launcher,
  html body .home-tabs-row {
    display: none;
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* FIX 5: Chat thread fades behind composer.
  Padding-bottom on .ai-messages reserves space for composer height + safe-area
  + 24px so the last line sits above composer's top edge in initial state.
  mask-image on .ai-messages fades the last 80px behind the composer. */
  html body.ai-has-messages .ai-view .ai-messages,
  html body .ai-view .ai-messages {
    padding-bottom: calc(var(--composer-h, 116px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent 100%) !important;
    mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent 100%) !important;
    overflow-x: hidden;
  }
  /* Apply fade only when there are messages to scroll. */
  html body:not(.ai-has-messages) .ai-view .ai-messages {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* FIX 6: Remove the footer strand below composer (sidebar-footer leaks on
  mobile; also any composer ::after / composer-shadow / composer-glow). */
  html body aside.sidebar .sidebar-footer, html body .sidebar-footer, html body .sidebar-footer .footer-org-pill, html body .footer-settings-link {
    display: none;
    visibility: hidden;
    height: 0;
    border: 0;
    background: transparent;
  }
  html body .ai-composer-wrap::after,
  html body .rich-composer::after {
    content: none;
    display: none;
    background: transparent;
    border: 0;
  }

}

@media (max-width: 820px) {

  /* [from style.css L25178-L25245] */

  /* Toolbar: single-row, no wrapping, clip overflow. */
  html body .rich-composer .rc-toolbar,
  html body .ai-view .rich-composer .rc-toolbar {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden !important;
    gap: 6px !important;
    align-items: center !important;
  }

  /* Left cluster: shrink to fit, no overflow. */
  html body .rich-composer .rc-left,
  html body .ai-view .rich-composer .rc-left {
    flex: 1 1 auto !important;
    min-width: 0;
    overflow: hidden !important;
    gap: 6px !important;
  }

  /* Right cluster: never shrink. */
  html body .rich-composer .rc-right,
  html body .ai-view .rich-composer .rc-right {
    flex: 0 0 auto !important;
    min-width: 0;
    gap: 6px !important;
  }

  /* Data chip: hide on mobile (keep Web + Model). */
  html body .rich-composer .rc-chip[data-chip="data"],
  html body .ai-view .rich-composer .rc-chip[data-chip="data"] {
    display: none;
  }

  /* Queue/list button: hide on mobile toolbar row. */

  /* While typing: also hide the Data chip (already done above, kept explicit). */
  html body .rich-composer.rc-typing .rc-chip[data-chip="data"],
  html body .ai-view .rich-composer.rc-typing .rc-chip[data-chip="data"] {
    display: none;
  }

  body.kb-open.route-ask:not(.ai-has-messages) .ai-view.ai-home {
    height: 100svh !important;
    min-height: 0;
    justify-content: flex-end !important;
  }

  /* Re-anchor the home-launcher tabs row just above the fixed composer when
  keyboard is open. Uses --kb-offset to push up with the keyboard. */
  body.kb-open.route-ask:not(.ai-has-messages) .ai-view .home-launcher,
  body.kb-open.route-ask:not(.ai-has-messages) section#main .ai-view .home-launcher {
    bottom: calc(var(--kb-offset, 0px) + 82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* The beaded wordmark: hide it when keyboard open so it does not float in
  the middle of the blank void. */
  body.kb-open .ai-view .ai-bg-mark {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease !important;
  }

  html body .ai-new-chat-btn {
    display: none;
  }

  /* [from style.css L25880-L25890] */

  html body .ai-view .rich-composer .rc-input {
    font-size: 15px;
    color: #F3F2EF;
    min-height: 26px;
    max-height: 120px;
  }
  html body .ai-view .rich-composer .rc-input:empty::before {
    color: #6B6F70;
  }

  /* [from style.css L40523-L40707] */


  /* --- Composer wrap: fixed, full-viewport width, box-sizing correct ------ */
  html body .ai-view .ai-composer-wrap,
  html body section#main .ai-view .ai-composer-wrap,
  html body.route-ask .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 12px !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, transparent 0%, var(--ask-bg, #191A1A) 40%) !important;
    z-index: 5;
  }

  /* --- Composer inner card: centered, max 720, full mobile width ---------- */
  html body .ai-view .ai-composer-wrap > .rich-composer,
  html body section#main .ai-view .ai-composer-wrap > .rich-composer,
  html body.route-ask .ai-composer-wrap > .rich-composer,
  html body.route-ask.ai-has-messages .ai-composer-wrap > .rich-composer {
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: #212223 !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 20px !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  }
  html body .ai-view .rich-composer:focus-within,
  html body section#main .ai-view .rich-composer:focus-within {
    border-color: rgba(33,150,243,0.55) !important;
  }

  /* --- Textarea inside composer: transparent, auto grow ------------------- */
  html body .ai-view .rich-composer textarea,
  html body section#main .ai-view .rich-composer textarea {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    resize: none !important;
    color: #EAEBEC !important;
    padding: 4px !important;
    width: 100% !important;
    min-height: 20px !important;
    max-height: 120px !important;
    box-sizing: border-box !important;
  }

  /* --- Tools row: normal flex, no grid, no forced 100% for children ------- */
  html body .ai-view .rich-composer .rc-toolbar,
  html body section#main .ai-view .rich-composer .rc-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 4px 0 0 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  html body .ai-view .rich-composer .rc-model,
  html body .ai-view .rich-composer .rc-model-select {
    background: transparent !important;
    border: 0 !important;
    color: #b8bbbe !important;
    font-size: 13px !important;
    max-width: none !important;
    padding: 4px 6px !important;
  }
  html body .ai-view .rich-composer .rc-mode {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.03) !important;
    color: #EAEBEC !important;
    font-size: 13px !important;
  }
  /* the "spacer" between left tools and right icons */
  html body .ai-view .rich-composer .rc-toolbar::before {
    content: "";
    flex: 1;
  }
  html body .ai-view .rich-composer .rc-mic,
  html body .ai-view .rich-composer .rc-send,
  html body .ai-view .rich-composer .rc-icon-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }
  html body .ai-view .rich-composer .rc-send {
    background: #2196F3 !important;
    border-color: transparent !important;
  }
  html body .ai-view .rich-composer .rc-send svg { fill: #fff !important; }
  html body .ai-view .rich-composer .rc-mic {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
  }
  html body .ai-view .rich-composer .rc-mic svg { fill: #b8bbbe !important; }

  /* --- Followup chips: flex-wrap, rounded, tappable ----------------------- */
  html body .ai-view .nx-followups,
  html body section#main .ai-view .nx-followups {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 12px 0 4px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  html body .ai-view .nx-followup-chip,
  html body section#main .ai-view .nx-followup-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #EAEBEC !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    white-space: normal !important;
    text-align: left !important;
    max-width: 100% !important;
  }
  html body .ai-view .nx-followup-chip:hover,
  html body .ai-view .nx-followup-chip:active {
    background: rgba(255,255,255,0.06) !important;
  }

  /* --- Messages column: padding at bottom so composer doesn't cover, ------
   *     and padding at top so user bubble doesn't tuck behind topbar        */
  html body .ai-view .ai-messages,
  html body section#main .ai-view .ai-messages {
    padding: 16px 16px 160px 16px !important;
    box-sizing: border-box !important;
    max-width: 720px !important;
    margin: 0 auto !important;
  }

  /* --- User message bubble: don't glue to right edge, no overlap ---------- */
  html body .ai-view .msg-user {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    align-items: flex-start !important;
  }

  /* --- Topbar clearance: ensure content starts below fixed topbar --------- */
  body.route-ask main#main-content,
  body.route-ask .main-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 84px) !important;
  }

  /* --- THINKING inline chip when nothing to say (kill giant empty block) -- */
  html body .ai-view .ai-thinking:empty,
  html body .ai-view .thinking-block:empty {
    display: none !important;
  }

}

/* ============================================================
 * SECTION 9b: MESSAGES (consolidated route-messages mobile)
 * v41.58h consolidation - 2 scattered blocks -> 2 breakpoints.
 * Preserves original rules 1:1. Original locations in inline comments.
 * ============================================================ */


@media (max-width: 380px) {

  /* [from style.css L20740-L20746] */

  body.route-messages .msg-tile-grid-wide,
  body.route-messages .msg-tile-grid { grid-template-columns: 1fr !important; }
  body.route-messages .msg-stat { min-width: 88px !important; }
  body.route-messages .msg-stat-btn span { display: none; }
  body.route-messages .msg-stat-btn { padding: 0 10px !important; }

}

@media (max-width: 767px) {

  /* [from style.css L20459-L20737] */

  /* Ensure has-mobile-topnav body class is unnecessary - apply offsets when
  mobile-topnav is visible (it always is on this breakpoint). */
  body.route-messages #main-content,
  body.route-messages .main-content {
    height: auto;
    min-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px)) !important;
    max-height: none;
    overflow: visible;
    padding: 0;
    margin-top: 0;
  }
  /* Re-allow body scroll on /messages sub-routes so dashboard + builder pages
  can scroll vertically. Composer routes keep their own internal lock. */
  body.route-messages {
    height: auto;
    max-height: none;
    overflow-y: auto;
  }

  /* ── Messages list view (the default /messages route) ────────────────── */
  /* v41.90: removed the top padding on .msg-view. The outer .main-content
     already sets safe+72px in the @media 767 block above; adding another
     safe+60px here produced ~200px of dead space above the KPI strip. */
  body.route-messages .msg-view {
    height: auto;
    min-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px));
    overflow: visible;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-charcoal-deep);
  }
  html[data-app-theme="light"] body.route-messages .msg-view { background: #F5F5F7; }

  /* Status bar → compact horizontally-scrolling KPI strip + actions */
  body.route-messages .msg-status-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--overlay-w-03);
    scrollbar-width: none;
  }
  body.route-messages .msg-status-bar::-webkit-scrollbar { display: none; }
  body.route-messages .msg-stat {
    flex: 0 0 auto !important;
    min-width: 96px !important;
    padding: 8px 12px !important;
    background: var(--overlay-w-04);
    border: 1px solid var(--overlay-w-07);
    border-radius: 10px;
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  body.route-messages .msg-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-muted-alpha);
    white-space: nowrap;
  }
  body.route-messages .msg-stat-val {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
  }
  /* Quiet hours is too long; hide on mobile (still on dashboard page) */
  body.route-messages .msg-stat-hours { display: none; }
  /* Cap progress bar shorter on mobile */
  body.route-messages .msg-cap-bar { width: 64px; }
  /* Actions: keep both buttons visible at end of strip */
  body.route-messages .msg-stat-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-left: 4px;
    align-items: center;
  }
  body.route-messages .msg-stat-btn {
    height: 40px !important;
    min-width: 44px !important;
    padding: 0 12px;
    font-size: 13px !important;
    white-space: nowrap;
    border-radius: 10px !important;
  }

  /* Split layout: collapse the 2-col grid into a stack; right pane hidden by default */
  body.route-messages .msg-split,
  body.route-messages .msg-split-2col {
    display: block;
    grid-template-columns: 1fr;
    flex: 1 1 auto;
    min-height: 0;
  }
  body.route-messages .msg-left-pane {
    width: 100%;
    border-right: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
  }
  body.route-messages .msg-right-pane,
  body.route-messages .msg-thread-pane {
    display: none;
  }
  /* When a thread is open on mobile, the body gets `msg-mobile-thread`. */
  body.msg-mobile-thread.route-messages .msg-left-pane { display: none; }
  body.msg-mobile-thread.route-messages .msg-thread-pane,
  body.msg-mobile-thread.route-messages .msg-right-pane {
    display: flex;
    position: fixed;
    top: calc(60px + env(safe-area-inset-top, 0px));
    left: 0; right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--surface-charcoal-deep);
    flex-direction: column;
  }
  html[data-app-theme="light"] body.msg-mobile-thread.route-messages .msg-thread-pane,
  html[data-app-theme="light"] body.msg-mobile-thread.route-messages .msg-right-pane {
    background: #FFF;
  }
  /* Hide the status bar when viewing a thread to maximize message real estate */
  body.msg-mobile-thread.route-messages .msg-status-bar { display: none; }

  /* Left pane header: more compact, full bleed */
  body.route-messages .msg-left-header {
    padding: 12px 14px 6px;
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
  }
  body.route-messages .msg-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  body.route-messages .msg-search-wrap { margin-bottom: 10px; }
  body.route-messages .msg-search {
    height: 44px;
    font-size: 15px;
    padding-left: 14px;
    border-radius: 12px;
  }
  /* Filter chip strips: horizontal scroll, no wrap */
      body.route-messages .msg-range-chip,
  body.route-messages .msg-filter-tab {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 17px;
    white-space: nowrap;
  }

  /* Threads list: scroll inside its own container */
  body.route-messages .msg-threads-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 calc(20px + env(safe-area-inset-bottom, 0px));
  }
  body.route-messages .msg-thread-row {
    padding: 12px 14px;
    gap: 12px;
    min-height: 64px;
  }
  body.route-messages .msg-thread-avatar { width: 40px; height: 40px; font-size: 13px; }

  /* Thread pane (right side, full-screen on mobile) */
  body.msg-mobile-thread.route-messages .msg-thread-header {
    padding: 10px 14px;
    min-height: 56px;
    gap: 10px;
    border-bottom: 1px solid var(--overlay-w-07);
    display: flex;
    align-items: center;
  }
  /* Ensure the existing .msg-thread-back is large + tappable on mobile */
  body.msg-mobile-thread.route-messages .msg-thread-back {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  body.msg-mobile-thread.route-messages .msg-thread-back:active {
    background: var(--accent-primary-soft-18);
  }
  /* Thread name/meta tighter so header fits on phones */
  body.msg-mobile-thread.route-messages .msg-thread-name-big { font-size: 15px; }
  body.msg-mobile-thread.route-messages .msg-thread-meta { font-size: 11.5px; }
  /* FieldRoutes / Pin links → icon-only style on mobile to save space */
  body.msg-mobile-thread.route-messages .msg-thread-header-actions {
    flex-shrink: 0;
  }
  body.msg-mobile-thread.route-messages .msg-thread-link {
    padding: 6px 8px;
    font-size: 11px;
  }
  body.msg-mobile-thread.route-messages .msg-bubble-stream {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
  }
  body.msg-mobile-thread.route-messages .msg-composer {
    position: sticky;
    bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(25, 26, 26, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--overlay-w-07);
  }
  html[data-app-theme="light"] body.msg-mobile-thread.route-messages .msg-composer {
    background: rgba(255,255,255,0.96);
  }
  body.msg-mobile-thread.route-messages .msg-composer textarea {
    min-height: 44px;
    max-height: 140px;
    font-size: 16px; /* prevents iOS zoom */
  }

  /* ── Dashboard page (#/messages/dashboard) on mobile ─────────────────── */
  body.route-messages .msg-page-view {
    padding-top: calc(60px + env(safe-area-inset-top, 0px));
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    overflow: visible;
    height: auto;
  }
  body.route-messages .msg-page-head {
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0 14px;
    align-items: center;
  }
  body.route-messages .msg-page-back {
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }
  body.route-messages .msg-page-title {
    font-size: 17px;
    flex: 1 1 100%;
    order: 3;
    margin-top: 4px;
  }
  /* Stack KPI tiles 2-col on small phones, 1-col below 360 */
  body.route-messages .msg-tile-grid-wide,
  body.route-messages .msg-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body.route-messages .msg-tile {
    padding: 14px;
    min-height: 84px;
  }
  body.route-messages .msg-tile-label { font-size: 10.5px; }
    /* Sparkline section full-bleed */
  body.route-messages .msg-dash-section-wide,
  body.route-messages .msg-spark-wrap-wide {
    padding: 12px;
    margin-top: 12px;
  }
  body.route-messages .msg-spark-wrap-wide svg { width: 100%; height: auto; }

  /* ── Builder page (#/messages/builder) on mobile ──────────────────── */
          /* Save / Cancel: sticky CTA bar at bottom */

}

/* ============================================================
 * SECTION 5b: CHAT (consolidated chat component mobile)
 * v41.58h consolidation - 6 scattered blocks -> 5 breakpoints.
 * Preserves original rules 1:1. Original locations in inline comments.
 * ============================================================ */


@media (max-width: 420px) {

  /* [from style.css L39399-L39406] */

  html body .floating-chat-messages .pti-pills,
  html body .msg-bubble .pti-pills { gap: 6px; }
  html body .floating-chat-messages .pti-pill,
  html body .msg-bubble .pti-pill { font-size: 0.75rem; }
  html body .floating-chat .floating-chat-composer .composer-chips { gap: 0.25rem; }
  html body .floating-chat .floating-chat-composer .composer-chip { padding-left: 0.45rem; padding-right: 0.45rem; }

}

@media (max-width: 720px) {

  /* [from style.css L35468-L35476] */

  .chat-eval-page { padding: 20px 14px 40px; }
  .chat-eval-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-eval-chart { grid-template-columns: 1fr; }

  html body .stl-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .stl-stage-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 767px) {

  /* [from style.css L39340-L39398] */

  /* Keep streamed tool events inside the message column rather than clipping
     below the compact thinking chrome. */
  html body .floating-chat-messages .ai-thinking,
  html body .floating-chat-messages .nx-thinking,
  html body .msg-bubble .ai-thinking,
  html body .msg-bubble .nx-thinking {
    overflow: visible !important;
    min-width: 0;
  }
  html body .floating-chat-messages .pti-pills,
  html body .msg-bubble .pti-pills {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px;
    margin: 8px 0 4px !important;
    padding: 4px 0;
    overflow: visible !important;
    visibility: visible !important;
  }
  html body .floating-chat-messages .pti-pill,
  html body .msg-bubble .pti-pill {
    min-height: 32px;
    max-width: 100%;
  }
  /* The header owns expansion, so make its tap target meet touch guidance. */
  html body .nx-thinking .nx-thinking-head {
    min-height: 44px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  html body .nx-thinking .nx-thinking-steps {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  /* Preserve the complete composer controls on small screens. */
  html body .floating-chat .floating-chat-composer,
  html body .floating-chat .floating-chat-composer.glass-composer {
    overflow: visible !important;
    padding: 0.7rem 0.75rem calc(0.7rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body .floating-chat .floating-chat-composer .composer-toolbar,
  html body .floating-chat .floating-chat-composer .composer-chips,
  html body .floating-chat .floating-chat-composer .composer-chip,
  html body .floating-chat .floating-chat-composer .composer-chip-plus {
    display: flex !important;
    visibility: visible !important;
  }
  html body .floating-chat .floating-chat-composer .composer-toolbar {
    min-height: 44px;
    width: 100%;
  }
  .floating-chat-composer textarea,
  .chat-textarea,
  #floating-chat-input,
  .msg-composer-input { text-align: center; }

}

@media (max-width: 820px) {

  /* [from style.css L302-L326] */

  .floating-chat.open { inset: 0; z-index: 1300; }
  .floating-chat.open .floating-chat-panel {
    position: fixed !important;
    left: 10px;
    right: 10px !important;
    bottom: 10px !important;
    top: auto;
    width: auto;
    max-width: none;

    height: calc(var(--vv-h, 85vh) - 20px) !important;
    max-height: calc(var(--vv-h, 85vh) - 20px) !important;
    border-radius: 18px !important;
    display: flex;
    flex-direction: column !important;
    transform: translateY(0) !important;
    transition: height 180ms ease, max-height 180ms ease, transform 0.28s cubic-bezier(0.34, 1.1, 0.64, 1) !important;
  }
  .floating-chat:not(.open) .floating-chat-panel { transform: translateY(100%) !important; }
  html body .floating-chat.open .floating-chat-messages { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
  .floating-chat.open .floating-chat-composer { flex: 0 0 auto; }

  html body .floating-chat .floating-chat-panel { border-radius: 12px; }

}

@media (max-width: 900px) {

  /* [from style.css L253-L294] */

  body { display: block; }
  .sidebar { position: static; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .main { min-height: auto; }
  .main-content { padding: var(--space-5); }
  .topbar { padding: var(--space-4) var(--space-5); }

  /* iter12k: was 7rem (112px) which left huge dead space at bottom. 1.5rem
  (24px) is just enough to clear content from the collapsed Comet toolbar. */
  .dashboard-view, .automations-view, .settings-view, .reports-view, main#main-content { padding-bottom: 1.5rem; }

  .chat-panel .chat-messages { min-height: 0; max-height: 180px; padding: 0.35rem 0; }
  .chat-panel .chat-messages .chat-empty { padding: 0.4rem 0; font-size: 0.85rem; color: rgba(234, 235, 236, 0.5); }
  .chat-panel { padding: 1rem !important; }
  .dashboard-view .chat-panel { min-height: 0; }
  .dashboard-view .chat-panel .chat-messages { flex: 0 0 auto; min-height: 0; max-height: 220px; margin-bottom: 0; }

  html body .floating-chat-messages { min-height: 120px; max-height: 50vh; }
  .dashboard-view .card.chat-panel { padding: 0.75rem !important; background: #1A1B1B !important; border: 1px solid var(--border-soft) !important; border-radius: 14px !important; }
  .dashboard-view .card.chat-panel .chat-messages { padding: 0; }
  .chat-composer .composer-chips .composer-chip,
  .floating-chat-composer .composer-chips .composer-chip
  .chat-composer .composer-chips .composer-chip .cc-ico,
  .floating-chat-composer .composer-chips .composer-chip .cc-ico {
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-secondary-warm);
    opacity: 1;
  }
  .chat-composer .composer-chips .composer-chip--context,
  .floating-chat-composer .composer-chips .composer-chip--context
  .chat-composer .composer-chips .composer-chip--context .cc-ico,
  .floating-chat-composer .composer-chips .composer-chip--context .cc-ico,
  .chat-composer .composer-chips .composer-chip-plus,
  .floating-chat-composer .composer-chips .composer-chip-plus

  html body .floating-chat .floating-chat-composer { margin: 0.5rem 0.75rem 0.75rem; }

  /* [from style.css L23544-L23550] */

  body .dashboard-view .card.chat-panel {
    background: var(--bg-card) !important;
    border: 1px solid var(--surface-charcoal) !important;
    border-radius: 12px;
  }

}

/* ============================================================
 * SECTION 13b: PANEL (consolidated panel mobile)
 * v41.58h consolidation - 4 scattered blocks -> 2 breakpoints.
 * Preserves original rules 1:1. Original locations in inline comments.
 * ============================================================ */


@media (max-width: 600px) {

  /* [from style.css L12580-L12597] */

  .zh-card { padding: 14px 12px 12px; }
  .zh-drilldown-panel--open {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 12px 12px 0 0;
    max-height: 60vh;
    overflow-y: auto;
  }
  .zh-summary-bar { font-size: 10px; gap: 6px; }
  .zh-skel-map { height: 220px; }
  .zh-map-svg { max-height: 280px; }
  .zh-legend { gap: 8px; }
  .zh-legend-item { font-size: 8px; }

}

@media (max-width: 820px) {

  /* [from style.css L2555-L2586] */

  .gl-floating-pill { display: none; }

  /* iter12f audit: REMOVED dead `.main, #main { padding-top: --mt-h + SAT + 20 }`
  - was adding ~64+SAT pixels of top padding (--mt-h is 44px). Stacked
  with the iter11 padding (later overridden to 0 in iter12f) it created
  extra dead space. iter12f puts the chip offset on the inner view
  containers (.dashboard-view, .settings-view, etc.) only. */

  html body .topbar .gl-floating-pill { display: none; }

  .notif-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    top: auto;
    max-height: 70vh;
    border-radius: 18px;
    background: rgba(22, 24, 26, 0.98);
    border: 1px solid var(--overlay-w-07);
    box-shadow: 0 14px 40px var(--shadow-alpha-55);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 500;
  }
  .notif-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

  /* [from style.css L10005-L10014] */

  html body .notif-panel,
  html body .notif-panel.is-open {
    left: 12px !important;
    right: 12px !important;
    width: auto;
    max-width: calc(100vw - 24px) !important;
    bottom: 76px !important;
  }

  /* [from style.css L21619-L21694] */

  /* Full-screen tap-anywhere backdrop while panel is open */
  html body .notif-panel.is-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: -1;
    pointer-events: auto;
    /* Backdrop is OUTSIDE the panel content; tapping it triggers
  _notifOutsideClose because the listener checks panel.contains(target)
  and the backdrop is on a pseudo-element ANCHORED to the panel, but
  semantically counts as outside. To make this work, we use a sibling
  fixed div instead. See ::after below. */
  }

  /* Panel itself: ensure proper stacking on mobile so backdrop sits behind */
  html body .notif-panel.is-open {
    z-index: 100 !important;
    /* Restrict transforms only along Y so it slides from top */
    transition: transform 0.18s ease-out, opacity 0.18s ease-out !important;
  }

  /* Reliable close button in header (uses .notif-panel-clear element which
  already exists; just makes it more visible and tappable on mobile) */

  /* Any ai-thinking that does NOT have [hidden] must be visible */
  html body .ai-thinking:not([hidden]) {
    display: block;
    background: var(--ask-bg, #191A1A);
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: #B8B8B8;
    margin: 6px 0 10px 0;
    width: 100%;
    box-sizing: border-box;
    /* Ensure it isn't clipped by parent overflow:hidden */
    overflow: visible;
    position: relative;
    z-index: 1;
  }

  /* Thinking text "Thinking…" */
  html body .ai-thinking:not([hidden]) .ai-thinking-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #B8B8B8;
    font-weight: 500;
  }

  /* Claude-style thinking block also visible */
  html body .ai-thinking.claude-thinking:not([hidden]) {
    background: var(--ask-bg, #191A1A);
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 8px 12px;
  }

  /* Thinking steps inside the chip */
  html body .ai-thinking:not([hidden]) .thinking-step {
    color: #B8B8B8;
    font-size: 13px;
  }

}

/* ============================================================
 * SECTION 3b: KPI (consolidated KPI grid mobile)
 * v41.58h consolidation - 8 scattered blocks -> 5 breakpoints.
 * Preserves original rules 1:1. Original locations in inline comments.
 * ============================================================ */


@media (max-width: 479px) {

  /* [from style.css L11842-L11852] */

  .bi-kpi-strip,
  .kpi-grid,
  .report-cards,
  .home-dash-grid,
  /* v41.58e: .coo-kpi-grid 1fr override removed - mobile-v2.css owns 2-col at <=820px */

  .bi-kpi-card, .home-dash-card, .gl-dash-tile, .card { padding: 12px !important; }

  /* Org-pill collapses to avatar only (mobile-topnav is the source of truth here) */

}

@media (max-width: 600px) {

  /* [from style.css L11836-L11839] */

  .bi-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
  /* Hide today's-date row in mobile topbar (already hidden via .topbar but be explicit) */

}

@media (max-width: 640px) {

  /* [from style.css L475-L485] */

  /* v41.58e: .coo-kpi-grid rule removed - mobile-v2.css owns 2-col at <=820px */

  .dashboard-view .kpi-grid,
  .main-content .kpi-grid,
  .kpi-grid { grid-template-columns: 1fr !important; }

  .settings-view { padding: 1rem 1rem 3rem; }

  .automation-rule-row { grid-template-columns: 1fr; gap: 6px; }

  /* [from style.css L11212-L11212] */
 .bi-kpi-strip { grid-template-columns: repeat(2, 1fr); }

  /* [from style.css L19094-L19094] */
 .dash-hub-kpi-strip { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 768px) {

  /* [from style.css L9124-L9126] */

  .kpi-pills-row { display: none; }

}

@media (max-width: 820px) {

  /* [from style.css L20720-L20814] */

  /* Reserve enough top padding for: safe-area + topnav height (~64px
  including padding) + visual breathing room. */
  html body .dash-hub {
    padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 24px;
    gap: 0.95rem;
    max-width: 100vw;
  }
  /* Header block - give the "TOTAL OPERATIONS" / "DASHBOARDS" / sub text
  proper line-height + lighter eyebrow size. */
  html body .dash-hub .dash-hub-header { gap: 0.3rem; }
  html body .dash-hub .dash-hub-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }
  html body .dash-hub .dash-hub-title {
    font-size: 1.7rem;
    line-height: 1.1;
  }
  html body .dash-hub .dash-hub-sub {
    font-size: 0.82rem;
    line-height: 1.3;
  }

  /* Filters row - full width, wrap nicely on phones. */
  html body .dash-hub .dash-hub-filters {
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.55rem;
  }
  html body .dash-hub .dash-hub-filters select,
  html body .dash-hub .dash-hub-filters button {
    font-size: 0.78rem;
    padding: 0.4rem 0.65rem;
  }

  /* KPI strip: one column on very narrow phones for stronger hierarchy;
  two columns from 480px+. */
  html body .dash-hub .dash-hub-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  html body .dash-hub .dash-hub-kpi {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
    min-height: 78px;
    gap: 0.2rem;
  }
  html body .dash-hub .dash-hub-kpi-eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.10em;
    line-height: 1.25;
  }
  html body .dash-hub .dash-hub-kpi-value {
    font-size: 1.25rem;
    color: rgba(235, 240, 250, 0.94);
  }
  /* Dim placeholder "--" values so empty state doesn't visually shout. */
  html body .dash-hub .dash-hub-kpi-value:where(:empty),
  html body .dash-hub .dash-hub-kpi-value:where([data-placeholder="true"]) {
    color: rgba(235, 240, 250, 0.30);
  }
  /* Same treatment for the literal "--" placeholder text. */
  html body .dash-hub .dash-hub-kpi .dash-hub-kpi-value,
  html body .dash-hub .dash-hub-kpi .dash-hub-kpi-delta {
    transition: color 200ms ease;
  }

  /* Chart grid stacked, taller min-height on phones so bars render fully. */
  html body .dash-hub .dash-hub-chart-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  html body .dash-hub .dash-hub-card {
    min-height: 240px;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
  }
  html body .dash-hub .dash-hub-card-title {
    font-size: 0.62rem;
    letter-spacing: 0.10em;
  }

  /* Leaderboard + insights blocks: matched radius + tighter padding. */
  html body .dash-hub .dash-hub-leaderboard,
  html body .dash-hub .dash-hub-insights {
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
  }

  /* [from style.css L23652-L23663] */

  body .dash-hub {
    padding: 20px 16px 32px !important;
    gap: 1.25rem !important;
  }
  body .dash-hub .dash-hub-kpi-strip {
    gap: 0.6rem;
  }
  body .dash-hub .dash-hub-kpi {
    padding: 0.75rem 0.85rem 0.65rem;
  }

}

/* ============================================================
 * SECTION 2b: RICH-COMPOSER (consolidated)
 * v41.58h consolidation - 2 scattered blocks -> 2 breakpoints.
 * Preserves original rules 1:1. Original locations in inline comments.
 * ============================================================ */


@media (max-width: 768px) {

  /* [from style.css L12720-L12790] */

  /* v41.58j: Hide the raw <select>s on mobile (mode + model). Uses higher
     specificity than the .ai-view rules at L4036/L4045 which force display:
     inline-flex !important. A single readable "Claude Sonnet 4.5" chip lives
     in .rc-left so the + and Web chip stay reachable, matching iter12k. */
  html body .ai-view .rich-composer .rc-model,
  html body .rich-composer .rc-model { display: none !important; }
  html body .ai-view .rich-composer .rc-mode,
  html body .rich-composer .rc-mode  { display: none !important; }
  html body .ai-view .rich-composer .rc-chip--model-mobile,
  html body .rich-composer .rc-chip--model-mobile {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    max-width: 160px;
    overflow: hidden;
  }
  html body .rich-composer .rc-chip--model-mobile .rc-chip-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px;
  }

  /* Standardize button sizing - 44px touch target, consistent gap. */
  html body .rich-composer .rc-toolbar { gap: 8px; align-items: center; }
  .rich-composer .rc-toolbar > * + * { margin-left: 0; }

  .rich-composer .rc-icon-btn,
  .rich-composer .rc-mic,
  .rich-composer .rc-send {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 999px;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 0;
  }

  .rich-composer .rc-icon-btn svg,
  .rich-composer .rc-mic svg,
  .rich-composer .rc-send svg {
    width: 20px;
    height: 20px;
  }

  /* Ghost/glass style for secondary buttons (attach, voice). */
  .rich-composer .rc-icon-btn,
  .rich-composer .rc-mic {
    background: var(--border-soft) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: var(--fg-secondary-warm) !important;
    box-shadow: none;
  }
  .rich-composer .rc-icon-btn:active,
  .rich-composer .rc-mic:active {
    background: var(--border-overlay-10);
  }

  /* Send: muted by default; primary blue when input has text. */
  .rich-composer .rc-send {
    background: var(--border-overlay-10) !important;
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #949494 !important;
    box-shadow: none;
  }
  .rich-composer .rc-send svg,
  .rich-composer .rc-send svg * {
    color: #949494;
    stroke: #949494;
    fill: none;
  }
  .rich-composer.rc-has-input .rc-send {
    background: var(--accent-primary-hover);
    background-image: linear-gradient(180deg, var(--brand-blue-hover-pure) 0%, var(--accent-primary-hover) 100%);
    border-color: var(--accent-primary-hover);
    color: var(--fg-inverse);
    box-shadow: 0 4px 12px var(--accent-hover-soft-35);
  }
  .rich-composer.rc-has-input .rc-send svg,
  .rich-composer.rc-has-input .rc-send svg * {
    color: var(--fg-inverse);
    stroke: var(--fg-inverse);
  }

  /* Model picker chip - visible only on mobile. */

}

@media (max-width: 820px) {

  /* [from style.css L23932-L23969] */

  html body.route-ask.ai-has-messages .ai-composer-wrap {
    background: linear-gradient(to top, var(--ask-bg, #191A1A) 0%, var(--ask-bg, #191A1A) 60%, rgba(25,26,26,0.85) 85%, transparent 100%) !important;
  }

  html body .rich-composer {
    box-sizing: border-box;
    padding: 8px 10px !important;
  }
  html body .rich-composer .rc-toolbar {
    padding: 8px 4px 0 4px !important;
    gap: 6px !important;
  }
  html body .rich-composer .rc-send,
  html body .ai-view .rc-send {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
  }
  /* Don't let the left chip row push the send off-screen. */
  html body .rich-composer .rc-left {
    min-width: 0;
    flex: 1 1 auto !important;
  }
  html body .rich-composer .rc-right {
    flex: 0 0 auto !important;
  }

  html body .ai-thinking {
    padding: 0.5rem 0 0.65rem;
    margin-bottom: 0.7rem !important;
  }
  html body .ai-thinking .thinking-step {
    font-size: 0.82rem !important;
  }

}

/* ============================================================
 * SECTION 14: ROUTE-VIEW (consolidated)
 * v41.58h consolidation - 1 scattered blocks -> 1 breakpoints.
 * Preserves original rules 1:1. Original locations in inline comments.
 * ============================================================ */


@media (max-width: 768px) {

  /* [from style.css L26036-L26115] */

  /* Route page wrapper */
  /* v41.90: was flat 78px. Topbar occupies safe-area + 60px, so a fixed 78px
     leaves content hiding behind the notch on iPhones with a status-bar cutout.
     Use safe-area-aware padding so first content sits 12px below the topbar. */
  body.route-route #main-content, body.route-ask #main-content, body.route-chats #main-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
  }
  /* Specifically the route page header - give it room */

  /* rt-card: restore default grid layout - no relative/padding-top override */
  .rt-card {
    position: static;
    padding-top: 12px;
  }
  /* rt-num: no absolute positioning - stays in flow as first grid column */
  .rt-num {
    position: static;
    left: auto;
    transform: none;
    top: auto;
    align-self: center;
  }

  .rt-leg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    margin: 0;
    width: 100%;

    border-left: none !important;
    font-size: 11px;
    color: var(--fg-faint);
    gap: 2px;
  }
  .rt-leg::before {
    content: '';
    display: block;

    width: 2px;
    height: 24px;
    border-left: none;
    background: repeating-linear-gradient(
      to bottom,
      var(--border-strong-warm) 0 4px,
      transparent 4px 8px
    );
    margin: 0;
  }
  .rt-leg--start::before {
    background: repeating-linear-gradient(
      to bottom,
      #5B7CB8 0 4px,
      transparent 4px 8px
    );
  }
  .rt-leg--start {
    border-left: none;

    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    align-self: center;
    margin: 4px 0;
    padding: 6px 18px;
    background: var(--accent-primary-soft-10);
    border: 1px solid var(--accent-primary-soft-35);
    color: var(--accent-primary-wash);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .rt-leg--start::before {
    display: none;
  }

}

/* ============================================================
 * SECTION 15: HOOD (consolidated route-hood mobile)
 * v41.58h consolidation - 4 scattered blocks -> 2 breakpoints.
 * Preserves original rules 1:1. Original locations in inline comments.
 * ============================================================ */


@media (max-width: 768px) {

  /* [from style.css L30453-L30458] */

  /* Later body::before (160px gradient, z-index 119) must not reopen a
     top fade on the hood map. Higher specificity than body::before, and
     this block loads after that rule. */
  body.route-hood::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
    background: none !important;
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 0 !important;
    z-index: 0 !important;
  }

}

@media (max-width: 820px) {

  /* [from style.css L30468-L30490] */

  body.route-hood .hood-page {
    position: relative;
    height: 100svh;
  }
  body.route-hood .hood-map-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  body.route-hood .hood-loading {
    z-index: 25;
  }
  body.route-hood .hood-sheet {
    z-index: 30;
  }
  body.route-hood .hood-sheet-backdrop {
    z-index: 29;
  }
  body.route-hood .hood-pin-modal {
    z-index: 35;
  }

  /* [from style.css L30620-L30627] */

  body.route-hood .hood-sheet.is-expanded {
    max-height: 100svh;
    height: 100svh;
    border-radius: 0;
    padding-top: env(safe-area-inset-top);
  }

  /* [from style.css L31057-L31064] */


  body.route-hood .hood-map-wrap {
    position: fixed;
    inset: 0;
    z-index: 1;
  }

}

/* ============================================================
 * SECTION 16: MISC (small utility mobile blocks)
 * v41.58h consolidation - 33 scattered blocks -> 16 breakpoints.
 * Preserves original rules 1:1. Original locations in inline comments.
 * ============================================================ */


@media (max-width: 360px) {

  /* [from style.css L31822-L31824] */

  .hood-holo-chip { font-size: 10px; padding: 3px 8px; letter-spacing: 0.3px; }

}

@media (max-width: 380px) {

  /* [from style.css L26019-L26024] */

  /* Truly narrow: tighten text further but keep it visible */
  button.route-gps-btn span,
  button.route-refresh-btn span,
  .route-lock-btn span { font-size: 10px !important; }

}

@media (max-width: 479px) {

  /* [from style.css L11949-L11954] */

  /* Single-column dashboard tile grid on small phones */
  .gl-dash-pack {
    grid-template-columns: 1fr !important;
  }

}

@media (max-width: 480px) {

  /* [from style.css L26775-L26781] */

  .rt-map-legend {
    font-size: 11px;
    gap: 4px 8px;
  }
  .rt-map-dot { width: 9px; height: 9px; }

  /* [from style.css L35458-L35467] */

  .rt-try-popup {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .rt-try-popup-grid { grid-template-columns: 1fr; }
  .rt-try-opt { padding: 12px 14px; font-size: 14px; }

}

@media (max-width: 540px) {

  /* [from style.css L1158-L1161] */

  .home-tabs-row { grid-template-columns: repeat(2, 1fr); }
  .home-dash-grid { grid-template-columns: 1fr; }

}

@media (max-width: 600px) {

  /* [from style.css L7817-L7819] */

  html body .gl-dash-pack { grid-template-columns: 1fr; }

  /* [from style.css L12581-L12583] */

  .rb-btn { opacity: 1; }

  /* [from style.css L14161-L14163] */

    .ch100-grid { grid-template-columns: 1fr; }

  /* [from style.css L25999-L26018] */

  .route-hdr-row,
  .route-hdr-row1,
  .route-hdr-row2 {
    display: grid !important;
    gap: 6px !important;
  }
  .route-hdr-row1 { grid-template-columns: repeat(3, 1fr) !important; }
  .route-hdr-row2 { grid-template-columns: repeat(3, 1fr) !important; }
  .route-period-wrap { min-width: 0; }
  button.route-gps-btn,
  button.route-refresh-btn {
    font-size: 11px !important;
    padding: 6px 6px !important;
  }
  .route-lock-btn {
    font-size: 11px !important;
    padding: 6px 6px !important;
  }

  /* [from style.css L26342-L26346] */

  .route-viewbar, .home-tabs-row {
    margin-top: 20px;
  }

  /* [from style.css L26523-L26532] */

  .rt-compact-row {
    grid-template-columns: 24px 52px 1fr auto;
    gap: 8px;
    padding: 8px 10px;
  }
  .rt-compact-actions { grid-column: 1 / -1; justify-self: end; padding-top: 4px; border-top: 1px solid var(--surface-charcoal); margin-top: 4px; padding-top: 6px; }
  .rt-compact-val { font-size: 12px; }
  .rt-compact-nametext { font-size: 13px; }

  /* [from style.css L26816-L26818] */

  .rt-map { height: 420px; }

  /* [from style.css L37503-L37512] */

    .route-hdr {
      margin-left: -10px;
      margin-right: -10px;
      padding-left: 10px;
      padding-right: 10px;
      margin-top: -12px;
      padding-top: 14px;
    }

}

@media (max-width: 640px) {

  /* [from style.css L11438-L11441] */

  .bi-extra-sections { grid-template-columns: 1fr !important; gap: 8px !important; }
  .bi-pacing-projection { flex-direction: column; gap: 4px; }

  /* [from style.css L21588-L21592] */

  .outreach-actions {
    grid-template-columns: 1fr;
  }

  /* [from style.css L25685-L25691] */

  .rt-call-header { padding: 10px 12px 8px; }
  .rt-call-row { padding: 11px 12px; }
  .rt-call-line1 { gap: 6px; }
  .rt-call-line2 { gap: 8px; font-size: 11.5px; }
  .rt-call-name { font-size: 13.5px; }

  /* [from style.css L25716-L25727] */

  .route-view { padding: 12px 10px 140px; }
  .route-hdr-stats { gap: 4px; }
  .route-stat { padding: 7px 4px; }
  .route-stat-num { font-size: 16px; }
  .route-stop { padding: 12px; }
  .route-stop-head { grid-template-columns: 28px 1fr auto; gap: 8px; }
  .route-stop-num { width: 28px; height: 28px; font-size: 13px; }
  .route-stop-name { font-size: 14px; }
  .route-act { height: 48px; font-size: 14px; }
  .route-mark { height: 42px; font-size: 11px; }

  /* [from style.css L25814-L25817] */

  .route-period-btn { height: 30px; font-size: 11px; padding: 0 8px; }
  .route-period-btn span { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

}

@media (max-width: 680px) {

  /* [from style.css L3106-L3108] */

  .gl-cn-view .gl-cn-grid { grid-template-columns: 1fr !important; }

}

@media (max-width: 700px) {

  /* [from style.css L27019-L27030] */

  .rt-map-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .rt-map-controls {
    justify-content: space-between;
  }
  .rt-map-fs-label { display: none; }
  .rt-map-fs-btn { padding: 6px 10px; }

}

@media (max-width: 720px) {

  /* [from style.css L18390-L18392] */

  html body .gl-cn-view .gl-cn-grid { grid-template-columns: 1fr !important; }

}

@media (max-width: 767px) {

  /* [from style.css L13804-L13822] */

  .dr-dd-menu--pill {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    min-width: 0;
    width: 100%;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 28px var(--shadow-alpha-55);
    padding: 12px 8px 32px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--surface-charcoal);
  }
  .dr-dd-menu--pill .dr-dd-item { padding: 10px 14px; font-size: 0.9rem; }

  /* [from style.css L23408-L23421] */

  html body .gl-cn-view,
  html body .gl-cn-view .gl-cn-header,
  html body .gl-cn-view .gl-cn-section,
  html body .gl-cn-view .gl-cn-cat {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* [from style.css L38792-L38792] */
 .predictions-view { padding: 1rem; } .predictions-card { padding: .8rem; }

}

@media (max-width: 768px) {

  /* [from style.css L28964-L28968] */

  body .gfp-item, body .mt-switch-opt, body .route-gps-btn, body .route-refresh-btn, body .route-lock-btn, body .route-period-btn, body .route-hdr-cell button, body .route-hdr-row button, body .route-hdr-row1 button, body .route-hdr-row2 button {
    border-radius: 999px !important;
  }

}

@media (max-width: 800px) {

  /* [from style.css L14813-L14828] */

  .imsg-flow-body--dd {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .imsg-dd-palette {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--surface-charcoal);
    padding: 8px;
  }
  .imsg-flow-right--dd {
    border-top: 1px solid var(--surface-charcoal);
  }

}

@media (max-width: 820px) {

  /* [from style.css L21997-L22018] */

  .outreach-hub {
    padding: 16px 14px 36px;
    gap: 16px;
  }

  .outreach-tabs {
    padding: 8px 12px 0;
  }

  .outreach-title {
    font-size: 1.2rem;
  }

  .outreach-table th,
  .outreach-table td {
    padding: 8px 8px;
    font-size: 0.78rem;
  }

  .col-msg { min-width: 180px; }

  /* [from style.css L25160-L25174] */

  .route-hdr {
    padding: 4px 0 6px;
    margin-bottom: 6px;
  }
  .route-hdr-row {
    margin-bottom: 6px;
  }
  .route-hdr-row2 {
    margin-bottom: 7px;
  }
  .route-hdr-stats {
    margin-bottom: 7px;
  }

}

@media (max-width: 860px) {

  /* [from style.css L1154-L1157] */

  .home-tabs-row { grid-template-columns: repeat(4, 1fr); }
  .home-dash-grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 900px) {

  /* [from style.css L11341-L11341] */
 .bi-extra-sections { grid-template-columns: 1fr; }

  /* [from style.css L12782-L12782] */
 .apm-grid { grid-template-columns: 1fr; }

  /* [from style.css L12793-L12793] */
 .apm-card--span2 { grid-column: auto; }

}

/* ==============================================================
 * v41.58k CONSOLIDATION: all remaining mobile @media blocks from
 * style.css moved here on 2026-08-24. Provenance line numbers below
 * refer to style.css BEFORE this move (see /tmp/style.css.pre-v58k.bak).
 * Each block is copied 1:1 with no rule changes.
 * ============================================================== */

/* [from style.css L5064-L5068  @media (max-width: 820px)] */
@media (max-width: 820px) {
  .rc-mode { padding: 2px 2px 2px 6px; }
  .rc-mode-select { font-size: 11px; padding: 4px 20px 4px 2px; }
  .rc-mode svg { display: none; }
}

/* [from style.css L11260-L11260  @media (max-width: 900px)] */
@media (max-width: 900px) { .bi-hero-grid { grid-template-columns: 1fr; } }

/* [from style.css L13778-L13783  @media (max-width: 600px)] */
@media (max-width: 600px) {
  .dr-division-summary-grid { grid-template-columns: 1fr; }
  .dr-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .dr-essentials { gap: 0.35rem; }
  .dr-essential-btn { font-size: 0.72rem; padding: 0.38rem 0.8rem; }
  }

/* [from style.css L18502-L18509  @media (max-width: 768px)] */
@media (max-width: 768px) {
  html:not(#__never__) body:not(#__never__) .gl-divisions-view {
    padding: 1rem 1rem 2rem !important;
  }
  html:not(#__never__) body:not(#__never__) .gl-divisions-grid {
    grid-template-columns: 1fr !important;
  }
}/* Compact chip-style cards on the divisions index */

/* [from style.css L19714-L19727  @media (max-width: 768px)] */
@media (max-width: 768px) {
  .msg-split { flex-direction: column; }
  .msg-left-pane {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--fg-muted-light-alpha);
  }
  .msg-right-pane { display: none; }
  body.msg-mobile-thread .msg-right-pane { display: flex; }
  .msg-thread-back { display: inline-flex; }
  .msg-status-bar { gap: 12px; padding: 10px 12px; }
  .msg-stat-hours { display: none; }
  .msg-bubble-row { max-width: 82%; }
}

/* [from style.css L20016-L20022  @media (max-width: 760px)] */
@media (max-width: 760px) {
  .msg-split.msg-split-2col {
    grid-template-columns: 1fr;
  }
  body.msg-mobile-thread .msg-left-pane { display: none; }
  body.msg-mobile-thread .msg-thread-pane { display: flex; }
  }

/* [from style.css L23914-L23922  @media (max-width: 820px)] */
@media (max-width: 820px) {
  html body .report-card {
    padding: 16px !important;
  }

  html body .modal-body {
    padding: 16px !important;
  }
}

/* [from style.css L24347-L24372  @media (max-width: 820px)] */
@media (max-width: 820px) {

  .rc-input {
    outline: none;
    min-height: 24px;
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    word-wrap: break-word;
    white-space: pre-wrap;
    font: inherit;
    color: inherit;
    caret-color: var(--border-card-light);
    line-height: 1.5;
    padding: 0;
    cursor: text;
    -webkit-user-select: text;
    user-select: text;
  }
  /* Placeholder via CSS on empty contenteditable */
  .rc-input:empty::before {
    content: attr(data-placeholder);
    color: #7a7a79;
    pointer-events: none;
  }
}

/* [from style.css L24857-L24880  @media (max-width: 767px)] */
@media (max-width: 767px) {
  /* Base: composer is fixed at bottom, rises by keyboard inset amount.
  position: fixed beats line 5114 which also uses */
  .ai-composer-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    transform: none;
    z-index: 60;
    transition: bottom 80ms ease-out;
  }
  /* When keyboard IS open: bottom equals the inset (composer sits at keyboard top).
 on bottom is the ONE necessary override to beat line 5114 bottom:0 */
  body.kb-open .ai-composer-wrap {
    bottom: var(--kb-inset, 0);
    padding-bottom: 4px;
    background: var(--surface-charcoal-deep);
  }
  /* When keyboard is closed: flush with safe area. */
  body:not(.kb-open) .ai-composer-wrap {
    bottom: env(safe-area-inset-bottom, 0);
  }
}

/* [from style.css L26581-L26589  @media (max-width: 600px)] */
@media (max-width: 600px) {
  .rsm {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 32px);
    border-radius: 12px;
  }
  .rsm-name { font-size: 16px; }
  .rsm-hdr, .rsm-actions { padding-left: 14px; padding-right: 14px; }
  }

/* [from style.css L27024-L27027  @media (max-width: 640px)] */
@media (max-width: 640px) {
  .rsm-knock-pop-btn { width: 44px; height: 44px; font-size: 24px; }
  .rsm-knock-pop-reset { height: 36px; padding: 0 14px; font-size: 13px; }
}

/* [from style.css L27079-L27082  @media (max-width: 600px)] */
@media (max-width: 600px) {
  .rsm-knock-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .rsm-knock-count { justify-content: space-between; }
  }

/* [from style.css L27197-L27202  @media (max-width: 600px)] */
@media (max-width: 600px) {
  .route-lock-btn { padding: 0 10px; font-size: 11px; }
  .rsm-next-btn { height: 48px; font-size: 15px; }
  .rt-price-init { font-size: 13px; }
  .rt-price-mo   { font-size: 11px; }
}

/* [from style.css L27514-L27522  @media (max-width: 600px)] */
@media (max-width: 600px) {
  .rsm.is-custmode .rsm-acct-card,
  .rsm.is-repmode .rsm-acct-card { margin: 10px 12px 0; padding: 12px; }
  .rsm-acct-svc { font-size: 13px; }
  .rsm-acct-mo { font-size: 12px; }
  .rsm-history { margin: 10px 12px 0; }
  .rsm-reptoggle { margin: 10px 12px 0; width: calc(100% - 24px); }
  .rsm-rep { padding: 12px 12px 14px; }
}

/* [from style.css L27533-L27540  @media (max-width: 600px)] */
@media (max-width: 600px) {
  .rsm-knock-row {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
}

/* [from style.css L27668-L27671  @media (max-width: 480px)] */
@media (max-width: 480px) {
  .rsm-doortype-pill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsm-dt-pill { font-size: 12.5px; min-height: 44px; }
}

/* [from style.css L27889-L27891  @media (max-width: 639px)] */
@media (max-width: 639px) {
  html body .gl-divisions-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* [from style.css L28659-L28704  @media (max-width: 768px)] */
@media (max-width: 768px) {
  /* Top-nav floating pill - active chip = #2196F3 brand blue */
  html body .gl-floating-pill .gfp-item.active,
  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item.active,
  html body header.topbar .gl-floating-pill--topbar .gfp-item.active,
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active,
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active span,
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar a.gfp-item.active,
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar button.gfp-item.active,
  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item.active {
    background: #2196F3 !important;
    background-color: #2196F3 !important;
    background-image: none !important;
    color: #FFF !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 999px !important;
  }
  /* Mobile topnav Views/Chat chip (mt-switch-opt) active = blue */
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active,
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"] {
    background: #2196F3 !important;
    background-color: #2196F3 !important;
    border-color: #2196F3 !important;
    color: #FFF !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.30) !important;
  }
  /* Route sub-tab buttons (Timeline / Compact / Map / AI Optimize) */
  .route-viewbtn.is-active,
  .route-viewswitch .route-viewbtn.is-active {
    background: var(--brand-blue-pure) !important;
    background-color: var(--brand-blue-pure) !important;
    color: var(--fg-inverse) !important;
    box-shadow: none !important;
  }
  /* BUG 2: Guarantee tap targets are interactive on mobile */
  .route-viewbtn,
  .route-viewswitch .route-viewbtn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }
}

/* [from style.css L34813-L34822  @media (max-width: 768px)] */
@media (max-width: 768px) {
  html body .rc-send,
  html body .rich-composer .rc-send {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    box-shadow: none !important;
  }
}


/* ==============================================================
 * v41.58l: moved from style.css L36986-L37022 (was nested inside
 * @layer overrides). Preserved layer scope by wrapping here.
 * Kills stale rule that had content: "Views" competing with the
 * v41.58j 'Dashboards' rule at L3019.
 * ============================================================== */
@layer overrides {
  @media (max-width: 768px) {

      html body .gl-divisions-grid.gl-divisions-grid--row5 {
        grid-template-columns: repeat(2, 1fr);
      }

      html body .gl-divisions-view.gl-divisions-view--centered {
        min-height: auto;
        padding: 1.5rem 1rem;
      }

      /* 5. Views chip gets a tiny chevron after the label (Apple selector look).
  Use the longest-spec selector to win over the earlier ::after rule. */
      html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[data-view="dashboards"]::after {
        content: "Views \00a0˅";
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.005em;
        line-height: 44px;
      }

      /* BUG 1 - inactive chip: solid dark grey, no border */
      html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt {
        background: #2A2A2A;
        background-color: #2A2A2A;
        background-image: none;
        border: none;
        border-width: 0;
        outline: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: #E5E5E5;
        border-radius: 999px;
        font-weight: 500;
      }
  }
}


/* ============================================================
 * v41.76 MOBILE FIX PACK
 * Fixes reported 2026-08-27:
 *  - Composer text was centered (should be left)
 *  - Model chip label "Claude Sonnet 4.5" clipping as "Claude S..."
 *  - Follow-up composer on answer view rendering off-screen with
 *    only send arrow visible; textarea + toolbar collapsed
 * ============================================================ */
@media (max-width: 820px) {
  /* Composer wrap always full-width, centered, box-sized, correct padding.
     v41.78: prepend section#main to raise specificity to (0,4,3) so this
     rule beats the legacy body.ai-has-messages section#main .ai-view
     .ai-composer-wrap block in style.css:35402 which sets
     transform: translateX(-50%) !important and drags the wrap off-screen. */
  html body.route-ask section#main .ai-composer-wrap,
  html body.route-ask.ai-has-messages section#main .ai-composer-wrap,
  html body section#main .ai-view .ai-composer-wrap {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--kb-offset, 0px) + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 12px !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, transparent 0%, var(--ask-bg, #191A1A) 40%) !important;
    display: block !important;
    flex-direction: initial !important;
    z-index: 50 !important;
    transform: none !important;
    contain: none !important;
    will-change: auto !important;
  }

  /* Rich composer inside wrap: full-width pill with toolbar below input */
  html body.route-ask .ai-composer-wrap > .rich-composer,
  html body.route-ask.ai-has-messages .ai-composer-wrap > .rich-composer,
  html body .ai-view .ai-composer-wrap > .rich-composer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    background: #212223 !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 20px !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    box-sizing: border-box !important;
    min-height: 56px !important;
  }

  /* Input area: block, left-aligned, no forced center */
  html body.route-ask .ai-composer-wrap .rc-textarea,
  html body.route-ask .ai-composer-wrap .rc-input,
  html body.route-ask.ai-has-messages .ai-composer-wrap .rc-textarea,
  html body.route-ask.ai-has-messages .ai-composer-wrap .rc-input,
  html body .ai-view .rich-composer .rc-textarea,
  html body .ai-view .rich-composer .rc-input {
    display: block !important;
    width: 100% !important;
    min-height: 26px !important;
    max-height: 140px !important;
    padding: 4px 2px !important;
    background: transparent !important;
    border: 0 !important;
    color: #F3F2EF !important;
    font-size: 15px !important;
    text-align: left !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    resize: none !important;
  }
  html body.route-ask .rc-input:empty::before,
  html body.route-ask.ai-has-messages .rc-input:empty::before,
  html body .ai-view .rc-input:empty::before {
    text-align: left !important;
    color: #7a7a79 !important;
  }

  /* Toolbar: single row below input, left cluster grows, right cluster fixed */
  html body.route-ask .ai-composer-wrap .rc-toolbar,
  html body.route-ask.ai-has-messages .ai-composer-wrap .rc-toolbar,
  html body .ai-view .rich-composer .rc-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 4px 0 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    min-width: 0 !important;
  }
  html body.route-ask .rc-toolbar .rc-left,
  html body.route-ask.ai-has-messages .rc-toolbar .rc-left,
  html body .ai-view .rich-composer .rc-toolbar .rc-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  html body.route-ask .rc-toolbar .rc-right,
  html body.route-ask.ai-has-messages .rc-toolbar .rc-right,
  html body .ai-view .rich-composer .rc-toolbar .rc-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* Model chip in chip mode is short "Sonnet" - never clip */
  html body.route-ask .rc-chip--model-mobile,
  html body.route-ask.ai-has-messages .rc-chip--model-mobile,
  html body .ai-view .rc-chip--model-mobile {
    max-width: 120px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }
  html body.route-ask .rc-chip--model-mobile .rc-chip-label,
  html body .ai-view .rc-chip--model-mobile .rc-chip-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Icon buttons: 36px, non-shrinking */
  html body.route-ask .rich-composer .rc-icon-btn,
  html body.route-ask .rich-composer .rc-mic,
  html body.route-ask .rich-composer .rc-send,
  html body.route-ask.ai-has-messages .rich-composer .rc-icon-btn,
  html body.route-ask.ai-has-messages .rich-composer .rc-mic,
  html body.route-ask.ai-has-messages .rich-composer .rc-send,
  html body .ai-view .rich-composer .rc-icon-btn,
  html body .ai-view .rich-composer .rc-mic,
  html body .ai-view .rich-composer .rc-send {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body.route-ask .rich-composer .rc-send,
  html body.route-ask.ai-has-messages .rich-composer .rc-send,
  html body .ai-view .rich-composer .rc-send {
    background: #2196F3 !important;
    color: #fff !important;
    border: 0 !important;
  }
  html body.route-ask .rich-composer .rc-send svg,
  html body.route-ask.ai-has-messages .rich-composer .rc-send svg,
  html body .ai-view .rich-composer .rc-send svg {
    stroke: #fff !important;
    color: #fff !important;
    fill: none !important;
    width: 16px !important;
    height: 16px !important;
  }
}

/* ============================================================
 * v41.77 MOBILE FIX PACK ROUND 2
 * User feedback 2026-08-27 (verbatim):
 *  - Sizing: more space on right than left (asymmetric)
 *  - Sonnet button did not open model picker (broken hidden select)
 *  - Attach button should be further left
 *  - Mic icon reworked
 *  - Text cursor does not line up with the placeholder text line
 *  - Follow-up bar still way left and off-screen on answer view
 *  - Some fade going on on the main screen (mask-image on messages)
 * Approach:
 *  - Symmetric padding on composer pill: 10px on both sides
 *  - + button gets zero left margin, tight against pill edge
 *  - .rc-input line-height + padding match placeholder ::before exactly
 *  - Bottom-sheet model picker (rc-model-sheet) styled
 *  - Fade on ai-messages removed (in earlier edit at line ~744)
 * ============================================================ */
@media (max-width: 820px) {

  /* Symmetric composer padding — equal left/right */
  html body.route-ask .ai-composer-wrap > .rich-composer,
  html body.route-ask.ai-has-messages .ai-composer-wrap > .rich-composer,
  html body .ai-view .ai-composer-wrap > .rich-composer {
    padding: 10px 14px !important;
  }

  /* Toolbar: no extra padding, edges flush */
  html body.route-ask .ai-composer-wrap .rc-toolbar,
  html body.route-ask.ai-has-messages .ai-composer-wrap .rc-toolbar,
  html body .ai-view .rich-composer .rc-toolbar {
    padding: 4px 0 0 0 !important;
  }

  /* + button flush to left edge of toolbar */
  html body.route-ask .rc-toolbar .rc-left .rc-plus-wrap,
  html body.route-ask.ai-has-messages .rc-toolbar .rc-left .rc-plus-wrap,
  html body .ai-view .rc-toolbar .rc-left .rc-plus-wrap {
    margin-left: 0 !important;
    margin-right: 2px !important;
  }
  html body.route-ask .rc-toolbar .rc-left,
  html body.route-ask.ai-has-messages .rc-toolbar .rc-left,
  html body .ai-view .rc-toolbar .rc-left {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  html body.route-ask .rc-toolbar .rc-right,
  html body.route-ask.ai-has-messages .rc-toolbar .rc-right,
  html body .ai-view .rc-toolbar .rc-right {
    padding-right: 0 !important;
  }

  /* Cursor alignment fix — contenteditable div needs exact vertical rhythm
     matching the ::before placeholder. Set line-height to a whole px and
     top/bottom padding to equal values so the caret sits ON the baseline. */
  html body.route-ask .rc-input,
  html body.route-ask.ai-has-messages .rc-input,
  html body .ai-view .rc-input {
    line-height: 24px !important;
    padding: 3px 2px 3px 2px !important;
    min-height: 30px !important;
    display: block !important;
    box-sizing: border-box !important;
    -webkit-user-select: text !important;
    caret-color: #F3F2EF !important;
  }
  html body.route-ask .rc-input:empty::before,
  html body.route-ask.ai-has-messages .rc-input:empty::before,
  html body .ai-view .rc-input:empty::before {
    line-height: 24px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #7a7a79 !important;
    text-align: left !important;
  }

  /* Model chip: fit "Sonnet 4.5" plus company icon */
  html body.route-ask .rc-chip--model-mobile,
  html body.route-ask.ai-has-messages .rc-chip--model-mobile,
  html body .ai-view .rc-chip--model-mobile {
    max-width: 140px !important;
    gap: 5px !important;
    padding: 4px 10px !important;
  }
  html body.route-ask .rc-chip--model-mobile .rc-chip-model-ico,
  html body .ai-view .rc-chip--model-mobile .rc-chip-model-ico {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }
  html body.route-ask .rc-chip--model-mobile .rc-chip-model-ico svg,
  html body .ai-view .rc-chip--model-mobile .rc-chip-model-ico svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
  }

  /* v41.77: mobile bottom-sheet model picker */
  #rc-model-sheet .rc-model-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9998;
    animation: rcModelSheetFadeIn 160ms ease-out;
  }
  #rc-model-sheet .rc-model-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #1c1c1e;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)) 16px;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: rcModelSheetSlideUp 220ms ease-out;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
  }
  #rc-model-sheet .rc-model-sheet-handle {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    margin: 6px auto 12px auto;
  }
  #rc-model-sheet .rc-model-sheet-title {
    font-size: 17px;
    font-weight: 600;
    color: #F3F2EF;
    margin-bottom: 8px;
    padding: 0 4px;
  }
  #rc-model-sheet .rc-model-sheet-group {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin: 14px 4px 6px 4px;
  }
  #rc-model-sheet .rc-model-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 12px;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: #F3F2EF;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
  }
  #rc-model-sheet .rc-model-sheet-item:hover,
  #rc-model-sheet .rc-model-sheet-item:active {
    background: rgba(255,255,255,0.06);
  }
  #rc-model-sheet .rc-model-sheet-item--selected {
    background: rgba(33,150,243,0.08);
  }
  #rc-model-sheet .rc-model-sheet-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
  #rc-model-sheet .rc-model-sheet-ico svg {
    width: 18px;
    height: 18px;
  }
  #rc-model-sheet .rc-model-sheet-name {
    flex: 1 1 auto;
  }
  #rc-model-sheet .rc-model-sheet-check {
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  @keyframes rcModelSheetFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes rcModelSheetSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

/* Bottom sheet is mobile-only; hide on desktop */
@media (min-width: 821px) {
  #rc-model-sheet { display: none !important; }
}

/* ============================================================
 * v41.78 MOBILE FIX PACK: overlay consolidation for Bug B
 * ============================================================
 * Debug report `composer-fade-debug.md` (CDP pixel-diff) identified
 * that `.ai-view::before` / `.ai-view::after` has SIX overlapping
 * definitions in this file (lines 1450, 1471, 1550, 1568, 1746, 1773).
 * Four of them (1450/1471/1550/1568) use `position: absolute` inside
 * `.ai-view` at fixed offsets from its top/bottom. Because `.ai-view`
 * starts just below the topnav, these absolute overlays land at
 * ~y=60-100 in the viewport and paint a visible gradient BAND across
 * the mid-column of the answer text (the "MOVING TOP BAND" regression
 * called out in the audit comment at mobile-v2.css:3544).
 *
 * The two `position: fixed` rules at lines 1746 / 1773 already handle
 * proper topbar-clearance (opaque var(--ask-bg, #191A1A) behind the entire nav + a
 * 24px fade) and bottombar-clearance (same for the composer), so the
 * absolute-position overlays are redundant. They only survive because
 * they carry `.ai-has-messages` in the selector, giving them one
 * higher class-specificity than the fixed rules.
 *
 * Fix: neutralize the four absolute overlays with `content: none` at
 * a selector that matches or exceeds their specificity, declared LAST
 * so it wins. Keep the fixed topbar/bottombar overlays intact.
 */
@media (max-width: 820px) {
  html body.route-ask.ai-has-messages .ai-view::before,
  html body.route-ask.ai-has-messages .ai-view::after {
    /* These four absolute-position overlays at lines 1450, 1471, 1550,
       1568 are the mid-column fade band culprit. Remove the pseudo
       element entirely; the fixed overlays at 1746/1773 still paint
       the necessary topbar/bottombar clearance. */
    content: none !important;
    background: none !important;
  }
  /* Re-declare the fixed-position topbar clearance so it survives the
     `content: none` above. Uses the same specificity trick (adds
     `.ai-has-messages` so it matches the neutralizer) and !important
     on every declaration so it beats the earlier absolute-position
     rules at lines 1450 and 1550 (which use !important on position,
     top, and height). */
  html body.route-ask.ai-has-messages .ai-view::before {
    content: '' !important;
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: calc(env(safe-area-inset-top, 0px) + 88px) !important;
    pointer-events: none !important;
    z-index: 90 !important;
    background: linear-gradient(
      to bottom,
      var(--ask-bg, #191A1A) 0%,
      var(--ask-bg, #191A1A) calc(100% - 24px),
      transparent 100%
    ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  html body.route-ask.ai-has-messages .ai-view::after {
    content: '' !important;
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(env(safe-area-inset-bottom, 0px) + 100px) !important;
    pointer-events: none !important;
    z-index: 4 !important;
    background: linear-gradient(
      to top,
      var(--ask-bg, #191A1A) 0%,
      var(--ask-bg, #191A1A) calc(100% - 24px),
      transparent 100%
    ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  /* v41.78: consolidate `.ai-messages` mask-image. All six earlier
     rules already resolve to `mask-image: none` (the winning rule at
     line 2013 explicitly sets none). Re-declare here as the last-word
     no-op with the highest specificity so it stays that way even if
     a future rule reintroduces a mask. */
  html body .ai-view .ai-messages,
  html body.ai-has-messages .ai-view .ai-messages,
  html body.route-ask .ai-messages,
  html body.route-ask.ai-has-messages .ai-messages,
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
}

/* ============================================================
 * v41.82 — Mobile sidebar drawer
 * Tap avatar in mobile topbar → sidebar slides in from left as
 * an overlay drawer, backdrop dims the app. Content = same
 * sidebar as desktop (nav, quick items including Model Lab,
 * history, footer).
 * ============================================================ */
@media (max-width: 820px) {
  /* Base state: reveal the desktop sidebar in an overlay when open */
  html body.mobile-sidebar-open .sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 82vw !important;
    max-width: 320px !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 2147483000 !important;
    background: var(--ntl-main, #0b0d11) !important;
    border-right: 1px solid var(--ntl-sep, rgba(255,255,255,0.06)) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(0);
    transition: transform 200ms ease;
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  }

  /* Backdrop */
  html body.mobile-sidebar-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2147482999;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    animation: mobile-sidebar-backdrop-in 180ms ease;
  }
  @keyframes mobile-sidebar-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* When drawer is open, freeze scroll on body */
  html body.mobile-sidebar-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Ensure quick nav items (incl. Model Lab) render inside drawer */
  html body.mobile-sidebar-open aside.sidebar .sidebar-quick-nav,
  html body.mobile-sidebar-open aside.sidebar .sidebar-quick-item {
    display: flex !important;
  }
  /* Model Lab entry stays owner-gated by inline style; only unhide it
     when app.js already set display: '' on it after loading profile. */
}

/* ============================================================
 * v41.82 — Mobile topbar backdrop strip via #mobile-topbar-veil
 * The floating pill topbar is transparent by design (Safari
 * status-bar bleed prevention). Content ghosts up through the
 * pill area on Predictions/Model Lab. A pre-existing body::before
 * fade exists but is overridden by a catch-all body::before killer.
 * We add a dedicated fixed element instead of fighting specificity.
 * app.js injects <div id="mobile-topbar-veil"> at boot.
 *
 * v41.90 fix: z-index was 998 -- ABOVE the mobile-topnav (z:120-130),
 * so the veil's opaque top band + fade was overlaying the pill chips
 * (avatar, Chat, Dashboards, kebab) and rendering them at ~30% opacity.
 * Move the veil to z:100 so it stays above page content but below the
 * topnav. Also add a defensive guard so the topnav and its chips are
 * always at full opacity, no mask, no filter -- scoped to the topnav
 * only so it cannot affect other legitimate fades (Chat composer, etc).
 * ============================================================ */
@media (max-width: 820px) {
  html body #mobile-topbar-veil {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(env(safe-area-inset-top, 0px) + 72px);
    z-index: 100; /* above page content, BELOW nav.mobile-topnav (z:120-130) */
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      var(--ntl-main, var(--ask-bg, #191A1A)) 0%,
      var(--ntl-main, var(--ask-bg, #191A1A)) 62%,
      rgba(25, 26, 26, 0.72) 82%,
      rgba(25, 26, 26, 0.0) 100%
    );
  }
  /* Hide veil on Ask (its composer covers top) and Auth pages */
  html body.route-ask #mobile-topbar-veil,
  html body.is-auth-page #mobile-topbar-veil {
    display: none;
  }

  /* v41.90: Defensive guard for the mobile topnav and every chip inside.
     Nothing should fade, mask, blur, or dim the topbar controls. Scoped
     to nav.mobile-topnav only so composer fades / hood fades etc are
     untouched. */
  html body nav.mobile-topnav,
  html body nav.mobile-topnav.mobile-topnav--v1940,
  html body nav.mobile-topnav .mt-avatar-chip,
  html body nav.mobile-topnav .mt-kebab-chip,
  html body nav.mobile-topnav .mt-switch,
  html body nav.mobile-topnav .mt-switch-opt {
    opacity: 1 !important;
    filter: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    -webkit-mask: none !important;
            mask: none !important;
    mix-blend-mode: normal !important;
  }
}
@media (min-width: 821px) {
  #mobile-topbar-veil { display: none !important; }
}