/* Responsive application shell and final layout guardrails. */
.mobile-menu-toggle,
.platform-mobile-menu,
.mobile-nav-backdrop { display: none; }

@media (max-width: 900px) {
  body.mobile-nav-locked { overflow: hidden; }

  .app-page .app-shell { display: block; min-width: 0; }
  .app-page .sidebar,
  .app-page .app-shell.sidebar-collapsed .sidebar {
    inset: 0 auto 0 0;
    z-index: 90;
    width: min(320px, 86vw);
    padding: 22px 16px;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
  .app-page .app-shell.mobile-nav-open .sidebar { transform: translateX(0); }
  .app-page .app-shell.sidebar-collapsed .brand-sidebar > span:last-child,
  .app-page .app-shell.sidebar-collapsed .nav-item em { display: inline; }
  .app-page .app-shell.sidebar-collapsed .sidebar-toggle { display: none; }
  .app-page .app-shell.sidebar-collapsed .nav-item,
  .app-page .sidebar .nav-item {
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
    font-size: var(--font-size-body);
  }
  .app-page .app-shell.sidebar-collapsed .nav-item > span,
  .app-page .sidebar .nav-item > span { width: 20px; font-size: 18px; }
  .app-page .main-area,
  .app-page .app-shell.sidebar-collapsed .main-area { width: 100%; margin-left: 0; }

  .mobile-menu-toggle,
  .platform-mobile-menu {
    position: fixed;
    z-index: 72;
    top: 15px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 42px;
    height: 40px;
    border: 1px solid #cbd8d1;
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--green-dark);
    box-shadow: 0 4px 14px rgba(18, 55, 42, .08);
    cursor: pointer;
  }
  .mobile-menu-toggle strong,
  .platform-mobile-menu strong { font-size: var(--font-size-small); }
  .mobile-nav-backdrop {
    position: fixed;
    z-index: 80;
    inset: 0;
    border: 0;
    background: rgba(15, 35, 26, .38);
  }
  .mobile-nav-open .mobile-nav-backdrop { display: block; }

  .app-page .topbar {
    position: sticky;
    z-index: 60;
    top: 0;
    min-height: 70px;
    height: auto;
    gap: 12px;
    padding: 10px 14px 10px 70px;
  }
  .app-page .global-search { display: none; }
  .app-page .organization-switcher,
  .app-page .config-title { min-width: 0; }
  .app-page .organization-switcher summary > span:nth-child(2),
  .app-page .config-title > div { min-width: 0; }
  .app-page .organization-switcher strong,
  .app-page .config-title strong {
    display: block;
    max-width: 32vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-page .top-actions { flex: none; }
  .app-page .content,
  .app-page .operations-page,
  .app-page .automations-page,
  .app-page .internal-page,
  .app-page .sla-supervision { max-width: 100%; padding: 24px 18px 44px; }
  .app-page .inbox-layout,
  .app-page .ticket-queue,
  .app-page .queue-header,
  .app-page .queue-title,
  .app-page .ticket-list { min-width: 0; width: 100%; }

  .platform-shell { display: block; min-width: 0; }
  .platform-sidebar {
    position: fixed;
    z-index: 90;
    inset: 0 auto 0 0;
    width: min(320px, 86vw);
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
  .platform-shell.mobile-nav-open .platform-sidebar { transform: translateX(0); }
  .platform-main { width: 100%; padding: 86px 20px 44px; }
  .platform-mobile-menu { color: #fff; background: #12372a; border-color: #31594a; }
  .platform-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  html, body { max-width: 100%; }
  body { overflow-wrap: anywhere; }
  img, svg, video, canvas { max-width: 100%; height: auto; }
  input, select, textarea, button { max-width: 100%; }

  .mobile-menu-toggle strong,
  .platform-mobile-menu strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .app-page .topbar { padding-left: 66px; }
  .app-page .top-actions { gap: 7px; }
  .app-page .top-actions .text-button,
  .app-page .config-topbar .top-actions > a.text-button { display: none; }
  .app-page .organization-switcher strong,
  .app-page .config-title strong { max-width: 42vw; }

  .page-title,
  .operations-heading,
  .campaign-detail-head,
  .search-heading,
  .contacts-heading,
  .report-heading,
  .internal-page-heading { align-items: stretch; flex-direction: column; gap: 12px; }
  .page-title > *,
  .operations-heading > *,
  .campaign-detail-head > * { max-width: 100%; }
  .panel,
  .stats article { padding: 16px; }
  .stats,
  .campaign-kpis,
  .report-kpis,
  .sla-kpis,
  .platform-kpis { grid-template-columns: 1fr; }
  .two-columns,
  .settings-grid,
  .provider-grid,
  .integration-grid,
  .form-pair,
  .platform-field-pair,
  .platform-system-grid { grid-template-columns: 1fr; }

  .config-center-content { padding: 18px 12px 38px; }
  .config-center-nav { scrollbar-width: thin; }
  .config-center-nav .config-home,
  .config-center-nav section a { min-height: 40px; font-size: var(--font-size-small); }
  .settings-tabs,
  .platform-org-tabs,
  .workflow-tabs,
  .sla-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }

  .data-row { align-items: stretch; flex-direction: column; }
  .data-row > *,
  .person { width: 100%; min-width: 0; }
  .data-row form,
  .data-row .secondary-button { width: 100%; }
  .integration-form-actions,
  .connected-mailbox-actions,
  .heading-actions { align-items: stretch; flex-direction: column; }
  .integration-form-actions > *,
  .connected-mailbox-actions > *,
  .connected-mailbox-actions button,
  .heading-actions > * { width: 100%; }
  .bulk-toolbar { align-items: stretch; flex-wrap: wrap; }
  .bulk-toolbar label { flex: 1 1 100%; }
  .bulk-toolbar select { width: 100%; }

  .platform-main { padding-inline: 12px; }
  .platform-topbar { align-items: stretch; flex-direction: column; }
  .platform-topbar form,
  .platform-topbar button { width: 100%; }
  .platform-panel { padding: 15px; }
  .platform-panel > header { align-items: stretch; flex-direction: column; }
  .platform-access-body,
  .platform-decision-form,
  .ai-config-form,
  .platform-check-grid { grid-template-columns: 1fr; }
  .ai-usage-strip { grid-template-columns: 1fr 1fr; }
  .ai-usage-strip > div:nth-child(2n) { border-right: 0; }

  dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
}

@media (max-width: 380px) {
  .app-page .organization-switcher small,
  .app-page .config-title small { display: none; }
  .app-page .organization-switcher strong,
  .app-page .config-title strong { max-width: 38vw; }
  .ai-usage-strip { grid-template-columns: 1fr; }
  .ai-usage-strip > div { border-right: 0; }
}