/* Story 30.86 / ADR-083 — estilos do chat rico. Arquivo local (CSP style-src 'self'); carregado DEPOIS do <style> do
   index.html para vencer em igual especificidade. Tokens (--accent, --border...) vêm do :root do app. */
/* ══════════ Story 30.86 — chat rico (tabela, titulos, link, citacao, codigo, diagrama, grafico) ══════════
   So dentro de .message.assistant: a mensagem do usuario segue simples. A bolha do assistente usa a
   largura toda (F10: 85% comprimia tabela e grafico); a do usuario nao muda. Cores: tokens do app. */
.message.assistant { max-width: 100%; }
.message-body { min-width: 0; }
.message.assistant .message-body { max-width: min(100%, 860px); }
.message-content { min-width: 0; overflow-wrap: anywhere; }
.message.assistant .message-content > :first-child { margin-top: 0; }
.message.assistant .message-content > :last-child { margin-bottom: 0; }
.message.assistant .message-content h1,
.message.assistant .message-content h2,
.message.assistant .message-content h3,
.message.assistant .message-content h4,
.message.assistant .message-content h5,
.message.assistant .message-content h6 { margin: 14px 0 6px; line-height: 1.3; font-weight: 600; color: #fff; }
.message.assistant .message-content h1 { font-size: 18px; }
.message.assistant .message-content h2 { font-size: 17px; }
.message.assistant .message-content h3 { font-size: 16px; }
.message.assistant .message-content h4,
.message.assistant .message-content h5,
.message.assistant .message-content h6 { font-size: 14px; color: var(--text-dim); letter-spacing: .02em; }
.message.assistant .message-content a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }
.message.assistant .message-content a:hover { color: #b3a3ff; }
.message.assistant .message-content blockquote {
  margin: 8px 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--accent); color: var(--text-dim);
}
.message.assistant .message-content hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
.message.assistant .message-content ul ul,
.message.assistant .message-content ol ol,
.message.assistant .message-content ul ol,
.message.assistant .message-content ol ul { margin: 4px 0; }
.cx-table { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 8px 0; }
.cx-table table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 14px; overflow-wrap: normal; }
.cx-table th, .cx-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.cx-table th { background: var(--surface2); font-weight: 600; font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.cx-table tr:last-child td { border-bottom: 0; }
.cx-table [align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
.cx-table [align="center"] { text-align: center; }
.cx-code { background: #10111a; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin: 8px 0; }
.cx-code-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-dim); }
.cx-code pre { margin: 0; padding: 10px 12px; border-radius: 0; background: transparent; overflow-x: auto; }
.cx-code pre code { font-size: 13px; white-space: pre; overflow-wrap: normal; }
.cx-copy { font: inherit; font-size: 12px; cursor: pointer; background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 1px 8px; }
.cx-copy:hover { color: var(--text); border-color: var(--text-dim); }
.cx-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-literal, .hljs-name { color: #b3a3ff; }
.hljs-string, .hljs-attr, .hljs-symbol, .hljs-template-variable { color: #5fd08a; }
.hljs-number, .hljs-meta, .hljs-bullet { color: #f2c14e; }
.hljs-comment, .hljs-quote { color: var(--text-dim); font-style: italic; }
.hljs-title, .hljs-section, .hljs-function, .hljs-type { color: #7cb7ff; }
.hljs-variable, .hljs-params { color: var(--text); }
.cx-visual { margin: 10px 0; }
.cx-visual.cx-pending > .cx-code { display: none; }
.cx-visual.cx-pending::before {
  content: ""; display: block; height: 96px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface2) 0%, var(--surface) 50%, var(--surface2) 100%);
  background-size: 200% 100%; animation: cxShimmer 1.4s linear infinite;
}
@keyframes cxShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .cx-visual.cx-pending::before { animation: none; } }
.cx-diagram { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; display: flex; overflow-x: auto; }
.cx-diagram svg { max-width: 100%; height: auto; margin: 0 auto; flex: 0 0 auto; }
.cx-chart { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cx-chart-title { font-size: 13px; color: var(--text-dim); }
.cx-chartbox { position: relative; height: 240px; min-width: 0; }
.cx-data summary { cursor: pointer; font-size: 12px; color: var(--text-dim); }
.cx-data summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-data .cx-table { margin: 6px 0 0; }
@media (max-width: 640px) {
  .message.assistant .message-content { padding: 10px 12px; }
  .cx-chartbox { height: 200px; }
}