/* ==========================================================================
   LSchat — дизайн «iOS 26 Liquid Glass»  (<html data-design="glass">)
   Принцип iOS 26: стекло — только слой навигации (бары, кнопки, меню, шторки).
   Контент (списки, пузыри) остаётся непрозрачным.
   ========================================================================== */
:root[data-design="glass"] {
  --nav-h: 54px;
  --tab-h: 64px;
  --radius-cell: 26px;
  --radius-bubble: 20px;
  --bubble-r: 20px;
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.7);
  --glass-blur: blur(40px) saturate(180%);
  --glass-ring: inset 0 0 0 0.5px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 6px 24px rgba(15, 25, 50, 0.10);
  --glass-shadow-sm: 0 3px 10px rgba(15, 25, 50, 0.08);
  --glass-thumb: rgba(255, 255, 255, 0.85);
  --mesh: radial-gradient(70% 45% at 10% 0%, #D6E4FF 0%, transparent 100%), radial-gradient(55% 40% at 95% 20%, #FFDCEB 0%, transparent 100%), radial-gradient(60% 45% at 45% 100%, #D9F5E6 0%, transparent 100%), #EEF0F5;
  --bg-grouped: #EFF0F5;
  --bg-grouped-cell: #FFFFFF;
  --bubble-in: #E9E9EB;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="glass"]:not([data-theme="light"]) {
    --glass-bg: rgba(50, 50, 58, 0.45); --glass-bg-strong: rgba(56, 56, 64, 0.7);
    --glass-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1.5px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    --glass-shadow: 0 10px 34px rgba(0, 0, 0, 0.55); --glass-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.45); --glass-thumb: rgba(255, 255, 255, 0.16);
    --mesh: radial-gradient(70% 45% at 10% 0%, #16223F 0%, transparent 100%), radial-gradient(55% 40% at 95% 20%, #34192F 0%, transparent 100%), radial-gradient(60% 45% at 45% 100%, #0F2A22 0%, transparent 100%), #08080C;
    --bg-grouped: #08080C; --bg-grouped-cell: #1C1C1E; --bubble-in: #26262A;
  }
}
:root[data-design="glass"][data-theme="dark"] {
  --glass-bg: rgba(50, 50, 58, 0.45); --glass-bg-strong: rgba(56, 56, 64, 0.7);
  --glass-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1.5px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.3);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, 0.55); --glass-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.45); --glass-thumb: rgba(255, 255, 255, 0.16);
  --mesh: radial-gradient(70% 45% at 10% 0%, #16223F 0%, transparent 100%), radial-gradient(55% 40% at 95% 20%, #34192F 0%, transparent 100%), radial-gradient(60% 45% at 45% 100%, #0F2A22 0%, transparent 100%), #08080C;
  --bg-grouped: #08080C; --bg-grouped-cell: #1C1C1E; --bubble-in: #26262A;
}

/* ---------- Стеклянный материал (только навигационный слой) ---------- */
:root[data-design="glass"] .nav-btn,
:root[data-design="glass"] .nav-right:not(:empty),
:root[data-design="glass"] .search-field,
:root[data-design="glass"] .tab-search,
:root[data-design="glass"] .composer-field,
:root[data-design="glass"] .composer .attach-btn,
:root[data-design="glass"] .composer .ttl-btn,
:root[data-design="glass"] .composer .bot-menu,
:root[data-design="glass"] .sheet-group,
:root[data-design="glass"] .sheet-content,
:root[data-design="glass"] .alert,
:root[data-design="glass"] .ctx-menu,
:root[data-design="glass"] .reaction-bar,
:root[data-design="glass"] .toast,
:root[data-design="glass"] .notif,
:root[data-design="glass"] .a2hs-card,
:root[data-design="glass"] .scroll-down,
:root[data-design="glass"] .pinned-bar,
:root[data-design="glass"] .reply-bar,
:root[data-design="glass"] .search-in-chat,
:root[data-design="glass"] .channel-bar,
:root[data-design="glass"] .edit-toolbar,
:root[data-design="glass"] .sel-toolbar,
:root[data-design="glass"] .segmented,
:root[data-design="glass"] .date-chip,
:root[data-design="glass"] .panel,
:root[data-design="glass"] .call-btns .cb:not(.end):not(.accept),
:root[data-design="glass"] .numpad button:not(.txt) {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow-sm), var(--glass-ring);
}
/* элементы внутри стеклянной группы — без собственного стекла */
:root[data-design="glass"] .nav-right .nav-btn { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Фоны ---------- */
:root[data-design="glass"] .ios-app, :root[data-design="glass"] .screen.grouped, :root[data-design="glass"] .lock-screen { background: var(--mesh); }

/* ---------- Tab bar: плавающая капсула + отдельная круглая кнопка поиска ---------- */
:root[data-design="glass"] .tab-bar {
  left: 16px; right: 92px; bottom: calc(var(--sai-bottom) + 12px);
  height: 64px; padding: 6px; border-radius: 32px; overflow: hidden;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-ring);
  transition: transform .5s var(--spring), opacity .3s, right .45s var(--spring), width .45s var(--spring);
}
:root[data-design="glass"] .tab-bar::before {
  content: ""; position: absolute; top: 6px; bottom: 6px; z-index: 0;
  width: calc((100% - 12px) / 4);
  left: calc(6px + var(--tab-i, 2) * ((100% - 12px) / 4));
  border-radius: 26px; background: var(--glass-thumb);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: left .55s var(--spring), opacity .2s;
}
:root[data-design="glass"] .tab-bar.hidden-bar { transform: translateY(calc(100% + 40px)); opacity: 0; }
:root[data-design="glass"] .tab-item { position: relative; z-index: 1; padding-top: 0; gap: 2px; transition: transform .4s var(--spring); }
:root[data-design="glass"] .tab-item:active { transform: scale(0.88); }
:root[data-design="glass"] .tab-icon svg { width: 26px; height: 26px; }
:root[data-design="glass"] .tab-label { font-size: 10px; font-weight: 600; }
:root[data-design="glass"] .tab-badge { top: 4px; }
/* сворачивание при прокрутке вниз: остаётся только активная вкладка */
:root[data-design="glass"] .tab-bar.minimized { right: auto; width: 76px; }
:root[data-design="glass"] .tab-bar.minimized .tab-item:not(.is-active) { display: none; }
:root[data-design="glass"] .tab-bar.minimized::before { left: 6px; width: 64px; }
:root[data-design="glass"] .tab-search {
  display: flex; position: absolute; right: 16px; bottom: calc(var(--sai-bottom) + 12px); z-index: 30;
  width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; color: var(--label);
  transition: transform .5s var(--spring), opacity .3s;
}
:root[data-design="glass"] .tab-search svg { width: 26px; height: 26px; fill: currentColor; }
:root[data-design="glass"] .tab-search:active { transform: scale(0.88); }
:root[data-design="glass"] .tab-bar.hidden-bar ~ .tab-search, :root[data-design="glass"] .tab-search.hidden-bar { transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none; }
:root[data-design="glass"] .screen.with-tab-bar .content { padding-bottom: calc(64px + var(--sai-bottom) + 30px); }
.tab-search { display: none; }

/* ---------- Navigation bar: прозрачная; круглая «назад»; правые кнопки в одной капсуле ---------- */
:root[data-design="glass"] .nav-bar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-design="glass"] .nav-bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -30px; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  opacity: 0; transition: opacity .25s;
}
:root[data-design="glass"] .nav-bar.scrolled { box-shadow: none; }
:root[data-design="glass"] .nav-bar.scrolled::before { opacity: 1; }
:root[data-design="glass"] .nav-row { padding: 0 14px; }
:root[data-design="glass"] .nav-left, :root[data-design="glass"] .nav-right { gap: 6px; }
:root[data-design="glass"] .nav-btn { height: 44px; min-width: 44px; padding: 0 16px; border-radius: 22px; font-weight: 500; transition: transform .4s var(--spring), opacity .15s; }
:root[data-design="glass"] .nav-btn:active { opacity: 1; transform: scale(0.9); }
:root[data-design="glass"] .nav-btn:has(> svg:only-child) { padding: 0; width: 44px; justify-content: center; }
:root[data-design="glass"] .nav-btn.back { width: 44px; padding: 0; justify-content: center; }
:root[data-design="glass"] .nav-btn.back > span { display: none; }
:root[data-design="glass"] .nav-btn.back .chevron { margin: 0 2px 0 0; width: 12px; height: 20px; }
:root[data-design="glass"] .nav-btn.back .count { display: inline-flex; position: absolute; top: -4px; right: -6px; background: var(--sys-red); }
:root[data-design="glass"] .nav-btn.back { position: relative; overflow: visible; }
:root[data-design="glass"] .nav-right:not(:empty) { border-radius: 22px; padding: 0; height: 44px; align-items: center; }
:root[data-design="glass"] .nav-right .nav-btn { height: 44px; }
:root[data-design="glass"] .nav-right .nav-btn:has(> svg:only-child) { width: 44px; }
:root[data-design="glass"] .nav-right .avatar { width: 34px; height: 34px; font-size: 13px; margin: 0 5px; }
:root[data-design="glass"] .nav-title { font-weight: 600; }
:root[data-design="glass"] .nav-chat-title { height: 44px; padding: 0 8px; gap: 8px; }
:root[data-design="glass"] .nav-chat-title .t b { font-size: 16px; }
:root[data-design="glass"] .nav-chat-title .t small { font-size: 11px; }
:root[data-design="glass"] .large-title { font-size: 34px; font-weight: 700; padding-top: 6px; }

/* ---------- Поиск, папки ---------- */
:root[data-design="glass"] .search-field { height: 44px; border-radius: 22px; padding: 0 14px; }
:root[data-design="glass"] .chats-screen:not(.searching) .search-bar { display: none; }
:root[data-design="glass"] .search-bar { padding: 4px 16px 12px; }
:root[data-design="glass"] .folders { border-bottom: 0; padding: 4px 16px 10px; gap: 8px; background: transparent; }
:root[data-design="glass"] .folder-tab { padding: 0 14px; height: 34px; border-radius: 17px; color: var(--label); background: var(--fill-quaternary); font-weight: 600; transition: transform .4s var(--spring), background .2s; }
:root[data-design="glass"] .folder-tab:active { transform: scale(0.94); }
:root[data-design="glass"] .folder-tab.is-active { background: var(--tint); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--tint) 35%, transparent); }
:root[data-design="glass"] .folder-tab.is-active::after { display: none; }
:root[data-design="glass"] .folder-tab.is-active .badge { background: rgba(255, 255, 255, 0.3); }
:root[data-design="glass"] .story .ring { padding: 3px; background: conic-gradient(from 200deg, #FF2D55, #FF9500, #34C759, #007AFF, #AF52DE, #FF2D55); }
:root[data-design="glass"] .story .ring.seen { background: var(--sys-gray4); }
:root[data-design="glass"] .recent-chip { border-radius: 16px; height: 32px; }

/* ---------- Списки (непрозрачные, крупные скругления) ---------- */
:root[data-design="glass"] .group { border-radius: 26px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
:root[data-design="glass"] .cell { min-height: 50px; padding-left: 18px; }
:root[data-design="glass"] .cell::after { left: 18px; }
:root[data-design="glass"] .cell.inset-icon::after { left: 59px; }
:root[data-design="glass"] .cell .icon-box { border-radius: 8px; }
:root[data-design="glass"] .group-header { padding-left: 34px; }
:root[data-design="glass"] .group-footer { margin-left: 34px; margin-right: 34px; }
:root[data-design="glass"] .chat-row { min-height: 78px; }
:root[data-design="glass"] .chat-row.pinned-row { background: var(--bg); }
:root[data-design="glass"] .chat-row .avatar { width: 56px; height: 56px; }
:root[data-design="glass"] .section-letter { background: transparent; }
:root[data-design="glass"] .archive-row { background: var(--bg); }
:root[data-design="glass"] .archive-row .avatar { background: var(--sys-gray); box-shadow: none; }

/* ---------- Кнопки, toggle, segmented ---------- */
:root[data-design="glass"] .btn { border-radius: 26px; height: 52px; box-shadow: 0 8px 20px color-mix(in srgb, var(--tint) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform .4s var(--spring), opacity .15s; }
:root[data-design="glass"] .btn:active { transform: scale(0.96); opacity: 1; }
:root[data-design="glass"] .btn.plain { box-shadow: none; height: auto; }
:root[data-design="glass"] .toggle::after { transition: transform .45s var(--spring); }
:root[data-design="glass"] .segmented { border-radius: 22px; padding: 3px; }
:root[data-design="glass"] .segmented button { border-radius: 19px; height: 34px; }
:root[data-design="glass"] .segmented button.is-active { background: var(--glass-thumb); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
:root[data-design="glass"] .action-row { gap: 10px; }
:root[data-design="glass"] .action-row button { border-radius: 22px; height: 64px; transition: transform .4s var(--spring); }
:root[data-design="glass"] .action-row button:active { transform: scale(0.94); }
:root[data-design="glass"] .select-box { border-width: 2px; }

/* ---------- Сообщения (непрозрачные, глянец у исходящих) ---------- */
:root[data-design="glass"] .msg { padding: 8px 14px 9px; }
:root[data-design="glass"] .msg.out {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bubble-out) 82%, white) 0%, var(--bubble-out) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 8px color-mix(in srgb, var(--bubble-out) 25%, transparent);
}
:root[data-design="glass"] .msg.in { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
:root[data-design="glass"] .msg.media { padding: 3px; }
:root[data-design="glass"] .msg.media .photo { border-radius: 17px; }
:root[data-design="glass"] .msg .quote { border-radius: 8px; }
:root[data-design="glass"] .reaction { height: 28px; border-radius: 14px; transition: transform .35s var(--spring); }
:root[data-design="glass"] .reaction:active { transform: scale(0.85); }
:root[data-design="glass"] .bot-kb button { border-radius: 16px; height: 42px; }
:root[data-design="glass"] .scroll-down { width: 44px; height: 44px; bottom: 16px; color: var(--label); }
:root[data-design="glass"] .date-chip { color: var(--label); }
:root[data-design="glass"] .pinned-bar { margin: 6px 14px 0; border-radius: 20px; border-bottom: 0; padding: 8px 14px; }
:root[data-design="glass"] .search-in-chat { margin: 6px 14px 0; border-radius: 24px; border-bottom: 0; }
:root[data-design="glass"] .search-in-chat .search-field { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Композер в стиле Messages iOS 26: «+» слева, поле-капсула, отправка внутри поля ---------- */
:root[data-design="glass"] .composer { position: relative; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 8px 14px calc(12px + var(--sai-bottom)); gap: 10px; align-items: flex-end; }
:root[data-design="glass"] .composer .attach-btn { width: 46px; height: 46px; margin: 0; color: var(--label); }
:root[data-design="glass"] .composer .attach-btn svg { width: 24px; height: 24px; }
:root[data-design="glass"] .composer .emoji-btn { display: none; }
:root[data-design="glass"] .composer-field { border: 0; border-radius: 23px; min-height: 46px; padding: 0 46px 0 18px; }
:root[data-design="glass"] .composer-field textarea, :root[data-design="glass"] .composer-field .ta { min-height: 44px; padding: 12px 0; }
:root[data-design="glass"] .composer .round-btn.mic, :root[data-design="glass"] .composer .round-btn.send {
  position: absolute; right: 20px; bottom: calc(18px + var(--sai-bottom)); width: 34px; height: 34px; margin: 0; z-index: 2;
}
:root[data-design="glass"] .composer .round-btn.mic { color: var(--label-secondary); background: transparent; }
:root[data-design="glass"] .composer .round-btn.mic.rec { color: #fff; background: var(--sys-red); }
:root[data-design="glass"] .composer .round-btn.send { background: var(--tint); color: #fff; transform: none; opacity: 1; box-shadow: 0 3px 10px color-mix(in srgb, var(--tint) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: transform .35s var(--spring), opacity .15s; }
:root[data-design="glass"] .composer .round-btn.send:disabled { opacity: 0; transform: scale(0.5); pointer-events: none; }
:root[data-design="glass"] .composer .round-btn.mic[hidden] { display: none; }
:root[data-design="glass"] .composer .ttl-btn { width: 46px; height: 46px; }
:root[data-design="glass"] .composer .bot-menu { height: 46px; border-radius: 23px; color: var(--tint); }
:root[data-design="glass"] .composer.recording .round-btn.mic { position: absolute; }
:root[data-design="glass"] .rec-ui { height: 46px; padding-left: 14px; }
:root[data-design="glass"] .reply-bar { margin: 0 14px; border-radius: 20px; border-top: 0; }
:root[data-design="glass"] .channel-bar { margin: 0 16px calc(var(--sai-bottom) + 12px); height: 52px; padding-bottom: 0; border-radius: 26px; }
:root[data-design="glass"] .panel { border-radius: 28px 28px 0 0; }
:root[data-design="glass"] .kb-open .composer { padding-bottom: 8px; }
:root[data-design="glass"] .kb-open .composer .round-btn.mic, :root[data-design="glass"] .kb-open .composer .round-btn.send { bottom: 12px; }
:root[data-design="glass"] .kb-open .channel-bar { margin-bottom: 8px; }

/* ---------- Оверлеи ---------- */
:root[data-design="glass"] .overlay { background: rgba(0, 0, 0, 0.25); }
:root[data-design="glass"] .sheet { width: calc(100% - 24px); margin-bottom: calc(12px + var(--sai-bottom)); }
:root[data-design="glass"] .sheet-group, :root[data-design="glass"] .sheet-content { border-radius: 30px; }
:root[data-design="glass"] .sheet-btn { height: 58px; }
:root[data-design="glass"] .sheet-btn.cancel { background: var(--glass-bg-strong); }
:root[data-design="glass"] .alert { border-radius: 32px; width: 300px; }
:root[data-design="glass"] .alert-body { padding: 26px 20px 18px; }
:root[data-design="glass"] .alert-actions button { height: 50px; }
:root[data-design="glass"] .ctx-menu { border-radius: 26px; min-width: 260px; }
:root[data-design="glass"] .ctx-menu button { height: 48px; }
:root[data-design="glass"] .reaction-bar { border-radius: 30px; padding: 8px 10px; }
:root[data-design="glass"] .toast, :root[data-design="glass"] .notif, :root[data-design="glass"] .a2hs-card { border-radius: 26px; }
:root[data-design="glass"] .modal-screen { border-radius: 32px 32px 0 0; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25); }
:root[data-design="glass"] .modal-screen .nav-bar { border-radius: 32px 32px 0 0; }
:root[data-design="glass"] .edit-toolbar, :root[data-design="glass"] .sel-toolbar { left: 16px; right: 16px; bottom: calc(var(--sai-bottom) + 12px); height: 64px; padding: 0 24px; border-radius: 32px; }
:root[data-design="glass"] .sel-toolbar { position: absolute; z-index: 35; }
:root[data-design="glass"] .kb-open .edit-toolbar, :root[data-design="glass"] .kb-open .sel-toolbar { bottom: 8px; }

/* ---------- Звонок, блокировка, профиль, онбординг ---------- */
:root[data-design="glass"] .call-screen { background: var(--mesh); color: var(--label); }
:root[data-design="glass"] .call-btns .cb svg { fill: var(--label); }
:root[data-design="glass"] .call-btns .cb.end svg, :root[data-design="glass"] .call-btns .cb.accept svg { fill: #fff; }
:root[data-design="glass"] .call-btns .cb.on { background: var(--label); } :root[data-design="glass"] .call-btns .cb.on svg { fill: var(--bg); }
:root[data-design="glass"] .call-btns button { color: var(--label); }
:root[data-design="glass"] .numpad button { transition: transform .3s var(--spring); }
:root[data-design="glass"] .numpad button:active { transform: scale(0.9); }
:root[data-design="glass"] .profile-hdr .avatar.lg { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
:root[data-design="glass"] .onboard .logo { border-radius: 30px; }
:root[data-design="glass"] .phone-input, :root[data-design="glass"] .code-boxes i { border-radius: 18px; border: 0; }
:root[data-design="glass"] .wp-row button, :root[data-design="glass"] .media-grid .tile { border-radius: 14px; }
:root[data-design="glass"] .qr-box canvas { border-radius: 24px; }

/* Переходы: без масштабирования (иначе скачок в конце анимации) */
:root[data-design="glass"] .screen.with-shadow { box-shadow: -8px 0 40px rgba(0, 0, 0, 0.22); }

/* ---------- Шапка чата как в Messages iOS 26: аватар по центру, имя под ним ---------- */
:root[data-design="glass"] .chat-screen .nav-row { height: 80px; align-items: flex-start; padding-top: 8px; }
:root[data-design="glass"] .chat-screen .content { padding-top: calc(80px + var(--sai-top)); }
:root[data-design="glass"] .chat-topbars { top: calc(80px + var(--sai-top)); }
:root[data-design="glass"] .nav-chat-title { flex-direction: column; gap: 3px; height: auto; padding: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-design="glass"] .nav-chat-title .tav { display: flex; width: 42px; height: 42px; font-size: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
:root[data-design="glass"] .nav-chat-title .t b { font-size: 13px; font-weight: 600; max-width: 50vw; }
:root[data-design="glass"] .nav-chat-title .t b::after { content: "›"; font-weight: 400; color: var(--label-tertiary); margin-left: 2px; }
:root[data-design="glass"] .nav-chat-title .t small { font-size: 11px; margin-top: -1px; }
:root[data-design="glass"] .nav-right .nav-av { display: none; }
:root[data-design="glass"] .chat-screen .nav-bar::before { opacity: 1; bottom: -28px; background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.25) 60%, transparent); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%); mask-image: linear-gradient(to bottom, #000 65%, transparent 100%); }
@media (prefers-color-scheme: dark) { :root[data-design="glass"]:not([data-theme="light"]) .chat-screen .nav-bar::before { background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.25) 60%, transparent); } }
:root[data-design="glass"][data-theme="dark"] .chat-screen .nav-bar::before { background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.25) 60%, transparent); }
:root[data-design="glass"] .nav-bar::before { background: linear-gradient(to bottom, rgba(255,255,255,.45), transparent); }
@media (prefers-color-scheme: dark) { :root[data-design="glass"]:not([data-theme="light"]) .nav-bar::before { background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent); } }
:root[data-design="glass"][data-theme="dark"] .nav-bar::before { background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent); }
:root[data-design="glass"] .composer-field textarea, :root[data-design="glass"] .composer-field .ta { display: block; width: 100%; color: var(--label); }
:root[data-design="glass"] .composer-field textarea::placeholder, :root[data-design="glass"] .composer-field .ta:empty::before { color: var(--placeholder); opacity: 1; }
:root[data-design="glass"] .composer .round-btn.mic { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

/* ==========================================================================
   Доводка стекла (03.10.2026): раньше цветной фон был только у сгруппированных
   экранов, а список чатов и переписка оставались белыми — стекло баров не на чем
   было проявиться, и дизайн выглядел как обычный светлый. Теперь фон общий.
   ========================================================================== */
:root[data-design="glass"] .screen { background: var(--mesh); background-attachment: fixed; }
:root[data-design="glass"] .screen > .content { background: transparent; }

/* стекло ближе к iOS 26: прозрачнее, сильнее размытие, живой блик по верхней кромке */
:root[data-design="glass"] {
  --glass-bg: rgba(255, 255, 255, 0.46);
  --glass-bg-strong: rgba(255, 255, 255, 0.62);
  --glass-blur: blur(34px) saturate(190%);
  --glass-ring: inset 0 0 0 0.5px rgba(255, 255, 255, 0.55), inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(120, 130, 160, 0.10);
  --glass-shadow: 0 10px 30px rgba(15, 25, 50, 0.12);
}
:root[data-design="glass"]:not([data-theme="light"]) { }
@media (prefers-color-scheme: dark) {
  :root[data-design="glass"]:not([data-theme="light"]) { --glass-bg: rgba(44, 44, 52, 0.42); --glass-bg-strong: rgba(52, 52, 60, 0.64); }
}
:root[data-design="glass"][data-theme="dark"] { --glass-bg: rgba(44, 44, 52, 0.42); --glass-bg-strong: rgba(52, 52, 60, 0.64); }

/* блик-«линза» по верхнему краю баров — то, что отличает стекло от простой заливки */
:root[data-design="glass"] .nav-bar::after,
:root[data-design="glass"] .tab-bar::after,
:root[data-design="glass"] .composer::after {
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
}

/* разделители в списках не доходят до правого края — как в iOS */
:root[data-design="glass"] .chat-row::after,
:root[data-design="glass"] .cell::after { right: 16px; }

/* подписи вкладок не обрезаются на узких экранах */
:root[data-design="glass"] .tab-label { white-space: nowrap; letter-spacing: -0.2px; }

/* фильтры-капсулы: мягкое стекло вместо плоской серой заливки */
:root[data-design="glass"] .folder-tab {
  background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.6), 0 2px 8px rgba(15, 25, 50, 0.06);
}
:root[data-design="glass"] .folder-tab.is-active { background: var(--tint); box-shadow: 0 6px 18px rgba(0, 122, 255, 0.35); }
@media (prefers-color-scheme: dark) {
  :root[data-design="glass"]:not([data-theme="light"]) .folder-tab { background: rgba(70, 70, 80, 0.5); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
}

/* пузыри переписки: лёгкая стеклянная подложка у входящих, чтобы фон просвечивал */
:root[data-design="glass"] .msg.in {
  background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.6), 0 2px 10px rgba(15, 25, 50, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root[data-design="glass"]:not([data-theme="light"]) .msg.in { background: rgba(60, 60, 68, 0.6); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1); }
}

/* список чатов — стеклянная карточка на цветном фоне, а не белая полоса во всю ширину */
:root[data-design="glass"] .chat-row {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
}
:root[data-design="glass"] .chat-row:first-of-type { border-radius: 26px 26px 0 0; }
:root[data-design="glass"] .chat-row:last-of-type { border-radius: 0 0 26px 26px; }
:root[data-design="glass"] .chat-row:only-of-type { border-radius: 26px; }
:root[data-design="glass"] .chat-list, :root[data-design="glass"] .chats {
  margin: 0 12px; border-radius: 26px; overflow: hidden; box-shadow: var(--glass-shadow-sm);
}
@media (prefers-color-scheme: dark) {
  :root[data-design="glass"]:not([data-theme="light"]) .chat-row { background: rgba(44, 44, 52, 0.55); }
}
:root[data-design="glass"][data-theme="dark"] .chat-row { background: rgba(44, 44, 52, 0.55); }

/* подписи у историй не обрезаются многоточием на первом же слове */
:root[data-design="glass"] .story > span:last-child { max-width: 76px; font-size: 11px; }
:root[data-design="glass"] .chat-row:last-of-type::after, :root[data-design="glass"] .chat-row:only-of-type::after { display: none; }