/* ============================================
   СТИЛИ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (ширина ≤ 768px)
   ============================================ */

@media (max-width: 1200px) {
    /* CSS переменные */
    :root {
        --button-height: 40px;
        --vertical-gap: 5px;
    }

    html, body {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    
    /* ===== СКРЫТИЕ ДЕСКТОПНЫХ ЭЛЕМЕНТОВ ===== */
    .desktop-layout,
    .desktop-map-button {
        display: none !important;
    }
    
    /* ===== МОБИЛЬНЫЙ LAYOUT ===== */
    .mobile-layout {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto !important;
        background-color: var(--color-bg-overlay);
    }
    
    .mobile-layout h1 {
        font-size: 24px;
        margin: 5px 0 10px 0;
        color: var(--color-primary-light);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    
    .mobile-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100%;
        padding: 5px;
        padding-bottom: 5px;
        box-sizing: border-box;
        gap: 5px;
    }
    
    .mobile-section {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .top-section { flex: 0 0 auto; }
    .middle-section { flex: 1 1 auto; min-height: 300px !important; overflow: hidden !important; }
    .bottom-section { flex: 0 0 auto; }
    
    .mobile-content {
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
        text-align: center;
    }
    
    /* ===== КАРТА ===== */
    .world-map {
        max-width: 350px;
        max-height: 350px;
        min-width: 250px;
        min-height: 250px;
        aspect-ratio: 1/1;
        display: block;
        margin: 0 auto;
    }
    
    .middle-section .mobile-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: 100%;
    }
    
    .middle-section .input-label-mobile {
        color: var(--color-text-on-primary);
        font-size: 14px;
        display: block;
        margin-bottom: 5px;
        flex-shrink: 0;
    }
    
    .middle-section .map-hint {
        color: var(--color-text-light);
        font-size: 10px;
        text-align: center;
        margin-top: 5px;
        flex-shrink: 0;
    }
    
    .start-button-mobile {
        margin-bottom: 0 !important;
    }
    
    
    
    /* ===== ЧАТ ===== */
    #chat-container {
        width: calc(100% - 20px);
        left: 50%;
        transform: translateX(-50%);
        bottom: 70px;
        max-height: 75vh;
        overflow-y: auto;
    }
    
    #chat-buttons-container {
        position: fixed;
        bottom: 10px;
        right: 63px;
    }
    /* ===== КОНТЕЙНЕР КАРТЫ ===== */
    #map-viewer-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--color-bg-overlay);
        backdrop-filter: blur(5px);
        z-index: 20000;
        display: none;
        padding: 10px;
        box-sizing: border-box;
    }
    
    #map-viewer-container .map-viewer-title {
        margin: 10px 0;
        font-size: 20px;
        color: var(--color-primary-light);
    }
    
    #map-viewer-container .map-viewer-canvas {
        /* === Карта занимает весь экран === */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 0;
        background-color: var(--color-paper);
        margin: 0;
        /* === Canvas под кнопками === */
        z-index: 20001;
    }
    
    /* Скрываем карту при открытом меню */
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-canvas,
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-title {
        display: none !important;
    }
    
    /* ===== ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ КРУГЛЫХ КНОПОК ===== */
    .mobile-map-button,
    .map-viewer-close-button,
    .map-viewer-menu-button,
    .cube-button,
    .swap-button {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        border-radius: 50% !important;
        border: 3px solid var(--color-primary) !important;
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer;
        pointer-events: auto !important;
        touch-action: manipulation;
    }
    
    /* Иконки во всех круглых кнопках */
    .mobile-map-button .map-icon,
    .map-viewer-close-button .close-icon,
    .map-viewer-menu-button .menu-icon,
    .map-viewer-build-button .build-icon,
    .cube-button .cube-icon,
    .swap-button .swap-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    .build-icon {
        width: 28px !important;
        height: 28px !important;
        color: var(--color-primary-light);
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
        transition: all 0.2s ease;
    }
    
    /* ===== ПОЗИЦИОНИРОВАНИЕ КРУГЛЫХ КНОПОК ===== */
    .mobile-map-button {
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 10000;
    }

    /* === Круглая кнопка-подсказка «Вверх» над кнопкой Карта ===
       Появляется при касании кнопки Карта в базовом режиме.
       pointer-events: none — не перехватывает клики, только подсказка. */
    .mobile-map-up-hint {
        position: fixed;
        bottom: 68px;         /* 10px выше кнопки Карта */
        right: 10px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 3px solid var(--color-primary);
        background-color: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        display: none;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        z-index: 9999;
        color: var(--color-primary-light);
        opacity: 0;
        transition: opacity 0.15s ease;
        box-sizing: border-box;
    }

    .mobile-map-up-hint svg {
        width: 28px;
        height: 28px;
        color: var(--color-primary-light);
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
    }
    
    .map-viewer-close-button {
        position: fixed !important;
        bottom: 10px !important;
        right: 10px !important;
        left: auto !important;
        top: auto !important;
        z-index: 21002;
    }
    
    .map-viewer-menu-button {
        position: fixed !important;
        top: 68px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 21002;
        display: none !important;
    }

    .map-viewer-menu-button[style*="display: flex"] {
        display: flex !important;
    }
    
    .map-viewer-build-button {
        position: fixed !important;
        bottom: 68px !important;
        right: 10px !important;
        left: auto !important;
        z-index: 21002;
    }

    
    .map-viewer-build-button.active {
        background-color: rgba(122, 143, 174, 0.7) !important;
        border-color: #9ac9e9 !important;
        box-shadow: 0 0 15px rgba(122, 143, 174, 0.5) !important;
    }
    
    .map-viewer-map-button {
        display: none !important;
    }
    
    /* ===== ПРЯМОУГОЛЬНЫЕ КНОПКИ МЕНЮ ===== */
    .map-viewer-standard-button {
        position: fixed !important;
        height: var(--button-height) !important;
        min-height: var(--button-height) !important;
        background-color: rgba(0, 0, 0, 0.85) !important;
        border: 2px solid var(--color-primary) !important;
        border-radius: 8px !important;
        color: var(--color-primary-light) !important;
        font-weight: bold;
        font-size: 12px;
        backdrop-filter: blur(8px);
        display: none;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 5px;
        z-index: 21000;
        pointer-events: auto !important;
        touch-action: manipulation;
        cursor: pointer;
    }
    
    .map-viewer-standard-button:active {
        background-color: rgba(122, 143, 174, 0.5) !important;
        transform: scale(0.98);
    }
    
    /* ===== БЛОКИ НАСТРОЕК ===== */
    .map-viewer-debug-container {
        position: fixed !important;
        height: var(--button-height) !important;
        min-height: var(--button-height) !important;
        background-color: rgba(0, 0, 0, 0.85) !important;
        border: 2px solid var(--color-primary) !important;
        border-radius: 8px !important;
        backdrop-filter: blur(8px);
        display: none;
        align-items: center;
        padding: 0 10px;
        z-index: 21000;
    }
    
    .map-viewer-worldsize-container,
    .map-viewer-visibility-container {
        position: fixed !important;
        background-color: rgba(0, 0, 0, 0.85) !important;
        border: 2px solid var(--color-primary) !important;
        border-radius: 8px !important;
        backdrop-filter: blur(8px);
        display: none;
        flex-direction: column;
        padding: 8px 10px;
        z-index: 21000;
        font-size: 11px;
    }
    
    /* ===== ПОКАЗ ЭЛЕМЕНТОВ ПРИ ОТКРЫТОМ МЕНЮ ===== */
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-standard-button,
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-debug-container,
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-worldsize-container,
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-visibility-container {
        display: flex !important;
    }
    
    /* ===== ПОЗИЦИОНИРОВАНИЕ - ПЕРВАЯ КОЛОНКА ===== */
    
    /* ===== ПОЗИЦИОНИРОВАНИЕ - ВТОРАЯ КОЛОНКА ===== */
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-add-model-button {
        left: calc(20% + 7px) !important;
        right: 5px !important;
        width: auto !important;
        top: 55px !important;
        z-index: 21200 !important;
    }
    
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-add-object-button {
        left: calc(20% + 7px) !important;
        right: 5px !important;
        width: auto !important;
        top: 100px !important;
        z-index: 21200 !important;
    }
    
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-objects-button {
        left: calc(20% + 7px) !important;
        right: 5px !important;
        width: auto !important;
        top: 145px !important;
        z-index: 21200 !important;
    }
    
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-delete-all-button {
        left: calc(20% + 7px) !important;
        right: 5px !important;
        width: auto !important;
        top: 190px !important;
        z-index: 21200 !important;
    }
    
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-debug-container {
        left: calc(20% + 7px) !important;
        right: 5px !important;
        width: auto !important;
        top: 235px !important;
    }
    
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-worldsize-container {
        left: calc(20% + 7px) !important;
        right: 5px !important;
        width: auto !important;
        top: 280px !important;
        z-index: 21100 !important;
    }
    
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-visibility-container {
        left: calc(20% + 7px) !important;
        right: 5px !important;
        width: auto !important;
        top: 430px !important;
        z-index: 21100 !important;
    }
    
    /* Ширина кнопок второй колонки */
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-add-model-button,
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-add-object-button,
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-objects-button,
    #map-viewer-container[data-mobile-menu-open="true"] .map-viewer-delete-all-button {
        left: calc(20% + 7px) !important;
        right: 5px !important;
        width: auto !important;
    }
    
    
    /* ===== СТИЛИ ДЛЯ СОДЕРЖИМОГО БЛОКОВ ===== */
    .map-viewer-debug-container label {
        color: var(--color-primary-light);
        font-size: 11px;
        cursor: pointer;
    }
    
    .map-viewer-debug-container input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        accent-color: var(--color-primary);
    }
    
    .map-viewer-worldsize-container input,
    .map-viewer-visibility-container input {
        width: 40px !important;
        padding: 3px !important;
        font-size: 11px !important;
        background-color: rgba(30, 30, 30, 0.9);
        border: 1px solid var(--color-primary);
        border-radius: 4px;
        color: var(--color-primary-light);
        text-align: center;
    }
    
    .map-viewer-worldsize-container button,
    .map-viewer-visibility-container button {
        padding: 5px 8px !important;
        font-size: 11px !important;
        min-height: 28px !important;
        margin-top: 5px;
        background-color: rgba(122, 143, 174, 0.25);
        border: 1px solid var(--color-primary);
        border-radius: 6px;
        color: var(--color-primary-light);
        font-weight: bold;
    }
    
    .map-viewer-worldsize-container > div:first-child,
    .map-viewer-visibility-container > div:first-child {
        color: var(--color-primary-light);
        font-size: 11px !important;
        font-weight: bold;
        margin-bottom: 5px;
        text-align: center;
        border-bottom: 1px solid var(--color-primary);
        padding-bottom: 3px;
    }
    
    
    /* ===== КНОПКА "УДАЛИТЬ ВСЕ" ===== */
    .map-viewer-delete-all-button {
        border-color: #d32f2f !important;
        color: #ff8888 !important;
    }
    
    
    /* Заполнение безопасной зоны на iPhone X+ */
    @supports (padding: env(safe-area-inset-bottom)) {
        body {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
    
    /* Кнопки Куб и Менять - скрыты по умолчанию */
    .add-object-button,
    .cube-button,
    .swap-button {
        display: none !important;
    }

    /* Показываем только в режиме строительства */
    .add-object-button.visible,
    .cube-button.visible,
    .swap-button.visible {
        display: flex !important;
    }
    

    .cube-button {
        position: fixed;
        bottom: 10px;
        left: 68px;
        z-index: 10000;
    }
    
    .swap-button {
        position: fixed;
        bottom: 10px;
        left: 126px;
        z-index: 10000;
    }
    
    .delete-object-button {
        position: fixed;
        bottom: 68px;
        right: 10px;
        z-index: 10000;
    }
    
    /* ===== КРУГЛАЯ КНОПКА "ВЫЙТИ" ===== */
    .map-viewer-exit-round-button {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.3);
        border: 3px solid var(--color-primary);
        color: var(--color-primary-light);
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        z-index: 21002;
        pointer-events: auto;
        transition: all 0.2s ease;
        backdrop-filter: blur(5px);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        touch-action: manipulation;
    }

    .map-viewer-exit-round-button:hover {
        background-color: rgba(122, 143, 174, 0.3);
        transform: scale(1.1);
    }

    .map-viewer-exit-round-button:active {
        transform: scale(0.95);
        background-color: rgba(122, 143, 174, 0.5);
    }

    .exit-round-icon {
        width: 28px;
        height: 28px;
        color: var(--color-primary-light);
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
        transition: all 0.2s ease;
    }

    .map-viewer-exit-round-button:hover .exit-round-icon {
        transform: scale(1.1);
        color: var(--color-primary);
    }
    

    /* Кнопка Инструкции - левый верхний угол (мобильные) */
    .map-viewer-instructions-button {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 21002;
    }
    
    /* ===== РЕДАКТОР ФОРМЫ (МОБИЛЬНЫЕ) ===== */
    
    .shape-type-preview {
        width: 32px;
        height: 32px;
    }
    
    .shape-size-label {
        font-size: 13px !important;
    }
    
    .shape-size-input {
        width: 66px !important;
        padding: 4px 5px !important;
        font-size: 18px !important;
    }
    
    .shape-arrow-btn {
        padding: 7px 9px !important;
        font-size: 14px !important;
    }
    
    .shape-size-label {
        font-size: 18px !important;
    }

    /* Контейнер инструкций на мобильных:
       размеры наследуются из common.css (full-screen, z-index: 20050).
       Кнопки карты остаются поверх окна инструкций. */
    .map-viewer-instructions-container {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
    }

    .instruction-item {
        padding: 14px 16px;
        font-size: 16px;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .shape-size-block {
        flex-direction: row !important;
        justify-content: space-around !important;
        gap: 10px !important;
    }
    
    .shape-size-input-row {
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* Кнопка Обратная связь - левый верхний угол (мобильные) */
.map-viewer-feedback-button {
    position: fixed !important;
    top: 68px !important;  /* Под кнопкой Инструкции */
    left: 10px !important;
    z-index: 21002;
}

.map-viewer-feedback-button.active {
    top: 10px !important;
}

/* ===== АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ ===== */

@media (max-width: 768px) {
    /* Контейнер обратной связи на мобильных: размеры наследуются
       из common.css (full-screen, z-index: 20050). Оставляем только
       padding и overflow — для удобства на маленьких экранах. */
    .map-viewer-feedback-container {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        min-height: 0;
        padding: 15px 18px;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Состояние с открытой клавиатурой: сохраняем поведение,
       но не ограничиваем высоту — она уже 100%. */
    .map-viewer-feedback-container.keyboard-open {
        max-height: none !important;
        min-height: 0 !important;
        padding-bottom: 20px;
        overflow-y: auto !important;
    }

    /* Заголовок */
    .feedback-title {
        font-size: 20px;
        margin-bottom: 12px;
        padding-bottom: 8px;
        flex-shrink: 0;
    }

    /* Категория */
    .feedback-category-wrapper {
        flex-shrink: 0;
        margin-bottom: 10px;
    }

    /* Метки */
    .feedback-label {
        font-size: 14px;
    }

    /* Выпадающий список */
    #feedback-category {
        font-size: 15px;
        padding: 9px 12px;
    }

    /* Текстовое поле */

    .feedback-textarea-wrapper {
        /* Не даём блоку сжиматься ниже 3 строк textarea.
           В альбоме мобильного при открытой клавиатуре это гарантирует,
           что textarea не будет обрезана, а следующий блок (кнопка
           "Отправить") окажется ниже — пользователь сможет прокрутить окно.
           min-height рассчитывается как:
             label (~27px) + textarea-min-height (97px) + отступ (6px) ≈ 130px. */
        flex: 0 0 auto;
        min-height: 130px;     /* 3 строки textarea + label */
        max-height: none;      /* без верхнего ограничения — пусть растёт по контенту */
        margin-bottom: 6px;
        overflow: visible;     /* не обрезаем textarea */
    }

    #feedback-textarea {
        font-size: 16px;
        padding: 10px 12px;
        /* 3 строки при line-height 1.6 × 16px = 76.8px контента + 20px padding ≈ 97px */
        min-height: 97px;
        max-height: 150px;
        box-sizing: border-box;
    }

    /* Кнопка "Отправить" */
    .feedback-send-wrapper {
        flex-shrink: 0;
        margin-bottom: 8px;
        width: 100%;
    }

    .feedback-send-button {
        font-size: 15px;
        padding: 10px 16px;
    }

    /* Список обращений */
    .feedback-list-container {
        flex: 1 1 auto;
        min-height: 50px;
        max-height: 200px;
        overflow-y: auto !important;
        margin-top: 3px;
        padding-top: 6px;
    }

    /* Элементы списка */
    .feedback-list-item {
        flex-shrink: 0;
        padding: 6px 10px;
        font-size: 13px;
        min-height: 32px;
    }

    /* Кнопка "Назад" */
    .feedback-back-wrapper {
        flex-shrink: 0;
        margin-top: 8px;
        width: 100%;
    }

    .feedback-back-button {
        font-size: 15px;
        padding: 10px 16px;
        min-width: 70px;
    }
}

/* Планшеты и промежуточные размеры */
@media (min-width: 769px) and (max-width: 1200px) {
    .map-viewer-feedback-container {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        min-height: 0;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .map-viewer-feedback-container.keyboard-open {
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    .feedback-list-container {
        flex: 1 1 auto;
        overflow-y: auto !important;
        min-height: 80px;
        max-height: 250px;
    }
}

/* ============================================================
   РЕДАКТОР ОБЪЕКТА: альбомный мобильный режим при открытой клавиатуре
   ============================================================
   Когда пользователь фокусируется на поле ввода в редакторе
   объекта (ObjectEditor) в альбомной ориентации, JS навешивает
   на активный блок класс .keyboard-horizontal.

   Тогда:
     - сам блок .shape-size-block становится row;
     - вложенные .shape-size-input-row (каждая = [label][◀][input][▶])
       идут в одну строку;
     - div-заголовок блока («Поворот», «Размеры», «Местоположение»)
       скрывается, чтобы не занимать вертикаль.

   Селектор #object-editor-container гарантирует, что правило
   не задевает ShapeEditor и другие элементы с теми же классами.
   Медиа-условия соответствуют условиям JS:
     - max-width: 1200px    ↔  isMobileFromMain === true
     - orientation: landscape ↔ innerHeight <= innerWidth
   ============================================================ */
@media (max-width: 1200px) and (orientation: landscape) {
    /* Сам активный блок — в одну строку */
    #object-editor-container .shape-size-block.keyboard-horizontal {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        overflow: visible !important;
    }

    /* Каждая строка с полем ввода — тоже в одну строку */
    #object-editor-container .shape-size-block.keyboard-horizontal > .shape-size-input-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 3px !important;
    }

    /* Скрываем только div-заголовок блока (первый child, не input-row) */
    #object-editor-container .shape-size-block.keyboard-horizontal > div:first-child:not(.shape-size-input-row) {
        display: none !important;
    }

    /* Компактные лейблы и input'ы — чтобы всё влезло в одну строку */
    #object-editor-container .shape-size-block.keyboard-horizontal .shape-size-label {
        min-width: 18px !important;
        font-size: 14px !important;
    }

    #object-editor-container .shape-size-block.keyboard-horizontal .shape-size-input {
        width: 52px !important;
        padding: 3px 4px !important;
        font-size: 14px !important;
    }

    #object-editor-container .shape-size-block.keyboard-horizontal .shape-arrow-btn {
        padding: 3px 6px !important;
        font-size: 12px !important;
    }

    /* Подпись активного блока в titleBar редактора объекта:
       появляется только когда JS навесил класс keyboard-horizontal
       на активный блок. На всякий случай страхуемся ещё и CSS-правилом. */
    #object-editor-container #object-editor-active-block-label {
        color: var(--color-primary-light);
        font-size: 14px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 40vw;
        padding: 0 6px;
    }
}