/* Shared agent.studio marketing renderer. The surrounding page owns the crop,
   material, and scale. These rules own the adaptive product interface. */
.studio-shared-shell {
  position: relative;
  display: flex;
  container: studio-shell / inline-size;
  min-width: 0;
}
.studio-chapter-shell.studio-shared-shell { flex-direction: row }
.studio-chapter-shell.studio-shared-shell > .pane-cli { flex: 1 1 0 }
.studio-chapter-shell.studio-shared-shell > .pane-studio { flex: 2 1 0 }
.studio-chapter-shell .studio-session-actions { display: none }
.studio-chapter-shell .studio-shared-session .title.is-active {
  max-width: none;
  flex: 1 1 auto;
}
.studio-shared-shell > .pane-cli,
.studio-shared-shell > .pane-studio,
.product-studio-shell.studio-shared-shell > .pane-cli,
.product-studio-shell.studio-shared-shell > .pane-studio {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.studio-shared-shell > .pane-studio { box-shadow: var(--mk-pane-shadow) }
.studio-shared-rail { flex: 0 0 256px }
.studio-shared-shell.is-rail-collapsed > .studio-shared-rail { display: none }
.studio-shared-shell.is-rail-collapsed .studio-pane-menu { display: inline-flex }
.studio-shared-shell.is-rail-open .studio-pane-menu { display: none }
.studio-shared-shell.is-rail-overlay.is-rail-open > .studio-shared-rail {
  position: absolute;
  z-index: 8;
  inset: 0 auto 0 0;
  display: flex;
  width: min(256px, 82%);
  background: var(--s1);
  box-shadow: var(--mk-lift);
}
.studio-rail-collapse { margin-left: auto }
.studio-pane-menu { display: none }
.studio-pane-menu.is-visible { display: inline-flex }

.studio-shared-session {
  flex: 0 0 var(--mk-head);
  min-width: 0;
  border-bottom: 1px solid var(--line);
}
.studio-shared-session .title.is-active {
  max-width: min(13rem, 34%);
  padding-inline: var(--sp2);
  background: var(--active-shade);
}
.studio-shared-session .title b {
  min-width: 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: var(--t-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-shared-session .studio-new-agent { flex: 0 0 auto }
.studio-shared-session .studio-session-action,
.studio-deploy-actions .studio-session-action {
  gap: var(--sp1);
  min-width: var(--mk-ctl);
  padding-inline: var(--sp2);
  cursor: pointer;
}
.studio-shared-session .studio-session-action svg,
.studio-deploy-actions .studio-session-action svg {
  width: 13px;
  height: 13px;
}
.studio-shared-session :is(button, .studio-session-action):hover,
.studio-shared-session :is(button, .studio-session-action):focus-visible,
.studio-deploy-actions .studio-session-action:hover,
.studio-deploy-actions .studio-session-action:focus-visible {
  border-color: var(--ink-faint);
  color: var(--ink);
}
.studio-shared-session .studio-session-action.is-primary:hover,
.studio-shared-session .studio-session-action.is-primary:focus-visible,
.studio-deploy-actions .studio-session-action.is-primary:hover,
.studio-deploy-actions .studio-session-action.is-primary:focus-visible {
  border-color: var(--btn);
  background: var(--btn);
  color: var(--btn-ink);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
}
.studio-shared-session .studio-session-action.is-active { background: var(--active-shade-raised); color: var(--ink) }
.studio-action-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.studio-shared-shell :is(.mk-session, .mk-tab, .mk-msg, .mk-answer, .mk-chat-composer) {
  font-size: var(--t-meta);
}
.studio-shared-shell .mk-tab { font-family: var(--mono); text-transform: lowercase }

.studio-shared-chat-pane { container: studio-chat-pane / inline-size; min-height: 0 }
.studio-shared-chat .mk-chat-feed { gap: var(--sp2) }
.studio-shared-chat .mk-msg.you {
  align-self: flex-end;
  width: fit-content;
  max-width: 88%;
  padding: var(--sp2) var(--sp3);
  border: 1px solid var(--line);
  border-radius: var(--mk-r);
  background: var(--active-shade);
  font-weight: 500;
}
.studio-shared-chat .mk-msg.think {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
}
.studio-thinking-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green);
  animation: studio-thinking 1.6s var(--ease) infinite;
}
.studio-related-chat .mk-msg.think { display: inline-flex; align-items: center; gap: var(--sp2) }
.studio-related-chat .go svg { width: 13px; height: 13px }
@keyframes studio-thinking { 50% { opacity: .35; transform: scale(.72) } }

.studio-shared-projection {
  display: flex;
  flex-direction: column;
  container: studio-projection / inline-size;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.studio-shared-projection .hero-studio-tabs {
  flex: 0 0 var(--header-h);
  min-width: 0;
}
.studio-shared-projection .hero-studio-views { flex: 1 1 auto; min-height: 0 }
.studio-shared-projection .hero-studio-view { min-width: 0; min-height: 0 }
.studio-shared-projection .mk-tab svg { width: 14px; height: 14px }

.studio-shared-canvas {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--header-h) var(--sp4) var(--sp3);
}
.studio-shared-projection .studio-shared-canvas .mk-cascade {
  top: var(--sp4);
  width: min(524px, calc(100% - (2 * var(--sp4))));
  transform: translateX(-50%);
}
.studio-shared-canvas .mk-group {
  width: min(292px, 100%);
  min-width: 0;
  padding: var(--sp3) var(--sp2) var(--sp2);
}
.studio-shared-canvas .studio-canvas-node {
  width: min(268px, 100%);
  min-width: 0;
  padding: var(--sp1) var(--sp2);
}
.studio-shared-canvas .mk-group > .studio-canvas-node,
.studio-shared-canvas .mk-cascade > .studio-canvas-node { width: min(268px, 100%) }
.studio-shared-canvas .mk-node.v2 .row1 { min-width: 0 }
.studio-shared-canvas .mk-node.v2 .row1 .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-node-usage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp4);
  height: var(--sp4);
  margin-left: auto;
  color: var(--ink-faint);
}
.studio-node-usage svg { width: 13px; height: 13px }
.studio-shared-canvas .mk-outcomes {
  width: min(524px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp3);
}
.studio-shared-canvas .mk-outcomes .studio-canvas-node { width: 100% }
.studio-shared-canvas .mk-fork { width: min(524px, 100%) }

.studio-shared-overview .body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, .9fr);
  align-items: start;
  gap: var(--sp3);
  padding: var(--sp2) var(--sp4) var(--sp3);
}
.studio-shared-overview .body ul {
  gap: var(--sp1);
  font-size: var(--t-meta);
  line-height: 1.35;
}
.studio-shared-overview .body p { -webkit-line-clamp: 3 }

.studio-shared-steps {
  display: grid;
  place-items: start stretch;
  padding: 0;
  overflow: auto;
}
.studio-shared-steps .mk-steps { width: 100%; border: 0; border-radius: 0; box-shadow: none }
.studio-shared-steps .mk-steps-grid { border: 0; border-radius: 0 }
.studio-shared-steps .studio-step-item { grid-column: 1 / -1 }
.studio-shared-steps .mk-status.warn {
  --st-ink: var(--amber);
  --st-line: color-mix(in srgb, var(--amber) 34%, transparent);
  --st-fill: color-mix(in srgb, var(--amber) 9%, var(--s1));
}

.studio-code-ide {
  display: grid;
  grid-template-columns: minmax(9.5rem, 30%) minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: var(--s1);
}
.studio-code-tree {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--sp0);
  padding: var(--sp3) var(--sp2);
  border-right: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-muted);
}
.studio-code-tree-head,
.studio-code-tree > span {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  min-width: 0;
  min-height: var(--control-h-2xs);
  padding-inline: var(--sp2);
  border-radius: var(--mk-r);
}
.studio-code-tree-head { margin-bottom: var(--sp1); color: var(--ink); font-weight: 500 }
.studio-code-tree > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.studio-code-tree > span.is-selected { background: var(--active-shade); color: var(--ink) }
.studio-code-tree > span.is-nested { padding-left: var(--sp5) }
.studio-code-tree > span.studio-code-deep { padding-left: var(--sp7) }
.studio-code-tree svg { width: 13px; height: 13px; flex: 0 0 auto }
.studio-code-editor {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}
.studio-code-editor-head,
.studio-code-status {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  flex: 0 0 var(--control-h-sm);
  min-width: 0;
  padding-inline: var(--sp3);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-muted);
}
.studio-code-editor-head > span,
.studio-code-valid { display: inline-flex; align-items: center; gap: var(--sp1) }
.studio-code-editor-head svg,
.studio-code-status svg { width: 13px; height: 13px }
.studio-code-valid { margin-left: auto; color: var(--green-text) }
.studio-code-editor-head .mk-copy { position: static; flex: 0 0 auto; margin-left: var(--sp1) }
.studio-code-lines {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: var(--sp3) var(--sp3) var(--sp3) 3.3rem;
  overflow: auto;
  background: var(--s1);
  font-family: var(--mono);
  font-size: clamp(10px, 1.05cqi, 12px);
  line-height: 1.65;
  color: var(--ink-faint);
  counter-reset: studio-code-line;
}
.studio-code-lines li { padding-left: var(--sp2) }
.studio-code-lines code { color: var(--ink); white-space: pre }
.studio-code-lines .k { color: var(--ink); font-weight: 600 }
.studio-code-lines .s { color: var(--ink-muted) }
.studio-code-lines .f { color: var(--ink); font-weight: 500 }
.studio-code-status {
  flex-basis: var(--control-h-2xs);
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.studio-shared-module {
  container: studio-module / inline-size;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}
.studio-shared-module > .studio-shared-chat { flex: 1 1 auto }
.studio-intent-module .studio-shared-chat .mk-chat-feed {
  justify-content: flex-start;
  padding: clamp(var(--sp4), 5cqi, var(--sp7));
}
.studio-intent-module .studio-shared-chat .mk-chat-composer {
  margin-inline: clamp(var(--sp4), 5cqi, var(--sp7));
  margin-bottom: clamp(var(--sp4), 5cqi, var(--sp7));
}
.studio-projection-module > .studio-shared-projection { flex: 1 1 auto }
.studio-code-module .studio-code-ide { flex: 1 1 auto }

.studio-deploy-module { justify-content: safe center; padding: clamp(var(--sp4), 5cqi, var(--sp7)); overflow: auto }
.studio-deploy-card {
  display: flex;
  width: min(720px, 100%);
  margin: auto;
  flex-direction: column;
  gap: var(--sp3);
  padding: clamp(var(--sp4), 4cqi, var(--sp6));
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: var(--s1);
  box-shadow: var(--mk-lift);
}
.studio-deploy-head { display: flex; align-items: flex-start; gap: var(--sp3) }
.studio-deploy-head > span:first-child { display: flex; min-width: 0; flex-direction: column; gap: var(--sp1) }
.studio-deploy-head b { font-size: var(--t-title); font-weight: 600 }
.studio-deploy-head small { color: var(--ink-muted) }
.studio-deploy-head .mk-pill { margin-left: auto }
.studio-deploy-head .mk-pill svg { width: 12px; height: 12px }
.studio-deploy-card dl { display: grid; gap: var(--sp2); margin: 0; padding-block: var(--sp2) }
.studio-deploy-card dl > div { display: grid; grid-template-columns: minmax(7rem, .5fr) minmax(0, 1fr); gap: var(--sp3) }
.studio-deploy-card dt { color: var(--ink-faint) }
.studio-deploy-card dd { margin: 0; font-family: var(--mono); color: var(--ink) }
.studio-deploy-card ul { display: grid; gap: var(--sp2); margin: 0; padding: 0; list-style: none; color: var(--ink-muted) }
.studio-deploy-card li { display: flex; align-items: center; gap: var(--sp2) }
.studio-deploy-card li svg { width: 14px; height: 14px; color: var(--green-text) }
.studio-deploy-actions { display: flex; justify-content: flex-end; gap: var(--sp2); padding-top: var(--sp2) }

@container studio-shell (max-width: 1000px) {
  .studio-shared-shell > .studio-shared-rail { display: none }
  .studio-shared-shell .studio-pane-menu,
  .studio-shared-shell.is-rail-open .studio-pane-menu { display: inline-flex }
  .studio-shared-shell.is-rail-revealed > .studio-shared-rail {
    position: absolute;
    z-index: 8;
    inset: 0 auto 0 0;
    display: flex;
    width: min(256px, 82%);
    background: var(--s1);
    box-shadow: var(--mk-lift);
  }
  .studio-shared-shell.is-rail-revealed .studio-pane-menu { display: none }
}
@container studio-shell (max-width: 760px) {
  .studio-shared-session .title.is-active { max-width: none; flex: 1 1 auto }
  .studio-shared-session .studio-session-action span { display: none }
  .studio-shared-session .studio-session-actions { gap: var(--sp0) }
  .studio-shared-overview .body { grid-template-columns: minmax(0, 1fr) }
  .studio-shared-overview .body ul { display: none }
  .studio-code-tree { grid-row: 1; grid-column: 1 / -1; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line) }
  .studio-code-tree-head { display: none }
  .studio-code-tree > span { flex: 0 0 auto }
  .studio-code-tree > span:not(.is-selected) { display: none }
  .studio-code-ide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) }
  .studio-code-editor { grid-row: 2 }
}
@container studio-shell (max-width: 620px) {
  .studio-shared-shell { flex-direction: column }
  .studio-chapter-shell.studio-shared-shell { flex-direction: column }
  .studio-shared-shell > .pane-cli,
  .studio-shared-shell > .pane-studio,
  .product-studio-shell.studio-shared-shell > .pane-cli,
  .product-studio-shell.studio-shared-shell > .pane-studio { width: 100%; min-height: 0 }
  .studio-shared-shell > .pane-cli { flex: .82 1 0; border-right: 0; border-bottom: 1px solid var(--line) }
  .studio-shared-shell > .pane-studio { flex: 1.18 1 0 }
  .product-frame .product-studio-shell.studio-shared-shell > .pane-cli { flex: .62 1 0 }
  .product-frame .product-studio-shell.studio-shared-shell > .pane-studio { flex: 1.38 1 0 }
  .studio-shared-chat .mk-chat-feed { padding: var(--sp2) var(--sp3) }
  .studio-shared-chat .mk-chat-steps,
  .studio-shared-chat .mk-msg.tool,
  .studio-shared-chat .mk-answer p:not(.ttl) { display: none }
  .studio-shared-chat .mk-chat-composer { margin-inline: var(--sp3) }
  .studio-shared-overview .head .right .mk-pill:nth-child(n + 3) { display: none }
}

@container studio-projection (max-width: 430px) {
  .studio-shared-projection .hero-studio-tabs { padding-inline: var(--sp2) }
  .studio-shared-projection .hero-studio-tabs .mk-tab { padding-inline: var(--sp2) }
  .studio-shared-projection .hero-studio-tabs .acts { display: none }
  .studio-shared-steps .mk-steps-grid { --steps-cols: max-content max-content minmax(4.5rem, 1fr) minmax(4.5rem, .9fr) max-content; --steps-gutter: 0px }
  .studio-shared-steps .mk-steps .cap { display: block }
  .studio-shared-steps .mk-steps .dur { display: none }
  .studio-shared-canvas .mk-cascade { scale: .76; transform-origin: top center }
  .studio-shared-overview .body { display: block; padding: var(--sp1) var(--sp3) var(--sp2) }
  .studio-shared-overview .body p { display: -webkit-box; -webkit-line-clamp: 1; font-size: var(--t-meta); line-height: 1.35 }
  .studio-shared-overview .body ul { display: none }
  .studio-shared-overview .head { min-height: var(--control-h-xs) }
}
@container studio-projection (max-width: 360px) {
  .studio-shared-steps .rate-unit { display: none }
}
@container studio-projection (max-width: 330px) {
  .studio-shared-steps .mk-steps-grid { --steps-cols: max-content minmax(4rem, 1fr) minmax(4rem, .9fr) max-content }
  .studio-shared-steps .mk-steps .ord,
  .studio-shared-steps .mk-steps .cap { display: block }
  .studio-shared-steps .mk-steps .st,
  .studio-shared-steps .mk-steps .dur { display: none }
}

@container studio-module (max-width: 520px) {
  .studio-code-module .studio-code-ide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) }
  .studio-code-module .studio-code-tree {
    grid-row: 1;
    grid-column: 1 / -1;
    flex-direction: row;
    overflow-x: auto;
    padding: var(--sp2);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .studio-code-module .studio-code-tree-head,
  .studio-code-module .studio-code-tree > span:not(.is-selected) { display: none }
  .studio-code-module .studio-code-editor { grid-row: 2 }
  .studio-deploy-module { padding: var(--sp3) }
  .studio-deploy-card { gap: var(--sp2); padding: var(--sp3) }
  .studio-deploy-card dl > div { grid-template-columns: minmax(6rem, .5fr) minmax(0, 1fr); gap: var(--sp2) }
  .studio-deploy-card ul li:nth-child(n + 3) { display: none }
  .studio-deploy-actions .studio-session-action { min-height: var(--control-h-xs) }
}

@container studio-chat-pane (max-width: 360px) {
  .studio-shared-session .title.is-active { padding-inline: var(--sp0) }
}

@container studio-chat-pane (max-width: 300px) {
  .studio-shared-session { gap: var(--sp1); padding-inline: var(--sp2) }
  .studio-shared-chat .mk-msg.tool,
  .studio-shared-chat .mk-chat-steps,
  .studio-shared-chat .mk-answer p:not(.ttl) { display: none }
  .studio-shared-chat .mk-chat-feed { gap: var(--sp1); padding: var(--sp3) }
}

.product-page-studio #workspace .product-frame { aspect-ratio: 6 / 5 }
@media (max-width: 640px) {
  .product-page-studio #workspace .product-frame { aspect-ratio: 4 / 5 }
}

@media (max-width: 620px) {
  .studio-chapter-shell.studio-shared-shell { flex-direction: column }
  .studio-chapter-shell.studio-shared-shell > .pane-cli,
  .studio-chapter-shell.studio-shared-shell > .pane-studio { width: 100%; min-height: 0 }
  .studio-chapter-shell.studio-shared-shell > .pane-cli {
    flex: .52 1 0;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .studio-chapter-shell.studio-shared-shell > .pane-studio { flex: 1.48 1 0 }
  .studio-chapter-shell .studio-shared-chat .mk-chat-feed { padding: var(--sp2) var(--sp3) }
  .studio-chapter-shell .studio-shared-chat .mk-chat-feed > :not(.mk-msg.you),
  .studio-chapter-shell .studio-shared-chat .mk-chat-composer { display: none }
}

@media (prefers-reduced-motion: reduce) {
  .studio-thinking-dot { animation: none }
}