/* Phone layout. Workflow data and desktop canvas behavior stay in their existing modules. */
.mobile-nav,.mobile-editor-toolbar,.mobile-step-list,.mobile-actions-toggle,.mobile-drawer-close { display:none; }
.mobile-shade { position:fixed; inset:0; z-index:80; border:0; background:rgb(25 17 23 / 48%); color:transparent; backdrop-filter:blur(3px); }
.mobile-shade[hidden] { display:none; }

@media (max-width:1100px) {
  #mobileMenu { width:44px; height:44px; flex:0 0 44px; }
  .sidebar.mobile-open { display:flex; position:fixed; inset:0 auto 0 0; width:min(320px,90vw); height:100dvh; z-index:90; border-radius:0 22px 22px 0; padding:calc(16px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; box-shadow:15px 0 60px #241b2033; }
  .sidebar.mobile-open .brand span,.sidebar.mobile-open .workspace-picker,.sidebar.mobile-open .sidebar-section-label,.sidebar.mobile-open .workflow-list,.sidebar.mobile-open .sidebar-help,.sidebar.mobile-open .profile,.sidebar.mobile-open .nav-count { display:revert; }
  .sidebar.mobile-open .brand { display:flex; justify-content:flex-start; }
  .sidebar.mobile-open .brand small,.sidebar.mobile-open .sidebar-help span { display:block; }
  .sidebar.mobile-open .workspace-picker { display:flex; align-items:center; }
  .sidebar.mobile-open .primary-nav { display:grid; }
  .sidebar.mobile-open .nav-item { display:flex; font-size:14px; justify-content:flex-start; min-height:46px; gap:12px; }
  .sidebar.mobile-open .nav-item[hidden] { display:none; }
  .sidebar.mobile-open .mobile-drawer-close { display:block; align-self:flex-end; flex-shrink:0; min-height:44px; padding:8px 12px; margin-bottom:8px; background:#ffffff12; border:1px solid #ffffff20; border-radius:10px; color:white; font:inherit; font-size:13px; }
  .sidebar.mobile-open .sidebar-help { display:flex; min-height:44px; font-size:13px; justify-content:flex-start; }
  .sidebar.mobile-open .profile { display:flex; align-items:center; gap:10px; }
  .sidebar.mobile-open .workflow-label { display:flex; }
  .sidebar.mobile-open .prototype-card { display:none; }
}

@media (max-width:620px) {
  :root { --phone-nav-height:calc(66px + env(safe-area-inset-bottom)); }
  body { font-size:14px; }
  .app-shell { height:100dvh; min-height:0; padding:0 0 var(--phone-nav-height); }
  .main { min-height:0; }
  .topbar { height:60px; min-height:60px; flex-shrink:0; padding:0 12px; gap:8px; }
  .breadcrumb { gap:8px; min-width:0; }
  .breadcrumb > span:first-of-type { font-size:13px; white-space:nowrap; }
  .preview-badge { font-size:10px; padding:5px 7px; white-space:nowrap; }
  .statusbar { display:none; }
  .mobile-nav { position:fixed; inset:auto 0 0; height:var(--phone-nav-height); z-index:60; display:flex; justify-content:space-around; gap:4px; padding:6px max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); background:rgb(255 255 255 / 97%); border-top:1px solid var(--studio-line,#e9e1e5); box-shadow:0 -4px 24px #332a3008; }
  .mobile-nav-item { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; border-radius:12px; background:transparent; color:#756571; font:inherit; font-size:11px; font-weight:600; min-height:50px; }
  .mobile-nav-item svg { width:20px; height:20px; }
  .mobile-nav-item[aria-current] { background:#f9eaf0; color:#a32e43; }
  .mobile-nav-item[hidden],body.booting .mobile-nav { display:none; }
  .phone-inspector-open .mobile-nav { display:none; }
  button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
  .button,.icon-button,.text-button,.run-target-button,.inspector-tab,.tab,.danger-text,.library-categories button,summary { min-height:44px; }
  .icon-button { min-width:44px; }
  input:not([type=checkbox]):not([type=radio]),select,textarea,
  .field input,.field select,.field textarea,.setup-field input,.setup-field select,.setup-field textarea { font-size:16px!important; max-width:100%; }
  input:not([type=checkbox]):not([type=radio]),select { min-height:44px; }
  input[type=checkbox],input[type=radio] { min-width:20px; min-height:20px; }
  button:focus-visible,a:focus-visible { outline:3px solid #a32e43; outline-offset:2px; }
  .button { font-size:13px; line-height:1.4; padding:10px 13px; white-space:normal; justify-content:center; }
  .dashboard-view,.billing-view,.accounts-view,.trash-view,.library-view,.clients-view,.credentials-view,.executions-view { padding:22px 16px 28px; overscroll-behavior-y:contain; scroll-padding-bottom:20px; }
  .page-heading { gap:16px; margin-bottom:22px; align-items:flex-start; }
  .page-heading > div { min-width:0; max-width:100%; }
  .page-heading h1 { font-size:26px; line-height:1.15; letter-spacing:-.8px; overflow-wrap:anywhere; }
  .page-heading p { font-size:13px; line-height:1.6; }
  .page-heading .page-actions,.page-heading .heading-actions { width:100%; flex-wrap:wrap; gap:8px; }
  .ops-metrics,.ops-metrics.three { gap:10px; margin-bottom:20px; }
  .ops-metric { padding:16px 13px; min-width:0; }
  .ops-metric strong { font-size:28px; }
  .ops-columns { gap:16px; }
  .ops-panel { padding:16px; border-radius:16px; }
  .ops-panel h2 { font-size:16px; }
  .ops-panel-header { flex-wrap:wrap; gap:10px; }
  .table-container:has(.mobile-card-table) { overflow:visible; border:0; background:transparent; box-shadow:none; }
  .mobile-card-table { display:block; width:100%; min-width:0!important; border:0; }
  .mobile-card-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .mobile-card-table tbody { display:grid; gap:12px; }
  .mobile-card-table tbody tr { display:block; padding:14px; border:1px solid #e9e1e5; border-radius:14px; background:white; box-shadow:0 3px 12px #332a3004; }
  .mobile-card-table tbody td { display:block; width:auto!important; min-width:0; padding:8px 0; border:0; white-space:normal; overflow-wrap:anywhere; font-size:13px; }
  .mobile-card-table tbody td::before { content:attr(data-label); display:block; margin-bottom:4px; color:#7a6b75; font-size:10px; font-weight:650; text-transform:uppercase; letter-spacing:.06em; }
  .mobile-card-table tbody td[data-label=""]::before { display:none; }
  .mobile-card-table tbody td:first-child { padding-top:0; }
  .mobile-card-table .file-main,.mobile-card-table .credential-main { min-width:0; max-width:100%; }
  .mobile-card-table button { white-space:normal; max-width:100%; }
  .mobile-card-table .mobile-cell-actions { border-top:1px solid #f1eaf0; padding-top:12px; margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; }
  .mobile-cell-actions::before { flex-basis:100%; }
  .mobile-cell-actions .button { flex:1 1 auto; }
  .folder-grid,.client-grid,.setup-grid { grid-template-columns:minmax(0,1fr); }
  .file-name,.folder-name,.client-name { overflow-wrap:anywhere; }
  .library-toolbar,.execution-toolbar,.filter-bar { flex-wrap:wrap; gap:10px; }
  .workflow-heading { padding:10px 16px 12px; gap:10px; max-height:45dvh; overflow-y:auto; flex-shrink:0; }
  .workflow-heading > div:first-child { min-width:0; width:100%; }
  .editor-folder-line { margin:0 0 5px; gap:5px; flex-wrap:wrap; }
  .title-line { gap:6px; flex-wrap:wrap; }
  .title-line h1 { font-size:21px; line-height:1.25; white-space:normal; overflow-wrap:anywhere; flex:1; min-width:80px; }
  .workflow-title-icon { display:none; }
  #workflowDescription { display:none; }
  .mobile-actions-toggle { display:flex; width:100%; justify-content:space-between; gap:12px; }
  .mobile-actions-toggle small { font-size:10px; color:#7a6b75; font-weight:400; text-align:end; }
  .workflow-heading .heading-actions { display:none; flex-wrap:wrap; width:100%; margin:0; gap:8px; }
  .workflow-heading.mobile-actions-open .heading-actions { display:flex; }
  .workflow-heading.mobile-actions-open { max-height:60dvh; }
  .workflow-heading .heading-actions .button { flex:1 1 130px; }
  .view-bar { padding:0 12px; min-height:48px; flex-shrink:0; }
  .view-bar .tabs { width:100%; gap:12px; overflow-x:auto; }
  .tab { flex-shrink:0; font-size:12px; gap:5px; padding:10px 0; }
  .session-state { display:none; }
  .editor-view { min-height:0; }
  .work-area { min-height:0; min-width:0; }
  .mobile-editor-toolbar { display:flex; flex-shrink:0; padding:10px 14px; gap:10px; justify-content:space-between; background:#f6f2f4; }
  .mobile-layout-switch { display:flex; border:1px solid #e4d9e0; padding:3px; border-radius:12px; background:#eee7eb; }
  .mobile-layout-button { border:0; border-radius:9px; font:inherit; font-size:12px; font-weight:600; padding:0 15px; min-height:38px; color:#796775; background:transparent; }
  .mobile-layout-button[aria-pressed=true] { color:#a32e43; background:white; box-shadow:0 1px 4px #332a3014; }
  .mobile-step-list { display:block; flex:1; min-height:0; overflow-y:auto; padding:0 14px 20px; background:#f6f2f4; overscroll-behavior:contain; }
  .mobile-steps-intro { color:#7a6b75; font-size:12px; line-height:1.6; margin:0 0 12px; }
  .mobile-step-card { display:flex; flex-direction:column; width:100%; align-items:flex-start; text-align:start; gap:7px; padding:16px; margin-bottom:12px; border:1px solid #e4d9e0; border-radius:15px; background:white; font:inherit; color:#332a30; box-shadow:0 3px 10px #332a3005; overflow-wrap:anywhere; }
  .mobile-step-card[aria-pressed=true] { border-color:#ca637c; box-shadow:0 0 0 2px #d142570b; }
  .mobile-step-card small { color:#9b425b; font-size:11px; }
  .mobile-step-card strong { font-size:15px; line-height:1.4; }
  .mobile-step-routes { width:100%; border-top:1px solid #f0e9ed; padding-top:9px; margin-top:4px; color:#7a6b75; font-size:12px; line-height:1.6; white-space:pre-line; }
  .canvas { display:none; min-height:0; touch-action:none; }
  .phone-canvas .work-area { overflow-y:auto; }
  .phone-canvas .canvas { display:block; flex:1 0 260px; min-height:260px; }
  .phone-canvas .mobile-editor-toolbar { position:sticky; top:0; z-index:10; }
  .phone-canvas .mobile-step-list { display:none; }
  .phone-canvas .canvas-top { top:8px; left:12px; right:12px; }
  .phone-canvas .canvas-top .add-step { display:none; }
  .canvas-bottom { bottom:10px; left:12px; right:12px; }
  .canvas-info { display:none; }
  .test-console { height:130px; max-height:28dvh; }
  .test-console.collapsed { height:44px; }
  .console-header { min-height:44px; }
  .console-body { padding:10px 14px; }
  .inspector { display:none; }
  .inspector.mobile-visible { display:block; position:fixed; inset:0; z-index:75; width:100%; height:100dvh; max-height:none; border-radius:0; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); overflow-y:auto; overscroll-behavior:contain; background:white; }
  .inspector-header { top:0; min-height:56px; height:auto; padding:6px 16px; }
  .inspector-header .close-inspector { order:3; margin-left:auto; }
  .inspector-node { padding:18px 16px; }
  .inspector-node > div { min-width:0; overflow-wrap:anywhere; }
  .inspector-tabs { top:56px; gap:0; justify-content:space-between; padding:0 16px; }
  .inspector-tab { font-size:13px; padding:12px 6px; }
  .inspector-content { padding:20px 16px; }
  .inspector-footer { padding:12px 16px; flex-wrap:wrap; gap:12px; overflow-wrap:anywhere; }
  .field-label,.setup-field,.field-help,.setup-field small,.inspector-note { font-size:13px; line-height:1.6; }
  .field { min-width:0; }
  .input-preview,.json-preview,pre { max-width:100%; overflow:auto; }
  .execution-detail-summary { flex-direction:column; align-items:flex-start; gap:12px; }
  .execution-detail-summary h3 { font-size:18px; }
  .execution-detail-summary p { font-size:12px; line-height:1.6; }
  .execution-timeline li > div { min-width:0; }
  .alternate-view { padding:20px 16px; }
  dialog.general-dialog,dialog.setup-dialog,dialog.library-dialog { width:calc(100vw - 16px); max-width:none; max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin:auto; padding:20px 16px; border-radius:20px; overflow:auto; overscroll-behavior:contain; }
  .dialog-heading { gap:12px; align-items:flex-start; margin-bottom:20px; }
  .dialog-heading h2 { font-size:21px; line-height:1.3; overflow-wrap:anywhere; }
  .dialog-actions { display:flex; flex-wrap:wrap; justify-content:stretch; gap:8px; }
  .dialog-actions .button { flex:1 1 130px; }
  .dialog-actions > * { max-width:100%; }
  .setup-form,.dialog-form,#dialogContent { min-width:0; overflow-wrap:anywhere; }
  .library-step { min-height:72px; }
  .library-categories { overflow-x:auto; flex-wrap:nowrap; }
  .library-categories button { flex-shrink:0; }
  .access-gate { padding:24px 16px max(24px,env(safe-area-inset-bottom)); overflow:auto; }
  .access-card { width:100%; max-width:420px; padding:28px 22px; }
  .toast { bottom:calc(var(--phone-nav-height) + 12px); max-width:calc(100vw - 32px); white-space:normal; }
  .save-error { max-width:100%; white-space:normal; }
}