.studio-shell.jc-studio:is(.studio-image, .studio-video) .cg-group > .jc-record-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.studio-shell:is(.studio-image, .studio-video) .jc-record-header > p:empty {
  display: none;
}

.studio-shell:is(.studio-image, .studio-video) .jc-record-header .zw-prompt-reuse {
  position: static;
  display: inline;
  vertical-align: baseline;
}

.studio-shell:is(.studio-image, .studio-video) .jc-record-header .zw-prompt-reuse[data-prompt-hover]::before {
  content: none;
}

/* Only the prompt occupies the text line. Transparent leading padding and the
   flex gap keep the pointer inside the group between the visible buttons. */
.studio-shell:is(.studio-image, .studio-video) .jc-record-header .zw-prompt-reuse > .zw-prompt-actions {
  position: absolute;
  inset: auto;
  top: var(--zw-toolbar-top, 0px);
  left: var(--zw-toolbar-left, 0px);
  width: max-content;
  gap: 6px;
  padding-inline-start: 8px;
  transform: none;
  background: transparent;
  box-shadow: none;
}

.studio-shell:is(.studio-image, .studio-video) .jc-record-header .zw-prompt-actions > button {
  background: #303033;
}

.studio-shell:is(.studio-image, .studio-video) .jc-record-header .zw-prompt-actions > button:is(:hover, :focus-visible) {
  background: #414145;
}

@media (hover: hover) {
  .studio-shell:is(.studio-image, .studio-video) .jc-record-header [data-zw-prompt-open] > .zw-prompt-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

/* This is the scrolling results viewport. The composer, return-to-latest row
   and dialogs are siblings or top-layer elements. */
.studio-shell.jc-studio:is(.studio-image, .studio-video)
.jc-main > .jc-workspace:has(> .jc-flow-width > .jc-flow .jc-record):not(:has(> .cd-empty:not([hidden]))) {
  --timeline-edge: var(--timeline-edge-mobile, clamp(28px, 5.5dvh, 48px));
  --timeline-mask: linear-gradient(to bottom,
    #000 0 calc(100% - var(--timeline-edge)),
    rgb(0 0 0 / 92%) calc(100% - var(--timeline-edge) * .78),
    rgb(0 0 0 / 50%) calc(100% - var(--timeline-edge) * .40),
    transparent 100%);
  /* The solid side strips keep scrollbars (including left-side scrollbars)
     fully visible; only the content between the scrollport gutters fades. */
  mask-image: var(--timeline-mask), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-size: 100% 100%, 12px 100%, 12px 100%;
  mask-position: center, left, right;
  mask-repeat: no-repeat;
  scroll-padding-block-end: max(24px, var(--timeline-edge));

  /* In browsers without scroll timelines the tail can still clear the fade. */
  > .jc-flow-width { padding-block-end: var(--timeline-edge); }
}

@keyframes zw-timeline-edge {
  from { mask-size: 100% 100%, 12px 100%, 12px 100%; }
  to { mask-size: 100% calc(100% + var(--timeline-edge)), 12px 100%, 12px 100%; }
}

@supports (animation-timeline: scroll(self block)) and (animation-range: calc(100% - 48px) 100%) {
  .studio-shell.jc-studio:is(.studio-image, .studio-video)
  .jc-main > .jc-workspace:has(> .jc-flow-width > .jc-flow .jc-record):not(:has(> .cd-empty:not([hidden]))) {
    /* Center alignment would leave half the last row faded even at scroll end. */
    mask-position: center top, left, right;
    /* The static state is also used when a short conversation does not scroll. */
    mask-size: 100% calc(100% + var(--timeline-edge)), 12px 100%, 12px 100%;
    animation-name: zw-timeline-edge;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(self block);
    animation-range: calc(100% - var(--timeline-edge)) 100%;
    > .jc-flow-width { padding-block-end: 0; }
  }
}

@media (max-width: 600px) {
  .studio-shell.jc-studio:is(.studio-image, .studio-video) .jc-main > .jc-workspace {
    --timeline-edge-mobile: clamp(22px, 4dvh, 32px);
  }
}

/* Footer, media and overflow menus are inline <details>, so an open menu
   should render at full contrast even when its card sits in the fade. */
.studio-shell.jc-studio:is(.studio-image, .studio-video)
.jc-main > .jc-workspace:has(> .jc-flow-width > .jc-flow details.zr-menu[open]):not(:has(> .cd-empty:not([hidden]))) {
  mask-image: none;
}