/* ============================================================
   css/mobile.css — MOBILE / TABLET ONLY (sandbox)
   ------------------------------------------------------------
   Every rule in this file lives inside a media query or a pointer
   query, so it can never apply at desktop widths. Loaded AFTER
   styles.css / pages.css so equal-specificity rules win there.

   Item 1 — the Studio "controls slider" becomes VERTICAL on small screens.
   Desktop keeps the existing behaviour untouched: a vertical rail on the
   left and a horizontal margin-left slide.
   ============================================================ */

/* ---------- ITEM 1: vertical controls slider (phones + tablets) ---------- */
@media (max-width: 1000px) {

  /* keep the rail visible and turn it into a full-width horizontal bar.
     It sits right after .controls in the DOM, so when the panel is
     collapsed the bar ends up at the top of the output. */
  .gen-body .controls-rail{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    height:42px;
    padding:0;
    border:none;
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
    background:rgba(0,0,0,.25);
  }
  .gen-body .controls-rail .rail-text{
    writing-mode:horizontal-tb;      /* same element, same wording as desktop — only the axis changes */
    transform:none;
  }
  /* chevron: same glyph as desktop, turned to point along the new axis */
  .gen-body .controls-rail .rail-icon{ transform:rotate(90deg); }
  .gen-body.collapsed .controls-rail .rail-icon{ transform:rotate(-90deg); }

  /* the panel itself: animate up/down instead of left/right */
  .gen-body .controls{
    transition:max-height .32s ease, opacity .22s ease, padding .32s ease;
    max-height:1400px;                 /* taller than any phone panel */
    overflow:hidden;
  }
  /* the desktop collapsed grid (0 34px 1fr) must not apply here — single column */
  .gen-body.collapsed{ grid-template-columns:1fr; }
  .gen-body.collapsed .controls{
    display:flex;                      /* override the old display:none so it can animate */
    max-height:0;
    margin:0;
    padding-top:0;
    padding-bottom:0;
    border-bottom:0;
    opacity:0;
    pointer-events:none;
  }
}

/* ---------- ITEM 3: the prompt-doc action bar scrolls sideways on small screens ----------
   Same bar, same items, same styling as desktop (score · Recommended · Concise ·
   Improve with your facts · Auto optimize · copy · regenerate). It is simply swipeable
   instead of being clipped by the panel edge. */
@media (max-width: 1000px) {
  .sg-head{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;      /* momentum swipe on iOS */
    scrollbar-width:none;                  /* Firefox */
    -ms-overflow-style:none;
  }
  .sg-head::-webkit-scrollbar{ display:none; }
  /* margin-left:auto would push the row right and hide its start in a scroll box */
  .sg-head .sg-actions{ margin-left:0; flex:0 0 auto; }
  .sg-head .sg-actions > *{ flex:0 0 auto; }
}

/* ---------- ITEM 4: ONLY the parent pill is reduced ----------
   The four boxes (Role / Target Style / Context / Get your prompt) are back to their
   original size, order, padding, type and full-width CTA — untouched. The single
   change here is the pill that sits behind them: tighter padding and gaps. */
@media (max-width: 720px) {
  /* the studio box keeps a 70px bottom margin for the desktop FLOATING bar; in the
     phone flow the bar is static, so that margin is just empty space. Pull it up.
     !important so nothing else (other sheets, later rules, inline) can win on ties. */
  .gen-shell{ margin-bottom:12px !important; }        /* was 70px */
  #optBar{
    padding:10px 14px !important;   /* roomier still (7px 9px → 2px 3px → 6px 8px → now) */
    gap:8px !important;             /* space between the rows (8px → 2px → 5px → now)    */
    border:0 !important;            /* was 1px solid                                     */
    margin-top:8px !important;      /* was 12px — sits right under the studio box        */
  }
  /* the pill is exactly its content, so the boxes themselves get smaller now —
     same labels/values/order, full-width CTA, no grid, no reordering.
     Type is reduced a little (14 → 12.5px) as agreed. */
  #optBar .opt-chip{
    font-size:12.5px !important;    /* was 14px  — "a little bit" smaller        */
    padding:1px 8px !important;     /* was 8px 13px                              */
  }
  #optBar .opt-chip .opt-k{ font-size:12.5px !important; }   /* the label half of each chip */
  #optBar .opt-chip.forge{
    padding:1px 10px !important;    /* was 9px 18px                               */
    width:auto !important;          /* hugs its label instead of stretching 100%  */
    min-height:0 !important;
  }
}

/* ---------- ITEM 2: kill the iOS focus-zoom (inputs under 16px) ---------- */
/* Touch devices only: iOS zooms the page whenever a field under 16px is focused.
   This is the ONE place a type size differs from desktop (15px → 16px) and it
   only applies on touch. Say the word and I will drop it. */
@media (max-width: 1000px) and (pointer: coarse) {
  #goal, #context, #customKg,
  input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select{
    font-size:16px;
  }
}

/* ---------- ITEM 6: the "Start prompting" nav button, phones only ----------
   It was wrapping onto three lines (105x66) because the pill had no nowrap.
   Same text, same type, same colours — just a one-line box with less padding. */
@media (max-width: 720px) {
  /* ONLY the button box is reduced — same text, same type, same wrap behaviour,
     nav gaps/padding untouched (the earlier nav tweaks were reverted). */
  .nav .nav-cta{
    /* same small type, but on ONE line like the desktop version.
       Width comes from the horizontal padding, height from the vertical — so 6px
       horizontally is what lets "Start prompting" sit on one line inside the nav. */
    font-size:11px !important;
    text-align:left !important;
    white-space:nowrap !important;  /* one line (was wrapping to two)  */
    padding:11.5px 6px !important;  /* box height matches the profile chip (38px);
                                       6px sides keep the nav from overflowing */
    line-height:1.15 !important;
  }
}

/* ---------- very narrow phones: let the same button wrap again ----------
   Below ~380px the nav cannot fit a one-line button next to the brand and the
   account chip, so it falls back to the previous two-line look (no nav break). */
@media (max-width: 380px) {
  .nav .nav-cta{ white-space:normal !important; padding:5px 8px !important; }
}

/* ---------- ITEM 7: nav right edge on phones ----------
   The chip was clipped on narrow phones because .nav-inner reserves 24px on each
   side. Give 8px of that back so brand + button + profile chip fit to the edge.
   Nothing else in the nav changes (no gap/box/content changes). */
@media (max-width: 720px) {
  .nav .nav-inner{
    padding-left:16px !important;
    padding-right:16px !important;
    gap:16px !important;            /* brand ↔ links gap (was 24) */
  }
  .nav-links{ gap:10px !important; } /* button ↔ profile chip gap (was 24) */
}
/* ultra-narrow phones (≤340px): the chip keeps its avatar + caret, the name text
   steps aside so the bar still ends flush at the right edge */
@media (max-width: 340px) {
  .nav .nav-inner{ padding-left:12px !important; padding-right:12px !important; }
  #accountName{ display:none !important; }
}

/* ---------- ITEM 8b: account dropdown rows must stay visible on small screens ----------
   styles.css hides every .nav-links <a> that is not the CTA below 840px. The account
   dropdown lives INSIDE .nav-links, so all of its rows were hidden too — the menu opened
   but looked empty. This keeps the rows; the nav links themselves stay hidden as before. */
@media (max-width: 840px) {
  .nav-links .account-menu .account-menu-item{ display:block !important; }
}

/* ---------- ITEM 9: “Everything, in one place” card on phones ----------
   Inside the card, .topics-ctas holds three nowrap buttons (154+148+121 = 422px) in a
   non-wrapping flex row. That forced the showcase column to 422px inside a ~300px card,
   so the stage art and the topic rows were clipped at the right edge.
   Fix: let the grid column shrink (minmax(0,1fr)), let the rows shrink (min-width:0) and
   let the three buttons wrap. Nothing about their look/size changes. */
@media (max-width: 720px) {
  .topics-showcase{ grid-template-columns:minmax(0,1fr) !important; }
  .topics-stage, .topics-side, .topics-list, .topic-row, .row-body{ min-width:0 !important; max-width:100% !important; }
  .topics-ctas{ flex-wrap:wrap !important; gap:10px !important; }   /* a little breathing room */
  .topics-ctas .btn{ flex:1 1 auto; justify-content:center; }
}

/* ---------- ITEM 10: the Shares header controls, smaller on phones ----------
   Same labels, same colours, same components — only the box metrics shrink:
   the two tabs (Recent Posts / Your shares), the search field, the filter pills
   (All / #coding / More), the "sort" label and the three sort buttons.
   Scoped with .shv-* so the Studio's own tabs and pills are untouched. */
@media (max-width: 720px) {
  .shv-bar{ gap:10px !important; margin-bottom:10px !important; flex-wrap:nowrap !important; align-items:center !important; }
  .shv-bar .tabs{ flex:0 0 auto !important; flex-wrap:nowrap !important; border-bottom:0 !important; }
  .shv-bar .tabs .tab{ padding:7px 4px !important; font-size:0.8125rem !important; white-space:nowrap !important; }
  .shv-bar .search{ flex:1 1 auto !important; min-width:0 !important; padding:6px 12px !important; border-radius:999px !important; }
  .shv-bar .search input{ font-size:0.875rem !important; }
  .shv-filters{ gap:6px 8px !important; margin-bottom:10px !important; }
  /* sort sits on its own full-width row UNDER the filter pills, aligned left */
  .shv-sort{ order:0 !important; margin-left:0 !important; width:100% !important; justify-content:flex-start !important; }
  .shv-filters .pill{ padding:3px 9px !important; font-size:0.75rem !important; }
  .shv-sort{ gap:5px !important; }
  .shv-sort-label{ font-size:0.6875rem !important; }
}

/* ---------- ITEM 11: Dashboard credits group nudged left on phones ----------
   The credits block (balance / bar / "Remaining is …" / Topup-Upgrade) is right
   aligned and sat flush against the card's right edge. Give it a little inset. */
@media (max-width: 720px) {
  /* the group sits on the right; only the "13 / 4" is centred — over its bar */
  .db-credit{ width:auto !important; text-align:right !important; margin-left:auto !important; margin-right:24px !important; }
  .db-credit .dash-bar{ margin-left:auto !important; margin-right:0 !important; }
  .db-credit-num{ width:160px !important; margin-left:auto !important; margin-right:0 !important; text-align:center !important;
                  padding-left:56px !important; }  /* shift the number further right */
}

/* ---------- ITEM 12: API page rail → drawer INSIDE the docs box ----------
   Phones/tablets (≤900px). The rail keeps its own design but lives in a drawer that
   is clipped by the API docs box itself (not the page): it slides in from the left
   and is opened/closed by a small ">" / "<" handle on the box's left edge, vertically
   centred. No backdrop, no full-page overlay. */
@media (max-width: 900px) {
  /* the docs box's backdrop-filter would become the containing block for fixed
     children (and clip them) — drop it here so the drawer can anchor to the viewport */
  .dx-doc{
    position:relative !important;
    overflow:visible !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  .dx-rail.pf-rail-drawer{
    position:fixed !important;
    top:50vh; left:0;                 /* always the middle-left of the screen; left set by JS */
    height:auto !important;           /* only as tall as its items */
    max-height:calc(100vh - 120px) !important;
    width:min(50vw,160px) !important; max-width:160px !important;   /* narrower still */
    border-radius:0 18px 18px 0 !important;                          /* curved right edge */
    flex-direction:column !important; flex-wrap:nowrap !important; gap:2px !important;
    margin:0 !important; padding:18px 12px 24px !important;
    background:#000 !important;                        /* solid black */
    border-right:1px solid var(--line) !important;
    transform:translate(calc(-100% - 30px), -50%) !important;      /* hidden, vertically centred */
    transition:transform .3s cubic-bezier(.2,.8,.2,1) !important;   /* open/close only */
    z-index:420 !important; overflow-y:auto !important; align-self:auto !important;
  }
  .dx-rail.pf-rail-drawer.pf-open{ transform:translate(0, -50%) !important; }
  .dx-rail.pf-rail-drawer a{ white-space:nowrap; }
  .dx-rail.pf-rail-drawer .dx-rail-t{ margin-bottom:6px; }

.pf-rail-btn{
    position:fixed !important; left:0; top:50vh !important;   /* left is set by JS (no !important) */
    transform:translateY(-50%) !important;
    width:26px !important; height:56px !important;
    display:inline-flex;             /* NOT !important — JS hides it on other views */
    align-items:center; justify-content:center;
    padding:0 !important;
    border:1px solid var(--line) !important; border-left:0 !important;
    border-radius:0 10px 10px 0 !important;
    background:var(--glass) !important; color:var(--text-56) !important;
    font-family:var(--font-mono); font-size:0.8125rem; line-height:1;
    cursor:pointer;
    -webkit-backdrop-filter:blur(14px) brightness(.8); backdrop-filter:blur(14px) brightness(.8);
    transition:left .3s cubic-bezier(.2,.8,.2,1), color .2s, background .2s !important;
    z-index:15 !important;
  }
  .pf-rail-btn:hover, .pf-rail-btn:active{ color:var(--text) !important; background:var(--glass-2) !important; }
}

/* while the API drawer is open the page must not rubber-band past its edges */
@media (max-width: 900px) {
  html.pf-scroll-lock, html.pf-scroll-lock body{ overscroll-behavior-y: contain; }
}

/* While the API drawer is open the page must END at the "Open the Studio" box.
   These three paddings sat below it (16 + 24 + 64px), letting the page scroll past
   the box — which forced a correction and made the top bar flicker. With them gone
   the browser's own scroll end IS the box, so nothing has to fight anything. */
@media (max-width: 900px) {
  body.pf-drawer-scope section[data-view="api"] > .wrap{ padding-bottom:0 !important; }
  body.pf-drawer-scope .dx-doc{ padding-bottom:0 !important; }
}

/* ---------- ITEM 14: the two end-of-API buttons sit side by side on phones ----------
   .dx-end/.dx-cta is only ~295px wide here, while "Get an API key" + "Open the Studio"
   needed 308px — so they stacked. Smaller boxes, equal halves, one row. */
@media (max-width: 720px) {
  .dx-end .dx-cta{ gap:8px !important; flex-wrap:nowrap !important; }
  .dx-end .dx-cta .btn{
    flex:1 1 0 !important;
    min-width:0 !important;
    padding:9px 8px !important;      /* height stays .btn's own (52px) */
    font-size:0.8125rem !important;
    justify-content:center !important;
  }
}

/* ---------- ITEM 15d: wallet shots listed one under the other (≤1180px) ----------
   Phone, fold (both orientations) and iPad: instead of a pile where two shots hide
   behind the front one, the three cards are listed as a real column — every shot
   visible — and the box sizes itself to them, so no empty space is left under them.
   The JS keeps running (it only sets data-depth/z-index, which no longer hide anything). */
@media (max-width: 1180px) {
  .wallet-stack{
    position:static !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    aspect-ratio:auto !important;
    min-height:0 !important;
    margin-top:12px !important;     /* a little air above the first shot */
    margin-bottom:14px !important;
  }
  .wallet-card{
    position:relative !important;   /* stays the containing block for .wallet-shot / the loader,
                                       so they can never escape the card and render giant */
    width:100% !important;
    transform:none !important;
    opacity:1 !important;
    aspect-ratio:16/9 !important;
  }
}
/* tablets/iPad: when the media column is taller than the three shots, they share its
   height instead of leaving a gap underneath */
@media (min-width: 701px) and (max-width: 1180px) {
  .wallet-stack{ flex:1 1 auto !important; }
  .wallet-card{ flex:1 1 0 !important; min-height:80px !important; aspect-ratio:auto !important; }
}


/* ---------- ITEM 16: hero content a little higher on phones ----------
   .hero-inner centres its content with 160px top / 80px bottom padding; moving those
   two numbers lifts the whole block (title, tagline, buttons, Scroll) by ~78px — a
   touch lower than the earlier 98px version. */
@media (max-width: 720px) {
  .hero-inner{
    padding-top:96px !important;
    padding-bottom:172px !important;
  }
}

/* ---------- ITEM 17: smoothness on real phones/tablets (iOS/Android) ----------
   Real devices were janky: the top bar flickered / drifted and a dark band appeared at
   the bottom while scrolling. The causes are all "expensive" effects that mobile Safari
   and Chrome handle badly while scrolling:
     · the sticky nav had backdrop-filter blur(16px) AND a transform transition;
     · two page-wide layers are position:fixed (#hero-scene canvas, the curve);
     · the footer is a big element with blur(20px);
     · the hero used vh, which jumps when the address bar collapses.
   Nothing about the design changes — only how it is rendered on small screens. */
@media (max-width: 900px) {
  /* 1. top bar: solid tint instead of a blur, its own compositor layer, and FIXED
        rather than sticky — a transform transition on a fixed element is what phones
        animate smoothly (sticky + transform is what flickered on iOS). The spacer keeps
        exactly the 73px of flow space the sticky nav used to hold. */
  .nav{
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
    transition:transform .2s cubic-bezier(.2,.8,.2,1) !important;   /* hides faster than the .38s default */
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:rgba(10,10,11,.94) !important;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    will-change:transform !important;
  }
  body::before{ content:""; display:block; height:73px; }   /* the nav's old flow space */

  /* 1b. a flat base colour under everything, so no gap / rubber-band area ever shows a
         different shade than the mist */
  html, body{ background:#0A0A0B !important; }

  /* the mist keeps its ORIGINAL look on phones: the same image, same `cover` sizing,
     same viewport-sized layer as on desktop. The only addition is a soft fade along its
     bottom edge into the page colour, which is what stops the dark band from showing
     while you scroll (no stretching, no colour change). */

  /* 2. the fixed background layers get promoted so they cannot lag behind the scroll
        (that lag is what showed as a dark band at the bottom edge) */
  #hero-scene, body > .curve-wrapper{
    will-change:transform !important;
    -webkit-transform:translateZ(0);
    transform:translateZ(0) !important;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }

  /* 3. the footer's blur is the heaviest one on the page — keep the dark box, drop the blur */
  footer .wrap{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:rgba(0,0,0,.72) !important;
  }

  /* 4. stable hero height while the mobile address bar shows/hides */
  .hero, .hero-inner{ min-height:92svh; }
}