chat.css

 /* Chat window styles */
 .chat-window {
   position: fixed;
   bottom: 0;
   right: 20px;
   width: 350px;
   transition: width 0.3s ease-in-out, height 0.3s ease-in-out, right 0.3s ease-in-out, bottom 0.3s ease-in-out, transform 0.3s ease-in-out;
   z-index: 1000;
   background-color: white;
   border: 1px solid #ccc;
   display: flex;
   flex-direction: column;
   transform: scale(1);
 }

 .chat-window.collapsed {
   height: 46px;
   border-radius: 10px 10px 0 0;
 }

 .chat-window.expanded {
   height: 450px;
   border-radius: 10px 10px 0 0;
 }

 .chat-window.maximized {
   width: 80%;
   height: 80%;
   z-index: 1001;
   border-radius: 10px;
   transform: scale(1);
   top: calc(50% - 40%);
   left: calc(50% - 40%);
   right: auto;
   bottom: auto;
 }

 .chat-header {
   padding: 10px;
   border-bottom: 1px solid #ccc;
   font-weight: bold;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 4px;
 }

 .chat-history {
   height: calc(100% - 86px);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   padding-bottom: 1rem;
 }

 .chat-input {
   display: flex;
   border-top: 1px solid #ccc;
   align-items: flex-start;
   gap: 10px;
   padding: 10px;
   align-items: center;
 }

 .message-input {
   flex-grow: 1;
   font-size: 16px;
 }

 .send-button {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   border: none;
   white-space: nowrap;
 }

 .message {
   padding: 8px;
   margin: 10px 10px 0 10px;
   border-radius: 10px;
   width: fit-content;
   clear: both;
   flex-shrink: 0;
 }

 .user-message {
   background-color: #25BCD0;
   color: white;
   align-self: flex-end;
   float: right;
 }

 .assistant-message {
   background-color: #E0E0E0;
   color: black;
   align-self: flex-start;
   float: left;
 }

 .assistant-message pre code {
   color: white;
 }

 .message pre {
   background-color: #2d2d2d;
   padding: 16px;
   border-radius: 8px;
   overflow-x: auto;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   margin: 8px 0;
 }

 .message pre code {
   font-family: 'Courier New', Courier, monospace;
   display: block;
   background: none;
   white-space: pre-wrap;
   word-break: break-word;
 }

 .icon-color {
   color: #141414;
   fill: currentColor;
 }

 .icon-container {
   pointer-events: auto;
 }

 .icon-container svg {
   pointer-events: none;
 }

 .conversation-starters {
   display: flex;
   flex-wrap: wrap;
   padding: 10px;
 }

 .starter-bubble {
   padding: 8px 16px;
   border-radius: 20px;
   background-color: #f0f0f0;
   color: #333;
   cursor: pointer;
   user-select: none;
   margin-bottom: 10px;
   border: 1px solid #d0d0d0;
   text-align: center;
   max-width: 80%;
   margin-left: auto;
   margin-right: auto;
   transition: background-color 0.3s ease, transform 0.3s ease;
 }

 .starter-bubble:hover {
   background-color: #e8e8e8;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }

 .learning-level-indicator {
   font-size: 0.85rem;
   color: #888;
   display: flex;
   align-items: center;
 }

 .dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 1000;
 }

 .system-message {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .system-message pre {
   width: 100%;
   margin: 0;
   box-sizing: border-box;
 }

 .system-message pre,
 .system-message code {
   white-space: pre-wrap;
   word-break: break-word;
   overflow-wrap: break-word;
   background: transparent;
   border: none;
   color: white;
 }

 .system-message .message {
   margin: 10px;
   padding: 10px;
   width: 95%;
   box-sizing: border-box;
   background-color: #2d2d2d;
   color: white;
 }


 .warning-message {
   color: red;
 }

 .send-button.disabled {
   background-color: gray;
 }

 /* Typing indicator in the chat window */
 .typing {
   position: relative;
   padding: 10px;
   margin: 10px 10px 0;
   background: #e6e6e6;
   border-radius: 20px;
   align-self: flex-start;
 }

 .typing__dot {
   float: left;
   width: 8px;
   height: 8px;
   margin: 0 4px;
   background: #8d8c91;
   border-radius: 50%;
   opacity: 0;
   animation: loadingFade 1s infinite;
 }

 .typing__dot:nth-child(1) {
   animation-delay: 0s;
 }

 .typing__dot:nth-child(2) {
   animation-delay: 0.2s;
 }

 .typing__dot:nth-child(3) {
   animation-delay: 0.4s;
 }

 @keyframes loadingFade {
   0% {
     opacity: 0;
   }

   50% {
     opacity: 0.8;
   }

   100% {
     opacity: 0;
   }
 }