/* ================================================================
   MOBILE RESPONSIVE — Unified overrides
   Loaded last so rules can refine per-page styles without !important
   where possible. Targets real class names used across the site.

   Breakpoints:
     - 1024px  : tablet landscape / small laptop
     -  900px  : tablet portrait / where most sidebars collapse
     -  768px  : large phone landscape
     -  640px  : phone
     -  480px  : small phone
   ================================================================ */

/* ----------------------------------------------------------------
   GLOBAL — prevent horizontal scroll & runaway content
---------------------------------------------------------------- */
@media (max-width: 900px) {
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

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

  pre, code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
  }

  pre {
    white-space: pre;
  }

  pre > code {
    white-space: pre;
  }

  table {
    max-width: 100%;
  }
}

/* ----------------------------------------------------------------
   TABLES — horizontal scroll wrappers
---------------------------------------------------------------- */
@media (max-width: 900px) {
  .usage-history-table-wrap,
  .online-users-table-wrapper,
  .activity-list,
  .management-table-wrap,
  .table-wrap,
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .usage-history-table,
  .online-users-table,
  .management-table {
    min-width: 560px;
  }
}

/* ----------------------------------------------------------------
   FORMS — stack labels, full-width inputs
---------------------------------------------------------------- */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select,
  .form-input,
  .form-select,
  .form-textarea,
  .form-input-action,
  .form-select-action,
  .form-textarea-action {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;    /* prevents iOS zoom on focus */
  }

  .form-group,
  .form-group-action,
  .form-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .form-row > * {
    width: 100%;
  }

  button,
  .btn,
  .button,
  [role="button"] {
    max-width: 100%;
  }
}

/* ----------------------------------------------------------------
   MODALS — full-screen friendly on mobile
---------------------------------------------------------------- */
@media (max-width: 640px) {
  .modal-overlay,
  .modal-backdrop,
  .auth-modal-overlay {
    padding: 0.5rem;
    align-items: flex-start;
  }

  .modal,
  .modal-card,
  .modal-content,
  .modal-content-action,
  .management-modal-content,
  .action-modal .modal-content-action,
  .auth-modal,
  .chat-search-modal-card,
  .users-modal,
  .reload-clients-modal-content,
  .settings-card,
  .projects-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    margin: 0.5rem 0 !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
  }

  .modal-header,
  .modal-header-action,
  .modal-body,
  .modal-body-action,
  .modal-footer,
  .modal-footer-action {
    padding: 1rem !important;
  }

  .modal-footer,
  .modal-footer-action {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }

  .modal-footer > *,
  .modal-footer-action > * {
    width: 100%;
  }
}

/* ----------------------------------------------------------------
   TYPOGRAPHY — cap hero/display sizes on narrow screens
---------------------------------------------------------------- */
@media (max-width: 640px) {
  h1 {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    line-height: 1.15;
    word-break: break-word;
  }

  h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.9rem);
    line-height: 1.2;
  }

  h3 {
    font-size: clamp(1.15rem, 4.5vw, 1.5rem);
    line-height: 1.25;
  }

  .hero-statement,
  .hero-title,
  .landing-hero h1,
  .news-page-title,
  .docs-title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.1 !important;
  }

  .article-title,
  .article h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
  }
}

/* ----------------------------------------------------------------
   CONTAINER PADDING — tighten edges on phones
---------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --container-pad: 1rem;
  }

  .section-frame,
  .header-container,
  .footer-frame,
  .hero-frame,
  .news-hero-inner,
  .docs-layout,
  .docs-content,
  .article-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 480px) {
  :root {
    --container-pad: 0.75rem;
  }
}

/* ================================================================
   LANDING — release grid, featured card, split grid, footer
   ================================================================ */
@media (max-width: 900px) {
  .featured-card {
    grid-template-columns: 1fr !important;
  }

  .split-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .release-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

@media (max-width: 640px) {
  .release-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-columns {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }

  .footer-frame {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .landing-header .header-actions .try-pluto-wrap {
    display: none;
  }

  .announcement-container {
    flex-wrap: wrap;
    padding: 0.5rem 0.85rem;
    gap: 0.5rem;
  }

  .announcement-message {
    font-size: 0.82rem;
    flex: 1 1 100%;
    min-width: 0;
    word-break: break-word;
  }

  .mobile-menu {
    width: min(320px, 88vw);
  }
}

/* ================================================================
   ARTICLES — editorial-style pages
   ================================================================ */
@media (max-width: 640px) {
  .article,
  .article-body,
  .article-content,
  .article-shell {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .article img,
  .article figure {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .article-meta,
  .article-header-meta {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .article blockquote {
    padding-left: 1rem;
    margin-left: 0;
  }
}

/* ================================================================
   NEWS / INDEX rows
   ================================================================ */
@media (max-width: 640px) {
  .news-featured-card {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .news-index-row {
    grid-template-columns: 1fr !important;
    padding: 1rem 0 !important;
    gap: 0.4rem !important;
  }

  .news-index-date,
  .news-index-cat {
    font-size: 0.75rem;
  }

  .news-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .news-search {
    width: 100%;
  }

  .news-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .news-chip {
    flex-shrink: 0;
  }
}

/* ================================================================
   MANAGEMENT CONSOLE — dashboard layout
   ================================================================ */
@media (max-width: 900px) {
  .management-header .header-container,
  .management-header {
    flex-wrap: wrap;
    padding: 0.75rem 1rem !important;
    gap: 0.5rem;
  }

  .management-header .header-title,
  .management-header .header-subtitle {
    display: none;
  }

  .management-main {
    padding: 1rem !important;
  }

  .spending-insights-section,
  .management-insights-card {
    grid-template-columns: 1fr !important;
  }

  .spending-chart-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .spending-chart-tab {
    flex-shrink: 0;
  }
}

@media (max-width: 640px) {
  .stats-section {
    grid-template-columns: 1fr !important;
  }

  .control-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .control-panel {
    padding: 0.85rem !important;
  }

  .control-item {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .control-action {
    width: 100%;
  }

  .control-action .btn,
  .control-action button {
    width: 100%;
  }

  .spending-line-chart {
    width: 100%;
    height: auto;
  }

  .online-users-meta,
  .activity-header,
  .activity-header-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .activity-item {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .panel-header {
    flex-wrap: wrap;
  }

  .ticket-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   SETTINGS PORTAL — usage, tables, save bar
   ================================================================ */
@media (max-width: 900px) {
  .usage-balance-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .usage-breakdown-card,
  .usage-block {
    padding: 1rem !important;
  }
}

@media (max-width: 640px) {
  .usage-history-table th,
  .usage-history-table td {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.82rem !important;
  }

  .settings-main {
    max-width: 100% !important;
  }

  .settings-card {
    padding: 1rem !important;
  }

  .avatar-editor,
  .avatar-crop-dialog {
    width: 100% !important;
    max-width: 100% !important;
  }

  .theme-options,
  .theme-grid {
    grid-template-columns: 1fr !important;
  }

  .settings-section-grid,
  .section-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   PLUTO / ECHOAI CHAT
   ================================================================ */
@media (max-width: 900px) {
  #chatSidebar {
    width: min(300px, 86vw) !important;
    max-width: 86vw !important;
  }

  .artifacts-panel,
  .code-sidebar,
  .code-sidebar-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 640px) {
  #echoHeader {
    padding: 0.5rem 0.75rem !important;
    gap: 0.4rem !important;
    flex-wrap: wrap;
  }

  #echoHeader .header-left,
  #echoHeader .header-right {
    gap: 0.35rem !important;
  }

  #echoHeader .logo-text {
    font-size: 0.95rem !important;
  }

  #echoHeader .guest-badge,
  #echoHeader .badge-small {
    display: none;
  }

  #mainContent {
    padding: 0.5rem !important;
  }

  #chatlog {
    padding: 0.5rem !important;
  }

  #chatInputArea,
  #inputWrapper {
    padding: 0.5rem !important;
  }

  #chatInput {
    font-size: 16px !important;     /* prevents iOS zoom */
  }

  .message,
  .chat-message,
  .msg {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Model picker / popovers: keep inside viewport */
  .model-picker-popover,
  .chat-search-modal-card,
  .settings-card,
  .projects-card {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
  }

  .auth-card,
  .auth-form {
    width: 100% !important;
    padding: 1rem !important;
  }

  .settings-tabs,
  .projects-tabs,
  .auth-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .settings-tabs > *,
  .projects-tabs > *,
  .auth-tabs > * {
    flex-shrink: 0;
  }
}

/* ================================================================
   POLYGON
   ================================================================ */
@media (max-width: 640px) {
  .polygon-topbar {
    padding: 0.5rem 0.75rem !important;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .polygon-stage-body,
  .polygon-home,
  .polygon-projects,
  .polygon-chats,
  .polygon-artifacts,
  .polygon-code {
    padding: 1rem !important;
  }

  .polygon-greeting-text {
    font-size: 22px !important;
  }

  .polygon-projects-grid {
    grid-template-columns: 1fr !important;
  }

  .polygon-composer {
    border-radius: 14px !important;
  }

  .polygon-composer-input {
    font-size: 16px !important;
  }

  .polygon-composer-toolbar {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .polygon-toolbar-left,
  .polygon-toolbar-right {
    flex-wrap: wrap;
  }

  .polygon-popover,
  .polygon-code-mode-popover,
  .polygon-code-picker {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
  }

  .polygon-code-ws-body {
    flex-direction: column;
  }

  .polygon-code-side {
    width: 100% !important;
    max-width: 100% !important;
    border-left: 0;
    border-top: 1px solid var(--polygon-border, rgba(255,255,255,0.08));
  }

  .polygon-quick-actions {
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-start;
  }

  .polygon-dock {
    padding: 0.5rem 0.75rem !important;
  }
}

/* ================================================================
   AIRO — learning app
   ================================================================ */
@media (max-width: 900px) {
  .airo-topbar {
    padding: 0.5rem 0.75rem !important;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .airo-topbar-actions {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .airo-main {
    padding: 1rem !important;
  }

  .airo-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .airo-library-grid,
  .airo-create-grid,
  .airo-review-grid {
    grid-template-columns: 1fr !important;
  }

  .airo-card,
  .airo-panel {
    padding: 1rem !important;
  }

  .airo-player-area,
  .airo-question-card {
    padding: 1rem !important;
  }

  .airo-question-text {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
  }

  .airo-answer-btn,
  .airo-choice {
    font-size: 0.95rem !important;
    padding: 0.75rem !important;
  }
}

/* ================================================================
   DOCS / SUPPORT
   ================================================================ */
@media (max-width: 900px) {
  .docs-layout {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .docs-toc-shell,
  .docs-toc {
    position: static !important;
    max-height: none !important;
    width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-soft, rgba(0,0,0,0.1));
    padding-bottom: 0.75rem !important;
  }
}

@media (max-width: 640px) {
  .docs-hero,
  .docs-header {
    padding: 2rem 1rem !important;
  }

  .docs-overview,
  .docs-overview-grid {
    grid-template-columns: 1fr !important;
  }

  .docs-chip-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
  }

  .docs-chip {
    flex-shrink: 0;
  }

  .docs-card,
  .docs-overview-card {
    padding: 1rem !important;
  }
}

/* ================================================================
   APPEAL / MAINTENANCE / ERROR
   ================================================================ */
@media (max-width: 640px) {
  .appeal-form-shell,
  .appeal-card,
  .maintenance-card,
  .error-layout {
    padding: 1.25rem 1rem !important;
    margin: 0.75rem !important;
  }

  .error-code {
    font-size: clamp(3rem, 15vw, 5rem) !important;
  }

  .cookie-banner,
  .cookie-banner-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    padding: 0.85rem 1rem !important;
  }

  .cookie-banner-actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .cookie-banner-actions > * {
    flex: 1 1 auto;
  }
}

/* ================================================================
   BETA / AUTH / PROFILE-CARD STYLE FORMS
   ================================================================ */
@media (max-width: 640px) {
  .beta-page,
  .beta-content,
  .beta-shell {
    padding: 0.75rem !important;
  }

  .beta-card,
  .beta-card-header {
    padding: 1rem !important;
  }

  .beta-mode-switch,
  .beta-tabs {
    flex-wrap: wrap;
    width: 100%;
  }

  .beta-mode-switch > button,
  .beta-tabs > button {
    flex: 1 1 40%;
    min-width: 0;
  }

  .beta-form-shell,
  .beta-field-grid {
    grid-template-columns: 1fr !important;
  }

  .beta-back-link {
    font-size: 0.85rem;
  }
}

/* ================================================================
   PLUTO-INFO / AIRO-INFO / POLYGON-INFO — marketing pages
   ================================================================ */
@media (max-width: 900px) {
  .feature-grid,
  .pluto-info-grid,
  .airo-info-grid,
  .polygon-info-grid,
  .product-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 640px) {
  .product-hero,
  .feature-section,
  .info-hero {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .product-hero h1,
  .info-hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.75rem) !important;
    line-height: 1.15 !important;
  }
}

/* ================================================================
   TOUCH TARGETS — 44px minimum
   ================================================================ */
@media (max-width: 640px) and (pointer: coarse) {
  button,
  .btn,
  a.btn,
  .icon-btn,
  .nav-link,
  .mobile-nav-link,
  .settings-nav-item,
  .polygon-nav-item,
  .sb-nav-item,
  input[type="checkbox"] + label,
  input[type="radio"] + label {
    min-height: 40px;
  }

  .icon-btn,
  .close-btn,
  .modal-close,
  .mobile-menu-close {
    min-width: 40px;
    min-height: 40px;
  }
}