/* =====================================================================
   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; }

/* 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__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;
  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 */