/* ═══════════════════════════════════════════════════════════
   JESSIE-ASSISTANT — assistente flutuante (canto inferior direito)
   com perguntas prontas e respostas sobre o G2-ERP.
   (Por ora é um FAQ guiado; no futuro vira IA de verdade.)
   ═══════════════════════════════════════════════════════════ */

#jaRoot { position: fixed; z-index: 950; }

/* ── Jessie no rodapé do menu lateral: imagem FIXA + nameplate ── */
.side-jessie {
  margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%;
  background: none; border: none; padding: 14px 4px 4px; cursor: pointer;
  color: var(--tx); font-family: inherit;
}
/* imagem FIXA, encostada no nameplate (sem flutuar). O card logo abaixo
   "apoia" a imagem e esconde o corte da base — assim não parece cortada. */
.side-jessie .sj-full {
  width: 100%; max-width: 192px; height: auto; display: block; margin-bottom: -8px;
}

/* nameplate (card) embaixo — combina com a Jessie e segue o tema.
   Fundo OPACO (tinta do accent sobre var(--s2)) + z-index acima da imagem:
   encosta na base dela e cobre o recorte, então não parece cortada. */
.side-jessie .sj-card {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: linear-gradient(135deg, var(--accent-soft), transparent), var(--s2);
  border: 1px solid var(--bd); border-radius: 14px; padding: 10px 13px;
  box-shadow: 0 -2px 10px rgba(0,0,0,.25); transition: border-color .15s, filter .15s;
}
.side-jessie:hover .sj-card { border-color: var(--or); filter: brightness(1.05); }
/* ponto "online" pulsante, na cor do tema */
.side-jessie .sj-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--or); flex-shrink: 0; }
.side-jessie .sj-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--or);
  animation: jessiePulse 2s ease-out infinite;
}
@keyframes jessiePulse {
  0%        { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(3); opacity: 0; }
}
.side-jessie .sj-txt { display: flex; flex-direction: column; line-height: 1.25; text-align: left; min-width: 0; }
.side-jessie .sj-txt b { font-size: 14px; font-weight: 700; }
.side-jessie .sj-txt small { font-size: 11px; color: var(--mu); }

/* avatar redondo da Jessie (recorta o rosto da imagem) */
.ja-av { display: inline-flex; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg,#7C3AED,#2563EB); flex-shrink: 0; }
.ja-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }

/* ── botão flutuante (launcher) ── */
.ja-launch {
  position: fixed; right: 22px; bottom: 22px; z-index: 951;
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer; padding: 0;
  transition: opacity .2s, transform .2s;
}
.ja-launch.hide { opacity: 0; transform: scale(.6); pointer-events: none; }
.ja-av-lg { width: 64px; height: 64px; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 10px 26px rgba(80,40,200,.5); }
.ja-launch:hover .ja-av-lg { transform: translateY(-2px); }
.ja-bub {
  background: #fff; color: #1f2330; font-size: 13px; font-weight: 600;
  padding: 9px 13px; border-radius: 12px 12px 4px 12px; max-width: 210px; line-height: 1.4;
  box-shadow: 0 8px 22px rgba(0,0,0,.3); transition: opacity .4s, transform .4s;
}
.ja-bub.fade { opacity: 0; transform: translateX(10px); pointer-events: none; }

/* ── painel do chat ── */
.ja-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 952;
  width: 360px; max-width: calc(100vw - 24px); height: 520px; max-height: calc(100vh - 100px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #15151a; border: 1px solid #2a2a32; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none;
  transition: opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.ja-panel.on { opacity: 1; transform: none; pointer-events: auto; }

.ja-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: linear-gradient(135deg,#7C3AED,#2563EB); color: #fff;
}
.ja-head .ja-av { width: 38px; height: 38px; border: 2px solid rgba(255,255,255,.7); }
.ja-head-txt { display: flex; flex-direction: column; line-height: 1.2; }
.ja-head-txt b { font-size: 14px; }
.ja-head-txt span { font-size: 11px; opacity: .9; }
.ja-close { margin-left: auto; background: rgba(255,255,255,.18); border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; }
.ja-close:hover { background: rgba(255,255,255,.3); }

.ja-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ja-msg { max-width: 86%; font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 13px; }
.ja-msg b { font-weight: 700; }
.ja-bot { align-self: flex-start; background: #23232b; color: #e6e6ea; border-bottom-left-radius: 4px; }
.ja-me { align-self: flex-end; background: linear-gradient(135deg,#7C3AED,#2563EB); color: #fff; border-bottom-right-radius: 4px; }

/* botão de atalho dentro da resposta (leva pra tela explicada) */
.ja-act {
  display: inline-flex; align-items: center; margin-top: 11px;
  background: linear-gradient(135deg,#7C3AED,#2563EB); color: #fff; border: none;
  border-radius: 999px; padding: 8px 15px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: filter .15s, transform .12s;
}
.ja-act:hover { filter: brightness(1.1); }
.ja-act:active { transform: scale(.97); }

/* indicador de "digitando" */
.ja-typing { display: inline-flex; gap: 4px; align-items: center; }
.ja-typing span { width: 6px; height: 6px; border-radius: 50%; background: #8a8a92; animation: jaBlink 1s infinite; }
.ja-typing span:nth-child(2) { animation-delay: .2s; }
.ja-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes jaBlink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* chips de perguntas prontas */
.ja-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 12px; border-top: 1px solid #2a2a32; max-height: 150px; overflow-y: auto; }
.ja-chip {
  background: #1e1e25; border: 1px solid #34343e; color: #cfcfd6;
  font-size: 12px; padding: 7px 11px; border-radius: 999px; cursor: pointer;
  font-family: inherit; transition: border-color .15s, color .15s, background .15s;
}
.ja-chip:hover { border-color: #7C3AED; color: #fff; background: #25202f; }
.ja-chip.ja-cat { font-weight: 600; background: #221c30; }
.ja-chip.ja-back { color: #b3a4ff; border-color: #3a3350; }

.ja-nohit { font-size: 12px; color: #8a8a93; padding: 2px 2px 4px; }
.ja-search-wrap { padding: 10px 12px; border-top: 1px solid #2a2a32; }
.ja-search {
  width: 100%; background: #1e1e25; border: 1px solid #34343e; color: #f0f0f0;
  border-radius: 10px; padding: 9px 12px; font-size: 13px; font-family: inherit; outline: none;
  transition: border-color .15s;
}
.ja-search::placeholder { color: #6b6b73; }
.ja-search:focus { border-color: #7C3AED; }

@media (max-width: 480px) {
  .ja-panel { right: 8px; bottom: 8px; height: calc(100vh - 80px); }
  .ja-bub { display: none; }
  .ja-launch { right: 14px; bottom: 14px; }
}