/*
 * para-ai.css — Para.AI v21.0
 * Tema Minimalista — inspirado no Claude
 * Fundo escuro limpo · tipografia elegante · sem excesso de bordas
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════
   TOKENS DE COR
══════════════════════════════════════ */
:root {
  /* Fundo */
  --bg-base:      #12171E;   /* fundo principal — quase preto */
  --bg-surface:   #12171E;   /* cards, mensagens assistente */
  --bg-elevated:  #2a2c35;   /* hover, input */
  --bg-user:      #2d2f3a;   /* bolha do usuário */

  /* Texto */
  --tx-primary:   #ececec;   /* texto principal */
  --tx-secondary: #a8aab8;   /* texto secundário, timestamps */
  --tx-muted:     #636578;   /* placeholders, watermark */

  /* Acento — dourado jurídico discreto */
  --ac-gold:      #c9a84c;
  --ac-gold-dim:  #7a6030;
  --ac-gold-glow: rgba(201,168,76,.12);

  /* Bordas mínimas */
  --bd-subtle:    rgba(255,255,255,.06);
  --bd-medium:    rgba(255,255,255,.10);

  /* Raios */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;

  /* Fonte */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ══════════════════════════════════════
   BASE
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body, #root {
  font-family: var(--font) !important;
  background: var(--bg-base) !important;
  color: var(--tx-primary) !important;
  -webkit-font-smoothing: antialiased;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* Scrollbar fina e discreta */
::-webkit-scrollbar          { width: 4px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: rgba(255,255,255,.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ac-gold-dim); }

/* Seleção de texto dourada */
::selection { background: var(--ac-gold-glow); color: var(--tx-primary); }

/* ══════════════════════════════════════
   HEADER — minimalista, quase invisível
══════════════════════════════════════ */
header,
[class*="MuiAppBar"],
.MuiAppBar-root {
  background: var(--bg-base) !important;
  border-bottom: 1px solid var(--bd-subtle) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Nome "Para.AI" no header — pequeno e elegante */
[class*="AppName"],
[class*="app-name"],
[class*="MuiTypography"][class*="h6"] {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--tx-primary) !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
}

/* Logo */
header img {
  filter: brightness(0.9) !important;
  opacity: 0.9 !important;
}

/* ══════════════════════════════════════
   ÁREA DE MENSAGENS
══════════════════════════════════════ */
main,
[class*="MessageList"],
[class*="messageList"],
[class*="MuiBox"][class*="scroll"] {
  background: var(--bg-base) !important;
}

/* Container de cada mensagem */
[data-testid="message"],
[class*="Message_message"],
[class*="message-row"] {
  max-width: 780px;
  margin-left: auto !important;
  margin-right: auto !important;
  
}

/* ── Bolha do USUÁRIO ── */
[data-testid="user-message"],
[class*="UserMessage"],
[class*="user-message"] {
  background: var(--bg-user) !important;
  border: 1px solid var(--bd-subtle) !important;
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg) !important;
  padding: 12px 16px !important;
  color: var(--tx-primary) !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
  max-width: 75% !important;
  margin-left: auto !important;
}

/* ── Bolha do ASSISTENTE ── */
[data-testid="assistant-message"],
[class*="AssistantMessage"],
[class*="assistant-message"] {
  background: transparent !important;
  border: none !important;
  color: var(--tx-primary) !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
}

/* Nome do autor */
[data-testid="message-author"],
[class*="MessageAuthor"],
[class*="authorName"] {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ac-gold) !important;
  opacity: 0.75 !important;
  margin-bottom: 4px !important;
}

/* Cursor piscante durante stream */
[class*="streaming"]::after,
[class*="Streaming"]::after {
  content: '▋';
  display: inline;
  animation: blink 0.8s step-end infinite;
  color: var(--ac-gold);
  margin-left: 1px;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ══════════════════════════════════════
   REASONING BOX — Pipeline de Orquestração
   Estilo Claude: colapsado por padrão, expandível
══════════════════════════════════════ */
[data-testid="step"],
[class*="StepContainer"],
[class*="Step_step"] {
  background: var(--bg-surface) !important;
  border: 1px solid var(--bd-subtle) !important;
  border-radius: var(--r-md) !important;
  margin: 6px 0 10px !important;
  overflow: hidden !important;
  transition: border-color 0.2s !important;
}
[data-testid="step"]:hover { border-color: var(--bd-medium) !important; }

/* Header do step (clicável) */
[data-testid="step-header"],
[class*="StepHeader"] {
  padding: 9px 14px !important;
  background: transparent !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  user-select: none !important;
}

/* Nome do step */
[data-testid="step-name"],
[class*="StepName"] {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--tx-secondary) !important;
  letter-spacing: 0.03em !important;
}

/* Corpo do step (output) */
[data-testid="step-output"],
[class*="StepOutput"],
[class*="StepContent"] {
  padding: 8px 14px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.80rem !important;
  color: var(--tx-secondary) !important;
  line-height: 1.75 !important;
  white-space: pre-wrap !important;
  border-top: 1px solid var(--bd-subtle) !important;
  background: rgba(0,0,0,.15) !important;
}

/* Barra lateral colorida do step */
[data-testid="step"],
[class*="StepContainer"] {
  border-left: 2px solid var(--ac-gold-dim) !important;
}

/* Fade-in quando step aparece */
@keyframes stepIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-testid="step"] { animation: stepIn 0.25s ease both !important; }

/* ══════════════════════════════════════
   MARKDOWN
══════════════════════════════════════ */
.markdown-body,
[class*="markdown"] {
  font-size: 0.95rem !important;
  line-height: 1.72 !important;
  color: var(--tx-primary) !important;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  color: var(--tx-primary) !important;
  font-weight: 600 !important;
  margin-top: 1.4em !important;
  margin-bottom: 0.5em !important;
}
.markdown-body h1 { font-size: 1.2em !important; }
.markdown-body h2 { font-size: 1.05em !important; }
.markdown-body h3 { font-size: 0.97em !important; }

.markdown-body blockquote {
  border-left: 2px solid var(--ac-gold-dim) !important;
  background: rgba(201,168,76,.05) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  padding: 8px 14px !important;
  margin: 10px 0 !important;
  color: var(--tx-secondary) !important;
  font-style: italic !important;
}

.markdown-body code {
  font-family: var(--font-mono) !important;
  font-size: 0.86em !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid var(--bd-subtle) !important;
  border-radius: 5px !important;
  padding: 1px 5px !important;
  color: #b5c8f0 !important;
}

.markdown-body pre {
  background: #13141a !important;
  border: 1px solid var(--bd-subtle) !important;
  border-radius: var(--r-sm) !important;
  padding: 7px 8px !important;
  overflow-x: auto !important;
}
.markdown-body pre code {
  background: none !important;
  border: none !important;
  color: #c5cde0 !important;
  padding: 0 !important;
}

.markdown-body strong { color: var(--tx-primary) !important; font-weight: 600 !important; }
.markdown-body em     { color: var(--tx-secondary) !important; }
.markdown-body a      { color: var(--ac-gold) !important; text-decoration: none !important; }
.markdown-body a:hover { text-decoration: underline !important; }

.markdown-body ul li::marker,
.markdown-body ol li::marker { color: var(--ac-gold-dim) !important; }

.markdown-body hr {
  border: none !important;
  border-top: 1px solid var(--bd-subtle) !important;
  margin: 1.5em 0 !important;
}

.markdown-body table { border-collapse: collapse !important; width: 100% !important; font-size: 0.9em !important; }
.markdown-body th {
  background: rgba(255,255,255,.04) !important;
  color: var(--tx-secondary) !important;
  font-weight: 600 !important;
  font-size: 0.78em !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 8px 12px !important;
  border: 1px solid var(--bd-subtle) !important;
}
.markdown-body td {
  padding: 7px 12px !important;
  border: 1px solid var(--bd-subtle) !important;
  color: var(--tx-primary) !important;
}
.markdown-body tr:nth-child(even) td { background: rgba(255,255,255,.02) !important; }

/* ══════════════════════════════════════
   INPUT BAR — limpo e moderno
══════════════════════════════════════ */
[data-testid="chat-input"],
[class*="InputBox"],
[class*="inputBox"] {
  background: var(--bg-base) !important;
  border-top: 1px solid var(--bd-subtle) !important;
  padding: 12px 16px 8px !important;
}

/* Textarea */
textarea,
[contenteditable="true"],
.MuiInputBase-input,
[class*="chatInput"] textarea {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--bd-subtle) !important;
  border-radius: var(--r-md) !important;
  color: var(--tx-primary) !important;
  font-family: var(--font) !important;
  font-size: 0.95rem !important;
  padding: 12px 14px !important;
  transition: border-color 0.15s !important;
  resize: none !important;
}
textarea:focus, [contenteditable="true"]:focus {
  border-color: rgba(201,168,76,.35) !important;
  outline: none !important;
  background: var(--bg-elevated) !important;
}
textarea::placeholder { color: var(--tx-muted) !important; }

/* Botão enviar — círculo dourado */
[data-testid="send-button"],
button[aria-label*="send"],
button[aria-label*="Send"] {
  background: var(--ac-gold) !important;
  color: #111 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  box-shadow: none !important;
  transition: opacity 0.15s, transform 0.15s !important;
  font-weight: 700 !important;
}
[data-testid="send-button"]:hover {
  opacity: 0.85 !important;
  transform: scale(1.05) !important;
}
[data-testid="send-button"]:disabled {
  opacity: 0.35 !important;
  transform: none !important;
}

/* Botão stop */
[data-testid="stop-button"],
button[aria-label*="stop"] {
  background: rgba(239,68,68,.15) !important;
  border: 1px solid rgba(239,68,68,.3) !important;
  color: #f87171 !important;
  border-radius: 50% !important;
}

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
[class*="ThreadHistory"],
aside,
.MuiDrawer-root,
[class*="sidebar"] {
  background: var(--bg-surface) !important;
  border-right: 1px solid var(--bd-subtle) !important;
}

[class*="ThreadListItem"],
[class*="thread-item"] {
  border-radius: var(--r-sm) !important;
  transition: background 0.12s !important;
  color: var(--tx-secondary) !important;
}
[class*="ThreadListItem"]:hover { background: rgba(255,255,255,.05) !important; }
[class*="ThreadListItem"][class*="active"] {
  background: rgba(201,168,76,.1) !important;
  color: var(--tx-primary) !important;
  border-left: 2px solid var(--ac-gold) !important;
}

/* ══════════════════════════════════════
   BOTÃO NOVA CONSULTA
══════════════════════════════════════ */
[data-testid="new-chat-button"],
button[class*="newChat"],
button[aria-label*="New chat"] {
  border: 1px solid var(--bd-medium) !important;
  background: transparent !important;
  color: var(--tx-secondary) !important;
  border-radius: var(--r-sm) !important;
  font-size: 0.82rem !important;
  transition: all 0.15s !important;
}
[data-testid="new-chat-button"]:hover {
  border-color: var(--ac-gold-dim) !important;
  color: var(--ac-gold) !important;
  background: var(--ac-gold-glow) !important;
}

/* ══════════════════════════════════════
   WATERMARK / FOOTER
══════════════════════════════════════ */
[class*="watermark"], footer, [class*="footer"] {
  font-size: 0.72rem !important;
  color: var(--tx-muted) !important;
  text-align: center !important;
}

/* ══════════════════════════════════════
   ANIMAÇÕES
══════════════════════════════════════ */
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-testid="message"] {
  animation: msgIn 0.2s ease both !important;
}

/* Dots do loading */
[class*="typing"] span,
[class*="loadingDot"],
[class*="dot"] {
  background: var(--ac-gold) !important;
  opacity: 0.7 !important;
}

/* ══════════════════════════════════════
   MUI GLOBAL CLEANUP
══════════════════════════════════════ */
.MuiPaper-root {
  background: var(--bg-surface) !important;
  color: var(--tx-primary) !important;
  box-shadow: none !important;
}

.MuiDivider-root {
  border-color: var(--bd-subtle) !important;
}

.MuiTypography-root {
  color: var(--tx-primary) !important;
}

.MuiIconButton-root {
  color: var(--tx-muted) !important;
  transition: color 0.15s !important;
}
.MuiIconButton-root:hover {
  color: var(--tx-secondary) !important;
  background: rgba(255,255,255,.05) !important;
}

/* Chip/tag (estratégias de busca) */
.MuiChip-root,
[class*="MuiChip"] {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid var(--bd-subtle) !important;
  color: var(--tx-secondary) !important;
  font-size: 0.78rem !important;
}

/* ══════════════════════════════════════════════════════
   v21.1 — LAYOUT CLAUDE: sem avatares laterais
   Ganha ~50px de largura por mensagem
══════════════════════════════════════════════════════ */

/* ── Esconde avatares / ícones circulares das mensagens ── */
[class*="MessageAvatar"],
[class*="messageAvatar"],
[class*="avatar"],
[class*="Avatar"],
[data-testid="message-avatar"],
[data-testid*="avatar"],
/* Ícone cinza circular à esq do step */
[data-testid="step"] > [class*="MuiAvatar"],
[data-testid="step"] > svg,
[class*="StepIcon"],
[class*="step-icon"] {
  display: none !important;
}

/* Remove o padding-left reservado para o avatar */
[class*="MessageContent"],
[class*="message-content"],
[data-testid="message-content"],
[class*="MuiStack"][class*="message"] {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Garante que a bolha do assistente use 100% da largura disponível */
[data-testid="assistant-message"],
[class*="AssistantMessage"],
[class*="assistant-message"] {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
}

/* Garante que a bolha do usuário fique alinhada à direita */
[data-testid="user-message"],
[class*="UserMessage"],
[class*="user-message"] {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* ── Reasoning box estilo Claude ── */
/* Barra compacta com ícone animado (spinner) + texto "Pesquisando..." */
[data-testid="step"],
[class*="StepContainer"],
[class*="Step_step"] {
  /* Remove borda lateral vermelha/colorida e deixa como card neutro */
  border-left: none !important;
  border: 1px solid var(--bd-subtle) !important;
  border-radius: var(--r-md) !important;
  background: var(--bg-surface) !important;
  margin: 4px 0 8px !important;
  overflow: hidden !important;
}

/* Header do step — linha com ícone animado + nome */
[data-testid="step-header"],
[class*="StepHeader"],
[class*="step-header"] {
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

/* Ícone animado antes do nome do step (pseudo-elemento) */
[data-testid="step-header"]::before,
[class*="StepHeader"]::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid var(--bd-medium) !important;
  border-top-color: var(--ac-gold) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  animation: spin 0.9s linear infinite !important;
}

/* Quando o step está concluído (contém "✅"), para o spinner */
[data-testid="step-header"][aria-expanded]::before {
  animation: spin 0.9s linear infinite !important;
}

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

/* Nome do step — pequeno e discreto como no Claude */
[data-testid="step-name"],
[class*="StepName"],
[class*="step-name"] {
  font-size: 0.80rem !important;
  font-weight: 400 !important;
  color: var(--tx-muted) !important;
  letter-spacing: 0.01em !important;
  font-style: italic !important;
}

/* Corpo do step expandido */
[data-testid="step-output"],
[class*="StepOutput"],
[class*="StepContent"] {
  font-size: 0.79rem !important;
  color: var(--tx-muted) !important;
  padding: 6px 12px 10px !important;
  border-top: 1px solid var(--bd-subtle) !important;
  background: rgba(0,0,0,.12) !important;
  font-family: var(--font-mono) !important;
  line-height: 1.65 !important;
}

/* Chevron do expand — ícone sutil */
[data-testid="step-expand"],
[class*="ExpandIcon"],
[class*="ChevronIcon"],
[class*="expand-icon"] {
  color: var(--tx-muted) !important;
  margin-left: auto !important;
  opacity: 0.5 !important;
}

/* Remove o ícone grande cinza do step (o círculo padrão do chainlit) */
[data-testid="step"] [class*="MuiAvatar"],
[data-testid="step"] [class*="avatar"],
[class*="StepContainer"] [class*="MuiAvatar"] {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   v23.0 — FORÇAR remoção de todos os avatares/ícones
   Usa !important em todas as variações possíveis de seletor
══════════════════════════════════════════════════════ */

/* Remove qualquer elemento com "avatar" no nome da classe */
[class*="avatar"],
[class*="Avatar"],
[class*="AVATAR"],
/* Ícone circular padrão Chainlit à esquerda de mensagens */
[data-testid*="avatar"],
[data-testid="bot-avatar"],
[data-testid="user-avatar"],
/* Avatar MUI */
.MuiAvatar-root,
[class*="MuiAvatar"],
/* Ícone do step (círculo cinza) */
[class*="stepIcon"],
[class*="StepIcon"],
[data-testid="step-icon"],
/* Qualquer SVG dentro do step que não seja o chevron */
[data-testid="step"] > div > svg:first-child,
[data-testid="step"] > svg {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Remove o espaço reservado para avatar (padding-left) */
[class*="MessageRow"],
[class*="message-row"],
[class*="MessageWrapper"],
[data-testid="message-row"] {
  padding-left: 0 !important;
  margin-left: 0 !important;
  gap: 0 !important;
}

/* Remove gap entre avatar (inexistente) e conteúdo */
[class*="MuiStack"][class*="message"],
[class*="MuiBox"][class*="message"] {
  gap: 0 !important;
}

/* ══════════════════════════════════════════════════════
   v25.0 — Ajustes solicitados
   • Logo no topo das mensagens do assistente
   • Remove avatar circular à direita
   • Oculta scrollbar do textarea
   • Textarea sem borda / fundo igual ao container
   • Botão enviar compacto ao lado do input
══════════════════════════════════════════════════════ */

/* ── 1. Boas-vindas (chainlit.md) — oculta após chat iniciar ── */
/* Quando há mensagens, o welcome-screen some */
[data-testid="welcome-screen"],
[class*="WelcomeScreen"],
[class*="welcome-screen"] {
  display: none !important;
}

/* ── 2. Avatar circular à direita das msgs — remove completamente ── */
/* (complementa regras já existentes no v23.0) */
[class*="MessageAvatar"],
[class*="messageAvatar"],
.MuiAvatar-root,
[class*="MuiAvatar"],
[data-testid*="avatar"],
[data-testid="bot-avatar"],
[data-testid="user-avatar"],
/* span com rounded-full pequeno (h-5 w-5) usado pelo Chainlit */
span.rounded-full[class*="shrink-0"],
span[class*="overflow-hidden"][class*="rounded-full"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── 3. Ocultar scrollbar do textarea ── */
#chat-input,
textarea[id="chat-input"],
textarea {
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}
#chat-input::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}

/* ── 4. Textarea: sem borda, fundo igual ao container ── */
#chat-input,
textarea[id="chat-input"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* ── 5. Botão enviar: compacto, ao lado do textarea (linha única) ── */
#message-composer {
  min-height: unset !important;
  padding: 8px 12px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
/* Garante que o textarea ocupe o espaço restante */
#message-composer .relative.w-full {
  flex: 1 !important;
}
/* Área dos botões fica do lado direito */
#message-composer .flex.items-center.justify-between {
  flex: 0 !important;
  flex-direction: row !important;
}
#message-composer .flex.items-center.-ml-1\\.5 {
  display: none !important; /* remove área vazia esquerda */
}