/* Слой стиля iOS (UiStyle.Ios, docs/ui-styles.md) поверх основы — Material 3, стиля Android.
   Каждое правило начинается с :root[data-ui="ios"]: так стиль не протекает в соседний (гейт —
   UiStyleLayerTests), а index.html оболочек подключает файл выключенным (media="not all") и
   включает его messenger.js, только когда выбран iOS, — Android правил этого файла не
   сопоставляет вовсе. Раскладка та же, что у основы; меняются поверхности (системные цвета
   Apple вместо тональных M3), элементы управления — как в iOS 26 и 27 — и типографика: круглые
   стеклянные кнопки навигации (назад — шевроном), капсула поиска, общая капсула действий в
   шапке беседы, «линза» под активной вкладкой, сгруппированные списки, переключатели и
   сегментированный отбор, таблетки вместо контурных кнопок, системный шрифт Apple там, где он
   есть. Значки у стиля свои (AppIconSet.Ios) — здесь их нет.

   Стекло здесь «тонированное» (так iOS 27 называет непрозрачный край ползунка прозрачности):
   ровная заливка, блик по верхней кромке и тёмная окантовка — новшество iOS 27, отделяющее
   стекло от содержимого. Размытия (backdrop-filter) у этих элементов нет намеренно: под
   кнопками шапки и поиска ничего не движется, размывать нечего, а в WebView на Android каждый
   такой слой — работа главного потока на каждом кадре. Настоящее стекло остаётся только у
   плавающих поверхностей, под которыми листается содержимое (полоса разделов, тосты, баннер),
   и там его уровень решает устройство (EffectsPreferences, data-fx). Анимаций тема не
   добавляет. */

:root[data-ui="ios"] {
    --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, sans-serif;
    --ios-control: 44px;

    /* Светлая тема: стекло светлее подложки, блик белый, окантовка — полупрозрачный чёрный. */
    --ios-glass: color-mix(in srgb, var(--m3-surface-container-highest, #e4e1e9) 70%, #fff);
    --ios-glass-edge:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 0 rgba(255, 255, 255, .3),
        0 0 0 .5px rgba(0, 0, 0, .16),
        0 2px 10px rgba(15, 23, 42, .08);
    --ios-glass-on: var(--m3-on-surface, #1b1b21);
    --ios-lens: rgba(0, 0, 0, .065);
    /* Шеврон «назад» iOS — маской: иконку не нужно перерисовывать из .NET при смене стиля. */
    --ios-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M10 2 2 10l8 8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    /* Два шеврона выбора (chevron.up.chevron.down) — у всплывающего списка iOS. */
    --ios-chevron-updown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 6l3-3.2L8 6M2 10l3 3.2L8 10' fill='none' stroke='%238e8e93' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Системные цвета Apple (светлая тема). Сгруппированный список — серая подложка и белые
       ячейки; вторичный текст и разделители — те же доли, что у UIKit, но сплошными цветами:
       полупрозрачный текст на цветной ячейке темнел бы по-разному. */
    --ios-grouped-bg: #f2f2f7;
    --ios-cell: #ffffff;
    --ios-cell-pressed: #d1d1d6;
    --ios-separator: #c6c6c8;
    --ios-label-secondary: #8a8a8e;
    --ios-label-tertiary: #c4c4c7;
    --ios-fill: rgba(120, 120, 128, .12);
    --ios-switch-off: #e9e9ea;
    --ios-segment-on: #ffffff;
    --ios-green: #34c759;
    --ios-red: #ff3b30;
    --ios-gray: #8e8e93;
    --ios-blue: #007aff;
    --ios-purple: #af52de;
    --ios-orange: #ff9500;
    --ios-cyan: #32ade6;
    /* Акцент — системное индиго Apple (systemIndigo): тот же индиго знака, но в яркости
       системных цветов iOS. Приглушённые тона M3 рядом с зелёным переключателем и цветными
       квадратами значков выглядели выцветшими, а в тёмной теме M3 и вовсе берёт пастель
       (лаванду P80) — у iOS акцент в обеих темах насыщенный. Квадрат значка в строке — им же. */
    --ios-indigo: #5856d6;
    --ios-coral: #ff4f55;
    --ios-icon-tile: var(--ios-indigo);
    --ios-group-radius: 22px;

    /* Роли акцента M3 — из той же палитры: кнопки, ссылки, выбранное, свой пузырь. */
    --m3-primary: #5856d6;
    --m3-on-primary: #ffffff;
    --m3-primary-container: #e6e6fa;
    --m3-on-primary-container: #24227a;
    --m3-secondary: #ff4f55;
    --m3-on-secondary: #ffffff;
    --m3-secondary-container: #ffe5e6;
    --m3-on-secondary-container: #7a0f14;
    --m3-error: #ff3b30;
    --m3-on-error: #ffffff;
    --m3-error-container: #ffe5e3;
    --m3-on-error-container: #7a0d06;
    --m3-success: #34c759;

    /* Поверхности основы — системными цветами: так в iOS перекрашивается всё, что берёт их
       ролями M3 (список, лента, пузыри, поля), без правила на каждый экран. */
    --m3-surface: #ffffff;
    --m3-surface-bright: #ffffff;
    --m3-surface-dim: #d1d1d6;
    --m3-surface-variant: #e5e5ea;
    --m3-surface-container-lowest: #ffffff;
    --m3-surface-container-low: #f9f9fb;
    --m3-surface-container: #f2f2f7;
    --m3-surface-container-high: #e9e9eb;
    --m3-surface-container-highest: #e1e1e6;
    --m3-on-surface: #000000;
    --m3-on-surface-variant: #6c6c70;
    --m3-outline: #8e8e93;
    --m3-outline-variant: #c6c6c8;

    /* Палитра MudBlazor задана в C# (MainLayout) сплошными цветами — перекрываем тут же:
       меню и диалоги лежат вне .tg-main и берут только её. */
    --mud-palette-surface: #ffffff;
    --mud-palette-background: #ffffff;
    --mud-palette-text-primary: #000000;
    --mud-palette-text-secondary: #8a8a8e;
    --mud-palette-action-default: #6c6c70;
    --mud-palette-divider: #c6c6c8;
    --mud-palette-lines-default: #c6c6c8;
    --mud-palette-primary: #5856d6;
    --mud-palette-primary-rgb: 88, 86, 214;
    --mud-palette-primary-text: #ffffff;
    --mud-palette-primary-darken: #4745c4;
    --mud-palette-primary-lighten: #7d7be0;
    --mud-palette-primary-hover: rgba(88, 86, 214, .08);
    --mud-palette-secondary: #ff4f55;
    --mud-palette-secondary-rgb: 255, 79, 85;
    --mud-palette-secondary-text: #ffffff;
    --mud-palette-secondary-darken: #e63e44;
    --mud-palette-secondary-lighten: #ff7a7f;
    --mud-palette-secondary-hover: rgba(255, 79, 85, .08);
    --mud-palette-error: #ff3b30;
    --mud-palette-error-rgb: 255, 59, 48;
    --mud-palette-success: #34c759;
    --mud-palette-success-rgb: 52, 199, 89;

    /* Шрифт: у Apple — системный (SF), у остальных первым найдётся Inter, как и без темы. */
    --mud-typography-default-family: var(--ios-font);
    --mud-typography-h1-family: var(--ios-font);
    --mud-typography-h2-family: var(--ios-font);
    --mud-typography-h3-family: var(--ios-font);
    --mud-typography-h4-family: var(--ios-font);
    --mud-typography-h5-family: var(--ios-font);
    --mud-typography-h6-family: var(--ios-font);
    --mud-typography-subtitle1-family: var(--ios-font);
    --mud-typography-subtitle2-family: var(--ios-font);
    --mud-typography-body1-family: var(--ios-font);
    --mud-typography-body2-family: var(--ios-font);
    --mud-typography-button-family: var(--ios-font);
    --mud-typography-caption-family: var(--ios-font);
    --mud-typography-overline-family: var(--ios-font);
}

/* Тёмная: стекло — тёмно-серое, как systemGray5 у Apple, блик тусклее, окантовка почти чёрная. */
:root[data-ui="ios"].boot-dark,
:root[data-ui="ios"] .tg-main.tg-dark {
    --ios-glass: color-mix(in srgb, #2c2c2e 92%, #fff);
    --ios-glass-edge:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        inset 0 -1px 0 rgba(255, 255, 255, .05),
        0 0 0 .5px rgba(0, 0, 0, .75),
        0 2px 12px rgba(0, 0, 0, .35);
    --ios-glass-on: #f2f2f7;
    --ios-lens: rgba(255, 255, 255, .13);

    --ios-grouped-bg: #000000;
    --ios-cell: #1c1c1e;
    --ios-cell-pressed: #3a3a3c;
    --ios-separator: #38383a;
    --ios-label-secondary: #8d8d93;
    --ios-label-tertiary: #5a5a5f;
    --ios-fill: rgba(118, 118, 128, .24);
    --ios-switch-off: #39393d;
    --ios-segment-on: #636366;
    --ios-green: #30d158;
    --ios-red: #ff453a;
    --ios-blue: #0a84ff;
    --ios-purple: #bf5af2;
    --ios-orange: #ff9f0a;
    --ios-cyan: #64d2ff;
    --ios-indigo: #5e5ce6;
    --ios-coral: #ff5a60;
    --ios-icon-tile: var(--ios-indigo);

    --mud-palette-surface: #1c1c1e;
    --mud-palette-background: #000000;
    --mud-palette-text-primary: #ffffff;
    --mud-palette-text-secondary: #8d8d93;
    --mud-palette-action-default: #98989f;
    --mud-palette-divider: #38383a;
    --mud-palette-lines-default: #38383a;
    --mud-palette-primary: #5e5ce6;
    --mud-palette-primary-rgb: 94, 92, 230;
    --mud-palette-primary-text: #ffffff;
    --mud-palette-primary-darken: #4d4bd4;
    --mud-palette-primary-lighten: #8280ec;
    --mud-palette-primary-hover: rgba(94, 92, 230, .12);
    --mud-palette-secondary: #ff5a60;
    --mud-palette-secondary-rgb: 255, 90, 96;
    --mud-palette-secondary-text: #ffffff;
    --mud-palette-secondary-darken: #e8474d;
    --mud-palette-secondary-lighten: #ff8387;
    --mud-palette-secondary-hover: rgba(255, 90, 96, .12);
    --mud-palette-error: #ff453a;
    --mud-palette-error-rgb: 255, 69, 58;
    --mud-palette-success: #30d158;
    --mud-palette-success-rgb: 48, 209, 88;
}

/* Тёмная палитра основы объявлена на .tg-main.tg-dark — перекрывать её надо там же. */
:root[data-ui="ios"] .tg-main.tg-dark {
    --m3-surface: #000000;
    --m3-surface-bright: #2c2c2e;
    --m3-surface-dim: #000000;
    --m3-surface-variant: #2c2c2e;
    --m3-surface-container-lowest: #000000;
    --m3-surface-container-low: #0d0d0e;
    --m3-surface-container: #1c1c1e;
    --m3-surface-container-high: #2c2c2e;
    --m3-surface-container-highest: #3a3a3c;
    --m3-on-surface: #ffffff;
    --m3-on-surface-variant: #98989f;
    --m3-outline: #636366;
    --m3-outline-variant: #38383a;

    /* Акцент в тёмной теме остаётся насыщенным, как у iOS, а не пастельным, как у M3. */
    --m3-primary: #5e5ce6;
    --m3-on-primary: #ffffff;
    --m3-primary-container: #2a2970;
    --m3-on-primary-container: #e1e0ff;
    --m3-secondary: #ff5a60;
    --m3-on-secondary: #ffffff;
    --m3-secondary-container: #5c1a1d;
    --m3-on-secondary-container: #ffdadb;
    --m3-error: #ff453a;
    --m3-on-error: #ffffff;
    --m3-error-container: #5c1511;
    --m3-on-error-container: #ffdad6;
    --m3-success: #30d158;
}

/* Список бесед и панели — ровно белые (в тёмной — чёрные), как списки iOS: основа держит их на
   тон ниже карточек, а здесь уровни различает сгруппированная подложка. Свой пузырь — залитый
   акцентом с белым текстом в обеих темах, как у iMessage (основа в тёмной берёт контейнер). Выбранная
   беседа — лёгкий тон акцента, а не коралловый контейнер M3. */
:root[data-ui="ios"] .tg-main {
    --tg-sidebar-bg: var(--m3-surface);
    --tg-out-bg: var(--m3-primary);
    --cib-out-text: var(--m3-on-primary);
    --cib-active-surface: var(--m3-primary-container);
    --cib-active-text: var(--m3-on-primary-container);
    --tg-radius-bubble: 18px;
    --tg-radius-bubble-tight: 5px;
}

:root[data-ui="ios"] body { font-family: var(--ios-font); }

/* --- Круглые кнопки: назад, меню, закрыть ---------------------------------------------- */

:root[data-ui="ios"] .app-page-back,
:root[data-ui="ios"] .chat-root .header .back-btn,
:root[data-ui="ios"] .app-menu.compact > .mud-button-root {
    position: relative;
    flex: 0 0 var(--ios-control);
    width: var(--ios-control);
    min-width: var(--ios-control);
    height: var(--ios-control);
    min-height: var(--ios-control);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ios-glass);
    box-shadow: var(--ios-glass-edge);
    color: var(--ios-glass-on);
}

:root[data-ui="ios"] .app-page-back:hover,
:root[data-ui="ios"] .app-menu.compact > .mud-button-root:hover {
    background: var(--ios-glass);
    color: var(--ios-glass-on);
}

:root[data-ui="ios"] .app-page-back:active,
:root[data-ui="ios"] .chat-root .header .back-btn:active,
:root[data-ui="ios"] .app-menu.compact > .mud-button-root:active {
    transform: scale(.94);
}

/* Стрелка Material прячется, на её месте — шеврон iOS той же кнопкой. */
:root[data-ui="ios"] .app-page-back .mud-icon-root,
:root[data-ui="ios"] .chat-root .header .back-btn .mud-icon-root {
    opacity: 0;
}

:root[data-ui="ios"] .app-page-back::before,
:root[data-ui="ios"] .chat-root .header .back-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 11px;
    height: 19px;
    margin: auto;
    background: currentColor;
    -webkit-mask: var(--ios-chevron-left) center / contain no-repeat;
    mask: var(--ios-chevron-left) center / contain no-repeat;
    pointer-events: none;
}

/* Закрыть в просмотрщиках фото, видео и карты: над тёмным содержимым — тёмное стекло всегда. */
:root[data-ui="ios"] .viewer-action {
    border: 0;
    border-radius: 50%;
    background: rgba(44, 44, 46, .82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 0 0 .5px rgba(0, 0, 0, .75),
        0 6px 18px rgba(0, 0, 0, .35);
    color: #f2f2f7;
}

/* --- Шапка беседы: назад — кругом, действия — одной капсулой, как в iOS 26 ------------- */

:root[data-ui="ios"] .chat-root .header {
    gap: 8px;
}

:root[data-ui="ios"] .chat-root .header .header-actions {
    gap: 0;
    height: var(--ios-control);
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ios-glass);
    box-shadow: var(--ios-glass-edge);
}

:root[data-ui="ios"] .chat-root .header .header-actions .mud-icon-button {
    width: 38px;
    height: 38px;
    background: transparent;
    box-shadow: none;
    color: var(--ios-glass-on);
    transform: none;
}

:root[data-ui="ios"] .chat-root .header .header-actions .call-action,
:root[data-ui="ios"] .chat-root .header .header-actions .members-action,
:root[data-ui="ios"] .chat-root .header .header-actions .group-call-action {
    color: var(--mud-palette-primary, #312E81);
}

:root[data-ui="ios"] .chat-root .header .header-actions .mud-icon-button:hover {
    background: var(--ios-lens);
    transform: none;
}

/* --- Поиск: плоская серая капсула ------------------------------------------------------ */

/* Поле поиска в списке у iOS — не стекло, а серая заливка системного тона без тени: тем же
   тоном залит сегментированный отбор под ним, и два элемента подряд читаются одним набором. */
:root[data-ui="ios"] .search-link,
:root[data-ui="ios"] .search-page .search-field,
:root[data-ui="ios"] .contacts-page .search-field {
    border: 0;
    border-radius: 999px;
    background: var(--ios-fill);
    box-shadow: none;
}

:root[data-ui="ios"] .search-page .search-field:focus-within,
:root[data-ui="ios"] .contacts-page .search-field:focus-within {
    background: var(--ios-fill);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

/* --- Нижняя полоса разделов: подписи iOS и «линза» под активной вкладкой -------------- */

@media (max-width: 768px) {
    :root[data-ui="ios"] .section-nav {
        gap: 0;
        padding: 4px;
    }

    :root[data-ui="ios"] .section-nav .nav-item {
        gap: 1px;
        font-size: .63rem;
        font-weight: 600;
        letter-spacing: 0;
    }

    /* Линза — ровная подложка, без перехода: смена вкладки перекрашивает два пункта одним
       кадром, как и без неё (SectionNavigation.razor.css, «Активный пункт»). */
    :root[data-ui="ios"] .section-nav .nav-item.active {
        background: var(--ios-lens);
    }
}

/* Тёмная окантовка iOS 27 — и у плавающего стекла: без неё капсула над светлым содержимым
   теряла край. Простое оформление устройства берёт «тонированное» стекло этой темы — та же
   заливка и блик, что у кнопок, без размытия. */
:root[data-ui="ios"][data-fx="liquid"] .tg-main {
    --tg-float-shadow:
        inset 0 1px 0.5px rgba(255, 255, 255, .6),
        inset 0 -1px 1px rgba(255, 255, 255, .16),
        0 0 0 .5px rgba(0, 0, 0, .22),
        0 12px 32px rgba(4, 12, 24, .24);
}

:root[data-ui="ios"][data-fx="simple"] .tg-main {
    --tg-float-bg: var(--ios-glass);
    --tg-float-shadow: var(--ios-glass-edge), 0 10px 26px rgba(4, 12, 24, .14);
}

/* --- Кнопка нового сообщения: цвет знака, но стекло iOS — блик и окантовка -------------- */

:root[data-ui="ios"] .sidebar .compose-fab {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        0 0 0 .5px rgba(0, 0, 0, .22),
        0 8px 22px color-mix(in srgb, var(--mud-palette-primary, #312E81) 30%, transparent);
}

/* --- Поле ввода беседы: кнопки кругами, поле — капсулой ------------------------------- */

:root[data-ui="ios"] .composer .attach,
:root[data-ui="ios"] .composer .emoji-btn {
    border-radius: 50%;
    background: var(--ios-glass);
    box-shadow: var(--ios-glass-edge);
    color: var(--ios-glass-on);
}

:root[data-ui="ios"] .composer .attach:hover {
    background: var(--ios-glass);
}

:root[data-ui="ios"] .composer .field.grow,
:root[data-ui="ios"] .composer .field .mud-input-outlined {
    border-color: transparent;
    background: var(--ios-glass);
    box-shadow: var(--ios-glass-edge);
}

/* --- Контурные кнопки — стеклянные таблетки ------------------------------------------- */

:root[data-ui="ios"] .tg-main .mud-button-root.mud-button-outlined {
    border: 0;
    border-radius: 999px;
    background: var(--ios-glass);
    box-shadow: var(--ios-glass-edge);
    color: var(--ios-glass-on);
}

/* --- Сгруппированные списки: настройки, профиль, информация о беседе ------------------- */

/* Подложка страниц-списков — серая, ячейки — белые, как в «Настройках» iOS. */
:root[data-ui="ios"] .settings-page,
:root[data-ui="ios"] .profile-page,
:root[data-ui="ios"] .services-page,
:root[data-ui="ios"] .wallet-page {
    background: var(--ios-grouped-bg);
}

:root[data-ui="ios"] .settings-card,
:root[data-ui="ios"] .profile-page .settings-section,
:root[data-ui="ios"] .profile-page .identity-card {
    padding: 10px 0 4px;
    border: 0;
    border-radius: var(--ios-group-radius);
    background: var(--ios-cell);
    box-shadow: none;
}

:root[data-ui="ios"] .profile-page .identity-card {
    padding: 22px 16px;
}

:root[data-ui="ios"] .profile-page .settings-section {
    padding: 14px 16px;
}

/* Заголовок группы — мелкими прописными серым, без значка: у iOS он подписывает группу, а не
   украшает её. */
:root[data-ui="ios"] .settings-card .section-icon {
    display: none;
}

:root[data-ui="ios"] .settings-card .section-heading {
    margin: 0 0 2px;
    padding: 4px 16px 6px;
}

:root[data-ui="ios"] .settings-card .section-heading h2,
:root[data-ui="ios"] .profile-page .section-heading h2 {
    color: var(--ios-label-secondary);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
}

:root[data-ui="ios"] .settings-card .section-heading p,
:root[data-ui="ios"] .profile-page .section-heading p {
    color: var(--ios-label-secondary);
    font-size: .8125rem;
    line-height: 1.35;
}

/* Строка — во всю ширину ячейки, разделитель — волосяная линия от текста до края, как в UIKit. */
:root[data-ui="ios"] .setting-row {
    position: relative;
    min-height: 50px;
    gap: 14px;
    padding: 8px 16px;
    border-radius: 0;
    transition: background-color .2s ease;
}

:root[data-ui="ios"] .setting-row + .setting-row::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 60px;
    height: 1px;
    background: var(--ios-separator);
    transform: scaleY(.5);
    transform-origin: top;
}

:root[data-ui="ios"] .setting-row.actionable:hover {
    background: color-mix(in srgb, var(--ios-cell-pressed) 35%, transparent);
}

:root[data-ui="ios"] .setting-row.actionable:active {
    background: var(--ios-cell-pressed);
    transform: none;
    transition-duration: 0s;
}

/* Значок строки — белый рисунок в цветном скруглённом квадрате. */
:root[data-ui="ios"] .settings-card .row-icon,
:root[data-ui="ios"] .profile-page .row-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ios-icon-tile);
    color: #fff;
}

:root[data-ui="ios"] .settings-card .row-icon .mud-icon-root,
:root[data-ui="ios"] .profile-page .row-icon .mud-icon-root {
    font-size: 19px;
}

:root[data-ui="ios"] .settings-card .row-icon.neutral { background: var(--ios-gray); color: #fff; }
:root[data-ui="ios"] .settings-card .row-icon.danger { background: var(--ios-red); color: #fff; }

:root[data-ui="ios"] .setting-row .row-copy strong {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -.01em;
}

:root[data-ui="ios"] .setting-row .row-copy small {
    color: var(--ios-label-secondary);
    font-size: .8125rem;
}

:root[data-ui="ios"] .setting-row .row-chevron {
    color: var(--ios-label-tertiary);
    opacity: 1;
}

:root[data-ui="ios"] .settings-card .logout-row .row-copy strong {
    color: var(--ios-red);
}

/* Переключатель iOS: 51×31, шарик 27, включённый — зелёный. */
:root[data-ui="ios"] .toggle {
    width: 51px;
    height: 31px;
    padding: 2px;
    background: var(--ios-switch-off);
    transition: background-color .25s ease;
}

:root[data-ui="ios"] .toggle span {
    width: 27px;
    height: 27px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06), 0 0 0 .5px rgba(0, 0, 0, .04);
    transition: transform .25s cubic-bezier(.3, .7, .4, 1);
}

:root[data-ui="ios"] .toggle.on {
    background: var(--ios-green);
}

:root[data-ui="ios"] .toggle.on span {
    transform: translateX(20px);
}

/* Выбор из списка — серый текст справа с двумя шевронами, в той же строке, как всплывающий
   список iOS. Переноса под подпись, который основа делает на узком экране, здесь нет. */
:root[data-ui="ios"] .select-row {
    flex-wrap: nowrap;
    align-items: center;
}

:root[data-ui="ios"] .select-row select,
:root[data-ui="ios"] .delay-row select {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 44%;
    margin: 0;
    padding: 6px 18px 6px 4px;
    border: 0;
    border-radius: 0;
    background: transparent var(--ios-chevron-updown) right center / 9px 14px no-repeat;
    color: var(--ios-label-secondary);
    font-size: .9375rem;
    text-align: right;
    text-align-last: right;
    -webkit-appearance: none;
    appearance: none;
}

/* Кнопки внутри групп — таблетки без тени. */
:root[data-ui="ios"] .tg-main .mud-button-root.mud-button-filled {
    border-radius: 999px;
    box-shadow: none;
}

/* Информация о беседе: строки — одной белой группой. */
:root[data-ui="ios"] .info-list {
    gap: 0;
    margin: 0 12px;
    padding: 4px 0;
    border-radius: var(--ios-group-radius);
    background: var(--ios-cell);
}

:root[data-ui="ios"] .info-list .info-row {
    border-radius: 0;
}

/* --- Заголовки страниц — крупные, как у iOS ------------------------------------------- */

@media (max-width: 768px) {
    :root[data-ui="ios"] .settings-page .page-header,
    :root[data-ui="ios"] .profile-page .page-header,
    :root[data-ui="ios"] .services-page .services-header,
    :root[data-ui="ios"] .wallet-page .wallet-header {
        border-bottom: 0;
        background: var(--ios-grouped-bg);
        box-shadow: none;
    }

    :root[data-ui="ios"] .settings-page .nav-page-icon,
    :root[data-ui="ios"] .profile-page .nav-page-icon,
    :root[data-ui="ios"] .services-page .nav-page-icon,
    :root[data-ui="ios"] .wallet-page .nav-page-icon {
        display: none;
    }

    :root[data-ui="ios"] .settings-page .page-heading h1,
    :root[data-ui="ios"] .profile-page .page-heading h1,
    :root[data-ui="ios"] .services-page .services-header h1,
    :root[data-ui="ios"] .wallet-page .wallet-header h1 {
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: -.02em;
    }

    :root[data-ui="ios"] .settings-page .page-heading p,
    :root[data-ui="ios"] .profile-page .page-heading p {
        display: none;
    }
}

/* --- Отбор бесед — сегментированный переключатель ------------------------------------- */

:root[data-ui="ios"] .conv-filters {
    gap: 0;
    margin: 4px 16px 10px;
    padding: 2px;
    border-radius: 999px;
    background: var(--ios-fill);
}

:root[data-ui="ios"] .conv-filters .chip {
    flex: 1 1 0;
    height: 30px;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: transparent;
    color: var(--m3-on-surface);
    font-size: .8125rem;
    font-weight: 500;
}

:root[data-ui="ios"] .conv-filters .chip.on {
    background: var(--ios-segment-on);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04), 0 0 0 .5px rgba(0, 0, 0, .04);
    color: var(--m3-on-surface);
    font-weight: 600;
}

:root[data-ui="ios"] .conv-filters .chip:hover {
    background-image: none;
}

/* --- Сервисы и кошелёк: белые ячейки, значки — цветные квадраты ---------------------- */

:root[data-ui="ios"] .service-tile,
:root[data-ui="ios"] .popular-list,
:root[data-ui="ios"] .quick-action,
:root[data-ui="ios"] .payment-list,
:root[data-ui="ios"] .bills-grid {
    border: 0;
    border-radius: var(--ios-group-radius);
    background: var(--ios-cell);
    box-shadow: none;
}

:root[data-ui="ios"] .service-tile:hover,
:root[data-ui="ios"] .quick-action:hover {
    transform: none;
    box-shadow: none;
}

:root[data-ui="ios"] .tile-icon,
:root[data-ui="ios"] .popular-icon,
:root[data-ui="ios"] .quick-icon,
:root[data-ui="ios"] .payment-icon,
:root[data-ui="ios"] .bill-icon {
    border-radius: 10px;
    background: var(--ios-icon-tile);
    color: #fff;
}

:root[data-ui="ios"] .tile-icon.blue,
:root[data-ui="ios"] .bill-icon.blue,
:root[data-ui="ios"] .payment-icon.card { background: var(--ios-blue); color: #fff; }

:root[data-ui="ios"] .tile-icon.violet,
:root[data-ui="ios"] .bill-icon.violet,
:root[data-ui="ios"] .payment-icon.bank { background: var(--ios-purple); color: #fff; }

:root[data-ui="ios"] .tile-icon.orange,
:root[data-ui="ios"] .bill-icon.orange { background: var(--ios-orange); color: #fff; }

:root[data-ui="ios"] .tile-icon.green,
:root[data-ui="ios"] .bill-icon.green { background: var(--ios-green); color: #fff; }

:root[data-ui="ios"] .tile-icon.red,
:root[data-ui="ios"] .bill-icon.red { background: var(--ios-red); color: #fff; }

:root[data-ui="ios"] .tile-icon.cyan,
:root[data-ui="ios"] .bill-icon.cyan { background: var(--ios-cyan); color: #fff; }

/* --- Новое сообщение: действия — цветом акцента, как «Новая группа» в iOS -------------- */

:root[data-ui="ios"] .contacts-page .action-icon {
    background: transparent;
    color: var(--mud-palette-primary);
}

:root[data-ui="ios"] .contacts-page .action-copy strong {
    color: var(--mud-palette-primary);
    font-weight: 500;
}

/* --- Меню и диалоги ------------------------------------------------------------------- */

/* Контекстное меню iOS: скруглённая плита, строки по 44, значок — справа от текста. */
:root[data-ui="ios"] .mud-popover.mud-paper:has(.mud-menu-list) {
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 12px 40px rgba(0, 0, 0, .22);
}

:root[data-ui="ios"] .mud-popover .mud-menu-item {
    min-height: 44px;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px;
    font-size: 1rem;
}

:root[data-ui="ios"] .mud-popover .mud-menu-item .mud-icon-root {
    margin: 0;
    color: var(--m3-on-surface);
}

/* Окно — крупное скругление и кнопки-таблетки, как у iOS 26. */
:root[data-ui="ios"] .mud-dialog {
    border-radius: 28px;
}

:root[data-ui="ios"] .mud-dialog .mud-dialog-actions .mud-button-root {
    border-radius: 999px;
    box-shadow: none;
}

/* --- Поля ввода — залитые, подпись внутри, как в формах iOS ---------------------------- */

/* Контур M3 с подписью в разрыве рамки у iOS смотрелся бы подписью, висящей на кромке:
   рамки нет, поле — серая заливка, а подпись после ввода уходит внутрь, над текстом. */
:root[data-ui="ios"] .mud-input-control .mud-input.mud-input-outlined {
    border-radius: 12px;
    background: var(--ios-fill);
}

:root[data-ui="ios"] .mud-input-control .mud-input.mud-input-outlined .mud-input-outlined-border {
    border: 0;
}

:root[data-ui="ios"] .mud-input-control .mud-input.mud-input-outlined:focus-within {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

:root[data-ui="ios"] .mud-input-control.mud-input-outlined-with-label .mud-input-slot {
    padding-top: 24px;
    padding-bottom: 8px;
}

:root[data-ui="ios"] .mud-input-control .mud-input.mud-shrink ~ .mud-input-label-outlined {
    transform: translate(14px, 7px) scale(.75);
}

/* Плитки у iOS лежат прямо на сгруппированной подложке: вторая серая подложка под ними,
   которую основа даёт тоном контейнера, здесь была бы лишним уровнем. Карточки-заголовки —
   белыми ячейками, как всё остальное. */
:root[data-ui="ios"] .services-page .service-grid,
:root[data-ui="ios"] .wallet-page .quick-grid {
    padding: 0;
    background: transparent;
}

:root[data-ui="ios"] .services-page .identity-card,
:root[data-ui="ios"] .wallet-page .wallet-hero {
    border: 0;
    border-radius: var(--ios-group-radius);
    background: var(--ios-cell);
    box-shadow: none;
}

/* Разрушительное действие в меню у iOS — красным, вместе со значком. */
:root[data-ui="ios"] .mud-popover .mud-menu-item.app-menu-danger,
:root[data-ui="ios"] .mud-popover .mud-menu-item.app-menu-danger .mud-icon-root {
    color: var(--ios-red);
}