/* Production-only mobile workspace hardening. Desktop layout is untouched. */
.ws2-page,
.ws2-page * {
  box-sizing: border-box;
}

.ws2-page,
.ws2-body,
.ws2-sqlwindow,
.ws2-ai-panel,
.ws2-editor-pane,
.ws2-results-pane,
.ws2-results-body,
.ws2-ai-messages,
.ws2-msg,
.ws2-msg-bubble,
.ws2-code-card {
  min-width: 0;
  max-width: 100%;
}

.ws2-page {
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
}

.ws2-editor-pane .cm-editor,
.ws2-editor-pane .cm-scroller,
.ws2-editor-pane .cm-content {
  max-width: 100%;
}

.ws2-editor-pane .cm-scroller {
  overflow: auto !important;
  overscroll-behavior: contain;
}

.ws2-editor-pane .cm-content {
  min-width: 100%;
  width: max-content;
}

.ws2-code-card-body,
.ws2-diff-block,
.ws2-output,
.ws2-results-body {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.ws2-msg-text,
.ws2-md-p,
.ws2-md-list,
.ws2-inline-code,
.ws2-statusbar {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 768px) {
  .ws2-page {
    bottom: auto !important;
    height: var(--fentor-viewport-height, 100dvh);
    min-height: 0;
    overflow: hidden;
  }

  .ws2-topbar {
    flex: 0 0 auto;
    min-width: 0;
  }

  .ws2-breadcrumb {
    min-width: 0;
  }

  .ws2-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .ws2-files-sidebar {
    flex: 0 0 auto;
    max-height: 92px;
  }

  .ws2-sqlwindow {
    flex: 0 0 auto;
    min-height: min(62dvh, 560px);
    width: 100%;
  }

  .ws2-toolbar {
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    padding: 8px 10px;
    scrollbar-width: none;
  }

  .ws2-toolbar::-webkit-scrollbar {
    display: none;
  }

  .ws2-toolbar .ws2-btn,
  .ws2-theme-toggle-btn {
    flex: 0 0 auto;
  }

  .ws2-shortcut-hint,
  .ws2-toolbar kbd {
    display: none;
  }

  .ws2-editor-pane,
  .ws2-editor-pane-vscode {
    flex-basis: auto !important;
    height: clamp(210px, 40dvh, 360px) !important;
    max-height: none !important;
    min-height: 210px !important;
    resize: none !important;
  }

  .ws2-editor-pane .cm-editor,
  .ws2-editor-pane .cm-scroller {
    touch-action: pan-x pan-y;
  }

  .ws2-results-pane {
    flex: 0 0 auto;
    height: clamp(150px, 27dvh, 260px);
    min-height: 150px;
  }

  .ws2-results-body {
    min-height: 0;
  }

  .ws2-grid {
    min-width: max-content;
  }

  .ws2-resizer,
  .ws2-output-resizer {
    display: none !important;
  }

  .ws2-ai-panel {
    flex: 0 0 auto;
    height: min(58dvh, 500px);
    max-height: none !important;
    min-height: 360px;
    min-width: 0 !important;
    width: 100% !important;
  }

  .ws2-ai-header,
  .ws2-ai-progress,
  .ws2-assist-mode-bar,
  .ws2-next-lesson-banner {
    flex: 0 0 auto;
  }

  .ws2-ai-messages {
    min-height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px;
    -webkit-overflow-scrolling: touch;
  }

  .ws2-msg-user .ws2-msg-bubble {
    max-width: calc(100% - 32px);
  }

  .ws2-ai-input-area {
    bottom: 0;
    flex: 0 0 auto;
    gap: 8px;
    padding: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    position: sticky;
    z-index: 5;
  }

  .ws2-ai-input {
    font-size: 16px;
    max-height: 112px;
    min-height: 42px;
    width: 100%;
  }

  .ws2-ai-send-btn {
    flex: 0 0 auto;
    min-height: 42px;
  }

  .fentor-keyboard-open .ws2-body {
    padding-bottom: 6px;
    scroll-padding-bottom: 96px;
  }

  .fentor-keyboard-open .ws2-ai-panel {
    height: max(260px, calc(var(--fentor-viewport-height, 100dvh) - 88px));
    min-height: 260px;
  }

  .fentor-keyboard-open .ws2-ai-input-area {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  .ws2-topbar {
    gap: 6px;
    padding: 8px;
  }

  .ws2-back-btn {
    white-space: nowrap;
  }

  .ws2-db-badge {
    display: none;
  }

  .ws2-body {
    gap: 8px;
    padding: 6px;
  }

  .ws2-files-sidebar {
    max-height: 72px;
  }

  .ws2-sqlwindow {
    min-height: min(66dvh, 540px);
  }

  .ws2-editor-pane,
  .ws2-editor-pane-vscode {
    height: clamp(220px, 42dvh, 340px) !important;
    min-height: 220px !important;
  }

  .ws2-results-pane {
    height: clamp(140px, 25dvh, 220px);
    min-height: 140px;
  }

  .ws2-ai-panel {
    height: min(64dvh, 500px);
    min-height: 340px;
  }

  .ws2-ai-header {
    padding: 11px 12px;
  }

  .ws2-ai-messages {
    padding: 12px 10px;
  }

  .ws2-ai-input-area {
    align-items: stretch;
    flex-direction: column;
  }

  .ws2-ai-send-btn {
    height: 42px;
    width: 100%;
  }
}