/* GGurgenidze universal timezone + aligned chat photo composer */

.chat-compose{
    grid-template-columns:44px minmax(0,1fr) 44px!important;
    grid-template-rows:auto auto auto!important;
    align-items:center!important;
    column-gap:9px!important;
    row-gap:7px!important;
}

.chat-image-preview{
    grid-column:1/-1!important;
    grid-row:1!important;
    justify-self:start;
    position:relative;
    width:max-content;
    max-width:100%;
    padding:5px;
    border:1px solid #dde5ef;
    border-radius:13px;
    background:#fff;
    box-shadow:0 6px 20px rgba(34,53,78,.10);
}

.chat-image-preview[hidden]{
    display:none!important;
}

.chat-image-preview img{
    display:block;
    width:92px;
    height:72px;
    border-radius:9px;
    object-fit:cover;
}

.chat-image-remove{
    position:absolute;
    top:-8px;
    right:-8px;
    width:25px;
    height:25px;
    padding:0;
    border:2px solid #fff;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#202b3b;
    color:#fff;
    font-size:19px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 3px 10px rgba(0,0,0,.20);
}

.chat-attach-button{
    grid-column:1!important;
    grid-row:2!important;
    align-self:center!important;
    justify-self:center!important;
    width:44px;
    height:44px;
    margin:0!important;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#e7f3ff;
    color:#1877f2;
    cursor:pointer;
    transition:transform .16s ease,background .16s ease;
}

.chat-attach-button:hover{
    background:#dcecff;
    transform:translateY(-1px);
}

.chat-attach-button:focus-within{
    outline:3px solid rgba(24,119,242,.20);
}

.chat-attach-button input{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
}

.chat-attach-button svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.chat-compose > textarea{
    grid-column:2!important;
    grid-row:2!important;
    align-self:center!important;
    width:100%;
    margin:0!important;
}

.chat-compose > .chat-send-button{
    grid-column:3!important;
    grid-row:2!important;
    align-self:center!important;
    justify-self:center!important;
    margin:0!important;
}

.chat-compose > .form-message{
    grid-column:1/-1!important;
    grid-row:3!important;
    min-height:0;
    margin:0!important;
}

.chat-compose > .form-message:empty{
    display:none;
}

.chat-message-time{
    display:block;
    margin-top:3px;
    color:#8a8d91!important;
    font-size:.72rem;
    font-style:normal;
}

.chat-image-button{
    display:block;
    max-width:min(420px,70vw);
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:18px;
    background:#e8edf3;
    cursor:zoom-in;
    box-shadow:0 4px 18px rgba(24,42,67,.10);
}

.chat-message.is-own .chat-image-button{
    margin-left:auto;
    border-bottom-right-radius:6px;
}

.chat-message.is-other .chat-image-button{
    border-bottom-left-radius:6px;
}

.chat-image-button img{
    display:block;
    width:100%;
    max-width:420px;
    max-height:470px;
    object-fit:cover;
}

.chat-photo-viewer{
    position:fixed;
    inset:0;
    z-index:3000;
    padding:42px;
    display:grid;
    place-items:center;
    background:rgba(4,10,20,.92);
    backdrop-filter:blur(8px);
}

.chat-photo-viewer[hidden]{
    display:none!important;
}

.chat-photo-viewer img{
    display:block;
    max-width:min(96vw,1500px);
    max-height:90vh;
    border-radius:12px;
    object-fit:contain;
    box-shadow:0 24px 80px rgba(0,0,0,.52);
}

.chat-photo-viewer-close{
    position:fixed;
    top:18px;
    right:22px;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(255,255,255,.20);
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.10);
    color:#fff;
    font-size:30px;
    line-height:1;
    cursor:pointer;
}

body.chat-photo-viewer-open{
    overflow:hidden;
}

@media(max-width:760px){
    .chat-compose{
        grid-template-columns:40px minmax(0,1fr) 42px!important;
        column-gap:7px!important;
        padding:10px!important;
    }

    .chat-attach-button{
        width:40px;
        height:40px;
    }

    .chat-image-button{
        max-width:76vw;
    }

    .chat-image-button img{
        max-width:76vw;
        max-height:390px;
    }

    .chat-photo-viewer{
        padding:54px 10px 18px;
    }
}