:root{
      --blue:#0072CE;
      --teal:#1DB2A0;
      --red:#D93A5E;
      --gradient: linear-gradient(90deg,var(--blue),var(--teal),var(--red));
    }

    .chat-gradient{
      background: var(--gradient);
      background-size: 300% 100%;
      animation: slide 6s linear infinite;
    }
    @keyframes slide{
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }

    .float-bob{animation: bob 3s ease-in-out infinite;}
    @keyframes bob{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

    .typing-dots > span{
      display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:999px;opacity:.3;
      animation: typing 1s infinite ease-in-out;
    }
    .typing-dots > span:nth-child(1){animation-delay:0s}
    .typing-dots > span:nth-child(2){animation-delay:.2s}
    .typing-dots > span:nth-child(3){animation-delay:.4s}
    @keyframes typing{0%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}100%{opacity:.2;transform:translateY(0)}}

    .glass{backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);}