* {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background: #f5f5f5;
                font-family:  "Rubik", sans-serif;
            }

            .main-container {
                display: flex;
                flex-direction: column;
                gap: 17px;
                align-items: center;
            }

            /* Preview Box */
            .preview-box {
                width: 344px;
                height: 40px;
                background: white;
                border-radius: 18.64px;
                border: 1.2px solid #c4c4c4;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 15px;
                transition: height 0.3s ease;
            }

            .preview-text {
                font-family: Arial, sans-serif;
                font-size: 14.93px;
                color: #333;
                max-width: 80%; /* جلوگیری از اورلپ با دکمه */
                position: static !important;
                transform: none !important;
                white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
            }

            /* Send Button */
            .send-btn {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }

            .send-btn svg {
                width: 24px;
                height: 24px;
            }

            /* Images Grid */
            .images-grid {
                display: flex;
                gap: 15px;
            }

            .image-item {
                width: 104px;
                height: 104px;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                position: relative;
                overflow: hidden;
                cursor: pointer;
            }

            .image-item img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .checkmark-icon {
                position: absolute;
                top: 8px;
                left: 8px;
                display: none;
                width: 23px;
                height: 23px;
                z-index: 2;
            }

            .image-item.selected .checkmark-icon {
                display: block;
            }

            .selected-image-container {
                position: absolute;
                top: 7px;
                left: 7px;
                width: 164px;
                height: 176px;
                border-radius: 8px;
                overflow: hidden;
                opacity: 0;
                transform: translateY(10px);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                border-radius: 8px;
                visibility: hidden;
            }

            .preview-line {
                bottom: 40px; /* تنظیم مجدد موقعیت خط */
            }

            /* پیش نمایش اصلی */
            .preview-box {
                width: 344px;
                height: 40px;
                background: white;
                border-radius: 18.64px;
                border: 1.2px solid #c4c4c4;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 15px;
                position: relative;
                transition: height 0.3s ease;
                overflow: hidden;
            }

            /* حالت توسعه یافته */
            .preview-box.expanded {
                height: 235px;
                flex-direction: column;
                align-items: flex-start;
                padding: 15px;
            }

            /* خط جداکننده */
            .preview-line {
                width: 100%;
                height: 1.2028px;
                background: #e8e8e8;
                position: absolute;
                bottom: 40px;
                left: 0;
                display: none;
            }

            .preview-box.expanded .preview-line {
                display: block;
            }

            .selected-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 8px;
            }

            .preview-box.expanded .selected-image-container {
                display: block;
                opacity: 1;
                transform: translateY(0);
                visibility: visible;
                transition-delay: 0.2s;
            }

            /* آیکون کنسل روی تصویر */
            .image-cancel {
                position: absolute;
                top: 7.82px;
                right: 7.82px;
                cursor: pointer;
                display: none;
            }

            .preview-box.expanded .image-cancel {
                display: block;
            }

            /* آیکون تیک روی تصاویر */
            .checkmark-icon {
                position: absolute;
                left: 8px;
                bottom: 8px;
                display: none;
            }

            .preview-box {
                position: relative;
                padding-bottom: 40px; /* فضای لازم برای send-detail */
            }

            /* دکمه ارسال */
            .send-btn {
                position: static !important; /* بازنشانی پوزیشن قبلی */
                transform: none !important;
            }

            .send-detail {
                display: flex;
                justify-content: space-between;
                width: calc(100% - 24px); /* 12px از چپ + 12px از راست */
                margin: 0 0px 8px 0px;
                position: absolute;
                bottom: 0;
                align-items: center; /* تراز بهتر برای متنهای چند خطی */
                flex-wrap: wrap; /* امکان نمایش چند خطی */
            }