/* Instagram Stories v3 */

/* فونتِ پیش‌فرضِ افزونه: IRANSansX Bold (همراهِ افزونه).
   وزن به‌صورتِ بازه تعریف شده تا مرورگر روی این فونتِ بولد، بولدِ مصنوعیِ اضافه نزند. */
@font-face {
    font-family: 'IGS3 IRANSansX';
    src: url('../fonts/IRANSansX-Bold.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.igs3-wrapper,
.igs3-wrapper *,
.igs3-wrapper *::before,
.igs3-wrapper *::after {
    box-sizing: border-box;
}

.igs3-wrapper {
    direction: rtl;
    margin: 10px 0;
    font-family: 'IGS3 IRANSansX', Tahoma, Arial, sans-serif;
}

.igs3-circles-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #fafafa;
    border-radius: 12px;
}

.igs3-circles-wrapper::-webkit-scrollbar {
    display: none;
}

.igs3-circles-container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    min-width: max-content;
    padding: 5px 10px;
}

.igs3-circle-item {
    flex: 0 0 auto;
    text-align: center;
    cursor: pointer;
}

.igs3-story-ring {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.igs3-story-ring:hover {
    transform: scale(1.08);
}

.igs3-story-ring.igs3-seen {
    background: #ccc;
}

.igs3-story-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid #fff;
    background-color: #f0f0f0;
}

.igs3-story-title {
    margin-top: 6px;
    font-size: 12px;
    font-family: 'IGS3 IRANSansX', Tahoma, Arial, sans-serif;
    max-width: 85px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: #262626;
}

.igs3-viewer {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    align-items: center;
    justify-content: center;
}

.igs3-viewer.active {
    display: flex;
}

.igs3-viewer-inner {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 100%;
    max-height: 750px;
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.igs3-progress-container {
    display: flex;
    gap: 4px;
    padding: 12px 12px 6px;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
}

.igs3-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    overflow: visible;
    position: relative;
}

.igs3-progress-fill {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 3px;
}

.igs3-progress-bar.active .igs3-progress-fill {
    animation-name: progressFill;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.igs3-progress-bar.completed .igs3-progress-fill {
    width: 100%;
}

.igs3-progress-bar.paused .igs3-progress-fill {
    animation-play-state: paused;
}

@keyframes progressFill {
    from { width: 0%; }
    to { width: 100%; }
}

.igs3-timer-label {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--igs3-font-regular, 'IGS3 IRANSansX', Tahoma, Arial, sans-serif);
    white-space: nowrap;
}

.igs3-close {
    position: absolute;
    top: 32px;
    left: 12px;
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    z-index: 20;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.igs3-close:hover {
    color: #ddd;
}

.igs3-pause-btn {
    position: absolute;
    top: 32px;
    right: 12px;
    color: #fff;
    cursor: pointer;
    z-index: 20;
    background: rgba(255,255,255,0.15);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.igs3-pause-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

.igs3-pause-btn:hover {
    background: rgba(255,255,255,0.3);
}

.igs3-story-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.igs3-story-slide img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.igs3-story-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
}

.igs3-story-slide.active {
    display: flex;
}

.igs3-story-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.igs3-story-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 60px 15px 25px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 30%, transparent);
    color: #fff;
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.igs3-story-overlay > * {
    pointer-events: auto;
}

.igs3-story-heading {
    margin: 0 0 10px;
    font-size: calc(26px * var(--igs3-title-scale, 1));
    font-weight: bold;
    font-family: var(--igs3-font-bold, 'IGS3 IRANSansX', Tahoma, Arial, sans-serif);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    width: 100%;
    text-align: center;
}

.igs3-story-caption {
    margin: 0 0 12px;
    font-size: calc(14px * var(--igs3-caption-scale, 1));
    font-family: var(--igs3-font-regular, 'IGS3 IRANSansX', Tahoma, Arial, sans-serif);
    line-height: 1.6;
    opacity: 0.95;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    width: 100%;
    text-align: center;
}

.igs3-story-btn {
    display: inline-block;
    padding: 10px 28px;
    /* رنگ‌ها از تمِ انتخاب‌شده می‌آیند (متغیرهایِ --igs3-btn-*)؛ بدونِ تم همان مقدارِ پیش‌فرض */
    background: linear-gradient(45deg, var(--igs3-btn-start, #f09433), var(--igs3-btn-end, #dc2743));
    color: var(--igs3-btn-text, #fff);
    text-decoration: none;
    border-radius: 25px;
    font-size: calc(14px * var(--igs3-btn-scale, 1));
    font-weight: bold;
    font-family: var(--igs3-font-bold, 'IGS3 IRANSansX', Tahoma, Arial, sans-serif);
    margin-bottom: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, filter 0.2s ease;
    pointer-events: auto;
    align-self: center;
    box-sizing: border-box;
}

.igs3-story-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 39, 67, 0.4);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--igs3-btn-end, #dc2743) 40%, transparent);
    color: var(--igs3-btn-text, #fff);
}

/* ===== شکل‌هایِ مختلفِ دکمه (انتخاب از پنلِ هر استوری → «شکل دکمه») =====
   «gradient» همان حالتِ پیش‌فرض است و کلاسِ جداگانه‌ای لازم ندارد. */

/* تخت: تک‌رنگ (رنگِ شروعِ تم) */
.igs3-story-btn.igs3-btn-style-solid {
    background: var(--igs3-btn-start, #f09433);
}
.igs3-story-btn.igs3-btn-style-solid:hover {
    box-shadow: 0 5px 15px rgba(240, 148, 51, 0.45);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--igs3-btn-start, #f09433) 45%, transparent);
}

/* توخالی: فقط خط دور؛ با هاور پر می‌شود */
.igs3-story-btn.igs3-btn-style-outline {
    background: transparent;
    color: var(--igs3-btn-text, #fff);
    border: 2px solid var(--igs3-btn-text, #fff);
    padding: 8px 26px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.igs3-story-btn.igs3-btn-style-outline:hover {
    background: var(--igs3-btn-text, #fff);
    color: var(--igs3-btn-end, #dc2743);
    text-shadow: none;
    box-shadow: none;
}

/* شیشه‌ای: نیمه‌شفاف با تارِ پس‌زمینه */
.igs3-story-btn.igs3-btn-style-glass {
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--igs3-btn-text, #fff);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 9px 27px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.igs3-story-btn.igs3-btn-style-glass:hover {
    background: rgba(255, 255, 255, 0.28);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* نئون: خطِ درخشان به رنگِ تم */
.igs3-story-btn.igs3-btn-style-neon {
    background: rgba(0, 0, 0, 0.35);
    color: var(--igs3-btn-text, #fff);
    border: 2px solid var(--igs3-btn-start, #f09433);
    padding: 8px 26px;
    text-shadow: 0 0 8px var(--igs3-btn-start, #f09433);
    box-shadow: 0 0 8px rgba(240, 148, 51, 0.7), 0 0 18px rgba(240, 148, 51, 0.45), inset 0 0 8px rgba(240, 148, 51, 0.35);
    box-shadow: 0 0 8px color-mix(in srgb, var(--igs3-btn-start, #f09433) 70%, transparent),
                0 0 18px color-mix(in srgb, var(--igs3-btn-start, #f09433) 45%, transparent),
                inset 0 0 8px color-mix(in srgb, var(--igs3-btn-start, #f09433) 35%, transparent);
}
.igs3-story-btn.igs3-btn-style-neon:hover {
    box-shadow: 0 0 12px rgba(240, 148, 51, 0.9), 0 0 28px rgba(240, 148, 51, 0.6), inset 0 0 12px rgba(240, 148, 51, 0.5);
    box-shadow: 0 0 12px color-mix(in srgb, var(--igs3-btn-start, #f09433) 90%, transparent),
                0 0 28px color-mix(in srgb, var(--igs3-btn-start, #f09433) 60%, transparent),
                inset 0 0 12px color-mix(in srgb, var(--igs3-btn-start, #f09433) 50%, transparent);
}

/* سه‌بعدی: دکمهٔ برجسته که با کلیک «فشرده» می‌شود */
.igs3-story-btn.igs3-btn-style-3d {
    background: linear-gradient(180deg, var(--igs3-btn-start, #f09433), var(--igs3-btn-end, #dc2743));
    border-radius: 14px;
    margin-bottom: 17px;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.38), 0 9px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.igs3-story-btn.igs3-btn-style-3d:hover {
    transform: translateY(2px);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.38), 0 6px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.igs3-story-btn.igs3-btn-style-3d:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* گوشه‌تیز: مستطیلِ تقریباً بدونِ گردی */
.igs3-story-btn.igs3-btn-style-square {
    border-radius: 4px;
    padding: 10px 30px;
}

/* مورب: متوازی‌الاضلاع */
.igs3-story-btn.igs3-btn-style-slanted {
    border-radius: 0;
    padding: 10px 36px;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.igs3-story-btn.igs3-btn-style-slanted:hover {
    box-shadow: none;
    filter: brightness(1.12);
}

/* فلش‌دار: کپسولی با فلشِ متحرک (جهتِ راست‌به‌چپ) */
.igs3-story-btn.igs3-btn-style-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    direction: rtl;
    padding: 10px 24px 10px 20px;
}
.igs3-story-btn.igs3-btn-style-arrow::before {
    content: "\2190";
    order: 2;
    font-family: Arial, Tahoma, sans-serif;
    font-size: 1.2em;
    line-height: 1;
    transition: transform 0.2s ease;
}
.igs3-story-btn.igs3-btn-style-arrow:hover::before {
    transform: translateX(-4px);
}

/* افکتِ نورِ دکمه (اختیاری؛ با تیکِ «افکت» در پنلِ استوری فعال می‌شود).
   دقیقاً همان افکتِ دکمهٔ ارسالِ باکسِ پیام: یک نورِ مورب که هر ۲ ثانیه از روی دکمه رد می‌شود + ضربانِ ملایمِ اندازه (igs3SendShine با همان زمان‌بندی). */
.igs3-story-btn.igs3-btn-effect {
    position: relative;
    overflow: hidden;
    animation: igs3BtnPulse 2s ease-in-out infinite;
}

.igs3-story-btn.igs3-btn-effect::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(115deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 50%, rgba(0, 0, 0, 0) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: igs3SendShine 2s ease-in-out infinite;
}

@keyframes igs3BtnPulse {
    0%        { transform: scale(1); }
    15%       { transform: scale(1.1); }
    30%, 100% { transform: scale(1); }
}

/* ===== نوار پایینِ استوری: [لایک/دیس لایک] در سمتِ چپ + باکسِ متنیِ ارسال پیام ===== */
.igs3-story-actions {
    display: flex;
    direction: ltr;              /* ری‌اکشن‌ها همیشه سمتِ چپ */
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    pointer-events: auto;
}

.igs3-reactions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.igs3-reaction-btn {
    background: rgba(0, 0, 0, 0.25);
    border: 1.5px solid #facc15;
    color: #facc15;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.igs3-reaction-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.igs3-reaction-btn:hover {
    transform: scale(1.12);
}

.igs3-reaction-btn.clicked {
    background: #facc15;
    color: #1a1a1a;
    transform: scale(1.1);
}

.igs3-reaction-btn.clicked svg {
    filter: none;
}

/* پس از انتخابِ یکی از دو گزینه، دیگری غیرفعال می‌شود */
.igs3-reaction-dislike.clicked {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

/* پس از انتخابِ یکی از دو گزینه، می‌توان با کلیک روی دیگری آن را تغییر داد */
.igs3-reactions.igs3-reacted .igs3-reaction-btn:not(.clicked) {
    opacity: 0.55;
    cursor: pointer;
    transform: none;
}

.igs3-reactions.igs3-reacted .igs3-reaction-btn.clicked {
    cursor: default;
}

.igs3-message-box {
    position: relative;
    flex: 1;
    min-width: 0;
}

.igs3-message-input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    margin: 0;
    padding: 0 16px 0 46px;      /* جا برایِ دکمهٔ ارسال در سمتِ چپ */
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--igs3-msg-color, #fff);
    font-size: calc(16px * var(--igs3-msg-scale, 1));    /* حداقلِ ۱۶px برایِ جلوگیری از زوم خودکار در iOS رعایت شود */
    font-family: var(--igs3-font-regular, 'IGS3 IRANSansX', Tahoma, Arial, sans-serif);
    text-align: right;
    outline: none;
    box-shadow: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    user-select: text;
    -webkit-user-select: text;
}

/* نوعِ «شماره تلفن» — همه‌چیز مثلِ حالتِ «متن» است (RTL، همان فونت و اندازه)، با این تفاوت:
   ۱) متنِ راهنما (placeholder) راست‌چین است (همان رفتارِ پیش‌فرضِ بالا؛ اینجا چیزی برایش لازم نیست)
   ۲) وقتی کاربر شماره را تایپ می‌کند (باکس خالی نیست) وسط‌چین می‌شود
   ۳) پیامِ تشکرِ بعد از ارسال (کلاسِ igs3-msg-thanks که با JS موقتاً اضافه می‌شود) وسط‌چین است
   جهت (direction)، اندازه و letter-spacing تغییر نمی‌کنند. شماره با قالبِ 0938-928-6200 فقط رقم و خط‌تیره‌ٔ میانِ رقم‌هاست،
   پس در RTL هم یک‌تکه و چپ‌به‌راست می‌ماند. */
.igs3-message-input[data-type="phone"] {
    text-overflow: ellipsis;     /* پیامِ تشکرِ خیلی بلند وسطِ حرف بریده نشود */
}

.igs3-message-input[data-type="phone"]:not(:placeholder-shown),
.igs3-message-input[data-type="phone"].igs3-msg-thanks {
    text-align: center;
    padding: 0 46px;             /* متقارن: دکمهٔ ارسال (چپ) وسط‌چین‌بودن را به‌هم نزند */
}

.igs3-message-input::placeholder {
    color: var(--igs3-msg-color, rgba(255, 255, 255, 0.75));
    opacity: 0.8;
}

.igs3-message-input:focus {
    border-color: #fff;
    background: rgba(0, 0, 0, 0.5);
}

.igs3-message-box.igs3-invalid .igs3-message-input {
    border-color: #ef4444;
}

/* برقیِ دو‌ثانیه‌ایِ باکسِ ورودی، درست وقتی پیامِ موفقیت (بعد از ارسالِ شماره/متن) نمایش داده می‌شود
   نوعِ «متن»: راست‌چین و RTLِ پیش‌فرض (بدونِ هیچ تغییری).
   نوعِ «تلفن»: پیامِ تشکر وسط‌چین است (قاعدهٔ .igs3-msg-thanks بالا)؛ متنِ راهنمای عادی راست‌چین است. */
.igs3-message-input.igs3-msg-flash {
    animation: igs3MsgFlash 2s ease-in-out;
}

@keyframes igs3MsgFlash {
    0%   { box-shadow: none; border-color: rgba(255, 255, 255, 0.55); background: rgba(0, 0, 0, 0.3); }
    15%  { box-shadow: 0 0 16px 2px rgba(255, 255, 255, 0.85); border-color: #fff; background: rgba(255, 255, 255, 0.18); }
    100% { box-shadow: none; border-color: rgba(255, 255, 255, 0.55); background: rgba(0, 0, 0, 0.3); }
}

.igs3-message-error {
    display: none;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 7px 14px;
    border-radius: 12px;
    background: rgba(220, 38, 38, 0.92);
    color: #fff;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    font-family: var(--igs3-font-regular, 'IGS3 IRANSansX', Tahoma, Arial, sans-serif);
    pointer-events: auto;
}

.igs3-message-error.igs3-visible {
    display: block;
}

.igs3-stickers-row {
    display: flex;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px));   /* فاصله از لبهٔ پایین */
    padding: 3px 2px;   /* جا برایِ بزرگ‌شدنِ استیکر هنگامِ لمس بدونِ بریده‌شدن */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    pointer-events: auto;
    direction: rtl;
}

.igs3-stickers-row::-webkit-scrollbar {
    display: none;
}

.igs3-sticker-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.igs3-sticker-btn:hover,
.igs3-sticker-btn:active {
    transform: scale(1.15);
    background: rgba(0, 0, 0, 0.5);
}

.igs3-message-send {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #111;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* افکتِ برقیِ دکمهٔ ارسال (برداشته‌شده از افکتِ دکمه‌هایِ افزونهٔ باکس‌آگهی: aem-cta-shine / aem-cta-pulse) */
.igs3-message-send::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(115deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 50%, rgba(0, 0, 0, 0) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    opacity: 0;
}

.igs3-message-box.igs3-has-text .igs3-message-send {
    animation: igs3SendPulse 2s ease-in-out infinite;
}

.igs3-message-box.igs3-has-text .igs3-message-send::after {
    opacity: 1;
    animation: igs3SendShine 2s ease-in-out infinite;
}

@keyframes igs3SendShine {
    0%   { left: -60%; }
    30%  { left: 130%; }
    100% { left: 130%; }
}

@keyframes igs3SendPulse {
    0%        { transform: translateY(-50%) scale(1); }
    15%       { transform: translateY(-50%) scale(1.1); }
    30%, 100% { transform: translateY(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .igs3-message-input.igs3-msg-flash,
    .igs3-message-box.igs3-has-text .igs3-message-send,
    .igs3-message-box.igs3-has-text .igs3-message-send::after,
    .igs3-story-btn.igs3-btn-effect,
    .igs3-story-btn.igs3-btn-effect::after {
        animation: none !important;
    }
}

.igs3-message-send svg {
    width: 16px;
    height: 16px;
    display: block;
    transform: rotate(180deg);   /* فلشِ ارسال به سمتِ چپ (جهتِ نوشتنِ فارسی) */
}

.igs3-message-box.igs3-has-text .igs3-message-send {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

.igs3-message-box.igs3-sending .igs3-message-send {
    opacity: 0.5;
    pointer-events: none;
}

.igs3-reaction-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 22;
    pointer-events: none;
    opacity: 0;
    animation: igs3ReactionFlash 0.7s ease-out forwards;
}

@keyframes igs3ReactionFlash {
    0% { opacity: 0; }
    15% { opacity: 1; }
    100% { opacity: 0; }
}

.igs3-reaction-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 100px;
    line-height: 1;
    z-index: 25;
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
    animation: igs3ReactionBurst 0.9s cubic-bezier(.17,.89,.32,1.49) forwards;
}

@keyframes igs3ReactionBurst {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    30%  { transform: translate(-50%, -50%) scale(1.35); opacity: 1; }
    45%  { transform: translate(-50%, -50%) scale(0.9) rotate(-8deg); }
    60%  { transform: translate(-50%, -50%) scale(1.1) rotate(6deg); }
    75%  { transform: translate(-50%, -50%) scale(0.96) rotate(-3deg); }
    90%  { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 0; }
}

.igs3-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    cursor: pointer;
    padding: 20px 12px;
    z-index: 15;
    user-select: none;
    opacity: 0.7;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
}

.igs3-nav svg {
    width: 35px;
    height: 35px;
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

.igs3-nav:hover {
    opacity: 1;
}

.igs3-nav-prev {
    right: 0;
}

.igs3-nav-prev svg {
    transform: rotate(-90deg);
}

.igs3-nav-next {
    left: 0;
}

.igs3-nav-next svg {
    transform: rotate(90deg);
}

@media (max-width: 500px) {
    .igs3-story-ring {
        width: 65px;
        height: 65px;
    }
    .igs3-story-img {
        width: 59px;
        height: 59px;
    }
    .igs3-story-title {
        font-size: 11px;
        max-width: 70px;
    }
    .igs3-viewer-inner {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    .igs3-story-heading {
        font-size: calc(20px * var(--igs3-title-scale, 1));
    }
    .igs3-story-caption {
        font-size: calc(13px * var(--igs3-caption-scale, 1));
    }
    .igs3-story-btn {
        font-size: calc(13px * var(--igs3-btn-scale, 1));
    }
    .igs3-timer-label {
        font-size: 8px;
    }
    .igs3-stickers-row {
        margin-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    }
    .igs3-nav svg {
        width: 35px;
        height: 35px;
    }
}