/* mijnspel-creator dashboard layout — applies the EDU design system tokens.
   Tokens live in styles-tokens.css (lifted verbatim from the design handoff).
   This file is the layout/component layer reskinned to the EDU palette. */

* { box-sizing: border-box; }
html, body, #root {
  height: 100%; max-height: 100vh; margin: 0;
  max-width: 100vw; overflow: hidden; overscroll-behavior: none;
}
#root { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
body { background: var(--bg-page); color: var(--fg-1); font: var(--t-body); }
.ms-three-pane, .ms-two-pane { max-width: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.ms-three-pane > *, .ms-two-pane > * { min-width: 0; min-height: 0; }

/* Project shell: collapsible left sidebar + main two-pane. */
.ms-shell { display: flex; flex: 1; min-height: 0; min-width: 0; position: relative; }
.ms-sidebar {
  flex: 0 0 0;
  width: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-hair);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width var(--dur-1) var(--ease-out);
  min-height: 0;
}
.ms-shell-sidebar-open .ms-sidebar { width: 260px; flex: 0 0 260px; }
.ms-sidebar-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--border-hair);
  flex-shrink: 0;
}
.ms-sidebar-toggle, .ms-sidebar-open {
  background: transparent; border: 1px solid var(--border-default);
  color: var(--fg-2); cursor: pointer;
  width: 44px; height: 44px; border-radius: var(--r-2);
  display: inline-flex; align-items: center; justify-content: center;
  font: 16px/1 var(--font-sans); padding: 0; flex-shrink: 0;
}
.ms-sidebar-toggle:hover, .ms-sidebar-open:hover {
  border-color: var(--border-accent); color: var(--spark-500);
}
.ms-shell-sidebar-open .ms-sidebar-open { display: none; }
.ms-sidebar-body { flex: 1; overflow-y: auto; min-height: 0; }

.ms-two-pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6px minmax(0, clamp(300px, 28vw, 440px));
  flex: 1; min-height: 0; position: relative;
}
.ms-two-pane.ms-drop-active { outline: 2px dashed var(--spark-500); outline-offset: -6px; }

@media (max-width: 1100px) {
  .ms-two-pane:not(.ms-mobile) {
    grid-template-columns: minmax(0, 1fr) 6px minmax(0, clamp(260px, 32vw, 380px));
  }
}

/* On mobile the sidebar overlays the main panes from the left so the
   chat/artifacts switcher keeps the full viewport. */
@media (max-width: 720px), (max-height: 500px) {
  .ms-sidebar {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 30;
    width: 0; flex: 0 0 auto;
    box-shadow: var(--shadow-3);
  }
  .ms-shell-sidebar-open .ms-sidebar { width: min(86vw, 320px); flex: 0 0 auto; }
}

.ms-two-pane.ms-mobile {
  display: flex; flex-direction: column;
  grid-template-columns: 1fr !important;
}
.ms-two-pane.ms-mobile .ms-mobile-switcher {
  display: flex; gap: 4px; padding: 6px 8px;
  background: var(--bg-surface); border-bottom: 1px solid var(--border-hair);
  flex-shrink: 0; overflow-x: auto;
}
.ms-two-pane.ms-mobile .ms-mobile-tab {
  font: var(--t-caption); padding: 8px 12px; min-height: 44px;
  background: transparent; color: var(--fg-3);
  border: 1px solid var(--border-hair); border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.ms-two-pane.ms-mobile .ms-mobile-tab-active {
  color: var(--fg-inverse); background: var(--spark-500); border-color: var(--spark-500);
}
.ms-two-pane.ms-mobile .ms-resizer { display: none; }
.ms-two-pane.ms-mobile .ms-pane { flex: 1; min-height: 0; border-right: none; border-bottom: 1px solid var(--border-hair); }
.ms-two-pane.ms-mobile .ms-pane-chat,
.ms-two-pane.ms-mobile .ms-pane-right { display: none; }
.ms-two-pane.ms-mobile.ms-mobile-active-chat  .ms-pane-chat  { display: flex; }
.ms-two-pane.ms-mobile.ms-mobile-active-right .ms-pane-right { display: flex; }

/* Chat pane head: replaces the old console section header. */
.ms-chat-head { padding: 8px 12px; gap: 8px; }
.ms-chat-head-title { color: var(--fg-1); font-weight: 700; }
.ms-chat-head-meta { color: var(--fg-3); font: var(--t-caption); }

/* Buttons & chips ------------------------------------------------------- */
.ms-btn {
  font: var(--t-button);
  padding: 0 18px; height: 44px; border: 1px solid var(--border-default);
  background: var(--bg-surface); color: var(--fg-1); cursor: pointer;
  border-radius: var(--r-2); display: inline-flex; align-items: center;
  gap: 8px; white-space: nowrap; flex-shrink: 0;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ms-btn:hover { background: var(--paper-200); border-color: var(--border-strong); }
.ms-btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.ms-btn-primary { background: var(--spark-500); border-color: var(--spark-500); color: var(--fg-inverse); }
.ms-btn-primary:hover { background: var(--spark-600); border-color: var(--spark-600); }
.ms-btn-danger { border-color: var(--rose-600); color: var(--rose-600); background: var(--bg-surface); }
.ms-btn-danger:hover { background: var(--rose-100); }
.ms-btn-play { background: var(--grass-500); border-color: var(--grass-500); color: var(--fg-inverse); }
.ms-btn-play:hover { background: var(--grass-600); border-color: var(--grass-600); }
.ms-btn-info { background: var(--sky-500); border-color: var(--sky-500); color: var(--fg-inverse); }
.ms-btn-info:hover { background: var(--sky-600); border-color: var(--sky-600); }
.ms-btn-text { background: transparent; border-color: transparent; color: var(--fg-link); }
.ms-btn-text:hover { background: var(--paper-200); }
.ms-btn:disabled { opacity: .4; cursor: not-allowed; }
.ms-btn[hidden] { display: none; }

.ms-chip {
  font: var(--t-caption);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--paper-200); border: 1px solid var(--border-hair); color: var(--fg-2);
}
.ms-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-muted); display: inline-block; }
.ms-dot-queued { background: var(--ink-400); }
.ms-dot-running { background: var(--spark-500); animation: ms-pulse-ring 1.6s infinite; box-shadow: 0 0 0 0 rgba(255, 106, 38, .4); }
.ms-dot-streaming { background: var(--sky-500); }
.ms-dot-success { background: var(--grass-500); }
.ms-dot-failed { background: var(--rose-600); }
@keyframes ms-pulse-ring { 50% { box-shadow: 0 0 0 6px rgba(255, 106, 38, 0); } }

/* Wordmark -------------------------------------------------------------- */
.ms-wordmark { display: inline-flex; align-items: baseline; gap: 10px; }
.ms-wordmark-brand { font: 700 22px/26px var(--font-display); letter-spacing: -.02em; color: var(--fg-1); }
.ms-wordmark-accent { color: var(--spark-500); }
.ms-wordmark-sub { font: var(--t-label); color: var(--fg-3); }

/* Page chrome ----------------------------------------------------------- */
.ms-page { display: flex; flex-direction: column; height: 100%; }
.ms-topbar {
  display: flex; align-items: center; gap: 18px; padding: 0 18px;
  background: var(--bg-surface); border-bottom: 1px solid var(--border-hair);
  height: 44px; flex: 0 0 44px;
}
.ms-crumbs { display: flex; align-items: center; gap: 8px; font: var(--t-body-sm); color: var(--fg-3); }
.ms-crumbs b { color: var(--fg-1); font-weight: 700; }
.ms-sep { color: var(--ink-400); }
.ms-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; font: var(--t-body-sm); color: var(--fg-muted); }
.ms-link { color: var(--fg-link); cursor: pointer; font: var(--t-body-sm); }
.ms-link:hover { color: var(--sky-600); border-bottom: 1px solid var(--sky-600); }
.ms-user-pill {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
  background: var(--paper-100); border: 1px solid var(--border-hair);
  border-radius: var(--r-pill);
}
.ms-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sky-500); color: var(--fg-inverse);
  font: 700 13px/30px var(--font-sans); text-align: center;
}

/* Login ----------------------------------------------------------------- */
.ms-login { display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; overflow: auto; }
.ms-login-card {
  background: var(--bg-surface); border: 1px solid var(--border-hair);
  border-radius: var(--r-card); box-shadow: var(--shadow-2);
  padding: 32px; width: 380px; max-width: 100%;
  display: flex; flex-direction: column; gap: 18px;
}
@media (max-height: 560px) {
  .ms-login { align-items: flex-start; padding: 16px; }
  .ms-login-card { padding: 20px; gap: 12px; }
}
.ms-login-tag { font: var(--t-body-sm); color: var(--fg-3); margin-top: -8px; }
.ms-login-foot { font: var(--t-body-sm); color: var(--fg-3); text-align: center; }
.ms-field { display: flex; flex-direction: column; gap: 6px; }
.ms-field label { font: var(--t-label); color: var(--fg-2); }
.ms-field input {
  font: var(--t-body); background: var(--bg-input);
  border: 1.5px solid var(--border-default);
  color: var(--fg-1); padding: 12px 14px; border-radius: var(--r-2); outline: none;
}
.ms-field input:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.ms-field-err { font: var(--t-body-sm); color: var(--rose-600); }

/* Project grid ---------------------------------------------------------- */
.ms-projects { padding: 32px; overflow: auto; flex: 1; }
.ms-projects-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 14px; }
.ms-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ms-project-card {
  background: var(--bg-surface); border: 1px solid var(--border-hair);
  border-radius: var(--r-card);
  padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ms-project-card:hover { box-shadow: var(--shadow-2); border-color: var(--border-default); transform: translateY(-1px); }
.ms-project-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ms-project-name { font: var(--t-h3); color: var(--fg-1); }
.ms-project-id { font: var(--t-caption); color: var(--fg-muted); margin-top: 2px; }
.ms-project-meta { display: flex; gap: 14px; font: var(--t-body-sm); color: var(--fg-3); flex-wrap: wrap; }
.ms-project-meta b { color: var(--fg-2); font-weight: 700; }
.ms-project-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-project-card-trashed { opacity: .8; }
.ms-empty-help { padding: 8px 12px; color: var(--fg-muted); font-size: 14px; }
.ms-projects-head .ms-link { font: var(--t-body-sm); color: var(--fg-3); text-decoration: none; padding-right: 14px; }
.ms-projects-head .ms-link:hover { color: var(--fg-1); }
.ms-project-create {
  display: flex; gap: 10px; background: var(--bg-surface); padding: 14px;
  margin-bottom: 14px; border: 1px solid var(--border-hair); border-radius: var(--r-card);
}
.ms-project-create input {
  flex: 1; font: var(--t-body); background: var(--bg-input);
  border: 1.5px solid var(--border-default); color: var(--fg-1);
  padding: 12px 14px; border-radius: var(--r-2); outline: none;
}
.ms-project-create input:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.ms-sec-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: var(--t-h3); color: var(--fg-1); padding: 12px 14px; flex-shrink: 0; white-space: nowrap; overflow: hidden; }
.ms-sec-label[hidden], .ms-dock[hidden] { display: none !important; }
.ms-sec-label > :first-child { overflow: hidden; text-overflow: ellipsis; }

/* Three-pane project view ---------------------------------------------- */
.ms-three-pane {
  display: grid;
  grid-template-columns:
    minmax(0, clamp(260px, 22vw, 360px))
    minmax(0, 1fr)
    minmax(0, clamp(300px, 28vw, 440px));
  flex: 1; min-height: 0; position: relative;
}
.ms-three-pane.ms-drop-active { outline: 2px dashed var(--spark-500); outline-offset: -6px; }
.ms-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--border-hair); background: var(--bg-surface); }
.ms-pane-right { border-right: none; }
.ms-pane-head { border-bottom: 1px solid var(--border-hair); }

@media (max-width: 1100px) {
  .ms-three-pane:not(.ms-mobile) {
    grid-template-columns:
      minmax(0, clamp(220px, 26vw, 300px))
      minmax(0, 1fr)
      minmax(0, clamp(260px, 32vw, 380px));
  }
}

.ms-mobile-switcher { display: none; }
.ms-three-pane.ms-mobile {
  display: flex; flex-direction: column;
  grid-template-columns: 1fr !important;
}
.ms-three-pane.ms-mobile .ms-mobile-switcher {
  display: flex; gap: 4px; padding: 6px 8px;
  background: var(--bg-surface); border-bottom: 1px solid var(--border-hair);
  flex-shrink: 0; overflow-x: auto;
}
.ms-three-pane.ms-mobile .ms-mobile-tab {
  font: var(--t-caption);
  padding: 8px 14px; min-height: 44px;
  background: transparent; color: var(--fg-3);
  border: 1px solid var(--border-hair); border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.ms-three-pane.ms-mobile .ms-mobile-tab-active {
  color: var(--fg-inverse); background: var(--spark-500); border-color: var(--spark-500);
}
.ms-three-pane.ms-mobile .ms-resizer { display: none; }
.ms-three-pane.ms-mobile .ms-pane { flex: 1; min-height: 0; border-right: none; border-bottom: 1px solid var(--border-hair); }
.ms-three-pane.ms-mobile .ms-pane-left,
.ms-three-pane.ms-mobile .ms-pane-right { display: none; }
.ms-three-pane.ms-mobile.ms-mobile-active-left   .ms-pane-left   { display: flex; }
.ms-three-pane.ms-mobile.ms-mobile-active-right  .ms-pane-right  { display: flex; }
.ms-three-pane.ms-mobile .ms-pane-left,
.ms-three-pane.ms-mobile .ms-pane-right { order: 1; }
.ms-three-pane.ms-mobile .ms-pane-center {
  display: flex; flex: 0 0 auto; order: 2;
  border-bottom: none; border-top: 1px solid var(--border-hair);
  max-height: 60vh;
}
.ms-three-pane.ms-mobile.ms-mobile-active-center .ms-pane-center { flex: 1 1 auto; max-height: none; }
.ms-three-pane.ms-mobile:not(.ms-mobile-active-center) .ms-pane-center > .ms-sec-label,
.ms-three-pane.ms-mobile:not(.ms-mobile-active-center) .ms-pane-center > .ms-console { display: none; }

.ms-tabs { display: flex; border-bottom: 1px solid var(--border-hair); padding: 0 8px; overflow-x: auto; flex-shrink: 0; scrollbar-width: thin; }
.ms-tabs::-webkit-scrollbar { height: 4px; }
.ms-tab {
  font: var(--t-button);
  padding: 14px 12px; color: var(--fg-3); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0;
}
.ms-tab:hover:not(.ms-tab-active) { color: var(--fg-2); }
.ms-tab-active { color: var(--fg-1); border-bottom-color: var(--spark-500); }

/* Chat — transcript: no boxes, role glyph + indented body. */
.ms-chat {
  flex: 1; overflow: auto; padding: 18px 16px 24px;
  display: flex; flex-direction: column; gap: 18px;
  font: var(--t-body); color: var(--fg-1);
}
.ms-msg { background: transparent; border: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ms-msg-head {
  display: flex; align-items: center; gap: 8px;
  font: var(--t-body-sm); color: var(--fg-3);
}
.ms-msg-glyph { font-family: var(--font-sans); width: 18px; text-align: center; font-weight: 700; }
.ms-msg-head .ms-mijnspel-av { margin-right: 2px; }
.ms-msg-author { color: var(--fg-1); font-weight: 600; font-family: var(--font-display); font-size: 13px; }
.ms-msg-tag {
  font: var(--t-caption);
  color: var(--spark-600); border: 1px solid var(--spark-500);
  border-radius: var(--r-pill); padding: 2px 9px; line-height: 14px;
}
.ms-msg-ts { color: var(--fg-muted); margin-left: auto; font: 500 11px/1.2 var(--font-mono); }
.ms-msg-body {
  font: var(--t-body); color: var(--fg-1);
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
  padding-left: 26px;
}
.ms-msg-body.ms-md {
  white-space: normal;
  line-height: 1.55;
}
.ms-msg-body.ms-md > *:first-child { margin-top: 0; }
.ms-msg-body.ms-md > *:last-child { margin-bottom: 0; }
.ms-msg-body.ms-md h1,
.ms-msg-body.ms-md h2,
.ms-msg-body.ms-md h3,
.ms-msg-body.ms-md h4,
.ms-msg-body.ms-md h5,
.ms-msg-body.ms-md h6 {
  margin: 12px 0 8px;
  color: var(--fg-1);
  font: var(--t-body);
  font-weight: 700;
}
.ms-msg-body.ms-md h1 { font-size: 1.15em; }
.ms-msg-body.ms-md h2 { font-size: 1.08em; }
.ms-msg-body.ms-md ul,
.ms-msg-body.ms-md ol {
  margin: 8px 0 10px;
  padding-left: 1.45rem;
}
.ms-msg-body.ms-md li { margin: 4px 0; }
.ms-msg-body.ms-md li::marker { color: var(--fg-3); }
.ms-msg-body.ms-md blockquote {
  margin: 10px 0;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--border-hair);
  color: var(--fg-2);
}
.ms-msg-body.ms-md pre {
  margin: 10px 0 12px;
  padding: 10px 12px;
  overflow: auto;
  border: 1px solid var(--border-hair);
  border-radius: var(--r-1);
  background: var(--paper-200);
  color: var(--fg-1);
  font: var(--t-mono);
  white-space: pre;
}
.ms-msg-body.ms-md code {
  font: var(--t-mono);
  word-break: break-word;
}
.ms-msg-body.ms-md :not(pre) > code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--paper-200);
  color: var(--spark-700, var(--spark-600));
}
.ms-msg-body.ms-md a {
  color: var(--sky-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ms-msg-body.ms-md hr {
  border: 0;
  border-top: 1px solid var(--border-hair);
  margin: 14px 0;
}
.ms-msg-user .ms-msg-glyph { color: var(--sky-600); }
.ms-msg-agent .ms-msg-glyph { color: var(--spark-500); }
.ms-msg-agent .ms-msg-author { color: var(--fg-1); }
.ms-msg-question .ms-msg-body { color: var(--fg-1); }
.ms-msg-system {
  flex-direction: row; align-items: center; gap: 10px;
  font: var(--t-body-sm); color: var(--fg-muted);
  padding: 0; margin: -4px 0;
}
.ms-msg-system .ms-sys-bullet { color: var(--ink-400); }

/* Console -------------------------------------------------------------- */
.ms-console { flex: 1; overflow: auto; padding: 14px 16px; background: var(--paper-200); font: var(--t-mono); color: var(--fg-1); }
.ms-log-line { display: flex; gap: 10px; padding: 1px 0; }
.ms-log-tag { flex: 0 0 88px; font-weight: 600; }
.ms-log-tag-stdout { color: var(--sky-600); }
.ms-log-tag-stderr { color: var(--rose-600); }
.ms-log-text { color: var(--fg-2); white-space: pre-wrap; flex: 1; word-break: break-word; }

/* Parsed stream-json events — transcript style ------------------------- */
.ms-ev { padding: 2px 0; }
.ms-ev-head {
  display: flex; align-items: baseline; gap: 6px;
  font: var(--t-body-sm); white-space: nowrap; min-width: 0;
}
.ms-ev-glyph { width: 14px; text-align: center; flex-shrink: 0; color: var(--fg-3); }
.ms-ev-label { font-weight: 700; color: var(--fg-1); flex-shrink: 0; }
.ms-ev-summary {
  color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ms-ev-meta { color: var(--fg-muted); margin-left: auto; font-variant-numeric: tabular-nums; flex-shrink: 0; font: 500 11px/1.2 var(--font-mono); }
.ms-ev-toggle {
  background: transparent; border: 0; color: var(--fg-muted); cursor: pointer;
  font: inherit; padding: 0 4px; flex-shrink: 0;
}
.ms-ev-toggle:hover { color: var(--fg-1); }
.ms-ev-body {
  margin: 4px 0 6px 22px; padding: 8px 10px;
  background: var(--paper-200); border: 1px solid var(--border-hair);
  border-radius: var(--r-1);
  color: var(--fg-2); font: var(--t-mono);
  white-space: pre-wrap; word-break: break-word;
  max-height: 360px; overflow: auto;
}
.ms-ev-text-body {
  color: var(--fg-1); font: var(--t-body);
  white-space: pre-wrap; word-break: break-word;
  padding: 6px 0 6px 26px; line-height: 1.55;
}
.ms-ev-tool_use .ms-ev-label { color: var(--spark-600); }
.ms-ev-tool_use .ms-ev-glyph { color: var(--spark-500); }
.ms-ev-tool_result .ms-ev-glyph { color: var(--fg-muted); }
.ms-ev-tool_result .ms-ev-summary { color: var(--fg-3); }
.ms-ev-result .ms-ev-glyph,
.ms-ev-result .ms-ev-label { color: var(--grass-600); }
.ms-ev-error .ms-ev-glyph,
.ms-ev-error .ms-ev-label { color: var(--rose-600); }
.ms-ev-status .ms-ev-glyph,
.ms-ev-status .ms-ev-label,
.ms-ev-status .ms-ev-summary,
.ms-ev-muted .ms-ev-summary { color: var(--fg-muted); font-style: italic; }

/* Phase boundary inside the chat. */
.ms-phase-sep {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 6px; padding: 4px 0;
  font: var(--t-body-sm); color: var(--fg-3);
  border-top: 1px dashed var(--border-hair);
  padding-top: 8px;
}
.ms-phase-sep-glyph { width: 14px; text-align: center; flex-shrink: 0; }
.ms-phase-sep-text { font-weight: 600; }
.ms-phase-sep-start .ms-phase-sep-glyph { color: var(--sky-500); }
.ms-phase-sep-finish .ms-phase-sep-glyph { color: var(--grass-500); }
.ms-phase-sep-finish.ms-phase-sep-failed .ms-phase-sep-glyph { color: var(--rose-600); }
.ms-phase-sep { flex-wrap: wrap; }
.ms-phase-sep-body {
  flex-basis: 100%; margin-left: 22px; margin-top: 4px;
  font-weight: 400; color: var(--fg-2, var(--fg-3));
  white-space: pre-wrap;
}
.ms-phase-sep-failed .ms-phase-sep-body { color: var(--rose-700, var(--rose-600)); }
.ms-phase-sep-plan {
  font-weight: 400; font-size: 11px; color: var(--fg-3);
  padding: 1px 6px; border: 1px solid var(--border-2, var(--border-1));
  border-radius: 999px; margin-left: 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.ms-phase-sep-interrupted {
  color: var(--sun-600); border-top-color: var(--sun-100);
}
.ms-phase-sep-interrupted .ms-phase-sep-glyph { color: var(--sun-600); }

/* Structured question card -------------------------------------------- */
.ms-q .ms-q-chip {
  background: var(--paper-200); border: 1px solid var(--border-hair);
  color: var(--fg-2); font: var(--t-caption); padding: 2px 8px;
  border-radius: var(--r-pill);
}
.ms-q-question { margin: 6px 0 10px; color: var(--fg-1); line-height: 1.5; }
.ms-q-options { display: flex; flex-direction: column; gap: 8px; }
.ms-q-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1.5px solid var(--border-hair);
  border-radius: var(--r-2); background: var(--bg-surface);
  cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.ms-q-opt:hover { border-color: var(--border-default); background: var(--paper-200); }
.ms-q-opt input { margin-top: 4px; flex-shrink: 0; }
.ms-q-opt-body { flex: 1; min-width: 0; }
.ms-q-opt-label { color: var(--fg-1); font-weight: 700; }
.ms-q-opt-desc { color: var(--fg-2); font-size: .92em; margin-top: 3px; line-height: 1.45; }
.ms-q-opt-preview {
  position: relative;
  margin-top: 8px; border: 1px solid var(--border-hair);
  border-radius: var(--r-1); overflow: hidden; background: var(--paper-100);
}
.ms-q-opt-preview iframe {
  display: block; width: 100%; height: 220px; border: 0;
}
.ms-q-opt-preview-expand {
  position: absolute; top: 6px; right: 6px;
  width: 36px; height: 36px; padding: 0;
  background: rgba(31, 27, 20, 0.55); color: var(--fg-inverse);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-1); cursor: pointer;
  font: 700 16px/1 var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center;
}
.ms-q-opt-preview-expand:hover { background: rgba(31, 27, 20, 0.75); }
.ms-q-opt-preview-expand:focus-visible {
  outline: 2px solid var(--sky-500); outline-offset: 2px;
}

.ms-preview-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  background: rgba(31, 27, 20, 0.85);
  backdrop-filter: blur(4px);
}
.ms-preview-modal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-surface); color: var(--fg-1);
  border-bottom: 1px solid var(--border-hair);
}
.ms-preview-modal-title {
  font: var(--t-body-sm); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-preview-modal-close {
  background: transparent; border: 1px solid var(--border-hair);
  color: var(--fg-1); border-radius: var(--r-1);
  width: 44px; height: 44px; cursor: pointer;
  font: 700 16px/1 var(--font-sans); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.ms-preview-modal-close:hover { background: var(--paper-200); }
.ms-preview-modal-frame {
  display: block; flex: 1; width: 100%; border: 0;
  background: var(--bg-surface);
}
.ms-q-actions {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.ms-q-other {
  flex: 1; min-width: 0; background: var(--bg-input); color: var(--fg-1);
  border: 1.5px solid var(--border-default); border-radius: var(--r-2);
  padding: 10px 12px; font: var(--t-body);
}
.ms-q-other:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.ms-q-status { color: var(--fg-muted); font: var(--t-body-sm); }
.ms-q-answered { opacity: .9; }
.ms-q-answered .ms-q-answer-line {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  color: var(--grass-600); font: var(--t-body-sm);
}
.ms-q-answered .ms-q-answer-glyph { width: 14px; text-align: center; }

/* Agent "thinking" indicator. */
@keyframes ms-spin-glyph {
  0%, 100%             { content: "·"; }
  9.0909%, 90.9090%    { content: "✢"; }
  18.1818%, 81.8181%   { content: "✳"; }
  27.2727%, 72.7272%   { content: "✶"; }
  36.3636%, 63.6363%   { content: "✻"; }
  45.4545%, 54.5454%   { content: "✽"; }
}
.ms-spinner-glyph::before {
  content: "·";
  animation: ms-spin-glyph 1.32s steps(1, end) infinite;
  display: inline-block;
  width: 14px;
  text-align: center;
  color: var(--spark-500);
}
.ms-spinner.ms-msg { opacity: .85; }
.ms-spinner .ms-spinner-text { color: var(--fg-3); font-style: italic; }
@media (prefers-reduced-motion: reduce) {
  .ms-spinner-glyph::before { animation: none; content: "✻"; }
}

.ms-mini-select {
  background: var(--bg-input); color: var(--fg-2); border: 1px solid var(--border-hair);
  border-radius: var(--r-1); font: var(--t-body-sm); padding: 4px 8px; max-width: 240px;
}

/* Chat tree in the left pane ------------------------------------------ */
.ms-chat-tree { display: flex; flex-direction: column; padding: 4px 6px 8px; gap: 4px; }
.ms-phase-group { display: flex; flex-direction: column; }
.ms-phase-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--r-2); cursor: pointer;
  font: var(--t-body-sm); color: var(--fg-2);
}
.ms-phase-row:hover { background: var(--paper-200); }
.ms-phase-row-active { background: var(--spark-100); color: var(--fg-1); }
.ms-phase-icon { width: 18px; text-align: center; flex-shrink: 0; }
.ms-phase-icon[data-status="idle"]    { color: var(--fg-muted); }
.ms-phase-icon[data-status="running"] { color: var(--spark-500); animation: ms-pulse-opacity 1.6s ease-in-out infinite; }
.ms-phase-icon[data-status="done"]    { color: var(--grass-500); }
.ms-phase-icon[data-status="failed"]  { color: var(--rose-600); }
.ms-phase-name { flex: 1; }
.ms-phase-new {
  background: transparent; border: 1px solid var(--border-default);
  color: var(--fg-muted); cursor: pointer;
  font: 700 14px/1 var(--font-sans);
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.ms-phase-row:hover .ms-phase-new,
.ms-phase-new:focus-visible { color: var(--spark-500); border-color: var(--spark-500); }

.ms-chat-list { display: flex; flex-direction: column; padding-left: 28px; gap: 1px; }
.ms-chat-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--r-1); cursor: pointer;
  font: var(--t-body-sm); color: var(--fg-3);
}
.ms-chat-row:hover { background: var(--paper-200); color: var(--fg-2); }
.ms-chat-row-active { background: var(--spark-100); color: var(--fg-1); }
.ms-chat-row-title {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-chat-row-x {
  flex: 0 0 auto;
  background: transparent; border: 0; color: var(--fg-muted);
  cursor: pointer; padding: 0 2px; font: inherit; line-height: 1;
  opacity: 0;
}
.ms-chat-row:hover .ms-chat-row-x,
.ms-chat-row-x:focus-visible { opacity: 1; }
.ms-chat-row-x:hover { color: var(--rose-600); }

.ms-chat-phase { color: var(--fg-2); font-weight: 600; }

/* Design tab ----------------------------------------------------------- */
.ms-design { padding: 8px 14px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ms-design-source-custom { color: var(--sun-600); }
.ms-design-source-default { color: var(--fg-2); }
.ms-design-url {
  flex: 1; min-width: 0;
  background: var(--bg-input); border: 1.5px solid var(--border-default);
  color: var(--fg-1); padding: 10px 12px; border-radius: var(--r-2); font: var(--t-body);
}
.ms-design-url:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.ms-design-status { color: var(--fg-muted); font: var(--t-body-sm); min-height: 14px; }
.ms-design code { font: var(--t-mono); color: var(--fg-2); word-break: break-all; }

/* Stage cards in the chat timeline ------------------------------------- */
.ms-stage {
  border: 1px solid var(--border-hair); border-radius: var(--r-card);
  background: var(--bg-surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.ms-stage-sum {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  font: var(--t-body-sm); cursor: pointer; list-style: none;
}
.ms-stage-sum::-webkit-details-marker { display: none; }
.ms-stage-glyph { width: 16px; text-align: center; }
.ms-stage-phase { font-weight: 700; color: var(--fg-1); }
.ms-stage-status { color: var(--fg-3); }
.ms-stage-spacer { flex: 1; }
.ms-stage-job, .ms-stage-ts { color: var(--fg-muted); font-variant-numeric: tabular-nums; font: 500 11px/1.2 var(--font-mono); }
.ms-stage-body {
  padding: 4px 14px 14px 38px; display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border-hair); background: var(--paper-200);
}
.ms-stage-err { color: var(--rose-600); white-space: pre-wrap; word-break: break-word; }
.ms-stage-running .ms-stage-glyph { color: var(--spark-500); animation: ms-pulse-opacity 1.6s ease-in-out infinite; }
.ms-stage-ok      .ms-stage-glyph { color: var(--grass-500); }
.ms-stage-ok      .ms-stage-status { color: var(--grass-600); }
.ms-stage-failed  .ms-stage-glyph { color: var(--rose-600); }
.ms-stage-failed  .ms-stage-status { color: var(--rose-600); }
@keyframes ms-pulse-opacity {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Artifacts ------------------------------------------------------------ */
.ms-art { flex: 1; overflow: auto; display: flex; flex-direction: column; }
.ms-spec, .ms-backend { padding: 8px 14px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ms-spec pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: var(--t-mono); color: var(--fg-1); background: var(--paper-200); border: 1px solid var(--border-hair); padding: 10px 12px; border-radius: var(--r-2); overflow-x: auto; }
.ms-files { display: flex; flex-direction: column; }
.ms-filerow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-hair); font: var(--t-body-sm); }
.ms-filerow:hover { background: var(--paper-200); }
.ms-filerow-kind { font: var(--t-label); min-width: 96px; color: var(--fg-3); }
.ms-filerow-path { color: var(--fg-1); flex: 1; word-break: break-all; }
.ms-filerow-size { font-variant-numeric: tabular-nums; color: var(--fg-muted); min-width: 60px; text-align: right; font: 500 11px/1.2 var(--font-mono); }
.ms-filerow-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ms-filerow-actions .ms-btn { padding: 0 12px; min-width: 36px; height: 36px; }

.ms-source { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ms-source-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-hair); flex-shrink: 0; }
.ms-source-crumbs { font: var(--t-body-sm); color: var(--fg-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ms-crumb { color: var(--fg-link); cursor: pointer; }
.ms-crumb:last-child { color: var(--fg-1); cursor: default; }
.ms-crumb-sep { color: var(--fg-muted); }
.ms-source-body { flex: 1; overflow: auto; }
.ms-source-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; font: var(--t-body-sm); border-bottom: 1px solid var(--border-hair); }
.ms-source-row:hover { background: var(--paper-200); }
.ms-source-icon { width: 16px; flex-shrink: 0; }
.ms-source-name { flex: 1; word-break: break-all; color: var(--fg-1); }
.ms-source-size { color: var(--fg-muted); font: 500 11px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.ms-source-fileview { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ms-source-filehead { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-hair); }
.ms-source-filepath { font: var(--t-mono); color: var(--fg-1); flex: 1; word-break: break-all; }
.ms-source-content { margin: 0; padding: 12px 14px; overflow: auto; font: var(--t-mono); color: var(--fg-1); background: var(--paper-100); white-space: pre; flex: 1; }

.ms-spec { padding: 0; }
.ms-spec-toolbar { padding: 10px 14px; border-bottom: 1px solid var(--border-hair); }
.ms-spec-sec { border-bottom: 1px solid var(--border-hair); }
.ms-spec-sec[open] > .ms-spec-sec-h { color: var(--fg-1); }
.ms-spec-sec-h { padding: 12px 14px; font: var(--t-h3); color: var(--fg-2); cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; gap: 6px; }
.ms-spec-sec-h::before { content: "▸"; transition: transform .1s; color: var(--fg-3); }
.ms-spec-sec[open] > .ms-spec-sec-h::before { transform: rotate(90deg); }
.ms-spec-sec-h::-webkit-details-marker { display: none; }
.ms-spec-sec-body { padding: 4px 14px 14px; color: var(--fg-1); font: var(--t-body); }
.ms-spec-scalar { padding: 4px 0; }
.ms-spec-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.ms-spec-kv-row { display: contents; }
.ms-spec-kv-k { color: var(--fg-3); font: var(--t-body-sm); font-weight: 600; }
.ms-spec-kv-v { color: var(--fg-1); }
.ms-spec-list, .ms-spec-list-ordered { margin: 0; padding-left: 22px; }
.ms-spec-list li { margin: 2px 0; }
.ms-spec-cards { display: flex; flex-direction: column; gap: 8px; }
.ms-spec-card { background: var(--paper-200); border: 1px solid var(--border-hair); border-radius: var(--r-2); padding: 12px 14px; }
.ms-spec-card-h { font: var(--t-h3); color: var(--fg-1); margin-bottom: 4px; }
.ms-spec-card-d { color: var(--fg-2); margin-bottom: 6px; }
.ms-spec-card-rest { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-hair); }
.ms-spec-rule-group { margin-bottom: 12px; }
.ms-spec-rule-cat { font: var(--t-label); color: var(--fg-2); margin-bottom: 4px; }
.ms-spec-glossary { margin: 0; }
.ms-spec-glossary dt { font: var(--t-body-sm); font-weight: 700; color: var(--fg-1); margin-top: 6px; }
.ms-spec-glossary dd { margin: 0 0 6px 14px; color: var(--fg-2); }
.ms-spec-null { color: var(--fg-muted); }

.ms-resizer { background: transparent; cursor: col-resize; position: relative; }
.ms-resizer:hover, .ms-resizing .ms-resizer { background: var(--spark-500); opacity: 0.5; }
.ms-resizing { user-select: none; cursor: col-resize !important; }
.ms-resizing iframe { pointer-events: none; }
@media (max-width: 720px), (max-height: 500px) {
  html, body, #root { overflow-x: hidden; max-width: 100vw; }
  .ms-page { width: 100%; max-width: 100vw; overflow-x: hidden; }
  .ms-three-pane.ms-mobile { width: 100%; max-width: 100vw; overflow-x: hidden; }
  .ms-three-pane.ms-mobile .ms-pane { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
  .ms-three-pane.ms-mobile pre,
  .ms-three-pane.ms-mobile code,
  .ms-three-pane.ms-mobile .ms-source-content { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
  .ms-resizer { display: none; }
  .ms-topbar { padding: 0 10px; gap: 8px; overflow-x: auto; flex-wrap: nowrap; }
  .ms-topbar::-webkit-scrollbar { display: none; }
  .ms-wordmark { gap: 6px; flex-shrink: 0; }
  .ms-wordmark-sub { display: none; }
  .ms-crumbs { font-size: 13px; min-width: 0; flex: 1 1 auto; }
  .ms-crumbs b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
  .ms-crumbs > span:not(.ms-sep) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ms-topbar-right { gap: 8px; flex-shrink: 0; }
  .ms-user-pill { padding: 2px 6px 2px 2px; }
  .ms-user-pill > span:last-child { display: none; }
  .ms-projects { padding: 14px; }
  .ms-projects-head { flex-direction: column; align-items: stretch; }
  .ms-project-grid { grid-template-columns: 1fr; }
  .ms-project-create { flex-wrap: wrap; }
  .ms-project-create input, .ms-project-create button { flex: 1 1 100%; }
  .ms-dock { padding: 8px 10px 10px; }
  /* Body is 16px now under the current tokens, so the previous
     `input, textarea, select { font-size: 16px !important; }` rule
     that defeated iOS auto-zoom is no longer needed. Do not reintroduce
     it on hunch. */
  .ms-dock-input textarea { min-height: 60px; }
  .ms-dock-hint-keys { display: none; }
  .ms-dock-icon { width: 44px; height: 44px; }
}

.ms-preview { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ms-preview-bar { font: var(--t-body-sm); color: var(--fg-3); background: var(--paper-200); border: 1px solid var(--border-hair); padding: 8px 12px; border-radius: var(--r-1); word-break: break-all; display: flex; align-items: center; gap: 8px; }
.ms-preview-url { flex: 1; min-width: 0; word-break: break-all; font: var(--t-mono); }
.ms-preview-frame { background: var(--paper-200); border: 1px solid var(--border-hair); border-radius: var(--r-1); flex: 1; min-height: 240px; overflow: hidden; }
.ms-preview-frame iframe { width: 100%; height: 100%; border: 0; background: var(--paper-100); }

.ms-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-hair); }
.ms-backend-h { font: var(--t-h3); color: var(--fg-1); margin-bottom: 4px; }
.ms-backend-s { font: var(--t-body-sm); color: var(--fg-3); max-width: 280px; }
.ms-backend-url { font: var(--t-mono); color: var(--fg-link); }

/* Composer dock — rounded, single-surface. */
.ms-dock { flex: 0 0 auto; background: var(--bg-surface); border-top: 1px solid var(--border-hair); padding: 10px 14px 12px; }
.ms-dock-surface {
  background: var(--paper-200); border: 1.5px solid var(--border-default);
  border-radius: var(--r-2); padding: 10px 12px;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.ms-dock-surface:focus-within { border-color: var(--spark-500); box-shadow: var(--shadow-spark); }
.ms-dock-input {
  display: flex; align-items: flex-end; gap: 8px;
}
.ms-dock-input textarea {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--fg-1); font-family: var(--font-sans); font-size: 16px;
  resize: none; min-height: 28px; padding: 4px 0; line-height: 1.5;
  overflow-y: hidden;
}
.ms-dock-icon {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border-hair); background: var(--bg-surface);
  color: var(--fg-2); cursor: pointer; font: 700 16px/24px var(--font-sans);
  padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.ms-dock-icon:hover { background: var(--paper-200); }
.ms-dock-icon:focus-visible { border-color: var(--spark-500); color: var(--spark-500); box-shadow: var(--shadow-spark); outline: none; }

.ms-dock-pending {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.ms-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper-200); border: 1px solid var(--border-hair);
  border-radius: var(--r-pill); padding: 4px 10px;
  font: var(--t-caption); color: var(--fg-1); max-width: 240px;
}
.ms-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-chip-icon { opacity: .8; }
.ms-chip-x {
  background: transparent; border: 0; color: var(--fg-muted);
  cursor: pointer; padding: 0; font-size: 14px; line-height: 1;
}
.ms-chip-x:hover { color: var(--spark-500); }

.ms-msg-atts {
  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px;
}
.ms-att {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper-200); border: 1px solid var(--border-hair);
  border-radius: var(--r-1); padding: 6px 10px;
  font: var(--t-body-sm); color: var(--fg-1);
  text-decoration: none; max-width: 280px;
}
.ms-att-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-att-size { color: var(--fg-muted); font: 500 11px/1.2 var(--font-mono); }
.ms-att-img { padding: 4px; flex-direction: column; align-items: stretch; gap: 4px; max-width: 220px; }
.ms-att-thumb {
  display: block; width: 100%; height: 120px;
  background: var(--paper-100); border-radius: var(--r-1);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  color: var(--fg-muted); font: var(--t-body-sm);
}
.ms-att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Reconnect banner. */
.ms-reconnect-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--spark-500); color: var(--fg-inverse);
  text-align: center; padding: 8px 14px;
  font: var(--t-body-sm); font-weight: 600;
}

.ms-dock-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 8px;
}
.ms-spacer { flex: 1; }
.ms-dock-hint { font: var(--t-body-sm); color: var(--fg-3); }

/* Mode chip group. The select shows a phase key (e.g. "extract_spec")
   so keeping mono on the select text is fine — phase keys are codes. */
.ms-mode-group {
  display: inline-flex; align-items: stretch; gap: 0;
  background: var(--paper-200); border: 1px solid var(--border-hair);
  border-radius: var(--r-pill); overflow: hidden;
}
.ms-mode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; cursor: pointer;
  font: var(--t-body-sm); color: var(--fg-2);
  border-right: 1px solid var(--border-hair);
}
.ms-mode:last-child { border-right: none; }
.ms-mode:hover { background: var(--bg-surface); color: var(--fg-1); }
.ms-mode-key {
  font: var(--t-label); color: var(--fg-muted);
}
.ms-mode select {
  background: transparent; border: 0; outline: none; color: var(--fg-1);
  font-family: var(--font-mono); font-size: 13px; cursor: pointer;
  padding: 0 18px 0 0;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
                    linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: right 6px top 50%, right 2px top 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.ms-mode select option { background: var(--bg-surface); color: var(--fg-1); }

/* Empty / utility ------------------------------------------------------ */
.ms-empty { padding: 40px 14px; text-align: center; color: var(--fg-3); font: var(--t-body); }

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--paper-400); border-radius: 5px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Wizard shell ---------------------------------------------------------- */
.ms-flow {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; min-width: 0;
  background: var(--bg-page);
}
.ms-flow-head {
  padding: 18px 32px 12px; background: var(--bg-surface);
  border-bottom: 1px solid var(--border-hair);
  display: flex; flex-direction: column; gap: 14px;
  flex-shrink: 0;
}
.ms-flow-head-row { display: flex; align-items: center; gap: 18px; }
.ms-flow-back {
  background: none; border: none; font: var(--t-body);
  color: var(--fg-3); cursor: pointer;
  padding: 8px 12px; border-radius: var(--r-2); min-height: 44px;
}
.ms-flow-back:hover { color: var(--fg-1); background: var(--paper-200); }
.ms-flow-title { font: var(--t-h2); color: var(--fg-1); }
.ms-flow-step-sub { font: var(--t-body); color: var(--fg-3); }

.ms-flow-body {
  flex: 1; min-height: 0; min-width: 0;
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-page);
}
.ms-flow-inner { flex: 1; min-height: 0; min-width: 0; display: flex; }
.ms-flow-inner > * { flex: 1; min-height: 0; min-width: 0; }

/* The describe step's body is intrinsic-sized + flex-shrink:0, so a tall
   viewport-less form would overflow into the foot. Let the body scroll,
   and collapse the inner pane in normal mode since chat + dock are
   hidden on this step. */
.ms-flow-body-describe .ms-flow-body { overflow-y: auto; }
.ms-flow:not(.ms-flow-advanced).ms-flow-body-describe .ms-flow-inner { display: none; }
.ms-flow-advanced.ms-flow-body-describe .ms-describe { display: none; }
.ms-flow-advanced.ms-flow-body-describe .ms-flow-inner .ms-chat,
.ms-flow-advanced.ms-flow-body-describe .ms-flow-inner .ms-chat-head { display: flex; }

/* Same overflow guard for the build step's friendly card so a tall
   sub-step list never pushes into the foot. The card lives above the
   (hidden) chat + dock — collapse the inner pane so the dock composer
   doesn't surface between the card and the foot. */
.ms-flow-body-progress .ms-flow-body { overflow-y: auto; }
.ms-flow:not(.ms-flow-advanced).ms-flow-body-progress .ms-flow-inner { display: none; }

/* Geavanceerd on the build step swaps the friendly progress card for
   the chat-style transcript so an operator can read the agent's tool
   calls. The card hides; the chat + chat head un-hide via specificity
   over the per-bodykind hide rules above. */
.ms-flow-advanced.ms-flow-body-progress .ms-build { display: none; }
.ms-flow-advanced.ms-flow-body-progress .ms-flow-inner .ms-chat,
.ms-flow-advanced.ms-flow-body-progress .ms-flow-inner .ms-chat-head { display: flex; }

/* Play/improve mirror progress in advanced mode: hide the friendly card,
   show the chat transcript next to the artifact sidebar. Non-advanced
   collapses the empty inner pane so the friendly card isn't anchored
   to a dead chat column. */
.ms-flow:not(.ms-flow-advanced).ms-flow-body-play    .ms-flow-inner,
.ms-flow:not(.ms-flow-advanced).ms-flow-body-improve .ms-flow-inner { display: none; }
.ms-flow-body-play    .ms-flow-body,
.ms-flow-body-improve .ms-flow-body { overflow-y: auto; }
.ms-flow-advanced.ms-flow-body-play .ms-play { display: none; }
.ms-flow-advanced.ms-flow-body-play .ms-flow-inner .ms-chat,
.ms-flow-advanced.ms-flow-body-play .ms-flow-inner .ms-chat-head { display: flex; }
.ms-flow-advanced.ms-flow-body-improve .ms-improve { display: none; }
.ms-flow-advanced.ms-flow-body-improve .ms-flow-inner .ms-chat,
.ms-flow-advanced.ms-flow-body-improve .ms-flow-inner .ms-chat-head { display: flex; }

.ms-flow-stub {
  flex-shrink: 0;
  max-width: 760px; width: 100%; margin: 0 auto;
  padding: 32px 32px 16px;
  display: flex; flex-direction: column; gap: 12px;
  text-align: center;
}
.ms-flow-stub h3 { font: var(--t-h1); color: var(--fg-1); }
.ms-flow-stub p { font: var(--t-body-lg); color: var(--fg-3); }

/* Non-chat steps: the chat transcript itself is hidden (the stub takes
   its visual space), but the dock and its actions stay reachable so the
   step's CTA can still fire its phase. */
.ms-flow-body-describe .ms-flow-inner .ms-chat,
.ms-flow-body-progress .ms-flow-inner .ms-chat,
.ms-flow-body-play     .ms-flow-inner .ms-chat,
.ms-flow-body-improve  .ms-flow-inner .ms-chat,
.ms-flow-body-describe .ms-flow-inner .ms-chat-head,
.ms-flow-body-progress .ms-flow-inner .ms-chat-head,
.ms-flow-body-play     .ms-flow-inner .ms-chat-head,
.ms-flow-body-improve  .ms-flow-inner .ms-chat-head { display: none; }

/* Stepper */
.ms-stepper { display: flex; align-items: flex-start; gap: 0; padding: 4px 0; }
.ms-step {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex: 1; position: relative; cursor: pointer;
  background: transparent; border: 0; padding: 4px 0;
  font: inherit; color: inherit;
}
.ms-step:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; top: 18px;
  width: 100%; height: 2px; background: var(--paper-300); z-index: 0;
}
.ms-step-done:not(:last-child)::after { background: var(--grass-500); }
.ms-step-bubble {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 14px/1 var(--font-sans);
  position: relative; z-index: 1;
  background: var(--paper-100); border: 2px solid var(--paper-400);
  color: var(--fg-muted);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ms-step-done .ms-step-bubble { background: var(--grass-500); border-color: var(--grass-500); color: #fff; }
.ms-step-current .ms-step-bubble { background: var(--sky-500); border-color: var(--sky-500); color: #fff; box-shadow: 0 0 0 5px rgba(68, 133, 243, .18); }
.ms-step-running .ms-step-bubble { background: var(--spark-500); border-color: var(--spark-500); color: #fff; box-shadow: 0 0 0 5px rgba(255, 106, 38, .2); animation: ms-pulse-step 1.6s var(--ease-out) infinite; }
.ms-step-blocked .ms-step-bubble { background: var(--bg-surface); border-color: var(--rose-600); color: var(--rose-600); }
.ms-step-todo { cursor: not-allowed; }
.ms-step-todo .ms-step-bubble { background: var(--paper-100); }
.ms-step-ready { cursor: pointer; }
.ms-step-ready .ms-step-bubble { background: var(--bg-surface); border-color: var(--sky-500); color: var(--sky-500); }
@keyframes ms-pulse-step { 50% { box-shadow: 0 0 0 10px rgba(255, 106, 38, 0); } }
.ms-step-label { font: var(--t-caption); color: var(--fg-3); text-align: center; max-width: 140px; }
.ms-step-done .ms-step-label,
.ms-step-current .ms-step-label,
.ms-step-running .ms-step-label,
.ms-step-ready .ms-step-label,
.ms-step-blocked .ms-step-label { color: var(--fg-1); }

/* Hide the legacy three-pane chrome unless Geavanceerd is on. The chat
   pane + dock stay visible (that's the wizard's only "body" today). */
.ms-flow-inner .ms-shell { display: flex; flex: 1; min-height: 0; min-width: 0; position: relative; }
.ms-flow:not(.ms-flow-advanced) .ms-flow-inner .ms-sidebar,
.ms-flow:not(.ms-flow-advanced) .ms-flow-inner .ms-resizer,
.ms-flow:not(.ms-flow-advanced) .ms-flow-inner .ms-pane-right,
.ms-flow:not(.ms-flow-advanced) .ms-flow-inner .ms-mobile-switcher,
.ms-flow:not(.ms-flow-advanced) .ms-flow-inner .ms-sidebar-open { display: none !important; }
.ms-flow:not(.ms-flow-advanced) .ms-flow-inner .ms-two-pane,
.ms-flow:not(.ms-flow-advanced) .ms-flow-inner .ms-two-pane.ms-mobile {
  display: flex; flex-direction: column; grid-template-columns: 1fr !important;
}
.ms-flow:not(.ms-flow-advanced) .ms-flow-inner .ms-pane { border-right: 0; }
.ms-flow:not(.ms-flow-advanced) .ms-flow-inner .ms-shell-sidebar-open .ms-sidebar { width: 0; flex: 0 0 0; }

/* When Geavanceerd is on, the dev panel surfaces sit underneath the
   wizard body without overlapping the foot. */
.ms-flow-advanced .ms-flow-body { padding-bottom: 0; }

/* Mijn-spel avatar — a Fraunces "m." with a soft spark ring. */
.ms-mijnspel-av {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--spark-100); border: 2px solid var(--spark-500);
  color: var(--spark-700);
  font-family: var(--font-display); font-weight: 800;
  border-radius: 50%; flex: 0 0 auto;
  letter-spacing: -0.02em;
  line-height: 1;
  padding-bottom: 2px;
}
.ms-mijnspel-av-dot { color: var(--spark-500); }

/* Geavanceerd switch (top-right of wizard head). */
.ms-mode-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; padding: 6px 10px; border-radius: var(--r-2);
  color: var(--fg-2); font: var(--t-body-sm); user-select: none;
}
.ms-mode-toggle input { display: none; }
.ms-mode-toggle-slot {
  display: inline-block; width: 38px; height: 22px;
  background: var(--paper-300); border: 1px solid var(--border-hair);
  border-radius: var(--r-pill); position: relative;
  transition: background var(--dur-2) var(--ease-out);
}
.ms-mode-toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-surface); box-shadow: var(--shadow-1);
  transition: left var(--dur-2) var(--ease-out);
}
.ms-mode-toggle input:checked + .ms-mode-toggle-slot { background: var(--spark-500); border-color: var(--spark-500); }
.ms-mode-toggle input:checked + .ms-mode-toggle-slot .ms-mode-toggle-knob { left: 18px; }
.ms-mode-toggle-label { font-weight: 600; }

/* Toast host (Geavanceerd one-time explainer, future-step lock hint). */
.ms-toast-host {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9000; pointer-events: none;
}
.ms-toast {
  pointer-events: auto;
  background: var(--ink-900); color: var(--fg-inverse);
  font: var(--t-body-sm); padding: 10px 16px;
  border-radius: var(--r-pill); box-shadow: var(--shadow-3);
  max-width: 80vw; opacity: 0;
  animation: ms-toast-in 180ms var(--ease-out) forwards;
}
.ms-toast-leaving { animation: ms-toast-out 220ms var(--ease-out) forwards; }
@keyframes ms-toast-in  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ms-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(6px); } }

@media (max-width: 720px), (max-height: 500px) {
  .ms-flow-head { padding: 14px 16px 10px; gap: 10px; }
  .ms-flow-head-row { gap: 10px; min-width: 0; }
  .ms-flow-back { padding: 6px 8px; }
  .ms-flow-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-step-bubble { width: 28px; height: 28px; font-size: 13px; }
  .ms-step:not(:last-child)::after { top: 14px; }
  .ms-step-label { display: none; }

  .ms-flow-advanced .ms-flow-head { padding: 8px 10px; gap: 6px; }
  .ms-flow-advanced .ms-flow-head-row { gap: 8px; min-height: 32px; }
  .ms-flow-advanced .ms-flow-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; min-height: 32px; padding: 0; flex: 0 0 32px;
    font-size: 0;
  }
  .ms-flow-advanced .ms-flow-back::before { content: "←"; font: var(--t-body); }
  .ms-flow-advanced .ms-flow-title { font: var(--t-body-sm); }
  .ms-flow-advanced .ms-mode-toggle { padding: 4px; gap: 6px; }
  .ms-flow-advanced .ms-mode-toggle-label { display: none; }
  .ms-flow-advanced .ms-mode-toggle-slot { width: 34px; height: 20px; }
  .ms-flow-advanced .ms-mode-toggle-knob { width: 14px; height: 14px; }
  .ms-flow-advanced .ms-mode-toggle input:checked + .ms-mode-toggle-slot .ms-mode-toggle-knob { left: 16px; }
  .ms-flow-advanced .ms-flow-step-sub { display: none; }
  .ms-flow-advanced .ms-stepper { padding: 0; }
  .ms-flow-advanced .ms-step { gap: 0; padding: 0; }
  .ms-flow-advanced .ms-step-bubble { width: 20px; height: 20px; font-size: 10px; border-width: 1.5px; }
  .ms-flow-advanced .ms-step:not(:last-child)::after { top: 10px; }
  .ms-flow-advanced .ms-step-current .ms-step-bubble { box-shadow: 0 0 0 3px rgba(68, 133, 243, .18); }
  .ms-flow-advanced .ms-step-running .ms-step-bubble { box-shadow: 0 0 0 3px rgba(255, 106, 38, .2); }
}

/* Toggle --------------------------------------------------------------- */
.ms-toggle input { display: none; }
.ms-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ms-toggle-slot { display: inline-block; width: 42px; height: 24px; background: var(--paper-300); border: 1px solid var(--border-hair); border-radius: var(--r-pill); position: relative; transition: background var(--dur-2) var(--ease-out); }
.ms-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-surface); box-shadow: var(--shadow-1); transition: left var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out); }
.ms-toggle input:checked + .ms-toggle-slot { background: var(--spark-500); border-color: var(--spark-500); }
.ms-toggle input:checked + .ms-toggle-slot .ms-toggle-knob { left: 22px; }

/* Wizard step 1 — Beschrijf je spel ----------------------------------- */
.ms-describe {
  flex-shrink: 0;
  max-width: 760px; width: 100%; margin: 0 auto;
  padding: 32px 32px 16px;
  display: flex; flex-direction: column; gap: 24px;
}
.ms-describe-head { display: flex; flex-direction: column; gap: 6px; }
.ms-describe-h { font: var(--t-h1); color: var(--fg-1); margin: 0; }
.ms-describe-s { font: var(--t-body-lg); color: var(--fg-3); margin: 0; }
.ms-describe-cards { display: flex; flex-direction: column; gap: 14px; }
.ms-describe-cta {
  display: flex; align-items: center; gap: 14px;
  padding-top: 4px;
}
.ms-describe-cta-hint { font: var(--t-body-sm); color: var(--fg-3); }

.ms-drop {
  border: 2px dashed var(--border-default); background: var(--paper-200);
  border-radius: var(--r-3); padding: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; text-align: center;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ms-drop:hover, .ms-drop:focus-visible { background: var(--spark-100); border-color: var(--spark-500); outline: none; }
.ms-drop.ms-drop-active { background: var(--spark-100); border-color: var(--spark-500); }
.ms-drop svg { stroke: var(--fg-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-drop-h { font: var(--t-h3); color: var(--fg-1); }
.ms-drop-s { font: var(--t-body-sm); color: var(--fg-3); }
.ms-describe-drop-err {
  font: var(--t-body-sm); color: var(--rose-600);
  margin-top: 6px;
}

.ms-describe-url, .ms-describe-text {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-surface); border: 1px solid var(--border-hair);
  border-radius: var(--r-card); padding: 18px;
  box-shadow: var(--shadow-1);
}
.ms-describe-url label, .ms-describe-text label { font: var(--t-h3); color: var(--fg-1); }
.ms-describe-url-hint { font: var(--t-body-sm); color: var(--fg-3); }
.ms-describe-url-invalid { color: var(--rose-600); }
.ms-describe-url input, .ms-describe-text textarea {
  font: var(--t-body); background: var(--bg-input);
  border: 1.5px solid var(--border-default); color: var(--fg-1);
  padding: 12px 14px; border-radius: var(--r-2); outline: none;
  font-family: var(--font-sans);
}
.ms-describe-url input:focus, .ms-describe-text textarea:focus {
  border-color: var(--border-focus); box-shadow: var(--shadow-focus);
}
.ms-describe-text textarea { min-height: 120px; resize: vertical; }

.ms-describe-url-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.ms-describe-save-meta {
  font: 12px/1 var(--font-sans); color: var(--fg-3);
  transition: opacity var(--dur-2) var(--ease-out);
}
.ms-describe-save-ok { color: var(--grass-500); }
.ms-describe-save-fail { color: var(--rose-600); }
.ms-describe-save-fading { opacity: 0; }

.ms-describe-attached { display: flex; flex-direction: column; gap: 8px; }
.ms-describe-attached-h { font: var(--t-caption); color: var(--fg-3); }
.ms-describe-attached-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-attached-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: var(--paper-100);
  border: 1px solid var(--border-default); border-radius: var(--r-pill);
  font: var(--t-body-sm); color: var(--fg-1);
}
.ms-attached-pill .x {
  cursor: pointer; color: var(--fg-3); font-weight: 700;
  background: none; border: none; padding: 0;
  font-size: 16px; line-height: 1;
}
.ms-attached-pill .x:hover { color: var(--rose-600); }

.ms-tip {
  font: var(--t-body-sm); color: var(--fg-3);
  background: var(--sun-100); border: 1px solid #f3d885;
  padding: 12px 16px; border-radius: var(--r-2);
  display: flex; gap: 10px; align-items: center;
}
.ms-tip b { color: var(--fg-1); }

/* Hide the dock + chat on the describe step — its body has its own
   inputs and the foot's Doorgaan is the only CTA. The play step has
   its own retest button + share controls in normal mode, so the legacy
   playwright_verify composer/dock would just duplicate them there. */
.ms-flow:not(.ms-flow-advanced).ms-flow-body-describe .ms-flow-inner .ms-dock,
.ms-flow:not(.ms-flow-advanced).ms-flow-body-describe .ms-flow-inner .ms-pane-chat,
.ms-flow:not(.ms-flow-advanced).ms-flow-body-play .ms-flow-inner .ms-dock,
.ms-flow:not(.ms-flow-advanced).ms-flow-body-play .ms-flow-inner .ms-pane-chat {
  display: none;
}

/* Step 3 — friendly progress card. The chat transcript is
   already hidden by the shared rule above; we keep the dock visible so
   the user can fire `design_pick` the first time they arrive (no job
   has run yet, so the foot's Next is gated `disabled`). Once an impl
   job is in flight the dock is locked to a `Stop` button by the
   existing project-view logic. */
.ms-build {
  display: flex; flex-direction: column; gap: 18px; align-items: center;
  padding: 24px 16px;
}
.ms-build-spin {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--spark-100);
  display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 4px;
}
.ms-build-spin::before {
  content: "";
  position: absolute; inset: -6px;
  border: 4px solid var(--spark-200, #ffd5bf);
  border-top-color: var(--spark-500);
  border-radius: 50%;
  animation: ms-build-rot 1.6s linear infinite;
}
@keyframes ms-build-rot { to { transform: rotate(360deg); } }
.ms-build-spin span {
  font: 800 32px/1 var(--font-display, var(--font-sans));
  color: var(--spark-700, var(--spark-500));
}
.ms-build-h {
  font: var(--t-h1); color: var(--fg-1);
  text-align: center; margin: 0;
}
.ms-build-s {
  font: var(--t-body-lg, var(--t-body));
  color: var(--fg-3);
  text-align: center; max-width: 440px; margin: 0;
}
.ms-build-next { color: var(--spark-500); font-weight: 600; }
.ms-build-narration {
  font: var(--t-body);
  color: var(--fg-2, var(--fg-3));
  text-align: center; max-width: 440px; margin: 4px 0 0;
  font-style: italic;
  opacity: 0; animation: ms-build-narr-in 240ms var(--ease-out) forwards;
}
@keyframes ms-build-narr-in { to { opacity: 1; } }

.ms-build-list {
  list-style: none; padding: 18px; margin: 8px 0 0;
  width: 100%; max-width: 520px;
  background: var(--bg-surface); border: 1px solid var(--border-hair);
  border-radius: var(--r-3, var(--r-2));
  display: flex; flex-direction: column; gap: 10px;
}
.ms-build-line { display: flex; align-items: center; gap: 12px; }
.ms-build-ic {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 12px/1 var(--font-sans);
  flex-shrink: 0;
}
.ms-build-line-done .ms-build-ic { background: var(--grass-500); color: #fff; }
.ms-build-line-now .ms-build-ic {
  background: var(--sky-500); color: #fff;
  animation: ms-pulse-step 1.4s var(--ease-out) infinite;
}
.ms-build-line-todo .ms-build-ic {
  background: var(--paper-200); color: var(--fg-muted);
  border: 1.5px solid var(--paper-300);
}
.ms-build-line-failed .ms-build-ic { background: var(--rose-600); color: #fff; }
.ms-build-lbl { font: var(--t-body); color: var(--fg-1); flex: 1; }
.ms-build-line-todo .ms-build-lbl { color: var(--fg-muted); }
.ms-build-time {
  font: var(--t-body-sm); color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.ms-build-done .ms-build-spin::before {
  animation: none; border-color: var(--spark-500);
}

.ms-build-failed .ms-build-spin,
.ms-build-cancelled .ms-build-spin { background: var(--rose-100); }
.ms-build-failed .ms-build-spin::before,
.ms-build-cancelled .ms-build-spin::before {
  animation: none; border-color: var(--rose-600);
}
.ms-build-failed .ms-build-spin span,
.ms-build-cancelled .ms-build-spin span { color: var(--rose-600); }
.ms-build-h-failed { color: var(--rose-600); }

.ms-build-actions {
  display: flex; gap: 10px; align-items: center;
}
.ms-build-details {
  width: 100%; max-width: 520px;
  background: var(--paper-200); border: 1px solid var(--border-hair);
  border-radius: var(--r-2); padding: 12px 14px;
  font: var(--t-mono); color: var(--fg-3);
  white-space: pre-wrap; word-break: break-word;
  margin-top: 4px;
}
.ms-build-details-adv {
  display: inline-block; margin-top: 8px;
  color: var(--spark-500);
}

/* Step 4 — "Speel & test". Two stacked surfaces: the labeled
   play iframe at the top, then a 2-column share/retest grid that
   collapses to a single column on phones. The chat + dock are hidden
   for this body (see the shared rule earlier in this file). */
.ms-play { display: flex; flex-direction: column; gap: 24px; padding: 24px 16px 12px; }
.ms-play-head { display: flex; flex-direction: column; gap: 6px; }
.ms-play-h { font: var(--t-h1); color: var(--fg-1); margin: 0; }
.ms-play-s { font: var(--t-body-lg); color: var(--fg-3); margin: 0; }

.ms-playzone {
  background: var(--bg-surface);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-3, var(--r-2));
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.ms-playzone-bar {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-hair);
  display: flex; align-items: center; gap: 12px;
  background: var(--paper-200);
}
.ms-playzone-url {
  font: var(--t-mono); color: var(--fg-2);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-playzone-frame { aspect-ratio: 16 / 10; background: #fff; }
.ms-playzone-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.ms-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .ms-share-grid { grid-template-columns: 1fr; } }
.ms-share-tile {
  background: var(--bg-surface); border: 1px solid var(--border-hair);
  border-radius: var(--r-3, var(--r-2)); padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.ms-share-tile .h { font: var(--t-h3); color: var(--fg-1); margin: 0; }
.ms-share-tile .s { font: var(--t-body-sm); color: var(--fg-3); margin: 0; }
.ms-share-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-share-actions .ms-btn { flex: 1 1 auto; min-width: 140px; }
.ms-share-meta { font: var(--t-caption); color: var(--fg-3); min-height: 14px; }
.ms-share-meta-ok { color: var(--grass-600, #2f7a3a); }
.ms-share-meta-fail { color: var(--rose-600); }

.ms-play-retest-status { font: var(--t-body-sm); color: var(--fg-3); min-height: 18px; }
.ms-play-retest-ok { color: var(--grass-600, #2f7a3a); }
.ms-play-retest-fail { color: var(--rose-600); }

/* Step 4 — pending placeholder. Reuses the build spinner so the visual
   transition from step 3's "still building" surface is seamless. */
.ms-play-pending {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 40px 16px;
}
.ms-play-pending .ms-build-h,
.ms-play-pending .ms-build-s { text-align: center; }
.ms-play-pending .ms-btn { margin-top: 8px; }


@media (max-width: 640px) {
  .ms-describe { padding: 20px 16px 12px; gap: 18px; }
  .ms-drop { padding: 18px; }
  .ms-describe-text textarea { min-height: 96px; }
  .ms-play { padding: 20px 14px 8px; gap: 18px; }
  .ms-playzone-bar { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .ms-playzone-url { flex-basis: 100%; order: -1; }
}

/* Step 5 — "Verbeter & deel". */
.ms-improve { display: flex; flex-direction: column; gap: 24px; padding: 24px 32px 8px; }
.ms-improve-head h2 { font: var(--t-h1); color: var(--fg-1); margin: 0 0 4px; }
.ms-improve-head p  { font: var(--t-body); color: var(--fg-3); margin: 0; }

.ms-feedback {
  background: var(--bg-surface); border: 1px solid var(--border-hair);
  border-radius: var(--r-3); padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-1);
}
.ms-feedback-head { display: flex; justify-content: space-between; align-items: center; }
.ms-feedback-head h3 { font: var(--t-h3); margin: 0; color: var(--fg-1); }
.ms-feedback-list { display: flex; flex-direction: column; gap: 10px; }
.ms-feedback-list[hidden] { display: none; }
.ms-feedback-item {
  display: flex; gap: 12px; padding: 12px 14px;
  background: var(--paper-100); border: 1px solid var(--border-hair);
  border-radius: var(--r-2); cursor: pointer; align-items: flex-start;
}
.ms-feedback-item-selected { background: var(--sky-100); border-color: var(--sky-500); }
.ms-feedback-item input { margin-top: 4px; flex-shrink: 0; }
.ms-feedback-item-pending {
  cursor: default; opacity: 0.85;
  background: var(--paper-100); border-style: dashed;
}
.ms-feedback-item-applied {
  cursor: default; opacity: 0.6;
  background: var(--paper-100);
}
.ms-feedback-item-applied .ms-feedback-text { text-decoration: line-through; }
.ms-feedback-check {
  width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--grass-500); font: 700 16px/1 var(--font-sans);
}
.ms-feedback-spinner {
  width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border-hair);
  border-top-color: var(--sky-500);
  animation: ms-feedback-spin 0.8s linear infinite;
}
@keyframes ms-feedback-spin {
  to { transform: rotate(360deg); }
}
.ms-feedback-body { flex: 1; min-width: 0; }
.ms-feedback-who { font: var(--t-caption); color: var(--fg-3); margin-bottom: 2px; }
.ms-feedback-text { font: var(--t-body); color: var(--fg-1); white-space: pre-wrap; word-break: break-word; }
.ms-feedback-dismiss {
  background: transparent; border: 0; color: var(--fg-3);
  font: 700 18px/1 var(--font-sans); cursor: pointer; padding: 0 4px;
}
.ms-feedback-dismiss:hover { color: var(--rose-600); }

.ms-feedback-self {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; background: var(--paper-100); border: 1px dashed var(--border-hair);
  border-radius: var(--r-2);
}
.ms-feedback-self[hidden] { display: none; }
.ms-feedback-self textarea {
  min-height: 72px; border: 1px solid var(--border-hair); border-radius: var(--r-2);
  padding: 8px 10px; font: var(--t-body); resize: vertical; background: var(--bg-surface);
}
.ms-feedback-self .row { display: flex; gap: 8px; }

.ms-feedback-empty {
  padding: 14px; text-align: center;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.ms-feedback-empty[hidden] { display: none; }
.ms-feedback-empty h3 { font: var(--t-h3); color: var(--fg-1); margin: 0; }
.ms-feedback-empty p  { font: var(--t-body-sm); color: var(--fg-3); margin: 0; }

.ms-improve-action { display: flex; align-items: center; gap: 14px; padding: 0 4px; }
.ms-improve-meta { font: var(--t-body-sm); color: var(--fg-3); }
.ms-improve-divider { border: 0; border-top: 1px solid var(--border-hair); margin: 0; }

@media (max-width: 640px) {
  .ms-improve { padding: 18px 14px 8px; gap: 18px; }
  .ms-feedback { padding: 14px; }
}