.homePlaygroundEntry {
  display: grid;
  gap: 22px;
  padding: 28px 0 8px;
}

.homePlaygroundEntry h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.2;
  text-align: center;
}

.homePlaygroundEntry h2 button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: #0891b2;
  font: inherit;
  font-weight: var(--font-weight-semibold);
}

.playgroundComposer {
  display: grid;
  gap: 16px;
  width: min(var(--playground-content-width, 960px), 100%);
  margin: 0 auto;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 18px 60px rgba(24, 24, 27, 0.07);
}

.playgroundComposer.compact {
  width: min(1240px, calc(100vw - 120px));
  min-height: 190px;
  padding: 20px;
  border-radius: 22px;
}

.composerBody {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
}

.composerUpload {
  display: grid;
  width: 48px;
  height: 66px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-soft);
  transform: rotate(-8deg);
}

.composerUpload:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.composerUploadSpinner {
  animation: composer-upload-spin 0.9s linear infinite;
}

.composerInputStack {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.composerUploadArea {
  display: grid;
  gap: 6px;
}

.composerUploadList {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.composerUploadChip {
  display: inline-flex;
  max-width: min(100%, 320px);
  min-height: 28px;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text-normal);
  font-size: var(--font-size-xs);
}

.composerUploadChip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composerUploadChip small {
  flex: 0 0 auto;
  color: var(--muted-foreground);
}

.composerUploadChip button {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  padding: 0;
}

.composerUploadChip button:hover {
  background: var(--surface);
  color: var(--text-normal);
}

.composerUploadMessage {
  color: var(--muted-foreground);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.composerBodyWithReferences {
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: start;
}

.composerBodyWithReferences[data-frame-mode="true"] {
  grid-template-columns: 250px minmax(0, 1fr);
}

.mediaReferenceStack {
  position: relative;
  width: 108px;
  min-height: 106px;
  overflow: visible;
}

.mediaReferenceStack[data-expanded="true"] {
  z-index: 12;
}

.mediaReferenceTooltip {
  position: absolute;
  z-index: 14;
  top: -42px;
  left: 0;
  max-width: min(640px, 54vw);
  overflow: hidden;
  padding: 10px 14px;
  border-radius: 12px;
  background: #20252b;
  color: #fff;
  font-size: var(--font-size-sm);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 12px 32px rgba(24, 24, 27, 0.22);
}

.mediaReferenceStackCards {
  position: relative;
  width: 108px;
  min-height: 104px;
  transition: width 160ms ease;
}

.mediaReferenceStack[data-expanded="true"] .mediaReferenceStackCards {
  width: min(calc(var(--reference-count) * 52px + 18px), calc(100vw - 96px));
}

.mediaReferenceCard {
  position: absolute;
  display: grid;
  width: 58px;
  height: 76px;
  place-items: center;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text-soft);
  box-shadow: 0 10px 24px rgba(24, 24, 27, 0.12);
}

.mediaReferenceCard {
  left: calc(24px + var(--reference-x, 0px));
  top: calc(7px + var(--reference-y, 0px));
  transform: rotate(var(--reference-tilt, -6deg));
  transition: left 160ms ease, top 160ms ease, transform 160ms ease, z-index 150ms ease, box-shadow 150ms ease;
}

.mediaReferenceStack[data-expanded="true"] .mediaReferenceCard {
  left: calc(2px + var(--reference-index) * 52px);
  top: 8px;
  transform: rotate(var(--reference-tilt, -4deg));
}

.mediaReferenceCard[data-hovered="true"] {
  z-index: 6;
  transform: translateY(-8px) scale(1.04) rotate(0deg);
  box-shadow: 0 16px 36px rgba(24, 24, 27, 0.18);
}

.mediaReferenceCard img,
.mediaReferenceCard video,
.frameSlotButton video,
.frameSlotButton img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  object-fit: cover;
}

.mediaReferencePlaceholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  background: var(--surface-muted);
  color: var(--primary);
}

.mediaReferenceDuration {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(24, 24, 27, 0.66);
  color: #fff;
  font-size: var(--font-size-xs);
  line-height: 1.35;
}

.mediaReferenceRemove,
.frameSlotRemove {
  position: absolute;
  z-index: 7;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #20252b;
  color: #fff;
  padding: 0;
  box-shadow: 0 6px 16px rgba(24, 24, 27, 0.18);
}

.mediaReferenceRemove {
  top: -13px;
  right: -13px;
}

.mediaReferenceUploadCard {
  border-style: dashed;
  box-shadow: none;
}

.mediaReferenceUploadCard span {
  position: absolute;
  bottom: 10px;
  color: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.mediaReferenceStack:not([data-expanded="true"]) .mediaReferenceUploadCard[data-has-uploads="true"] {
  opacity: 0;
  pointer-events: none;
}

.mediaReferenceStack[data-expanded="true"] .mediaReferenceUploadCard,
.mediaReferenceUploadCard[data-has-uploads="false"] {
  opacity: 1;
  pointer-events: auto;
}

.mediaReferenceUploadCard:not(:disabled):hover {
  color: var(--text-normal);
  background: var(--surface);
}

.mediaReferenceUploadCard:disabled {
  cursor: not-allowed;
  opacity: 0.64;
}

.mediaReferenceStack:not([data-expanded="true"]) .mediaReferenceUploadCard[data-has-uploads="true"]:disabled {
  opacity: 0;
}

.mediaReferenceAdd {
  position: absolute;
  left: 74px;
  top: 61px;
  z-index: 12;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-normal);
  padding: 0;
  box-shadow: 0 8px 20px rgba(24, 24, 27, 0.12);
}

.mediaReferenceStack[data-expanded="true"] .mediaReferenceAdd {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.86);
}

.mediaReferenceAdd:not(:disabled):hover {
  background: var(--surface);
  color: var(--primary);
}

.mediaReferenceAdd:disabled {
  cursor: not-allowed;
  opacity: 0.64;
}

.firstLastFramePicker {
  display: grid;
  grid-template-columns: 86px 34px 86px;
  align-items: center;
  gap: 10px;
  min-height: 118px;
}

.frameSlot {
  position: relative;
}

.frameSlotButton {
  display: grid;
  width: 78px;
  height: 104px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text-soft);
  transform: rotate(-7deg);
}

.frameSlot:nth-child(3) .frameSlotButton {
  transform: rotate(6deg);
}

.frameSlotButton[data-filled="true"] {
  border-style: solid;
}

.frameSlotButton span {
  position: absolute;
  bottom: 10px;
  color: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.frameSlotButton[data-filled="true"] span {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(24, 24, 27, 0.62);
  color: #fff;
}

.frameSlotRemove {
  top: -8px;
  right: 0;
}

.frameSwapButton {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
}

.frameSwapButton:not(:disabled):hover {
  background: var(--surface-muted);
  color: var(--text-normal);
}

.frameSwapButton:disabled {
  opacity: 0.42;
}

.promptMentionInput {
  position: relative;
  min-width: 0;
}

.promptMentionEditable {
  position: relative;
  z-index: 1;
  min-height: 88px;
  max-height: 190px;
  overflow-y: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-normal);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.promptMentionPlaceholder {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playgroundComposer.compact .promptMentionEditable {
  min-height: 104px;
}

.promptMentionChip {
  display: inline-flex;
  max-width: min(260px, 80%);
  align-items: center;
  gap: 5px;
  margin: 0 4px 2px 0;
  padding: 2px 6px 2px 2px;
  border-radius: 7px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--font-size-xs);
  line-height: 1.55;
  vertical-align: middle;
}

.promptMentionChipThumb {
  display: inline-grid;
  width: 22px;
  height: 22px;
  min-width: 22px;
  place-items: center;
  overflow: hidden;
  border-radius: 5px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.18);
}

.promptMentionChipThumbPlaceholder {
  font-weight: var(--font-weight-semibold);
}

.promptMentionDropdown {
  position: absolute;
  z-index: 20;
  width: min(320px, calc(100vw - 24px));
  max-height: 286px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(24, 24, 27, 0.16);
}

.promptMentionItem {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  width: 100%;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--text-normal);
  text-align: left;
}

.promptMentionItem:hover,
.promptMentionItem[data-active="true"] {
  background: var(--surface-muted);
}

.promptMentionThumb,
.promptMentionThumbIcon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--primary);
  object-fit: cover;
}

.promptMentionItem span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.promptMentionItem strong,
.promptMentionItem small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promptMentionItem strong {
  color: var(--text-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.promptMentionItem small {
  color: var(--muted-foreground);
  font-size: var(--font-size-xs);
}

.promptMentionItem em {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: var(--font-size-xs);
  font-style: normal;
}

.promptMentionEmpty {
  padding: 12px;
  color: var(--muted-foreground);
  font-size: var(--font-size-sm);
}

@keyframes composer-upload-spin {
  to {
    transform: rotate(360deg);
  }
}

.composerBody .shTextarea {
  min-height: 88px;
  border: 0;
  box-shadow: none;
  resize: none;
}

.playgroundComposer.compact .composerBody .shTextarea {
  min-height: 104px;
}

.composerFooter {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.composerFooter .shSelect {
  width: 132px;
}

.composerFooter .playgroundModelSelect,
.playgroundModelSelect {
  width: min(320px, 34vw);
}

.composerFooter .playgroundApiKeySelect,
.playgroundApiKeySelect {
  width: min(260px, 26vw);
}

.composerEstimatedCharge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: #526170;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.composerEstimatedCharge svg {
  width: 15px;
  height: 15px;
  color: #526170;
}

.composerMediaSendButton.shButton {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 0;
  border-radius: 999px;
  background: #0d0f14;
  color: #fff;
  box-shadow: 0 10px 28px rgba(13, 15, 20, 0.18);
}

.composerMediaSendButton.shButton:hover {
  background: #1b1f27;
}

.composerMediaSendButton.shButton svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

.playgroundModeCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(900px, 100%);
  margin: 0 auto;
}

.playgroundModeCards button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
  text-align: left;
}

.playgroundModeCards button > span {
  display: grid;
  width: 42px;
  height: 42px;
  grid-row: span 2;
  place-items: center;
  border-radius: 12px;
  background: var(--surface-muted);
}

.playgroundModeCards strong,
.playgroundModeCards small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playgroundModeCards small {
  color: var(--muted-foreground);
  font-size: var(--font-size-xs);
}

.publicWorksSection {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}

.publicWorksHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.publicWorksTabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
}

.publicWorksTabs button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: var(--font-size-sm);
}

.publicWorksTabs button[data-active="true"] {
  background: var(--surface);
  color: var(--text-strong);
}

.publicWorksMasonry {
  column-count: 5;
  column-gap: 10px;
}

.publicWorkCard {
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  break-inside: avoid;
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-muted);
}

.publicWorkCard img {
  display: block;
  width: 100%;
  height: auto;
}

.publicWorkCard div {
  position: absolute;
  inset-inline: 10px;
  bottom: 10px;
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
}

.publicWorkCard strong {
  color: var(--text-strong);
  font-size: var(--font-size-sm);
}

.contentShell[data-page="playground"] {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.contentShell[data-page="playground"] > .notice,
.contentShell[data-page="playground"] > .shBadge {
  position: absolute;
  z-index: 30;
  flex: 0 0 auto;
  box-shadow: 0 12px 34px rgba(154, 52, 18, 0.12);
}

.contentShell[data-page="playground"] > .shBadge {
  top: 10px;
  left: 12px;
}

.contentShell[data-page="playground"] > .notice {
  top: 38px;
  left: 12px;
  width: min(680px, calc(100% - 24px));
  margin: 0;
}

.contentShell[data-page="playground"] > .playgroundPage {
  flex: 1 1 auto;
  height: auto;
}

.playgroundPage {
  --playground-content-width: 960px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--surface-subtle);
}

.playgroundSidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 16px;
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.playgroundSidebarTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.playgroundSidebarNav {
  display: grid;
  gap: 8px;
}

.playgroundSideItem {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-normal);
  font-size: var(--font-size-sm);
}

.playgroundSideItem.active,
.playgroundSideItem:hover {
  background: var(--surface-muted);
}

.playgroundSettingsButton {
  margin-top: auto;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding-top: 12px;
}

.playgroundSettingsButton:hover {
  border-radius: var(--radius-md);
}

.playgroundSettingsDialog {
  width: min(640px, calc(100vw - 32px));
}

.playgroundSettingsDialogBody {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 0;
}

.playgroundSettingsField {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 24px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}

.playgroundSettingsFieldCopy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.playgroundSettingsFieldCopy strong {
  color: var(--text-strong);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.playgroundSettingsFieldCopy small {
  color: var(--muted-foreground);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.playgroundSettingsField .playgroundApiKeySelect {
  width: 100%;
}

.playgroundSettingsNotice {
  display: grid;
  gap: 10px;
  margin: 16px 24px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.playgroundSettingsNotice .shButton {
  justify-self: start;
}

.playgroundStage {
  display: grid;
  align-items: stretch;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.playgroundHero {
  display: grid;
  align-content: center;
  gap: 22px;
  height: 100%;
  min-height: 0;
  align-items: center;
  justify-items: center;
  overflow-y: auto;
  padding: 64px 32px;
}

.playgroundHero[data-chat="true"] {
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  align-content: stretch;
  align-items: stretch;
  justify-items: stretch;
  overflow: hidden;
  padding: 0;
}

.playgroundHero[data-media-board="true"] {
  width: 100%;
  height: 100%;
  min-height: 0;
  align-content: stretch;
  align-items: stretch;
  justify-items: stretch;
  overflow: hidden;
  padding: 0;
}

.playgroundModeSwitch {
  display: inline-flex;
  align-self: center;
  justify-self: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.playgroundModeSwitch button {
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: var(--font-size-sm);
  line-height: 1;
  white-space: nowrap;
}

.playgroundModeSwitch button[data-active="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
}

.playgroundGreeting {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.playgroundGreeting span {
  color: var(--text-strong);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

.playgroundGreeting strong {
  font-size: var(--font-size-xl);
}

.playgroundGreeting small {
  color: var(--muted-foreground);
}

.playgroundError {
  width: min(860px, 100%);
  margin: 0 auto;
  padding: 10px 12px;
  border: 1px solid #f0d4d4;
  border-radius: var(--radius-md);
  background: #fff7f7;
  color: #9f2f2f;
  font-size: var(--font-size-sm);
}

.assistantShell {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--surface-subtle);
}

.assistantShell[data-has-notice="true"] {
  grid-template-rows: auto minmax(0, 1fr);
}

.assistantToolbar {
  display: flex;
  width: min(var(--playground-content-width), calc(100% - 64px));
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 auto;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  border-inline: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--surface);
}

.assistantToolbar .shSelect {
  flex: 0 0 auto;
}

.assistantToolbar > div {
  display: grid;
  gap: 2px;
}

.assistantToolbar strong {
  color: var(--text-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.assistantToolbar span {
  color: var(--muted-foreground);
  font-size: var(--font-size-xs);
}

.assistantApiKeyNotice {
  display: flex;
  width: min(var(--playground-content-width), calc(100% - 64px));
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 auto;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  border-inline: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--muted-foreground);
  font-size: var(--font-size-sm);
}

.assistantThreadRoot {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.assistantThreadViewport {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 32px 0;
  scroll-behavior: smooth;
}

.assistantEmptyStage {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  place-items: center;
  overflow-y: auto;
  padding: 64px 32px;
}

.assistantEmpty {
  display: grid;
  width: min(var(--playground-content-width), 100%);
  align-content: center;
  justify-items: center;
  gap: 18px;
  margin: 0 auto;
  min-height: 0;
  padding: 0;
  color: var(--muted-foreground);
  text-align: center;
}

.assistantEmptyComposer {
  width: min(var(--playground-content-width), 100%);
  min-height: 190px;
  margin: 0 auto;
}

.assistantEmptyComposer .composerFooter {
  flex-wrap: nowrap;
}

.assistantEmptyInput {
  min-height: 88px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-normal);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.assistantEmptyInput::placeholder {
  color: var(--muted-foreground);
}

.composerSendButton {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
}

.composerSendButton:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.assistantWelcomeComposer {
  display: grid;
  gap: 46px;
  width: min(1280px, calc(100vw - 320px));
  min-height: 245px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(24, 24, 27, 0.08);
}

.assistantWelcomeBody {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.assistantWelcomeBody .composerUpload {
  width: 66px;
  height: 96px;
  border-radius: 14px;
}

.assistantWelcomeInput {
  min-height: 116px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-normal);
  font: inherit;
  font-size: var(--font-size-lg);
  line-height: 1.7;
}

.assistantWelcomeInput::placeholder {
  color: var(--muted-foreground);
}

.assistantWelcomeFooter {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.assistantWelcomeFooter .shSelect:first-child {
  width: 150px;
}

.assistantWelcomeFooter .playgroundModelSelect {
  width: min(460px, 38vw);
}

.assistantWelcomeKey {
  color: var(--muted-foreground);
  font-size: var(--font-size-sm);
}

.assistantWelcomeSend {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  margin-left: auto;
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: var(--primary-foreground);
}

.assistantWelcomeSend:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.assistantMessage {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 14px;
}

.assistantMessageList {
  flex: 0 0 auto;
  width: min(var(--playground-content-width), 100%);
  min-height: 0;
  padding-bottom: 18px;
}

.assistantUserMessage {
  display: grid;
  justify-items: end;
  gap: 8px;
  width: fit-content;
  max-width: min(560px, 78%);
  margin-left: auto;
}

.assistantUserImageGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: min(420px, 100%);
}

.assistantUserImagePreview {
  display: block;
  width: min(168px, 100%);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted);
}

.assistantUserImagePreview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.assistantBubble {
  align-self: flex-start;
  width: fit-content;
  max-width: min(720px, 86%);
  min-height: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text-normal);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  white-space: normal;
  overflow-wrap: anywhere;
}

.assistantBubble.user {
  max-width: min(520px, 78%);
  margin-left: auto;
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.assistantUserMessage .assistantBubble.user {
  max-width: 100%;
}

.assistantBubble.assistant {
  width: min(720px, 86%);
  margin-right: auto;
  background: var(--surface-muted);
}

.assistantPlainText {
  white-space: pre-wrap;
}

.assistantMarkdown {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.assistantMarkdown :where(p, ul, ol, pre, blockquote, table) {
  margin: 0;
}

.assistantMarkdown > div,
.assistantMarkdown :where([data-streamdown="code-block"], [data-streamdown="table-wrapper"]) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.assistantMarkdown [data-streamdown="code-block"] {
  overflow: hidden;
  margin: 10px 0;
  border-color: var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 8px;
}

.assistantMarkdown [data-streamdown="code-block-header"] {
  height: 24px;
  color: var(--muted-foreground);
}

.assistantMarkdown [data-streamdown="code-block-actions"],
.assistantMarkdown [data-streamdown="mermaid-block-actions"] {
  gap: 2px;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.assistantMarkdown :where([data-streamdown="code-block-copy-button"], [data-streamdown="code-block-download-button"]),
.assistantMarkdown [data-streamdown="table-wrapper"] > div:first-child button {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-soft);
  padding: 0;
}

.assistantMarkdown :where([data-streamdown="code-block-copy-button"], [data-streamdown="code-block-download-button"]):hover,
.assistantMarkdown [data-streamdown="table-wrapper"] > div:first-child button:hover {
  background: var(--surface-muted);
  color: var(--text-strong);
}

.assistantMarkdown :where([data-streamdown="code-block-copy-button"], [data-streamdown="code-block-download-button"]) svg,
.assistantMarkdown [data-streamdown="table-wrapper"] > div:first-child button svg {
  width: 15px;
  height: 15px;
}

.assistantMarkdown [data-streamdown="code-block-body"] {
  max-width: 100%;
  overflow-x: auto;
  border-color: var(--border);
  background: var(--surface-subtle);
  padding: 12px;
}

.assistantMarkdown [data-streamdown="table-wrapper"] {
  overflow: hidden;
  margin: 10px 0;
  border-color: var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 8px;
}

.assistantMarkdown [data-streamdown="table-wrapper"] > div:last-child {
  max-width: 100%;
  overflow-x: auto;
  border-color: var(--border);
  background: var(--surface-subtle);
}

.assistantMarkdown :where(ul, ol) {
  padding-left: 1.25rem;
}

.assistantMarkdown :where(li + li) {
  margin-top: 3px;
}

.assistantMarkdown :where(strong) {
  font-weight: var(--font-weight-semibold);
}

.assistantMarkdown :where(a) {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.assistantMarkdown :where(code) {
  border-radius: 5px;
  background: rgba(24, 24, 27, 0.08);
  padding: 1px 4px;
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.assistantMarkdown :where(pre) {
  max-width: 100%;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.assistantMarkdown :where(pre code) {
  background: transparent;
  padding: 0;
}

.assistantMarkdown :where(blockquote) {
  border-left: 3px solid var(--border);
  padding-left: 10px;
  color: var(--text-soft);
}

.assistantBubble.error {
  display: grid;
  gap: 4px;
  border-color: #f0d4d4;
  background: #fff7f7;
  color: #9f2f2f;
}

.assistantBubble.error strong {
  color: #7f1d1d;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.assistantErrorMessage {
  color: #9f2f2f;
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
}

.assistantTyping {
  color: var(--muted-foreground);
}

.assistantComposerDock {
  flex: 0 0 auto;
  width: min(var(--playground-content-width), 100%);
  position: sticky;
  bottom: 0;
  margin: auto auto 0;
  padding: 12px 0 14px;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0), var(--surface-subtle) 40%);
}

.assistantComposer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 16px 42px rgba(24, 24, 27, 0.08);
}

.assistantComposerInput {
  min-height: 42px;
  max-height: 140px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-normal);
  font: inherit;
  font-size: var(--font-size-sm);
}

.assistantComposerInput::placeholder {
  color: var(--muted-foreground);
}

.assistantSendButton {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  align-self: end;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
}

.assistantSendButton:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.composerUpload[data-active="true"] {
  border-color: var(--primary);
  color: var(--primary);
}

.mediaSettingsTrigger {
  display: inline-flex;
  min-height: 34px;
  max-width: 260px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-normal);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.mediaSettingsTrigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mediaSettingsPanel {
  display: grid;
  width: min(560px, calc(100vw - 24px));
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-lg);
}

.mediaSettingsSection {
  display: grid;
  gap: 8px;
}

.mediaSettingsLabel {
  color: var(--muted-foreground);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.mediaSettingsTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mediaSettingsTitleRow strong {
  color: var(--primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.mediaAspectGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 44px);
  gap: 4px;
  justify-content: start;
}

.mediaAspectGrid button {
  display: inline-flex;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-normal);
  font-size: var(--font-size-xs);
}

.mediaAspectGrid button[data-active="true"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
}

.mediaAspectIcon {
  position: relative;
  display: grid;
  width: 13px;
  height: 13px;
  place-items: center;
  color: var(--text-normal);
}

.mediaAspectIcon::before {
  content: "";
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.mediaAspectIcon[data-visual="smart"]::before {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.mediaAspectIcon[data-visual="smart"] svg {
  position: absolute;
  width: 8px;
  height: 8px;
}

.mediaAspectIcon[data-visual="wide"]::before {
  width: 13px;
  height: 4px;
}

.mediaAspectIcon[data-visual="landscape"]::before {
  width: 12px;
  height: 7px;
}

.mediaAspectIcon[data-visual="square"]::before {
  width: 10px;
  height: 10px;
}

.mediaAspectIcon[data-visual="portrait"]::before {
  width: 7px;
  height: 12px;
}

.mediaAspectIcon[data-visual="tall"]::before {
  width: 5px;
  height: 13px;
}

.mediaAspectGrid strong {
  overflow: hidden;
  max-width: 100%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaResolutionSegment,
.mediaOutputModeSegment {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 6px;
}

.mediaResolutionSegment button,
.mediaOutputModeSegment button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-normal);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.mediaResolutionSegment button[data-active="true"],
.mediaOutputModeSegment button[data-active="true"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
}

.mediaResolutionSegment button:disabled,
.mediaOutputModeSegment button:disabled,
.mediaCountGrid button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.mediaResolutionSegment svg,
.mediaSettingsHint svg {
  color: #06a6bd;
}

.mediaAudioSegment.ant-segmented {
  width: 100%;
  padding: 2px;
  border-radius: var(--radius-md);
  background: var(--muted);
}

.mediaAudioSegment .ant-segmented-item {
  min-height: 34px;
  color: var(--muted-foreground);
  font-weight: var(--font-weight-semibold);
}

.mediaAudioSegment .ant-segmented-item-label {
  min-height: 34px;
  line-height: 34px;
}

.mediaAudioSegment .ant-segmented-item-selected {
  background: var(--surface);
  color: var(--primary);
}

.mediaAudioSegment .ant-segmented-item-disabled {
  color: var(--muted-foreground);
  opacity: 0.4;
}

.mediaDurationSlider.ant-slider {
  margin: 8px 8px 18px;
}

.mediaDurationSlider .ant-slider-rail {
  background: var(--border);
}

.mediaDurationSlider .ant-slider-track {
  background: var(--primary);
}

.mediaDurationSlider .ant-slider-handle::after {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 65%, transparent);
}

.mediaDurationSlider .ant-slider-handle:hover::after,
.mediaDurationSlider .ant-slider-handle:focus::after {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
}

.mediaDurationSlider .ant-slider-dot {
  border-color: var(--border);
  background: var(--surface);
}

.mediaDurationSlider .ant-slider-dot-active {
  border-color: var(--primary);
}

.mediaDurationSlider .ant-slider-mark-text {
  color: var(--muted-foreground);
  font-size: var(--font-size-xs);
}

.mediaDurationSlider .ant-slider-mark-text-active {
  color: var(--text-normal);
}

.mediaSizeRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.mediaSizeRow label {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.mediaSizeRow label span,
.mediaSizeRow strong {
  color: #607080;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.mediaSizeRow .shInput {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-strong);
  font-size: var(--font-size-sm);
  text-align: right;
}

.mediaSizeRow > svg {
  justify-self: center;
  color: #607080;
}

.mediaCountGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 6px;
}

.mediaCountGrid button {
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-normal);
  font-size: var(--font-size-sm);
}

.mediaCountGrid button[data-active="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.mediaCustomCount {
  display: grid;
  grid-template-columns: auto 110px;
  align-items: center;
  justify-content: start;
  gap: 10px;
  color: var(--text-soft);
  font-size: var(--font-size-sm);
}

.mediaUnsupportedNote {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: var(--font-size-sm);
}

.mediaSettingsHint {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: var(--font-size-sm);
}

.mediaTaskPage {
  --media-task-max-width: 1120px;
  --media-composer-max-width: 960px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.mediaTaskTimeline {
  display: grid;
  align-content: start;
  gap: 22px;
  justify-items: center;
  min-height: 0;
  overflow-y: auto;
  padding: 38px 40px 22px;
}

.mediaTaskTimeline h1 {
  width: min(var(--media-task-max-width), 100%);
  font-size: 1.875rem;
}

.mediaTaskTimeline > .playgroundError {
  width: min(var(--media-task-max-width), 100%);
}

.mediaTaskItem {
  display: grid;
  gap: 14px;
  width: min(var(--media-task-max-width), 100%);
}

.mediaTaskHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mediaTaskHeaderMain {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  gap: 14px;
  min-width: 0;
}

.mediaTaskHeaderContent {
  display: grid;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
}

.mediaTaskMetaLine {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: #7a8794;
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.mediaTaskMetaLine svg {
  flex: 0 0 auto;
  color: #607080;
}

.mediaTaskMetaLine time,
.mediaTaskMetaLine strong,
.mediaTaskMetaLine span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaTaskMetaLine strong {
  color: var(--text-normal);
  font-weight: var(--font-weight-medium);
}

.mediaTaskPromptLine {
  position: relative;
  min-width: 0;
}

.mediaTaskPromptText {
  display: block;
  min-width: 0;
  color: var(--text-strong);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.65;
  max-height: 4.95em;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.mediaTaskPromptLine:hover {
  z-index: 13;
}

.mediaTaskPromptLine:hover .mediaTaskPromptText {
  max-height: none;
  overflow: visible;
}

.mediaPromptResourceTag {
  display: inline-flex;
  max-width: min(220px, 86vw);
  align-items: center;
  gap: 6px;
  margin: 0 5px 3px;
  padding: 2px 8px 2px 4px;
  border-radius: 7px;
  background: #438ce9;
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
  vertical-align: baseline;
}

.mediaPromptResourceThumb {
  display: inline-grid;
  width: 24px;
  height: 24px;
  min-width: 24px;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
}

.mediaPromptResourceThumb img,
.mediaPromptResourceThumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mediaPromptResourceThumb svg {
  width: 15px;
  height: 15px;
}

.mediaTaskHeader time {
  color: #7a8794;
  font-size: var(--font-size-sm);
}

.mediaTaskReferenceStack {
  --task-reference-width: 54px;
  --task-reference-height: 72px;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--task-reference-width);
  height: var(--task-reference-height);
  margin: 2px 2px 2px 0;
  vertical-align: middle;
  transition: z-index 120ms ease;
}

.mediaTaskReferenceStack:hover {
  z-index: 14;
}

.mediaTaskReferenceCard {
  position: absolute;
  left: 0;
  top: calc(var(--reference-y, 0px));
  display: grid;
  width: var(--task-reference-width);
  height: var(--task-reference-height);
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--primary);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.2);
  transform: rotate(var(--reference-tilt, -8deg));
  transition: left 180ms ease, top 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.mediaTaskReferenceStack:hover .mediaTaskReferenceCard {
  left: calc(var(--reference-index) * 58px);
  top: 0;
  transform: rotate(var(--reference-tilt, -5deg));
}

.mediaTaskReferenceCard:hover {
  z-index: 6;
  transform: translateY(-5px) scale(1.04) rotate(0deg) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.24);
}

.mediaTaskReferenceCard img,
.mediaTaskReferenceCard video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mediaTaskReferenceCard svg {
  width: 17px;
  height: 17px;
}

.mediaTaskReferenceCard small {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(24, 24, 27, 0.68);
  color: #fff;
  font-size: 10px;
  line-height: 1.25;
}

.mediaTaskReferenceCard[data-kind="audio"],
.mediaTaskReferenceCard[data-kind="file"] {
  background: linear-gradient(135deg, #f7fbff, #e7edf5);
}

.mediaTaskReferenceOverflow {
  position: absolute;
  right: -9px;
  bottom: -7px;
  z-index: 8;
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--text-strong);
  color: var(--surface);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
}

.mediaTaskStatus {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: var(--font-size-xs);
}

.mediaTaskStatus[data-status="succeeded"] {
  background: #eefdf4;
  color: #15803d;
}

.mediaTaskStatus[data-status="failed"],
.mediaTaskStatus[data-status="cancelled"] {
  background: #fef2f2;
  color: #b91c1c;
}

.mediaPreviewStage {
  display: grid;
  position: relative;
  width: 100%;
  justify-items: center;
}

.mediaPreviewStage[data-count="1"] {
  min-height: min(62vh, 600px);
  max-height: 600px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(234, 238, 243, 0.74)),
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.03) 0 1px, transparent 1px 28px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.mediaPreviewStage[data-count="1"][data-preview-state="loading"] {
  background:
    linear-gradient(110deg, rgba(237, 240, 242, 0.92) 0%, rgba(247, 248, 249, 0.94) 42%, rgba(230, 234, 238, 0.88) 78%),
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.03) 0 1px, transparent 1px 28px);
  background-size: 220% 100%, auto, auto;
  animation: mediaLoadingShimmer 1.35s ease-in-out infinite;
}

.mediaPreviewStage[data-count="1"]::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18) 44%, rgba(15, 23, 42, 0.035));
  content: "";
  pointer-events: none;
}

.mediaPreviewBackdrop {
  position: absolute;
  inset: -28px;
  width: calc(100% + 56px);
  height: calc(100% + 56px);
  opacity: 0.2;
  filter: blur(34px) saturate(1.08);
  object-fit: cover;
  pointer-events: none;
  transform: scale(1.04);
}

.mediaGrid {
  --media-grid-columns: 1;
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(var(--media-grid-columns), minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  max-width: var(--media-grid-max-width, 100%);
  justify-self: center;
  overflow: visible;
}

.mediaPreviewStage[data-count="1"][data-preview-state="loading"] .mediaGrid,
.mediaPreviewStage[data-count="1"][data-preview-state="empty"] .mediaGrid {
  width: 100%;
  max-width: none;
  height: 100%;
  align-self: stretch;
}

.mediaTile {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 210px;
  max-height: 600px;
  aspect-ratio: var(--media-result-aspect, 1 / 1);
  place-items: center;
  overflow: hidden;
  border-radius: 2px;
  background: #eef0f2;
}

.mediaTile[data-count="1"] {
  min-height: min(62vh, 600px);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

.mediaPreviewStage[data-count="1"] .mediaTile[data-placeholder="true"] {
  width: 100%;
  min-height: min(62vh, 600px);
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.mediaTile[data-count="2"] {
  min-height: min(48vh, 520px);
}

.mediaTile img,
.mediaTile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mediaLoading,
.mediaEmptyTile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  background: linear-gradient(110deg, #edf0f2 0%, #f7f8f9 42%, #e6eaee 78%);
  background-size: 220% 100%;
  color: #6b7280;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  text-align: center;
  animation: mediaLoadingShimmer 1.35s ease-in-out infinite;
}

.mediaLoading svg {
  animation: mediaLoadingSpin 0.9s linear infinite;
}

.mediaEmptyTile {
  animation: none;
  background: #eef0f2;
}

.mediaPreviewStage[data-count="1"] .mediaTile[data-placeholder="true"] .mediaLoading,
.mediaPreviewStage[data-count="1"] .mediaTile[data-placeholder="true"] .mediaEmptyTile {
  background: transparent;
}

.mediaPreviewStage[data-count="1"] .mediaTile[data-placeholder="true"] .mediaLoading {
  animation: none;
}

.mediaTaskError {
  display: grid;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  background: #fef2f2;
  color: #991b1b;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.mediaTaskError strong {
  color: #7f1d1d;
  font-weight: var(--font-weight-semibold);
}

.mediaTaskError span {
  overflow-wrap: anywhere;
}

.mediaTaskActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mediaTaskActions > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--text-soft);
  font-size: var(--font-size-sm);
}

.mediaTaskActions > span svg {
  width: 14px;
  height: 14px;
  color: #607080;
}

.mediaComposerDock {
  padding: 10px 40px 14px;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0), var(--surface-subtle) 26%);
}

.mediaComposerDock .playgroundComposer {
  width: min(var(--media-composer-max-width), 100%);
  min-height: 190px;
  margin: 0 auto;
  border-radius: 26px;
}

@keyframes mediaLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mediaLoadingShimmer {
  0% {
    background-position: 140% 0;
  }

  100% {
    background-position: -80% 0;
  }
}

@media (max-width: 1180px) {
  .publicWorksMasonry {
    column-count: 3;
  }
}

@media (max-width: 860px) {
  .playgroundPage {
    grid-template-columns: 1fr;
    height: 100%;
    min-height: 0;
    margin: 0;
  }

  .playgroundSidebar {
    display: none;
  }

  .playgroundStage {
    padding: 0;
  }

  .playgroundHero {
    padding: 42px 18px;
  }

  .playgroundHero[data-chat="true"] {
    padding: 0;
  }

  .assistantThreadViewport {
    padding: 18px 18px 0;
  }

  .assistantEmptyStage {
    padding: 42px 18px;
  }

  .assistantWelcomeComposer {
    width: 100%;
    min-height: 220px;
    gap: 26px;
    padding: 18px;
  }

  .assistantWelcomeBody {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .assistantWelcomeBody .composerUpload {
    width: 52px;
    height: 68px;
  }

  .assistantWelcomeFooter {
    align-items: stretch;
    flex-direction: column;
  }

  .assistantWelcomeFooter .shSelect:first-child,
  .assistantWelcomeFooter .playgroundModelSelect {
    width: 100%;
  }

  .assistantWelcomeSend {
    width: 100%;
    height: 42px;
    margin-left: 0;
  }

  .playgroundComposer.compact {
    width: 100%;
  }

  .playgroundModeCards,
  .composerBody {
    grid-template-columns: 1fr;
  }

  .composerFooter,
  .publicWorksHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .mediaSettingsTrigger,
  .composerFooter .playgroundModelSelect,
  .composerFooter .playgroundApiKeySelect,
  .playgroundModelSelect,
  .playgroundApiKeySelect {
    width: 100%;
    max-width: 100%;
  }

  .mediaSettingsPanel {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 12px;
    border-radius: var(--radius-lg);
  }

  .mediaAspectGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mediaResolutionSegment button {
    min-height: 34px;
    font-size: var(--font-size-sm);
  }

  .mediaSizeRow {
    grid-template-columns: 1fr;
  }

  .mediaSizeRow > svg,
  .mediaSizeRow > strong {
    display: none;
  }

  .mediaTaskTimeline {
    padding: 30px 18px 18px;
  }

  .mediaGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mediaGrid[data-count="1"] {
    grid-template-columns: 1fr;
  }

  .mediaTile[data-count="1"],
  .mediaTile[data-count="2"] {
    min-height: auto;
  }

  .mediaComposerDock {
    padding: 10px 18px 14px;
  }

  .assistantComposerDock {
    padding-bottom: 14px;
  }

  .publicWorksMasonry {
    column-count: 2;
  }
}

@media (max-width: 560px) {
  .playgroundSettingsField {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }

  .playgroundSettingsNotice {
    margin: 14px 16px;
  }

  .mediaAspectGrid,
  .mediaCountGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mediaGrid {
    grid-template-columns: 1fr;
  }

  .mediaTaskHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .mediaTaskActions > span {
    width: 100%;
    margin-left: 0;
  }

  .publicWorksMasonry {
    column-count: 1;
  }
}