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


html,
body {

    width:100%;
    min-height:100%;

    overflow-x:hidden;

}


body{

    font-family:"Vazirmatn",sans-serif;

    direction:rtl;

    background:
    radial-gradient(circle at 20% 0%,rgba(255,180,210,.45),transparent 35%),
    radial-gradient(circle at 90% 90%,rgba(180,210,255,.45),transparent 35%),
    linear-gradient(140deg,#fff8fc,#f5f7ff);

}





.app {

    width:100%;
    max-width:430px;

    min-height:100vh;

    margin:auto;

    padding:22px 20px 95px;

    position:relative;

}









/* HEADER */


.header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.avatar img{

    width:52px;

    height:52px;

    border-radius:50%;

    object-fit:cover;

}



.actions{

    display:flex;

    align-items:center;

    gap:12px;

}



.pro{

    padding:9px 18px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    color:#d74b91;

    background:rgba(255,255,255,.45);

    backdrop-filter:blur(20px);
    position:relative;

    box-shadow:
    -8px 0 18px rgba(215,75,145,.45);

    animation: proShadowMove 5s ease-in-out infinite;
}



.settings{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.45);

    border:1px solid rgba(255,255,255,.8);

    backdrop-filter:blur(20px);

}










/* WELCOME */


.welcome{

    margin-top:20px;

}



.welcome h1{

    font-size:31px;

    font-weight:700;

    letter-spacing:-1px;

    color:#111;

}



.welcome p{

    margin-top:6px;

    font-size:13px;

    color:#777;

}











/* MODELS */


.models{

    display:flex;

    gap:9px;

    margin-top:22px;

}



.model{

    flex:1;

    height:82px;

    border-radius:22px;

    background:rgba(255,255,255,.42);

    border:1px solid rgba(255,255,255,.8);

    backdrop-filter:blur(20px);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:9px;

}



.model .icon{

    width:34px;

    height:34px;

    background:rgba(255,255,255,.65);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:17px;

}



.model span{

    font-size:11px;

}









/* HISTORY */


.history{

    margin-top:16px;

    min-height:128px;

    padding:18px;

    border-radius:25px;

    background:

    linear-gradient(
    120deg,
    rgba(255,255,255,.55),
    rgba(255,222,240,.45)
    );

    border:1px solid rgba(255,255,255,.9);

    backdrop-filter:blur(25px);

    position:relative;

    overflow:hidden;

}



.history h3{

    font-size:15px;

}



.history p{

    font-size:12px;

    color:#777;

    margin-top:4px;

}



.history button{

    margin-top:12px;

    padding:7px 20px;

    border:0;

    border-radius:20px;

    background:linear-gradient(90deg,#ff6468,#ff9361);

    color:#fff;

    font-family:inherit;

    font-size:12px;

}



.dots{

    position:absolute;

    width:150px;

    height:120px;

    left:-5px;

    bottom:-25px;

    background-image:

    radial-gradient(#1876ff 1px,transparent 1px);

    background-size:7px 7px;

    opacity:.35;

}









/* TITLE */


.title-row{

    margin-top:17px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.title-row b{

    font-size:14px;

}



.title-row span{

    font-size:12px;

    color:#777;

}











/* TOOLS */


.tools{

    margin-top:10px;

    display:flex;

    gap:10px;

    height:185px;

}



.image-card{

    width:56%;

    border-radius:26px;

    background:rgba(255,255,255,.5);

    border:1px solid rgba(255,255,255,.8);

    backdrop-filter:blur(25px);

    padding:15px;

    position:relative;

    overflow:hidden;

}



.circle-icon{

    width:55px;

    height:55px;

    background:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}



.image-card h4{

    margin-top:25px;

    font-size:14px;

}



.image-card p{

    font-size:11px;

    color:#777;

    margin-top:5px;

    width:90%;

}



.ai-face{

    position:absolute;

    width:110px;

    bottom:-8px;

    left:8px;

}







.right-tools{

    width:44%;

    display:flex;

    flex-direction:column;

    gap:10px;

}



.mini-card{

    flex:1;

    border-radius:24px;

    background:rgba(255,255,255,.5);

    border:1px solid rgba(255,255,255,.8);

    backdrop-filter:blur(20px);

    padding:14px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:10px;

}



.mini-card div{

    font-size:22px;

}



.mini-card span{

    font-size:12px;

}











/* CHAT */


.chat{

    position:fixed;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    width:calc(100% - 44px);

    max-width:386px;


    height:58px;


    border-radius:30px;


    background:rgba(255,255,255,.75);

    border:1px solid rgba(255,255,255,.9);

    backdrop-filter:blur(25px);


    display:flex;

    align-items:center;

    padding:6px;

    z-index:999;

}



.chat input{

    flex:1;

    border:0;

    outline:0;

    background:none;

    text-align:right;

    padding:0 10px;

    font-family:inherit;

}



.chat button{

    border:0;

}



.plus{

    width:42px;

    height:42px;

    border-radius:50%;

    background:white;

    font-size:24px;

}



.camera{

    background:none;

    width:38px;

}



.mic{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#ff5d5d;

    color:white;

}









@media(max-height:760px){

    .welcome{

        margin-top:12px;

    }


    .models{

        margin-top:15px;

    }


    .history{

        height:105px;

    }


    .tools{

        height:160px;

    }

}

.chat-area{

    flex:1;

    overflow-y:auto;

    padding-bottom:85px;

    scrollbar-width:none;

}


.chat-area::-webkit-scrollbar{

    display:none;

}

@media(max-height:700px){

    .chat{

        bottom:10px;

    }


    .app{

        padding-top:15px;

    }

}

.plus-btn {


    width:42px;

    height:42px;

    border-radius:50%;

    background:white !important;

}

.pro {

    display:flex;

    align-items:center;

    flex-direction:row;

    direction:ltr;

    gap:8px;

    padding:8px 14px;

    border-radius:30px;

    background:rgba(255,255,255,.45);

    backdrop-filter:blur(20px);

}


.pro img {

    width:22px;

    height:22px;

    object-fit:contain;

}


.pro span {

    font-size:13px;

    font-weight:600;

    color:#333;

    direction:ltr;

}

.chat{
    animation: none;
}


/* نور متحرک */
.chat:focus-within{

    box-shadow:
    0 0 15px rgba(255,100,104,.35),
    0 0 35px rgba(255,147,97,.25);

    animation: glowMove 3s linear infinite;

}



@keyframes glowMove {


    0%{

        box-shadow:
        -8px 0 20px rgba(255,100,104,.5),
        0 0 35px rgba(255,147,97,.25);

    }


    25%{

        box-shadow:
        0 -8px 20px rgba(255,100,104,.5),
        0 0 35px rgba(255,147,97,.25);

    }


    50%{

        box-shadow:
        8px 0 20px rgba(255,100,104,.5),
        0 0 35px rgba(255,147,97,.25);

    }


    75%{

        box-shadow:
        0 8px 20px rgba(255,100,104,.5),
        0 0 35px rgba(255,147,97,.25);

    }


    100%{

        box-shadow:
        -8px 0 20px rgba(255,100,104,.5),
        0 0 35px rgba(255,147,97,.25);

    }

}






@keyframes proShadowMove {


    0% {

        box-shadow:
        -8px 0 18px rgba(215,75,145,.45);

    }


    25% {

        box-shadow:
        0 -8px 18px rgba(215,75,145,.45);

    }


    50% {

        box-shadow:
        8px 0 18px rgba(215,75,145,.45);

    }


    75% {

        box-shadow:
        0 8px 18px rgba(215,75,145,.45);

    }


    100% {

        box-shadow:
        -8px 0 18px rgba(215,75,145,.45);

    }

}