/*
PromptInput

A form holding one control-tier box (a fieldset, so disabled disables
everything in it): a header of attachment chips, a textarea that grows
from --prompt-input-min-rows to --prompt-input-max-rows, and a footer of
tools with the submit at the end. The drop overlay covers the box while
files are dragged over it; it never takes space.

  form.prompt-input[data-disabled]
    fieldset.prompt-input-box[data-dragging][data-pending]
      .prompt-input-header          chips (.attachments) + slot "header"
      .prompt-input-textarea
      .prompt-input-footer          .prompt-input-tools ... .prompt-input-submit[data-status]
      .prompt-input-drop
*/

@layer components {

.prompt-input {
  width:     100%;
  min-width: 0;
}

.prompt-input-box {
  position:       relative;
  display:        flex;
  flex-direction: column;
  min-width:      0;
  margin:         0;
  padding:        0;
  border:         var(--control-border-width) solid var(--control-border);
  border-radius:  var(--radius-surface);
  background:     var(--control-bg);
  box-shadow:     var(--control-shadow);
  overflow:       hidden;
  transition:     border-color var(--duration-fast) var(--ease-out),
                  box-shadow var(--duration-fast) var(--ease-out);
}

.prompt-input-box:hover:not(:disabled) {
  border-color: var(--rule-strong);
}

.prompt-input-box:has(.prompt-input-textarea:focus-visible) {
  border-color: var(--focus);
  box-shadow:   var(--focus-ring);
}

.prompt-input-box:disabled {
  background: var(--bg-soft);
  cursor:     not-allowed;
}

.prompt-input-box:disabled > :not(.prompt-input-drop) {
  opacity: var(--opacity-disabled);
}

/* Header */

/* Many chips scroll inside the header (about three rows), so the composer
   keeps its size in a fixed-height chat column. */
.prompt-input-header {
  display:             flex;
  flex-wrap:           wrap;
  gap:                 var(--space-1);
  padding:             var(--space-2) var(--space-2) 0;
  max-block-size:      var(--prompt-input-header-max-height, calc(var(--control-height-sm) * 3 + var(--space-1) * 2 + var(--space-2)));
  overflow-y:          auto;
  overscroll-behavior: contain;
}

.prompt-input-header:not(:has(*)) {
  display: none;
}

/* The header scrolls, so it clips: a control on its bottom row draws its
   ring inside, where the clip cannot cut it. */
.prompt-input-header :is(button, a[href], [tabindex]:not([tabindex="-1"]), .attachments):focus-visible {
  outline:    none;
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus);
}

/* Textarea */

.prompt-input-textarea {
  --prompt-input-pad-y: var(--space-3);

  display:      block;
  width:        100%;
  min-width:    0;
  height:       auto;
  min-height:   calc(var(--prompt-input-min-rows, 2) * 1lh + 2 * var(--prompt-input-pad-y));
  max-height:   calc(var(--prompt-input-max-rows, 8) * 1lh + 2 * var(--prompt-input-pad-y));
  margin:       0;
  padding:      var(--prompt-input-pad-y) var(--control-padding-x);
  border:       0;
  border-radius: 0;
  background:   transparent;
  box-shadow:   none;
  color:        var(--ink);
  font-family:  var(--font-ui);
  font-size:    var(--text-ui);
  font-weight:  var(--weight-body);
  line-height:  var(--leading-body);
  resize:       none;
  field-sizing: content;
}

.prompt-input-textarea:focus,
.prompt-input-textarea:focus-visible {
  outline:    none;
  box-shadow: none;
}

.prompt-input-textarea::placeholder {
  color:   var(--ink-dim);
  opacity: 1;
}

.prompt-input-textarea:disabled {
  cursor: not-allowed;
}

/* Footer */

.prompt-input-footer {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-1);
  padding:         0 var(--space-2) var(--space-2);
}

.prompt-input-footer:not(:has(*)) {
  display: none;
}

.prompt-input-tools {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-1);
  min-width:   0;
}

.button.prompt-input-button {
  color: var(--ink-soft);
}

.button.prompt-input-button:hover,
.button.prompt-input-button[aria-expanded="true"] {
  background: var(--bg-muted);
  color:      var(--ink);
}

.button.prompt-input-button[aria-pressed="true"] {
  background: var(--accent-soft);
  color:      var(--accent-deep);
}

.prompt-input-submit {
  margin-inline-start: auto;
}

.prompt-input-submit-icon {
  display:     inline-flex;
  align-items: center;
}

.prompt-input-submit .spinner {
  width:  var(--icon-size);
  height: var(--icon-size);
}

.prompt-input-submit[data-status="error"] {
  background:   var(--danger-fill);
  border-color: var(--danger-fill);
  color:        var(--white);
}

.prompt-input-speech[data-listening] {
  background: var(--danger-soft);
  color:      var(--danger);
  animation:  prompt-input-pulse var(--duration-loop) var(--ease-in-out) infinite alternate;
}

@keyframes prompt-input-pulse {
  to { box-shadow: 0 0 0 var(--space-1) var(--danger-soft); }
}

.prompt-input-tooltip {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-2);
}

.prompt-input-shortcut {
  color:       inherit;
  opacity:     var(--opacity-muted);
  font-family: var(--font-mono);
  font-size:   var(--text-caption);
  background:  none;
  border:      0;
  padding:     0;
}

/* The model picker: a quiet select that sits with the ghost tools. */
.native-select.prompt-input-select .native-select-control {
  border-color: transparent;
  background:   transparent;
  box-shadow:   none;
  color:        var(--ink-soft);
  font-weight:  var(--weight-ui);
}

.native-select.prompt-input-select:hover .native-select-control {
  background: var(--bg-muted);
  color:      var(--ink);
}

/* The same quiet look for a Select trigger composed into the tools. */
.select-trigger.prompt-input-select {
  border-color: transparent;
  background:   transparent;
  box-shadow:   none;
  color:        var(--ink-soft);
  font-weight:  var(--weight-ui);
}

.select-trigger.prompt-input-select:hover:not(:disabled):not([data-readonly]) {
  border-color: transparent;
  background:   var(--bg-muted);
  color:        var(--ink);
}

/* Drop Overlay */

.prompt-input-drop {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  border:          var(--control-border-width) dashed var(--accent);
  border-radius:   inherit;
  background:      color-mix(in oklab, var(--accent-soft) 92%, transparent);
  color:           var(--accent-deep);
  font-family:     var(--font-ui);
  font-size:       var(--text-ui);
  font-weight:     var(--weight-ui);
  opacity:         0;
  visibility:      hidden;
  pointer-events:  none;
  transition:      opacity var(--duration-fast) var(--ease-out), visibility 0s linear var(--duration-fast);
}

.prompt-input-drop svg {
  width:  var(--icon-size);
  height: var(--icon-size);
}

.prompt-input-box[data-dragging] > .prompt-input-drop {
  opacity:    1;
  visibility: visible;
  transition: opacity var(--duration-fast) var(--ease-out), visibility 0s linear 0s;
}

/* Menu */

.prompt-input-menu .menu-item svg {
  width:  var(--icon-size);
  height: var(--icon-size);
  color:  var(--ink-dim);
}

/* Tabs (suggestion sections) */

.prompt-input-tabs {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  font-family:    var(--font-ui);
  font-size:      var(--text-ui);
}

.prompt-input-tab {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.prompt-input-tab-label {
  margin:         0;
  padding:        0 var(--space-2);
  color:          var(--ink-dim);
  font-family:    var(--font-ui);
  font-size:      var(--text-caption);
  font-weight:    var(--weight-ui);
  letter-spacing: var(--tracking-ui);
}

.prompt-input-tab-body {
  display:        flex;
  flex-direction: column;
}

.prompt-input-tab-item {
  display:       flex;
  align-items:   center;
  gap:           var(--item-gap);
  min-height:    var(--item-height);
  padding:       0 var(--item-padding-x);
  border-radius: var(--radius-item);
  color:         var(--ink);
}

.prompt-input-tab-item:hover {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

.prompt-input-tab-item svg {
  width:  var(--icon-size);
  height: var(--icon-size);
  color:  var(--ink-dim);
}

}