/* ============================================================
   Mobile / tablet layer for the whole app.

   Load it LAST on every page (after app.css, wizard.css,
   tools-page.css, billing.css, observability.css, admin.css,
   my-tickets.css, docs.css). It only adds rules inside media
   queries (plus the mobile-notice component), so desktop is
   untouched. Uses the tokens from base.css only.

   Breakpoints:  1100  tablet/laptop squeeze
                  820  phone + small tablet (matches app.css)
                  560  small phones
                  400  very small phones
   ============================================================ */

/* ---------- tablet / small laptop: give the chat more room ---------- */
@media (max-width: 1100px) and (min-width: 821px) {
  .feature-sidebar { min-width: 176px; max-width: 190px; }
  .app-sidebar { width: 260px; min-width: 260px; max-width: 260px; }
  .api-page-grid { grid-template-columns: 1fr; }
}

/* ---------- touch devices: hover-only controls must be visible ---------- */
@media (hover: none) {
  .wz-node-ctl { opacity: 1; }
}

/* ============================================================
   PHONE + SMALL TABLET  (≤ 820px)
   ============================================================ */
@media (max-width: 820px) {

  html, body { overflow-x: hidden; }

  /* iOS zooms into any field under 16px; our forms use 13–14px. */
  input, select, textarea { font-size: 16px !important; }

  /* ----- top bar ----- */
  .navbar.full-width-nav .nav-inner { padding: 0 14px; gap: 12px; }
  .navbar.full-width-nav .nav-links,
  .navbar.full-width-nav.app-topbar .nav-links {
    top: 100%;                       /* always flush under the bar (was 84px on the dashboard) */
    align-items: stretch;
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
  }
  .navbar.full-width-nav .nav-links a,
  .navbar.full-width-nav .nav-links .btn { padding-top: 6px; padding-bottom: 6px; }
  .hamburger { padding: 8px; margin-right: -8px; }   /* bigger tap area */
  .org-pill { max-width: 100%; padding: 6px 14px; }
  .org-pill b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-main.app-main--topbar { padding-top: 64px; }
  .app-main { height: 100vh; height: 100dvh; }

  /* ----- pages that scroll normally (settings, docs, tickets) -----
     app.css pins .app-main to the viewport height with overflow:hidden,
     which is built for the dashboard. Everywhere else let the page flow. */
  .app-main:not(:has(.workspace-wrapper)) {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }
  .app-main:not(:has(.workspace-wrapper)) .workspace { overflow: visible; }

  .container { padding-left: 16px; padding-right: 16px; }
  .app-title { font-size: 22px; }
  .app-sub { font-size: 13px; }

  /* ----- dashboard shell: nav strip on top, one view below ----- */
  .app-align { padding-left: 0; padding-right: 0; }
  .workspace-panel { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .workspace-body { flex-direction: column; flex-wrap: nowrap; overflow: hidden; }

  .feature-sidebar {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .feature-sidebar::-webkit-scrollbar { display: none; }
  .feature-nav-label { display: none; }
  .feature-nav-divider { flex: 0 0 1px; width: 1px; height: 20px; margin: 0 6px; }
  .feature-nav-item { width: auto; padding: 9px 12px; font-size: 13px; }
  .feature-nav-external { display: none; }

  .workspace-content { flex: 1; min-height: 0; }
  .view.active { flex-direction: column; }

  /* list on top (scrolls on its own), detail/chat fills the rest */
  .app-sidebar,
  #tools-subtab-panel-manage .app-sidebar {
    width: 100%; min-width: 0; max-width: none;
    height: auto;
    max-height: 34vh; max-height: min(34dvh, 260px);
    padding: 12px 14px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .app-chat,
  #tools-subtab-panel-manage .app-chat {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
  }
  .pill-btn { padding: 6px 14px; }

  .chat-header,
  #tools-subtab-panel-manage .chat-header { padding: 10px 14px; gap: 8px; }
  .chat-header-title { flex: 1 1 100%; }
  /* action buttons become one horizontally scrollable row instead of wrapping into 3 lines */
  .chat-header-actions {
    flex: 1 1 100%;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .chat-header-actions::-webkit-scrollbar { display: none; }
  .icon-btn { padding: 8px 12px; white-space: nowrap; }

  .messages { padding: 14px; }
  .msg { max-width: 92%; }
  .composer { padding: 10px 12px; gap: 8px; }
  .composer button { padding: 10px 16px; }

  .detail-panel,
  .tools-usage-list { padding: 16px 14px; }

  /* ----- marketplace-style pages (templates, tools, prompts, api, invites) ----- */
  .templates-marketplace { padding: 14px; }
  .marketplace-toolbar { flex-direction: column; gap: 10px; }
  .marketplace-toolbar select { width: 100%; min-width: 0; }
  .template-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
  .invites-panel { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
  .api-page-grid { grid-template-columns: 1fr; }
  .code-lang-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .code-lang-tab { flex-shrink: 0; }
  .code-example-box { max-height: 320px; }
  .api-base-row code { font-size: 0.85rem; }

  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form > div { min-width: 0; }
  .inline-form .btn { justify-content: center; }

  /* ----- observability ----- */
  .obs-page { padding: 14px; height: auto; flex: 1; }
  .obs-toolbar select,
  .obs-toolbar select#obs-days,
  .obs-trace-controls select { min-width: 0; width: 100%; flex: 1 1 100%; }
  .obs-tabs { overflow-x: auto; scrollbar-width: none; }
  .obs-tab { white-space: nowrap; padding: 10px 14px; }
  .obs-kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .obs-section { padding: 12px; }
  .obs-kpi-value { font-size: 20px; }

  /* ----- settings ----- */
  .settings-grid { gap: 16px; margin-top: 16px; }
  .settings-card { padding: 18px; border-radius: 12px; }
  .theme-toggle { display: flex; width: 100%; }
  .theme-option { flex: 1; justify-content: center; padding: 8px 6px; }
  .plan-summary-row { flex-wrap: wrap; }
  .billing-actions .btn { flex: 1 1 100%; justify-content: center; }
  .key-row { align-items: flex-start; }

  /* ----- modals ----- */
  .modal-overlay { padding: 72px 12px 24px; }
  .modal-card { padding: 20px 18px; border-radius: 16px; max-width: 100%; }
  .modal-header { margin-bottom: 14px; }
  .modal-close { padding: 8px; margin: -8px; }
  .connect-mcp-list { max-height: 50vh; }

  /* ----- wizard / model picker (extends the 720px rules in wizard.css) ----- */
  .wz-card { height: 100vh; height: 100dvh; max-height: 100dvh; }
  .wz-tools { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .wz-json-text { height: 220px; font-size: 12px; }
  .mp-popup { max-width: calc(100vw - 16px); }

  /* ----- docs ----- */
  .docs-layout { padding: 20px 16px 56px; gap: 24px; }
  .docs-sidebar-nav {
    max-height: 38vh; max-height: 38dvh;
    overflow-y: auto;
    padding: 10px 12px 0;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }
  .docs-article-link { padding: 10px; }             /* 44px-ish tap target */
  .docs-sidebar-footer { margin-top: 14px; padding-top: 14px; }
  .docs-content { font-size: 15px; }
  .docs-content h1 { font-size: 24px; }
  .docs-content h2 { font-size: 20px; }
  .docs-content pre { padding: 12px 14px; font-size: 12.5px; }

  /* ----- my tickets ----- */
  .mt-layout { min-height: calc(100vh - 68px); min-height: calc(100dvh - 68px); }
  .mt-side { padding: 16px 14px; }
  .mt-side-head h2 { font-size: 17px; }
  .mt-tab { padding: 9px 10px; }
  .mt-item { padding: 14px; }
  .mt-head { flex-direction: column; gap: 14px; }
  .mt-head > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
  .mt-msg-head { flex-wrap: wrap; gap: 4px 12px; }
  .mt-reply { padding: 14px; }
  .mt-reply-actions .btn { width: 100%; justify-content: center; }

  /* ----- floating bits that sit on top of the composer ----- */
  .version-tag { display: none; }
  .toast { left: 12px; right: 12px; bottom: 16px; max-width: none; }
}

/* ============================================================
   SMALL PHONES  (≤ 560px)
   ============================================================ */
@media (max-width: 560px) {
  .btn { padding: 11px 22px; font-size: 15px; }
  .btn-sm { padding: 8px 16px; }
  .modal-actions .btn { flex: 1 1 100%; }
  .auth-card { padding: 28px 20px; border-radius: 16px; }
  .auth-shell { padding: 96px 14px 40px; }
  .app-header-row .app-title { font-size: 20px; }
  .wz-footer { flex-wrap: wrap; }
  .wz-footer-right { width: 100%; }
  .wz-footer-right .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   VERY SMALL PHONES  (≤ 400px)
   ============================================================ */
@media (max-width: 400px) {
  .logo img { height: 24px; }
  .topbar-heading .app-title { font-size: 16px; }
  .feature-nav-item { padding: 9px 10px; }
  .settings-card { padding: 16px 14px; }
  .modal-overlay { padding-top: 64px; }
  .obs-kpis { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   "Better on desktop" notice  (js/mobile-notice.js)
   A small, non-blocking card at the bottom of the screen.
   Below modals (500) and wizards (600), above page content.
   ============================================================ */
.mobile-notice {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 450;
  max-width: 440px;
  margin: 0 auto;
  padding: 16px 16px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  animation: mobile-notice-in 0.25s ease-out;
}
.mobile-notice[hidden] { display: none; }
.mobile-notice.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity 0.15s, transform 0.15s; }
@keyframes mobile-notice-in {
  from { opacity: 0; transform: translateY(12px); }
}
.mobile-notice-main { display: flex; gap: 12px; align-items: flex-start; padding-right: 28px; }
.mobile-notice-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
}
.mobile-notice h2 { margin: 0 0 2px; font-size: 15px; font-weight: 500; color: var(--text-heading); }
.mobile-notice p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.mobile-notice-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mobile-notice-actions .btn { padding: 8px 16px; font-size: 13px; }
.mobile-notice-close {
  position: absolute; top: 6px; right: 6px;
  width: 36px; height: 36px;
  background: transparent; border: none; border-radius: 50%;
  color: var(--text-muted); font-size: 15px; cursor: pointer;
}
.mobile-notice-close:hover { color: var(--text-heading); background: var(--accent-soft); }
.mobile-notice-close:focus-visible,
.mobile-notice .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The notice is for small screens only. */
@media (min-width: 821px) { .mobile-notice { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .mobile-notice { animation: none; }
  .mobile-notice.is-leaving { transition: none; }
}