.rheumcare-chatbot { position: fixed; right: 1.4rem; bottom: 5.6rem; z-index: 950; font-family: "Titillium Web", Arial, sans-serif; }
.chatbot-toggle { width: 3.7rem; height: 3.7rem; padding: 0; overflow: hidden; color: #fff; background: #104099; border: .18rem solid #fff; border-radius: 50%; box-shadow: 0 12px 30px rgba(10,44,109,.28); }
.chatbot-toggle img, .chatbot-avatar img, .message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chatbot-window { position: absolute; right: 0; bottom: 4.6rem; width: min(24rem, calc(100vw - 2rem)); height: min(38rem, calc(100vh - 9rem)); display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #dce5ec; border-radius: 1rem; box-shadow: 0 24px 60px rgba(10,44,109,.26); }
.chatbot-window[hidden] { display: none; }
.chatbot-header { display: flex; padding: 1rem; align-items: center; justify-content: space-between; color: #fff; background: linear-gradient(120deg, #0a2c6d, #104099); }
.chatbot-header-content { display: flex; align-items: center; gap: .7rem; }
.chatbot-avatar { width: 2.6rem; height: 2.6rem; overflow: hidden; border: 2px solid rgba(255,255,255,.65); border-radius: 50%; }
.chatbot-header h2 { margin: 0; color: #fff; font-size: 1rem; }
.chatbot-header p { margin: 0; color: rgba(255,255,255,.8); font-size: .78rem; }
.chatbot-close { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; color: #fff; background: transparent; border: 0; border-radius: 50%; font-size: 1.7rem; line-height: 1; }
.chatbot-close:hover { background: rgba(255,255,255,.15); }
.chatbot-messages { flex: 1; display: flex; flex-direction: column; gap: .9rem; padding: 1rem; overflow-y: auto; background: #f4f8fa; }
.chatbot-message { display: flex; gap: .55rem; align-items: flex-end; }
.chatbot-message.user-message { flex-direction: row-reverse; }
.message-avatar { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; overflow: hidden; color: #104099; background: #dce5ec; border-radius: 50%; }
.message-content { max-width: 80%; padding: .72rem .85rem; color: #223047; background: #fff; border-radius: .8rem .8rem .8rem .15rem; box-shadow: 0 3px 12px rgba(16,64,153,.08); font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.user-message .message-content { color: #fff; background: #104099; border-radius: .8rem .8rem .15rem .8rem; }
.message-content p { margin: 0 0 .55rem; }
.message-content p:last-child { margin-bottom: 0; }
.message-content a { color: inherit; }
.chatbot-typing { padding: .45rem 1rem; background: #f4f8fa; }
.chatbot-typing[hidden] { display: none; }
.typing-indicator { display: flex; gap: .25rem; }
.typing-indicator span { width: .42rem; height: .42rem; background: #00af89; border-radius: 50%; animation: chatbot-pulse 1s infinite alternate; }
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }
@keyframes chatbot-pulse { to { opacity: .25; transform: translateY(-.2rem); } }
.chatbot-input-container { display: flex; gap: .5rem; padding: .75rem; background: #fff; border-top: 1px solid #dce5ec; }
.chatbot-shortcuts { padding: .55rem .75rem; background: #fff; border-top: 1px solid #dce5ec; }
.chatbot-shortcuts button { width: 100%; padding: .5rem .7rem; color: #104099; background: #edf4ff; border: 1px solid #c9dcf5; border-radius: .45rem; font-size: .85rem; font-weight: 700; }
.chatbot-input { min-width: 0; flex: 1; padding: .68rem .8rem; border: 1px solid #b8c6d2; border-radius: 999px; }
.chatbot-send { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: #00af89; border: 0; border-radius: 50%; }
.chatbot-send:disabled { opacity: .55; }
.booking-form-container { max-height: 26rem; padding: 1rem; overflow-y: auto; background: #fff; border-top: 1px solid #dce5ec; }
.booking-form-container[hidden] { display: none; }
.booking-form-container h3 { font-size: 1.1rem; }
.chatbot-form-grid { display: grid; gap: .65rem; }
.chatbot-form-grid label { display: grid; gap: .2rem; color: #223047; font-size: .82rem; font-weight: 700; }
.chatbot-form-grid input, .chatbot-form-grid select, .chatbot-form-grid textarea { width: 100%; padding: .55rem .65rem; border: 1px solid #b8c6d2; border-radius: .4rem; }
.chatbot-form-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.chatbot-form-actions button { padding: .55rem .75rem; border-radius: .4rem; border: 0; font-weight: 700; }
.chatbot-form-actions button[type="submit"] { color: #fff; background: #104099; }
.chatbot-form-actions button[type="button"] { color: #223047; background: #e9eff3; }
@media (max-width: 42rem) {
    .rheumcare-chatbot { right: .65rem; bottom: 4.75rem; }
    .chatbot-window { position: fixed; right: .6rem; bottom: 4.7rem; width: calc(100vw - 1.2rem); height: min(36rem, calc(100dvh - 6rem)); }
}
@media (prefers-reduced-motion: reduce) { .typing-indicator span { animation: none; } }

.chatbot-invitation { position: absolute; right: 4.3rem; bottom: 0; display: flex; width: min(17rem, calc(100vw - 6rem)); color: #223047; background: #fff; border: 1px solid #b8c6d2; border-radius: .75rem; box-shadow: 0 8px 24px #10409922; }
.chatbot-invitation[hidden] { display: none; }
.chatbot-invitation button { color: #0a2c6d; background: transparent; border: 0; padding: .65rem; text-align: left; }
#chatbot-invitation-open { flex: 1; font-size: .95rem; }
#chatbot-invitation-dismiss { align-self: flex-start; min-width: 2.75rem; min-height: 2.75rem; font-size: 1.5rem; }
.chatbot-privacy { margin: 0; padding: .5rem .75rem; font-size: .78rem; line-height: 1.4; background: #fff; }
.chatbot-messages { min-height: 3rem; }
.booking-form-container { flex-shrink: 1; min-height: 0; }
.booking-form-container .consent-label { display: flex; font-size: .85rem; margin-top: .75rem; }
.booking-form-container .consent-label input { width: 1.25rem; }
.chatbot-send { background: #00856a; }

.chatbot-form-grid label { display: block; }
.chatbot-form-grid input, .chatbot-form-grid select, .chatbot-form-grid textarea { display: block; margin-top: .25rem; }
