/* Scaliffy responsive adaptation layer.
   Desktop remains owned by the existing stylesheets. Every dashboard rule in
   this file is breakpoint-scoped so widths >= 761px retain the approved UI. */

@media (max-width: 760px) {
  :root {
    --sc-mobile-vh: 100dvh;
    --sc-mobile-topbar: 62px;
    --sc-mobile-nav: calc(66px + env(safe-area-inset-bottom, 0px));
  }

  html {
    scroll-padding-top: calc(var(--sc-mobile-topbar) + 12px);
    scroll-padding-bottom: calc(var(--sc-mobile-nav) + 16px);
  }

  html body.es-dashboard-mode .client-dashboard.es-app :is(button, a, input, select, textarea) {
    scroll-margin-block: calc(var(--sc-mobile-nav) + 12px);
  }

  html body.es-dashboard-mode .client-dashboard.es-app {
    display: block !important;
    min-width: 0 !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-sidebar {
    position: sticky !important;
    inset: 0 0 auto !important;
    z-index: 70 !important;
    width: 100% !important;
    height: var(--sc-mobile-topbar) !important;
    min-height: var(--sc-mobile-topbar) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .6rem !important;
    padding: calc(.55rem + env(safe-area-inset-top, 0px)) .85rem .55rem !important;
    overflow: visible !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-side-identity {
    min-width: 0;
    flex: 1 1 auto;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-side-brand {
    width: 92px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-side-brand .scaliffy-dashboard-logo-img {
    width: 92px !important;
    max-height: 36px !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-side-nav {
    position: fixed !important;
    z-index: 90 !important;
    top: calc(var(--sc-mobile-vh) - var(--sc-mobile-nav)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--sc-mobile-nav) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: .4rem max(.45rem, env(safe-area-inset-right, 0px)) calc(.4rem + env(safe-area-inset-bottom, 0px)) max(.45rem, env(safe-area-inset-left, 0px)) !important;
    overflow: visible !important;
    border-top: 1px solid var(--workspace-border) !important;
    background: rgba(247, 241, 230, .97) !important;
    box-shadow: 0 -14px 32px -28px rgba(26, 26, 26, .55) !important;
    backdrop-filter: blur(18px) !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-sidebar .es-side-nav button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: .5rem .2rem !important;
    border-radius: 11px !important;
    font-size: clamp(.58rem, 2.6vw, .68rem) !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-sidebar-session {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-sidebar-session > .es-side-account-id,
  html body.es-dashboard-mode .client-dashboard.es-app .es-sidebar-session > span {
    display: none !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app #esLogoutBtn {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app #esLogoutBtn span { display: none !important; }

  html body.es-dashboard-mode .client-dashboard.es-app .es-shell {
    width: 100% !important;
    min-width: 0 !important;
    padding: .7rem .7rem calc(var(--sc-mobile-nav) + .8rem) !important;
    gap: .7rem !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-topbar {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: .65rem !important;
    padding: .9rem !important;
    border-radius: 16px !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-topbar > div:first-child {
    flex: 1 1 170px !important;
    min-width: 0 !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-topbar h2 {
    font-size: clamp(1.25rem, 6vw, 1.65rem) !important;
    overflow-wrap: anywhere;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-store-badge {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-global-search {
    order: 5 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-global-search input,
  html body.es-dashboard-mode .client-dashboard.es-app input,
  html body.es-dashboard-mode .client-dashboard.es-app textarea,
  html body.es-dashboard-mode .client-dashboard.es-app select {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-view {
    width: 100%;
    min-width: 0;
    padding: .85rem !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-counter-grid,
  html body.es-dashboard-mode .client-dashboard.es-app .es-ops-grid,
  html body.es-dashboard-mode .client-dashboard.es-app .es-kpi-grid,
  html body.es-dashboard-mode .client-dashboard.es-app .es-integration-grid,
  html body.es-dashboard-mode .client-dashboard.es-app .es-analytics-row,
  html body.es-dashboard-mode .client-dashboard.es-app .sc-board {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-counter-grid article,
  html body.es-dashboard-mode .client-dashboard.es-app .es-command-metric,
  html body.es-dashboard-mode .client-dashboard.es-app .es-delivery-ring {
    min-width: 0 !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app canvas {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-chart-panel header,
  html body.es-dashboard-mode .client-dashboard.es-app .es-table-panel header,
  html body.es-dashboard-mode .client-dashboard.es-app .sc-ord-toolbar,
  html body.es-dashboard-mode .client-dashboard.es-app .sc-panel-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .sc-ord-toolbar > *,
  html body.es-dashboard-mode .client-dashboard.es-app .sc-ord-search {
    width: 100% !important;
    min-height: 44px !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-order-row,
  html body.es-dashboard-mode .client-dashboard.es-app .sc-ocard {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-order-row-head {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-order-row dl {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-order-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-order-filters button {
    min-width: 0 !important;
    min-height: 44px !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .es-order-filters button:last-child {
    grid-column: 1 / -1;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .sc-agent-config {
    width: 100% !important;
    max-width: 100% !important;
    padding: .4rem 0 1rem !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .sc-agent-config__header,
  html body.es-dashboard-mode .client-dashboard.es-app .sc-agent-status-row,
  html body.es-dashboard-mode .client-dashboard.es-app .sc-knowledge-panel {
    min-width: 0;
    gap: .75rem !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .sc-store-identity,
  html body.es-dashboard-mode .client-dashboard.es-app .sc-knowledge-panel {
    width: 100% !important;
    box-sizing: border-box;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .sc-agent-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .sc-ai-card {
    width: 100%;
    min-width: 0;
    height: min(570px, calc(var(--sc-mobile-vh) - var(--sc-mobile-nav) - 120px)) !important;
    min-height: 470px;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .sc-ai-card__head {
    min-height: 0 !important;
    padding: 1rem !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .sc-chat,
  html body.es-dashboard-mode .client-dashboard.es-app .sc-composer {
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .intg-search-wrap,
  html body.es-dashboard-mode .client-dashboard.es-app .intg-grid,
  html body.es-dashboard-mode .client-dashboard.es-app .es-channels-region,
  html body.es-dashboard-mode .client-dashboard.es-app .es-store-region,
  html body.es-dashboard-mode .client-dashboard.es-app .gs-config-card,
  html body.es-dashboard-mode .client-dashboard.es-app .gs-config-grid,
  html body.es-dashboard-mode .client-dashboard.es-app .wa-step,
  html body.es-dashboard-mode .client-dashboard.es-app .ms-onboarding {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .gs-config-card,
  html body.es-dashboard-mode .client-dashboard.es-app .gs-config-grid,
  html body.es-dashboard-mode .client-dashboard.es-app .gs-step {
    box-sizing: border-box;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .gs-config-head {
    min-width: 0;
    flex-wrap: wrap;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .gs-config-head .gs-state {
    flex: 1 1 100%;
    max-width: calc(100% - 50px);
    margin-left: 50px !important;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.25;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .intg-card,
  html body.es-dashboard-mode .client-dashboard.es-app .gs-step,
  html body.es-dashboard-mode .client-dashboard.es-app .wa-step,
  html body.es-dashboard-mode .client-dashboard.es-app .ms-page-card {
    overflow-wrap: anywhere;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .gs-copy-row,
  html body.es-dashboard-mode .client-dashboard.es-app .gs-connect-row,
  html body.es-dashboard-mode .client-dashboard.es-app .ms-page-actions,
  html body.es-dashboard-mode .client-dashboard.es-app .ms-connected-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .gs-copy-row button,
  html body.es-dashboard-mode .client-dashboard.es-app .gs-connect-row button,
  html body.es-dashboard-mode .client-dashboard.es-app .ms-page-actions button,
  html body.es-dashboard-mode .client-dashboard.es-app .ms-connected-actions button,
  html body.es-dashboard-mode .client-dashboard.es-app .intg-connect-btn,
  html body.es-dashboard-mode .client-dashboard.es-app .btn-primary {
    min-height: 44px !important;
  }

  html body.es-dashboard-mode .client-dashboard.es-app .gs-service-email,
  html body.es-dashboard-mode .client-dashboard.es-app .gs-feedback,
  html body.es-dashboard-mode .client-dashboard.es-app .channel-error,
  html body.es-dashboard-mode .client-dashboard.es-app .wa-feedback {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .wiz-overlay,
  .setup-overlay,
  .sc-login-gate,
  .sc-modal {
    padding: max(.65rem, env(safe-area-inset-top, 0px)) max(.65rem, env(safe-area-inset-right, 0px)) max(.65rem, env(safe-area-inset-bottom, 0px)) max(.65rem, env(safe-area-inset-left, 0px)) !important;
  }

  .wiz,
  .setup-box,
  .sc-modal-card,
  .sc-login-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(var(--sc-mobile-vh) - 1.3rem) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .wiz { padding: 1.2rem !important; border-radius: 18px !important; }
  .setup-box { padding: 1.2rem !important; }

  .sc-form-grid,
  .sc-permissions,
  .sc-team-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-sc-mobile-view="inbox"] .client-dashboard.es-app .es-topbar {
    display: none !important;
  }

  body[data-sc-mobile-view="inbox"] .client-dashboard.es-app .es-shell {
    padding: .5rem .5rem calc(var(--sc-mobile-nav) + .45rem) !important;
  }

  body[data-sc-mobile-view="inbox"] #esInboxView.is-active {
    height: calc(var(--sc-mobile-vh) - var(--sc-mobile-topbar) - var(--sc-mobile-nav) - 1rem) !important;
    min-height: 420px !important;
    padding: 0 !important;
  }

  #esInboxView .inbox-card {
    border-radius: 16px !important;
    min-width: 0;
  }

  #esInboxView .toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: .55rem !important;
    padding: .65rem !important;
  }

  #esInboxView .search-wrap {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 44px;
  }

  #esInboxView .channel-tabs {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  #esInboxView .channel-tabs::-webkit-scrollbar { display: none; }
  #esInboxView .channel-tabs .tab { min-height: 40px; flex: 0 0 auto; }
  #esInboxView .head-actions { grid-column: 2; grid-row: 2; align-self: center; }
  #esInboxView .ghost-btn { min-width: 44px; min-height: 44px; }
  #esInboxView .inbox-grid { min-height: 0 !important; }
  #esInboxView .conversation-pane,
  #esInboxView .chat-pane { inset: 0 !important; min-width: 0 !important; }
  #esInboxView .chat-pane {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(110%) !important;
  }
  #esInboxView .inbox-grid.chat-open .conversation-pane {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-110%) !important;
  }
  #esInboxView .inbox-grid.chat-open .chat-pane {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }
  #esInboxView .inbox-grid:not(.chat-open) .conversation-pane { display: flex !important; }
  #esInboxView .conversation-item { min-height: 76px; height: auto !important; }
  #esInboxView .conv-main,
  #esInboxView .conv-name,
  #esInboxView .conv-preview { min-width: 0; }
  #esInboxView .conv-name,
  #esInboxView .conv-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #esInboxView .chat-head { gap: .55rem; padding: .65rem !important; overflow: hidden !important; }
  #esInboxView .chat-view { min-width: 0 !important; overflow: hidden !important; }
  #esInboxView .chat-person { min-width: 0; flex: 1 1 auto; }
  #esInboxView .chat-person > div:last-child { min-width: 0; }
  #esInboxView .mobile-back { width: 44px; height: 44px; flex: 0 0 44px; }
  #esInboxView .chat-actions { flex: 0 0 78px; min-width: 0; gap: .35rem; }
  #esInboxView .state-pill { display: none; }
  #esInboxView .takeover-btn { width: 78px !important; min-width: 0 !important; min-height: 44px; padding-inline: .35rem !important; white-space: normal; overflow-wrap: anywhere; }
  #esInboxView .messages { padding: .8rem !important; scroll-padding-bottom: 92px; }
  #esInboxView .msg-row { max-width: 92% !important; overflow-wrap: anywhere; }
  #esInboxView .composer {
    position: sticky !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 8px 8px !important;
    box-sizing: border-box !important;
    z-index: 4;
    gap: .45rem !important;
    padding: .55rem max(.55rem, env(safe-area-inset-right, 0px)) max(.55rem, env(safe-area-inset-bottom, 0px)) max(.55rem, env(safe-area-inset-left, 0px)) !important;
  }
  #esInboxView .composer textarea { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; font-size: 16px !important; }
  #esInboxView .composer-icon,
  #esInboxView .send-btn { min-width: 44px !important; width: 44px !important; min-height: 44px !important; height: 44px !important; }

  body:has(#esInboxGrid.chat-open) .client-dashboard.es-app .es-topbar {
    display: none !important;
  }

  body:has(#esInboxGrid.chat-open) .client-dashboard.es-app .es-shell {
    height: calc(var(--sc-mobile-vh) - var(--sc-mobile-topbar)) !important;
    min-height: 0 !important;
    padding-top: .5rem !important;
    overflow: hidden !important;
  }

  body:has(#esInboxGrid.chat-open) #esInboxView.is-active {
    height: calc(var(--sc-mobile-vh) - var(--sc-mobile-topbar) - var(--sc-mobile-nav) - .9rem) !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body:has(#esInboxGrid.chat-open) #esInboxView .inbox-card,
  body:has(#esInboxGrid.chat-open) #esInboxView .inbox-grid,
  body:has(#esInboxGrid.chat-open) #esInboxView .chat-pane {
    height: 100% !important;
    min-height: 0 !important;
  }

  body:has(#esInboxGrid.chat-open) #esInboxView .toolbar {
    display: none !important;
  }

  body:has(#esInboxGrid.chat-open) #esInboxView .chat-pane {
    position: relative !important;
    inset: auto !important;
  }

  body:has(#esInboxGrid.chat-open) #esInboxView .messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  body:has(#esInboxGrid.chat-open) #esInboxView .composer {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
  }

  .auth-modal {
    align-items: end !important;
    padding: max(.55rem, env(safe-area-inset-top, 0px)) max(.55rem, env(safe-area-inset-right, 0px)) max(.55rem, env(safe-area-inset-bottom, 0px)) max(.55rem, env(safe-area-inset-left, 0px)) !important;
  }
  .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(var(--sc-mobile-vh) - 1.1rem) !important;
    overflow-y: auto !important;
    border-radius: 20px !important;
    padding: 1rem !important;
    overscroll-behavior: contain;
  }
  .auth-card input,
  .auth-card button,
  .auth-card select,
  .auth-card textarea { min-height: 44px; font-size: 16px !important; }
  .auth-grid { grid-template-columns: minmax(0, 1fr) !important; }

  .sc-wa-connect-modal { padding: 0 !important; place-items: stretch !important; }
  .sc-wa-connect-panel {
    width: 100% !important;
    min-height: var(--sc-mobile-vh) !important;
    max-height: var(--sc-mobile-vh) !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: calc(4.8rem + env(safe-area-inset-top, 0px)) 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    justify-content: flex-start !important;
  }
  .sc-wa-connect-logo { top: calc(1.15rem + env(safe-area-inset-top, 0px)) !important; left: 1.1rem !important; }
  .sc-wa-connect-close { top: calc(.9rem + env(safe-area-inset-top, 0px)) !important; right: 1rem !important; width: 44px !important; height: 44px !important; }
  .sc-wa-connect-progress { margin: 1.35rem 0 !important; }
  .sc-wa-connect-primary { min-height: 50px !important; }

  [class*="error"], [class*="feedback"], [class*="status"] { overflow-wrap: anywhere; }
}

@media (max-width: 390px) {
  html body.es-dashboard-mode .client-dashboard.es-app .es-shell { padding-left: .5rem !important; padding-right: .5rem !important; }
  html body.es-dashboard-mode .client-dashboard.es-app .es-view { padding: .65rem !important; }
  html body.es-dashboard-mode .client-dashboard.es-app .es-sidebar .es-side-nav button { font-size: .57rem !important; }
  #esInboxView .live-pill { display: none; }
  #esInboxView .chat-name-line { max-width: 128px; }
  #esInboxView .takeover-btn { max-width: 94px; padding-inline: .55rem; }
  .sc-wa-connect-panel h2 { font-size: 2rem !important; }
  .sc-wa-connect-progress span { font-size: .5rem; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  html body.es-dashboard-mode .client-dashboard.es-app .intg-grid,
  html body.es-dashboard-mode .client-dashboard.es-app .sc-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.es-dashboard-mode .client-dashboard.es-app .sc-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html body.es-dashboard-mode .client-dashboard.es-app *,
  .auth-modal *, .wiz-overlay *, .setup-overlay * {
    scroll-behavior: auto !important;
  }
}