@import url('style.css');
@import url('chat_modules.css');
@layer legacy {
    .wrapper {
        display: grid;
        grid-template-columns: auto 1fr;

        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }


    .main-sidebar {
        display: flex !important;
        height: 100% !important;
        flex-direction: column !important;
        background-color: var(--background-main) !important;
    }

    .sidebar-btn {
        width: 80%;
        display: flex;
        justify-content: center;

        &.sidebar-btn-profile {
            padding: 0;
        }
    }

    .sidebar-btn.active .fill-svg {
        fill: var(--accent-color);
        stroke: none;
    }

    .sidebar-btn.active svg:not(.fill-svg) {
        fill: none;
        stroke: var(--accent-color);
    }

    .profile-icon {
        width: 1.8rem;
        height: 1.8rem;
    }


    .sidebar-content {
        display: grid;
        grid-template-rows: 1fr auto;
        row-gap: 2rem;
        box-sizing: border-box;
        border-right: var(--border-stroke-thin);
        width: 4rem;
        height: 100%;

        padding-top: 2rem;
        padding-bottom: 2rem;
        z-index: 1;

        @media (max-width: 768px) {
            width: 3rem;
        }
    }

    .sidebar-content .upper-panel,
    .sidebar-content .lower-panel {
        display: flex;
        flex-direction: column;
        row-gap: 2rem;
        align-items: center;
    }

    .sidebar-content button {
        position: relative;
    }


    .main {
        position: relative;
        display: block;
        box-sizing: border-box;
        flex: 1;


    }


    .main-panel-grid {
        display: grid;
        grid-template-columns: auto 1fr;
        height: 100%;
    }


    .profile-container {
        margin: 0 auto;
        max-width: 50rem;
    }

    .userinfo-row {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 2rem;

        @media (max-width: 768px) {
            grid-template-columns: 1fr;
            row-gap: 2rem;
        }
    }

    .chat-name-panel {
        position: relative;
        width: fit-content;
        padding-right: 1rem;
    }

    .avatar-editable {
        position: relative;
        display: flex;
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
        overflow: hidden;
        background-color: rgb(255, 255, 255);
        justify-content: center;
        align-items: center;
        border: var(--border-stroke-thin);
    }

    .avatar-editable .selectable-image {
        width: 6.2rem;
        height: 6.2rem;
        margin: 0 -1px;
    }

    .avatar-editable .edit {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 10;
        background-color: rgba(1, 1, 1, .5);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(3px);

    }

    .avatar-editable:hover .edit {
        opacity: 1;

    }

    #access-token-chart tr {
        display: grid;
        grid-template-columns: 3rem 1fr auto;
        margin: 1rem 0;
        text-align: left;
    }

    #newAccessTokenName {
        display: none;
    }

    #session-expiry-modal .modal-content {
        padding: 2rem 0;
        align-items: center !important;
    }

    #file-viewer-modal .closeButton {
        right: 1.5rem !important;
        top: 1.5rem !important;
    }

    /* #file-preview-container{
        display: flex;
        justify-content: center;
    } */
    #file-scroll-container {
        margin-right: 3px;
        margin-left: 10px;
        margin-top: 2.5rem;
        margin-bottom: 2rem;
        padding: 0 3rem !important;
        align-content: center;
    }

    #file-viewer-modal .image-preview {
        width: 100%;
        max-width: 100%;
        max-height: 80vh;
        object-fit: contain; /* Ensures image is scaled to fit and maintains aspect ratio */
        display: block;
    }
}