/* =============================================
   Bot de Atendimento — Stylesheet v2.1
   Widget flutuante (botão + painel lateral direito).
   Até a v1.4.0 o chat ocupava a página inteira (#ce-app, modos split/chat)
   — essas regras saíram junto com o editor de seções embutido no front-end.
   Na v2.1 saíram também os estilos do microfone/leitura em voz alta
   (#ce-mic, is-recording, ce-mic-pulse) — o chat passou a ser só por texto.
   ============================================= */

:root {
  --ce-blue:       #2563eb;
  --ce-blue-dark:  #1e3a5f;
  --ce-blue-hover: #1d4ed8;
  --ce-blue-light: #eff6ff;
  --ce-green:      #16a34a;
  --ce-red:        #dc2626;
  --ce-yellow:     #f59e0b;
  --ce-gray-50:    #f8fafc;
  --ce-gray-100:   #f1f5f9;
  --ce-gray-200:   #e2e8f0;
  --ce-gray-400:   #94a3b8;
  --ce-gray-600:   #475569;
  --ce-gray-800:   #1e293b;
  --ce-white:      #ffffff;
  --ce-radius:     12px;
  --ce-radius-sm:  8px;
  --ce-shadow:     0 2px 16px rgba(0,0,0,.09);
  --ce-shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --ce-font:       'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ── WIDGET — BOTÃO FLUTUANTE ─────────────── */

.ce-widget-launcher {
  /* Canto ESQUERDO de propósito: os widgets de terceiros (acessibilidade/
     onetap, Libras/VLibras) ficam todos no canto direito — ficando à
     esquerda o botão não disputa espaço com nenhum deles. */
  /* !important nas propriedades abaixo: o tema (exs-education) tem uma regra
     genérica `[type="button"] { position:relative; display:inline-block; ... }`
     que empata em especificidade com esta classe (ambas 0,1,0) e, entrando
     depois na cascata, vencia — o botão ficava position:relative dentro do
     fluxo normal do documento (lá embaixo, no rodapé) em vez de fixed no
     canto da tela, ou seja, invisível sem rolar a página inteira. */
  position: fixed !important;
  left: 20px;
  bottom: 24px;
  width: 60px !important;
  height: 60px !important;
  /* padding:0 !important: mesmo bug do botão de enviar (#ce-send) — o tema
     tem um padding genérico de botão (15px 23px) que, dentro do flexbox,
     sobrava para o ícone quase nenhum espaço e o flex-shrink padrão o
     encolhia (chegava a ficar com 14px de largura em vez do tamanho definido). */
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--ce-blue) !important;
  color: var(--ce-white) !important;
  box-shadow: var(--ce-shadow-lg);
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  z-index: 999998;
  transition: background .15s, transform .15s;
}

.ce-widget-launcher:hover  { background: var(--ce-blue-hover); transform: scale(1.05); }
.ce-widget-launcher:active { transform: scale(.96); }

.ce-widget-launcher:focus-visible {
  outline: 3px solid var(--ce-blue-dark);
  outline-offset: 3px;
}

.ce-widget-launcher__icon {
  flex-shrink: 0;
  width: 46px !important;
  height: 46px !important;
}

/* ── WIDGET — PAINEL LATERAL ESQUERDO ─────── */

.ce-widget-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  font-family: var(--ce-font);
  color: var(--ce-gray-800);
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  box-shadow: 8px 0 32px rgba(0,0,0,.18);
  z-index: 999999;
  transition: transform .28s ease, opacity .28s ease, visibility 0s linear .28s;
}

.ce-widget-panel.is-open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: transform .28s ease, opacity .28s ease, visibility 0s;
}

.ce-widget-panel .ce-panel--chat {
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .ce-widget-panel {
    transition: opacity .01s linear, visibility 0s linear;
  }
}

@media (max-width: 600px) {
  .ce-widget-panel { max-width: 100%; }
  .ce-widget-launcher { left: 14px; bottom: 16px; width: 54px; height: 54px; }
  body.ce-widget-open { overflow: hidden; }
}

/* ── PAINEL DE CHAT (conteúdo interno) ────── */

.ce-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ce-white);
}

/* ── PANEL HEADER ─────────────────────────── */

.ce-panel__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: var(--ce-blue-dark);
  color: var(--ce-white);
  flex-shrink: 0;
}

.ce-panel__header-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ce-blue);
  color: var(--ce-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ce-panel__header-icon svg {
  width: 22px;
  height: 22px;
}

.ce-panel__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--ce-white);
}

.ce-panel__subtitle {
  font-size: 12px;
  margin: 2px 0 0;
  color: rgba(255,255,255,.7);
}

/* Agrupa os botões de ação do header (compartilhar + fechar) — o
   margin-left:auto fica SÓ aqui, no grupo, não em cada botão: com dois
   botões usando a mesma classe .ce-btn-icon--header, cada um com seu
   próprio auto-margin, o espaço livre seria dividido ENTRE eles (abrindo
   um vão no meio) em vez de colar os dois juntos na direita. */
.ce-panel__header-actions {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ce-btn-icon--header {
  /* mesmo motivo do !important em .ce-widget-launcher acima: este também é
     um <button type="button">, alvo do reset genérico do tema. */
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.12) !important;
  color: var(--ce-white) !important;
  font-size: 16px;
  cursor: pointer !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.ce-btn-icon--header:hover { background: rgba(255,255,255,.22); }

.ce-btn-icon--header svg {
  width: 16px;
  height: 16px;
}

.ce-btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--ce-gray-400);
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .15s, color .15s;
  line-height: 1;
}

/* ── CHAT MESSAGES ────────────────────────── */

.ce-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

/* Largura maior (era 5px) a pedido do usuário — mais fácil de mirar e
   arrastar pra rolar a conversa, sem ficar grossa a ponto de atrapalhar o
   texto das mensagens. */
.ce-messages { scrollbar-width: auto; scrollbar-color: var(--ce-gray-200) transparent; } /* Firefox */
.ce-messages::-webkit-scrollbar { width: 10px; }
.ce-messages::-webkit-scrollbar-track { background: transparent; }
.ce-messages::-webkit-scrollbar-thumb {
  background: var(--ce-gray-200);
  border-radius: 99px;
  border: 2px solid var(--ce-white);
  background-clip: padding-box;
}
.ce-messages::-webkit-scrollbar-thumb:hover { background: var(--ce-gray-400); background-clip: padding-box; }

/* Message row */
.ce-msg {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  animation: ce-fade-up .25s ease both;
}

.ce-msg--user {
  flex-direction: row-reverse;
}

.ce-msg__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ce-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.ce-msg--user .ce-msg__avatar {
  background: var(--ce-blue-light);
}

.ce-msg--bot .ce-msg__avatar {
  background: var(--ce-blue);
  color: var(--ce-white);
}

.ce-msg__avatar svg {
  width: 18px;
  height: 18px;
}

.ce-msg__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 80%;
}

.ce-msg--user .ce-msg__body {
  align-items: flex-end;
}

.ce-msg__bubble {
  background: var(--ce-white);
  border: 1px solid var(--ce-gray-200);
  border-radius: var(--ce-radius);
  border-bottom-left-radius: 3px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  text-align: justify;
}

.ce-msg--user .ce-msg__bubble {
  background: var(--ce-blue);
  color: var(--ce-white);
  border-color: var(--ce-blue);
  border-radius: var(--ce-radius);
  border-bottom-right-radius: 3px;
}

.ce-msg__bubble p { margin: 0 0 8px; }
.ce-msg__bubble p:last-child { margin-bottom: 0; }
.ce-msg__bubble ul, .ce-msg__bubble ol { margin: 6px 0 6px 18px; }
.ce-msg__bubble li { margin-bottom: 4px; }
.ce-msg__bubble strong { font-weight: 600; }
.ce-msg__bubble table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ce-msg__bubble th, .ce-msg__bubble td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.15); text-align: left; }
.ce-msg--bot .ce-msg__bubble th { background: var(--ce-blue-dark); color: #fff; }
.ce-msg--bot .ce-msg__bubble td { border-color: var(--ce-gray-200); }

/* Section label in bot reply */
.ce-msg__section-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ce-blue);
  background: var(--ce-blue-light);
  padding: 3px 8px;
  border-radius: 99px;
  margin-bottom: 8px;
}

/* Timestamp */
.ce-msg__time {
  font-size: 11px;
  color: var(--ce-gray-400);
}

/* Example blocks below bot reply */
.ce-msg__examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.ce-example-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  background: var(--ce-white);
  border: 1px solid var(--ce-blue);
  color: var(--ce-blue);
  padding: 4px 10px;
  border-radius: 99px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.ce-example-chip:hover {
  background: var(--ce-blue);
  color: var(--ce-white);
}

/* Alternative-section chips: placar apertado entre 1ª e 2ª seção */
.ce-msg__alternatives {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.ce-alt-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  background: var(--ce-white);
  border: 1px solid var(--ce-yellow);
  color: var(--ce-gray-800);
  padding: 8px 12px;
  border-radius: var(--ce-radius-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.ce-alt-chip:hover {
  background: #fffbeb;
  border-color: var(--ce-yellow);
}

/* Chips de GRUPO (menu de "assuntos" quando a busca não encontra nada) —
   uma opção por linha, ocupando a largura toda da bolha (fácil de mirar no
   toque, lista curta de qualquer jeito), mas com o mesmo padding/fonte
   enxutos do .ce-example-chip — não a caixa grande do .ce-alt-chip. */
.ce-msg__groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.ce-group-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  background: var(--ce-white);
  border: 1px solid var(--ce-blue);
  color: var(--ce-blue);
  padding: 4px 10px;
  border-radius: var(--ce-radius-sm);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.ce-group-chip:hover {
  background: var(--ce-blue);
  color: var(--ce-white);
}

/* Nota de "+N outros" abaixo da lista de assuntos/seções capada (ver
   MAX_GROUPS_SHOWN/MAX_TITLES_SHOWN no JS) */
.ce-msg__more-note {
  font-size: 12px;
  color: var(--ce-gray-400);
  margin-top: 4px;
}

/* Botão "Não fui respondido(a) corretamente" — abaixo da resposta */
.ce-msg__feedback {
  margin-top: 8px;
}

.ce-feedback-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  background: var(--ce-white);
  border: 1px solid var(--ce-red);
  color: var(--ce-red);
  padding: 4px 10px;
  border-radius: var(--ce-radius-sm);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.ce-feedback-btn:hover:not(:disabled) {
  background: var(--ce-red);
  color: var(--ce-white);
}

.ce-feedback-btn:disabled {
  opacity: .6;
  cursor: default;
}

.ce-msg__feedback--sent {
  font-size: 12px;
  color: var(--ce-green);
}

/* "Not found" message */
.ce-msg--notfound .ce-msg__bubble {
  background: var(--ce-gray-50);
  border-color: var(--ce-yellow);
  color: var(--ce-gray-600);
}

/* Typing indicator */
.ce-typing .ce-msg__bubble {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 14px;
}

.ce-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ce-gray-400);
  animation: ce-bounce .9s infinite;
}
.ce-dot:nth-child(2) { animation-delay: .15s; }
.ce-dot:nth-child(3) { animation-delay: .30s; }

/* ── INPUT AREA ───────────────────────────── */

.ce-input-area {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--ce-gray-200);
  background: var(--ce-white);
  flex-shrink: 0;
}

.ce-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--ce-gray-50);
  border: 1.5px solid var(--ce-gray-200);
  border-radius: var(--ce-radius);
  padding: 10px 10px 10px 14px;
  transition: border-color .2s;
}

.ce-input-wrap:focus-within {
  border-color: var(--ce-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

#ce-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--ce-font);
  font-size: 14px;
  color: var(--ce-gray-800);
  resize: none;
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
}

#ce-input::placeholder { color: var(--ce-gray-400); }

#ce-send {
  /* !important em width/height/padding: o tema tem um padding genérico de
     botão (15px 23px) que, somado à largura fixa de 38px do botão, sobrava
     menos espaço interno que o ícone precisava — o flexbox então encolhia o
     SVG (flex-shrink padrão) até 0px de largura, deixando o ícone invisível
     mesmo com stroke/fill corretos. */
  flex-shrink: 0;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 10px;
  border: none !important;
  background: var(--ce-blue) !important;
  color: var(--ce-white) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
}

/* !important: o tema tem uma regra genérica de reset de `button` que, entrando
   depois na cascata, sobrescrevia a cor do ícone (stroke) para a mesma cor do
   fundo do botão, deixando o ícone de enviar invisível. */
#ce-send svg {
  flex-shrink: 0;
  stroke: var(--ce-white) !important;
  fill: none !important;
  width: 20px !important;
  height: 20px !important;
}

#ce-send:hover { background: var(--ce-blue-hover) !important; }
#ce-send:active { transform: scale(.93); }
#ce-send:disabled { background: var(--ce-gray-200) !important; cursor: default; }

/* ── ANIMATIONS ───────────────────────────── */

@keyframes ce-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ce-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}

/* ── RESPONSIVE ───────────────────────────── */

@media (max-width: 768px) {
  .ce-panel__header {
    padding: 14px 16px;
  }
}

/* ── NOTICE (toast) ───────────────────────── */

.ce-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--ce-gray-800);
  color: var(--ce-white);
  padding: 10px 18px;
  border-radius: var(--ce-radius-sm);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--ce-shadow-lg);
  z-index: 9999;
  animation: ce-fade-up .25s ease both;
}

.ce-toast--success { background: var(--ce-green); }
.ce-toast--error   { background: var(--ce-red); }