/* Only response actions. The opening and the original styles remain separate. */
#answer { --image-footer-clearance:max(72px, calc(env(safe-area-inset-bottom) + 56px)); }
/* Image frames share the full viewport center in previews and final output.
 * A symmetric size limit keeps tall images clear of the floating footer. */
#answer > img { max-height:min(80dvh, max(1px, calc(100dvh - var(--image-footer-clearance) - var(--image-footer-clearance)))); }
#answer.has-work-actions {
  padding-top: 24px;
  padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 56px));
  scroll-padding-bottom: 80px;
}
/* Slideshow text keeps its existing unpadded stage; final text keeps its space. */
#answer.has-work-actions:has(> img),
#answer.has-work-actions[aria-busy="true"] { padding-top:0; padding-bottom:0; }
#response-actions {
  position: fixed;
  z-index: 10;
  bottom: max(8px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  width: max-content;
  min-width: 0;
  align-items: center;
  justify-content: center;
  max-width: calc(100vw - 24px);
  gap: 4px;
  color: var(--ink, #111);
}
#response-actions button {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#response-actions button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: -4px;
}
#response-actions button:disabled { cursor: default; }

/* Four labels may wrap to two rows on narrow phones. Reserve the room upfront. */
@media (max-width: 430px) {
  #answer.has-many-work-actions {
    --image-footer-clearance:max(116px, calc(env(safe-area-inset-bottom) + 100px));
    padding-bottom: max(116px, calc(env(safe-area-inset-bottom) + 100px));
    scroll-padding-bottom: 124px;
  }
}

/* Keep the question action centered when it is the only label. */
#response-actions .response-question { position:relative; display:inline-flex; align-items:center; }
#response-actions.has-only-question .response-dice { position:absolute; right:100%; }
#response-actions .response-dice { position:relative; display:grid; place-items:center; padding:10px; opacity:.55; }
#response-actions .response-dice svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
#response-actions .response-dice:is(:active,:focus-visible) { opacity:1; }
#response-actions .response-dice:focus-visible::after { content:""; position:absolute; left:13px; right:13px; bottom:5px; border-bottom:1px solid currentColor; }
@media(hover:hover) { #response-actions .response-dice:hover { opacity:1; } }