/* ==========================================================================
   Shustryworks Chat — фирменное оформление
   --------------------------------------------------------------------------
   Файл лежит на сервере: /var/www/element/custom/shustry.css
   Подключается одной строкой в /var/www/element/index.html (перед </head>):

       <link rel="stylesheet" href="/custom/shustry.css">

   Логика: Element сам вешает на <body> класс cpd-theme-light / cpd-theme-dark,
   поэтому здесь две независимые шкуры:
     * светлая  — аккуратный фирменный стиль (индиго, мягкие тени, обои);
     * тёмная  — «ICQ 99» (тёмно-синий, неоново-зелёный, Tahoma, сетка).
   Переключение — штатное, в «Настройки → Оформление».
   После обновления Element строку <link> в index.html нужно вернуть
   (см. Infra.md §18, скрипт Element\scripts\apply-element-design.sh).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. СВЕТЛАЯ ШКУРА — фирменный индиго
   Перекрашиваем только «зелёную» рампу Compound: все акценты Element
   (ссылки, выделение, чекбоксы, точки присутствия, градиентные кнопки)
   ссылаются на неё, поэтому бренд применяется целиком и без ломки вёрстки.
   -------------------------------------------------------------------------- */
body.cpd-theme-light {
    --cpd-color-green-100: #f5f7ff;
    --cpd-color-green-200: #eef2ff;
    --cpd-color-green-300: #e0e7ff;
    --cpd-color-green-400: #c7d2fe;
    --cpd-color-green-500: #a5b4fc;
    --cpd-color-green-600: #818cf8;
    --cpd-color-green-700: #6366f1;
    --cpd-color-green-800: #4f46e5;
    --cpd-color-green-900: #4338ca;
    --cpd-color-green-1000: #3730a3;
    --cpd-color-green-1100: #312e81;
    --cpd-color-green-1200: #29266b;
    --cpd-color-green-1300: #1e1b4b;
    --cpd-color-green-1400: #14123a;

    /* Главные кнопки (Войти, Продолжить, отправка форм) — фирменный индиго,
       вместо почти чёрного Compound-дефолта. */
    --cpd-color-bg-action-primary-rest: #4338ca;
    --cpd-color-bg-action-primary-hovered: #4f46e5;
    --cpd-color-bg-action-primary-pressed: #3730a3;
    --cpd-color-bg-action-primary-disabled: #c7d2fe;
    --cpd-color-text-on-solid-primary: #ffffff;
}

/* Обои ленты сообщений: очень мягкие цветовые пятна по углам. */
body.cpd-theme-light .mx_RoomView_MessageList,
body.cpd-theme-light .mx_RoomView_messagePanel {
    background-image:
        radial-gradient(760px 420px at 8% -10%, rgba(99, 102, 241, 0.10), transparent 70%),
        radial-gradient(680px 380px at 100% 108%, rgba(13, 148, 136, 0.08), transparent 70%);
}

/* Поле ввода: аккуратная «карточка» с мягкой тенью. */
body.cpd-theme-light .mx_MessageComposer_row {
    background-color: #ffffff;
    border: 1px solid #e4e9f4;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(31, 54, 110, 0.07);
    padding: 6px 10px;
}

body.cpd-theme-light .mx_MessageComposer_row:focus-within {
    border-color: #c7d2fe;
    box-shadow: 0 6px 22px rgba(67, 56, 202, 0.14);
}

/* Шапка комнаты — лёгкая стеклянная подложка. */
body.cpd-theme-light .mx_RoomHeader {
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
}

/* Ник автора — плотнее, таймстемп — техничнее. */
body.cpd-theme-light .mx_DisambiguatedProfile_displayName {
    font-weight: 600;
    color: #16233a;
}

body.cpd-theme-light .mx_MessageTimestamp {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 11px;
    color: #7d8aa3;
}

/* --------------------------------------------------------------------------
   2. ТЁМНАЯ ШКУРА — «ICQ 99»
   «Серая» рампа заменяется на тёмно-синюю (поверхности, текст, рамки),
   «зелёная» — на неоновую. Это разом перекрашивает весь интерфейс.
   -------------------------------------------------------------------------- */
body.cpd-theme-dark {
    --cpd-color-gray-100: #080d16;
    --cpd-color-gray-200: #0c1322;
    --cpd-color-gray-300: #101a2c;
    --cpd-color-gray-400: #162238;
    --cpd-color-gray-500: #1c2c46;
    --cpd-color-gray-600: #23374f;
    --cpd-color-gray-700: #2b4560;
    --cpd-color-gray-800: #3d5c7a;
    --cpd-color-gray-900: #7e97b0;
    --cpd-color-gray-1000: #8ea6bd;
    --cpd-color-gray-1100: #9fb6cb;
    --cpd-color-gray-1200: #b8cbe0;
    --cpd-color-gray-1300: #d6e4f2;
    --cpd-color-gray-1400: #e8f3ff;

    --cpd-color-green-100: #04160c;
    --cpd-color-green-200: #061d10;
    --cpd-color-green-300: #072614;
    --cpd-color-green-400: #083019;
    --cpd-color-green-500: #0b3f21;
    --cpd-color-green-600: #0f5029;
    --cpd-color-green-700: #126d34;
    --cpd-color-green-800: #16913f;
    --cpd-color-green-900: #33d16b;
    --cpd-color-green-1000: #46e07c;
    --cpd-color-green-1100: #5cf08f;
    --cpd-color-green-1200: #8df7b0;
    --cpd-color-green-1300: #c2fbd2;
    --cpd-color-green-1400: #e2fdea;

    /* Фон приложения: в Element тёмный фон задаётся отдельным токеном
       theme-bg (не из серой рампы), поэтому переопределяем его явно. */
    --cpd-color-theme-bg: #080d16;
    --cpd-color-bg-canvas-default-level-1: #0c1322;
}

/* Фон ленты — «терминальная сетка» + мягкое зелёное свечение сверху. */
body.cpd-theme-dark .mx_RoomView_MessageList,
body.cpd-theme-dark .mx_RoomView_messagePanel {
    background-image:
        radial-gradient(900px 380px at 50% -12%, rgba(61, 220, 90, 0.07), transparent 70%),
        linear-gradient(rgba(61, 220, 90, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61, 220, 90, 0.045) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px, 28px 28px;
}

/* Ники — Tahoma, как в ICQ; таймстемпы — моноширинные. */
body.cpd-theme-dark .mx_DisambiguatedProfile_displayName {
    font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #8df7b0;
}

body.cpd-theme-dark .mx_MessageTimestamp {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 11px;
    color: #7e97b0;
}

/* Подсветка строки при наведении — зеленоватая, вместо серой. */
body.cpd-theme-dark .mx_EventTile:hover::before {
    background: rgba(61, 220, 90, 0.05);
}

/* Поле ввода: узкая рамка с неоновым свечением при фокусе. */
body.cpd-theme-dark .mx_MessageComposer_row {
    background-color: #0a1220;
    border: 1px solid rgba(61, 220, 90, 0.30);
    border-radius: 6px;
    box-shadow: inset 0 0 24px rgba(61, 220, 90, 0.05);
}

body.cpd-theme-dark .mx_MessageComposer_row:focus-within {
    border-color: rgba(61, 220, 90, 0.65);
    box-shadow: 0 0 0 1px rgba(61, 220, 90, 0.35), 0 0 18px rgba(61, 220, 90, 0.18);
}

/* Шапка комнаты — тёмная с зелёной линией снизу. */
body.cpd-theme-dark .mx_RoomHeader {
    background-color: rgba(8, 13, 22, 0.88);
    border-bottom: 1px solid rgba(61, 220, 90, 0.18);
    backdrop-filter: blur(8px);
}

/* Полосы прокрутки в тон. */
body.cpd-theme-dark .mx_AutoHideScrollbar::-webkit-scrollbar-thumb {
    background-color: #1c2c46;
}

body.cpd-theme-dark .mx_AutoHideScrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #2b4560;
}

/* --------------------------------------------------------------------------
   3. ОБЩЕЕ ДЛЯ ОБЕИХ ШКУР
   -------------------------------------------------------------------------- */

/* Страница входа: фирменный фон вместо стандартной фотографии Element.
   (В DOM фон задан inline-стилем, поэтому нужен !important.) */
body .mx_AuthPage {
    background-color: #0b1225 !important;
    background-image:
        radial-gradient(1100px 560px at 50% -12%, rgba(99, 102, 241, 0.42), transparent 62%),
        radial-gradient(820px 460px at 92% 112%, rgba(34, 197, 94, 0.22), transparent 62%),
        linear-gradient(180deg, #0d1730 0%, #070c18 100%) !important;
    background-attachment: scroll !important;
}

body .mx_AuthPage_modal,
body .mx_AuthPage_modalContent {
    border-radius: 18px;
}

/* Внутренняя «стеклянная» карточка Element на нашем тёмном фоне выглядела
   серой — поднимаем её до почти белой, чтобы контраст с градиентом был чище. */
body .mx_AuthPage_modalContent > div[class*="glass"] {
    background-color: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(18px);
}

body .mx_AuthPage_modal {
    box-shadow: 0 24px 70px rgba(3, 7, 18, 0.55);
}

/* Свой логотип вместо Element-logo (это <img> внутри ссылки). */
body .mx_DefaultWelcome_logo img,
body .mx_WelcomePage_logo img,
body .mx_WelcomePage_logo svg {
    display: none;
}

body .mx_DefaultWelcome_logo,
body .mx_WelcomePage_logo {
    display: block;
    width: 230px;
    height: 56px;
    background: url("/custom/logo.svg") left center / contain no-repeat;
}

/* Кнопка «Войти» на приветственном экране — фирменная. */
body .mx_DefaultWelcome_buttons [data-kind="primary"] {
    background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%);
    color: #ffffff;
}

body .mx_DefaultWelcome_buttons [data-kind="primary"]:hover {
    background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
}

/* Левая панель страницы входа: фирменный градиент + наш знак. */
body .mx_AuthHeader {
    background-image: linear-gradient(160deg, #312e81 0%, #4338ca 45%, #0f766e 100%);
    border-radius: 18px 0 0 18px;
}

body .mx_AuthHeaderLogo img {
    display: none;
}

body .mx_AuthHeaderLogo {
    flex: 0 0 auto;
    width: 112px;
    height: 112px;
    margin: 24px auto 0;
    padding: 0;
    background: url("/custom/mark.svg") center / contain no-repeat;
}

/* Язык в тёмной левой панели — светлым. */
body .mx_AuthHeader .mx_Dropdown_input,
body .mx_AuthHeader .mx_Dropdown_option,
body .mx_AuthHeader .mx_Dropdown_arrow {
    color: #e8f3ff;
}

/* Размытая подложка карточки входа: убираем фото Element, оставляем свечение. */
body .mx_AuthPage_modalBlur {
    background-image: none !important;
    background-color: rgba(99, 102, 241, 0.42) !important;
}

/* Футер со ссылками Element (Blog/Mastodon/GitHub) на приватном сервере не нужен. */
body .mx_AuthFooter {
    display: none;
}

/* Главные кнопки в «ICQ 99»: неоново-зелёные с тёмной надписью.
   Бьём точечно (CTA в пустой комнате и кнопка отправки), а не по всем
   data-kind="primary": этим атрибутом Element помечает и иконки в шапке. */
body.cpd-theme-dark .mx_NewRoomIntro_buttons [role="button"],
body.cpd-theme-dark .mx_MessageComposer_row [data-kind="primary"] {
    background: linear-gradient(180deg, #3ddc5a 0%, #22b24a 100%);
    color: #04160c;
    box-shadow: 0 0 14px rgba(61, 220, 90, 0.22);
}

body.cpd-theme-dark .mx_NewRoomIntro_buttons [role="button"]:hover,
body.cpd-theme-dark .mx_MessageComposer_row [data-kind="primary"]:hover {
    background: linear-gradient(180deg, #5cf08f 0%, #2fc457 100%);
}

/* Бейджи непрочитанного: в тёмной шкуре — «пиксельные», в тон ICQ. */
body.cpd-theme-dark .mx_RoomTile_badge {
    border-radius: 4px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}