/* ==========================================================================
   Niwa Lead Form — Card Mode + Completion styles
   ---------------------------------------------------------------------------
   The card is mounted as the LAST CHILD of the chat panel
   (.niwa-morph__chat / .niwa-center__chat). It appears below the message
   stream but above the pill (which sits outside the chat panel). Because
   the chat panel fades with the flyout, the card hides automatically when
   the morph collapses — no artifacts above the pill.

   Scoping:
     .niwa-morph__chat.niwa-lf-host-active   → flyout chat panel
     .niwa-center__chat.niwa-lf-host-active  → centerstage chat panel
     .niwa-lf-card                           → card itself
     .niwa-lf-completion                     → completion block
     .niwa-lf-completion-bubble              → chat-mode completion
   ========================================================================== */

/* -- Card: core frame --------------------------------------------------- */
/* Spans the full width of the chat panel so the card reads as an extension
   of the flyout, not a floating sub-panel. `flex: 1 1 auto` lets the card
   share the chat panel's vertical space 50/50 with `.niwa-morph__body` (both
   siblings carry `flex: 1`), so the card occupies roughly half the flyout
   height — enough room to present the question in a large, focused format
   at the top while keeping the composer comfortably within reach below. */
.niwa-lf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: var(--niwa-color-bubble-bot, rgba(255, 255, 255, 0.25));
  color: var(--niwa-color-bubble-bot-text, #374151);
  border: 0;
  /* Only the top corners round — the card sits flush with the flyout's
     bottom edge, which already carries the morph's own radius. Matching
     `.niwa-morph--open` at `--niwa-radius-lg` keeps the radii consistent. */
  border-radius: var(--niwa-radius-lg, 18px) var(--niwa-radius-lg, 18px) 0 0;
  overflow: hidden;
  animation: niwa-lf-card-slide-up 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
  flex: 1 1 auto;
  min-height: 0;
}

/* While the card is mounted, hide the native pill composer so the card
   *replaces* the input bar instead of sitting above it. The card provides
   its own composer (native-style textarea + send) inside its body. */
body.niwa-lf-card-active .niwa-widget .niwa-morph__pill,
body.niwa-lf-card-active .niwa-widget .niwa-center__pill {
  display: none !important;
}

@keyframes niwa-lf-card-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- Progress bar (2px accent line, pinned to the top) ----------------- */
.niwa-lf-card__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--niwa-color-surface-overlay, rgba(0, 0, 0, 0.06));
  overflow: hidden;
  z-index: 3;
}

.niwa-lf-card__progress-fill {
  height: 100%;
  background: var(--niwa-color-primary, #2D5A3D);
  width: 0%;
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Body + transitions ------------------------------------------------- */
/* Body fills the card so the question pins to the top and the composer
   sits naturally below it with flex gap breathing room. */
.niwa-lf-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--niwa-space-lg, 24px) var(--niwa-space-md, 16px) var(--niwa-space-md, 16px);
  gap: var(--niwa-space-md, 16px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.niwa-lf-card__body--enter {
  animation: niwa-lf-body-enter 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.niwa-lf-card__body--leaving {
  opacity: 0;
  transform: translateY(-6px);
}

@keyframes niwa-lf-body-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- Question header --------------------------------------------------- */
/* Centered both vertically and horizontally within the card body.
   `margin-block: auto` lets the question absorb the free space above AND
   below itself — combined with the composer's natural bottom flow (no
   `margin-top: auto` anymore), the question lands at the vertical center
   while the composer stays docked at the bottom edge. `justify-content:
   center` centers the number+label pair horizontally. */
.niwa-lf-card__question {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-block: auto;
  text-align: center;
  max-width: 100%;
}

.niwa-lf-card__number {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--niwa-color-primary, #2D5A3D);
  flex: 0 0 auto;
  min-width: 24px;
}

.niwa-lf-card__label {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--niwa-color-bubble-bot-text, #374151);
}

/* -- Input host -------------------------------------------------------- */
/* Sits at the bottom by virtue of document order — the question above
   carries `margin-block: auto`, which absorbs all free space and pushes
   the input-host flush against the body's bottom padding. No auto margin
   needed here anymore (would compete with the question's and throw off
   centering). */
.niwa-lf-card__input-host {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}

.niwa-lf-card__hint {
  font-size: 12px;
  color: var(--niwa-color-text-secondary, #6b7280);
  padding-bottom: 2px;
  font-style: italic;
}

/* -- Native-style composer inside the card ---------------------------- */
/* Wrapper mirrors `.niwa-morph__input` flex layout: the textarea flexes,
   the round 32px send button is pinned on the right. Typography, border,
   and send-button skin come from the frontend shield rules on
   `.niwa-morph__textarea` / `.niwa-morph__send`, so the composer is
   visually identical to the native pill input — no custom re-skin. */
.niwa-lf-card__native-input {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.niwa-lf-card__native-input--multiline {
  align-items: flex-end;
}

/* The textarea inside the card should flex to fill the row; the shield CSS
   gives it its fixed typography / sizing (22px line-height, 96px max). */
.niwa-lf-card__native-input .niwa-morph__textarea {
  flex: 1 1 auto;
  min-width: 0;
}

/* Multiline (textarea) variant — let it grow up to ~120px. Still inherits
   the shield's font + color tokens. */
.niwa-lf-card__native-input--multiline .niwa-morph__textarea {
  resize: vertical;
  min-height: 56px;
  max-height: 120px;
}

/* Submit button's shape (32px dark circle, arrow SVG, hover opacity) is
   fully handled by `.niwa-morph__send` shield rules — no overrides here. */
.niwa-lf-card__native-input .niwa-morph__send {
  flex: 0 0 32px;
}

/* -- Multi-choice Continue button -------------------------------------- */
/* Solid filled variant of `.niwa-action` — affirmative primary action.
   Used only after choice_multi to confirm the selection set. */
.niwa-widget .niwa-lf-card__continue,
.niwa-lf-card__continue {
  align-self: flex-end;
  background: var(--niwa-color-primary, #2D5A3D);
  color: var(--niwa-color-text-inverse, #fff);
  border-color: var(--niwa-color-primary, #2D5A3D);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.niwa-widget .niwa-lf-card__continue:hover,
.niwa-lf-card__continue:hover {
  background: var(--niwa-color-primary, #2D5A3D);
  color: var(--niwa-color-text-inverse, #fff);
  border-color: var(--niwa-color-primary, #2D5A3D);
  filter: brightness(1.08);
}

/* -- Choice buttons (reuse .niwa-action recommendation-pill style) ---- */
/* Choice buttons inherit `.niwa-action` styling (glass outline pill with
   neutral text, `assets/css/niwa-actions.css`). We only override layout
   (container wrap) and the selected state for choice_multi. */
.niwa-lf-card__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--niwa-space-sm, 8px);
}

/* Selected state for multi-choice: invert the glass pill to solid primary
   so selections read clearly against the neutral unselected pills. */
.niwa-widget .niwa-lf-card__choice--active,
.niwa-lf-card__choice--active {
  background: var(--niwa-color-primary, #2D5A3D);
  color: var(--niwa-color-text-inverse, #fff);
  border-color: var(--niwa-color-primary, #2D5A3D);
}

.niwa-widget .niwa-lf-card__choice--active:hover,
.niwa-lf-card__choice--active:hover {
  background: var(--niwa-color-primary, #2D5A3D);
  color: var(--niwa-color-text-inverse, #fff);
  border-color: var(--niwa-color-primary, #2D5A3D);
  filter: brightness(1.08);
}

[data-niwa-theme="dark"] .niwa-lf-card__choice--active {
  background: var(--niwa-color-primary, #2D5A3D);
  color: var(--niwa-color-text-inverse, #fff);
  border-color: var(--niwa-color-primary, #2D5A3D);
}

/* -- Error + shake ----------------------------------------------------- */
.niwa-lf-card__error {
  font-size: 12.5px;
  color: #c0392b;
  padding-top: 0;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 220ms ease, opacity 220ms ease, padding-top 220ms ease;
}

.niwa-lf-card__error--visible {
  padding-top: 8px;
  max-height: 60px;
  opacity: 1;
}

[data-niwa-theme="dark"] .niwa-lf-card__error {
  color: #ff9b9b;
}

.niwa-lf-card--shake {
  animation: niwa-lf-shake 420ms cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes niwa-lf-shake {
  10%, 90%      { transform: translateX(-1px); }
  20%, 80%      { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60%      { transform: translateX(5px); }
}

/* -- Completion (chat bubble) ----------------------------------------- */
/* Both chat-mode and card-mode now hand off completion to a regular bot
   bubble in the chat body (card mode unmounts itself after rendering).
   The media sits above the text inside the bubble. */
.niwa-lf-completion-bubble .niwa-lf-completion-media {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 10px;
}