/*
   Elchat — Material 3.

   Единственное место, где живут цвета клиента. Раньше тот же набор был выписан дважды —
   в `Messenger.Web/wwwroot/css/app.css` и в `Messenger.Maui/wwwroot/app.css`, — и правка
   одного файла молча расходилась со вторым: веб и телефон показывали разные оттенки одной
   темы. Host-специфичное (высота вьюпорта, безопасные зоны, экран загрузки) осталось в
   app.css каждого клиента, цвета — здесь.

   Тона выведены из знака (`images/logo.svg`) через HCT — ту же модель, по которой Material
   строит тональные палитры, поэтому светлая и тёмная темы получаются согласованными по
   светлоте, а не подобранными на глаз:

     коралл  #FF5A5F → hue 19.9  chroma 76.5 → палитра S, chroma 48
     индиго  #312E81 → hue 286.9 chroma 48.0 → палитра P, chroma 48
     жёлтый  #FBBF24 → hue 85.5  chroma 56.8 → палитра T, chroma 56
     нейтрали — тот же индиго-оттенок при chroma 6 и 12: это и есть surface tint M3,
     из-за него светлые поверхности слегка лиловые, а не стерильно-серые.

   Chroma кораллу понижена с 76 до 48 намеренно: на полной насыщенности роль secondary
   перетягивала внимание у primary, а тон 40 всё равно уходит в кирпичный. Сам фирменный
   коралл остался константой `--elchat-coral` — им красится знак и надпись «El», где важна
   узнаваемость, а не роль в иерархии.

   Тёмная тема висит на двух селекторах сразу. `.tg-main.tg-dark` — тело приложения,
   `:root.boot-dark` — то, что MudBlazor рисует в портале рядом с корнем (диалоги, меню,
   снекбар) и куда переменные из `.tg-main` не достают. Оба признака держит в согласии
   `messengerSetBootTheme` (messenger.js), но список объявлен один — расходиться нечему.
*/

:root {
    /* ── Фирменные константы ──────────────────────────────────────────────────────
       Не роли M3, а сам знак: цвета логотипа и заставки. Роль выбирается по функции,
       константа — по узнаваемости, и подменять одно другим нельзя. */
    --elchat-coral: #FF5A5F;
    --elchat-coral-dark: #fb8b89;
    --elchat-indigo: #312E81;
    --elchat-indigo-dark: #c3c0ff;
    --elchat-yellow: #FBBF24;

    /* ── Роли M3, светлая тема ──────────────────────────────────────────────────── */
    --m3-primary: #5654a8;                    /* P40 */
    --m3-on-primary: #ffffff;                 /* P100 */
    --m3-primary-container: #e2dfff;          /* P90 */
    --m3-on-primary-container: #100563;       /* P10 */

    --m3-secondary: #9c4142;                  /* S40 */
    --m3-on-secondary: #ffffff;               /* S100 */
    --m3-secondary-container: #ffdad8;        /* S90 */
    --m3-on-secondary-container: #410007;     /* S10 */

    --m3-tertiary: #795900;                   /* T40 */
    --m3-on-tertiary: #ffffff;                /* T100 */
    --m3-tertiary-container: #ffdf9f;         /* T90 */
    --m3-on-tertiary-container: #261a00;      /* T10 */

    --m3-error: #ba1a1a;                      /* E40 */
    --m3-on-error: #ffffff;                   /* E100 */
    --m3-error-container: #ffdad6;            /* E90 */
    --m3-on-error-container: #410002;         /* E10 */

    /* Успеха в M3 нет — заведён по той же схеме, чтобы «доставлено» и «на линии»
       не приходилось красить случайным зелёным. */
    --m3-success: #146d29;                    /* G40 */
    --m3-on-success: #ffffff;
    --m3-success-container: #a0f7a2;          /* G90 */
    --m3-on-success-container: #002106;       /* G10 */

    --m3-surface: #fcf8ff;                    /* N98 */
    --m3-on-surface: #1b1b21;                 /* N10 */
    --m3-surface-variant: #e4e0f2;            /* NV90 */
    --m3-on-surface-variant: #464554;         /* NV30 */
    --m3-surface-dim: #dcd9e0;                /* N87 */
    --m3-surface-bright: #fcf8ff;             /* N98 */

    /* Пять уровней поверхностей — та самая «глубина тоном» вместо теней и размытия:
       чем выше элемент, тем плотнее его подложка. */
    --m3-surface-container-lowest: #ffffff;   /* N100 */
    --m3-surface-container-low: #f6f2fa;      /* N96 */
    --m3-surface-container: #f0ecf4;          /* N94 */
    --m3-surface-container-high: #eae7ef;     /* N92 */
    --m3-surface-container-highest: #e5e1e9;  /* N90 */

    --m3-outline: #777585;                    /* NV50 */
    --m3-outline-variant: #c7c4d6;            /* NV80 */

    --m3-inverse-surface: #303036;            /* N20 */
    --m3-inverse-on-surface: #f3eff7;         /* N95 */
    --m3-inverse-primary: #c3c0ff;            /* P80 */

    --m3-shadow: 0, 0, 0;
    --m3-scrim: 0, 0, 0;

    /* ── Форма ──────────────────────────────────────────────────────────────────── */
    --m3-shape-xs: 4px;
    --m3-shape-sm: 8px;
    --m3-shape-md: 12px;
    --m3-shape-lg: 16px;
    --m3-shape-xl: 28px;
    --m3-shape-full: 999px;

    /* ── Тени ───────────────────────────────────────────────────────────────────── */
    --m3-elevation-0: none;
    --m3-elevation-1: 0 1px 2px 0 rgba(var(--m3-shadow), .30), 0 1px 3px 1px rgba(var(--m3-shadow), .15);
    --m3-elevation-2: 0 1px 2px 0 rgba(var(--m3-shadow), .30), 0 2px 6px 2px rgba(var(--m3-shadow), .15);
    --m3-elevation-3: 0 1px 3px 0 rgba(var(--m3-shadow), .30), 0 4px 8px 3px rgba(var(--m3-shadow), .15);
    --m3-elevation-4: 0 2px 3px 0 rgba(var(--m3-shadow), .30), 0 6px 10px 4px rgba(var(--m3-shadow), .15);
    --m3-elevation-5: 0 4px 4px 0 rgba(var(--m3-shadow), .30), 0 8px 12px 6px rgba(var(--m3-shadow), .15);

    /* ── Слой состояния ─────────────────────────────────────────────────────────────
       В M3 наведение и нажатие не меняют цвет фона, а кладут поверх него плёнку из
       цвета содержимого с фиксированной прозрачностью. Одна плёнка на все элементы —
       поэтому кнопка на светлой карточке и на тёмной панели отзываются одинаково. */
    --m3-state-hover: .08;
    --m3-state-focus: .10;
    --m3-state-press: .10;
    --m3-state-drag: .16;
    --m3-state-disabled-content: .38;
    --m3-state-disabled-surface: .12;

    /* ── Движение ───────────────────────────────────────────────────────────────── */
    --m3-easing-standard: cubic-bezier(.2, 0, 0, 1);
    --m3-easing-decelerate: cubic-bezier(0, 0, 0, 1);
    --m3-easing-accelerate: cubic-bezier(.3, 0, 1, 1);
    --m3-easing-emphasized: cubic-bezier(.2, 0, 0, 1);
    --m3-easing-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);
    --m3-easing-emphasized-accelerate: cubic-bezier(.3, 0, .8, .15);
    --m3-duration-short2: 100ms;
    --m3-duration-short4: 200ms;
    --m3-duration-medium1: 250ms;
    --m3-duration-medium2: 300ms;
    --m3-duration-long2: 500ms;
}

/* ── Роли M3, тёмная тема ──────────────────────────────────────────────────────────
   Переопределяются только цвета: форма, тени, состояния и движение от темы не зависят. */
:root.boot-dark,
.tg-main.tg-dark {
    --m3-primary: #c3c0ff;                    /* P80 */
    --m3-on-primary: #272377;                 /* P20 */
    --m3-primary-container: #3e3c8f;          /* P30 */
    --m3-on-primary-container: #e2dfff;       /* P90 */

    --m3-secondary: #ffb3b0;                  /* S80 */
    --m3-on-secondary: #5f1318;               /* S20 */
    --m3-secondary-container: #7e2a2c;        /* S30 */
    --m3-on-secondary-container: #ffdad8;     /* S90 */

    --m3-tertiary: #f8bd26;                   /* T80 */
    --m3-on-tertiary: #402d00;                /* T20 */
    --m3-tertiary-container: #5c4300;         /* T30 */
    --m3-on-tertiary-container: #ffdf9f;      /* T90 */

    --m3-error: #ffb4ab;                      /* E80 */
    --m3-on-error: #690005;                   /* E20 */
    --m3-error-container: #93000a;            /* E30 */
    --m3-on-error-container: #ffdad6;         /* E90 */

    --m3-success: #84da88;                    /* G80 */
    --m3-on-success: #00390f;                 /* G20 */
    --m3-success-container: #00531a;          /* G30 */
    --m3-on-success-container: #a0f7a2;       /* G90 */

    --m3-surface: #131318;                    /* N6 */
    --m3-on-surface: #e5e1e9;                 /* N90 */
    --m3-surface-variant: #464554;            /* NV30 */
    --m3-on-surface-variant: #c7c4d6;         /* NV80 */
    --m3-surface-dim: #131318;                /* N6 */
    --m3-surface-bright: #39383f;             /* N24 */

    --m3-surface-container-lowest: #0e0e13;   /* N4 */
    --m3-surface-container-low: #1b1b21;      /* N10 */
    --m3-surface-container: #201f25;          /* N12 */
    --m3-surface-container-high: #2a292f;     /* N17 */
    --m3-surface-container-highest: #35343a;  /* N22 */

    --m3-outline: #918f9f;                    /* NV60 */
    --m3-outline-variant: #464554;            /* NV30 */

    --m3-inverse-surface: #e5e1e9;            /* N90 */
    --m3-inverse-on-surface: #303036;         /* N20 */
    --m3-inverse-primary: #5654a8;            /* P40 */
}

/*
   ── Совместимость: прежние имена поверх ролей M3 ──────────────────────────────────

   Компоненты клиента (около пятидесяти файлов изоляции) обращаются к `--tg-*`, `--cib-*`
   и `--isc-*`. Переписывать их поимённо незачем: имя — это назначение («подложка панели»,
   «фон входящего пузыря»), и достаточно подставить под него роль M3.

   Ссылки на роли, а не значения: `var()` вычисляется в момент использования, поэтому один
   список работает в обеих темах, и тёмный вариант ниже перечисляет только то, где светлая
   и тёмная тема берут РАЗНЫЕ роли, а не разные значения одной.
*/
:root,
.tg-main {
    /* Поверхности */
    --tg-app-bg: var(--m3-surface);
    --tg-chat-bg: var(--m3-surface);
    --tg-sidebar-bg: var(--m3-surface-container-low);
    --tg-panel-bg: var(--m3-surface-container-lowest);
    --tg-soft-bg: var(--m3-surface-container);
    --tg-hover-bg: var(--m3-surface-container-high);
    --tg-border: var(--m3-outline-variant);
    --tg-muted: var(--m3-on-surface-variant);

    /* Верхняя полоса. В M3 она лежит в одной плоскости с содержимым и отделяется тоном
       при прокрутке, а не рамкой и тенью на месте — отсюда прозрачные border и shadow. */
    --tg-appbar-bg: var(--m3-surface);
    --tg-appbar-border: transparent;
    --tg-appbar-shadow: transparent;

    /* Управляющие элементы */
    --tg-control-surface: var(--m3-surface-container-high);
    --tg-control-hover-surface: var(--m3-surface-container-highest);
    --tg-control-bg: var(--m3-surface-container-high);
    --tg-control-hover: var(--m3-surface-container-highest);
    --tg-control-active: color-mix(in srgb, var(--m3-primary) 12%, transparent);

    /* Раньше здесь было матовое стекло: полупрозрачная подложка плюс backdrop-filter.
       В M3 всплывающая поверхность непрозрачна и поднимается тоном, поэтому имена
       остались (их зовут полсотни файлов), а значения стали обычными контейнерами. */
    --tg-glass-bg: var(--m3-surface-container);
    --tg-glass-strong: var(--m3-surface-container-high);
    --tg-glass-border: var(--m3-outline-variant);

    --tg-focus-ring: 0 0 0 3px color-mix(in srgb, var(--m3-primary) 40%, transparent);
    --tg-shadow: var(--m3-elevation-2);
    --tg-shadow-soft: var(--m3-elevation-1);
    --tg-shadow-float: var(--m3-elevation-3);

    /* Лента и пузыри */
    --tg-in-bg: var(--m3-surface-container-high);
    --tg-out-bg: var(--m3-primary);
    --cib-out-text: var(--m3-on-primary);
    --cib-message-text: var(--m3-on-surface);
    /* Время и галочки внутри своего пузыря — тот же цвет текста, приглушённый. Отдельным
       оттенком он расходился с пузырём при каждой смене подложки. */
    --tg-out-meta: color-mix(in srgb, var(--cib-out-text) 74%, transparent);
    --tg-bubble-border: transparent;
    --tg-radius-bubble: 20px;
    /* Внутренние углы стопки сообщений одного человека. */
    --tg-radius-bubble-tight: 6px;

    /* Список бесед. Выбранная строка в M3 — secondary-container: та же роль, что у
       выбранного пункта навигации, и читается она как выбор, а не как ошибка. */
    --cib-brand-surface: var(--m3-primary-container);
    --cib-active-surface: var(--m3-secondary-container);
    --cib-active-text: var(--m3-on-secondary-container);

    /* Вход */
    --isc-login-surface: var(--m3-surface-container-low);
    --isc-login-surface-solid: var(--m3-surface-container-low);
    --isc-login-border: var(--m3-outline-variant);
    --isc-login-text: var(--m3-on-surface);
    --isc-login-muted: var(--m3-on-surface-variant);
    --isc-login-soft: var(--m3-surface-container);
    --isc-login-disabled: color-mix(in srgb, var(--m3-on-surface) 12%, transparent);
    --isc-login-shadow: var(--m3-elevation-2);
    --isc-logo-surface: var(--m3-primary-container);
    /* Ссылки и подписи экрана входа — роль secondary: она читаема в обеих темах. Фирменный
       коралл остался у надписи «El», где важен знак, а не контраст мелкого текста. */
    --isc-login-accent: var(--m3-secondary);
    /* Ровная поверхность, как и в области чата. Здесь лежали два радиальных пятна —
       коралловое и индиговое; от кораллового угол экрана уходил в розовое, и это было
       ровно то, что не нравилось в ленте. */
    --isc-login-bg: var(--m3-surface);
    --isc-chat-pattern-opacity: .05;

    /* Форма и движение */
    /* Не «полный» радиус, хотя имя просится. Токеном скруглены не только кнопки и поля, но и
       строка беседы, и карточки: у элемента в 44–48 px 22 px и так дают таблетку, а на
       строке в 68 px «полный» превращался в лозенг и загибал угол прямо под отметку
       времени. Настоящая таблетка там, где она нужна по смыслу, берётся из --m3-shape-full
       напрямую — так у кнопок в design-system.css. */
    --tg-radius-control: 22px;
    --tg-radius-row: var(--m3-shape-lg);
    --tg-radius-card: var(--m3-shape-lg);
    --tg-radius-dialog: var(--m3-shape-xl);
    --tg-radius-media: var(--m3-shape-md);
    --tg-motion-standard: var(--m3-easing-standard);
    --tg-motion-fast: 150ms;
    --tg-motion-page: var(--m3-duration-medium1);

    /* Карта. Тайлы приходят светлыми, под тёмную тему их гасит фильтр. */
    --tg-map-base: #e7e2ee;
    --tg-map-tile-filter: saturate(.92) contrast(.96) brightness(1.04);
    --tg-map-shade: linear-gradient(180deg, transparent 58%, rgba(27, 27, 33, .12));

    /* Раскладка (к теме отношения не имеет, но живёт тем же набором) */
    --tg-mobile-nav-height: 72px;
    --tg-mobile-nav-clearance: calc(92px + env(safe-area-inset-bottom));
}

/* Только то, где тёмная тема берёт другую РОЛЬ, а не другое значение той же роли. */
:root.boot-dark,
.tg-main.tg-dark {
    /* Карточка обязана быть светлее фона — это и означает «поднята». В светлой теме роль
       surface-container-lowest белая и работает как надо, в тёмной она самая ТЁМНАЯ из
       контейнеров (#0e0e13 против фона #131318), и панель проваливалась в дыру вместо того,
       чтобы подняться. Отсюда своя роль на тему, а не общая. */
    --tg-panel-bg: var(--m3-surface-container);

    /* Свой пузырь. В светлой это залитый primary с белым текстом; в тёмной primary —
       уже светлая лаванда (P80), и залитый ею пузырь светился бы ярче ленты. Роль
       контейнера даёт ту же индиго-заливку нужной глубины. */
    --tg-out-bg: var(--m3-primary-container);
    --cib-out-text: var(--m3-on-primary-container);
    --isc-chat-pattern-opacity: .03;
    --tg-map-base: #1b1a27;
    --tg-map-tile-filter: brightness(.62) contrast(1.16) saturate(.7);
    --tg-map-shade: linear-gradient(180deg, rgba(10, 10, 14, .12), rgba(10, 10, 14, .38));
}

/* Фон и схема — на самом контейнере: без них браузер рисует системными цветами
   поля форм, полосы прокрутки и подсветку выделения. */
.tg-main {
    background: var(--m3-surface);
    color-scheme: light;
}

.tg-main.tg-dark {
    background: var(--m3-surface);
    color-scheme: dark;
}