body {min-height:100vh;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#9be4cd 0%,#185a9d 100%);} .chat-container {max-width:100%;height:calc(100vh - 80px);margin-top:10px;background:white;box-shadow:0 0 15px rgba(0,0,0,0.1);display:flex;flex-direction:column;border-radius:18px;} .chat-header {padding:15px 20px;border-bottom:1px solid #e9ecef;background:linear-gradient(135deg,#6c5ce7,#8e44ad);color:white;display:none;} .chat-messages {flex:1;overflow-y:auto;padding:20px;background-color:#f8f9fa;border-radius:12px;} .message {display:flex;margin-bottom:20px;animation:fadeIn 0.3s ease;} .user-message {justify-content:flex-end;} .message-content {max-width:70%;padding:8px 12px;border-radius:18px;box-shadow:0 2px 5px rgba(0,0,0,0.1);} .message-avatar {width:40px;height:40px;border-radius:50%;margin:0 10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:white;} .user-message {justify-content:flex-end;} .user-avatar {background:linear-gradient(135deg,#6c5ce7,#8e44ad);margin-right:0;} .assistant-avatar {background:linear-gradient(135deg,#00b894,#00cec9);margin-left:0;} .message-content p{margin-bottom:0px;} .assistant-message .message-content {background-color:white;border-top-left-radius:4px;} .user-message .message-content {background-color:#6c5ce7;color:white;border-top-right-radius:4px;} .message-time {font-size:12px;margin-top:5px;opacity:0.8;} .user-message .message-time {text-align:right;} .chat-input-container {padding:15px;border-top:1px solid #e9ecef;background-color:white;} .empty-chat {display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#6c757d;} .empty-chat i {font-size:3rem;margin-bottom:15px;color:#dee2e6;} .message-text pre {background-color:#f8f9fa;border-radius:5px;padding:12px;overflow-x:auto;} .message-text code {background-color:#f8f9fa;border-radius:3px;padding:2px 5px;font-family:'Courier New',monospace;} .typing-indicator {display:flex;padding:10px 15px;background:white;border-radius:18px;width:fit-content;box-shadow:0 2px 5px rgba(0,0,0,0.1);margin-bottom:20px;} .typing-indicator span {height:8px;width:8px;background-color:#6c757d;border-radius:50%;margin:0 2px;opacity:0.6;animation:bounce 1.2s infinite;} .typing-indicator span:nth-child(2) {animation-delay:0.2s;} .typing-indicator span:nth-child(3) {animation-delay:0.4s;} @keyframes bounce {0%,100% {transform:translateY(0);} 50% {transform:translateY(-5px);}} @keyframes fadeIn {from {opacity:0;transform:translateY(10px);} to {opacity:1;transform:translateY(0);}} @media (max-width:768px) {.chat-container {height:calc(100vh - 80px);} .message-content {max-width:85%;} .chat-header h5 {font-size:1.1rem;}} .api-status {font-size:0.8rem;padding:5px 10px;border-radius:4px;margin-top:5px;display:none;} .api-status.success {background-color:#d4edda;color:#155724;display:block;} .api-status.error {background-color:#f8d7da;color:#721c24;display:block;} .btn-white{color:#ffffff;border:1px solid #ffffff;} .container-fluid{max-width:768px;}