body {
  background: #f4f4f8;
}
.chatbox-container {
    /* width: 100%; */
    width: 500px;
    /* max-width: 500px; */
    padding: 20px;
    /* background: #f4f4f8; */
    /* border-radius: 12px; */
    /* border: 1px solid #ccc; */
    font-family: Arial, sans-serif;
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1); */
  }

  .chatbox {
    height:400px;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 10px;
    background: none;
  }

  .message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    background: none;
  }

  .message.proctor {
    flex-direction: row;
    background: none;
  }

  .message.user {
    justify-content: flex-end;
    text-align: right;
    background: none;
  }

  .message-text {
    padding: 10px;
    /*border-radius: 10px;*/
    max-width: 80%;
    background: none;
  }

  .message.proctor .message-text {
    /*background: #f0f0f0;*/
    background: #FFFFFF;
    border-radius: 0 10px 10px 10px;
  }

  .message.user .message-text {
    background: #d0f0c0;
    margin-left: auto;
    border-radius: 10px 10px 0 10px;
  }

  .options {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
  }

  .option-button {
    margin: 5px 0;
    padding: 10px;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .option-button:hover {
    transform: scale(1.05);
    background: #005a8c;
  }

  .profile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .retake-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
  }

  .retake-button {
    background: #ddd;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
  }
 
    .retake-button.no {
      color: white;
      background-color: #dc3545;
  }
 
    .retake-button.yes {
      color: white;
      background-color: #008000;
  }
 
    .retake-button:hover {
    color: black;
    background: #ccc;
  }

  #loader img {
    animation: spin 1s linear infinite;
  }
  .loader-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: #f0f0f0;
    border-radius: 20px;
    font-style: italic;
    min-width: 50px;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }