/* Mobile Frame Resize Styles */

/* Сенсорная полоса для изменения размера фреймов на мобильных устройствах */
.mobile-resize-handle {
    position: absolute;
    background: linear-gradient(to bottom, #f0f0f0, #d0d0d0);
    border: 1px solid #b0b0b0;
    border-radius: 3px;
    z-index: 1000;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none;
    display: none; /* Показываем только на мобильных */
}

/* Горизонтальная полоса (для изменения высоты чата) */
.mobile-resize-handle.horizontal {
    width: 100%;
    height: 12px; /* Уменьшили с 25px до 12px */
    cursor: ns-resize;
    border-left: none;
    border-right: none;
    background: linear-gradient(to bottom, #f5f5f5, #e5e5e5);
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
}

/* Вертикальная полоса (для изменения ширины онлайн-списка) */
.mobile-resize-handle.vertical {
    width: 25px;
    height: 100%;
    cursor: ew-resize;
    border-top: none;
    border-bottom: none;
}

/* Визуальные индикаторы на полосе */
.mobile-resize-handle::before {
    content: '';
    position: absolute;
    background: #888;
    border-radius: 1px;
}

/* Точки для горизонтальной полосы */
.mobile-resize-handle.horizontal::before {
    width: 20px; /* Уменьшили с 30px */
    height: 2px; /* Уменьшили с 3px */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 -3px 0 #888, 0 3px 0 #888; /* Уменьшили отступы с 6px до 3px */
}

/* Точки для вертикальной полосы */
.mobile-resize-handle.vertical::before {
    width: 3px;
    height: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: -6px 0 0 #888, 6px 0 0 #888;
}

/* Активное состояние при перетаскивании */
.mobile-resize-handle.active {
    background: linear-gradient(to bottom, #e0e0e0, #c0c0c0);
    border-color: #999;
}

.mobile-resize-handle.active::before {
    background: #666;
    box-shadow: 0 -3px 0 #666, 0 3px 0 #666; /* Обновили отступы */
}

.mobile-resize-handle.vertical.active::before {
    background: #666;
    box-shadow: -6px 0 0 #666, 6px 0 0 #666;
}

/* Кнопки быстрого доступа */
.mobile-resize-buttons {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1001;
    display: none; /* Показываем только на мобильных */
}

.mobile-resize-button {
    width: 30px;
    height: 20px;
    margin-left: 2px;
    background: linear-gradient(to bottom, #f8f8f8, #e8e8e8);
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 10px;
    color: #666;
    cursor: pointer;
    text-align: center;
    line-height: 18px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    display: inline-block;
}

.mobile-resize-button:active {
    background: linear-gradient(to bottom, #e0e0e0, #d0d0d0);
    border-color: #999;
}

.mobile-resize-button.active {
    background: linear-gradient(to bottom, #d0d0f0, #b0b0e0);
    border-color: #8080c0;
    color: #333;
}

/* Показываем элементы только на touch-устройствах */
@media (pointer: coarse) {
    .mobile-resize-handle,
    .mobile-resize-buttons {
        display: block;
    }
}

/* Дополнительно для небольших экранов */
@media screen and (max-width: 768px) {
    .mobile-resize-handle,
    .mobile-resize-buttons {
        display: block;
    }
}

/* Анимации для плавного изменения размеров */
.frame-transition {
    transition: all 0.2s ease-out;
}

/* Стили для предварительного просмотра */
.resize-preview {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 1002;
    display: none;
}