body{
    background: linear-gradient(45deg, #97D3DC, #80BCFF);
}

0div {border:1px dashed red;}

.custom-container {
    max-width: 100%;      /* По умолчанию ширина 100% (мобильные) */
    margin-left: auto;
    margin-right: auto;   /* Центрирование */
}

@media (min-width: 768px) { /* с планшета и выше */
    .custom-container {
        max-width: 1024px;  /* Максимальная ширина 1024px */
    }
}




.left-block {
    width: 320px;
    background-color: #ffffff;
}

.right-block {
    height: 100vh; /* или задайте высоту по необходимости */
    background-color: #ffffff;
}

.bottom-child {
    height: 100px;
}

.left-panel-box{height: 100%;padding:12px 6px 12px 12px;}
.right-panel-box{height: 100%;padding:12px 12px 6px 6px;}
.bottom-panel-box{height: 100%;padding:6px 12px 12px 6px;}

@media (min-width: 992px) {
    .custom-container {
        padding-top: 3vh;
        padding-bottom: 3vh;
        box-sizing: border-box;
    }
    .right-block {
        height: 94vh; /* или задайте высоту по необходимости */
    }
}

.chat-container {
    background:
            linear-gradient(45deg,
            rgba(219,221,187,0.7) 0%,
            rgba(107,165,135,0.7) 33%,
            rgba(213,216,141,0.7) 66%,
            rgba(136,184,132,0.7) 100%),
            url('/assets/img/bg.png') no-repeat center center;
    background-size: cover, cover;
    background-blend-mode: overlay;
    height:100%;
}

.left-panel{border:1px solid silver; height:100%;background: #f5f6f6;}
.right-panel{border:1px solid silver; height:100%;}
.bottom-panel{border:0px solid silver;background: #f5f6f6; height:100%;}

@media (max-width: 762px) {
    .custom-container {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .left-panel-box{padding:6px;}
    .right-panel-box{padding:6px 6px 0px 6px;}
    .bottom-panel-box{padding:6px;}
    .chat-container{height:calc(100% - 36px);}
}

.chat-container-box{height:400px;overflow-x:scroll !important;}

.message{width:100% !important;height:40px !important; border: 1px solid silver; font-size: 13px}
.message-card p{0overflow-wrap: break-word; 0word-wrap: break-word; 0word-break: break-all;max-width:550px;}
.dateStamp{font-size:12px; opacity:0.3}

.popover-body {font-size:22px;}
.url-right{text-align:right;line-height:1em;padding: 0px;margin:0px;border-bottom:1px solid lightslategray}
.url-right .close-popover{font-size: 13px; cursor: pointer;text-decoration:none; color:lightslategray}

.user {padding: 3px 6px;}
.user img{ width: 48px ;margin-right: 6px}
.user .name{}
.user .visit{padding-left: 6px;font-size:12px}

.mobile-right-panel{padding:3px;background: #f5f6f6;}
.mobile-right-panel img{width:30px}

#file-input{display:none}

.simple-chat-log{font-size: 12px;}

input:focus { box-shadow: none !important; }
textarea:focus { box-shadow: none !important; }
button:active, button:focus { box-shadow: none !important;/*outline-color:transparent !important;outline: none !important; outline-width: 0 !important;*/ }

.btn-message-send{background: #5da2e2;color:white;font-size: 14px;}
.btn-message-send:focus, .btn-message-send:hover {background: #629ed7;color:white;}

.btn-file-send{background:#7269EF;color:white;font-size: 14px;}
.btn-file-send:focus, .btn-file-send:hover {background: #9696fd;color:white;}

.btn-icon-send{background: #F57900;color:white;font-size: 14px;}
.btn-icon-send:focus, .btn-icon-send:hover {background: #f58211;color:white;}

a.emoji{padding:6px;text-decoration: none; cursor: pointer;}

.hide{display:none}

.user img.red{border-color:#F57900 !important;}
.user img.green{border-color: #08c708 !important;}
.user .visit.red{color: #b7b0aa;}
.user .visit.green{color:#08c708;}

.mobile-icon.red{border-color:#F57900 !important;}
.mobile-icon.green{border-color: #08c708 !important;}

.vdeo-icon{width:64px !important;}