/**
 * Shared chat UI styles for LLM harness apps.
 * Uses CSS custom properties with fallback values so apps
 * can override with their own design tokens.
 */

.chat-container {
  width: 100%;
  margin-top: var(--space-sm, 12px);
  transition: opacity 0.5s ease;
}

.chat-input-wrapper {
  margin-bottom: var(--space-xs, 8px);
}

.chat-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--neutral-200, #E5E7EB);
  padding: 12px 0;
  font-family: inherit;
  font-size: var(--text-sm, 14px);
  color: var(--neutral-800, #1F2937);
  background: transparent;
  outline: none;
  transition: border-color 0.3s ease, opacity 0.3s ease;
}
.chat-input:focus {
  border-bottom-color: var(--primary, #4682B4);
}
.chat-input::placeholder {
  color: var(--neutral-400, #9CA3AF);
  transition: color 0.3s ease;
}
.chat-input.thinking {
  opacity: 0.7;
}
.chat-input.thinking::placeholder {
  color: var(--primary, #4682B4);
}
.chat-input:disabled {
  cursor: default;
}

.chat-history {
  margin-top: var(--space-sm, 12px);
}

.chat-turn {
  margin-bottom: var(--space-md, 24px);
  animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-question {
  font-size: var(--text-md, 16px);
  font-weight: var(--font-light, 300);
  color: var(--neutral-700, #374151);
  line-height: var(--leading-relaxed, 1.625);
  margin-bottom: var(--space-xs, 8px);
}

.chat-answer {
  color: var(--neutral-600, #4B5563);
  line-height: var(--leading-relaxed, 1.625);
  border-left: 2px solid var(--neutral-200, #E5E7EB);
  padding-left: var(--space-sm, 12px);
}

.chat-answer h3,
.chat-answer h4 {
  font-size: var(--text-sm, 14px);
  font-weight: var(--font-medium, 500);
  color: var(--neutral-700, #374151);
  margin-top: var(--space-sm, 12px);
  margin-bottom: var(--space-xs, 8px);
}

.chat-sources-toggle {
  font-size: 12px;
  color: var(--neutral-400, #9CA3AF);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-top: var(--space-xs, 8px);
  font-family: inherit;
}
.chat-sources-toggle:hover {
  color: var(--neutral-600, #4B5563);
}

.chat-sources {
  margin-top: var(--space-xs, 8px);
  display: none;
}
.chat-sources.open {
  display: block;
}

.chat-source {
  font-size: 12px;
  color: var(--neutral-400, #9CA3AF);
  line-height: 1.6;
  margin-bottom: 2px;
}

.chat-source.unmatched {
  color: var(--neutral-300, #D1D5DB);
  font-style: italic;
}

.chat-source-doc {
  font-weight: var(--font-medium, 500);
  color: var(--neutral-500, #6B7280);
}

.chat-source-quote {
  color: var(--neutral-400, #9CA3AF);
}

.chat-source-link {
  color: var(--neutral-500, #6B7280);
  text-decoration: underline;
  text-decoration-color: var(--neutral-300, #D1D5DB);
  text-underline-offset: 2px;
}
.chat-source-link:hover {
  color: var(--primary, #4682B4);
  text-decoration-color: var(--primary, #4682B4);
}

.external-icon {
  width: 10px;
  height: 10px;
  margin-left: 3px;
  vertical-align: baseline;
  position: relative;
  top: -1px;
}

.chat-stats {
  font-size: 12px;
  color: var(--neutral-400, #9CA3AF);
  margin-top: var(--space-xs, 8px);
}

.chat-trace-toggle {
  font-size: 12px;
  color: var(--neutral-400, #9CA3AF);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-top: 4px;
  font-family: inherit;
}
.chat-trace-toggle:hover {
  color: var(--neutral-600, #4B5563);
}

.chat-trace {
  margin-top: var(--space-xs, 8px);
  display: none;
}
.chat-trace.open {
  display: block;
}

.chat-remaining {
  font-size: 12px;
  color: var(--neutral-400, #9CA3AF);
  margin-top: var(--space-xs, 8px);
}

.chat-tool-status {
  color: var(--neutral-400, #9CA3AF);
  font-size: var(--text-xs, 12px);
}

.chat-error {
  color: var(--error, #EF4444);
  font-size: var(--text-xs, 12px);
}
.chat-error a, .chat-error-link {
  color: var(--error, #EF4444);
  text-decoration: underline;
  cursor: pointer;
}

.chat-footer {
  margin-top: var(--space-md, 24px);
  font-size: 12px;
  color: var(--neutral-400, #9CA3AF);
  line-height: 1.6;
}
.chat-footer a {
  color: var(--secondary-dark, #D97706);
}