:root { --bg: #131316; /* darkest — app base / viewport letterbox */ --surface: #1f1f23; /* primary chrome: header, sidebars, footer */ --surface2: #2b2b31; /* inputs, raised buttons */ --surface3: #36363d; /* hover / elevated controls */ --border: #34343b; /* hairline separators */ --border2: #43434c; /* stronger separators, focus-adjacent */ --text: #e7e7ea; --text-dim: #9a9aa3; --text-mut: #6c6c76; --accent: #4fd8f5; /* brand cyan (from the wireframe logo tile) — used sparingly */ --accent-bg: rgba(79,216,245,0.13); --accent-dim: #3ba6bd; --danger: #ff5564; --danger-bg: rgba(255,85,100,0.13); --radius: 6px; --radius-sm: 4px; --shadow: 0 10px 30px rgba(0,0,0,0.55); --sidebar-w: 50px; --props-w: 240px; --header-h: 48px; --footer-h: 40px; } /* Light "engineering" theme — a lower-glare, SolidWorks-ish grey palette. Opt-in via ; dark stays the default. */ :root[data-theme="light"] { --bg: #dfe1e6; /* viewport letterbox / app base */ --surface: #f2f3f5; /* chrome: header, docks, footer */ --surface2: #e6e8ec; /* inputs, raised buttons */ --surface3: #d6d9df; /* hover / elevated controls */ --border: #c3c7cf; --border2: #a9aeb8; --text: #22242a; --text-dim: #565b66; --text-mut: #838a96; --accent: #0a6c86; /* brand cyan, darkened for light chrome */ --accent-bg: rgba(10,108,134,0.12); --accent-dim: #09566b; --danger: #d13341; --danger-bg: rgba(209,51,65,0.12); --shadow: 0 10px 30px rgba(30,40,60,0.22); } /* Viewport HUD chips have hardcoded dark glass backgrounds below; in the light theme they go light so the scene-palette badge/hint colours (set inline from SCENE_COLORS in gusta3d.js) read correctly. */ :root[data-theme="light"] #measure-bar { background: rgba(242,243,245,0.92); } :root[data-theme="light"] #infer-hint { background: rgba(242,243,245,0.94); color: var(--text-dim); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Barlow', sans-serif; background: var(--bg); color: var(--text); height: 100vh; height: 100dvh; /* track the real visible height, not the layout viewport */ overflow: hidden; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── Header ─────────────────────────────────────────────── */ header { min-height: var(--header-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; flex-wrap: wrap; /* wrap on narrow windows instead of overflowing */ padding: 6px 14px; gap: 6px 12px; flex-shrink: 0; } .logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Gustalabs family wordmark: the real mark + two-tone product name. */ .brand-mark { display: block; flex: none; border-radius: 7px; } .brand-name { font-family: 'Barlow', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--text); } .brand-name em { font-style: normal; font-weight: 600; color: var(--accent); } .header-sep { flex: 1; } .toolbar-group { display: flex; gap: 3px; } .tool-btn { background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); padding: 5px 11px; border-radius: var(--radius-sm); font-size: 11px; font-family: 'Barlow', sans-serif; font-weight: 500; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } .tool-btn:hover { background: var(--surface3); border-color: var(--border2); color: var(--text); } /* Refined "selected" state: tinted fill + accent text, not a loud solid block. */ .tool-btn.is-active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); font-weight: 600; } .header-label { font-size: 11px; color: var(--text-dim); flex-shrink: 0; } /* ── CommandManager ribbon (replaces the left icon rail) ──────────── */ .ribbon-tabs { display: flex; gap: 2px; flex-shrink: 0; } .ribbon-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; padding: 6px 13px 5px; cursor: pointer; border-radius: 4px 4px 0 0; transition: background .12s, color .12s, border-color .12s; } .ribbon-tab:hover { color: var(--text); background: var(--surface2); } .ribbon-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); } .ribbon-bar { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; background: var(--surface); border-bottom: 1px solid var(--border); padding: 5px 14px; flex-shrink: 0; } .ribbon-panels { display: flex; flex: 1; min-width: 0; } .ribbon-panel { display: none; gap: 4px; flex-wrap: wrap; } .ribbon-panel.is-active { display: flex; } .ribbon-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 54px; padding: 5px 8px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius); cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .ribbon-btn:hover { background: var(--surface3); border-color: var(--border2); color: var(--text); } .ribbon-btn:hover .shape-icon { color: var(--accent); } .ribbon-btn.is-active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } .ribbon-btn.is-active .shape-icon { color: var(--accent); } .ribbon-btn .shape-icon { height: 20px; } .ribbon-btn .shape-icon svg { width: 20px; height: 20px; } .ribbon-label { font-size: 10px; font-weight: 500; white-space: nowrap; line-height: 1; } /* Persistent context strip on the right: transform / plane / toggles / panels */ .ribbon-context { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ribbon-group { display: flex; align-items: center; gap: 3px; } .ribbon-group + .ribbon-group { border-left: 1px solid var(--border); padding-left: 10px; } .ribbon-toggle { background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 500; padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .ribbon-toggle:hover { background: var(--surface3); border-color: var(--border2); color: var(--text); } .ribbon-toggle.is-active, .ribbon-toggle[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } /* Overflow "⋯" button — folds the context strip into a popover on phone/tablet. Hidden on desktop, where the context strip stays inline (unchanged). */ .ribbon-overflow { display: none; } /* ── Settings dropdown (Nav + Print bed, tucked off the header) ── */ .settings-wrap { position: relative; flex-shrink: 0; } .settings-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; min-width: 230px; box-shadow: var(--shadow); } .settings-menu[hidden] { display: none; } .settings-menu .header-label { margin-top: 4px; } .settings-menu .header-select { max-width: none; width: 100%; } /* ── Gusta pill + account chip (Gustalabs family top-bar cluster) ── */ .gusta-pill { display: flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 4px 10px; background: var(--accent-bg); border: 1px solid var(--accent-dim); border-radius: 8px; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; } .gusta-pill .btn-label { color: var(--text); font-weight: 600; } .gusta-pill:hover { border-color: var(--accent); } .gusta-pill.is-active { border-color: var(--accent); box-shadow: 0 0 6px var(--accent-bg); } .account-btn { display: flex; align-items: center; gap: 6px; } .account-btn.signin { border-color: var(--accent-dim); } .account-id { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } .account-name { font-weight: 600; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-tokens { font-size: 10px; color: var(--text-dim); } .account-menu { min-width: 264px; } .menu-heading { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); } .menu-note { font-size: 11px; font-style: italic; color: var(--text-dim); line-height: 1.4; } .link-btn { background: none; border: none; padding: 0; font: inherit; font-size: 11px; color: var(--accent); cursor: pointer; text-decoration: underline; align-self: flex-start; } .gusta-auth-tabs { display: flex; gap: 6px; margin-bottom: 4px; } .gusta-auth-tabs .tool-btn { flex: 1; } .gusta-auth-tabs .tool-btn.is-active { border-color: var(--accent); color: var(--accent); } #gusta-balance strong { color: var(--accent); font-size: 15px; } #gusta-buy-row { display: flex; gap: 6px; } #gusta-buy-row .tool-btn { flex: 1; } .header-select { background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 5px 8px; border-radius: 4px; font-size: 11px; font-family: 'Barlow', sans-serif; cursor: pointer; max-width: 200px; } .header-select:focus { outline: none; border-color: var(--accent); } /* ── Custom bed row ──────────────────────────────────────── */ #custom-bed-row { display: none; background: var(--surface); border-bottom: 1px solid var(--border); padding: 6px 14px; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); flex-shrink: 0; } #custom-bed-row.visible { display: flex; } .custom-bed-input { width: 60px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 3px 6px; border-radius: 4px; font-size: 11px; font-family: 'Barlow', sans-serif; text-align: center; } .custom-bed-input:focus { outline: none; border-color: var(--accent); } /* ── Main layout ─────────────────────────────────────────── */ .main { flex: 1; display: flex; overflow: hidden; } /* ── Left Sidebar ────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; padding: 6px 0; /* Own stacking context above the viewport's floating panels (z 30) so tool flyouts pop over the Objects/Params panels — still below modals (z 50+). */ position: relative; z-index: 45; } .tool-rail { display: flex; flex-direction: column; gap: 6px; padding: 0 6px; } /* A tool group: a head button + a flyout that reveals the rest on hover */ .rail-group { position: relative; } .rail-head { position: relative; background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); width: 38px; height: 38px; margin: 0 auto; border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s, color 0.12s; } .rail-head:hover { border-color: var(--border2); background: var(--surface3); color: var(--text); } .rail-head:hover .shape-icon { color: var(--accent); } /* The whole group lights up while one of its tools is the active mode */ .rail-group.is-active .rail-head { background: var(--accent-bg); border-color: var(--accent); } .rail-group.is-active .rail-head .shape-icon { color: var(--accent); } /* Little corner caret hinting that the group expands */ .rail-caret { position: absolute; right: 2px; bottom: 0px; font-size: 10px; line-height: 1; color: var(--text-mut); pointer-events: none; } /* Flyout row — appears to the right of the head on hover / keyboard focus */ .rail-flyout { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%) translateX(-4px); display: flex; gap: 4px; padding: 5px; background: rgba(28,28,33,0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border2); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.1s, transform 0.1s, visibility 0.1s; z-index: 40; } .rail-group:hover .rail-flyout, .rail-group:focus-within .rail-flyout, .rail-flyout.pinned { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0); } /* Bridge the 6px gap so the flyout doesn't vanish as the cursor crosses it */ .rail-flyout::before { content: ''; position: absolute; left: -8px; top: 0; bottom: 0; width: 8px; } /* Icon-only tool buttons in the rail */ .shape-btn, .rail-btn { background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); width: 38px; height: 38px; margin: 0 auto; border-radius: var(--radius); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .shape-btn:hover, .rail-btn:hover { border-color: var(--border2); background: var(--surface3); color: var(--text); } .shape-btn:hover .shape-icon, .rail-btn:hover .shape-icon { color: var(--accent); } .shape-btn:active, .rail-btn:active { background: var(--accent-bg); border-color: var(--accent); } /* Hairline divider between tool groups and context controls */ .rail-sep { height: 1px; background: var(--border); margin: 4px 6px; } /* Toggle-state for icon-only rail buttons (snap/ortho/clay) */ .rail-btn.is-active { background: var(--accent-bg); border-color: var(--accent); } .rail-btn.is-active .shape-icon { color: var(--accent); } /* Reflect active child state on transform/plane group heads */ .rail-group:has([data-mode].is-active) .rail-head, .rail-group:has([data-plane].is-active) .rail-head { background: var(--accent-bg); border-color: var(--accent); } .rail-group:has([data-mode].is-active) .rail-head .shape-icon, .rail-group:has([data-plane].is-active) .rail-head .shape-icon { color: var(--accent); } /* Panel toggles live in a footer cluster pinned to the bottom of the rail, set off from the create tools by a hairline divider. */ .rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px 0; border-top: 1px solid var(--border); } .rail-btn[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent); } .rail-btn[aria-pressed="true"] .shape-icon { color: var(--accent); } .shape-icon { display: flex; align-items: center; justify-content: center; height: 22px; color: var(--text-dim); transition: color 0.12s; } .shape-icon svg { width: 22px; height: 22px; display: block; } /* ── Floating Scene panel (Objects + Features tabs) ──────── */ #scene-panel { display: none; position: absolute; left: 8px; top: 8px; width: 200px; max-height: calc(100% - 16px); background: rgba(28,28,33,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border2); border-radius: var(--radius); flex-direction: column; overflow: hidden; z-index: 30; box-shadow: var(--shadow); } #scene-panel.visible { display: flex; } /* Docked as a permanent left column (the SolidWorks FeatureManager spot) */ #scene-panel.docked { position: relative; left: auto; top: auto; width: 212px; max-height: none; height: 100%; flex-shrink: 0; background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border: none; border-right: 1px solid var(--border); border-radius: 0; box-shadow: none; z-index: auto; } /* ── Right-click context menu ─────────────────────────────────────── */ #ctx-menu { display: none; position: fixed; z-index: 80; min-width: 168px; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px; font-family: 'Barlow', sans-serif; } #ctx-menu .ctx-title { font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-mut); padding: 4px 8px 6px; } #ctx-menu .ctx-item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 12px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; } #ctx-menu .ctx-item:hover { background: var(--accent-bg); color: var(--accent); } #ctx-menu .ctx-item.danger:hover { background: var(--danger-bg); color: var(--danger); } #ctx-menu .ctx-sep { height: 1px; background: var(--border); margin: 4px 6px; } /* ── Sketch mode ──────────────────────────────────────────────────── */ .ribbon-btn-lead { border-color: var(--border2); } .ribbon-btn-lead + .ribbon-btn { margin-left: 4px; border-left: 1px solid var(--border); padding-left: 12px; } #sketch-banner { display: none; position: fixed; left: 50%; top: 96px; transform: translateX(-50%); z-index: 60; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; background: var(--surface2); border: 1px solid var(--accent); border-radius: 999px; box-shadow: var(--shadow); font: 500 12px 'Barlow', sans-serif; color: var(--text); } #sketch-banner .sk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } #sketch-banner #sketch-finish { background: var(--accent); color: #10131a; border: none; cursor: pointer; font: 600 11px 'Barlow', sans-serif; padding: 5px 12px; border-radius: 999px; } #sketch-banner #sketch-finish:hover { filter: brightness(1.08); } /* Subtle vignette so the user feels they're "inside" a sketch */ body.sketch-active .viewport::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 20; box-shadow: inset 0 0 0 2px var(--accent-bg); } #scene-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 0; border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 6px; } .scene-tabs { display: flex; gap: 2px; } .scene-tab { background: none; border: none; cursor: pointer; padding: 7px 10px 8px; margin-bottom: -1px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-mut); border-bottom: 2px solid transparent; transition: color 0.12s, border-color 0.12s; } .scene-tab:hover { color: var(--text-dim); } .scene-tab.is-active { color: var(--text); border-bottom-color: var(--accent); } #scene-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; align-self: center; } #scene-close:hover { color: var(--text); } .scene-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .scene-body[hidden] { display: none; } .object-list { flex: 1; overflow-y: auto; padding: 6px 8px 8px; } .empty-hint { font-size: 11px; color: var(--text-dim); padding: 6px 4px; font-style: italic; } .object-item { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 5px; cursor: pointer; transition: background 0.1s; font-size: 11px; border: 1px solid transparent; margin-bottom: 2px; } .object-item:hover { background: var(--surface2); } .object-item.selected { background: var(--accent-bg); border-color: var(--accent); } .obj-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .obj-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .obj-vis { background: none; border: none; color: var(--text-mut); cursor: pointer; font-size: 12px; padding: 0 1px; flex-shrink: 0; line-height: 0; transition: color 0.1s; display: inline-flex; align-items: center; } .obj-vis:hover { color: var(--text); } .obj-vis svg { width: 15px; height: 15px; display: block; } .obj-vis.hidden { color: var(--text-mut); opacity: 0.6; } /* ── Floating Parameters / Features panels (share the objects-panel chrome) ── */ .float-panel { display: none; position: absolute; left: 8px; top: 8px; width: 220px; max-height: calc(100% - 16px); background: rgba(28,28,33,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border2); border-radius: var(--radius); flex-direction: column; overflow: hidden; z-index: 30; box-shadow: var(--shadow); } .float-panel.visible { display: flex; } .fp-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); } .fp-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; } .fp-close:hover { color: var(--text); } .fp-body { flex: 1; overflow-y: auto; padding: 6px 8px 8px; } .fp-foot { display: flex; gap: 4px; padding: 7px 8px; border-top: 1px solid var(--border); flex-shrink: 0; } .fp-input { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 4px 6px; font-size: 11px; min-width: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; } .fp-input:focus { outline: none; border-color: var(--accent); } .fp-btn { background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 4px; cursor: pointer; font-size: 13px; padding: 0 8px; flex-shrink: 0; } .fp-btn:hover { color: var(--accent); border-color: var(--accent); } /* Parameter rows */ .param-row { display: flex; align-items: center; gap: 5px; padding: 4px 4px; border-radius: 5px; margin-bottom: 2px; font-size: 11px; } .param-row:hover { background: var(--surface2); } .param-row.errored .param-val { color: #ff6b6b; } .param-name { font-weight: 600; color: var(--text); flex: 0 0 auto; max-width: 70px; overflow: hidden; text-overflow: ellipsis; } .param-expr { flex: 1; background: var(--surface); border: 1px solid transparent; color: var(--text-dim); border-radius: 4px; padding: 3px 5px; font-size: 11px; min-width: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; } .param-expr:hover { border-color: var(--border); } .param-expr:focus { outline: none; border-color: var(--accent); color: var(--text); background: var(--surface); } .param-val { flex: 0 0 auto; color: var(--accent); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; min-width: 34px; text-align: right; } .param-del { background: none; border: none; color: var(--text-mut); cursor: pointer; font-size: 12px; padding: 0 2px; flex-shrink: 0; } .param-del:hover { color: #ff6b6b; } /* Feature-tree rows */ .feat-row { display: flex; align-items: center; gap: 6px; padding: 6px 6px; border-radius: 5px; margin-bottom: 2px; cursor: pointer; font-size: 11px; border: 1px solid transparent; } .feat-row:hover { background: var(--surface2); } .feat-row.selected { background: var(--accent-bg); border-color: var(--accent); } .feat-row.child { margin-left: 14px; } .feat-row.suppressed .feat-name, .feat-row.suppressed .feat-icon { opacity: 0.45; text-decoration: line-through; } .feat-icon { flex: 0 0 auto; width: 16px; text-align: center; color: var(--text-dim); font-size: 12px; } .feat-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .feat-edit { flex: 0 0 auto; width: 44px; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 2px 4px; font-size: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; } .feat-edit:focus { outline: none; border-color: var(--accent); } .feat-btn { background: none; border: none; color: var(--text-mut); cursor: pointer; font-size: 12px; padding: 0 2px; flex-shrink: 0; line-height: 0; display: inline-flex; align-items: center; } .feat-btn:hover { color: var(--text); } .feat-btn.del:hover { color: #ff6b6b; } .feat-btn svg { width: 14px; height: 14px; display: block; } /* ── Groups in the object list ───────────────────────────── */ .group-head { display: flex; align-items: center; gap: 5px; padding: 6px 6px; margin-bottom: 2px; border-radius: 5px; cursor: pointer; border: 1px solid transparent; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; color: var(--text); text-transform: uppercase; } .group-head:hover { background: var(--surface2); } .group-head.selected { background: var(--accent-bg); border-color: var(--accent); } .grp-collapse { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 10px; padding: 0 2px; flex-shrink: 0; line-height: 1; } .grp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .grp-count { font-size: 9px; color: var(--text-dim); background: var(--surface2); border-radius: 8px; padding: 1px 6px; flex-shrink: 0; font-weight: 600; } .grp-members { padding-left: 12px; border-left: 1px solid var(--border); margin-left: 7px; } /* ── Viewport ────────────────────────────────────────────── */ .viewport { flex: 1; position: relative; overflow: hidden; } #canvas { display: block; width: 100%; height: 100%; } .vp-hint { position: absolute; bottom: 8px; left: 8px; font-size: 10px; color: rgba(255,255,255,0.35); pointer-events: none; line-height: 1.7; } #drill-panel { position: absolute; top: 12px; right: 12px; display: none; flex-direction: column; gap: 6px; padding: 10px 12px; background: rgba(20, 22, 28, 0.92); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; font-size: 11px; color: #cdd2da; z-index: 8; } #drill-panel.visible { display: flex; } #drill-panel .drill-title { font-weight: 600; color: var(--accent); margin-bottom: 2px; } #drill-panel label { display: flex; align-items: center; gap: 6px; } #drill-panel .drill-check { gap: 5px; } #drill-panel input[type="number"] { width: 52px; background: #11131a; border: 1px solid rgba(255,255,255,0.15); color: #fff; border-radius: 4px; padding: 2px 4px; } /* Section / cut-plane controls — floats top-right while Section is active */ #section-menu { position: absolute; top: 12px; right: 12px; z-index: 12; display: flex; flex-direction: column; gap: 6px; min-width: 196px; padding: 10px 12px; background: rgba(28,28,33,0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border2); border-radius: var(--radius); box-shadow: var(--shadow); } #section-menu[hidden] { display: none; } #section-menu .sp-title { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); } #section-menu .header-label { margin-top: 2px; } #marquee-box { position: absolute; border: 1px solid var(--accent); background: rgba(79, 216, 245, 0.10); pointer-events: none; display: none; z-index: 6; } #marquee-box.crossing { border-style: dashed; border-color: #47ff9a; background: rgba(71, 255, 154, 0.12); } #kbd-toggle { position: absolute; top: 8px; right: 8px; z-index: 5; width: 28px; height: 28px; padding: 0; background: rgba(20,20,24,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1; } #kbd-toggle:hover { color: var(--text); border-color: var(--border2); } .kbd-panel { position: absolute; top: 42px; right: 8px; background: rgba(20,20,24,0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; font-size: 10px; color: var(--text-dim); line-height: 2; pointer-events: none; } .kbd-panel[hidden] { display: none; } kbd { background: var(--surface2); border: 1px solid var(--border2); border-radius: 3px; padding: 1px 5px; font-size: 10px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: var(--text); } /* ── Properties Panel ────────────────────────────────────── */ .props-panel { width: var(--props-w); background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; position: relative; min-width: 160px; } .props-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; } /* Compact top bar with pin + collapse controls (SolidWorks-style contextual panel) */ .props-topbar { display: flex; align-items: center; gap: 4px; padding: 5px 8px; flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--surface); } .props-topbar .props-title { flex: 1; font: 600 11px 'Barlow Condensed', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); } .props-pin { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; line-height: 1; padding: 3px 4px; border-radius: var(--radius-sm); } .props-pin:hover { background: var(--surface3); color: var(--text); } .props-pin.is-active { color: var(--accent); } .props-pin svg { display: block; } /* Collapsed state — panel shrinks to a slim vertical reveal tab, viewport widens */ .props-reveal { display: none; } .props-panel.collapsed { width: 22px; min-width: 22px; cursor: pointer; } .props-panel.collapsed .props-scroll, .props-panel.collapsed .props-topbar, .props-panel.collapsed .props-resize-handle, .props-panel.collapsed .props-split-handle { display: none; } .props-panel.collapsed .props-reveal { display: flex; align-items: center; justify-content: center; height: 100%; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 11px 'Barlow Condensed', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); user-select: none; } .props-panel.collapsed:hover .props-reveal { color: var(--text); } /* Left-edge drag handle for panel width resize */ .props-resize-handle { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; cursor: ew-resize; z-index: 5; transition: background 0.15s; } .props-resize-handle:hover { background: var(--border2); } .props-resize-handle:active, .props-panel.resizing .props-resize-handle { background: var(--accent); } /* Vertical drag handle between properties and embedded chat */ .props-split-handle { height: 5px; flex-shrink: 0; background: var(--border); cursor: ns-resize; transition: background 0.15s; } .props-split-handle:hover, .props-split-handle:active { background: var(--accent); } /* Embedded chat: override the floating/absolute positioning */ #chat-panel.embedded { position: static !important; flex: 1; width: 100% !important; min-height: 100px; max-height: none !important; height: auto !important; right: auto !important; bottom: auto !important; border: none; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; z-index: auto; transition: none; } #chat-panel.embedded #chat-head { border-top: 1px solid var(--border); } #chat-panel.embedded.minimized { flex: none; } .no-sel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-dim); font-size: 11px; gap: 8px; padding: 24px; text-align: center; } .no-sel-icon { color: var(--text-mut); opacity: 0.7; } .no-sel-icon svg { width: 30px; height: 30px; display: block; } .prop-section { padding: 10px 12px; border-bottom: 1px solid var(--border); } .prop-section-title { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px; } .prop-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; } .prop-row:last-child { margin-bottom: 0; } .axis-label { width: 14px; font-size: 11px; font-weight: 600; flex-shrink: 0; text-align: center; } .axis-x { color: #ff6b6b; } .axis-y { color: #6bff8a; } .axis-z { color: #4a9eff; } .dim-label { width: 54px; font-size: 10px; color: var(--text-dim); flex-shrink: 0; } .prop-input { flex: 1; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 4px 6px; border-radius: 4px; font-size: 11px; font-family: 'Barlow', sans-serif; min-width: 0; } .prop-input:focus { outline: none; border-color: var(--accent); } .unit { font-size: 10px; color: var(--text-dim); width: 18px; flex-shrink: 0; text-align: right; } .name-input { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 5px 8px; border-radius: 4px; font-size: 11px; font-family: 'Barlow', sans-serif; } .name-input:focus { outline: none; border-color: var(--accent); } .color-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .color-swatch { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--border); cursor: pointer; flex-shrink: 0; } .del-btn { margin: 10px 12px 12px; width: calc(100% - 24px); background: var(--danger-bg); border: 1px solid transparent; color: var(--danger); padding: 7px; border-radius: var(--radius-sm); font-size: 11px; font-family: 'Barlow', sans-serif; font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s; letter-spacing: 0.3px; } .del-btn:hover { background: var(--danger); color: #fff; } .dup-btn { margin: 10px 12px 0; width: calc(100% - 24px); background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 7px; border-radius: var(--radius-sm); font-size: 11px; font-family: 'Barlow', sans-serif; font-weight: 600; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; letter-spacing: 0.3px; } .dup-btn:hover { background: var(--surface3); border-color: var(--border2); color: var(--text); } /* ── Footer ──────────────────────────────────────────────── */ footer { min-height: var(--footer-h); background: var(--surface); border-top: 1px solid var(--border); display: flex; align-items: center; flex-wrap: wrap; padding: 4px 12px; gap: 4px 12px; flex-shrink: 0; } .export-btn { background: var(--accent); border: none; color: #0c0c0c; padding: 6px 15px; border-radius: var(--radius-sm); font-size: 11px; font-family: 'Barlow', sans-serif; font-weight: 700; cursor: pointer; letter-spacing: 0.4px; transition: filter 0.12s, opacity 0.12s; flex-shrink: 0; } .export-btn:hover { filter: brightness(1.08); } .export-btn:disabled { opacity: 0.4; cursor: default; } /* ── Footer File ▾ menu (opens upward) ───────────────────── */ .menu-wrap { position: relative; flex-shrink: 0; } .pop-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 60; display: flex; flex-direction: column; gap: 2px; min-width: 180px; padding: 5px; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); box-shadow: var(--shadow); } .pop-menu[hidden] { display: none; } .menu-item { background: none; border: none; color: var(--text-dim); text-align: left; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 11px; font-family: 'Barlow', sans-serif; cursor: pointer; white-space: nowrap; transition: background 0.1s, color 0.1s; } .menu-item:hover { background: var(--surface3); color: var(--text); } .menu-item svg { vertical-align: -2px; margin-right: 4px; } /* Account-menu cloud storage: usage bar + per-scene cleanup (mirrors gusta-music). */ .storage-meter { height: 7px; margin: 4px 0 6px; border: 1px solid var(--border2); border-radius: 2px; overflow: hidden; background: var(--bg); } .storage-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); transform-origin: left; transform: scaleX(0); } .storage-fill.hot { background: var(--danger); } .storage-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: 12px; } .storage-row .storage-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .storage-row .storage-size { color: var(--text-mut); font-size: 11px; } /* Cloud-scene rows in the File menu: open button fills, delete stays compact. */ .song-row { display: flex; align-items: center; gap: 4px; } .song-row .menu-item { flex: 1; overflow: hidden; text-overflow: ellipsis; } .menu-sep { height: 1px; background: var(--border); margin: 4px 2px; } /* ── Footer icon buttons (Claude / Note / Ref) ───────────── */ .footer-sep { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; } .icon-btn { background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); width: 30px; height: 28px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.12s, border-color 0.12s, color 0.12s; } .icon-btn:hover { background: var(--surface3); border-color: var(--border2); color: var(--text); } .icon-btn.is-active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } .icon-btn svg { width: 16px; height: 16px; display: block; } .status { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; /* let the status text shrink before the buttons do */ flex: 1; /* fill the middle so the Claude control pins right */ padding: 0 12px; text-align: right; } /* Agent co-working entry — the single, understated AI control on the right. A faint accent tint marks it without letting it compete with the tools. */ .agent-btn { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } .agent-btn:hover { border-color: var(--accent); color: var(--accent); } .agent-btn.is-active { background: var(--accent-bg); border-color: var(--accent); } /* Right-anchored pop menu (Claude), so it doesn't overflow the window edge */ .pop-menu-right { left: auto; right: 0; } /* ── Scrollbars ──────────────────────────────────────────── */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--border2); background-clip: padding-box; } /* ── Header inputs ──────────────────────────────────────── */ .header-input { width: 52px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 5px 6px; border-radius: 4px; font-size: 11px; font-family: 'Barlow', sans-serif; text-align: center; } .header-input:focus { outline: none; border-color: var(--accent); } /* ── Line drawing ────────────────────────────────────────── */ /* is-active is the single canonical "this tool/button is the active mode" state, shared by header tool buttons (.tool-btn) and rail tools (.shape-btn). */ .shape-btn.is-active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); } /* Active tool's icon picks up the accent too, matching header tool buttons */ .shape-btn.is-active .shape-icon { color: var(--accent); } #canvas.line-mode { cursor: crosshair; } #measure-bar { display: none; position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); background: rgba(26,26,30,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border2); border-radius: var(--radius); padding: 7px 12px; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); z-index: 10; white-space: nowrap; box-shadow: var(--shadow); } #measure-bar.visible { display: flex; } .mb-label { color: var(--accent); font-weight: 600; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.5px; } .mb-sep { color: var(--border); } #mb-input { width: 72px; background: var(--surface2); border: 1px solid var(--accent); color: var(--text); padding: 4px 7px; border-radius: 4px; font-size: 12px; font-family: 'Barlow', sans-serif; text-align: center; } #mb-input:focus { outline: none; } .mb-btn { background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); padding: 4px 9px; border-radius: 4px; font-size: 11px; font-family: 'Barlow', sans-serif; cursor: pointer; transition: all 0.12s; } .mb-btn:hover { border-color: var(--accent); color: var(--text); } .mb-btn.mb-done { border-color: var(--accent); color: var(--accent); } .mb-btn.mb-done:hover { background: var(--accent-bg); } #mb-live { color: var(--text); font-weight: 500; min-width: 60px; } /* ── Negative / subtractive objects ─────────────────────── */ .object-item.negative { border-color: #3a0a0a !important; } .negative-badge { display: inline-block; background: var(--danger); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px; letter-spacing: 0.5px; vertical-align: middle; margin-left: 4px; } /* ── Push / Pull mode ────────────────────────────────────── */ #canvas.pushpull-mode { cursor: cell; } /* ── Push-pull measurement overlay ──────────────────────── */ #pp-label { display: none; position: absolute; background: rgba(12,12,12,0.9); border: 1px solid var(--accent); border-radius: 4px; padding: 3px 8px; font-size: 11px; font-weight: 600; color: var(--accent); pointer-events: none; z-index: 20; white-space: nowrap; } #pp-label.visible { display: block; } /* One-time coachmark for the grouped tool rail */ #rail-coach { position: fixed; left: 62px; top: 150px; width: 210px; background: var(--surface2); border: 1px solid var(--accent); border-radius: 8px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 49; } #rail-coach strong { display: block; font-size: 12px; color: var(--text); margin-bottom: 5px; } #rail-coach p { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin: 0 0 10px; } #rail-coach b { color: var(--text); font-weight: 600; } #rail-coach .export-btn { width: 100%; padding: 6px; } /* Little arrow pointing left toward the rail */ #rail-coach .coach-arrow { position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; background: var(--surface2); border-left: 1px solid var(--accent); border-bottom: 1px solid var(--accent); transform: rotate(45deg); } /* Inference hint chip — sits just above the measure bar while drawing */ #infer-hint { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%) translateY(6px); background: rgba(12,12,14,0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--border2); border-radius: 999px; padding: 3px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; color: #cfd6e4; pointer-events: none; white-space: nowrap; opacity: 0; z-index: 21; transition: opacity 0.1s, transform 0.1s; } #infer-hint.on { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Reference panel ─────────────────────────────────────── */ #ref-panel { display: none; position: absolute; left: 8px; bottom: 8px; width: 230px; background: rgba(28,28,33,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border2); border-radius: var(--radius); flex-direction: column; z-index: 30; box-shadow: var(--shadow); } #ref-panel.visible { display: flex; } #ref-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--border); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); } #ref-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; } #ref-close:hover { color: var(--text); } #ref-body { padding: 9px 11px 11px; } .ref-label { display: block; font-size: 10px; color: var(--text-dim); margin: 8px 0 3px; letter-spacing: 0.3px; } .ref-field { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 5px 7px; border-radius: 4px; font-size: 11px; font-family: 'Barlow', sans-serif; } .ref-field:focus { outline: none; border-color: var(--accent); } /* ── Claude chat panel (co-working bridge) ───────────────── */ #chat-panel { display: none; position: absolute; right: 12px; bottom: 12px; width: 330px; max-width: calc(100% - 24px); height: 440px; max-height: calc(100% - 24px); background: rgba(26,26,30,0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border2); border-radius: var(--radius); flex-direction: column; z-index: 30; box-shadow: 0 4px 24px rgba(0,0,0,0.5); transition: height 0.18s ease, width 0.18s ease; } #chat-panel.visible { display: flex; } /* Docked: snap full-height to the right edge, abutting the properties panel. */ #chat-panel.docked { top: 0; right: 0; bottom: 0; width: 340px; height: auto; border-radius: 0; border-top: none; border-right: none; border-bottom: none; box-shadow: -6px 0 24px rgba(0,0,0,0.45); } /* Minimized: collapse to just the header bar. */ #chat-panel.minimized #chat-msgs, #chat-panel.minimized #chat-busy, #chat-panel.minimized #chat-input-row { display: none; } #chat-panel.minimized { height: auto; bottom: 12px; } #chat-panel.docked.minimized { top: auto; height: auto; } #chat-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; border-bottom: 1px solid var(--border); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); cursor: default; } /* Panel title: "Gusta" + a dim provider sub-label (Gusta Cloud / local model). */ #chat-head > span:first-child { text-transform: none; letter-spacing: .02em; color: var(--text); font-family: 'Barlow', sans-serif; } #chat-head > span:first-child strong { font-weight: 700; } #chat-provider-label { font-weight: 400; font-size: 10px; color: var(--text-dim); margin-left: 2px; } /* Pulse the title dot while Gusta is working so the panel never looks frozen. */ #chat-panel.busy #chat-head > span:first-child::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); animation: chat-pulse 1s ease-in-out infinite; } /* Live API-cost readout: "this run · Σ session total". Sits next to the title. */ .chat-cost { margin-left: 8px; font-family: 'Barlow', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-dim); cursor: pointer; white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .chat-cost:hover { color: var(--accent); } /* Provider + model selector row, under the header */ #chat-model-row { display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-bottom: 1px solid var(--border); } #chat-model-row select { background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 4px 6px; border-radius: 4px; cursor: pointer; height: 26px; } #chat-provider { flex: 0 0 auto; } #chat-model, #chat-ollama-model { flex: 1 1 auto; min-width: 0; } /* model name gets the room */ #chat-model-row select:hover { border-color: var(--border2); } #chat-model-row select:focus { outline: none; border-color: var(--accent); } .chat-hbtn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 4px; } .chat-hbtn:hover { color: var(--text); background: var(--surface2); } /* Kit-mode toggle — a small pill in the chat header */ .chat-toggle { margin-right: 8px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); font-family: 'Barlow', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 2px 7px; border-radius: 4px; cursor: pointer; } .chat-toggle:hover { color: var(--text); border-color: var(--border2); } .chat-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } /* Dock picker — one click sets an explicit position (no blind cycling) */ .chat-dockpick { display: inline-flex; gap: 1px; } .chat-dockpick button.is-active { color: var(--accent); } #chat-msgs { flex: 1; overflow-y: auto; padding: 9px; display: flex; flex-direction: column; gap: 6px; font-size: 11px; } .chat-msg { padding: 6px 9px; border-radius: 7px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-width: 92%; } .chat-user { background: var(--accent-bg); border: 1px solid rgba(79,216,245,0.28); align-self: flex-end; } .chat-claude { background: var(--surface2); border: 1px solid var(--border); align-self: flex-start; } .chat-info { color: var(--text-dim); font-style: italic; align-self: center; font-size: 10px; text-align: center; } /* Live bubble while tokens stream in — replaced by the final push()ed message. */ .chat-streaming { opacity: 0.75; } #chat-busy { display: none; align-items: center; gap: 7px; padding: 6px 11px; font-size: 10px; color: var(--accent); border-top: 1px solid var(--border); background: var(--accent-bg); } #chat-busy.on { display: flex; } #chat-busy-text { font-weight: 600; white-space: nowrap; } #chat-busy-time { color: var(--text-dim); font-variant-numeric: tabular-nums; } #chat-busy-act { margin-left: auto; color: var(--text-dim); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 58%; text-align: right; } /* Flash the action line each time a new action lands — visible proof of life. */ #chat-busy-act.tick { color: var(--accent); font-style: normal; } .chat-spinner { flex-shrink: 0; width: 11px; height: 11px; border: 2px solid var(--accent-bg); border-top-color: var(--accent); border-radius: 50%; animation: chat-spin 0.7s linear infinite; } @keyframes chat-spin { to { transform: rotate(360deg); } } @keyframes chat-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } } #chat-input-row { padding: 8px; border-top: 1px solid var(--border); } #chat-input { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 7px 9px; border-radius: 5px; font-size: 11px; font-family: 'Barlow', sans-serif; } #chat-input:focus { outline: none; border-color: var(--accent); } /* ── Save dialog ─────────────────────────────────────────── */ #save-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50; align-items: center; justify-content: center; } #save-modal.visible { display: flex; } #save-box { width: 360px; max-width: 90vw; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); padding: 16px 16px 14px; box-shadow: var(--shadow); } #save-title { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; } .save-label { display: block; font-size: 10px; color: var(--text-dim); letter-spacing: 0.5px; margin: 9px 0 3px; } .save-field { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 7px 9px; border-radius: 5px; font-size: 12px; font-family: 'Barlow', sans-serif; } .save-field:focus { outline: none; border-color: var(--accent); } #save-hint { font-size: 10px; color: var(--text-dim); margin-top: 8px; line-height: 1.4; } #save-err { font-size: 11px; color: var(--danger); margin-top: 8px; min-height: 0; } #save-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } #save-cancel { padding: 7px 14px; } /* ── Open dialog (bridge-backed file picker) ──────────────── */ #open-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50; align-items: center; justify-content: center; } #open-modal.visible { display: flex; } #open-box { width: 400px; max-width: 90vw; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); padding: 16px 16px 14px; box-shadow: var(--shadow); } #open-title { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; } #open-list { margin-top: 9px; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 5px; background: var(--surface2); } .open-file { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 10px; font-size: 12px; color: var(--text); cursor: pointer; border-bottom: 1px solid var(--border); } .open-file:last-child { border-bottom: none; } .open-file:hover { background: var(--accent); color: #fff; } .open-file .open-file-meta { font-size: 10px; color: var(--text-dim); flex-shrink: 0; } .open-file:hover .open-file-meta { color: rgba(255,255,255,0.8); } .open-file-empty { padding: 14px 10px; font-size: 11px; color: var(--text-dim); font-style: italic; } #open-hint { font-size: 10px; color: var(--text-dim); margin-top: 8px; line-height: 1.4; } #open-err { font-size: 11px; color: var(--danger); margin-top: 8px; min-height: 0; } #open-cancel, #open-refresh { padding: 7px 14px; } /* ── Drag-and-drop overlay ────────────────────────────────── */ #drop-overlay { display: none; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; background: rgba(10,12,16,0.72); pointer-events: none; } #drop-overlay.visible { display: flex; } #drop-box { text-align: center; padding: 40px 64px; border: 2px dashed var(--accent); border-radius: 14px; background: rgba(74,158,255,0.08); } #drop-icon { font-size: 52px; line-height: 1; color: var(--accent); margin-bottom: 14px; } #drop-text { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); } #drop-sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; letter-spacing: 0.5px; } /* ── Profile wizard ──────────────────────────────────────── */ #pw-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 60; align-items: center; justify-content: center; } #pw-modal.visible { display: flex; } #pw-box { width: 480px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); padding: 16px 16px 14px; box-shadow: var(--shadow); } #pw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } #pw-title { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); } #pw-steps { display: flex; gap: 6px; } .pw-step { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); } .pw-step.done { color: var(--accent); border-color: var(--accent); } .pw-step.active { color: #0c0c0e; background: var(--accent); border-color: var(--accent); } #pw-sub { font-size: 10px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.4; } #pw-stage { position: relative; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } #pw-svg { display: block; width: 100%; height: auto; background: #101015; } .pw-axis { position: absolute; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); pointer-events: none; } #pw-axis-x { right: 8px; bottom: 6px; } #pw-axis-y { left: 6px; top: 6px; } #pw-svg .pw-poly { fill: rgba(79,216,245,0.12); stroke: var(--accent); stroke-width: 1.5; } #pw-svg .pw-poly-bad { fill: rgba(255,90,90,0.10); stroke: var(--danger); } #pw-svg .pw-cross { stroke: var(--danger); stroke-width: 2.5; pointer-events: none; } #pw-svg .pw-vert { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; cursor: grab; } #pw-svg .pw-vert:hover { fill: var(--accent); } #pw-svg .pw-vert.dragging { cursor: grabbing; fill: var(--accent); } #pw-svg .pw-edge-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: copy; } #pw-err { font-size: 11px; color: var(--danger); margin-top: 8px; min-height: 14px; } #pw-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; } #pw-cancel, #pw-reset, #pw-back, #pw-next { padding: 7px 14px; } /* ── Toggle row in props panel ───────────────────────────── */ .toggle-row { display: flex; align-items: center; gap: 7px; margin-top: 7px; } .toggle-row input[type=checkbox] { accent-color: var(--danger); width:13px; height:13px; cursor:pointer; flex-shrink:0; } .toggle-row label { font-size: 10px; color: var(--text-dim); cursor: pointer; line-height: 1.3; } /* ── Command palette (Ctrl+K) — spec-driven access to every tool ── */ .palette-backdrop { position: fixed; inset: 0; z-index: 200; display: none; justify-content: center; align-items: flex-start; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); } .palette-backdrop.is-open { display: flex; } .palette { margin-top: 9vh; width: min(560px, 92vw); max-height: 74vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .palette-search { padding: 12px 14px; border: none; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; outline: none; } .palette-search::placeholder { color: var(--text-mut); } .palette-list { overflow-y: auto; padding: 4px; } .palette-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; min-width: 0; } .palette-row:hover { background: var(--surface2); } .palette-row.is-active { background: var(--accent-bg); } .palette-row-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; } .palette-row.is-active .palette-row-name { color: var(--accent); } .palette-row-sum { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .palette-form { display: flex; flex-direction: column; overflow-y: auto; padding: 10px 14px 14px; } .palette-form-head { display: flex; align-items: center; gap: 8px; } .palette-back { border: 1px solid var(--border); background: var(--surface2); color: var(--text-dim); border-radius: var(--radius-sm); cursor: pointer; padding: 2px 8px; font-size: 12px; } .palette-back:hover { background: var(--surface3); color: var(--text); } .palette-form-title { font-size: 14px; font-weight: 700; color: var(--accent); } .palette-summary { font-size: 11px; color: var(--text-dim); line-height: 1.45; margin: 8px 0 4px; } .palette-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .palette-field { display: flex; flex-direction: column; gap: 3px; } .palette-field-name { font-size: 11px; font-weight: 600; color: var(--text); } .palette-field-hint { font-size: 10px; color: var(--text-mut); line-height: 1.4; } .palette-field input, .palette-field textarea, .palette-field select { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: 12px; padding: 5px 8px; outline: none; font-family: ui-monospace, monospace; resize: vertical; } .palette-field input:focus, .palette-field textarea:focus, .palette-field select:focus { border-color: var(--accent-dim); } .palette-field .is-invalid, .palette-field input.is-invalid, .palette-field textarea.is-invalid { border-color: var(--danger); background: var(--danger-bg); } .palette-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .palette-run { border: none; border-radius: var(--radius-sm); cursor: pointer; background: var(--accent); color: #16160a; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 18px; } .palette-run:hover { background: var(--accent-dim); } .palette-run:disabled { opacity: 0.5; cursor: default; } .palette-hint { font-size: 10px; color: var(--text-mut); } .palette-result { margin: 10px 0 0; padding: 8px 10px; max-height: 220px; overflow: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .palette-result.is-error { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); } .palette-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .palette-images img { max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); } /* ── Touch & small screens (phone 390px / iPad 1024px) ───────────── */ /* Gestures must reach the app, not scroll/zoom the page. OrbitControls sets touch-action:none itself; this covers it before the module loads. */ #canvas { touch-action: none; -webkit-touch-callout: none; } .props-resize-handle, .props-split-handle { touch-action: none; } /* Fixed-width floaters may never exceed the screen. */ .float-panel, #scene-panel, #ref-panel, #drill-panel, #section-menu, .settings-menu, .pop-menu, #chat-panel, #chat-panel.docked { max-width: calc(100vw - 24px); } .settings-menu { max-height: calc(100dvh - var(--header-h) - 24px); overflow-y: auto; } #save-box, #open-box, #pw-box { max-height: calc(100dvh - 24px); overflow-y: auto; } #measure-bar { max-width: calc(100% - 12px); overflow-x: auto; } @media (max-width: 700px) { .main { position: relative; } /* Side panels become overlays so the canvas keeps its real estate. Properties still auto-collapses to its 22px reveal tab when nothing is selected; the scene dock starts closed (gusta3d.js). */ .props-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 40; box-shadow: var(--shadow); } #scene-panel.docked { position: absolute; top: 0; left: 0; bottom: 0; z-index: 40; height: auto; box-shadow: var(--shadow); border-right: 1px solid var(--border); } header { padding: 6px 8px; gap: 4px 8px; } footer { padding: 4px 8px; gap: 4px 8px; } } /* Ribbon: one horizontally-scrollable row instead of a tall wrap — on any narrow window, and on touch screens up to iPad landscape (whose bigger coarse-pointer buttons no longer fit on one wrapped line). (The header keeps wrapping — its dropdown menus must not be clipped.) */ @media (max-width: 700px), (pointer: coarse) and (max-width: 1100px) { /* COMPACT RIBBON: only the active tab's tools stay inline (they scroll if needed); everything else — transform / plane / snap / panels — folds into the "⋯" overflow popover so the bar no longer needs long sliding. */ .ribbon-bar { flex-wrap: nowrap; overflow: visible; position: relative; gap: 6px; } .ribbon-panels { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; } .ribbon-panel { flex-wrap: nowrap; flex: none; } .ribbon-overflow { display: flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 40px; align-self: center; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); cursor: pointer; font-size: 20px; line-height: 1; } .ribbon-overflow[aria-expanded="true"] { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } /* The context strip becomes a dropdown anchored below the "⋯" button. */ .ribbon-context { display: none; position: absolute; top: calc(100% + 4px); right: 6px; z-index: 45; flex-direction: column; align-items: stretch; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; max-width: calc(100vw - 24px); max-height: calc(100dvh - var(--header-h) - 24px); overflow-y: auto; } .ribbon-context.open { display: flex; } .ribbon-context .ribbon-group { flex-wrap: wrap; } .ribbon-context .ribbon-group + .ribbon-group { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 8px; } } @media (pointer: coarse) { /* Finger-sized targets for the primary chrome (≈40px min). */ .ribbon-btn { min-width: 62px; padding: 8px 10px; gap: 4px; } .ribbon-tab { padding: 10px 13px 9px; } .tool-btn, .ribbon-toggle { padding: 9px 12px; } .export-btn { padding: 10px 15px; } .menu-item { padding: 10px 12px; } .icon-btn { width: 40px; height: 38px; } #kbd-toggle { width: 38px; height: 38px; } .props-pin { padding: 7px 8px; } .props-panel.collapsed { width: 30px; min-width: 30px; } .props-resize-handle { width: 14px; } .props-split-handle { height: 12px; } .scene-tab { padding: 10px 12px 11px; } .header-select, .fp-input { padding: 8px; } /* The hint describes mouse bindings — wrong and wasted space on touch. */ .vp-hint { display: none; } }