.task-chat-tab {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  /* FNXC:TaskDetailChat 2026-06-13-19:55: Chat box should sit in the chat view without excess vertical spacing around the composer (FN-6418), so the transcript-to-composer gap is tighter than the default card stack. */
  gap: var(--space-sm);
  min-height: 0;
  height: 100%;
}

.task-chat-expand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--space-2xl);
  min-block-size: var(--space-2xl);
  padding: 0;
}

/*
FNXC:TaskChat 2026-06-13-00:00:
FN-6425 requires the chat expand control to stay inside the chat view as an icon-only affordance while remaining reachable at every transcript scroll offset. Anchor it to the non-scrolling task-chat wrapper rather than the transcript content.
*/
.task-chat-expand-toggle--overlay {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 3;
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.task-chat-transcript {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-lg);
  min-height: 0;
  overflow-y: auto;
  padding: calc(var(--space-md) + var(--space-2xl)) var(--space-md) var(--space-md);
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}

.task-chat-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: calc(var(--space-2xl) * 3);
  padding: var(--space-xl);
  color: var(--text-muted);
  text-align: center;
}

.task-chat-load-previous-row {
  display: flex;
  justify-content: center;
  min-block-size: calc(var(--space-2xl) + var(--space-sm));
}

.task-chat-load-previous,
.task-chat-load-previous-status {
  min-block-size: calc(var(--space-2xl) + var(--space-sm));
}

.task-chat-load-previous-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  color: var(--text-muted);
}

.task-chat-jump-to-bottom {
  position: sticky;
  right: var(--space-md);
  bottom: var(--space-md);
  width: fit-content;
  min-inline-size: var(--space-2xl);
  min-block-size: var(--space-2xl);
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  color: var(--text-muted);
  background: var(--surface);
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 2;
}

.task-chat-jump-to-bottom:hover {
  background: var(--card-hover);
  color: var(--text);
}

.task-chat-jump-to-bottom:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-strong);
}

.task-chat-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
}

.task-chat-group-header {
  display: flex;
  align-items: center;
  align-self: start;
  gap: var(--space-sm);
  min-width: min(calc(var(--space-2xl) * 4), 32vw);
  color: var(--text-muted);
}

.task-chat-provider-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--provider-icon-color, currentColor) 8%, transparent);
  color: var(--text-muted);
}

.task-chat-provider-icon--fallback {
  color: var(--text-muted);
}

.task-chat-provider-icon .provider-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.task-chat-role-label {
  color: var(--text);
  font-weight: 600;
}

.task-chat-group-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  color: var(--text-muted);
  font-size: var(--space-md);
}

.task-chat-timestamp {
  color: var(--text-muted);
  font-size: calc(var(--space-md) - (var(--space-xs) / 2));
  white-space: nowrap;
}

/*
FNXC:TaskDetailChat 2026-06-23-21:38:
List View split-pane detail can be narrow while the global viewport is desktop-sized. Scope the compact/mobile agent-output group contract to that host so agent/provider headers stack above output blocks there without changing full-width modal, board main-panel, popped-out, or expanded chat desktop layouts.
*/
.list-split-detail-content .task-chat-group {
  grid-template-columns: 1fr;
}

.list-split-detail-content .task-chat-group-header {
  min-width: 0;
}

.task-chat-group-bubbles {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-sm);
}

.task-chat-user-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
}

.task-chat-user-header {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding-inline: var(--space-sm);
  color: var(--text-muted);
}

.task-chat-entry {
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  overflow-wrap: anywhere;
}

.task-chat-entry--user {
  max-width: min(100%, calc(var(--space-2xl) * 18));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.task-chat-tool-group,
.task-chat-thinking {
  min-width: 0;
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  overflow-wrap: anywhere;
}

.task-chat-tool-group {
  background: var(--bg-tertiary);
}

.task-chat-tool-group-summary,
.task-chat-thinking-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  list-style: none;
}

.task-chat-tool-group-summary {
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
}

.task-chat-tool-group-summary::-webkit-details-marker,
.task-chat-thinking-summary::-webkit-details-marker {
  display: none;
}

.task-chat-tool-group-summary::marker,
.task-chat-thinking-summary::marker {
  content: "";
}

.task-chat-tool-group-summary:focus-visible,
.task-chat-thinking-summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-strong);
}

.task-chat-tool-group-count {
  flex: 0 0 auto;
  font-weight: 600;
}

.task-chat-tool-group-names {
  min-width: 0;
  color: var(--text-muted);
  font-size: calc(var(--space-md) - (var(--space-xs) / 2));
  overflow-wrap: anywhere;
}

.task-chat-tool-group-overflow {
  color: var(--text-muted);
  white-space: nowrap;
}

.task-chat-tool-group-error-count {
  flex: 0 0 auto;
  color: var(--color-error);
  font-size: calc(var(--space-md) - (var(--space-xs) / 2));
  font-weight: 600;
}

.task-chat-tool-group-entries,
.task-chat-thinking-body {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-md) var(--space-md);
}

.task-chat-tool-group-entries {
  gap: var(--space-xs);
  padding: 0 var(--space-sm) var(--space-sm);
}

.task-chat-tool-entry {
  min-width: 0;
  padding: var(--space-xs) var(--space-sm);
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  overflow-wrap: anywhere;
}

.task-chat-tool-entry--tool-error {
  border-color: color-mix(in srgb, var(--color-error) 45%, var(--border));
  background: color-mix(in srgb, var(--color-error) 8%, var(--surface));
}

.task-chat-thinking {
  border-color: color-mix(in srgb, var(--color-warning) 35%, var(--border));
  background: color-mix(in srgb, var(--color-warning) 8%, var(--surface));
}

.task-chat-thinking-summary {
  color: var(--color-warning);
  font-weight: 600;
}

.task-chat-entry-kicker {
  margin-bottom: calc(var(--space-xs) / 2);
  color: var(--text-muted);
  font-size: calc(var(--space-sm) + (var(--space-xs) / 2));
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.task-chat-tool-entry--tool-error .task-chat-entry-kicker {
  color: var(--color-error);
}

.task-chat-entry-text {
  white-space: pre-wrap;
}

.task-chat-markdown > :first-child,
.task-chat-markdown p:first-child {
  margin-top: 0;
}

.task-chat-markdown > :last-child,
.task-chat-markdown p:last-child {
  margin-bottom: 0;
}

.task-chat-tool-detail-block {
  margin-top: var(--space-xs);
}

.task-chat-tool-detail-label {
  color: var(--text-muted);
  font-size: var(--space-md);
  font-weight: 600;
}

.task-chat-tool-detail {
  margin: var(--space-xs) 0 0;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.task-chat-composer {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-sm);
  /* FNXC:TaskDetailChat 2026-06-13-19:55: Chat box should sit in the chat view without excess vertical spacing around the composer (FN-6418), while preserving readable horizontal inset for the input row. */
  padding: var(--space-sm) var(--space-md);
}

.task-chat-composer-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
}

.task-chat-input {
  min-height: calc(var(--space-2xl) + var(--space-sm));
  max-height: var(--task-chat-composer-max-height, 40vh);
  resize: none;
  flex: 1 1 auto;
}

/*
FNXC:TaskDetailChat 2026-06-16-19:45:
FN-6507 requires the Task Detail chat send glyph to scale with the larger square touch target on desktop and mobile. Override only this button's global .btn-icon size so Send and Loader2 stay visually proportional without changing the tap box or sibling chat send buttons.

FNXC:TaskDetailChat 2026-06-17-18:05:
FN-6604 corrects the FN-6507 no-op where var(--space-lg) resolved to the same 16px value as the global --icon-size-md default. Use var(--space-xl) so the glyph resolves to 24px and fills the 40px desktop and mobile send button proportionally while preserving the tap box.

FNXC:TaskDetailChat 2026-06-18-06:36:
FN-6639 corrects the FN-6604 sizing because var(--space-xl) rendered a 24px glyph that filled only about 60% of the 40px button and still looked too small on mobile. Use var(--space-2xl) so Send and Loader2 render at 32px, about 80% fill, on desktop and mobile while preserving the tap box alignment.

FNXC:TaskDetailChat 2026-06-18-12:00:
FN-6660 corrects the repeated mobile sizing misses from FN-6507, FN-6604, and FN-6639: those passes only grew the glyph token inside a fixed 40px box, so the mobile affordance was never larger than desktop and still felt too small. Grow only the mobile box to calc(var(--space-2xl) + var(--space-lg)) and the mobile glyph to calc(var(--space-2xl) + var(--space-sm)), roughly 83% fill, while raising the mobile composer textarea min-height to the same 48px token sum for bottom alignment. Desktop stays intentionally unchanged.
*/
.task-chat-send {
  --btn-icon-size: var(--space-2xl);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--space-2xl) + var(--space-sm));
  min-inline-size: calc(var(--space-2xl) + var(--space-sm));
  block-size: calc(var(--space-2xl) + var(--space-sm));
  min-block-size: calc(var(--space-2xl) + var(--space-sm));
  padding: 0;
}

@media (max-width: 768px) {
  .task-chat-tab {
    gap: var(--space-xs);
  }

  .task-chat-expand-toggle--overlay {
    top: var(--space-sm);
    right: var(--space-sm);
    min-inline-size: calc(var(--space-2xl) + var(--space-sm));
    min-block-size: calc(var(--space-2xl) + var(--space-sm));
  }

  .task-chat-transcript {
    flex: 1 1 auto;
    min-height: 0;
    padding: calc(var(--space-sm) + var(--space-2xl)) var(--space-sm) var(--space-sm);
  }

  .task-chat-jump-to-bottom {
    right: var(--space-sm);
    bottom: var(--space-sm);
    min-inline-size: calc(var(--space-2xl) + var(--space-sm));
    min-block-size: calc(var(--space-2xl) + var(--space-sm));
  }

  .task-chat-load-previous-row {
    min-block-size: calc(var(--space-2xl) + var(--space-sm));
  }

  .task-chat-load-previous,
  .task-chat-load-previous-status {
    min-block-size: calc(var(--space-2xl) + var(--space-sm));
  }

  .task-chat-group {
    grid-template-columns: 1fr;
  }

  .task-chat-group-header {
    min-width: 0;
  }

  .task-chat-user-group {
    align-items: stretch;
  }

  .task-chat-user-header {
    align-self: flex-end;
    justify-content: flex-end;
  }

  .task-chat-timestamp {
    white-space: normal;
  }

  .task-chat-entry--user {
    max-width: 100%;
  }

  .task-chat-tool-group-summary,
  .task-chat-thinking-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-chat-tool-group-names,
  .task-chat-tool-group-error-count {
    width: 100%;
  }

  .task-chat-tool-group-entries,
  .task-chat-thinking-body {
    padding-inline: var(--space-sm);
  }

  .task-chat-tool-entry {
    padding: var(--space-sm);
  }

  .task-chat-composer {
    padding: var(--space-xs) var(--space-sm);
  }

  .task-chat-composer-row {
    align-items: flex-end;
    gap: var(--space-xs);
  }

  .task-chat-input {
    min-height: calc(var(--space-2xl) + var(--space-lg));
  }

  .task-chat-send {
    --btn-icon-size: calc(var(--space-2xl) + var(--space-sm));
    inline-size: calc(var(--space-2xl) + var(--space-lg));
    min-inline-size: calc(var(--space-2xl) + var(--space-lg));
    block-size: calc(var(--space-2xl) + var(--space-lg));
    min-block-size: calc(var(--space-2xl) + var(--space-lg));
  }
}