/* ============================================================
   استایل کامل ویجت چت - نسخه نهایی با موبایل تمام‌صفحه
   ============================================================ */

/* بازنشانی کامل برای المان‌های ویجت */
.wccs-chat-widget,
.wccs-chat-widget *,
.wccs-chat-widget *::before,
.wccs-chat-widget *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.wccs-chat-widget {
    position: fixed;
    z-index: 999999;
    font-family: 'IRANSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    display: block;
    /* موقعیت توسط inline style کنترل می‌شود */
}

/* ============================================================
   اولویت بالا برای دکمه‌های ویجت (غلبه بر استایل قالب)
   ============================================================ */

/* 1. دکمه باز کردن چت */
button.wccs-chat-toggle-btn,
.wccs-chat-toggle-btn {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(145deg, #6366F1, #4F46E5) !important;
    border-radius: 50% !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    color: #fff !important;
    position: relative !important;
    outline: none !important;
    flex-shrink: 0 !important;
}
button.wccs-chat-toggle-btn:hover,
.wccs-chat-toggle-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 12px 32px rgba(79, 70, 229, 0.5) !important;
}
button.wccs-chat-toggle-btn:active,
.wccs-chat-toggle-btn:active {
    transform: scale(0.92) !important;
}
button.wccs-chat-toggle-btn .wccs-svg-icon,
.wccs-chat-toggle-btn .wccs-svg-icon {
    width: 36px;
    height: 36px;
}
button.wccs-chat-toggle-btn .wccs-badge,
.wccs-chat-toggle-btn .wccs-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: linear-gradient(145deg, #EF4444, #DC2626) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5) !important;
    font-family: inherit !important;
    line-height: 1 !important;
}

/* 2. دکمه بستن در هدر */
button.wccs-header-actions button,
.wccs-header-actions button {
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    color: #fff !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    font-family: inherit !important;
    box-shadow: none !important;
}
button.wccs-header-actions button:hover,
.wccs-header-actions button:hover {
    background: rgba(255,255,255,0.2) !important;
    transform: scale(1.05) !important;
}
button.wccs-header-actions button .wccs-svg-icon,
.wccs-header-actions button .wccs-svg-icon {
    width: 18px;
    height: 18px;
}

/* 3. دکمه ارسال پیام */
button.wccs-chat-send-btn,
.wccs-chat-send-btn {
    background: linear-gradient(145deg, #4F46E5, #4338CA) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    font-family: inherit !important;
    outline: none !important;
    overflow: hidden !important;
}
button.wccs-chat-send-btn:hover,
.wccs-chat-send-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35) !important;
}
button.wccs-chat-send-btn:active,
.wccs-chat-send-btn:active {
    transform: scale(0.95) !important;
}
button.wccs-chat-send-btn .wccs-svg-icon,
.wccs-chat-send-btn .wccs-svg-icon {
    width: 18px;
    height: 18px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
button.wccs-chat-send-btn .wccs-svg-icon svg,
.wccs-chat-send-btn .wccs-svg-icon svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* 4. دکمه‌های هدر (دیگر دکمه‌های هدر مانند بستن) */
.wccs-chat-header button {
    border-radius: 50% !important;
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    color: #fff !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.wccs-chat-header button:hover {
    background: rgba(255,255,255,0.2) !important;
    transform: scale(1.05) !important;
}

/* 5. دکمه‌های پنل‌ها (استیکر، آپلود، و ...) */
.wccs-chat-toolbar button,
.wccs-inline-icon {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    color: #6B7280 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    font-family: inherit !important;
    box-shadow: none !important;
}
.wccs-chat-toolbar button:hover,
.wccs-inline-icon:hover {
    background: rgba(79, 70, 229, 0.08) !important;
    color: #4F46E5 !important;
}

/* 6. دکمه‌های ووکامرس */
.wccs-woo-actions button {
    background: transparent !important;
    color: #4F46E5 !important;
    border: 1px solid rgba(229, 231, 235, 0.6) !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    transition: all 0.2s !important;
    height: 28px !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: none !important;
}
.wccs-woo-actions button:hover {
    background: rgba(79, 70, 229, 0.06) !important;
    border-color: #4F46E5 !important;
}

/* 7. دکمه ارسال در پنل پیگیری سفارش */
.wccs-track-panel button {
    background: #4F46E5 !important;
    color: #fff !important;
    border: none !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    height: 34px !important;
    transition: background 0.2s !important;
    font-family: inherit !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}
.wccs-track-panel button:hover {
    background: #4338CA !important;
}

/* ============================================================
   بقیه استایل‌های ویجت (موقعیت‌یابی توسط inline style انجام می‌شود)
   ============================================================ */

/* ===== پیام شناور ===== */
.wccs-floating-text {
    position: absolute !important;
    bottom: 72px !important;
    background: rgba(79, 70, 229, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #fff !important;
    padding: 6px 16px !important;
    border-radius: 24px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.3) !important;
    animation: wccs-float-bounce 2.5s ease-in-out infinite !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0.3px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    z-index: 1 !important;
}
.wccs-floating-text:hover {
    transform: scale(1.04) !important;
}
.wccs-floating-close {
    font-size: 12px !important;
    cursor: pointer !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.wccs-floating-close:hover {
    opacity: 1 !important;
}
.wccs-floating-close .wccs-svg-icon {
    width: 14px;
    height: 14px;
}
@keyframes wccs-float-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.wccs-floating-text.hidden {
    display: none !important;
}

/* ===== جعبه چت ===== */
.wccs-chat-box {
    position: fixed !important;
    bottom: 90px !important;
    width: 420px !important;
    max-width: calc(100vw - 40px) !important;
    height: 620px !important;
    max-height: calc(100vh - 130px) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255,255,255,0.5) inset !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    animation: wccs-slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    font-family: inherit !important;
}
.wccs-chat-box-hidden {
    display: none !important;
}
@keyframes wccs-slideUp {
    0% { opacity: 0; transform: translateY(24px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== هدر ===== */
.wccs-chat-header {
    background: linear-gradient(145deg, #4F46E5, #4338CA) !important;
    color: #fff !important;
    padding: 12px 18px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    min-height: 52px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    font-family: inherit !important;
}
.wccs-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
    color: #fff !important;
    font-family: inherit !important;
}
.wccs-online-dot {
    width: 10px !important;
    height: 10px !important;
    background: #34D399 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.5) !important;
    animation: wccs-pulse 2s ease-in-out infinite !important;
    flex-shrink: 0 !important;
}
@keyframes wccs-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* ===== تاریخ‌ها ===== */
.wccs-chat-date {
    text-align: center !important;
    font-size: 11px !important;
    color: #9CA3AF !important;
    padding: 10px 0 8px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-family: inherit !important;
}
.wccs-chat-date::before,
.wccs-chat-date::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, #E5E7EB, transparent) !important;
}
.wccs-chat-date span {
    background: rgba(255,255,255,0.6) !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    backdrop-filter: blur(4px) !important;
    font-weight: 400 !important;
    color: #6B7280 !important;
    font-size: 11px !important;
    font-family: inherit !important;
}

/* ===== پیام‌ها ===== */
.wccs-chat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 16px 12px !important;
    background: rgba(249, 250, 251, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-height: 0 !important;
    font-family: inherit !important;
}
.wccs-chat-messages::-webkit-scrollbar {
    width: 4px !important;
}
.wccs-chat-messages::-webkit-scrollbar-track {
    background: transparent !important;
}
.wccs-chat-messages::-webkit-scrollbar-thumb {
    background: #D1D5DB !important;
    border-radius: 10px !important;
}
.wccs-msg {
    max-width: 80% !important;
    animation: wccs-fadeIn 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: inherit !important;
}
@keyframes wccs-fadeIn {
    0% { opacity: 0; transform: translateY(6px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.wccs-msg-user { align-self: flex-start !important; }
.wccs-msg-admin { align-self: flex-end !important; }
.wccs-msg-auto { align-self: flex-end !important; }
.wccs-msg .wccs-bubble {
    padding: 10px 16px !important;
    border-radius: 20px !important;
    word-wrap: break-word !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    position: relative !important;
    transition: all 0.2s !important;
    font-family: inherit !important;
}
.wccs-msg-user .wccs-bubble {
    background: #FFFFFF !important;
    color: #1F2937 !important;
    border-bottom-left-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(229, 231, 235, 0.5) !important;
}
.wccs-msg-admin .wccs-bubble {
    background: linear-gradient(145deg, #4F46E5, #4338CA) !important;
    color: #fff !important;
    border-bottom-right-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}
.wccs-msg-auto .wccs-bubble {
    background: linear-gradient(145deg, #FEF3C7, #FDE68A) !important;
    color: #78350F !important;
    border-bottom-right-radius: 6px !important;
    border: 1px solid #FCD34D !important;
}
.wccs-msg .wccs-time {
    font-size: 10px !important;
    color: #9CA3AF !important;
    margin-top: 4px !important;
    padding: 0 6px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
    font-family: inherit !important;
}
.wccs-msg-admin .wccs-time { text-align: left !important; color: rgba(255,255,255,0.5) !important; }
.wccs-msg-auto .wccs-time { text-align: left !important; color: #92400E !important; }
.wccs-file-preview { margin-top: 2px !important; }
.wccs-file-preview img {
    max-width: 200px !important;
    max-height: 160px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    display: block !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.wccs-file-preview audio,
.wccs-file-preview video {
    max-width: 200px !important;
    border-radius: 12px !important;
    display: block !important;
}

/* ===== تولبار ===== */
.wccs-chat-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 8px 8px !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
    flex-shrink: 0 !important;
    min-height: 48px !important;
    font-family: inherit !important;
}
.wccs-input-wrapper {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    background: #f3f4f6 !important;
    border-radius: 24px !important;
    padding: 2px 4px 2px 2px !important;
    border: 1.5px solid transparent !important;
    transition: all 0.25s ease !important;
    min-width: 0 !important;
    gap: 0 !important;
}
.wccs-input-wrapper:focus-within {
    border-color: #4F46E5 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.06) !important;
}
.wccs-chat-input {
    flex: 1 !important;
    border: none !important;
    padding: 6px 10px !important;
    font-size: 13.5px !important;
    outline: none !important;
    background: transparent !important;
    font-family: inherit !important;
    min-width: 0 !important;
    color: #1F2937 !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.wccs-chat-input::placeholder {
    color: #9CA3AF !important;
    opacity: 1 !important;
}

/* ===== پنل‌ها ===== */
#wccs-stickers-panel,
#wccs-attach-panel,
#wccs-faq-quick-panel,
#wccs-rating-panel { display: none; }

#wccs-stickers-panel {
    position: absolute !important;
    bottom: 62px !important;
    right: 12px !important;
    left: 12px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    padding: 12px !important;
    max-height: 180px !important;
    overflow-y: auto !important;
    z-index: 30 !important;
    font-family: inherit !important;
}
.wccs-stickers-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)) !important;
    gap: 6px !important;
}
.wccs-sticker-item {
    font-size: 28px !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 12px !important;
    transition: all 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(243, 244, 246, 0.5) !important;
    line-height: 1 !important;
    font-family: inherit !important;
}
.wccs-sticker-item:hover {
    background: rgba(79, 70, 229, 0.1) !important;
    transform: scale(1.12) !important;
}

#wccs-attach-panel {
    position: absolute !important;
    bottom: 62px !important;
    right: 12px !important;
    left: 12px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    padding: 12px 16px !important;
    z-index: 30 !important;
    font-family: inherit !important;
}
.wccs-attach-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    color: #1F2937 !important;
    font-size: 13px !important;
    font-family: inherit !important;
}
.wccs-attach-item:hover { background: #f3f4f6 !important; }
.wccs-attach-item .wccs-svg-icon { width: 18px; height: 18px; color: #4F46E5; }

#wccs-faq-quick-panel {
    position: absolute !important;
    bottom: 54px !important;
    right: 12px !important;
    left: 12px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    z-index: 20 !important;
    padding: 6px 0 !important;
    font-family: inherit !important;
}
.wccs-faq-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 16px 10px !important;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #1F2937 !important;
    font-family: inherit !important;
}
.wccs-faq-header button {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 18px !important;
    color: #6B7280 !important;
    transition: color 0.2s !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-family: inherit !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wccs-faq-header button:hover { color: #1F2937 !important; }
.wccs-faq-item {
    padding: 8px 16px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    border-bottom: 1px solid rgba(229, 231, 235, 0.3) !important;
    font-family: inherit !important;
}
.wccs-faq-item:hover { background: rgba(79, 70, 229, 0.04) !important; }
.wccs-faq-question {
    font-size: 13px !important;
    color: #1F2937 !important;
    display: block !important;
    font-family: inherit !important;
}
.wccs-faq-answer {
    font-size: 12px !important;
    color: #6B7280 !important;
    display: none !important;
    margin-top: 2px !important;
    font-family: inherit !important;
}
.wccs-faq-item.active .wccs-faq-answer { display: block !important; }

#wccs-rating-panel {
    padding: 12px 16px 14px !important;
    background: rgba(255,255,255,0.8) !important;
    backdrop-filter: blur(8px) !important;
    border-top: 1px solid rgba(229, 231, 235, 0.3) !important;
    font-family: inherit !important;
}

/* ===== سایر بخش‌ها ===== */
.wccs-typing-indicator {
    padding: 4px 16px 6px !important;
    color: #9CA3AF !important;
    font-size: 11px !important;
    background: rgba(249, 250, 251, 0.4) !important;
    display: none !important;
    border-top: 1px solid rgba(229, 231, 235, 0.3) !important;
    flex-shrink: 0 !important;
    font-family: inherit !important;
}

/* ===== نوار آپلود ===== */
.wccs-upload-progress {
    padding: 8px 16px !important;
    background: rgba(249, 250, 251, 0.9) !important;
    border-top: 1px solid rgba(229, 231, 235, 0.3) !important;
    display: none !important;
    flex-shrink: 0 !important;
    font-family: inherit !important;
}
.wccs-upload-progress span {
    font-size: 12px !important;
    color: #1F2937 !important;
    display: block !important;
    margin-bottom: 4px !important;
    font-family: inherit !important;
}
.wccs-progress-track {
    width: 100% !important;
    height: 6px !important;
    background: #E5E7EB !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
.wccs-progress-bar {
    height: 100% !important;
    background: linear-gradient(145deg, #4F46E5, #4338CA) !important;
    border-radius: 10px !important;
    transition: width 0.3s ease !important;
    width: 0% !important;
}

/* ===== نوار ضبط صدا ===== */
.wccs-recording-indicator {
    padding: 8px 16px !important;
    background: rgba(254, 242, 242, 0.9) !important;
    border-top: 1px solid rgba(252, 165, 165, 0.3) !important;
    color: #DC2626 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    font-family: inherit !important;
}
.wccs-recording-dot {
    width: 8px !important;
    height: 8px !important;
    background: #DC2626 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: wccs-record-pulse 1s ease-in-out infinite !important;
    flex-shrink: 0 !important;
}
@keyframes wccs-record-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.7); }
}

/* ===== امتیازدهی ===== */
.wccs-rating-section { flex-shrink: 0 !important; font-family: inherit !important; }
.wccs-rating-toggle {
    padding: 6px 14px !important;
    background: rgba(249, 250, 251, 0.6) !important;
    border-top: 1px solid rgba(229, 231, 235, 0.3) !important;
    cursor: pointer !important;
    text-align: center !important;
    color: #4F46E5 !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    transition: background 0.2s !important;
    font-family: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.wccs-rating-toggle:hover { background: rgba(243, 244, 246, 0.8) !important; }
.wccs-rating-toggle .wccs-svg-icon { width: 14px; height: 14px; }
.wccs-rating-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 4px !important;
    font-family: inherit !important;
}
.wccs-rating-header span {
    font-weight: 500 !important;
    font-size: 12px !important;
    color: #1F2937 !important;
    font-family: inherit !important;
}
.wccs-rating-header button {
    background: none !important;
    border: none !important;
    font-size: 16px !important;
    cursor: pointer !important;
    color: #6B7280 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-family: inherit !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wccs-stars {
    direction: ltr !important;
    font-size: 26px !important;
    cursor: pointer !important;
    text-align: center !important;
    margin: 4px 0 8px !important;
    letter-spacing: 6px !important;
    font-family: inherit !important;
}
.wccs-stars span {
    display: inline-block !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.wccs-stars span .wccs-svg-icon {
    width: 28px;
    height: 28px;
    fill: #E5E7EB;
    color: #E5E7EB;
    transition: all 0.2s !important;
}
.wccs-stars span.active .wccs-svg-icon { fill: #F59E0B; color: #F59E0B; }
.wccs-stars span:hover .wccs-svg-icon { fill: #FBBF24; color: #FBBF24; }
.wccs-rating-comment {
    width: 100% !important;
    border: 1px solid rgba(229, 231, 235, 0.6) !important;
    border-radius: 12px !important;
    padding: 6px 12px !important;
    resize: vertical !important;
    font-family: inherit !important;
    font-size: 12px !important;
    margin-bottom: 8px !important;
    min-height: 32px !important;
    background: rgba(255,255,255,0.6) !important;
    outline: none !important;
}
.wccs-rating-comment:focus {
    outline: none !important;
    border-color: #4F46E5 !important;
}
.wccs-submit-rating {
    background: linear-gradient(145deg, #4F46E5, #4338CA) !important;
    color: #fff !important;
    border: none !important;
    padding: 6px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    width: 100% !important;
    transition: all 0.2s !important;
    font-family: inherit !important;
}
.wccs-submit-rating:hover { box-shadow: 0 4px 16px rgba(79, 70, 229, 0.3) !important; }
.wccs-load-more-btn {
    text-align: center !important;
    padding: 6px !important;
    cursor: pointer !important;
    color: #4F46E5 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    border-top: 1px solid rgba(229, 231, 235, 0.3) !important;
    background: rgba(249, 250, 251, 0.4) !important;
    border-radius: 12px !important;
    margin-bottom: 4px !important;
    transition: all 0.2s !important;
    font-family: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.wccs-load-more-btn:hover { background: rgba(243, 244, 246, 0.6) !important; }
.wccs-load-more-btn .wccs-svg-icon { width: 14px; height: 14px; }
.wccs-empty-state {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #9CA3AF !important;
    font-family: inherit !important;
}
.wccs-empty-state .wccs-svg-icon {
    width: 48px;
    height: 48px;
    color: #D1D5DB;
    margin: 0 auto 12px;
    display: block;
}
.wccs-empty-state p {
    font-size: 14px !important;
    margin: 0 !important;
    color: #9CA3AF !important;
}

/* ===== ووکامرس ===== */
.wccs-woo-actions {
    display: flex !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: rgba(248, 250, 252, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    border-bottom: 1px solid rgba(229, 231, 235, 0.3) !important;
    flex-wrap: wrap !important;
    font-family: inherit !important;
}
.wccs-track-panel,
.wccs-related-panel {
    padding: 8px 12px !important;
    background: rgba(255,255,255,0.6) !important;
    backdrop-filter: blur(4px) !important;
    border-bottom: 1px solid rgba(229, 231, 235, 0.3) !important;
    font-family: inherit !important;
}
.wccs-track-panel input {
    flex: 1 !important;
    border: 1px solid rgba(229, 231, 235, 0.6) !important;
    border-radius: 20px !important;
    padding: 4px 14px !important;
    font-size: 12px !important;
    height: 30px !important;
    background: rgba(255,255,255,0.6) !important;
    font-family: inherit !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
.wccs-track-panel input:focus {
    outline: none !important;
    border-color: #4F46E5 !important;
}
.wccs-track-panel button {
    background: #4F46E5 !important;
    color: #fff !important;
    border: none !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    height: 34px !important;
    transition: background 0.2s !important;
    font-family: inherit !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}
.wccs-track-panel button:hover {
    background: #4338CA !important;
}
.wccs-track-panel button .wccs-svg-icon {
    width: 16px;
    height: 16px;
}
.wccs-track-result {
    margin-top: 8px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    font-size: 12px !important;
    font-family: inherit !important;
}
.wccs-track-result .wccs-order-item {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-bottom: 6px !important;
    background: #fafafa !important;
    font-size: 12px !important;
    transition: background 0.2s !important;
}
.wccs-track-result .wccs-order-item:hover {
    background: #f3f4f6 !important;
}
.wccs-track-result .wccs-order-item .order-id {
    font-weight: 600 !important;
    color: #1F2937 !important;
}
.wccs-track-result .wccs-order-item .order-status {
    display: inline-block !important;
    padding: 1px 10px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}
.wccs-track-result .wccs-order-item .order-status-processing {
    background: #DBEAFE !important;
    color: #1E40AF !important;
}
.wccs-track-result .wccs-order-item .order-status-completed {
    background: #D1FAE5 !important;
    color: #065F46 !important;
}
.wccs-track-result .wccs-order-item .order-status-on-hold {
    background: #FEF3C7 !important;
    color: #92400E !important;
}
.wccs-track-result .wccs-order-item .order-status-pending {
    background: #FEF3C7 !important;
    color: #92400E !important;
}
.wccs-track-result .wccs-order-item .order-status-cancelled {
    background: #FEE2E2 !important;
    color: #991B1B !important;
}
.wccs-track-result .wccs-order-item .order-status-failed {
    background: #FEE2E2 !important;
    color: #991B1B !important;
}
.wccs-track-result .wccs-order-item .order-items-list {
    margin: 4px 0 0 0 !important;
    padding-right: 16px !important;
    font-size: 11px !important;
    color: #6B7280 !important;
}
.wccs-track-result .wccs-order-item .order-custom-fields {
    margin: 4px 0 0 0 !important;
    padding-right: 16px !important;
    font-size: 11px !important;
    color: #6B7280 !important;
}
.wccs-related-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.wccs-related-list > div {
    width: calc(33% - 8px) !important;
    min-width: 80px !important;
    border: 1px solid rgba(229, 231, 235, 0.4) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    text-align: center !important;
    background: rgba(255,255,255,0.5) !important;
    backdrop-filter: blur(4px) !important;
    font-family: inherit !important;
}

/* ===== آیکون‌های SVG ===== */
.wccs-svg-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
}
.wccs-svg-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* ============================================================
   پشتیبانی از RTL / LTR (فقط جهت متن - بدون موقعیت‌یابی)
   ============================================================ */

/* استایل‌های RTL (زبان‌های فارسی، عربی، عبری) */
.wccs-chat-widget.dir-rtl {
    direction: rtl;
    text-align: right;
}
.wccs-chat-widget.dir-rtl .wccs-header-info {
    direction: rtl;
}
.wccs-chat-widget.dir-rtl .wccs-chat-messages {
    direction: rtl;
}
.wccs-chat-widget.dir-rtl .wccs-msg {
    direction: rtl;
}
.wccs-chat-widget.dir-rtl .wccs-msg .wccs-time {
    text-align: right;
}
.wccs-chat-widget.dir-rtl .wccs-msg-admin .wccs-time {
    text-align: left !important;
}
.wccs-chat-widget.dir-rtl .wccs-chat-input {
    direction: rtl;
}

/* استایل‌های LTR (انگلیسی، آلمانی، فرانسوی و...) */
.wccs-chat-widget.dir-ltr {
    direction: ltr;
    text-align: left;
}
.wccs-chat-widget.dir-ltr .wccs-header-info {
    direction: ltr;
}
.wccs-chat-widget.dir-ltr .wccs-chat-messages {
    direction: ltr;
}
.wccs-chat-widget.dir-ltr .wccs-msg {
    direction: ltr;
}
.wccs-chat-widget.dir-ltr .wccs-msg .wccs-time {
    text-align: left;
}
.wccs-chat-widget.dir-ltr .wccs-msg-admin .wccs-time {
    text-align: left !important;
}
.wccs-chat-widget.dir-ltr .wccs-chat-input {
    direction: ltr;
}

/* ============================================================
   اسکرول‌های سفارشی و حرفه‌ای
   ============================================================ */

.wccs-chat-messages::-webkit-scrollbar,
.wccs-offline-form::-webkit-scrollbar,
.wccs-faq-panel::-webkit-scrollbar,
.wccs-track-result::-webkit-scrollbar,
.wccs-related-list::-webkit-scrollbar,
.wccs-stickers-panel::-webkit-scrollbar,
.wccs-attach-panel::-webkit-scrollbar,
.wccs-chat-list-items::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.wccs-chat-messages::-webkit-scrollbar-track,
.wccs-offline-form::-webkit-scrollbar-track,
.wccs-faq-panel::-webkit-scrollbar-track,
.wccs-track-result::-webkit-scrollbar-track,
.wccs-related-list::-webkit-scrollbar-track,
.wccs-stickers-panel::-webkit-scrollbar-track,
.wccs-attach-panel::-webkit-scrollbar-track,
.wccs-chat-list-items::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
}

.wccs-chat-messages::-webkit-scrollbar-thumb,
.wccs-offline-form::-webkit-scrollbar-thumb,
.wccs-faq-panel::-webkit-scrollbar-thumb,
.wccs-track-result::-webkit-scrollbar-thumb,
.wccs-related-list::-webkit-scrollbar-thumb,
.wccs-stickers-panel::-webkit-scrollbar-thumb,
.wccs-attach-panel::-webkit-scrollbar-thumb,
.wccs-chat-list-items::-webkit-scrollbar-thumb {
    background: #c4c9d4;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.wccs-chat-messages::-webkit-scrollbar-thumb:hover,
.wccs-offline-form::-webkit-scrollbar-thumb:hover,
.wccs-faq-panel::-webkit-scrollbar-thumb:hover,
.wccs-track-result::-webkit-scrollbar-thumb:hover,
.wccs-related-list::-webkit-scrollbar-thumb:hover,
.wccs-stickers-panel::-webkit-scrollbar-thumb:hover,
.wccs-attach-panel::-webkit-scrollbar-thumb:hover,
.wccs-chat-list-items::-webkit-scrollbar-thumb:hover {
    background: #a0a8b5;
}

.wccs-chat-messages,
.wccs-offline-form,
.wccs-faq-panel,
.wccs-track-result,
.wccs-related-list,
.wccs-stickers-panel,
.wccs-attach-panel,
.wccs-chat-list-items {
    scrollbar-width: thin;
    scrollbar-color: #c4c9d4 rgba(0, 0, 0, 0.03);
}

.wccs-chat-box {
    --wccs-scroll-bg: rgba(0, 0, 0, 0.03);
    --wccs-scroll-thumb: #c4c9d4;
    --wccs-scroll-thumb-hover: #a0a8b5;
}

.wccs-chat-messages,
.wccs-offline-form,
.wccs-faq-panel,
.wccs-track-result,
.wccs-related-list,
.wccs-stickers-panel,
.wccs-attach-panel,
.wccs-chat-list-items {
    scrollbar-color: var(--wccs-scroll-thumb) var(--wccs-scroll-bg);
}

.wccs-chat-messages {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
}
.wccs-chat-messages > * {
    min-width: 0;
}

.wccs-offline-form {
    overflow-y: auto !important;
    padding-right: 8px;
    scroll-behavior: smooth;
}
.wccs-faq-panel {
    overflow-y: auto !important;
    scroll-behavior: smooth;
}
.wccs-stickers-panel {
    overflow-y: auto !important;
    scroll-behavior: smooth;
}
.wccs-track-result {
    overflow-y: auto !important;
    max-height: 180px;
    scroll-behavior: smooth;
}
.wccs-related-list {
    overflow-y: auto !important;
    max-height: 200px;
    scroll-behavior: smooth;
}
.wccs-chat-list-items {
    overflow-y: auto !important;
    scroll-behavior: smooth;
}

/* ============================================================
   فرم تماس
   ============================================================ */

.wccs-contact-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
}
.wccs-contact-title {
    font-size: 24px;
    margin: 0 0 6px 0;
    color: #1F2937;
}
.wccs-contact-description {
    color: #6B7280;
    font-size: 14px;
    margin: 0 0 20px 0;
}
.wccs-contact-field {
    margin-bottom: 16px;
}
.wccs-contact-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1F2937;
    margin-bottom: 4px;
}
.wccs-contact-field .wccs-required {
    color: #EF4444;
}
.wccs-contact-field input,
.wccs-contact-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
    background: #FAFAFA;
    box-sizing: border-box;
}
.wccs-contact-field input:focus,
.wccs-contact-field textarea:focus {
    outline: none;
    border-color: #4F46E5;
    box-shadow: 0 0 0 4px rgba(79,70,229,0.08);
    background: #FFFFFF;
}
.wccs-contact-field textarea {
    resize: vertical;
    min-height: 80px;
}
.wccs-contact-submit-btn {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(145deg, #4F46E5, #4338CA);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}
.wccs-contact-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(79,70,229,0.3);
}
.wccs-contact-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
#wccs-contact-result {
    margin-top: 12px;
}
#wccs-contact-result .success {
    padding: 10px 16px;
    background: #D1FAE5;
    color: #065F46;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid #A7F3D0;
}
#wccs-contact-result .error {
    padding: 10px 16px;
    background: #FEE2E2;
    color: #991B1B;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid #FECACA;
}
/* ============================================================
   واکنش‌گرا - نسخه موبایل (تمام صفحه و override inline styles)
   ============================================================ */

@media (max-width: 480px) {
    /* ===== جعبه چت - بازنشانی کامل موقعیت‌ها ===== */
    .wccs-chat-box {
        /* بازنشانی همه موقعیت‌ها با !important */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        /* ابعاد تمام صفحه */
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        /* ظاهر تمام صفحه */
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        backdrop-filter: blur(0) !important;
        -webkit-backdrop-filter: blur(0) !important;
        /* حذف انیمیشن */
        animation: none !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ===== پیام شناور - تنظیم مجدد موقعیت ===== */
    .wccs-floating-text {
        /* موقعیت را بر اساس تنظیمات کاربر نگه می‌داریم */
        /* اما اگر کاربر Right انتخاب کرده باشد، left:auto و right:8px خواهد بود */
        /* در غیر این صورت left:8px و right:auto */
        /* این استایل‌ها توسط inline style تعیین می‌شوند، پس در اینجا نیازی به تنظیم مجدد نیست */
        /* فقط اندازه و فونت را بهینه می‌کنیم */
        font-size: 11px !important;
        padding: 4px 12px !important;
        bottom: 58px !important;
        max-width: 140px !important;
        border-radius: 20px !important;
    }
    .wccs-floating-text .wccs-svg-icon {
        width: 12px !important;
        height: 12px !important;
    }

    /* ===== دکمه باز کردن چت ===== */
    button.wccs-chat-toggle-btn,
    .wccs-chat-toggle-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }
    button.wccs-chat-toggle-btn .wccs-svg-icon,
    .wccs-chat-toggle-btn .wccs-svg-icon {
        width: 22px !important;
        height: 22px !important;
    }
    button.wccs-chat-toggle-btn .wccs-badge,
    .wccs-chat-toggle-btn .wccs-badge {
        width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
    }

    /* ===== هدر ===== */
    .wccs-chat-header {
        padding: 10px 14px !important;
        min-height: 46px !important;
    }
    .wccs-header-info {
        font-size: 13px !important;
    }
    .wccs-online-dot {
        width: 8px !important;
        height: 8px !important;
    }
    .wccs-header-actions button {
        width: 28px !important;
        height: 28px !important;
    }
    .wccs-header-actions button .wccs-svg-icon {
        width: 16px;
        height: 16px;
    }

    /* ===== پیام‌ها ===== */
    .wccs-chat-messages {
        padding: 6px 10px 8px !important;
        max-height: calc(100% - 130px) !important;
        flex: 1 1 auto !important;
    }
    .wccs-msg .wccs-bubble {
        font-size: 12.5px !important;
        padding: 8px 12px !important;
        max-width: 95% !important;
    }
    .wccs-msg .wccs-time {
        font-size: 9px !important;
    }

    /* ===== تولبار ===== */
    .wccs-chat-toolbar {
        padding: 4px 6px 6px !important;
        min-height: 42px !important;
        gap: 2px !important;
    }
    .wccs-chat-toolbar button,
    .wccs-inline-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    .wccs-chat-toolbar button .wccs-svg-icon,
    .wccs-inline-icon .wccs-svg-icon {
        width: 16px !important;
        height: 16px !important;
    }
    .wccs-input-wrapper {
        padding: 2px 2px 2px 2px !important;
        border-radius: 20px !important;
    }
    .wccs-chat-input {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
    .wccs-chat-input::placeholder {
        font-size: 12px !important;
    }

    /* ===== دکمه ارسال ===== */
    button.wccs-chat-send-btn,
    .wccs-chat-send-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        border-radius: 50% !important;
    }
    button.wccs-chat-send-btn .wccs-svg-icon,
    .wccs-chat-send-btn .wccs-svg-icon {
        width: 14px !important;
        height: 14px !important;
    }

    /* ===== پنل‌ها ===== */
    #wccs-stickers-panel {
        bottom: 48px !important;
        max-height: 130px !important;
        padding: 8px !important;
    }
    .wccs-stickers-grid {
        grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)) !important;
        gap: 4px !important;
    }
    .wccs-sticker-item {
        font-size: 22px !important;
        padding: 4px !important;
    }

    #wccs-faq-quick-panel {
        bottom: 44px !important;
        max-height: 200px !important;
    }
    .wccs-faq-question {
        font-size: 12px !important;
    }
    .wccs-faq-answer {
        font-size: 11px !important;
    }

    #wccs-attach-panel {
        bottom: 48px !important;
        padding: 8px 12px !important;
    }
    .wccs-attach-item {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    .wccs-attach-item .wccs-svg-icon {
        width: 16px !important;
        height: 16px !important;
    }

    /* ===== ووکامرس ===== */
    .wccs-woo-actions {
        padding: 4px 8px !important;
    }
    .wccs-woo-actions button {
        font-size: 10px !important;
        height: 24px !important;
        padding: 2px 10px !important;
    }
    .wccs-woo-actions button .wccs-svg-icon {
        width: 12px !important;
        height: 12px !important;
    }

    .wccs-track-panel,
    .wccs-related-panel {
        padding: 6px 10px !important;
    }
    .wccs-track-panel input {
        font-size: 11px !important;
        height: 28px !important;
        padding: 4px 10px !important;
    }
    .wccs-track-panel button {
        font-size: 11px !important;
        height: 28px !important;
        padding: 0 12px !important;
    }
    .wccs-track-result {
        max-height: 150px !important;
    }
    .wccs-order-item {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    .wccs-order-item .order-status {
        font-size: 9px !important;
        padding: 1px 8px !important;
    }
    .wccs-related-list {
        gap: 4px !important;
    }
    .wccs-related-product {
        min-width: 60px !important;
        padding: 4px !important;
    }
    .wccs-related-name {
        font-size: 9px !important;
    }
    .wccs-related-price {
        font-size: 9px !important;
    }
    .wccs-related-link {
        font-size: 9px !important;
        padding: 1px 6px !important;
    }

    /* ===== امتیازدهی ===== */
    .wccs-stars span .wccs-svg-icon {
        width: 24px !important;
        height: 24px !important;
    }
    .wccs-rating-toggle {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }
    .wccs-rating-toggle .wccs-svg-icon {
        width: 12px !important;
        height: 12px !important;
    }
    .wccs-rating-comment {
        font-size: 11px !important;
        min-height: 28px !important;
        padding: 4px 10px !important;
    }
    .wccs-submit-rating {
        font-size: 11px !important;
        padding: 4px !important;
    }

    /* ===== سایر ===== */
    .wccs-load-more-btn {
        font-size: 10px !important;
        padding: 4px !important;
    }
    .wccs-load-more-btn .wccs-svg-icon {
        width: 12px !important;
        height: 12px !important;
    }
    .wccs-empty-state {
        padding: 20px !important;
    }
    .wccs-empty-state .wccs-svg-icon {
        width: 36px !important;
        height: 36px !important;
    }
    .wccs-empty-state p {
        font-size: 12px !important;
    }
    .wccs-upload-progress {
        padding: 4px 12px !important;
    }
    .wccs-upload-progress span {
        font-size: 11px !important;
    }
    .wccs-typing-indicator {
        font-size: 10px !important;
        padding: 2px 12px !important;
    }
    .wccs-recording-indicator {
        font-size: 11px !important;
        padding: 4px 12px !important;
    }

    /* ===== فرم آفلاین ===== */
    #wccs-offline-form {
        padding: 14px 16px !important;
    }
    #wccs-offline-form .wccs-offline-message {
        font-size: 13px;
        padding: 10px 14px;
    }
    #wccs-offline-form .wccs-offline-field input,
    #wccs-offline-form .wccs-offline-field textarea {
        padding: 8px 12px;
        font-size: 12px;
    }
    #wccs-offline-form .wccs-offline-field label {
        font-size: 12px;
    }
    .wccs-offline-submit-btn {
        font-size: 13px;
        padding: 10px 16px;
    }
    #wccs-offline-form .wccs-offline-fields {
        gap: 10px;
    }
}

/* ============================================================
   واکنش‌گرا - نسخه دسکتاپ و تبلت
   ============================================================ */

@media (max-width: 768px) {
    .wccs-chat-box {
        width: 380px !important;
        max-width: calc(100vw - 32px) !important;
        height: 560px !important;
        max-height: calc(100vh - 110px) !important;
        border-radius: 20px !important;
    }
    button.wccs-chat-toggle-btn,
    .wccs-chat-toggle-btn {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }
    button.wccs-chat-toggle-btn .wccs-svg-icon,
    .wccs-chat-toggle-btn .wccs-svg-icon {
        width: 24px;
        height: 24px;
    }
    button.wccs-chat-send-btn,
    .wccs-chat-send-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }
}

/* ============================================================
   واکنش‌گرا - نسخه موبایل (تمام صفحه و override کردن inline style)
   ============================================================ */

@media (max-width: 480px) {
    /* ===== بازنشانی موقعیت ویجت اصلی (دکمه چت) ===== */
    .wccs-chat-widget {
        /* موقعیت دکمه چت را در جای خود نگه می‌داریم */
        /* inline style قبلی را override نمی‌کنیم، فقط مطمئن می‌شویم دکمه قابل مشاهده است */
    }

    /* ===== جعبه چت - بازنشانی کامل موقعیت‌های inline style ===== */
    .wccs-chat-box {
        /* بازنشانی همه موقعیت‌ها با !important */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        /* ابعاد تمام صفحه */
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        /* ظاهر تمام صفحه */
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        backdrop-filter: blur(0) !important;
        -webkit-backdrop-filter: blur(0) !important;
        /* حذف انیمیشن */
        animation: none !important;
        transform: none !important;
        /* اطمینان از اینکه هیچ موقعیت دیگری اعمال نشود */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ===== پیام شناور - بازنشانی موقعیت‌های inline style ===== */
    .wccs-floating-text {
        /* بازنشانی موقعیت‌های left/right که از inline style آمده‌اند */
        left: 8px !important;
        right: auto !important;
        /* موقعیت عمودی را حفظ می‌کنیم */
        bottom: 58px !important;
        /* سایر استایل‌ها */
        font-size: 11px !important;
        padding: 4px 12px !important;
        max-width: 140px !important;
        border-radius: 20px !important;
    }
    .wccs-floating-text .wccs-svg-icon {
        width: 12px !important;
        height: 12px !important;
    }

    /* ===== دکمه باز کردن چت ===== */
    button.wccs-chat-toggle-btn,
    .wccs-chat-toggle-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }
    button.wccs-chat-toggle-btn .wccs-svg-icon,
    .wccs-chat-toggle-btn .wccs-svg-icon {
        width: 22px !important;
        height: 22px !important;
    }
    button.wccs-chat-toggle-btn .wccs-badge,
    .wccs-chat-toggle-btn .wccs-badge {
        width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
    }

    /* ===== هدر ===== */
    .wccs-chat-header {
        padding: 10px 14px !important;
        min-height: 46px !important;
    }
    .wccs-header-info {
        font-size: 13px !important;
    }
    .wccs-online-dot {
        width: 8px !important;
        height: 8px !important;
    }
    .wccs-header-actions button {
        width: 28px !important;
        height: 28px !important;
    }
    .wccs-header-actions button .wccs-svg-icon {
        width: 16px;
        height: 16px;
    }

    /* ===== پیام‌ها ===== */
    .wccs-chat-messages {
        padding: 6px 10px 8px !important;
        max-height: calc(100% - 130px) !important;
        flex: 1 1 auto !important;
    }
    .wccs-msg .wccs-bubble {
        font-size: 12.5px !important;
        padding: 8px 12px !important;
        max-width: 95% !important;
    }
    .wccs-msg .wccs-time {
        font-size: 9px !important;
    }

    /* ===== تولبار ===== */
    .wccs-chat-toolbar {
        padding: 4px 6px 6px !important;
        min-height: 42px !important;
        gap: 2px !important;
    }
    .wccs-chat-toolbar button,
    .wccs-inline-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    .wccs-chat-toolbar button .wccs-svg-icon,
    .wccs-inline-icon .wccs-svg-icon {
        width: 16px !important;
        height: 16px !important;
    }
    .wccs-input-wrapper {
        padding: 2px 2px 2px 2px !important;
        border-radius: 20px !important;
    }
    .wccs-chat-input {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
    .wccs-chat-input::placeholder {
        font-size: 12px !important;
    }

    /* ===== دکمه ارسال ===== */
    button.wccs-chat-send-btn,
    .wccs-chat-send-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        border-radius: 50% !important;
    }
    button.wccs-chat-send-btn .wccs-svg-icon,
    .wccs-chat-send-btn .wccs-svg-icon {
        width: 14px !important;
        height: 14px !important;
    }

    /* ===== پنل‌ها ===== */
    #wccs-stickers-panel {
        bottom: 48px !important;
        max-height: 130px !important;
        padding: 8px !important;
    }
    .wccs-stickers-grid {
        grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)) !important;
        gap: 4px !important;
    }
    .wccs-sticker-item {
        font-size: 22px !important;
        padding: 4px !important;
    }

    #wccs-faq-quick-panel {
        bottom: 44px !important;
        max-height: 200px !important;
    }
    .wccs-faq-question {
        font-size: 12px !important;
    }
    .wccs-faq-answer {
        font-size: 11px !important;
    }

    #wccs-attach-panel {
        bottom: 48px !important;
        padding: 8px 12px !important;
    }
    .wccs-attach-item {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    .wccs-attach-item .wccs-svg-icon {
        width: 16px !important;
        height: 16px !important;
    }

    /* ===== ووکامرس ===== */
    .wccs-woo-actions {
        padding: 4px 8px !important;
    }
    .wccs-woo-actions button {
        font-size: 10px !important;
        height: 24px !important;
        padding: 2px 10px !important;
    }
    .wccs-woo-actions button .wccs-svg-icon {
        width: 12px !important;
        height: 12px !important;
    }

    .wccs-track-panel,
    .wccs-related-panel {
        padding: 6px 10px !important;
    }
    .wccs-track-panel input {
        font-size: 11px !important;
        height: 28px !important;
        padding: 4px 10px !important;
    }
    .wccs-track-panel button {
        font-size: 11px !important;
        height: 28px !important;
        padding: 0 12px !important;
    }
    .wccs-track-result {
        max-height: 150px !important;
    }
    .wccs-order-item {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    .wccs-order-item .order-status {
        font-size: 9px !important;
        padding: 1px 8px !important;
    }
    .wccs-related-list {
        gap: 4px !important;
    }
    .wccs-related-product {
        min-width: 60px !important;
        padding: 4px !important;
    }
    .wccs-related-name {
        font-size: 9px !important;
    }
    .wccs-related-price {
        font-size: 9px !important;
    }
    .wccs-related-link {
        font-size: 9px !important;
        padding: 1px 6px !important;
    }

    /* ===== امتیازدهی ===== */
    .wccs-stars span .wccs-svg-icon {
        width: 24px !important;
        height: 24px !important;
    }
    .wccs-rating-toggle {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }
    .wccs-rating-toggle .wccs-svg-icon {
        width: 12px !important;
        height: 12px !important;
    }
    .wccs-rating-comment {
        font-size: 11px !important;
        min-height: 28px !important;
        padding: 4px 10px !important;
    }
    .wccs-submit-rating {
        font-size: 11px !important;
        padding: 4px !important;
    }

    /* ===== سایر ===== */
    .wccs-load-more-btn {
        font-size: 10px !important;
        padding: 4px !important;
    }
    .wccs-load-more-btn .wccs-svg-icon {
        width: 12px !important;
        height: 12px !important;
    }
    .wccs-empty-state {
        padding: 20px !important;
    }
    .wccs-empty-state .wccs-svg-icon {
        width: 36px !important;
        height: 36px !important;
    }
    .wccs-empty-state p {
        font-size: 12px !important;
    }
    .wccs-upload-progress {
        padding: 4px 12px !important;
    }
    .wccs-upload-progress span {
        font-size: 11px !important;
    }
    .wccs-typing-indicator {
        font-size: 10px !important;
        padding: 2px 12px !important;
    }
    .wccs-recording-indicator {
        font-size: 11px !important;
        padding: 4px 12px !important;
    }

    /* ===== فرم آفلاین ===== */
    #wccs-offline-form {
        padding: 14px 16px !important;
    }
    #wccs-offline-form .wccs-offline-message {
        font-size: 13px;
        padding: 10px 14px;
    }
    #wccs-offline-form .wccs-offline-field input,
    #wccs-offline-form .wccs-offline-field textarea {
        padding: 8px 12px;
        font-size: 12px;
    }
    #wccs-offline-form .wccs-offline-field label {
        font-size: 12px;
    }
    .wccs-offline-submit-btn {
        font-size: 13px;
        padding: 10px 16px;
    }
    #wccs-offline-form .wccs-offline-fields {
        gap: 10px;
    }
}