/* =====================================================================
   Mel IA — assistente na home_page (usuário logado)
   Central de Ajuda Méliuz · direção "Assistente em destaque" (1c)
   Cores/tipografia seguem o Méliuz Design System.
   ===================================================================== */

:root {
  --mel-pink-900: #E02D6E; /* rosa marca */
  --mel-pink-500: #F34986;
  --mel-pink-300: #FD9CBF;
  --mel-pink-100: #FFE8F2;
  --mel-pink-050: #FBEEF4;
  --mel-ink:      #2A2A2A;
  --mel-gray-600: #767676;
  --mel-gray-300: #ECECEC;
  --mel-white:    #FFFFFF;
}

/* ---------- Integração com o hero do tema (usuário logado) ----------
   O tema define .hero-unit com altura FIXA (522px), flex center, margin
   negativo e background próprio — o que corta a faixa da Mel IA (mais alta)
   por cima do topbar e por baixo de "Principais dúvidas". Quando a Mel IA
   existe, soltamos a altura fixa e damos respiro pro topbar (que na home é
   position:absolute). Para o usuário anônimo (.mel-ia ausente) nada muda. */
.hero-unit:has(.mel-ia) {
  display: block;
  box-sizing: border-box;
  height: auto;
  min-height: 0;
  margin: 0;
  z-index: auto;
  width: 100%;
  max-width: none;
  background: var(--mel-pink-050); /* rosa full-bleed, igual ao hero original */
  /* !important vence o .lt-pt-9 do tema (padding-top: 4rem !important) */
  padding: 152px 20px 56px !important;
}
.hero-unit .hero-content:has(.mel-ia) {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
/* A faixa deixa de ser um "card" (o hero já é rosa): vira só o wrapper
   do conteúdo. Os cartões brancos (atalhos + painel) flutuam sobre o rosa. */
.mel-ia__band {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

/* ---------- Layout dividido ---------- */
.mel-ia {
  display: grid;
  grid-template-columns: .95fr 1.35fr;
  gap: 40px;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  font-family: 'Hero New Regular', 'Hero New', sans-serif;
}

/* ---------- Coluna esquerda: convite ---------- */
.mel-ia__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mel-pink-100);
  border: 1px solid #F6C9DC;
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mel-pink-900);
}
.mel-ia__badge .material-symbols-outlined { font-size: 18px; }

.mel-ia__headline {
  margin: 0 0 12px;
  font-family: 'Hero New Bold', 'Hero New', sans-serif;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--mel-ink);
}
.mel-ia__sub {
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 26px;
  color: var(--mel-gray-600);
}

.mel-ia__shortcuts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mel-ia__shortcut {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  background: var(--mel-white);
  border: 1px solid var(--mel-gray-300);
  border-radius: 14px;
  padding: 14px 18px;
  transition: border-color .15s ease;
}
.mel-ia__shortcut:hover { border-color: var(--mel-pink-900); }
.mel-ia__shortcut-ico {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--mel-pink-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--mel-pink-900);
}
.mel-ia__shortcut-ico .material-symbols-outlined { font-size: 20px; }
.mel-ia__shortcut-label {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--mel-ink);
}
.mel-ia__shortcut .mel-ia__chev { color: #A9A9A9; font-size: 20px; }

/* ---------- Coluna direita: painel de chat ---------- */
.mel-ia__panel {
  display: flex;
  flex-direction: column;
  height: 600px;
  background: var(--mel-white);
  border: 1px solid var(--mel-gray-300);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(224, 45, 110, .35);
}
.mel-ia__panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  background: var(--mel-ink);
}
.mel-ia__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--mel-pink-900);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mel-ia__avatar .material-symbols-outlined { color: #fff; font-size: 24px; }
.mel-ia__panel-title { font-family:'Hero New Bold','Hero New',sans-serif; font-weight: 700; font-size: 16px; color: #fff; }
.mel-ia__status {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #C9C9C9; margin-top: 1px;
}
.mel-ia__status-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ED67C; }

/* #mel-ia-au-root é o container onde o React (assistant-ui) monta, direto
   dentro de .mel-ia__panel (flex column) — sem essa regra ele fica
   display:block e não participa do flex, então .mel-ia__thread nunca fica
   contido/scrollável e o composer é empurrado pra fora do painel em
   conversas longas. */
#mel-ia-au-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* thread */
.mel-ia__thread {
  flex: 1;
  padding: 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #FAFAFA;
}
.mel-ia__thread::-webkit-scrollbar { width: 6px; }
.mel-ia__thread::-webkit-scrollbar-thumb { background: #E4C6D4; border-radius: 99px; }

.mel-ia__empty {
  margin: auto;
  max-width: 320px;
  padding: 24px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--mel-gray-600);
}

.mel-ia__row { display: flex; gap: 10px; align-items: flex-start; animation: melPop .25s ease both; }
.mel-ia__row--user { justify-content: flex-end; }
.mel-ia__bot-ico {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--mel-pink-100);
  display: flex; align-items: center; justify-content: center;
}
.mel-ia__bot-ico .material-symbols-outlined { color: var(--mel-pink-900); font-size: 18px; }
/* continuação (várias bolhas seguidas): espaço no lugar do ícone */
.mel-ia__bot-ico--spacer { background: transparent; }

.mel-ia__bubble {
  max-width: 82%;
  padding: 13px 16px;
  font-size: 15px;
  line-height: 22px;
}
.mel-ia__bubble--bot {
  background: #fff;
  color: var(--mel-ink);
  border: 1px solid var(--mel-gray-300);
  border-radius: 4px 16px 16px 16px;
}
.mel-ia__bubble--user {
  background: var(--mel-ink);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}

/* artigos sugeridos */
.mel-ia__articles { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mel-ia__article {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--mel-gray-300);
  border-radius: 12px;
  padding: 10px 12px;
  transition: border-color .15s ease;
}
.mel-ia__article:hover { border-color: var(--mel-pink-900); }
.mel-ia__article .material-symbols-outlined:first-child { color: var(--mel-pink-900); font-size: 20px; flex-shrink: 0; }
.mel-ia__article-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mel-ia__article-title { font-size: 14px; font-weight: 600; color: var(--mel-ink); line-height: 18px; }
.mel-ia__article-snippet { font-size: 12px; color: var(--mel-gray-600); line-height: 16px; }
.mel-ia__article .mel-ia__chev { color: #A9A9A9; font-size: 18px; flex-shrink: 0; }

/* markdown dentro das bolhas do bot */
.mel-ia__bubble--bot p { margin: 0 0 8px; }
.mel-ia__bubble--bot p:last-child { margin-bottom: 0; }
.mel-ia__bubble--bot ul,
.mel-ia__bubble--bot ol { margin: 6px 0; padding-left: 20px; }
.mel-ia__bubble--bot li { margin: 2px 0; }
.mel-ia__bubble--bot a { color: var(--mel-pink-900); font-weight: 600; }
.mel-ia__bubble--bot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--mel-pink-050);
  padding: 1px 5px;
  border-radius: 5px;
}

/* bolha de erro */
.mel-ia__bubble--error { border-color: #F3B4B4; background: #FDEDED; color: #B42318; }

/* nota do sistema (ex.: conversa encerrada) */
.mel-ia__note {
  align-self: center;
  max-width: 90%;
  text-align: center;
  font-size: 12px;
  color: var(--mel-gray-600);
  background: var(--mel-gray-300);
  border-radius: 99px;
  padding: 6px 14px;
}

/* quick replies (botões de resposta rápida) */
.mel-ia__quick { display: flex; flex-wrap: wrap; gap: 8px; }
.mel-ia__quick-btn {
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--mel-pink-900);
  background: var(--mel-white);
  border: 1px solid var(--mel-pink-300);
  border-radius: 99px;
  padding: 8px 16px;
  transition: background .15s ease, color .15s ease;
}
.mel-ia__quick-btn:hover { background: var(--mel-pink-900); color: #fff; border-color: var(--mel-pink-900); }
.mel-ia__quick-btn:disabled { opacity: .5; cursor: default; }

/* csat (escala de avaliação) */
.mel-ia__csat { display: flex; flex-wrap: wrap; gap: 8px; }
.mel-ia__csat-btn {
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--mel-ink);
  background: var(--mel-white);
  border: 1px solid var(--mel-gray-300);
  border-radius: 10px;
  width: 40px; height: 40px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mel-ia__csat-btn:hover { background: var(--mel-pink-900); color: #fff; border-color: var(--mel-pink-900); }
.mel-ia__csat-btn:disabled { opacity: .5; cursor: default; }

/* typing */
.mel-ia__typing { display: flex; gap: 5px; padding: 16px; background: #F5F5F6; border-radius: 4px 16px 16px 16px; }
.mel-ia__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--mel-pink-900); animation: melDot 1.2s infinite; }
.mel-ia__typing span:nth-child(2) { animation-delay: .2s; }
.mel-ia__typing span:nth-child(3) { animation-delay: .4s; }

/* composer */
.mel-ia__composer {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--mel-gray-300);
  background: #fff;
}
.mel-ia__input {
  flex: 1;
  border: none; outline: none; resize: none;
  min-height: 22px;
  max-height: 110px;
  line-height: 22px;
  font-family: inherit;
  font-size: 15px;
  color: var(--mel-ink);
  background: transparent;
}
.mel-ia__send {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--mel-pink-900);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mel-ia__send .material-symbols-outlined { color: #fff; font-size: 22px; }

@keyframes melPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes melDot { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .hero-unit:has(.mel-ia) { padding: 104px 12px 32px !important; }
  .mel-ia__band { padding: 28px 20px; border-radius: 16px; }
  .mel-ia { grid-template-columns: 1fr; gap: 24px; }
  .mel-ia__headline { font-size: 28px; }
  .mel-ia__sub { font-size: 15px; line-height: 22px; }
  .mel-ia__panel { height: 520px; }
}

/* mel-ia css v2 */

/* ---------- Faixa-convite → chat do service-mel-ops (www.meliuz.com.br/mel) ----------
   O chat não é mais embutido (a página /mel não aceita iframe de outra
   origem). A faixa vende a conversa: proposta + benefícios + CTA à esquerda,
   prévia ilustrativa da conversa à direita. Todo clicável leva pra /mel. */

.mel-ia__headline-accent { color: var(--mel-pink-900); }

.mel-ia__perks {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mel-ia__perks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 99px;
  background: var(--mel-white);
  border: 1px solid var(--mel-gray-300);
  font-size: 13px;
  font-weight: 600;
  color: var(--mel-ink);
}
.mel-ia__perks .material-symbols-outlined { font-size: 18px; color: var(--mel-pink-900); }

.mel-ia__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--mel-pink-900);
  color: var(--mel-white);
  font-family: 'Hero New Bold', 'Hero New', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 28px -12px rgba(224, 45, 110, .7);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mel-ia__cta-btn:hover,
.mel-ia__cta-btn:focus-visible {
  background: var(--mel-pink-500);
  color: var(--mel-white);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -12px rgba(224, 45, 110, .8);
}
.mel-ia__cta-btn .material-symbols-outlined { font-size: 20px; transition: transform .15s ease; }
.mel-ia__cta-btn:hover .material-symbols-outlined { transform: translateX(3px); }
.mel-ia__cta-note { margin: 10px 0 0 6px; font-size: 13px; color: var(--mel-gray-600); }

/* Painel vira prévia: altura pelo conteúdo, não os 600px do chat embutido. */
.mel-ia__preview { height: auto; }

.mel-ia__preview-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 18px;
  background: #FAFAFA;
  min-height: 214px;
}
.mel-ia__preview-label {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #A9A9A9;
}
.mel-ia__preview-msg {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 20px;
  opacity: 0;
  animation: melPop .35s ease forwards;
}
.mel-ia__preview-msg--user {
  align-self: flex-end;
  background: var(--mel-ink);
  color: var(--mel-white);
  border-bottom-right-radius: 6px;
  animation-delay: .3s;
}
.mel-ia__preview-msg--mel {
  align-self: flex-start;
  background: var(--mel-white);
  color: var(--mel-ink);
  border: 1px solid var(--mel-gray-300);
  border-bottom-left-radius: 6px;
  animation-delay: 2.2s;
}
.mel-ia__preview-msg--mel strong { color: var(--mel-pink-900); }

/* "digitando…" aparece entre a pergunta e a resposta e some quando ela chega */
.mel-ia__preview-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--mel-white);
  border: 1px solid var(--mel-gray-300);
  opacity: 0;
  animation: melTypingWindow 2.2s ease forwards;
}
.mel-ia__preview-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mel-pink-300);
  animation: melDot 1s infinite;
}
.mel-ia__preview-typing span:nth-child(2) { animation-delay: .15s; }
.mel-ia__preview-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes melTypingWindow {
  0%, 40%  { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; }
  45%, 92% { opacity: 1; max-height: 40px; }
  100%     { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -12px; border-width: 0; }
}

.mel-ia__preview-foot {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--mel-gray-300);
  background: var(--mel-white);
}
.mel-ia__preview-foot-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mel-gray-600);
}
.mel-ia__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mel-ia__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid #F6C9DC;
  background: var(--mel-pink-050);
  font-size: 13px;
  font-weight: 600;
  color: var(--mel-pink-900);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.mel-ia__chip .material-symbols-outlined { font-size: 17px; }
.mel-ia__chip:hover,
.mel-ia__chip:focus-visible {
  background: var(--mel-pink-100);
  border-color: var(--mel-pink-900);
  color: var(--mel-pink-900);
  text-decoration: none;
}

.mel-ia__fake-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--mel-gray-300);
  background: var(--mel-white);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mel-ia__fake-input:hover,
.mel-ia__fake-input:focus-visible {
  border-color: var(--mel-pink-900);
  box-shadow: 0 0 0 4px var(--mel-pink-100);
  text-decoration: none;
}
.mel-ia__fake-input-text { flex: 1; font-size: 15px; color: #A9A9A9; }
.mel-ia__fake-input-send {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mel-pink-900);
  display: flex; align-items: center; justify-content: center;
}
.mel-ia__fake-input-send .material-symbols-outlined { color: var(--mel-white); font-size: 22px; }

@media (max-width: 900px) {
  .mel-ia__preview { height: auto; }
  .mel-ia__preview-thread { min-height: 0; padding: 18px 16px 14px; }
  .mel-ia__preview-foot { padding: 16px; }
  .mel-ia__cta-btn { width: 100%; justify-content: center; box-sizing: border-box; }
  .mel-ia__cta-note { margin-left: 0; text-align: center; }
}

/* Sem animação: mostra a conversa já pronta, sem o "digitando…". */
@media (prefers-reduced-motion: reduce) {
  .mel-ia__preview-msg { opacity: 1; animation: none; }
  .mel-ia__preview-typing { display: none; }
  .mel-ia__cta-btn, .mel-ia__cta-btn .material-symbols-outlined { transition: none; transform: none; }
}