/* Generated domain stylesheet. */
@media (max-width: 1200px) { .chat-workspace { grid-template-columns: 1fr; } }

@media (max-width: 1100px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: static; } .metrics { grid-template-columns: repeat(2, 1fr); } .panel-grid { grid-template-columns: 1fr; } }

@media (max-width: 720px) { main { padding: 1rem; } .topbar, .section-heading, .actions-row, .topbar-actions { align-items: stretch; flex-direction: column; } .metrics, .form-grid, .provider-switch { grid-template-columns: 1fr; } .search { min-width: 0; } }

@media (max-width: 900px) { .directory-grid { grid-template-columns: 1fr 1fr; } .inbox-row { grid-template-columns: 1fr; } .inbox-row aside { justify-items: start; } }

@media (max-width: 620px) { .directory-grid { grid-template-columns: 1fr; } }

@media (max-width: 900px) { .inbox-row { grid-template-columns: auto 1fr; } .inbox-row em { grid-column: 2; justify-self: end; } .chat-toolbar { flex-direction: column; align-items: stretch; } }

@media (max-width: 1180px) { }

@media (max-width: 760px) { }

@media (max-width: 1200px) { .chat-workspace { grid-template-columns: 1fr; } .chat-list { max-height: none; border-right: 0; } }

@media (max-width: 760px) { .conversation-header { grid-template-columns: auto 1fr; } .conversation-header .status-pill { grid-column: 1 / -1; justify-self: start; } }

@media (max-width: 760px) { .toolbar-actions { justify-content: stretch; } .toolbar-actions .primary, .toolbar-actions .ghost { width: 100%; } }

@media (max-width: 480px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { padding: .7rem; gap: .65rem; }
  .brand-mark { width: 2.4rem; height: 2.4rem; }
  nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  nav a { justify-content: center; padding: .7rem .35rem; font-size: .72rem; gap: .25rem; }
  .sidebar-insight, .sidebar-card small { display: none; }
  body[data-active-view="inbox"] main { height: 100%; min-height: 0; }
  body[data-active-view="inbox"] [data-panel="inbox"].kanban-section { height: 100%; min-height: 0; }
  [data-panel="inbox"] > .section-heading { padding: .7rem; }
  [data-panel="inbox"] > .section-heading h2 { font-size: 1.2rem; }
  .search { width: 100%; order: 3; }
  .search input { width: 100%; }
  .chat-workspace { display: block; min-height: 0; }
  .chat-list { max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .conversation-header { padding: .7rem; grid-template-columns: auto 1fr; }
  .conversation-header h2 { font-size: 1rem; }
  .typing-line { padding: .5rem .7rem; font-size: .75rem; }
  .whats-thread { padding: .75rem; }
  .bubble { max-width: 88%; }

  .message-form input { min-height: 2.75rem; font-size: 16px; }
  .message-form .primary { min-width: 4.5rem; padding-inline: .8rem; }

  .quick-replies > strong { white-space: nowrap; }

}

@media (max-width: 480px) { nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

@media (max-width: 1360px) {
  body[data-active-view="inbox"] .app-shell { grid-template-columns: 5.4rem minmax(0, 1fr); }
  body[data-active-view="inbox"] .sidebar { align-items: center; }
  body[data-active-view="inbox"] .brand div:last-child,
  body[data-active-view="inbox"] .sidebar-insight,
  body[data-active-view="inbox"] .sidebar-card { display: none; }
  body[data-active-view="inbox"] nav a { width: 3.4rem; min-height: 3.4rem; justify-content: center; padding: 0; overflow: hidden; white-space: nowrap; }
  body[data-active-view="inbox"] .whats-thread { padding-inline: 1.2rem; }
}

@media (max-width: 1100px) {
}

@media (max-width: 720px) {
  body[data-active-view="inbox"] .app-shell,
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    height: auto;
    max-height: 7.5rem;
  }

  .sidebar-footer { display: none; }

  .app-shell { grid-template-rows: auto minmax(0, 1fr); }

  .main-area,
  body[data-active-view="inbox"] main {
    height: 100%;
  }

  .chat-list-header { padding: .7rem; }
  .chat-workspace { display: contents; }

  .chat-list {
    max-height: none;
    border-right: 0;
  }
}

@media (max-width: 980px) {

  body[data-active-view="inbox"] .whats-thread { padding-inline: 1rem; }
  body[data-active-view="inbox"] .bubble { max-width: min(78%, 34rem); }
}

@media (max-width: 760px) {



  .conversation-messages,
  .whats-thread {
    min-height: 10rem;
    max-height: none;
    overflow-y: auto;
  }
}

@media (max-width: 760px) {

  .contact-details-scroll {
    overflow-y: auto;
  }
}

@media (max-width: 720px) { .catalog-controls { justify-items: stretch; width: 100%; } .filter-group { justify-content: flex-start; } .phase-one-head { flex-direction: column; } }

@media (max-width: 720px) { .whatsapp-number-head, .whatsapp-number-card dl { display: grid; grid-template-columns: 1fr; } }

@media (max-width: 1360px) {
  body[data-active-view="inbox"] .app-shell { grid-template-columns: 4.8rem minmax(0, 1fr); }
  body[data-active-view="inbox"] nav a { width: 3rem; min-height: 3rem; }
}

@media (min-width: 1361px) {
  body[data-active-view="inbox"] .app-shell { --sidebar-width: 13rem; }
}

@media (max-width: 1360px) {
  body[data-active-view="inbox"] .app-shell { --sidebar-width: 4.8rem; }
}

@media (max-width: 900px) {

  body[data-active-view="inbox"] .contact-details-panel { display: none; }
}

@media (max-width: 760px) {
  body[data-active-view="inbox"] .sidebar {
    max-height: 5.7rem;
    padding: .55rem .7rem;
  }

  body[data-active-view="inbox"] .brand { display: none; }
  body[data-active-view="inbox"] nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body[data-active-view="inbox"] nav a { width: auto; min-height: 2.6rem; font-size: .7rem; }
  body[data-active-view="inbox"] .chat-toolbar { padding: .62rem .7rem; }
  body[data-active-view="inbox"] .toolbar-actions { grid-template-columns: 1fr 1fr; }
  body[data-active-view="inbox"] .inbox-row { min-height: 4.9rem; margin: .35rem .55rem; }


}

@media (max-width: 1280px) {
}

@media (max-width: 760px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body[data-active-view="inbox"] .app-shell,
  .app-shell {
    height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr);
  }

  body[data-active-view="inbox"] .sidebar {
    max-height: none;
    height: auto;
    padding: .45rem .55rem;
    border-right: 0;
    border-bottom: 1px solid var(--color-surface);
  }

  body[data-active-view="inbox"] nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .35rem;
    width: 100%;
    overflow-x: auto;
    padding: 0;
  }

  body[data-active-view="inbox"] nav a {
    min-width: 0;
    min-height: 2.75rem;
    border-radius: .8rem;
    font-size: .68rem;
    line-height: 1.1;
    text-align: center;
  }

  body[data-active-view="inbox"] .chat-list-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem;
    min-height: auto;
    padding: .7rem .75rem;
  }

  body[data-active-view="inbox"] .chat-list-header .search {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
    min-width: 0;
  }

  body[data-active-view="inbox"] .chat-list-header .primary {
    min-height: 2.65rem;
    padding-inline: .85rem;
    white-space: nowrap;
  }

  body[data-active-view="inbox"] .chat-toolbar,
  body[data-active-view="inbox"] .inbox-filter-strip { padding-inline: .75rem; }
  body[data-active-view="inbox"] .toolbar-actions { grid-template-columns: 1fr 1fr; }
  body[data-active-view="inbox"] .toolbar-actions .connection-badge { grid-column: 1 / -1; }
  body[data-active-view="inbox"] .inbox-row { grid-template-columns: 2.65rem minmax(0, 1fr) auto; margin: .42rem .65rem; padding: .72rem; }
  body[data-active-view="inbox"] .inbox-row[draggable="true"]::before { display: none; }

  .mobile-back-button {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 1;
    box-shadow: none;
  }

  body[data-active-view="inbox"] .conversation-header {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: .6rem;
    min-height: auto;
    padding: .62rem .7rem;
  }

  body[data-active-view="inbox"] .conversation-header .status-pill {
    grid-column: 2 / -1;
    justify-self: start;
    max-width: 100%;
    font-size: .7rem;
    padding: .3rem .55rem;
  }

  body[data-active-view="inbox"] .conversation-header h2 { font-size: 1rem; }
  body[data-active-view="inbox"] .conversation-header small { font-size: .75rem; }
  body[data-active-view="inbox"] .whats-thread { padding: .85rem .7rem; }
  body[data-active-view="inbox"] .bubble { max-width: 86%; }


  body[data-active-view="inbox"] .message-form .primary { min-width: 0; padding-inline: .65rem; }
  body[data-active-view="inbox"] .input-tool { min-width: 2.5rem; height: 2.5rem; }
  body[data-active-view="inbox"] .message-form input { min-height: 2.6rem; font-size: 16px; }


  body[data-active-view="inbox"] .quick-replies .ghost { flex: 0 0 auto; min-height: 2.25rem; }
}

@media (max-width: 720px) { .admin-panel { padding: .85rem; } .admin-subhead, .audit-row { align-items: stretch; flex-direction: column; } }

@media (max-width: 1100px) { .report-filters, .report-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 720px) { .report-filters, .report-grid, .report-table div { grid-template-columns: 1fr; } }

/* Mobile scroll stabilization: let regular pages use native document scrolling. */
@media (max-width: 760px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }

  body:not([data-active-view="inbox"]) .app-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body:not([data-active-view="inbox"]) .main-area,
  body:not([data-active-view="inbox"]) main,
  body:not([data-active-view="inbox"]) .view-container,
  body:not([data-active-view="inbox"]) .page-view {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  body[data-active-view="inbox"] {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
}

/* Final sidebar responsiveness: rail on tablets, bottom-safe top nav on phones. */
@media (max-width: 1360px) and (min-width: 761px) {
  body[data-active-view="inbox"] .app-shell,
  .app-shell { --sidebar-width: 5.25rem; }

  .sidebar { align-items: center; padding: .85rem .65rem; }
  .brand { justify-content: center; padding: .35rem; }
  .brand div:last-child,
  .sidebar-insight,
  .sidebar-card,
  .sidebar-navigation-secondary span:not(.nav-icon):not(.nav-label),
  .nav-label { display: none; }

  .sidebar-navigation a,
  body[data-active-view="inbox"] nav a {
    width: 3.35rem;
    min-height: 3.35rem;
    justify-content: center;
    padding: 0;
  }

  .sidebar-navigation a.active::before { left: .2rem; }
}

@media (max-width: 760px) {
  .app-shell,
  body[data-active-view="inbox"] .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .sidebar,
  body[data-active-view="inbox"] .sidebar {
    position: sticky;
    top: 0;
    z-index: 12;
    height: auto;
    max-height: none;
    align-items: stretch;
    padding: .55rem .65rem;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .sidebar-header,
  .sidebar-footer,
  body[data-active-view="inbox"] .brand { display: none; }

  .sidebar-navigation,
  body[data-active-view="inbox"] nav {
    display: flex;
    gap: .45rem;
    width: 100%;
    overflow-x: auto;
    padding-bottom: .05rem;
    scrollbar-width: none;
  }

  .sidebar-navigation::-webkit-scrollbar { display: none; }

  .sidebar-navigation a,
  body[data-active-view="inbox"] nav a {
    flex: 0 0 auto;
    width: auto;
    min-width: 4.4rem;
    min-height: 2.8rem;
    justify-content: center;
    gap: .35rem;
    padding: .45rem .65rem;
    font-size: .72rem;
  }

  .sidebar-navigation a.active::before { display: none; }
  .nav-icon { flex-basis: 1.65rem; width: 1.65rem; height: 1.65rem; border-radius: .6rem; }
  .sidebar-navigation-secondary { display: contents; }
  .sidebar-navigation-secondary span:not(.nav-icon):not(.nav-label) { display: none; }
}

/* Mobile chat flow refinements: deterministic inbox/detail mode and compact operator chrome. */
body[data-active-view="inbox"] { --mobile-chat-header: 3.85rem; --mobile-chat-composer: 8.75rem; --mobile-context-peek: 2.9rem; }
.mobile-context-sheet { display: none; }

@media (max-width: 760px) {
  body[data-active-view="inbox"][data-mobile-chat-state="conversation"] .topbar,
  body[data-active-view="inbox"][data-mobile-chat-state="conversation"] .metrics { display: none !important; }

  body[data-active-view="inbox"] .chat-list-filters,
  body[data-active-view="inbox"] .inbox-filter-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: .35rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: .45rem .65rem;
    min-height: 2.55rem;
    scroll-snap-type: x proximity;
  }

  body[data-active-view="inbox"] .inbox-filter-strip::-webkit-scrollbar { display: none; }

  body[data-active-view="inbox"] .inbox-filter-strip button {
    flex: 0 0 auto;
    min-height: 1.75rem;
    padding: .24rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    line-height: 1;
    scroll-snap-align: start;
  }



  body[data-active-view="inbox"] .conversation-header {
    position: sticky;
    top: 0;
    z-index: 8;
    min-height: var(--mobile-chat-header);
    grid-template-columns: 2.5rem 2.25rem minmax(0, 1fr);
  }

  body[data-active-view="inbox"] .mobile-back-button {
    display: inline-grid !important;
    position: relative;
    z-index: 10;
  }

  body[data-active-view="inbox"] .conversation-messages,
  body[data-active-view="inbox"] .whats-thread {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    padding-bottom: .75rem;
  }






  body[data-active-view="inbox"] .contact-details-panel { display: none !important; }

  body[data-active-view="inbox"] .mobile-context-sheet {
    display: block;
    z-index: 6;
    align-self: end;
    min-height: var(--mobile-context-peek);
    max-height: 42dvh;
    overflow: hidden;
    border-top: 1px solid var(--color-border);
    border-radius: 1rem 1rem 0 0;
    background: var(--color-surface);
    box-shadow: 0 -12px 28px var(--color-border);
  }

  body[data-active-view="inbox"] .mobile-context-sheet summary {
    position: sticky;
    top: 0;
    cursor: pointer;
    min-height: var(--mobile-context-peek);
    padding: .82rem .9rem;
    color: var(--color-accent-hover);
    background: var(--color-surface);
    font-size: .82rem;
    font-weight: 900;
  }

  body[data-active-view="inbox"] .mobile-context-content {
    display: grid;
    gap: .45rem;
    padding: 0 .9rem .9rem;
    font-size: .8rem;
  }

  body[data-active-view="inbox"] .mobile-context-content dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .25rem .6rem;
    margin: 0;
  }

  body[data-active-view="inbox"] .mobile-context-content dt { color: var(--color-muted); font-weight: 800; }
  body[data-active-view="inbox"] .mobile-context-content dd { margin: 0; font-weight: 900; }
}

/* The sole mobile override set for the conversation footer components. */
@media (max-width: 760px) {
  .conversation-main {
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
  }

  .conversation-composer {
    max-height: min(15rem, 45dvh);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .quick-replies {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    padding: 0 .65rem .4rem;
  }

  .stage-actions { padding: 0 .65rem .4rem; }

  .quick-replies .composer-action-strip {
    padding-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* Navigation modes. Keep this final block authoritative over the legacy breakpoints above. */
@media (min-width: 761px) {
  .app-shell[data-navigation-mode="expanded"],
  body[data-active-view="inbox"] .app-shell[data-navigation-mode="expanded"] {
    grid-template-columns: var(--sidebar-expanded-width) minmax(0, 1fr);
  }

  .app-shell[data-navigation-mode="compact"],
  body[data-active-view="inbox"] .app-shell[data-navigation-mode="compact"] {
    grid-template-columns: var(--sidebar-compact-width) minmax(0, 1fr);
  }

  /*
   * The navigation mode owns both the sidebar width and its contents.
   * Legacy viewport rules below 1360px used to hide the labels while the
   * expanded mode kept a full-width column, leaving a wide empty rail.
   */
  body[data-active-view="inbox"] .app-shell[data-navigation-mode="expanded"] .sidebar {
    align-items: stretch;
  }

  body[data-active-view="inbox"] .app-shell[data-navigation-mode="expanded"] .brand div:last-child {
    display: block;
  }

  body[data-active-view="inbox"] .app-shell[data-navigation-mode="expanded"] nav a {
    justify-content: flex-start;
    width: 100%;
    min-height: 2.5rem;
    padding: .35rem .45rem;
    overflow: visible;
    white-space: normal;
  }
}

/* Tablet validation range: do not inherit the old one-column shell or hidden context rules. */
@media (min-width: 761px) and (max-width: 980px) {
  .main-area { min-width: 0; height: 100dvh; padding: var(--space-4); }
  body[data-active-view="inbox"] .main-area { padding: 0; }
  .view-container { height: 100%; min-height: 0; }
}

@media (max-width: 760px) {
  .app-shell,
  body[data-active-view="inbox"] .app-shell {
    display: block;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  .sidebar,
  body[data-active-view="inbox"] .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 31;
    display: flex;
    width: min(19rem, 86vw);
    height: 100dvh;
    padding: var(--space-4) var(--space-3);
    border-right: var(--border-default);
    border-bottom: 0;
    transform: translateX(-105%);
    transition: transform .22s ease;
  }
  .app-shell[data-mobile-menu-open="true"] .sidebar { transform: translateX(0); }
  .sidebar-header,
  body[data-active-view="inbox"] .brand { display: block; }
  .sidebar-header .brand { display: flex; }
  .sidebar-toggle { display: none; }
  .sidebar-footer { display: block; }
  .sidebar-navigation,
  body[data-active-view="inbox"] nav { display: grid; width: 100%; overflow-y: auto; overflow-x: hidden; }
  .sidebar-navigation a,
  body[data-active-view="inbox"] nav a { justify-content: flex-start; width: 100%; min-width: 0; min-height: 2.8rem; padding: .45rem .55rem; font-size: inherit; }
  .sidebar-navigation-secondary { display: grid; }
  .sidebar-navigation-secondary > span { display: block !important; }

  .sidebar-backdrop { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; cursor: pointer; background: rgb(0 0 0 / .46); border: 0; }
  .app-shell[data-mobile-menu-open="true"] .sidebar-backdrop { display: block; }
  .mobile-menu-button { position: fixed; top: max(.65rem, env(safe-area-inset-top)); right: .65rem; z-index: 20; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.65rem; padding: .5rem .75rem; cursor: pointer; color: var(--color-ink); background: var(--color-surface); border: var(--border-default); border-radius: var(--radius-pill); box-shadow: var(--shadow); }

  .main-area,
  body[data-active-view="inbox"] .main-area { width: 100%; height: 100dvh; min-height: 0; overflow: hidden; }
  body:not([data-active-view="inbox"]) .main-area { height: 100dvh; overflow-y: auto; padding-top: 4.25rem; }
}

/* Canonical chat modes: desktop (3 panes), tablet (list + conversation), mobile (one pane at a time). */
@media (min-width: 981px) {
  body[data-active-view="inbox"] .chat-view { grid-template-columns: clamp(19rem, 24vw, 25rem) minmax(0, 1fr); }
  body[data-active-view="inbox"] .chat-list-panel { display: flex; }
  body[data-active-view="inbox"] .conversation-panel { display: flex; }
  body[data-active-view="inbox"] .conversation-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-active-view="inbox"] .context-panel { display: none; }
  body[data-active-view="inbox"] .message-form { grid-template-columns: 2.75rem 2.75rem minmax(0, 1fr) minmax(4.5rem, auto); }
}

@media (min-width: 761px) and (max-width: 980px) {
  body[data-active-view="inbox"] .chat-view { grid-template-columns: clamp(18rem, 36vw, 22rem) minmax(0, 1fr); }
  body[data-active-view="inbox"] .chat-list-panel { display: flex; }
  body[data-active-view="inbox"] .conversation-panel { display: flex; }
  body[data-active-view="inbox"] .conversation-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-active-view="inbox"] .context-panel { display: none; }
  body[data-active-view="inbox"] .message-form { grid-template-columns: 2.75rem 2.75rem minmax(0, 1fr) minmax(4.5rem, auto); }
}

@media (max-width: 760px) {
  body[data-active-view="inbox"] .chat-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  body[data-active-view="inbox"] .chat-list-panel { grid-area: 1 / 1; display: flex; width: 100%; transform: translateX(0); opacity: 1; }
  body[data-active-view="inbox"] .conversation-panel { grid-area: 1 / 1; display: flex; width: 100%; transform: translateX(100%); opacity: 0; pointer-events: none; }
  body[data-active-view="inbox"] .conversation-layout { grid-template-columns: minmax(0, 1fr); height: 100%; }
  body[data-active-view="inbox"] .context-panel { display: none; }
  body[data-active-view="inbox"] .message-form { grid-template-columns: 2.5rem 2.5rem minmax(0, 1fr) minmax(4.2rem, auto); gap: .45rem; padding: .5rem .65rem max(.4rem, env(safe-area-inset-bottom)); }

  body[data-active-view="inbox"].mobile-chat-open .chat-list-panel { transform: translateX(-12%); opacity: 0; pointer-events: none; }
  body[data-active-view="inbox"].mobile-chat-open .conversation-panel { transform: translateX(0); opacity: 1; pointer-events: auto; }
  body[data-active-view="inbox"].mobile-chat-open .mobile-menu-button { display: none; }
  body[data-active-view="inbox"] .conversation-header {
    grid-template-columns: 2.75rem 2.25rem minmax(0, 1fr);
    gap: .45rem;
    padding: max(.45rem, env(safe-area-inset-top)) max(.6rem, env(safe-area-inset-right)) .45rem max(.6rem, env(safe-area-inset-left));
  }
  body[data-active-view="inbox"] .conversation-identity { min-width: 0; overflow: hidden; }
  body[data-active-view="inbox"] .conversation-identity h2,
  body[data-active-view="inbox"] .conversation-identity small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-active-view="inbox"] .conversation-header-meta {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: .4rem;
  }
  body[data-active-view="inbox"] .conversation-fields select {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 2.75rem;
  }
  .mobile-context-button { display: inline-grid; place-items: center; }
  .mobile-context-dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: min(75dvh, 38rem); margin: 0; padding: 0; overflow-y: auto; color: var(--color-ink); border: 1px solid var(--color-border); border-radius: 1rem 1rem 0 0; background: var(--color-surface); }
  .mobile-context-dialog[open] { display: block; }
  .mobile-context-dialog::backdrop { background: rgb(0 0 0 / .48); }
  .mobile-context-header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
  .mobile-context-content { display: grid; gap: .6rem; padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); overflow-wrap: anywhere; }
  .mobile-context-content dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .7rem; margin: 0; }
  .mobile-context-content dt { color: var(--color-muted); font-weight: 800; }
  .mobile-context-content dd { margin: 0; font-weight: 900; overflow-wrap: anywhere; }

  :where(button, .primary, .secondary, .ghost, input, select, textarea, summary, .sidebar-navigation a) {
    min-height: 2.75rem;
  }

  body:not([data-active-view="inbox"]) .page-view {
    padding-inline: max(var(--space-3), env(safe-area-inset-left));
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  }

  .section-heading {
    align-items: stretch;
    gap: var(--space-3);
  }

  .section-heading > :is(button, .primary, .secondary, .ghost) {
    flex: 0 0 auto;
  }

  .form-grid { grid-template-columns: minmax(0, 1fr); }

  .admin-user-row,
  .user-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .admin-user-row > div,
  .user-row > div { grid-column: 1 / -1; min-width: 0; }
  .admin-user-row small,
  .user-row small { overflow-wrap: anywhere; }

  .modal-backdrop {
    align-items: end;
    padding: 0;
  }

  .modal-backdrop > form,
  .modal-backdrop > section,
  .modal-backdrop > div {
    width: 100%;
    max-height: min(88dvh, 48rem);
    margin: 0;
    overflow-y: auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  }
}

@media (max-width: 430px) {
  .section-heading { flex-direction: column; }
  .section-heading > :is(button, .primary, .secondary, .ghost) { width: 100%; }
  .login-mode { padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-3) max(var(--space-3), env(safe-area-inset-bottom)); }
  .login-card { border-radius: var(--radius-lg); box-shadow: none; }
}

@media (max-width: 480px) {
  .message-form { grid-template-columns: 2.5rem 2.5rem minmax(0, 1fr) auto; }
  .message-form .primary { width: 2.75rem; min-width: 2.75rem; padding-inline: 0; overflow: hidden; color: transparent; }
  .message-form .primary::after { content: "↑"; display: grid; place-items: center; color: var(--color-surface); font-size: 1.25rem; font-weight: 900; }
  .quick-replies,
  .stage-actions { padding-bottom: .3rem; }
}

/* Compact, calm navigation across breakpoints. */
.mobile-notifications-button { display: none !important; }

@media (min-width: 761px) {
  .app-shell[data-navigation-mode="compact"] .sidebar-navigation a,
  body[data-active-view="inbox"] .app-shell[data-navigation-mode="compact"] nav a {
    width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
  }
}

/* Mobile drawer always behaves as expanded, even when desktop preference is compact. */
@media (max-width: 760px) {
  body .app-shell .mobile-notifications-button {
    display: flex !important;
  }

  body .app-shell[data-navigation-mode] .sidebar,
  body[data-active-view="inbox"] .app-shell[data-navigation-mode] .sidebar {
    align-items: stretch !important;
    width: min(20rem, 88vw);
    padding-inline: max(.8rem, env(safe-area-inset-left));
  }

  body .app-shell[data-navigation-mode] .sidebar-quick-actions {
    width: 100% !important;
  }

  body .app-shell[data-navigation-mode] .sidebar-quick-actions button {
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 3rem;
    padding: .55rem .65rem !important;
    font-size: .9rem;
  }

  body .app-shell[data-navigation-mode] .sidebar-navigation,
  body[data-active-view="inbox"] .app-shell[data-navigation-mode] .sidebar-navigation {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    width: 100% !important;
    gap: .2rem;
    overflow-x: hidden;
  }

  body .app-shell[data-navigation-mode] .sidebar-section-label {
    display: block !important;
    width: 100%;
    margin: .75rem .65rem .3rem;
  }

  body .app-shell[data-navigation-mode] .sidebar-navigation a,
  body[data-active-view="inbox"] .app-shell[data-navigation-mode] .sidebar-navigation a {
    display: grid !important;
    grid-template-columns: 2.15rem minmax(0, 1fr);
    justify-content: stretch !important;
    width: 100% !important;
    min-width: 0;
    min-height: 3rem !important;
    padding: .45rem .65rem !important;
    gap: .7rem;
  }

  body .app-shell[data-navigation-mode] .sidebar-navigation .nav-label {
    display: block !important;
    align-self: center;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body .app-shell[data-navigation-mode] .sidebar-navigation a .nav-icon {
    display: inline-grid;
    width: 2.15rem;
    height: 2.15rem;
    margin: 0;
  }

  body .app-shell[data-navigation-mode] .sidebar-footer {
    display: block !important;
    width: 100%;
    margin-top: auto;
  }
}

/* iPhone navigation: a compact labelled drawer instead of an icon-only rail. */
@media (max-width: 760px) {
  body .app-shell .sidebar {
    width: min(20rem, 88vw);
    gap: .7rem;
    padding: max(1rem, env(safe-area-inset-top))
      max(.8rem, env(safe-area-inset-right))
      max(1rem, env(safe-area-inset-bottom))
      max(.8rem, env(safe-area-inset-left));
    background: #f9f9f9;
  }

  body .app-shell .sidebar-header {
    display: block;
    min-height: 3rem;
    padding: .2rem .35rem .65rem;
    border-bottom: 1px solid #e5e5e5;
  }

  body .app-shell .sidebar .brand {
    display: flex;
    justify-content: flex-start;
    padding: 0;
  }

  body .app-shell .sidebar .brand > div:last-child,
  body .app-shell .sidebar .nav-label,
  body .app-shell .sidebar .sidebar-section-label {
    display: block !important;
  }

  body .app-shell .sidebar-navigation {
    display: grid;
    align-content: start;
    gap: .2rem;
    padding: 0;
  }

  body .app-shell .sidebar-section-label {
    margin: .7rem .65rem .25rem;
    color: #8a8a8a;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  body .app-shell .sidebar-navigation a,
  body[data-active-view="inbox"] .app-shell .sidebar-navigation a {
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr);
    justify-content: stretch;
    width: 100%;
    min-height: 3rem;
    gap: .65rem;
    padding: .45rem .65rem;
    color: #3f3f46;
    border-radius: .75rem;
    font-size: .9rem;
    font-weight: 500;
    text-align: left;
  }

  body .app-shell .sidebar-navigation a .nav-icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: .65rem;
    color: #56565f;
    background: #ececec;
  }

  body .app-shell .sidebar-navigation a.active {
    color: #0d0d0d;
    background: #ececec;
    box-shadow: none;
    font-weight: 650;
  }

  body .app-shell .sidebar-navigation a.active .nav-icon {
    color: #fff;
    background: #202123;
  }

  body .app-shell .mobile-menu-button {
    width: auto;
    min-width: 5.25rem;
    padding: .55rem .8rem;
    border-radius: 999px;
    font-weight: 650;
  }

  body .app-shell .mobile-menu-button span {
    width: auto;
    overflow: visible;
  }
}

/* Mobile performance and touch polish. */
@media (max-width: 760px) {
  body[data-active-view="inbox"] .main-area,
  body[data-active-view="inbox"] .view-container,
  body[data-active-view="inbox"] .conversation-main { height: 100dvh; }

  body:not([data-active-view="inbox"]) .main-area {
    overflow: hidden;
  }

  body:not([data-active-view="inbox"]) .view-container,
  body:not([data-active-view="inbox"]) .page-view {
    height: 100%;
    min-height: 0;
  }

  body:not([data-active-view="inbox"]) .page-view {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu-button {
    top: max(.75rem, env(safe-area-inset-top));
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding-inline: .8rem;
    box-shadow: 0 2px 8px rgb(32 33 36 / .12);
  }

  body[data-active-view="inbox"] .chat-toolbar {
    padding-right: 4.5rem;
    box-shadow: none;
    backdrop-filter: none;
  }

  body[data-active-view="inbox"] .toolbar-actions {
    gap: .4rem;
  }

  body[data-active-view="inbox"] .toolbar-actions .danger {
    display: none;
  }

  body[data-active-view="inbox"] .chat-list-scroll {
    contain: layout paint style;
    overscroll-behavior-y: contain;
  }

  body[data-active-view="inbox"] .inbox-row {
    min-height: 5.25rem;
    content-visibility: auto;
    contain-intrinsic-size: auto 5.25rem;
    box-shadow: none;
  }

  body[data-active-view="inbox"] .inbox-row:hover,
  body[data-active-view="inbox"] .inbox-row.selected {
    box-shadow: inset 3px 0 0 var(--color-accent);
  }

  body[data-active-view="inbox"] .conversation-header,
  body[data-active-view="inbox"] .conversation-composer {
    box-shadow: none;
  }

  .sidebar,
  body[data-active-view="inbox"] .sidebar {
    padding: .7rem .6rem;
    gap: .65rem;
    transition-duration: .16s;
    will-change: transform;
  }

  .sidebar-navigation a,
  body[data-active-view="inbox"] nav a {
    min-height: 2.55rem;
    padding: .35rem .45rem;
  }
}

/* iPhone-class viewport: preserve safe areas and keep the primary action surface compact. */
@media (max-width: 430px) {
  .mobile-menu-button {
    top: max(.6rem, env(safe-area-inset-top));
    right: max(.6rem, env(safe-area-inset-right));
    width: 2.75rem;
    padding: 0;
    border-radius: 50%;
  }

  .mobile-menu-button span {
    width: 1.2rem;
    overflow: hidden;
    white-space: nowrap;
  }

  .sidebar,
  body[data-active-view="inbox"] .sidebar {
    width: min(18rem, 88vw);
    padding:
      max(.75rem, env(safe-area-inset-top))
      max(.65rem, env(safe-area-inset-right))
      max(.75rem, env(safe-area-inset-bottom))
      max(.65rem, env(safe-area-inset-left));
  }

  body:not([data-active-view="inbox"]) .main-area {
    padding:
      calc(3.8rem + env(safe-area-inset-top))
      max(.75rem, env(safe-area-inset-right))
      max(1rem, env(safe-area-inset-bottom))
      max(.75rem, env(safe-area-inset-left));
  }

  body:not([data-active-view="inbox"]) .page-view {
    padding-inline: 0;
  }

  .topbar { gap: .75rem; margin-bottom: .85rem; }
  .hero-copy { font-size: .92rem; line-height: 1.5; }
  .metrics,
  .panel-grid { gap: .75rem; margin-bottom: .75rem; }
  .kanban-section.page-view { padding: .75rem; }

  body[data-active-view="inbox"] .chat-toolbar {
    min-height: 3.85rem;
    padding: .55rem 3.8rem .55rem .7rem;
  }

  body[data-active-view="inbox"] .chat-toolbar small,
  body[data-active-view="inbox"] .connection-badge {
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-active-view="inbox"] .inbox-row {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    gap: .6rem;
    margin: 0;
    padding: .7rem;
  }

  body[data-active-view="inbox"] .inbox-row > i,
  body[data-active-view="inbox"] .inbox-row[draggable="true"]::before,
  body[data-active-view="inbox"] .inbox-foot { display: none; }

  body[data-active-view="inbox"] .inbox-title { gap: .45rem; }
  body[data-active-view="inbox"] .avatar { width: 2.75rem; height: 2.75rem; }
  body[data-active-view="inbox"] .bubble { max-width: 88%; }

  .quick-replies {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
  }

  .quick-replies > strong { display: none; }
}

/* Final iPhone inbox fixes: screen styles are loaded lazily after this file, so
   these selectors intentionally carry enough specificity to keep mobile sizing. */
@media (max-width: 760px) {
  body[data-active-view="inbox"] #view-container .chat-list-header {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-right: 4.25rem;
  }

  body[data-active-view="inbox"] #view-container .chat-list-header .search {
    grid-column: 1 / -1;
  }

  body[data-active-view="inbox"] #view-container .chat-list-header .primary {
    max-width: 100%;
    min-height: 2.5rem;
    padding-inline: .7rem;
    font-size: .74rem;
  }

  body[data-active-view="inbox"] #view-container .chat-list {
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body[data-active-view="inbox"] #view-container .chat-list-scroll,
  body[data-active-view="inbox"] #view-container .conversation-messages {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    scroll-behavior: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  body[data-active-view="inbox"] #view-container .inbox-row {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    gap: .65rem;
  }

  body[data-active-view="inbox"] #view-container .inbox-main,
  body[data-active-view="inbox"] #view-container .inbox-title,
  body[data-active-view="inbox"] #view-container .inbox-title strong {
    min-width: 0;
  }

  body[data-active-view="inbox"] #view-container .inbox-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body[data-active-view="inbox"] #view-container .inbox-title strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-active-view="inbox"] #view-container .conversation-composer {
    max-height: min(10.5rem, 32dvh);
    overflow: hidden;
  }

  body[data-active-view="inbox"] #view-container .conversation-composer:has(details[open]) {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  body[data-active-view="inbox"] #view-container .message-form {
    grid-template-columns: 2.75rem 2.75rem minmax(0, 1fr) 2.75rem;
    gap: .45rem;
    padding-inline: .65rem;
    overflow: hidden;
  }

  body[data-active-view="inbox"] #view-container .message-form input[name="message"] {
    width: 100%;
    min-width: 0;
  }

  body[data-active-view="inbox"] #view-container .message-form .primary {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    padding-inline: 0;
    overflow: hidden;
    color: transparent;
    white-space: nowrap;
  }

  body[data-active-view="inbox"] #view-container .message-form .primary::after {
    content: "↑";
    display: grid;
    place-items: center;
    color: var(--color-surface);
    font-size: 1.2rem;
    font-weight: 900;
  }

  body[data-active-view="inbox"] #view-container .quick-replies,
  body[data-active-view="inbox"] #view-container .stage-actions {
    display: block;
    padding: 0 .65rem .2rem;
  }

  body[data-active-view="inbox"] #view-container .quick-replies:not([open]),
  body[data-active-view="inbox"] #view-container .stage-actions:not([open]) {
    height: 2.15rem;
    overflow: hidden;
  }

  body[data-active-view="inbox"] #view-container .quick-replies summary,
  body[data-active-view="inbox"] #view-container .stage-actions summary {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.15rem;
    padding: 0;
  }
}

@media (max-width: 430px) {
  body[data-active-view="inbox"] #view-container .chat-list-header {
    gap: .5rem;
    padding: .65rem 3.9rem .65rem .7rem;
  }

  body[data-active-view="inbox"] #view-container .chat-list-header .primary {
    padding-inline: .55rem;
  }

  body[data-active-view="inbox"] #view-container .inbox-title {
    grid-template-columns: minmax(0, 1fr);
    gap: .05rem;
  }

  body[data-active-view="inbox"] #view-container .inbox-title time {
    grid-row: 2;
    justify-self: start;
  }

  body[data-active-view="inbox"] #view-container .conversation-header {
    min-height: calc(3.6rem + env(safe-area-inset-top));
  }
}

/* Final cascade guard for labelled mobile navigation. */
@media (max-width: 760px) {
  body .app-shell[data-navigation-mode] .sidebar {
    align-items: stretch !important;
  }

  body .app-shell[data-navigation-mode] .sidebar-navigation {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  body .app-shell[data-navigation-mode] .sidebar-navigation a {
    display: grid !important;
    grid-template-columns: 2.15rem minmax(0, 1fr) !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-height: 3rem !important;
    padding: .45rem .65rem !important;
  }

  body .app-shell[data-navigation-mode] .sidebar-navigation .nav-label,
  body .app-shell[data-navigation-mode] .sidebar-section-label {
    display: block !important;
  }

  body .app-shell[data-navigation-mode] .sidebar-footer {
    display: block !important;
    margin-top: auto;
  }

  body[data-active-view="inbox"] #view-container .message-form .send-message-button {
    display: inline-grid;
    place-items: center;
    width: 2.85rem;
    min-width: 2.85rem;
    max-width: 2.85rem;
    min-height: 2.85rem;
    padding: 0;
    overflow: visible;
    color: #fff;
    background: #0d0d0d;
    border-radius: 50%;
  }

  body[data-active-view="inbox"] #view-container .message-form .send-message-button::after {
    content: none !important;
    display: none !important;
  }

  body[data-active-view="inbox"] #view-container .message-form .send-message-button[aria-busy="true"] {
    color: transparent;
    opacity: 1;
    background: #0d0d0d;
  }

  body[data-active-view="inbox"] #view-container .message-form .send-message-button[aria-busy="true"]::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid rgb(255 255 255 / .42);
    border-top-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: busy-spin .7s linear infinite;
  }

  body[data-active-view="inbox"] #view-container .send-message-button .app-icon {
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    color: #fff;
    stroke-width: 2;
  }

  body[data-active-view="inbox"] #view-container .send-message-label {
    display: none;
  }
}

/* iOS viewport lock: the inbox owns its two internal scroll regions. Keeping the
   document fixed prevents Safari from carrying body offsets between screens. */
@media (max-width: 760px) {
  html[data-active-view="inbox"],
  html[data-active-view="inbox"] body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  html[data-active-view="inbox"] body .app-shell,
  html[data-active-view="inbox"] body .main-area,
  html[data-active-view="inbox"] body .view-container,
  html[data-active-view="inbox"] body [data-panel="inbox"],
  html[data-active-view="inbox"] body .chat-view {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  html[data-active-view="inbox"] body .chat-list-scroll,
  html[data-active-view="inbox"] body .conversation-messages {
    overscroll-behavior-y: contain;
  }
}