/* ─── AOE4 Coach — custom styles ─────────────────────────────────────────────
   Everything else is handled by Tailwind utility classes inline in the HTML.   */

.win-bar-fill {
  transition: width 0.6s ease-out;
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

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

/* Top-level tab buttons */
.tab-btn              { border-bottom: 2px solid transparent; }
.tab-btn.active       { border-bottom-color: #f59e0b; color: #f59e0b; }

/* Analysis sub-tab buttons */
.analysis-tab         { border-bottom: 2px solid transparent; }
.analysis-tab.active  { border-bottom-color: #f59e0b; color: #f59e0b; }

/* ─── AI Coach chatbot ───────────────────────────────────────────────────── */

/* Rendered markdown inside an assistant message (see js/aichat.js -- marked.js
   output, DOMPurify-sanitized, dropped into .aichat-markdown's innerHTML). */
.aichat-markdown             { line-height: 1.6; }
.aichat-markdown > *:first-child { margin-top: 0; }
.aichat-markdown > *:last-child  { margin-bottom: 0; }
.aichat-markdown p            { margin: 0.6em 0; }
.aichat-markdown h1, .aichat-markdown h2, .aichat-markdown h3 {
  font-weight: 600; color: #fbbf24; margin: 1em 0 0.4em;
}
.aichat-markdown h1 { font-size: 1.05rem; }
.aichat-markdown h2 { font-size: 1rem; }
.aichat-markdown h3 { font-size: 0.925rem; }
.aichat-markdown strong { color: #f5f5f4; font-weight: 600; }
.aichat-markdown ul, .aichat-markdown ol { margin: 0.5em 0; padding-left: 1.4em; }
.aichat-markdown li  { margin: 0.2em 0; }
.aichat-markdown ul  { list-style: disc; }
.aichat-markdown ol  { list-style: decimal; }
.aichat-markdown code {
  background: rgba(255,255,255,0.08); border-radius: 0.25rem;
  padding: 0.1em 0.35em; font-size: 0.85em;
}
.aichat-markdown pre {
  background: rgba(255,255,255,0.06); border-radius: 0.5rem;
  padding: 0.75em 1em; overflow-x: auto; margin: 0.6em 0;
}
.aichat-markdown pre code { background: none; padding: 0; }
.aichat-markdown a { color: #fbbf24; text-decoration: underline; }
.aichat-markdown hr { border-color: #44403c; margin: 0.75em 0; }
.aichat-markdown blockquote {
  border-left: 2px solid #57534e; padding-left: 0.75em; color: #a8a29e; margin: 0.6em 0;
}

/* Tables: the model returns these constantly for matchup breakdowns */
.aichat-markdown table {
  width: 100%; border-collapse: collapse; margin: 0.75em 0; font-size: 0.85em;
}
.aichat-markdown th, .aichat-markdown td {
  border: 1px solid #44403c; padding: 0.4em 0.6em; text-align: left;
}
.aichat-markdown th { background: rgba(255,255,255,0.05); color: #d6d3d1; font-weight: 600; }
.aichat-markdown tr:nth-child(even) td { background: rgba(255,255,255,0.02); }

/* "Thinking…" indicator */
.aichat-typing { display: inline-flex; align-items: center; gap: 4px; padding: 0.2em 0; }
.aichat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #78716c;
  animation: aichatTypingBounce 1.2s infinite ease-in-out;
}
.aichat-typing span:nth-child(2) { animation-delay: 0.15s; }
.aichat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aichatTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* Auto-growing input */
#aichat-input { max-height: 200px; }