/* ======================================================

   FIBI IA — widget integrado ao site FibroCiência

====================================================== */

#fibi-launcher,
#fibi-panel,
#fibi-panel * {
  box-sizing: border-box;
}


/* ======================================================
   BOTÃO FLUTUANTE
====================================================== */

#fibi-launcher {
  position: fixed;

  right: 26px;
  bottom: 26px;

  z-index: 99990;

  width: 64px;
  height: 64px;

  border: 0;
  border-radius: 50%;

  cursor: pointer;

  background:
    linear-gradient(
      135deg,
      #251052,
      #5425b8 58%,
      #8b5cf6
    );

  color: #fff;

  box-shadow:
    0 16px 40px
    rgba(37,16,82,.34);

  font-size: 28px;

  display: grid;
  place-items: center;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


#fibi-launcher:hover {
  transform:
    translateY(-3px)
    scale(1.04);

  box-shadow:
    0 20px 48px
    rgba(37,16,82,.42);
}


/* ======================================================
   PAINEL
====================================================== */

#fibi-panel {
  position: fixed;

  right: 26px;
  bottom: 102px;

  z-index: 99991;

  width:
    min(
      420px,
      calc(100vw - 28px)
    );

  height:
    min(
      650px,
      calc(100vh - 126px)
    );

  display: grid;

  grid-template-rows:
    auto
    1fr
    auto
    auto;

  overflow: hidden;

  border-radius: 24px;

  background: #fff;

  border:
    1px solid
    rgba(84,37,184,.13);

  box-shadow:
    0 28px 80px
    rgba(37,16,82,.28);

  color: #211a2f;

  font-family:
    Inter,
    Arial,
    sans-serif;

  transform-origin:
    bottom right;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
}


#fibi-panel.fibi-hidden {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(12px)
    scale(.97);
}


/* ======================================================
   CABEÇALHO
====================================================== */

.fibi-head {
  display: flex;

  align-items: center;

  gap: 11px;

  padding:
    15px
    16px;

  color: white;

  background:
    linear-gradient(
      135deg,
      #251052,
      #5425b8
    );
}


.fibi-avatar {
  width: 40px;
  height: 40px;

  border-radius: 14px;

  display: grid;

  place-items: center;

  font-weight: 900;

  background:
    rgba(
      255,
      255,
      255,
      .15
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .22
    );

  box-shadow:
    inset 0 0 18px
    rgba(
      255,
      255,
      255,
      .06
    );
}


.fibi-head-copy {
  min-width: 0;

  flex: 1;
}


.fibi-title-row {
  display: flex;

  align-items: center;

  gap: 7px;
}


.fibi-title-row strong {
  font-size: 16px;
}


.fibi-ai-badge {
  font-size: 9px;

  font-weight: 900;

  letter-spacing: .07em;

  padding:
    3px
    6px;

  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      .16
    );
}


.fibi-head-copy small {
  display: block;

  margin-top: 3px;

  opacity: .78;

  font-size: 11px;
}


.fibi-head button {
  width: 34px;
  height: 34px;

  border: 0;

  border-radius: 10px;

  color: #fff;

  background:
    rgba(
      255,
      255,
      255,
      .12
    );

  cursor: pointer;

  transition:
    background .16s ease,
    transform .16s ease;
}


.fibi-head button:hover {
  background:
    rgba(
      255,
      255,
      255,
      .20
    );

  transform:
    translateY(-1px);
}


/* ======================================================
   ÁREA DE MENSAGENS
====================================================== */

#fibi-messages {
  overflow-y: auto;

  padding: 16px;

  background:
    radial-gradient(
      circle at top,
      rgba(
        139,
        92,
        246,
        .08
      ),
      transparent 34%
    ),
    #fbf9ff;

  scroll-behavior: smooth;
}


/* ======================================================
   SCROLLBAR
====================================================== */

#fibi-messages::-webkit-scrollbar {
  width: 7px;
}


#fibi-messages::-webkit-scrollbar-track {
  background: transparent;
}


#fibi-messages::-webkit-scrollbar-thumb {
  background: #d7c9ee;

  border-radius: 999px;
}


#fibi-messages::-webkit-scrollbar-thumb:hover {
  background: #bfa8e6;
}


/* ======================================================
   MENSAGENS
====================================================== */

.fibi-msg {
  display: flex;

  flex-direction: column;

  margin-bottom: 14px;
}


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


.fibi-msg.assistant {
  align-items: flex-start;
}


.fibi-bubble {
  max-width: 86%;

  padding:
    11px
    13px;

  border-radius: 16px;

  font-size: 13px;

  line-height: 1.58;

  white-space: pre-wrap;

  word-break: break-word;

  animation:
    fibiPop
    .16s
    ease-out;
}


.fibi-msg.assistant
.fibi-bubble {
  background: #fff;

  border:
    1px solid
    #ebe4f5;

  border-top-left-radius:
    5px;

  box-shadow:
    0 6px 18px
    rgba(
      65,
      40,
      104,
      .05
    );
}


.fibi-msg.user
.fibi-bubble {
  background:
    linear-gradient(
      135deg,
      #5425b8,
      #6d39d2
    );

  color: #fff;

  border-top-right-radius:
    5px;

  box-shadow:
    0 7px 18px
    rgba(
      84,
      37,
      184,
      .17
    );
}


.fibi-msg.emergency
.fibi-bubble {
  background:
    #fff1f4;

  border-color:
    #ffcdd8;

  color:
    #6d1428;
}


/* ======================================================
   FONTES CONSULTADAS
====================================================== */

.fibi-sources {
  width: 86%;

  margin-top: 8px;

  padding: 11px;

  border:
    1px solid
    #e9e0f6;

  border-radius: 15px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #faf7ff
    );

  box-shadow:
    0 7px 22px
    rgba(
      74,
      38,
      124,
      .06
    );

  animation:
    fibiPop
    .18s
    ease-out;
}


/* ======================================================
   CABEÇALHO DAS FONTES
====================================================== */

.fibi-sources-header {
  display: flex;

  align-items: center;

  gap: 7px;

  margin-bottom: 9px;

  color: #3d216f;
}


.fibi-sources-header strong {
  font-size: 11px;

  font-weight: 800;

  letter-spacing: .01em;
}


.fibi-sources-icon {
  display: grid;

  place-items: center;

  width: 23px;
  height: 23px;

  border-radius: 8px;

  background:
    #f0e9ff;

  font-size: 12px;
}


/* ======================================================
   LISTA DAS FONTES
====================================================== */

.fibi-sources-list {
  display: flex;

  flex-direction: column;

  gap: 6px;
}


/* ======================================================
   CARD INDIVIDUAL
====================================================== */

.fibi-source-card {
  width: 100%;

  min-width: 0;

  display: grid;

  grid-template-columns:
    25px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 8px;

  padding:
    8px
    9px;

  border:
    1px solid
    #ece5f5;

  border-radius: 11px;

  background: #fff;

  color: #312340;

  text-decoration: none;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}


a.fibi-source-card:hover {
  transform:
    translateY(-1px);

  border-color:
    #cbb7ee;

  background:
    #fcfaff;

  box-shadow:
    0 7px 18px
    rgba(
      84,
      37,
      184,
      .08
    );
}


/* ======================================================
   NÚMERO DA FONTE
====================================================== */

.fibi-source-number {
  width: 25px;
  height: 25px;

  display: grid;

  place-items: center;

  border-radius: 8px;

  flex-shrink: 0;

  background:
    linear-gradient(
      135deg,
      #5425b8,
      #8b5cf6
    );

  color: #fff;

  font-size: 10px;

  font-weight: 900;

  box-shadow:
    0 4px 10px
    rgba(
      84,
      37,
      184,
      .17
    );
}


/* ======================================================
   TEXTO DA FONTE
====================================================== */

.fibi-source-content {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 2px;
}


.fibi-source-content strong {
  display: block;

  min-width: 0;

  color: #3d216f;

  font-size: 10.5px;

  line-height: 1.3;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


.fibi-source-content small {
  display: block;

  min-width: 0;

  color: #80758d;

  font-size: 9px;

  line-height: 1.3;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


/* ======================================================
   SETA EXTERNA
====================================================== */

.fibi-source-arrow {
  color: #7c55c8;

  font-size: 13px;

  font-weight: 900;

  transition:
    transform .16s ease;
}


a.fibi-source-card:hover
.fibi-source-arrow {
  transform:
    translate(
      2px,
      -2px
    );
}


/* ======================================================
   SUGESTÕES
====================================================== */

.fibi-suggestions {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin:
    4px
    0
    14px;
}


.fibi-suggestions button {
  border:
    1px solid
    #dacbf7;

  background: #fff;

  color: #3e1b7f;

  border-radius: 999px;

  padding:
    7px
    9px;

  font-size: 10.5px;

  cursor: pointer;

  transition:
    background .16s ease,
    transform .16s ease,
    border-color .16s ease;
}


.fibi-suggestions button:hover {
  background:
    #f6f1ff;

  border-color:
    #bda6e8;

  transform:
    translateY(-1px);
}


/* ======================================================
   STATUS
====================================================== */

#fibi-status {
  display: flex;

  align-items: center;

  gap: 7px;

  padding:
    7px
    14px
    0;

  font-size: 10.5px;

  color: #766b85;

  background: #fff;
}


#fibi-status[hidden] {
  display: none;
}


.fibi-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #5425b8;

  animation:
    fibiPulse
    1s
    infinite
    ease-in-out;
}


/* ======================================================
   CAMPO DE DIGITAÇÃO
====================================================== */

.fibi-composer {
  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 8px;

  padding:
    10px
    12px
    12px;

  background: #fff;
}


#fibi-input {
  width: 100%;

  max-height: 110px;

  resize: none;

  outline: none;

  border:
    1px solid
    #ded5eb;

  border-radius: 14px;

  padding:
    10px
    11px;

  font: inherit;

  font-size: 12.5px;

  color: #211a2f;

  background: #fbfafe;

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}


#fibi-input::placeholder {
  color: #9a91a6;
}


#fibi-input:focus {
  border-color: #8b5cf6;

  background: #fff;

  box-shadow:
    0 0 0 3px
    rgba(
      139,
      92,
      246,
      .10
    );
}


/* ======================================================
   BOTÃO ENVIAR
====================================================== */

#fibi-send {
  width: 42px;
  height: 42px;

  align-self: end;

  border: 0;

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      #5425b8,
      #7546d4
    );

  color: #fff;

  font-size: 18px;

  cursor: pointer;

  box-shadow:
    0 7px 17px
    rgba(
      84,
      37,
      184,
      .19
    );

  transition:
    transform .16s ease,
    box-shadow .16s ease;
}


#fibi-send:hover:not(:disabled) {
  transform:
    translateY(-1px);

  box-shadow:
    0 9px 22px
    rgba(
      84,
      37,
      184,
      .26
    );
}


#fibi-send:disabled {
  opacity: .5;

  cursor: not-allowed;
}


/* ======================================================
   RODAPÉ
====================================================== */

.fibi-footer-note {
  padding:
    0
    12px
    10px;

  text-align: center;

  font-size: 9px;

  color: #8a8196;

  background: #fff;
}


/* ======================================================
   ANIMAÇÕES
====================================================== */

@keyframes fibiPop {
  from {
    opacity: 0;

    transform:
      translateY(4px);
  }

  to {
    opacity: 1;

    transform: none;
  }
}


@keyframes fibiPulse {
  0%,
  100% {
    opacity: .35;

    transform:
      scale(.9);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.15);
  }
}


/* ======================================================
   RESPONSIVO
====================================================== */

@media (max-width: 600px) {

  #fibi-launcher {
    right: 15px;
    bottom: 15px;

    width: 58px;
    height: 58px;
  }


  #fibi-panel {
    inset: 8px;

    width: auto;
    height: auto;

    bottom: 82px;

    border-radius: 20px;
  }


  .fibi-bubble {
    max-width: 92%;
  }


  .fibi-sources {
    width: 92%;
  }


  .fibi-source-card {
    grid-template-columns:
      25px
      minmax(0, 1fr)
      auto;
  }

}
/* =========================================
   FIBI — MODO EXPANDIDO
========================================= */

#fibi-panel {
    transition:
        width .28s ease,
        height .28s ease,
        right .28s ease,
        bottom .28s ease,
        border-radius .28s ease;
}


/* BOTÃO EXPANDIR */

#fibi-expand {
    cursor: pointer;
}


/* CHAT GRANDE */

#fibi-panel.fibi-expanded {
    width: min(1000px, calc(100vw - 60px)) !important;
    height: min(820px, calc(100vh - 60px)) !important;

    right: 30px !important;
    bottom: 30px !important;

    max-width: none !important;
    max-height: none !important;

    border-radius: 24px !important;
}


/* MAIS ESPAÇO PARA AS MENSAGENS */

#fibi-panel.fibi-expanded #fibi-messages {
    flex: 1 !important;
    min-height: 0 !important;

    padding: 25px 30px !important;
}


/* RESPOSTAS MAIS CONFORTÁVEIS */

#fibi-panel.fibi-expanded .fibi-msg.assistant {
    max-width: 82% !important;
}

#fibi-panel.fibi-expanded .fibi-msg.user {
    max-width: 72% !important;
}

#fibi-panel.fibi-expanded .fibi-bubble {
    font-size: 15px !important;
    line-height: 1.75 !important;
}


/* MOBILE */

@media (max-width: 650px) {

    #fibi-panel.fibi-expanded {
        width: 100vw !important;
        height: 100dvh !important;

        right: 0 !important;
        bottom: 0 !important;

        border-radius: 0 !important;
    }

    #fibi-panel.fibi-expanded #fibi-messages {
        padding: 18px !important;
    }

    #fibi-panel.fibi-expanded .fibi-msg.assistant,
    #fibi-panel.fibi-expanded .fibi-msg.user {
        max-width: 92% !important;
    }
}
/* =========================================
   CORREÇÃO VISUAL DA FIBI
========================================= */

/* remove aquele espaço branco enorme */
#fibi-panel {
    padding: 0 !important;

    overflow: hidden !important;

    background: #f9f7ff !important;

    border: none !important;
}


/* quando estiver expandida */
#fibi-panel.fibi-expanded {
    display: flex !important;
    flex-direction: column !important;

    padding: 0 !important;

    overflow: hidden !important;

    background: #f9f7ff !important;
}


/* cabeçalho encostado no topo */
#fibi-panel .fibi-head {
    margin: 0 !important;

    width: 100% !important;

    flex-shrink: 0;
}


/* mensagens ocupam todo o espaço disponível */
#fibi-panel #fibi-messages {
    flex: 1 !important;

    width: 100% !important;

    min-height: 0 !important;

    overflow-y: auto !important;

    box-sizing: border-box !important;
}


/* campo de digitação */
#fibi-panel .fibi-composer {
    width: 100% !important;

    box-sizing: border-box !important;

    flex-shrink: 0;
}


/* aviso inferior */
#fibi-panel .fibi-footer-note {
    width: 100% !important;

    box-sizing: border-box !important;

    flex-shrink: 0;
}


/* avatar com emoji */
.fibi-avatar {
    font-size: 20px !important;

    display: grid !important;
    place-items: center !important;
}
/* AVATAR DA FIBI */

.fibi-avatar {
    font-size: 0 !important;
}

.fibi-avatar::before {
    content: "🧠";
    font-size: 22px;
    line-height: 1;
}
/* =========================================
   FIBI — INDICADOR "ESTÁ DIGITANDO"
========================================= */

.fibi-digitando {
    display: flex;
    align-items: center;
    gap: 6px;

    width: fit-content;

    padding: 12px 16px;

    margin: 8px 0;

    background: #ffffff;

    border: 1px solid
        rgba(92, 45, 180, 0.10);

    border-radius:
        16px 16px 16px 5px;

    box-shadow:
        0 8px 24px
        rgba(70, 40, 120, 0.08);
}


.fibi-digitando span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #7c3aed;

    animation:
        fibiBolinha 1.2s
        infinite ease-in-out;

    opacity: .35;
}


.fibi-digitando span:nth-child(2) {
    animation-delay: .15s;
}


.fibi-digitando span:nth-child(3) {
    animation-delay: .30s;
}


@keyframes fibiBolinha {

    0%,
    60%,
    100% {
        transform:
            translateY(0);

        opacity:
            .35;
    }

    30% {
        transform:
            translateY(-5px);

        opacity:
            1;
    }

}
/* =========================================
   FIBI — AÇÕES DA MENSAGEM
========================================= */

.fibi-message-actions {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 6px;

    padding: 0 4px;

    font-size: 11px;

    color: #9a91a8;
}


/* MENSAGEM DO USUÁRIO */

.fibi-msg.user
.fibi-message-actions {
    justify-content: flex-end;
}


/* MENSAGEM DA FIBI */

.fibi-msg.assistant
.fibi-message-actions {
    justify-content: flex-start;
}


/* =========================================
   HORÁRIO
========================================= */

.fibi-message-time {
    font-size: 10px;

    color: #aaa2b5;

    user-select: none;
}


/* =========================================
   BOTÃO COPIAR
========================================= */

.fibi-copy-button {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 4px 7px;

    border: 0;

    border-radius: 7px;

    background: transparent;

    color: #80748f;

    font-family: inherit;

    font-size: 11px;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.fibi-copy-button:hover {
    background: #f1ebff;

    color: #6d28d9;

    transform: translateY(-1px);
}


.fibi-copy-button.copiado {
    color: #15803d;

    background:
        rgba(
            22,
            163,
            74,
            .08
        );
}


.fibi-copy-button:active {
    transform: scale(.96);
}
/* =========================================
   FIBI — SUGESTÕES INTELIGENTES
========================================= */

.fibi-followups {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 7px;

    width: 100%;

    margin-top: 10px;

    padding-left: 4px;
}


/* TÍTULO */

.fibi-followups-title {
    margin-bottom: 2px;

    font-size: 11px;
    font-weight: 700;

    color: #9487a5;
}


/* BOTÕES */

.fibi-followup-button {
    width: fit-content;

    max-width: 90%;

    padding: 8px 12px;

    border:
        1px solid
        rgba(124, 58, 237, .16);

    border-radius: 12px;

    background:
        rgba(124, 58, 237, .045);

    color: #6030b5;

    font-family: inherit;
    font-size: 12px;

    line-height: 1.4;

    text-align: left;

    cursor: pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.fibi-followup-button:hover {
    transform:
        translateY(-1px);

    background:
        #f2ecff;

    border-color:
        rgba(124, 58, 237, .32);

    box-shadow:
        0 7px 18px
        rgba(90, 45, 160, .08);
}


.fibi-followup-button:active {
    transform:
        scale(.98);
}
/* CORREÇÃO DAS SUGESTÕES DA FIBI */

#fibi-messages > .fibi-followups {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    width: 100% !important;

    gap: 7px !important;

    margin: 4px 0 14px 0 !important;

    padding: 0 8px !important;

    opacity: 1 !important;
    visibility: visible !important;
}