@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* =============================================================
   AL · Prompt Builder — MOBILE SUPPLEMENT
   -------------------------------------------------------------
   NOTE: style.css already contains the full mobile layout in its
   own @media (max-width: 768px) block (line ~1178): body scrolls
   as a normal page, sidebar stacks on top with a 180px char list,
   output rows go vertical. This file loads AFTER style.css, so
   anything here OVERRIDES that design — which is how the earlier
   conflicts happened (body{overflow:hidden} killed page scroll,
   flex rules exploded the output boxes).

   Therefore this file now contains ONLY the fixes style.css's
   mobile block is missing. Do not add layout rules here that
   style.css's mobile block already handles.

   Also: live2d.html does NOT link this file — it has its own
   inline styles. Nothing here affects the Live2D page.
   ============================================================= */

:root {
  --bg:       #080c14;
  --bg2:      #0d1220;
  --bg3:      #111829;
  --bg4:      #161e32;
  --bd:       rgba(90,120,200,0.12);
  --bd2:      rgba(90,120,200,0.25);
  --bd3:      rgba(90,120,200,0.45);
  --accent:   #c8a96e;
  --accent2:  #e8c98e;
  --blue:     #5b8dd9;
  --blue2:    #7aa8f0;
  --text:     #e2e8f5;
  --text2:    #7d91b5;
  --text3:    #3d4f6e;
  --green:    #4ade80;
  --amber:    #fbbf24;
  --coral:    #f87171;
  --teal:     #5eead4;
  --r:        8px;
  --r2:       12px;
  --pill:     999px;
}

/* Prevent sideways page wobble without blocking vertical scroll.
   (The old overflow:hidden here is what broke page scrolling —
   style.css's mobile block intentionally lets the body scroll.) */
body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* =============================================================
   FIX 1 — header-center
   Desktop centers it with position:absolute + translateX(-50%).
   style.css's mobile block restyles it (order:3, width:100%,
   wrap) but forgets to reset the positioning, so without this
   the tabs render on top of the title and buttons.
   ============================================================= */

.header-center {
  position: static;
  transform: none;
  left: auto;
}

/* =============================================================
   FIX 2 — iOS auto-zoom on input focus
   iOS zooms the page when focusing any input with font-size
   < 16px. style.css's mobile block fixed .manual-area but not
   the character search box.
   ============================================================= */

.sidebar-search input {
  font-size: 16px;
}


/* =============================================================
   FIX 3 — notched phones (iPhone / edge-to-edge Android)
   With viewport-fit=cover the page extends under the notch and
   home bar; env() insets pad the chrome back into visible space.
   Zero effect on non-notched devices (insets are 0).
   ============================================================= */

.site-header {
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));
}

body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* =============================================================
   FIX 4 — tap responsiveness
   touch-action:manipulation removes the double-tap-to-zoom
   detection delay on controls, so rapid taps (Copy, chips,
   character list) register instantly instead of ~300ms late.
   Pinch/scroll elsewhere is unaffected.
   ============================================================= */

.btn,
.mode-btn,
.skin-chips,
.faction-tabs,
.char-list,
.scene-presets {
  touch-action: manipulation;
}