#chat-messages {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e9fd 100%);
}

.msg-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 18px;
    margin-bottom: 8px;
    word-wrap: break-word;
}

.msg-bubble small {
    font-size: 0.75rem;
    opacity: 0.8;
}

.msg-me {
    background: #0d6efd;
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.msg-partner {
    background: var(--bg-secondary) !important;
    margin-right: auto;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    color:var(--text-primary);
}

.system-msg {
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
    margin: 16px 0;
}

#typing-indicator {
    margin-bottom: 8px;
}

.typing-indicator {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: #e9ecef;
    border-radius: 18px;
    width: fit-content;
    font-size: 0.9rem;
    color: #6c757d;
}

.typing-dots::after {
    content: '...';
    animation: dots 1.5s steps(5, end) infinite;
}

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

/* Room chat styles */
.btn-check:checked + .btn-outline-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

.btn-check:checked + .btn-outline-success {
    background-color: #198754;
    border-color: #198754;
    color: white;
}

#room-mode-label {
    align-self: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
}