/* responsive.css - Планшеты и десктопы (769px и выше) */

/* ==================== ПЛАНШЕТЫ (769px - 1023px) ==================== */
@media (min-width: 769px) and (max-width: 1023px) {
    .sidebar-nav-container {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 72px;
        transition: width var(--transition-normal);
        overflow: hidden;
        z-index: 100;
    }

    .sidebar-nav-container.active {
        width: 240px;
    }

    .sidebar-nav-container .nav-item span {
        display: none;
    }

    .sidebar-nav-container.active .nav-item span {
        display: inline;
    }

    .sidebar-content-container {
        position: absolute;
        left: 72px;
        top: 0;
        bottom: 0;
        width: 350px;
        z-index: 90;
        transform: translateX(-100%);
    }

    .sidebar-content-container.active {
        transform: translateX(0);
    }

    .chat-area {
        margin-left: 72px;
        transition: margin-left var(--transition-normal);
    }

    .right-panel {
        position: fixed;
        right: -280px;
        top: var(--header-height);
        bottom: 0;
        width: var(--right-panel-width);
        z-index: 160;
        transition: right var(--transition-normal);
    }

    .right-panel.active {
        right: 0;
    }

    .overlay {
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-normal);
    }

    .overlay.active {
        opacity: 0.3;
        pointer-events: auto;
    }

    .mobile-nav {
        display: none;
    }

    .menu-toggle {
        display: block;
        z-index: 200;
    }
}

/* ==================== ДЕСКТОПЫ (1024px и выше) ==================== */
@media (min-width: 1024px) {
    .app-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        box-shadow: var(--shadow-xl);
        border-left: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
        border-radius: var(--border-radius-lg);
        overflow: hidden;
        min-height: 100vh;
    }

    body {
        background: #f0f2f5;
    }

    [data-theme="dark"] body {
        background: #0f1419;
    }

    .sidebar-nav-container {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 72px;
        transition: width var(--transition-normal);
        z-index: 100;
    }

    .sidebar-nav-container.active {
        width: 240px;
    }

    .sidebar-nav-container .nav-item span {
        display: none;
    }

    .sidebar-nav-container.active .nav-item span {
        display: inline;
    }

    .sidebar-content-container {
        position: absolute;
        left: 72px;
        top: 0;
        bottom: 0;
        width: var(--sidebar-width);
        z-index: 90;
        transform: translateX(-100%);
    }

    .sidebar-content-container.active {
        transform: translateX(0);
    }

    .chat-area {
        margin-left: 72px;
        transition: margin-left var(--transition-normal);
    }

    .right-panel {
        position: fixed;
        right: -280px;
        top: var(--header-height);
        bottom: 0;
        width: var(--right-panel-width);
        z-index: 160;
        transition: right var(--transition-normal);
    }

    .right-panel.active {
        right: 0;
    }

    .overlay {
        display: block;
        opacity: 0;
        pointer-events: none;
    }

    .overlay.active {
        opacity: 0.3;
        pointer-events: auto;
    }

    .mobile-nav {
        display: none;
    }

    .menu-toggle {
        display: block;
        z-index: 200;
    }

    .dropdown-menu {
        position: absolute;
        top: calc(100% + 0.5rem);
        right: 0;
        width: 280px;
        background: var(--bg-primary);
        border-radius: var(--border-radius);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-xl);
        z-index: 1002;
        display: none;
    }

    .dropdown-menu.active {
        display: block;
        animation: slideDown var(--transition-normal);
    }

    .user-menu {
        position: relative;
        z-index: 1001;
    }
}

/* ==================== ОЧЕНЬ ШИРОКИЕ ЭКРАНЫ (1600px и выше) ==================== */
@media (min-width: 1600px) {
    .app-wrapper {
        max-width: 1400px;
    }

    .sidebar-content-container {
        width: 450px;
    }
}