/* ════════════════════════════════════════════════════════════════════════════
   LOHMIA SIDEBAR MOBILE OPTIMIZATION v1.0
   Optimiza márgenes y espaciado para mejor uso del espacio en móvil
   ════════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {

    /* ============================================
       CONTENEDOR PRINCIPAL DEL SIDEBAR
       ============================================ */
    #sidebarItemsList {
        padding: 4px !important;
        gap: 2px !important;
    }

    /* ============================================
       SECCIÓN HEADER (Infraestructuras, Proyectos, Chats)
       ============================================ */
    .sidebar-section-header {
        padding: 10px 12px !important;
        margin-bottom: 2px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    .sidebar-section-header.active {
        padding: 10px 12px !important;
    }

    /* ============================================
       INFRASTRUCTURE HEADER
       ============================================ */
    .infrastructure-header {
        padding: 10px 12px !important;
        margin: 2px 0 !important;
        border-radius: 8px !important;
        min-height: 40px !important;
    }

    .infrastructure-header .infrastructure-icon {
        width: 20px !important;
        height: 20px !important;
        margin-right: 8px !important;
        flex-shrink: 0 !important;
    }

    .infrastructure-header .infrastructure-name {
        font-size: 13px !important;
        flex: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* ============================================
       PROJECT ITEM - REDUCIR MARGEN IZQUIERDO
       ============================================ */
    .project-item {
        margin-left: 8px !important;  /* Reducido de 16px */
        padding-left: 8px !important; /* Reducido de 12px */
        border-left: 2px solid rgba(74, 144, 226, 0.2) !important;
    }

    .project-item.expanded {
        margin-left: 8px !important;
        padding-left: 8px !important;
    }

    .project-header {
        padding: 8px 10px !important;
        min-height: 36px !important;
        border-radius: 6px !important;
    }

    .project-header .project-icon {
        width: 18px !important;
        height: 18px !important;
        margin-right: 6px !important;
    }

    .project-header .project-name {
        font-size: 12px !important;
        flex: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* ============================================
       CHAT ITEM - REDUCIR MÁRGENES ANIDADOS
       ============================================ */
    .chat-item {
        padding: 8px 10px !important;
        margin: 2px 0 !important;
        border-radius: 6px !important;
        min-height: 36px !important;
    }

    /* Chats directos (no anidados) */
    .chat-item:not(.nested-1):not(.nested-2) {
        margin-left: 0 !important;
    }

    /* Nivel 1: Chat dentro de proyecto */
    .chat-item.nested-1 {
        margin-left: 12px !important;  /* Reducido significativamente */
        padding-left: 8px !important;
        border-left: 2px solid rgba(74, 144, 226, 0.15) !important;
    }

    /* Nivel 2: Chat dentro de proyecto dentro de infraestructura */
    .chat-item.nested-2 {
        margin-left: 16px !important;  /* Reducido de 48px */
        padding-left: 8px !important;
        border-left: 2px solid rgba(74, 144, 226, 0.1) !important;
    }

    .chat-item .chat-icon {
        width: 18px !important;
        height: 18px !important;
        margin-right: 6px !important;
        flex-shrink: 0 !important;
    }

    .chat-item .chat-title {
        font-size: 12px !important;
        flex: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: calc(100% - 30px) !important;
    }

    /* ============================================
       CHILDREN CONTAINERS
       ============================================ */
    .project-children,
    .infrastructure-children {
        padding-left: 0 !important;
        margin-left: 4px !important;
    }

    /* ============================================
       ICONOS Y ACCIONES
       ============================================ */
    .item-actions,
    .chat-actions,
    .project-actions {
        gap: 2px !important;
    }

    .item-actions button,
    .chat-actions button,
    .project-actions button {
        width: 24px !important;
        height: 24px !important;
        padding: 4px !important;
    }

    .expand-icon,
    .project-expand-icon,
    .infrastructure-expand {
        width: 16px !important;
        height: 16px !important;
        margin-right: 4px !important;
    }

    /* ============================================
       DRAG HANDLES - Compactos en móvil
       ============================================ */
    .chat-drag-handle,
    .project-drag-handle,
    .infrastructure-drag-handle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        padding: 4px !important;
        margin-right: 4px !important;
        color: #64748b !important;
        opacity: 0.6 !important;
        cursor: grab !important;
        border-radius: 4px !important;
        background: rgba(74, 144, 226, 0.05) !important;
        touch-action: none !important; /* Crítico para touch drag */
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    .chat-drag-handle:active,
    .project-drag-handle:active,
    .infrastructure-drag-handle:active {
        opacity: 1 !important;
        background: rgba(74, 144, 226, 0.15) !important;
        cursor: grabbing !important;
    }

    .chat-drag-handle svg,
    .project-drag-handle svg,
    .infrastructure-drag-handle svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Sortable estados táctiles */
    .sortable-ghost {
        opacity: 0.4 !important;
        background: rgba(74, 144, 226, 0.2) !important;
    }

    .sortable-chosen {
        background: rgba(74, 144, 226, 0.15) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    .sortable-drag {
        opacity: 0.9 !important;
        transform: scale(1.02) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    }

    /* ============================================
       BADGES Y CONTADORES
       ============================================ */
    .collab-badge,
    .unread-badge {
        font-size: 10px !important;
        padding: 2px 5px !important;
        min-width: 16px !important;
    }

    /* ============================================
       HOVER STATES - Más sutiles en móvil
       ============================================ */
    .infrastructure-header:active,
    .project-header:active,
    .chat-item:active {
        background: rgba(74, 144, 226, 0.15) !important;
        transform: scale(0.98) !important;
    }

    /* ============================================
       ACTIVE STATES
       ============================================ */
    .chat-item.active {
        background: linear-gradient(135deg,
            rgba(74, 144, 226, 0.2) 0%,
            rgba(74, 144, 226, 0.1) 100%) !important;
        border-left-color: #4A90E2 !important;
    }

    .chat-item.active .chat-title {
        color: #fff !important;
        font-weight: 500 !important;
    }

    /* ============================================
       EMPTY STATES
       ============================================ */
    .empty-section-message {
        font-size: 11px !important;
        padding: 8px !important;
        color: #64748b !important;
    }
}

/* ============================================
   PANTALLAS MUY PEQUEÑAS (<375px)
   ============================================ */
@media screen and (max-width: 375px) {
    #sidebarItemsList {
        padding: 2px !important;
    }

    .sidebar-section-header {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    .infrastructure-header {
        padding: 8px 10px !important;
    }

    .project-item {
        margin-left: 6px !important;
        padding-left: 6px !important;
    }

    .chat-item.nested-1 {
        margin-left: 8px !important;
    }

    .chat-item.nested-2 {
        margin-left: 12px !important;
    }

    .chat-item .chat-title,
    .project-header .project-name,
    .infrastructure-header .infrastructure-name {
        font-size: 11px !important;
    }
}

/* ============================================
   DESKTOP DRAG HANDLES
   ============================================ */
@media screen and (min-width: 769px) {
    .chat-drag-handle,
    .project-drag-handle,
    .infrastructure-drag-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        min-width: 20px;
        padding: 2px;
        margin-right: 6px;
        color: #64748b;
        opacity: 0.4;
        cursor: grab;
        border-radius: 4px;
        transition: opacity 0.2s, background 0.2s;
    }

    .chat-item:hover .chat-drag-handle,
    .project-item:hover .project-drag-handle,
    .infrastructure-item:hover .infrastructure-drag-handle {
        opacity: 0.8;
        background: rgba(74, 144, 226, 0.1);
    }

    .chat-drag-handle:hover,
    .project-drag-handle:hover,
    .infrastructure-drag-handle:hover {
        opacity: 1;
        background: rgba(74, 144, 226, 0.15);
    }

    .chat-drag-handle:active,
    .project-drag-handle:active,
    .infrastructure-drag-handle:active {
        cursor: grabbing;
        background: rgba(74, 144, 226, 0.2);
    }

    .chat-drag-handle svg,
    .project-drag-handle svg,
    .infrastructure-drag-handle svg {
        width: 14px;
        height: 14px;
        pointer-events: none;
    }
}