/* Decision Transcript Component Styles */

/* Container states */
.decision-transcript-loading,
.decision-transcript-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--bs-secondary);
}

.decision-transcript-empty i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Transcript list */
.decision-transcript-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem;
}

/* Individual decision item */
.decision-item {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.decision-item:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Decision type indicator (left border) */
.decision-type-planning {
  border-left: 3px solid var(--bs-info);
}

.decision-type-routing {
  border-left: 3px solid var(--bs-primary);
}

.decision-type-completion {
  border-left: 3px solid var(--bs-success);
}

.decision-type-error_recovery {
  border-left: 3px solid var(--bs-warning);
}

.decision-type-batch_strategy {
  border-left: 3px solid var(--bs-purple, #6f42c1);
}

/* Decision header */
.decision-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.decision-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.decision-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}

.decision-type-planning .decision-icon {
  color: var(--bs-info);
}

.decision-type-routing .decision-icon {
  color: var(--bs-primary);
}

.decision-type-completion .decision-icon {
  color: var(--bs-success);
}

.decision-type-error_recovery .decision-icon {
  color: var(--bs-warning);
}

.decision-type-batch_strategy .decision-icon {
  color: var(--bs-purple, #6f42c1);
}

.decision-type-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.decision-iteration {
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--bs-secondary);
}

.decision-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.decision-time {
  font-size: 0.75rem;
  color: var(--bs-secondary);
}

.decision-outcome {
  font-size: 0.65rem;
}

/* Decision reasoning */
.decision-reasoning {
  margin-bottom: 0.5rem;
}

/* Decision context (last_result_summary) */
.decision-context {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: var(--bs-tertiary-bg);
  border-radius: 0.375rem;
  border-left: 3px solid var(--bs-info);
}

.decision-context-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-info);
  margin-bottom: 0.25rem;
}

.decision-context-text {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--bs-body-color);
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Decision outcome notes */
.decision-outcome-notes {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: var(--bs-success-bg-subtle);
  border-radius: 0.375rem;
  border-left: 3px solid var(--bs-success);
}

.decision-outcome-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-success);
  margin-bottom: 0.25rem;
}

.decision-outcome-text {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--bs-body-color);
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.decision-reasoning-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bs-body-color);
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.decision-show-more {
  padding: 0;
  font-size: 0.75rem;
}

/* Decision details */
.decision-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.75rem;
}

.decision-action {
  font-size: 0.65rem;
  text-transform: uppercase;
}

.decision-tools,
.decision-duration,
.decision-progress {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--bs-secondary);
}

.decision-tools i,
.decision-duration i,
.decision-progress i {
  font-size: 0.875rem;
}

/* Animation for live mode */
.decision-item-enter {
  animation: decisionEnter 0.3s ease-out;
}

@keyframes decisionEnter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Thinking indicator specific styles */
.thinking-indicator-container {
  background: var(--bs-info-bg-subtle, #cff4fc);
  border: 1px solid var(--bs-info-border-subtle, #9ec5fe);
  border-radius: 0.5rem;
  margin: 0.5rem 0;
  overflow: hidden;
}

.thinking-indicator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--bs-info-bg-subtle, #cff4fc);
  cursor: pointer;
  user-select: none;
}

.thinking-indicator-header:hover {
  background: rgba(var(--bs-info-rgb), 0.15);
}

.thinking-indicator-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bs-info-text-emphasis, #055160);
}

.thinking-indicator-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.thinking-indicator-task {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--bs-secondary);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thinking-indicator-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--bs-info-border-subtle, #9ec5fe);
  border-top-color: var(--bs-info, #0dcaf0);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.thinking-indicator-progress {
  font-size: 0.75rem;
  color: var(--bs-secondary);
}

.thinking-indicator-toggle {
  background: none;
  border: none;
  padding: 0.25rem;
  color: var(--bs-info-text-emphasis, #055160);
  cursor: pointer;
  transition: transform 0.2s;
}

.thinking-indicator-toggle.expanded {
  transform: rotate(180deg);
}

.thinking-indicator-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.thinking-indicator-body.expanded {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

.thinking-indicator-content {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--bs-info-border-subtle, #9ec5fe);
}

.thinking-indicator-reasoning {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bs-body-color);
  margin: 0 0 0.5rem 0;
  white-space: pre-wrap;
}

.thinking-indicator-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--bs-secondary);
}

.thinking-indicator-meta .badge {
  font-size: 0.65rem;
}

/* Decision history modal specific */
.decision-history-search {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.decision-history-search input {
  flex: 1;
}

.decision-history-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.decision-history-filters select {
  min-width: 120px;
}

.decision-history-stats {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--bs-tertiary-bg);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.decision-history-stat {
  text-align: center;
}

.decision-history-stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bs-primary);
}

.decision-history-stat-label {
  font-size: 0.75rem;
  color: var(--bs-secondary);
}

/* Execution list */
.execution-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.execution-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.execution-item:hover {
  border-color: var(--bs-primary);
  background: var(--bs-tertiary-bg);
}

.execution-item-main {
  flex: 1;
  min-width: 0;
}

.execution-item-request {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.execution-item-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--bs-secondary);
}

.execution-item-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.execution-item-actions .view-graph-btn {
  color: var(--bs-primary);
  opacity: 0.6;
  transition: opacity 0.2s;
}

.execution-item:hover .view-graph-btn {
  opacity: 1;
}

.execution-item-actions .view-graph-btn:hover {
  color: var(--bs-primary);
  opacity: 1;
}

.execution-item-arrow {
  color: var(--bs-secondary);
  padding-left: 0.25rem;
}

/* Date grouping */
.execution-date-group {
  margin-bottom: 1rem;
}

.execution-date-header {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary);
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}

/* Step list in thinking indicator */
.thinking-step-list {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--bs-info-border-subtle, #9ec5fe);
}

.step-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.step-item-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 1.5rem;
}

.step-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.step-item-line {
  flex: 1;
  width: 2px;
  background: var(--bs-border-color);
  margin-top: 0.25rem;
  min-height: 0.75rem;
}

/* Step badge colors */
.step-badge-info {
  background: var(--bs-info-bg-subtle);
  color: var(--bs-info);
}

.step-badge-primary {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

.step-badge-success {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success);
}

.step-badge-warning {
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning);
}

.step-badge-danger {
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-danger);
}

.step-badge-secondary {
  background: var(--bs-secondary-bg-subtle);
  color: var(--bs-secondary);
}

/* Step content */
.step-item-content {
  flex: 1;
  min-width: 0;
}

.step-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
}

.step-item-label {
  font-weight: 500;
  color: var(--bs-body-color);
}

.step-tool-name {
  font-family: monospace;
  font-size: 0.75rem;
  background: var(--bs-tertiary-bg);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: var(--bs-primary);
}

.step-tool-progress {
  font-size: 0.6875rem;
  color: var(--bs-secondary);
}

.step-item-time {
  font-size: 0.6875rem;
  color: var(--bs-secondary);
  margin-left: auto;
  padding-right: 0.5rem;
  flex-shrink: 0;
}

.step-item-message {
  font-size: 0.75rem;
  color: var(--bs-secondary);
  margin-top: 0.25rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Latest step highlight */
.step-item-latest {
  background: var(--bs-info-bg-subtle);
  margin: 0 -0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  border-radius: 0.375rem;
}

.step-item-latest .step-item-icon {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Success/failure states */
.step-item-success .step-item-label {
  color: var(--bs-success);
}

.step-item-failed .step-item-label {
  color: var(--bs-danger);
}

.step-item-failed .step-item-message {
  color: var(--bs-danger);
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .thinking-indicator-container {
  background: rgba(var(--bs-info-rgb), 0.1);
}

[data-bs-theme="dark"] .thinking-indicator-header:hover {
  background: rgba(var(--bs-info-rgb), 0.2);
}

[data-bs-theme="dark"] .step-item-latest {
  background: rgba(var(--bs-info-rgb), 0.15);
}

/* Responsive */
@media (max-width: 576px) {
  .decision-header {
    flex-direction: column;
    gap: 0.25rem;
  }

  .decision-meta {
    width: 100%;
    justify-content: space-between;
  }

  .decision-details {
    flex-direction: column;
    align-items: flex-start;
  }

  .decision-history-filters {
    flex-direction: column;
  }

  .decision-history-filters select {
    width: 100%;
  }
}

/* Execution Steps Timeline */
.execution-steps-timeline {
  display: flex;
  flex-direction: column;
}

.execution-step {
  display: flex;
  gap: 0.75rem;
  position: relative;
}

.execution-step.failed .step-summary {
  color: var(--bs-danger);
}

.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2rem;
}

.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.step-line {
  flex: 1;
  width: 2px;
  background: var(--bs-border-color);
  margin: 0.25rem 0;
  min-height: 1rem;
}

.step-content {
  flex: 1;
  min-width: 0;
  padding-bottom: 0.75rem;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.step-summary {
  color: var(--bs-body-color);
  line-height: 1.4;
}

.step-tools {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.25rem;
}

/* Tool item - individual tool call display */
.tool-item {
  padding: 0.375rem 0.5rem;
  background: var(--bs-tertiary-bg);
  border-radius: 0.375rem;
  border-left: 3px solid var(--bs-success);
}

.tool-item.text-danger {
  border-left-color: var(--bs-danger);
}

.tool-identifier {
  font-weight: 500;
  color: var(--bs-body-color);
}

.tool-item .text-muted {
  font-family: monospace;
  font-size: 0.6875rem;
}

/* Collapsed state */
#execution-steps-body.collapsed {
  display: none;
}

/* Make the whole card header clickable */
.card-header:has(#steps-toggle-icon) {
  cursor: pointer;
}

/* Batch sections within thinking indicator */
.batch-section {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  margin: 0.5rem 0.75rem;
  overflow: hidden;
  transition: border-color 0.2s;
}

.batch-section.active {
  border-color: var(--bs-primary);
  border-width: 2px;
}

.batch-section.collapsed .batch-body {
  max-height: 0;
  padding: 0;
  overflow: hidden;
}

.batch-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bs-tertiary-bg);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.batch-header:hover {
  background: var(--bs-secondary-bg);
}

.batch-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.batch-status-icon .spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: 0.15rem;
}

.batch-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.batch-name {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--bs-body-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.batch-active-task {
  font-size: 0.75rem;
  color: var(--bs-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

.batch-progress {
  font-size: 0.75rem;
  color: var(--bs-secondary);
  font-weight: 500;
}

.batch-toggle {
  transition: transform 0.2s;
  color: var(--bs-secondary);
  font-size: 0.75rem;
}

.batch-section.collapsed .batch-toggle {
  transform: rotate(-90deg);
}

.batch-body {
  padding: 0.5rem;
  padding-right: 0.25rem;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  border-top: 1px solid var(--bs-border-color);
}

.batch-pending {
  color: var(--bs-secondary);
  font-style: italic;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
}

/* Batch section status colors */
.batch-section.active .batch-header {
  background: var(--bs-primary-bg-subtle);
}

.batch-section.active .batch-name {
  color: var(--bs-primary-text-emphasis);
}

/* Completed batch styling */
.batch-section:not(.active):not(.collapsed) .batch-header {
  background: var(--bs-success-bg-subtle);
}

/* Dark mode adjustments for batches */
[data-bs-theme="dark"] .batch-section {
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .batch-header {
  background: rgba(var(--bs-tertiary-bg-rgb), 0.5);
}

[data-bs-theme="dark"] .batch-section.active .batch-header {
  background: rgba(var(--bs-primary-rgb), 0.15);
}

/* Step items inside batch body */
.batch-body .step-item {
  padding: 0.375rem 0;
}

.batch-body .step-item-icon {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.6875rem;
}

.batch-body .step-item-header {
  font-size: 0.75rem;
}

.batch-body .step-item-message {
  font-size: 0.6875rem;
}