body {
          background: #f4f7fa
      }

      #chatbox {
          width: 100%;
          overflow-y: auto;
          margin: 30px auto;
          background: #fff;
          padding: 16px
      }

      .lefts {
          background: #ededed;
          border-bottom-left-radius: 2px
      }

      .bubble {
          max-width: 80%;
          padding: 10px 14px;
          border-radius: 14px;
          margin: 6px 0;
          margin-top: 15px
      }

      .right {
          background: #0d6efd;
          color: #fff;
          margin-left: auto;
          border-bottom-right-radius: 2px;
          margin-top: 15px
      }

      .btn-option {
          margin: 4px 6px 0 0
      }

      #chatboats {
          flex-direction: column;
          height: 500px;
      }

      .chtbot_loader {
          margin-left: 56px;
          margin-bottom: 20px
      }

      .chtbot_loader span {
          display: inline-block;
          vertical-align: middle;
          width: 20px;
          height: 20px;
          background: black;
          border-radius: 20px;
          animation: chtbot_loader 0.8s infinite alternate;
      }

      .chtbot_loader span:nth-of-type(2) {
          animation-delay: 0.2s;
      }

      .chtbot_loader span:nth-of-type(3) {
          animation-delay: 0.6s;
      }

      @keyframes chtbot_loader {
          0% {
              opacity: 0.9;
              transform: scale(0.5);
          }

          100% {
              opacity: 0.1;
              transform: scale(1);
          }
      }

      body {
          background-color: #f8f9fa;
      }

      .chat-container {
          max-width: 600px;
          margin: 50px auto;
          border-radius: 12px;
          background-color: #ffffff;
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
          display: flex;
          flex-direction: column;
          height: 80vh;
      }

      .chat-header {
          padding: 15px;
          background-color: #007bff;
          color: white;
          font-size: 18px;
          font-weight: bold;
          border-top-left-radius: 12px;
          border-top-right-radius: 12px;
      }

      .chat-body {
          flex: 1;
          overflow-y: auto;
          padding: 15px;
      }

      .chat-footer {
          padding: 10px;
          border-top: 1px solid #dee2e6;
          background-color: #f1f1f1;
      }

      .message {
          margin-bottom: 15px;
          padding: 10px 14px;
          border-radius: 18px;
          max-width: 75%;
          word-wrap: break-word;
      }

      .bot-message {
          background-color: #e9ecef;
          color: #333;
          align-self: flex-start;
      }

      .user-message {
          background-color: #007bff;
          color: white;
          align-self: flex-end;
          margin-left: auto;
      }

      .typing-indicator {
          display: flex;
          align-items: center;
          height: 24px;
          gap: 4px;
          padding-left: 10px;
      }

      .typing-indicator .dot {
          width: 6px;
          height: 6px;
          background-color: #999;
          border-radius: 50%;
          animation: blink 1.4s infinite both;
      }

      .typing-indicator .dot:nth-child(2) {
          animation-delay: 0.2s;
      }

      .typing-indicator .dot:nth-child(3) {
          animation-delay: 0.4s;
      }

      @keyframes blink {

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

          40% {
              transform: scale(1);
          }
      }

      #chatboats {
          position: fixed;
          right: 20px;
          bottom: 20px;
          z-index: 9999;
          display: none;
          flex-direction: column;
      }

      @media (max-width: 576px) {
          #chatboats {
              right: 10px;
              bottom: 80px;
              width: calc(100% - 20px);
              height: 85vh;
          }
      }