/* NEW SESSION hero (figma Input_Bottom 75:8208): fish + title, workspace chip
   above the shared InputBar card. The input itself is InputBar — only stack
   geometry and the chip live here. */

.root {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  padding: 0 24px;
}

/* Cap matches the InputBar card. Glow may paint past the sides. */
.stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* figma 75:8208: 12 between title block / workspace / card. */
  gap: 12px;
  width: 100%;
  max-width: var(--dsh-composer-card-max-width);
  overflow: visible;
}

/* figma 34:10411: fish + title, gap 10, centered; 26/32 wt500. The preview
   badge is a product addition outside that source: a mono superscript pill
   riding the title's top-right. */
.headline {
  display: grid;
  grid-template-columns: 34px auto auto;
  column-gap: 10px;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 32px;
  font-weight: 500;
  color: var(--dsw-alias-label-primary);
}

.headlineText {
  grid-row: 1;
  grid-column: 2;
}

.previewBadge {
  grid-row: 1;
  grid-column: 3;
  align-self: start;
  margin-top: 2px;
  margin-left: -3px;
  padding: 1px 7px 0;
  border: 1px solid var(--dsw-alias-interactive-bg-hover);
  border-radius: 24px;
  background: var(--dsw-alias-state-business-tertiary);
  color: var(--dsw-alias-label-primary-bluish);
  font-family: var(--ds-font-family-code);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
}

/* Keep hover detection on a stationary box while the mark moves within it. */
.fishHitbox {
  grid-row: 1;
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Keep the hero mark in the same primary ink as its headline. */
.fish {
  color: var(--dsw-alias-label-primary);
  transform-origin: 50% 60%;
}

@keyframes hero-fish-swim {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }

  35% {
    transform: translate(-1px, -1px) rotate(-5deg);
  }

  70% {
    transform: translate(1px, 0) rotate(3deg);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fishHitbox:hover .fish {
    animation: hero-fish-swim var(--ds-transition-duration-slow) var(--ds-ease-in-out);
  }
}

/* Workspace row sits 12px above the input card (figma y80 → y112). The blue
   glow lives with the owner (ConversationRoot .heroGlow) so it can center on
   the input card. */
.body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow: visible;
}

.body > * {
  position: relative;
  z-index: 1;
}

/* Must beat `.body > :not(.glow)` specificity so the open Menu (and its
   right-hand submenu) paints above the InputBar card. */
.body > .workspaceRow {
  z-index: 10;
  display: flex;
  align-items: center;
  min-width: 0;
  /* figma 75:8208 workspace row: px 8 above the card. */
  padding-left: 8px;
}

/* Folder + label + chevron — transparent at rest; fill only on hover / open. */
.workspace {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: min(100%, 360px);
  min-height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 16px;
  background: transparent;
  color: var(--dsw-alias-label-primary);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
}

.workspace:not(:disabled):hover,
.workspace[aria-expanded='true'] {
  background: var(--dsw-alias-interactive-bg-hover);
}

/* Locked form (bound guidance state): a static echo — no hover feedback, no
   pointer affordance; label keeps full contrast. */
.workspace:disabled {
  cursor: default;
}

.folder {
  flex: none;
  color: var(--dsw-alias-label-primary);
}

.workspaceLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chevron {
  flex: none;
  color: var(--dsw-alias-label-caption);
}

/* Dialog field: 44 tall on the modal's 332 content column, r22, hairline
   border, pad 14/7, 14/22 wt400 primary text, caption placeholder. Focus
   keeps the resting border (design shows no focus ring). */
.modalInput {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 7px 14px;
  border: 1px solid var(--dsw-alias-border-l2);
  border-radius: 22px;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--dsw-alias-label-primary);
}

.modalInput::placeholder {
  color: var(--dsw-alias-label-caption);
}

.modalInput:disabled {
  color: var(--dsw-alias-label-dimmed);
}

.modalAction {
  min-width: 72px;
}

.modalError {
  margin-top: 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--dsw-alias-state-error-primary);
}
