/* =====================================================================
   MultiBar 1.8.0 — слой интерфейса
   1) экран не «гуляет» и не масштабируется (iPhone Safari / Android Chrome);
   2) объёмные («3D») поверхности в цветах выбранной темы: клавиши, поиск, рабочее поле, карточки, шторка;
   3) точечные исправления экранов (заказы, напитки, ТТК, контакты, выбор из списка и т.д.).
   Подключается после app.css и переопределяет его.
   ===================================================================== */

/* ---------- 1. Экран: без горизонтального сдвига и масштабирования ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    /* щипок двумя пальцами не масштабирует страницу; прокрутка работает */
    touch-action: pan-x pan-y;
    overscroll-behavior-x: none;
}
body { overscroll-behavior-x: none; min-width: 0; }
/* Фон под страницей — цвет темы (на Android при открытой клавиатуре не видно белой полосы) */
html { background-color: var(--bg); }
#app-root { min-width: 0; }
#app-root img, #app-root video, #app-root canvas { max-width: 100%; }
/* Закрытые шторки — вне экрана и не участвуют в прокрутке/масштабе (iOS иначе «видит» их за краем) */
.side-drawer:not(.open):not(.dragging) { visibility: hidden; transition: transform .34s cubic-bezier(.32,.72,0,1), visibility 0s linear .34s; }
.side-drawer.open, .side-drawer.dragging { visibility: visible; }
/* Длинные слова и ссылки переносятся, а не растягивают экран */
#app-root, .overlay-box, .settings-card { overflow-wrap: break-word; }
.chat-bubble { overflow-wrap: anywhere; }
input, textarea, select, button { max-width: 100%; }
/* Поля ввода на телефонах — 16px: iOS не приближает экран при фокусе */
@media (hover: none) and (pointer: coarse) {
    input[type="text"], input[type="search"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], input:not([type]), textarea { font-size: max(16px, 1em); }
    #global-search-input { font-size: 16px !important; }
}

/* ---------- 2. Объёмные поверхности в цветах темы ---------- */
:root {
    /* клавиши (кнопки шапки, поиск, пункты меню) */
    --k-face: #ffffff;
    --k-hi: .9; --k-lo: .07; --k-tint: .045;
    --k-edge: rgba(var(--primary-rgb), .24);
    --k-rim: rgba(255, 255, 255, .95);
    --k-base: rgba(20, 30, 60, .10);
    --k-drop: 0 2px 6px rgba(20, 34, 70, .10), 0 1px 1px rgba(20, 34, 70, .06);
    --k-drop-press: 0 1px 2px rgba(20, 34, 70, .12);
    --k-ink: #2d3436; --k-ink-2: rgba(45, 52, 54, .55);
    /* рабочее поле и карточки */
    --c-hi: .65; --c-lo: .03; --c-tint: .022;
    --c-edge: rgba(var(--primary-rgb), .14);
    --c-rim: rgba(255, 255, 255, .95);
    --c-base: rgba(20, 30, 60, .06);
    --c-drop: 0 10px 26px rgba(20, 40, 90, .08), 0 2px 4px rgba(20, 40, 90, .05);
    /* маленькие карточки списков */
    --i-edge: rgba(var(--primary-rgb), .12);
    --i-drop: 0 2px 6px rgba(20, 40, 90, .07), 0 1px 1px rgba(20, 40, 90, .05);
    --i-rim: rgba(255, 255, 255, .9);
    --i-base: rgba(20, 30, 60, .05);
    /* «колодцы» (вложенные блоки на поле) */
    --w-in: inset 0 1px 2px rgba(20, 30, 60, .06);
}
[data-theme="dark"] {
    --k-face: #364150;
    --k-hi: .10; --k-lo: .24; --k-tint: .07;
    --k-edge: rgba(var(--primary-rgb), .42);
    --k-rim: rgba(255, 255, 255, .11);
    --k-base: rgba(0, 0, 0, .32);
    --k-drop: 0 2px 6px rgba(0, 0, 0, .34), 0 1px 1px rgba(0, 0, 0, .2);
    --k-drop-press: 0 1px 2px rgba(0, 0, 0, .35);
    --k-ink: #e8edf4; --k-ink-2: rgba(216, 224, 234, .6);
    --c-hi: .06; --c-lo: .14; --c-tint: .05;
    --c-edge: rgba(var(--primary-rgb), .26);
    --c-rim: rgba(255, 255, 255, .07);
    --c-base: rgba(0, 0, 0, .28);
    --c-drop: 0 12px 28px rgba(0, 0, 0, .32), 0 2px 4px rgba(0, 0, 0, .2);
    --i-edge: rgba(var(--primary-rgb), .22);
    --i-drop: 0 2px 6px rgba(0, 0, 0, .28);
    --i-rim: rgba(255, 255, 255, .06);
    --i-base: rgba(0, 0, 0, .22);
    --w-in: inset 0 1px 3px rgba(0, 0, 0, .28);
}
[data-theme="dark-purple"] {
    --k-face: #2f2548;
    --k-hi: .10; --k-lo: .26; --k-tint: .10;
    --k-edge: rgba(var(--primary-rgb), .48);
    --k-rim: rgba(255, 255, 255, .11);
    --k-base: rgba(0, 0, 0, .34);
    --k-drop: 0 2px 7px rgba(6, 2, 18, .45), 0 1px 1px rgba(0, 0, 0, .2);
    --k-drop-press: 0 1px 2px rgba(6, 2, 18, .45);
    --k-ink: #f0e8ff; --k-ink-2: rgba(226, 214, 250, .62);
    --c-hi: .06; --c-lo: .16; --c-tint: .07;
    --c-edge: rgba(var(--primary-rgb), .30);
    --c-rim: rgba(255, 255, 255, .07);
    --c-base: rgba(0, 0, 0, .3);
    --c-drop: 0 12px 30px rgba(6, 2, 18, .45), 0 2px 4px rgba(0, 0, 0, .2);
    --i-edge: rgba(var(--primary-rgb), .26);
    --i-drop: 0 2px 7px rgba(6, 2, 18, .35);
    --i-rim: rgba(255, 255, 255, .06);
    --i-base: rgba(0, 0, 0, .24);
    --w-in: inset 0 1px 3px rgba(0, 0, 0, .32);
}

/* Клавиша: верхний блик, нижняя грань, тень, тонировка цветом темы */
.header-history-btn,
.global-search-bar, form.global-search-bar,
.side-drawer-actions button,
.side-drawer-close,
.mb-key {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, var(--k-hi)) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, var(--k-lo)) 100%),
        linear-gradient(rgba(var(--primary-rgb), var(--k-tint)), rgba(var(--primary-rgb), var(--k-tint))),
        var(--k-face) !important;
    border: 1.5px solid var(--k-edge) !important;
    box-shadow: var(--k-drop), inset 0 1px 0 var(--k-rim), inset 0 -1px 0 var(--k-base) !important;
    color: var(--k-ink) !important;
}
.header-history-btn:active:not(:disabled),
.side-drawer-actions button:active,
.side-drawer-close:active,
.mb-key:active {
    transform: translateY(1px);
    box-shadow: var(--k-drop-press), inset 0 1px 2px var(--k-base) !important;
}
[data-theme="dark"] .header-history-btn { background: linear-gradient(180deg, rgba(255,255,255,var(--k-hi)) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,var(--k-lo)) 100%), linear-gradient(rgba(var(--primary-rgb),var(--k-tint)),rgba(var(--primary-rgb),var(--k-tint))), var(--k-face) !important; border-color: var(--k-edge) !important; }
#header-calc-btn svg { stroke: var(--k-ink-2); }
/* Поиск */
.global-search-bar #global-search-input { color: var(--k-ink) !important; caret-color: var(--primary); }
.global-search-bar #global-search-input::placeholder { color: var(--k-ink-2) !important; }
.global-search-bar .drawer-toggle-btn, .global-search-bar .search-submit-btn, .global-search-bar .tabs-drawer-toggle-btn { color: var(--k-ink-2) !important; }
.global-search-bar .drawer-toggle-btn:active, .global-search-bar .search-submit-btn:active, .global-search-bar .tabs-drawer-toggle-btn:active { background: rgba(var(--primary-rgb), .10) !important; }
.global-search-bar.is-focused, .global-search-bar:focus-within {
    border-color: rgba(var(--primary-rgb), .75) !important;
    box-shadow: var(--k-drop), 0 0 0 3px rgba(var(--primary-rgb), .18), inset 0 1px 0 var(--k-rim), inset 0 -1px 0 var(--k-base) !important;
}
.menu-dot { box-shadow: 0 0 0 2px var(--k-face); }

/* Рабочее поле — объёмный лоток */
#app-root > .container {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, var(--c-hi)) 0, rgba(255, 255, 255, 0) 140px),
        linear-gradient(rgba(var(--primary-rgb), var(--c-tint)), rgba(var(--primary-rgb), var(--c-tint))),
        var(--card) !important;
    border: 1.5px solid var(--c-edge);
    box-shadow: var(--c-drop), inset 0 1px 0 var(--c-rim), inset 0 -2px 0 var(--c-base) !important;
    border-radius: 18px;
    box-sizing: border-box;
}
/* Вложенные блоки на поле — «колодцы» с мягкой внутренней тенью */
#app-root .drinks-card {
    border: 1.5px solid var(--i-edge) !important;
    box-shadow: var(--w-in), 0 1px 0 var(--c-rim) !important;
    border-radius: 16px !important;
}
/* Карточки списков — приподнятые */
#app-root .orders-item, #app-root .orders-supplier-card, #app-root .ttk-card, #app-root .task-card,
#app-root .wo-card, #app-root .wo-item, .contacts-item, .settings-card, .inv-item-card {
    border: 1.5px solid var(--i-edge) !important;
    box-shadow: var(--i-drop), inset 0 1px 0 var(--i-rim), inset 0 -1px 0 var(--i-base) !important;
}
/* Окна (модалки) — объёмная панель */
.overlay-box, .custom-select-box, .mb-sheet-box {
    border: 1.5px solid var(--c-edge) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38), inset 0 1px 0 var(--c-rim) !important;
}
/* Нижнее меню разделов — тоже клавишная панель */
body.nav-tabs-bar .tabs {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, var(--k-hi)) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(rgba(var(--primary-rgb), var(--k-tint)), rgba(var(--primary-rgb), var(--k-tint))),
        var(--k-face) !important;
    border-top: 1.5px solid var(--k-edge) !important;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .12), inset 0 1px 0 var(--k-rim) !important;
}
body.nav-tabs-bar .tabs .tab-btn { color: var(--k-ink-2) !important; }
body.nav-tabs-bar .tabs .tab-btn.active { color: var(--primary) !important; }

/* ---------- Шторка (меню) ---------- */
.side-drawer {
    background:
        linear-gradient(180deg, rgba(var(--primary-rgb), .10) 0%, rgba(var(--primary-rgb), 0) 220px),
        var(--drawer-bg) !important;
    border-right: 1.5px solid var(--c-edge);
}
.side-drawer-right { border-right: 0; border-left: 1.5px solid var(--c-edge); }
#side-drawer { width: 78vw; max-width: 300px; }
.side-drawer-inner { padding: max(16px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important; }
.side-drawer-close { width: 38px !important; height: 38px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; }
.side-drawer-actions button {
    display: flex !important; align-items: center; gap: 12px;
    min-height: 50px; padding: 8px 12px !important; margin-bottom: 9px !important;
    border-radius: 14px !important; font-size: 15px !important; font-weight: 700 !important;
}
.side-drawer-actions button .mb-icon { margin: 0 !important; }
.drawer-ico {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.12)), var(--di, var(--primary));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.25);
}
.drawer-ico .mb-icon { width: 17px !important; height: 17px !important; min-width: 17px !important; }
.side-drawer-actions .drawer-logout-btn { color: var(--danger) !important; }
.side-drawer-actions .drawer-logout-btn .drawer-ico { --di: #ef4444; }
.side-drawer-right .side-drawer-actions button, .side-drawer-right .side-drawer-actions button.tabs-drawer-btn { min-height: 44px; border-radius: 12px !important; }
.side-drawer-right .side-drawer-actions button.tabs-drawer-btn.active { border-color: var(--primary) !important; color: var(--primary) !important; }
/* Профиль в шапке меню */
.drawer-profile { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 4px 4px 4px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.drawer-profile-text { display: flex; flex-direction: column; min-width: 0; }
.drawer-profile-text b { font-size: 16px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-profile-text small { font-size: 12px; opacity: .62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-drawer-header { gap: 10px; margin-bottom: 16px !important; }

/* Аватар (общий) */
.mb-avatar {
    --av: 260; position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .02em;
    background: linear-gradient(160deg, hsl(var(--av), 70%, 58%), hsl(calc(var(--av) + 30), 65%, 42%));
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.mb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-avatar.sm { width: 34px; height: 34px; font-size: 12px; }
.mb-avatar.xs { width: 26px; height: 26px; font-size: 10px; }
.mb-avatar.lg { width: 84px; height: 84px; font-size: 28px; }
.mb-avatar .mb-online { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #9ca3af; box-shadow: 0 0 0 2px var(--card); }
.mb-avatar.is-online .mb-online { background: #22c55e; }
.mb-avatar-wrap { position: relative; display: inline-flex; }

/* ---------- 3. Экраны ---------- */

/* Подразделы напитков: иконка над подписью — подписи не обрезаются */
#drinks-subtabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
#drinks-subtabs .subtab-btn {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 7px 2px !important; font-size: 12px !important; line-height: 1.15; white-space: nowrap;
    overflow: visible !important; text-overflow: clip !important; min-height: 46px;
}
#drinks-subtabs .subtab-btn .mb-icon { width: 17px !important; height: 17px !important; margin: 0 !important; }
@media (max-width: 340px) { #drinks-subtabs .subtab-btn { font-size: 11px !important; letter-spacing: -.01em; } }
@media (min-width: 560px) { #drinks-subtabs .subtab-btn { flex-direction: row; gap: 6px; font-size: 13px !important; min-height: 40px; } }

/* Нижнее меню разделов: подписи целиком */
body.nav-tabs-bar .tabs .tab-btn { overflow: visible !important; text-overflow: clip !important; letter-spacing: -.01em; }

/* Шапка: имя пользователя не наезжает на часы */
.header-status-cluster { gap: 8px !important; }
.header-status-user { max-width: 40vw; }
.header-status-clock { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* Окно выбора из списка: шапка закреплена, крестик всегда в углу окна, поиск по длинному списку */
.custom-select-overlay { align-items: flex-end !important; padding: 0 !important; }
.custom-select-box {
    width: 100% !important; max-width: 520px; max-height: min(78vh, 640px) !important; max-height: min(78dvh, 640px) !important;
    border-radius: 22px 22px 0 0 !important; padding-bottom: env(safe-area-inset-bottom);
    position: relative;
}
@media (min-width: 640px) { .custom-select-overlay { align-items: center !important; padding: 16px !important; } .custom-select-box { border-radius: 20px !important; } }
.custom-select-overlay.open .custom-select-box { animation: mbSheetUp .26s cubic-bezier(.2, .8, .2, 1) !important; }
@keyframes mbSheetUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.custom-select-header { position: relative !important; flex: 0 0 auto; padding: 14px 12px 10px 16px !important; }
.custom-select-header::before { content: ''; position: absolute; top: 6px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--border); }
.custom-select-header h3 { font-size: 17px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.custom-select-header .overlay-x { position: static !important; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: rgba(var(--primary-rgb), .08); opacity: 1; }
.custom-select-search { flex: 0 0 auto; padding: 0 12px 8px; }
.custom-select-search input { width: 100%; box-sizing: border-box; padding: 11px 12px 11px 38px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px 50%; }
.custom-select-search input:focus { border-color: var(--primary); }
.custom-select-box .custom-select-list { flex: 1 1 auto; min-height: 0; max-height: none !important; overscroll-behavior: contain; padding: 4px 12px 14px !important; }
.custom-select-empty { padding: 18px 8px; text-align: center; opacity: .6; font-size: 14px; }

/* Заголовки окон: крестик не убегает, длинный заголовок переносится */
.overlay-header { position: relative; padding-right: 52px !important; padding-left: 52px !important; }
.overlay-header h3 { overflow-wrap: break-word; }
.overlay-header .overlay-x { top: 50%; transform: translateY(-50%); right: 10px !important; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; border-radius: 50%; }
.settings-box .overlay-header { padding-left: 18px !important; }

/* Контакты: список внутри отступов окна */
.contacts-list { padding: 0 16px !important; box-sizing: border-box; }
.contacts-form { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
.contacts-item { margin: 0 0 8px !important; border-radius: 14px !important; box-sizing: border-box; width: 100% !important; }
.contacts-item-info { min-width: 0; }
.contacts-item-note { overflow-wrap: anywhere; }

/* Новый напиток: строка ингредиента — название целиком, ниже количество / единица / премикс / удалить */
#drink-add-ingredients { display: flex; flex-direction: column; gap: 10px; }
#drink-add-ingredients .cocktail-ing-row {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 84px auto 36px !important; grid-template-areas: "name name name name" "amt unit premix del";
    gap: 8px !important; align-items: center; padding: 10px; border-radius: 14px; border: 1.5px solid var(--i-edge); background: var(--bg); box-shadow: var(--w-in);
}
#drink-add-ingredients .cocktail-ing-name { grid-area: name; width: 100% !important; min-width: 0; box-sizing: border-box; }
#drink-add-ingredients .cocktail-ing-amount { grid-area: amt; width: 100% !important; min-width: 0; box-sizing: border-box; text-align: center; }
#drink-add-ingredients .cocktail-ing-unit-trigger { grid-area: unit; width: 100% !important; min-width: 0; box-sizing: border-box; margin: 0 !important; justify-content: space-between; }
#drink-add-ingredients .cocktail-ing-premix { grid-area: premix; display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; white-space: nowrap; font-size: 13px; font-weight: 700; position: static !important; padding: 0 2px; }
#drink-add-ingredients .cocktail-ing-premix input { position: static !important; margin: 0 !important; flex: 0 0 auto; }
#drink-add-ingredients .cocktail-ing-del { grid-area: del; width: 36px; height: 36px; margin: 0 !important; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; position: static !important; }
#drink-add-ingredients .cocktail-ing-name, #drink-add-ingredients .cocktail-ing-amount { height: 42px; }
@media (max-width: 350px) { #drink-add-ingredients .cocktail-ing-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px !important; grid-template-areas: "name name name" "amt unit del" "premix premix premix"; } }

/* ТТК: строка поиска + кнопка, лента подкатегорий переносится */
.ttk-toolbar-card .ttk-toolbar, .ttk-toolbar { display: flex; gap: 8px; align-items: stretch; flex-wrap: nowrap; min-width: 0; }
.ttk-toolbar input { min-width: 0; flex: 1 1 auto; }
.ttk-toolbar .ttk-add-btn, .ttk-toolbar button { flex: 0 0 auto; white-space: nowrap; }
/* лента подкатегорий: одной строкой с прокруткой и мягким краем, чтобы длинный список не занимал пол-экрана */
#ttk-cats { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-right: 18px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
#ttk-cats::-webkit-scrollbar { display: none; }
#ttk-cats > * { flex: 0 0 auto !important; white-space: nowrap; }
#ttk-ingredients .ttk-ing-row, .ttk-ing-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 76px 68px 36px; gap: 6px; align-items: center; }
.ttk-ing-row > * { min-width: 0; box-sizing: border-box; }
/* телефон: название ингредиента — целой строкой, ниже количество / единица / удалить */
@media (max-width: 560px) {
    .ttk-ing-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px !important; grid-template-areas: "n n n" "a u d"; padding: 8px; border-radius: 12px; background: rgba(var(--primary-rgb), .05); }
    .ttk-ing-row > :nth-child(1) { grid-area: n; }
}

/* Заказы: подразделения переносятся (видно все), а не прячутся за краем */
.orders-location-tabs { flex-wrap: wrap !important; overflow: visible !important; row-gap: 5px; }
.orders-location-btn { flex: 1 1 auto !important; white-space: normal !important; min-width: 0; }
.orders-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.orders-head > div:first-child { flex: 1 1 180px; min-width: 0; }
.orders-head-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* Карточки поставщиков: на телефоне — одна колонка, две строки; ничего не сжимается и не наезжает */
#app-root .orders-supplier-summary { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important; gap: 8px !important; }
#app-root .orders-supplier-card {
    position: relative; display: flex !important; flex-direction: column; gap: 6px; min-width: 0;
    padding: 10px 10px 10px 12px !important; border-radius: 14px !important; min-height: 0 !important; height: auto !important;
}
.orders-supplier-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.orders-supplier-card .orders-supplier-name { flex: 1 1 auto; min-width: 0; font-size: 14.5px !important; font-weight: 800; line-height: 1.25; overflow-wrap: break-word; margin: 0 !important; }
.orders-supplier-card .orders-supplier-total { flex: 0 0 auto; font-size: 17px !important; font-weight: 800; margin: 0 !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.orders-supplier-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.orders-supplier-info { flex: 1 1 140px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.orders-supplier-card .orders-supplier-min { font-size: 12px !important; opacity: .8; margin: 0 !important; line-height: 1.3; white-space: nowrap; }
.orders-supplier-card .orders-supplier-min .gap-warn { color: var(--danger); font-weight: 800; }
.orders-supplier-card .orders-supplier-min .gap-ok { color: var(--success); font-weight: 800; }
.orders-supplier-status {
    position: static !important; transform: none !important; max-width: 100%;
    display: inline-flex !important; align-items: center; gap: 4px; margin: 0 !important;
    padding: 2px 8px; border-radius: 999px; font-size: 11px !important; font-weight: 800; white-space: nowrap;
    color: var(--success); background: rgba(34, 197, 94, .14); box-sizing: border-box;
}
.orders-supplier-status.is-sent { color: #b45309; background: rgba(245, 158, 11, .16); }
[data-theme^="dark"] .orders-supplier-status.is-sent, [data-theme="purple"] .orders-supplier-status.is-sent { color: #fbbf24; }
#app-root .orders-supplier-actions { display: flex !important; align-items: center; gap: 6px !important; margin: 0 0 0 auto !important; flex: 0 0 auto; }
#app-root .orders-supplier-ico {
    position: static !important; width: 34px !important; height: 34px !important; padding: 0 !important; margin: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center; border-radius: 10px !important; border: 0 !important; cursor: pointer;
    background: rgba(var(--primary-rgb), .13) !important; color: var(--primary) !important; box-shadow: none !important; font-size: 0 !important; flex: 0 0 auto;
}
#app-root .orders-supplier-ico.orders-supplier-del { background: rgba(239, 68, 68, .13) !important; color: var(--danger) !important; }
#app-root .orders-supplier-actions .orders-send-btn {
    flex: 0 0 auto; width: auto !important; min-width: 0; height: 34px; padding: 0 12px !important; margin: 0 !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
}

/* Заказы: правка позиции — 2 колонки внутри карточки, кнопки переносятся */
.orders-item-edit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px !important; }
.orders-item.editing .orders-item-edit, .orders-item-editing-open .orders-item-edit { max-height: 560px !important; overflow: visible; }
.orders-item-edit > label { min-width: 0; }
.orders-item-edit input, .orders-item-edit select, .orders-item-edit .custom-select-trigger { width: 100% !important; min-width: 0; box-sizing: border-box; min-height: 38px; font-size: 14px !important; }
.orders-item-edit-actions { flex-wrap: wrap; }
.orders-item-edit-actions button { flex: 1 1 120px; min-height: 40px; font-size: 14px !important; }
.orders-item-name { overflow-wrap: break-word; }

/* Заказы: строка фильтров — текущие фильтры одной строкой */
.orders-filter-summary { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 0; }
.orders-filter-summary:empty { display: none; }
.of-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 6px 6px 11px; border-radius: 999px; border: 1.5px solid rgba(var(--primary-rgb), .35); background: rgba(var(--primary-rgb), .10); color: var(--text); font-size: 12.5px; font-weight: 700; }
.of-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.of-chip button { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--primary-rgb), .18); color: inherit; cursor: pointer; }

/* Окно «Фильтр» заказов — просто: статус списком, поставщики кнопками-«таблетками» */
#orders-supplier-overlay .overlay-body { padding-top: 12px !important; }
.of-section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 2px 8px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.of-section-title button { border: 0; background: none; color: var(--primary); font: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 800; cursor: pointer; padding: 4px 2px; opacity: 1; }
.of-status-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.of-status { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.of-status i { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box; position: relative; }
.of-status.active { border-color: var(--primary); background: rgba(var(--primary-rgb), .10); }
.of-status.active i { border-color: var(--primary); }
.of-status.active i::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); }
.of-status b { flex: 1; font-weight: 700; min-width: 0; }
.of-status small { flex: 0 0 auto; min-width: 26px; padding: 1px 8px; border-radius: 999px; background: rgba(var(--primary-rgb), .12); color: var(--primary); font-size: 12px; font-weight: 800; text-align: center; }
.of-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.of-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.of-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-pill.on { border-color: var(--primary); background: var(--primary); color: #fff; }
.of-pill.on::before { content: ''; width: 14px; height: 14px; flex: 0 0 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Каталог заказа: поставщики и подразделения — аккуратные карточки */
.oa-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 2px 0 12px; }
.oa-add-row input { width: 100%; min-width: 0; box-sizing: border-box; height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); outline: none; font-weight: 600; }
.oa-add-row input:focus { border-color: var(--primary); }
.oa-add-btn { height: 44px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--primary); color: #fff; font: inherit; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; box-shadow: 0 2px 6px rgba(var(--primary-rgb), .35), inset 0 1px 0 rgba(255,255,255,.2); }
.oa-add-btn:active { transform: translateY(1px); }
.oa-money { position: relative; }
.oa-money::after { content: '₽'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: .5; font-weight: 700; pointer-events: none; }
.oa-money input { padding-right: 28px !important; text-align: right; }
#orders-minimums-list, #orders-locations-list { max-height: none !important; overflow: visible !important; gap: 8px !important; }
.oa-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 38px; align-items: center; gap: 8px 10px; padding: 8px 8px 8px 10px; border-radius: 14px; border: 1.5px solid var(--i-edge); background: var(--bg); box-shadow: var(--i-drop), inset 0 1px 0 var(--i-rim); }
.oa-row-ico { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); background: rgba(var(--primary-rgb), .12); font-weight: 800; font-size: 15px; }
.oa-row-title { min-width: 0; font-size: 15px; font-weight: 800; line-height: 1.25; overflow-wrap: break-word; }
.oa-row-name { min-width: 0; height: 38px; padding: 0 10px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 800; width: 100%; box-sizing: border-box; outline: none; text-overflow: ellipsis; }
.oa-row-name:not([readonly]):focus { border-color: var(--primary); background: var(--card); }
.oa-row-name:not([readonly]) { border-style: dashed; border-color: rgba(var(--primary-rgb), .0); }
.oa-row-name:not([readonly]):hover { border-color: rgba(var(--primary-rgb), .3); }
.oa-row-min { grid-column: 2 / 4; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oa-row-cap { font-size: 12px; font-weight: 700; opacity: .6; }
.oa-row .oa-money { width: 124px; flex: 0 0 auto; }
.oa-row .oa-money input { width: 100%; box-sizing: border-box; height: 38px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-weight: 800; padding: 0 26px 0 8px; outline: none; }
.oa-row .oa-money input:focus { border-color: var(--primary); }
.oa-row-del { width: 38px; height: 38px; border-radius: 11px; border: 1.5px solid rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .08); color: var(--danger); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.oa-row-del:active { transform: translateY(1px); }
.oa-empty { padding: 14px; text-align: center; opacity: .6; font-size: 13px; border: 1.5px dashed var(--border); border-radius: 14px; }
/* строки добавления: подразделение — поле и «+», поставщик — название, затем минималка и кнопка */
.oa-add-row { grid-template-columns: minmax(0, 1fr) 48px; }
.oa-add-row .oa-add-btn { padding: 0; }
.oa-add-row:not(.with-min) .oa-add-btn .oa-add-label { display: none; }
.oa-add-row.with-min { grid-template-columns: minmax(0, 1fr) auto; }
.oa-add-row.with-min #orders-new-supplier-name { grid-column: 1 / -1; }
.oa-add-row.with-min .oa-add-btn { grid-column: auto; padding: 0 16px; }
.orders-admin-sec-head { border-radius: 14px !important; }

/* Чат: сообщения не выходят за край */
.chat-msg { max-width: 100%; }
.chat-bubble { max-width: min(78%, 520px); min-width: 0; }
.chat-text { overflow-wrap: anywhere; word-break: break-word; }
.chat-text a { word-break: break-all; }

/* Общие кнопки в окнах — не обрезаются */
.overlay-actions { flex-wrap: wrap; }
.overlay-actions .btn-main { flex: 1 1 120px; min-width: 0; }
.btn-main { white-space: normal; line-height: 1.2; }
.custom-select-option[hidden], .custom-select-empty[hidden], .custom-select-search[hidden] { display: none !important; }

/* Шапка: имя/логин — с многоточием, часы рядом, без наложения */
.header-status-user { display: block !important; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 370px) { .header-status-user { max-width: 26vw; } .header-title-row { gap: 6px !important; } .header-history-btn { width: 36px !important; } }

/* Выбор напитка: поле шире, кнопки компактнее */
.select-row { gap: 6px !important; }
.select-row > .btn-delete-large, .select-row > .drink-add-small { flex-basis: 42px !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; }
.select-row > .custom-select-trigger { padding-left: 12px !important; padding-right: 10px !important; }

/* =====================================================================
   1.8.0 — Чаты (список + чат; на широком экране — рядом)
   ===================================================================== */
.chat-overlay { inset: auto !important; left: 0 !important; right: 0 !important; top: var(--vv-top, 0px) !important; height: var(--vvh, 100%) !important; background: var(--bg) !important; overscroll-behavior: contain; }
.chat-screen { position: absolute !important; inset: 0 !important; max-width: none !important; margin: 0 !important; display: grid !important; grid-template-columns: 100%; grid-template-rows: 100%; overflow: hidden; animation: none !important; }
.chat-screen > .chat-pane { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; position: relative; z-index: 1; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, visibility 0s linear .28s; }
.chat-list-pane { background: var(--bg); }
.chat-screen[data-view="list"] .chat-room-pane { transform: translateX(100%); visibility: hidden; }
.chat-screen[data-view="room"] .chat-list-pane { transform: translateX(-22%); opacity: .4; visibility: hidden; }
.chat-screen[data-view="list"] .chat-list-pane, .chat-screen[data-view="room"] .chat-room-pane { transform: none; opacity: 1; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, visibility 0s; }
.chat-overlay.open .chat-screen { animation: mbSlideUp .26s cubic-bezier(.2,.8,.2,1) !important; }
@media (min-width: 860px) {
    .chat-screen { grid-template-columns: 340px minmax(0, 1fr) !important; max-width: 1200px !important; margin: 0 auto !important; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
    .chat-screen > .chat-list-pane { grid-area: 1 / 1; transform: none !important; opacity: 1 !important; visibility: visible !important; border-right: 1px solid var(--border); }
    .chat-screen > .chat-room-pane { grid-area: 1 / 2; transform: none !important; opacity: 1 !important; visibility: visible !important; }
    #chat-room-back { display: none; }
}
.chat-header { position: relative; z-index: 2; gap: 6px !important; padding: calc(8px + env(safe-area-inset-top)) 8px 8px !important;
    background: linear-gradient(180deg, rgba(255,255,255,var(--k-hi)) 0%, rgba(255,255,255,0) 70%), linear-gradient(rgba(var(--primary-rgb), var(--k-tint)), rgba(var(--primary-rgb), var(--k-tint))), var(--k-face) !important;
    border-bottom: 1.5px solid var(--k-edge) !important; box-shadow: 0 4px 14px rgba(0,0,0,.10) !important; color: var(--k-ink); }
.chat-header .chat-head-btn { color: var(--k-ink); }
.chat-head-btn:active { background: rgba(var(--primary-rgb), .12) !important; }
.chat-head-main { flex: 1; min-width: 0; cursor: default; }
#chat-room-headmain { cursor: pointer; }
.chat-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-room-avatar { flex: 0 0 auto; display: inline-flex; }
.chat-room-avatar:empty { display: none; }
.chat-new-btn { color: var(--primary) !important; }
.chat-search-wrap { padding: 10px 12px 6px; position: relative; z-index: 1; }
#chat-search { width: 100%; box-sizing: border-box; height: 42px; padding: 0 14px 0 40px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px 50%; box-shadow: var(--w-in); }
#chat-search:focus { border-color: var(--primary); }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 8px calc(16px + env(safe-area-inset-bottom)); }
.chat-li { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 0 0 2px; border: 0; border-radius: 14px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; box-sizing: border-box; }
.chat-li:active, .chat-li.active { background: rgba(var(--primary-rgb), .10); }
.chat-li .mb-avatar { width: 50px; height: 50px; font-size: 17px; }
.chat-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-li-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-li-title { flex: 0 1 auto; min-width: 0; font-size: 15.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-li-title em { font-style: normal; font-weight: 500; opacity: .6; }
.chat-li-top time { margin-left: auto; flex: 0 0 auto; font-size: 12px; opacity: .55; font-variant-numeric: tabular-nums; }
.chat-li-tag { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; background: rgba(var(--primary-rgb), .12); color: var(--primary); }
.chat-li-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-li-text { flex: 1; min-width: 0; font-size: 13.5px; opacity: .68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-li-text .mb-icon { vertical-align: -2px; }
.chat-li.has-unread .chat-li-title { color: var(--text); }
.chat-li.has-unread .chat-li-text { opacity: .95; font-weight: 600; }
.chat-li.has-unread .chat-li-top time { color: var(--primary); opacity: 1; font-weight: 800; }
.chat-li-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.chat-li-badge:empty { min-width: 10px; width: 10px; height: 10px; padding: 0; }
.chat-li-section { margin: 12px 10px 4px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .6; }
.chat-person-go { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); background: rgba(var(--primary-rgb), .12); }
.chat-gen-av { background: linear-gradient(160deg, rgba(var(--primary-rgb), 1), rgba(var(--primary-rgb), .65)) !important; color: #fff; }
.chat-group-av { background: linear-gradient(160deg, hsl(var(--av, 200), 60%, 55%), hsl(calc(var(--av, 200) + 40), 60%, 42%)) !important; color: #fff; }
.chat-list-empty { margin: 30px auto; max-width: 300px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text); opacity: .85; }
.chat-list-empty.small { margin: 18px auto; font-size: 13px; }
.chat-list-empty .mb-icon { color: var(--primary); }
.chat-list-empty span { font-size: 13px; opacity: .7; }
.chat-list-hint { margin: 14px 10px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed var(--border); display: flex; align-items: center; gap: 10px; font-size: 13px; opacity: .8; }
.chat-list-hint .mb-icon { color: var(--primary); flex: 0 0 auto; }

/* участники общего чата */
.chat-members[hidden] { display: none !important; }
.chat-member { border: 1.5px solid var(--border) !important; background: var(--card) !important; color: var(--text); font: inherit; cursor: pointer; }
.chat-member .mb-avatar { width: 30px; height: 30px; font-size: 11px; }
.chat-member .mb-avatar .mb-online { width: 9px; height: 9px; }
/* сообщения */
.chat-msg .mb-avatar.xs { width: 30px; height: 30px; font-size: 11px; flex: 0 0 30px; }
.chat-av-ghost { width: 30px; flex: 0 0 30px; }
.chat-msg { max-width: min(88%, 640px) !important; }
.chat-msg.own .chat-bubble { background: linear-gradient(160deg, rgba(var(--primary-rgb), .97), rgba(var(--primary-rgb), .82)) !important; }
.chat-bubble { max-width: 100% !important; box-shadow: 0 1px 2px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.06) !important; }
.chat-msg.has-att .chat-bubble { padding: 4px 4px 5px !important; }
.chat-msg.has-att .chat-author, .chat-msg.has-att .chat-text, .chat-msg.has-att .chat-meta { padding-left: 7px; padding-right: 7px; }
.chat-msg.has-att .chat-author { padding-top: 3px; }
.chat-msg.att-only .chat-meta { position: absolute; right: 9px; bottom: 9px; margin: 0; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; opacity: 1; }
.chat-att-img { position: relative; display: block; width: var(--att-w, 240px); max-width: min(100%, 70vw); padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: rgba(var(--primary-rgb), .12); cursor: zoom-in; color: var(--text); }
.chat-att-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-att-img > .mb-icon { margin: 30% auto; display: block; opacity: .5; }
.chat-att-busy { position: absolute; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.chat-att-busy i, .chat-att-spin, .nkl-pend i, .nkl-preview-busy i, .mb-viewer-spin i { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: mbSpin .8s linear infinite; box-sizing: border-box; }
.chat-att-spin { width: 20px; height: 20px; border-color: rgba(var(--primary-rgb), .25); border-top-color: var(--primary); }
@keyframes mbSpin { to { transform: rotate(360deg); } }
.chat-att-file { display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: rgba(var(--primary-rgb), .10); color: inherit; font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; }
.chat-msg.own .chat-att-file { background: rgba(255,255,255,.16); }
.chat-att-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; }
.chat-msg.own .chat-att-ico { background: rgba(255,255,255,.95); color: var(--primary); }
.chat-att-meta { display: flex; flex-direction: column; min-width: 0; }
.chat-att-meta b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-att-meta small { font-size: 12px; opacity: .75; }
.chat-readonly { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--border); font-size: 13px; font-weight: 700; opacity: .8; }
.chat-readonly[hidden], #chat-composer-wrap[hidden] { display: none !important; }
/* поле ввода */
.chat-composer { align-items: flex-end !important; gap: 6px !important; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important; }
html.kb-open .chat-composer { padding-bottom: 8px !important; }
.chat-attach-btn { width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 50%; background: transparent; color: var(--text); opacity: .7; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-attach-btn:active { background: rgba(var(--primary-rgb), .12); opacity: 1; }
.chat-attach-btn[hidden] { display: none !important; }
#chat-input { font-size: 16px !important; }
.chat-attach-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card); border-top: 1px solid var(--border); }
.chat-attach-bar[hidden] { display: none !important; }
.chat-attach-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: 0 0 46px; }
.chat-attach-ico { width: 46px; height: 46px; border-radius: 10px; flex: 0 0 46px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--primary-rgb), .12); color: var(--primary); }
.chat-attach-text { flex: 1; min-width: 0; display: flex; flex-direction: column; border-left: 3px solid var(--primary); padding-left: 8px; }
.chat-attach-text b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-attach-text small { font-size: 12px; opacity: .65; }
.chat-attach-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }

/* листы внутри чата (новый чат, группа, участники) и накладных */
.chat-sheet, .nkl-sheet { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 10, 18, 0); transition: background .2s ease; }
.chat-sheet[hidden], .nkl-sheet[hidden] { display: none !important; }
.chat-sheet.open, .nkl-sheet.open { background: rgba(8, 10, 18, .42); }
.chat-sheet-box, .nkl-sheet-box { width: 100%; max-width: 560px; max-height: min(88%, 760px); display: flex; flex-direction: column; background: var(--card); color: var(--text); border-radius: 22px 22px 0 0; border: 1.5px solid var(--c-edge); border-bottom: 0;
    box-shadow: 0 -12px 40px rgba(0,0,0,.3), inset 0 1px 0 var(--c-rim); transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); padding-bottom: env(safe-area-inset-bottom); }
.chat-sheet.open .chat-sheet-box, .nkl-sheet.open .nkl-sheet-box { transform: none; }
@media (min-width: 640px) { .chat-sheet, .nkl-sheet { align-items: center; } .chat-sheet-box, .nkl-sheet-box { border-radius: 20px; border-bottom: 1.5px solid var(--c-edge); } }
.chat-sheet-head { display: flex; align-items: center; gap: 8px; padding: 14px 10px 8px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.chat-sheet-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sheet-body, .nkl-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 10px 10px 14px; }
.chat-sheet-foot { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.chat-sheet-foot[hidden] { display: none !important; }
.chat-sheet-foot .btn-main { flex: 1 1 140px; }
.chat-sheet-search { padding: 4px 4px 8px; }
.chat-sheet-search input, .chat-sheet-field input { width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border-radius: 13px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); outline: none; }
.chat-sheet-search input:focus, .chat-sheet-field input:focus { border-color: var(--primary); }
.chat-sheet-field { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 10px; font-size: 13px; font-weight: 700; }
.chat-sheet-field span { opacity: .7; }
.chat-new-group .chat-li-title { color: var(--primary); }
.chat-pick-box { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: #fff; box-sizing: border-box; }
.chat-person.on .chat-pick-box { background: var(--primary); border-color: var(--primary); }
.chat-info-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 14px; text-align: center; }
.chat-info-head b { font-size: 19px; }
.chat-info-head small { font-size: 13px; opacity: .65; }
.chat-info-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0 4px 6px; }
.chat-info-act { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; border: 1.5px solid var(--i-edge); background: var(--bg); color: var(--primary); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; box-shadow: var(--i-drop); }
.chat-info-act span { color: var(--text); }
.chat-member-row { cursor: default; }
.chat-member-x { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(239, 68, 68, .1); color: var(--danger); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-member-x.go { background: rgba(var(--primary-rgb), .12); color: var(--primary); }
.chat-info-note { margin: 8px 6px; font-size: 13px; opacity: .75; display: flex; gap: 6px; align-items: center; }

/* =====================================================================
   1.8.0 — Накладные
   ===================================================================== */
.nkl-overlay { position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vvh, 100%); z-index: 9460; display: none; background: var(--bg); color: var(--text); }
.nkl-overlay.open { display: block; }
.nkl-screen { position: absolute; inset: 0; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; animation: mbSlideUp .26s cubic-bezier(.2,.8,.2,1); }
.nkl-tools { flex: 0 0 auto; padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 10px; }
.nkl-search { position: relative; }
.nkl-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .5; display: inline-flex; }
#nkl-search { width: 100%; box-sizing: border-box; height: 42px; padding: 0 14px 0 38px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); outline: none; box-shadow: var(--w-in); }
#nkl-search:focus { border-color: var(--primary); }
.nkl-cats, .nkl-cat-pick { display: flex; flex-wrap: wrap; gap: 7px; }
.nkl-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: var(--i-drop); }
.nkl-chip i { font-style: normal; min-width: 18px; padding: 0 6px; border-radius: 999px; background: rgba(var(--primary-rgb), .12); color: var(--primary); font-size: 11.5px; font-weight: 800; text-align: center; }
.nkl-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.nkl-chip.on i { background: rgba(255,255,255,.25); color: #fff; }
.nkl-chip.add { border-style: dashed; color: var(--primary); background: transparent; box-shadow: none; }
.nkl-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 12px 20px; }
.nkl-day { margin: 12px 4px 8px; font-size: 13px; font-weight: 800; opacity: .75; text-transform: capitalize; }
.nkl-file-ico { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--primary); }
.nkl-file-ico b { font-size: 12px; letter-spacing: .1em; }
.nkl-pend { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(0,0,0,.45); color: #fff; font-weight: 700; }
.nkl-empty { margin-top: 40px; }
.nkl-bottom { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1.5px solid var(--k-edge);
    background: linear-gradient(180deg, rgba(255,255,255,var(--k-hi)) 0%, rgba(255,255,255,0) 70%), linear-gradient(rgba(var(--primary-rgb), var(--k-tint)), rgba(var(--primary-rgb), var(--k-tint))), var(--k-face); }
.nkl-bottom[hidden] { display: none; }
.nkl-add-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 15px; border: 1.5px solid var(--k-edge); background: var(--card); color: var(--text); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: var(--k-drop), inset 0 1px 0 var(--k-rim); }
.nkl-add-btn.primary { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.08)), var(--primary); border-color: transparent; color: #fff; }
.nkl-add-btn[hidden] { display: none; }
.nkl-add-btn:active { transform: translateY(1px); }
.nkl-sheet-body { display: flex; flex-direction: column; gap: 14px; padding: 12px 14px 16px; }
.nkl-preview { display: flex; align-items: center; gap: 12px; min-height: 70px; }
.nkl-preview img { width: 84px; height: 112px; object-fit: cover; border-radius: 12px; box-shadow: var(--i-drop); }
.nkl-preview .nkl-file-ico { position: static; width: 84px; height: 112px; border-radius: 12px; background: rgba(var(--primary-rgb), .1); }
.nkl-preview small { opacity: .65; font-size: 12.5px; }
.nkl-preview-busy { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; opacity: .8; }
.nkl-preview-busy i { border-color: rgba(var(--primary-rgb), .25); border-top-color: var(--primary); }
.nkl-field { display: flex; flex-direction: column; gap: 7px; }
.nkl-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .65; }
.nkl-field input[type="text"], .nkl-field textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 13px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font: inherit; outline: none; resize: vertical; }
.nkl-field input[type="text"]:focus, .nkl-field textarea:focus { border-color: var(--primary); }
.nkl-field .custom-select-trigger, .nkl-field .mb-dt-trigger { width: 100%; }
.nkl-hint { font-size: 12px; opacity: .6; }
.nkl-sup-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nkl-sup-chips[hidden] { display: none; }
.nkl-sup { padding: 6px 11px; border-radius: 999px; border: 1.5px solid rgba(var(--primary-rgb), .3); background: rgba(var(--primary-rgb), .08); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* =====================================================================
   1.8.0 — Просмотр фото
   ===================================================================== */
.mb-viewer.open { opacity: 1; }
.mb-viewer[hidden] { display: none !important; }
.mb-viewer-top { display: flex; align-items: center; gap: 6px; padding: calc(8px + env(safe-area-inset-top)) 8px 8px; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); position: relative; z-index: 2; }
.mb-viewer-btn { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mb-viewer-btn:disabled { opacity: .35; }
.mb-viewer-btn[hidden] { display: none; }
.mb-viewer-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mb-viewer-title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-viewer-sub { font-size: 12.5px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-viewer-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; }
.mb-viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; user-select: none; -webkit-user-drag: none; will-change: transform; }
.mb-viewer-img.is-thumb { filter: blur(6px); transform: scale(1.02); }
.mb-viewer-spin { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 14px; background: rgba(0,0,0,.5); font-weight: 700; font-size: 14px; }
.mb-viewer-spin[hidden] { display: none; }
.mb-viewer-spin.is-error i { display: none; }
.mb-viewer-bottom { padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0)); }
.mb-viewer-caption { font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 30vh; overflow: auto; }
.mb-viewer-caption[hidden] { display: none; }

/* =====================================================================
   1.8.0 — Мой профиль, права чатов, служебное только у владельца
   ===================================================================== */
body:not(.is-owner) .owner-only { display: none !important; }
.profile-row { display: flex; gap: 16px; align-items: flex-start; }
.profile-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.profile-avatar-btn { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.profile-avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--card), 0 2px 6px rgba(0,0,0,.25); }
.profile-avatar-remove { border: 0; background: none; color: var(--danger); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 4px; }
.profile-avatar-remove[hidden] { display: none; }
.profile-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.profile-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.profile-field span { opacity: .65; text-transform: uppercase; }
.profile-field input { width: 100%; box-sizing: border-box; height: 44px; padding: 0 13px; border-radius: 13px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0; outline: none; }
.profile-field input:focus { border-color: var(--primary); }
.profile-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; opacity: .7; min-width: 0; }
.profile-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#profile-nick { color: var(--primary); font-weight: 800; opacity: 1; }
.profile-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.profile-actions small { opacity: .65; font-size: 12px; flex: 1 1 150px; }
.profile-actions .btn-main { flex: 0 1 auto; }
.btn-main.is-busy { opacity: .7; pointer-events: none; }
@media (max-width: 360px) { .profile-row { flex-direction: column; align-items: center; } .profile-fields { width: 100%; } }

/* =====================================================================
   1.8.0 — доработки после проверки на 360/390 px
   ===================================================================== */
/* Списания: заголовки карточек — название целиком, кнопки переносятся строкой ниже */
.wo-collapsible-head { flex-wrap: wrap; row-gap: 6px; }
.wo-collapsible-head .collapsible-card-toggle { flex: 1 1 210px !important; }
.wo-collapsible-head .orders-small-btn { white-space: nowrap; }
#writeoffs .drinks-card-title > span:first-child { flex: 1 1 170px !important; }
.wo-history-actions { flex-wrap: wrap !important; }
/* Остатки: кнопки загрузки/выгрузки — подписи по словам, при нехватке места переносятся целиком */
.res-actions-row { flex-wrap: wrap !important; }
.res-actions-row .btn-main { flex: 1 1 130px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
/* Каталог: «Стоимость / Фасовка / ед.» — на узком экране цена и фасовка в ряд, единица ниже; подписи не обрезаются */
@media (max-width: 420px) {
    .orders-add-price-vol-row { flex-wrap: wrap !important; }
    .orders-add-price-vol-row > #orders-add-price, .orders-add-price-vol-row > #orders-add-volume { flex: 1 1 calc(50% - 4px) !important; }
    .orders-add-price-vol-row > .orders-add-unit-wrap { flex: 1 1 100% !important; }
    .orders-add-cat-btn { padding: 0 10px !important; }
}
/* Накладные: кнопки снизу — подпись в одну строку */
#nkl-bottom button { white-space: nowrap; min-width: 0; }
@media (max-width: 380px) { #nkl-bottom button { padding-left: 10px !important; padding-right: 10px !important; font-size: 14px !important; } }
/* Окно новой накладной: блоки не сжимаются (превью фото не наезжает на «Категорию») */
.nkl-sheet-body > *, .chat-sheet-body > * { flex-shrink: 0; }
.nkl-preview { flex: 0 0 auto; }
/* Остатки: результат сверки — колонка «Товар» шире, цифры компактно (на телефоне названия не рвутся по буквам) */
.res-item, .res-item-head { display: grid !important; grid-template-columns: minmax(0, 1fr) 52px 52px 62px; gap: 6px; align-items: center; }
.res-item > .res-col, .res-item-head > .res-col { width: auto !important; min-width: 0; }
.res-item > .res-col-name, .res-item-head > .res-col-name { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 400px) { .res-item, .res-item-head { grid-template-columns: minmax(0, 1fr) 42px 42px 52px; gap: 4px; } }
/* Чат на телефоне: долгое нажатие на сообщение открывает меню приложения (копировать / изменить / удалить), а не системное выделение */
@media (hover: none) and (pointer: coarse) {
    .chat-bubble { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
    .chat-bubble a { -webkit-touch-callout: default; }
}