/* Layout modes are the single breakpoint source, also read by workspace.js. */
:root { --workspace-mode: desktop; }
[data-theme="dark"] { --muted-2: #98a5ba; --gutter: #98a5ba; }
[data-theme="light"] { --muted-2: #616d81; --gutter: #616d81; }
[data-theme="neon"] { --muted-2: #98afc9; --gutter: #98afc9; }
.primary, .primary:hover, .tab-btn.active, .sidebar-tab.active, .debug-tab.active, .seg-btn.active { color: white; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, #111827), color-mix(in srgb, var(--accent-2) 45%, #111827)); }
[hidden] { display: none !important; }
.workspace-tabs { display: none; }
.app-shell { gap: 8px; padding-block: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-bottom)); padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
.app-shell > *, .modal-body > *, .lab-panel, .editor-form { min-width: 0; }
.topbar { grid-template-columns: minmax(0, 1fr) auto auto; }
.tool-btn, .text-btn, .seg-btn { flex-shrink: 0; }
.project-name { min-height: 28px; }
.tagline { font-size: 11px; }
.editor-toolbar, .preview-header, .panel-titlebar { gap: 8px; }
.panel-title { gap: 6px; letter-spacing: .02em; white-space: nowrap; }
.panel-meta { display: none; }
.bound-file { max-width: 120px; line-height: 1.4; }
.editor-menu-btn { display: none; }
.preview-device-select { display: none; min-width: 0; max-width: 140px; height: 38px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--bg-2); font-size: 12px; padding-inline: 8px; }
.preview-header h2 { white-space: nowrap; }
.preview-stage { padding: clamp(8px, 1.2vw, 20px); overflow: auto; overscroll-behavior: contain; }
.preview-viewport { position: relative; width: var(--viewport-width, 100%); height: var(--viewport-height, 100%); min-width: 0; min-height: 0; }
.preview-frame-shell { position: absolute; inset: 0 auto auto 0; }
.runtime-status { color: var(--success); font-size: 11px; white-space: nowrap; }
.runtime-status[data-state="rendering"] { color: var(--muted); }
.runtime-status[data-state="error"], .runtime-status[data-state="failed"] { color: var(--danger); }
.error-overlay { overflow-wrap: anywhere; padding-right: 52px; }
#dismissErrorBtn { position: absolute; top: 5px; right: 5px; }
.console-drawer { background: var(--bg-2); }
.console-header { gap: 8px; }
.debug-tabs { min-width: 0; scrollbar-width: thin; }
.debug-panel { min-width: 0; }
.console-empty { min-height: 70px; padding: 16px; color: var(--muted); text-align: center; }
.log-message, .assistant-output, .debug-card strong { overflow-wrap: anywhere; }
.dock-wrap { min-width: 0; }
.dock { gap: 6px; padding: 7px 10px; box-shadow: none; }
.dock-btn { width: 34px; height: 34px; background: transparent; }
.dock-btn.primary { background: var(--surface-3); }
.dock #dockRun, .dock #dockImport, .dock #dockExport, .dock [data-action], .dock-spacer { display: none; }
#dockConsole { display: flex; align-items: center; justify-content: center; gap: 6px; width: 82px; color: var(--text); font-size: 12px; }
.dock [data-tip]::after { top: auto; bottom: calc(100% + 9px); }
.copyright-footer { max-width: 245px; font-size: 10px; bottom: 22px; padding: 7px; }
.modal-backdrop { height: var(--app-height, 100dvh); padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.modal { background: var(--bg-2); max-height: min(800px, 100%); transform: none; animation: fadeIn 160ms ease; }
.modal-header .tool-btn { width: 44px; height: 44px; }
.modal-title h2 { font-size: clamp(17px, 2vw, 20px); }
.modal-title p { overflow-wrap: anywhere; }
.modal-body { scrollbar-gutter: stable; }
.modal-actions { flex-wrap: wrap; }
.command-row .kbd { font-size: 10px; }
.command-row:focus-visible { background: var(--surface-3); }
.tools-modal { width: min(540px, 100%); }
.tools-section + .tools-section { margin-top: 20px; }
.tools-section h3 { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 600; }
.tools-section .action-tile { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px; border-radius: 12px; }
.tools-section .action-tile svg { flex: 0 0 18px; width: 18px; height: 18px; }
.tools-section .action-tile span { font-size: 12px; }
.settings-range { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.settings-range input { width: 100%; min-height: 32px; margin: 0; }
.tools-credit { margin: 20px 0 0; color: var(--muted); font-size: 11px; }
.project-modal { height: min(720px, 100%); }
.project-sidebar-slot { display: grid; min-height: 0; flex: 1; }
.project-sidebar-slot .project-sidebar { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.project-sidebar-slot .sidebar-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-sidebar-slot .sidebar-footer .text-btn { padding: 0 6px; font-size: 11px; }
.project-sidebar-slot .sidebar-footer svg { display: none; }
.sidebar-header h2 { margin-inline-end: auto; }
.file-order-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; grid-column: 1 / -1; }
.file-order-controls .text-btn { padding-inline: 6px; font-size: 11px; }
.file-name { border: 0; padding: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; min-height: 28px; }
.file-row { cursor: default; }
.file-row[draggable="true"] { cursor: grab; }
.line-numbers { user-select: none; }
.editor-body:focus-within { box-shadow: inset 0 0 0 2px var(--accent-2); }
.cm-editor.cm-focused { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.tok-invalid { color: var(--danger); text-decoration: underline wavy; }
.tok-comment { color: #98a5ba; }
[data-theme="light"] .tok-attr, [data-theme="light"] .tok-rule { color: #765500; }
[data-theme="light"] .tok-number, [data-theme="light"] .tok-operator { color: #a33114; }
[data-theme="light"] .tok-selector { color: #075985; }
[data-theme="light"] .tok-comment { color: #616d81; }
body.preview-fullscreen .topbar, body.preview-fullscreen .editor-pane, body.preview-fullscreen .dock, body.preview-fullscreen .console-drawer, body.preview-fullscreen .project-sidebar, body.preview-fullscreen .copyright-footer { visibility: hidden; }
body.preview-fullscreen .preview-pane { visibility: visible; }
body.editor-focus-mode .workspace-tabs { visibility: hidden; }
/* Header contents respond to their actual pane, including after desktop resizing. */
@container (max-width: 680px) {
  .editor-controls .engine-pill, .device-toggle, .device-label { display: none; }
  .preview-device-select { display: block; }
  #zoomOutBtn, #zoomInBtn, #zoomLabel { display: none; }
}
@container (max-width: 550px) {
  .editor-controls .range-control { display: none; }
  .panel-actions [data-action="copy"], .panel-actions [data-action="clear"], .panel-actions [data-action="collapse"], .panel-actions [data-action="expand"] { display: none; }
  .panel-actions .editor-menu-btn { display: inline-grid; }
  .preview-header { padding: 8px; }
  .preview-left, .preview-right { gap: 6px; }
}
@container (max-width: 410px) {
  .runtime-status { position: absolute; bottom: 8px; left: 12px; z-index: 4; padding: 4px 7px; background: var(--bg-2); border-radius: 7px; pointer-events: none; }
  .preview-header h2 { font-size: 11px; }
  .preview-device-select { max-width: 126px; }
  .bound-file { max-width: 92px; }
}

/* Touch-friendly controls are also used on touch-capable desktop devices. */
@media (pointer: coarse) {
  .tool-btn, .seg-btn, .dock-btn, .mini-icon { min-width: 44px; min-height: 44px; }
  .text-btn, .tab-btn, .sidebar-tab, .debug-tab, .file-name { min-height: 44px; }
  [data-tip]::after { display: none; }
}

/* Compact workspace: shared phone/tablet behavior, no precision resizing. */
@media (max-width: 1099px) {
  :root { --workspace-mode: tablet; --topbar: 64px; --dock: 0px; }
  .app-shell { grid-template-rows: var(--topbar) 44px minmax(0, 1fr); gap: 8px; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 8px; border-radius: 16px; gap: 8px; }
  .status-strip, .dock-wrap, .copyright-footer { display: none; }
  .top-actions { gap: 6px; }
  .top-actions > :not(#runBtn):not(#quickBtn) { display: none; }
  .workspace-tabs { display: flex; gap: 6px; min-width: 0; }
  .workspace-tabs .tab-btn { flex: 1 1 0; min-width: 0; padding: 0 8px; border-radius: 12px; }
  .workspace, body.editors-hidden .workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 10px; }
  .main-splitter, .editor-splitter { display: none; }
  .editor-pane { grid-template-rows: auto minmax(0, 1fr); border-radius: 16px; }
  .editor-toolbar { display: none; }
  .mobile-tabs { display: flex; padding: 6px; gap: 6px; }
  .mobile-tabs .tab-btn { border-radius: 10px; padding: 0 10px; }
  .editor-panel { display: none; min-height: 0; flex: 1 1 0 !important; }
  .editor-panel.active-mobile { display: grid; }
  .editor-panel.collapsed { min-height: 0; flex: 1 1 0 !important; }
  .editor-panel.collapsed .editor-body { opacity: 1; pointer-events: auto; }
  .editor-panel.collapsed .editor-scroll { max-height: none; }
  .editor-panel.collapsed::after { display: none; }
  .editor-body { grid-template-columns: 42px minmax(0, 1fr); }
  .panel-titlebar { min-height: 48px; padding: 2px 6px; }
  .panel-title { font-size: 11px; gap: 5px; }
  .panel-actions { gap: 2px; }
  .panel-actions [data-action="copy"], .panel-actions [data-action="clear"], .panel-actions [data-action="collapse"], .panel-actions [data-action="expand"] { display: none; }
  .panel-actions .editor-menu-btn { display: inline-grid; }
  .tool-btn, .seg-btn, .mini-icon, .panel-actions .tool-btn { width: 44px; height: 44px; }
  .text-btn, .tab-btn, .sidebar-tab, .debug-tab, .file-name { min-height: 44px; }
  .preview-device-select { display: block; min-height: 44px; }
  .device-toggle, .device-label, #zoomOutBtn, #zoomInBtn, #zoomLabel { display: none; }
  .preview-pane { border-radius: 16px; }
  .preview-stage { padding: 8px; }
  .preview-frame-shell, .preview-frame-shell.mobile, .preview-frame-shell.tablet { border-radius: 12px; }
  .workspace[data-pane="code"], .workspace[data-pane="preview"], .workspace[data-pane="console"] { grid-template-columns: minmax(0, 1fr); }
  .workspace[data-pane="code"] .preview-pane, .workspace[data-pane="preview"] .editor-pane, .workspace[data-pane="console"] > :not(.console-drawer) { display: none; }
  .console-drawer { position: relative; inset: auto; width: 100%; height: 100%; min-height: 0; display: none; border-radius: 16px; transform: none; transition: none; }
  .workspace[data-pane="console"] .console-drawer { display: grid; opacity: 1; visibility: visible; pointer-events: auto; }
  .console-header { padding: 6px 8px; min-height: 56px; }
  .debug-tabs { padding: 6px; }
  .debug-tab { font-size: 11px; }
  .log-row { grid-template-columns: 60px minmax(0, 1fr); gap: 6px; }
  .log-message { grid-column: 1 / -1; }
  .file-row { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 4px; padding: 4px; }
  .file-actions { gap: 0; }
  .lab-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-list { max-height: 180px; }
  .sidebar-footer { padding: 8px; }
  .modal-actions .text-btn { white-space: normal; }
  .syntax, .code-input { padding: 12px 12px 24px; }
  .line-number-inner { padding: 12px 8px 24px 4px; }
  .toast-stack { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); }
  [data-tip]::after { display: none; }
  body.editor-focus-mode .editor-pane { inset: 8px; }
  body.editor-focus-mode .editor-panel.expanded .panel-actions [data-action="expand"] { display: inline-grid; }
  body.preview-fullscreen .preview-pane { inset: 8px; }
}

/* Phone: one full-height activity, never a shrunken multi-column IDE. */
@media (max-width: 767px) {
  :root { --workspace-mode: mobile; --topbar: 60px; }
  body { overflow: hidden; }
  .app-shell {
    position: fixed;
    top: var(--app-top, 0);
    left: var(--app-left, 0);
    width: var(--app-width, 100%);
    padding-inline: max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right));
    padding-block: max(6px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-bottom));
    gap: 6px;
  }
  .brand { gap: 7px; }
  .brand-mark { width: 30px; height: 34px; border-radius: 10px; }
  .brand-mark svg { width: 22px; height: 22px; }
  .project-name { font-size: 16px; }
  .tagline { font-size: 10px; }
  .tagline span, .tools-label, .tablet-split { display: none; }
  #quickBtn { width: 44px; padding: 0; }
  #runBtn { padding: 0 10px; gap: 5px; }
  .workspace, body.editors-hidden .workspace { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .preview-stage { padding: 5px; }
  .preview-header { min-height: 52px; padding: 4px 8px; }
  .preview-device-select { max-width: 136px; }
  .bound-file { max-width: 94px; padding: 3px 5px; font-size: 10px; }
  .lang-dot { display: none; }
  .code-input, .syntax, .cm-editor { font-size: max(16px, var(--font-size)); }
  .line-numbers { font-size: max(16px, var(--font-size)); }
  .modal-backdrop { padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  .modal { border-radius: 18px; }
  .modal-header { padding: 10px; gap: 8px; }
  .modal-title p { font-size: 12px; }
  .modal-body { padding: 12px; }
  .tools-backdrop { align-items: end; }
  .tools-modal { max-height: 100%; }
  .onboarding-grid, .template-grid, .library-grid, .local-export-grid, .debug-grid, .assistant-grid, .field-grid { grid-template-columns: minmax(0, 1fr); }
  .command-row { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .command-icon { width: 26px; height: 30px; }
  .command-row .kbd { grid-column: 2; justify-self: start; }
  .command-search, .dev-input, .dev-select, .dev-textarea { font-size: 16px; }
  .snapshot-card { grid-template-columns: minmax(0, 1fr); }
  .error-overlay { right: 6px; bottom: 34px; width: calc(100% - 12px); }

  /* During text entry, keep the shell attached to Safari's visual viewport.
     Secondary workspace navigation yields space to the editor; language tabs
     and editor actions remain available with full-size touch targets. */
  body.keyboard-open .app-shell {
    grid-template-rows: 46px minmax(0, 1fr);
    padding-block: 3px;
    gap: 3px;
  }
  body.keyboard-open .workspace-tabs { display: none; }
  body.keyboard-open .topbar { padding-block: 0; }
  body.keyboard-open .tagline,
  body.keyboard-open .brand-mark { display: none; }
  body.keyboard-open .mobile-tabs { padding: 0 4px; gap: 4px; }
  body.keyboard-open .mobile-tabs .tab-btn,
  body.keyboard-open .panel-titlebar { min-height: 44px; }
  body.keyboard-open .panel-titlebar { padding-block: 0; }
  body.keyboard-open .editor-body,
  body.keyboard-open .editor-scroll,
  body.keyboard-open .cm-host,
  body.keyboard-open .cm-editor,
  body.keyboard-open .cm-scroller { min-height: 0; }
  body.keyboard-open .code-input,
  body.keyboard-open .cm-scroller {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Narrow phone preview: two control rows and an in-flow action dock. */
@media (max-width: 480px) {
  body.preview-pane-active .app-shell { grid-template-rows: var(--topbar) 44px minmax(0, 1fr) 54px; }
  .preview-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 136px);
    grid-template-rows: 44px 44px;
    column-gap: 6px;
    row-gap: 4px;
    min-height: 96px;
    padding: 4px 6px;
  }
  .preview-left { gap: 5px; overflow: hidden; }
  .preview-header h2 { overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
  .preview-right { display: contents; }
  .preview-device-select {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    min-height: 44px;
  }
  .preview-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 44px minmax(48px, 1fr) 44px 44px 44px;
    gap: clamp(4px, 2vw, 10px);
    width: 100%;
    min-width: 0;
  }
  .preview-controls .tool-btn { width: 44px; height: 44px; }
  .preview-controls .fps-pill { width: 100%; min-width: 0; height: 36px; padding-inline: 4px; }
  body.preview-pane-active #zoomOutBtn,
  body.preview-pane-active #zoomInBtn { display: grid; }
  body.preview-pane-active #zoomLabel { display: inline-flex; }
  .preview-header .runtime-status {
    position: static;
    max-width: 56px;
    overflow: hidden;
    padding: 0;
    background: transparent;
    text-overflow: ellipsis;
  }
  body.preview-pane-active .dock-wrap {
    display: grid;
    width: 100%;
    padding-inline: max(4px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-right));
  }
  body.preview-pane-active .dock {
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
  }
  body.preview-pane-active .dock-btn,
  body.preview-pane-active #dockConsole {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 13px;
  }
  body.preview-pane-active #dockConsole span { display: none; }
}

/* Short landscape and software-keyboard viewport: preserve usable editor space. */
@media (max-width: 1099px) and (max-height: 500px) {
  :root { --topbar: 46px; }
  .app-shell { gap: 3px; padding-block: max(3px, env(safe-area-inset-top)) max(3px, env(safe-area-inset-bottom)); }
  .topbar { padding-block: 0; }
  .tagline, .brand-mark { display: none; }
  .mobile-tabs { padding-block: 0; }
  .panel-titlebar { min-height: 44px; padding-block: 0; }
  .modal-title p { display: none; }
  .modal-header { padding-block: 4px; }
}