/* =========================================================
   Clines AI — chat styling
   ----------------------------------------------------------
   Bootstrap 5.3.3 utilities cover ~95% of the design.
   Everything below is what the utilities can't do:
   1. Brand color override (Clines vermillion replaces Bootstrap blue)
   2. Sidebar item active state
   3. Thinking-indicator animation
   4. Markdown body typography
   5. App-header-height variable used by the chat layout
   ========================================================= */

:root {
  /* App chrome above the chat (navbar + container py-4 + breadcrumb). */
  --app-header-height: 140px;

  /* Brand: Clines vermillion */
  --bs-primary:              #E84B2D;
  --bs-primary-rgb:          232, 75, 45;
  --bs-primary-bg-subtle:    #FDEEE8;
  --bs-primary-border-subtle:#FAD9CD;
  --bs-primary-text-emphasis:#A8311A;
  --bs-link-color:           #C73B1F;
  --bs-link-hover-color:     #A8311A;
  --bs-link-color-rgb:       199, 59, 31;
}

/* Bootstrap's .btn-primary base picks up --bs-primary, but hover/active
   states are pre-darkened color values — re-pin them. */
.btn-primary {
  --bs-btn-bg:               #E84B2D;
  --bs-btn-border-color:     #E84B2D;
  --bs-btn-hover-bg:         #C73B1F;
  --bs-btn-hover-border-color:#C73B1F;
  --bs-btn-active-bg:        #A8311A;
  --bs-btn-active-border-color:#A8311A;
  --bs-btn-disabled-bg:      #E84B2D;
  --bs-btn-disabled-border-color:#E84B2D;
}

/* Conversation list rows */
.conv-item {
  color: #1F2430;
  transition: background-color .12s;
}
.conv-item:hover {
  background-color: #F7F8FA;
  color: #1F2430;
}
.conv-item-active,
.conv-item-active:hover {
  background-color: #FDEEE8;
  color: #A8311A;
}

/* Form wrapper focus ring (Bootstrap's .form-control focus is suppressed inside
   the wrapper so the wrapper itself can show the ring). */
.chat-input-wrapper:focus-within {
  border-color: #E84B2D !important;
  box-shadow: 0 0 0 .25rem rgba(232, 75, 45, .15);
}

/* Thinking dots */
.thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.thinking-dots > span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: thinking-bounce 1.4s infinite ease-in-out both;
}
.thinking-dots > span:nth-child(1) { animation-delay: -0.32s; }
.thinking-dots > span:nth-child(2) { animation-delay: -0.16s; }
@keyframes thinking-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}

/* Markdown body — assistant message content. Keep tight, since markdown can be
   anything from a paragraph to fenced code blocks to tables. */
.markdown-body {
  font-size: .9375rem;
  line-height: 1.55;
  color: #1F2430;
}
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child  { margin-bottom: 0; }
.markdown-body p { margin: 0 0 .625rem; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 1rem 0 .5rem;
}
.markdown-body h1 { font-size: 1.25rem; }
.markdown-body h2 { font-size: 1.125rem; }
.markdown-body h3 { font-size: 1rem; }
.markdown-body ul, .markdown-body ol { padding-left: 1.25rem; margin: 0 0 .625rem; }
.markdown-body li { margin-bottom: .25rem; }
.markdown-body a { color: #C73B1F; text-decoration: underline; text-underline-offset: 2px; }
.markdown-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8125rem;
  background: #F1F3F6;
  padding: 1px 6px;
  border-radius: 4px;
  color: #1F2430;
}
.markdown-body pre {
  background: #1F2430;
  color: #E7E9EE;
  border-radius: .5rem;
  padding: .875rem 1rem;
  overflow-x: auto;
  margin: .625rem 0;
  font-size: .8125rem;
  line-height: 1.5;
}
.markdown-body pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: .625rem 0;
  font-size: .875rem;
}
.markdown-body th, .markdown-body td {
  padding: .5rem .75rem;
  border-bottom: 1px solid #E7E9EE;
  text-align: left;
}
.markdown-body th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6B7280;
  background: #F7F8FA;
}
.markdown-body blockquote {
  border-left: 3px solid #E84B2D;
  padding: .25rem 0 .25rem .875rem;
  margin: .625rem 0;
  color: #6B7280;
}