/* =========================================================
   ZAR AI v2 — COMPOSER
   Kept deliberately uncluttered: text input, disabled
   attachment affordance (clearly not implemented), send.
   No Cities controls, no model chip (the model selector already
   lives in the panel header — avoid redundant controls here).
========================================================= */

.zar-v2-composer {
  /* Positioning context for the shared input-assist suggestion chip
     (Scripts/.../input_assist/input_assist_ui.ts) — its mount-point
     lookup falls back to the textarea's own parentElement (this
     element) when neither of its two known v1 wrapper classes is
     present; matches .zar-input-wrapper's own `position: relative`
     in Styles/modes/zar/ui/input_assist_ts.css so its absolutely-
     positioned layer anchors here instead of some further ancestor. */
  position: relative;

  display: flex;
  align-items: flex-end;
  gap: var(--zar-v2-space-2);

  padding: var(--zar-v2-space-2);
  border-radius: var(--zar-v2-radius-lg);
  border: 1px solid var(--zar-v2-border-strong);
  background: var(--zar-v2-bg-surface);

  transition: border-color var(--zar-v2-duration-fast) var(--zar-v2-ease-standard),
              box-shadow var(--zar-v2-duration-fast) var(--zar-v2-ease-standard);
}

.zar-v2-composer:focus-within {
  border-color: var(--zar-v2-border-focus);
  box-shadow: var(--zar-v2-focus-ring);
}

.zar-v2-composer__attach {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--zar-v2-radius-sm);
  color: var(--zar-v2-text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}
.zar-v2-composer__attach svg { width: 17px; height: 17px; }

.zar-v2-composer__input {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  border: 0;
  background: transparent;
  padding: var(--zar-v2-space-2) var(--zar-v2-space-1);
  max-height: 160px;
  font-size: var(--zar-v2-font-size-base);
  line-height: var(--zar-v2-line-height-snug);
  color: var(--zar-v2-text-primary);
}
.zar-v2-composer__input::placeholder { color: var(--zar-v2-text-muted); }
.zar-v2-composer__input:focus { outline: none; box-shadow: none; }

.zar-v2-composer__send {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--zar-v2-radius-circle);
  background: var(--zar-v2-accent);
  color: var(--zar-v2-text-on-accent);
  transition: transform var(--zar-v2-duration-fast) var(--zar-v2-ease-standard),
              opacity var(--zar-v2-duration-fast) var(--zar-v2-ease-standard);
}
.zar-v2-composer__send svg { width: 15px; height: 15px; }
.zar-v2-composer__send:hover:not(:disabled) { transform: translateY(-1px); }
.zar-v2-composer__send:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 2026-09 refinement: shrunk from a full-width hint row to a
   barely-there micro-label — a design prototype note, not a
   permanent piece of interface chrome. */
.zar-v2-composer__hint {
  margin-top: 3px;
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.01em;
  color: var(--zar-v2-text-muted);
  opacity: 0.55;
}