html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#app {
    min-height: 100vh;
}

#workspace-editor {
    height: 100%;
}

#workspace-diff-editor {
    height: 100%;
}

/* --- 缩小全局文本大小，符合 IDE 标准 --- */
.mud-typography-body1 {
    font-size: 0.875rem !important;
}
.mud-typography-body2 {
    font-size: 0.8125rem !important;
}

/* --- 极度压缩树形视图 (Workspace) --- */
.mud-treeview-item-content {
    min-height: 26px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* --- 压缩列表项 (Agents) --- */
.mud-list-item {
    min-height: 32px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.mud-list-item-icon {
    min-width: 32px !important;
}

/* --- 消除不必要的容器内边距 --- */
.mud-main-content {
    padding-top: var(--mud-appbar-height) !important;
}

/* --- Dark theme scrollbar --- */
.mud-theme-dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.mud-theme-dark ::-webkit-scrollbar-track {
    background: #1E1E1E;
}
.mud-theme-dark ::-webkit-scrollbar-thumb {
    background: #424242;
    border-radius: 4px;
}
.mud-theme-dark ::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

/* Selection color */
.mud-theme-dark ::selection {
    background: rgba(0, 122, 204, 0.4);
}

/* Code block readability */
.mud-theme-dark .code-block {
    border: 1px solid #3F3F46;
}

/* Click-to-edit: minimize the editor's margin/padding */
.description-editor {
    margin: 0 !important;
}

.description-editor .mud-input {
    margin: 0 !important;
}

.description-editor .mud-input-control {
    margin: 0 !important;
}

.description-editor .mud-input.mud-input-outlined .mud-input-outlined-border {
    padding: 0 !important;
}

.description-editor .mud-input-slot,
.description-editor input {
    padding: 2px 8px !important;
}

/* AppBar project title (click-to-edit display) */
.appbar-project-title {
    max-width: 320px;
}

/* --- Secondary system message: small, compact note with no padding --- */
.dialog-secondary {
    width: 100%;
    margin-bottom: 8px;
    /* Secondary messages: one step smaller than standard dialog text, muted gray */
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

.dialog-secondary-message {
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.3;
    color: inherit;
    opacity: 0.6;
}

/* Compact dialog cards (OpenCode agent secondary chat): tighter padding/spacing */
.dialog-compact {
    border-radius: 4px;
}

.dialog-compact .mud-card-content {
    padding: 6px 8px;
}

.dialog-compact.dialog-secondary {
    margin-bottom: 2px;
}

.dialog-compact .dialog-elements > * {
    margin-bottom: 2px;
}

.appbar-project-title .mud-typography {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* AppBar: vertical separator + project title group (title sits to the left) */
.appbar-separator {
    width: 1px;
    height: 20px;
    flex: 0 0 auto;
    background-color: currentColor;
    opacity: 0.3;
    margin: 0 12px;
}

.appbar-title-group {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* --- Left activity bar (VS Code style) --- */
.suity-activity-bar {
    width: 48px;
    flex: 0 0 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 14px;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
}

.suity-activity-divider {
    width: 24px;
    height: 1px;
    flex: 0 0 1px;
    margin: 4px 0;
    background-color: var(--mud-palette-lines-default);
}

.suity-activity-button {
    border-left: 2px solid transparent;
    border-radius: 0 !important;
}

.suity-activity-button:not(.active) {
    opacity: 0.6;
}

.suity-activity-button.active {
    border-left: 2px solid var(--mud-palette-primary);
}

/* --- Workspace row: query container that anchors the left panel's content
   width, so animating the panel width never reflows its content --- */
.suity-workspace-row {
    container-type: inline-size;
}

/* --- Left panel (activity content) expand/collapse animation --- */
.suity-left-panel {
    flex: 0 0 var(--suity-left-panel-size, 30%);
    width: auto;
    min-width: 240px;
    height: 100%;
    overflow: hidden;
    transition: flex-basis 0.25s ease, opacity 0.25s ease;
}

/* The panel content always fills the panel; while dragging, the pane itself
   resizes and the content reflows instead of staying pinned. */
.suity-left-panel-body {
    width: 100%;
    /* Pin the expanded content width so the collapse/expand animation only
       clips the panel instead of re-laying out its contents every frame. */
    width: max(240px, calc((100cqw - 48px) * var(--suity-left-panel-ratio, 0.30)));
    height: 100%;
    overflow: hidden;
}

.suity-left-panel.collapsed {
    flex-basis: 0;
    width: 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
}

.suity-splitter {
    position: relative;
    z-index: 3;
    flex: 0 0 5px;
    min-width: 5px;
    align-self: stretch;
    margin: 0 -2px;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
}

/* The hit area is 5px, but the visible divider is a single darkest line. */
.suity-splitter::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-0.5px);
    background: #0b0b0b;
    transition: background-color 0.12s ease;
}

.suity-splitter:hover::after,
.suity-split-dragging .suity-splitter::after {
    background: var(--mud-palette-primary);
}

.suity-splitter.is-hidden {
    display: none;
}

.suity-splitter-horizontal {
    flex: 0 0 5px;
    width: 100%;
    min-width: 0;
    min-height: 5px;
    margin: -2px 0;
    cursor: row-resize;
}

.suity-splitter-horizontal::after {
    top: 50%;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    transform: translateY(-0.5px);
}

.suity-split-dragging .suity-left-panel {
    transition: none;
}

.suity-split-dragging .suity-left-panel-body {
    width: 100%;
}

.suity-runtime-preview-pane {
    flex: 0 0 var(--runtime-preview-size, 65%);
    min-width: 0;
    min-height: 0;
}

.suity-scene-canvas-pane {
    flex: 0 0 var(--suity-scene-canvas-size, 68%);
    min-width: 360px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background);
}

.suity-scene-canvas-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.suity-module-dock {
    flex: 0 0 var(--suity-module-dock-size, 28%);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.suity-module-dock.is-collapsed {
    flex: 0 0 32px;
    min-height: 32px;
}

.suity-module-dock.is-collapsed .suity-module-dock-body {
    display: none;
}

.suity-module-dock-header {
    flex: 0 0 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.suity-module-dock-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.suity-module-dock-toggle:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.suity-module-dock-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.suity-module-dock-tab {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.suity-module-dock-tab:hover {
    background: var(--mud-palette-action-default-hover);
}

.suity-module-dock-tab.is-active {
    color: var(--mud-palette-text-primary, #fff);
    background: transparent;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--mud-palette-text-primary, #fff);
}

.suity-module-dock-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.suity-module-panel-host {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: 6px 8px;
}

.suity-module-panel-error {
    color: var(--mud-palette-error);
    font-size: 12px;
    padding: 6px 0;
}

.suity-scene-side-pane {
    flex: 1 1 0;
    min-width: 260px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
}

.suity-scene-tree-pane {
    flex: 0 0 var(--suity-scene-tree-size, 38%);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

/* Compact Layer/Tag filters in the scene tree header. */
.scene-tree-layer-filter,
.scene-tree-tag-filter {
    font-size: 0.75rem;
}

.scene-tree-layer-filter .mud-input-control,
.scene-tree-tag-filter .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.scene-tree-layer-filter .mud-input,
.scene-tree-layer-filter .mud-input-slot,
.scene-tree-layer-filter .mud-select-input,
.scene-tree-layer-filter .mud-input-adornment,
.scene-tree-tag-filter .mud-input,
.scene-tree-tag-filter .mud-input-slot,
.scene-tree-tag-filter .mud-select-input,
.scene-tree-tag-filter .mud-input-adornment {
    font-size: 0.75rem;
}

.scene-tree-layer-filter .mud-input > input.mud-input-root-outlined,
.scene-tree-layer-filter .mud-input > div.mud-input-slot.mud-input-root-outlined,
.scene-tree-layer-filter .mud-select-input,
.scene-tree-tag-filter .mud-input > input.mud-input-root-outlined,
.scene-tree-tag-filter .mud-input > div.mud-input-slot.mud-input-root-outlined,
.scene-tree-tag-filter .mud-select-input {
    padding: 2px 6px !important;
}

.scene-tree-layer-filter .mud-input-adornment,
.scene-tree-tag-filter .mud-input-adornment {
    padding: 0 4px 0 0;
}

.scene-tree-layer-filter .mud-input-adornment .mud-icon-root,
.scene-tree-tag-filter .mud-input-adornment .mud-icon-root {
    width: 1em;
    height: 1em;
    font-size: 1.1rem;
}

.suity-scene-inspector-pane {
    flex: 1 1 0;
    min-height: 180px;
    overflow: auto;
    background: var(--mud-palette-surface);
    padding: 8px;
}

/* --- Actions panel --- */
.suity-actions-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--mud-palette-surface);
}

.suity-actions-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 16px 8px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.suity-actions-version {
    opacity: 0.55;
    margin-right: 2px;
}

.suity-actions-search {
    padding: 8px 16px 0 16px;
}

.suity-actions-tree-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 4px 16px 16px 16px;
}

.suity-actions-tree {
    width: 100%;
}

.suity-actions-empty {
    padding: 16px 8px;
    opacity: 0.6;
}

.suity-action-detail-view {
    height: 100%;
    min-height: 0;
    overflow: auto;
    padding: 16px;
}

.suity-action-detail-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.suity-action-detail-title {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}

.suity-actions-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.suity-action-summary {
    opacity: 0.85;
    margin-bottom: 8px;
}

.suity-action-section {
    margin-top: 14px;
    margin-bottom: 4px;
    font-weight: 600;
}

.suity-actions-code {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-surface) 88%, #000);
    border: 1px solid var(--mud-palette-lines-default);
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
}

.suity-actions-mapping {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
}

.suity-actions-mapping div {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.suity-actions-mapping span {
    min-width: 110px;
    opacity: 0.65;
}

.suity-actions-mapping code {
    word-break: break-all;
}

.suity-actions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.suity-actions-table th {
    text-align: left;
    font-weight: 600;
    opacity: 0.7;
    padding: 4px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
}

.suity-actions-table td {
    padding: 4px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
    vertical-align: top;
}

.suity-actions-table code {
    font-size: 11.5px;
}

.suity-action-required {
    color: var(--mud-palette-error);
    margin-left: 2px;
}

.suity-actions-return {
    margin-bottom: 6px;
}

.suity-actions-muted {
    opacity: 0.6;
}

.suity-action-leaf-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: 2px 0;
    line-height: 1.25;
}

.suity-action-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.suity-action-desc {
    margin-top: 1px;
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suity-action-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suity-action-leaf-active .suity-action-label {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.suity-action-category-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 6px;
}

.suity-action-category-label {
    font-weight: 600;
}

.suity-action-count {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.55;
    padding-right: 4px;
}

.suity-action-pill {
    margin-left: auto;
    font-size: 10px;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-warning);
    color: var(--mud-palette-warning);
}

.suity-actions-playground {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.suity-actions-playground-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.suity-actions-playground-split {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.suity-actions-playground-editor {
    flex: 0 0 var(--suity-playground-editor-size, 65%);
    min-height: 120px;
    overflow: hidden;
}

#actions-playground-editor,
#actions-playground-editor .monaco-editor {
    width: 100%;
    height: 100% !important;
}

.suity-actions-playground-output {
    flex: 1 1 0;
    min-height: 80px;
    overflow: auto;
    background: color-mix(in srgb, var(--mud-palette-surface) 90%, #000);
}

.suity-actions-playground-output pre {
    margin: 0;
    padding: 8px 10px;
    font-size: 11.5px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Scene inspector fields: slightly recessed background and compact padding.
   Keeps the top space needed by the floating outlined label, but trims the
   left/right/bottom padding and the control margins. */
.suity-scene-inspector-pane .mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label {
    margin-top: 6px;
    margin-bottom: 4px;
}

.suity-scene-inspector-pane .mud-input.mud-input-outlined {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 92%, #000);
    border-radius: var(--mud-default-borderradius);
}

.suity-scene-inspector-pane .mud-input > input.mud-input-root-outlined:not(.mud-input-root-multiline),
.suity-scene-inspector-pane .mud-input > div.mud-input-slot.mud-input-root-outlined:not(.mud-input-root-multiline) {
    padding: 9px 8px 4px;
}

.suity-scene-inspector-pane .mud-input.mud-input-outlined > .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--mud-palette-lines-inputs) 60%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .suity-scene-inspector-pane .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover > .mud-input-outlined-border {
        border-color: color-mix(in srgb, var(--mud-palette-lines-inputs) 85%, transparent);
    }
}

.suity-scene-inspector-pane .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-color: var(--mud-palette-primary);
}

.suity-scene-inspector-pane .mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(8px, 12px) scale(1);
    max-width: calc(100% - 8px);
}

.suity-scene-inspector-pane .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.suity-scene-inspector-pane .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.suity-scene-inspector-pane .mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(8px, -6px) scale(0.75);
    max-width: calc((100% - 8px) / 0.75);
}

.suity-scene-inspector-pane .mud-input.mud-input-outlined > .mud-input-outlined-border legend {
    margin: 0 5px;
}

.suity-workspace-tree-pane {
    flex: 0 0 var(--suity-tree-pane-size, 25%);
    min-width: 180px;
    min-height: 0;
    overflow-y: auto;
}

.suity-workspace-editor-pane {
    flex: 1 1 0;
    min-width: 360px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* --- Empty agent list: periodic light sweep across the add item --- */
.agent-add-sweep {
    position: relative;
    overflow: hidden;
}

.agent-add-sweep::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    animation: agent-add-sweep 5s ease-in-out infinite;
}

.mud-theme-light .agent-add-sweep::after {
    background: linear-gradient(100deg, transparent, rgba(0, 0, 0, 0.05), transparent);
}

@keyframes agent-add-sweep {
    0% {
        transform: translateX(-150%) skewX(-15deg);
    }
    48% {
        transform: translateX(350%) skewX(-15deg);
    }
    100% {
        transform: translateX(350%) skewX(-15deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .agent-add-sweep::after {
        animation: none;
    }
}


/* App publish "Upload" tab drop zone */
.suity-dropzone {
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.suity-dropzone:hover {
    border-color: var(--mud-palette-primary);
}

.suity-dropzone-active {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

/* App publish dialog: bordered tab sub-panel */
.suity-tab-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 16px;
}

/* OpenCode conversation list: blue dot for a turn that finished while unread */
.opencode-unread-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2196f3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.22);
}

/* OpenCode Markdown rendering */
.opencode-md { word-break: break-word; }
.opencode-md p { margin: 0 0 6px 0; }
.opencode-md p:last-child { margin-bottom: 0; }
.opencode-md ul, .opencode-md ol { margin: 0 0 6px 0; padding-left: 20px; }
.opencode-md li { margin: 0; }
.opencode-md pre { margin: 6px 0; border-radius: 4px; overflow: auto; background: #0d1117; color: #c9d1d9; }
/* Match hljs' code-block box before highlighting runs, otherwise the block's padding/size
   jumps every time a streaming re-render recreates the DOM (visible as flicker). */
.opencode-md pre code { display: block; overflow-x: auto; padding: 1em; color: inherit; }
.opencode-md code { font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: 0.85em; }
.opencode-md :not(pre) > code { background: var(--mud-palette-action-default-hover); padding: 1px 4px; border-radius: 3px; }
.opencode-md h1, .opencode-md h2, .opencode-md h3, .opencode-md h4, .opencode-md h5, .opencode-md h6 { margin: 6px 0 4px 0; }
.opencode-md a { color: var(--mud-palette-primary); }
.opencode-md table { border-collapse: collapse; margin: 6px 0; }
.opencode-md th, .opencode-md td { border: 1px solid var(--mud-palette-lines-default); padding: 2px 6px; }
.opencode-md blockquote { margin: 6px 0; padding-left: 8px; border-left: 3px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }

/* Compact tool-call cards in the AI coding chat */
.opencode-tool .mud-expand-panel .mud-expand-panel-header {
    min-height: 30px;
    padding: 4px 8px;
}
.opencode-tool .mud-expand-panel .mud-expand-panel-header .mud-expand-panel-text {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.opencode-tool .mud-expand-panel .mud-expand-panel-content {
    padding: 0 8px 6px 8px;
}
.opencode-tool .mud-expand-panel.mud-panel-expanded {
    margin: 4px 0;
}
.opencode-tool.opencode-tool-failed .mud-expand-panel .mud-expand-panel-header .mud-expand-panel-text {
    color: var(--mud-palette-error);
}

/* Structured detail rows inside a tool card */
.oc-tool-fields {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 8px 0;
}
.oc-tool-field {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 0.78rem;
}
.oc-tool-field-key {
    flex: 0 0 auto;
    min-width: 56px;
    color: var(--mud-palette-text-secondary);
}
.oc-tool-field-val {
    flex: 1 1 auto;
    font-family: monospace;
    word-break: break-all;
    white-space: pre-wrap;
}
.oc-tool-raw {
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}
.oc-tool-raw summary {
    cursor: pointer;
}

/* Inline mini-diff (edit tool) */
.oc-diff {
    margin: 4px 0 8px 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: auto;
    max-height: 320px;
    font-family: monospace;
    font-size: 0.75rem;
    line-height: 1.35;
}
.oc-diff-line {
    white-space: pre-wrap;
    word-break: break-all;
    padding: 0 6px;
}
.oc-diff-add { background: rgba(46, 160, 67, 0.18); }
.oc-diff-del { background: rgba(248, 81, 73, 0.18); }
.oc-diff-ctx { color: var(--mud-palette-text-secondary); }

.oc-agent-msg {
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
}
.oc-agent-msg.assistant { border-left: 3px solid var(--mud-palette-primary); }
.oc-agent-msg.system { border-left: 3px solid var(--mud-palette-text-secondary); }
.oc-agent-msg.tool { border-left: 3px solid var(--mud-palette-info); }
.oc-agent-msg.subagent { border-left: 3px solid var(--mud-palette-secondary); }
.oc-agent-msg.warn { border-left-color: var(--mud-palette-warning); }
.oc-agent-msg.error { border-left-color: var(--mud-palette-error); }
.oc-agent-msg.running { opacity: 0.85; }
.oc-agent-msg .opencode-md { font-size: 0.85rem; }
.oc-agent-role {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

/* Context-usage bar: thin strip at the top of the chat view (hover = token values) */
.oc-context-bar {
    flex-shrink: 0;
    height: 3px;
    width: 100%;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}
.oc-context-fill {
    height: 100%;
    width: 0%;
    transition: width .25s ease, background-color .25s ease;
}

/* Live context-compaction progress card (streams the summary while compacting) */
.oc-compacting {
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-action-default-hover);
}
.oc-compacting-text {
    margin-top: 6px;
    max-height: 160px;
    overflow: auto;
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

/* Generic sweep/shimmer for the AI coding "thinking" hint and running tools */
.suity-sweep {
    position: relative;
    overflow: hidden;
}
.suity-sweep::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    animation: suity-sweep 1.6s ease-in-out infinite;
}
.mud-theme-light .suity-sweep::after {
    background: linear-gradient(100deg, transparent, rgba(0, 0, 0, 0.06), transparent);
}
@keyframes suity-sweep {
    0% { transform: translateX(-150%) skewX(-15deg); }
    100% { transform: translateX(350%) skewX(-15deg); }
}
@media (prefers-reduced-motion: reduce) {
    .suity-sweep::after { animation: none; }
}

/* Final assistant text block: meta footer revealed on hover */
.oc-text-block {
    position: relative;
}
.oc-text-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
    opacity: 0;
    transition: opacity 120ms ease;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}
/* The hover state is toggled by chat-hover.js on the meta element itself. A CSS rule like
   `.oc-text-block:hover .oc-text-meta` would make the browser invalidate the whole (potentially
   huge) reply subtree on every hover change, which can take seconds on long answers. */
.oc-text-meta.oc-hover-visible {
    opacity: 1;
}

/* User message bubble: right aligned, <= 75% width, hover toolbar */
.oc-user-block {
    max-width: 75%;
    position: relative;
}
.oc-user-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 120ms ease;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}
.oc-user-meta.oc-hover-visible {
    opacity: 1;
}

/* Compact selects in the AI Coding toolbars: smaller, muted, borderless (border only on hover/focus) */
.oc-toolbar-select .mud-input,
.oc-toolbar-select .mud-input-slot,
.oc-toolbar-select .mud-select-input,
.oc-toolbar-select input {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}
.oc-toolbar-select .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: transparent;
}
.oc-toolbar-select .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-default);
}
.oc-toolbar-select .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary);
}
.oc-toolbar-select .mud-input-adornment,
.oc-toolbar-select .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

/* Tighten the gap between the input field and its toolbar */
.oc-input-panel .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* New-chat composer: grow with the content, then scroll internally before the card
   (and its send button) would be pushed off-screen. MudBlazor writes inline height and
   overflow-y, so the overflow must be forced with !important. */
.oc-newchat-input textarea {
    max-height: calc(100vh - 320px);
    overflow-y: auto !important;
}

/* Composer skills: chips above uploads; visually separate from file attachments */
.oc-skill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.oc-skill-row-label {
    opacity: .6;
    flex: 0 0 auto;
    margin-right: 2px;
}
.oc-skill-row-summary {
    font-size: .7rem;
    opacity: .65;
    margin-left: 2px;
}
.oc-skill-row-warning {
    font-size: .7rem;
    color: var(--mud-palette-warning);
}
.oc-skill-row-clear {
    min-width: auto;
}
.oc-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 2px 2px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    font-size: .75rem;
    line-height: 1.4;
}
.oc-skill-chip-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-skill-chip .oc-skill-chip-remove {
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0;
}

/* Composer uploads: attachment thumbnails + drag & drop highlight */
.oc-attachment {
    position: relative;
    display: inline-flex;
}
.oc-attachment .oc-attachment-remove {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--mud-palette-surface);
    border-radius: 50%;
    padding: 0;
}
.oc-drop-hover {
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: -4px;
}

/* Clickable attachment thumbnails (composer + chat history) */
.oc-image-thumb {
    cursor: zoom-in;
}

/* Images produced by a tool (e.g. suity_run svg.screenshot) */
.oc-tool-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 8px 0;
}
.oc-tool-images img {
    max-width: 180px;
    max-height: 180px;
    border-radius: 6px;
    display: block;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Image preview dialog */
.oc-image-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: var(--mud-default-borderradius);
    background: rgba(0, 0, 0, 0.85);
    max-height: 80vh;
    overflow: auto;
}
.oc-image-preview img {
    display: block;
    max-width: 100%;
    max-height: 76vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Markdown code block: copy button in the top-right corner */
.md-code {
    position: relative;
    margin: 6px 0;
}
.md-code pre {
    margin: 0;
}
.md-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}
.md-code:hover .md-copy-btn {
    opacity: 1;
}
.md-copy-btn:hover {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}
.md-copy-btn.copied {
    color: var(--mud-palette-success);
    opacity: 1;
}

/* Right-pane tab strip (Workspace / Preview / dynamic extension tab) */
.suity-right-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex: 0 0 auto;
    padding: 4px 6px 0 6px;
    overflow-x: auto;
}
.suity-right-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    font-size: 0.875rem;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 260px;
}
.suity-right-tab > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.suity-right-tab-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
}
.suity-right-tab:hover {
    background: var(--mud-palette-action-default-hover);
}
.suity-right-tab.active {
    color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
    box-shadow: inset 0 -2px 0 0 var(--mud-palette-primary);
    font-weight: 500;
}
.suity-right-tab-close {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    cursor: pointer;
    opacity: 0.7;
}
.suity-right-tab-close:hover {
    opacity: 1;
}

/* P7.3: Engine Scene/Prefab canvas host. The adapter appends its own canvas and
   draws the camera-following grid itself. */
.scene-canvas-host {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}
.scene-canvas-host canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Multi-selection inspector shell and mixed-value fields. */
.scene-selection-shell {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 92%, #000);
}

/* Unified Scene inspector component sections. */
.scene-component-section {
    padding: 2px 0 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.scene-component-header {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    margin-bottom: 4px;
    padding: 0 2px;
    border-radius: 4px;
    user-select: none;
}

.scene-component-header.is-draggable {
    cursor: grab;
}

.scene-component-header.is-draggable:active {
    cursor: grabbing;
}

.scene-component-header.is-draggable:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

.scene-component-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.scene-component-toggle:hover {
    color: var(--mud-palette-text-primary);
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
}

.scene-component-toggle .mud-icon-root {
    font-size: 1rem;
}

.scene-component-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.scene-component-menu {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.scene-component-section.is-dragging {
    opacity: 0.45;
}

.scene-component-drop {
    position: relative;
    height: 14px;
    margin: -7px 0;
    z-index: 3;
    pointer-events: none;
}

.scene-inspector-component-dragging .scene-component-drop {
    pointer-events: auto;
}

.scene-component-drop.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    height: 2px;
    border-radius: 1px;
    background: var(--mud-palette-primary);
}

.scene-component-drop-end {
    margin-bottom: 0;
}

/* Add-component button below the component sections. */
.scene-add-component-bar {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

/* Small fixed-size floating list; scrolls when the catalog grows. */
.scene-add-component-popover {
    width: 190px;
    min-width: 190px;
}

.scene-add-component-list {
    max-height: 220px;
    overflow-y: auto;
}

/* Render component that loses to an earlier component in the same render slot. */
.scene-render-component-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mud-palette-warning);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.suity-scene-inspector-pane .scene-field-mixed .mud-input.mud-input-outlined {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 16%, var(--mud-palette-surface)) !important;
}

/* Let the Prefab submenu escape the context menu list. */
.suity-context-menu,
.suity-context-menu .mud-list {
    overflow: visible !important;
}

/* Workspace file-tree locate sweep. */
.suity-file-row {
    position: relative;
    overflow: hidden;
}

.suity-file-row.suity-file-locate::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 3px;
    background: linear-gradient(
        105deg,
        transparent 0%,
        color-mix(in srgb, #8a7fb5 34%, transparent) 42%,
        color-mix(in srgb, #e5dcff 42%, transparent) 52%,
        transparent 100%
    );
    transform: translateX(-110%);
    animation: suity-file-locate-sweep 1s ease-out;
}

@keyframes suity-file-locate-sweep {
    from {
        transform: translateX(-110%);
    }
    to {
        transform: translateX(110%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .suity-file-row.suity-file-locate::after {
        animation-duration: 0.01ms;
    }
}

/* Asset registry pick banner. */
.asset-pick-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid var(--mud-palette-primary);
    border-left-width: 4px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
}

.asset-pick-banner .mud-icon-root {
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.asset-pick-banner-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.asset-pick-banner-title {
    font-weight: 600;
    font-size: 13px;
}

.asset-pick-banner-hint {
    font-size: 12px;
    opacity: .75;
}

/* Asset registry locate sweep (table rows and grid tiles). */
.asset-registry-row.is-locate,
.asset-tile.is-locate {
    background-image: linear-gradient(
        105deg,
        transparent 0%,
        color-mix(in srgb, #8a7fb5 34%, transparent) 42%,
        color-mix(in srgb, #e5dcff 42%, transparent) 52%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: asset-registry-locate-sweep 1s ease-out;
}

@keyframes asset-registry-locate-sweep {
    from {
        background-position: 180% 0;
    }
    to {
        background-position: -80% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .asset-registry-row.is-locate,
    .asset-tile.is-locate {
        animation-duration: 0.01ms;
    }
}

/* Prefab override field wrapper: keeps the input in the parent flex layout. */
.scene-override-field-host {
    display: contents;
}

/* Inspector field groups: column count comes from catalog presentation metadata. */
.scene-inspector-field-grid {
    display: grid;
    column-gap: 8px;
    row-gap: 8px;
    margin-bottom: 8px;
}

.scene-inspector-field-grid > .scene-override-field-host {
    min-width: 0;
}

.scene-field-control {
    min-width: 0;
}

/* Boolean checkbox/toggle controls keep the inspector's dense field height. */
.scene-field-checkbox,
.scene-field-toggle {
    display: flex;
    align-items: center;
    min-height: 40px;
    box-sizing: border-box;
}

.scene-field-toggle {
    justify-content: flex-start;
}

.scene-field-toggle-group {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.scene-field-checkbox .mud-checkbox,
.scene-field-checkbox .mud-input-control {
    margin: 0;
}

.scene-field-toggle .mud-icon-button {
    flex: 0 0 auto;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--mud-default-borderradius);
}

.scene-field-toggle.scene-field-mixed .mud-icon-button {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    border-style: dashed;
}

/* Compact custom property rows: value control + settings/delete actions. */
.scene-property-item {
    position: relative;
    margin-bottom: 4px;
}

.scene-property-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 4px;
}

/* Vertical drag handle for reordering property rows. */
.scene-property-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 18px;
    margin-right: 2px;
    border-radius: 3px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.55;
    cursor: grab;
    user-select: none;
}

.scene-property-handle:hover {
    opacity: 1;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}

.scene-property-handle:active {
    cursor: grabbing;
}

.scene-property-handle.is-disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

.scene-property-item.is-dragging {
    opacity: 0.45;
}

/* Absolute drop zones keep the compact row spacing unchanged. */
.scene-property-drop {
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    z-index: 3;
    pointer-events: none;
}

.scene-property-drop-before {
    top: -5px;
}

.scene-property-drop-after {
    bottom: -10px;
}

.suity-scene-inspector-pane.scene-inspector-property-dragging .scene-property-drop {
    pointer-events: auto;
}

.scene-property-drop.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 4px;
    height: 2px;
    border-radius: 1px;
    background: var(--mud-palette-primary);
}

.scene-property-readonly-hint {
    display: block;
    margin: 2px 2px 6px;
    opacity: 0.65;
}

.scene-property-main,
.scene-property-value {
    min-width: 0;
}

.scene-property-value .mud-input-control,
.scene-property-main > .mud-input-control {
    width: 100%;
}

/* Numeric inspector fields: horizontal drag to adjust, click to type. */
.scene-number-drag,
.scene-number-drag input {
    cursor: ew-resize;
}

/* Keyboard editing mode: native text selection, so restore the default cursor. */
.scene-number-drag:focus-within,
.scene-number-drag:focus-within input {
    cursor: default;
}

body.suity-numeric-dragging,
body.suity-numeric-dragging * {
    cursor: ew-resize !important;
    user-select: none !important;
}

.scene-property-vector {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.scene-property-vector > .scene-property-value {
    flex: 1 1 0;
    min-width: 0;
}

.scene-property-name {
    display: block;
    margin: 0 0 2px 2px;
    line-height: 1.2;
    opacity: 0.7;
}

.scene-property-boolean {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
}

.scene-property-boolean-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scene-property-boolean .mud-input-control {
    width: auto;
    flex: 0 0 auto;
}

.scene-property-boolean .mud-checkbox {
    margin: 0;
    flex-shrink: 0;
}

.scene-property-actions {
    display: flex;
    align-items: flex-start;
    align-self: center;
}

.scene-reference-field {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.scene-reference-locate-field {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.scene-reference-locate-field .mud-input-control,
.scene-reference-locate-field .mud-input-slot,
.scene-reference-locate-field input {
    cursor: pointer;
}

.scene-property-warning {
    display: block;
    margin: 2px 2px 0 2px;
    color: var(--mud-palette-warning);
}

.scene-property-config {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1400;
    width: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    max-height: min(480px, calc(100vh - 32px));
    overflow: auto;
}

.scene-property-config-title {
    display: block;
    margin-bottom: 4px;
    opacity: 0.7;
}

.scene-property-config-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scene-property-config-fields .mud-input-control {
    width: 100%;
}

.scene-keyed-table {
    min-width: 0;
}

.scene-keyed-table-draft {
    padding: 4px 6px;
    margin: 2px 0;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: 4px;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

/* Asset locator + horizontal asset picker. */
.scene-asset-locate-field .mud-input-control,
.scene-asset-locate-field .mud-input-slot,
.scene-asset-locate-field input {
    cursor: pointer;
}

.scene-asset-locate-field.is-drop-target .mud-input.mud-input-outlined {
    outline: 1px dashed var(--mud-palette-primary);
    outline-offset: -1px;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)) !important;
}

.scene-asset-locate-field.is-drop-invalid .mud-input.mud-input-outlined {
    outline: 1px dashed var(--mud-palette-error);
    outline-offset: -1px;
    background-color: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface)) !important;
}

.scene-asset-field {
    min-width: 0;
}

.scene-asset-field.is-compact {
    flex: 1 1 140px;
    min-width: 140px;
}

.scene-asset-field .scene-asset-pick-button {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 3px;
}

.scene-asset-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    min-width: 280px;
    max-width: min(70vw, 560px);
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
}

.scene-asset-menu-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scene-asset-menu-item:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
}

.scene-asset-menu-item.is-selected {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.scene-asset-menu-path {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
}

.scene-asset-menu-empty {
    padding: 8px;
    opacity: 0.6;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Prefab override count badge in the scene tree. */
.scene-override-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 82%, #cfc6ff);
    background-color: color-mix(in srgb, #8a7fb5 26%, transparent);
    flex-shrink: 0;
}

/* Inspector field whose value is overridden on this Prefab instance. */
.suity-scene-inspector-pane .scene-field-overridden .mud-input.mud-input-outlined {
    background-color: color-mix(in srgb, #8a7fb5 24%, var(--mud-palette-surface)) !important;
}

.suity-scene-inspector-pane .scene-field-overridden .mud-input.mud-input-outlined:focus-within {
    background-color: color-mix(in srgb, #8a7fb5 30%, var(--mud-palette-surface)) !important;
}

/* Compact multiple-selection counter; stays within the toolbar row height. */
.scene-selection-count {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 0.6875rem;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

/* Scene node tree drag & drop */
:root {
    --suity-tree-selected-bg: color-mix(in srgb, #25a8b8 28%, transparent);
    --suity-tree-selected-hover-bg: color-mix(in srgb, #6fd6e2 36%, transparent);
}

.scene-node-row {
    position: relative;
    min-height: 20px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 0.8125rem;
    line-height: 16px;
    cursor: default;
}

.scene-node-row > .mud-icon-root {
    font-size: 16px !important;
}

.scene-node-row > .scene-node-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    vertical-align: middle;
}

.scene-node-row .mud-typography-caption {
    font-size: 0.6875rem;
    line-height: 1;
}

.scene-tree-toggle,
.scene-tree-toggle-spacer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.scene-tree-toggle {
    cursor: pointer;
    border-radius: 3px;
    color: var(--mud-palette-text-secondary);
}

.scene-tree-toggle:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    color: var(--mud-palette-text-primary);
}

.scene-tree-toggle .mud-icon-root {
    font-size: 1rem;
}
.scene-node-row:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}
.scene-node-row.is-selected {
    background-color: var(--suity-tree-selected-bg);
}
.scene-node-row.is-selected:hover {
    background-color: var(--suity-tree-selected-hover-bg);
}
.scene-node-row.is-dragging {
    opacity: 0.45;
}
.scene-node-row.is-drop-inside {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) !important;
}

.scene-node-row.is-locate {
    overflow: hidden;
}

.scene-node-row.is-locate::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 0%,
        color-mix(in srgb, #8a7fb5 34%, transparent) 42%,
        color-mix(in srgb, #e5dcff 42%, transparent) 52%,
        transparent 100%
    );
    transform: translateX(-110%);
    animation: suity-node-locate-sweep 1s ease-out;
}

@keyframes suity-node-locate-sweep {
    from {
        transform: translateX(-110%);
    }
    to {
        transform: translateX(110%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scene-node-row.is-locate::after {
        animation-duration: 0.01ms;
    }
}
.scene-node-drop {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    z-index: 3;
    pointer-events: none;
}
.scene-tree-dragging .scene-node-drop {
    pointer-events: auto;
}
.scene-node-drop-before {
    top: 0;
}
.scene-node-drop-after {
    bottom: 0;
}
.scene-node-drop.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    height: 2px;
    background: var(--mud-palette-primary);
    border-radius: 1px;
}
.scene-node-root-drop {
    margin-top: 6px;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
.scene-node-root-drop.is-active {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

/* Viewport overlay toolbars (Prefab edit bar, gizmo tools, view tools). */
.scene-viewport-toolbar {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(28, 32, 36, 0.86);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);
}
.scene-viewport-toolbar .mud-icon-button {
    color: rgba(245, 247, 248, 0.9);
}
.scene-viewport-toolbar .mud-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.scene-viewport-toolbar .mud-icon-button.mud-disabled {
    color: rgba(245, 247, 248, 0.3) !important;
}
.scene-viewport-toolbar .scene-viewport-label {
    color: rgba(245, 247, 248, 0.78);
}

/* Quick overlay settings panel anchored under the Tune button. */
.scene-overlay-settings-menu {
    display: inline-flex;
}

.scene-overlay-settings-popover {
    min-width: 280px;
    max-width: 320px;
}

.scene-overlay-settings-panel {
    min-width: 260px;
    padding: 8px 12px 10px;
}

.scene-overlay-settings-panel .scene-overlay-settings-fields.compact .mud-typography-body2:not(:first-child) {
    margin-top: 6px;
}
/* Vector asset badge (SVG) */
.scene-vector-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    border-radius: 3px;
    border: 1px solid var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 16px;
    flex-shrink: 0;
}
/* AI overwrite notice (workspace) */
.workspace-ai-update-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-info);
    display: inline-block;
    flex-shrink: 0;
}

.workspace-ai-update-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px;
    min-height: 34px;
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-info) 35%, transparent);
    color: var(--mud-palette-text-primary);
    flex-shrink: 0;
}

.workspace-ai-update-text {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Anchored color picker popover for file-view extensions. */
.suity-color-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1280;
    background: transparent;
}

.suity-color-popover {
    z-index: 1290;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    outline: none;
}

.suity-color-popover .suity-color-popover-picker,
.suity-color-popover .mud-picker-inline {
    width: 100%;
}

/* Static picker: keep only the spectrum/sliders/inputs (no preview input row). */
.suity-color-popover .mud-picker-static .mud-paper {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* A host-level system prompt shown in the Skills panel; not a skill. */
.suity-system-prompt-card {
    border-left: 3px solid var(--mud-palette-info);
}