.artifact-explorer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
  background: color-mix(in srgb, var(--surface-2) 94%, var(--surface-high) 6%);
}

.workspace.artifact-mode .left-pane {
  padding: 0;
}

.workspace.artifact-mode .pane-shell {
  gap: 0;
  padding: 0;
  border: var(--glass-pane-border);
  border-radius: 0;
  box-shadow: var(--glass-pane-highlight);
  backdrop-filter: var(--glass-pane-blur);
  -webkit-backdrop-filter: var(--glass-pane-blur);
  background: var(--glass-pane-bg);
  border-left: none;
  border-right: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
}

/* The methodology navigator replaces the artifact explorer in this column.
   Keep its normal pane spacing instead of inheriting the explorer's flush
   layout. */
.workspace.artifact-mode.left-pane-methodology .left-pane {
  padding: 8px 7px;
}

.workspace.artifact-mode.left-pane-methodology .pane-shell {
  gap: 8px;
  padding: 8px;
  border: var(--glass-pane-border);
  border-radius: 7px;
}

.workspace.artifact-mode .canvas-stage {
  padding: 0;
}

.artifact-explorer-title {
  color: var(--muted);
  font: 700 10px/1.2 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.artifact-explorer-action {
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.artifact-explorer-action:hover {
  border-color: color-mix(in srgb, var(--border) 74%, transparent);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  color: var(--text);
}

.artifact-tree-toggle-icon {
  width: 16px;
  height: 16px;
}

.artifact-explorer-root {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  color: var(--text-strong);
  font: 600 12px/1.3 var(--font-ui);
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-high) 6%);
}

.artifact-explorer-root-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-light);
}

.file-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: color-mix(in srgb, var(--surface-contrast) 96%, var(--surface) 4%);
  padding: 6px 0;
  scrollbar-gutter: stable both-edges;
}

.file-tree-empty {
  padding: 12px 10px;
  color: var(--muted);
  font: 500 12px/1.4 var(--font-ui);
}

.file-tree-children {
  display: block;
  padding-left: 8px;
}

.file-tree-dir,
.file-tree-item {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  text-align: left;
  cursor: pointer;
  border-left: 2px solid transparent;
  font: 500 12px/1.3 var(--font-ui);
}

.file-tree-dir {
  color: color-mix(in srgb, var(--text) 90%, var(--muted) 10%);
}

.file-tree-dir:hover,
.file-tree-item:hover {
  background: color-mix(in srgb, var(--surface-3) 74%, transparent);
}

.file-tree-item.active {
  background: color-mix(in srgb, var(--accent-glow) 72%, transparent);
  color: var(--accent-light);
  border-left-color: color-mix(in srgb, var(--accent) 84%, transparent);
}

.file-tree-indent {
  width: calc(var(--tree-depth, 0) * 18px);
  flex-shrink: 0;
}

.file-tree-dir-chevron {
  width: 16px;
  height: 16px;
  color: var(--muted-2);
  transition: color var(--transition);
}

.file-tree-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}

.file-tree-dir .file-tree-icon {
  color: var(--accent-light);
}

.file-tree-item.active .file-tree-icon {
  color: var(--accent-light);
}

.file-tree-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artifact-editor {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 74%, transparent);
  background: color-mix(in srgb, var(--surface-contrast) 96%, var(--surface) 4%);
  overflow: hidden;
}

.workspace.artifact-mode .artifact-editor {
  border: none;
  border-radius: 0;
}

.artifact-editor-tabs,
.artifact-editor-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
  background: color-mix(in srgb, var(--surface-2) 94%, var(--surface-high) 6%);
}

.artifact-editor-tab {
  min-width: 0;
  max-width: 420px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 10px;
  border-top: 2px solid transparent;
  color: var(--muted);
  background: transparent;
}

.artifact-editor-tab.active {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--surface-contrast) 94%, var(--surface-high) 6%);
  border-top-color: color-mix(in srgb, var(--accent) 84%, transparent);
}

.artifact-editor-tab-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-light);
  flex-shrink: 0;
}

.artifact-editor-save-btn {
  margin-left: auto;
}

.artifact-editor-fileicon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
  background: color-mix(in srgb, var(--accent-glow) 68%, transparent);
  color: var(--accent-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 10px/1 var(--font-display);
  letter-spacing: 0.08em;
}

.artifact-editor-filename {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 500 12px/1.3 var(--font-mono);
}

.artifact-editor-body {
  flex: 1;
  min-height: 0;
  display: flex;
  background: color-mix(in srgb, var(--canvas-bg) 98%, var(--surface) 2%);
}

.artifact-editor-line-numbers {
  width: 56px;
  margin: 0;
  padding: 12px 10px;
  border-right: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
  background: color-mix(in srgb, var(--surface-2) 94%, var(--surface-high) 6%);
  color: var(--muted-2);
  text-align: right;
  user-select: none;
  overflow: hidden;
  white-space: pre;
  font: 500 12px/1.7 var(--font-mono);
}

.artifact-editor-host {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.artifact-editor-content {
  flex: 1;
  min-height: 0;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  padding: 12px;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
  font: 500 13px/1.7 var(--font-mono);
}

.artifact-editor-statusbar {
  height: 24px;
  padding: 0 10px;
  border-top: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
  background: color-mix(in srgb, var(--accent) 32%, #1f6feb 68%);
  color: #dce9ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 500 11px/1 var(--font-ui);
}

.artifact-editor-status-left,
.artifact-editor-status-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.artifact-editor-status-right {
  justify-content: flex-end;
}

.artifact-editor-status-sep {
  color: color-mix(in srgb, #dce9ff 76%, transparent);
}

.artifact-editor-statusbar span {
  white-space: nowrap;
}

.artifact-editor-host .monaco-editor,
.artifact-editor-host .overflow-guard {
  border-radius: 0;
}

html.light .artifact-editor,
html.light .file-tree {
  background: color-mix(in srgb, var(--surface) 94%, #fff 6%);
}

html.light .artifact-editor-statusbar {
  background: color-mix(in srgb, var(--accent) 24%, #f0f6ff 76%);
  color: #12325f;
}

html.light .artifact-editor-status-sep {
  color: color-mix(in srgb, #12325f 55%, transparent);
}

@media (max-width: 920px) {
  .artifact-editor-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .artifact-editor-tabs::-webkit-scrollbar {
    display: none;
  }

  .artifact-editor-tab {
    max-width: min(180px, 42vw);
  }

  .artifact-editor-header {
    flex-wrap: wrap;
    gap: 4px;
    min-height: auto;
    padding-block: 4px;
  }

  .artifact-editor-statusbar {
    flex-wrap: wrap;
    min-height: 28px;
    height: auto;
    padding-block: 4px;
  }
}

@media (max-width: 560px) {
  .artifact-editor-tab {
    max-width: min(120px, 36vw);
    font-size: 10px;
    padding-inline: 8px;
  }
}