/* Safari 17.x bug: `:scope:hover` and `:scope:not(...) [descendant]:hover`
   inside `@scope` don't match the scope root. Plain selectors outside
   work. See docs/BROWSER-COMPAT.md §3a. Same pattern used by input.css
   and textarea.css.

   Two rules — one on the host (paint the hover affordance), one on the
   inner textarea-ui's [slot="text"] (suppress the textarea-ui hover
   bg/border/color so it doesn't compound with the host's). */
chat-input-ui:not([disabled]):hover {
  background: var(--chat-input-bg-hover);
  border-color: var(--chat-input-border-hover);
  color: var(--chat-input-fg-hover);
}
chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
  background: transparent;
  border-color: transparent;
  color: inherit;
}

@scope (chat-input-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --chat-input-radius:          var(--a-radius-lg);
    --chat-input-textarea-px:     var(--a-space-3);
    --chat-input-textarea-pt:     var(--a-space-3);
    --chat-input-toolbar:         var(--a-space-2);
    --chat-input-toolbar-py:      var(--a-space-1);
    --chat-input-toolbar-gap:     var(--a-space-1);

    /* ── Colors ──
       chat-input-ui owns every color the composite paints — no inner
       state styling from textarea-ui leaks through. The block below
       (`Nested-control color isolation`) suppresses textarea-ui's
       hover / focus / disabled / placeholder treatments inside this
       @scope and re-paints them with these tokens. */
    --chat-input-bg:              var(--a-canvas-0);
    --chat-input-fg:              var(--a-fg);
    --chat-input-border:          var(--a-border-subtle);
    --chat-input-caret-color:     var(--a-fg-subtle);
    --chat-input-placeholder-fg:  var(--a-ui-text-placeholder);

    /* Hover — matches input-ui's affordance (subtle alpha lift on the
       canvas surface + slightly stronger border + brightened fg). The
       host paints this on `chat-input-ui:hover` (Safari 17.x bug
       requires the rule outside @scope — see top of file); the inner
       textarea-ui's own hover is suppressed there too so the alpha
       doesn't compound. */
    --chat-input-bg-hover:        var(--a-ui-bg-hover);
    --chat-input-border-hover:    var(--a-ui-border-hover);
    --chat-input-fg-hover:        var(--a-ui-text-hover);

    /* Disabled — host-level chrome (background, border, pointer-events)
       lives on `:scope[disabled]` below. Inner-text disabled color is
       owned here so the inner textarea-ui's `--a-ui-text-disabled` doesn't
       leak through. */
    --chat-input-bg-disabled:     transparent;
    --chat-input-border-disabled: var(--a-border-subtle);
    --chat-input-fg-disabled:     var(--a-ui-text-disabled);

    /* Canonical focus ring — chat-input is a *nested-control host*.
       See semantics.css FOCUS block + the nested-control pattern
       note below. The inner textarea-ui suppresses its own ring
       inside this @scope; the host paints the ring via
       :focus-within so it wraps BOTH the editable area and the
       toolbar as a single affordance. */
    --chat-input-focus-ring:         var(--a-focus-ring);
    --chat-input-focus-ring-invalid: var(--a-focus-ring-invalid);

    /* ── Image preview ── */
    --chat-input-image-size:      3rem;                /* 48px at d=1 */
    --chat-input-image-radius:    var(--a-radius-sm);
    --chat-input-image-border:    var(--a-border-subtle);
    --chat-input-preview-gap:     var(--a-space-2);
    --chat-input-preview-py:      var(--a-space-2);

    /* ── Preview remove button ── */
    --chat-input-remove-size:     var(--a-space-4);
    --chat-input-remove-offset:   var(--a-space-1);
    --chat-input-remove-bg:       var(--a-fg-muted);
    --chat-input-remove-fg:       var(--a-bg);
    --chat-input-remove-font:     var(--a-ui-tiny);

    /* ── Transition ── */
    --chat-input-duration:        var(--a-duration-fast);
    --chat-input-easing:          var(--a-easing);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--chat-input-border);
    border-radius: var(--chat-input-radius);
    background: var(--chat-input-bg);
    color: var(--chat-input-fg);
    /* Mirrors input-ui's transition surface so hover/focus/invalid
       interpolate together — bg + border + color + ring all snap if
       any one is left out. */
    transition:
      background  var(--chat-input-duration) var(--chat-input-easing),
      border-color var(--chat-input-duration) var(--chat-input-easing),
      color       var(--chat-input-duration) var(--chat-input-easing),
      box-shadow  var(--chat-input-duration) var(--chat-input-easing);
  }

  /* ── Nested-control focus pattern ────────────────────────────────────
     chat-input-ui is a composite whose "primary surface" is the
     combined textarea + toolbar, not the textarea alone. Focus should
     wrap the whole composite, not just the inner input. Two rules
     enforce that:

       1. `:scope:focus-within` paints the canonical ring around the
          composite via box-shadow (matches every other form control).
       2. The inner textarea-ui's own focus treatments are suppressed
          inside this @scope — the host owns the affordance.

     The @scope block's containment is the signal: no data attribute
     or explicit opt-in required. Any future composite that wants the
     same pattern drops its inner control(s) into its @scope and
     suppresses their focus rules with equivalent rules below.
     ─────────────────────────────────────────────────────────────── */
  :scope:focus-within {
    box-shadow: var(--chat-input-focus-ring);
  }
  :scope[aria-invalid="true"]:focus-within,
  :scope[error]:focus-within {
    box-shadow: var(--chat-input-focus-ring-invalid);
  }

  /* ── Nested-control color isolation ─────────────────────────────────
     The inner `textarea-ui` ships its own hover / focus / invalid /
     disabled / placeholder color rules wired to the generic `--a-ui-*`
     family. Inside chat-input-ui those would leak through and fight
     the host's chrome — bg flashes on hover, fg brightens on focus,
     a second focus ring paints alongside the composite ring, etc.
     Every textarea state below is explicitly suppressed and re-painted
     with the `--chat-input-*` tokens above so the composite is the
     sole owner of color across all states.

     Specificity bump: textarea.css uses
     `textarea-ui:not([disabled]) [slot="text"]:STATE` (0,3,0). Prefixing
     with `:scope` adds (0,1,0) → (0,4,1), which wins. The :hover rule
     in textarea.css lives outside its @scope (Safari 17.x workaround)
     but uses the same shape; same specificity boost applies. */

  /* Rest — chrome neutralization (no border, no bg) + chat layout +
     `color: inherit` so the inner inherits the host's color (which IS
     transitioned on the `:scope` rule above). All state colors are then
     owned at the host level — disabled / hover / focus all flow into
     the inner via inheritance and animate together with the chrome.
     The second selector keeps the transparent bg even when the inner
     textarea-ui carries [disabled] (streaming / submit lock) —
     textarea.css's `:scope[disabled] [slot="text"]` (0,3,0) would
     otherwise paint --a-ui-bg-disabled. */
  textarea-ui [slot="text"],
  :scope textarea-ui[disabled] [slot="text"] {
    border: none;
    background: var(--chat-input-bg-disabled);  /* transparent at default */
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    max-height: 8rem;
    padding: var(--chat-input-textarea-pt) var(--chat-input-textarea-px) 0;
  }

  /* Hover lives outside this @scope (top of file) — Safari 17.x bug
     prevents `:scope … [descendant]:hover` from matching here. */

  /* Focus — suppress the inner ring (host paints via :focus-within)
     and the inner color shift to fg-hover so the host's color cascades. */
  :scope textarea-ui:not([disabled]) [slot="text"]:focus {
    border: none;
    box-shadow: none;
    color: inherit;
  }

  /* Invalid focus — textarea.css would paint --a-focus-ring-invalid on
     the inner [slot="text"] when the inner control carries
     [aria-invalid="true"] or [error]. Host owns the invalid ring via
     :scope[aria-invalid]:focus-within above; suppress the inner one. */
  :scope textarea-ui:not([disabled])[aria-invalid="true"] [slot="text"]:focus,
  :scope textarea-ui:not([disabled])[error] [slot="text"]:focus {
    box-shadow: none;
  }

  /* Placeholder — textarea.css paints --a-ui-text-placeholder on the
     `::before` pseudo. Override with the chat-input token so the
     composite controls the placeholder treatment. */
  :scope textarea-ui [slot="text"][data-empty]::before {
    color: var(--chat-input-placeholder-fg);
  }

  /* Toolbar */
  [slot="toolbar"] {
    display: flex;
    align-items: center;
    gap: var(--chat-input-toolbar-gap);
    padding: var(--chat-input-toolbar);
  }

  /* Model picker */
  [slot="model"] [slot="caret"] {
    width: 0.75em;
    height: 0.75em;
    color: var(--chat-input-caret-color);
  }

  /* Attach button */
  [slot="attach"] {
    flex-shrink: 0;
  }

  /* Send button — pushed to the end */
  [slot="send"] {
    margin-inline-start: auto;
  }

  /* Image preview strip */
  [slot="preview"] {
    display: flex;
    gap: var(--chat-input-preview-gap);
    padding: var(--chat-input-preview-py) var(--chat-input-textarea-px);
    overflow-x: auto;
  }

  [slot="preview"][hidden] { display: none; }

  [slot="preview"] [data-preview-item] {
    position: relative;
    flex-shrink: 0;
  }

  [slot="preview"] img {
    width: var(--chat-input-image-size);
    height: var(--chat-input-image-size);
    object-fit: cover;
    border-radius: var(--chat-input-image-radius);
    border: 1px solid var(--chat-input-image-border);
  }

  [slot="preview"] [data-preview-remove] {
    position: absolute;
    top: calc(-1 * var(--chat-input-remove-offset));
    right: calc(-1 * var(--chat-input-remove-offset));
    width: var(--chat-input-remove-size);
    height: var(--chat-input-remove-size);
    border-radius: 50%;
    border: none;
    background: var(--chat-input-remove-bg);
    color: var(--chat-input-remove-fg);
    font-size: var(--chat-input-remove-font);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* Disabled / streaming — host-level chrome. `color` cascades to the
     inner [slot="text"] via inheritance (the inner uses `color: inherit`
     in the rules above), so the disabled-fg shift transitions on the
     host's `color` transition rather than snapping. */
  :scope[disabled] {
    background: var(--chat-input-bg-disabled);
    border-color: var(--chat-input-border-disabled);
    color: var(--chat-input-fg-disabled);
    pointer-events: none;
  }
}
