/* ==========================================================================
   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: 6px 10px !important;
  gap: 6px !important;
}

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

body[data-mobile="true"] #top-bar h1 {
  font-size: 14px !important;
}

/* Hide "Dev Studio" portion — show only "PDCo" */
body[data-mobile="true"] #top-bar h1 .mobile-hide,
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: 28px !important;
  height: 28px !important;
  font-size: 11px;
}

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 ─────────────────────────────────────────── */

/* 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: 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: 100dvh !important;
  height: 100vh !important; /* fallback */
  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"] #right-pane {
  max-height: none !important;
}

body[data-mobile="true"] #left-pane,
body[data-mobile="true"] #right-pane {
  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"] .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: 8px 10px;
  font-size: 13px;
}

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

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

/* 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: 6px 12px;
  font-size: 13px;
}

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

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

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

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 everything in chat-form EXCEPT the controls row with the toggle */
body[data-mobile="true"] #chat-form.is-prompt-collapsed .chat-controls-row,
body[data-mobile="true"] #chat-form.is-prompt-collapsed .chat-input-full,
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 form: minimal height, just the + / library / chevron row */
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) ────────────────────────────────────────────── */

body[data-mobile="true"] #chat-form {
  padding: 6px 8px;
  gap: 4px;
}

body[data-mobile="true"] #chat-input {
  font-size: 14px;
  min-height: 36px;
  max-height: 96px;
  padding: 8px 10px;
}

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;
}

/* Simplify chat input toolbar on mobile */
body[data-mobile="true"] .chat-input-toolbar {
  gap: 4px;
}

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;
}

/* Make send button more compact */
body[data-mobile="true"] .chat-send-btn {
  padding: 6px 12px;
  font-size: 13px;
}

/* ============================================
   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: 10px 12px !important;
  font-size: 14px !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: hidden on mobile (phones have built-in dictation) ── */
body[data-mobile="true"] #btn-mic {
  display: none !important;
}

/* ── 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;
}