/* ==========================================================================
   Niwa Chatbot – Input Bar & Forms
   ---------------------------------------------------------------------------
   Text composer area at the bottom of the flyout.
   Contains: textarea, send button, attachment button.
   Also includes email/phone capture form styles.
   TOKENS: --niwa-input-bar-height, --niwa-color-primary, --niwa-color-border-*
   ========================================================================== */

/* ==========================================================================
   Flyout Input Bar (for non-morph variants)
   ========================================================================== */

.niwa-input-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--niwa-space-sm);
  padding: var(--niwa-space-md) var(--niwa-space-lg);
  background: transparent;
  border-top: none;
  min-height: var(--niwa-input-bar-height);
}

/* ── Textarea Wrapper ───────────────────────────────────────────────────── */
.niwa-input-bar__field {
  flex: 1;
  display: flex;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.25);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--niwa-radius-xl);
  padding: var(--niwa-space-sm) var(--niwa-space-lg);
  transition:
    border-color var(--niwa-transition-fast),
    box-shadow var(--niwa-transition-fast);
}

/* Dark theme input field */
[data-niwa-theme="dark"] .niwa-input-bar__field {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

.niwa-input-bar__field:focus-within {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

[data-niwa-theme="dark"] .niwa-input-bar__field:focus-within {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

/* ── Textarea ───────────────────────────────────────────────────────────── */
.niwa-input-bar__textarea {
  flex: 1;
  min-height: 22px;
  max-height: 120px;
  resize: none;
  color: var(--niwa-color-text-primary);
  font-size: var(--niwa-font-size-md);
  line-height: var(--niwa-line-height-normal);
  background: transparent;
}

.niwa-input-bar__textarea::placeholder {
  color: var(--niwa-color-text-tertiary);
}

/* ── Attachment Button ──────────────────────────────────────────────────── */
.niwa-input-bar__attachment {
  width: 36px;
  height: 36px;
  border-radius: var(--niwa-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--niwa-color-text-secondary);
  transition:
    color var(--niwa-transition-fast),
    background var(--niwa-transition-fast);
  flex-shrink: 0;
}

.niwa-input-bar__attachment:hover {
  color: var(--niwa-color-text-primary);
  background: var(--niwa-color-surface-overlay);
}

.niwa-input-bar__attachment svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Send Button ────────────────────────────────────────────────────────── */
.niwa-input-bar__send {
  width: 38px;
  height: 38px;
  border-radius: var(--niwa-radius-full);
  background: var(--niwa-color-primary);
  color: var(--niwa-color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background var(--niwa-transition-fast),
    transform var(--niwa-transition-fast),
    opacity var(--niwa-transition-fast);
}

.niwa-input-bar__send:hover {
  background: var(--niwa-color-primary-active);
  transform: scale(1.05);
}

.niwa-input-bar__send:active {
  transform: scale(0.95);
}

.niwa-input-bar__send svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Disabled State (empty input) ───────────────────────────────────────── */
.niwa-input-bar__send--disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}


/* ==========================================================================
   Email / Phone Capture Forms
   ---------------------------------------------------------------------------
   Used when the bot requests email or phone input.
   Styled with new design tokens, adapted from old niwa-inputs.css forms.

   STRUCTURE:
     .niwa-form
       .niwa-form__input         (text input)
       .niwa-form__input--email  (email variant)
       .niwa-form__input--phone  (phone variant)
       .niwa-form__submit        (submit button)
       .niwa-form__error         (validation message)
   ========================================================================== */

.niwa-form {
  display: flex;
  align-items: center;
  gap: var(--niwa-space-md);
  padding: var(--niwa-space-md) var(--niwa-space-lg);
  position: relative;
}

.niwa-form__input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 56px 0 var(--niwa-space-lg);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--niwa-radius-full);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--niwa-color-text-primary);
  font-family: var(--niwa-font-family);
  font-size: var(--niwa-font-size-md);
  line-height: 48px;
  letter-spacing: -0.01em;
  outline: none;
  transition:
    background var(--niwa-transition-fast),
    border-color var(--niwa-transition-fast),
    box-shadow var(--niwa-transition-fast);
}

.niwa-form__input::placeholder {
  color: var(--niwa-color-text-secondary);
}

.niwa-form__input:focus {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

/* Dark theme form input */
[data-niwa-theme="dark"] .niwa-form__input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--niwa-color-text-primary);
}

[data-niwa-theme="dark"] .niwa-form__input:focus {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

/* Email variant — slightly wider padding for icon */
.niwa-form__input--email {
  padding-left: var(--niwa-space-lg);
}

/* Phone variant */
.niwa-form__input--phone {
  padding-left: var(--niwa-space-lg);
}

/* ── Submit Button ──────────────────────────────────────────────────────── */
.niwa-form__submit {
  position: absolute;
  top: 50%;
  right: calc(var(--niwa-space-lg) + 6px);
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: var(--niwa-color-primary);
  color: var(--niwa-color-text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform var(--niwa-transition-fast),
    background var(--niwa-transition-fast),
    opacity var(--niwa-transition-fast);
}

.niwa-form__submit:hover {
  background: var(--niwa-color-primary-active);
  transform: translateY(calc(-50% - 1px));
}

.niwa-form__submit:active {
  transform: translateY(-50%) scale(0.96);
}

.niwa-form__submit svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Validation Error ───────────────────────────────────────────────────── */
.niwa-form__error {
  position: absolute;
  left: calc(var(--niwa-space-lg) + var(--niwa-space-lg));
  right: 60px;
  bottom: 2px;
  font-size: var(--niwa-font-size-xs);
  line-height: var(--niwa-line-height-tight);
  color: var(--niwa-color-error);
}

/* ==========================================================================
   Inline Capture Form (modern — lives inside .niwa-morph__input / .niwa-center__input)
   ---------------------------------------------------------------------------
   When the capture form replaces the chat composer, the wrapper must be a
   flat flex row that visually matches the chat send row:
     - transparent, no extra padding/border/radius
     - 22px flat text input (styled via niwa-morph__textarea / niwa-center__textarea)
     - 32px dark-circle submit button (styled via niwa-morph__send / niwa-center__send)
   These rules neutralize the legacy pill styling defined above.
   ========================================================================== */

.niwa-form--inline {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 4px;
  min-width: 0;
  /* !important guards against the @media (max-width: 640px) .niwa-form
     padding reset below which would otherwise re-introduce 12px of horizontal
     padding on narrow viewports and cause the capture input to diverge
     from the native morph/center chat composer. */
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

/* Input: let the native chat textarea styles win (they carry !important already).
   flex-basis:0 + explicit size=1 attr neutralizes the <input> intrinsic size
   (default size=20 → ~160px) so the capture input grows from 0 like native textarea. */
.niwa-widget .niwa-form--inline .niwa-form__input {
  flex: 1 1 0% !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 96px !important;
  padding: 4px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  line-height: 22px !important;
  letter-spacing: -0.14px;
  font-size: 14px !important;
}

/* Submit: reset legacy absolute pill positioning so native send classes win;
   flex:0 0 32px prevents the button from shrinking when the pill narrows. */
.niwa-widget .niwa-form--inline .niwa-form__submit {
  flex: 0 0 32px !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
}

.niwa-widget .niwa-form--inline .niwa-form__submit:hover {
  transform: none !important;
}

.niwa-widget .niwa-form--inline .niwa-form__submit:active {
  transform: scale(0.95) !important;
}

.niwa-widget .niwa-form--inline .niwa-form__submit svg {
  width: 32px;
  height: 32px;
  display: block;
}

/* Inline error floats just above the input row (inside the overflow of the pill). */
.niwa-form--inline .niwa-form__error {
  position: absolute;
  left: 8px;
  right: 44px;
  bottom: calc(100% + 4px);
  font-size: var(--niwa-font-size-xs);
  line-height: var(--niwa-line-height-tight);
  color: var(--niwa-color-error);
  pointer-events: none;
}

/* ── Code Copy / Action Buttons (legacy support) ─────────────────────────── */
.niwa-copy-code-btn,
.niwa-bubble-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  border: none;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.25);
  color: #374151;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: var(--niwa-font-weight-medium);
  line-height: 1;
  font-family: var(--niwa-font-family);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  transition:
    transform var(--niwa-transition-fast),
    background var(--niwa-transition-fast),
    color var(--niwa-transition-fast),
    border-color var(--niwa-transition-fast);
}

.niwa-widget .niwa-copy-code-btn,
.niwa-copy-code-btn {
  /* Lighter than the bot bubble (0.25) — matches the user-message bubble (0.55) so it stands out. */
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.55);
  color: #374151;
  box-shadow: none;
}

.niwa-copy-code-btn:hover,
.niwa-bubble-action-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.45);
  color: #111827;
  border-color: rgba(0, 0, 0, 0.25);
}

.niwa-widget .niwa-copy-code-btn:hover,
.niwa-widget .niwa-copy-code-btn:focus-visible,
.niwa-copy-code-btn:hover,
.niwa-copy-code-btn:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.72);
  color: #111827;
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: none;
  outline: none;
}

.niwa-widget .niwa-copy-code-btn:active,
.niwa-copy-code-btn:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.82);
  color: #111827;
  box-shadow: none;
}

[data-niwa-theme="dark"] .niwa-copy-code-btn,
.niwa-widget[data-niwa-theme="dark"] .niwa-copy-code-btn {
  /* Lighter than the bot bubble (rgba(0,0,0,0.5)) — echoes the user-message bubble tint. */
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.10);
  color: #E8E6E1;
  box-shadow: none;
}

[data-niwa-theme="dark"] .niwa-copy-code-btn:hover,
[data-niwa-theme="dark"] .niwa-copy-code-btn:focus-visible,
.niwa-widget[data-niwa-theme="dark"] .niwa-copy-code-btn:hover,
.niwa-widget[data-niwa-theme="dark"] .niwa-copy-code-btn:focus-visible {
  background: rgba(255, 255, 255, 0.20);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .niwa-form {
    padding: var(--niwa-space-md) var(--niwa-space-md);
  }

  .niwa-form__submit {
    right: calc(var(--niwa-space-md) + 6px);
  }
}

/* iOS Safari auto-zooms the viewport when a focused field has font-size < 16px,
   which in the mobile fullscreen chat pushes the window out of frame. Force all
   chat text fields to 16px at the mobile breakpoint so iOS leaves the viewport
   alone. Desktop keeps the 14px design. (The live morph/center textarea also
   sets this inline in morph-controller.js since inline !important wins; this
   block covers the lead-form card textarea, capture inputs, and the pre-JS
   first paint.) */
@media (max-width: 782px) {
  .niwa-widget .niwa-morph__textarea,
  .niwa-widget .niwa-center__textarea,
  .niwa-widget .niwa-form__input,
  .niwa-widget .niwa-form--inline .niwa-form__input {
    font-size: 16px !important;
  }
}
