/* Logical CSS pixels follow the current monitor DPI. Page height must never
   reduce the font size; long pages scroll and narrower windows reflow. */
html.embedded #stage {
  position: relative; left: 0; top: 0; min-height: 0;
  transform: none; overflow: hidden;
}
html.embedded .workspace {
  flex: 1; height: 100%; min-height: 0;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 30px; padding: 16px 20px 16px 18px;
}
html.embedded .main {
  height: 100%; min-height: 0; min-width: 0;
  padding: 8px 14px 24px 4px; overflow: auto; scrollbar-gutter: stable;
}
html.embedded .screen { min-height: 0; padding-bottom: 12px; }
html.embedded .rail {
  min-height: 0; height: 100%; padding: 20px 10px 14px;
}
html.embedded .brand-logo { flex-shrink: 0; margin-bottom: 14px; }
html.embedded .nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 8px 0; scrollbar-width: thin;
}
html.embedded .nav-btn { flex-shrink: 0; }
html.embedded .nav-btn.active {
  width: 88px; height: 71px; margin: 0; padding: 0;
  flex-direction: column; justify-content: center; gap: 6px; border-radius: 18px;
}
html.embedded .nav-btn.active .nav-icon { flex: 0 0 42px; width: 42px; height: 42px; }
html.embedded .listener { flex-shrink: 0; margin-top: 12px; }
html.embedded .system-btn { flex-shrink: 0; margin-top: 16px; }
#stage .page-head { height: auto; min-height: 88px; flex-wrap: wrap; padding-bottom: 16px; }
#stage .page-head p { line-height: 1.5; }
#stage .head-actions, #stage .toolbar, #stage .task-actions,
#stage .queue-footer, #stage .archive-tools { flex-wrap: wrap; }
#stage .head-actions { gap: 10px; }
#stage .panel { min-width: 0; }
#stage .panel-title { height: auto; min-height: 32px; flex-wrap: wrap; gap: 10px; }
#stage :is(input, textarea, select, .input, .select, .textarea) { min-width: 0; max-width: 100%; }
#stage :is(.stack, .field, .row > *, .setting-line > *, .system-line > *) { min-width: 0; }
#stage :is(.setting-line, .system-line) { height: auto; min-height: 48px; flex-wrap: wrap; padding-block: 8px; }
#stage :is(.copy-block, .answer-block, .memory-copy, .db-message-bubble, .db-path) { overflow-wrap: anywhere; }
#stage .ai-profile { grid-template-columns: minmax(0, 1fr); }
#stage .ai-profile .ai-ball { display: none; }
#stage .ai-profile .preview-box { min-height: 100px; }
#stage .status-cells { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
#stage .status-cell { min-width: 0; height: auto; min-height: 74px; padding: 10px 14px; }
#stage .status-cell :is(strong, span) { overflow-wrap: anywhere; }
#stage .db-scroll { max-height: 600px; overflow: auto; }
#stage .queue-list, #stage .event-list, #stage .chat { max-height: 650px; overflow: auto; }
#stage .activity-strip { overflow-x: auto; }
#stage .form-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
#stage .ai-bottom, #stage .automation-mid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#stage .system-top, #stage .system-mid { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
#stage .toast { max-width: calc(100% - 32px); right: 16px; bottom: 16px; overflow-wrap: anywhere; }

/* Use the effective layout width after the user's UI-size preference. */
#stage[data-layout="compact"] :is(.auto-grid, .queue-view-grid, .archive-grid, .wechatdb-grid) {
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto;
}
#stage[data-layout="compact"] :is(.auto-grid, .queue-view-grid, .archive-grid, .wechatdb-grid) > * {
  grid-column: auto; grid-row: auto; min-height: 0;
}
#stage[data-layout="compact"] .ai-top { grid-template-columns: minmax(0, 1fr); }
#stage[data-layout="compact"] :is(.logs-grid, .automation-top) { grid-template-columns: minmax(0, 1fr); }
#stage[data-layout="compact"] .logs-grid > * { grid-column: auto; grid-row: auto; }
#stage[data-layout="compact"] .wave-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; padding-block: 14px; gap: 16px; }

#stage[data-layout="narrow"] .workspace {
  grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px;
}
#stage[data-layout="narrow"] .rail { border-radius: 20px; padding: 10px 4px; }
#stage[data-layout="narrow"] .brand-logo { width: 38px; height: 38px; font-size: 22px; }
#stage[data-layout="narrow"] :is(.nav-btn, .nav-btn.active) { width: 52px; height: 66px; padding: 0; }
#stage[data-layout="narrow"] .nav-btn > span { font-size: 10px; }
#stage[data-layout="narrow"] :is(.nav-icon, .nav-btn.active .nav-icon) { width: 38px; height: 38px; flex-basis: 38px; }
#stage[data-layout="narrow"] .orb { width: 34px; height: 34px; }
#stage[data-layout="narrow"] .listener { padding: 8px 0; font-size: 11px; }
#stage[data-layout="narrow"] .system-btn { width: 40px; height: 40px; margin-top: 8px; }
#stage[data-layout="narrow"] .main { padding: 6px 8px 16px 0; }
#stage[data-layout="narrow"] .page-head h1 { font-size: 27px; }
#stage[data-layout="narrow"] .head-actions { width: 100%; }
#stage[data-layout="narrow"] .panel-pad { padding: 16px; }
#stage[data-layout="narrow"] :is(.auto-grid, .queue-view-grid, .archive-grid, .wechatdb-grid,
  .ai-top, .ai-bottom, .ai-grid, .automation-top, .automation-mid, .logs-grid,
  .log-mid, .system-top, .system-mid, .status-cells) {
  grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; min-height: 0;
}
#stage[data-layout="narrow"] :is(.auto-grid, .queue-view-grid, .archive-grid, .wechatdb-grid,
  .logs-grid, .ai-grid) > * { grid-column: auto; grid-row: auto; min-height: 0; }
#stage[data-layout="narrow"] .wave-ribbon {
  height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 10px; gap: 16px;
}
#stage[data-layout="narrow"] .metric { min-width: 0; flex-wrap: wrap; gap: 8px; }
#stage[data-layout="narrow"] :is(.storage-grid, .knowledge, .wechat-graphic) {
  display: flex; flex-wrap: wrap; gap: 14px;
}
#stage[data-layout="narrow"] :is(.auto-flow, .window-status, .health-rings, .storage-actions,
  .task-head-meta, .tabs, .risk-tags, .answer-meta) { flex-wrap: wrap; height: auto; gap: 10px; }
#stage[data-layout="narrow"] .flow-step { flex: 1 1 90px; }
#stage[data-layout="narrow"] .auto-flow:before { display: none; }
#stage[data-layout="narrow"] .tool-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
#stage[data-layout="narrow"] .maintenance { grid-template-columns: minmax(0, 1fr); }

/* Keep both navigation and stop/settings controls reachable on short displays. */
#stage[data-short="true"] .brand-logo { display: none; }
#stage[data-short="true"] .listener { display: flex; gap: 8px; margin-top: 8px; }
#stage[data-short="true"] .listener .orb { width: 22px; height: 22px; }
#stage[data-short="true"] .system-btn { margin-top: 6px; }

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #bdc9df; border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

#stage .log-mid > .panel > .row { flex-wrap: wrap; }
#stage .log-mid > .panel > .row > div { flex: 1 1 180px; }
#stage[data-layout="narrow"][data-short="true"] .listener { flex-direction: column; gap: 6px; }
#stage .exception-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); height: auto; gap: 12px; }

/* Offscreen list rows need no painting until they approach the scroll viewport. */
#stage :is(.queue-row, .event-row, .db-conversation, .db-account) {
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
}