html, body { width: 100%; min-height: 100%; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #f0f2f5; margin: 0; }
#launcher { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background: #ff8533; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1000; overflow: hidden; }
#launcher img { width: 100%; height: 100%; object-fit: cover; display: block; }
#chat { position: fixed; right: 20px; bottom: 90px; width: min(360px, calc(100vw - 24px)); max-width: calc(100vw - 24px); height: min(580px, calc(100dvh - 108px)); max-height: calc(100dvh - 108px); background: #fff; border-radius: 15px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); display: none; flex-direction: column; z-index: 1000; overflow: hidden; --chat-header-bg: #ffffff; --chat-header-text: #555555; --chat-header-border: #eeeeee; }
.header { background: var(--chat-header-bg); padding: 15px; border-bottom: 1px solid var(--chat-header-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.header-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-logo { width: 34px; height: 34px; border-radius: 50%; background: #ff8533; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.header-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.header-title { font-weight: 600; color: var(--chat-header-text); font-size: 14px; }
.header-btns { display: flex; align-items: center; gap: 15px; }
.header-btns div { cursor: pointer; color: var(--chat-header-text); font-size: 18px; font-weight: bold; }
.body { flex: 1; padding: 15px; overflow-y: auto; background: #f9f9fb; display: flex; flex-direction: column; }
.msg-container { display: flex; align-items: flex-start; margin-bottom: 15px; width: 100%; }
.bot-icon { width: 30px; height: 30px; background: #ff8533; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 8px; flex-shrink: 0; overflow: hidden; }
.bot-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg { max-width: 80%; font-size: 14px; line-height: 1.5; padding: 12px; border-radius: 18px 18px 18px 4px; border: 1px solid #eee; background: #fff; color: #666; }
.user-msg { background: #ff8533; color: #fff; border-radius: 18px 18px 4px 18px; align-self: flex-end; margin-left: auto; border: none; }
.typing-msg { display: inline-flex; align-items: center; gap: 6px; min-width: 64px; }
.typing-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff8533; opacity: 0.35; animation: chatbotTyping 1s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }
.pill-btn { display: block; width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ff8533; border-radius: 25px; background: #fff; color: #ff8533; cursor: pointer; text-align: left; font-size: 13px; }
.pill-btn[disabled] { opacity: 0.6; cursor: default; }
.pill-btn.is-selected { background: #ff8533; color: #fff; }
.pill-btn.back-btn { border-style: dashed; }
.open-btn { display: flex; align-items: center; padding: 6px 15px; border: 1px solid #ff8533; border-radius: 20px; background: #fff; color: #ff8533; cursor: pointer; margin-top: 5px; font-size: 13px; text-decoration: none; width: fit-content; }
.choice-row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.circle-choice { display: flex; align-items: center; padding: 8px 20px; border: 1px solid #ff8533; border-radius: 20px; background: #fff; color: #ff8533; cursor: pointer; font-size: 13px; text-decoration: none; }
.circle-choice::before { content: ""; width: 10px; height: 10px; border: 1px solid #ccc; border-radius: 50%; margin-right: 8px; }
.input-area { display: flex; align-items: center; gap: 12px; padding: 14px 15px; background: #fff; border-top: 1px solid #eee; }
.input-area input { flex: 1; min-width: 0; border: none; outline: none; font-size: 14px; color: #374151; }
.send-btn { background: none; border: none; color: #ff8533; cursor: pointer; font-size: 20px; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.send-btn:hover { background: #fff2e8; }

@keyframes chatbotTyping {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
    40% { transform: translateY(-3px); opacity: 1; }
}

body.widget-embed {
    background: transparent;
}

body.widget-embed #chat {
    position: relative;
    inset: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    display: flex;
}

@media (max-width: 900px) {
    #launcher { right: 16px; bottom: 16px; width: 56px; height: 56px; }
    #chat {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        box-shadow: none;
    }
    .header {
        padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
    }
    .body { padding: 12px; }
    .msg-container { margin-bottom: 12px; }
    .bot-icon { width: 28px; height: 28px; margin-right: 10px; }
    .msg { max-width: calc(100% - 42px); padding: 12px 14px; font-size: 15px; }
    .pill-btn { padding: 11px 12px; }
    .input-area {
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    }
}