/* ============================================================
   Shared chat-input component — the rounded pill composer with a
   borderless text field + circular gradient up-arrow send button.
   Single source of truth for BOTH the Luna chat (index.html) and the
   Requirements assistant (requirements.html) so they can't drift.

   Reuse: add the classes to your markup —
     <div class="lb-input-area">
       <div class="lb-input-row">
         <textarea class="lb-input-field" ...></textarea>
         <button   class="lb-input-send"  ...>Send</button>
       </div>
     </div>
   and <link> this file. Keep your own id on the field/button for JS.

   Values are the EFFECTIVE styles from Luna's (index.html) layered chat
   composer, flattened. `!important` is used deliberately: index.html still
   carries ~18 scattered, id-scoped legacy rules for #question/#send-btn/
   .input-row/.input-area; rather than ripping those out of the live page,
   this component overrides them so it is authoritative on both pages. The
   inline rules can be removed in a later cleanup with no visual change.
   ============================================================ */

.lb-input-area {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  flex-shrink: 0 !important;
  background: var(--color-bg) !important;
  padding: var(--space-3) 0 var(--space-6) !important;
}
/* Fade above the composer so messages don't hard-clip into it. */
.lb-input-area::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 100% !important;
  height: var(--space-6) !important;
  background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 100%) !important;
  pointer-events: none !important;
}

.lb-input-row {
  display: flex !important;
  align-items: center !important;            /* vertically centre field + button */
  gap: var(--space-2) !important;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out) !important;
}
.lb-input-row:focus-within {
  border-color: var(--color-border-strong) !important;
  box-shadow: var(--shadow-md) !important;
}

.lb-input-field {
  flex: 1 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: var(--color-text) !important;
  font: inherit !important;
  font-size: var(--text-md) !important;
  line-height: var(--leading-snug) !important;
  resize: none !important;
  min-height: 24px !important;
  max-height: 160px !important;
  padding: var(--space-2) var(--space-3) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.lb-input-field::placeholder { color: var(--color-text-subtle) !important; }
.lb-input-field:focus { outline: none !important; }

/* Circular gradient send button. Text ("Send"/"Stop") hidden via font-size:0;
   the up-arrow is an SVG mask overlay (same in both states). */
.lb-input-send {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: #fff !important;
  background: var(--gradient-brand) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--shadow-sm) !important;
  transition: filter var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out) !important;
}
.lb-input-send::after {
  content: '' !important;
  width: 16px !important;
  height: 16px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='19' x2='12' y2='5'/><polyline points='5 12 12 5 19 12'/></svg>") center / contain no-repeat !important;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='19' x2='12' y2='5'/><polyline points='5 12 12 5 19 12'/></svg>") center / contain no-repeat !important;
}
.lb-input-send:hover:not(:disabled)  { filter: brightness(1.05) !important; }
.lb-input-send:active:not(:disabled) { filter: brightness(0.95) !important; }
.lb-input-send:disabled {
  background: var(--color-surface-2) !important;
  color: var(--color-text-subtle) !important;
  cursor: not-allowed !important;
  filter: none !important;
  box-shadow: none !important;
}
/* CSS-driven dim when the field is empty (no JS dependency). */
.lb-input-row:has(.lb-input-field:placeholder-shown) .lb-input-send {
  background: var(--color-surface-2) !important;
  color: var(--color-text-subtle) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}