/* ai-panel.css — o painel deslizante do assistente de IA.
 *
 * Recorte das linhas 126-146 do monolito.
 * #ai-panel agora e <aside>; o seletor por id nao muda.
 */

#ai-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: min(460px, 100vw);
  background: var(--bg2); border-left: 1px solid var(--border);
  z-index: 300; display: flex; flex-direction: column;
  transform: translateX(100%); transition: .3s cubic-bezier(.4, 0, .2, 1);
}
#ai-panel.open { transform: translateX(0) }

.ai-head {
  padding: 18px 20px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.ai-title {
  font-family: var(--fonte-titulo); font-size: 20px; font-weight: 700;
  color: var(--text); display: flex; align-items: center; gap: 10px;
}
.ai-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green); flex-shrink: 0;
}

.ai-messages {
  flex: 1; overflow-y: auto; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.ai-msg {
  max-width: 85%; padding: 11px 15px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.65; white-space: pre-wrap;
}
.ai-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--petroleo), var(--petroleo2));
  color: #fff; border-bottom-right-radius: 4px;
}
.ai-msg.bot {
  align-self: flex-start; background: var(--bg3);
  border: 1px solid var(--border); color: var(--text);
  border-bottom-left-radius: 4px;
}

.ai-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 16px 4px; border-top: 1px solid var(--border);
}

/* As sugestoes eram <div onclick>. Viraram <button> pelo mesmo motivo dos
 * itens do menu: <div> com onclick nao e alcancavel por teclado (WCAG 2.1.1).
 * As tres primeiras declaracoes sao o que zera a aparencia nativa do botao. */
.suggestion-chip {
  appearance: none; -webkit-appearance: none; font-family: inherit;

  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 20px; padding: 5px 12px; font-size: 11.5px;
  color: var(--text2); cursor: pointer; transition: .15s; white-space: nowrap;
}
/* A cor era var(--petroleo): 2,81:1 sobre este fundo (--petroleo-glow sobre --bg2).
 * --petroleo-text da 5,11:1. */
.suggestion-chip:hover { border-color: var(--petroleo); color: var(--petroleo-text); background: var(--petroleo-glow) }

.ai-input-wrap {
  padding: 13px 14px; border-top: 1px solid var(--border);
  display: flex; gap: 10px; flex-shrink: 0;
}
.ai-input-wrap input {
  flex: 1; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 15px;
  color: var(--text); font-size: 13px; font-family: var(--fonte-corpo); outline: none;
}
.ai-input-wrap input:focus { border-color: var(--petroleo) }

.ai-send {
  background: linear-gradient(135deg, var(--petroleo), var(--petroleo2));
  border: none; border-radius: 10px; width: 42px; height: 42px;
  cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
}
.ai-send:hover { opacity: .85 }

.typing-dots { display: flex; gap: 5px; padding: 12px 16px; align-self: flex-start }
.typing-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--petroleo); animation: dotPulse 1.3s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s }
.typing-dots span:nth-child(3) { animation-delay: .4s }

/* ------------------------------------------------------------------- mobile */

/* 16px para o iOS nao ampliar a pagina ao focar o campo. Ver base.css. */
@media (max-width: 768px) {
  .ai-input-wrap input { font-size: 16px }
}