/* pages/responsive.css — split from pages.css (modularity refactor) */

/* ════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ════════════════════════════════════════════════════ */

/* ── Tablet (≤768px) ──────────────────────────────── */
@media (max-width: 48rem) {
  /* Topbar: hide geo + mesh status text, keep logo + lang + signin */
  .qi-topbar-landing {
    padding: var(--qi-space-sm) var(--qi-space-md);
  }
  .qi-topbar-landing__status {
    display: none;
  }
  .qi-topbar-landing__geo {
    display: none;
  }
  .qi-topbar-landing__nav {
    display: none;
  }
  .qi-topbar-landing__logo span {
    font-size: 0.875rem;
  }

  /* Landing: reduce padding, smaller brand */
  .landing {
    padding: 4rem var(--qi-space-md) var(--qi-space-xxl);
  }
  .landing__brand {
    margin-bottom: var(--qi-space-md);
  }
  .landing__prompt {
    font-size: clamp(1.1rem, 1rem + 1vw, 1.5rem);
    margin-bottom: var(--qi-space-md);
  }
  .landing__input {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    height: 2.75rem;
  }
  .landing__send {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
  }

  /* Example cards: full width, smaller text */
  .landing__examples {
    gap: var(--qi-space-xs);
  }
  .landing__example-card {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  /* Mesh panel: hide on small screens to save space */
  .landing__mesh {
    display: none;
  }
  .landing__suggestions {
    display: none;
  }

  /* Dashboard: stack columns vertically */
  .dashboard__columns {
    flex-direction: column;
    gap: var(--qi-space-md);
  }
  .dashboard__column {
    min-width: 100%;
  }

  .dashboard__board {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
  }
  .dashboard__column {
    height: auto;
    max-height: none;
    flex: 0 0 auto;
  }

  /* Dashboard detail sidebar: full width overlay */
  .dashboard__detail-sidebar {
    width: 100%;
    max-width: 100%;
  }

  /* Messenger: sidebar becomes overlay on mobile */
  .messenger {
    flex-direction: column;
  }
  .qi-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85%;
    max-width: 320px;
    z-index: var(--qi-z-overlay);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .qi-sidebar--open {
    transform: translateX(0);
  }
  .qi-main {
    width: 100%;
  }

  /* App shell topbar: compact */
  .qi-app .qi-topbar {
    padding: var(--qi-space-sm) var(--qi-space-md);
  }
  .qi-topbar__brand {
    font-size: 0.875rem;
  }
  .qi-topbar { gap: var(--qi-space-sm); }
  .qi-topbar__divider { display: none; }
  .qi-topbar__view-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Phone (≤480px) ───────────────────────────────── */
@media (max-width: 30rem) {
  /* Topbar: only logo + signin, hide everything else */
  .qi-topbar-landing__signin {
    padding: var(--qi-space-xs) var(--qi-space-sm);
    font-size: 0.75rem;
  }

  /* Landing: minimal padding */
  .landing {
    padding: 3.5rem var(--qi-space-sm) var(--qi-space-xl);
    justify-content: flex-start;
  }
  .landing__brand {
    font-size: 1.75rem;
    margin-bottom: var(--qi-space-sm);
  }
  .landing__prompt {
    font-size: 1.1rem;
    margin-bottom: var(--qi-space-sm);
  }

  /* Input: full width, no border-radius issues */
  .landing__input-wrap {
    max-width: 100%;
  }
  .landing__input {
    font-size: 0.95rem;
    padding: 0.625rem 0.875rem;
    height: 2.5rem;
  }
  .landing__send {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
  }
  .landing__send svg {
    width: 16px;
    height: 16px;
  }

  /* Hint: smaller */
  .landing__hint {
    font-size: 0.7rem;
    margin-top: var(--qi-space-sm);
  }

  /* Example cards: single column */
  .landing__examples {
    flex-direction: column;
    gap: var(--qi-space-xs);
  }
  .landing__example-card {
    width: 100%;
    justify-content: flex-start;
  }

  /* About: single column industries already handled */
  .about__hero {
    padding: 3rem var(--qi-space-sm);
  }
  .about__title {
    font-size: 1.75rem;
  }

  /* Usage meter: compact */
  .qi-usage-meter {
    padding: 4px 8px;
    font-size: var(--qi-text-xs);
  }
  .qi-usage-bar {
    width: 40px;
  }
  .qi-usage-text {
    display: none;
  }
}