/* Multi-artifact project workspace. It deliberately inherits the main NLC
   palette rather than introducing a separate viewer theme. */
#artifact-badge {
  position: absolute; right: 2px; bottom: 2px; min-width: 14px; padding: 1px 4px;
  border-radius: 999px; background: var(--accent-dim); color: var(--text); font-size: 9px;
  font-weight: 700; line-height: 14px; text-align: center;
}

.artifact-card {
  display: flex; width: min(100%, 420px); align-items: center; gap: 12px; margin: 8px 0;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); cursor: pointer; text-align: left; text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.artifact-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); }
.artifact-card:active { transform: scale(.99); }
.artifact-card:focus-visible,
.artifact-workspace button:focus-visible,
.artifact-workspace input:focus-visible,
.artifact-workspace textarea:focus-visible,
.artifact-workspace select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.artifact-card-icon { flex: 0 0 auto; opacity: .82; }
.artifact-card-body { min-width: 0; flex: 1; }
.artifact-card-title { overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.artifact-card-meta { margin-top: 3px; color: var(--text-dim); font-size: 11px; }
.artifact-card-arrow { color: var(--text-dim); font-size: 18px; }

#right-panel.panel-artifacts { --_panel-width: var(--artifact-pane-width, min(50%, calc(100vw - 360px))); min-width: 0; }
@media (min-width: 900px) {
  #right-panel.panel-artifacts { min-width: 420px; }
}
#right-panel.panel-artifacts #right-panel-header { box-sizing: border-box; min-width: 0; width: 100%; }
#right-panel.panel-artifacts #right-panel-content { display: flex; min-width: 0; min-height: 0; flex: 1; overflow: hidden; padding: 0; }
#panel-artifacts.active,
#artifact-panel-root { display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; }

#artifact-split-divider {
  position: relative; z-index: 11; display: block; width: 16px; min-width: 16px; flex: 0 0 16px; margin-left: -16px;
  order: 1; background: transparent; cursor: col-resize;
}
#artifact-split-divider[hidden] { display: none; }
#artifact-split-divider:not([hidden]) ~ #right-panel { border-left: 0; }
#artifact-split-divider::after { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 1px; background: var(--border); }
#artifact-split-divider:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent); }

.rail-icon[data-panel="artifacts"] { width: 32px; height: 32px; border-radius: 6px; }

.artifact-workspace {
  display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: column; background: var(--surface); color: var(--text);
}
.artifact-workspace__topbar {
  display: flex; min-width: 0; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px 9px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.artifact-workspace__topbar strong { display: block; font-size: 16px; letter-spacing: -.01em; }
.artifact-workspace__eyebrow { display: block; color: var(--text-dim); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.artifact-workspace__top-actions,
.artifact-workspace__toolbar,
.artifact-workspace__review-actions,
.artifact-workspace__annotation-actions,
.artifact-workspace__edit-actions,
.artifact-workspace__close-confirm > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.artifact-workspace__top-actions { min-width: 0; justify-content: flex-end; }

.artifact-workspace__button,
.artifact-workspace__icon-button {
  min-height: 32px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 120ms ease;
}
.artifact-workspace__icon-button { width: 32px; padding: 5px; font-size: 17px; line-height: 1; }
.artifact-workspace__button:hover,
.artifact-workspace__icon-button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); }
.artifact-workspace__button:active,
.artifact-workspace__icon-button:active { transform: scale(.97); }
.artifact-workspace__button--primary { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.artifact-workspace__button--primary:hover { background: var(--accent); }
.artifact-workspace__button--danger { border-color: color-mix(in srgb, var(--danger) 62%, var(--border)); background: color-mix(in srgb, var(--surface) 90%, var(--danger) 10%); color: var(--danger); }
.artifact-workspace__button--danger:hover { border-color: var(--danger); background: color-mix(in srgb, var(--surface) 82%, var(--danger) 18%); }
.artifact-workspace__button:disabled { cursor: not-allowed; opacity: .46; }

.artifact-workspace__tabs {
  display: flex; box-sizing: border-box; height: 40px; min-height: 40px; gap: 2px; overflow-x: auto; overflow-y: hidden; padding: 3px 8px 0;
  border-bottom: 1px solid var(--border); background: var(--bg); scrollbar-color: var(--border) transparent;
}
.artifact-workspace__tab-wrap { display: flex; min-width: 0; flex: 0 0 auto; align-items: center; border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0; }
.artifact-workspace__tab-wrap:has(.artifact-workspace__tab.is-active) { border-color: var(--border); background: var(--surface); }
.artifact-workspace__tab {
  max-width: 168px; min-height: 34px; overflow: hidden; border: 0; padding: 6px 5px 6px 10px;
  background: transparent; color: var(--text-dim); cursor: pointer; font: inherit; font-size: 12px;
  text-align: left; text-overflow: ellipsis; white-space: nowrap;
}
.artifact-workspace__tab:hover { color: var(--text); }
.artifact-workspace__tab.is-active { color: var(--text); font-weight: 650; }
.artifact-workspace__tab-wrap > .artifact-workspace__icon-button { width: 25px; min-height: 28px; margin-right: 3px; border: 0; background: transparent; color: var(--text-dim); }
.artifact-workspace__tab-badge,
.artifact-workspace__tab-suspended { max-width: 68px; overflow: hidden; padding: 2px 4px; color: var(--text-dim); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.artifact-workspace__tab-lock { color: var(--accent); }
.artifact-workspace__tab-suspended { border: 1px solid color-mix(in srgb, var(--border) 66%, var(--accent) 34%); border-radius: 999px; color: var(--text-dim); }
.artifact-workspace__tab-spinner { display: inline-block; color: var(--accent); font-size: 12px; line-height: 1; animation: artifact-tab-spin 1s linear infinite; }
.artifact-workspace__dirty-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 999px; background: var(--accent); }
.artifact-workspace__new-tab { width: 30px; min-width: 30px; height: 30px; margin: 1px 0 0 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-dim); cursor: pointer; font: inherit; font-size: 18px; }
.artifact-workspace__new-tab:hover { border-color: var(--accent); color: var(--text); }

.artifact-workspace__quick-open { padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg); }
.artifact-workspace__tab-menu,
.artifact-workspace__project-menu { display: grid; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg); color: var(--text-dim); font-size: 12px; }
.artifact-workspace__quick-open[hidden],
.artifact-workspace__tab-menu[hidden],
.artifact-workspace__project-menu[hidden] { display: none; }
.artifact-workspace__tab-menu > strong { color: var(--text); }
.artifact-workspace__menu-notice { margin: 0; color: var(--text-dim); }
.artifact-workspace__tab-menu label,
.artifact-workspace__find label { display: grid; gap: 5px; color: var(--text-dim); font-size: 12px; }
.artifact-workspace__tab-results { display: grid; max-height: 160px; overflow: auto; }
.artifact-workspace__quick-open label { display: grid; gap: 6px; color: var(--text-dim); font-size: 12px; }
.artifact-workspace__quick-open input,
.artifact-workspace__tab-menu input,
.artifact-workspace__find input,
.artifact-workspace__annotation-composer textarea,
.artifact-workspace__annotation-composer select,
.artifact-workspace__editor {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
  background: var(--bg); color: var(--text); font: inherit;
}
.artifact-workspace__quick-row,
.artifact-workspace__library-row { display: grid; width: 100%; gap: 3px; margin-top: 6px; border: 0; border-bottom: 1px solid var(--border); padding: 9px 2px; background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.artifact-workspace__quick-row:hover,
.artifact-workspace__library-row:hover { color: var(--accent); }
.artifact-workspace__library-row span,
.artifact-workspace__quick-row span { overflow: hidden; color: var(--text-dim); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.artifact-workspace__tab-order-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.artifact-workspace__tab-order-row .artifact-workspace__quick-row { margin-top: 0; border-bottom: 0; }
.artifact-workspace__tab-order-controls { display: flex; align-items: center; gap: 4px; }
.artifact-workspace__tab-order-controls .artifact-workspace__button { min-height: 32px; padding: 5px 7px; font-size: 12px; white-space: nowrap; }

.artifact-workspace__view { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; }
.artifact-workspace__view-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px 8px; border-bottom: 1px solid var(--border); }
.artifact-workspace__breadcrumb { min-width: 0; overflow: hidden; color: var(--text); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.artifact-workspace__state-line { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.artifact-workspace__status,
.artifact-workspace__isolation { border: 1px solid var(--border); border-radius: 999px; padding: 2px 6px; color: var(--text-dim); font-size: 10px; font-weight: 650; }
.artifact-workspace__remote-processing { border: 1px solid var(--artifact-remote-processing-border); border-radius: 999px; padding: 2px 6px; background: color-mix(in srgb, var(--surface) 86%, var(--artifact-remote-processing-border) 14%); color: var(--text); font-size: 10px; font-weight: 650; }
.artifact-workspace__status--error,
.artifact-workspace__status--corrupt,
.artifact-workspace__status--permission { border-color: var(--danger); color: var(--danger); }
.artifact-workspace__status--stale,
.artifact-workspace__status--offline,
.artifact-workspace__status--updating { border-color: var(--accent); color: var(--accent); }
.artifact-workspace__provenance { overflow: hidden; margin: 0; padding: 6px 14px; border-bottom: 1px solid var(--border); color: var(--text-dim); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.artifact-workspace__toolbar { box-sizing: border-box; height: 48px; min-height: 48px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.artifact-workspace__toolbar > * { flex: 0 0 auto; }
.artifact-workspace__secondary-controls { display: flex; min-height: 48px; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--bg); }
.artifact-workspace__secondary-controls > * { flex: 0 0 auto; }
.artifact-workspace__toolbar-label { margin-left: 4px; padding: 5px 2px 5px 8px; border-left: 1px solid var(--border); color: var(--text-dim); font-size: 11px; font-weight: 650; }
.artifact-workspace__preview-address { max-width: min(34ch, 30vw); overflow: hidden; padding: 5px 2px; color: var(--text-dim); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.artifact-workspace__runtime { padding: 6px 14px; border-bottom: 1px solid var(--border); color: var(--text-dim); font-size: 11px; }
.artifact-workspace__content { min-height: 0; flex: 1; overflow: auto; padding: 14px; background: var(--bg); }
.artifact-workspace__offline-snapshot { margin: 0 0 12px; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border)); border-radius: 8px; padding: 9px 10px; background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); color: var(--text); font-size: 12px; line-height: 1.45; }
.artifact-workspace__feedback-notice { margin: 0 0 12px; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border)); border-radius: 8px; padding: 9px 10px; background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); color: var(--text); font-size: 12px; line-height: 1.45; }
.artifact-workspace__agent-change { display: grid; gap: 6px; margin: 0 0 12px; padding: 10px; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); color: var(--text-dim); font-size: 12px; }
.artifact-workspace__agent-change strong { color: var(--text); }
.artifact-workspace__agent-change p { margin: 0; }

.artifact-renderer { position: relative; min-height: 100%; color: var(--text); }
.artifact-renderer__annotation-overlays { position: absolute; z-index: 4; top: 10px; right: 10px; display: grid; width: min(276px, calc(100% - 20px)); max-height: min(34vh, 230px); gap: 5px; overflow: auto; padding: 8px; border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--surface) 93%, var(--accent) 7%); box-shadow: 0 8px 22px var(--artifact-annotation-shadow-color); }
.artifact-renderer__annotation-overlays > strong { color: var(--text); font-size: 11px; }
.artifact-renderer__annotation-overlay,
.artifact-renderer__annotation-overlay-more { overflow: hidden; border: 1px solid var(--border); border-radius: 5px; padding: 5px 7px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-size: 11px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.artifact-renderer__annotation-overlay:hover,
.artifact-renderer__annotation-overlay-more:hover { border-color: var(--accent); background: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%); }
.artifact-renderer__annotation-overlay:focus-visible,
.artifact-renderer__annotation-overlay-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.artifact-renderer__annotation-overlay-more { color: var(--accent); font-weight: 650; }
.artifact-renderer__text,
.artifact-renderer__code { margin: 0; transform: scale(var(--artifact-zoom)); transform-origin: top left; width: calc(100% / var(--artifact-zoom)); white-space: pre-wrap; overflow-wrap: anywhere; }
.artifact-renderer__text { max-width: 75ch; font: 14px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.artifact-renderer__code { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.artifact-workspace__code-symbols { display: grid; gap: 6px; margin: 0 0 10px; padding: 8px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); }
.artifact-workspace__code-symbols strong { color: var(--text); font-size: 12px; }
.artifact-workspace__code-symbol-list { display: flex; flex-wrap: wrap; gap: 6px; }
.artifact-workspace__code-symbol-list .artifact-workspace__button { padding: 5px 8px; font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.artifact-renderer__virtual-lines { position: relative; height: min(70vh, 680px); overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: 12px/20px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.artifact-renderer__virtual-spacer { width: 1px; pointer-events: none; }
.artifact-renderer__virtual-window { position: absolute; top: 0; inset-inline: 0; margin: 0; box-sizing: border-box; min-height: 0; border: 0; border-radius: 0; background: transparent; line-height: 20px; contain: layout paint style; transform: translate3d(0, var(--artifact-virtual-offset, 0px), 0) scale(var(--artifact-zoom)); will-change: transform; }
.artifact-renderer__sheet { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.artifact-renderer__sheet-row { display: grid; min-width: max-content; min-height: 34px; border-bottom: 1px solid var(--border); }
.artifact-renderer__sheet-row > div { min-width: 0; padding: 7px 10px; border-right: 1px solid var(--border); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-renderer__sheet-header { position: relative; z-index: 2; background: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%); font-size: 12px; font-weight: 700; }
.artifact-renderer__sheet-viewport { position: relative; height: min(70vh, 680px); overflow: auto; }
.artifact-renderer__sheet-spacer { width: 1px; pointer-events: none; }
.artifact-renderer__sheet-window { position: absolute; inset-inline: 0; top: 0; min-width: max-content; }
.artifact-renderer__sheet [role="gridcell"] { cursor: cell; }
.artifact-renderer__sheet [role="gridcell"]:hover, .artifact-renderer__sheet [role="gridcell"].is-selected { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.artifact-renderer__sheet [role="gridcell"]:focus-visible { background: color-mix(in srgb, var(--accent) 18%, transparent); outline: 2px solid var(--accent); outline-offset: -2px; }
.artifact-renderer__presentation { display: grid; gap: 12px; }
.artifact-renderer__slide { position: relative; min-height: 340px; padding: clamp(24px, 7vw, 72px); border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(140deg, color-mix(in srgb, var(--surface) 82%, var(--accent) 18%), var(--surface)); color: var(--text); }
.artifact-renderer__slide:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.artifact-renderer__slide-number { display: block; margin-bottom: 26px; color: var(--text-dim); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.artifact-renderer__slide h1 { max-width: 20ch; margin: 0 0 24px; font-size: clamp(28px, 5vw, 56px); line-height: 1.02; letter-spacing: -.04em; }
.artifact-renderer__slide ul { display: grid; max-width: 56ch; gap: 10px; margin: 0; padding-left: 20px; font-size: clamp(15px, 2vw, 20px); line-height: 1.45; }
.artifact-renderer__speaker-notes { max-width: 60ch; margin: 30px 0 0; color: var(--text-dim); font-size: 13px; font-style: italic; }
.artifact-renderer__slide-controls { display: flex; gap: 8px; }
.artifact-renderer__slide-controls button, .artifact-renderer__slide-thumbnail { min-height: 34px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; }
.artifact-renderer__slide-controls button:hover:not(:disabled), .artifact-renderer__slide-thumbnail:hover { border-color: var(--accent); }
.artifact-renderer__slide-controls button:focus-visible, .artifact-renderer__slide-thumbnail:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.artifact-renderer__slide-controls button:disabled { cursor: not-allowed; opacity: .45; }
.artifact-renderer__slide-navigator { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; }
.artifact-renderer__slide-thumbnail { flex: 0 0 170px; min-height: 68px; text-align: left; font-size: 12px; }
.artifact-renderer__slide-thumbnail[aria-current="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.artifact-renderer__dashboard { display: grid; gap: 18px; }
.artifact-renderer__dashboard > h1 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.artifact-renderer__dashboard-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.artifact-renderer__metric { display: grid; gap: 5px; min-height: 108px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.artifact-renderer__metric > span, .artifact-renderer__metric > small { color: var(--text-dim); font-size: 12px; }
.artifact-renderer__metric > strong { align-self: center; color: var(--text); font-size: 28px; letter-spacing: -.04em; }
.artifact-renderer__dashboard-series { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.artifact-renderer__series-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(90px, 3fr) auto; align-items: center; gap: 10px; color: var(--text); font-size: 13px; }
.artifact-renderer__series-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--bg); }
.artifact-renderer__series-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.artifact-renderer__markdown { max-width: 72ch; transform: scale(var(--artifact-zoom)); transform-origin: top left; width: calc(100% / var(--artifact-zoom)); color: var(--text); font: 15px/1.7 system-ui, sans-serif; }
.artifact-renderer__markdown > :first-child { margin-top: 0; }
.artifact-renderer__markdown h1 { margin: 0 0 18px; font-size: 26px; letter-spacing: -.025em; }
.artifact-renderer__markdown h2 { margin: 28px 0 10px; font-size: 18px; }
.artifact-renderer__markdown h3 { margin: 22px 0 8px; font-size: 15px; }
.artifact-renderer__markdown p { margin: 0 0 14px; color: var(--text); }
.artifact-workspace__heading-navigator { display: grid; gap: 6px; max-width: 72ch; margin: 0 0 12px; padding: 8px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); }
.artifact-workspace__heading-navigator > strong { color: var(--text); font-size: 12px; }
.artifact-workspace__heading-list { display: flex; flex-wrap: wrap; gap: 6px; }
.artifact-workspace__heading-choice { min-height: 30px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; background: var(--bg); color: var(--text); cursor: pointer; font: 12px/1.2 system-ui, sans-serif; text-align: left; }
.artifact-workspace__heading-choice:hover { border-color: var(--accent); }
.artifact-workspace__heading-choice:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.artifact-workspace__heading-choice[data-heading-level="2"] { margin-left: 10px; }
.artifact-workspace__heading-choice[data-heading-level="3"] { margin-left: 20px; }
.artifact-workspace__heading-choice[aria-current="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.artifact-renderer__frame { display: block; width: 100%; min-height: 480px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.artifact-workspace__preview-viewport { box-sizing: border-box; max-width: 100%; max-height: min(70vh, 900px); overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.artifact-workspace__preview-viewport .artifact-renderer__frame { width: var(--artifact-preview-width); min-height: 0; height: var(--artifact-preview-height); border: 0; border-radius: 0; }
.artifact-renderer__image { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); object-fit: contain; transform: scale(var(--artifact-zoom)); transform-origin: top center; }
.artifact-renderer[data-fit-mode="width"] .artifact-renderer__image { width: 100%; max-width: 100%; max-height: none; transform: none; }
.artifact-renderer[data-fit-mode="page"] { display: grid; height: 100%; min-height: 0; place-items: center; }
.artifact-renderer[data-fit-mode="page"] .artifact-renderer__image { width: auto; max-width: 100%; height: calc(100% - 2px); max-height: none; transform: none; }
.artifact-renderer__video { display: block; width: min(100%, 960px); max-height: 70vh; margin: 14px auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.artifact-workspace__media-chapters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 14px 14px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.artifact-workspace__media-chapters > strong { color: var(--text); margin-right: 4px; }
.artifact-workspace__chapter { min-height: 30px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); cursor: pointer; }
.artifact-workspace__chapter:hover { border-color: var(--accent); }
.artifact-workspace__chapter:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.artifact-workspace__project-record { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.artifact-workspace__project-record > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 12px; }
.artifact-workspace__project-record > span { flex: 0 0 auto; color: var(--text-dim); font-size: 11px; text-transform: capitalize; }
.artifact-workspace__preview-inspector { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.artifact-workspace__preview-inspector > strong { color: var(--text); }
.artifact-workspace__preview-inspector > p, .artifact-workspace__preview-inspector > span { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.artifact-workspace__preview-screenshot { display: block; width: min(100%, 420px); height: 220px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); pointer-events: none; }
.artifact-workspace__preview-node { min-height: 32px; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.artifact-workspace__preview-node:hover { border-color: var(--accent); }
.artifact-workspace__preview-node:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.artifact-workspace__preview-node.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%); }
.artifact-workspace__conversion { display: grid; gap: 10px; max-width: 72ch; margin: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-dim); }
.artifact-workspace__conversion > strong { color: var(--text); }
.artifact-workspace__conversion > p { margin: 0; font-size: 13px; line-height: 1.5; }
.artifact-workspace__annotation-context { display: grid; gap: 5px; margin: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.artifact-workspace__annotation-context p { margin: 0; }
.artifact-workspace__conversion .artifact-renderer__markdown { width: 100%; transform: none; }
.artifact-workspace__conversion-page { color: var(--text-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.artifact-workspace__conversion-controls, .artifact-workspace__conversion-pages { display: flex; flex-wrap: wrap; gap: 8px; }
.artifact-workspace__conversion-controls button { min-height: 32px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); cursor: pointer; }
.artifact-workspace__conversion-controls button:disabled { cursor: not-allowed; opacity: .45; }
.artifact-workspace__conversion-pages .artifact-workspace__chapter[aria-current="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.artifact-workspace__page-jump { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12px; }
.artifact-workspace__page-jump input { width: 5.5rem; min-height: 30px; box-sizing: border-box; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.artifact-workspace__page-jump input:hover { border-color: var(--accent); }
.artifact-workspace__page-jump input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.artifact-workspace__macro-notice { margin: 0 14px 14px; padding: 9px 11px; border: 1px solid var(--artifact-macro-notice-border); border-radius: 7px; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.artifact-workspace__state { display: grid; max-width: 52ch; gap: 7px; margin: 28px auto; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-dim); text-align: center; }
.artifact-workspace__state strong { color: var(--text); font-size: 14px; }
.artifact-workspace__state--fallback { gap: 4px; margin-block: 0; padding: 6px; }
.artifact-workspace__state--conversion { gap: 4px; margin-block: 0; padding: 6px; }
.artifact-workspace__state--stopped { gap: 4px; margin-block: 0; padding: 6px; }
.artifact-workspace__state--preview-stopped { border-color: color-mix(in srgb, var(--border) 58%, var(--accent) 42%); background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%); }
.artifact-workspace__state--error { border-color: var(--danger); }
.artifact-workspace__skeleton { display: grid; gap: 10px; padding: 20px; }
.artifact-workspace__skeleton-placeholder { display: block; border-radius: 4px; background: color-mix(in srgb, var(--surface) 75%, var(--border) 25%); animation: artifact-skeleton 1.2s ease-in-out infinite alternate; }
.artifact-workspace__skeleton-line { height: 12px; }
.artifact-workspace__skeleton-line--medium { width: 78%; }
.artifact-workspace__skeleton-line--short { width: 56%; }
.artifact-workspace__skeleton-frame { display: grid; min-height: min(42vh, 320px); padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%); }
.artifact-workspace__skeleton-frame--browser { min-height: min(38vh, 280px); }
.artifact-workspace__skeleton-frame-fill { min-height: 100%; border-radius: 5px; }
.artifact-workspace__skeleton-grid { display: grid; grid-template-columns: repeat(5, minmax(36px, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: var(--border); }
.artifact-workspace__skeleton-cell { min-height: 34px; border-radius: 0; background: var(--surface); }
.artifact-workspace__skeleton-grid .artifact-workspace__skeleton-cell:nth-child(-n + 5) { background: color-mix(in srgb, var(--surface) 72%, var(--border) 28%); }
.artifact-workspace__skeleton-browser-chrome { display: grid; grid-template-columns: repeat(3, 10px) minmax(120px, 1fr); gap: 6px; align-items: center; min-height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%); }
.artifact-workspace__skeleton-browser-control { width: 10px; height: 10px; border-radius: 50%; }
.artifact-workspace__skeleton-browser-address { height: 12px; border-radius: 999px; }
.artifact-workspace__skeleton-media-controls { display: grid; grid-template-columns: 26px minmax(80px, 1fr); gap: 10px; align-items: center; }
.artifact-workspace__skeleton-control { width: 26px; height: 18px; }
.artifact-workspace__skeleton-timeline { height: 7px; border-radius: 999px; }
.artifact-workspace__skeleton-metrics { display: grid; grid-template-columns: repeat(3, minmax(70px, 1fr)); gap: 10px; }
.artifact-workspace__skeleton-metric { min-height: 68px; }
.artifact-workspace__loading-progress { display: grid; gap: 6px; max-width: 280px; color: var(--text-dim); font-size: 12px; font-weight: 650; }
.artifact-workspace__loading-progress > span { display: block; height: auto; background: transparent; animation: none; }
.artifact-workspace__loading-source { margin: 0; overflow-wrap: anywhere; color: var(--text-dim); font-size: 12px; }
.artifact-workspace__loading-meter { height: 6px; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); }
.artifact-workspace__loading-meter > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); animation: none; }
@keyframes artifact-skeleton { from { opacity: .42; } to { opacity: .9; } }
@keyframes artifact-tab-spin { to { transform: rotate(360deg); } }


.artifact-workspace__review > div:first-child { display: grid; gap: 3px; color: var(--text-dim); font-size: 12px; }

.artifact-workspace__review-summary { margin: 0; color: var(--text); font-size: 12px; line-height: 1.45; }
.artifact-workspace__review-checks { display: grid; gap: 6px; }
.artifact-workspace__review-checks > strong { font-size: 12px; }
.artifact-workspace__revision-audit { display: grid; gap: 6px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); }
.artifact-workspace__revision-audit > strong { font-size: 12px; }
.artifact-workspace__revision-audit dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.artifact-workspace__revision-audit dt { font-weight: 650; color: var(--text); }
.artifact-workspace__revision-audit dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }







.artifact-workspace__feedback-error { margin: 0; color: var(--danger); font-size: 12px; }
.artifact-workspace__project-review { color: var(--text-dim); font-size: 12px; }
.artifact-workspace__project-review-list { display: grid; gap: 4px; margin: 0; padding-left: 20px; color: var(--text); }
.artifact-workspace__diff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; overflow: auto; }
.artifact-workspace__diff-column { display: grid; gap: 5px; min-width: 0; color: var(--text); font-size: 12px; }
.artifact-workspace__diff-column pre { min-width: 0; margin: 0; padding: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.artifact-workspace__annotation-composer label { display: grid; gap: 5px; color: var(--text-dim); font-size: 12px; }
.artifact-workspace__annotation-composer textarea { min-height: 72px; resize: vertical; }
.artifact-workspace__annotation-composer:not(.artifact-workspace__annotation-composer--floating) { overscroll-behavior: contain; }
.artifact-workspace__annotation-composer:not(.artifact-workspace__annotation-composer--floating) .artifact-workspace__annotation-actions { position: sticky; bottom: 0; padding-top: 8px; background: var(--surface); }
.artifact-workspace__annotation-composer--floating { position: fixed; z-index: 1200; width: min(360px, calc(100vw - 24px)); max-height: min(360px, calc(100vh - 24px)); box-sizing: border-box; margin: 0; overflow-y: auto; box-shadow: 0 16px 38px var(--artifact-composer-shadow-color); }
.artifact-workspace__annotation-composer--floating .artifact-workspace__annotation-actions { position: sticky; bottom: 0; padding-top: 8px; background: var(--surface); }
.artifact-workspace__annotation-quote { max-height: 84px; overflow: auto; margin: 0; padding: 8px; border-radius: 5px; background: var(--bg); color: var(--text-dim); font-size: 12px; font-style: italic; }
.artifact-workspace__annotation-anchor { width: fit-content; margin: 0; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 84%, var(--accent) 16%); color: var(--text); font-size: 12px; font-weight: 600; }
.artifact-workspace__annotations { display: grid; gap: 8px; margin: 12px 14px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.artifact-workspace__annotations > strong { color: var(--text); }
.artifact-workspace__annotation { display: grid; gap: 7px; padding-top: 10px; border-top: 1px solid var(--border); }
.artifact-workspace__annotation:first-of-type { padding-top: 0; border-top: 0; }
.artifact-workspace__annotation:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.artifact-workspace__annotation-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text); }
.artifact-workspace__annotation-meta { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.artifact-workspace__annotation-notice { margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 12px; line-height: 1.45; }
.artifact-workspace__annotation-notice--success { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); }
.artifact-workspace__annotation-notice--error { border-color: color-mix(in srgb, var(--danger) 58%, var(--border)); }
.artifact-workspace__annotation-editor { min-height: 76px; width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; background: var(--bg); color: var(--text); font: inherit; }
.artifact-workspace__annotation-editor:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.artifact-workspace__annotation-discussion { display: grid; gap: 7px; margin: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); }
.artifact-workspace__annotation-discussion > strong { color: var(--text); font-size: 12px; }
.artifact-workspace__annotation-discussion-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.artifact-workspace__annotation-discussion-entry { color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.artifact-workspace__annotation-discussion-reply { display: grid; gap: 5px; color: var(--text-dim); font-size: 12px; }
.artifact-workspace__scope-boundary { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.artifact-workspace__editor { min-height: 240px; flex: 1; margin: 14px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.artifact-workspace__edit-actions { padding: 0 14px 14px; }
.artifact-workspace__close-confirm { color: var(--text-dim); font-size: 12px; }

.artifact-workspace__permanent-delete-confirm { border-color: color-mix(in srgb, var(--danger) 54%, var(--border)); }
.artifact-workspace__recovery { color: var(--text-dim); font-size: 12px; }
.artifact-workspace__recovery strong { color: var(--text); }
.artifact-workspace__conflict-details { display: grid; gap: 7px; padding: 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.artifact-workspace__conflict-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.artifact-workspace__conflict-version { display: grid; gap: 3px; min-width: 0; padding: 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--text-dim); }
.artifact-workspace__conflict-version strong { overflow-wrap: anywhere; }
.artifact-workspace__history { color: var(--text-dim); font-size: 12px; }
.artifact-workspace__history > p { margin: 0; }
.artifact-workspace__history-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); padding-top: 8px; color: var(--text); }
.artifact-workspace__find { display: flex; align-items: end; gap: 10px; margin: 10px 14px 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.artifact-workspace__find label { flex: 1; }
.artifact-workspace__runtime { display: grid; gap: 7px; margin: 0 14px 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-dim); font-size: 12px; }
.artifact-workspace__runtime > strong { color: var(--text); }
.artifact-workspace__runtime-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.artifact-workspace__runtime-checks span { padding: 3px 6px; border-radius: 4px; background: var(--bg); }
.artifact-workspace__runtime-url { overflow-wrap: anywhere; color: var(--text-dim); }
.artifact-workspace__runtime-details { color: var(--text-dim); }
.artifact-workspace__runtime-details summary { width: fit-content; cursor: pointer; color: var(--text); }
.artifact-workspace__runtime-details dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 10px; margin: 8px 0 0; }
.artifact-workspace__runtime-details dt { color: var(--text-dim); }
.artifact-workspace__runtime-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--text); }
.artifact-workspace__runtime-logs { display: grid; gap: 5px; padding-top: 4px; color: var(--text); }
.artifact-workspace__runtime-logs pre { max-height: 150px; overflow: auto; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text-dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.artifact-renderer mark { border-radius: 2px; padding: 0; background: var(--accent-dim); color: var(--text); }
.artifact-workspace__selection-action { position: fixed; z-index: 1100; min-height: 28px; border: 1px solid var(--accent); border-radius: 6px; padding: 4px 8px; background: var(--accent-dim); color: var(--text); font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; box-shadow: 0 6px 16px var(--artifact-selection-shadow-color); }
.artifact-workspace__selection-action:hover { background: var(--accent); }
.artifact-workspace__selection-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.artifact-workspace__library-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 14px 8px; color: var(--text); font-size: 14px; }
.artifact-workspace__library-heading strong { font-size: inherit; font-weight: 650; }

.artifact-workspace__empty-copy { max-width: 38ch; padding: 0 14px; color: var(--text-dim); font-size: 13px; line-height: 1.55; }
.artifact-workspace__archive-row { display: grid; gap: 4px; margin: 10px 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
.artifact-workspace__archive-row span { color: var(--text-dim); font-size: 12px; }
.artifact-workspace__archive-row button { justify-self: start; }
.artifact-workspace__archive-notice { margin: 8px 0; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border)); border-radius: 7px; padding: 8px 10px; background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%); color: var(--text); font-size: 13px; line-height: 1.5; }
.artifact-workspace__recovery-notice { max-width: 48ch; margin: 10px 14px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 7px; background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); color: var(--text); font-size: 13px; line-height: 1.5; }
.artifact-workspace__project-subheading { margin-top: 12px; color: var(--text); font-size: 12px; }

@media (max-width: 899px) {
  #right-panel.panel-artifacts { --_panel-width: 100vw; position: fixed; inset: 0 0 var(--rail-width) 0; z-index: 100; width: 100vw !important; transform: translateX(100%); border-left: 0; }
  #right-panel.panel-artifacts.open { transform: translateX(0); }
  /* At compact desktop widths the workspace becomes the primary surface.
     Keeping the expanded desktop rail above it makes its controls impossible
     to click, especially at browser zoom. */
  body:has(#right-panel.panel-artifacts.open) #left-sidebar { display: none; }
  #artifact-split-divider { display: none !important; }
  .artifact-workspace__topbar { min-height: 62px; }
  .artifact-workspace__top-actions { justify-content: flex-end; }
  .artifact-workspace__tabs { padding-left: 4px; }
  .artifact-workspace__tab { max-width: 128px; }
  .artifact-workspace__toolbar {
    height: 48px;
    min-height: 48px;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 4px;
    padding-bottom: 4px;
    scrollbar-color: var(--border) transparent;
  }
  .artifact-workspace__button { min-height: 40px; }
  .artifact-workspace__icon-button { min-width: 40px; min-height: 40px; }
  .artifact-renderer__frame { min-height: 360px; }
}

/* Between the phone and desktop breakpoints, the workspace is the only
   primary surface. Keep the rail out of its hit area so the visible close
   control remains reachable instead of sitting behind navigation chrome. */
@media (min-width: 769px) and (max-width: 899px) {
  #right-panel.panel-artifacts.open { inset: 0; }
  body:has(#right-panel.panel-artifacts.open) #right-rail { display: none; }
  #right-panel.panel-artifacts #right-panel-header .panel-close { min-width: 40px; min-height: 40px; }
}

/* A stopped preview has three recovery actions that matter more than its
   secondary chrome. Keep that decision surface wholly reachable in a short
   compact workspace, without shrinking the 40px controls used at this width. */
@media (max-width: 899px) and (max-height: 520px) {
  .artifact-workspace--stopped .artifact-workspace__topbar { min-height: 48px; padding-block: 6px; }
  .artifact-workspace--stopped .artifact-workspace__eyebrow { display: none; }
  .artifact-workspace--stopped .artifact-workspace__tabs { height: 36px; min-height: 36px; padding-top: 1px; }
  .artifact-workspace--stopped .artifact-workspace__tab { min-height: 32px; }
  .artifact-workspace--stopped .artifact-workspace__view-header { padding-block: 6px; }
  .artifact-workspace--stopped .artifact-workspace__provenance { padding-block: 4px; }
  .artifact-workspace--stopped .artifact-workspace__secondary-controls {
    box-sizing: border-box; height: 48px; min-height: 48px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-block: 4px;
  }
  .artifact-workspace--stopped .artifact-workspace__content { padding-block: 8px; }



}

@media (max-width: 520px) {
  .artifact-workspace__topbar { align-items: flex-start; flex-direction: column; }
  .artifact-workspace__view-header { align-items: flex-start; flex-direction: column; }
  .artifact-workspace__diff { grid-template-columns: 1fr; }
  .artifact-workspace__conflict-versions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #right-panel { transition: none; }
  .artifact-card,
  .artifact-workspace__button,
  .artifact-workspace__icon-button,
  .artifact-workspace__tab-wrap,
  .artifact-workspace__tab { transition: none; }
  .artifact-workspace__skeleton-placeholder { animation: none; }
  .artifact-workspace__tab-spinner { animation: none; }
}

.artifact-workspace__element-pins { display: grid; gap: 8px; max-height: 34%; overflow: auto; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.artifact-workspace__pin-draft, .artifact-workspace__element-pin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.artifact-workspace__pin-draft > strong, .artifact-workspace__element-pin > span { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.artifact-workspace__element-pins textarea { box-sizing: border-box; min-height: 48px; width: 100%; resize: vertical; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; }
.artifact-workspace__element-pins [data-action="send-element-pins"] { justify-self: end; }