/*
 * Lightweight presentation layer for generated media.
 *
 * The production React sources are not present in this checkout, so these
 * selectors intentionally target the stable class names emitted by the
 * current bundle. Processing, error and billing states keep their original
 * card treatment; only completed image/video results are simplified.
 */

:root {
  --lj-media-viewer-width: 520px;
  --lj-media-viewer-line: #dededb;
  --lj-media-viewer-muted: #70706c;
  --lj-media-viewer-surface: #f7f7f5;
  --lj-media-viewer-strong: #20201e;
  --lj-inline-media-thumb-width: 240px;
  --lj-inline-media-thumb-height: 240px;
}

/* Completed assistant tool results: media first, without a card shell. */
.inlineCreativeAgentToolRun.completed {
  width: min(280px, calc(100% - 32px)) !important;
  margin-bottom: 22px !important;
  padding: 0 !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Only a multi-image result expands to the available conversation width.
 * Keep each generation in its own turn, and keep single-image/video previews compact.
 * CSS Grid responds to the actual panel width, including when the viewer is open.
 */
.inlineCreativeAgentToolRun.completed:has(.inlineCreativeAgentImageResults > article + article) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.inlineCreativeAgentToolRun.completed > header {
  display: none !important;
}

.inlineCreativeAgentToolRun.completed .inlineCreativeAgentImageResults,
.inlineCreativeAgentToolRun.completed .inlineCreativeAgentImageResults.suite {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 18px 14px !important;
}

.inlineCreativeAgentToolRun.completed .inlineCreativeAgentImageResults > article {
  width: 100% !important;
  min-width: 0 !important;
  align-content: start !important;
  gap: 7px !important;
  justify-items: start !important;
}

.inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunMedia,
.inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunSnapshotMedia {
  width: fit-content !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunMedia img,
.inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunMedia video,
.inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunSnapshotMedia img,
.inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunSnapshotMedia video,
.inlineCreativeAgentToolRun.completed .inlineCreativeAgentImageResults.suite .inlineCreativeAgentToolRunMedia,
.inlineCreativeAgentToolRun.completed .inlineCreativeAgentImageResults.suite .inlineCreativeAgentToolRunMedia img {
  object-fit: contain !important;
  width: auto !important;
  max-width: min(var(--lj-inline-media-thumb-width), 100%) !important;
  height: auto !important;
  max-height: min(var(--lj-inline-media-thumb-height), 48vh) !important;
  display: block !important;
}

/* Standalone image conversation results. */
.imageConversationAssistant:not(.imageConversationGenerating) {
  width: min(280px, 94%) !important;
  padding: 0 !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.imageConversationAssistant:not(.imageConversationGenerating) > header {
  display: none !important;
}

.imageConversationAssistant:not(.imageConversationGenerating) > .imageConversationMedia {
  place-items: start !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.imageConversationAssistant:not(.imageConversationGenerating)
  > .imageConversationMedia
  > .exactGeneratedResultZoom,
.imageConversationAssistant:not(.imageConversationGenerating)
  > .imageConversationMedia
  > .exactGeneratedResultZoom
  > img {
  width: auto !important;
  max-width: min(var(--lj-inline-media-thumb-width), 100%) !important;
  height: auto !important;
  max-height: min(var(--lj-inline-media-thumb-height), 48vh) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* A subject-reference comparison still presents only the generated result inline. */
.imageConversationAssistant:not(.imageConversationGenerating) .imageSubjectCompare {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.imageConversationAssistant:not(.imageConversationGenerating)
  .imageSubjectCompare
  > figure:first-child,
.imageConversationAssistant:not(.imageConversationGenerating)
  .imageSubjectCompare
  > figure:last-child
  > figcaption {
  display: none !important;
}

.imageConversationAssistant:not(.imageConversationGenerating)
  .imageSubjectCompare
  > figure:last-child {
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.imageConversationAssistant:not(.imageConversationGenerating)
  .imageSubjectCompare
  > figure:last-child
  > img {
  width: auto !important;
  max-width: min(var(--lj-inline-media-thumb-width), 100%) !important;
  height: auto !important;
  max-height: min(var(--lj-inline-media-thumb-height), 48vh) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.imageConversationAssistant:not(.imageConversationGenerating) > .previewActions {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* The media itself is the preview affordance; never render a second centered zoom control. */
.imageConversationAssistant:not(.imageConversationGenerating)
  > .imageConversationMedia
  > .exactGeneratedResultZoom,
.inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunMedia,
.inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunSnapshotMedia {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  position: relative !important;
  color: inherit !important;
  font: inherit !important;
  text-align: initial !important;
}

.imageConversationAssistant:not(.imageConversationGenerating)
  > .imageConversationMedia
  > .exactGeneratedResultZoom::before,
.imageConversationAssistant:not(.imageConversationGenerating)
  > .imageConversationMedia
  > .exactGeneratedResultZoom::after,
.inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunMedia::before,
.inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunMedia::after,
.inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunSnapshotMedia::before,
.inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunSnapshotMedia::after {
  content: none !important;
  display: none !important;
}

/* Standalone completed video conversation results. */
.exactVideoChatAssistant:has(.exactVideoChatVideo) {
  width: min(320px, 86%) !important;
  padding: 0 !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.exactVideoChatAssistant:has(.exactVideoChatVideo) > header {
  display: none !important;
}

.exactVideoChatVideo,
.exactVideoChatVideo.landscape,
.exactVideoChatVideo.square {
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.exactVideoChatVideo {
  width: min(160px, 100%) !important;
}

.exactVideoChatVideo.landscape {
  width: min(280px, 100%) !important;
}

.exactVideoChatVideo.square {
  width: min(220px, 100%) !important;
}

/* Normalize the original action rows before placing them inside the media. */
.lj-media-actions,
.imageConversationAssistant > .previewActions.lj-media-actions,
.exactVideoWorkbench .exactVideoChatActions.lj-media-actions,
.inlineCreativeAgentToolRun.completed > footer.lj-media-actions,
.inlineCreativeAgentImageResults > article > footer.lj-media-actions {
  box-sizing: border-box !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
}

.lj-media-actions::-webkit-scrollbar {
  display: none;
}

.lj-media-actions > a,
.lj-media-actions > button,
.imageConversationAssistant > .previewActions.lj-media-actions > a,
.imageConversationAssistant > .previewActions.lj-media-actions > button,
.exactVideoWorkbench .exactVideoChatActions.lj-media-actions > a,
.exactVideoWorkbench .exactVideoChatActions.lj-media-actions > button {
  flex: 0 0 auto !important;
  min-height: 34px !important;
}

.lj-media-action-icon,
.lj-media-actions > a[download].lj-media-action-icon,
.imageConversationAssistant > .previewActions > a[download].lj-media-action-icon,
.exactVideoWorkbench .exactVideoChatActions > a[download].lj-media-action-icon {
  box-sizing: border-box !important;
  justify-content: center !important;
  place-items: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  border-radius: 9px !important;
}

.lj-media-action-icon svg {
  width: 16px !important;
  height: 16px !important;
  flex: none !important;
  stroke-width: 1.8;
}

/* Keep the real React-owned controls, but make them feel like a player bar. */
.lj-media-overlay-context {
  position: relative;
}

.lj-media-overlay-context > .lj-media-actions.lj-media-actions--overlay {
  box-sizing: border-box !important;
  --lj-media-control-inset: 6px;
  z-index: 5 !important;
  position: absolute !important;
  left: var(--lj-media-overlay-left, 0) !important;
  top: var(--lj-media-overlay-top, 0) !important;
  width: var(--lj-media-overlay-width, 0) !important;
  max-width: none !important;
  height: var(--lj-media-overlay-height, 0) !important;
  min-height: 0 !important;
  padding: 6px !important;
  gap: 4px !important;
  align-items: flex-end !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  pointer-events: none !important;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay::before {
  content: "";
  z-index: 0;
  position: absolute;
  inset: auto 0 0;
  height: 58px;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 58%));
  pointer-events: none;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > .lj-media-action-icon {
  z-index: 2 !important;
  position: absolute !important;
  bottom: var(--lj-media-control-inset) !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  color: #fff !important;
  background: rgb(18 18 17 / 72%) !important;
  border: 1px solid rgb(255 255 255 / 24%) !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 12px rgb(0 0 0 / 16%) !important;
  backdrop-filter: blur(9px) !important;
  pointer-events: auto !important;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > .lj-media-action-icon svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > a[download].lj-media-action-icon {
  right: 40px !important;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > .lj-media-more-toggle {
  right: 6px !important;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > a[download].lj-media-action-icon:not(:has(svg))::before {
  content: "↓";
  font-size: 16px;
  line-height: 1;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > .lj-media-action-icon:hover,
.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > .lj-media-action-icon:focus-visible {
  color: #fff !important;
  background: rgb(16 16 15 / 88%) !important;
  border-color: rgb(255 255 255 / 48%) !important;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > b,
.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > strong {
  display: none !important;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > .lj-media-menu-item {
  z-index: 3 !important;
  position: absolute !important;
  right: 6px !important;
  bottom: calc(34px + var(--lj-media-control-inset) + (var(--lj-media-menu-index, 0) * 30px)) !important;
  box-sizing: border-box !important;
  display: none !important;
  width: min(180px, calc(100% - 12px)) !important;
  max-width: calc(100% - 12px) !important;
  height: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 9px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  color: #fff !important;
  background: rgb(18 18 17 / 86%) !important;
  border: 1px solid rgb(255 255 255 / 24%) !important;
  border-radius: 7px !important;
  box-shadow: 0 4px 14px rgb(0 0 0 / 22%) !important;
  font-size: 10px !important;
  font-weight: 620 !important;
  line-height: 24px !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  backdrop-filter: blur(10px) !important;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay.lj-media-actions--video {
  --lj-media-control-inset: 58px;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay.lj-media-actions--menu-open {
  overflow: visible !important;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay.lj-media-actions--menu-open
  > .lj-media-menu-item {
  display: flex !important;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > .lj-media-menu-item:hover,
.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > .lj-media-menu-item:focus-visible {
  background: rgb(16 16 15 / 96%) !important;
  border-color: rgb(255 255 255 / 48%) !important;
}

.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > .lj-media-menu-item:disabled,
.lj-media-overlay-context
  > .lj-media-actions.lj-media-actions--overlay
  > .lj-media-menu-item[aria-disabled="true"] {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.lj-media-open-target {
  cursor: pointer !important;
}

/* All application actions live in the side viewer; keep the React-owned source row hidden inline. */
.lj-media-actions--relocated,
.imageConversationAssistant:not(.imageConversationGenerating)
  > .previewActions.lj-media-actions--relocated,
.exactVideoChatAssistant:has(.exactVideoChatVideo)
  > .exactVideoChatActions.lj-media-actions--relocated,
.inlineCreativeAgentToolRun.completed
  > footer.lj-media-actions--relocated,
.inlineCreativeAgentToolRun.completed
  .inlineCreativeAgentImageResults
  > article
  > footer.lj-media-actions--relocated {
  display: none !important;
}

.lj-media-open-target:focus-visible,
.lj-media-viewer button:focus-visible,
.lj-media-viewer a:focus-visible {
  outline: 2px solid #6c63ff !important;
  outline-offset: 3px !important;
}

/* Codex-style docked media viewer. It does not exist until media is opened. */
.lj-media-viewer[hidden] {
  display: none !important;
}

.lj-media-viewer {
  box-sizing: border-box;
  z-index: 2400;
  color: var(--lj-media-viewer-strong);
  background: var(--lj-media-viewer-surface);
  border-left: 1px solid var(--lj-media-viewer-line);
  width: var(--lj-media-viewer-width);
  min-width: 0;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  position: fixed;
  inset: 0 0 0 auto;
  overflow: hidden;
  box-shadow: -18px 0 42px rgb(22 22 20 / 10%);
  animation: lj-media-viewer-in 180ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

@keyframes lj-media-viewer-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.lj-media-viewer__header {
  box-sizing: border-box;
  min-width: 0;
  padding: 0 10px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgb(255 255 253 / 92%);
  border-bottom: 1px solid var(--lj-media-viewer-line);
  backdrop-filter: blur(16px);
}

.lj-media-viewer__title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

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

.lj-media-viewer__title strong {
  font-size: 13px;
  font-weight: 720;
}

.lj-media-viewer__title small {
  color: var(--lj-media-viewer-muted);
  font-size: 10px;
  font-weight: 540;
}

.lj-media-viewer__controls {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.lj-media-viewer__extra-actions {
  min-width: 0;
  max-width: min(44vw, 330px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.lj-media-viewer__extra-actions::-webkit-scrollbar {
  display: none;
}

.lj-media-viewer__extra-actions > .lj-media-viewer__action {
  box-sizing: border-box;
  flex: 0 0 auto;
  max-width: 150px;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  color: #343432;
  background: #f1f1ee;
  border: 1px solid #deded9;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 620;
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.lj-media-viewer__extra-actions > .lj-media-viewer__action:hover,
.lj-media-viewer__extra-actions > .lj-media-viewer__action:focus-visible {
  color: #161614;
  background: #e8e8e4;
  border-color: #cfcfca;
}

.lj-media-viewer__controls > a,
.lj-media-viewer__controls > button {
  box-sizing: border-box;
  color: #343432;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  cursor: pointer;
}

.lj-media-viewer__controls > a:hover,
.lj-media-viewer__controls > button:hover {
  color: #161614;
  background: #ebebe8;
  border-color: #dfdfdb;
}

.lj-media-viewer__controls svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lj-media-viewer__body {
  min-width: 0;
  min-height: 0;
  padding: 18px;
  display: grid;
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
}

.lj-media-viewer__stage {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  display: grid;
  place-items: center;
}

.lj-media-viewer__stage > img,
.lj-media-viewer__stage > video {
  object-fit: contain;
  object-position: center;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 94px);
  border-radius: 8px;
  display: block;
}

.lj-media-viewer__stage > video {
  width: 100%;
  background: #0b0b0b;
}

body.lj-media-viewer-open .appShell {
  width: calc(100% - var(--lj-media-viewer-width)) !important;
  max-width: calc(100% - var(--lj-media-viewer-width)) !important;
  transition: width 180ms cubic-bezier(0.2, 0.75, 0.25, 1),
    max-width 180ms cubic-bezier(0.2, 0.75, 0.25, 1) !important;
}

/* Retire the old full-screen image overlay if React opened it in the same tick. */
body.lj-media-viewer-open .generatedResultLightboxBackdrop {
  display: none !important;
}

/* At compact desktop widths, keep the existing navigation/workbench layout intact. */
@media (min-width: 821px) and (max-width: 1100px) {
  body.lj-media-viewer-open .appShell {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 820px) {
  :root {
    --lj-inline-media-thumb-width: 168px;
    --lj-inline-media-thumb-height: 200px;
  }

  .inlineCreativeAgentToolRun.completed,
  .imageConversationAssistant:not(.imageConversationGenerating),
  .exactVideoChatAssistant:has(.exactVideoChatVideo) {
    width: min(260px, 100%) !important;
  }

  .exactVideoChatVideo {
    width: min(136px, 100%) !important;
  }

  .exactVideoChatVideo.landscape {
    width: min(220px, 100%) !important;
  }

  .exactVideoChatVideo.square {
    width: min(168px, 100%) !important;
  }

  .inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunMedia img,
  .inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunSnapshotMedia img,
  .inlineCreativeAgentToolRun.completed .inlineCreativeAgentToolRunSnapshotMedia video,
  .imageConversationAssistant:not(.imageConversationGenerating)
    > .imageConversationMedia
    > .exactGeneratedResultZoom,
  .imageConversationAssistant:not(.imageConversationGenerating)
    > .imageConversationMedia
    > .exactGeneratedResultZoom
    > img,
  .imageConversationAssistant:not(.imageConversationGenerating)
    .imageSubjectCompare
    > figure:last-child
    > img {
    max-width: min(var(--lj-inline-media-thumb-width), 100%) !important;
    max-height: min(var(--lj-inline-media-thumb-height), 48vh) !important;
  }

  body.lj-media-viewer-open .appShell {
    width: 100% !important;
    max-width: 100% !important;
  }

  .lj-media-viewer {
    width: 100vw !important;
    border-left: 0;
    box-shadow: none;
  }

  .lj-media-viewer__body {
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lj-media-viewer,
  body.lj-media-viewer-open .appShell {
    animation: none !important;
    transition: none !important;
  }
}

/* AI detail exact-pixel hotfix 20260904 */
.inlineCreativeAgentToolRun.completed
  .inlineCreativeAgentImageResults
  .inlineCreativeAgentToolRunMedia {
  border-radius: 0 !important;
  overflow: visible !important;
}

.inlineCreativeAgentToolRun.completed
  .inlineCreativeAgentImageResults
  .inlineCreativeAgentToolRunMedia img,
.lj-media-viewer__stage > img {
  border-radius: 0 !important;
}

/* Unified full-resolution viewer opened from the docked media sidebar. */
.lj-media-viewer__controls > .lj-media-viewer__expand {
  width: auto;
  min-width: 108px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #2f2f2d;
  background: #ededff;
  border-color: #d9d7ff;
  font-size: 13px;
  font-weight: 680;
  line-height: 1;
  white-space: nowrap;
}

.lj-media-viewer__controls > .lj-media-viewer__expand:hover,
.lj-media-viewer__controls > .lj-media-viewer__expand:focus-visible {
  color: #211b74;
  background: #e3e1ff;
  border-color: #c9c5ff;
}

.lj-media-viewer__stage > img,
.lj-media-viewer__stage > video {
  cursor: zoom-in;
}

body.lj-media-lightbox-open {
  overflow: hidden !important;
}

.lj-media-lightbox[hidden],
.lj-media-lightbox [hidden] {
  display: none !important;
}

.lj-media-lightbox {
  box-sizing: border-box;
  z-index: 4200;
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  color: #f7f7f7;
  background: #101011;
  isolation: isolate;
  animation: lj-media-lightbox-in 160ms ease-out;
}

@keyframes lj-media-lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lj-media-lightbox__backdrop {
  z-index: -1;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgb(255 255 255 / 5%), transparent 48%),
    rgb(10 10 11 / 97%);
}

.lj-media-lightbox__toolbar {
  z-index: 3;
  box-sizing: border-box;
  min-width: 0;
  min-height: 64px;
  padding: 10px 14px 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgb(22 22 24 / 94%);
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  backdrop-filter: blur(18px);
}

.lj-media-lightbox__identity {
  min-width: 0;
  display: grid;
  gap: 3px;
}

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

.lj-media-lightbox__identity strong {
  font-size: 14px;
  font-weight: 700;
}

.lj-media-lightbox__identity small {
  color: rgb(255 255 255 / 62%);
  font-size: 12px;
  line-height: 1.3;
}

.lj-media-lightbox__controls,
.lj-media-lightbox__image-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.lj-media-lightbox__controls > button,
.lj-media-lightbox__controls > a,
.lj-media-lightbox__image-controls > button {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f5f5f5;
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 9px;
  cursor: pointer;
}

.lj-media-lightbox__controls > button:hover,
.lj-media-lightbox__controls > a:hover,
.lj-media-lightbox__image-controls > button:hover {
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255 / 24%);
}

.lj-media-lightbox__controls svg,
.lj-media-lightbox__image-controls svg,
.lj-media-lightbox__previous svg,
.lj-media-lightbox__next svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lj-media-lightbox__image-controls {
  padding-right: 6px;
  margin-right: 2px;
  border-right: 1px solid rgb(255 255 255 / 12%);
}

.lj-media-lightbox__image-controls output {
  box-sizing: border-box;
  width: 54px;
  color: rgb(255 255 255 / 78%);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.lj-media-lightbox__image-controls > .lj-media-lightbox__mode,
.lj-media-lightbox__controls > .lj-media-lightbox__text-action {
  width: auto;
  min-width: 88px;
  padding: 0 12px;
  gap: 7px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.lj-media-lightbox__stage {
  z-index: 1;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgb(255 255 255 / 26%) transparent;
}

.lj-media-lightbox__stage.is-pannable {
  cursor: grab;
}

.lj-media-lightbox__stage.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.lj-media-lightbox__canvas {
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  height: max-content;
  min-height: 100%;
  padding: 24px 76px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lj-media-lightbox__canvas.is-width-reading {
  align-items: flex-start;
}

.lj-media-lightbox__canvas:has(> video) {
  width: 100%;
  height: 100%;
}

.lj-media-lightbox__canvas > img {
  flex: none;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  display: block;
  object-fit: contain;
  box-shadow: 0 18px 60px rgb(0 0 0 / 36%);
  touch-action: none;
}

.lj-media-lightbox__canvas > video {
  width: min(100%, 1440px);
  max-width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  background: #000;
  box-shadow: 0 18px 60px rgb(0 0 0 / 42%);
}

.lj-media-lightbox__canvas.is-loading::before,
.lj-media-lightbox__canvas.is-error::before {
  content: "正在加载原文件…";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgb(255 255 255 / 64%);
  font-size: 14px;
  pointer-events: none;
}

.lj-media-lightbox__canvas.is-error::before {
  content: "原文件加载失败";
  color: #ffb9b9;
}

.lj-media-lightbox__previous,
.lj-media-lightbox__next {
  z-index: 2;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  width: 44px;
  height: 60px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgb(20 20 22 / 72%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 24%);
  backdrop-filter: blur(12px);
  transform: translateY(-50%);
  cursor: pointer;
}

.lj-media-lightbox__previous { left: 16px; }
.lj-media-lightbox__next { right: 16px; }

.lj-media-lightbox__previous:hover,
.lj-media-lightbox__next:hover {
  background: rgb(42 42 46 / 88%);
  border-color: rgb(255 255 255 / 30%);
}

.lj-media-lightbox__previous:disabled,
.lj-media-lightbox__next:disabled {
  opacity: 0.28;
  cursor: default;
}

.lj-media-lightbox__hint {
  z-index: 2;
  box-sizing: border-box;
  min-height: 34px;
  margin: 0;
  padding: 8px 18px 10px;
  color: rgb(255 255 255 / 54%);
  background: rgb(18 18 20 / 92%);
  border-top: 1px solid rgb(255 255 255 / 8%);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}

.lj-media-lightbox button:focus-visible,
.lj-media-lightbox a:focus-visible,
.lj-media-lightbox__stage:focus-visible {
  outline: 2px solid #8d86ff;
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .lj-media-viewer {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .lj-media-viewer__header {
    min-height: 58px;
    padding: 8px 10px 8px 14px;
    flex-wrap: wrap;
    gap: 7px;
  }

  .lj-media-viewer__title {
    flex: 1 1 120px;
  }

  .lj-media-viewer__controls {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .lj-media-viewer__extra-actions {
    max-width: 32vw;
  }

  .lj-media-lightbox__toolbar {
    min-height: 0;
    padding: 8px 10px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .lj-media-lightbox__identity {
    width: 100%;
  }

  .lj-media-lightbox__controls {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lj-media-lightbox__canvas {
    padding: 14px 46px;
  }

  .lj-media-lightbox__previous,
  .lj-media-lightbox__next {
    width: 36px;
    height: 52px;
    border-radius: 10px;
  }

  .lj-media-lightbox__previous { left: 6px; }
  .lj-media-lightbox__next { right: 6px; }
}

@media (max-width: 560px) {
  .lj-media-viewer__controls > .lj-media-viewer__expand {
    min-width: 96px;
    padding: 0 10px;
  }

  .lj-media-lightbox__image-controls > .lj-media-lightbox__mode,
  .lj-media-lightbox__controls > .lj-media-lightbox__text-action {
    min-width: 82px;
    padding: 0 10px;
  }

  .lj-media-lightbox__canvas {
    padding-inline: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lj-media-lightbox {
    animation: none !important;
  }
}

/* Task-level billing stays visible; time and technical details follow chat interaction. */
.creatorResultTurn > .creatorResultMeta,
.inlineCreativeAgentToolRun.completed > .creatorResultMeta {
  display: grid !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 5px;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  font-size: 11px;
  line-height: 1.5;
}
.creatorResultBilling {
  display: block;
  color: var(--image-chat-muted, var(--video-muted, #70706c));
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.creatorResultDetails {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px 14px;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s, visibility .14s;
}
.creatorResultDetails > span { min-width: 0; overflow-wrap: anywhere; }
.creatorResultDetails > time { flex: none; white-space: nowrap; }
.creatorResultTurn:hover > .creatorResultMeta > .creatorResultDetails,
.creatorResultTurn:focus-within > .creatorResultMeta > .creatorResultDetails,
.inlineCreativeAgentToolRun.completed:hover > .creatorResultMeta > .creatorResultDetails,
.inlineCreativeAgentToolRun.completed:focus-within > .creatorResultMeta > .creatorResultDetails {
  opacity: 1;
  visibility: visible;
}
@media (hover: none), (pointer: coarse) {
  .creatorResultDetails { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .creatorResultDetails { transition: none; }
}