/* ─────────────  TOKENS  ───────────── */
 :root{
    --primary    : #6f3cf8;
    --secondary  : #f4f3ff;
    --gradient   : linear-gradient(135deg,#8b5cf6 0%,#6f3cf8 100%);
    --bubble-bg  : #ffffff;
  }

  /* ─────────────  BASE  ───────────── */
  body{font-family:'Inter',Arial,sans-serif;}
  a{text-decoration:none;}

  /* ──────────  FLOATING BTN  ───────── */
  #openChat{
    position:fixed;bottom:1.7rem;right:1.5rem;z-index:1055;
    width:62px;height:62px;border:none;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--gradient);color:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
    transition:transform .25s,box-shadow .25s;
  }
  #openChat:hover{transform:translateY(-4px);box-shadow:0 8px 22px rgba(0,0,0,.3);}

  /* ─────────────  MODAL  ───────────── */
  #chatModal .modal-dialog{
    margin:0;width:100%;max-width:100%;height:100vh;
  }
  #chatModal .modal-content{
    height:100%;display:flex;flex-direction:column;
    background:var(--secondary);border-radius:0;
  }
  /* Sidebar em telas largas */
  @media (min-width:500px){
    #chatModal .modal-dialog{max-width:520px;margin-left:auto;}
  }

  /* ──────────  MODAL HEADER  ───────── */
  .modal-header{background:var(--gradient);border-bottom:none;color:#fff;}
  .modal-title{font-weight:600;}
  .btn-close{filter:invert(1);opacity:.8;}

  /* ───────────  CHAT BODY  ─────────── */
  .chat-box{
    flex:1 1 auto;overflow-y:auto;
    padding:1rem;display:flex;flex-direction:column;gap:.85rem;
  }


/* ----- evita que as últimas mensagens fiquem atrás do footer ----- */
.chat-box.has-input{
    /* 1 rem do padding original + altura dinâmica do footer */
    padding-bottom: calc(5rem + var(--footer-h,72px) );
  }
  
  /* iOS / aparelhos com área‑segura no rodapé */
  @supports (padding-bottom: env(safe-area-inset-bottom)){
    .chat-box.has-input{
      padding-bottom: calc(1rem + var(--footer-h,72px) + env(safe-area-inset-bottom));
    }
  }


  .msg{
    max-width:85%;padding:.65rem 1rem;font-size:.96rem;
    border-radius:1.25rem;line-height:1.45;word-break:break-word;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
  }
  .msg-bot{
    align-self:flex-start;background:var(--bubble-bg);}
  .msg-user{align-self:flex-end;background:var(--gradient);color:#fff;}

  /* ────────  QUICK REPLIES  ───────── */
  .quick-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.55rem;}
  .quick-btns .btn{
    flex-grow:1;
    padding:.45rem 1.2rem;font-weight:500;
    border-radius:999px;background:var(--bubble-bg);
    border:1px solid var(--primary);color:var(--primary);
    transition:background .2s,color .2s;
    font-size: 1rem;
  }
  .quick-btns .btn:hover{background:var(--primary);color:#fff;}

  /* ─────────  GRADIENT BTN  ───────── */
  .btn-gradient{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.55rem 1.5rem;border:none;border-radius:999px;
    font-weight:600;background:var(--gradient);color:#fff;
  }
  .btn-gradient:hover{opacity:.9;color:#fff;}

  /* ──────────  FOOTER INPUT  ───────── */
  .chat-footer{
    padding:.9rem 1rem;background:#fff;
    border-top:1px solid rgba(0,0,0,.07);
  }
  .chat-footer .form-control{border-radius:999px 0 0 999px;}
  .chat-footer .btn{border-radius:0 999px 999px 0;}

  /* ───────  ANIMAÇÃO DE DIGITAÇÃO  ─────── */
.typing{display:inline-flex;gap:.3rem;align-items:center;}
.typing .dot{
  width:.45rem;height:.45rem;border-radius:50%;background:var(--primary);
  animation:blink 1s infinite ease-in-out;
}
.typing .dot:nth-child(2){animation-delay:.15s;}
.typing .dot:nth-child(3){animation-delay:.3s;}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1;}}




.star{
  background:none;
  border:none;
  font-size:1.6rem;
  color:#ccc;
  cursor:pointer;
  padding:0;
}
.star.selected{ color:#FFC107; }