:root {
    --primary-color: #9146FF;
    --secondary-color: #202123;
    --background-color: #FFFFFF;
    --text-color: #353740;
    --accent-color: #6E6E80;
    --user-message-bg: #f7f7f8;
    --system-message-bg: #ffffff;
    --border-color: #e5e5e5;
    /* One shared height + background for chat / code / viewer top bars */
    --app-column-header-height: 44px;
    --app-column-header-bg: #f7f7f8;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-color);
    background-color: var(--background-color);
    user-select: text;
    -webkit-user-select: text;
    overflow: revert;
}

#app {
    min-height: 100vh;
    width: 100%;
}

/* App Container - Split Layout */
.app-container {
    display: flex;
    height: 100vh;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

/* ===== New app shell: activity bar | left panel | viewer | copilot ======== */
.activity-bar {
    flex: 0 0 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 6px;
    background: #ffffff;
    border-right: 1px solid var(--border-color);
    overflow: hidden;
}
.activity-bar-group { display: flex; flex-direction: column; align-items: center; }
/* Logo fills the editor-header band so the first icon below it lines up with the
   editor's tab strip. Sits flush in the top-left corner. */
.activity-bar-logo {
    width: 48px;
    height: var(--app-column-header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.activity-bar-logo img { width: 22px; height: 22px; object-fit: contain; }
.activity-bar-btn {
    width: 48px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--accent-color);
    cursor: pointer;
    border-left: 2px solid transparent;
}
.activity-bar-btn .codicon { font-size: 20px; }
.activity-bar-btn:hover { color: var(--text-color); }
.activity-bar-btn.is-active { color: var(--primary-color); border-left-color: var(--primary-color); }

/* Left panel holds EITHER the code editor or the explorer (overlaid). */
.left-panel {
    flex: 0 0 440px;
    min-width: 220px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    overflow: hidden;
}

/* Vertical splitter between columns (drag to resize). */
.col-resize {
    flex: 0 0 5px;
    align-self: stretch;
    cursor: col-resize;
    background: transparent;
    z-index: 6;
    touch-action: none;
}
.col-resize:hover { background: var(--primary-color); opacity: 0.35; }
.left-panel > .code-editor-panel {
    flex: 1;
    min-height: 0;
    border-right: none; /* the left-panel owns the divider now */
}
.left-panel-explorer,
.left-panel-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    background: #f7f7f8;
}
.left-panel-explorer .project-explorer {
    flex: 1;
    width: 100%;
    max-width: none;
    border-right: none;
}
/* Variables view fills the left panel (it was a fixed-width viewer side panel). */
.left-panel-variables { background: var(--background-color); }
.left-panel-variables .variable-tree-panel {
    flex: 1;
    width: 100%;
    max-width: none;
    border: none;
    box-shadow: none;
}
.left-panel-empty {
    margin: auto;
    padding: 16px;
    text-align: center;
    color: var(--accent-color);
    font-size: 13px;
}

/* Collapsible AI copilot column on the right. */
.copilot-col {
    flex: 0 0 380px;
    min-width: 260px;
    height: 100%;
    display: flex;
    border-left: 1px solid var(--border-color);
    overflow: hidden;
}
.copilot-col.is-collapsed {
    flex-basis: 0;
    min-width: 0;
    width: 0;
    border-left: none;
}
/* Hidden copilot: a slim strip on the right edge, where the panel lives, with
   the button that brings it back (hiding is the chevron in the chat header). */
.copilot-rail {
    flex: 0 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background: var(--app-column-header-bg);
    border-left: 1px solid var(--border-color);
}

.copilot-rail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: var(--app-column-header-height);
    border: none;
    background: transparent;
    color: var(--primary-color);
    cursor: pointer;
}

.copilot-rail-btn .codicon { font-size: 18px; }
.copilot-rail-btn:hover { background: rgba(145, 70, 255, 0.10); }

.copilot-col .chat-panel {
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-right: none;
}

.init-error {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    padding: 8px 12px;
    background: #c62828;
    color: white;
    font-size: 13px;
}

/* Chat Panel - Left Side (narrower in 3-col layout) */
.chat-panel {
    flex: 0 0 28%;
    min-width: 260px;
    max-width: 35%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    background: white;
    overflow: hidden;
}

/* Code Editor Panel - Middle Column */
.code-editor-panel {
    flex: 0 1 30%;
    min-width: 240px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    background: var(--background-color);
    overflow: hidden;
    position: relative;
}

.code-editor-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: var(--app-column-header-height);
    min-height: var(--app-column-header-height);
    padding: 0 14px;
    box-sizing: border-box;
    background: var(--app-column-header-bg);
    border-bottom: 1px solid var(--border-color);
}

.code-editor-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
}

.code-editor-title svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

/* Explorer toggle in the editor header (borderless, compact). */
.explorer-toggle-btn {
    width: 26px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--accent-color);
    margin-right: 2px;
}

.explorer-toggle-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.07);
    color: var(--text-color);
}

.explorer-toggle-btn[aria-pressed="true"] {
    color: var(--primary-color);
}

.explorer-toggle-btn .codicon {
    font-size: 16px;
}

/* Editor tab strip (VSCode-style), shown above the Monaco editor. */
.editor-tabs {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    height: 34px;
    min-height: 34px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #f3f3f4;
    border-bottom: 1px solid var(--border-color);
    scrollbar-width: thin;
}

.editor-tabs::-webkit-scrollbar {
    height: 6px;
}

.editor-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px 0 12px;
    max-width: 200px;
    border-right: 1px solid var(--border-color);
    background: transparent;
    color: var(--accent-color);
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    border-top: 2px solid transparent;
}

.editor-tab:hover {
    background: rgba(0, 0, 0, 0.04);
}

.editor-tab.is-active {
    background: var(--background-color);
    color: var(--text-color);
    border-top: 2px solid var(--primary-color);
}

.editor-tab-icon {
    font-size: 14px;
    flex-shrink: 0;
    opacity: 0.85;
}

.editor-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    /* Hidden until hover unless the file is dirty (then the dot shows). */
    visibility: hidden;
}

.editor-tab:hover .editor-tab-close,
.editor-tab.is-dirty .editor-tab-close {
    visibility: visible;
}

.editor-tab-close:hover {
    background: rgba(0, 0, 0, 0.10);
}

.editor-tab-close .codicon {
    font-size: 14px;
}

.editor-tab.is-dirty .editor-tab-close .codicon-circle-filled {
    font-size: 10px;
}

/* Dirty tab: filled dot normally, but reveal the × on hover. */
.editor-tab.is-dirty:hover .editor-tab-close .codicon-circle-filled::before {
    content: "\ea76"; /* codicon-close */
    font-size: 14px;
}

/* ---- Project Explorer (VSCode-style file tree) ---- */
.project-explorer {
    flex: 0 0 220px;
    min-width: 170px;
    max-width: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    background: #f7f7f8;
    overflow: hidden;
    position: relative;
    user-select: none;
}

.pe-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--app-column-header-height);
    min-height: var(--app-column-header-height);
    padding: 0 6px 0 12px;
    background: var(--app-column-header-bg);
    border-bottom: 1px solid var(--border-color);
}

.pe-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-color);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
}

.pe-actions {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.pe-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    border-radius: 5px;
    color: var(--accent-color);
    cursor: pointer;
    padding: 0;
}

.pe-action-btn:hover {
    background: rgba(0, 0, 0, 0.07);
    color: var(--text-color);
}

.pe-action-btn .codicon {
    font-size: 16px;
}

.pe-tree {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0 8px;
}

.pe-row {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding-right: 8px;
    font-size: 13px;
    color: var(--text-color);
    cursor: pointer;
    white-space: nowrap;
}

.pe-row:hover {
    background: rgba(0, 0, 0, 0.05);
}

.pe-row.is-active {
    background: rgba(145, 70, 255, 0.12);
    box-shadow: inset 2px 0 0 var(--primary-color);
}

/* Drag & drop (move) */
.pe-row[draggable="true"] {
    cursor: grab;
}

.pe-row.is-dragging {
    opacity: 0.45;
}

.pe-row.is-drop-target {
    background: rgba(145, 70, 255, 0.18);
    box-shadow: inset 0 0 0 1px var(--primary-color);
    border-radius: 3px;
}

.pe-tree.is-drop-target-root {
    box-shadow: inset 0 0 0 2px rgba(145, 70, 255, 0.45);
    border-radius: 3px;
}

.pe-twisty {
    width: 16px;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--accent-color);
    text-align: center;
}

.pe-twisty-spacer {
    display: inline-block;
}

.pe-icon {
    font-size: 15px;
    flex-shrink: 0;
    color: var(--accent-color);
}

.pe-row .codicon-folder,
.pe-row .codicon-folder-opened {
    color: #c09553;
}

.pe-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inline create / rename input */
.pe-edit-row {
    height: 24px;
}

.pe-edit-input {
    flex: 1;
    min-width: 0;
    height: 20px;
    font-size: 13px;
    font-family: inherit;
    padding: 0 4px;
    border: 1px solid var(--primary-color);
    border-radius: 3px;
    outline: none;
    background: #fff;
    color: var(--text-color);
}

.pe-edit-input.has-error {
    border-color: #c62828;
}

.pe-edit-error {
    color: #c62828;
    font-weight: 700;
    padding: 0 4px;
    cursor: default;
}

/* Inline error message shown under the rename/create input. */
.pe-edit-error-msg {
    color: #c62828;
    font-size: 11px;
    line-height: 1.3;
    padding-top: 2px;
    padding-bottom: 4px;
    padding-right: 8px;
    white-space: normal;
}

/* Context menu */
.pe-context-menu {
    position: fixed;
    z-index: 1000;
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 4px;
}

.pe-ctx-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-color);
    border-radius: 4px;
    cursor: pointer;
}

.pe-ctx-item:hover {
    background: var(--primary-color);
    color: #fff;
}

.pe-ctx-danger {
    color: #c62828;
}

/* Confirm-dialog text buttons (delete confirmation). */
.pe-confirm-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 7px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-color);
    cursor: pointer;
}
.pe-confirm-btn:hover { background: #f3f3f3; }
.pe-confirm-danger {
    background: #c62828;
    border-color: #c62828;
    color: #fff;
}
.pe-confirm-danger:hover { background: #a81f1f; border-color: #a81f1f; }

.pe-ctx-danger:hover {
    background: #c62828;
    color: #fff;
}

.pe-ctx-sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--border-color);
}

/* Upload-new-project zip drop modal */
.pe-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}

.pe-modal {
    width: 420px;
    max-width: 90vw;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    padding: 16px;
    font-family: 'Inter', sans-serif;
}

.pe-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 12px;
}

.pe-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 34px 16px;
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    color: var(--accent-color);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.12s, background 0.12s;
}

.pe-dropzone:hover,
.pe-dropzone.is-over {
    border-color: var(--primary-color);
    background: rgba(145, 70, 255, 0.06);
}

.pe-dropzone.is-busy {
    cursor: default;
    border-style: solid;
}

.pe-dropzone .codicon {
    font-size: 30px;
    color: var(--primary-color);
}

.pe-dropzone-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.pe-dropzone-sub {
    font-size: 12px;
    color: var(--accent-color);
}

.pe-modal-error {
    margin-top: 10px;
    color: #c62828;
    font-size: 12.5px;
}

.pe-modal-note {
    margin-top: 10px;
    color: var(--accent-color);
    font-size: 12px;
}

/* Launch ("program") selector in the editor toolbar.
   Scoped under .code-editor-toolbar so these win over the generic .vsc-btn rules
   (which are defined later in this file and would otherwise force a 30px width). */
.code-editor-toolbar .launch-select-btn {
    flex-shrink: 0;
    width: auto;
    max-width: 200px;
    height: 28px;
    padding: 0 8px;
    gap: 6px;
    display: inline-flex;
    align-items: center;
    background: #f3f3f4;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--text-color);
    margin-right: 4px;
}

.code-editor-toolbar .launch-select-btn:hover:not(:disabled) {
    background: #eaeaec;
    border-color: rgba(0, 0, 0, 0.18);
}

.code-editor-toolbar .launch-select-btn > .codicon:first-child {
    font-size: 14px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.launch-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}

.launch-select-caret {
    font-size: 13px;
    opacity: 0.6;
    flex-shrink: 0;
    margin-left: 1px;
}

.launch-menu {
    position: fixed;
    z-index: 1000;
    max-width: 360px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 4px;
}

.launch-menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 6px 8px;
    font-size: 12.5px;
    color: var(--text-color);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.launch-menu-item:hover {
    background: rgba(145, 70, 255, 0.10);
}

.launch-menu-item.is-active {
    font-weight: 600;
}

.launch-menu-check {
    font-size: 13px;
    width: 14px;
    flex-shrink: 0;
    color: var(--primary-color);
}

.launch-menu-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.launch-menu-empty {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--accent-color);
}

.code-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.vsc-btn {
    width: 30px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #fff;
    border-radius: 6px;
    color: #444;
    cursor: pointer;
    padding: 0;
}

.vsc-btn:hover:not(:disabled) {
    background: #f3f3f4;
}

.vsc-btn.is-active {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.vsc-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.code-toolbar-sep {
    width: 1px;
    height: 18px;
    background: rgba(0, 0, 0, 0.12);
    margin: 0 4px;
}

/* ===== build123d command toolbar (multirow, FreeCAD-style) ===== */
.b123d-toolbar {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 6px 10px;
    background: var(--app-column-header-bg);
    border-bottom: 1px solid var(--border-color);
}

/* Popover-only mode: the launcher buttons moved to the viewer CommandBar, so the
   container takes no space in the editor — it just hosts the (fixed) popover. */
.b123d-toolbar-popover-only {
    padding: 0;
    border-bottom: none;
    background: transparent;
}

.b123d-toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.b123d-toolbar-group-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    font-weight: 600;
    white-space: nowrap;
}

.b123d-toolbar-group-btns {
    display: flex;
    align-items: center;
    gap: 3px;
}

.b123d-cmd-btn {
    height: 26px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #fff;
    border-radius: 6px;
    color: #333;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}

.b123d-cmd-btn:hover:not(:disabled) {
    background: #f3f3f4;
    border-color: var(--primary-color);
}

.b123d-cmd-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Popover anchored to the clicked command button (position: fixed). */
.b123d-popover {
    position: fixed;
    z-index: 1000;
    width: 260px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
}

.b123d-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

.b123d-popover-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.b123d-popover-close {
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 2px;
}

.b123d-popover-close:hover {
    color: #333;
}

/* Tab strip for multi-primitive (tabbed) edit. In edit mode this row REPLACES
 * the title header, so it doubles as the popover's top bar. */
.b123d-popover-tabbar {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border-color);
}

.b123d-popover-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px 0;
    overflow-x: auto;
    /* Horizontal scroll only: overflow-x:auto would otherwise force overflow-y
     * to compute to `auto`, showing a stray vertical scrollbar from the active
     * tab's -1px overlap. */
    overflow-y: hidden;
    flex: 1 1 auto;
    min-width: 0;
    scrollbar-width: thin;
}

.b123d-popover-tabbar-close {
    flex: 0 0 auto;
    align-self: center;
    margin-right: 8px;
}

.b123d-popover-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    max-width: 140px;
    padding: 4px 6px 5px;
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: #f4f4f6;
    color: #666;
    font-size: 11px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    cursor: pointer;
    user-select: none;
}

.b123d-popover-tab:hover {
    background: #ececed;
    color: #333;
}

.b123d-popover-tab.is-active {
    background: #fff;
    color: var(--text-color);
    border-color: var(--border-color);
    font-weight: 600;
    margin-bottom: -1px;
}

.b123d-popover-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b123d-popover-tab-close {
    border: none;
    background: transparent;
    font-size: 14px;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    padding: 0 1px;
    flex: 0 0 auto;
}

.b123d-popover-tab-close:hover {
    color: #d33;
}

.b123d-popover-body {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
}

.b123d-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.b123d-field-label {
    font-size: 12px;
    color: #555;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    white-space: nowrap;
}

.b123d-field-input {
    width: 130px;
    height: 26px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    padding: 0 6px;
    font-size: 12px;
    color: #222;
    background: #fff;
}

.b123d-field-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Expression-capable inputs (numeric fields that also accept variables /
   params / arbitrary Python expressions) render in a monospace face so they
   read like code. */
.b123d-field-expr {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
}

.b123d-field-input-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    width: 130px;
}

.b123d-field-runtime-hint {
    font-size: 10px;
    color: #888;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    align-self: flex-start;
}

.b123d-field-block {
    align-items: flex-start;
}

.b123d-field-block .b123d-field-label {
    padding-top: 4px;
}

.b123d-field-input.is-changed {
    border-color: rgba(145, 70, 255, 0.45);
    background: rgba(145, 70, 255, 0.04);
}

.b123d-reset-all-btn {
    align-self: flex-start;
    border: none;
    background: transparent;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 0 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.b123d-reset-all-btn:hover {
    color: #6b2fd6;
}

.b123d-field-baseline-row {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.b123d-field-baseline-btn {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    text-align: left;
    font-size: 10px;
    color: #888;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    cursor: pointer;
    text-decoration: line-through;
    text-decoration-color: rgba(136, 136, 136, 0.55);
}

.b123d-field-baseline-btn:hover {
    color: var(--primary-color);
    text-decoration-color: rgba(145, 70, 255, 0.45);
}

.b123d-field-reset-btn {
    flex: 0 0 auto;
    width: 22px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    background: #fff;
    color: #666;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.b123d-field-reset-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(145, 70, 255, 0.06);
}

.b123d-field-triple {
    display: flex;
    gap: 4px;
    width: 130px;
}

.b123d-field-third {
    width: 100%;
    min-width: 0;
    padding: 0 2px;
}

/* Dual-mode (structured <-> expression) field controls -------------------- */

/* Wrapper that hangs the `fx` toggle to the right of a structured field. */
.b123d-field-fx-wrap {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.b123d-field-fx-wrap > .b123d-field {
    flex: 1;
    min-width: 0;
}

.b123d-fx-toggle {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    background: #fff;
    color: #888;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    font-style: italic;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    /* Advanced affordance: faded until the row is hovered/focused, to declutter. */
    opacity: 0.25;
    transition: opacity 0.12s ease;
}

.b123d-field-fx-wrap:hover .b123d-fx-toggle,
.b123d-field-fx-wrap:focus-within .b123d-fx-toggle {
    opacity: 1;
}

.b123d-fx-toggle:hover {
    opacity: 1;
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(145, 70, 255, 0.06);
}

/* Expression-mode field: a directly-editable expression input with a
   "materialize" button beside it. The default field wrap is only 130px; let an
   expression field take the remaining width so the input + button fit. */
.b123d-expr-wrap {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    align-items: stretch;
}

.b123d-expr-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.b123d-expr-row .b123d-field-input {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.b123d-expr-edit-btn {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    background: #fff;
    color: #888;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.b123d-expr-edit-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(145, 70, 255, 0.06);
}

/* Raw-arguments escape hatch (first row inside the popover body). */
.b123d-rawargs-toggle-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2px;
}

.b123d-rawargs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #aaa;
    font-size: 10px;
    line-height: 1;
    padding: 3px 6px;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.12s ease;
}

.b123d-rawargs-toggle:hover {
    opacity: 1;
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(145, 70, 255, 0.06);
}

.b123d-rawargs-toggle.is-active {
    opacity: 1;
    border-color: var(--primary-color);
    color: #fff;
    background: var(--primary-color);
}

.b123d-rawargs-icon {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
}

.b123d-rawargs {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.b123d-rawargs-call {
    display: flex;
    align-items: center;
    gap: 2px;
}

.b123d-rawargs-paren {
    color: #888;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
}

.b123d-rawargs-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* Small "fx" badge shown next to an expression-mode field's label. */
.b123d-field-expr-badge {
    margin-left: 4px;
    padding: 0 4px;
    border: 1px solid rgba(145, 70, 255, 0.4);
    border-radius: 3px;
    color: var(--primary-color);
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-style: italic;
    font-size: 9px;
    vertical-align: middle;
}

.b123d-field-expr-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

.b123d-field-expr-readout {
    font-size: 10px;
    color: #2e7d32;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

.b123d-field-expr-convert {
    border: none;
    background: transparent;
    color: var(--primary-color);
    font-size: 10px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline dotted;
}

.b123d-field-expr-convert:hover {
    text-decoration: underline;
}

/* Whole-command "raw code" escape hatch. */
.b123d-popover-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.b123d-popover-code-toggle {
    width: 24px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #aaa;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.12s ease;
}

.b123d-popover-code-toggle:hover {
    opacity: 1;
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(145, 70, 255, 0.06);
}

.b123d-popover-code-toggle.is-active {
    opacity: 1;
    border-color: var(--primary-color);
    color: #fff;
    background: var(--primary-color);
}

.b123d-rawcmd {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.b123d-rawcmd-label {
    font-size: 11px;
    color: #555;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.b123d-rawcmd-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 60px;
    padding: 6px;
    line-height: 1.4;
}

.b123d-rawcmd-hint {
    font-size: 10px;
    color: #888;
}

.b123d-location-point {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.b123d-location-point-label {
    flex: 0 0 20px;
    font-size: 11px;
    color: var(--text-muted, #888);
}

/* A point that is itself an expression (e.g. `l4 @ 1`) occupies the same
   footprint as the structured x/y[/z] triple so mixed rows stay aligned. */
.b123d-location-point-expr {
    width: 130px;
    min-width: 0;
}

.b123d-location-point-remove {
    flex: 0 0 22px;
    height: 22px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: #fff;
    color: #888;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.b123d-location-point-remove:hover {
    color: #c62828;
    border-color: #c62828;
}

.b123d-location-point-add {
    align-self: flex-start;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    background: transparent;
    color: var(--primary-color);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 8px;
}

.b123d-advanced-toggle {
    align-self: flex-start;
    border: none;
    background: transparent;
    color: var(--primary-color);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 0;
}

.b123d-face-pick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.b123d-enum-pick {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.b123d-enum-pick > select {
    flex: 1;
    min-width: 0;
}

.b123d-face-pick-text {
    flex: 1;
    font-size: 11px;
    line-height: 1.3;
    color: var(--accent-color);
}

.b123d-face-pick-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(145, 70, 255, 0.25);
    border-radius: 8px;
    background: linear-gradient(180deg, #faf7ff 0%, #f3ecff 100%);
    color: var(--primary-color);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(70, 20, 130, 0.06);
    transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease,
        box-shadow 0.12s ease, border-color 0.12s ease;
}

.b123d-face-pick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
}

.b123d-face-pick-btn:hover {
    background: linear-gradient(180deg, #f6efff 0%, #ece0ff 100%);
    border-color: rgba(145, 70, 255, 0.5);
    box-shadow: 0 2px 8px rgba(145, 70, 255, 0.2);
    transform: translateY(-1px);
}

.b123d-face-pick-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(145, 70, 255, 0.18);
}

.b123d-face-pick-btn.is-active {
    background: linear-gradient(180deg, #9d57ff 0%, #8636ff 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(145, 70, 255, 0.4);
    animation: b123d-face-pick-pulse 1.6s ease-in-out infinite;
}

@keyframes b123d-face-pick-pulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(145, 70, 255, 0.35); }
    50% { box-shadow: 0 2px 16px rgba(145, 70, 255, 0.6); }
}

.b123d-popover-preview {
    margin: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    background: #f7f7f8;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 11px;
    color: #1e6bb8;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 160px;
    overflow-y: auto;
}

/* Runtime-preview control (insert mode), left of Cancel / Insert in the footer:
   a quiet "Preview at Lnn" button, or a status chip once the program is paused. */
.b123d-runto {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    margin-right: auto;
}

.b123d-runto-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 22px;
    padding: 0 9px 0 8px;
    border-radius: 999px;
    background: #f1f1f3;
    color: #666;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.b123d-runto-at .b123d-runto-chip {
    background: #e9f6ee;
    color: #23693f;
}

.b123d-runto-running .b123d-runto-chip {
    background: rgba(145, 70, 255, 0.08);
    color: #6b2fd6;
}

.b123d-runto-at.is-error .b123d-runto-chip {
    background: #fdf3e3;
    color: #8a5a12;
}

.b123d-runto-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #b8b8bd;
}

.b123d-runto-running .b123d-runto-dot {
    background: #9146ff;
    animation: b123d-runto-blink 0.9s ease-in-out infinite;
}

.b123d-runto-at .b123d-runto-dot {
    background: #2e9e5b;
    animation: b123d-runto-live 1.8s ease-out infinite;
}

.b123d-runto-at.is-error .b123d-runto-dot {
    background: #d08a1f;
    animation: none;
}

@keyframes b123d-runto-blink {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

@keyframes b123d-runto-live {
    0% { box-shadow: 0 0 0 0 rgba(46, 158, 91, 0.5); }
    70%, 100% { box-shadow: 0 0 0 4px rgba(46, 158, 91, 0); }
}

.b123d-runto-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(145, 70, 255, 0.25);
    background: rgba(145, 70, 255, 0.06);
    color: #6b2fd6;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* Beat the codicon font shorthand (16px) with a more specific selector. */
.b123d-runto-btn .codicon[class*='codicon-'] {
    font-size: 13px;
}

.b123d-runto-btn:hover {
    background: #9146ff;
    border-color: #9146ff;
    color: #fff;
}

.b123d-runto-btn:active {
    background: #7d34ea;
}

.b123d-runto-btn.is-compact {
    width: 22px;
    padding: 0;
    justify-content: center;
}

.b123d-runto-missed .b123d-runto-btn,
.b123d-runto-failed .b123d-runto-btn {
    color: #9a6a1a;
    border-color: rgba(208, 138, 31, 0.35);
    background: #fdf6ea;
}

.b123d-runto-missed .b123d-runto-btn:hover,
.b123d-runto-failed .b123d-runto-btn:hover {
    background: #d08a1f;
    border-color: #d08a1f;
    color: #fff;
}

/* One sentence under the footer: what the preview button does, or what the
   preview is showing. Quiet, wraps, sits flush with the footer above it. */
.b123d-runto-caption {
    margin-top: -2px;
    padding: 0 12px 9px;
    font-size: 11px;
    line-height: 1.4;
    color: #85858c;
}

.b123d-runto-caption.is-error {
    color: #9a6a1a;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 10.5px;
    word-break: break-word;
}

.b123d-popover-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
}

.b123d-popover-btn {
    height: 28px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid transparent;
}

.b123d-popover-btn-secondary {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.15);
    color: #444;
}

.b123d-popover-btn-secondary:hover {
    background: #f3f3f4;
}

.b123d-popover-btn-primary {
    background: #1e6bb8;
    color: #fff;
}

.b123d-popover-btn-primary:hover {
    background: #1a5a9e;
}

.code-toolbar-status {
    margin-left: 8px;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.code-run-btn {
    /* Run button is now an icon button; keep selector for Ctrl/Cmd+Enter click binding */
}

@keyframes code-spin {
    to { transform: rotate(360deg); }
}
.code-run-spinner {
    animation: code-spin 1s linear infinite;
}

.code-editor-body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Top row: Monaco editor (grows); bottom row: debug console */
.code-editor-monaco-row {
    flex: 1 1 0;
    min-height: 140px;   /* editor never collapses below this */
    min-width: 0;
    position: relative;
    z-index: 1;          /* below the bottom dock (which is z-index: 2) */
    display: flex;
    flex-direction: column;
}

/* Monaco fills the middle column; flex children need min-width 0 to avoid overflow glitches */
.code-editor-monaco-outer {
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    position: relative;
}

.monaco-editor-mount {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* editor.main.css positions .monaco-editor; keep it pinned to the mount box */
.monaco-editor-mount .monaco-editor {
    box-sizing: border-box;
}

/* Remove extra grey line/gutter between text and scrollbar (overview ruler + shadows) */
.monaco-editor-mount .decorationsOverviewRuler,
.monaco-editor-mount .monaco-editor .decorationsOverviewRuler {
    display: none !important;
    width: 0 !important;
}

.monaco-editor-mount .monaco-scrollable-element > .scrollbar.vertical {
    box-shadow: none !important;
}

.monaco-editor-mount .monaco-scrollable-element > .scrollbar.vertical .slider {
    border-left: none;
}

/* Build123d debug REPL (second row in code column) */
/* VS Code-style bottom panel: fixed (drag-resizable) height below the editor with
   an always-visible tab bar; content scrolls inside, never overlapping the editor. */
.code-bottom-panel {
    flex: 0 0 auto;
    /* Hard cap, independent of the JS height: the dock can never grow past the editor
       body minus a minimum editor area. Even if the dragged height is huge, CSS clamps
       it here, so the editor always stays visible and the panel can never slide under
       the editor's white background. */
    max-height: calc(100% - 140px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fafafa;
    border-top: 1px solid var(--border-color);
    /* Sit above the editor row so the panel is always painted on top. */
    position: relative;
    z-index: 2;
}
.code-bottom-resize {
    flex-shrink: 0;
    height: 7px;
    margin-top: -3px;        /* extend the grab zone up over the border seam */
    cursor: row-resize;
    background: transparent;
    position: relative;
    z-index: 3;
    touch-action: none;      /* let pointer drag work without scroll/gestures */
}
.code-bottom-resize:hover {
    background: var(--primary-color);
    opacity: 0.35;
}
.code-bottom-tabs {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 30px;
    padding: 0 6px;
    background: #f3f3f3;
    border-bottom: 1px solid #eee;
}
.code-bottom-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* The strip is a single 30px row, so labels must not wrap. Two-word tabs
       ("Run output", "Debug console") and a trailing count both broke onto a
       second line and were squeezed by the fixed height. */
    white-space: nowrap;
    border: none;
    background: transparent;
    color: #888;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0 6px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.code-bottom-tab.is-active {
    color: var(--text-color);
    border-bottom-color: var(--primary-color);
}
/* Count beside a tab label: present but clearly secondary, so the label stays
   the thing you read. */
.code-bottom-tab-count {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.18);
    color: inherit;
    opacity: 0.85;
}
.code-bottom-tabs-spacer { flex: 1; }
.code-bottom-clear {
    align-self: center;
    margin-right: 6px;
    border: none;
    background: transparent;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.code-bottom-clear:hover { background: rgba(145, 70, 255, 0.1); }
.code-bottom-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Debug variables tab — fill and scroll on its own. */
.code-debug-vars-pane {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 8px 12px;
}
/* Object-variables tab: the relocated viewer panel fills the whole tab. */
.code-objvars-pane {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Feature-tree tab: the relocated execution-tree panel fills the whole tab. */
.code-feature-tree-pane {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* In the dock the panel sits on a light surface (not the glass canvas overlay):
   drop the overlay's text-shadow so labels stay crisp, and let it fill. */
.code-feature-tree-pane .execution-tree-panel {
    flex: 1;
    min-height: 0;
    width: 100%;
    background: transparent;
}
.code-feature-tree-pane .execution-tree-header {
    text-shadow: none;
    padding: 6px 12px 2px;
}
.code-objvars-pane .variable-tree-panel {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: none;
    border: none;
    box-shadow: none;
    background: transparent;
}
/* The tab already labels this "Variables" — keep the OBJECTS row flush (no grey
   band) so toggling Run doesn't add a second header strip. */
.code-objvars-pane .variable-tree-header {
    background: transparent;
    border-bottom: none;
    padding: 8px 12px 2px;
}
/* Let the tree fill the tab (the bundle caps it at 22vh for the old layout) and
   let THIS pane do the scrolling, not a nested box. */
.code-debug-vars-pane .panel-body {
    max-height: none;
    overflow: visible;
    padding: 0;
}
.code-debug-vars-empty {
    padding: 8px 12px;
    color: #888;
    font-size: 12px;
}
/* In the debug pane the pane already provides the 12px inset. */
.code-debug-vars-pane .code-debug-vars-empty {
    padding-left: 0;
    padding-right: 0;
}

.code-debug-console {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: min(40vh, 360px);
    min-height: 160px;
    max-height: min(48vh, 440px);
    overflow: hidden; /* the panel is fixed-height; content scrolls INSIDE it */
    border-top: 1px solid var(--border-color);
    background: #fafafa;
}

/* Fills the console below the toolbar and re-establishes the flex column so the
   output scrolls instead of growing the panel into the editor. */
.code-debug-console-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Variables section is bounded + scrolls on its own (many vars don't push the REPL). */
.code-debug-console-vars {
    flex-shrink: 0;
    max-height: 40%;
    overflow: auto;
    padding: 8px;
}

.code-debug-console-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-bottom: 1px solid #eee;
    background: #f3f3f3;
}

.code-debug-console-title {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.code-debug-console-clear {
    border: none;
    background: transparent;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.code-debug-console-clear:hover {
    background: rgba(145, 70, 255, 0.1);
}

.code-debug-console-output {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 8px 12px;
    overflow: auto;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #333;
    white-space: pre-wrap;
    word-break: break-word;
    background: #fff;
    border: none;
}

.code-debug-console-input-row {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid #e0e0e0;
    background: #f5f5f5;
    align-items: center;
}

.code-debug-console-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 30px;
    background: #fff;
}

.code-debug-console-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.code-debug-console-run {
    flex-shrink: 0;
    height: 30px;
    padding: 0 12px;
    border: none;
    border-radius: 4px;
    background: var(--primary-color);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.code-debug-console-run:hover:not(:disabled) {
    background: #7952cc;
}

.code-debug-console-run:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Run output panel — visible when not actively debugging. Captures stdout/stderr
   from build123d code execution (the Run button) so users can see print() output. */
.code-run-output {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: min(28vh, 240px);
    min-height: 80px;
    max-height: min(32vh, 280px);
    overflow: hidden; /* fixed-height panel; stdout scrolls inside */
    border-top: 1px solid var(--border-color);
    background: #fafafa;
}

.code-run-output-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-bottom: 1px solid #eee;
    background: #f3f3f3;
}

.code-run-output-title {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.code-run-output-clear {
    border: none;
    background: transparent;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.code-run-output-clear:hover {
    background: rgba(145, 70, 255, 0.1);
}

.code-run-output-body {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 8px 12px;
    overflow: auto;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #333;
    white-space: pre-wrap;
    word-break: break-word;
    background: #fff;
    border: none;
}

.code-editor-body .code-param-active {
    position: absolute;
    border: 1px solid #b89bff;
    border-radius: 3px;
    background: rgba(145, 70, 255, 0.14);
    box-sizing: border-box;
}

.code-editor-status {
    flex-shrink: 0;
    min-height: 28px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.35;
    border-top: 1px solid var(--border-color);
    color: #666;
    background: #fafafa;
    overflow-x: auto;
    white-space: nowrap;
}

.code-editor-status.error {
    color: #b71c1c;
    background: #fff3f3;
    border-top-color: #f3c4c4;
}

/* Agent CAD-exec activity: the "Agent CAD" bottom tab + the editor status chip. */
.code-agent-exec-body {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 8px 12px;
    overflow: auto;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #33415c;
    white-space: pre-wrap;
    word-break: break-word;
    background: #f6f4ff;
    border: none;
}

.agent-cad-chip {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}
.agent-cad-chip.is-busy {
    color: #5a2ea8;
    background: #eee6ff;
    border: 1px solid #d8c9ff;
    animation: agent-cad-pulse 1.4s ease-in-out infinite;
}
.agent-cad-chip.is-ok {
    color: #1c7a3d;
    background: #e8f7ee;
    border: 1px solid #b9e3c8;
}
.agent-cad-chip.is-error {
    color: #b71c1c;
    background: #fff0f0;
    border: 1px solid #f3c4c4;
}
@keyframes agent-cad-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.code-selection-action-btn {
    position: absolute;
    z-index: 30;
    border: 1px solid #d8c9ff;
    background: #ffffff;
    color: #5a2ea8;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 6px 14px rgba(27, 27, 27, 0.12);
    cursor: pointer;
    user-select: none;
}

.code-selection-action-btn:hover {
    background: #f7f2ff;
    border-color: #bca1ff;
}

/* Viewer Area - Right Side (flexible in 3-col layout) */
.viewer-area {
    flex: 1 1 36%;
    min-width: 280px;
    height: 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.chat-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--app-column-header-height);
    min-height: var(--app-column-header-height);
    padding: 0 8px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color);
    background: var(--app-column-header-bg);
}

/* Morfis Agent header: title + clear/new button */
/* Quiet panel label, in the same family as the viewer's group labels
   (BUILDERS, SKETCH …) rather than a heading. */
.chat-title-icon {
    font-size: 14px;
    color: var(--primary-color);
    flex-shrink: 0;
    margin-left: 4px;
}
.chat-title {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-clear-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--accent-color);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.chat-clear-btn .codicon { font-size: 16px; }
.chat-clear-btn:hover { background: rgba(145, 70, 255, 0.1); color: var(--primary-color); }

.chat-header-logo {
    height: 26px;
    width: auto;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Clickable brand → All projects (cursor only; no text-color change on hover). */
.chat-header.is-clickable { cursor: pointer; }

.chat-header-collapse {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--accent-color);
    border-radius: 6px;
    cursor: pointer;
}
.chat-header-collapse:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-color); }

/* Credits badge in chat header */
.chat-credits-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color, #9146ff);
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1.4;
}
.chat-credits-badge .codicon {
    font-size: 12px;
}

/* ── Credits request form (inline questionnaire) ──────────────── */
.credits-request-form {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary, #f8f6ff);
    font-size: 13px;
    line-height: 1.5;
}
.credits-request-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text-color);
}
.credits-request-header .codicon {
    color: var(--primary-color, #9146ff);
    font-size: 16px;
}
.credits-request-close {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--accent-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.credits-request-close:hover {
    background: rgba(0,0,0,0.06);
}
.credits-request-explanation {
    margin: 0 0 12px 0;
    color: var(--text-secondary, #666);
    font-size: 12px;
}
.credits-form-field {
    display: block;
    margin-bottom: 10px;
}
.credits-form-field > span {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--text-color);
    font-size: 12px;
}
.credits-form-optional {
    font-weight: 400;
    color: var(--text-secondary, #999);
}
.credits-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    background: #fff;
    color: var(--text-color);
}
.credits-form-field textarea:focus {
    outline: none;
    border-color: var(--primary-color, #9146ff);
    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.15);
}
.credits-form-result {
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 500;
}
.credits-form-success {
    background: #e8f5e9;
    color: #2e7d32;
}
.credits-form-error {
    background: #fdecea;
    color: #c62828;
}
.credits-form-submit {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: var(--primary-color, #9146ff);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.credits-form-submit:hover:not(:disabled) {
    background: var(--primary-hover, #7a3ad4);
}
.credits-form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.chat-header h1 {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.messages-container {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
}

.message {
    max-width: 88%;
    word-wrap: break-word;
}

.message-content {
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
}

.message-content p,
.message-content ul,
.message-content ol,
.message-content pre {
    margin: 0 0 0.3em;
}

.message-content p:last-child,
.message-content ul:last-child,
.message-content ol:last-child,
.message-content pre:last-child {
    margin-bottom: 0;
}

.message-content code {
    background: #f3f3f3;
    border-radius: 4px;
    padding: 0 4px;
}

.message-content ul,
.message-content ol {
    padding-left: 1.25em;
    margin-left: 0;
}

.message-content li {
    margin: 0.12em 0;
}

.message-content li > p {
    margin: 0;
}

.message-content pre {
    white-space: pre-wrap;
}

.message-user {
    background: var(--user-message-bg);
    align-self: flex-end;
    margin-left: auto;
    padding: 8px 13px;
    border-radius: 14px 14px 4px 14px;
    max-width: 85%;
}

/* Assistant replies flow as clean text — no box or border — for an elegant,
   conversational feel. (Todo cards re-add their frame below.) */
.message-system {
    background: transparent;
    border: none;
    align-self: stretch;
    max-width: 100%;
    padding: 2px 2px 4px;
    color: var(--text-color);
}

/* Keep the bordered card treatment only for structured todo / plan messages. */
.message-system:has(.todo-message) {
    background: var(--system-message-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    align-self: flex-start;
    max-width: 92%;
}

.message-error {
    background: #fff5f5;
    border: 1px solid #f3c9c9;
    color: #c33;
    align-self: flex-start;
    padding: 9px 13px;
    border-radius: 10px;
}

/* Intermediate build123d run failure: rendered locally in MORFE while the
   model is still iterating. Not a fatal app error, so it gets a muted
   warning treatment instead of the alarming red of .message-error. */
.message-exec-error {
    background: rgba(217, 119, 6, 0.05);
    border: 1px solid rgba(217, 119, 6, 0.22);
    border-left: 3px solid rgba(217, 119, 6, 0.65);
    color: var(--accent-color, #6E6E80);
    align-self: flex-start;
    font-size: 12px;
    line-height: 1.55;
    padding: 8px 12px;
    max-width: 90%;
}

.message-exec-error::before {
    content: "Preview didn't render — model is iterating";
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(180, 95, 0, 0.9);
    margin-bottom: 4px;
}

.message-exec-error .message-content {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-loading {
    background: transparent;
    border: none;
    align-self: flex-start;
    padding: 4px 4px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.message-loading .loading-text {
    font-size: 13px;
    color: var(--text-secondary, #666);
}

.stage-message {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Agent reasoning (ThinkingMessage): a shimmering "Thinking" row while live,
   a quiet "Thought for Ns" line once the answer arrives; click to expand. */
.message-thinking {
    align-self: stretch;
    max-width: 100%;
    padding: 0 2px;
}

.thinking-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 2px 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--accent-color);
    text-align: left;
    cursor: pointer;
}

.thinking-toggle:hover .thinking-label,
.thinking-toggle:hover .thinking-chevron { color: var(--text-color); }

.thinking-label { flex: none; font-weight: 500; }

.message-thinking.is-live .thinking-label {
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-color) 40%,
        #d4d4dc 50%, var(--accent-color) 60%, var(--accent-color) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: thinking-shimmer 1.8s linear infinite;
}

.thinking-preview {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #a0a0ab;
}

.thinking-chevron {
    flex: none;
    font-size: 12px;
    transition: transform 0.15s ease;
}

.message-thinking.is-expanded .thinking-chevron { transform: rotate(90deg); }

.thinking-body {
    margin: 4px 0 2px 2px;
    padding: 2px 0 2px 12px;
    border-left: 2px solid var(--border-color);
    color: var(--accent-color);
    font-size: 12.5px;
    line-height: 1.55;
}

.thinking-body p { margin: 0 0 6px; }
.thinking-body p:last-child { margin-bottom: 0; }

@keyframes thinking-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -150% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .message-thinking.is-live .thinking-label { animation: none; color: var(--accent-color); background: none; }
}

.stage-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.stage-executing .stage-pill {
    background: #f2e9ff;
    color: #5b2fb0;
    border: 1px solid #d9c8ff;
}

.stage-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stage-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7f57d9;
    opacity: 0.35;
    animation: stage-dot-pulse 1s infinite ease-in-out;
}

.stage-dots span:nth-child(2) { animation-delay: 0.16s; }
.stage-dots span:nth-child(3) { animation-delay: 0.32s; }

/* @code_edit — distinct from executing: teal bars (wave) vs purple dots (pulse) */
.stage-code-edit .stage-pill {
    background: #e6f7f5;
    color: #0f766e;
    border: 1px solid #99e5de;
}

.stage-code-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 12px;
    padding-bottom: 1px;
}

.stage-code-bars span {
    display: block;
    width: 3px;
    border-radius: 1px;
    background: #0d9488;
    transform-origin: center bottom;
    animation: stage-code-bar-wave 0.85s infinite ease-in-out;
}

.stage-code-bars span:nth-child(1) {
    height: 5px;
    animation-delay: 0s;
}

.stage-code-bars span:nth-child(2) {
    height: 9px;
    animation-delay: 0.14s;
}

.stage-code-bars span:nth-child(3) {
    height: 5px;
    animation-delay: 0.28s;
}

.todo-message {
    min-width: 280px;
    font-size: inherit;
    line-height: inherit;
}

.todo-title {
    font-size: inherit;
    font-weight: 700;
    color: #5b2fb0;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.todo-list {
    margin: 0;
    padding-left: 16px;
}

.todo-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 6px 0;
}

.todo-item-content {
    flex: 1;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    color: #30303a;
}

.todo-status {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.todo-status.pending {
    color: #111;
}

.todo-status.in-progress {
    color: #111;
}

.todo-status.completed {
    color: #111;
}

.loading-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background: var(--accent-color);
    border-radius: 50%;
    animation: loading 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes loading {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

@keyframes stage-dot-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-1px); }
}

@keyframes stage-code-bar-wave {
    0%, 100% { transform: scaleY(0.4); opacity: 0.45; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* Shown above the composer while the code generation backend is unreachable. */
.chat-offline-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-top: 1px solid var(--border-color);
    background: rgba(217, 119, 6, 0.06);
    color: var(--accent-color);
    font-size: 12px;
}

.chat-offline-bar .codicon { color: rgba(217, 119, 6, 0.85); }

.chat-offline-text { flex: 1; }

.chat-offline-retry {
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-color);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 12px;
    cursor: pointer;
}

.chat-offline-retry:hover:not(:disabled) { background: var(--user-message-bg); }
.chat-offline-retry:disabled { opacity: 0.6; cursor: default; }

.chat-input {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-color);
    background: white;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.chat-input textarea,
.chat-composer-editable {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px;
    resize: none;
    min-height: 42px;
    max-height: 150px;
}

.chat-composer-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.chat-composer-wrap .chat-composer-editable {
    width: 100%;
}

.chat-composer-editable {
    overflow-y: auto;
    line-height: 1.45;
    background: #fff;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-composer-editable:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Overlay placeholder (not ::before) so the caret isn’t drawn after “ghost” text */
.chat-composer-placeholder {
    position: absolute;
    left: 13px;
    top: 11px;
    right: 12px;
    color: #9e9e9e;
    pointer-events: none;
    font-size: 13px;
    line-height: 1.45;
    display: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-composer-wrap .chat-composer-editable.chat-composer-empty:not(:focus) + .chat-composer-placeholder {
    display: block;
}

.chat-input textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* CAD face/edge chip (display); API still uses data-path raw string */
.cad-chip {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    max-width: 100%;
    margin: 0 2px;
    padding: 2px 8px 2px 4px;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    background: #fafafa;
    font-size: 13px;
    color: #212121;
    user-select: none;
    line-height: 1.35;
}

.cad-chip-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cad-chip-icon {
    flex-shrink: 0;
    display: flex;
    color: #424242;
}

.cad-chip-svg {
    display: block;
}

.cad-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.code-chip {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    max-width: 100%;
    margin: 2px 2px;
    padding: 3px 8px 3px 6px;
    border: 1px solid #d8c9ff;
    border-radius: 7px;
    background: #f7f2ff;
    font-size: 12px;
    color: #47247f;
    user-select: none;
    line-height: 1.35;
}

.code-chip-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.code-chip-icon {
    flex-shrink: 0;
    display: flex;
    color: #5a2ea8;
}

.code-chip-svg {
    display: block;
}

.code-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

.chat-send-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s, transform 0.08s;
}

.chat-send-btn .codicon {
    font-size: 16px;
}

.chat-send-btn:hover:not(:disabled) {
    background: #7952cc;
}

.chat-send-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.chat-send-btn:disabled {
    background: #e3e3e6;
    color: #b6b6bd;
    cursor: not-allowed;
}

/* Viewer Panel - Right Side */
.viewer-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
    position: relative;
    background: #fafafa;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Viewer toolbar + centered popover under it */
.viewer-toolbar-stack {
    flex-shrink: 0;
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: stretch;
    background: var(--app-column-header-bg);
    border-bottom: 1px solid var(--border-color);
}

.viewer-toolbar-main { flex: 1; min-width: 0; }
.viewer-toolbar-main > .command-bar { border-bottom: none; height: 100%; }

/* Viewer "Select" toggle: pick faces/edges into the chat composer. */
.viewer-select-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    padding: 0;
    border: none;
    border-left: 1px solid var(--border-color);
    background: var(--app-column-header-bg);
    color: var(--accent-color);
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
}

/* Compact highlight around the icon (matches .command-bar-btn), not the whole cell. */
.viewer-select-toggle-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    border-radius: 6px;
    transition: background 0.12s;
}

.viewer-select-toggle:hover .viewer-select-toggle-ico { background: rgba(145, 70, 255, 0.10); color: var(--primary-color); }
.viewer-select-toggle.is-active .viewer-select-toggle-ico { background: rgba(145, 70, 255, 0.14); color: var(--primary-color); }

/* three-cad-viewer's pick filter (None / Vertex / Edge / Face / Solid), shown
   while Select is on: inset from the view edge and styled like MORFE. */
.viewer-container .tcv_shape_filter {
    top: 8px;
    right: 8px;
    font-size: 12px;
    font-family: inherit;
}

.viewer-container .tcv_filter_content {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-color);
    box-shadow: 0 1px 2px rgba(16, 16, 32, 0.06);
    cursor: pointer;
}

.viewer-container .tcv_filter_content::before {
    content: "Filter:";
    color: var(--accent-color);
    margin-right: 2px;
}

.viewer-container .tcv_filter_icon { font-size: 9px; margin-left: 2px; color: var(--accent-color); }

/* Opens right-aligned under the pill, so it never runs past the view edge. */
.viewer-container .tcv_filter_dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(16, 16, 32, 0.1);
    overflow: hidden;
}

.viewer-container .tcv_filter_dropdown_value { padding: 4px 10px; }
.viewer-container .tcv_filter_dropdown_value:hover { background: rgba(145, 70, 255, 0.10); }

/* CAD command bar in the 3D viewer banner (the launcher; opens the build123d
   command popover). Two columns: a flexible command area (left) and a fixed
   search column (right). The command area clips its own overflow so commands can
   never reach or sit under the search column. */
.command-bar {
    position: relative;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    box-sizing: border-box;
    background: var(--app-column-header-bg);
    border-bottom: 1px solid var(--border-color);
}
.command-bar-rows {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 5px 6px 5px 8px;
}
.command-bar-row {
    display: flex;
    align-items: center;
    min-width: 0;
}
.command-bar-scroll {
    display: flex;
    align-items: center;
    min-width: 0;
}
.command-bar-group {
    display: flex;
    align-items: center;
    padding: 0 8px;
    height: 30px;
    border-right: 1px solid var(--border-color);
}
.command-bar-group:first-child { padding-left: 2px; }
.command-bar-group:last-child { border-right: none; }
.command-bar-group-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-right: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}
.command-bar-group-icons {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Fixed search column at the far right; opens the ⌘K command palette. */
.command-bar-search {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    padding: 0;
    border: none;
    border-left: 1px solid var(--border-color);
    border-radius: 0;
    background: var(--app-column-header-bg);
    color: var(--accent-color);
    cursor: pointer;
    transition: color 0.12s;
}
.command-bar-search .codicon { font-size: 16px; }
.command-bar-search:hover:not(:disabled),
.command-bar-search.is-active { color: var(--primary-color); }
.command-bar-search:disabled { opacity: 0.45; cursor: default; }

/* Shared hover tooltip (driven by data-tip; see uiTooltip.js). Fixed so it
   escapes any ancestor overflow:hidden. */
.ui-tooltip {
    position: fixed;
    display: none;
    z-index: 100000;
    background: #2b2b2b;
    color: #fff;
    font-size: 11px;
    line-height: 1.3;
    padding: 4px 8px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Command palette dropdown (anchored under the search button). */
.command-palette {
    position: absolute;
    top: 100%;
    right: 8px;
    width: 320px;
    max-width: calc(100% - 16px);
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    z-index: 1002;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.command-palette-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-color);
}
.command-palette-input-icon { font-size: 15px; color: var(--accent-color); }
.command-palette-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-color);
}
.command-palette-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}
.command-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.command-palette-item.is-active { background: rgba(145, 70, 255, 0.10); }
.command-palette-item-ico {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--accent-color);
}
.command-palette-item.is-active .command-palette-item-ico { color: var(--primary-color); }
.command-palette-item-label { flex: 1; }
.command-palette-item-label {
    font-size: 13px;
    color: var(--text-color);
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}
.command-palette-item.is-active .command-palette-item-label { color: var(--primary-color); }
.command-palette-item-meta { font-size: 11px; color: var(--accent-color); flex-shrink: 0; }
.command-palette-empty { padding: 14px 12px; font-size: 12px; color: #999; text-align: center; }
.command-bar-group {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 8px;
    border-right: 1px solid var(--border-color);
}
.command-bar-group:last-child { border-right: none; }
.command-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.command-bar-ico {
    display: inline-flex;
    width: 19px;
    height: 19px;
    color: var(--accent-color);
    transition: color 0.12s;
}
.command-bar-btn:hover:not(:disabled) .command-bar-ico,
.command-bar-btn.is-active .command-bar-ico { color: var(--primary-color); }
.command-bar-btn:hover:not(:disabled) {
    background: rgba(145, 70, 255, 0.10);
    color: var(--primary-color);
}
.command-bar-btn.is-active {
    background: rgba(145, 70, 255, 0.14);
    color: var(--primary-color);
}
.command-bar-btn:disabled { opacity: 0.45; cursor: default; }

/* App-level row above the 3D canvas */
.viewer-app-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: var(--app-column-header-height);
    min-height: var(--app-column-header-height);
    padding: 0 10px;
    box-sizing: border-box;
    background: var(--app-column-header-bg);
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.viewer-app-toolbar-end {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

/* Keep toolbars usable on narrow viewports */
.viewer-app-toolbar-end::-webkit-scrollbar {
    height: 6px;
}
.viewer-app-toolbar-end::-webkit-scrollbar-thumb {
    background: rgba(90, 46, 168, 0.18);
    border-radius: 999px;
}

@media (max-width: 900px) {
    .viewer-app-toolbar {
        gap: 6px;
    }
    .viewer-tool-btn {
        padding: 4px 10px;
        font-size: 12px;
    }
}

.viewer-tool-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid #d8c9ff;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.2;
}

.viewer-tool-btn:hover {
    background: #f7f2ff;
    border-color: #bca1ff;
}

.viewer-tool-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.viewer-tool-btn-accent {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.viewer-tool-btn-accent:hover:not(:disabled) {
    background: #7952cc;
    border-color: #7952cc;
}

/* Distance tool popup (three-cad-viewer): “Add to context” injected by ViewerPanel */
.viewer-panel .morfe-distance-context-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: flex-end;
}

.viewer-panel .morfe-distance-add-context {
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--app-column-header-bg);
    color: var(--text-color);
}

.viewer-panel .morfe-distance-add-context:hover {
    background: #fff;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* three-cad-viewer: glass mode floats tree/tabs/info over the canvas; hide toggles the overlay */
.viewer-container.viewer-side-panels-hidden .tcv_cad_navigation {
    display: none !important;
}

.viewer-container.viewer-side-panels-hidden .tcv_cad_view {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.viewer-container {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Whatever three-cad-viewer mounts (root wrapper) must be a flex column with full height so toolbar + body layout works */
.viewer-container > * {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.viewer-container .tcv_cad_viewer {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
}

/* Hide three-cad-viewer's native view-tools banner. The underlying tool objects
   (cadTools, select/measure) stay alive and are still driven programmatically —
   only the visible toolbar is removed. Custom buttons can be re-added elsewhere. */
.viewer-container .tcv_cad_toolbar {
    display: none !important;
}

.viewer-container .tcv_cad_body {
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 0;
}

/* Keep canvas area below toolbar so click/focus doesn't cover it */
.viewer-container .tcv_cad_view {
    position: relative;
    z-index: 0;
}

/* Variable tree panel — object list sidebar inside viewer */
.viewer-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.variable-tree-panel {
    flex: 0 0 200px;
    min-width: 160px;
    max-width: 260px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid var(--border-color);
    overflow: hidden;
}

.variable-tree-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--app-column-header-bg);
}

.variable-tree-count {
    font-size: 11px;
    font-weight: 500;
    color: #8a8a8a;
    letter-spacing: 0.01em;
}

.variable-tree-header-actions {
    display: flex;
    gap: 2px;
}

.variable-tree-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #777;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.variable-tree-action-btn .codicon {
    font-size: 15px;
}

.variable-tree-action-btn:hover:not(:disabled) {
    background: rgba(145, 70, 255, 0.1);
    color: var(--primary-color);
}

.variable-tree-action-btn:disabled {
    color: #cfcfcf;
    cursor: default;
}

.variable-tree-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.variable-tree-item {
    display: flex;
    align-items: center;
    padding: 2px 12px;
    cursor: default;
    user-select: none;
    transition: background 0.1s;
}

.variable-tree-item:hover {
    background: #f3eeff;
}

.variable-tree-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.variable-tree-label input[type="checkbox"] {
    margin: 0;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

.variable-tree-name {
    font-size: 13px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}

/* Runtime type reported by the kernel, e.g. "Box" — muted, like the debugger. */
.variable-tree-type {
    font-size: 11px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    color: #9b8bbf;
    background: rgba(145, 70, 255, 0.08);
    padding: 0 6px;
    border-radius: 999px;
    line-height: 16px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45%;
}

/* Hidden objects read as inactive but stay legible. */
.variable-tree-item-hidden .variable-tree-name {
    color: #9a9a9a;
}
.variable-tree-item-hidden .variable-tree-type {
    opacity: 0.6;
}

.variable-tree-wire-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    background: none;
    color: #bbb;
    cursor: pointer;
    margin-left: 8px;
    padding: 0;
    opacity: 0;
    transition: color 0.12s, background 0.12s, opacity 0.12s;
}

.variable-tree-wire-btn .codicon {
    font-size: 13px;
}

/* Reveal the display-mode toggle on row hover or when it's active (VS Code style). */
.variable-tree-item:hover .variable-tree-wire-btn,
.variable-tree-wire-btn-active {
    opacity: 1;
}

.variable-tree-wire-btn:hover {
    color: var(--primary-color);
    border-color: var(--border-color);
    background: #f3eeff;
}

.variable-tree-wire-btn-active {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: #f3eeff;
}

.variable-tree-empty {
    padding: 16px 12px;
    font-size: 12px;
    color: #999;
    text-align: center;
}

/* 3D viewer + floating execution tree overlay (does not shrink canvas flex) */
.viewer-canvas-stack {
    flex: 1;
    min-width: 0;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.viewer-canvas-stack > .viewer-container {
    flex: 1;
    min-height: 0;
}

/* Navigation cube — small interactive view-cube pinned to the bottom-right of the
   3D canvas. Renders its own WebGL scene (see ViewCube.js) with a transparent
   clear color so it floats directly over the model. */
.view-cube {
    position: absolute;
    bottom: 2px;
    right: 10px;
    z-index: 55;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.view-cube-gl {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

/* Decorative chevron (Fusion-style); reserved for a future view-menu affordance. */
.view-cube-chevron {
    width: 18px;
    height: 10px;
    margin-right: 2px;
    opacity: 0.45;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1.5L6 6l5-4.5' stroke='%236b7280' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    pointer-events: none;
}

.view-cube canvas {
    display: block;
    background: transparent;
}

/* Glass card over the canvas — same idea as three-cad-viewer navigation overlay */
.execution-tree-overlay {
    position: absolute;
    top: calc(var(--app-column-header-height) + 8px);
    left: 10px;
    bottom: 10px;
    width: min(300px, calc(100% - 20px));
    max-width: min(320px, 42vw);
    z-index: 50;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.execution-tree-overlay .execution-tree-panel {
    pointer-events: auto;
}

.execution-tree-panel {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
}

.execution-tree-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

.execution-tree-title {
    font-size: 11px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.execution-tree-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    background: rgba(145, 70, 255, 0.85);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* Right-aligned action group (Apply + Copy) in the tree header. */
.execution-tree-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Copy: clean ghost icon button, matching the Variables panel controls. */
.execution-tree-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 26px;
    min-width: 26px;
    padding: 0 5px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #888;
    cursor: pointer;
    text-shadow: none;
    transition: background 0.12s, color 0.12s;
}

.execution-tree-copy-btn .codicon {
    font-size: 14px;
}

.execution-tree-copy-btn:hover:not(:disabled) {
    background: rgba(145, 70, 255, 0.1);
    color: var(--primary-color);
}

.execution-tree-copy-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.execution-tree-copy-btn-ok { color: #2e9b46; background: rgba(76, 175, 80, 0.14); }
.execution-tree-copy-btn-err { color: #d2453f; background: rgba(229, 57, 53, 0.14); }
.execution-tree-copy-btn-selection { color: var(--primary-color); }

.execution-tree-copy-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.execution-tree-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 0 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.execution-tree-list::-webkit-scrollbar {
    width: 6px;
}

.execution-tree-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}

.execution-tree-empty {
    padding: 10px 12px;
    font-size: 11px;
    color: #444;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.execution-tree-node {
    border: none;
}

.execution-tree-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    padding: 2px 8px 2px 4px;
    margin: 1px 4px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: #1a1a1a;
    border-radius: 4px;
    transition: background 0.1s;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75);
}

.execution-tree-row:hover {
    background: rgba(145, 70, 255, 0.18);
    text-shadow: none;
}

.execution-tree-row-selected {
    background: rgba(145, 70, 255, 0.32);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.execution-tree-row-selected .execution-tree-label,
.execution-tree-row-selected .execution-tree-line-tag {
    color: inherit;
}

.execution-tree-caret {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.execution-tree-caret:hover {
    background: rgba(0, 0, 0, 0.08);
}

.execution-tree-caret-spacer {
    display: inline-block;
    width: 18px;
    flex-shrink: 0;
}

.execution-tree-type-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.execution-tree-label {
    flex: 1;
    min-width: 0;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.execution-tree-line-tag {
    flex-shrink: 0;
    font-size: 10px;
    color: #555;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

.execution-tree-row-copy-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 2px;
    border: none;
    background: transparent;
    color: #777;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.1s, background 0.1s, color 0.1s;
    text-shadow: none;
}

.execution-tree-row:hover .execution-tree-row-copy-btn,
.execution-tree-row-copy-btn:focus-visible {
    opacity: 1;
}

.execution-tree-row-copy-btn:hover {
    background: rgba(145, 70, 255, 0.18);
    color: var(--primary-color);
}

.execution-tree-row-selected .execution-tree-row-copy-btn {
    color: rgba(255, 255, 255, 0.85);
}

.execution-tree-row-selected .execution-tree-row-copy-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* Viewer stage: column wrapper for the 3D canvas and overlay panels. */
.viewer-stage {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.viewer-tool-btn-active {
    background: #f3eeff;
    border-color: var(--primary-color);
}

.viewer-tool-btn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: 4px;
    padding: 0 5px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.viewer-tool-btn:disabled .viewer-tool-btn-badge {
    background: #bbb;
}

/* Geometry visualization overlay (gutter click → 3D preview) */
.geometry-vis-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
}

.geometry-vis-overlay canvas {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* VS Code-like gutter marker for lines with captured geometry.
   Lives in Monaco's line-decorations margin so it doesn't compete with breakpoints
   in the glyph margin. The class is applied to an empty positioned element by Monaco;
   we render the actual dot via ::before so the click target is the whole strip. */
.geometry-vis-gutter-marker {
    /* The container fills the whole line-decorations strip and overlaps Monaco's
       folding chevron div. Make it click-through so only our dot (the ::before
       pseudo) captures events; everything else in the strip — fold chevrons,
       other decorations — keeps working as expected. */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.geometry-vis-gutter-marker::before {
    content: '';
    position: absolute;
    /* Pinned to the LEFT of the line-decorations strip so Monaco's folding
       chevron (rendered on the right edge of the same strip) stays clickable. */
    left: 4px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: #00e5ff;
    border: 1.5px solid rgba(0, 180, 220, 0.8);
    box-shadow: 0 0 4px rgba(0, 229, 255, 0.28);
    opacity: 0.85;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}

.geometry-vis-gutter-marker:hover::before {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.45);
}

.geometry-vis-gutter-marker.sketch::before { background: #7c4dff; border-color: rgba(100, 60, 200, 0.8); box-shadow: 0 0 4px rgba(124, 77, 255, 0.28); }
.geometry-vis-gutter-marker.extrude::before { background: #4caf50; border-color: rgba(56, 142, 60, 0.8); box-shadow: 0 0 4px rgba(76, 175, 80, 0.24); }
.geometry-vis-gutter-marker.revolve::before { background: #ff7043; border-color: rgba(200, 80, 40, 0.8); box-shadow: 0 0 4px rgba(255, 112, 67, 0.24); }
.geometry-vis-gutter-marker.offset::before { background: #42a5f5; border-color: rgba(40, 130, 220, 0.8); box-shadow: 0 0 4px rgba(66, 165, 245, 0.24); }
.geometry-vis-gutter-marker.fillet::before { background: #ff9800; border-color: rgba(230, 140, 0, 0.8); box-shadow: 0 0 4px rgba(255, 152, 0, 0.24); }
.geometry-vis-gutter-marker.chamfer::before { background: #ff9800; border-color: rgba(230, 140, 0, 0.8); box-shadow: 0 0 4px rgba(255, 152, 0, 0.24); }
.geometry-vis-gutter-marker.part::before { background: #29b6f6; border-color: rgba(30, 150, 220, 0.8); box-shadow: 0 0 4px rgba(41, 182, 246, 0.24); }
.geometry-vis-gutter-marker.face::before { background: #ab47bc; border-color: rgba(150, 50, 170, 0.8); box-shadow: 0 0 4px rgba(171, 71, 188, 0.24); }
.geometry-vis-gutter-marker.plane::before { background: #42a5f5; border-color: rgba(33, 120, 200, 0.8); box-shadow: 0 0 4px rgba(66, 165, 245, 0.24); }
.geometry-vis-gutter-marker.edge_selection::before { background: #ef5350; border-color: rgba(200, 50, 50, 0.8); box-shadow: 0 0 4px rgba(239, 83, 80, 0.24); }
.geometry-vis-gutter-marker.locations::before { background: #66bb6a; border-color: rgba(60, 150, 60, 0.8); box-shadow: 0 0 4px rgba(102, 187, 106, 0.24); }
.geometry-vis-gutter-marker.spline::before { background: #00e5ff; border-color: rgba(0, 170, 190, 0.8); box-shadow: 0 0 4px rgba(0, 229, 255, 0.24); }

.geometry-vis-gutter-marker.buildline-scope::before,
.geometry-vis-gutter-marker.buildsketch-scope::before {
    border-radius: 2px;
}

.geometry-vis-gutter-marker.buildline-scope::before {
    background: #26c6da;
    border-color: rgba(0, 120, 140, 0.85);
    box-shadow: 0 0 4px rgba(38, 198, 218, 0.24);
}

.geometry-vis-gutter-marker.buildsketch-scope::before {
    background: #7c4dff;
    border-color: rgba(100, 60, 200, 0.85);
    box-shadow: 0 0 4px rgba(124, 77, 255, 0.24);
}

.geometry-vis-active-line {
    background: rgba(0, 229, 255, 0.08) !important;
}

/* Source line whose corresponding 3D primitive is currently selected for direct
   manipulation in the viewer (handles drawn / draggable). */
.geometry-vis-active-line.selected {
    background: rgba(0, 229, 255, 0.22) !important;
    box-shadow: inset 3px 0 0 0 rgba(0, 229, 255, 0.95);
}

.viewer-custom-toolbar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 100;
}

.sketch-primitives-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.circle-mode-select {
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-family: inherit;
}

.toolbar-button {
    padding: 10px 20px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.toolbar-button:hover {
    background: var(--user-message-bg);
    border-color: var(--primary-color);
}

.toolbar-button.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Parameters Panel */
.parameters-panel {
    border-top: 1px solid var(--border-color);
    background: #fafafa;
    padding: 16px 20px;
}

.parameters-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.parameters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.parameter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.parameter-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}

.parameter-input {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.parameter-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.parameter-unit {
    font-size: 12px;
    color: var(--accent-color);
    margin-left: 4px;
}

/* Actions Panel */
.actions-panel {
    border-top: 1px solid var(--border-color);
    background: white;
    padding: 16px 20px;
}

.actions-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.actions-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.action-button {
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: white;
    color: var(--text-color);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.action-button:hover:not(:disabled) {
    background: var(--user-message-bg);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.action-button:active:not(:disabled) {
    transform: translateY(0);
}

.action-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-button.primary {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.action-button.primary:hover:not(:disabled) {
    background: #7952cc;
    border-color: #7952cc;
}

.action-button.secondary {
    background: #f0f0f0;
    border-color: #d0d0d0;
}

.action-icon {
    font-size: 16px;
}

.action-label {
    white-space: nowrap;
}

/* Inline code diff (Monaco diff editor in code column) */
.code-review-pill {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    background: rgba(145, 70, 255, 0.1);
    padding: 2px 8px;
    border-radius: 999px;
}

.code-diff-inline-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, #f3f0ff 0%, #faf8ff 100%);
    min-width: 0;
}

.code-diff-inline-hint {
    font-size: 12px;
    color: var(--accent-color);
    min-width: 0;
}

.code-diff-inline-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.code-diff-inline-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-color);
}

.code-diff-inline-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.code-diff-inline-btn-primary {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.code-diff-inline-btn-secondary {
    background: #fff;
    color: var(--text-color);
}

.code-diff-inline-btn-secondary:hover:not(:disabled) {
    background: #f3f3f4;
}

.code-diff-inline-stack {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.code-diff-inline-stack.is-hidden {
    display: none !important;
}

/* VS Code-like diff review: diff fills the editor area. */
.code-diff-inline-stack.is-active {
    max-height: none;
}

.code-editor-diff-mount {
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.code-editor-monaco-outer.is-hidden {
    display: none !important;
}

.code-editor-monaco-outer.is-active {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ===== Debug console results =============================================
   The console holds elements now, not just text: a structured value prints as
   the same expandable tree the Variables panel uses. `.dbg-con-text` keeps the
   <pre>-like rendering the console had when it was one. */
.dbg-con-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
}
.dbg-con-result { margin: 2px 0 4px; }
/* The collapsed row is ONE line: the whole point is that a large value is a
   summary you open, not a wall of text. Only the top row -- children are
   ordinary variable rows and should read exactly as they do in the Variables
   panel. */
.dbg-con-result > .tree-row:first-child > .value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A REPL result has no name (the expression is echoed above it), so the RESULT
   row gives its value the name column too.
   
   Two things this has to get right. `renderVariablesTree` emits rows as a flat
   sibling list -- indentation comes from `indent-N` classes, not nesting -- so
   without `:first-child` this strips the name off every CHILD as well, leaving a
   column of bare values with nothing to say which field each one is. And
   `.tree-row` is a grid (18px 1fr 1fr 24px), so hiding the name does not close
   its column; the value has to span it explicitly or it sits in the third track
   behind an empty gap. */
.dbg-con-result > .tree-row:first-child > .name { display: none; }
.dbg-con-result > .tree-row:first-child > .value { grid-column: 2 / 4; }
/* A result from a finished pause: its variable references have been reused, so
   it stays readable but is no longer expandable. */
.dbg-con-result.is-stale { opacity: 0.55; }
.dbg-con-result.is-stale .tree-row { cursor: default; }
.dbg-con-result.is-stale .twisty { visibility: hidden; }

/* ===== Breakpoints panel =================================================
   Bottom-dock tab listing every breakpoint across the project. The gutter only
   shows the file you are looking at, which is not enough once breakpoints live
   in imported siblings: you cannot see what is armed, or clear a stale one,
   without opening that file first. */
.code-bp-pane {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 4px 12px 8px;
}
.code-bp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
}
.code-bp-toggle { margin: 0; cursor: pointer; flex-shrink: 0; }
.code-bp-loc {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 1px;
    background: none;
    border: 0;
    padding: 2px 4px;
    margin: 0;
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}
.code-bp-loc:hover { background: rgba(127, 127, 127, 0.14); }
.code-bp-file {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* The filename is the part you scan; the line number trails it. */
    direction: rtl;
    text-align: left;
}
.code-bp-line { color: #888; flex-shrink: 0; }
/* Disabled: still listed and still in the gutter -- that is the difference from
   removing it -- but visibly inert. */
.code-bp-row.is-disabled .code-bp-file,
.code-bp-row.is-disabled .code-bp-line { opacity: 0.5; text-decoration: line-through; }
.code-bp-remove {
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: 2px;
    margin: 0;
    cursor: pointer;
    color: #888;
    opacity: 0;
    border-radius: 3px;
}
.code-bp-row:hover .code-bp-remove { opacity: 1; }
.code-bp-remove:hover { color: inherit; background: rgba(127, 127, 127, 0.18); }
/* Disabled breakpoints keep their gutter dot (so the line is still marked) but
   hollowed out, matching the panel's line-through. */
.dbg-breakpoint.is-disabled { opacity: 0.4; }

/* VS Code-style breakpoint hint: the debugger's own ``dbg-breakpoint`` glyph
   (exact size + placement) shown faded on hover, so it's clear you can click to
   set a breakpoint. Only the opacity differs from a real breakpoint. */
.morfe-bp-hint {
    cursor: pointer;
    opacity: 0.4;
}

/* ===== Shell (projects list overlays the kept-alive editor) ============== */
.shell-root { height: 100%; width: 100%; position: relative; }

/* The editor is kept mounted (so monaco-vscode-api isn't re-initialized) but
   hidden when the projects list is shown. `visibility: hidden` hides ALL its
   descendants — including the 3D viewer's nav cube / toolbar, which use high
   z-indexes and would otherwise bleed through a simple overlay — while keeping
   the layout intact so nothing needs to relayout when it's shown again. */
.shell-editor { position: absolute; inset: 0; }
.shell-editor.is-hidden { visibility: hidden; pointer-events: none; }

/* Opaque, full-viewport overlay above the (now-hidden) editor. */
.shell-projects-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--background-color);
    overflow: auto;
}

/* ===== Projects landing page (Overleaf-style) ============================ */
.pp-root {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    background: var(--background-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
}

.pp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--background-color);
    z-index: 2;
}

/* Brand identical to the platform's chat header (logo + "Morfis"). Spacing comes
   solely from .chat-header-logo's margin-right (no extra flex gap), matching the
   platform exactly. */
.pp-brand {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.pp-brand-title {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.pp-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.pp-new-btn:hover { filter: brightness(1.05); }
.pp-new-btn:disabled { opacity: 0.6; cursor: default; }

.pp-main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 28px; }
.pp-titlebar { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.pp-title { font-size: 24px; font-weight: 700; }

.pp-search { position: relative; margin-bottom: 18px; }
.pp-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--accent-color); font-size: 15px;
}
.pp-search-input {
    width: 100%;
    padding: 11px 12px 11px 36px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-color);
    outline: none;
}
.pp-search-input:focus { border-color: var(--primary-color); }

.pp-table { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }

.pp-row {
    display: grid;
    grid-template-columns: 1fr 160px 200px 150px;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}
.pp-row:last-child { border-bottom: none; }
.pp-row:not(.pp-row-head):hover { background: var(--user-message-bg); }

.pp-row-head {
    cursor: default;
    background: var(--user-message-bg);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: none;
}

.pp-name { font-size: 14.5px; font-weight: 600; color: var(--primary-color); }
.pp-col-owner, .pp-col-modified { font-size: 13px; color: var(--accent-color); }

.pp-col-actions { display: flex; justify-content: flex-end; gap: 6px; }
.pp-action {
    background: transparent;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    line-height: 1;
}
.pp-action:hover { background: var(--border-color); color: var(--text-color); }
.pp-action-danger:hover { color: #c0392b; }

.pp-empty { padding: 32px 18px; text-align: center; color: var(--accent-color); font-size: 14px; }

/* Placeholder shown over the editor for binary asset files (STL/3MF/images). */
.code-editor-binary-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 24px;
    background: var(--editor-bg, #1e1e1e);
    color: var(--text-color, #ccc);
}

.code-editor-binary-icon {
    font-size: 40px;
    opacity: 0.6;
    margin-bottom: 4px;
}

.code-editor-binary-name {
    font-size: 14px;
    font-weight: 600;
}

.code-editor-binary-note {
    font-size: 12.5px;
    opacity: 0.85;
}

.code-editor-binary-sub {
    font-size: 12px;
    opacity: 0.6;
    max-width: 360px;
}

.code-editor-binary-sub code {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    opacity: 0.9;
}

/* Keep editor mounted during review (no display:none), but visually replaced by diff. */
.code-editor-monaco-outer.is-review-hidden {
    position: absolute;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

/* In-browser CAD kernel (Pyodide) cold-start overlay.
   Dims + blurs the app ("fades out the platform") and centers the boot status
   until the kernel is ready, then fades itself out to reveal the app. */
/* Non-blocking cold-start toast: pinned bottom-right so the user can read and
   edit code (and use server-side autocomplete) while the in-browser CAD engine
   warms up. `pointer-events: none` guarantees it never intercepts clicks; any
   Run/debug action taken before boot completes simply awaits the in-flight
   kernel promise. */
.kernel-loading-overlay {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.kernel-loading-overlay.is-fading {
    opacity: 0;
}

.kernel-loading-content {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 360px;
    padding: 14px 18px;
    color: #e5e7eb;
    font-family: 'Inter', system-ui, sans-serif;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.kernel-spinner {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(148, 163, 184, 0.25);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: kernel-spin 0.9s linear infinite;
}

@keyframes kernel-spin {
    to { transform: rotate(360deg); }
}

.kernel-loading-text {
    display: flex;
    flex-direction: column;
}

.kernel-loading-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.kernel-loading-sub {
    margin-top: 3px;
    font-size: 11px;
    color: #94a3b8;
}

@media (prefers-reduced-motion: reduce) {
    .kernel-spinner { animation-duration: 2.2s; }
    .kernel-loading-overlay { transition: none; }
}

/* ── Feature proposal card (chat/ProposalCard.js) ─────────────────────────── */
.proposal-card {
    align-self: stretch;
    max-width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px 10px;
    box-shadow: 0 1px 2px rgba(16, 16, 32, 0.04);
}

.proposal-card.is-pending { border-color: rgba(145, 70, 255, 0.35); }
.proposal-card.is-decided { background: #fcfcfd; }

.pc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }

.pc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.pc-eyebrow .codicon { font-size: 12px; }

.pc-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent-color);
    background: var(--user-message-bg);
    border-radius: 999px;
    padding: 2px 8px;
}

.pc-badge .codicon { font-size: 12px; }
.pc-badge-accepted { color: #047857; background: #ecfdf5; }
.pc-badge-rejected { color: #b91c1c; background: #fef2f2; }

.pc-title { font-size: 15px; font-weight: 600; color: var(--text-color); margin-bottom: 4px; }

.pc-description { font-size: 13px; line-height: 1.5; color: var(--text-color); }
.pc-description p { margin: 0 0 6px; }

.pc-params {
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
    padding-top: 4px;
}

.pc-param {
    display: grid;
    grid-template-columns: minmax(84px, 34%) 1fr;
    gap: 8px;
    align-items: start;
    padding: 6px 4px;
    border-radius: 8px;
}

.pc-param:hover { background: var(--user-message-bg); }

.pc-param-name {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding-top: 3px;
    font-size: 12.5px;
    color: var(--accent-color);
    overflow-wrap: anywhere;
}

.pc-param.is-edited .pc-param-name span:last-child::after {
    content: " •";
    color: var(--primary-color);
}

.pc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.pc-dot-empty { background: transparent; }

.pc-param-value { min-width: 0; }

.pc-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }

.pc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid color-mix(in srgb, var(--pc-color) 45%, transparent);
    background: color-mix(in srgb, var(--pc-color) 12%, #fff);
    color: color-mix(in srgb, var(--pc-color) 75%, #111);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.pc-chip .codicon { font-size: 13px; }
.pc-chip.is-pinned { background: var(--pc-color); color: #fff; border-color: var(--pc-color); }
.pc-chip-error { border-color: #f3c9c9; background: #fff5f5; color: #c33; }
.pc-chip-muted { opacity: 0.7; }

.pc-ref-detail { font-size: 12px; color: var(--text-color); min-width: 0; overflow-wrap: anywhere; }
.pc-ref-detail-muted { color: #a0a0ab; font-style: italic; }
.pc-ref-detail-error { color: #c33; font-family: 'SF Mono', Menlo, monospace; font-size: 11px; }
.pc-ref-detail-warn { color: #b45309; }

.pc-expr { flex-basis: 100%; display: flex; align-items: center; gap: 4px; min-width: 0; }

.pc-expr code {
    min-width: 0;
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 11px;
    color: var(--accent-color);
    overflow-wrap: anywhere;
}

.pc-expr-input,
.pc-literal {
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 3px 7px;
    background: #fff;
    color: var(--text-color);
}

.pc-expr-input { flex-basis: 100%; min-width: 0; }
.pc-literal { width: 100%; max-width: 220px; }
.pc-literal.is-number { max-width: 110px; text-align: right; }
.pc-literal:focus, .pc-expr-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.15); }
.pc-literal:disabled { background: transparent; border-color: transparent; padding-left: 0; text-align: left; color: var(--text-color); }

.pc-param.is-edited .pc-literal:not(:disabled) { border-color: rgba(145, 70, 255, 0.55); }

.pc-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }

.pc-icon-btn {
    flex: none;
    border: none;
    background: none;
    color: #a0a0ab;
    padding: 1px 3px;
    border-radius: 4px;
    cursor: pointer;
}

.pc-icon-btn:hover:not(:disabled) { color: var(--text-color); background: rgba(0, 0, 0, 0.05); }

.pc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.pc-spacer { flex: 1; }

.pc-link {
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    color: var(--accent-color);
    text-decoration: underline;
    cursor: pointer;
}

.pc-btn {
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.pc-btn:disabled { opacity: 0.55; cursor: default; }
.pc-btn-secondary { border: 1px solid var(--border-color); background: #fff; color: var(--text-color); }
.pc-btn-secondary:hover:not(:disabled) { background: var(--user-message-bg); }
.pc-btn-primary { border: 1px solid var(--primary-color); background: var(--primary-color); color: #fff; }
.pc-btn-primary:hover:not(:disabled) { filter: brightness(1.06); }

/* ── Account menu (components/AccountMenu.js): activity bar bottom + projects header ── */
.account-menu { position: relative; display: flex; justify-content: center; }
.account-menu-activity { width: 48px; padding: 6px 0 10px; }

.account-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(145, 70, 255, 0.14);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

.account-menu-btn:hover .account-avatar,
.account-menu-btn.is-open .account-avatar { background: var(--primary-color); color: #fff; }

.account-avatar-lg { width: 32px; height: 32px; font-size: 14px; flex: none; }

.account-popover {
    position: fixed;  /* placed from the button's rect in AccountMenu.js */
    z-index: 3000;
    min-width: 220px;
    max-width: 300px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 16, 32, 0.12);
}

.account-who {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}

.account-who-text { min-width: 0; }
.account-name { font-size: 13px; font-weight: 600; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-email { font-size: 12px; color: var(--accent-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text-color);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.account-item:hover { background: var(--user-message-bg); }

.pp-header-actions { display: flex; align-items: center; gap: 12px; }

/* Full-screen splash shown while auth is revalidated on load (§ AuthBarrier) */
.auth-splash {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #f3f0ff 0%, #ffffff 60%);
    z-index: 9999;
}

.auth-splash-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.auth-splash-logo {
    height: 40px;
}

.auth-splash-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(147, 51, 234, 0.2);
    border-top-color: #9333ea;
    border-radius: 50%;
    animation: kernel-spin 0.9s linear infinite;
}

.auth-splash-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #6b7280;
}