/* ==========================================================================
   MOBILE STYLESHEET — All rules scoped under body[data-mobile="true"]
   unless noted otherwise. Loaded alongside styles.css.
   ========================================================================== */

/* ── 0. BASE MOBILE STYLES ─────────────────────────────────────────────── */

body[data-mobile="true"] {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation; /* Prevent double-tap zoom */
}

body[data-mobile="true"] .mobile-sheet-handle {
  touch-action: pan-y;
}

/* ── 1. HEADER COMPRESSION ─────────────────────────────────────────────── */

body[data-mobile="true"] #top-bar {
  padding: 3px 10px !important;
  gap: 6px !important;
}

/* Override inline width/height attributes on logo */
body[data-mobile="true"] #top-bar img {
  width: 20px !important;
  height: 20px !important;
}

/* Hide the "PDC Dev Studio" headline on mobile — you already know which app
   you're in; the title text only ate header height/width. The subtitle is
   hidden just below, so the bar collapses to logo + actions + avatar. */
body[data-mobile="true"] #top-bar h1 {
  display: none !important;
}

body[data-mobile="true"] .subtitle {
  display: none !important;
}

/* Override inline gap on header flex container */
body[data-mobile="true"] #top-bar > div:first-child {
  gap: 6px !important;
}

body[data-mobile="true"] .user-trigger .user-meta {
  display: none !important;
}

body[data-mobile="true"] .user-trigger .chevron {
  display: none !important;
}

body[data-mobile="true"] .user-avatar {
  width: 22px !important;
  height: 22px !important;
  font-size: 10px;
}

body[data-mobile="true"] .credit-badge {
  padding: 4px 6px !important;
  font-size: 11px;
}

body[data-mobile="true"] .top-bar-actions {
  gap: 6px !important;
}

/* ── 2. FIXED HEADER + TAB BAR ─────────────────────────────────────────── */

/* Single source of truth for the fixed header height so stage padding and the
   off-canvas sidebar offset can never drift out of sync with the header.
   30px (was 44px): with the h1 headline + subtitle hidden on mobile, the bar
   only needs to fit the 20px logo and the 22px avatar/action row. The
   studio-shell stage padding-top and sidebar offset both derive from this
   token, so the gap below the header closes in lockstep. */
body[data-mobile="true"] {
  --app-header-h: 30px;
}

/* Fix header to top of screen */
body[data-mobile="true"] #top-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
  background: var(--bg-color, #0b1020) !important;
  height: var(--app-header-h, 44px) !important;
  box-sizing: border-box !important;
}

/* Fix tab bar directly below header */
body[data-mobile="true"] .workspace-tab-bar {
  position: fixed !important;
  top: 44px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 199 !important;
  padding: 4px 10px !important;
  gap: 2px !important;
  background: var(--bg-color, #0b1020) !important;
  height: 40px !important;
  box-sizing: border-box !important;
}

body[data-mobile="true"] .workspace-tab-button {
  flex: 1;
  min-width: 0;
  padding: 6px 4px;
  font-size: 12px;
  text-align: center;
  justify-content: center;
}

/* ── 3. PANEL LAYOUT — PRIMARY + STACKED ───────────────────────────────── */

body[data-mobile="true"] #workspace {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  gap: 0 !important;
  padding: 0 !important;
  padding-top: 84px !important; /* 44px header + 40px tab bar */
  height: 100vh !important; /* fallback */
  height: 100dvh !important;
  overflow: hidden !important;
  /* Prevent content from being hidden behind iOS safe areas */
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

/* Override conflicting desktop media queries */
body[data-mobile="true"] #secondary-column {
  max-height: none !important;
}

body[data-mobile="true"] #left-pane,
body[data-mobile="true"] #secondary-column {
  display: contents;
}

body[data-mobile="true"] .panel {
  min-height: 0;
  flex-shrink: 0;
  border-radius: 10px;
}

body[data-mobile="true"] .panel.is-mobile-primary {
  flex: 1;
  order: -1;
  display: flex !important;
  flex-direction: column;
  min-height: 0 !important; /* allow flex shrink */
  overflow: hidden;
}


/* Non-primary panels: completely hidden on mobile */
body[data-mobile="true"] .panel:not(.is-mobile-primary) {
  display: none !important;
}

body[data-mobile="true"] #agent-panel.is-secondary-active:not(.is-mobile-primary) {
  display: flex !important;
  order: 1;
  flex: 0 0 clamp(220px, 36vh, 360px);
  min-height: 220px !important;
  max-height: 42vh;
  overflow: hidden;
}

body[data-mobile="true"] #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #secondary-column {
  display: none !important;
}

body[data-mobile="true"] #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #agent-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Conversation mode needs the companion surface visible alongside the
   speech overlay, so temporarily reveal the agent panel as a docked strip. */
body[data-mobile="true"].conversation-mode-active #agent-panel {
  display: flex !important;
  order: 10;
  flex: 0 0 clamp(180px, 28vh, 260px);
  min-height: 180px !important;
  max-height: 32vh;
  overflow: hidden;
}

body[data-mobile="true"].conversation-mode-active #agent-panel .agent-personality-section,
body[data-mobile="true"].conversation-mode-active #agent-panel .agent-active-display,
body[data-mobile="true"].conversation-mode-active #agent-panel .agent-console-render {
  min-height: 0;
}

body[data-mobile="true"] .col-splitter,
body[data-mobile="true"] .resize-bar,
body[data-mobile="true"] #left-pane-splitter {
  display: none !important;
}

/* ── 4. COMPACT UI SCALING ─────────────────────────────────────────────── */

body[data-mobile="true"] .panel-header {
  padding: 6px 10px;
  font-size: 12px;
}

body[data-mobile="true"] .panel-header-title {
  font-size: 12px;
}

body[data-mobile="true"] .panel-body {
  padding: 6px 10px;
  font-size: 12px;
}

/* Chat messages fill all remaining space and scroll internally.
   Form pins to the bottom with just the + row and input visible. */
body[data-mobile="true"] #chat-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important; /* required for flex overflow to work */
}

body[data-mobile="true"] .icon-button {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

body[data-mobile="true"] button {
  padding: 5px 10px;
  font-size: 12px;
}

body[data-mobile="true"] input,
body[data-mobile="true"] textarea,
body[data-mobile="true"] select {
  font-size: 12px;
  padding: 5px 8px;
}

body[data-mobile="true"] .panel-header-actions {
  gap: 4px;
}

/* ── 5. BOTTOM SHEET ───────────────────────────────────────────────────── */

/* Hidden on desktop — only visible in mobile mode */
.mobile-bottom-sheet {
  display: none;
}

body[data-mobile="true"] .mobile-bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: var(--panel-bg, #151929);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: none; /* Prevent off-screen sheet from intercepting touches */
}

body[data-mobile="true"] .mobile-bottom-sheet.is-open {
  transform: translateY(0);
  pointer-events: auto;
}

body[data-mobile="true"] .mobile-bottom-sheet.snap-collapsed {
  transform: translateY(calc(100% - 44px));
}

body[data-mobile="true"] .mobile-bottom-sheet.snap-half {
  transform: translateY(55%);
}

body[data-mobile="true"] .mobile-bottom-sheet.snap-full {
  transform: translateY(15%);
}

body[data-mobile="true"] .mobile-bottom-sheet.is-dragging {
  transition: none;
}

/* Handle is NOT scoped under data-mobile — it is a new element */
.mobile-sheet-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 6px;
  cursor: grab;
}

.mobile-sheet-handle::before {
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-color, #2a3050);
}

body[data-mobile="true"] .mobile-sheet-title {
  display: flex;
  justify-content: space-between;
  padding: 0 12px 8px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.7;
}

body[data-mobile="true"] .mobile-sheet-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 5b. MOBILE PROMPT COLLAPSE TOGGLE (reading / prompting mode) ─────── */

/* Hidden on desktop */
.mobile-prompt-toggle {
  display: none;
}

/* Make chat-controls a flex row so margin-left:auto works */
body[data-mobile="true"] .chat-controls {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

body[data-mobile="true"] .mobile-prompt-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color, #2a3050);
  background: transparent;
  color: var(--text-muted, #8892b0);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  margin-left: auto; /* push to far right */
}

body[data-mobile="true"] .mobile-prompt-toggle:active {
  background: var(--border-color, #2a3050);
}

body[data-mobile="true"] .mobile-prompt-toggle svg {
  transition: transform 0.2s ease;
}

/* Chevron rotation for collapsed state (points up = "expand") */
body[data-mobile="true"] .mobile-prompt-toggle.is-collapsed svg {
  transform: rotate(180deg);
}

/* When collapsed: hide extra chrome but keep textarea + Send visible */
body[data-mobile="true"] #chat-form.is-prompt-collapsed .chat-controls-row,
body[data-mobile="true"] #chat-form.is-prompt-collapsed #recommended-prompts,
body[data-mobile="true"] #chat-form.is-prompt-collapsed #credit-banner,
body[data-mobile="true"] #chat-form.is-prompt-collapsed #credit-inline-warning,
body[data-mobile="true"] #chat-form.is-prompt-collapsed #throttleNotice,
body[data-mobile="true"] #chat-form.is-prompt-collapsed #credit-zero,
body[data-mobile="true"] #chat-form.is-prompt-collapsed #loadingIndicator,
body[data-mobile="true"] #chat-form.is-prompt-collapsed #attachment-pills {
  display: none !important;
}

/* Collapsed: hide toolbar action buttons, keep just textarea + Send */
body[data-mobile="true"] #chat-form.is-prompt-collapsed .chat-input-left-actions,
body[data-mobile="true"] #chat-form.is-prompt-collapsed #credit-preview {
  display: none !important;
}

/* Collapsed form: compact padding */
body[data-mobile="true"] #chat-form.is-prompt-collapsed {
  padding: 4px 8px !important;
}

body[data-mobile="true"] #chat-form.is-prompt-collapsed .chat-controls {
  margin: 0;
  padding: 0;
}

/* ── 6. CHAT INPUT (MOBILE) ────────────────────────────────────────────── */

/* Compact form shell — tighter padding saves vertical space for the thread */
body[data-mobile="true"] #chat-form {
  padding: 4px 6px;
  gap: 2px;
}

/* Single-line textarea: min-height covers one line of text plus breathing room.
   Auto-grows past 26px when the user types multiple lines (max-height still caps it).
   Cutting min-height from 34→26 and vertical padding from 7→4 recovers ~14px. */
body[data-mobile="true"] #chat-input {
  font-size: 13px;
  min-height: 26px;
  max-height: 88px;
  padding: 4px 10px;
  line-height: 18px;
}

body[data-mobile="true"] .mobile-chat-extras {
  display: flex;
}

/* ── 7. VOICE & CONVERSATION MODE INDICATORS ───────────────────────────── */

/* Voice/conversation buttons: desktop styles in styles.css, mobile overrides here */
body[data-mobile="true"] .mobile-voice-toggle {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 16px;
}

.conversation-mode-indicator {
  display: none;
}

.conversation-mode-indicator.is-active {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a855f7;
  animation: pulse-conversation 2s ease-in-out infinite;
}

@keyframes pulse-conversation {
  0%   { opacity: 0.4; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.3); }
  100% { opacity: 0.4; transform: scale(1); }
}

/* ============================================
   MOBILE CHAT INPUT SIMPLIFICATION
   ============================================ */

/* Hide the full controls row on mobile — revealed by extras button */
body[data-mobile="true"] .chat-controls-row {
  display: none;
}

body[data-mobile="true"] .chat-controls-row.is-mobile-expanded {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  font-size: 12px;
}

/* Compact the creativity mode pills on mobile */
body[data-mobile="true"] .creativity-mode-pill-group {
  gap: 2px;
}

body[data-mobile="true"] .creativity-mode-pill {
  padding: 3px 6px;
  font-size: 11px;
}

/* Mobile extras button */
body[data-mobile="true"] .mobile-extras-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color, #2a3050);
  background: transparent;
  color: var(--text-color, #e9ecff);
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  flex-shrink: 0;
}

body[data-mobile="true"] .mobile-extras-btn.is-expanded {
  background: var(--accent-color, #6c5ce7);
  border-color: var(--accent-color, #6c5ce7);
}

/* Hide extras button on desktop */
body:not([data-mobile="true"]) .mobile-extras-btn {
  display: none;
}

/* Mobile library pill (compact) */
body[data-mobile="true"] .library-disciplines-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  width: 100%;
}

body[data-mobile="true"] .library-disciplines-wrapper > span:first-child {
  display: none; /* Hide "Sources" label on mobile */
}

body[data-mobile="true"] .library-disciplines {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
}

body[data-mobile="true"] .discipline-pill {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 10px;
}

body[data-mobile="true"] .mobile-library-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(108, 92, 231, 0.15);
  color: var(--accent-color, #6c5ce7);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

body:not([data-mobile="true"]) .mobile-library-pill {
  display: none;
}

/* Attachment pills: compact for mobile, allow wrapping for all pills */
body[data-mobile="true"] .attachment-pills {
  gap: 4px !important;
  padding: 4px 8px !important;
  max-height: none !important;
  overflow: visible !important;
}

body[data-mobile="true"] .attachment-pill {
  font-size: 11px !important;
  padding: 3px 8px !important;
  max-width: calc(50% - 4px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Recommended prompts: compact single-line on mobile */
body[data-mobile="true"] .recommended-prompt-strip {
  margin: 4px 0 6px !important;
  padding: 6px 8px 8px !important;
  gap: 4px !important;
  border-radius: 8px !important;
}

body[data-mobile="true"] .recommended-prompt-header {
  gap: 6px;
}

body[data-mobile="true"] .recommended-prompt-title {
  font-size: 10px !important;
}

body[data-mobile="true"] .recommended-prompt-subtitle {
  font-size: 9px !important;
}

body[data-mobile="true"] .recommended-prompt-bar {
  flex-direction: column !important;
  gap: 3px !important;
}

body[data-mobile="true"] .recommended-prompt-btn {
  padding: 5px 10px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  text-align: left !important;
  border-radius: 6px !important;
}

/* Tighten the toolbar row — no separator line, minimal padding.
   Removing the border-top and halving the padding saves ~5px of dead height.
   The send button "shifts up" relative to the thread below it as a result. */
body[data-mobile="true"] .chat-input-toolbar {
  gap: 4px;
  padding: 2px 6px !important;
  border-top: none !important;
}

body[data-mobile="true"] .chat-input-left-actions {
  gap: 2px;
}

/* Show attach button on mobile */
body[data-mobile="true"] #btn-attach {
  display: inline-flex;
  font-size: 1.3em;
  padding: 4px;
}

/* Hide credit preview on mobile to save space */
body[data-mobile="true"] .credit-preview {
  display: none;
}

/* Send button — minimal vertical padding; still a comfortable touch target */
body[data-mobile="true"] .chat-send-btn {
  padding: 3px 10px !important;
  font-size: 12px;
}

/* ============================================
   MOBILE DIALOGS & OVERLAYS → BOTTOM SHEETS
   ============================================ */
body[data-mobile="true"] .modal,
body[data-mobile="true"] .dialog-overlay {
  align-items: flex-end !important;
  padding: 0 !important;
  z-index: 500 !important; /* Above fixed header (200) and tab bar (199) */
}

body[data-mobile="true"] .modal-content,
body[data-mobile="true"] .dialog-content {
  width: 100%;
  max-width: 100%;
  border-radius: 16px 16px 0 0;
  max-height: 85vh;
  overflow-y: auto;
  margin: 0;
}

/* User dropdown as bottom sheet on mobile */
body[data-mobile="true"] .user-dropdown {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  min-width: 100%;
  border-radius: 16px 16px 0 0;
  z-index: 1001;
  padding: 16px;
  max-height: 60vh;
}

/* Keyboard shortcuts hidden on mobile */
body[data-mobile="true"] #shortcuts-modal {
  display: none !important;
}

/* ============================================
   PANEL-SPECIFIC MOBILE STYLES
   ============================================ */

/* ── Console Panel ── */
body[data-mobile="true"] .console-toolbar {
  padding: 4px 8px !important;
  gap: 4px !important;
  flex-wrap: wrap;
}

body[data-mobile="true"] .code-toolbar-btn {
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
}

body[data-mobile="true"] #clearEditorBtn {
  display: inline-flex !important;
  color: #f87171 !important;
}

body[data-mobile="true"] .toolbar-meta {
  font-size: 10px !important;
}

body[data-mobile="true"] #console-output {
  font-size: 12px !important;
  padding: 8px !important;
}

/* ── Code Editor Panel ── */
body[data-mobile="true"] .CodeMirror,
body[data-mobile="true"] .cm-editor {
  font-size: 12px !important;
}

body[data-mobile="true"] .editor-toolbar {
  padding: 4px 8px !important;
  gap: 4px !important;
}

/* ── Build / Pipeline Panel ── */
body[data-mobile="true"] .agent-pipeline-textarea {
  font-size: 13px !important;
  min-height: 48px !important;
}

body[data-mobile="true"] .agent-icon-button {
  min-width: 44px !important;
  min-height: 44px !important;
}

body[data-mobile="true"] .pipeline-milestone {
  padding: 8px 10px !important;
  font-size: 12px !important;
}

body[data-mobile="true"] .pipeline-status {
  font-size: 12px !important;
}

body[data-mobile="true"] .pipeline-timer {
  font-size: 11px !important;
}

body[data-mobile="true"] .pipeline-progress-bar {
  height: 4px !important;
}

/* Pipeline confirm modal — bottom sheet style */
body[data-mobile="true"] #agent-pipeline-confirm-overlay {
  align-items: flex-end !important;
  z-index: 500 !important;
}

body[data-mobile="true"] #agent-pipeline-confirm-overlay > div {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 20px 16px !important;
}

/* ── Companion / Agent Panel ── */
body[data-mobile="true"] .agent-panel-body {
  padding: 8px !important;
}

/* ── Companion Time-Series Nav (mobile) ── */
body[data-mobile="true"] .agent-timeseries-nav {
  gap: 2px !important;
  margin: 0 4px !important;
}

body[data-mobile="true"] .agent-nav-btn {
  min-width: 36px !important;
  min-height: 36px !important;
  font-size: 14px !important;
}

body[data-mobile="true"] .agent-input-area textarea {
  font-size: 13px !important;
  min-height: 36px !important;
}

/* ── Thread Dock ── */
body[data-mobile="true"] .thread-dock {
  padding: 4px 8px !important;
  gap: 4px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

body[data-mobile="true"] .thread-icon-btn {
  min-width: 36px !important;
  min-height: 36px !important;
  font-size: 11px !important;
}

body[data-mobile="true"] .thread-new-btn {
  min-width: 36px !important;
  min-height: 36px !important;
  color: #8892b0 !important;
}

body[data-mobile="true"] .thread-new-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
}

body[data-mobile="true"] .thread-dock-inner {
  gap: 4px !important;
}

/* ── Chat Messages ── */
body[data-mobile="true"] .message {
  padding: 8px 10px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  max-width: 100% !important;
}

body[data-mobile="true"] .message pre {
  font-size: 12px !important;
  overflow-x: auto !important;
}

body[data-mobile="true"] .message code {
  font-size: 12px !important;
}

/* ── Touch Target Minimums ── */
body[data-mobile="true"] .icon-button {
  min-width: 36px !important;
  min-height: 36px !important;
}

body[data-mobile="true"] .ghost-button {
  min-height: 36px !important;
  padding: 8px 12px !important;
}

/* ── Loading Indicator (compact but readable) ── */
body[data-mobile="true"] .loading {
  font-size: 12px !important;
  padding: 6px 10px !important;
  flex-wrap: wrap;
}

body[data-mobile="true"] .loading-label {
  font-size: 12px !important;
  max-width: 100%;
  word-wrap: break-word;
  color: rgba(255, 255, 255, 0.7);
}

/* ── Mic button: keep available on mobile for in-app speech capture ── */
body[data-mobile="true"] #btn-mic {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* ── Mobile-optimized attachment pills ── */
body[data-mobile="true"] #attachment-pills {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
}

body[data-mobile="true"] #attachment-pills .attachment-pill {
  font-size: 0.8em;
  max-width: 120px;
}

body[data-mobile="true"] #attachment-pills .attachment-pill .filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Companion carousel — mobile overrides */
body[data-mobile="true"] .companion-carousel { padding: 6px 8px; min-height: 80px; max-height: 80px; }
body[data-mobile="true"] .companion-card { flex: 0 0 64px; }
body[data-mobile="true"] .companion-card__thumb { width: 44px; height: 36px; }

/* Studio shell: four primary modules replace the legacy mobile tab stack.
   Top padding is derived from the fixed header height (--app-header-h) plus the
   notch inset so the active module always starts flush below the header and
   never overlaps it or leaves a guessed gap. */
body[data-mobile="true"] #workspace.studio-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "studio-stage" !important;
  gap: 0 !important;
  padding:
    calc(var(--app-header-h, 44px) + env(safe-area-inset-top, 0px))
    8px
    calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

body[data-mobile="true"] #workspace.studio-shell .studio-module-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  /* Stretch the single visible module to fill the stage vertically instead of
     auto-sizing to content (the root of "the module doesn't fill the screen"). */
  grid-template-rows: minmax(0, 1fr) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 0 !important;
}

body[data-mobile="true"] #workspace.studio-shell .studio-module-panel {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-mobile="true"] #workspace.studio-shell .studio-module-panel.hidden {
  display: none !important;
}

/* ── Hide the redundant in-panel module switcher on mobile ──────────────────
   ensurePanelChrome() injects .studio-panel-actions (a module <select> + Focus
   "[]" + Pop-out "^") into every panel header. On a phone the <select> exactly
   duplicates the always-visible bottom tab bar, and Focus/Pop-out are no-ops
   (layout is already single-panel; pop-out opens a 760×760 desktop window).
   Hide the whole cluster — the panel title + Clear-chat button live elsewhere in
   the header and are untouched. Desktop/tablet keep the switcher. */
body[data-mobile="true"] #workspace.studio-shell .studio-panel-actions {
  display: none !important;
}

body[data-mobile="true"] #workspace.studio-shell .studio-sidebar {
  position: fixed !important;
  top: calc(var(--app-header-h, 44px) + env(safe-area-inset-top, 0px)) !important;
  left: 8px !important;
  bottom: 8px !important;
  width: min(280px, calc(100vw - 16px)) !important;
  z-index: 230 !important;
}

/* ── Voice module fills the stage on single-panel devices ──────────────────
   When Voice is the active module the live conversation overlay must own the
   whole stage edge-to-edge, never render as the floating 460×640 card (which is
   what made it look like "it doesn't fill the screen"). Scoped to the mobile
   studio shell so desktop / mosaic / floating-by-choice are untouched. */
body[data-mobile="true"] #workspace.studio-shell #voice-panel .voice-panel-body,
body[data-mobile="true"] #workspace.studio-shell #voice-panel .voice-panel-overlay-anchor {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

body[data-mobile="true"] #workspace.studio-shell #voice-panel .conversation-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
}

/* ── Companion (agent) module fills the stage on single-panel devices ────── */
body[data-mobile="true"] #workspace.studio-shell #agent-panel.is-emphasized .agent-active-display,
body[data-mobile="true"] #workspace.studio-shell #agent-panel.is-emphasized .agent-console-render {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* ── Neutralize the legacy conversation-mode docking strip under the shell ──
   The bottom-strip height + display rules predate the studio shell. Inside the
   shell, the agent panel is a proper grid module — remove the height cap for all
   states. Only hide the panel in focus layout when it is not the active module;
   in split/grid the non-emphasized companion must remain visible as a peer panel. */
body[data-mobile="true"].conversation-mode-active #workspace.studio-shell #agent-panel {
  min-height: 0 !important;
  max-height: none !important;
}
body[data-mobile="true"].conversation-mode-active #workspace.studio-shell[data-studio-layout="focus"] #agent-panel:not(.is-emphasized) {
  display: none !important;
}
body[data-mobile="true"].conversation-mode-active #workspace.studio-shell #agent-panel.is-emphasized {
  order: 0;
  flex: 1 1 auto !important;
}

/* Touch targets: the voice overlay header controls (end / minimize)
   are 26px on desktop — below the 44px touch minimum and easy to miss on a
   phone. Bump them on touch devices so ending a voice chat is a reliable tap. */
body[data-mobile="true"] .conv-overlay-iconbtn {
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
}

/* Pop-out and mode-toggle are desktop-only features: pop-out opens a 760×760
   window (useless on a phone), and mode-toggle switches between floating and
   fullscreen (mobile is already forced fullscreen by the CSS above). Hide both
   to shrink the header controls row and recover vertical space. */
body[data-mobile="true"] #conv-popout-btn,
body[data-mobile="true"] #conv-mode-toggle {
  display: none !important;
}

/* ── STUDIO SHELL: BOTTOM TAB BAR ──────────────────────────────────────────
   On phones the sidebar off-canvas drawer is replaced by a fixed bottom tab
   bar. Layout presets (Split / Grid) are hidden — they don't apply on mobile.
   ────────────────────────────────────────────────────────────────────────── */

/* Give the stage room for the 52px tab bar */
body[data-mobile="true"] #workspace.studio-shell {
  padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Sidebar becomes a fixed bottom nav bar */
body[data-mobile="true"] #workspace.studio-shell .studio-sidebar {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  height: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
  flex-direction: row !important;
  align-items: stretch !important;
  border-radius: 0 !important;
  border-width: 1px 0 0 0 !important;
  border-style: solid !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  background: rgba(7, 9, 18, 0.97) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 210 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

/* Collapsed flag must not hide the bottom bar */
body[data-mobile="true"] #workspace.studio-shell.studio-sidebar-collapsed .studio-sidebar {
  display: flex !important;
}

/* "Menu" floating open button is irrelevant with a permanent bottom bar */
body[data-mobile="true"] #studio-sidebar-open {
  display: none !important;
}

/* Sidebar header (title + collapse chevron) and layout presets not shown */
body[data-mobile="true"] #workspace.studio-shell .studio-sidebar-header,
body[data-mobile="true"] #workspace.studio-shell .studio-layout-controls {
  display: none !important;
}

/* Module nav fills the bar as a horizontal row */
body[data-mobile="true"] #workspace.studio-shell .studio-module-nav {
  flex-direction: row !important;
  flex: 1 !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* Each module tab */
body[data-mobile="true"] #workspace.studio-shell .studio-module-button {
  flex: 1 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 52px !important;
  min-height: 0 !important;
  padding: 6px 2px 4px !important;
  border: none !important;
  border-radius: 0 !important;
  border-top: 2px solid transparent !important;
  background: transparent !important;
  /* WCAG 1.4.3: inactive tab labels need >=4.5:1 on the dark nav bar.
     0.52 alpha measured ~2.8:1; 0.8 gives ~5.2:1 while staying muted vs the
     bright-cyan active tab. */
  color: rgba(148, 163, 184, 0.8) !important;
  font-size: 9px !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  transition: color 0.15s ease, border-top-color 0.15s ease !important;
}

body[data-mobile="true"] #workspace.studio-shell .studio-module-button.is-active {
  color: #7dd3fc !important;
  background: rgba(14, 165, 233, 0.06) !important;
  border-top: 2px solid #7dd3fc !important;
  border-color: transparent !important;
  border-top-color: #7dd3fc !important;
}

/* Glyph icon (first child span) */
body[data-mobile="true"] #workspace.studio-shell .studio-module-button span:first-child {
  font-size: 15px !important;
  line-height: 1.1 !important;
  display: block !important;
}

/* Text label (second child span) */
body[data-mobile="true"] #workspace.studio-shell .studio-module-button span:last-child {
  font-size: 9px !important;
  display: block !important;
  line-height: 1 !important;
}

/* Tighten voice panel empty state on mobile */
body[data-mobile="true"] .voice-panel-empty h2 {
  font-size: 15px !important;
}

body[data-mobile="true"] .voice-panel-empty p {
  font-size: 12px !important;
}