body, html {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    @keyframes bounce {
      0%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-10px); }
    }

    .typing-indicator span {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #3B82F6;
      border-radius: 50%;
      margin: 0 2px;
      animation: bounce 1.4s infinite ease-in-out;
    }

    .typing-indicator span:nth-child(1) { animation-delay: 0s; }
    .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
    .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

    
    .character-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      /*color: white;*/
      flex-shrink: 0;
    }

    .riskbot-message { background-color: #f3f4f6; }
    .riskbot-message:hover { background-color: #e5e7eb; }
    .character-question { background-color: #dbeafe; }
    .character-question:hover { background-color: #bfdbfe; }
    .answer-optioncheck { background-color: #ffc4fc; }
    .answer-optioncheck:hover { background-color: #ff9dfb; }
    .answer-option { background-color: #d1fae5; }
    .answer-option:hover { background-color: #a7f3d0; }
    .selected-answer { background-color: #a7f3d0; }

    .paper-plane-icon {
      width: 24px;
      height: 24px;
      margin-left: 0.5rem;
      transform: rotate(45deg);
    }

    .paper-plane-icon path {
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .chat-container {
      overflow-y: auto;
      height: 100%;
      padding-right: 20px;
      scrollbar-width: thin;
      scrollbar-color: #888 #f1f1f1;
      position: relative;
    }

    .chat-container::-webkit-scrollbar {
      width: 8px;
    }

    .chat-container::-webkit-scrollbar-track {
      background: #f1f1f1;
    }

    .chat-container::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 4px;
    }

    .chat-container::-webkit-scrollbar-thumb:hover {
      background: #555;
    }

    .scroll-arrow {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease-in-out;
      position: absolute;
      bottom: 10px;
      right: 10px;
      z-index: 10;
    }

    .scroll-arrow.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .scroll-arrow-button {
      background-color: #4A5568;
      color: white;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .scroll-arrow-button:hover {
      background-color: #2D3748;
    }

    .scroll-arrow-button svg {
      width: 24px;
      height: 24px;
    }