:root {
    --flavinho-green: #0b6b3a;
    --flavinho-green-dark: #07542e;
    --flavinho-yellow: #ffdf00;
    --flavinho-white: #ffffff;
    --flavinho-text: #1f2937;
  }

  /* =========================================================
     WIDGET
     ========================================================= */

  #flavinho-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99998;

    display: flex;
    align-items: center;
    gap: 12px;

    font-family: Arial, Helvetica, sans-serif;
  }

  /* =========================================================
     BOTÃO / AVATAR
     ========================================================= */

  #flavinho-btn {
    position: relative;
    flex: 0 0 auto;

    width: 72px;
    height: 72px;

    padding: 0;

    border: 3px solid var(--flavinho-white);
    border-radius: 50%;

    background: var(--flavinho-white);

    cursor: pointer;

    box-shadow:
      0 7px 24px rgba(0, 0, 0, .24),
      0 0 0 2px rgba(255, 223, 0, .75);

    transition:
      transform .22s ease,
      box-shadow .22s ease;

    animation:
      flavinhoEntrance .55s ease-out;
  }

  #flavinho-btn:hover {
    transform:
      translateY(-4px)
      scale(1.04);

    box-shadow:
      0 12px 30px rgba(0, 0, 0, .30),
      0 0 0 3px rgba(255, 223, 0, .85);
  }

  #flavinho-btn:focus-visible {
    outline: 4px solid var(--flavinho-yellow);
    outline-offset: 4px;
  }

  #flavinho-avatar {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
  }

  /* Indicador de disponibilidade */

  #flavinho-status {
    position: absolute;

    right: 0;
    bottom: 3px;

    width: 17px;
    height: 17px;

    border: 3px solid var(--flavinho-white);
    border-radius: 50%;

    background: #22c55e;

    box-sizing: border-box;

    box-shadow:
      0 1px 4px rgba(0, 0, 0, .20);
  }

  /* =========================================================
     BALÃO DE FALA
     ========================================================= */

  #flavinho-callout {
    position: absolute;

    right: 88px;
    bottom: 5px;

    width: 220px;

    padding: 14px 17px 13px;

    border:
      1px solid
      rgba(11, 107, 58, .14);

    border-radius:
      18px 18px 6px 18px;

    background: #ffffff;

    color: #1f2937;

    box-shadow:
      0 8px 28px
      rgba(0, 0, 0, .17);

    font-size: 13px;
    line-height: 1.4;

    text-align: left;

    pointer-events: none;

    animation:
      flavinhoCallout .5s ease-out;
  }

  #flavinho-callout strong {
    display: block;

    margin-bottom: 3px;

    color: var(--flavinho-green);

    font-size: 14px;
    font-weight: 700;
  }

  #flavinho-callout small {
    display: block;

    margin-top: 3px;

    color: #6b7280;

    font-size: 11px;
    font-weight: 400;
  }

  /* Pontinha do balão */

  #flavinho-callout::after {
    content: "";

    position: absolute;

    right: -9px;
    bottom: 14px;

    width: 18px;
    height: 18px;

    background: #ffffff;

    border-top:
      1px solid
      rgba(11, 107, 58, .10);

    border-right:
      1px solid
      rgba(11, 107, 58, .10);

    transform:
      rotate(45deg);

    box-shadow:
      4px -4px 8px
      rgba(0, 0, 0, .025);
  }

  /* =========================================================
     FAIXA VERDE + AMARELA DO BALÃO
     ========================================================= */

  #flavinho-callout::before {
    content: "";

    position: absolute;

    top: 0;
    left: 36px;
    right: 36px;

    height: 4px;

    border-radius:
      0 0 4px 4px;

    background:
      linear-gradient(
        90deg,
        var(--flavinho-green) 0%,
        var(--flavinho-green) 72%,
        var(--flavinho-yellow) 72%,
        var(--flavinho-yellow) 100%
      );
  }

  /* =========================================================
     PAINEL DO CHAT
     ========================================================= */

  #flavinho-panel {
    position: fixed;

    right: 24px;
    bottom: 112px;

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

    height:
      min(
        670px,
        calc(100dvh - 136px)
      );

    overflow: hidden;

    border:
      1px solid
      rgba(0, 0, 0, .08);

    border-radius: 22px;

    background: var(--flavinho-white);

    box-shadow:
      0 24px 70px
      rgba(0, 0, 0, .28);

    z-index: 99999;

    transform-origin: bottom right;

    animation:
      flavinhoOpen .26s ease-out;
  }

  #flavinho-panel[hidden] {
    display: none;
  }

  /* =========================================================
     DETALHE SUPERIOR DO PAINEL
     ========================================================= */

  #flavinho-topbar {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    z-index: 5;

    background:
      linear-gradient(
        90deg,
        var(--flavinho-green) 0%,
        var(--flavinho-green) 72%,
        var(--flavinho-yellow) 72%,
        var(--flavinho-yellow) 100%
      );

    pointer-events: none;
  }

  /* =========================================================
     IFRAME
     ========================================================= */

  #flavinho-frame {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    background: var(--flavinho-white);
  }

  /* =========================================================
     BOTÃO FECHAR - FLAVINHO 2.1
     Posicionado abaixo da área do Share
     ========================================================= */

  #flavinho-close {
    position: absolute;

    top: 58px;
    right: 13px;

    z-index: 10;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;

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

    border-radius: 50%;

    background:
      rgba(17, 24, 39, .84);

    color: var(--flavinho-white);

    font-size: 21px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
      0 3px 10px
      rgba(0, 0, 0, .18);

    backdrop-filter: blur(5px);

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

  #flavinho-close:hover {
    transform: scale(1.08);

    background:
      var(--flavinho-green-dark);

    box-shadow:
      0 5px 14px
      rgba(0, 0, 0, .22);
  }

  #flavinho-close:focus-visible {
    outline:
      3px solid
      var(--flavinho-yellow);

    outline-offset: 2px;
  }

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

  @keyframes flavinhoOpen {

    from {
      opacity: 0;

      transform:
        translateY(18px)
        scale(.96);
    }

    to {
      opacity: 1;

      transform:
        translateY(0)
        scale(1);
    }

  }

  @keyframes flavinhoCallout {

    from {
      opacity: 0;

      transform:
        translateX(12px);
    }

    to {
      opacity: 1;

      transform:
        translateX(0);
    }

  }

  @keyframes flavinhoEntrance {

    from {
      opacity: 0;

      transform:
        translateY(20px)
        scale(.85);
    }

    to {
      opacity: 1;

      transform:
        translateY(0)
        scale(1);
    }

  }

  #flavinho-btn.flavinho-attention {
    animation:
      flavinhoAttention .65s ease;
  }

  @keyframes flavinhoAttention {

    0%,
    100% {
      transform:
        translateY(0)
        scale(1);
    }

    45% {
      transform:
        translateY(-5px)
        scale(1.05);
    }

  }

  /* =========================================================
     MOBILE
     ========================================================= */

  @media (max-width: 600px) {

    #flavinho-widget {
      right: 16px;
      bottom: 16px;
    }

    #flavinho-btn {
      width: 64px;
      height: 64px;
    }

    #flavinho-callout {
      right: 78px;
      bottom: 3px;

      width: 185px;

      padding:
        12px 14px 11px;

      border-radius:
        16px 16px 6px 16px;
    }

    #flavinho-callout strong {
      font-size: 13px;
    }

    #flavinho-callout small {
      display: none;
    }

    #flavinho-callout::after {
      right: -8px;
      bottom: 13px;

      width: 16px;
      height: 16px;
    }

    #flavinho-callout::before {
      left: 28px;
      right: 28px;

      height: 4px;
    }

    #flavinho-panel {
      top: 8px;
      right: 8px;
      bottom: 8px;
      left: 8px;

      width: auto;
      height: auto;

      border-radius: 20px;

      animation:
        flavinhoMobileOpen
        .25s ease-out;
    }

    /*
     * No mobile o cabeçalho do Botpress pode
     * ocupar proporções diferentes.
     * Mantemos o X abaixo dele e dentro
     * da área segura do painel.
     */

    #flavinho-close {
      top: 58px;
      right: 12px;

      width: 32px;
      height: 32px;

      font-size: 21px;
    }

    @keyframes flavinhoMobileOpen {

      from {
        opacity: 0;

        transform:
          translateY(18px);
      }

      to {
        opacity: 1;

        transform:
          translateY(0);
      }

    }

  }

  /* =========================================================
     TELAS MUITO PEQUENAS
     ========================================================= */

  @media (max-width: 360px) {

    #flavinho-callout {
      width: 165px;

      font-size: 12px;
    }

    #flavinho-callout::before {
      left: 24px;
      right: 24px;
    }

  }

  /* =========================================================
     ACESSIBILIDADE
     ========================================================= */

  @media (prefers-reduced-motion: reduce) {

    #flavinho-panel,
    #flavinho-callout,
    #flavinho-btn,
    #flavinho-btn.flavinho-attention {
      animation: none;
    }

    #flavinho-btn,
    #flavinho-close {
      transition: none;
    }

  }