/*
 * Chat composer — a message field with a paperclip (attach) and a mic (speak),
 * and a drop target for dragging a file onto it. Attachments list below (the
 * upload component's ×-list). Reuses the `upload` + `speech_input` controllers.
 */

@layer components {
  .composer {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    background: var(--color-white);
  }

  /* Drag-over (from the upload controller). */
  .composer.upload--dragover {
    border-color: var(--color-indigo-500);
    background: oklch(from var(--color-indigo-500) l c h / 0.05);
  }

  .composer .form-field__textarea {
    width: 100%;
    border: none;
    padding: var(--space-1) var(--space-2);
    resize: vertical;
    background: transparent;
  }

  .composer .form-field__textarea:focus {
    outline: none;
    box-shadow: none;
  }

  .composer__actions {
    display: flex;
    gap: var(--space-1);
    padding: 0 var(--space-1);
  }

  .composer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-slate-500);
    cursor: pointer;
  }

  .composer__icon:hover {
    color: var(--color-slate-700);
    background: var(--color-slate-100);
  }

  .composer__icon svg { width: 1.25rem; height: 1.25rem; }

  /* Recording — the mic icon goes red (the speech_input controller toggles the class). */
  .composer.speech-input--recording .composer__icon[data-action*="speech-input"] {
    color: var(--color-red-500);
  }
}