/* AI Renderings Module styles. All values via CSS custom properties.
   Both themes supported via :root + [data-theme="light"] tokens. */

/* The inline manifest declares fullBleed, so the platform owns the shell
   padding/max-width reset and cleanup when the user changes modules. */
[data-module="ai-renderings"],
.strata-module-container[data-module="ai-renderings"] {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

[data-module="ai-renderings"][data-air-view="list"] {
  height: auto;
  min-height: 100%;
  max-width: none;
  margin: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%,
      color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    radial-gradient(1000px 500px at 0% 100%,
      color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    var(--bg);
}

/* ---------- Session list ---------- */
[data-module="ai-renderings"] .air-list-page {
  padding: 32px clamp(24px, 4vw, 56px) 64px;
  max-width: none;
  margin: 0;
  width: 100%;
}
[data-module="ai-renderings"] .air-list-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
[data-module="ai-renderings"] .air-list-hero h2 {
  margin: 6px 0 4px 0;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.02em;
}
[data-module="ai-renderings"] .air-list-eyebrow {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
[data-module="ai-renderings"] .air-list-hero-actions {
  display: flex; gap: 10px; align-items: center;
}
[data-module="ai-renderings"] .air-list-section { margin-bottom: 36px; }
[data-module="ai-renderings"] .air-list-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
[data-module="ai-renderings"] .air-list-section-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ---------- Project picker (ALL PROJECTS) ---------- */
[data-module="ai-renderings"] .air-pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
[data-module="ai-renderings"] .air-pp-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--text-primary);
  overflow: hidden;
  transition: border-color var(--transition-speed),
              transform 120ms ease-out,
              box-shadow var(--transition-speed);
}
[data-module="ai-renderings"] .air-pp-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
[data-module="ai-renderings"] .air-pp-thumb {
  aspect-ratio: 16 / 10;
  background: var(--input-bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
[data-module="ai-renderings"] .air-pp-thumb img { width: 100%; height: 100%; object-fit: cover; }
[data-module="ai-renderings"] .air-pp-thumb-ph {
  width: 100%; height: 100%;
  background:
    radial-gradient(60% 60% at 30% 30%,
      color-mix(in srgb, var(--air-dot, var(--accent)) 35%, transparent),
      transparent 70%),
    var(--input-bg);
}
[data-module="ai-renderings"] .air-pp-thumb-ph-offgen {
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--accent) 6%, transparent) 0 12px,
      transparent 12px 24px),
    var(--input-bg);
}
[data-module="ai-renderings"] .air-pp-meta {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
}
[data-module="ai-renderings"] .air-pp-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
[data-module="ai-renderings"] .air-pp-dot-offgen {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
[data-module="ai-renderings"] .air-pp-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
[data-module="ai-renderings"] .air-pp-text strong {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-module="ai-renderings"] .air-pp-text span { font-size: 11px; }
[data-module="ai-renderings"] .air-pp-card-offgen {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

/* ---------- Session card chips ---------- */
[data-module="ai-renderings"] .air-session-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px 2px 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--input-bg);
  border-radius: 999px;
  width: fit-content;
}
[data-module="ai-renderings"] .air-session-chip::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--air-dot, var(--accent));
}
[data-module="ai-renderings"] .air-session-chip-offgen {
  color: var(--accent);
  background: var(--accent-soft);
}
[data-module="ai-renderings"] .air-session-chip-offgen::before { background: var(--accent); }
[data-module="ai-renderings"] .air-session-chip-sandbox {
  color: var(--warning);
  background: var(--warning-soft);
}
[data-module="ai-renderings"] .air-session-chip-sandbox::before { background: var(--warning); }

/* ---------- Sandbox bucket (personal, admin-only) ---------- */
[data-module="ai-renderings"] .air-pp-thumb-ph-sandbox {
  display: flex; align-items: center; justify-content: center;
  color: var(--warning);
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--warning) 7%, transparent) 0 12px,
      transparent 12px 24px),
    var(--input-bg);
}
[data-module="ai-renderings"] .air-pp-dot-sandbox {
  background: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 25%, transparent);
}
[data-module="ai-renderings"] .air-pp-card-sandbox {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--warning) 50%, var(--border));
}

/* ---------- Hero spend strip + sparkline ---------- */
[data-module="ai-renderings"] .air-list-hero-spend {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
[data-module="ai-renderings"] .air-hero-spark {
  position: relative;
  width: 240px; height: 44px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  padding: 4px 6px;
  display: flex; align-items: stretch;
}
[data-module="ai-renderings"] .air-hero-spark svg { width: 100%; height: 100%; display: block; }
[data-module="ai-renderings"] .air-hero-spark-axis {
  position: absolute; top: 4px; right: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---------- Filter pills ---------- */
[data-module="ai-renderings"] .air-filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 24px;
}
[data-module="ai-renderings"] .air-filter-pill {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--transition-speed),
              color var(--transition-speed),
              background var(--transition-speed);
}
[data-module="ai-renderings"] .air-filter-pill:hover {
  border-color: var(--accent-line);
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-filter-pill.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
/* Shimmer skeleton shown while a dashboard thumbnail is still loading. The
   background sits behind the <img> content box (which has a fixed size from
   its per-surface rule), so it reads as "loading" until the opaque image
   paints over it; module-events.wire clears data-air-loading on 'load'. */
[data-module="ai-renderings"] .air-thumb[data-air-loading] {
  background-image: linear-gradient(100deg,
    var(--input-bg) 30%,
    color-mix(in srgb, var(--text-primary) 9%, var(--input-bg)) 50%,
    var(--input-bg) 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: air-thumb-shimmer 1.2s ease-in-out infinite;
}
@keyframes air-thumb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-module="ai-renderings"] .air-thumb[data-air-loading] { animation: none; }
}
/* Inline "Show all" recovery link inside the filter-aware empty state. */
[data-module="ai-renderings"] .air-linkish {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
[data-module="ai-renderings"] .air-linkish:hover {
  color: var(--text-primary);
}

/* ---------- Pick up where you left off ---------- */
[data-module="ai-renderings"] .air-pickup-section { margin-bottom: 36px; }
[data-module="ai-renderings"] .air-pickup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
[data-module="ai-renderings"] .air-pickup-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  padding: 10px 14px 10px 10px;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  transition: border-color var(--transition-speed), transform 120ms ease-out;
}
[data-module="ai-renderings"] .air-pickup-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
[data-module="ai-renderings"] .air-pickup-card img {
  width: 56px; height: 42px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
[data-module="ai-renderings"] .air-pickup-thumb-ph {
  width: 56px; height: 42px;
  border-radius: 6px;
  background: radial-gradient(50% 50% at 30% 30%,
    color-mix(in srgb, var(--air-dot, var(--accent)) 35%, transparent),
    var(--input-bg));
  flex-shrink: 0;
}
[data-module="ai-renderings"] .air-pickup-meta {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  flex: 1;
}
[data-module="ai-renderings"] .air-pickup-meta strong {
  font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-module="ai-renderings"] .air-pickup-meta span { font-size: 11px; }
[data-module="ai-renderings"] .air-pickup-arrow {
  color: var(--text-tertiary);
  font-size: 14px;
  flex-shrink: 0;
}

/* ---------- Recently starred rail ---------- */
[data-module="ai-renderings"] .air-starred-section { margin-bottom: 36px; }
[data-module="ai-renderings"] .air-starred-rail {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
}
[data-module="ai-renderings"] .air-starred-rail::-webkit-scrollbar { height: 6px; }
[data-module="ai-renderings"] .air-starred-rail::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}
[data-module="ai-renderings"] .air-starred-tile {
  position: relative;
  flex: 0 0 auto;
  width: 132px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  transition: border-color var(--transition-speed), transform 120ms ease-out;
}
[data-module="ai-renderings"] .air-starred-tile:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
[data-module="ai-renderings"] .air-starred-tile img,
[data-module="ai-renderings"] .air-starred-tile-ph {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
[data-module="ai-renderings"] .air-starred-tile-ph {
  background: radial-gradient(50% 50% at 30% 30%,
    color-mix(in srgb, var(--air-dot, var(--accent)) 35%, transparent),
    var(--input-bg));
}
[data-module="ai-renderings"] .air-starred-tile-star {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(6px);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
[data-module="ai-renderings"] .air-starred-tile-label {
  padding: 6px 8px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Per-project budget badge ---------- */
[data-module="ai-renderings"] .air-pp-foot {
  padding: 0 12px 12px;
}
[data-module="ai-renderings"] .air-pp-budget {
  position: relative;
  display: block;
  width: 100%;
  height: 18px;
  border-radius: 9px;
  background: var(--input-bg);
  overflow: hidden;
  font-size: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 18px;
}
[data-module="ai-renderings"] .air-pp-budget-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-module="ai-renderings"] .air-pp-budget-text {
  position: relative;
  color: var(--text-secondary);
}
[data-module="ai-renderings"] .air-pp-budget-warn .air-pp-budget-fill {
  background: color-mix(in srgb, var(--warning, var(--accent)) 45%, transparent);
}
[data-module="ai-renderings"] .air-pp-budget-over .air-pp-budget-fill {
  background: color-mix(in srgb, var(--error) 55%, transparent);
}
[data-module="ai-renderings"] .air-pp-budget-over .air-pp-budget-text { color: var(--error); }
[data-module="ai-renderings"] .air-pp-budget-nobudget {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-tertiary);
}

/* ---------- Hero per-project pct badge (project / off-gen views) ---------- */
[data-module="ai-renderings"] .air-budget-pct {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
[data-module="ai-renderings"] .air-budget-pct-warn {
  background: color-mix(in srgb, var(--warning, var(--accent)) 18%, transparent);
  color: var(--warning, var(--accent));
}
[data-module="ai-renderings"] .air-budget-pct-over {
  background: var(--error-soft);
  color: var(--error);
}
[data-module="ai-renderings"] .air-back-link {
  background: transparent;
  border: 0;
  padding: 0 0 4px 0;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
[data-module="ai-renderings"] .air-back-link:hover { color: var(--accent); }

/* ---------- Drag-drop overlay ---------- */
[data-module="ai-renderings"] .air-drop-overlay {
  position: absolute;
  inset: 24px clamp(24px, 5vw, 64px);
  border: 2px dashed var(--accent);
  border-radius: var(--panel-radius);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease-out;
  z-index: 50;
}
[data-module="ai-renderings"] .air-drop-overlay-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(4px);
  padding: 24px 36px;
  border-radius: var(--panel-radius);
}
[data-module="ai-renderings"] .air-drop-overlay-inner strong {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-list-page { position: relative; }
/* Any element opted into drop-target with [data-air-droptarget="true"]
   gets its child .air-drop-overlay revealed when module-events.js
   toggles .air-drag-active during dragenter. List landing pages
   wrap the overlay in .air-list-page; workspace wraps it in
   .air-canvas-region. The selector below covers both. */
[data-module="ai-renderings"] [data-air-droptarget="true"].air-drag-active .air-drop-overlay { opacity: 1; }
/* Workspace canvas-region overlay: tighter inset so it doesn't cover
   the floating composer + canvas chips. */
[data-module="ai-renderings"] .air-canvas-region .air-drop-overlay { inset: 12px 12px 100px 12px; }
@media (prefers-reduced-motion: reduce) {
  [data-module="ai-renderings"] .air-drop-overlay { transition: none; }
}

[data-module="ai-renderings"] .air-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
[data-module="ai-renderings"] .air-session-card-wrap {
  position: relative;
  display: flex;
}
[data-module="ai-renderings"] .air-session-card {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text-primary);
  transition: border-color var(--transition-speed);
}
[data-module="ai-renderings"] .air-session-card:hover { border-color: var(--accent); }
/* Delete control -- sibling overlay in the top-right of each card. Hidden
   until card hover / keyboard focus to keep the grid calm; always shown on
   touch (no hover) via the coarse-pointer media query below. */
[data-module="ai-renderings"] .air-session-del {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
}
[data-module="ai-renderings"] .air-session-card-wrap:hover .air-session-del,
[data-module="ai-renderings"] .air-session-del:focus-visible {
  opacity: 1;
}
[data-module="ai-renderings"] .air-session-del:hover {
  color: var(--error);
  border-color: var(--error);
}
@media (hover: none) {
  [data-module="ai-renderings"] .air-session-del { opacity: 1; }
}
@media (max-width: 640px) {
  [data-module="ai-renderings"] .air-session-del { width: 44px; height: 44px; }
}
[data-module="ai-renderings"] .air-session-thumb {
  aspect-ratio: 16 / 9;
  background: var(--input-bg);
  border-radius: 8px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
[data-module="ai-renderings"] .air-session-thumb img { width: 100%; height: 100%; object-fit: cover; }
[data-module="ai-renderings"] .air-session-thumb-ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--input-bg), var(--panel));
}
[data-module="ai-renderings"] .air-session-meta { display: flex; flex-direction: column; gap: 2px; }

/* ---------- Workspace shell ---------- */
[data-module="ai-renderings"] .air-ws {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
}

/* ---------- Topbar (v3: 44px tall, inline title + dot + project) ---------- */
[data-module="ai-renderings"] .air-ws-header {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}
[data-module="ai-renderings"] .air-icon-btn {
  height: 28px; width: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  cursor: pointer;
}
[data-module="ai-renderings"] .air-icon-btn:hover {
  background: var(--input-bg);
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-ws-divider {
  width: 1px; height: 16px; background: var(--border-strong);
}
[data-module="ai-renderings"] .air-ws-titleblock {
  display: inline-flex; align-items: baseline; gap: 8px; min-width: 0;
  line-height: 1;
}
[data-module="ai-renderings"] .air-ws-title-session {
  font-family: var(--font-display);
  font-weight: 500; font-size: 13px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 280px;
}
[data-module="ai-renderings"] .air-ws-title-sep {
  color: var(--text-tertiary);
  font-size: 12px;
}
[data-module="ai-renderings"] .air-ws-title-project {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 240px;
}
[data-module="ai-renderings"] .air-ws-header-sep { flex: 1; }

[data-module="ai-renderings"] .air-spend-pill {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
[data-module="ai-renderings"] .air-spend-pill:hover { border-color: var(--accent); }
[data-module="ai-renderings"] .air-spend-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: 0.08em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-spend-value {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-spend-ceiling {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--text-tertiary);
}

[data-module="ai-renderings"] .air-top-btn {
  height: 28px; padding: 0 11px;
  border-radius: 5px;
  font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
[data-module="ai-renderings"] .air-top-btn:hover { border-color: var(--accent); }
[data-module="ai-renderings"] .air-refresh-btn svg {
  flex: 0 0 auto;
}
[data-module="ai-renderings"] .air-top-btn-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
[data-module="ai-renderings"] .air-top-btn-active:hover { border-color: var(--accent); }
[data-module="ai-renderings"] .air-top-btn-primary {
  background: var(--text-primary);
  color: var(--bg);
  border-color: transparent;
}
[data-module="ai-renderings"] .air-top-btn-primary:hover {
  background: var(--accent);
  color: var(--bg);
}



/* ---------- Stage: 2-column grid (v3 layout) ----------
   Canvas (centre, fills) | Timeline (right, collapsible). Mask + annotate
   tools no longer have a persistent left rail -- they live in a floating
   .air-canvas-toolbar mounted inside the canvas card. */
[data-module="ai-renderings"] .air-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--bg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  overflow: hidden;
  transition: grid-template-columns 0.22s ease;
}
[data-module="ai-renderings"] .air-stage.air-stage-rail-collapsed {
  /* Mini-graph mode: the rail collapses to a thin column rendering the
     version tree as branched dots with an inline label next to the
     active version. The width is responsive via the
     --air-rail-mini-width custom property (set on .air-stage by
     timeline-rail.js#render based on max tree depth + active label).
     Shallow trees get a narrow column; deep trees widen to fit. */
  grid-template-columns: minmax(0, 1fr) var(--air-rail-mini-width, 120px);
}

/* Side panel shells (right rail only). */
[data-module="ai-renderings"] .air-stage-right {
  position: relative;
  background: var(--panel);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border-left: 1px solid var(--border);
}
[data-module="ai-renderings"] .air-stage.air-stage-rail-collapsed .air-stage-right {
  background: var(--panel-2);
}
/* Phase 5: mini-graph renders INTO .air-stage-rail-body, so the body
   stays visible in collapsed mode. (Pre-Phase 5 the body was hidden
   because the rail collapsed to an empty 24px stub; that's no longer
   true now that the mini tree replaces the stub.) */
[data-module="ai-renderings"] .air-stage-rail-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Right rail toggle handle: vertical tab that sticks out from the inside
   edge. 22px wide for a real touch target. */
[data-module="ai-renderings"] .air-stage-rail-toggle {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 72px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  left: -1px;
  transform: translate(-100%, -50%);
  border-right: none;
  border-radius: 6px 0 0 6px;
}
[data-module="ai-renderings"] .air-stage.air-stage-rail-collapsed .air-stage-rail-toggle {
  /* In mini-graph mode the rail body owns its own expand button at the
     top of the column, so hide the side-edge toggle that the expanded
     rail uses. Avoids the two affordances overlapping. */
  display: none;
}
[data-module="ai-renderings"] .air-stage-rail-toggle:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  background: var(--panel-2);
}
[data-module="ai-renderings"] .air-stage-rail-toggle svg {
  transition: transform 0.18s ease;
}
[data-module="ai-renderings"] .air-stage-rail-toggle svg { transform: rotate(-90deg); }
[data-module="ai-renderings"] .air-stage.air-stage-rail-collapsed .air-stage-rail-toggle svg { transform: rotate(90deg); }

/* ---------- Canvas region ---------- */
[data-module="ai-renderings"] .air-canvas-region {
  position: relative;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Canvas card -- a flex centring box that scales the wrap to fit. The
   card itself takes flex: 1 of the column and reserves bottom space for
   the floating composer. overflow: auto enables scroll-pan when zoomed. */
[data-module="ai-renderings"] .air-canvas-card {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  margin: 16px 20px 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: var(--panel-2);
  border-radius: 6px;
  box-shadow: var(--shadow-lg, 0 12px 48px rgba(0, 0, 0, 0.4));
}
[data-module="ai-renderings"] .air-canvas-card-empty {
  width: min(900px, 100%);
  aspect-ratio: 16 / 10;
  color: var(--text-secondary);
  line-height: 1.4;
}
/* Wrap shrink-wraps to the underlay's display size so the mask canvas
   overlays exactly. transform-origin centres the zoom on the wrap so
   wheel-zoom scales around the image centre. */
[data-module="ai-renderings"] .air-canvas-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  transform: scale(var(--air-zoom, 1));
  transition: transform 0.12s ease-out;
}
[data-module="ai-renderings"] .air-canvas-wrap.air-canvas-wrap-zoomed {
  /* When zoomed, the card's overflow: auto provides scrollbars for pan. */
  cursor: grab;
}
[data-module="ai-renderings"] .air-canvas-wrap.air-canvas-wrap-panning { cursor: grabbing; }
[data-module="ai-renderings"] .air-canvas-underlay {
  display: block;
  max-width: 100%;
  /* Bound the underlay to the visible canvas-card height so it shrinks
     when the column is short (image keeps aspect ratio via auto height). */
  max-height: calc(100vh - 56px - 48px - 156px);
  width: auto;
  height: auto;
  background: var(--panel-2);
}
[data-module="ai-renderings"] .air-canvas-mask {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* Cursor reverts to default when no mask tool is engaged so the user
     can navigate / pan without the canvas advertising "draw here." The
     parent .air-canvas-card-tool-on marker class flips it to crosshair
     once a mask tool is active. */
  cursor: default;
  pointer-events: auto;
}
[data-module="ai-renderings"] .air-canvas-card-tool-on .air-canvas-mask {
  cursor: crosshair;
}
/* Drawing is disabled in inline compare mode so the slider handle isn't
   competing with mask strokes. */
[data-module="ai-renderings"] .air-canvas-card-compare .air-canvas-mask {
  pointer-events: none;
  cursor: default;
}

/* Inline compare overlay -- compare image painted on top of the underlay
   inside the canvas-wrap. Mode-specific transforms (slider clip-path,
   onion opacity, diff blend mode) are applied as inline styles by JS so
   slider drags can mutate them in-place without re-rendering. */
[data-module="ai-renderings"] .air-canvas-compare {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  object-fit: cover;
}
[data-module="ai-renderings"] .air-canvas-compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--text-primary) 90%, transparent);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transform: translateX(-1px);
  z-index: 4;
}
/* Two small chevrons centred on the divider read as "drag to move."
   Replaces the prior 26px circular knob that read as a draggable grip. */
[data-module="ai-renderings"] .air-canvas-compare-handle span {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(45deg, transparent 46%, var(--text-primary) 46% 54%, transparent 54%) center / 6px 1px no-repeat,
    linear-gradient(-45deg, transparent 46%, var(--text-primary) 46% 54%, transparent 54%) center / 6px 1px no-repeat;
  pointer-events: none;
}
/* When slider mode is active, the canvas mask layer captures clicks for
   click-to-snap. Mouse-down anywhere on the image moves the slider to
   that x-position (handled in module-events.js#compare-canvas-snap). */
[data-module="ai-renderings"] .air-canvas-card-compare-slider .air-canvas-mask {
  pointer-events: auto;
  cursor: ew-resize;
}

/* Generation overlay -- Strata-themed, four seamless looping layers.
   Aurora (rotating conic gradient) reads as system thinking; the
   centered ring (rotating conic gradient over the 4-bar mark) is the
   focal motion; bars + dot pulse opacity in a staggered wave for
   "still working" cadence. The diagonal sweep that previously sat
   between aurora and the mark was retired -- both bg-position-wrap
   and translateX-with-opacity-fade variants surfaced visible snap
   artefacts; the four remaining layers carry the load without one.
   Reduced motion: rotations and translations swap to opacity-only
   pulses (air-gen-rm-fade) so the indicator stays alive without
   vestibular motion. */
[data-module="ai-renderings"] .air-canvas-generating {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  border-radius: inherit;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  /* Dim the image hard so the animated layers above stand out. The
     subtler 35% mix shipped earlier was easy to mistake for "the image
     is just sitting there." 65% bg makes it unmistakably an overlay. */
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  backdrop-filter: blur(3px) saturate(0.85);
}
/* Aurora -- conic gradient rotating across the canvas. 360deg rotation
   is naturally seamless (the conic gradient at 0deg is identical to
   360deg), so the loop has no visible seam. */
[data-module="ai-renderings"] .air-gen-aurora {
  position: absolute;
  inset: -25%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      color-mix(in srgb, var(--accent) 75%, transparent) 60deg,
      transparent 140deg,
      color-mix(in srgb, var(--accent) 55%, transparent) 220deg,
      transparent 320deg,
      transparent 360deg);
  filter: blur(40px) saturate(1.4);
  opacity: 0.85;
  animation: air-gen-aurora-spin 12s linear infinite;
}
/* Centered core: a clearly-rotating ring around the Strata 4-bar
   mark. The ring uses a conic gradient (transparent -> accent ->
   transparent) so the rotation is visually unambiguous -- a flat
   border colour on a circular ring is invisible when rotating. */
[data-module="ai-renderings"] .air-gen-core {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
}
[data-module="ai-renderings"] .air-gen-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    transparent 200deg,
    color-mix(in srgb, var(--accent) 90%, transparent) 320deg,
    var(--accent) 360deg);
  /* Hollow out the centre with a radial mask so the core looks like a
     ring, not a filled disc. The 4-bar mark sits over the masked-out
     middle. */
  mask: radial-gradient(circle at center,
    transparent 0,
    transparent 48px,
    black 50px,
    black 60px,
    transparent 60px);
  -webkit-mask: radial-gradient(circle at center,
    transparent 0,
    transparent 48px,
    black 50px,
    black 60px,
    transparent 60px);
  animation: air-gen-ring-spin 2.8s linear infinite;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 60%, transparent));
}
[data-module="ai-renderings"] .air-gen-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 2;
}
[data-module="ai-renderings"] .air-gen-bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  opacity: 0.5;
  transform: scaleX(0.92);
  transform-origin: center;
  animation: air-gen-bar-pulse 2.4s ease-in-out infinite;
}
[data-module="ai-renderings"] .air-gen-bar:nth-child(1) { width: 28px; animation-delay: 0s; }
[data-module="ai-renderings"] .air-gen-bar:nth-child(2) { width: 42px; animation-delay: 0.18s; }
[data-module="ai-renderings"] .air-gen-bar:nth-child(3) { width: 56px; animation-delay: 0.36s; }
[data-module="ai-renderings"] .air-gen-bar:nth-child(4) { width: 70px; animation-delay: 0.54s; }
[data-module="ai-renderings"] .air-gen-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--accent-line);
  color: var(--text-primary);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 2;
}
[data-module="ai-renderings"] .air-gen-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: air-gen-dot-blink 2s ease-in-out infinite;
}
[data-module="ai-renderings"] .air-gen-meta {
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}
@keyframes air-gen-aurora-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes air-gen-ring-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes air-gen-ring-pulse {
  0%, 100% { transform: scale(0.95); opacity: 0.55; }
  50%      { transform: scale(1.08); opacity: 0.95; }
}
@keyframes air-gen-bar-pulse {
  0%, 100% { opacity: 0.4; transform: scaleX(0.85); }
  50%      { opacity: 1;   transform: scaleX(1.05); }
}
@keyframes air-gen-dot-blink {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  /* Reduced-motion fallback: drop the rotations + translations that
     can trigger vestibular issues, but keep opacity pulses so the
     overlay still reads as an active loading indicator. WCAG allows
     essential progress feedback under prefers-reduced-motion --
     blanket animation:none was killing the loading signal entirely
     (#generating overlay looked like a static dimmed image). */
  [data-module="ai-renderings"] .air-gen-aurora {
    animation: air-gen-rm-fade 2.4s ease-in-out infinite;
    transform: none;
  }
  [data-module="ai-renderings"] .air-gen-ring {
    animation: air-gen-rm-fade 1.4s ease-in-out infinite;
    transform: none;
  }
  [data-module="ai-renderings"] .air-gen-bar {
    animation: air-gen-rm-fade 1.6s ease-in-out infinite;
    transform: scaleX(1);
  }
  [data-module="ai-renderings"] .air-gen-dot {
    animation: air-gen-rm-fade 1.2s ease-in-out infinite;
    transform: scale(1);
  }
}
@keyframes air-gen-rm-fade {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* Side-by-side compare mode -- two stacked images that split the canvas
   wrap horizontally. The wrap becomes a flex row; each image takes
   50% with a 1px divider between. The mask + chips pause as in other
   compare modes. */
[data-module="ai-renderings"] .air-canvas-card-compare-side .air-canvas-wrap {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
[data-module="ai-renderings"] .air-canvas-side-pair {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
[data-module="ai-renderings"] .air-canvas-side-pane {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-module="ai-renderings"] .air-canvas-side-pane img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
[data-module="ai-renderings"] .air-canvas-side-pane + .air-canvas-side-pane {
  border-left: 1px solid var(--border-strong);
}
[data-module="ai-renderings"] .air-canvas-side-label {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
[data-module="ai-renderings"] .air-canvas-side-pane.is-active .air-canvas-side-label {
  color: var(--accent);
}
/* In side-by-side mode the underlay <img> stays in the DOM but is hidden
   so the side panes own the visual real estate. */
[data-module="ai-renderings"] .air-canvas-card-compare-side .air-canvas-underlay,
[data-module="ai-renderings"] .air-canvas-card-compare-side .air-canvas-mask {
  display: none;
}

/* Compare bar version pickers -- the badges become buttons that open a
   thumbnail popover so the user can switch what they're comparing. */
[data-module="ai-renderings"] .air-cmb-badge {
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  border: none;
  cursor: pointer;
  font-family: var(--font-mono, ui-monospace, monospace);
}
[data-module="ai-renderings"] .air-cmb-badge:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
[data-module="ai-renderings"] .air-cmb-badge.is-active:hover {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Version picker popover (compare bar) -- responsive grid of thumbnails.
   Mounted via ns.popover; same lifecycle as the references / overflow
   popovers. */
[data-module="ai-renderings"] .air-vpop {
  display: flex; flex-direction: column;
  padding: 8px;
  gap: 8px;
}
[data-module="ai-renderings"] .air-vpop-head {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: 0.1em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  padding: 0 2px;
}
[data-module="ai-renderings"] .air-vpop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
[data-module="ai-renderings"] .air-vpop-card {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}
[data-module="ai-renderings"] .air-vpop-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
[data-module="ai-renderings"] .air-vpop-card:hover {
  border-color: var(--accent);
}
[data-module="ai-renderings"] .air-vpop-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
[data-module="ai-renderings"] .air-vpop-card-badge {
  position: absolute;
  top: 3px; left: 3px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 4px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-vpop-card.is-active .air-vpop-card-badge {
  background: var(--accent);
  color: var(--bg);
}

/* Canvas chip overlays kept compact: lineage (bottom-left), action cluster
   (top-right), cost pill (top-left), drift banner (top-centre). */
[data-module="ai-renderings"] .air-canvas-overlays {
  position: absolute; inset: 0;
  pointer-events: none;
}
[data-module="ai-renderings"] .air-canvas-overlays > * { pointer-events: auto; }

/* ---------- Canvas toolbar (floating; v3 layout) ----------
   Lives inside the canvas card, anchored top-half / left edge so it never
   overlaps the lineage pill (bottom-left) or the action cluster (top-right
   in Phase 4). */
[data-module="ai-renderings"] .air-canvas-toolbar {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  z-index: 6;
  pointer-events: auto;
  max-height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
}
[data-module="ai-renderings"] .air-ct {
  width: 168px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.45));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100%;
}
[data-module="ai-renderings"] .air-ct-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
}
[data-module="ai-renderings"] .air-ct-head-label {
  flex: 1;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: 0.12em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-ct-head-close {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 4px;
  color: var(--text-tertiary); cursor: pointer;
}
[data-module="ai-renderings"] .air-ct-head-close:hover {
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-ct-body {
  padding: 8px 8px 10px;
  overflow-y: auto;
  min-height: 0;
}
[data-module="ai-renderings"] .air-ct-section { display: flex; flex-direction: column; gap: 1px; }
[data-module="ai-renderings"] .air-ct-section-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: 0.1em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  padding: 2px 4px 4px;
}
[data-module="ai-renderings"] .air-ct-divider {
  height: 1px;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  margin: 8px 0 8px;
}
[data-module="ai-renderings"] .air-ct-rows { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }

/* Row -- icon + label + optional key/badge. Active state uses --accent-soft. */
[data-module="ai-renderings"] .air-ct-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  line-height: 1;
}
[data-module="ai-renderings"] .air-ct-row:hover {
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-ct-row.is-active {
  background: var(--accent);
  color: var(--bg);
}
[data-module="ai-renderings"] .air-ct-row.is-active:hover {
  background: var(--accent);
  color: var(--bg);
}
[data-module="ai-renderings"] .air-ct-row.is-secondary {
  font-size: 11px;
  color: var(--text-tertiary);
}
[data-module="ai-renderings"] .air-ct-row.is-warn {
  color: var(--error);
}
[data-module="ai-renderings"] .air-ct-row-icon {
  display: inline-flex; flex-shrink: 0;
}
[data-module="ai-renderings"] .air-ct-row-label { flex: 1; min-width: 0; }
[data-module="ai-renderings"] .air-ct-row-key {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  color: color-mix(in srgb, currentColor 60%, transparent);
}
[data-module="ai-renderings"] .air-ct-row.is-active .air-ct-row-key {
  color: color-mix(in srgb, var(--bg) 50%, transparent);
}
/* Slider rows -- shared shape for mask size. */
[data-module="ai-renderings"] .air-ct-slider {
  margin: 4px 4px 8px;
}
[data-module="ai-renderings"] .air-ct-slider-row {
  display: flex; justify-content: space-between;
  margin-bottom: 4px;
}
[data-module="ai-renderings"] .air-ct-slider-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: 0.1em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-ct-slider-value {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--text-secondary);
}
[data-module="ai-renderings"] .air-ct-slider-input {
  width: 100%;
  accent-color: var(--accent);
}

/* Closed-state pill -- vertical "Tools" reopen button. */
[data-module="ai-renderings"] .air-ct-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 7px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  box-shadow: var(--shadow-sm, 0 4px 16px rgba(0, 0, 0, 0.3));
}
[data-module="ai-renderings"] .air-ct-pill:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-ct-pill-icon {
  /* Keep the icon upright while the rest of the pill is rotated. */
  transform: rotate(180deg);
  display: inline-flex;
}
[data-module="ai-renderings"] .air-ct-pill-label { letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
  [data-module="ai-renderings"] .air-canvas-toolbar { transition: none; }
}
/* V3 viewing chip -- top-left of canvas card. Accent ID badge + label
   + optional star + optional DRIFT pill. Replaces the older "lineage"
   chip that combined parent + arrow + active in one block. */
[data-module="ai-renderings"] .air-chip-viewing {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
  line-height: 1;
}
[data-module="ai-renderings"] .air-chip-viewing-badge {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-chip-viewing-label {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-primary);
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lineage pill -- bottom-left of canvas card. Compact mono parent badge
   plus an arrow when the active version has a parent. Hidden for root
   versions. */
[data-module="ai-renderings"] .air-chip-lineage {
  position: absolute;
  bottom: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
}
[data-module="ai-renderings"] .air-chip-lineage-badge {
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-chip-lineage-arrow {
  color: var(--text-tertiary);
}

[data-module="ai-renderings"] .air-chip-star,
[data-module="ai-renderings"] .air-chip-drift {
  display: inline-flex;
  align-items: center;
}
[data-module="ai-renderings"] .air-chip-star { color: var(--warning); }
[data-module="ai-renderings"] .air-chip-drift {
  color: var(--warning);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 5px;
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  border-radius: 3px;
}
[data-module="ai-renderings"] .air-canvas-actions {
  position: absolute;
  top: 12px; right: 12px;
  display: flex; gap: 6px;
  z-index: 5;
}
[data-module="ai-renderings"] .air-ghost-btn {
  height: 30px; width: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
[data-module="ai-renderings"] .air-ghost-btn:hover {
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-color: var(--accent);
}
[data-module="ai-renderings"] .air-ghost-btn.active { color: var(--warning); }
/* Bottom-right column -- stacks the cost pill above the zoom cluster
   so they share the corner without overlapping. */
[data-module="ai-renderings"] .air-canvas-br {
  position: absolute;
  bottom: 12px; right: 12px;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px;
  z-index: 4;
}
[data-module="ai-renderings"] .air-canvas-zoom {
  display: inline-flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  border-radius: 6px;
  overflow: hidden;
}
[data-module="ai-renderings"] .air-zoom-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  padding: 4px 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  cursor: pointer;
  min-width: 28px;
  height: 28px;
  line-height: 1;
}
[data-module="ai-renderings"] .air-zoom-btn:hover {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
[data-module="ai-renderings"] .air-zoom-readout {
  font-size: 10px;
  letter-spacing: 0.04em;
  min-width: 44px;
  border-left: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
}

[data-module="ai-renderings"] .air-canvas-cost {
  /* Lives inside .air-canvas-br -- positioned by the column wrapper.
     The badge sits over the rendered image so the contrast budget is
     "any image content underneath." Solid-ish background + brighter
     text is the floor: text-secondary (not text-tertiary) so the
     dollar amount stays legible against bright skies / white walls,
     and bg 92% (was 60%) so the badge reads as opaque. font-weight
     500 + 11px gives an extra readability margin without enlarging
     the badge footprint noticeably. */
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--bg) 70%, transparent);
}

/* Canvas overflow menu -- popover content from the top-right ⋯ button.
   Body of the menu mounts inside .air-popover via popover.js. Items are
   icon + label + optional mono hint. data-popover-dismiss closes the
   popover after dispatch (handled in module-events.js). */
[data-module="ai-renderings"] .air-canvas-overflow-menu {
  display: flex; flex-direction: column;
  padding: 4px;
  gap: 1px;
}
[data-module="ai-renderings"] .air-canvas-overflow-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 5px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  line-height: 1;
}
[data-module="ai-renderings"] .air-canvas-overflow-item:hover {
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}
[data-module="ai-renderings"] .air-canvas-overflow-item[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
[data-module="ai-renderings"] .air-canvas-overflow-item[disabled]:hover {
  background: transparent;
}
[data-module="ai-renderings"] .air-canvas-overflow-icon {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  color: var(--text-secondary);
  flex-shrink: 0;
}
[data-module="ai-renderings"] .air-canvas-overflow-label {
  flex: 1;
}
[data-module="ai-renderings"] .air-canvas-overflow-hint {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
[data-module="ai-renderings"] .air-canvas-overflow-divider {
  height: 1px;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  margin: 3px 4px;
}

/* ---------- Floating composer (over canvas region bottom) ----------
   Glass bar that overlays the bottom of the canvas. Multi-row layout:
   attached chips (only when present), prompt input + Generate, config
   chips + Resolution segments + more toggle, optional more-reveal. */
[data-module="ai-renderings"] .air-stage-prompt {
  position: absolute;
  left: 0; right: 0;
  bottom: 18px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  padding: 0 20px;
}
[data-module="ai-renderings"] .air-promptbar {
  pointer-events: auto;
  width: min(720px, 100%);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.45));
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 8px;
}

/* Operation row -- the PRIMARY composer control. Horizontally scrollable so
   the full set of lighting moves stays reachable without wrapping. */
[data-module="ai-renderings"] .air-pb-ops {
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0 2px 2px;
  scrollbar-width: thin;
}
[data-module="ai-renderings"] .air-pb-op {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 6px 11px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition-speed), color var(--transition-speed),
              background var(--transition-speed);
}
[data-module="ai-renderings"] .air-pb-op:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-pb-op.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
[data-module="ai-renderings"] .air-pb-op-ic { opacity: 0.9; flex-shrink: 0; }

/* Operation body -- contextual controls for the active operation. */
[data-module="ai-renderings"] .air-pb-opbody {
  padding: 2px 4px 4px;
}
[data-module="ai-renderings"] .air-pb-ctl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
[data-module="ai-renderings"] .air-pb-ctl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
[data-module="ai-renderings"] .air-pb-ctl-text { flex: 1 1 150px; }
[data-module="ai-renderings"] .air-pb-ctl-slider { flex: 1 1 180px; }
[data-module="ai-renderings"] .air-pb-ctl-select { flex: 0 1 150px; }
[data-module="ai-renderings"] .air-pb-ctl-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
/* "from Fixture List" affordance badge -- visual only in this slice
   (autocomplete wiring is a follow-on). */
[data-module="ai-renderings"] .air-pb-ctl-src {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 1px 5px;
}
[data-module="ai-renderings"] .air-pb-ctl-input,
[data-module="ai-renderings"] .air-pb-ctl-dropdown {
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  padding: 7px 9px;
  font-family: inherit;
  font-size: 12px;
  outline: none;
}
[data-module="ai-renderings"] .air-pb-ctl-input:focus,
[data-module="ai-renderings"] .air-pb-ctl-dropdown:focus { border-color: var(--accent); }
[data-module="ai-renderings"] .air-pb-ctl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
/* Slider readout: the honest "aim ..." request label (never a bare number). */
[data-module="ai-renderings"] .air-pb-ctl-val {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-primary);
  text-align: right;
}
[data-module="ai-renderings"] .air-pb-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  background: color-mix(in srgb, var(--text-primary) 12%, transparent);
}
[data-module="ai-renderings"] .air-pb-range.grad-inten {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 15%, transparent), var(--accent));
}
[data-module="ai-renderings"] .air-pb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  cursor: pointer;
}
[data-module="ai-renderings"] .air-pb-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  cursor: pointer;
}
[data-module="ai-renderings"] .air-pb-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Honest microcopy: sliders are requests the AI aims for; results are reviewed. */
[data-module="ai-renderings"] .air-pb-aim-note {
  margin: 8px 2px 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-tertiary);
}
[data-module="ai-renderings"] .air-pb-mask-warn { color: var(--warning); }

/* CompareModeBar -- replaces the prompt bar while inline compare is on.
   Same floating-glass surface treatment as the prompt bar so the swap
   feels like a state change, not a layout change. */
[data-module="ai-renderings"] .air-cmb {
  pointer-events: auto;
  width: min(720px, 100%);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.45));
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
}
[data-module="ai-renderings"] .air-cmb-pair {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
[data-module="ai-renderings"] .air-cmb-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: 0.1em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-right: 2px;
}
[data-module="ai-renderings"] .air-cmb-badge {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}
[data-module="ai-renderings"] .air-cmb-badge.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}
[data-module="ai-renderings"] .air-cmb-arrow {
  color: var(--text-tertiary);
  font-size: 12px;
}
[data-module="ai-renderings"] .air-cmb-modes {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}
[data-module="ai-renderings"] .air-cmb-mode {
  padding: 4px 9px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
}
[data-module="ai-renderings"] .air-cmb-mode:hover { color: var(--text-primary); }
[data-module="ai-renderings"] .air-cmb-mode.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}
[data-module="ai-renderings"] .air-cmb-range {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}
[data-module="ai-renderings"] .air-cmb-onion-row {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
}
[data-module="ai-renderings"] .air-cmb-onion-readout {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--text-secondary);
  flex-shrink: 0;
  min-width: 36px;
  text-align: right;
}
[data-module="ai-renderings"] .air-cmb-exit {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}
[data-module="ai-renderings"] .air-cmb-exit:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

/* "+ reference" chip -- always visible in the attached row even when no
   refs are attached. Dashed border calls out the affordance. */
[data-module="ai-renderings"] .air-pb-addref {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--text-primary) 14%, transparent);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  line-height: 1.4;
}
[data-module="ai-renderings"] .air-pb-addref:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-pb-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
[data-module="ai-renderings"] .air-pb-attached {
  gap: 6px;
  padding: 2px 4px 0;
}

/* Prompt-input row: textarea + Generate. Auto-grow via JS-driven height. */
[data-module="ai-renderings"] .air-pb-prompt-row {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
  border-radius: 10px;
  padding: 6px 10px;
}
[data-module="ai-renderings"] .air-pb-prompt-row:focus-within {
  border-color: var(--accent);
}
[data-module="ai-renderings"] .air-pb-spark {
  display: inline-flex;
  align-items: flex-start;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 8px;
}
/* Textarea column: optional auto-composed hint stacked over the textarea. */
[data-module="ai-renderings"] .air-pb-text-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
[data-module="ai-renderings"] .air-pb-auto-hint {
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 2px 0 0;
  line-height: 1.3;
}
/* Recompose affordance: shown once the designer hand-edits an auto-composed
   prompt, so control changes never silently clobber their text. */
[data-module="ai-renderings"] .air-pb-recompose {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 3px 0 0;
}
[data-module="ai-renderings"] .air-pb-recompose.is-hidden { display: none; }
[data-module="ai-renderings"] .air-pb-recompose-msg {
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.3;
}
[data-module="ai-renderings"] .air-pb-recompose-btn {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
[data-module="ai-renderings"] .air-pb-recompose-btn:hover { filter: brightness(1.1); }
[data-module="ai-renderings"] .air-pb-text {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  padding: 6px 0;
  min-width: 0;
  resize: none;
  overflow-y: auto;
  /* Auto-grow caps at 200px; JS sets explicit height up to that. */
  min-height: 24px;
  max-height: 200px;
}
[data-module="ai-renderings"] .air-pb-text::placeholder { color: var(--text-tertiary); }
[data-module="ai-renderings"] .air-pb-generate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  font-size: 12px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  align-self: flex-end;
}
[data-module="ai-renderings"] .air-pb-generate:hover { filter: brightness(1.1); }
[data-module="ai-renderings"] .air-pb-generate:disabled { opacity: 0.6; cursor: not-allowed; }
[data-module="ai-renderings"] .air-pb-kbd {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  opacity: 0.75;
}

/* Reference chips */
[data-module="ai-renderings"] .air-pb-refchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text-primary);
  font-size: 11px;
}
/* Inline remove on the prompt-bar refchip. Routes through the same
   ref-remove handler the popover uses. Hover lifts the dim weight to
   make the affordance discoverable; default sits muted so the chip
   reads as a label, not a button. */
[data-module="ai-renderings"] .air-pb-refchip-remove {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-speed),
              background var(--transition-speed),
              color var(--transition-speed);
}
[data-module="ai-renderings"] .air-pb-refchip-remove:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--error) 25%, transparent);
  color: var(--error);
}
[data-module="ai-renderings"] .air-pb-refchip-remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  opacity: 1;
}
[data-module="ai-renderings"] .air-pb-refchip-letter {
  width: 18px; height: 18px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 600;
}
[data-module="ai-renderings"] .air-pb-maskchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-pb-maskchip-dot {
  width: 5px; height: 5px;
  border-radius: 3px;
  background: var(--accent);
}

/* Settings row: model chip + resolution segmented + Advanced + cost.
   ALWAYS visible (build-plan B1) -- no longer hidden until the user types. */
[data-module="ai-renderings"] .air-pb-settings {
  padding: 4px 4px 0;
  align-items: center;
  gap: 8px;
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  margin-top: 2px;
}
[data-module="ai-renderings"] .air-pb-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  cursor: pointer;
  color: var(--text-primary);
  font-family: inherit;
}
[data-module="ai-renderings"] .air-pb-chip:hover { border-color: var(--accent); }
/* Model chip status dot -- signals the active model at rest. */
[data-module="ai-renderings"] .air-pb-modeldot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success, var(--accent));
  flex-shrink: 0;
}
[data-module="ai-renderings"] .air-pb-chip-kicker {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-pb-chip-value { font-size: 12px; }

/* Resolution segmented control inline (no popover) */
[data-module="ai-renderings"] .air-pb-res {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
}
[data-module="ai-renderings"] .air-pb-res-segs {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px;
  background: var(--input-bg);
}
[data-module="ai-renderings"] .air-pb-res-seg {
  padding: 2px 8px;
  border: none;
  background: transparent;
  border-radius: 3px;
  color: var(--text-secondary);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
[data-module="ai-renderings"] .air-pb-res-seg:hover { color: var(--text-primary); }
[data-module="ai-renderings"] .air-pb-res-seg.active {
  background: var(--panel);
  color: var(--text-primary);
}

[data-module="ai-renderings"] .air-pb-spacer { flex: 1; }
[data-module="ai-renderings"] .air-pb-cost {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-tertiary);
}
/* Named "Advanced" disclosure toggle (not a bare "More" junk drawer). */
[data-module="ai-renderings"] .air-pb-advbtn {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
[data-module="ai-renderings"] .air-pb-advbtn:hover { color: var(--text-primary); }
[data-module="ai-renderings"] .air-pb-advbtn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Advanced disclosure: generation approach (internal strategy) + negative
   prompt + composite-with-mask. */
[data-module="ai-renderings"] .air-pb-advanced {
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  padding: 10px 6px 4px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-module="ai-renderings"] .air-pb-adv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
[data-module="ai-renderings"] .air-pb-field {
  display: flex; flex-direction: column; gap: 4px;
}
[data-module="ai-renderings"] .air-pb-field-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-pb-field-input {
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  padding: 7px 10px;
  font-family: inherit;
  font-size: 12px;
  outline: none;
}
[data-module="ai-renderings"] .air-pb-field-input:focus { border-color: var(--accent); }
[data-module="ai-renderings"] .air-pb-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 4px 0;
  cursor: pointer;
}
[data-module="ai-renderings"] .air-pb-checkbox input { accent-color: var(--accent); margin-top: 3px; }
[data-module="ai-renderings"] .air-pb-checkbox span {
  display: flex; flex-direction: column; gap: 2px;
}
[data-module="ai-renderings"] .air-pb-checkbox strong {
  font-size: 12px; font-weight: 500; color: var(--text-primary);
}
[data-module="ai-renderings"] .air-pb-checkbox small {
  font-size: 11px; color: var(--text-tertiary);
}
[data-module="ai-renderings"] .air-pb-field-select {
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  padding: 7px 10px;
  font-family: inherit;
  font-size: 12px;
  outline: none;
}
[data-module="ai-renderings"] .air-pb-field-select:focus { border-color: var(--accent); }

/* Popover panel: appears above the prompt bar when a config chip is
   clicked. Anchors via JS-set `left` + bottom 110px (prompt bar is at
   bottom: 18px and ~80px tall). z-index 8 puts it over the prompt bar. */
[data-module="ai-renderings"] .air-popover {
  position: absolute;
  bottom: 110px;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  max-width: 360px;
  max-height: calc(100vh - 280px);
  padding: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.4));
  pointer-events: auto;
  overflow-y: auto;
  z-index: 8;
}

/* Popover items inside the chip popovers */
[data-module="ai-renderings"] .air-pop-list {
  display: flex; flex-direction: column;
}
[data-module="ai-renderings"] .air-pop-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
}
[data-module="ai-renderings"] .air-pop-item:hover {
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
[data-module="ai-renderings"] .air-pop-item.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
[data-module="ai-renderings"] .air-pop-item-label {
  display: block;
  font-weight: 500;
}
[data-module="ai-renderings"] .air-pop-item-hint {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  line-height: 1.4;
}

/* References popover -- 2-col grid of ref cards + actions strip. Replaces
   the persistent left-panel reference list (Phase 3 deletes the panel). */
[data-module="ai-renderings"] .air-pop-refs {
  display: flex; flex-direction: column;
  padding: 6px;
  gap: 8px;
}
[data-module="ai-renderings"] .air-pop-refs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 0;
}
[data-module="ai-renderings"] .air-pop-refs-count {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-pop-refs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
[data-module="ai-renderings"] .air-pop-refs-card {
  position: relative;
  display: flex; gap: 8px; align-items: center;
  padding: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
  border: 1px solid var(--border);
  min-width: 0;
}
[data-module="ai-renderings"] .air-pop-refs-thumb {
  position: relative;
  width: 48px; height: 36px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--input-bg);
}
[data-module="ai-renderings"] .air-pop-refs-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
[data-module="ai-renderings"] .air-pop-refs-thumb-ph {
  width: 100%; height: 100%;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
[data-module="ai-renderings"] .air-pop-refs-letter {
  position: absolute;
  top: 2px; left: 2px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1;
}
[data-module="ai-renderings"] .air-pop-refs-meta {
  display: flex; flex-direction: column; gap: 3px;
  flex: 1; min-width: 0;
}
[data-module="ai-renderings"] .air-pop-refs-label {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 4px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 11px;
  outline: none;
  min-width: 0;
}
[data-module="ai-renderings"] .air-pop-refs-label:hover {
  border-color: var(--border);
}
[data-module="ai-renderings"] .air-pop-refs-label:focus {
  border-color: var(--accent);
  background: var(--input-bg);
}
[data-module="ai-renderings"] .air-pop-refs-role {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
  color: var(--text-secondary);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  min-width: 0;
}
[data-module="ai-renderings"] .air-pop-refs-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
[data-module="ai-renderings"] .air-pop-refs-remove:hover {
  background: var(--error-soft);
  color: var(--error);
}
[data-module="ai-renderings"] .air-pop-refs-empty {
  padding: 18px 10px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 11px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
[data-module="ai-renderings"] .air-pop-refs-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 4px 0 2px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
[data-module="ai-renderings"] .air-pop-refs-upload,
[data-module="ai-renderings"] .air-pop-refs-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px;
  border-radius: 5px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
}
[data-module="ai-renderings"] .air-pop-refs-upload:hover,
[data-module="ai-renderings"] .air-pop-refs-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

/* ---------- Right-rail timeline ---------- */
[data-module="ai-renderings"] .air-rail {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
/* V3 single-row header -- 44px tall, kicker + count + tabs + collapse. */
[data-module="ai-renderings"] .air-rail-head {
  height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
}
[data-module="ai-renderings"] .air-rail-title {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-rail-count {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-module="ai-renderings"] .air-rail-tabs {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}
[data-module="ai-renderings"] .air-rail-tab {
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
}
[data-module="ai-renderings"] .air-rail-tab:hover { color: var(--text-primary); }
[data-module="ai-renderings"] .air-rail-tab.active {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-rail-collapse {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-tertiary);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
[data-module="ai-renderings"] .air-rail-collapse:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

/* Mini-graph rail -- branched tree view shown when the rail is collapsed.
   Each row indents by the node's depth; ancestor-continuation guides
   draw vertical lines through deeper rows so branches stay readable. */
[data-module="ai-renderings"] .air-rail-mini {
  display: flex; flex-direction: column;
  height: 100%;
  padding: 8px 0;
  overflow: hidden;
}
[data-module="ai-renderings"] .air-rail-mini-expand {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-tertiary);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0 auto 8px;
  transform: rotate(90deg);
}
[data-module="ai-renderings"] .air-rail-mini-expand:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-rail-mini-body {
  display: flex; flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 6px 4px;
}
[data-module="ai-renderings"] .air-rail-mini-empty { flex: 1; }

/* Tree row -- horizontal stack of guide segments + an optional elbow,
   then the dot. Each guide/elbow occupies a fixed 16px slot so the
   indent stays uniform across rows.
   flex-grow lets sparse trees (3-4 versions) distribute across the
   available height instead of clustering at the top. The 64px max keeps
   deep trees from stretching absurdly. */
[data-module="ai-renderings"] .air-rail-mini-row {
  display: flex;
  align-items: center;
  flex: 1 1 32px;
  min-height: 32px;
  max-height: 64px;
  position: relative;
}
[data-module="ai-renderings"] .air-rail-mini-row.is-archived { opacity: 0.45; }

/* Connector tint -- consistent across guides + elbow. Slightly more
   visible than --border-strong so the tree reads as a real graph. */
[data-module="ai-renderings"] .air-rail-mini-body {
  --air-rail-line: color-mix(in srgb, var(--text-primary) 18%, transparent);
}

/* Guide column for an ancestor that still has siblings below this row.
   Renders a vertical line through the middle so the branch reads as
   continuous. The "is-cont" variant draws the line; otherwise empty. */
[data-module="ai-renderings"] .air-rail-mini-guide {
  position: relative;
  width: 14px;
  flex-shrink: 0;
  align-self: stretch;
}
[data-module="ai-renderings"] .air-rail-mini-guide.is-cont::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--air-rail-line);
  transform: translateX(-0.5px);
}

/* Elbow connecting the immediate parent's vertical line to this node.
   Last sibling: L-shape (no continuation below). Non-last: T (line
   continues down past the elbow). */
[data-module="ai-renderings"] .air-rail-mini-elbow {
  position: relative;
  width: 14px;
  flex-shrink: 0;
  align-self: stretch;
}
[data-module="ai-renderings"] .air-rail-mini-elbow::before {
  /* Vertical: from top down to row centre (always). */
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  height: 50%;
  width: 1px;
  background: var(--air-rail-line);
  transform: translateX(-0.5px);
}
[data-module="ai-renderings"] .air-rail-mini-elbow:not(.is-last)::before {
  /* Non-last: vertical continues past row centre to the next row. */
  height: 100%;
}
[data-module="ai-renderings"] .air-rail-mini-elbow::after {
  /* Horizontal stub from the vertical to this node. */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 1px;
  background: var(--air-rail-line);
  transform: translateY(-0.5px);
}

[data-module="ai-renderings"] .air-rail-mini-dot {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
  padding: 0;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
[data-module="ai-renderings"] .air-rail-mini-dot:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  transform: scale(1.08);
}
[data-module="ai-renderings"] .air-rail-mini-dot.is-active {
  width: 30px; height: 30px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-size: 9.5px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
[data-module="ai-renderings"] .air-rail-mini-dot.is-starred:not(.is-active) {
  border-color: var(--warning);
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, var(--panel-2));
}
[data-module="ai-renderings"] .air-rail-mini-dot.is-drift::after {
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--warning);
  border: 1.5px solid var(--panel);
}
[data-module="ai-renderings"] .air-rail-mini-badge {
  pointer-events: none;
}

/* Inline label rendered next to the active dot only. Mono italics so
   the eye lands on it without crowding the badge. */
[data-module="ai-renderings"] .air-rail-mini-active-label {
  flex: 1;
  min-width: 0;
  margin-left: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover preview popover -- body-mounted, position: fixed. Sized to
   content (max-width 220px, the thumbnail forces a min ~140px from
   its 16/10 aspect ratio). Self-attribute selector form is required
   because it's body-mounted (per modules-lessons.md body-mount overlay
   rule). */
.air-rail-mini-preview[data-module="ai-renderings"],
[data-module="ai-renderings"] .air-rail-mini-preview {
  position: fixed;
  z-index: 8500;
  width: 200px;
  /* Explicit height: auto belt + suspenders -- something in the user's
     environment was stretching the panel to viewport height despite no
     height rule. The auto here makes the override unambiguous. */
  height: auto;
  max-height: none;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  overflow: hidden;
  /* Reset any inherited box-sizing weirdness so the children's heights
     compose as expected. */
  box-sizing: border-box;
}
[data-module="ai-renderings"] .air-rail-mini-preview.is-visible,
.air-rail-mini-preview[data-module="ai-renderings"].is-visible {
  opacity: 1;
  transform: translateX(0);
}
[data-module="ai-renderings"] .air-rail-mini-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--input-bg);
}
[data-module="ai-renderings"] .air-rail-mini-preview-thumb-ph {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--input-bg);
}
[data-module="ai-renderings"] .air-rail-mini-preview-meta {
  padding: 8px 10px 10px;
}
[data-module="ai-renderings"] .air-rail-mini-preview-head {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
[data-module="ai-renderings"] .air-rail-mini-preview-badge {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-rail-mini-preview-label {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-module="ai-renderings"] .air-rail-mini-preview-mark {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--warning-soft);
  color: var(--warning);
}
[data-module="ai-renderings"] .air-rail-mini-preview-prompt {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[data-module="ai-renderings"] .air-rail-mini-preview-cost {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--text-tertiary);
}
@media (prefers-reduced-motion: reduce) {
  [data-module="ai-renderings"] .air-rail-mini-preview {
    transition: none;
  }
  [data-module="ai-renderings"] .air-rail-mini-dot {
    transition: none;
  }
}

/* Card list -- scrollable */
[data-module="ai-renderings"] .air-rail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Card -- expanded rail row. Tightened from the v0.9.x spacing so more
   versions fit before scrolling kicks in. Active card uses an accent
   left-border pip + soft tint (was just bg+border-all-around) which
   reads as "selected" without competing with the canvas viewing chip. */
[data-module="ai-renderings"] .air-rail-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px 7px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
  position: relative;
}
[data-module="ai-renderings"] .air-rail-card:hover {
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
[data-module="ai-renderings"] .air-rail-card.active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-module="ai-renderings"] .air-rail-card.active::before {
  content: '';
  position: absolute;
  left: -1px; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}
[data-module="ai-renderings"] .air-rail-card-head {
  display: flex; align-items: center; gap: 6px;
}
[data-module="ai-renderings"] .air-rail-badge {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
[data-module="ai-renderings"] .air-rail-card.active .air-rail-badge {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
[data-module="ai-renderings"] .air-rail-card-label {
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
[data-module="ai-renderings"] .air-rail-parent {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
[data-module="ai-renderings"] .air-rail-card-spacer { flex: 1; }
[data-module="ai-renderings"] .air-rail-card-star,
[data-module="ai-renderings"] .air-rail-card-menu {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: inline-flex;
}
[data-module="ai-renderings"] .air-rail-card-star.on { color: var(--warning); }
[data-module="ai-renderings"] .air-rail-card-star:hover,
[data-module="ai-renderings"] .air-rail-card-menu:hover {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-rail-card-body {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  align-items: start;
}
[data-module="ai-renderings"] .air-rail-card-thumb {
  position: relative;
  width: 64px; height: 48px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--input-bg);
  flex-shrink: 0;
}
[data-module="ai-renderings"] .air-rail-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
[data-module="ai-renderings"] .air-rail-thumb-ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--input-bg), var(--panel));
}

/* Pending card -- placeholder for the version about to land. Uses a
   miniature of the canvas generation animation: rotating accent
   aurora, centered Strata mark, dashed accent border on the card
   itself so the pending row reads as "not yet committed". */
[data-module="ai-renderings"] .air-rail-card-pending {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 4%, transparent),
                    color-mix(in srgb, var(--accent) 4%, transparent)),
    var(--panel);
}
[data-module="ai-renderings"] .air-rail-badge-pending {
  background: var(--accent-soft);
  color: var(--accent);
  letter-spacing: 0.04em;
}
[data-module="ai-renderings"] .air-rail-card-thumb-pending {
  position: relative;
  overflow: hidden;
  background: var(--input-bg);
  display: flex; align-items: center; justify-content: center;
}
[data-module="ai-renderings"] .air-rail-pending-aurora {
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--accent) 55%, transparent) 70deg,
    transparent 160deg,
    color-mix(in srgb, var(--accent) 35%, transparent) 240deg,
    transparent 340deg);
  filter: blur(12px) saturate(1.2);
  opacity: 0.6;
  animation: air-gen-aurora-spin 8s linear infinite;
}
[data-module="ai-renderings"] .air-rail-pending-mark {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  z-index: 2;
}
[data-module="ai-renderings"] .air-rail-pending-bar {
  display: block;
  height: 3px; border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent);
  opacity: 0.5;
  transform: scaleX(0.92);
  transform-origin: center;
  animation: air-gen-bar-pulse 1.6s ease-in-out infinite;
}
[data-module="ai-renderings"] .air-rail-pending-bar:nth-child(1) { width: 14px; animation-delay: 0s; }
[data-module="ai-renderings"] .air-rail-pending-bar:nth-child(2) { width: 22px; animation-delay: 0.12s; }
[data-module="ai-renderings"] .air-rail-pending-bar:nth-child(3) { width: 30px; animation-delay: 0.24s; }
[data-module="ai-renderings"] .air-rail-pending-bar:nth-child(4) { width: 38px; animation-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  [data-module="ai-renderings"] .air-rail-pending-aurora,
  [data-module="ai-renderings"] .air-rail-pending-bar { animation: none; }
}
[data-module="ai-renderings"] .air-rail-card-drift {
  position: absolute;
  top: 2px; left: 2px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px;
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  padding: 1px 3px;
  border-radius: 2px;
  letter-spacing: 0.06em;
}
[data-module="ai-renderings"] .air-rail-card-prompt {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[data-module="ai-renderings"] .air-rail-card-foot {
  display: flex; align-items: center; gap: 8px;
  padding-left: 72px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-rail-card-cost { margin-left: auto; }

/* Footer hint */
[data-module="ai-renderings"] .air-rail-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ---------- Comparison view ---------- */
[data-module="ai-renderings"] .air-compare-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
[data-module="ai-renderings"] .air-compare-modes { display: flex; gap: 4px; margin-left: auto; }
[data-module="ai-renderings"] .air-compare-body {
  display: flex; gap: 8px;
  padding: 12px;
  min-height: 60vh;
  background: var(--bg);
}
[data-module="ai-renderings"] .air-compare-pane {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
[data-module="ai-renderings"] .air-compare-title { font-size: 13px; color: var(--text-secondary); }
[data-module="ai-renderings"] .air-compare-pane img {
  max-width: 100%; max-height: 70vh;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}
[data-module="ai-renderings"] .air-compare-empty {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  min-height: 300px;
}
[data-module="ai-renderings"] .air-compare-slider,
[data-module="ai-renderings"] .air-compare-onion {
  position: relative;
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  overflow: hidden;
  min-height: 60vh;
}
[data-module="ai-renderings"] .air-compare-slider img,
[data-module="ai-renderings"] .air-compare-onion img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
[data-module="ai-renderings"] .air-compare-slider .air-slider-bar {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: translateX(-50%);
}
[data-module="ai-renderings"] .air-slider-range,
[data-module="ai-renderings"] .air-onion-range {
  position: absolute;
  left: 12px; right: 12px;
  bottom: 12px;
}
[data-module="ai-renderings"] .air-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px; flex: 1;
}
[data-module="ai-renderings"] .air-compare-cell {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  padding: 6px;
  display: flex; flex-direction: column; gap: 6px;
}
[data-module="ai-renderings"] .air-compare-cell img {
  max-width: 100%; max-height: 30vh;
  object-fit: contain;
  margin: 0 auto;
}
[data-module="ai-renderings"] .air-compare-strip {
  display: flex; gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
  overflow-x: auto;
}
[data-module="ai-renderings"] .air-compare-thumb {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  min-width: 80px;
  padding: 4px;
  color: var(--text-primary);
  display: flex; flex-direction: column; gap: 2px;
}
[data-module="ai-renderings"] .air-compare-thumb.active { border-color: var(--accent); }
[data-module="ai-renderings"] .air-compare-thumb img {
  width: 72px; height: 48px;
  object-fit: cover;
  border-radius: 4px;
}

/* ---------- Cost panel ---------- */
[data-module="ai-renderings"] .air-cost-panel {
  padding: 24px;
  max-width: 720px;
  margin: 0 auto;
}
[data-module="ai-renderings"] .air-cost-panel-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
[data-module="ai-renderings"] .air-cost-panel h3 { margin: 0; }
[data-module="ai-renderings"] .air-cost-total { font-size: 16px; color: var(--text-secondary); }
[data-module="ai-renderings"] .air-cost-actions { margin-top: 16px; }

/* ---------- Empty state ---------- */
[data-module="ai-renderings"] .air-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 24px;
  font-size: 13px;
}


/* ---------- Version browser modal ----------
   Body-mounted thumbnail grid (see module-actions.js#openVersionBrowser).
   ctx.ui.modal can only project versions as up-to-8 text buttons; this
   overlay shows every version with its real thumbnail. Body-mounted, so
   the root needs the self-attribute clause -- descendant combinators do
   not match a [data-module="X"] element AS itself. */
[data-module="ai-renderings"] .air-vbrowser-backdrop,
.air-vbrowser-backdrop[data-module="ai-renderings"] {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--overlay-bg);
  backdrop-filter: blur(4px);
  animation: air-vbrowser-fade 0.18s ease-out;
}
[data-module="ai-renderings"] .air-vbrowser {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg);
  width: min(960px, 100%);
  max-height: min(720px, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: air-vbrowser-rise 0.22s cubic-bezier(0.4, 0, 0.1, 1);
}
[data-module="ai-renderings"] .air-vbrowser-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
[data-module="ai-renderings"] .air-vbrowser-head h2 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}
[data-module="ai-renderings"] .air-vbrowser-head p {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}
[data-module="ai-renderings"] .air-vbrowser-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
[data-module="ai-renderings"] .air-vbrowser-close:hover {
  background: var(--row-hover);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-module="ai-renderings"] .air-vbrowser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  padding: 18px 20px 22px;
  overflow-y: auto;
}
[data-module="ai-renderings"] .air-vbrowser-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
[data-module="ai-renderings"] .air-vbrowser-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
[data-module="ai-renderings"] .air-vbrowser-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--panel-2);
  overflow: hidden;
}
[data-module="ai-renderings"] .air-vbrowser-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-module="ai-renderings"] .air-vbrowser-thumb-ph {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--panel-2) 90%, var(--accent) 10%),
      var(--panel-2));
}
[data-module="ai-renderings"] .air-vbrowser-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--text-primary);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
[data-module="ai-renderings"] .air-vbrowser-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 10px;
}
[data-module="ai-renderings"] .air-vbrowser-card-label {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes air-vbrowser-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes air-vbrowser-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-module="ai-renderings"] .air-vbrowser-backdrop,
  [data-module="ai-renderings"] .air-vbrowser {
    animation: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  [data-module="ai-renderings"] .air-stage { grid-template-columns: minmax(0, 1fr) 300px; }
  [data-module="ai-renderings"] .air-stage.air-stage-rail-collapsed {
    grid-template-columns: minmax(0, 1fr) var(--air-rail-mini-width, 112px);
  }
}
@media (max-width: 1024px) {
  [data-module="ai-renderings"] .air-stage { grid-template-columns: minmax(0, 1fr) 280px; }
  [data-module="ai-renderings"] .air-stage.air-stage-rail-collapsed {
    grid-template-columns: minmax(0, 1fr) var(--air-rail-mini-width, 96px);
  }
  [data-module="ai-renderings"] .air-canvas-region > .air-canvas-card { margin: 12px 12px 4px; }
}
@media (max-width: 900px) {
  [data-module="ai-renderings"] .air-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(180px, 32vh);
  }
  [data-module="ai-renderings"] .air-stage.air-stage-rail-collapsed {
    grid-template-columns: minmax(0, 1fr);
    /* Bounded like the expanded rail: an auto row lets the mini rail (one
       row per version) grow to full content height and squeeze the canvas
       to near zero on long sessions. The cap gives the rail's internal
       scroller a definite height. */
    grid-template-rows: minmax(0, 1fr) minmax(0, 24vh);
  }
  [data-module="ai-renderings"] .air-stage-right {
    border-left: none;
    border-top: 1px solid var(--border);
    min-width: 0;
    overflow: hidden;
  }
  [data-module="ai-renderings"] .air-stage-rail-toggle {
    display: none;
  }
}
@media (max-width: 640px) {
  [data-module="ai-renderings"] .air-stage {
    grid-template-rows: minmax(0, 1fr) minmax(160px, 28vh);
  }
  [data-module="ai-renderings"] .air-canvas-region > .air-canvas-card { margin: 8px 8px 4px; }
  [data-module="ai-renderings"] .air-stage-prompt { padding: 0 8px; bottom: 10px; }
  [data-module="ai-renderings"] .air-pb-text { font-size: 16px; }
}

/* ============================================================
   Tier 2: MODAL-CONTENT classes
   Unscoped on purpose -- ctx.ui.modal mounts content on .strata-overlay
   (body-mounted, no [data-module] attribute), so a [data-module="..."]
   prefix would not match. Class prefix .air- is the leak guard. See
   modules-lessons.md "Modal CSS gets the same trap" for context.
   ============================================================ */
.air-modal-form { display: flex; flex-direction: column; gap: 14px; }
.air-modal-sub { margin: 0 0 4px 0; font-size: 12px; line-height: 1.4; }
.air-modal-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.air-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: border-color var(--transition-speed),
              box-shadow var(--transition-speed);
}
.air-modal-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.air-modal-input::placeholder { color: var(--text-tertiary); }
/* iOS-zoom prevention -- per the modules-lessons modal-content tier rule,
   the [data-module="X"] input { font-size: 16px } shape doesn't apply to
   body-mounted modal content, so apply directly. */
.strata-overlay .air-modal-input { font-size: 16px; }

/* ============================================================
   v0.x followups: refchip hover preview + library/attached
   refs popover styling + ghost prompt strip + recenter button.
   ============================================================ */

/* ---- Refchip thumbnail preview (body-mounted) ---- */
/* Same body-mount + self-attribute pattern as .air-rail-mini-preview.
   Anchors above the chip; clamps inside viewport via JS. */
.air-ref-mini-preview[data-module="ai-renderings"],
[data-module="ai-renderings"] .air-ref-mini-preview {
  position: fixed;
  z-index: 8500;
  width: 220px;
  /* Explicit height: auto + max-height: none belt-and-suspenders -- per
     the rail-mini-preview lesson, something in the user's environment
     was stretching that panel to viewport height despite no height
     rule. Same defense applied here so offsetHeight never returns the
     full viewport, which would push the position calc off-screen. */
  height: auto;
  max-height: none;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  overflow: hidden;
  box-sizing: border-box;
  /* Default top/left so a stale visible class doesn't park the panel at
     the document origin -- position() always overwrites these but the
     fallback keeps any error case from showing in the corner. */
  top: -9999px;
  left: -9999px;
}
[data-module="ai-renderings"] .air-ref-mini-preview.is-visible,
.air-ref-mini-preview[data-module="ai-renderings"].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-module="ai-renderings"] .air-ref-mini-preview img,
.air-ref-mini-preview[data-module="ai-renderings"] img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}
[data-module="ai-renderings"] .air-ref-mini-preview-ph,
.air-ref-mini-preview[data-module="ai-renderings"] .air-ref-mini-preview-ph {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg, var(--input-bg), var(--panel));
}
[data-module="ai-renderings"] .air-ref-mini-preview-meta,
.air-ref-mini-preview[data-module="ai-renderings"] .air-ref-mini-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 8px;
  gap: 8px;
}
[data-module="ai-renderings"] .air-ref-mini-preview-meta strong,
.air-ref-mini-preview[data-module="ai-renderings"] .air-ref-mini-preview-meta strong {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-module="ai-renderings"] .air-ref-mini-preview-meta span,
.air-ref-mini-preview[data-module="ai-renderings"] .air-ref-mini-preview-meta span {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Library/attached refs popover -- card states ---- */
[data-module="ai-renderings"] .air-pop-refs-card[role="button"] {
  cursor: pointer;
  position: relative;
  transition: border-color var(--transition-speed),
              background var(--transition-speed);
}
[data-module="ai-renderings"] .air-pop-refs-card[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
[data-module="ai-renderings"] .air-pop-refs-card.is-attached {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
[data-module="ai-renderings"] .air-pop-refs-card:not(.is-attached) {
  /* Non-attached cards look like library inventory: dimmed thumb + the
     "+" letter signals "click to attach". */
  opacity: 0.78;
}
[data-module="ai-renderings"] .air-pop-refs-card:not(.is-attached):hover {
  opacity: 1;
  border-color: var(--accent-line);
}
[data-module="ai-renderings"] .air-pop-refs-checkmark {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
[data-module="ai-renderings"] .air-pop-refs-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-speed),
              color var(--transition-speed),
              border-color var(--transition-speed);
}
[data-module="ai-renderings"] .air-pop-refs-card:hover .air-pop-refs-delete {
  opacity: 1;
}
[data-module="ai-renderings"] .air-pop-refs-card.is-attached:hover .air-pop-refs-delete {
  /* When attached, the checkmark already occupies top-right.
     Slide the delete to top-left on hover. */
  right: auto;
  left: 4px;
}
[data-module="ai-renderings"] .air-pop-refs-delete:hover {
  color: var(--error);
  border-color: var(--error);
  opacity: 1;
}

/* ---- Ghost prompt strip ---- */
[data-module="ai-renderings"] .air-pb-ghost-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
[data-module="ai-renderings"] .air-pb-ghost-kicker {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
[data-module="ai-renderings"] .air-pb-ghost-spacer { flex: 1; }
[data-module="ai-renderings"] .air-pb-ghost-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
  transition: background var(--transition-speed),
              color var(--transition-speed);
}
[data-module="ai-renderings"] .air-pb-ghost-clear:hover {
  background: var(--accent);
  color: var(--bg);
}
/* Textarea placeholder gets an accent-soft tint while a ghost is staged
   so users can tell "this isn't normal placeholder copy, it's a real
   prompt I'm reusing." Two-line clamp so long ghosts don't visually
   shove the composer downward. */
[data-module="ai-renderings"] .air-pb-prompt-row.has-ghost .air-pb-text {
  /* Deliberately NOT color: transparent -- a fast keystroke that lands
     between focusin and the next-frame promote-ghost call would briefly
     render invisible. Placeholder hides automatically once any value is
     present, so the transition is clean without the override. */
  caret-color: var(--accent);
}
[data-module="ai-renderings"] .air-pb-prompt-row.has-ghost .air-pb-text::placeholder {
  color: var(--accent);
  opacity: 0.85;
  font-style: italic;
}

/* ---- Recenter button ---- */
[data-module="ai-renderings"] .air-zoom-recenter {
  /* Match the rest of the cluster's height; the icon sits centered. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-module="ai-renderings"] .air-zoom-recenter svg {
  display: block;
}

/* ---- Clear-prompt button (next to textarea, before Generate) ----
   Visible whenever promptText or ghostPrompt is non-empty. Lets the
   user wipe and start fresh in one click regardless of how the bar
   got populated (typed, ghost-staged, or ghost-promoted). */
[data-module="ai-renderings"] .air-pb-clear {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin: 0 6px 0 -2px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--input-bg);
  border-radius: 999px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--transition-speed),
              border-color var(--transition-speed),
              background var(--transition-speed);
}
[data-module="ai-renderings"] .air-pb-clear:hover {
  color: var(--error);
  border-color: var(--error);
  background: var(--error-soft);
}
[data-module="ai-renderings"] .air-pb-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---------- Approved docked workspace layout ----------
   Tools, canvas, prompt, and Versions occupy stable grid/flex regions.
   Nothing floats over the editable image, and every collapsed panel leaves
   a labelled restore affordance at the edge it came from. */
[data-module="ai-renderings"] .air-stage {
  --air-tools-width: 58px;
  --air-versions-width: 320px;
  grid-template-columns: var(--air-tools-width) minmax(0, 1fr) var(--air-versions-width);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "tools canvas versions";
  transition: grid-template-columns 0.22s ease;
}
[data-module="ai-renderings"] .air-stage.air-stage-tools-collapsed {
  --air-tools-width: 30px;
}
[data-module="ai-renderings"] .air-stage.air-stage-rail-collapsed {
  --air-versions-width: var(--air-rail-mini-width, 112px);
  grid-template-columns: var(--air-tools-width) minmax(0, 1fr) var(--air-versions-width);
}
[data-module="ai-renderings"] .air-stage.air-stage-focus {
  --air-tools-width: 0px;
  --air-versions-width: 0px;
}
[data-module="ai-renderings"] .air-stage.air-stage-inline-compare {
  --air-tools-width: 0px;
}
[data-module="ai-renderings"] .air-stage-tools {
  grid-area: tools;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
  transition: opacity 0.18s ease;
  z-index: 4;
}
[data-module="ai-renderings"] .air-canvas-region { grid-area: canvas; }
[data-module="ai-renderings"] .air-stage-right { grid-area: versions; }
[data-module="ai-renderings"] .air-stage-focus .air-stage-tools,
[data-module="ai-renderings"] .air-stage-focus .air-stage-right,
[data-module="ai-renderings"] .air-stage-inline-compare .air-stage-tools {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border: 0;
}

[data-module="ai-renderings"] .air-canvas-card {
  margin: 10px;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  container-type: size;
}
[data-module="ai-renderings"] .air-canvas-wrap {
  transform-origin: center center;
  transform: translate(var(--air-pan-x, 0px), var(--air-pan-y, 0px)) scale(var(--air-zoom, 1));
  transition: none;
  will-change: transform;
}
[data-module="ai-renderings"] .air-canvas-underlay {
  max-width: 100cqw;
  max-height: 100cqh;
}
[data-module="ai-renderings"] .air-canvas-mask {
  touch-action: none;
}
[data-module="ai-renderings"] .air-canvas-card-space-pan .air-canvas-mask,
[data-module="ai-renderings"] .air-canvas-card-panning .air-canvas-mask {
  cursor: grabbing;
}

/* Compact docked tool rail. Context remains visible, but it no longer
   consumes a 168px glass menu over the image. */
[data-module="ai-renderings"] .air-canvas-toolbar {
  position: static;
  inset: auto;
  transform: none;
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 6px;
}
[data-module="ai-renderings"] .air-ct {
  width: 100%;
  height: 100%;
  max-height: none;
  background: transparent;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
[data-module="ai-renderings"] .air-ct-head {
  min-height: 30px;
  justify-content: center;
  padding: 2px 0 6px;
  border-bottom: 1px solid var(--border);
}
[data-module="ai-renderings"] .air-ct-head-label,
[data-module="ai-renderings"] .air-ct-section-label,
[data-module="ai-renderings"] .air-ct-row-label,
[data-module="ai-renderings"] .air-ct-row-key,
[data-module="ai-renderings"] .air-ct-slider-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
[data-module="ai-renderings"] .air-ct-head-close {
  width: 44px;
  height: 30px;
}
[data-module="ai-renderings"] .air-ct-body {
  padding: 6px 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
[data-module="ai-renderings"] .air-ct-rows {
  align-items: center;
  gap: 3px;
  margin-bottom: 6px;
}
[data-module="ai-renderings"] .air-ct-row {
  width: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
}
[data-module="ai-renderings"] .air-ct-row.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
[data-module="ai-renderings"] .air-ct-row.is-active:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
[data-module="ai-renderings"] .air-ct-row-icon svg {
  width: 18px;
  height: 18px;
}
[data-module="ai-renderings"] .air-ct-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0 8px;
}
[data-module="ai-renderings"] .air-ct-slider-row {
  margin: 0 0 3px;
}
[data-module="ai-renderings"] .air-ct-slider-value {
  font-size: 8px;
}
[data-module="ai-renderings"] .air-ct-slider-input { width: 42px; }
[data-module="ai-renderings"] .air-stage-tools-collapsed .air-canvas-toolbar { padding: 0; }
[data-module="ai-renderings"] .air-ct-pill {
  width: 29px;
  height: 100%;
  min-height: 96px;
  justify-content: center;
  padding: 8px 5px;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background: var(--panel);
  backdrop-filter: none;
  box-shadow: none;
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Prompt/settings is in document flow beneath the canvas. Its collapsed
   state is a labelled bottom-edge tab instead of an absent surface. */
[data-module="ai-renderings"] .air-stage-prompt-shell {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  padding: 8px 42px 8px 10px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  transition: padding 0.18s ease;
}
[data-module="ai-renderings"] .air-stage-prompt {
  position: static;
  inset: auto;
  display: block;
  padding: 0;
  pointer-events: auto;
}
[data-module="ai-renderings"] .air-promptbar {
  width: 100%;
  max-width: none;
  background: var(--panel-2);
  backdrop-filter: none;
  border-color: var(--border);
  box-shadow: none;
}
[data-module="ai-renderings"] .air-stage-prompt-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel-2);
  color: var(--text-secondary);
  font-family: var(--font-display);
  cursor: pointer;
  z-index: 2;
}
[data-module="ai-renderings"] .air-stage-prompt-toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
[data-module="ai-renderings"] .air-stage-prompt-toggle svg { transform: rotate(180deg); }
[data-module="ai-renderings"] .air-stage-prompt-collapsed .air-stage-prompt-shell {
  height: 32px;
  padding: 0;
}
[data-module="ai-renderings"] .air-stage-prompt-collapsed .air-stage-prompt { display: none; }
[data-module="ai-renderings"] .air-stage-prompt-collapsed .air-stage-prompt-toggle {
  top: 0;
  left: 50%;
  right: auto;
  width: auto;
  height: 32px;
  padding: 0 12px;
  transform: translateX(-50%);
  border-bottom: 0;
  border-radius: var(--button-radius) var(--button-radius) 0 0;
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-stage-prompt-collapsed .air-stage-prompt-toggle span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}
[data-module="ai-renderings"] .air-stage-prompt-collapsed .air-stage-prompt-toggle svg { transform: none; }
[data-module="ai-renderings"] .air-stage-focus .air-stage-prompt-shell { display: none; }

/* The mini graph remains useful, but its expand control now names the panel
   so a cautious user knows exactly what will come back. */
[data-module="ai-renderings"] .air-rail-mini-expand {
  width: auto;
  min-width: 44px;
  min-height: 32px;
  padding: 0 7px;
  gap: 5px;
  transform: none;
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-module="ai-renderings"] .air-rail-mini-expand svg { transform: rotate(90deg); }

@media (max-width: 1280px) {
  [data-module="ai-renderings"] .air-stage { --air-versions-width: 280px; }
  [data-module="ai-renderings"] .air-stage.air-stage-rail-collapsed {
    --air-versions-width: var(--air-rail-mini-width, 104px);
  }
}
@media (max-width: 900px) {
  [data-module="ai-renderings"] .air-stage {
    grid-template-columns: var(--air-tools-width) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(150px, 26vh);
    grid-template-areas: "tools canvas" "versions versions";
  }
  [data-module="ai-renderings"] .air-stage.air-stage-rail-collapsed {
    grid-template-columns: var(--air-tools-width) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(76px, 16vh);
  }
  [data-module="ai-renderings"] .air-stage.air-stage-focus {
    grid-template-columns: 0 minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 0;
  }
  [data-module="ai-renderings"] .air-stage-right {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 640px) {
  [data-module="ai-renderings"] .air-ws-header {
    height: auto;
    min-height: 96px;
    padding: 4px 6px;
    gap: 4px;
    flex-wrap: wrap;
    align-content: center;
  }
  [data-module="ai-renderings"] .air-ws-header .air-icon-btn,
  [data-module="ai-renderings"] .air-ws-header .air-spend-pill,
  [data-module="ai-renderings"] .air-ws-header .air-top-btn {
    min-height: 44px;
  }
  [data-module="ai-renderings"] .air-ws-header .air-icon-btn,
  [data-module="ai-renderings"] .air-ws-header .air-refresh-btn {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  [data-module="ai-renderings"] .air-ws-header-sep {
    flex: 0 0 100%;
    height: 0;
  }
  [data-module="ai-renderings"] .air-ws-titleblock { flex: 1; }
  [data-module="ai-renderings"] .air-ws-title-project,
  [data-module="ai-renderings"] .air-ws-title-sep,
  [data-module="ai-renderings"] .air-spend-label,
  [data-module="ai-renderings"] .air-spend-ceiling,
  [data-module="ai-renderings"] .air-refresh-btn span { display: none; }
  [data-module="ai-renderings"] .air-ws-title-session { max-width: 240px; }
  [data-module="ai-renderings"] .air-stage { --air-tools-width: 52px; }
  [data-module="ai-renderings"] .air-stage.air-stage-tools-collapsed { --air-tools-width: 44px; }
  [data-module="ai-renderings"] .air-stage-tools-collapsed .air-ct-pill {
    width: 44px;
  }
  [data-module="ai-renderings"] .air-ct-head-close {
    height: 44px;
  }
  [data-module="ai-renderings"] .air-rail-collapse {
    width: 44px;
    height: 44px;
  }
  [data-module="ai-renderings"] .air-rail-mini-expand {
    min-height: 44px;
  }
  [data-module="ai-renderings"] .air-focus-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  [data-module="ai-renderings"] .air-focus-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  [data-module="ai-renderings"] .air-canvas-card { margin: 6px; }
  [data-module="ai-renderings"] .air-stage-prompt-shell { padding: 6px 52px 6px 6px; }
  [data-module="ai-renderings"] .air-stage-prompt-toggle {
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
  }
  [data-module="ai-renderings"] .air-stage-prompt-collapsed .air-stage-prompt-shell,
  [data-module="ai-renderings"] .air-stage-prompt-collapsed .air-stage-prompt-toggle {
    height: 44px;
  }
  [data-module="ai-renderings"] .air-pb-text { font-size: 16px; }
}