/* StoredX AI — Mobile V1
   Isolated responsive overrides; desktop remains unchanged. */

@media screen and (max-width: 767px) {

  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

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

  .shell, .main-shell, #content {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .main-shell {
    width: 100% !important;
    margin: 0 !important;
  }

  #content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .main-shell > header {
    min-width: 0 !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  #top-title {
    min-width: 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
  }

  .top-right {
    min-width: 0 !important;
    gap: 5px !important;
  }

  .top-right .upgrade,
  .top-right > .avatar {
    display: none !important;
  }

  .top-right .region {
    min-width: 0 !important;
    font-size: 11px !important;
  }

  .top-right .region select {
    max-width: 145px !important;
    font-size: 11px !important;
  }

  .demo-banner {
    max-width: 100% !important;
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
  }

  /* Shared panels and controls */

  #content .panel,
  #content .results,
  #content .filter-panel {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #content input,
  #content select,
  #content button {
    max-width: 100%;
  }

  #content input,
  #content select {
    font-size: 16px;
  }

  /* Creator Intelligence:
     retain all data; scroll the full table horizontally */

  #content .sx-kd-table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  #content .sx-kd-table {
    width: max-content !important;
    min-width: 1120px !important;
    table-layout: auto !important;
  }

  #content .sx-kd-table th,
  #content .sx-kd-table td {
    white-space: normal;
    overflow-wrap: normal !important;
  }

  #content .sx-kd-creator-col {
    min-width: 210px !important;
  }

  #content .sx-kd-person-text {
    min-width: 0;
  }

  #content .sx-kd-person-text strong {
    overflow-wrap: anywhere;
  }

  #content .sx-kd-results-range {
    max-width: 100%;
    font-size: 12px;
  }

  /* Product rankings */

  #content .sx20-table-scroll,
  #content .table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #content .sx20-table {
    min-width: 920px !important;
  }

  #content .sx20-grid,
  #content .product-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  #content .sx20-grid > *,
  #content .product-grid > *,
  #content .sx20-card,
  #content .product-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #content .sx20-card .card-body {
    min-width: 0 !important;
    padding: 14px !important;
  }

  #content .sx20-hero-metrics,
  #content .sx20-secondary-metrics {
    min-width: 0 !important;
    width: 100% !important;
    gap: 10px !important;
  }

  #content .sx20-hero-sold,
  #content .sx20-hero-price {
    min-width: 0;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #content .sx20-hero-sold strong,
  #content .sx20-hero-price strong,
  #content .sx20-hero-metrics strong {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    font-size: clamp(15px, 4vw, 21px) !important;
    letter-spacing: -0.035em;
  }

  #content .sx20-card-actions,
  #content .sx20-actions {
    max-width: 100%;
  }

  #content .sx20-card-actions button,
  #content .sx20-card-actions a {
    max-width: 100%;
  }

  /* Avoid oversized fixed-width content */
  #content img {
    max-width: 100%;
  }

  #content .panel-head {
    min-width: 0 !important;
    flex-wrap: wrap;
    gap: 10px;
  }

  #content .view-actions {
    flex-shrink: 0;
  }
}

@media screen and (max-width: 390px) {
  #content {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  #content .sx20-card .card-body {
    padding: 11px !important;
  }
}