/* Composer shell: vertical stack — textarea on top, controls toolbar
   (attach + project picker + send) below, all inside one rounded box. */
.v10-local-agent-composer-shell {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 10px 12px;
  gap: 8px;
  border-radius: 14px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  transition: border-color 0.15s;
}
.v10-local-agent-composer-shell:focus-within {
  border-color: var(--border-strong);
}
.v10-composer-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.v10-composer-controls-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.v10-composer-attach {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.v10-composer-attach:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.v10-composer-attach:focus-visible {
  outline: none;
  background: var(--bg-hover);
  color: var(--text-primary);
}
.v10-composer-attach:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.v10-local-agent-inline-send {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: var(--text-primary);
  color: var(--bg-root);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.v10-local-agent-inline-send:hover:not(:disabled) {
  opacity: 0.9;
}
.v10-local-agent-inline-send:disabled {
  /* Muted but still legibly filled — keeps the active-state silhouette
     while clearly signalling disabled. --text-secondary lands in the
     contrast sweet spot in both themes (~4.7:1 dark / ~5.5:1 light
     against the composer shell). */
  background: var(--text-secondary);
  color: var(--bg-surface);
  cursor: not-allowed;
}
/* Streaming: button remains clickable as a stop-button. Distinguish
   it visually from the idle Send button so a user typing a follow-up
   mid-stream doesn't reflexively click "Send" and accidentally abort
   the in-flight reply (UX-lead P1-B). Switch the filled silhouette
   for an outlined-square treatment — same shape, different surface
   reading — matches Claude / ChatGPT's stop-button pattern. The
   `--border-prominent` token clears WCAG 1.4.11 3:1 against
   `--bg-active` in both themes (~3.8:1 dark / ~3.2:1 light). */
.v10-local-agent-inline-send-streaming {
  cursor: pointer;
  background: var(--bg-active);
  color: var(--text-primary);
  border: 1px solid var(--border-prominent);
}
/* Override the generic `:hover { opacity: 0.9 }` on .v10-local-agent-inline-send
   — the outlined Stop button reads better with a surface bump than an
   opacity dip. */
.v10-local-agent-inline-send-streaming:hover {
  background: var(--bg-hover);
  opacity: 1;
}
/* Uploading: spinner spins continuously. The button is disabled in this
   state (informational only) — the underlying :disabled rule above
   handles its appearance; this rule just animates the inner icon. */
.v10-local-agent-inline-send-spinner {
  animation: v10-spin 0.85s linear infinite;
}
@keyframes v10-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .v10-local-agent-inline-send-spinner { animation: none; }
}

/* Project picker now lives INSIDE the composer-controls row to the right of
   the attach button. Lets the picker fill the available space in the row
   (between the attach button on its left and the send button anchored
   right) so most project names fit without truncation. Long names still
   ellipsize and surface in a `title` tooltip on hover of each option. */
.v10-composer-target {
  flex: 1;
  min-width: 0;
}
/* Borderless at rest — matches the ghost feel of the attach button. The
   open state and hover state both lift the background instead of stamping
   a visible outline. */
.v10-composer-target .v10-select-trigger {
  border-color: transparent;
  background: transparent;
}
.v10-composer-target .v10-select-trigger:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: transparent;
}
.v10-composer-target .v10-select.open .v10-select-trigger {
  background: var(--bg-hover);
  border-color: transparent;
}

/* Inline Select prefix icon (e.g. Folder for the project picker). */
.v10-select-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-right: 6px;
}
/* Attachment chips (compact, ChatGPT/Claude pattern) */
.v10-attachment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.v10-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 8px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  max-width: 100%;
  min-width: 0;
}
.v10-attachment-chip[data-status="error"] {
  border-color: color-mix(in srgb, #ef4444 35%, var(--border-subtle));
}
.v10-attachment-chip[data-status="uploading"] {
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border-subtle));
}
.v10-attachment-chip-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-active);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.v10-attachment-chip-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.v10-attachment-chip-name {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.v10-attachment-chip-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.v10-attachment-chip-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.v10-attachment-chip[data-status="error"] .v10-attachment-chip-status {
  color: var(--text-danger);
}
.v10-attachment-chip-remove {
  /* Bumped from --text-tertiary to --text-secondary so the X icon at rest
     clears WCAG 1.4.11 3:1 non-text contrast against the chip's
     --bg-elevated background: ~4.07:1 dark, ~7.1:1 light. Hover still
     promotes to --text-primary for additional affordance. */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.v10-attachment-chip-remove:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.v10-attachment-chip-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Drop overlay — covers the entire chat-shell (messages + composer) with a
   centered card. Claude-Desktop-style affordance: clear visual cue with a
   backdrop dim so the user knows the drop target is the chat. */
.v10-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms ease-out;
  background: color-mix(in srgb, var(--bg-root) 60%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.v10-drop-overlay.active {
  opacity: 1;
  /* Keep the overlay non-interactive (`pointer-events: none` from the
     base rule above). The dropzone root owns the drag lifecycle —
     turning the overlay interactive while it sits inside the drop
     target can steal the follow-up `dragenter`/`dragleave`/`drop`
     sequence in real browsers and cause flicker or dropped files
     failing to register. */
}
.v10-drop-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 28px;
  border-radius: 14px;
  background: var(--bg-elevated);
  /* Monochrome border + icon — matches the rest of the node design
     instead of competing with it as the blue accent did. Theme-aware
     via --text-primary (~white in dark mode, ~black in light mode). */
  border: 2px dashed var(--text-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  text-align: center;
  max-width: 320px;
}
.v10-drop-overlay.refuse .v10-drop-overlay-card {
  border-color: var(--border-strong);
}
.v10-drop-overlay-icon {
  color: var(--text-primary);
}
.v10-drop-overlay.refuse .v10-drop-overlay-icon {
  color: var(--text-tertiary);
}
.v10-drop-overlay-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.v10-drop-overlay.refuse .v10-drop-overlay-title {
  color: var(--text-secondary);
}
.v10-drop-overlay-hint {
  font-size: 11px;
  color: var(--text-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .v10-drop-overlay { transition: none; }
}
.v10-local-agent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.v10-local-agent-notice,
.v10-local-agent-error {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.5;
}
.v10-local-agent-notice {
  background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--accent-blue) 30%, var(--border-subtle));
  color: var(--text-secondary);
}
.v10-local-agent-error {
  background: color-mix(in srgb, #ef4444 12%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, #ef4444 30%, var(--border-subtle));
  color: #fca5a5;
}
.v10-agent-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 0 12px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.v10-agent-link-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.v10-agent-empty-state {
  padding: 24px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.v10-agent-empty-state-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.v10-agent-empty-state-hint {
  font-size: 11px;
  color: var(--text-tertiary);
}
/* Legacy: bare-text empty states elsewhere (NetworkTab, SessionsTab, Add-agent) */
.v10-agent-empty-state:not(:has(.v10-agent-empty-state-title)) {
  padding: 16px;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* Agent input */
.v10-agent-input-area {
  flex-shrink: 0;
  padding: 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg-panel);
}
.v10-agent-input {
  width: 100%;
  padding: 4px 2px;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  /* Match the chat bubble (13px) — typed text and rendered reply
     should read at the same size in the same column (qa-lead). The
     global input/textarea rule (12px, mono) is for compact forms; the
     chat composer is conversational. */
  font-size: 13px;
  font-family: var(--font-sans);
  line-height: 1.5;
  min-width: 0;
  resize: none;
}
.v10-agent-input:focus { outline: none; }
.v10-agent-input::placeholder {
  color: var(--text-secondary);
}
.v10-agent-send-btn {
  min-width: 56px;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.v10-agent-send-btn.secondary {
  background: var(--bg-elevated);
}
.v10-agent-send-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
