/* Chat UI */
#chat {
 display: flex;
 flex-direction: column;
 height: 100%;
 overflow: hidden;
}

.chat-messages {
 flex: 1;
 overflow-y: auto;
 padding: 8px 0;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.chat-message {
 display: flex;
 flex-direction: column;
 max-width: 88%;
 animation: chat-fade-in 0.2s ease-out;
}

@keyframes chat-fade-in {
 from { opacity: 0; transform: translateY(6px); }
 to { opacity: 1; transform: translateY(0); }
}

.chat-message.user {
 align-self: flex-end;
 margin-top:8px;
}

.chat-message.bot {
 align-self: flex-start;
}

.chat-bubble {
 padding: 8px 14px;
 border-radius: 8px;
 font-size: 13px;
 line-height: 1.45;
 word-wrap: break-word;
}

.chat-message.user .chat-bubble {
 background: var(--headings);
 color: #fff;  
}

.chat-message.bot .chat-bubble {
 background: #fff;
 color: var(--tekst);  
 border: 1px solid var(--queue-border);
}

.chat-sender {
 font-size: 11px;
 font-weight: 600;
 color: var(--lichte-tekst);
 padding: 0 4px 2px;
}

.chat-message.user .chat-sender {
 text-align: right;
}

.chat-time {
 font-size: 10px;
 color: var(--kantlijn_tekst);
 padding: 2px 4px 0;
}

.chat-message.user .chat-time {
 text-align: right;
}

/* Typing indicator */
.chat-typing {
 display: flex;
 align-items: center;
 gap: 4px;
 padding: 8px 14px;
}

.chat-typing span {
 width: 6px;
 height: 6px;
 background: var(--headings);
 border-radius: 50%;
 animation: chat-bounce 1.4s infinite ease-in-out both;
}

.chat-typing span:nth-child(1) { animation-delay: 0s; }
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chat-bounce {
 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
 40% { transform: scale(1); opacity: 1; }
}

/* Chat input area */
.chat-input-area {
 display: flex;
 align-items: center;
 gap: 6px;
 padding-top: 8px;
 border-top: 1px solid var(--queue-border);
 margin-top: 8px;
}

.chat-input {
 flex: 1;
 padding: 8px 14px;
 border: 1px solid var(--kantlijn_tekst);
 border-radius: 20px;
 background: #fff;
 color: var(--tekst);
 font-size: 13px;
 outline: none;
 transition: border-color 0.2s;
}

.chat-input:focus {
 border-color: var(--headings);
}

.chat-send-btn {
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: var(--headings);
 border: none;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 flex-shrink: 0;
 padding: 0;
}

.chat-send-btn .material-symbols-outlined {
 font-size: 20px;
 color: #fff;
}