/* ============================================================
   CHATBOT WIDGET
   ============================================================ */
.chatbot-widget {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: 300;
}

.chatbot-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-navy);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition), background var(--transition);
    position: relative;
}

.chatbot-toggle:hover {
    transform: scale(1.06);
    background: var(--color-blue);
}

.chatbot-toggle-icon {
    position: absolute;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition), transform var(--transition);
}

.chatbot-toggle-icon svg {
    width: 26px;
    height: 26px;
}

.chatbot-toggle-icon--close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

.chatbot-widget.is-open .chatbot-toggle-icon--open {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

.chatbot-widget.is-open .chatbot-toggle-icon--close {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.chatbot-panel {
    position: absolute;
    bottom: 76px;
    right: 0;
    width: 360px;
    max-width: calc(100vw - 2.5rem);
    height: 480px;
    max-height: calc(100vh - 140px);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    transform-origin: bottom right;
}

.chatbot-widget.is-open .chatbot-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.chatbot-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-navy);
    color: var(--color-white);
}

.chatbot-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    flex-shrink: 0;
}

.chatbot-header-avatar svg {
    width: 20px;
    height: 20px;
}

.chatbot-header strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
}

.chatbot-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.65);
}

.chatbot-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    display: inline-block;
    animation: pulse 2s ease-in-out infinite;
}

.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--color-bg);
}

.chatbot-message {
    max-width: 85%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: 1.5;
    animation: fadeUp 0.3s var(--ease);
}

.chatbot-message--bot {
    align-self: flex-start;
    background: var(--color-white);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 4px;
}

.chatbot-message--user {
    align-self: flex-end;
    background: var(--color-blue);
    color: var(--color-white);
    border-bottom-right-radius: 4px;
}

.chatbot-typing {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    border-bottom-left-radius: 4px;
}

.chatbot-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
    animation: pulse 1s ease-in-out infinite;
}

.chatbot-typing span:nth-child(2) { animation-delay: 0.15s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.3s; }

.chatbot-input-row {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
    background: var(--color-white);
}

.chatbot-input-row input {
    flex: 1;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-border);
    padding: 0.7rem 1.1rem;
    font-size: var(--fs-sm);
}

.chatbot-input-row input:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px var(--color-blue-light);
}

.chatbot-input-row button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--color-blue);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition);
    flex-shrink: 0;
}

.chatbot-input-row button:hover {
    background: var(--color-navy);
}

.chatbot-input-row button svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 480px) {
    .chatbot-panel {
        width: calc(100vw - 1.5rem);
        right: -0.5rem;
        height: 70vh;
    }
    .chatbot-widget {
        right: var(--space-4);
        bottom: var(--space-4);
    }
}