/* Compact User drawer: mobile/tablet only. Desktop keeps the existing 270px sidebar. */
@media (max-width: 1199px) {
    body.user-panel .sidebar {
        width: 58vw;
        max-width: 58vw;
        min-width: 0;
    }
    body.user-panel .sidebar-logo {
        padding-left: 12px;
        padding-right: 42px;
    }
    body.user-panel .sidebar-logo img { max-width: 132px; }
    body.user-panel .sidebar-menu-area { padding-left: 14px; padding-right: 14px; }
    body.user-panel .sidebar-menu li a,
    body.user-panel .sidebar-menu li.dropdown > a {
        display: grid;
        grid-template-columns: 27px minmax(0, 1fr) 16px;
        align-items: center;
        column-gap: 6px;
        width: 100%;
        min-width: 0;
        padding: 8px 2px;
        white-space: nowrap;
        font-size: 16px;
    }
    body.user-panel .sidebar-menu li a .menu-icon,
    body.user-panel .sidebar-menu li.dropdown > a > .menu-icon {
        grid-column: 1;
        width: 27px;
        height: 27px;
        flex: none;
        min-width: 0;
    }
    body.user-panel .sidebar-menu li a > span,
    body.user-panel .sidebar-menu li a > strong {
        grid-column: 2;
        min-width: 0;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
        line-height: 1.3;
    }
    body.user-panel .sidebar-menu li.dropdown > a::after {
        position: static;
        grid-column: 3;
        justify-self: center;
        width: 7px;
        height: 7px;
        margin: 0;
        transform: rotate(-45deg);
    }
    body.user-panel .sidebar-menu li.dropdown > a[aria-expanded="true"]::after { transform: rotate(45deg); }
    body.user-panel .sidebar-menu .user-menu-badge {
        grid-column: auto;
        justify-self: start;
        margin-left: 8px;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        width: max-content;
        display: inline-flex;
        flex: 0 0 auto;
    }
    body.user-panel .sidebar-menu a.has-new-badge {
        display: flex;
        align-items: center;
        gap: 0;
    }
    body.user-panel .sidebar-menu a.has-new-badge > span:first-of-type {
        flex: 0 1 auto;
        width: auto;
    }
    body.user-panel .sidebar-menu a.has-new-badge > .user-menu-badge {
        flex: 0 0 auto;
        margin-left: 8px;
    }
    body.user-panel .sidebar-menu .sidebar-submenu { margin-left: 20px; padding-left: 8px; }
    body.user-panel .sidebar-menu .sidebar-submenu li a {
        grid-template-columns: 22px minmax(0, 1fr);
        column-gap: 5px;
        white-space: nowrap;
        font-size: 14px;
    }
    body.user-panel .sidebar-menu .sidebar-submenu li a > span,
    body.user-panel .sidebar-menu .sidebar-submenu li a > span > strong,
    body.user-panel .sidebar-menu .sidebar-submenu li a > strong {
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        word-break: keep-all;
        overflow-wrap: normal;
        font-size: 14px;
        line-height: 1.25;
    }
    body.user-panel .sidebar-menu .sidebar-submenu li a {
        width: max-content;
        min-width: 100%;
    }
    body.user-panel .sidebar-menu .sidebar-submenu li a .menu-icon { width: 25px; height: 25px; }
    body.user-panel .user-menu-section { margin-left: 6px; margin-right: 6px; font-size: 10px; }
    body.user-panel .sidebar-close-btn { right: 8px; width: 30px; height: 30px; }
}
@media (max-width: 359px) { body.user-panel .sidebar { width: 58vw; max-width: 58vw; } }