@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Vazirmatn', sans-serif !important;
}

html,body{
height:100%;
margin:0;
padding:0;
overflow:hidden;
}

.discord-app{


color:#dcddde;
background-image:url("https://s8.uupload.ir/files/persiangulf1_eglb.png");

border-radius:0;
overflow:hidden;
}

.discord-app{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
display:flex;
background-size:cover;
background-position:center;
}



/* SIDEBAR */

.discord-sidebar{
width:260px;
background:#020d29;
display:flex;
flex-direction:column;
border-left:1px solid #1e1f22
}

.discord-server{
padding:16px;
border-bottom:1px solid #1e1f22;
display:flex;
align-items:center;
gap:10px
}

.server-avatar{
width:40px;
height:40px;
border-radius:50%
}

.server-name{
font-weight:bold;
font-size:15px
}

.discord-channels{
padding:10px;
overflow-y:auto
}

.discord-category{
margin-bottom:14px
}

.category-title{
font-size:12px;
color:#949ba4;
margin-bottom:6px;
padding-right:6px
}

.discord-channel{
padding:6px 10px;
border-radius:6px;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
color:#b5bac1;
font-size:14px
}

.discord-channel:hover{
background:#35373c;
color:#fff
}

.discord-channel.active{
background:#404249;
color:#fff
}

.channel-hash{
opacity:.7
}

/* MAIN */

.discord-main{
flex:1;
display:flex;
flex-direction:column
}

/* HEADER */

.discord-channel-header{
height:48px;
background:#313338;
border-bottom:1px solid #1e1f22;
display:flex;
align-items:center;
padding:0 16px;
font-weight:bold
}

/* MESSAGES */

#discord-messages{
flex:1;
overflow-y:auto;
padding:20px;
animation:channelFade .35s ease;
}
@keyframes channelFade{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.discord-empty{
color:#949ba4;
font-size:14px
}

/* MESSAGE */

.discord-message{
display:flex;
gap:12px;
margin-bottom:18px
}

.message-avatar{
width:40px;
height:40px;
border-radius:50%;
transition:transform .25s ease;
cursor:pointer;
}

.message-avatar:hover{
transform:scale(1.15);
}

.message-body{
flex:1
}

.message-header{
font-size:14px;
margin-bottom:4px
}

.message-author{
font-weight:bold;
color:#fff
}

.message-date{
font-size:12px;
color:#949ba4;
margin-right:6px
}

.message-text{
font-size:14px;
line-height:1.6
}

.message-title{
font-weight:bold;
margin-bottom:6px
}

.message-footer{
font-size:12px;
margin-top:6px;
color:#949ba4
}

.message-image{
margin-top:10px;
max-width:400px;
border-radius:6px
}

.message-divider{
height:1px;
background:#2b2d31;
margin:16px 0
}
.message-image{
margin-top:10px;
max-width:400px;
border-radius:8px;
transition:all .3s ease;
cursor:pointer;
}

.message-image:hover{
transform:scale(1.06);
box-shadow:0 10px 25px rgba(0,0,0,.45);
}

/* SCROLLBAR */

#discord-messages::-webkit-scrollbar{
width:8px;
}

#discord-messages::-webkit-scrollbar-track{
background:#202225;
}

#discord-messages::-webkit-scrollbar-thumb{
background:#5865f2;
border-radius:10px;
}

#discord-messages::-webkit-scrollbar-thumb:hover{
background:#4752c4;
}


/* MOBILE */

@media(max-width:900px){

.discord-sidebar{
width:200px
}

.discord-app{
height:600px
}

}

.discord-skeleton {
    padding: 15px;
}

.discord-skeleton-message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite;
    flex-shrink: 0;
    margin-inline-end: 10px;
}

.skeleton-lines {
    flex: 1;
}

.skeleton-line {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite;
    margin-bottom: 8px;
}

.skeleton-line.short {
    width: 30%;
}
.skeleton-line.medium {
    width: 50%;
}
.skeleton-line.long {
    width: 80%;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}


.discord-sidebar{
    transition:transform .35s ease;
}

@media(max-width:900px){
    .discord-sidebar{
        position:fixed;
        left:0;
        top:0;
        bottom:0;
        transform:translateX(-100%);
        z-index:999;
        width:240px;
    }

    .discord-sidebar.open{
        transform:translateX(0);
    }

    .sidebar-overlay{
        position:fixed;
        top:0; right:0; bottom:0; left:0;
        background:rgba(0,0,0,.5);
        display:none;
    }

    .sidebar-overlay.show{
        display:block;
    }
}





#discord-toast-container {
    position: fixed;
    bottom: 20px;
    left: 20px; 
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; 
}

.discord-toast {
    background-color: #313338;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border-right: 4px solid #5865f2;
    min-width: 250px;
    pointer-events: auto;
    animation: slideIn 0.3s ease-out, fadeOut 0.5s ease-in 5s forwards !important;

    opacity: 0;
}

@keyframes slideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
.discord-channel{
padding:7px 10px;
border-radius:6px;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
color:#b5bac1;
font-size:14px;
transition:all .25s ease;
position:relative;
overflow:hidden;
}
.discord-channel.active::before{
    content:"";
    position:absolute;
    right:-10px;
    top:50%;
    transform:translateY(-50%);
    width:3px;
    height:60%;
    background:#fff;
    border-radius:3px;
    animation:slideBar .3s ease;
}

@keyframes slideBar {
    from { height:0; opacity:0; }
    to { height:60%; opacity:1; }
}

.discord-channel:hover{
background:#3b3d44;
color:#fff;
transform:translateX(-5px);
}

.discord-channel.active{
background:#404249;
color:#fff;
box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.discord-channel::after{
content:"";
position:absolute;
background:rgba(255,255,255,.25);
border-radius:50%;
transform:scale(0);
opacity:0;
transition:transform .4s, opacity .6s;
}

.discord-channel:active::after{
transform:scale(6);
opacity:1;
transition:0s;
}


.discord-message{
display:flex;
gap:12px;
margin-bottom:18px;
padding:10px;
border-radius:8px;
transition:all .2s ease;
animation:messageIn .25s ease;
}

.discord-message:hover{
background:rgba(255,255,255,0.04);
transform:translateY(-2px);
}
@keyframes messageIn{
from{
opacity:0;
transform:translateY(8px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.discord-sidebar{
width:260px;
background:rgba(2,13,41,0.95);
backdrop-filter:blur(10px);
display:flex;
flex-direction:column;
border-left:1px solid rgba(255,255,255,0.05);
}
#discord-messages{
scroll-behavior:smooth;
   animation:channelSwitch .35s ease;
}
@keyframes channelSwitch {
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.typing-indicator{
    display:flex;
    align-items:center;
    gap:4px;
    margin-top:5px;
    padding:10px 20px;
    
border-top:1px solid #2b2d31;
background:#313338;
}

.typing-dot{
    width:8px;
    height:8px;
    background:#72767d;
    border-radius:50%;
    animation:blink 1.4s infinite;
}

.typing-dot:nth-child(2){ animation-delay:.2s; }
.typing-dot:nth-child(3){ animation-delay:.4s; }

@keyframes blink{
    0%{ opacity:.3; }
    50%{ opacity:1; }
    100%{ opacity:.3; }
}
.message-reactions{
    display:flex;
    gap:6px;
    opacity:0;
    transition:opacity .25s ease;
    margin-top:6px;
}

.discord-message:hover .message-reactions{
    opacity:1;
}
.open-sidebar-btn{
background:none;
border:none;
color:#fff;
font-size:20px;
cursor:pointer;
margin-left:10px;
display:none;
}

@media(max-width:900px){
.open-sidebar-btn{
display:block;
}
}
.reaction{
    background:#2f3136;
    padding:3px 6px;
    border-radius:6px;
    font-size:12px;
    display:flex;
    gap:4px;
    align-items:center;
    cursor:pointer;
    transition:all .2s ease;
}

.reaction:hover{
    background:#3a3d42;
    transform:scale(1.1);
}
.image-lightbox{
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,.85);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
}

.image-lightbox.visible{
    opacity:1;
    pointer-events:auto;
}

.image-lightbox img{
    max-width:90%;
    max-height:90%;
    border-radius:8px;
    box-shadow:0 0 40px rgba(0,0,0,.6);
    animation:zoomIn .35s ease;
}

@keyframes zoomIn{
    from{ transform:scale(.85); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}

.discord-server{
padding:16px;
border-bottom:1px solid #1e1f22;
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
transition:all .25s ease;
}

.discord-server:hover{
background:#0f1a3d;
transform:scale(1.02);
}


.discord-server:hover{
background:#111b3a;
transform:scale(1.02);
}
.message-image{
margin-top:10px;
max-width:400px;
border-radius:6px;
transition:all .3s ease;
cursor:pointer;
}

.message-image:hover{
transform:scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}
#discord-messages::-webkit-scrollbar{
width:8px
}

#discord-messages::-webkit-scrollbar-thumb{
background:#5865f2;
border-radius:10px
}

#discord-messages::-webkit-scrollbar-thumb:hover{
background:#4752c4
}
.discord-message{
animation:messageFade .3s ease;
}

@keyframes messageFade{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.avatar-wrapper{
    position:relative;
    /* display:inline-block; */
      width:40px;
    height:40px;

border-radius:50%;
overflow:hidden;
}

.message-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    display:block;
}

/* indicator */
.status-indicator{
   position:absolute;
    bottom:-2px;
    right:-2px;
    width:14px;
    height:14px;
    border-radius:50%;
    border:3px solid #2b2d31;
    box-sizing:border-box;
}

/* ONLINE */
.state-online .message-avatar{
    border:2px solid #3ba55c;
}
.state-online .status-indicator{
     background:#23a559;
    animation:onlinePulse 2s infinite;
}
@keyframes onlinePulse{
    0%{box-shadow:0 0 0 0 rgba(35,165,89,0.6);}
    70%{box-shadow:0 0 0 6px rgba(35,165,89,0);}
    100%{box-shadow:0 0 0 0 rgba(35,165,89,0);}
}

/* OFFLINE */
.state-offline .message-avatar{
    border:2px solid #747f8d;
}
.state-offline .status-indicator{
      background:#80848e;
}

/* DO NOT DISTURB */
.state-dnd
 .message-avatar{
    border:2px solid #ed4245;
}
.state-dnd
 .status-indicator{
        background:#f23f43;
}
.state-dnd
 .status-indicator::after{
    content:'';
    position:absolute;
    top:50%;
    left:2px;
    right:2px;
    height:3px;
    background:white;
    transform:translateY(-50%);
    border-radius:2px;
}
/* IDLE */
.state-idle .message-avatar{
    border:2px solid #faa61a;
}

.state-idle .status-indicator{
   background:#f0b232;
    border-radius:50%;
    clip-path: inset(0 50% 0 0); /* حالت هلال */
}
.state-idle .status-indicator::after{
    content:'';
    position:absolute;
    width:8px;
    height:8px;
    background:#2b2d31;
    border-radius:50%;
    top:-1px;
    left:-1px;
}

#discord-profile-modal{

position:fixed;
inset:0;
background:rgba(0,0,0,0.6);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:0.3s;

}

#discord-profile-modal.open{

opacity:1;
pointer-events:auto;

}


.discord-profile-close{
position:absolute;
top:10px;
left:10px;
width:28px;
height:28px;
border:none;
border-radius:50%;
background:rgba(0,0,0,0.5);
color:#fff;
font-size:16px;
cursor:pointer;
transition:all .25s ease;
z-index:10;
}

.discord-profile-close:hover{
background:#ff4d4f;
transform:rotate(90deg) scale(1.1);
}



/* #profile-avatar{

width:80px;
height:80px;
border-radius:50%;
border:6px solid #232428;
margin-top:-40px;
margin-left:16px;

} */
.profile-avatar-wrapper{
position:absolute;
top:50px;
left:20px;

width:90px;
height:90px;

border-radius:50%;
overflow:hidden;


border:5px solid #232428;

display:flex;
align-items:center;
justify-content:center;
}

.profile-avatar{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
}

.profile-name{

font-size:20px;
font-weight:bold;
padding:10px 16px;

}

.profile-state{

color:#b5bac1;
padding:0 16px;

}

.profile-status{

padding:10px 16px;
font-size:14px;

}

.profile-roles{

padding:10px 16px;
}

.profile-role{

background:#3f4147;
padding:4px 8px;
border-radius:6px;
margin:2px;
display:inline-block;
font-size:12px;

}

.profile-close{

position:absolute;
top:10px;
right:10px;
background:none;
border:none;
color:white;
font-size:20px;
cursor:pointer;

}

.animation-1{
background:linear-gradient(135deg,#5865f2,#404eed,#7289da);
}

.animation-2{
background:linear-gradient(135deg,#ff7a18,#ffb347,#ffd29d);
}

.animation-3{
background:linear-gradient(135deg,#43cea2,#185a9d,#1fa2ff);
}

.animation-4{
background:linear-gradient(135deg,#ff416c,#ff4b2b,#ff7e5f);
}

.animation-5{
background:linear-gradient(135deg,#30cfd0,#330867,#5f2c82);
}

.animation-6{
background:linear-gradient(135deg,#667eea,#764ba2,#6b73ff);
}

.animation-7{
background:linear-gradient(135deg,#f7971e,#ffd200,#fceabb);
}

.animation-8{
background:linear-gradient(135deg,#00c6ff,#0072ff,#00f2fe);
}

.animation-9{
background:linear-gradient(135deg,#f953c6,#b91d73,#ff6a88);
}

.animation-10{
background:linear-gradient(135deg,#11998e,#38ef7d,#00f260);
}


/* Online */
.state-online{
box-shadow:0 0 0 3px #23a55900;
}

/* Idle */
.state-idle{
box-shadow:0 0 0 3px #f0b232;
}

/* DND */
.state-dnd{
box-shadow:0 0 0 3px #f23f42;
}

/* Offline */
.state-offline{
box-shadow:0 0 0 3px #80848e;
}

.profile-avatar-wrapper{
position:absolute;
top:60px;
left:20px;
width:90px;
height:90px;
border-radius:50%;
overflow:hidden;
border:4px solid #2b2d31;
padding:0;

/* position:relative; */

}

.profile-avatar{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
}

.profile-avatar-wrapper.state-online{
box-shadow:0 0 0 3px #23a55900;
}

.profile-avatar-wrapper.state-idle{
box-shadow:0 0 0 3px #f0b232;
}

.profile-avatar-wrapper.state-dnd{
box-shadow:0 0 0 3px #f23f42;
}

.profile-avatar-wrapper.state-offline{
box-shadow:0 0 0 3px #80848e;
}

.profile-banner{
height:90px;
border-radius:12px 12px 0 0;
background-size:200% 200%;
animation:bannerMove 6s ease infinite;
}

@keyframes bannerMove{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.profile-avatar-wrapper:hover{
transform:scale(1.08);
transition:.25s;
}

.discord-profile-card{
position:relative;
width:320px;
background:#232428;
border-radius:12px;
overflow:hidden;
}