body { font-family: Arial, sans-serif; margin: 30px; background: #f4f4f4; }
h1 { font-size: 28px; }
.chat-controls { margin-bottom: 15px; display: flex; gap: 10px; }
#chat-box { border: 1px solid #ddd; padding: 15px; height: 400px; overflow-y: scroll; background: #fff; margin-bottom: 15px; }
.message { margin-bottom: 10px; padding: 8px; border-radius: 5px; }
.user { background: #e7f4e4; }
.bot { background: #ffe6e6; }
.code-block { background: #222; color: #0f0; padding: 10px; margin-top: 5px; position: relative; }
.code-block button { position: absolute; top: 5px; right: 5px; background: #555; color: #fff; border: none; cursor: pointer; }
input[type="text"] { width: 80%; padding: 8px; }
button { padding: 8px 12px; cursor: pointer; }

.loading::after {
    content: '...';
    animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}