/* Stable controls and a separate reading area, aligned with the simulator. */
.simulator-shell .workspace {
  --panel-width:clamp(270px,29vw,380px);
  --panel-gap:12px;
  --panel-ease:cubic-bezier(.22,1,.36,1);
  grid-template-columns:minmax(0,1fr) var(--panel-width);
  grid-template-rows:56px minmax(0,1fr);
  column-gap:var(--panel-gap);row-gap:8px;min-width:0;
  transition:grid-template-columns 360ms var(--panel-ease),column-gap 360ms var(--panel-ease);
}
.simulator-shell .workspace[data-controls-open="false"] { grid-template-columns:minmax(0,1fr) 0px;column-gap:0; }
.workspace-toolbar { grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-width:0; }
.workspace-tool {
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;
  padding:9px 15px;border:1px solid #5c646a;border-radius:9px;
  background:linear-gradient(#30373c,#272e33);color:#e8e6e0;font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;
  box-shadow:inset 0 1px 0 #ffffff0a,0 2px 5px #0000001a;
  transition:background 160ms,border-color 160ms,box-shadow 160ms;
}
.workspace-tool svg { width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round; }
.workspace-tool:hover { background:#3a4248;border-color:#899094; }
.workspace-tool:active { transform:none;background:#242b30;box-shadow:inset 0 2px 4px #0005; }
.workspace-tool:focus-visible { outline:2px solid #e8c99b;outline-offset:3px; }
#controls-toggle[aria-expanded="true"] { border-color:#b69a74;background:linear-gradient(#514737,#423a2e);color:#f7e2bd; }
.panel-indicator { width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform 220ms var(--panel-ease); }
#controls-toggle[aria-expanded="true"] .panel-indicator { transform:rotate(45deg); }
#controls-toggle.needs-attention { border-color:#d6ac82;box-shadow:0 0 0 2px #e2bb8433; }
.simulator-shell .scene-column { grid-column:1;grid-row:2; }
.sidebar-slot { grid-column:2;grid-row:2;position:relative;min-width:0;min-height:0;height:100%;overflow:hidden;visibility:visible;transition:visibility 0s; }
.simulator-shell .sidebar-slot>.sidebar-column { width:var(--panel-width);position:absolute;right:0;top:0;bottom:0;height:100%;opacity:1;transition:opacity 180ms ease; }
.workspace[data-controls-open="false"] .sidebar-slot { visibility:hidden;transition:visibility 0s 360ms; }
.workspace[data-controls-open="false"] .sidebar-column { opacity:0; }
/* The notice never changes a row height or opens the controls by itself. */
.workspace-notice { min-width:0;height:56px;display:grid;align-items:center;overflow:hidden; }
.workspace-notice>.device-notice { position:relative;inset:auto;min-width:0;max-width:680px;width:100%;height:52px;max-height:none;min-height:0;margin:0 auto;padding:0;overflow:hidden;border:1px solid #855d60;border-radius:9px;background:linear-gradient(120deg,#39292c,#25272b);color:#f9eeee; }
.workspace-notice>.device-notice[hidden] { display:none; }
.workspace-notice>.device-notice[data-kind="warning"] { border-color:#b67672;background:linear-gradient(120deg,#492b2d,#28262a); }
.workspace-notice .device-notice>*:not(.notice-compact) { display:none; }
.workspace-notice .device-notice>.notice-compact { display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:12px minmax(0,1fr);align-items:center;gap:1px 6px;width:100%;height:100%;min-height:44px;padding:3px 10px;border:0;background:transparent;text-align:left;color:#fff0e9; }
.workspace-notice #notice-short-kind { font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#e6aaa3; }
.workspace-notice .notice-read-label { font-size:10px;color:#f2d3ba; }
.workspace-notice #notice-short-title { grid-column:1/-1;font-size:13px;line-height:15px;font-weight:650; }
.workspace-notice .device-notice.is-entering { animation:workspace-hint-in 280ms ease-out both; }
@keyframes workspace-hint-in { from { opacity:0;transform:translateY(3px); } to { opacity:1;transform:translateY(0); } }
@media(max-width:1100px) and (any-pointer:coarse) {
 .simulator-shell .workspace { --panel-width:clamp(242px,33vw,310px);--panel-gap:8px; }
 .workspace-toolbar { gap:8px; }
 .workspace-tool { font-size:12px;padding:9px 12px;gap:7px; }
}
@media(max-width:650px) {
 #workspace-reset { width:44px;padding:9px; }
 #workspace-reset>span { display:none; }
 .workspace-tool { padding:9px 10px; }
}
/* On phones the controls sit in the upper edge of the scene, not in another
   full-width row. Camera framing reserves this same 58px band for them. */
@media(max-width:1100px) and (max-height:600px) and (orientation:landscape) and (any-pointer:coarse) {
 .simulator-shell .workspace { position:relative;grid-template-rows:minmax(0,1fr);row-gap:0; }
 .workspace-toolbar { position:absolute;inset:6px 6px auto;z-index:8;height:44px;gap:8px;pointer-events:none; }
 .workspace-toolbar>.workspace-tool,.workspace-view-tools,.workspace-notice>.device-notice { pointer-events:auto; }
 .workspace-tool { height:44px;min-height:44px;background:#262d32ed;border-color:#697176;box-shadow:0 2px 8px #0002; }
 #workspace-reset { width:44px;padding:9px; }
 #workspace-reset>span { display:none; }
 .simulator-shell .scene-column { grid-row:1; }
 .sidebar-slot { grid-row:1;padding-top:58px; }
 .simulator-shell .sidebar-slot>.sidebar-column { top:58px;height:calc(100% - 58px); }
 .workspace[data-view="device"] .focus-button { display:none; }
 .workspace-notice { height:44px; }
 .workspace-notice>.device-notice { height:44px;max-width:510px; }
 .workspace-notice .device-notice>.notice-compact { padding:3px 8px;grid-template-rows:10px minmax(0,1fr); }
 .workspace-notice #notice-short-kind { font-size:8px; }
 .workspace-notice .notice-read-label { font-size:9px; }
 .workspace-notice #notice-short-title { font-size:12px;line-height:13px; }
 /* A duplicate restart control is unnecessary while its top button is visible. */
 #player-reset { display:none; }
 .training-player { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.workspace[data-initializing="true"],.workspace[data-initializing="true"] .sidebar-slot,.workspace[data-initializing="true"] .sidebar-column { transition:none!important; }
body[data-reduced-motion="true"] .workspace,
body[data-reduced-motion="true"] .sidebar-slot,
body[data-reduced-motion="true"] .sidebar-column,
body[data-reduced-motion="true"] .panel-indicator { transition:none!important; }
@media(prefers-reduced-motion:reduce) {
 .simulator-shell .workspace,.sidebar-slot,.sidebar-column,.panel-indicator { transition:none!important; }
 .workspace-notice .device-notice { animation:none!important; }
}
@media(forced-colors:active) { .workspace-tool,.workspace-notice>.device-notice { border:1px solid ButtonText; } }

/* One view toggle beside the controls, always outside the camera image. */
.workspace-view-tools { display:flex;align-items:center;gap:8px;min-width:0; }
.zoom-state { padding:3px 6px;border-radius:4px;background:#ffffff0c;font-size:11px;line-height:1;min-width:25px;text-align:center; }
#focus[aria-pressed="true"] { border-color:#b69a74;background:linear-gradient(#514737,#423a2e);color:#f7e2bd; }
#focus[aria-pressed="true"] .zoom-state { background:#d6b58426; }
@media(max-width:650px) { .workspace-view-tools { gap:5px; } .workspace-view-tools .workspace-tool { gap:5px;padding-inline:8px; } }