:root {
        --sidebar-width: 320px;
    }
    @media screen and (max-width: 400px) {
        .chat-header{
            background-color: #FFFFFF !important;
            backdrop-filter: none !important;
        }
        .text-light{
            color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
        }
        #chatBody{
            background-image: url('../imagens/fundo_chat.jpg');
            /*max-height: calc(72lvh + 5px) !important;*/
        }
        .aspect-blur{
            background-color: transparent;
            backdrop-filter: blur(2px);
        }
        .message{
            max-width: 75% !important;
        }
    }

    .optionsUser{
        position: absolute;
        right: 4px;
        margin-top: 0px;
        border-radius: 50%;
        padding: 19px 11px 18px 11px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    ul.dropdown-menu.show{
        margin-left: -110px !important;
    }

    .em-linha-horizontal{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .em-linha-vertical{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .no-icon {
        font-size: 8rem;
        display: inline-block;
        animation: shake-head 1s infinite;
        transform-origin: center center;
        color: #f44336; /* vermelho para reforçar o “não” */
    }

    @keyframes shake {
        0%   { transform: rotate(0deg); }
        15%  { transform: rotate(-20deg); }
        30%  { transform: rotate(20deg); }
        45%  { transform: rotate(-15deg); }
        60%  { transform: rotate(15deg); }
        75%  { transform: rotate(-10deg); }
        100% { transform: rotate(0deg); }
    }

    @keyframes shake-head {
        0%   { transform: rotate(0deg); }
        20%  { transform: rotate(-20deg); }
        40%  { transform: rotate(20deg); }
        60%  { transform: rotate(-15deg); }
        80%  { transform: rotate(15deg); }
        100% { transform: rotate(0deg); }
    }

    body,
    html {
        height: 100lvh;
        background-image: url('../imagens/tec.jpg');
    }

    #sendForm{
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
    }

    #chatBody{
        background-image: url('../imagens/fundo_chat.jpg');
        /*max-height: calc(66lvh + 5px);*/
    }

    .aspect-blur{
        background-color: transparent;
        backdrop-filter: blur(2px);
    }

    .btnBlockToggle{
        padding: 2px;
        border-radius: 50%;
        transition: all .75s;
    }

    .btnBlockToggle:hover{
        padding: 2px;
        border-radius: 50%;
        box-shadow: 0px 0px 5px 1px;
        transition: all .75s;
    }

    .me{
        /*margin: 0 1rem .25rem 1rem;
        background-color: #ebe8e8;*/
        border-radius: 5px;
    }
    .form-control{
        border-radius: 22px;
    }
    .form-control:focus{
        box-shadow: none;
        border-color: #ced4da;
    }

    .app {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        height: 100vh;
    }

    @media (max-width: 992px) {
        .app {
            grid-template-columns: 1fr;
        }

        .sidebar {
            display: none;
        }

        .sidebar.show {
            display: block;
            position: fixed;
            z-index: 1040;
            width: 100%;
            height: 100%;
            background: #fff;
        }
    }

    .message {
        max-width: 60%;
        margin-left: 45px;
    }

    .msg{
        margin-top: -30px;
    }
    .msg-me{
        margin-top: -8px;
    }

    .reply-preview-small-other{
        margin-top: -27px;
        padding: 5px;
        border-radius: 8px;
        background-color: #79f5bdff;
        border-top-right-radius: 0;
        border-left: 5px solid #0d6efd;
        margin-bottom: 30px !important;
    }

    .reply-msg-me{
        margin-top:-30px;
    }

    .reply-preview-small-me{
        padding: 5px;
        border-radius: 8px;
        background-color: #FFFFFF;
        border-top-left-radius: 0;
        border-left: 5px solid #0d6efd;
        margin-bottom: 30px !important;
    }

    .isOther{
        width: 30px;
        height: 30px;
        margin-left: -49px;
        margin-top: -22px;
        border-top-right-radius: 0px !important;
    }

    .user-unread-badge{
        position: absolute;
        top: 4px;
        left: 42px;
        font-size: 10;
        font-weight: 100;
        padding: 3px 5px 5px 5px;
        border-radius: 50%;
    }

    .isMe{
        width: 30px;
        height: 30px;
        margin-right: -49px;
        margin-top: -12px;
        float: right;
        border-top-left-radius: 0px !important;
    }

    .message.me {
        margin-left: auto;
        width: auto;
        margin-right: 45px;
    }

    .bubble {
        border-radius: 1rem;
        padding: .75rem 1rem;
    }

    .bubble.me {
        background: #79f5bdff;
        padding-bottom: 28px;
        border-top-right-radius: 0;
    }

    .bubble.other {
        background: #ffffff;
        width: auto;
        max-width: 100%;
        padding-bottom: 28px;
        border-top-left-radius: 0;
    }

    .msg-meta {
        font-size: .75rem;
        color: #6c757d;
        display: flex;
        align-items: center;
        margin-top: -31px;
        padding-left: 1rem;
    }

    .reply-preview {
        border-left: 3px solid #0d6efd;
        padding-left: .5rem;
        margin-bottom: .35rem;
        background: #00800082;
        padding: 5px;
        border-radius: 4px;
    }

    .bar-send{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .br-5{
        border-radius: 5px;
        padding: 1rem 1rem 1rem 1rem;
        margin-inline: .75rem;
    }

    .mi-5{
        margin-inline: .75rem !important;
    }

    .tc{
        text-align: center;
    }

    .chat-container {
        display: flex;
        height: 100vh; /* ocupa a tela toda */
    }

    .chat-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: transparent;
        backdrop-filter: blur(2px);
    }

    .file-thumb {
        max-width: 100%;
        max-height: 300px;
    }

    .pointer {
        cursor: pointer;
    }

    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .ml-5 {
        margin-left: 5px;
    }

    .mr-5 {
        margin-right: 5px;
    }