/*
==========================================================

PremiumZone

Version :
1.0.0

File :
assets/css/chat.css

Description :
PremiumZone Chat

==========================================================
*/

/* ==========================================================
   ROOT
========================================================== */

.pz-chat{

    display:flex;

    flex-direction:column;

    gap:16px;

    height:100%;

}

/* ==========================================================
   HEADER
========================================================== */

.pz-chat-header{

    color:#00F3FF;

    font-size:16px;

    font-weight:700;

    letter-spacing:1px;

}

/* ==========================================================
   MESSAGE AREA
========================================================== */

.pz-chat-messages{

    flex:1;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    gap:12px;

    padding-right:4px;

}

/* ==========================================================
   MESSAGE
========================================================== */

.pz-chat-message{

    display:flex;

    gap:12px;

    padding:12px;

    border:1px solid rgba(

        0,

        243,

        255,

        .22

    );

    background:rgba(

        255,

        255,

        255,

        .02

    );

}

/* ==========================================================
   AVATAR
========================================================== */

.pz-chat-avatar{

    width:48px;

    height:48px;

    flex:none;

    border:1px solid rgba(

        0,

        243,

        255,

        .35

    );

    background:#050505;

}

/* ==========================================================
   CONTENT
========================================================== */

.pz-chat-content{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:4px;

}

/* ==========================================================
   USER
========================================================== */

.pz-chat-user{

    color:#00F3FF;

    font-size:13px;

    font-weight:700;

}

/* ==========================================================
   TEXT
========================================================== */

.pz-chat-text{

    color:#EFFFFF;

    font-size:13px;

    line-height:1.6;

    word-break:break-word;

}

/* ==========================================================
   TIME
========================================================== */

.pz-chat-time{

    color:#7F9B9B;

    font-size:11px;

}

/* ==========================================================
   INPUT
========================================================== */

.pz-chat-input{

    display:flex;

    gap:10px;

}

.pz-chat-input input{

    flex:1;

    height:42px;

    padding:0 12px;

    border:1px solid rgba(

        0,

        243,

        255,

        .35

    );

    background:#050505;

    color:#EFFFFF;

    outline:none;

}

.pz-chat-input input:focus{

    border-color:#00F3FF;

}

/* ==========================================================
   BUTTON
========================================================== */

.pz-chat-input button{

    width:110px;

    border:1px solid #00F3FF;

    background:transparent;

    color:#00F3FF;

    cursor:pointer;

    transition:.2s;

}

.pz-chat-input button:hover{

    background:#00F3FF;

    color:#000;

}

/* ==========================================================
   SCROLL
========================================================== */

.pz-chat-messages::-webkit-scrollbar{

    width:4px;

}

.pz-chat-messages::-webkit-scrollbar-thumb{

    background:#00F3FF;

}

/* ==========================================================
   MOBILE
========================================================== */

@media(

max-width:768px

){

.pz-chat-avatar{

    width:40px;

    height:40px;

}

.pz-chat-input{

    flex-direction:column;

}

.pz-chat-input button{

    width:100%;

    height:42px;

}

}