/* ==========================================================================================
   Dandelion CRM on the phone — header area of the 2026-10-21 round (owner, page by page):
   the top bar (item 1), the in-page titles (2), the ONE menu #dnm-menu (3 + «۲ مدل منو داریم،
   منوی سایدبار رو حذف کن»), no glass (4), the side gap (6). Items 5 (the "Search" word buttons)
   live in the Marketing Hub app (/hub, its own repo), not here.
   Contract of core.css: every rule inside @media (max-width: 900px), scoped
   html.ui-2026 body:not(#dn26); above 900px nothing here matches. Tokens only, logical
   properties, dark mode through the same tokens. The JS half is assets/js/mobile/header.js.
   ========================================================================================== */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26){ --dnm-menu-w: min(84vw, 340px); }

  /* ======================================================================== 1. the top bar
     ChatGPT-app bar: the start EMPTY (owner, later the same day: «تو گوشی همبرگری پایین که زیرش
     نوشته More اون بمونه، بقیه بره» - no hamburger, the tab bar's More is the only way to the menu),
     the Personal / Organization pill in the middle on EVERY page (the dashboard too), the bell at
     the end. Nothing else. */
  html.ui-2026 body:not(#dn26) #topbar{
    position: sticky; top: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-left: max(var(--dnm-gutter), var(--dn-safe-left, 0px)) !important;
    padding-right: max(var(--dnm-gutter), var(--dn-safe-right, 0px)) !important;
    border-bottom: 0 !important;
  }
  html.ui-2026 body:not(#dn26) #topbar :is(#menu-toggle, .topbar-brand, #page-title, #topbar-date, #dn-crumbs, #dn-topbar-search, #assistant-fab,
    #pwa-install-chip, #topbar-theme-btn, #topbar-add-lead-btn, .dsw-divider, #workspace-switcher){ display: none !important; }
  html.ui-2026 body:not(#dn26) #topbar .topbar-leading{ flex: 0 0 auto !important; min-width: 0; gap: 0 !important; }
  html.ui-2026 body:not(#dn26) #topbar .topbar-actions{ flex: 0 0 auto !important; margin: 0; gap: 0 !important; }
  /* the bell: a 44px circle on the soft surface (ui.css r88 sizes it 44px with !important too) */
  html.ui-2026 body:not(#dn26) #topbar #topbar-alert-btn{
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: var(--dnm-ctrl) !important; min-width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; min-height: var(--dnm-ctrl) !important;
    flex: 0 0 var(--dnm-ctrl) !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; border-radius: 50% !important;
    background: var(--dnm-soft) !important; color: var(--text) !important; box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  html.ui-2026 body:not(#dn26) #topbar #topbar-alert-btn:active{ transform: scale(.96); }
  html.ui-2026 body:not(#dn26) #topbar #topbar-alert-btn svg{ width: 20px !important; height: 20px !important; }
  html.ui-2026 body:not(#dn26) #topbar #alert-bell-wrap{ flex: 0 0 auto; }
  /* the pill: centred in the bar, its icon look (the words stay the buttons' names), on the dashboard as well
     (ui.css: body[data-page="dashboard"] #dash-scope-switch{display:none}; the hero's copy #dash-scope-switch-m goes) */
  html.ui-2026 body:not(#dn26) #topbar #dash-scope-switch:not([hidden]){
    display: flex !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 1;
  }
  html.ui-2026 body:not(#dn26) #topbar #dash-scope-switch .dsw-seg{ padding: 3px; gap: 2px; border-radius: var(--dnm-pill); background: var(--dnm-soft); border: 0; }
  html.ui-2026 body:not(#dn26) #topbar #dash-scope-switch .dsw-btn{
    display: inline-flex !important; align-items: center; justify-content: center; min-width: 52px; height: 36px; padding: 0 14px !important;
    border-radius: var(--dnm-pill); color: var(--text-muted); font-size: 12px !important;
  }
  html.ui-2026 body:not(#dn26) #topbar #dash-scope-switch .dsw-btn.is-on{ background: var(--surface); color: var(--text); border-color: transparent; box-shadow: 0 1px 3px rgba(0,0,0,.10); }
  html.ui-2026 body:not(#dn26) #topbar #dash-scope-switch .dsw-ic{ display: block !important; width: 20px; height: 20px; }
  html.ui-2026 body:not(#dn26) #topbar #dash-scope-switch .dsw-lbl{ display: none !important; }
  html.ui-2026 body:not(#dn26) #dash-scope-switch-m{ display: none !important; }

  /* ======================================================================== 3. the ONE menu
     The old sidebar never shows on the phone (toggleSidebar is wrapped; this is the belt): off
     the edge, invisible, untouchable. Its overlay too. The desktop (>900px) keeps both. */
  html.ui-2026 body:not(#dn26) #sidebar,
  html.ui-2026 body:not(#dn26) #sidebar.open{ transform: translateX(-100%) !important; visibility: hidden !important; pointer-events: none !important; box-shadow: none !important; }
  html.ui-2026[dir="rtl"] body:not(#dn26) #sidebar,
  html.ui-2026[dir="rtl"] body:not(#dn26) #sidebar.open{ transform: translateX(100%) !important; }
  html.ui-2026 body:not(#dn26) #sidebar-overlay{ display: none !important; }

  /* the scrim over the pushed-aside page */
  html.ui-2026 body:not(#dn26) .dnm-menu-scrim{
    position: fixed; inset: 0; z-index: 1299; background: rgba(0,0,0,.28); opacity: 0;
    transition: opacity .32s cubic-bezier(.32,.72,0,1); touch-action: none;
  }
  html.ui-2026 body:not(#dn26) .dnm-menu-scrim.is-on{ opacity: 1; }
  /* the panel: white (var(--surface)) from the start edge, slides in; the page behind translates aside with a
     rounded corner (clip-path, not overflow: the sticky top bar must keep its scroll container) */
  html.ui-2026 body:not(#dn26) .dnm-menu{
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: var(--dnm-menu-w); z-index: 1300;
    display: flex; flex-direction: column;
    background: var(--surface); color: var(--text);
    padding-top: var(--dn-safe-top, 0px);
    box-shadow: 0 0 40px rgba(0,0,0,.16);
    transform: translateX(-100%); transition: transform .32s cubic-bezier(.32,.72,0,1);
    overscroll-behavior: contain;
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) .dnm-menu{ transform: translateX(100%); }
  html.ui-2026 body:not(#dn26) .dnm-menu.is-on{ transform: none; }
  html.ui-2026 body:not(#dn26) #main,
  html.ui-2026 body:not(#dn26) #mobile-bottom-nav{ transition: transform .32s cubic-bezier(.32,.72,0,1); }
  html.ui-2026.dnm-menu-open body:not(#dn26) #main{
    transform: translateX(var(--dnm-menu-w)); clip-path: inset(0 round 22px 0 0 22px);
  }
  html.ui-2026.dnm-menu-open body:not(#dn26) #mobile-bottom-nav{ transform: translateX(var(--dnm-menu-w)); }
  html.ui-2026.dnm-menu-open[dir="rtl"] body:not(#dn26) #main{ transform: translateX(calc(-1 * var(--dnm-menu-w))); clip-path: inset(0 round 0 22px 22px 0); }
  html.ui-2026.dnm-menu-open[dir="rtl"] body:not(#dn26) #mobile-bottom-nav{ transform: translateX(calc(-1 * var(--dnm-menu-w))); }
  html.ui-2026.dnm-menu-open body:not(#dn26) :is(#crm-fab, .toast-container){ display: none !important; }
  html.ui-2026.dnm-menu-open{ overflow: hidden; }
  html.ui-2026.dnm-menu-open body:not(#dn26){ overflow: hidden; }

  /* top row: the brand word + the round search button */
  html.ui-2026 body:not(#dn26) .dnm-menu-top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px var(--dnm-gutter) 6px; flex: 0 0 auto; }
  html.ui-2026 body:not(#dn26) .dnm-menu-top .dnm-menu-search{ width: var(--dnm-ctrl) !important; min-width: var(--dnm-ctrl) !important; max-width: var(--dnm-ctrl); height: var(--dnm-ctrl) !important; flex: 0 0 var(--dnm-ctrl) !important; margin: 0; }
  html.ui-2026 body:not(#dn26) .dnm-menu-brand{ font-family: var(--font-display, inherit); font-size: 22px; font-weight: 700; letter-spacing: var(--dn-tracking-display, -.01em); color: var(--text); }
  /* the rows: tall, generous, no dividers; grey line icon, black text */
  html.ui-2026 body:not(#dn26) .dnm-menu-body{ flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 10px calc(84px + var(--dn-safe-bottom, 0px)); overscroll-behavior: contain; }
  html.ui-2026 body:not(#dn26) .dnm-menu-sec{ padding-top: 6px; }
  html.ui-2026 body:not(#dn26) .dnm-menu-sec + .dnm-menu-sec{ padding-top: 14px; }
  html.ui-2026 body:not(#dn26) .dnm-menu-cap{ padding: 8px 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
  html.ui-2026[dir="rtl"] body:not(#dn26) .dnm-menu-cap{ text-transform: none; letter-spacing: 0; font-size: 13px; }
  html.ui-2026 body:not(#dn26) .dnm-menu-row{
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 12px; margin: 0;
    border: 0; border-radius: 14px; background: transparent; color: var(--text);
    font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.25; text-align: start; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html.ui-2026 body:not(#dn26) .dnm-menu-row:active{ background: var(--dnm-soft); }
  html.ui-2026 body:not(#dn26) .dnm-menu-row.is-on{ background: var(--dnm-soft); font-weight: 600; }
  html.ui-2026 body:not(#dn26) .dnm-menu-row.is-danger{ color: var(--danger, #B03E30); }
  html.ui-2026 body:not(#dn26) .dnm-menu-row.is-danger .dnm-menu-ic{ color: inherit; }
  html.ui-2026 body:not(#dn26) .dnm-menu-ic{ display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 auto; color: var(--text-muted); }
  html.ui-2026 body:not(#dn26) .dnm-menu-ic svg{ width: 22px !important; height: 22px !important; stroke: currentColor; fill: none; }
  html.ui-2026 body:not(#dn26) .dnm-menu-lbl{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) .dnm-menu-badge{
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; flex: 0 0 auto;
    border-radius: var(--dnm-pill); background: var(--danger, #B03E30); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
  }
  html.ui-2026 body:not(#dn26) .dnm-menu-badge[hidden]{ display: none; }
  /* the language switch inside its row */
  html.ui-2026 body:not(#dn26) .dnm-menu-lang{ cursor: default; }
  html.ui-2026 body:not(#dn26) .dnm-menu-lang:active{ background: transparent; }
  html.ui-2026 body:not(#dn26) .dnm-menu-seg{ display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--dnm-pill); background: var(--dnm-soft); flex: 0 0 auto; }
  html.ui-2026 body:not(#dn26) .dnm-menu-seg-btn{
    min-width: 40px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--dnm-pill); background: transparent; color: var(--text-muted);
    font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html.ui-2026 body:not(#dn26) .dnm-menu-seg-btn.is-on{ background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
  /* bottom: the floating primary pill at the start, the round gear at the end - over the list, which scrolls under them */
  html.ui-2026 body:not(#dn26) .dnm-menu-foot{
    position: absolute; inset-inline: 0; bottom: 0; z-index: 2; pointer-events: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px var(--dnm-gutter) calc(14px + var(--dn-safe-bottom, 0px));
    background: linear-gradient(to top, var(--surface) 55%, transparent);
  }
  html.ui-2026 body:not(#dn26) .dnm-menu-foot > *{ pointer-events: auto; }
  html.ui-2026 body:not(#dn26) .dnm-menu-new{
    display: inline-flex !important; align-items: center; gap: 8px; height: 48px; min-height: 48px; padding: 0 20px 0 16px !important;
    border-radius: var(--dnm-pill) !important; font-size: 15px !important; font-weight: 600; box-shadow: 0 8px 22px rgba(0,0,0,.16) !important;
  }
  html.ui-2026 body:not(#dn26) .dnm-menu-new svg{ width: 20px; height: 20px; }
  html.ui-2026 body:not(#dn26) .dnm-menu-gear{ width: 48px; height: 48px; }
  html.ui-2026 body:not(#dn26) .dnm-menu-gear svg{ width: 22px; height: 22px; }

  /* ======================================================================== 2. the in-page titles
     The big page heading leaves the phone; a button that sat beside it stays, at the end of that
     row; the caption under it goes too (owner: no explanatory text). Selectors are the pages' own. */
  html.ui-2026 body:not(#dn26) :is(
    #page-customers .crm-dl-head .crm-dl-title > h2, #page-customers .crm-dl-head .crm-dl-count,
    #page-properties .prp-head > .prp-title,
    #page-cold-calling .cc-head .cc-title-row > h1.cc-title,
    #page-owners .own-header .own-title-row,
    #page-developers .dev-topbar > h1.dev-topbar-title,
    #page-settings header.settings-pro-header,
    #page-agent-tracker .at-page-head > div:has(> h2),
    #page-transactions .txn-header > div:has(> h1),
    #page-analytics .an-hdr > h1.an-title,
    #page-analytics .kpi-header > .kpi-header-left,
    #page-ideas header.ideas-head,
    #page-learn h1.page-title,
    #page-doc-cloud .dc-head .dc-title > div:has(> h1),
    #page-contracts .contracts-header > div:has(> h1),
    #page-work-projects .wc-head > .wc-head-title,
    #page-users .ac-header > div:has(> h2),
    #page-help .hlp-hero > h1, #page-help .hlp-hero > .hlp-hero-dandelion,
    #page-alerts h2.agl-title,
    #page-customer-chats .wai-head > .wai-head-text,
    #page-calls .calls-head > div:has(> h1),
    #page-todos .ztask-hero > div:has(> h1),
    #page-notes .notes-header > h2,
    #page-search .pf-mainhead .pf-mainhead-t > h2,
    .stab-page-sub
  ){ display: none !important; }
  /* the row the title left: what remains sits at its end */
  html.ui-2026 body:not(#dn26) :is(
    #page-customers .crm-dl-head .crm-dl-title,
    #page-properties .prp-head,
    #page-cold-calling .cc-head .cc-head-actions,
    #page-owners header.own-header,
    #page-developers .dev-topbar,
    #page-agent-tracker .at-page-head,
    #page-transactions header.txn-header,
    #page-analytics .an-hdr,
    #page-analytics .kpi-header,
    #page-contracts .contracts-header,
    #page-users .ac-header,
    #page-help .hlp-hero,
    #page-alerts div:has(> h2.agl-title),
    #page-customer-chats header.wai-head,
    #page-calls header.calls-head,
    #page-todos header.ztask-hero,
    #page-notes .notes-header
  ){ display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: flex-end !important; gap: 8px; min-height: 0; }
  html.ui-2026 body:not(#dn26) :is(#page-developers .dev-topbar > .dev-topbar-actions, #page-analytics .kpi-header > .kpi-header-right){
    margin-inline-start: auto !important; width: auto !important; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px;
  }
  html.ui-2026 body:not(#dn26) #page-customers .crm-dl-head .crm-dl-title:not(:has(> .crm-del-bin)){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-owners header.own-header > div:first-child:empty,
  html.ui-2026 body:not(#dn26) #page-owners header.own-header > div:first-child:not(:has(:not(.own-title-row))){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-help .hlp-hero{ padding: 0 0 12px !important; min-height: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
  /* Attendance: the CRM-health pill is the only thing left in the row - compact, at the end, and not at all while it is
     still "Checking CRM…" (the loading state is a bare pill until the PMS answers; reviewer 2026-10-21) */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-page-head > #at-crm-health{ margin-inline: auto 0 !important; max-width: 100%; white-space: normal; font-size: 12px; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-page-head > #at-crm-health.is-loading,
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-page-head:has(> #at-crm-health.is-loading){ display: none !important; }
  /* Contracts: ui.css (max-width:640px) stretches `.contracts-header > .btn` to a full-width bar - a button at the end instead */
  html.ui-2026 body:not(#dn26) #page-contracts .contracts-header > .btn{ flex: 0 0 auto !important; width: auto !important; }
  /* Customer chats: wa-inbox.css gives .wai-head-actions width:100% on the phone, so its buttons sat at the start; the group
     keeps its own width at the row's end and wraps towards the end. Settings is a tool button: icon only (item 35). */
  html.ui-2026 body:not(#dn26) #page-customer-chats .wai-head-actions{ width: auto !important; max-width: 100%; margin-inline-start: auto; justify-content: flex-end; }
  html.ui-2026 body:not(#dn26) #page-customer-chats #wai-pause-slot{ justify-content: flex-end; }
  html.ui-2026 body:not(#dn26) #page-customer-chats .wai-head-actions > #wai-settings-btn{ width: var(--dnm-ctrl); min-width: var(--dnm-ctrl); height: var(--dnm-ctrl); padding: 0; gap: 0; border-radius: 50%; }
  html.ui-2026 body:not(#dn26) #page-customer-chats .wai-head-actions > #wai-settings-btn > span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #page-customer-chats .wai-head-actions > #wai-settings-btn svg{ width: 20px; height: 20px; }
  html.ui-2026 body:not(#dn26) #page-todos header.ztask-hero,
  html.ui-2026 body:not(#dn26) #page-transactions header.txn-header{ padding-top: 0 !important; }

  /* ======================================================================== 4. no glass
     A bar that content scrolls under stays flat and opaque. core.css did the top bar, the tab bar
     and the common heads; the rest of ui-2026-phone.css's blurred, see-through strips: */
  html.ui-2026 body:not(#dn26) :is(.crm-dl-head, .own-toolbar, .lead-modal .lm-section-title, .lead-modal .deal-assign-head, .lead-modal .lm-mbar,
    .own-panel-body .own-panel-section > h3, .ztask-detail-body section > h3, .ztask-detail-foot, #small-modal .dt-dsec h5,
    .at-tabs, .cc-head, .cc-tabs, .cc-sticky, .crm-pagetabs, .dnm-drawer, .dnm-menu, #alert-bell-panel, .qc-menu){
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html.ui-2026 body:not(#dn26) :is(.crm-dl-head, .own-toolbar, .at-tabs){ background: var(--bg) !important; }
  /* the top bar itself: dashboard-design.css loads AFTER core.css and paints it glass again (--dg-glass-soft + blur,
     !important, same specificity) - one more id outranks it */
  html.ui-2026 body:not(#dn26) #main > #topbar{ background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.ui-2026 body:not(#dn26) :is(.lead-modal .lm-section-title, .lead-modal .deal-assign-head, .lead-modal .lm-mbar, .own-panel-body .own-panel-section > h3,
    .ztask-detail-body section > h3, .ztask-detail-foot, #small-modal .dt-dsec h5){ background: var(--surface) !important; }

  /* ======================================================================== 6. one side gap
     core.css gives every #content > .page the 16px gutter; the strips that stepped outside it
     (a -12px bleed from the classic phone rules) sit back on the same edge. */
  html.ui-2026 body:not(#dn26) :is(#page-agent-tracker .at-tabs, #page-agent-tracker .at-page-head, #page-todos .ztask-tabs, #page-notes .notes-tabs, #page-transactions .txn-period-tabs, #page-calendar .zcal-wrap){
    margin-inline: 0 !important; max-width: 100%;
  }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-period-tabs{ overflow-x: auto; scrollbar-width: none; }
  html.ui-2026 body:not(#dn26) .crm-pagetabs{ margin-inline: 0 !important; max-width: 100% !important; }
}

/* Owner 2026-10-22: the AI assistant's round icon at the start of the top bar (where the hamburger was), the bell at the end */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #topbar .dnm-ai{
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: var(--dnm-ctrl) !important; min-width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important;
    flex: 0 0 var(--dnm-ctrl) !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; border-radius: 50% !important; background: var(--dnm-soft) !important; color: var(--text) !important; box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  html.ui-2026 body:not(#dn26) #topbar .dnm-ai svg{ width: 20px !important; height: 20px !important; }
  html.ui-2026 body:not(#dn26) #topbar .dnm-ai:active{ transform: scale(.96); }
  html.ui-2026 body[data-page="assistant"]:not(#dn26) #topbar .dnm-ai{ background: var(--text) !important; color: var(--surface, #fff) !important; }
}

/* Owner 2026-10-22 («لبه‌های منو مثل ChatGPT»): the pushed page stays bright - no dark scrim - with a 36px rounded edge on a
   light canvas and a soft shadow along it, the menu itself flush (no line, no shadow), and a round close button on the
   page's edge. The scrim element stays (tap outside closes, Back pops it) but is see-through; its inset shadow is the edge. */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) .dnm-menu-scrim{ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  /* the scrim lies exactly over the pushed page (not the whole screen): its rounded start edge, a hairline and a soft inner
     shadow draw the page's curve against the menu's white (owner 2026-10-22: «سمت سایدبار سفید رنگ سایدبار باشه که کرو خودش رو نشون بده») */
  html.ui-2026 body:not(#dn26) .dnm-menu-scrim{ inset: 0 0 0 var(--dnm-menu-w) !important; border-radius: 36px 0 0 36px; }
  html.ui-2026[dir="rtl"] body:not(#dn26) .dnm-menu-scrim{ inset: 0 var(--dnm-menu-w) 0 0 !important; border-radius: 0 36px 36px 0; }
  html.ui-2026 body:not(#dn26) .dnm-menu-scrim.is-on{ box-shadow: inset 1px 0 0 var(--border, rgba(0,0,0,.12)), inset 14px 0 26px -18px rgba(0,0,0,.22); }
  html.ui-2026[dir="rtl"] body:not(#dn26) .dnm-menu-scrim.is-on{ box-shadow: inset -1px 0 0 var(--border, rgba(0,0,0,.12)), inset -14px 0 26px -18px rgba(0,0,0,.22); }
  html.ui-2026 body:not(#dn26) .dnm-menu{ box-shadow: none !important; border: 0 !important; }
  html.ui-2026.dnm-menu-open body:not(#dn26){ background: var(--surface) !important; }   /* the canvas is the menu's own white */
  html.ui-2026.dnm-menu-open body:not(#dn26) #main{ clip-path: inset(0 round 36px 0 0 36px); background: var(--bg, var(--surface)); }
  html.ui-2026.dnm-menu-open[dir="rtl"] body:not(#dn26) #main{ clip-path: inset(0 round 0 36px 36px 0); }
  html.ui-2026.dnm-menu-open body:not(#dn26) #mobile-bottom-nav{ clip-path: inset(0 round 0 0 0 36px); }
  html.ui-2026.dnm-menu-open[dir="rtl"] body:not(#dn26) #mobile-bottom-nav{ clip-path: inset(0 round 0 0 36px 0); }
  /* the round close button on the pushed page's edge (ChatGPT's sidebar glyph) */
  html.ui-2026 body:not(#dn26) .dnm-menu-close{
    position: fixed; top: calc(var(--dn-safe-top, 0px) + 12px); inset-inline-start: calc(var(--dnm-menu-w) + 12px); z-index: 100001;
    width: var(--dnm-ctrl); height: var(--dnm-ctrl); border-radius: 50%; border: 0; padding: 0; background: var(--surface); color: var(--text);
    box-shadow: 0 2px 12px rgba(0,0,0,.14); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
    opacity: 0; transform: scale(.9); pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  }
  html.ui-2026.dnm-menu-open body:not(#dn26) .dnm-menu-close{ opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
  html.ui-2026 body:not(#dn26) .dnm-menu-close svg{ width: 22px; height: 22px; }
  html.ui-2026 body:not(#dn26) .dnm-menu-close:active{ transform: scale(.94); }
}

/* ===== Owner-style review at 390px (2026-10-22): the top bar, the tab bar, the menu, and the shared pieces of Chats,
   Contracts, Help and Alerts ===== */
@media (max-width: 900px){
  /* the top bar on the ONE side gap: ui-2026-phone.css (body:is(.light,.dark) #topbar, 10px) outranked the 16px above */
  html.ui-2026 body:not(#dn26) #main > #topbar{
    padding-left: max(var(--dnm-gutter), var(--dn-safe-left, 0px)) !important;
    padding-right: max(var(--dnm-gutter), var(--dn-safe-right, 0px)) !important;
  }
  /* the tab bar: the lit label keeps the others' weight and size, so "Dashboard" stays inside its cell */
  html.ui-2026 body:not(#dn26) #mobile-bottom-nav .mbn-btn .mbn-label,
  html.ui-2026 body:not(#dn26) #mobile-bottom-nav .mbn-btn.active .mbn-label{
    font-weight: 500 !important; font-size: 11px !important; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* the More tab sits at the very end of the bar: its badge hangs from the end edge of its cell, so "99+" is never cut by the screen's
     edge (it was, at 360px - the badge started right of the icon's middle and ran past the screen) - mobile fix 1 / TestFlight 17 */
  html.ui-2026 body:not(#dn26) #mobile-bottom-nav #mbn-more-badge{
    inset-inline-start: auto !important; inset-inline-end: 2px !important; top: 2px !important;
    min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; font-size: 10px;
  }

  /* (2026-10-22 review pass: the menu stays the owner's approved ChatGPT drawer - the page pushed aside with its rounded
     edge on white and the round close button on that edge; the review's full-screen variant was taken back) */
  html.ui-2026 body:not(#dn26) .dnm-menu-top-end{ display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  /* the footer is solid with a hairline, the list ends above it */
  html.ui-2026 body:not(#dn26) .dnm-menu-body{ padding-bottom: calc(88px + var(--dn-safe-bottom, 0px)); }

  /* ---- Customer chats ---- */
  /* the head: Pause and Links & QR are round icon tools like Settings; the explanatory banner leaves */
  html.ui-2026 body:not(#dn26) #page-customer-chats .wai-head-actions{ flex-wrap: nowrap; gap: 8px; }
  html.ui-2026 body:not(#dn26) #page-customer-chats .wai-head-actions :is(#wai-pause-btn, #wai-links-btn){
    width: var(--dnm-ctrl); min-width: var(--dnm-ctrl); height: var(--dnm-ctrl); padding: 0; gap: 0; border-radius: 50%; justify-content: center; position: relative;
  }
  html.ui-2026 body:not(#dn26) #page-customer-chats .wai-head-actions :is(#wai-pause-btn, #wai-links-btn) > span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #page-customer-chats .wai-head-actions :is(#wai-pause-btn, #wai-links-btn) svg{ width: 20px; height: 20px; }
  html.ui-2026 body:not(#dn26) #page-customer-chats #wai-links-btn{ background: var(--dnm-soft); color: var(--text); border: 0; }
  /* the assistant switch: the sparkle, with its state as a dot on the corner (amber ring when paused) */
  html.ui-2026 body:not(#dn26) #page-customer-chats #wai-pause-btn{ background: var(--dnm-soft); color: var(--text); border: 0; }
  html.ui-2026 body:not(#dn26) #page-customer-chats #wai-pause-btn.is-paused{ background: var(--warn-tint); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
  html.ui-2026 body:not(#dn26) #page-customer-chats #wai-pause-btn > svg{ display: block; }
  html.ui-2026 body:not(#dn26) #page-customer-chats #wai-pause-btn > .wai-asst-dot{ position: absolute; inset-block-start: 7px; inset-inline-end: 7px; width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--surface); }
  html.ui-2026 body:not(#dn26) #page-customer-chats #wai-settings-btn > .wai-go{ display: none; }
  /* paused: the bar keeps "Assistant paused" and Resume on one line (who paused it and when are on the desktop bar) */
  html.ui-2026 body:not(#dn26) #page-customer-chats .wai-pausebar{ padding-inline: 14px 6px; }
  html.ui-2026 body:not(#dn26) #page-customer-chats .wai-pausebar-text .wai-dim{ display: none; }
  html.ui-2026 body:not(#dn26) #page-customer-chats .wai-pausebar > .wai-btn{ min-height: 36px; border-radius: var(--dnm-pill); }
  html.ui-2026 body:not(#dn26) #page-customer-chats #wai-banner{ display: none !important; }
  /* the list: one surface (no second bordered box), the four tabs fit, no "All" chip (the chip that is on turns off = all) */
  html.ui-2026 body:not(#dn26) #wai-root > .wai-body{ border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  /* the views: the segmented track runs gutter to gutter (wa-inbox.css shares the width and keeps the chosen view whole;
     no flex here - one more rule on the tabs would outrank its "the chosen view never shrinks") */
  html.ui-2026 body:not(#dn26) #wai-root .wai-list-pane > .wai-tabs{ margin-inline: 0 !important; padding: 3px !important; gap: 2px; overflow: hidden !important; }
  html.ui-2026 body:not(#dn26) #wai-root .wai-list-pane > .wai-tabs > .wai-tab{ padding-inline: 6px; font-size: 13px; }
  /* 320px phones (iPhone SE with Display Zoom, small Androids): all four views still whole */
  @media (max-width: 359px){
    html.ui-2026 body:not(#dn26) #wai-root .wai-list-pane > .wai-tabs > .wai-tab{ padding-inline: 4px; font-size: 12px; gap: 3px; }
  }
  html.ui-2026 body:not(#dn26) #wai-root .wai-chips > .wai-chip[data-channel=""]{ display: none !important; }
  /* an open conversation is a full-screen page over the top bar and the tab bar */
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-thread-pane{
    position: fixed !important; inset: 0; z-index: 1150; height: var(--app-vh, 100dvh); max-height: none;
    border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding-top: var(--dn-safe-top, 0px); background: var(--surface);
  }
  /* the head: ‹ · name + the status pill on the first row, the actions on a second row at the end (always, so the pill is never
     cut and the head keeps one shape from chat to chat). The name is enough: no avatar here. */
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-th-head{ flex-wrap: wrap; padding: 8px var(--dnm-gutter); gap: 8px 10px; }
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-th-head > .wai-avatar{ display: none; }
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-th-who{ flex: 1 1 calc(100% - var(--dnm-ctrl) - 10px); min-width: 0; }
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-th-name{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-th-actions{ width: auto !important; flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; margin-inline-start: auto; }
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-th-actions .wai-btn{ flex: 0 0 auto !important; height: var(--dnm-ctrl); border-radius: var(--dnm-pill); white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open :is(.wai-back, .wai-th-actions .wai-info-btn){
    width: var(--dnm-ctrl) !important; min-width: var(--dnm-ctrl); height: var(--dnm-ctrl); padding: 0; border: 0; border-radius: 50% !important; background: var(--dnm-soft); color: var(--text); justify-content: center;
  }
  /* "Give back to assistant" (the one action when the chat is mine): a round icon, the assistant's sparkle; its words are its name.
     Give back as a second action and Open lead live in the "⋯" menu (data-dn-demote), which ui-2026.css sizes for the phone */
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-th-actions .wai-btn.wai-give{
    position: relative; width: var(--dnm-ctrl); min-width: var(--dnm-ctrl); padding: 0; gap: 0; color: var(--text); background: var(--dnm-soft); border: 0; border-radius: 50%; justify-content: center;
  }
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-th-actions .wai-give > span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-th-actions .wai-give > svg{ width: 20px; height: 20px; color: currentColor; }
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-th-actions .dn-ovf-btn{ width: var(--dnm-ctrl); height: var(--dnm-ctrl); border: 0; border-radius: 50%; background: var(--dnm-soft); color: var(--text); }
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-th-wrap{ flex: 1 1 auto; min-height: 0; }
  /* the thread is fixed over everything: the page behind it keeps no height of its own (it scrolled 138px under the thread) */
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open > .wai-body{ height: auto !important; min-height: 0 !important; }
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-composer{ padding-bottom: calc(8px + var(--dn-safe-bottom, 0px)); }
  html.ui-2026 body:not(#dn26) #wai-root.is-thread-open .wai-takebar .wai-btn{ height: 36px; min-height: 36px; border-radius: var(--dnm-pill); }
  /* Links & QR: no warning box, no caption, no footer Close (the × closes); the assistant's settings: no help lines, and the
     Discard / Save bar only while there is something to save, on one line */
  html.ui-2026 body:not(#dn26) :is(.wai-ld .wai-warn, .wai-ld-go .wai-dim, .wai-set .wai-hint, .wai-set .wai-warn, #wa-admin small, #wa-admin .wa-field-hint){ display: none !important; }
  html.ui-2026 body:not(#dn26) #small-modal.wai-ld-modal #small-modal-footer{ display: none !important; }
  /* (the gear opens Settings › Connections › WhatsApp, #wa-admin; the assistant's own settings card is .wai-set) */
  html.ui-2026 body:not(#dn26) :is(#wa-admin .wa-savebar, .wai-set .wai-savebar):not(.is-dirty):has(.settings-save-message:empty){ display: none !important; }
  html.ui-2026 body:not(#dn26) :is(#wa-admin .wa-savebar, .wai-set .wai-savebar){ flex-wrap: nowrap !important; gap: 8px; }
  html.ui-2026 body:not(#dn26) :is(#wa-admin .wa-savebar, .wai-set .wai-savebar) .settings-save-message{ display: none !important; }
  html.ui-2026 body:not(#dn26) :is(#wa-admin .wa-savebar, .wai-set .wai-savebar) .settings-save-btn{ flex: 1 1 0 !important; min-width: 0; white-space: nowrap; height: var(--dnm-ctrl); border-radius: var(--dnm-pill); }

  /* ---- Contracts ---- */
  /* a card is two rows: the icon + title (one line) + meta; then the status pill and round icon actions */
  html.ui-2026 body:not(#dn26) #page-contracts .contract-card{
    display: grid !important; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ic body body" "st st act";
    align-items: center; gap: 10px 12px; padding: 12px 14px !important; cursor: pointer;
  }
  html.ui-2026 body:not(#dn26) #page-contracts .contract-card > .cc-icon{ grid-area: ic; }
  html.ui-2026 body:not(#dn26) #page-contracts .contract-card > .cc-body{ grid-area: body; min-width: 0; width: auto !important; }
  html.ui-2026 body:not(#dn26) #page-contracts .contract-card .cc-title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; }
  html.ui-2026 body:not(#dn26) #page-contracts .contract-card .cc-meta{ display: flex; flex-wrap: wrap; gap: 2px 10px; overflow-wrap: normal !important; word-break: normal !important; }
  html.ui-2026 body:not(#dn26) #page-contracts .contract-card .cc-meta > span{ white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #page-contracts .contract-card > .sign-status{ grid-area: st; justify-self: start; margin: 0 !important; position: static !important; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #page-contracts .contract-card > .cc-actions{ grid-area: act; display: flex; gap: 8px; margin: 0 !important; width: auto !important; flex: 0 0 auto; justify-content: flex-end; }
  html.ui-2026 body:not(#dn26) #page-contracts .cc-action-btn{
    width: var(--dnm-ctrl); min-width: var(--dnm-ctrl); height: var(--dnm-ctrl); padding: 0 !important; gap: 0; border-radius: 50% !important;
    font-size: 0 !important; display: inline-flex; align-items: center; justify-content: center; background: var(--dnm-soft); border: 0 !important;
  }
  html.ui-2026 body:not(#dn26) #page-contracts .cc-action-btn svg{ width: 18px; height: 18px; }
  /* one New document button (the head's): the empty state's copy and the desktop drop zone leave (the zone stays in the page,
     invisible, so the header button can still open its file picker) */
  html.ui-2026 body:not(#dn26) #page-contracts #contracts-empty .dn-empty-cta{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-contracts #contract-upload-zone{
    position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; overflow: hidden !important; clip-path: inset(50%);
    padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0; pointer-events: none;
  }
  /* the new-document form: labels above full-width inputs, one column, standard inline padding; no technical summary */
  html.ui-2026 body:not(#dn26) #contract-create-form .form-row-2{ display: flex !important; flex-direction: column; gap: 0; }
  html.ui-2026 body:not(#dn26) #contract-create-form .form-group{ display: flex !important; flex-direction: column; align-items: stretch; gap: 6px; width: 100% !important; }
  html.ui-2026 body:not(#dn26) #contract-create-form .form-group > .form-label{ width: auto !important; margin: 0 !important; }
  html.ui-2026 body:not(#dn26) #contract-create-form .form-control{ width: 100% !important; max-width: none !important; margin: 0 !important; padding-inline: 12px !important; }
  html.ui-2026 body:not(#dn26) :is(#cpl-summary-chip, #cpl-overlay .cpl-hdr-sub, #cpl-overlay #cpl-field-info){ display: none !important; }

  /* ---- Help ---- */
  html.ui-2026 body:not(#dn26) #page-help .hlp-faq-q,
  html.ui-2026 body:not(#dn26) #page-help .hlp-faq-q > span{ text-align: start !important; }
  html.ui-2026 body:not(#dn26) #page-help .hlp-faq-q{ gap: 12px; }
  html.ui-2026 body:not(#dn26) #page-help .hlp-faq-q > span{ flex: 1 1 auto; min-width: 0; }
  /* the tour points at desktop areas: not offered on the phone (its card is themed in case it runs anyway) */
  html.ui-2026 body:not(#dn26) #page-help .hlp-tour-btn{ display: none !important; }
  html.ui-2026 body:not(#dn26) #tour-tooltip{
    background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: 0 12px 40px rgba(0,0,0,.18) !important;
    max-width: calc(100vw - 2 * var(--dnm-gutter)) !important; min-width: 0 !important; padding: 16px !important;
  }
  html.ui-2026 body:not(#dn26) #tour-tooltip #tour-step-title{ color: var(--text) !important; }
  html.ui-2026 body:not(#dn26) #tour-tooltip :is(#tour-step-desc, #tour-step-label){ color: var(--text-muted) !important; }
  html.ui-2026 body:not(#dn26) #tour-tooltip button{ white-space: nowrap; min-height: var(--dnm-ctrl); }
  html.ui-2026 body:not(#dn26) #tour-tooltip #tour-prev-btn{ background: var(--dnm-soft) !important; color: var(--text) !important; border-radius: var(--dnm-pill) !important; }
  html.ui-2026 body:not(#dn26) #tour-tooltip #tour-next-btn{ background: var(--brand, var(--text)) !important; color: var(--on-brand, var(--surface)) !important; border-radius: var(--dnm-pill) !important; }
  /* desktop pieces: keyboard shortcuts, the "N Stage" pills; quick access in two even columns; Settings-style section heads */
  html.ui-2026 body:not(#dn26) #page-help :is(.hlp-kbd-card, .hlp-accordion-pill){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-help .hlp-quick-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 1fr; gap: 8px !important; }
  html.ui-2026 body:not(#dn26) #page-help .hlp-quick-card{ min-height: 0 !important; height: auto; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 10px; padding: 12px !important; text-align: start; }
  html.ui-2026 body:not(#dn26) #page-help .hlp-quick-label{ white-space: normal; overflow-wrap: normal; word-break: normal; min-width: 0; text-align: start; line-height: 1.25; }
  html.ui-2026 body:not(#dn26) #page-help .hlp-section-title{ text-transform: none !important; letter-spacing: 0 !important; border-bottom: 0 !important; padding-bottom: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--text-muted) !important; margin-bottom: 8px !important; }

  /* ---- Alerts ---- */
  html.ui-2026 body:not(#dn26) #page-alerts #alerts-summary-line{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-alerts.dnm-attn-none #alerts-severity-chips,
  html.ui-2026 body:not(#dn26) #page-alerts.dnm-attn-none.dnm-has-notifs #alerts-content{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-alerts .agl-caption::after{ display: none !important; }
  /* a notification: the title and a short time on one line, the message the full width under them, unread = the dot only */
  html.ui-2026 body:not(#dn26) #page-alerts .agl-card.agl-notif{
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: baseline;
    position: relative; padding: 12px 14px 12px 22px !important; border: 1px solid var(--border) !important;
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) #page-alerts .agl-card.agl-notif{ padding: 12px 22px 12px 14px !important; }
  html.ui-2026 body:not(#dn26) #page-alerts .agl-card.agl-notif > .agl-card-body{ display: contents; }
  html.ui-2026 body:not(#dn26) #page-alerts .agl-card.agl-notif .agl-card-body > b{ grid-column: 1; grid-row: 1; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-alerts .agl-card.agl-notif > .agl-card-time{ grid-column: 2; grid-row: 1; font-size: 12px; }
  html.ui-2026 body:not(#dn26) #page-alerts .agl-card.agl-notif .agl-card-body > span{ grid-column: 1 / -1; grid-row: 2; }
  html.ui-2026 body:not(#dn26) #page-alerts .agl-card.agl-notif > .agl-card-dot{ position: absolute; top: 18px; inset-inline-start: 9px; }
  html.ui-2026 body:not(#dn26) #page-alerts .agl-card.agl-notif > .notif-src-link{ grid-column: 1; grid-row: 3; justify-self: start; }   /* the listing link under the message (owner 2026-11-02) */
  /* Mark all as read: a round icon tool (double check) */
  html.ui-2026 body:not(#dn26) #page-alerts #mark-read-btn{
    width: var(--dnm-ctrl) !important; min-width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: var(--dnm-soft) !important; color: var(--text) !important; font-size: 0 !important; line-height: 0; text-align: center;
  }
  html.ui-2026 body:not(#dn26) #page-alerts #mark-read-btn::before{
    content: ""; display: inline-block; width: 22px; height: 22px; vertical-align: middle; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12.5 6.5 17 15 8'/%3E%3Cpath d='m10.5 15.5 1.5 1.5L22 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12.5 6.5 17 15 8'/%3E%3Cpath d='m10.5 15.5 1.5 1.5L22 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* ---- Attendance / Daily report: the server-health pill is not for agents, in any state ---- */
  html.ui-2026 body:not(#dn26) #at-crm-health{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-page-head:not(:has(> :not(#at-crm-health):not(div:has(> h2)))){ display: none !important; }
}

@media (max-width: 900px){
  /* the drawer's own close is the round button on the page's edge (owner, ChatGPT style): no second × in the menu's head */
  html.ui-2026 body:not(#dn26) .dnm-menu .dnm-menu-x{ display: none !important; }
}

/* App TestFlight feedback 2026-10-23 (item 12): on the AI Assistant page the top bar's AI button is not shown - that page
   IS the AI chat (body[data-page] is set by showPage) */
@media (max-width: 900px){
  html.ui-2026 body[data-page="assistant"]:not(#dn26) #topbar .dnm-ai{ display: none !important; }
}