/**
 * Touch (تاچ) - Smart Contact Hub Widget RTL Styles
 * Right-to-Left language support (Arabic, Persian, Hebrew, etc.)
 * 
 * @package Touch
 * @version 1.0.0
 */

/* ============================================
   RTL Position — DO NOT mirror left/right
   User explicitly picks bottom-right or bottom-left.
   Only fix panel alignment and channel icon spacing.
   ============================================ */

[dir="rtl"] .tch-widget,
.rtl .tch-widget {
    direction: rtl;
}

/* ============================================
   RTL Badge Positioning
   ============================================ */

[dir="rtl"] .tch-widget-badge.tch-badge-left,
.rtl .tch-widget-badge.tch-badge-left {
    right: auto;
    left: 100%;
    margin-left: 0;
    margin-right: var(--tch-spacing-sm);
}

[dir="rtl"] .tch-widget-badge.tch-badge-right,
.rtl .tch-widget-badge.tch-badge-right {
    left: auto;
    right: 100%;
    margin-right: 0;
    margin-left: var(--tch-spacing-sm);
}

/* ============================================
   RTL Panel Positioning — keep same side as button
   ============================================ */

[dir="rtl"] .tch-widget.tch-position-bottom-right .tch-widget-panel,
[dir="rtl"] .tch-widget.tch-position-middle-right .tch-widget-panel,
.rtl .tch-widget.tch-position-bottom-right .tch-widget-panel,
.rtl .tch-widget.tch-position-middle-right .tch-widget-panel {
    right: 0;
    left: auto;
    transform-origin: bottom right;
}

[dir="rtl"] .tch-widget.tch-position-bottom-left .tch-widget-panel,
[dir="rtl"] .tch-widget.tch-position-middle-left .tch-widget-panel,
.rtl .tch-widget.tch-position-bottom-left .tch-widget-panel,
.rtl .tch-widget.tch-position-middle-left .tch-widget-panel {
    left: 0;
    right: auto;
    transform-origin: bottom left;
}

/* ============================================
   RTL Channel Icon Spacing
   ============================================ */

[dir="rtl"] .tch-widget-channel-icon,
[dir="rtl"] .tch-channel-icon,
.rtl .tch-widget-channel-icon,
.rtl .tch-channel-icon {
    margin-right: 0;
    margin-left: 12px;
}

/* ============================================
   RTL Channel Hover Effect
   ============================================ */

[dir="rtl"] .tch-widget-channel:hover,
[dir="rtl"] .tch-channel:hover,
.rtl .tch-widget-channel:hover,
.rtl .tch-channel:hover {
    transform: translateX(-4px);
}

[dir="rtl"] .tch-widget-channel:active,
[dir="rtl"] .tch-channel:active,
.rtl .tch-widget-channel:active,
.rtl .tch-channel:active {
    transform: translateX(-2px);
}

/* ============================================
   RTL Pill Style Button
   ============================================ */

[dir="rtl"] .tch-widget.tch-style-pill .tch-widget-button-text,
.rtl .tch-widget.tch-style-pill .tch-widget-button-text {
    margin-left: 0;
    margin-right: var(--tch-spacing-sm);
}

/* ============================================
   RTL Chat Bubble Style
   ============================================ */

[dir="rtl"] .tch-widget.tch-style-chat-bubble .tch-widget-button,
.rtl .tch-widget.tch-style-chat-bubble .tch-widget-button {
    border-radius: 50% 50% 50% 0;
}

[dir="rtl"] .tch-widget.tch-style-chat-bubble.tch-position-bottom-left .tch-widget-button,
[dir="rtl"] .tch-widget.tch-style-chat-bubble.tch-position-middle-left .tch-widget-button,
.rtl .tch-widget.tch-style-chat-bubble.tch-position-bottom-left .tch-widget-button,
.rtl .tch-widget.tch-style-chat-bubble.tch-position-middle-left .tch-widget-button {
    border-radius: 50% 50% 0 50%;
}

/* ============================================
   RTL Side Panel Channel Icon
   ============================================ */

[dir="rtl"] .tch-widget.tch-style-side-panel .tch-widget-channel-icon,
[dir="rtl"] .tch-widget.tch-style-side-panel .tch-channel-icon,
.rtl .tch-widget.tch-style-side-panel .tch-widget-channel-icon,
.rtl .tch-widget.tch-style-side-panel .tch-channel-icon {
    margin-left: 0;
    margin-right: 0;
}

/* ============================================
   RTL Outside Hours Message
   ============================================ */

[dir="rtl"] .tch-widget-outside-hours-message,
[dir="rtl"] .tch-outside-hours-message,
.rtl .tch-widget-outside-hours-message,
.rtl .tch-outside-hours-message {
    border-left: none;
    border-right: 4px solid #f59e0b;
}

/* ============================================
   RTL Animation Adjustments
   ============================================ */

/* Slide Left becomes Slide Right in RTL */
[dir="rtl"] .tch-widget.tch-slide-left-in,
.rtl .tch-widget.tch-slide-left-in {
    animation-name: tch-slide-right-in;
}

[dir="rtl"] .tch-widget.tch-slide-left-out,
.rtl .tch-widget.tch-slide-left-out {
    animation-name: tch-slide-right-out;
}

/* Slide Right becomes Slide Left in RTL */
[dir="rtl"] .tch-widget.tch-slide-right-in,
.rtl .tch-widget.tch-slide-right-in {
    animation-name: tch-slide-left-in;
}

[dir="rtl"] .tch-widget.tch-slide-right-out,
.rtl .tch-widget.tch-slide-right-out {
    animation-name: tch-slide-left-out;
}

/* Middle positioned widgets */
[dir="rtl"] .tch-widget.tch-position-middle-right.tch-slide-left-in,
[dir="rtl"] .tch-widget.tch-position-middle-left.tch-slide-left-in,
.rtl .tch-widget.tch-position-middle-right.tch-slide-left-in,
.rtl .tch-widget.tch-position-middle-left.tch-slide-left-in {
    animation-name: tch-slide-right-in-middle;
}

[dir="rtl"] .tch-widget.tch-position-middle-right.tch-slide-left-out,
[dir="rtl"] .tch-widget.tch-position-middle-left.tch-slide-left-out,
.rtl .tch-widget.tch-position-middle-right.tch-slide-left-out,
.rtl .tch-widget.tch-position-middle-left.tch-slide-left-out {
    animation-name: tch-slide-right-out-middle;
}

[dir="rtl"] .tch-widget.tch-position-middle-right.tch-slide-right-in,
[dir="rtl"] .tch-widget.tch-position-middle-left.tch-slide-right-in,
.rtl .tch-widget.tch-position-middle-right.tch-slide-right-in,
.rtl .tch-widget.tch-position-middle-left.tch-slide-right-in {
    animation-name: tch-slide-left-in-middle;
}

[dir="rtl"] .tch-widget.tch-position-middle-right.tch-slide-right-out,
[dir="rtl"] .tch-widget.tch-position-middle-left.tch-slide-right-out,
.rtl .tch-widget.tch-position-middle-right.tch-slide-right-out,
.rtl .tch-widget.tch-position-middle-left.tch-slide-right-out {
    animation-name: tch-slide-left-out-middle;
}

/* ============================================
   RTL Bottom Bar Scroll Direction
   ============================================ */

[dir="rtl"] .tch-widget.tch-style-bottom-bar .tch-widget-channels,
[dir="rtl"] .tch-widget.tch-style-bottom-bar .tch-channels-list,
.rtl .tch-widget.tch-style-bottom-bar .tch-widget-channels,
.rtl .tch-widget.tch-style-bottom-bar .tch-channels-list {
    direction: rtl;
}

/* ============================================
   RTL Font Optimization
   ============================================ */

/* Use appropriate fonts for RTL languages */
[dir="rtl"] .tch-widget,
.rtl .tch-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Tahoma", "Vazir", "Samim", sans-serif;
}

/* Arabic/Persian specific optimizations */
[lang="ar"] .tch-widget,
[lang="fa"] .tch-widget,
[lang="ur"] .tch-widget {
    font-family: 'Vazir', "Tahoma", "Arial", "Segoe UI", "Helvetica Neue", sans-serif;
}

/* Hebrew specific optimizations */
[lang="he"] .tch-widget {
    font-family: "Arial", "Segoe UI", "Helvetica Neue", sans-serif;
}

/* ============================================
   RTL Text Alignment
   ============================================ */

[dir="rtl"] .tch-widget-welcome,
[dir="rtl"] .tch-welcome-text,
.rtl .tch-widget-welcome,
.rtl .tch-welcome-text {
    text-align: right;
}

[dir="rtl"] .tch-widget-channel-content,
[dir="rtl"] .tch-channel-content,
.rtl .tch-widget-channel-content,
.rtl .tch-channel-content {
    text-align: right;
}

[dir="rtl"] .tch-widget-outside-hours-message,
[dir="rtl"] .tch-outside-hours-message,
.rtl .tch-widget-outside-hours-message,
.rtl .tch-outside-hours-message {
    text-align: right;
}

/* Center aligned elements remain centered */
[dir="rtl"] .tch-widget.tch-style-bottom-bar .tch-widget-welcome,
.rtl .tch-widget.tch-style-bottom-bar .tch-widget-welcome {
    text-align: center;
}

[dir="rtl"] .tch-widget.tch-style-side-panel .tch-widget-channel,
[dir="rtl"] .tch-widget.tch-style-side-panel .tch-channel,
.rtl .tch-widget.tch-style-side-panel .tch-widget-channel,
.rtl .tch-widget.tch-style-side-panel .tch-channel {
    text-align: center;
}

/* ============================================
   RTL Mobile Adjustments
   ============================================ */

@media (max-width: 768px) {
    [dir="rtl"] .tch-widget.tch-position-bottom-right,
    .rtl .tch-widget.tch-position-bottom-right {
        left: 16px;
    }
    
    [dir="rtl"] .tch-widget.tch-position-bottom-left,
    .rtl .tch-widget.tch-position-bottom-left {
        right: 16px;
    }
    
    [dir="rtl"] .tch-widget.tch-position-middle-right,
    .rtl .tch-widget.tch-position-middle-right {
        left: 16px;
    }
    
    [dir="rtl"] .tch-widget.tch-position-middle-left,
    .rtl .tch-widget.tch-position-middle-left {
        right: 16px;
    }
}

@media (max-width: 480px) {
    [dir="rtl"] .tch-widget.tch-position-bottom-right,
    .rtl .tch-widget.tch-position-bottom-right {
        left: 12px;
    }
    
    [dir="rtl"] .tch-widget.tch-position-bottom-left,
    .rtl .tch-widget.tch-position-bottom-left {
        right: 12px;
    }
    
    [dir="rtl"] .tch-widget.tch-position-middle-right,
    .rtl .tch-widget.tch-position-middle-right {
        left: 12px;
    }
    
    [dir="rtl"] .tch-widget.tch-position-middle-left,
    .rtl .tch-widget.tch-position-middle-left {
        right: 12px;
    }
}

/* ============================================
   RTL Icon Mirroring
   ============================================ */

/* Some icons should be mirrored in RTL (arrows, chevrons) */
[dir="rtl"] .tch-widget-button-icon.tch-mirror-rtl,
.rtl .tch-widget-button-icon.tch-mirror-rtl {
    transform: scaleX(-1);
}

[dir="rtl"] .tch-widget.tch-open .tch-widget-button-icon.tch-mirror-rtl,
.rtl .tch-widget.tch-open .tch-widget-button-icon.tch-mirror-rtl {
    transform: scaleX(-1) rotate(180deg);
}

/* ============================================
   RTL Accessibility
   ============================================ */

/* Ensure focus indicators work properly in RTL */
[dir="rtl"] .tch-widget-button:focus-visible,
[dir="rtl"] .tch-widget-channel:focus-visible,
[dir="rtl"] .tch-channel-link:focus-visible,
.rtl .tch-widget-button:focus-visible,
.rtl .tch-widget-channel:focus-visible,
.rtl .tch-channel-link:focus-visible {
    outline-offset: 2px;
}

/* ============================================
   RTL Number Formatting
   ============================================ */

/* Keep numbers in LTR format even in RTL context */
[dir="rtl"] .tch-widget-badge,
.rtl .tch-widget-badge {
    direction: ltr;
    unicode-bidi: embed;
}

/* ============================================
   RTL Scrollbar Styling (WebKit)
   ============================================ */

[dir="rtl"] .tch-widget-channels::-webkit-scrollbar,
[dir="rtl"] .tch-channels-list::-webkit-scrollbar,
.rtl .tch-widget-channels::-webkit-scrollbar,
.rtl .tch-channels-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[dir="rtl"] .tch-widget.tch-style-bottom-bar .tch-widget-channels,
[dir="rtl"] .tch-widget.tch-style-bottom-bar .tch-channels-list,
.rtl .tch-widget.tch-style-bottom-bar .tch-widget-channels,
.rtl .tch-widget.tch-style-bottom-bar .tch-channels-list {
    scrollbar-width: thin;
}