/* ============================================================
   DeepSeek Harness — mobile layout patch
   Injected by nginx sub_filter (see /etc/nginx/sites-available/dsh-web.conf).
   Nothing in node_modules is modified, so `npm update -g @deepseek-ai/dsh`
   will not wipe this.

   Selectors use [class*="localName"] because dsh ships CSS-module class
   names of the form <hash>_<localName>. The hash changes on every build;
   the local name is stable. If a future dsh release renames a local name,
   the matching rule silently stops applying — re-measure, don't assume.

   Measured problems at 390x844 (iPhone), notice dismissed:
     - left icon rail is a fixed 55-56px and never collapses  -> 14% of width
     - 12 tap targets below Apple's 44px minimum (36px icon
       buttons, 28px-tall chips, 34px send button)
     - "Into the Unknown" headline wraps to 2 lines: 26px text
       in a 161px box inside a 278px grid
     - composer card only 292px wide inside a 326px hero
     - no safe-area insets: bottom gear sits under the home indicator
     - page itself does NOT overflow horizontally (scrollWidth == clientWidth)
   ============================================================ */

@media (max-width: 640px) {

  /* ---- 1. Left rail: narrower, but WIDE ENOUGH FOR ITS ICONS -------
     Measured trap: the rail's inner wrapper has ~10px left padding, so a
     44px button lands at x=10..54 and gets clipped by overflow:hidden
     (scrollWidth 54 vs clientWidth 44). Rail width and button size must
     be solved together: 48px rail + 40px buttons + zeroed padding.     */
  [class*="sidebarCol"] {
    width: 48px !important;
    min-width: 48px !important;
    flex: 0 0 48px !important;
  }
  [class*="_root"][class*="collapsed"] {
    width: 48px !important;
    min-width: 48px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: center !important;
  }
  [class*="_root"][class*="collapsed"] > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---- 2. Tap targets ----------------------------------------------
     Rail buttons get 40px (fits the 48px rail); everything outside the
     rail can afford more. 40px is under Apple's 44px ideal but is the
     largest that does not clip — a real constraint, not a preference. */
  [class*="iconButton"],
  [class*="newSession"],
  [class*="searchButton"],
  [class*="_trigger"][class*="rail"] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* header chips: workspace picker, mode picker, model picker.
     Scoped to the hero/header — a bare [class*="_trigger"] also matches
     the rail toggle and the composer chips and caused collapses. */
  [class*="_workspace"],
  [class*="_seat"] {
    min-height: 36px !important;
  }

  /* composer buttons: leave upstream sizing alone (see section 4).
     34px is under the 44px ideal but is what the 294px card fits. */

  /* ---- 3. Headline fits one line -----------------------------------
     Measured: pXSMma_headline is a 3-column grid
       "34px 160.578px 63.42px"  (fish | text | Preview badge)
     inside a 278px box, so the text column is starved to 160px and
     "Into the Unknown" wraps to 2 lines (h=56 at lh=28).
     Switching to flex-wrap lets the text take the full remaining width
     and pushes the Preview badge onto its own line.                   */
  [class*="_headline"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
    min-width: 0 !important;
  }
  [class*="headlineText"] {
    font-size: 21px !important;
    line-height: 28px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  [class*="previewBadge"] {
    flex: 0 0 auto !important;
  }

  /* dialog close button also needs a real hit area */
  [class*="_close"] {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* ---- 4. Composer footer: DELIBERATELY LEFT ALONE ------------------
     Measured on the DOCKED composer (live session, not the hero), at
     390px. uV2eYG_trailing upstream: x=93..359, w=266, no overflow,
     send button fully on-screen at x=325..359.

     Three attempts all made it WORSE, each verified by measurement:
       a) 40px composer buttons  -> contents 336px, send at x=369..409
       b) nowrap+ellipsis label  -> chip demands intrinsic width,
                                    trailing grows 266 -> 310px
       c) max-width clamp on the
          model chip             -> still 310px, send at x=365..399
     Root cause: upstream lets the model label WRAP inside a fixed
     294px card. Forcing single-line truncation removes the wrap that
     was keeping the row inside the card, so the row grows and shoves
     the send button off a 390px viewport.

     Upstream already fits. Any rule here must be re-measured against
     probe-cmp.js on the docked composer, not the hero screen.        */

  /* ---- 5. Composer uses the width it has --------------------------- */
  [class*="_hero"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  [class*="composerStack"],
  [class*="composerSeat"],
  [class*="_card"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* iOS zooms the page when a focused field is under 16px. */
  textarea[class*="_input"],
  input[type="text"],
  [contenteditable="true"] {
    font-size: 16px !important;
  }

  /* ---- 6. Dialogs: fit the viewport, scroll inside ------------------
     The testing notice measured 482px tall at y=181 — bottom-heavy and
     ~61% of the screen. Cap it and centre it.                         */
  [class*="_dialog_"] {
    max-height: calc(100dvh - 32px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: auto !important;
  }
  [class*="_dialog_"] [class*="_content"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- 7. Notch / home-indicator safe areas ------------------------ */
  [class*="sidebarCol"],
  [class*="_root"][class*="collapsed"] {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  [class*="composerStack"] {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---- 8. Long words (paths, model ids, URLs) don't force overflow -- */
  [class*="_body"],
  [class*="_copy"],
  [class*="conversation"] {
    overflow-wrap: anywhere;
  }
}

/* Very narrow phones (iPhone SE and similar, <=380px) */
@media (max-width: 380px) {
  [class*="headlineText"] {
    font-size: 19px !important;
    line-height: 25px !important;
  }
  [class*="sidebarCol"] {
    width: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
  }
  [class*="_root"][class*="collapsed"] {
    width: 44px !important;
    min-width: 44px !important;
  }
  [class*="iconButton"],
  [class*="newSession"],
  [class*="searchButton"],
  [class*="_trigger"][class*="rail"] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  [class*="_7KE1Ra_root"],
  [class*="_trailing"] > [class*="_root"] {
    max-width: 50% !important;
  }
}