/**
 * eMil Emotion Engine — Chatbot integration styles
 *
 * Handles:
 *  - Header eMil avatar (static 70px, Variant E)
 *  - Status text in header
 *  - Floating button SVG
 *  - Hide old mini avatars
 *  - SVG element transitions
 *  - Responsive adjustments
 *
 * @since 5.4.2
 */

/* ═══════════════════════════════════════════════════════════════
 * eMil STATUS TEXT — in header, below title
 * ═══════════════════════════════════════════════════════════════ */

.emil-status {
    font-family: var(--zsmh-chat-font-body, 'Inter', -apple-system, sans-serif);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
    min-height: 13px;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.emil-status:empty {
    display: none;
}


/* ═══════════════════════════════════════════════════════════════
 * FLOATING BUTTON — eMil SVG inside bubble
 * ═══════════════════════════════════════════════════════════════ */

.zsmh-chat-bubble .emil-float-svg {
    width: 56px;
    height: 56px;
    display: block;
}

/* Bounce animation for notifications */
@keyframes emilBounce {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.15); }
    50% { transform: scale(0.95); }
    75% { transform: scale(1.08); }
}

.zsmh-chat-bubble.is-bouncing {
    animation: emilBounce 0.6s ease-in-out;
}


/* ═══════════════════════════════════════════════════════════════
 * HIDE OLD MINI AVATARS — replaced by header avatar
 * ═══════════════════════════════════════════════════════════════ */

.zsmh-chat-msg-avatar {
    display: none !important;
}

/* Bot messages no longer need left gap for avatar */
.zsmh-chat-msg-bot {
    gap: 0;
}

.zsmh-chat-msg-bot .zsmh-chat-msg-content {
    border-radius: 4px 12px 12px 12px;
}


/* ═══════════════════════════════════════════════════════════════
 * SVG TRANSITIONS — smooth morphing between emotions
 * ═══════════════════════════════════════════════════════════════ */

.emil-header-avatar svg ellipse,
.emil-header-avatar svg path,
.emil-header-avatar svg rect,
.emil-header-avatar svg line,
.emil-header-avatar svg g {
    transition: all 0.35s ease;
}


/* ═══════════════════════════════════════════════════════════════
 * RESPONSIVE
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .zsmh-chat-bubble .emil-float-svg {
        width: 46px;
        height: 46px;
    }
}


/* ═══════════════════════════════════════════════════════════════
 * PRINT — hide
 * ═══════════════════════════════════════════════════════════════ */

@media print {
    .emil-header-avatar {
        display: none !important;
    }
}
