/* JOTA — assistente virtual (extraído do style.css antigo; tokens ligados ao visual novo) */
:root{
  --ink:#0B1B33; --bg-2:#E6ECF3; --line:#D3DCE7; --ink-faint:#7C8AA0; --blue:#0A5A9C; --teal:#3DDC84;
  --grad-brand:linear-gradient(135deg,#0A5A9C 0%,#0B2D5C 100%); --font-display:'Unbounded',sans-serif;
  --surface:#fff; --ease:cubic-bezier(.19,1,.22,1);
}
  /* ---------------------------------------------------------
     JOTA — assistente virtual (mascote + chat)
     --------------------------------------------------------- */
  .jota-float{ position: fixed; right: 14px; bottom: 24px; z-index: 95; width: 110px; }
  .jota-trigger{
    position:relative; width:100%; display:flex; flex-direction:column; align-items:center; cursor:pointer;
    background:none; border:none; padding:0;
  }
  .jota-platform{
    position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
    width:74px; height:20px; border-radius:50%; background: radial-gradient(ellipse, var(--glow-blue), transparent 70%);
    filter: blur(3px);
  }
  .jota-mascote-img{ width:100px; height:auto; position:relative; z-index:2; filter: drop-shadow(0 10px 16px rgba(11,18,32,.22)); transition: transform .2s var(--ease); }
  .jota-trigger:hover .jota-mascote-img{ transform: translateY(-4px); }
  .jota-online-dot{
    position:absolute; top:6px; right:14px; width:14px; height:14px; border-radius:50%;
    background:#22C55E; border:3px solid var(--bg); z-index:3;
  }
  .jota-hint{
    position:absolute; right:112px; bottom:56px; width:210px; background: var(--surface);
    border:1px solid var(--line); border-radius: 14px; border-bottom-right-radius:4px; padding:12px 14px;
    font-size:.83rem; color: var(--ink); box-shadow: var(--shadow-md); text-align:left;
    opacity:0; transform: translateY(6px); pointer-events:none; transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .jota-hint.show{ opacity:1; transform:none; pointer-events:auto; }
  .jota-hint button{
    position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%;
    background: var(--ink); color:#fff; border:none; font-size:12px; cursor:pointer; line-height:1;
  }
  body.jota-open .jota-float{ display:none; }

  .jota-panel{
    position: fixed; right:14px; bottom:24px; z-index:96; width:360px; max-width: calc(100vw - 28px);
    height: 500px; max-height: calc(100vh - 130px);
    background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); display:none; flex-direction:column; overflow:hidden;
  }
  body.jota-open .jota-panel{ display:flex; }
  .jota-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); flex-shrink:0; background: var(--grad-brand); }
  .jota-head img{ width:38px; height:38px; border-radius:50%; background: #fff; border:1px solid var(--line); }
  .jota-head-info{ flex:1; min-width:0; }
  .jota-head-info b{ display:block; font-size:.92rem; color: #fff; font-family: var(--font-display); }
  .jota-head-info span{ display:flex; align-items:center; gap:5px; font-size:.76rem; color: rgba(255,255,255,.85); font-weight:600; }
  .jota-head-info span::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--teal); }
  .jota-close{ width:30px; height:30px; border-radius:8px; border:none; background:rgba(255,255,255,.15); color: #fff; cursor:pointer; font-size:16px; flex-shrink:0; }
  .jota-close:hover{ background: rgba(255,255,255,.28); }

  .jota-messages{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
  .jota-msg{ max-width:84%; padding:10px 13px; border-radius:14px; font-size:.87rem; line-height:1.5; }
  .jota-msg.bot{ align-self:flex-start; background: var(--bg-2); color: var(--ink); border-bottom-left-radius:4px; }
  .jota-msg.user{ align-self:flex-end; background: var(--grad-brand); color:#fff; border-bottom-right-radius:4px; }
  .jota-typing{ align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background: var(--bg-2); border-radius:14px; border-bottom-left-radius:4px; }
  .jota-typing span{ width:6px; height:6px; border-radius:50%; background: var(--ink-faint); animation: jotaTyping 1.2s infinite; }
  .jota-typing span:nth-child(2){ animation-delay:.2s; } .jota-typing span:nth-child(3){ animation-delay:.4s; }
  @keyframes jotaTyping{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

  .jota-pills{ display:flex; flex-wrap:wrap; gap:7px; align-self:flex-start; max-width:100%; }
  .jota-pill{
    padding:8px 14px; border-radius:999px; background: var(--surface); border:1.5px solid var(--blue);
    color: var(--blue-deep); font-size:.8rem; font-weight:700; cursor:pointer; transition: all .18s var(--ease); font-family:inherit;
  }
  .jota-pill:hover{ background: var(--grad-brand); color:#fff; border-color:transparent; }
  .jota-pill.wa{ background: var(--grad-brand); color:#fff; border-color:transparent; }

  .jota-inputrow{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); flex-shrink:0; }
  .jota-inputrow input{
    flex:1; padding:11px 14px; border-radius:999px; border:1.5px solid var(--line); font-family:inherit;
    font-size:.87rem; background: var(--bg); color: var(--ink);
  }
  .jota-inputrow input:focus{ outline:none; border-color: var(--blue); }
  .jota-inputrow button{
    width:40px; height:40px; border-radius:50%; background: var(--grad-brand); color:#fff; border:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  @media (max-width:480px){
    .jota-panel{ right:8px; bottom:16px; width:calc(100vw - 16px); }
    .jota-float{ right:8px; bottom:16px; width:84px; }
    .jota-mascote-img{ width:78px; }
  }
  @media (max-width:620px){
    /* celular: a dica sobe acima do mascote, encostada na direita, sem invadir o conteúdo */
    .jota-hint{ right:4px; bottom:calc(100% + 6px); width:200px; font-size:.8rem; padding:10px 12px;
      border-bottom-right-radius:14px; }
    .jota-hint::after{ content:""; position:absolute; right:30px; bottom:-6px; width:12px; height:12px;
      background:var(--surface); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg); }
  }