/* Scroll behavior is separate from the field's visual variants. */
.build-hero__atmosphere {
  opacity: 1;
  transform: none;
}
.build-hero:not(.build-hero--sheet) .build-hero__atmosphere {
  bottom: calc(-180px - var(--hero-handoff-space, 0px));
}
.build-hero--sheet .build-hero__atmosphere {
  bottom: calc(0px - var(--hero-handoff-space, 0px));
}
.build-starters {
  margin-top: var(--hero-handoff-space, 0px);
  clip-path: inset(0 0 var(--starter-clip-bottom, 0px) 0);
}
.build-hero.is-composer-docked ~ .build-starters {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 max(0px, calc(100% - var(--starter-clip-bottom, 0px) - 20px)), transparent max(0px, calc(100% - var(--starter-clip-bottom, 0px))));
  mask-image: linear-gradient(to bottom, #000 0, #000 max(0px, calc(100% - var(--starter-clip-bottom, 0px) - 20px)), transparent max(0px, calc(100% - var(--starter-clip-bottom, 0px))));
}
.build-composer-rail { display: none; }
.is-composer-docked .build-composer-rail {
  display: block;
  position: fixed;
  z-index: 40;
  left: 50%;
  right: auto;
  translate: -50% 0;
  width: min(960px, 100%);
  bottom: var(--composer-viewport-inset, 0px);
  height: calc(var(--composer-rail-height, 100px) + 80px);
  /* Transparent at every exposed edge, including both sides of the glow. */
  background: radial-gradient(ellipse 50% 100% at 50% 100%,
    rgba(255,255,255,.9) 0%, rgba(255,255,255,.84) 22%,
    rgba(255,255,255,.62) 42%, rgba(255,255,255,.34) 62%,
    rgba(255,255,255,.12) 80%, rgba(255,255,255,.025) 92%,
    rgba(255,255,255,0) 100%);
  pointer-events: none;
  opacity: calc(var(--composer-opacity, 1) * var(--composer-rail-opacity, 1));
  transition: opacity .18s ease;
}
html:has(.build-hero:not(.is-composer-hidden) .build-composer.is-floating) { scroll-padding-bottom: 116px; }
.build-hero.is-composer-hidden .build-composer,
.build-hero.is-composer-hidden .build-composer-rail { visibility: hidden; pointer-events: none; }
.build-hero__atmosphere.is-static {
  background-position: 0 var(--hero-field-y, 0px), 6.5px calc(6.5px + var(--hero-field-y, 0px)), 0 0, 0 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent max(0px, calc(55% + var(--hero-field-y, 0px) - 160px)), #000 max(1px, calc(55% + var(--hero-field-y, 0px))), #000 calc(100% - 210px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent max(0px, calc(55% + var(--hero-field-y, 0px) - 160px)), #000 max(1px, calc(55% + var(--hero-field-y, 0px))), #000 calc(100% - 210px), transparent 100%);
}

/* Translate only the copy, never the wrapper containing the fixed composer. */
.build-hero h1,
.build-hero__lead,
.build-suggestions-hint,
.build-suggestions,
.build-hero__scroll { translate: 0 var(--hero-copy-y, 0px); }
.build-suggestions-hint,
.build-suggestions,
.build-hero__scroll {
  opacity: var(--hero-suggestions-opacity, 1);
  visibility: var(--hero-suggestions-visibility, visible);
  pointer-events: var(--hero-suggestions-events, auto);
}

/* Reserve the expanded form's space. A transformed entrance-animation wrapper
   would otherwise make its fixed child move with the page. */
.build-hero__content > .build-composer-slot {
  width: min(100%, 760px);
  margin-top: 40px;
  animation: none;
  transform: none;
}
.build-composer-slot > .build-composer {
  width: 100%;
  margin: 0;
  transition: border-color .25s, box-shadow .25s, opacity .18s ease;
}

.build-hero.is-composer-floating { z-index: 50; }
/* The slot must sit above the rail and content backdrop in its own layer.
   Keep it untransformed so the fixed form remains relative to the viewport. */
.build-hero.is-composer-floating .build-composer-slot {
  position: relative;
  z-index: 50;
  isolation: isolate;
}
.build-composer-slot > .build-composer.is-sticky {
  position: fixed;
  z-index: 50;
  top: var(--composer-top);
  left: var(--composer-center);
  translate: -50% 0;
  width: var(--composer-width);
  height: var(--composer-height);
  margin: 0;
  padding: 0;
  border-radius: var(--composer-radius);
  background: #fff;
  border-color: transparent;
  opacity: var(--composer-opacity, 1);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .8), 0 2px 6px rgba(23, 23, 23, .08), 0 12px 36px rgba(23, 23, 23, .16);
}
.build-composer.is-sticky:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 8px 32px rgba(23, 23, 23, .16);
}
.build-composer.is-sticky .build-composer__toolbar,
.build-composer.is-sticky .build-composer__tools { display: contents; }
/* Each live control moves between its measured expanded position and its
   compact position. Fonts and icons are never scaled during the morph. */
.build-composer.is-sticky textarea,
.build-composer.is-sticky .build-icon-button,
.build-composer.is-sticky .build-model-picker,
.build-composer.is-sticky .build-send {
  position: absolute;
  top: 0;
  left: 0;
  translate: var(--control-x) var(--control-y);
  width: var(--control-width);
  height: var(--control-height);
  margin: 0;
}
.build-composer.is-sticky textarea {
  min-width: 0;
  height: var(--control-height) !important;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  line-height: 24px;
}
.build-composer.is-floating textarea { white-space: pre; }
.build-composer.is-floating textarea.has-overflow-end {
  --prompt-end-fade: min(32px, 25%);
  --prompt-end-mask: linear-gradient(to right,
    #000 calc(100% - var(--prompt-end-fade)),
    rgba(0,0,0,.9) calc(100% - var(--prompt-end-fade) * .75),
    rgba(0,0,0,.5) calc(100% - var(--prompt-end-fade) * .5),
    rgba(0,0,0,.1) calc(100% - var(--prompt-end-fade) * .25),
    transparent);
  -webkit-mask-image: var(--prompt-end-mask);
  mask-image: var(--prompt-end-mask);
}
.build-composer.is-sticky [data-composer-feature="voice"] { opacity: var(--composer-controls-opacity); }
.build-composer.is-condensed [data-composer-feature="voice"] { visibility: hidden; pointer-events: none; }
.build-composer.is-sticky .build-model-trigger { width: 100%; max-width: none; }
.build-composer.is-sticky .build-icon-button,
.build-composer.is-sticky .build-send { border-radius: var(--composer-button-radius); }
.build-composer.is-sticky .build-message:not(:empty) {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 12px;
  right: 12px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(23, 23, 23, .1);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(23, 23, 23, .1);
}
.has-floating-composer .lp { padding-bottom: 100px; }
.has-footer-composer.has-floating-composer .lp { padding-bottom: 0; }
.build-footer-composer-slot { width: min(640px, calc(100% - 48px)); height: 96px; margin: 16px auto 0; }
.is-composer-at-footer .build-composer-rail { display: none; }
.is-composer-over-footer .build-composer-rail { opacity: 0; }
.build-composer-slot > .build-composer.is-sticky.is-over-footer {
  --text-strong-950: #f3f7f1;
  color-scheme: dark;
  background: #1b2b22;
  border: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.build-composer.is-over-footer textarea::placeholder { color: #b1bfb3; }
.build-composer.is-over-footer .build-icon-button { color: #f3f7f1; background: #2b3d31; border-color: #48604e; }
.build-composer.is-over-footer .build-icon-button[data-composer-feature="attachments"] { border: 0; box-shadow: none; }
.build-composer.is-over-footer .build-icon-button:hover { background: #354b3b; }
.build-composer.is-over-footer .build-model-trigger { color: #d5dfd5; }
.build-composer.is-over-footer .build-model-trigger:hover { color: #fff; }
.build-composer.is-over-footer .build-send { color: #101b15; background: #d7e8cb; }
.build-composer.is-over-footer .build-send:disabled { color: #c6d0c6; background: #35483c; }
.build-composer.is-over-footer .build-model-menu { background: #1b2b22; border-color: #48604e; }
.build-composer.is-over-footer .build-model-menu__title,
.build-composer.is-over-footer .build-model-group__title { color: #b1bfb3; }
.build-composer.is-over-footer .build-model-group + .build-model-group { border-color: #48604e; }
.build-composer.is-over-footer .build-model-option { color: #f3f7f1; }
.build-composer.is-over-footer .build-model-option:is(:hover, :focus-visible, [aria-checked="true"]) { background: #304536; }
.build-composer.is-over-footer .build-model-option__check { filter: brightness(0) invert(1); }
.build-composer.is-over-footer img[src$="/openai-brand.svg"] { filter: brightness(0) invert(1); }
.build-composer.is-over-footer .build-model-menu:hover { --model-scroll-thumb: rgba(211,231,213,.45); }

@media (max-width: 600px) {
  .build-hero:not(.build-hero--sheet) .build-hero__atmosphere {
    bottom: calc(-130px - var(--hero-handoff-space, 0px));
  }
  .build-hero__content > .build-composer-slot { margin-top: 30px; }
  .build-composer:not(.is-sticky) textarea { min-height: 56px; }
  .build-composer:not(.is-sticky) .build-composer__toolbar { flex-wrap: nowrap; gap: 4px; }
  .build-composer:not(.is-sticky) .build-composer__tools { min-width: 0; gap: 4px; }
  .build-composer:not(.is-sticky) .build-composer__tools:first-child { flex-shrink: 0; }
  .build-composer:not(.is-sticky) .build-model-picker { min-width: 0; }
  .build-composer:not(.is-sticky) .build-model-trigger { max-width: 96px; }
  .build-composer:not(.is-sticky) .build-send { flex-shrink: 0; width: 28px; height: 28px; }
  .build-composer.is-sticky .build-model-trigger { font-size: 12px; }
}
@media (max-width: 360px) {
  .build-composer [data-composer-feature="voice"] { display: none; }
  .build-composer:not(.is-sticky) .build-model-trigger { max-width: 80px; }
  .build-composer.is-sticky .build-model-name { opacity: var(--composer-controls-opacity); }
  .build-composer.is-condensed .build-model-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .build-composer-slot > .build-composer, .is-composer-docked .build-composer-rail { transition: none; }
}