/* ============================================================
   ===== 📱 MOBILE-OPTIMIZE.CSS — نسخه نهایی v9 =====
   ===== رستوران مدرن سوفیا — بهینه‌سازی پنل مشتری برای موبایل =====
   ============================================================
   ===== این فایل باید آخرین CSS لود شده در index.html باشد =====
   ===== تا بتونه همه استایل‌های قبلی رو override کنه =====
   ============================================================
   ===== 🔴 تغییرات نسخه v9 (حذف قطعی بیضی + Splash زرد): =====
   ===== ❌ حذف کامل هر ::after و ::before زیر پیام‌ها =====
   ===== ❌ حذف کامل انیمیشن liquidShadowFade =====
   ===== ✅ پس‌زمینه Splash زرد (#FEF3C7 → #FDE68A) =====
   ===== ✅ شعارها سفید روی کادر بنفش-رز =====
   ===== ✅ عنوان "سوفیا" و زیرنویس تیره (خوانا روی زرد) =====
   ===== ✅ حفظ کامل تغییرات v7 (فرم سبز-زرد + فونت بزرگ‌تر) =====
   ============================================================
   ===== 🔴 تغییرات نسخه v7 (فرم سبز-زرد + فونت بزرگ‌تر): =====
   ===== ✅ بهینه‌سازی فرم ثبت اطلاعات سبز-زرد در موبایل =====
   ===== ✅ افزایش سایز فونت‌ها در همه بخش‌های موبایل =====
   ============================================================
   ===== 🎯 اهداف: =====
   ===== ✅ فعال‌سازی کامل زوم (pinch-to-zoom) =====
   ===== ✅ بهبود کنتراست رنگ‌ها برای وضوح بیشتر =====
   ===== ✅ افزایش خوانایی فونت‌ها =====
   ===== ✅ کاهش افکت‌های سنگین blur (بهبود پرفورمنس) =====
   ===== ✅ ساده‌سازی انیمیشن‌ها در موبایل =====
   ===== ✅ حفظ کامل زیبایی و هویت بصری =====
   ============================================================ */

/* ============================================================
   ===== 🌐 بخش ۱: فعال‌سازی زوم و اسکرول =====
   ============================================================ */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
    overflow-x: hidden;
    height: 100%;
}

body {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    min-height: 100%;
    min-height: 100dvh;
    -webkit-user-select: text;
    user-select: text;
}

.container,
#app {
    touch-action: pan-x pan-y pinch-zoom;
    overflow: visible;
}

.food-card,
.food-image-wrapper,
.food-image-wrapper img {
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
}

button,
.option-btn,
.nav-item,
.action-btn,
.cart-footer button,
.rating-submit,
.form-submit {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select {
    font-size: 16px;
    touch-action: manipulation;
}

/* ============================================================
   ===== 🎨 بخش ۲: بهبود کنتراست رنگ‌ها =====
   ============================================================ */

@media (max-width: 768px) {
    :root {
        --gold: #6B0F6B;
        --gold-light: #9B59B6;
        --gold-bright: #7A1580;
        --gold-gradient: linear-gradient(135deg, #6B0F6B, #9B59B6);

        --purple: #5A0A5A;
        --purple-light: #7A1580;
        --purple-gradient: linear-gradient(135deg, #5A0A5A, #7A1580);

        --yellow: #FACC15;
        --yellow-light: #FDE047;
        --yellow-soft: rgba(253, 224, 71, 0.38);
        --yellow-softer: rgba(253, 224, 71, 0.26);
        --yellow-border: rgba(202, 138, 4, 0.55);
        --yellow-border-strong: rgba(202, 138, 4, 0.80);

        --emerald: #047857;
        --emerald-light: #059669;
        --emerald-dark: #065F46;
        --emerald-soft: #10B981;
        --emerald-glow: rgba(4, 120, 87, 0.50);
        --emerald-glow-strong: rgba(4, 120, 87, 0.70);

        --accent-gold: #047857;
        --accent-gold-light: #059669;

        --text-primary: #1a0a20;
        --text-secondary: #3a2a40;
        --text-light: #6a5a70;

        --border: #d8c8e0;
        --border-strong: #b8a0c8;

        --shadow: 0 4px 16px rgba(90, 10, 90, 0.12);
    }

    [data-theme="dark"] {
        --text-primary: #f5edf8;
        --text-secondary: #d8c8e0;
        --text-light: #a898b0;
        --border: #4a3a50;
        --border-strong: #6a5a70;
        --shadow: 0 4px 20px rgba(0, 0, 0, 0.6);

        --emerald: #34D399;
        --emerald-light: #6EE7B7;
        --emerald-glow: rgba(52, 211, 153, 0.60);
        --emerald-glow-strong: rgba(52, 211, 153, 0.80);
        --accent-gold: #34D399;
        --accent-gold-light: #6EE7B7;

        --yellow-soft: rgba(253, 224, 71, 0.24);
        --yellow-softer: rgba(253, 224, 71, 0.15);
        --yellow-border: rgba(250, 204, 21, 0.65);
        --yellow-border-strong: rgba(250, 204, 21, 0.85);
    }

    .chat-messages {
        background: #f5f0f8 !important;
    }

    [data-theme="dark"] .chat-messages {
        background: #100a16 !important;
    }

    .message.bot .message-content,
    .liquid-message {
        background: #ffffff !important;
        border-color: #d8c8e0 !important;
        box-shadow: 0 2px 8px rgba(90, 10, 90, 0.08) !important;
    }

    [data-theme="dark"] .message.bot .message-content,
    [data-theme="dark"] .liquid-message {
        background: #1e1424 !important;
        border-color: #4a3a50 !important;
    }

    .message.user .message-content {
        background: linear-gradient(135deg, #6B0F6B, #9B59B6) !important;
        box-shadow: 0 4px 16px rgba(90, 10, 90, 0.35) !important;
    }
}

/* ============================================================
   ===== 📝 بخش ۳: افزایش خوانایی فونت‌ها =====
   ============================================================ */

@media (max-width: 480px) {

    .message-content {
        font-size: 16px !important;
        line-height: 2 !important;
        padding: 13px 18px !important;
        letter-spacing: 0.02em !important;
    }

    .liquid-message {
        font-size: 16px !important;
        line-height: 2 !important;
        padding: 14px 18px !important;
        letter-spacing: 0.02em !important;
    }

    .liquid-message .liquid-icon {
        font-size: 24px !important;
    }

    .category-tab {
        font-size: 14px !important;
        padding: 14px 16px !important;
        min-height: 48px !important;
        line-height: 1.4 !important;
        font-weight: 800 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        letter-spacing: 0.02em !important;
    }

    .category-tab .icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .category-tab .badge-count {
        font-size: 11px !important;
        padding: 2px 9px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .category-section-header {
        padding: 14px 16px !important;
    }

    .category-section-header .cat-icon {
        font-size: 30px !important;
    }

    .category-section-header .cat-title {
        font-size: 18px !important;
        font-weight: 900 !important;
    }

    .category-section-header .cat-sub {
        font-size: 12px !important;
    }

    .category-section-header .cat-count {
        font-size: 12px !important;
        padding: 5px 14px !important;
    }

    .food-card {
        padding: 10px 8px 12px !important;
        border-width: 2px !important;
    }

    .food-card .food-image-wrapper {
        height: 120px !important;
    }

    .food-card .emoji {
        font-size: 38px !important;
    }

    .food-card .name {
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.4 !important;
    }

    .food-card .desc {
        font-size: 12px !important;
        line-height: 1.5 !important;
        min-height: 16px !important;
    }

    .food-card .price {
        font-size: 15px !important;
        font-weight: 900 !important;
        padding: 4px 14px !important;
        color: #047857 !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.38) 0%,
            rgba(250, 204, 21, 0.26) 100%) !important;
        border: 1.5px solid rgba(202, 138, 4, 0.60) !important;
        border-radius: 20px !important;
        letter-spacing: 0.4px;
        text-shadow:
            0 0 12px rgba(4, 120, 87, 0.55),
            0 0 22px rgba(4, 120, 87, 0.28),
            0 1px 2px rgba(255, 255, 255, 0.7) !important;
        box-shadow:
            0 0 14px rgba(250, 204, 21, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    }

    .food-card .check {
        width: 30px !important;
        height: 30px !important;
    }

    .food-card .qty-control button {
        width: 28px !important;
        height: 28px !important;
        font-size: 17px !important;
    }

    .food-card .qty-control .qty {
        font-size: 16px !important;
        min-width: 28px !important;
    }

    .bottom-nav .nav-item .nav-icon {
        font-size: 25px !important;
    }

    .bottom-nav .nav-item .nav-label {
        font-size: 11px !important;
        font-weight: 800 !important;
    }

    .bottom-nav .nav-item .nav-badge {
        font-size: 11px !important;
        padding: 2px 8px !important;
        min-width: 22px !important;
    }

    .floating-cart {
        font-size: 14px !important;
        padding: 12px 22px !important;
    }

    .floating-cart .cart-total {
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .floating-cart .cart-count {
        font-size: 12px !important;
    }

    .cart-container {
        padding: 16px 18px !important;
    }

    .cart-header .title {
        font-size: 17px !important;
        font-weight: 900 !important;
    }

    .cart-item .info .name {
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    .cart-item .price {
        font-size: 15px !important;
        font-weight: 900 !important;
        color: #047857 !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.32) 0%,
            rgba(250, 204, 21, 0.22) 100%) !important;
        padding: 3px 9px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(202, 138, 4, 0.50) !important;
        letter-spacing: 0.3px;
        text-shadow:
            0 0 10px rgba(4, 120, 87, 0.50),
            0 0 18px rgba(4, 120, 87, 0.22),
            0 1px 1px rgba(255, 255, 255, 0.6) !important;
    }

    .cart-footer .total-row .label {
        font-size: 15px !important;
    }

    .cart-footer .total-row .amount {
        font-size: 23px !important;
        font-weight: 900 !important;
        color: #047857 !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.42) 0%,
            rgba(250, 204, 21, 0.30) 100%) !important;
        padding: 5px 14px !important;
        border-radius: 10px !important;
        border: 2px solid rgba(202, 138, 4, 0.60) !important;
        letter-spacing: 0.5px;
        text-shadow:
            0 0 16px rgba(4, 120, 87, 0.60),
            0 0 30px rgba(4, 120, 87, 0.32),
            0 1px 2px rgba(255, 255, 255, 0.7) !important;
        box-shadow:
            0 0 18px rgba(250, 204, 21, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    }

    .cart-footer .actions-row button {
        font-size: 14px !important;
        padding: 12px 16px !important;
        font-weight: 800 !important;
    }

    .form-container {
        padding: 20px 18px !important;
    }

    .form-container .form-title {
        font-size: 19px !important;
    }

    .form-container .form-title .emoji {
        font-size: 22px !important;
    }

    .form-container .form-group {
        margin-bottom: 14px !important;
    }

    .form-container .form-group label {
        font-size: 14px !important;
        font-weight: 800 !important;
    }

    .form-container .form-group label .optional-tag {
        font-size: 11px !important;
    }

    .form-container .form-group input {
        font-size: 16px !important;
        padding: 13px 15px !important;
    }

    .form-container .form-submit {
        font-size: 16px !important;
        padding: 14px !important;
        font-weight: 900 !important;
    }

    .form-container .form-help {
        font-size: 12px !important;
    }

    .form-container .form-error {
        font-size: 12px !important;
        padding: 9px 12px !important;
    }

    .step-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
        border: 2px solid var(--border) !important;
        background: var(--card-bg) !important;
    }

    .step-circle.completed {
        width: 30px !important;
        height: 30px !important;
    }

    .step-label {
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
    }

    .step-circle.active {
        border-color: #FACC15 !important;
        background: linear-gradient(135deg, #FACC15 0%, #FDE047 100%) !important;
        transform: scale(1.2);
        box-shadow:
            0 0 18px rgba(250, 204, 21, 0.65),
            0 0 36px rgba(250, 204, 21, 0.40),
            inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    }

    .step-circle.active .step-number {
        color: #78350F !important;
        font-weight: 900 !important;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
    }

    .step-label.active {
        color: #B45309 !important;
        font-weight: 900 !important;
        text-shadow: 0 0 8px rgba(250, 204, 21, 0.45);
    }

    .step-circle.done {
        border-color: #047857 !important;
        background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
        color: #ffffff !important;
        box-shadow:
            0 0 16px rgba(4, 120, 87, 0.55),
            0 0 32px rgba(4, 120, 87, 0.30) !important;
    }

    .step-circle.done .step-number {
        color: #ffffff !important;
        font-weight: 900 !important;
    }

    .step-label.done {
        color: #047857 !important;
        font-weight: 900 !important;
        text-shadow: 0 0 8px rgba(4, 120, 87, 0.35);
    }

    .step-circle.completed {
        border-color: #065F46 !important;
        background: linear-gradient(135deg, #047857 0%, #10B981 50%, #34D399 100%) !important;
        color: #ffffff !important;
        transform: scale(1.25);
        box-shadow:
            0 0 22px rgba(4, 120, 87, 0.70),
            0 0 44px rgba(4, 120, 87, 0.45),
            0 0 70px rgba(4, 120, 87, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    }

    .step-circle.completed .step-number {
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .step-label.completed {
        color: #047857 !important;
        font-weight: 900 !important;
        text-shadow: 0 0 10px rgba(4, 120, 87, 0.45);
    }

    .status-timeline .header .info .title {
        font-size: 17px !important;
    }

    .status-timeline .header .info .sub {
        font-size: 13px !important;
    }

    .status-timeline .header .code {
        font-size: 12px !important;
        padding: 4px 14px !important;
    }

    .rating-stars .star {
        font-size: 46px !important;
    }

    .rating-title {
        font-size: 20px !important;
    }

    .rating-sub {
        font-size: 14px !important;
    }

    .rating-feedback {
        font-size: 15px !important;
        padding: 14px 16px !important;
    }

    .rating-submit {
        font-size: 16px !important;
        padding: 15px 40px !important;
        font-weight: 900 !important;
    }

    .invoice-header-lux .invoice-shop-name {
        font-size: 20px !important;
    }

    .invoice-customer-grid-lux .info-box .lbl {
        font-size: 11px !important;
    }

    .invoice-customer-grid-lux .info-box .val {
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    .invoice-items-lux .invoice-item-lux .item-name {
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    .invoice-items-lux .invoice-item-lux .item-total {
        font-size: 13px !important;
        font-weight: 900 !important;
        color: #047857 !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.32) 0%,
            rgba(250, 204, 21, 0.22) 100%) !important;
        padding: 2px 8px !important;
        border-radius: 5px !important;
        border: 1px solid rgba(202, 138, 4, 0.45) !important;
        letter-spacing: 0.3px;
        text-shadow:
            0 0 10px rgba(4, 120, 87, 0.45),
            0 0 18px rgba(4, 120, 87, 0.20),
            0 1px 1px rgba(255, 255, 255, 0.6) !important;
    }

    .invoice-summary-lux .summary-row .label {
        font-size: 13px !important;
    }

    .invoice-summary-lux .summary-row .value {
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    .invoice-summary-lux .summary-row.total .label {
        font-size: 15px !important;
    }

    .invoice-summary-lux .summary-row.total .value {
        font-size: 21px !important;
        font-weight: 900 !important;
        color: #047857 !important;
        -webkit-text-fill-color: #047857 !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.45) 0%,
            rgba(250, 204, 21, 0.32) 100%) !important;
        padding: 4px 14px !important;
        border-radius: 10px !important;
        border: 2px solid rgba(202, 138, 4, 0.60) !important;
        letter-spacing: 0.5px;
        text-shadow:
            0 0 18px rgba(4, 120, 87, 0.60),
            0 0 36px rgba(4, 120, 87, 0.35),
            0 1px 2px rgba(255, 255, 255, 0.75) !important;
        box-shadow:
            0 0 22px rgba(250, 204, 21, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.50) !important;
    }

    .invoice-item .item-total {
        color: #047857 !important;
        font-weight: 900 !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.32) 0%,
            rgba(250, 204, 21, 0.22) 100%) !important;
        padding: 2px 8px !important;
        border-radius: 5px !important;
        text-shadow: 0 0 10px rgba(4, 120, 87, 0.45) !important;
    }
}

/* ============================================================
   ===== 📱 بخش ۳.۵: تب‌های دسته‌بندی در تبلت =====
   ============================================================ */

@media (min-width: 481px) and (max-width: 768px) {
    .category-tab {
        font-size: 14px !important;
        padding: 15px 20px !important;
        min-height: 50px !important;
        line-height: 1.4 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .category-tab .icon {
        font-size: 20px !important;
    }
}

/* ============================================================
   ===== 🚀 بخش ۴: کاهش افکت‌های سنگین =====
   ============================================================ */

@media (max-width: 768px) {

    .glass-card,
    .glass-card-purple,
    .glass-card-purple-deep,
    .glass-card-rating,
    .glass-card-invoice,
    .glass-card-chef,
    .glass-card-success,
    .glass-card-soft,
    .glass-card-dark,
    .glass-card-emerald,
    .liquid-message,
    .form-container {
        backdrop-filter: blur(8px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    }

    .glass-modal,
    .glass-modal-overlay {
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    .app-header,
    .action-btn,
    .customer-bar,
    .customer-chip,
    .toolbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body {
        background: #faf7fc !important;
        animation: none !important;
    }

    [data-theme="dark"] body {
        background: #0a0610 !important;
    }

    .container,
    #app {
        box-shadow: 0 4px 20px rgba(90, 10, 90, 0.12) !important;
    }

    .food-card:hover,
    .option-btn:hover {
        box-shadow: 0 4px 12px rgba(90, 10, 90, 0.15) !important;
    }

    .food-card .price {
        box-shadow: 0 0 10px rgba(250, 204, 21, 0.20) !important;
    }

    .form-container {
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .app-header::before {
        animation: none !important;
        background-position: 50% 50% !important;
    }

    .brand-glow {
        animation: none !important;
        opacity: 0.5 !important;
    }

    .form-container::before {
        animation: none !important;
        background-position: 50% 50% !important;
    }
}

/* ============================================================
   ===== ✨ بخش ۵: ساده‌سازی انیمیشن‌ها =====
   ============================================================ */

@media (max-width: 480px) {

    .liquid-message .liquid-line {
        animation-duration: 0.6s !important;
    }

    .liquid-message .liquid-word {
        animation-duration: 0.5s !important;
    }

    .liquid-message .liquid-icon {
        animation-duration: 0.5s !important;
    }

    .food-card.first-load,
    .order-card,
    .category-box,
    .stat-box,
    .cart-container,
    .status-timeline,
    .rating-container,
    .invoice-container,
    .form-container {
        animation-duration: 0.5s !important;
    }

    .splash-logo,
    .splash-screen .splash-logo {
        animation-duration: 0.8s !important;
    }

    .splash-title,
    .splash-screen .splash-title {
        animation-duration: 0.7s !important;
    }

    .msg-line[data-delay="0"] { animation-delay: 0.6s !important; }
    .msg-line[data-delay="1"] { animation-delay: 0.9s !important; }
    .msg-line[data-delay="2"] { animation-delay: 1.2s !important; }
    .msg-line[data-delay="3"] { animation-delay: 1.5s !important; }

    .liquid-message::before {
        animation: none !important;
    }

    .text-luxury {
        background-size: 100% 100% !important;
        animation: none !important;
    }

    .food-card .price {
        transition: all 0.2s ease !important;
    }

    .food-card:hover .price {
        transform: scale(1.04) !important;
    }

    .form-container .form-submit::before {
        animation: none !important;
    }
}

/* ============================================================
   ===== 🎯 بخش ۶: بهبود لمس (Touch Target) =====
   ============================================================ */

@media (max-width: 768px) {

    button,
    .option-btn,
    .nav-item,
    .action-btn,
    .food-card,
    .category-tab,
    .qty-control button,
    .check,
    .form-submit {
        min-height: 44px;
        min-width: 44px;
    }

    .bottom-nav .nav-item {
        padding: 10px 6px !important;
    }

    .category-tab {
        min-height: 48px;
    }

    .food-card .qty-control button {
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .notif-close,
    .notification .close {
        min-width: 32px;
        min-height: 32px;
        padding: 8px !important;
    }

    .action-btn {
        min-width: 36px;
        min-height: 36px;
    }

    .form-container .form-submit {
        min-height: 50px;
    }
}

/* ============================================================
   ===== 📐 بخش ۷: چیدمان بهتر در موبایل =====
   ============================================================ */

@media (max-width: 480px) {

    .food-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .container,
    #app {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        max-width: 100% !important;
    }

    .chat-messages {
        padding: 14px 14px 10px !important;
    }

    .app-header {
        padding-top: max(10px, env(safe-area-inset-top)) !important;
    }

    .bottom-nav {
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
}

/* ============================================================
   ===== 🔄 بخش ۸: حالت Landscape =====
   ============================================================ */

@media (max-width: 900px) and (orientation: landscape) {

    .app-header {
        padding: 6px 10px !important;
    }

    .brand-name {
        font-size: 16px !important;
    }

    .food-card .food-image-wrapper {
        height: 90px !important;
    }

    .bottom-nav {
        padding: 6px 4px !important;
    }

    .bottom-nav .nav-item {
        min-height: 48px !important;
        padding: 4px 2px !important;
    }

    .bottom-nav .nav-item .nav-icon {
        font-size: 20px !important;
    }

    .bottom-nav .nav-item .nav-label {
        font-size: 9px !important;
    }

    .category-tab {
        font-size: 12px !important;
        padding: 12px 14px !important;
        min-height: 44px !important;
        line-height: 1.3 !important;
    }

    .form-container {
        padding: 14px 16px !important;
    }

    .form-container .form-group {
        margin-bottom: 10px !important;
    }
}

/* ============================================================
   ===== 📱 بخش ۹: نمایشگرهای کوچک (زیر ۳۶۰px) =====
   ============================================================ */

@media (max-width: 360px) {

    .food-grid {
        grid-template-columns: 1fr !important;
    }

    .food-card .food-image-wrapper {
        height: 140px !important;
    }

    .category-tab {
        font-size: 12px !important;
        padding: 12px 14px !important;
        min-height: 46px !important;
        line-height: 1.4 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .category-tab .icon {
        font-size: 16px !important;
    }

    .category-tab .badge-count {
        font-size: 10px !important;
        padding: 2px 7px !important;
    }

    .bottom-nav .nav-item .nav-icon {
        font-size: 22px !important;
    }

    .bottom-nav .nav-item .nav-label {
        font-size: 10px !important;
    }

    .step-circle {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }

    .step-circle.completed {
        width: 28px !important;
        height: 28px !important;
    }

    .step-label {
        font-size: 9px !important;
    }

    .food-card .price {
        font-size: 14px !important;
        padding: 4px 12px !important;
        color: #047857 !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.38) 0%,
            rgba(250, 204, 21, 0.26) 100%) !important;
        text-shadow:
            0 0 10px rgba(4, 120, 87, 0.50),
            0 0 18px rgba(4, 120, 87, 0.22),
            0 1px 2px rgba(255, 255, 255, 0.7) !important;
    }

    .cart-footer .total-row .amount {
        font-size: 21px !important;
        color: #047857 !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.42) 0%,
            rgba(250, 204, 21, 0.30) 100%) !important;
        padding: 4px 12px !important;
    }

    .form-container {
        padding: 16px 14px !important;
    }

    .form-container .form-title {
        font-size: 17px !important;
    }

    .form-container .form-group label {
        font-size: 13px !important;
    }

    .form-container .form-group input {
        font-size: 15px !important;
        padding: 12px 14px !important;
    }

    .form-container .form-submit {
        font-size: 15px !important;
        padding: 13px !important;
    }
}

/* ============================================================
   ===== 🌓 بخش ۱۰: بهبود حالت تیره در موبایل =====
   ============================================================ */

@media (max-width: 768px) {
    [data-theme="dark"] {
        background: #0a0610;
    }

    [data-theme="dark"] .container,
    [data-theme="dark"] #app {
        background: #160e1c;
        border-color: #30263a;
    }

    [data-theme="dark"] .food-card .name {
        color: #f5edf8;
    }

    [data-theme="dark"] .food-card .price {
        color: #34D399 !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.24) 0%,
            rgba(250, 204, 21, 0.15) 100%) !important;
        border-color: rgba(250, 204, 21, 0.65) !important;
        text-shadow:
            0 0 14px rgba(52, 211, 153, 0.65),
            0 0 28px rgba(52, 211, 153, 0.35),
            0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    [data-theme="dark"] .cart-item .price,
    [data-theme="dark"] .cart-footer .total-row .amount,
    [data-theme="dark"] .invoice-items-lux .invoice-item-lux .item-total,
    [data-theme="dark"] .invoice-item .item-total {
        color: #34D399 !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.24) 0%,
            rgba(250, 204, 21, 0.15) 100%) !important;
        border-color: rgba(250, 204, 21, 0.60) !important;
        text-shadow:
            0 0 14px rgba(52, 211, 153, 0.65),
            0 0 28px rgba(52, 211, 153, 0.35),
            0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    [data-theme="dark"] .invoice-summary-lux .summary-row.total .value {
        color: #34D399 !important;
        -webkit-text-fill-color: #34D399 !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.30) 0%,
            rgba(250, 204, 21, 0.20) 100%) !important;
        border-color: rgba(250, 204, 21, 0.75) !important;
        text-shadow:
            0 0 20px rgba(52, 211, 153, 0.75),
            0 0 40px rgba(52, 211, 153, 0.45),
            0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    [data-theme="dark"] .step-circle.active {
        border-color: #FDE047 !important;
        background: linear-gradient(135deg, #FDE047 0%, #FEF08A 100%) !important;
        box-shadow:
            0 0 22px rgba(253, 224, 71, 0.80),
            0 0 44px rgba(253, 224, 71, 0.50) !important;
    }

    [data-theme="dark"] .step-circle.active .step-number {
        color: #422006 !important;
    }

    [data-theme="dark"] .step-label.active {
        color: #FDE047 !important;
    }

    [data-theme="dark"] .step-circle.done {
        border-color: #34D399 !important;
        background: linear-gradient(135deg, #059669 0%, #34D399 100%) !important;
        box-shadow:
            0 0 18px rgba(52, 211, 153, 0.70),
            0 0 36px rgba(52, 211, 153, 0.40) !important;
    }

    [data-theme="dark"] .step-label.done {
        color: #34D399 !important;
    }

    [data-theme="dark"] .step-circle.completed {
        background: linear-gradient(135deg, #10B981 0%, #34D399 50%, #6EE7B7 100%) !important;
        box-shadow:
            0 0 28px rgba(52, 211, 153, 0.85),
            0 0 56px rgba(52, 211, 153, 0.55),
            0 0 90px rgba(52, 211, 153, 0.30) !important;
    }

    [data-theme="dark"] .step-label.completed {
        color: #34D399 !important;
    }

    [data-theme="dark"] .food-card {
        background: #1e1424;
        border-color: #30263a;
    }

    [data-theme="dark"] .food-card:hover {
        border-color: #34D399;
        background: #251a2c;
    }

    [data-theme="dark"] .option-btn {
        background: #1e1424;
        border-color: #30263a;
        color: #f5edf8;
    }

    [data-theme="dark"] .option-btn:hover {
        border-color: #9B59B6;
        background: #251a2c;
    }

    [data-theme="dark"] .category-tab {
        background: #1e1424 !important;
        color: #f5edf8 !important;
        border-color: #30263a !important;
    }

    [data-theme="dark"] .category-tab:hover {
        border-color: #9B59B6 !important;
        color: #e8ddf0 !important;
    }

    [data-theme="dark"] .category-tab.active {
        background: linear-gradient(135deg, #A020A0 0%, #E91E63 100%) !important;
        color: #ffffff !important;
        border-color: transparent !important;
    }

    [data-theme="dark"] .form-container {
        background: linear-gradient(145deg,
            #0f1f1a 0%,
            #051410 100%) !important;
        border-color: rgba(52, 211, 153, 0.35) !important;
    }

    [data-theme="dark"] .form-container .form-title {
        background: linear-gradient(135deg,
            #34D399 0%,
            #6EE7B7 30%,
            #FDE047 55%,
            #6EE7B7 80%,
            #34D399 100%) !important;
        background-size: 100% 100% !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    [data-theme="dark"] .form-container .form-group label {
        color: #6EE7B7 !important;
    }

    [data-theme="dark"] .form-container .form-group input {
        background: #0a1a15 !important;
        border-color: rgba(52, 211, 153, 0.35) !important;
        color: #f0fdf4 !important;
    }

    [data-theme="dark"] .form-container .form-group input::placeholder {
        color: #34D399 !important;
        opacity: 0.5 !important;
    }

    [data-theme="dark"] .form-container .form-group input:focus {
        border-color: #34D399 !important;
        box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.20) !important;
        background: #0f2419 !important;
    }

    [data-theme="dark"] .form-container .form-submit {
        background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
    }

    [data-theme="dark"] .form-container .form-help {
        color: #6EE7B7 !important;
    }

    [data-theme="dark"] .form-container .form-error {
        background: rgba(231, 76, 60, 0.15) !important;
        color: #ff6b6b !important;
        border-right-color: #e74c3c !important;
    }
}

/* ============================================================
   ===== 🎨 بخش ۱۱: بهبود فوکوس و accessibility =====
   ============================================================ */

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 3px solid #9B59B6 !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}

button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
    outline: none;
}

button:active,
.option-btn:active,
.nav-item:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

.form-container .form-group input:focus-visible {
    outline: 3px solid #047857 !important;
    outline-offset: 2px !important;
}

/* ============================================================
   ===== 🎯 بخش ۱۲: بهبود لودینگ و اسکلتون =====
   ============================================================ */

@media (max-width: 768px) {

    .typing-indicator {
        padding: 12px 20px !important;
    }

    .typing-indicator span {
        width: 10px !important;
        height: 10px !important;
        margin: 0 4px !important;
    }

    .chat-messages::-webkit-scrollbar,
    .options-container::-webkit-scrollbar,
    .category-tabs::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
    }

    .chat-messages::-webkit-scrollbar-thumb,
    .options-container::-webkit-scrollbar-thumb {
        background: rgba(107, 15, 107, 0.5) !important;
        border-radius: 4px !important;
    }
}

/* ============================================================
   ===== 🚫 بخش ۱۳: غیرفعال کردن انتخاب متن غیرضروری =====
   ============================================================ */

button,
.nav-item,
.category-tab,
.option-btn,
.food-card .name,
.food-card .price,
.food-card .desc,
.bottom-nav,
.action-btn,
.brand-name,
.brand-tagline,
.chip-value,
.chip-label,
.form-container .form-submit,
.form-container .form-group label {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.message-content,
.liquid-message,
.invoice-container,
.customer-bar,
.form-container .form-group input {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* ============================================================
   ===== 💛💚 بخش ۱۴: کلاس‌های کمکی قیمت =====
   ============================================================ */

.text-emerald {
    color: #047857 !important;
    font-weight: 900 !important;
    text-shadow:
        0 0 12px rgba(4, 120, 87, 0.55),
        0 0 24px rgba(4, 120, 87, 0.25);
}

.bg-emerald-soft {
    background: rgba(4, 120, 87, 0.12) !important;
    border: 1.5px solid rgba(4, 120, 87, 0.50) !important;
    color: #047857 !important;
    font-weight: 900 !important;
}

.glow-emerald {
    box-shadow:
        0 0 24px rgba(4, 120, 87, 0.45),
        0 0 48px rgba(4, 120, 87, 0.22) !important;
}

.price-yellow-emerald {
    color: #047857 !important;
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.38) 0%,
        rgba(250, 204, 21, 0.26) 100%) !important;
    border: 1.5px solid rgba(202, 138, 4, 0.60) !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 0.4px;
    text-shadow:
        0 0 12px rgba(4, 120, 87, 0.55),
        0 0 22px rgba(4, 120, 87, 0.28),
        0 1px 2px rgba(255, 255, 255, 0.7);
    box-shadow:
        0 0 14px rgba(250, 204, 21, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .price-yellow-emerald {
    color: #34D399 !important;
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.24) 0%,
        rgba(250, 204, 21, 0.15) 100%) !important;
    border-color: rgba(250, 204, 21, 0.65) !important;
    text-shadow:
        0 0 14px rgba(52, 211, 153, 0.65),
        0 0 28px rgba(52, 211, 153, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   ===== 💚 بخش ۱۵: کلاس‌های کمکی فرم سبز در موبایل =====
   ============================================================ */

.form-emerald {
    background: linear-gradient(145deg,
        #ffffff 0%,
        #f0fdf4 100%) !important;
    border: 2px solid rgba(4, 120, 87, 0.30) !important;
    box-shadow:
        0 8px 32px rgba(4, 120, 87, 0.12),
        0 0 0 1px rgba(4, 120, 87, 0.06) inset !important;
}

.form-emerald-title {
    background: linear-gradient(135deg,
        #047857 0%,
        #059669 30%,
        #FACC15 55%,
        #059669 80%,
        #047857 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 900 !important;
}

.form-emerald-btn {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(4, 120, 87, 0.35) !important;
}

.form-emerald-label {
    color: #065F46 !important;
    font-weight: 900 !important;
}

.form-emerald-input {
    background: #f0fdf4 !important;
    border: 2px solid rgba(4, 120, 87, 0.25) !important;
    color: #065F46 !important;
}

.form-emerald-input:focus {
    border-color: #047857 !important;
    box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.15) !important;
}

/* ============================================================
   ===== 🔴🔴🔴 بخش ۱۶: راه‌حل قطعی =====
   ===== Splash زرد + حذف قطعی بیضی زیر پیام‌ها =====
   ===== این بخش باید آخرین بلاک فایل باشد =====
   ============================================================ */

/* ============================================================
   ===== ۱. پس‌زمینه Splash — زرد ملایم =====
   ============================================================ */
html body .splash-screen,
html body #splashScreen {
    background: linear-gradient(135deg,
        #FFFBEB 0%,
        #FEF3C7 20%,
        #FDE68A 40%,
        #FCD34D 60%,
        #FDE68A 80%,
        #FEF3C7 100%) !important;
    background-size: 100% 100% !important;
    background-color: #FEF3C7 !important;
}

/* ============================================================
   ===== ۲. شعارها (msg-line) — سفید روی کادر بنفش-رز =====
   ============================================================ */
html body .splash-screen .msg-line,
html body .msg-line {
    color: #ffffff !important;
    background: linear-gradient(135deg,
        rgba(160, 32, 160, 0.90) 0%,
        rgba(233, 30, 99, 0.85) 100%) !important;
    border-right: 3px solid rgba(255, 255, 255, 0.70) !important;
    box-shadow:
        0 4px 16px rgba(160, 32, 160, 0.40),
        0 0 0 1px rgba(255, 255, 255, 0.25) inset !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.40) !important;
    font-weight: 800 !important;
}

/* ============================================================
   ===== ۳. عنوان "سوفیا" — تیره برای خوانایی روی زرد =====
   ============================================================ */
html body .splash-screen .splash-title {
    color: #78350F !important;
    background: none !important;
    -webkit-text-fill-color: #78350F !important;
    background-clip: unset !important;
    text-shadow:
        0 2px 8px rgba(120, 53, 15, 0.25),
        0 0 30px rgba(202, 138, 4, 0.35) !important;
}

/* ============================================================
   ===== ۴. زیرنویس "رستوران مدرن" — تیره =====
   ============================================================ */
html body .splash-screen .splash-subtitle {
    color: #92400E !important;
    text-shadow: 0 1px 4px rgba(120, 53, 15, 0.20) !important;
}

/* ============================================================
   ===== ۵. خط جداکننده Splash — تیره =====
   ============================================================ */
html body .splash-screen .divider-line {
    background: linear-gradient(90deg, transparent, #92400E, transparent) !important;
}

html body .splash-screen .divider-diamond {
    color: #92400E !important;
}

/* ============================================================
   ===== ۶. لوگوی Splash — سایه ملایم روی زرد =====
   ============================================================ */
html body .splash-screen .logo-icon {
    filter:
        drop-shadow(0 4px 16px rgba(120, 53, 15, 0.35))
        drop-shadow(0 0 30px rgba(202, 138, 4, 0.45)) !important;
}

/* ============================================================
   ===== ۷. لودر Splash — پس‌زمینه ملایم روی زرد =====
   ============================================================ */
html body .splash-screen .splash-loader {
    background: rgba(146, 64, 14, 0.15) !important;
}

html body .splash-screen .loader-bar {
    background: linear-gradient(90deg,
        #78350F 0%,
        #B45309 25%,
        #D97706 50%,
        #F59E0B 75%,
        #FCD34D 100%) !important;
    background-size: 100% 100% !important;
}

/* ============================================================
   ===== ۸. 🔴🔴🔴 حذف قطعی بیضی/دایره زیر پیام‌ها =====
   ===== این بلاک باید آخرین بلاک مطلق فایل باشد =====
   ===== 🔴 کلید اصلی: حذف کامل هر ::after و ::before =====
   ============================================================ */

html body .liquid-message .liquid-line::after,
html body .liquid-message .liquid-line::before,
html body .liquid-message .liquid-word::after,
html body .liquid-message .liquid-word::before,
html body .liquid-message::after,
html body .liquid-line::after,
html body .liquid-line::before,
html body .liquid-word::after,
html body .liquid-word::before,
html body .message::after,
html body .message::before,
html body .message-content::after,
html body .message-content::before,
html body .chat-messages .message::after,
html body .chat-messages .message::before,
html body .chat-messages .message-content::after,
html body .chat-messages .message-content::before,
html body .chat-messages .liquid-message::after,
html body .chat-messages .liquid-line::after,
html body .chat-messages .liquid-line::before {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    clip-path: inset(50%) !important;
    -webkit-clip-path: inset(50%) !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: -1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== ۹. حفظ خط تزئینی بالای کارت پیام (این بیضی نیست) ===== */
html body .liquid-message::before {
    display: block !important;
    content: '' !important;
    visibility: visible !important;
    opacity: 0.85 !important;
    width: auto !important;
    height: 3px !important;
    background: linear-gradient(90deg,
        transparent,
        rgba(139, 26, 139, 0.55),
        rgba(176, 124, 198, 0.75),
        rgba(4, 120, 87, 0.70),
        rgba(176, 124, 198, 0.75),
        rgba(139, 26, 139, 0.55),
        transparent) !important;
    border-radius: 0 !important;
    animation: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* ============================================================
   ===== ۱۰. غیرفعالسازی کامل انیمیشن liquidShadowFade =====
   ===== 🔴 این انیمیشن کاملاً حذف شد چون مسئول بیضی بود =====
   ============================================================ */
@keyframes liquidShadowFade {
    0%, 100% {
        opacity: 0 !important;
        transform: scaleX(0) !important;
        display: none !important;
    }
}

/* ============================================================
   ===== ۱۱. حذف هر سایه/بیضی از خطوط پیام =====
   ============================================================ */
html body .liquid-message .liquid-line {
    box-shadow: none !important;
    text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.04) !important;
    filter: none !important;
}

html body .liquid-message .liquid-line:last-child {
    box-shadow: none !important;
    text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.04) !important;
    filter: none !important;
}

/* ============================================================
   ===== ✅ پایان MOBILE-OPTIMIZE.CSS v9 =====
   ============================================================
   ===== 📋 خلاصه تغییرات v9 (نسبت به v8): =====
   ===== 🔴 حذف قطعی بیضی زیر پیام‌ها: =====
   =====    - حذف کامل .liquid-line::after =====
   =====    - حذف کامل .liquid-line::before =====
   =====    - حذف کامل .liquid-word::after / ::before =====
   =====    - حذف کامل .liquid-message::after =====
   =====    - حذف کامل .message::after / ::before =====
   =====    - حذف کامل .message-content::after / ::before =====
   =====    - حذف کامل liquidShadowFade =====
   =====    - حفظ .liquid-message::before (خط تزئینی) =====
   ===== ✅ حفظ کامل پس‌زمینه Splash زرد =====
   ===== ✅ حفظ کامل شعارهای سفید روی کادر بنفش-رز =====
   ===== ✅ حفظ کامل عنوان و زیرنویس تیره =====
   ===== ✅ حفظ کامل لودر با گرادیان قهوه‌ای-طلایی =====
   ===== ✅ حفظ کامل تمام بهینه‌سازی‌های موبایل v7 =====
   ============================================================
   ===== 📋 خلاصه تغییرات v8: =====
   ===== ✅ پس‌زمینه Splash زرد ملایم =====
   ===== ✅ شعارها سفید روی کادر بنفش-رز =====
   ===== ✅ عنوان "سوفیا" تیره (#78350F) =====
   ===== ✅ زیرنویس "رستوران مدرن" تیره (#92400E) =====
   ===== ✅ خط جداکننده تیره (#92400E) =====
   ===== ✅ لوگو با سایه ملایم =====
   ===== ✅ لودر با گرادیان قهوه‌ای-طلایی =====
   ============================================================
   ===== 📋 خلاصه تغییرات v7: =====
   ===== ✅ فرم ثبت اطلاعات سبز-زرد =====
   ===== ✅ افزایش سایز فونت‌ها =====
   ============================================================
   ===== 📋 خلاصه تغییرات v6: =====
   ===== ❌ حذف کامل استایل‌های هدر قدیمی =====
   ===== ✅ حذف انیمیشن headerShine در موبایل =====
   ===== ✅ حذف انیمیشن logoGlow در موبایل =====
   ============================================================
   ===== 📋 خلاصه تغییرات v5: =====
   ===== ✅ رفع بریدگی تب‌های دسته‌بندی =====
   ============================================================
   ===== 📋 خلاصه تغییرات v4: =====
   ===== ✅ قیمت‌های سبز پررنگ (#047857) =====
   ===== ✅ استپر: زرد → سبز =====
   ============================================================ */
/* ============================================================
   ===== 🔴🔴🔴 راه‌حل قطعی — حذف box-shadow از category-tabs-wrapper =====
   ===== این box-shadow همان بیضی زیر پیام‌ها بود =====
   ===== این بلاک باید آخرین بلاک مطلق فایل باشد =====
   ============================================================ */

/* ===== حذف box-shadow از نوار دسته‌بندی ===== */
html body .category-tabs-wrapper {
    box-shadow: none !important;
    border-bottom: 1px solid rgba(160, 32, 160, 0.12) !important;
}

/* ===== حذف box-shadow از خود نوار دسته‌بندی ===== */
html body .category-tabs {
    box-shadow: none !important;
}

/* ===== حذف box-shadow از options-container ===== */
html body .options-container {
    box-shadow: none !important;
}

/* ===== حذف box-shadow از chat-messages ===== */
html body .chat-messages {
    box-shadow: none !important;
}

/* ===== حذف box-shadow از bottom-nav ===== */
html body .bottom-nav {
    box-shadow: none !important;
    border-top: 1px solid rgba(160, 32, 160, 0.12) !important;
}

/* ===== حالت تیره ===== */
html body [data-theme="dark"] .category-tabs-wrapper {
    box-shadow: none !important;
    border-bottom: 1px solid rgba(160, 32, 160, 0.20) !important;
}

html body [data-theme="dark"] .bottom-nav {
    box-shadow: none !important;
    border-top: 1px solid rgba(160, 32, 160, 0.20) !important;
}

/* ===== حذف هر box-shadow روی عناصر اطراف ===== */
html body .container,
html body #app {
    box-shadow: none !important;
}
/* ============================================================
   ===== 🔴🔴🔴 راه‌حل قطعی — حذف box-shadow از category-tabs-wrapper =====
   ===== این بلاک باید آخرین بلاک مطلق فایل باشد =====
   ============================================================ */

html body .category-tabs-wrapper,
html body .category-tabs,
html body .options-container,
html body .chat-messages {
    box-shadow: none !important;
}

html body .category-tabs-wrapper {
    border-bottom: 1px solid rgba(160, 32, 160, 0.12) !important;
}

html body [data-theme="dark"] .category-tabs-wrapper {
    box-shadow: none !important;
    border-bottom: 1px solid rgba(160, 32, 160, 0.20) !important;
}