:root{
            --first-color: rgb(255, 119, 214);
            --second-color: rgb(0 187 92 / 58%);
            --third-color: #3b82f6;
            --fourth-color: rgb(255, 119, 214);
            --fifth-color: rgb(255, 119, 214);
            --sixth-color: rgb(255, 119, 214);
            --seventh-color: rgb(255, 119, 214);
            --gray-color: #999;
            --white-color: #fff;
            --black-color: #333333;



            --vazir: 'vazir', sans-serif;
}
/* نوار افقی پروفایل‌ها */
.avatars-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px;
    justify-content: center;
    align-items: center;
}
.profile-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.story-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid var(--third-color);
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.story-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.profile-name {
    margin-top: 5px;
    font-size: 12px;
    color: #333;
    font-family: shabnam;
}
/* محیط تمام صفحه استوری */
.story-fullscreen {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #111;
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
/* هدر استوری (نوارها و اسم) */
.story-header {
    position: absolute;
    top: 0; left: 0; width: 100%;
    padding: 15px;
    box-sizing: border-box;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
}
.progress-container {
    display: flex;
    gap: 5px;
    width: 100%;
    margin-bottom: 15px;
}
.progress-segment {
    flex: 1;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    overflow: hidden;
}
.progress-fill {
    width: 0%;
    height: 100%;
    background-color: rgb(255, 255, 255);
}
/* اطلاعات کاربر داخل استوری */
.user-info {
    display: flex;
    align-items: center;
    color: white;
    font-family: shabnam;
    font-size: 10pt;
}
.user-info img {
    width: 35px; height: 35px;
    border-radius: 50%;
    margin-left: 10px;
   margin-right: 10px;
}
.close-btn {
    margin-right: auto;
    font-size: 24px;
    cursor: pointer;
    margin-left: 15px
}
/* مناطق کلیک نامرئی برای چپ و راست */
.click-zone {
    position: absolute;
    top: 0; height: 100%;
    z-index: 5;
}
.left-zone {
    left: 0; 
    width: 50%; 
}
.right-zone { 
    right: 0; 
    width: 50%; 
} 

/* عکس استوری */
.story-content {
    max-width: 100%;
    max-height: 100vh;
    object-fit: contain;
}