/* ========================================
   iOS 17 Typing Indicator - Pixel Perfect
   The typing indicator should be BLUE (sent side)
   because WE are the ones typing the response

   In RTL mode (Persian/Arabic), flex-end becomes LEFT
   So no need to override justify-content for RTL
   ======================================== */

/* Typing Bubble Wrapper */
.typing-bubble-wrapper {
    padding: 8px 16px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end; /* RIGHT in LTR, LEFT in RTL */
    animation: typingAppear 0.3s ease-out;
}

/* Typing Bubble - BLUE like sent messages */
.typing-bubble {
    background: var(--imessage-bubble-sent);
    border-radius: 17px;
    border-bottom-right-radius: 4px; /* Tail side in LTR */
    padding: 12px 16px;
    position: relative;
    animation: typingPulse 2s ease-in-out infinite;
}

/* Tail for typing bubble - RIGHT side in LTR */
.typing-bubble::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 12px;
    height: 18px;
    background: var(--imessage-bubble-sent);
    border-bottom-left-radius: 12px;
}

.typing-bubble::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -12px;
    width: 12px;
    height: 18px;
    background: var(--ios-bg-primary);
    border-bottom-left-radius: 8px;
}

/* Typing Dots Container */
.typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 17px;
}

/* Individual Dots - WHITE on blue background */
.typing-dots span {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: block;
}

/* Dot Animations */
.typing-dots span:nth-child(1) {
    animation: typingDot 1.4s ease-in-out infinite;
}

.typing-dots span:nth-child(2) {
    animation: typingDot 1.4s ease-in-out infinite 0.2s;
}

.typing-dots span:nth-child(3) {
    animation: typingDot 1.4s ease-in-out infinite 0.4s;
}

/* Dot Animation Keyframes */
@keyframes typingDot {
    0%, 60%, 100% {
        opacity: 0.5;
        transform: translateY(0) scale(1);
    }
    30% {
        opacity: 1;
        transform: translateY(-3px) scale(1.1);
    }
}

/* Appear Animation */
@keyframes typingAppear {
    0% {
        opacity: 0;
        transform: translateX(10px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Subtle Pulse Animation for the Bubble */
@keyframes typingPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* ========================================
   RTL Support (Persian/Arabic)
   In RTL: flex-end = LEFT, so bubble appears on left
   Tail needs to be on LEFT side of bubble
   ======================================== */

html[dir="rtl"] .typing-bubble {
    border-bottom-right-radius: 17px;
    border-bottom-left-radius: 4px; /* Tail side in RTL */
}

html[dir="rtl"] .typing-bubble::before {
    right: auto;
    left: -6px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 12px;
}

html[dir="rtl"] .typing-bubble::after {
    right: auto;
    left: -12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 8px;
}

/* RTL appear animation - from LEFT */
html[dir="rtl"] .typing-bubble-wrapper {
    animation: typingAppearRTL 0.3s ease-out;
}

@keyframes typingAppearRTL {
    0% {
        opacity: 0;
        transform: translateX(-10px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}