/**
 * Multify web responsive breakpoints + safe-area tokens.
 *
 * JS counterpart: /sc-breakpoints.js (window.MF_BP).
 * Audit: devnotes/mobile-web-audit.md → MW-001, MW-002.
 *
 * IMPORTANT: Standard CSS cannot use custom properties inside @media
 * conditions in all browsers. When writing media queries, copy the px
 * values below literally (they must stay in sync with sc-breakpoints.js):
 *
 *   phone shell / hamburger / drawers:
 *     @media (max-width: 767.98px) { ... }
 *     @media (min-width: 768px)    { ... }   ← desktop (preserve)
 *
 *   denser phone-only spacing (optional):
 *     @media (max-width: 640px) { ... }
 *
 *   very small phones:
 *     @media (max-width: 480px) { ... }
 *
 *   extreme narrow:
 *     @media (max-width: 360px) { ... }
 *
 * Desktop experience is everything at min-width: 768px. New phone styles
 * must live only inside max-width: 767.98px (or compact/narrow) blocks.
 *
 * Safe-area (MW-002): env(..., 0px) is a no-op on non-notch desktops.
 * Requires viewport-fit=cover on the page <meta name="viewport">.
 */

:root {
  /* Breakpoint token values (px). For documentation + non-@media use. */
  --mf-bp-phone: 767.98px;
  --mf-bp-desktop: 768px;
  --mf-bp-compact: 640px;
  --mf-bp-narrow: 480px;
  --mf-bp-micro: 360px;

  /* Shared layout tokens used by phone chrome (safe to reference in rules). */
  --mf-phone-drawer-width: min(86vw, 320px);
  --mf-phone-gutter: 1rem;

  /* Safe-area insets (notch / home indicator / rounded corners). */
  --mf-safe-top: env(safe-area-inset-top, 0px);
  --mf-safe-right: env(safe-area-inset-right, 0px);
  --mf-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mf-safe-left: env(safe-area-inset-left, 0px);
}

/* ── Overlay roots (position:fixed; inset:0) ───────────────────────────────
   Padding insets absolute-centered dialogs into the safe rectangle without
   changing desktop layout (env() is 0 off-notch). Prefer this over manual
   max-height math on every modal. */
#clawbox-viewer-modal,
#clawbox-share-modal,
#sc-confirm-modal,
#sc-prompt-modal,
#sc-app-connections-modal,
#sc-app-toolkit-details-modal,
#fi-modal,
#sc-bulletin-dismiss-modal,
#sc-onboard-wizard-modal,
#sc-invite-modal,
#sc-inbox-quickstart-modal,
.nav-settings-modal,
.qc-omni-modal,
.qc-lightbox {
  padding-top: var(--mf-safe-top);
  padding-right: var(--mf-safe-right);
  padding-bottom: var(--mf-safe-bottom);
  padding-left: var(--mf-safe-left);
  box-sizing: border-box;
}

/* Fixed bottom chrome: sit above the home indicator. Desktop: env is 0. */
.chat-sc-card,
.chat-sc-pill,
.sct-shortcuts-card,
.sct-shortcuts-pill,
.pages-shortcuts-card,
.pages-shortcuts-pill,
.sc-tour-fab {
  bottom: calc(1.25rem + var(--mf-safe-bottom)) !important;
}

@media (max-width: 767.98px) {
  .sc-tour-fab {
    bottom: calc(0.85rem + var(--mf-safe-bottom)) !important;
  }

  /*
   * MW-024 — Keyboard shortcut pills
   * Cards advertise desktop key chords (T/P/S/N/?) that phones can't use and
   * steal vertical space above the composer / home indicator. Hide hosts +
   * cards + re-show pills entirely on phone. Desktop unchanged.
   */
  #chat-shortcuts-host,
  #sct-shortcuts-host,
  #pages-shortcuts-host,
  .chat-sc-card,
  .chat-sc-pill,
  .sct-shortcuts-card,
  .sct-shortcuts-pill,
  .pages-shortcuts-card,
  .pages-shortcuts-pill {
    display: none !important;
  }

  /* Related: New Chat kbd chip is desktop-only noise on the drawer. */
  .chat-new-kbd {
    display: none !important;
  }

  /*
   * MW-003 — iOS Safari focus zoom
   * Safari zooms the viewport when a focused form control has a computed
   * font-size under 16px, and often does not restore cleanly on blur.
   * Force text-entry controls to 16px on phone only. Desktop (≥768) is
   * unchanged. !important beats component classes and common inline sizes.
   * Buttons / checkboxes / file pickers are excluded on purpose.
   */
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="color"]),
  select,
  textarea,
  .sc-input,
  .form-control,
  .form-select,
  .sct-input,
  .sct-textarea,
  .sct-search,
  .sct-chip-input-field,
  .sct-share-linkbox input,
  .sct-exp-dates input[type="date"],
  .sct-exp-dates input[type="time"],
  .sct-exp-dates input[type="datetime-local"],
  .chat-history-search-input,
  .chat-model-search,
  .qc-omni-input,
  .qc-res-input,
  .qc-tmpl-input,
  #chat-input,
  #chat-history-search-input,
  #chat-model-search,
  #chat-adv-iters,
  #chat-backchannel-input,
  #qc-live-url,
  #qc-pw-input,
  #qc-expiry-datetime,
  #qc-apps-input,
  #pages-search-input,
  #pages-title-input,
  #pages-slug-input,
  #pages-content-input,
  #clawbox-search-q,
  #clawbox-search-type,
  #clawbox-search-from,
  #clawbox-search-to,
  #clawbox-share-url,
  #qc-composer-input,
  #qc-sidebar-input,
  [contenteditable="true"][role="textbox"] {
    font-size: 16px !important;
  }

  /*
   * MW-004 — Touch targets (~44px) + always-visible critical actions
   * Desktop keeps compact icon chrome. Only primary controls are enlarged.
   */
  .chat-icon-btn,
  .chat-expand-btn,
  .chat-mic-btn,
  .chat-send-btn,
  .chat-history-search-btn,
  .chat-history-search-clear,
  .chat-nav-gear,
  .chat-nav-add,
  .chat-backchannel-toggle,
  .sc-nav-hamburger,
  .sc-nav-chat-toggle,
  .sc-nav-icon-link,
  .sc-tour-help,
  .chat-mcp-promo-dismiss,
  .chat-nudge-dismiss {
    min-width: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box;
  }
  .chat-new-btn {
    min-height: 44px !important;
  }
  .chat-nav-item {
    min-height: 44px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
  .chat-history-row {
    min-height: 44px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
  /* History delete is hover-only on desktop; always available on phone. */
  .chat-history-del {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.5rem !important;
  }
  .sc-nav-mobile-icon-link,
  .sc-nav-profile-option,
  .sc-nav-team-option,
  .sc-nav-team-create-option {
    min-height: 44px;
  }
  .btn-sc {
    min-height: 44px;
  }

  /*
   * MW-110 — Auth shells (login / signup / complete)
   * Side padding is on .sc-auth-shell; keep Google GIS button from overflowing
   * sub-320px viewports (data-width is a fixed iframe hint).
   */
  .sc-auth-shell {
    width: 100%;
    max-width: 100%;
  }
  .sc-google-btn,
  .g_id_signin {
    max-width: 100% !important;
  }
  .g_id_signin > div,
  .g_id_signin iframe {
    max-width: 100% !important;
  }

  /* MW-112 — Billing plan CTAs full width when stacked */
  #sub-card [data-billing-checkout-plan] {
    flex: 1 1 100%;
    min-width: 0 !important;
    width: 100%;
  }

  /* MW-114 — MCP server rows stack on phone */
  .mcp-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .mcp-row-right {
    align-items: stretch !important;
    width: 100%;
  }
  .mcp-actions {
    justify-content: flex-start !important;
  }
  .mcp-actions .btn-sc {
    min-height: 44px;
  }
}

/*
 * MW-005 — Overlay z-index ladder (document for implementers)
 *
 *   5–10     chat chrome (expand, share, sticky composer)
 *   40–45    composer absolute menus (desktop)
 *   50–70    chat-main drawers (backchannel closed/open, left drawer 60)
 *   80–85    phone composer bottom-sheets / live pop sheet
 *   3000     image lightbox
 *   9000     fixed bottom pills / tour FAB
 *   9998+    Tasks modal stack
 *   10000+   share catch / attach pickers
 *   10007–38 Apps / Files / banks modals
 *   10035    shared confirm/prompt
 *   10040    nav-settings
 *   10050    omni-search
 *
 * Body scroll lock: scLockBodyScroll / scUnlockBodyScroll in sc-shared.js
 * (reference-counted). Prefer those over raw document.body.style.overflow.
 */

/*
 * MW-007 — Horizontal overflow containment
 * Wide tables, code blocks, kanban boards, and long mono strings must scroll
 * inside their host, not pan the whole document. min-width:0 lets flex children
 * shrink past intrinsic content width.
 */
html {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100%;
}
.sc-main,
.chat-shell,
.chat-main,
.chat-module-host {
  max-width: 100%;
  min-width: 0;
}
/* Module host: allow internal x-scroll without growing the page. */
.chat-module-host {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Wide content islands — scroll locally. */
.chat-module-host pre,
.chat-module-host table,
.sc-main pre,
.sc-main .table-responsive,
.sct-board,
.sct-list-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.chat-module-host table,
.sc-main table {
  max-width: 100%;
}
/* Long unbroken strings (URLs, tokens) wrap rather than expand the page. */
.chat-module-host,
.sc-main {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Restore code blocks: prefer horizontal scroll over mid-token wrap. */
.chat-module-host pre,
.chat-module-host code,
.sc-main pre,
.sc-main code {
  word-break: normal;
  overflow-wrap: normal;
}