/* ============================================================================
   B3 — Mobile layout for the workspace redesign (<760px).

   The redesign is now the single app for ALL viewports (the old <980 boot gate
   to /app?legacy=1 is gone). Below 760px the desktop 3-column flex row can't
   show chat + a readable stage at once, so App.jsx switches to a single-column
   model and tags the root <div> with data-mobile="true" + data-mobile-view.

   This file owns ONLY the mobile presentation: it positions the App-owned
   wrapper elements (.kv-mobile-*) and overrides the inner panes' inline flex so
   they fill the column. The pane components themselves (ChatPane / Workspace /
   Sidebar / InspectorPane) are NOT edited — they render unchanged inside these
   wrappers. Everything here is scoped under [data-mobile="true"] so desktop is
   completely untouched.

   Contracts honored: min-height uses 100dvh (App root), no horizontal scroll,
   touch targets >=44px (top-bar button 44x44, tab-bar buttons >=52px tall),
   safe-area insets on top bar / tab bar, reduced-motion fallback.
   ============================================================================ */

/* The whole shell never scrolls horizontally on mobile. */
[data-mobile="true"] {
  overflow-x: hidden;
}

/* ── Primary panes (chat / workspace) ──────────────────────────────────────
   App.jsx wraps each pane in <div class="kv-mobile-pane" data-pane="…">.
   Each wrapper is a full-width flex column that fills the space between the
   top bar and the bottom tab bar. */
[data-mobile="true"] .kv-mobile-pane {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Only the pane matching the active view is shown; the other stays mounted
   (preserving chat scroll / composer / run state) but display:none. */
[data-mobile="true"][data-mobile-view="chat"] .kv-mobile-pane[data-pane="workspace"],
[data-mobile="true"][data-mobile-view="workspace"] .kv-mobile-pane[data-pane="chat"] {
  display: none;
}

/* The ChatPane root carries an inline `flex: 0 0 var(--chat-w)` + a right
   border for the desktop column. On mobile it must fill its wrapper instead.
   Inline styles require !important to override. */
[data-mobile="true"] .kv-mobile-pane[data-pane="chat"] > .chat-panel {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  border-right: 0 !important;
}

/* Workspace root has no class — it's the only direct child of its wrapper.
   It already uses flex:1; make sure width is full and it can't overflow. */
[data-mobile="true"] .kv-mobile-pane[data-pane="workspace"] > * {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ── Sidebar drawer (off-canvas) + scrim ───────────────────────────────────
   App.jsx renders <div class="kv-mobile-drawer">{<Sidebar/>}</div> plus a
   sibling scrim. The Sidebar component is unchanged; we position our wrapper
   as a left drawer and let the Sidebar render at its natural width inside. */
[data-mobile="true"] .kv-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  max-width: 86vw;
  display: flex;
  background: var(--bg-0);
  box-shadow: var(--shadow-3, 0 8px 40px rgba(0, 0, 0, 0.4));
  transform: translateX(-102%);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}
[data-mobile="true"] .kv-mobile-drawer[data-open="true"] {
  transform: translateX(0);
}
/* The Sidebar inside the drawer should size to its content and fill height.
   Kill its own width-morph transition so it doesn't fight the drawer slide. */
[data-mobile="true"] .kv-mobile-drawer > .kv-sidebar-v2-a {
  height: 100% !important;
  transition: none !important;
}

[data-mobile="true"] .kv-mobile-scrim {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: color-mix(in oklch, var(--ink-1000, #000) 52%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
[data-mobile="true"] .kv-mobile-scrim[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* ── Inspector as a full-screen overlay ────────────────────────────────────
   On mobile there's no room for a side inspector; show it full-screen above
   everything when open. App.jsx wraps it in .kv-mobile-inspector. */
[data-mobile="true"] .kv-mobile-inspector {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  background: var(--bg-0);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
[data-mobile="true"] .kv-mobile-inspector > * {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
}

/* ── Touch tuning ──────────────────────────────────────────────────────────
   Bottom tab bar / top bar buttons already meet >=44px in App.jsx inline
   styles; this just removes the tap highlight + double-tap zoom jitter. */
[data-mobile="true"] .kv-mobile-tabbar button,
[data-mobile="true"] .kv-mobile-topbar button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Insert dock: hidden on mobile ─────────────────────────────────────────
   The floating slide-editing toolbar (InsertDock: text / image / shapes / star
   / emoji / table / chart + the AI tool — root is <div data-dock>) is a
   pointer-driven canvas affordance that doesn't work on touch. On mobile the
   user builds slides by talking to the agent in chat (the default mobile view),
   so the dock is removed entirely. The slides pane still renders for viewing via
   the "Слайды" tab; it's just not directly editable here. */
[data-mobile="true"] [data-dock] {
  display: none !important;
}
/* The zoom chip sits in the dock-zone padding and is equally pointer-only. */
[data-mobile="true"] [data-zoom-control] {
  display: none !important;
}

/* ── Reduced motion ────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  [data-mobile="true"] .kv-mobile-drawer,
  [data-mobile="true"] .kv-mobile-scrim {
    transition: none;
  }
}