/* Workspace chrome shared by canvas pages and Open World (2026-10-26, Open World layout): the status bar, the corner
   Chat launcher and the palette dock. Moved here from studio.css; pages load it before their own stylesheet. */
.workspace-status{height:28px;min-height:28px;display:flex;align-items:center;gap:24px;padding:0 16px;font:10px monospace;letter-spacing:0;color:#747d6d;background:#f5f6ef;border-top:1px solid #d8ddce}
.workspace-status #zoom-label{margin-left:auto}.workspace-status #coordinates{min-width:100px}
/* Header cleanup step 1 (2026-10-26): connection + Online live in the status bar, Chat is a corner button. */
.workspace-status .status-live{display:inline-flex;align-items:center;gap:8px}
.workspace-status .connection-dot{margin-left:0}
.workspace-status .online-toggle{height:24px;padding:0 8px;font:600 11px "Noto Sans",Verdana,sans-serif;background:#fffef9;border-radius:6px}
.workspace-status .online-toggle .online-dot{width:7px;height:7px}
.workspace-status .online-toggle{margin-left:auto}.workspace-status .online-toggle+#zoom-label{margin-left:0}
button.chat-launcher{position:absolute;right:14px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:1px solid #c4cbb8;border-radius:19px;background:#fffef9;box-shadow:0 3px 10px #20281c26;font-size:13px;font-weight:600}
.chat-launcher:hover{background:#f3f4ec}
.chat-launcher[aria-expanded=true]{display:none}
.chat-launcher-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
@media(max-width:600px){.chat-launcher{right:10px;bottom:10px;height:42px}}
.workspace-status .online-toggle .online-dot{display:none} /* the connection dot is already beside it */
@media(max-width:600px){.workspace-status #dimensions{display:none}.workspace-status .online-toggle .online-label{display:inline}}
/* Header cleanup step 3 (2026-10-26): palette dock between the canvas and the status bar. */
.palette-dock{display:flex;align-items:center;gap:8px;min-height:46px;padding:5px 12px;background:#fafaf6;border-top:1px solid #d8ddce;overflow:hidden}
.dock-current{display:flex;align-items:center;gap:9px;height:36px;padding:0 12px 0 8px;background:#fffef9;border:1px solid #cfd4c4;border-radius:8px;flex-shrink:0;max-width:220px}
.dock-current[aria-expanded=true]{background:#edf0e6;border-color:#cbd2be}
.dock-current #active-color-dot{width:24px;height:24px;border-radius:6px;flex-shrink:0}
.dock-current-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
.dock-current-text strong{font-size:12px}
.dock-current-text small{font-size:10px;color:#6b7464;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.dock-divider{width:1px;height:26px;background:#d8ddce;flex-shrink:0}
.dock-recent-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7464;flex-shrink:0;cursor:default}
.dock-colors{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:3px 2px}
.dock-colors::-webkit-scrollbar{display:none}
.dock-swatch{width:28px;height:28px;min-width:28px;padding:0;border:1px solid #0000001f;border-radius:6px}
.dock-swatch:hover{transform:translateY(-2px)}
.dock-swatch[aria-pressed=true]{outline:2px solid #343c32;outline-offset:2px}
.dock-swatch[data-transparent=true],#active-color-dot[data-transparent=true]{background-image:linear-gradient(45deg,#d9ddd4 25%,transparent 25%,transparent 75%,#d9ddd4 75%),linear-gradient(45deg,#d9ddd4 25%,transparent 25%,transparent 75%,#d9ddd4 75%)!important;background-size:8px 8px;background-position:0 0,4px 4px;background-color:#fff!important}
@media(max-width:600px){.dock-recent-label{display:none}.palette-dock{gap:6px;padding:4px 8px;min-height:44px}.dock-current{padding:0 8px 0 6px}.dock-current-text small{display:none}.dock-swatch{width:30px;height:30px;min-width:30px}}