/*
 * Final phone/tablet layout layer.
 * Keep every rule inside the mobile breakpoint so the desktop UI stays intact.
 */
@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    min-width: 320px;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100%;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
    font-size: 16px;
  }

  pre,
  code,
  .payload-preview {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  /* Public pages: landing, offer and login. */
  body:has(.landing-header) .page,
  body:has(.auth-shell) .page {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding-right: clamp(14px, 4vw, 20px) !important;
    padding-left: clamp(14px, 4vw, 20px) !important;
  }

  body:has(.landing-header) .landing-header {
    width: calc(100% - 28px) !important;
    max-width: 532px !important;
    margin: 10px auto 22px !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body:has(.landing-header) .landing-brand {
    min-width: 0;
    font-size: clamp(26px, 8vw, 32px) !important;
  }

  body:has(.landing-header) .landing-nav {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body:has(.landing-header) .landing-nav a {
    width: 100%;
    min-width: 0 !important;
    min-height: 44px;
    margin: 0 !important;
    padding: 10px 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal !important;
  }

  body:has(.landing-header) .landing-nav a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  body:has(.landing-header) .offer-header .landing-nav {
    grid-template-columns: 1fr !important;
  }

  body:has(.landing-header) .landing-hero {
    min-height: auto !important;
    padding: clamp(48px, 14vw, 76px) 0 clamp(46px, 12vw, 68px) !important;
  }

  body:has(.landing-header) .landing-hero-copy {
    width: 100%;
    min-width: 0;
    transform: none !important;
  }

  body:has(.landing-header) .landing-title-mark,
  body:has(.landing-header) .landing-title-mark h1 {
    max-width: 100%;
  }

  body:has(.landing-header) .landing-title-mark h1,
  body:has(.landing-header) .landing-hero h1 {
    font-size: clamp(44px, 14vw, 64px) !important;
    line-height: .96 !important;
    overflow-wrap: anywhere;
  }

  body:has(.landing-header) .landing-title-mark img {
    width: min(94vw, 356px) !important;
  }

  body:has(.landing-header) .landing-lead {
    max-width: 100% !important;
    font-size: clamp(18px, 5.5vw, 22px) !important;
  }

  body:has(.landing-header) .landing-actions,
  body:has(.landing-header) .landing-grid,
  body:has(.landing-header) .landing-tariffs,
  body:has(.landing-header) .landing-split,
  body:has(.landing-header) .landing-section-head,
  body:has(.landing-header) .landing-cta,
  body:has(.landing-header) .landing-footer {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr !important;
  }

  body:has(.landing-header) .landing-actions {
    display: grid !important;
    gap: 10px !important;
  }

  body:has(.landing-header) .landing-actions .button,
  body:has(.landing-header) .landing-cta .button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px;
    padding-inline: 12px !important;
    white-space: normal !important;
  }

  body:has(.landing-header) .landing-section,
  body:has(.landing-header) .landing-cta,
  body:has(.landing-header) .tariff-card,
  body:has(.landing-header) .offer-page {
    min-width: 0;
    padding-right: clamp(16px, 5vw, 24px) !important;
    padding-left: clamp(16px, 5vw, 24px) !important;
  }

  body:has(.landing-header) .landing-section h2,
  body:has(.landing-header) .landing-cta h2,
  body:has(.landing-header) .offer-page h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
    overflow-wrap: anywhere;
  }

  body:has(.landing-header) .offer-page h2 {
    grid-template-columns: auto minmax(0, 1fr);
    font-size: clamp(20px, 6vw, 26px) !important;
  }

  body:has(.landing-header) .offer-clause {
    grid-template-columns: minmax(36px, auto) minmax(0, 1fr) !important;
  }

  body:has(.landing-header) .landing-footer,
  body:has(.landing-header) .landing-footer-details {
    display: grid !important;
    gap: 10px !important;
    text-align: left;
  }

  body:has(.auth-shell) .auth-shell {
    min-height: 100dvh !important;
    padding: 20px 0 !important;
  }

  body:has(.auth-shell) .auth-card {
    width: 100% !important;
    max-width: 460px !important;
    padding: clamp(22px, 7vw, 38px) !important;
  }

  /* Client cabinet shell and bottom navigation. */
  body:has(.app-sidebar),
  body:has(.app-sidebar).sidebar-collapsed {
    padding-left: 0 !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  body:has(.app-sidebar) .account-topbar,
  body:has(.app-sidebar).sidebar-collapsed .account-topbar {
    position: static !important;
    width: calc(100% - 28px) !important;
    max-width: 532px !important;
    min-height: 56px;
    margin: 14px auto 0 !important;
    padding: 8px 10px !important;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  body:has(.app-sidebar) .account-limits {
    order: 1;
    flex: 1 0 100%;
    min-width: 0;
  }

  body:has(.app-sidebar) .account-limits .account-balance {
    flex: 1 1 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 6px 9px;
    white-space: normal;
    text-align: center;
  }

  body:has(.app-sidebar) .account-email {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(.app-sidebar) .account-balance {
    flex: 0 1 auto;
    min-width: 0;
    padding-inline: 9px;
    white-space: nowrap;
  }

  body:has(.app-sidebar) .account-icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  body:has(.app-sidebar) .page,
  body:has(.app-sidebar).sidebar-collapsed .page,
  body:has(.client-conversations-layout) .page,
  body:has(.client-conversations-layout).sidebar-collapsed .page {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 18px clamp(14px, 4vw, 20px) calc(122px + env(safe-area-inset-bottom)) !important;
  }

  body:has(.app-sidebar) .page-account-spacer {
    min-height: 18px !important;
  }

  body:has(.app-sidebar) .app-sidebar,
  body:has(.app-sidebar).sidebar-collapsed .app-sidebar,
  body.sidebar-collapsed .app-sidebar {
    position: fixed !important;
    inset: auto max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    z-index: 100 !important;
    width: auto !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 8px !important;
    display: block !important;
    border-radius: 20px !important;
    overflow: hidden;
  }

  body:has(.app-sidebar) .sidebar-head,
  body:has(.app-sidebar).sidebar-collapsed .sidebar-head,
  body:has(.app-sidebar) .sidebar-brand,
  body:has(.app-sidebar) .sidebar-toggle,
  body:has(.app-sidebar) .sidebar-footer {
    display: none !important;
  }

  body:has(.app-sidebar) .sidebar-nav,
  body:has(.app-sidebar).sidebar-collapsed .sidebar-nav {
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: clamp(2px, 1.5vw, 8px) !important;
  }

  body:has(.app-sidebar) .sidebar-nav a,
  body:has(.app-sidebar).sidebar-collapsed .sidebar-nav a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    border-radius: 14px !important;
  }

  body:has(.app-sidebar) .sidebar-nav > a:only-child {
    grid-column: 1 / -1;
    max-width: 64px;
    justify-self: center !important;
  }

  body:has(.app-sidebar) .sidebar-label {
    display: none !important;
  }

  body:has(.app-sidebar) .sidebar-icon,
  body:has(.app-sidebar).sidebar-collapsed .sidebar-icon {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  /* Shared client content. */
  body:has(.app-sidebar) .page-head,
  body:has(.app-sidebar) .payment-head,
  body:has(.app-sidebar) .tasks-panel-head,
  body:has(.app-sidebar) .leads-panel-head,
  body:has(.app-sidebar) .task-main,
  body:has(.app-sidebar) .client-stats-head,
  body:has(.app-sidebar) .client-conversations-toolbar,
  body:has(.app-sidebar) .payment-result-card {
    min-width: 0;
    align-items: stretch !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body:has(.app-sidebar) h1 {
    max-width: 100%;
    font-size: clamp(30px, 9vw, 40px) !important;
    overflow-wrap: anywhere;
  }

  body:has(.app-sidebar) h2,
  body:has(.app-sidebar) h3,
  body:has(.app-sidebar) p,
  body:has(.app-sidebar) a,
  body:has(.app-sidebar) span,
  body:has(.app-sidebar) strong {
    overflow-wrap: anywhere;
  }

  body:has(.app-sidebar) .actions,
  body:has(.app-sidebar) .task-actions,
  body:has(.app-sidebar) .campaign-actions,
  body:has(.app-sidebar) .payment-result-actions,
  body:has(.app-sidebar) .form-actions,
  body:has(.app-sidebar) .quick-period-buttons {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body:has(.app-sidebar) .actions > *,
  body:has(.app-sidebar) .task-actions > *,
  body:has(.app-sidebar) .campaign-actions > *,
  body:has(.app-sidebar) .payment-result-actions > *,
  body:has(.app-sidebar) .quick-period-buttons > *,
  body:has(.app-sidebar) .actions .button,
  body:has(.app-sidebar) .task-actions .button {
    width: 100% !important;
    min-width: 0 !important;
  }

  body:has(.app-sidebar) .task-stats,
  body:has(.app-sidebar) .billing-summary,
  body:has(.app-sidebar) .client-stats-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:has(.app-sidebar) .task-filter-tabs,
  body:has(.app-sidebar) .lead-filter-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body:has(.app-sidebar) .task-filter-tabs a,
  body:has(.app-sidebar) .lead-filter-tabs a {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  body:has(.app-sidebar) .client-stats-filter,
  body:has(.app-sidebar) .client-conversations-layout,
  body:has(.app-sidebar) .client-duration-grid,
  body:has(.app-sidebar) .packages-grid,
  body:has(.app-sidebar) .payment-result-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr !important;
  }

  body:has(.app-sidebar) .client-conversations-filters {
    position: static !important;
    order: -1;
    width: 100%;
  }

  body:has(.app-sidebar) .client-conversation-filter-card,
  body:has(.app-sidebar) .client-conversations-list,
  body:has(.app-sidebar) .client-conversation-card,
  body:has(.app-sidebar) .client-conversation-group,
  body:has(.app-sidebar) .client-record-card,
  body:has(.app-sidebar) .card,
  body:has(.app-sidebar) .task-card,
  body:has(.app-sidebar) .leads-panel,
  body:has(.app-sidebar) .package-card {
    width: 100%;
    min-width: 0;
  }

  body:has(.app-sidebar) audio {
    width: 100%;
    min-width: 0;
  }

  body:has(.app-sidebar) .line-chart {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    max-width: 100%;
    overflow: hidden;
  }

  body:has(.app-sidebar) .pagination-bar,
  body:has(.app-sidebar) .pagination-links {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
  }

  body:has(.app-sidebar) .required-modal-backdrop,
  body:has(.app-sidebar) .modal-backdrop {
    padding: 14px;
    overflow-y: auto;
  }

  body:has(.app-sidebar) .required-modal,
  body:has(.app-sidebar) .credentials-modal {
    width: 100%;
    max-width: 520px;
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
  }

  /* Custom admin shell and six-item bottom navigation. */
  body:has(.panel-sidebar),
  body:has(.panel-sidebar).sidebar-collapsed {
    padding-left: 0 !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  .panel-account-topbar,
  body .panel-account-topbar {
    position: static !important;
    width: calc(100% - 28px) !important;
    max-width: 532px !important;
    min-height: 56px;
    margin: 14px auto 0 !important;
    padding: 8px 10px !important;
    display: flex;
    gap: 8px;
  }

  .panel-account-email {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel-account-icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .panel-page,
  body.sidebar-collapsed .panel-page {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 18px clamp(14px, 4vw, 20px) calc(122px + env(safe-area-inset-bottom)) !important;
  }

  .panel-account-spacer {
    min-height: 18px !important;
  }

  .panel-sidebar,
  body.sidebar-collapsed .panel-sidebar {
    position: fixed !important;
    inset: auto max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    z-index: 100 !important;
    width: auto !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 8px !important;
    display: block !important;
    border-radius: 20px !important;
    overflow: hidden;
  }

  .panel-sidebar-head,
  body.sidebar-collapsed .panel-sidebar-head,
  .panel-brand,
  .panel-sidebar-toggle {
    display: none !important;
  }

  .panel-nav,
  body.sidebar-collapsed .panel-nav {
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: clamp(1px, 1vw, 6px) !important;
  }

  .employee-panel .panel-nav,
  .employee-panel.sidebar-collapsed .panel-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .panel-nav a,
  body.sidebar-collapsed .panel-nav a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    border-radius: 13px !important;
  }

  .panel-nav-label {
    display: none !important;
  }

  .panel-nav-icon,
  body.sidebar-collapsed .panel-nav-icon {
    width: clamp(40px, 12vw, 44px) !important;
    min-width: clamp(40px, 12vw, 44px) !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  .panel-hero,
  .panel-hero.compact,
  .section-head,
  .modal-head,
  .webhook-card-head,
  .webhook-project-row,
  .lptracker-contact-main,
  .lptracker-contact-row,
  .lead-detail-head {
    min-width: 0;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .panel-hero {
    padding: clamp(20px, 6vw, 28px) !important;
  }

  .panel-hero h1,
  .panel-page h1 {
    max-width: 100%;
    font-size: clamp(30px, 9vw, 40px) !important;
    overflow-wrap: anywhere;
  }

  .panel-page h2,
  .panel-page h3,
  .panel-page p,
  .panel-page a,
  .panel-page span,
  .panel-page strong,
  .panel-page label {
    overflow-wrap: anywhere;
  }

  .metrics-grid,
  .metrics-grid:has(.metric-card:nth-child(5)),
  .account-field-grid,
  .form-grid,
  .tgmax-layout,
  .copy-card,
  .credential-row,
  .event-detail-grid,
  .lead-detail-workspace,
  .lptracker-analytics-layout,
  .analytics-summary-grid,
  .payment-summary-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr !important;
  }

  .metric-card {
    min-height: 0 !important;
    padding: 20px !important;
  }

  .search-card,
  .filter-card,
  .form-actions,
  .section-actions,
  .row-actions,
  .webhook-actions,
  .analysis-feedback-actions,
  .pagination-bar,
  .pagination-links {
    width: 100%;
    min-width: 0;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .search-card > *,
  .filter-card > *,
  .form-actions > *,
  .section-actions > *,
  .row-actions > *,
  .webhook-actions > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .multi-select-filter,
  .multi-select-menu,
  .inline-package-form,
  .inline-refund-form,
  .lptracker-filter-sidebar,
  .lptracker-contact-expanded,
  .lead-technical-details,
  .form-card,
  .copy-card,
  .error-card,
  .check-card,
  .tgmax-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: static !important;
  }

  .inline-package-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto !important;
    white-space: normal !important;
  }

  .inline-package-form input {
    width: 100% !important;
    min-width: 0 !important;
  }

  .modal-backdrop {
    padding: 14px !important;
    overflow-y: auto;
  }

  .credentials-modal {
    width: 100% !important;
    max-width: 520px !important;
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
  }

  .panel-page audio {
    width: 100%;
    min-width: 0;
  }

  /* All product tables become labelled row cards. Labels are populated by JS. */
  body:has(.app-sidebar) .table-card,
  .panel-page .table-card {
    width: 100%;
    min-width: 0;
    overflow: visible !important;
    background: transparent;
    border: 0;
    box-shadow: none;
    contain: none !important;
  }

  body:has(.app-sidebar) .table-card table,
  body:has(.app-sidebar) .table-card tbody,
  body:has(.app-sidebar) .table-card tr,
  body:has(.app-sidebar) .table-card td,
  .panel-page .table-card table,
  .panel-page .table-card tbody,
  .panel-page .table-card tr,
  .panel-page .table-card td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:has(.app-sidebar) .table-card table,
  .panel-page .table-card table {
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body:has(.app-sidebar) .table-card thead,
  .panel-page .table-card thead {
    display: none !important;
  }

  body:has(.app-sidebar) .table-card tbody,
  .panel-page .table-card tbody {
    display: grid !important;
    gap: 12px;
  }

  body:has(.app-sidebar) .table-card tbody tr,
  .panel-page .table-card tbody tr {
    padding: 10px 14px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 16px;
    background: rgba(29, 25, 43, .78);
  }

  body:has(.app-sidebar) .table-card td,
  .panel-page .table-card td {
    min-height: 42px;
    padding: 10px 0 !important;
    display: grid !important;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr) !important;
    align-items: start;
    gap: 12px;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  body:has(.app-sidebar) .table-card td:last-child,
  .panel-page .table-card td:last-child {
    border-bottom: 0 !important;
  }

  body:has(.app-sidebar) .table-card td::before,
  .panel-page .table-card td::before {
    content: attr(data-label);
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
  }

  body:has(.app-sidebar) .table-card td[data-label=""],
  .panel-page .table-card td[data-label=""] {
    grid-template-columns: 1fr !important;
  }

  body:has(.app-sidebar) .table-card td[data-label=""]::before,
  .panel-page .table-card td[data-label=""]::before {
    display: none;
  }

  body:has(.app-sidebar) .table-card td[colspan],
  .panel-page .table-card td[colspan] {
    display: block !important;
    min-height: 0;
    text-align: center !important;
  }

  body:has(.app-sidebar) .table-card td[colspan]::before,
  .panel-page .table-card td[colspan]::before {
    display: none;
  }

  body:has(.app-sidebar) .table-card td input[type="checkbox"],
  .panel-page .table-card td input[type="checkbox"] {
    width: 24px;
    min-width: 24px;
    height: 24px;
  }

  body:has(.app-sidebar) .table-card .row-actions,
  .panel-page .table-card .row-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  body:has(.app-sidebar) .actions,
  body:has(.app-sidebar) .task-actions,
  body:has(.app-sidebar) .campaign-actions,
  body:has(.app-sidebar) .payment-result-actions,
  body:has(.app-sidebar) .quick-period-buttons,
  body:has(.app-sidebar) .task-stats,
  body:has(.app-sidebar) .billing-summary,
  body:has(.app-sidebar) .client-stats-summary,
  body:has(.app-sidebar) .task-filter-tabs,
  body:has(.app-sidebar) .lead-filter-tabs {
    grid-template-columns: 1fr !important;
  }

  body:has(.app-sidebar) .table-card td,
  .panel-page .table-card td {
    grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) !important;
  }

  .panel-nav,
  body.sidebar-collapsed .panel-nav {
    gap: 1px !important;
  }

  .panel-nav-icon,
  body.sidebar-collapsed .panel-nav-icon {
    width: 40px !important;
    min-width: 40px !important;
  }
}