/* ──────────────────────────────────────────────────────────────────────
   Live Chat Simulator — WhatsApp-faithful chrome + animation primitives.
   No external assets. All durations are CSS custom properties so a single
   edit re-tunes the whole feel.
   ────────────────────────────────────────────────────────────────────── */

.sim-frame {
    --sim-bg:           #e5ddd5;
    --sim-bubble-in:    #ffffff;
    --sim-bubble-out:   #dcf8c6;
    --sim-header-bg:    #075e54;
    --sim-header-fg:    #ffffff;
    --sim-accent:       #25d366;
    --sim-text:         #1a1a1a;
    --sim-muted:        #6b7280;
    --sim-radius:       18px;

    --sim-anim-bubble:  220ms;
    --sim-anim-button:  180ms;
    --sim-anim-stagger: 60ms;
    --sim-anim-fade:    120ms;

    display: flex; flex-direction: column;
    width: 320px; max-width: 100%;
    border-radius: 28px;
    background: #1a1d24;
    padding: 12px 10px 16px;
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
    overflow: hidden;
    direction: rtl;
}
.sim-frame.sim-frame--dark { --sim-bg: #0b141a; --sim-bubble-in: #1f2c33; --sim-text: #e9edef; }

.sim-header {
    background: var(--sim-header-bg); color: var(--sim-header-fg);
    border-radius: var(--sim-radius) var(--sim-radius) 0 0;
    padding: 10px 12px;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
}

.sim-body {
    background: var(--sim-bg);
    min-height: 380px; max-height: 480px;
    padding: 10px;
    display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto;
}

.sim-bubble {
    background: var(--sim-bubble-in);
    color: var(--sim-text);
    border-radius: 12px;
    padding: 7px 10px;
    font-size: 13px;
    max-width: 80%;
    align-self: flex-start;
    white-space: pre-wrap;
    word-break: break-word;
    animation: sim-bubble-in var(--sim-anim-bubble) ease-out;
}
.sim-bubble--outbound { align-self: flex-end; background: var(--sim-bubble-out); }

.sim-typing {
    align-self: flex-start;
    background: var(--sim-bubble-in);
    border-radius: 12px;
    padding: 8px 12px;
    display: inline-flex; gap: 4px;
    animation: sim-bubble-in var(--sim-anim-bubble) ease-out;
}
.sim-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--sim-muted);
    animation: sim-typing 1.4s infinite both;
}
.sim-typing span:nth-child(2) { animation-delay: .2s; }
.sim-typing span:nth-child(3) { animation-delay: .4s; }

.sim-interactive {
    align-self: flex-start;
    background: var(--sim-bubble-in);
    border-radius: 12px;
    padding: 8px;
    width: 90%;
    display: flex; flex-direction: column; gap: 6px;
    animation: sim-bubble-in var(--sim-anim-bubble) ease-out;
}
.sim-interactive-body {
    color: var(--sim-text); font-size: 13px; padding: 4px 6px 6px;
}
.sim-button {
    background: transparent; color: var(--sim-accent);
    border: 1px solid #ddd; border-radius: 10px;
    padding: 7px 10px; font-size: 13px; font-weight: 500;
    text-align: center;
    animation: sim-button-in var(--sim-anim-button) ease-out backwards;
    cursor: default;
}
.sim-button:nth-child(1) { animation-delay: 0ms; }
.sim-button:nth-child(2) { animation-delay: var(--sim-anim-stagger); }
.sim-button:nth-child(3) { animation-delay: calc(var(--sim-anim-stagger) * 2); }
.sim-button:nth-child(4) { animation-delay: calc(var(--sim-anim-stagger) * 3); }
.sim-button:nth-child(5) { animation-delay: calc(var(--sim-anim-stagger) * 4); }

.sim-transition-out { animation: sim-fade-out var(--sim-anim-fade) ease-in forwards; }

@keyframes sim-bubble-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes sim-button-in {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes sim-typing {
    0%, 60%, 100% { transform: translateY(0);   opacity: .4; }
    30%           { transform: translateY(-3px); opacity: 1; }
}
@keyframes sim-fade-out {
    to { opacity: 0; }
}