/* =============================================================================
   MUSE · Artifact workspace (split-screen "interna")
   ========================================================================== */
/* The workspace fills the <main> area only — the app sidebar (the conversation
   list) stays visible to its left as column 1. So the detail reads as three
   columns: conversations · artifact chat · artifact. */
.aw {
  position: absolute; inset: 0; z-index: 30;
  background: var(--canvas);
  display: flex; flex-direction: column;
}
/* While the overlay is up, hide main's own content so its (composited) preview
   iframes can't paint through the overlay. */
.main.has-aw > :not(.aw) { visibility: hidden; }

/* ── headers (Claude-style): each panel owns its own header at the same height,
   the divider runs between them — conversation header | artifact header ──── */
.aw__back { flex: none; }
.aw__tool-left { display: flex; align-items: center; gap: 8px; flex: none; }
.aw__tool-right { display: flex; align-items: center; gap: 6px; flex: none; }
.aw__tool-name { flex: 1; min-width: 0; text-align: center; padding: 0 10px;
  font: 600 13px/1.2 var(--font-ui); color: var(--ink-low);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* compact icon-only Preview/Code toggle */
.seg--icons .seg__opt { padding: 6px 10px; }
.aw__copy, .aw__download { gap: 6px; }
#awVerLabel { font-family: var(--font-mono); font-size: 12px; }

/* ── body grid: chat | divider | preview ─────────────────────────────────── */
/* Chat ~32% / artifact ~68% — keeps the artifact at roughly the same
   proportion it had in the sidebar browse preview, so Edit doesn't jump. */
.aw__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 40% 1px 1fr; overflow: hidden;
  transition: grid-template-columns var(--dur-base) var(--ease-out); }
.aw__panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.aw__panel--chat { background: var(--canvas-2); border-right: 0; overflow: hidden;
  transition: opacity var(--dur-fast) var(--ease-out); }
.aw__divider { background: var(--line); cursor: col-resize; position: relative;
  transition: opacity var(--dur-fast) var(--ease-out); }
.aw__divider::after { content: ""; position: absolute; inset: 0 -4px; }
.aw__divider:hover { background: var(--accent); }

/* Expand (C11): hand the artifact the full width; the conversation column
   collapses away. Contract restores the split. */
.aw--expanded .aw__panel--chat { opacity: 0; pointer-events: none; }
.aw--expanded .aw__divider { opacity: 0; pointer-events: none; }

/* ── LEFT: chat ──────────────────────────────────────────────────────────── */
.aw__chat-head { flex: none; height: 56px; display: flex; align-items: center; gap: 10px;
  padding: 0 12px 0 8px; border-bottom: 1px solid var(--line); }
.aw__chat-id { flex: 1; min-width: 0; }
.aw__chat-title { font: 600 13.5px/1.2 var(--font-ui); }
.aw__chat-from { font: 400 11.5px/1.3 var(--font-ui); color: var(--ink-low); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* static version badge — read-only indicator, no navigation between versions */
.aw__verbadge { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px;
  border-radius: var(--r-pill); font: 600 12px/1 var(--font-mono); color: var(--ink-2);
  background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line-soft); }
.aw__verbadge .icon { width: 14px; height: 14px; color: var(--ink-low); }

.aw__thread { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 18px 6px; }

.awmsg { display: flex; gap: 10px; margin-bottom: 15px; animation: msg-in var(--dur-base) var(--ease-out) both; }
.awmsg--user { flex-direction: row-reverse; }
.awmsg__bubble { background: var(--surface); color: var(--ink); padding: 9px 13px; border-radius: 13px 13px 4px 13px;
  box-shadow: inset 0 0 0 1px var(--line-soft); font-size: 13.5px; line-height: 1.5; max-width: 86%; }
/* only the message(s) that triggered the OPEN artifact are accent-highlighted */
.awmsg--user.is-trigger .awmsg__bubble { background: var(--accent-soft); box-shadow: none; }
.awmsg__body { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.58; color: var(--ink); }
.awmsg__body p + p { margin-top: 9px; }
.awmsg__tag { display: inline-block; margin-top: 8px; font: 600 10px/1 var(--font-mono); letter-spacing: .03em;
  color: var(--accent); background: var(--accent-soft); padding: 4px 8px; border-radius: var(--r-pill); }
.aw__think { display: inline-flex; gap: 5px; padding: 4px 0; }
.aw__think i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: bob 1.2s var(--ease-in-out) infinite; }
.aw__think i:nth-child(2) { animation-delay: .15s; } .aw__think i:nth-child(3) { animation-delay: .3s; }

/* artifact tile inside the conversation — click to preview it; the open one is marked */
.awtile { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-bottom: 15px;
  padding: 11px 12px; border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--sh-xs), inset 0 0 0 1px var(--line-soft);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.awtile:hover { transform: translateY(-1px); box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line); }
.awtile.is-open { box-shadow: var(--sh-xs), inset 0 0 0 1.5px var(--accent-tint); }
.awtile__thumb { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.awtile__name { flex: 1; min-width: 0; font: 600 13px/1.3 var(--font-ui); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awtile > .icon:last-child { flex: none; color: var(--ink-low); }
.awsys { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12px; color: var(--ink-low); }
.awsys .icon { width: 14px; height: 14px; color: var(--ok); flex: none; }

/* compose */
.aw__compose { flex: none; padding: 10px 16px 16px; }
.aw__composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line-soft); }
/* focus: a subtle neutral edge — no red stroke or glow (matches the main composer) */
.aw__composer:focus-within { box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line); }
.aw__input { flex: 1; min-height: 24px; max-height: 120px; border: 0; background: transparent; resize: none;
  font-size: 14px; line-height: 1.5; color: var(--ink); padding: 4px 0; }
.aw__input:focus, .aw__input:focus-visible { outline: none; }
.aw__input::placeholder { color: var(--ink-low); }

/* ── RIGHT: preview ──────────────────────────────────────────────────────── */
.aw__panel--preview { background: var(--canvas); position: relative; }

/* ── "Prism working" regen loader + reveal ──────────────────────────────── */
.aw__regen {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px;
  background: color-mix(in srgb, var(--canvas) 68%, transparent);
  backdrop-filter: blur(11px) saturate(125%); -webkit-backdrop-filter: blur(11px) saturate(125%);
  animation: aw-regen-in var(--dur-fast) var(--ease-out) both;
}
.aw__regen.is-leaving { animation: aw-regen-out var(--dur-base) var(--ease-out) both; }
@keyframes aw-regen-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes aw-regen-out { to { opacity: 0; } }
.aw__regen-mark { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.aw__regen-aura { position: absolute; inset: 8px; border-radius: 50%;
  /* design-system accent only — no spectrum */
  background: conic-gradient(from 0deg, var(--accent-hi), var(--accent), var(--accent-lo), var(--accent), var(--accent-hi));
  filter: blur(14px); opacity: 0.8; animation: home-spin 3.2s linear infinite; }
.aw__regen-glow { position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,59,59,0.26), transparent 70%); animation: home-breathe 2.4s ease-in-out infinite; }
.aw__regen-prism { position: relative; width: 42px; height: 58px; display: grid; place-items: center; color: #fff;
  animation: home-float 2.8s ease-in-out infinite; filter: drop-shadow(0 4px 11px rgba(0,0,0,0.3)); }
.aw__regen-prism svg { width: 100%; height: auto; }
.aw__regen-label { font: 600 16px/1 var(--font-display); letter-spacing: -0.01em; }
.aw__regen-dots { animation: aw-dots 1.4s steps(4, end) infinite; }
@keyframes aw-dots { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
.aw__regen-sub { font: 400 12.5px/1 var(--font-ui); color: var(--ink-mid); min-height: 14px; }
.aw__regen-bar { width: 168px; height: 3px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; position: relative; }
.aw__regen-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: -42%; width: 42%;
  border-radius: var(--r-pill); background: var(--accent-grad); animation: aw-regen-bar 1.1s var(--ease-in-out) infinite; }
@keyframes aw-regen-bar { to { left: 100%; } }

/* — binary (image/PDF): a framed "rendering" loader — wait for the whole asset — */
.aw__regen-frame { width: 132px; height: 96px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line-soft); position: relative; overflow: hidden; }
.aw__regen-frame .icon { width: 36px; height: 36px; color: var(--ink-low); }
.aw__regen-frame::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent 80%);
  animation: aw-shimmer 1.5s var(--ease-in-out) infinite; }

/* — text: streams directly, so a lighter document skeleton (no heavy blur) — */
.aw__regen--text { gap: 14px; background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.aw__regen-doc { width: min(58%, 340px); display: flex; flex-direction: column; gap: 11px; }
.aw__regen-doc i { height: 9px; border-radius: var(--r-pill); background: var(--sunken); position: relative; overflow: hidden; }
.aw__regen-doc i.is-short { width: 52%; }
.aw__regen-doc i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--accent-soft) 90%, transparent) 50%, transparent 80%);
  animation: aw-shimmer 1.4s var(--ease-in-out) infinite; }
.aw__regen-doc i:nth-child(2)::after { animation-delay: .12s; }
.aw__regen-doc i:nth-child(3)::after { animation-delay: .24s; }
.aw__regen-doc i:nth-child(4)::after { animation-delay: .36s; }
.aw__regen-doc i:nth-child(5)::after { animation-delay: .48s; }
.aw__regen-doc i:nth-child(6)::after { animation-delay: .6s; }
.aw__regen-label--text { font-size: 14px; color: var(--ink-mid); }
@keyframes aw-shimmer { to { transform: translateX(100%); } }

/* reveal of the new content */
.aw__device.is-new, .aw__stage--code.is-new { animation: aw-reveal 520ms var(--ease-out) both; }
@keyframes aw-reveal { from { opacity: 0; transform: translateY(8px) scale(0.992); } to { opacity: 1; transform: none; } }

/* transient "Regenerated · vN" pill */
.aw__newpill {
  position: absolute; top: 60px; left: 50%; z-index: 7;
  display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--glass-strong); box-shadow: var(--sh-md), inset 0 0 0 1px var(--glass-edge);
  font: 600 12px/1 var(--font-ui); color: var(--ink); white-space: nowrap;
  animation: aw-pill 1900ms var(--ease-out) both;
}
.aw__newpill-bolt { color: var(--accent); height: 13px; width: auto; display: block; }   /* the PRISM bolt marks Muse — never a sparkle */
@keyframes aw-pill {
  0% { opacity: 0; transform: translate(-50%, -10px); }
  12% { opacity: 1; transform: translate(-50%, 0); }
  80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}
.aw__toolbar { flex: none; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--line); }
.aw__viewports { display: flex; gap: 2px; }
.aw__viewports .iconbtn.is-on { background: var(--accent-soft); color: var(--accent); }
.aw__tool-spacer { flex: 1; }
.aw__meta { font-size: 11px; color: var(--ink-low); }

.aw__stage { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: stretch; justify-content: center;
  padding: 0; background: var(--canvas); }
.aw__device { width: 100%; height: 100%; }
.aw__device--framed { height: auto; min-height: calc(100% - 48px); margin: 24px 0; align-self: flex-start;
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-lg); background: #fff; }
.aw__frame { width: 100%; height: 100%; min-height: 400px; border: 0; background: #fff; display: block; }
.aw__device--framed .aw__frame { height: 70vh; }

.aw__stage--code { display: block; padding: 0; background: var(--surface-2); }
.aw__code { margin: 0; padding: 20px 22px; font: 12.5px/1.7 var(--font-mono); color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word; }

/* ── responsive: stack ───────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .aw__body { grid-template-columns: 1fr !important; grid-template-rows: 1fr 1fr; }
  .aw__divider { display: none; }
  .aw__panel--chat { border-bottom: 1px solid var(--line); }
}