/* ==========================================================================
   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);
}

/* ── Code Copy / Action Buttons (legacy support) ─────────────────────────── */
.niwa-copy-code-btn,
.niwa-bubble-action-btn {
  border: none;
  border-radius: var(--niwa-radius-full);
  background: var(--niwa-color-primary);
  color: #FFFFFF;
  padding: 10px 16px;
  font-size: var(--niwa-font-size-sm);
  font-weight: var(--niwa-font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(45, 90, 61, 0.2);
  transition:
    transform var(--niwa-transition-fast),
    box-shadow var(--niwa-transition-fast),
    background var(--niwa-transition-fast);
}

.niwa-widget .niwa-copy-code-btn,
.niwa-copy-code-btn {
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.92);
  color: var(--niwa-color-text-primary);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

.niwa-copy-code-btn:hover,
.niwa-bubble-action-btn:hover {
  transform: translateY(-1px);
  background: var(--niwa-color-primary-active);
  box-shadow: 0 14px 24px rgba(45, 90, 61, 0.24);
}

.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.98);
  color: var(--niwa-color-text-primary);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
  outline: none;
}

.niwa-widget .niwa-copy-code-btn:active,
.niwa-copy-code-btn:active {
  transform: translateY(0);
  background: rgba(248, 247, 244, 0.98);
  color: var(--niwa-color-text-primary);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10);
}

[data-niwa-theme="dark"] .niwa-copy-code-btn,
.niwa-widget[data-niwa-theme="dark"] .niwa-copy-code-btn {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

[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.18);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32);
}

/* ── 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);
  }
}