/**
 * 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);
}

/* ── Native <select> normalization ─────────────────────────────────────────
   Strips the browser's default OS dropdown chrome (Safari renders un-reset
   selects as a rounded pill with a double-chevron, clashing with the app's
   flat/square themed controls) and applies one consistent caret app-wide.

   Specificity notes:
   - The appearance reset is a bare element rule: nothing else declares
     `appearance` on selects, so it wins for that property everywhere.
   - The caret rule is (0,2,1) — it must beat `.sc-input` / `.form-control`
     (0,1,0), whose `background` SHORTHAND resets background-image to none.
     :not(.sc-settings-jump-select) leaves the two selects that already add
     their own caret (profile + extension-settings "Jump to section") alone,
     and :not([multiple]) skips list selects. No !important needed.
   Box color/border/square-corners still come from each select's own class;
   only `appearance` + the caret are added here. Caret is a fixed #888 chevron
   (matching .sc-settings-jump-select) — an inline-SVG fill can't read a
   var(), and #888 reads against both dark and light backgrounds. */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
select:not([multiple]):not(.sc-settings-jump-select) {
  padding-right: 2rem; /* room for the caret */
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23888' d='M1.5 5.5L8 12l6.5-6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
}

/* ── 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,
  /* MW-203 — share response modal fields */
  #qc-share-link,
  #qc-share-to,
  #qc-share-from,
  [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-111 — Stack the social login row on phone.
   * .su-social-row is a flex ROW of two fixed-width iframe buttons (Google
   * data-width + Telegram data-size="large"), each column flex:1 1 0;min-width:0.
   * On narrow viewports the columns shrink below the iframes' intrinsic widths;
   * Google is clamped by MW-110 above but the Telegram widget iframe is not, so
   * it overflows its column and overlaps the Google button. Stack them vertically,
   * full-width, and clamp the Telegram iframe (the missing counterpart to Google).
   */
  .su-social-row {
    flex-direction: column;
    align-items: stretch;
  }
  #google-login-section,
  #tg-login-section {
    flex: 1 1 auto;
    width: 100%;
  }
  #tg-login-widget {
    max-width: 100%;
  }
  #tg-login-widget 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;
}