* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* HARD OVERRIDE (must stay at EOF): chat in-chat search top pill visuals */
body.xam-chat-inchat-search-active #chat-top-overlay .chat-top-overlay-nick-pill,
body.xam-chat-inchat-search-active #chat-top-overlay.mobile-only .chat-top-overlay-nick-pill,
body.xam-chat-inchat-search-active #chat-top-overlay-info-pill,
body.xam-chat-inchat-search-active .mobile-top-nick-pill {
    background: #212121 !important;
    background-color: #212121 !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.xam-chat-inchat-search-active #chat-inchat-search-input,
body.xam-chat-inchat-search-active #chat-inchat-search-input-desktop {
    color: rgba(255, 255, 255, 0.96) !important;
}

body.xam-chat-inchat-search-active #chat-inchat-search-input::placeholder,
body.xam-chat-inchat-search-active #chat-inchat-search-input-desktop::placeholder {
    color: rgba(255, 255, 255, 0.52) !important;
}

.xam-ultra-badge-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 2px;
    border: none;
    border-radius: 8px;
    background: transparent;
    padding: 0;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    touch-action: manipulation;
}

.xam-ultra-badge-trigger::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 12px;
}

.xam-ultra-badge-trigger img,
.xam-ultra-badge-trigger svg,
.xam-ultra-badge-trigger .xam-ultra-badge-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    color: #ffffff;
    display: block;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.32));
    pointer-events: none;
}

.xam-ultra-badge-trigger--static {
    cursor: default !important;
    pointer-events: none !important;
}

.xam-verified-badge img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: none;
}

.xam-ultra-fly-icon {
    position: fixed;
    z-index: 35080;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.42));
    transform: translate(0, 0) scale(1);
    opacity: 0.98;
    transition: transform .52s cubic-bezier(.2,.76,.18,1), opacity .52s ease;
}

.xam-ultra-fly-icon svg {
    width: 100%;
    height: 100%;
    color: #ffffff;
    display: block;
}

.xam-ultra-info-icon--hidden {
    opacity: 0 !important;
}

.xam-ultra-info-modal {
    position: fixed;
    inset: 0;
    z-index: 35050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
}

.xam-ultra-info-modal.hidden {
    display: none !important;
}

.xam-ultra-info-modal.xam-ultra-info-modal--open {
    opacity: 1;
    pointer-events: auto;
}

.xam-ultra-info-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity .24s ease;
}

.xam-ultra-info-sheet {
    position: relative;
    width: min(520px, calc(100vw - 18px));
    border-radius: 34px 34px 0 0;
    background: #333333;
    padding: 16px 18px 20px;
    box-shadow: 0 -20px 44px rgba(0, 0, 0, 0.45);
    color: #f6f7fb;
    transform: translateY(28px);
    opacity: .98;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
}

.xam-ultra-info-modal.xam-ultra-info-modal--open .xam-ultra-info-backdrop {
    opacity: 1;
}

.xam-ultra-info-modal.xam-ultra-info-modal--open .xam-ultra-info-sheet {
    transform: translateY(0);
    opacity: 1;
}

.xam-ultra-info-top {
    display: flex;
    justify-content: flex-start;
}

.xam-ultra-info-close {
    border: none;
    background: #4a4c52;
    color: #f0f1f6;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.xam-ultra-info-content {
    text-align: center;
    padding: 20px 6px 4px;
}

.xam-ultra-info-icon-wrap {
    width: 118px;
    height: 118px;
    margin: 0 auto 14px;
    position: relative;
    display: grid;
    place-items: center;
}

.xam-ultra-info-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    z-index: 2;
    color: #ffffff;
    display: block;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.34));
}

.xam-ultra-particle {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    filter: blur(0.4px);
    z-index: 1;
    animation: xam-ultra-particle-float 2.9s ease-in-out infinite;
}

.xam-ultra-particle.p1 { top: 8px; left: 24px; animation-delay: 0s; }
.xam-ultra-particle.p2 { top: 20px; right: 16px; width: 10px; height: 10px; animation-delay: .6s; }
.xam-ultra-particle.p3 { bottom: 18px; left: 14px; width: 8px; height: 8px; animation-delay: 1.2s; }
.xam-ultra-particle.p4 { bottom: 10px; right: 26px; width: 11px; height: 11px; animation-delay: 1.8s; }

@keyframes xam-ultra-particle-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: .28; }
    50% { transform: translateY(-8px) scale(1.12); opacity: .82; }
}

.xam-ultra-info-title {
    margin: 0;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.04;
}

.xam-ultra-info-text {
    margin: 10px auto 0;
    max-width: 440px;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 600;
    color: rgba(247, 248, 251, 0.94);
}

.xam-ultra-info-text span {
    color: #c941ff;
}

.xam-ultra-info-actions {
    padding-top: 18px;
}

.xam-ultra-info-buy-btn {
    width: 100%;
    border: none;
    border-radius: 999px;
    min-height: 62px;
    background: #b44cff;
    color: #f8f8fc;
    font-size: 18px;
    font-weight: 700;
    cursor: default;
}

@media (min-width: 769px) {
    .xam-ultra-info-modal {
        align-items: center;
    }

    .xam-ultra-info-sheet {
        width: min(520px, calc(100vw - 40px));
        border-radius: 28px;
        padding: 16px 18px 18px;
    }
}

/* FINAL OVERRIDE: активный поиск в шапке без стекла/обводки (в т.ч. tablet + liquid-glass) */
body.xam-chat-inchat-search-active #chat-top-overlay .chat-top-overlay-nick-pill,
body.xam-chat-inchat-search-active #chat-top-overlay.mobile-only .chat-top-overlay-nick-pill,
body.xam-chat-inchat-search-active #chat-top-overlay-info-pill,
body.xam-chat-inchat-search-active .mobile-top-nick-pill {
    background: #212121 !important;
    background-color: #212121 !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.xam-chat-inchat-search-active #chat-inchat-search-input,
body.xam-chat-inchat-search-active #chat-inchat-search-input-desktop {
    color: rgba(255, 255, 255, 0.96) !important;
}

body.xam-chat-inchat-search-active #chat-inchat-search-input::placeholder,
body.xam-chat-inchat-search-active #chat-inchat-search-input-desktop::placeholder {
    color: rgba(255, 255, 255, 0.52) !important;
}

/* Verification badges (profile + info modal) */
.profile-avatar-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: visible;
}

.profile-avatar-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex: 0 0 auto;
    overflow: visible;
}

.profile-verif-slot {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-verif-slot--creator {
    justify-content: flex-end;
}

.profile-verif-slot--dev {
    justify-content: flex-start;
}

.profile-avatar-frame,
.chat-header-expand-avatar-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.profile-avatar-frame {
    --profile-avatar-size: 92px;
    width: var(--profile-avatar-size);
    height: var(--profile-avatar-size);
    overflow: visible;
}

.profile-thought-wrap {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, calc(100% - 7px));
    z-index: 6;
    pointer-events: none;
    user-select: none;
    display: none;
}

.profile-thought-wrap:not(.hidden) {
    display: block;
}

.profile-thought {
    position: relative;
    display: block;
    pointer-events: none;
    user-select: none;
    color: rgba(255, 255, 255, 0.96);
    background: rgba(34, 34, 34, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
    max-width: calc(var(--profile-avatar-size, 92px) + 56px);
}

#user-profile-modal.profile-has-thought .profile-avatar-shell {
    margin-bottom: 14px;
}

@media (max-width: 768px) {
    #user-profile-modal .profile-thought {
        border: 1px solid var(--composer-chip-border, rgba(255, 255, 255, 0.14));
        background: var(--composer-chip-bg, rgba(15, 15, 17, 0.94));
        box-shadow: var(--composer-chip-shadow, 0 8px 24px rgba(0, 0, 0, 0.42));
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
    }
}

.chat-header-expand-avatar-frame {
    --profile-avatar-size: 96px;
    width: var(--profile-avatar-size);
    height: var(--profile-avatar-size);
}

.profile-avatar-frame .profile-avatar,
.chat-header-expand-avatar-frame .chat-header-expand-hero-avatar {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

.profile-verif-badge {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s ease, opacity 0.16s ease;
}

.profile-verif-badge:hover {
    transform: scale(1.06);
}

.profile-verif-badge.hidden {
    display: none !important;
}

.profile-verif-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}

.xam-verif-info-modal {
    position: fixed;
    inset: 0;
    z-index: 90000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.34s ease, visibility 0.34s ease;
}

.xam-verif-info-modal.hidden {
    display: none !important;
}

.xam-verif-info-modal:not(.hidden) {
    display: flex !important;
    visibility: visible;
}

.xam-verif-info-modal.xam-verif-info-modal--open {
    opacity: 1;
    pointer-events: auto;
}

.xam-verif-info-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.34s ease;
}

.xam-verif-info-sheet {
    position: relative;
    width: min(480px, calc(100vw - 18px));
    border-radius: 28px 28px 0 0;
    background: #2a2a2e;
    padding: 16px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -20px 44px rgba(0, 0, 0, 0.45);
    color: #f6f7fb;
    transform: translate3d(0, 100%, 0);
    opacity: 1;
    will-change: transform;
    transition: transform 0.38s cubic-bezier(0.22, 0.84, 0.24, 1);
    -webkit-transition: -webkit-transform 0.38s cubic-bezier(0.22, 0.84, 0.24, 1);
}

.xam-verif-info-modal.xam-verif-info-modal--open .xam-verif-info-backdrop {
    opacity: 1;
}

.xam-verif-info-modal.xam-verif-info-modal--open .xam-verif-info-sheet {
    transform: translate3d(0, 0, 0);
}

.xam-verif-info-top {
    display: flex;
    justify-content: flex-start;
}

.xam-verif-info-close {
    border: none;
    background: #4a4c52;
    color: #f0f1f6;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.xam-verif-info-content {
    text-align: center;
    padding: 14px 8px 4px;
}

.xam-verif-info-icon-wrap {
    width: 88px;
    height: 88px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
}

.xam-verif-info-icon {
    width: 68px;
    height: 68px;
    object-fit: contain;
}

.xam-verif-info-title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
}

.xam-verif-info-text {
    margin: 10px auto 0;
    max-width: 400px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(247, 248, 251, 0.9);
}

.xam-verif-info-link {
    display: inline-block;
    margin-top: 14px;
    color: #9ecbff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.xam-verif-info-link.hidden {
    display: none !important;
}

@media (min-width: 769px) {
    .xam-verif-info-modal {
        align-items: center;
    }

    .xam-verif-info-sheet {
        border-radius: 24px;
        padding-bottom: 22px;
        transform: translate3d(0, 18px, 0) scale(0.96);
        transition: transform 0.34s cubic-bezier(0.22, 0.84, 0.24, 1), opacity 0.28s ease;
    }

    .xam-verif-info-modal.xam-verif-info-modal--open .xam-verif-info-sheet {
        transform: translate3d(0, 0, 0) scale(1);
    }

    .profile-verif-slot {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .profile-verif-badge {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 768px) {
    .profile-avatar-frame {
        --profile-avatar-size: 92px;
    }

    .profile-verif-slot {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .profile-verif-badge {
        width: 38px;
        height: 38px;
    }
}

:root {
    color-scheme: dark;
    supported-color-schemes: dark;
    --bg-black: #30516D;
    --bg-dark: #0a0a0a;
    --bg-darker: #050505;
    --bg-gray-1: #1a1a1a;
    --bg-gray-2: #252525;
    --bg-gray-3: #2a2a2a;
    --white-border: #ffffff;
    --white-hover: #e0e0e0;
    --gray-text: #FFFFFF;
    --gray-border: #333333;
    --text-white: #ffffff;
    --text-light: #ffffff;
    --app-height: 100vh;
    --xam-safe-top: 0px;
    --xam-safe-bottom: 0px;
    --theme-bg-base: #000000;
    --theme-bg-pattern: url('/assets/pattern%201.svg');
    --theme-bg-pattern-size: 480px auto;
    --theme-bg-pattern-opacity: 0.5;
    /* Градиент как в TG: оранжевый → розовый → фиолетовый, медленно плывёт */
    --theme-bg-pattern-gradient: linear-gradient(
        125deg,
        #f59e4a 0%,
        #f472b6 22%,
        #c084fc 45%,
        #8b5cf6 68%,
        #f472b6 85%,
        #f59e4a 100%
    );
    --theme-bg-image: url('/fon.png');
    --xam-selection-bg: rgba(150, 97, 241, 0.48);
    --xam-selection-color: #ffffff;
    --xam-selection-bg-on-accent: #ffffff;
    --xam-selection-color-on-accent: #5a24c4;
    --msg-own-bg: #8774E1;
    --msg-peer-bg: #212121;
    --xam-ui-accent: #8774E1;
    --xam-ui-accent-hover: #9585e6;
    --xam-chat-active-bg: #503184;
    --xam-pinned-accent: #a78bfa;
    --accent-color: #8774E1;
}

@keyframes xamPatternGradientDrift {
    0% { background-position: 0% 30%; }
    50% { background-position: 100% 70%; }
    100% { background-position: 0% 30%; }
}

@media (prefers-reduced-motion: reduce) {
    .messenger-container::after,
    #auth-screen::after {
        animation: none !important;
    }
}

/* ПК: статичные обои как в TG (без drift).
   background-size здесь — размер ГРАДИЕНТА (на весь экран), не тайла маски.
   Маска (--theme-bg-pattern-size) остаётся из базового правила ::after. */
@media (min-width: 769px) {
    .messenger-container::after,
    #auth-screen::after {
        animation: none !important;
        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        transform: none !important;
        contain: none !important;
        will-change: auto !important;
    }

    .messenger-container > .chat-area,
    .chat-area,
    .chat-view,
    .no-chat,
    .messages-container {
        background: transparent !important;
        background-color: transparent !important;
    }
}

/* Font: Akony (drop files into /public/fonts/) */
@font-face {
    font-family: 'Akony';
    src: url('/fonts/akony-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TikTok Sans';
    src: url('/fonts/ofont.ru_TikTok%20Sans.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arteks';
    src: url('/fonts/ofont.ru_Arteks.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@supports (height: 100dvh) {
    :root {
        --app-height: 100dvh;
    }
}

html {
    height: var(--app-height);
    overflow: hidden;
    color-scheme: dark;
    supported-color-schemes: dark;
    background-color: #070707;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-black);
    color: var(--text-white);
    height: var(--app-height);
    overflow: hidden;
    position: relative;
    color-scheme: dark;
    supported-color-schemes: dark;
    /* Убираем синие тач-нажатия на мобильных */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
}

::selection {
    background: var(--xam-selection-bg);
    color: var(--xam-selection-color);
}

::-moz-selection {
    background: var(--xam-selection-bg);
    color: var(--xam-selection-color);
}

.message.own ::selection,
.message.own ::-moz-selection,
.message.own .message-text::selection,
.message.own .message-text::-moz-selection,
.message.own .message-content::selection,
.message.own .message-content::-moz-selection,
.message.own .message-bubble-body::selection,
.message.own .message-bubble-body::-moz-selection {
    background: var(--xam-selection-bg-on-accent) !important;
    color: var(--xam-selection-color-on-accent) !important;
}

input::selection,
textarea::selection,
[contenteditable="true"]::selection {
    background: var(--xam-selection-bg);
    color: var(--xam-selection-color);
}

input::-moz-selection,
textarea::-moz-selection,
[contenteditable="true"]::-moz-selection {
    background: var(--xam-selection-bg);
    color: var(--xam-selection-color);
}

/* ===== Emoji Hover Panel (Desktop only) ===== */
.emoji-hover-panel {
    position: absolute;
    z-index: 1000;
    top: -10px;
    left: 0;
    transform: translateY(-100%);
    background: #121212;
    color: #fff;
    border-radius: 16px;
    padding: 10px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    max-width: 340px;
    width: max-content;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}
.emoji-hover-panel.visible {
    opacity: 1;
    transform: translateY(-108%);
    pointer-events: auto;
}
.emoji-hover-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #eaeaea;
}
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 26px);
    gap: 8px 8px;
}
.emoji-item {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: transform 100ms ease;
}
.emoji-item:hover {
    transform: scale(1.15);
}
.emoji-section {
    margin-bottom: 10px;
}
.emoji-section:last-child {
    margin-bottom: 0;
}
.emoji-anchor {
    position: relative;
}

.btn-emoji .emoji-icon--kbd { display: none; }
.btn-emoji.is-emoji-open .emoji-icon--emoji { display: none; }
.btn-emoji.is-emoji-open .emoji-icon--kbd { display: inline-block; }

.emoji-picker {
    position: relative;
    width: 100%;
    padding: 10px 8px 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.36s cubic-bezier(0.32, 0.72, 0.24, 1), opacity 0.26s ease;
}
.emoji-picker.is-open {
    max-height: 360px;
    opacity: 1;
    pointer-events: auto;
}
.emoji-picker.hidden {
    display: block !important;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    padding: 0 !important;
}
.emoji-picker-pill {
    width: 100%;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.10);
    background: #0e1012;
    box-shadow: 0 14px 40px rgba(0,0,0,0.30);
    overflow: hidden;
    transform: translateY(calc(100% + 14px));
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0.24, 1);
}
.emoji-picker.is-open .emoji-picker-pill {
    transform: translateY(0);
}
.emoji-picker-top {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.emoji-picker-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
}
.emoji-picker-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.emoji-picker-tab {
    flex: 1 1 0;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.emoji-picker-tab.is-active {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.92);
}
.emoji-picker-tab:hover:not(.is-active) {
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.05);
}
.emoji-picker-body {
    max-height: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 8px 10px 12px;
}
.emoji-picker-mount {
    min-height: 0;
    overflow: visible;
}
.emoji-picker-layout {
    display: flex;
    gap: 6px;
    align-items: stretch;
    min-height: 200px;
}
.emoji-picker-category-rail {
    flex: 0 0 38px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.emoji-picker-category-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.emoji-picker-category-btn.is-active {
    background: rgba(255, 255, 255, 0.12);
}
.emoji-picker-category-btn:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.06);
}
.emoji-picker-category-icon {
    font-size: 18px;
    line-height: 1;
}
.emoji-picker-sections-scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    max-height: 248px;
}
.emoji-picker-sections {
    padding-right: 2px;
}
.emoji-picker-section-title {
    margin: 0 0 6px;
    padding: 6px 2px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(180deg, #0e1012 70%, rgba(14, 16, 18, 0));
}
.emoji-picker-section + .emoji-picker-section {
    margin-top: 4px;
}
.emoji-item--tg {
    display: flex;
    align-items: center;
    justify-content: center;
}
.emoji-item--tg .emoji-item-preview {
    width: 30px;
    height: 30px;
    object-fit: contain;
    pointer-events: none;
}
.tg-emoji {
    display: inline-block;
    vertical-align: -0.2em;
    width: 1.35em;
    height: 1.35em;
    object-fit: contain;
    margin: 0 0.02em;
}
.tg-emoji--static {
    image-rendering: auto;
}
.message.emoji-only.big-1 .message-text {
    line-height: 1;
}
.message.emoji-only.big-1 .tg-emoji--animated {
    width: 72px;
    height: 72px;
    vertical-align: middle;
}
.message.emoji-only.big-2 .message-text {
    line-height: 1;
}
.message.emoji-only.big-2 .tg-emoji--animated {
    width: 56px;
    height: 56px;
    vertical-align: middle;
}
.message.emoji-only .tg-emoji--animated {
    margin: 0 2px;
}
.emoji-picker-pane {
    display: none;
}
.emoji-picker-pane.is-active {
    display: block;
}
.emoji-picker-empty {
    margin: 0;
    padding: 28px 12px;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.45);
}
.emoji-picker-stickers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.emoji-picker-sticker-add,
.emoji-picker-sticker-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border: none;
    border-radius: 12px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emoji-picker-sticker-add {
    color: rgba(255, 255, 255, 0.75);
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.03);
}
.emoji-picker-sticker-add:hover {
    background: rgba(255, 255, 255, 0.08);
}
.emoji-picker-sticker-add:disabled,
.emoji-picker-sticker-add.is-disabled,
.emoji-picker-sticker-add[aria-disabled="true"] {
    opacity: 0.45;
    cursor: wait;
    pointer-events: none;
}
.sticker-upload-input {
    /* наследует .xam-hidden-file-input — не display:none, иначе iOS не отдаёт файл */
}
.emoji-picker-sticker-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.emoji-picker-sticker-item:hover {
    background: rgba(255, 255, 255, 0.10);
}
.emoji-picker-sticker-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.emoji-picker-sticker-item:hover .emoji-picker-sticker-delete,
.emoji-picker-sticker-item:focus-within .emoji-picker-sticker-delete {
    opacity: 1;
    pointer-events: auto;
}
.message.message--sticker {
    align-items: flex-end;
}
.message.message--sticker .message-content,
.message.message--sticker.own .message-content,
body.theme-light .message.message--sticker .message-content,
body.theme-light .message.message--sticker.own .message-content,
body.theme-style-glass .message.message--sticker .message-content,
body.theme-style-glass .message.message--sticker.own .message-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: auto !important;
}
.message.message--sticker .message-content::before,
.message.message--sticker .message-content::after {
    display: none !important;
    content: none !important;
}
.message.message--sticker .message-bubble-body,
.message.message--sticker .message-text {
    display: none !important;
}
.message-media-sticker {
    position: relative;
    width: var(--sticker-message-size, 168px);
    height: var(--sticker-message-size, 168px);
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 0;
}
.message-media-sticker img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    background: transparent;
}
.message-sticker-meta {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 8px);
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.42);
    pointer-events: none;
}
.message.message--sticker .message-time {
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 11px;
    line-height: 1.2;
    text-shadow: none;
}
.message.message--sticker .read-status-icon {
    color: rgba(255, 255, 255, 0.92) !important;
}
.message.message--sticker .message-sender {
    margin-bottom: 4px;
}
.message.message--sticker .message-content.message-content--sticker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.message.message--sticker.own .message-content.message-content--sticker {
    align-items: flex-end;
}
.message.message--sticker .message-reply--chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: min(var(--sticker-message-size, 168px), 100%);
    margin: 0 0 6px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.55);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    text-align: left;
}
.message.message--sticker .message-reply--chip:hover {
    background: rgba(32, 32, 34, 0.72);
}
.message.message--sticker .message-reply--chip:active {
    transform: scale(0.98);
}
body.theme-light .message.message--sticker .message-reply--chip {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    color: rgba(20, 20, 24, 0.88);
}
body.theme-light .message.message--sticker .message-reply--chip:hover {
    background: rgba(255, 255, 255, 0.94);
}
.messages-container .message.message--sticker.message-bubble-middle,
.messages-container .message.message--sticker.message-bubble-last,
.messages-container .message.own.message--sticker.message-bubble-middle,
.messages-container .message.own.message--sticker.message-bubble-last {
    margin-top: 4px !important;
}
@media (max-width: 768px) {
    .message-media-sticker {
        --sticker-message-size: 152px;
    }
}
@media (min-width: 769px) {
    .message-media-sticker {
        --sticker-message-size: 176px;
    }
}
@media (max-width: 768px) {
    .emoji-picker-stickers-grid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: 6px;
    }
    .message-input-container.emoji-open > .emoji-picker .emoji-picker-sticker-delete {
        opacity: 1;
        pointer-events: auto;
    }
}
@media (min-width: 769px) {
    .emoji-picker-stickers-grid {
        grid-template-columns: repeat(4, 64px);
        justify-content: center;
        gap: 6px;
    }
    #emoji-picker .emoji-picker-stickers-grid {
        grid-template-columns: repeat(4, 62px);
    }
}
.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}
.emoji-picker-grid .emoji-item {
    width: 100%;
    aspect-ratio: 1;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 10px;
    padding: 0;
}
.emoji-picker-grid .emoji-item:hover {
    background: rgba(255,255,255,0.08);
}
@media (max-width: 768px) {
    .emoji-hover-panel { display: none !important; }
    .message-input-container > .emoji-picker,
    .message-input-container > .emoji-picker.is-open,
    .message-input-container > .emoji-picker.hidden {
        transition: none !important;
    }
    .message-input-container > .emoji-picker .emoji-picker-pill {
        transition: none !important;
        transform: none !important;
    }
    .message-input-container.emoji-open > .emoji-picker {
        position: relative;
        width: 100% !important;
        max-height: none !important;
        height: var(--composer-keyboard-height, 280px);
        margin-top: 8px;
        padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)) !important;
        box-sizing: border-box;
        opacity: 1;
        pointer-events: auto;
        overflow: hidden;
        flex-shrink: 0;
        background: transparent;
    }
    .message-input-container.emoji-open > .emoji-picker.hidden {
        display: none !important;
    }
    .message-input-container.emoji-open > .emoji-picker .emoji-picker-pill {
        height: 100%;
        margin: 0;
        border-radius: 28px;
        border: none;
        box-shadow: none;
        background: #212121;
        background-color: #212121;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 0;
        box-sizing: border-box;
        position: relative;
    }
    .message-input-container.emoji-open > .emoji-picker .emoji-picker-top {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        z-index: 3;
        width: auto;
        max-width: calc(100% - 24px);
        height: auto;
        min-height: 0;
        padding: 0;
        border: none;
        border-bottom: none;
        background: transparent;
        pointer-events: none;
    }
    .message-input-container.emoji-open > .emoji-picker .emoji-picker-tabs {
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 2px;
        width: auto;
        min-width: 200px;
        padding: 4px;
        border-radius: 999px;
        background: #2c2c2c;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    }
    .message-input-container.emoji-open > .emoji-picker .emoji-picker-tab {
        flex: 1 1 0;
        height: 32px;
        min-width: 88px;
        padding: 0 16px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.55);
        background: transparent;
    }
    .message-input-container.emoji-open > .emoji-picker .emoji-picker-tab.is-active {
        background: #8774E1;
        color: #ffffff;
    }
    .message-input-container.emoji-open > .emoji-picker .emoji-picker-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding: 6px 8px 48px;
        margin: 0;
        background: transparent;
        box-sizing: border-box;
    }
    .message-input-container.emoji-open > .emoji-picker .emoji-picker-mount,
    .message-input-container.emoji-open > .emoji-picker .emoji-picker-layout {
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    .message-input-container.emoji-open > .emoji-picker .emoji-picker-sections-scroll {
        max-height: none;
        flex: 1;
    }
    .message-input-container.emoji-open > .emoji-picker .emoji-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
        gap: 2px 4px;
        justify-items: center;
    }
    .message-input-container.emoji-open > .emoji-picker .emoji-picker-grid .emoji-item,
    .message-input-container.emoji-open > .emoji-picker .emoji-picker-grid .emoji-item--tg {
        width: 36px;
        height: 36px;
        max-width: 36px;
        font-size: 20px;
        aspect-ratio: 1;
    }
    .message-input-container.emoji-open > .emoji-picker .emoji-item--tg .emoji-item-preview {
        width: 28px;
        height: 28px;
    }
    .message-input-container.emoji-open #normal-input-panel.input-panel {
        margin-bottom: 0 !important;
    }
}
@media (min-width: 769px) {
    #emoji-hover-panel { display: none !important; pointer-events: none !important; }
    .message-input-container {
        --composer-chip-bg: #212121;
        --composer-chip-border: transparent;
        --composer-chip-shadow: none;
    }
    .message-input-container > #emoji-picker:not(.emoji-picker--float) {
        display: none !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ПК: плавающая панель эмодзи — выезжает из кнопки 🙂 */
    #emoji-picker.emoji-picker--float {
        position: fixed !important;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        width: 272px;
        max-width: calc(100vw - 24px);
        height: auto;
        min-height: 220px;
        margin: 0;
        padding: 0;
        overflow: visible;
        z-index: 200;
        pointer-events: none;
        opacity: 0;
        max-height: none;
        display: flex;
        flex-direction: column;
        transform: scale(0.88) translateY(10px);
        transform-origin: var(--emoji-float-tail-x, 85%) 100%;
        transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.32, 0.72, 0.24, 1);
        will-change: transform, opacity;
    }

    #emoji-picker.emoji-picker--float.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1) translateY(0);
    }

    #emoji-picker.emoji-picker--float.hidden {
        display: none !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-pill {
        width: 100%;
        height: calc(100% - 13px);
        min-height: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        border-radius: var(--emoji-float-radius-tl, 16px) var(--emoji-float-radius-tr, 16px) var(--emoji-float-radius-bl, 16px) var(--emoji-float-radius-br, 16px);
        border: none;
        background: #212121;
        background-color: #212121;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: visible;
        position: relative;
        isolation: isolate;
        transform: none !important;
        transition: border-radius 0.18s ease, box-shadow 0.18s ease;
        will-change: auto;
    }

    /* Нижний хвостик — остриё к кнопке 🙂 (SVG 141×72, зеркально) */
    #emoji-picker.emoji-picker--float .emoji-picker-pill::after {
        content: '';
        position: absolute;
        left: var(--emoji-float-tail-x, 85%);
        top: calc(100% - 1px);
        bottom: auto;
        width: 26px;
        height: 13px;
        transform: translateX(calc(var(--emoji-float-tail-tip, 0.638) * -100%));
        pointer-events: none;
        z-index: 2;
        background-color: #212121;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20141%2072%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate(141%200)%20scale(-1%201)%22%3E%3Cpath%20d%3D%22M0.379541%200.975563C-0.139213%200.846923%20-0.121931%200.0869474%200.406323%200.00569764C0.430977%200.00190557%200.455887%201.44432e-05%200.480831%204.09745e-05L74.8429%200.0791337L96.8429%200.0527465L140.78%208.26153e-05C140.815%204.12522e-05%20140.843%200.0280056%20140.843%200.0625148C140.843%200.0883856%20140.826%200.111805%20140.802%200.121053C101.801%2015.0492%2081.7239%2030.7539%2062.6489%2067.9726C59.9554%2073.2283%2051.6551%2071.8789%2051.0929%2066C50.6945%2022.9551%2037.4332%2010.164%200.379541%200.975563Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20141%2072%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate(141%200)%20scale(-1%201)%22%3E%3Cpath%20d%3D%22M0.379541%200.975563C-0.139213%200.846923%20-0.121931%200.0869474%200.406323%200.00569764C0.430977%200.00190557%200.455887%201.44432e-05%200.480831%204.09745e-05L74.8429%200.0791337L96.8429%200.0527465L140.78%208.26153e-05C140.815%204.12522e-05%20140.843%200.0280056%20140.843%200.0625148C140.843%200.0883856%20140.826%200.111805%20140.802%200.121053C101.801%2015.0492%2081.7239%2030.7539%2062.6489%2067.9726C59.9554%2073.2283%2051.6551%2071.8789%2051.0929%2066C50.6945%2022.9551%2037.4332%2010.164%200.379541%200.975563Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center top;
        mask-position: center top;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-top,
    #emoji-picker.emoji-picker--float .emoji-picker-body {
        position: relative;
        z-index: 1;
        background: #212121;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-top {
        height: 40px;
        min-height: 40px;
        padding: 0 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        background: #212121;
        border-radius: var(--emoji-float-radius-tl, 16px) var(--emoji-float-radius-tr, 16px) 0 0;
        overflow: hidden;
        transition: border-radius 0.18s ease;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-tabs {
        gap: 2px;
        width: 100%;
        height: 100%;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        align-items: stretch;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-tab {
        flex: 1 1 0;
        min-width: 0;
        height: 100%;
        padding: 0 8px;
        border-radius: 0;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: rgba(255, 255, 255, 0.42);
        background: transparent;
        border: none;
        position: relative;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-tab.is-active {
        color: rgba(255, 255, 255, 0.95);
        background: transparent;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-tab.is-active::after {
        content: '';
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;
        height: 2px;
        border-radius: 2px 2px 0 0;
        background: var(--xam-ui-accent, #8774E1);
    }

    #emoji-picker.emoji-picker--float .emoji-picker-tab:hover:not(.is-active) {
        color: rgba(255, 255, 255, 0.72);
        background: rgba(255, 255, 255, 0.04);
    }

    #emoji-picker.emoji-picker--float .emoji-picker-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        padding: 6px 8px 10px;
        background: #212121;
        border-radius: 0 0 var(--emoji-float-radius-bl, 16px) var(--emoji-float-radius-br, 16px);
        overflow: auto;
        transition: border-radius 0.18s ease;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-body::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-sections-scroll {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-sections-scroll::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
        gap: 2px;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-grid .emoji-item {
        width: 34px;
        height: 34px;
        max-width: 34px;
        font-size: 20px;
        border-radius: 8px;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-category-rail {
        padding: 4px 2px;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-category-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 16px;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-section-title {
        font-size: 11px;
        padding: 4px 2px 2px;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-stickers-grid {
        gap: 6px;
        padding: 2px 0;
    }

    #emoji-picker.emoji-picker--float .emoji-picker-sticker-add,
    #emoji-picker.emoji-picker--float .emoji-picker-sticker-item {
        width: 72px;
        height: 72px;
    }

    #emoji-picker .emoji-picker-pill {
        width: 100%;
        height: 100%;
        min-height: 0;
        flex: 1 1 auto;
        border-radius: 32px;
        border: none;
        background: #212121;
        background-color: #212121;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    #emoji-picker:not(.emoji-picker--float) .emoji-picker-pill {
        transform: none;
        transition: none;
        will-change: auto;
    }
    #emoji-picker .emoji-picker-top {
        height: 48px;
        min-height: 48px;
        flex: 0 0 auto;
        padding: 0 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        background: transparent;
    }
    #emoji-picker .emoji-picker-tabs {
        gap: 4px;
        width: 100%;
        padding: 4px;
        border-radius: 999px;
        background: #2c2c2c;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }
    #emoji-picker .emoji-picker-tab {
        flex: 1 1 auto;
        height: 32px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.55);
        background: transparent;
        border: none;
    }
    #emoji-picker .emoji-picker-tab.is-active {
        color: #ffffff;
        background: var(--xam-ui-accent, #8774E1);
    }
    #emoji-picker .emoji-picker-tab:hover:not(.is-active) {
        color: #cccccc;
        background: rgba(255, 255, 255, 0.04);
    }
    #emoji-picker .emoji-picker-title {
        font-size: 12px;
        font-weight: 600;
        color: #AAAAAA;
    }
    #emoji-picker .emoji-picker-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        padding: 10px 10px 14px;
        background: #212121;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    #emoji-picker .emoji-picker-mount,
    #emoji-picker .emoji-picker-layout {
        height: 100%;
        min-height: 0;
    }
    #emoji-picker .emoji-picker-sections-scroll {
        max-height: none;
        height: 100%;
        overflow: auto;
    }
    #emoji-picker .emoji-picker-category-rail {
        background: transparent;
        border-color: rgba(255, 255, 255, 0.06);
    }
    #emoji-picker .emoji-picker-category-btn {
        color: #AAAAAA;
        background: transparent;
    }
    #emoji-picker .emoji-picker-category-btn.is-active {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
    }
    #emoji-picker .emoji-picker-section-title {
        color: #AAAAAA;
    }
    #emoji-picker .emoji-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
        gap: 4px;
        justify-content: start;
    }
    #emoji-picker .emoji-picker-grid .emoji-item {
        width: 42px;
        height: 42px;
        max-width: 42px;
        font-size: 24px;
        border-radius: 12px;
    }
    #emoji-picker .emoji-picker-grid .emoji-item:hover {
        background: rgba(255, 255, 255, 0.08);
    }
}

/* ===== Big emoji messages (1–2 emojis only) ===== */
.message.emoji-only .message-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 6px !important;
}
.message.emoji-only .message-content::after,
.message.emoji-only .message-content::before {
    display: none !important;
    content: none !important;
}
.message.emoji-only .message-text {
    line-height: 1.1;
    padding: 0 !important;
    background: transparent !important;
}
.message.emoji-only.big-1 .message-text {
    font-size: 48px !important;
}
.message.emoji-only.big-2 .message-text {
    font-size: 40px !important;
}
.message.emoji-only .message-time {
    margin-top: 4px;
    opacity: .8;
}

img.twemoji {
    height: 1.15em;
    width: 1.15em;
    margin: 0 0.05em;
    vertical-align: -0.15em;
}
.message.emoji-only.big-1 .message-text img.twemoji {
    height: 48px !important;
    width: 48px !important;
    margin: 0;
}
.message.emoji-only.big-2 .message-text img.twemoji {
    height: 40px !important;
    width: 40px !important;
    margin: 0;
}
.message-reaction-badge img.twemoji,
.reaction-option img.twemoji {
    height: 1.1em;
    width: 1.1em;
    vertical-align: -0.1em;
}
.emoji-item img.twemoji {
    height: 26px;
    width: 26px;
    vertical-align: middle;
}
.chat-last-message img.twemoji {
    height: 1em;
    width: 1em;
    vertical-align: -0.12em;
}

/* Combo badge for repeated messages */
.combo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #ffd966;
    background: transparent;
    border-radius: 6px;
    transform-origin: center;
}
.message.own .combo-badge {
    color: #ffffff;
    background: transparent;
}
.combo-badge.intense {
    animation: comboJitter 160ms ease-in-out 2;
}
@keyframes comboJitter {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

/* XAMBot alerts use the same inline keyboard as regular bots */
.message.message--bot.message--has-inline-keyboard .message-body-stack {
    min-width: min(280px, 100%);
}

.message.message--bot .message-text b,
.message.message--bot .message-text strong {
    font-weight: 650;
    color: inherit;
}

/* Mini confetti burst (used for premium activate button) */
.mini-confetti-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}
.mini-confetti-piece {
    position: fixed;
    width: 6px;
    height: 10px;
    border-radius: 2px;
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
    animation: miniConfettiFly 520ms ease-out forwards;
    will-change: transform, opacity;
}
@keyframes miniConfettiFly {
    0% { opacity: 1; transform: translate(var(--x0), var(--y0)) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--x1), var(--y1)) rotate(var(--r1)); }
}

/* Desktop tuning: larger emoji and right alignment for own messages */
@media (min-width: 769px) {
    .message.emoji-only.big-1 .message-text {
        font-size: 84px !important;
        line-height: 1 !important;
    }
    .message.emoji-only.big-2 .message-text {
        font-size: 64px !important;
        line-height: 1 !important;
    }
    .message.emoji-only.big-1 .message-text img.twemoji,
    .message.emoji-only.big-1 .message-text .tg-emoji,
    .message.emoji-only.big-1 .message-text .tg-emoji--animated {
        width: 84px !important;
        height: 84px !important;
        vertical-align: middle !important;
    }
    .message.emoji-only.big-2 .message-text img.twemoji,
    .message.emoji-only.big-2 .message-text .tg-emoji,
    .message.emoji-only.big-2 .message-text .tg-emoji--animated {
        width: 64px !important;
        height: 64px !important;
        vertical-align: middle !important;
    }
    .message.own.emoji-only .message-content {
        margin-left: auto;
    }
}

/* Разрешаем выделение текста только в полях ввода и сообщениях */
input, textarea, .message-text, .message-sender {
    -webkit-user-select: text;
    user-select: text;
}

/* Интерактивные контролы не должны выделять текст */
button,
.btn-icon,
.btn-send,
.btn-voice,
.btn-file,
.btn-emoji {
    -webkit-user-select: none;
    user-select: none;
}

/* Мобилки: только вертикальный pan — горизонтальный сдвиг чата/страницы запрещаем.
   Горизонтальные карусели (бот-клавиатура и т.п.) задают touch-action: pan-x сами. */
@media (max-width: 768px) {
    html, body {
        touch-action: pan-y;
    }
}

/* Глобальный фоновый слой */
.global-background-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.global-background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

/* Все основные элементы должны быть поверх фона (без .modal — модалки отдельно position:fixed) */
.screen,
.sidebar,
.chat-area {
    position: relative;
    z-index: 2;
}

/* Мобильный статус-бар */

.screen {
    display: none;
    height: var(--app-height);
}

.screen.active {
    display: flex;
}

#auth-screen {
    justify-content: center;
    align-items: center;
    background: var(--bg-black);
}

.auth-wrapper {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 900px;
}

.auth-pc-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-pc-method-tabs {
    display: none;
}

.auth-pc-panel-title {
    display: none;
}

.auth-pc-welcome {
    display: none;
}

.auth-pc-left .auth-qr-view {
    display: none;
}

.auth-container {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border: 2px solid var(--white-border);
    background: var(--bg-dark);
    border-radius: 16px;
    animation: authContainerFadeIn 0.6s ease-out;
}

/* Стили меню входа/регистрации по макету: одна форма по размерам, не меняется при переключении вкладок */
#auth-screen .auth-container {
    background: #2F2F2F;
    border: none;
    border-radius: 24px;
    padding: 32px 36px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    width: 400px;
    max-width: 100%;
    box-sizing: border-box;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/*
 * Регистрация не с телефона (по UA): вкладка «Регистрация» — блок с текстом/иконкой, поля скрыты.
 * Работает и при узком окне браузера на ПК. На isMobilePlatformDevice() класс не вешается — только форма.
 */
.auth-desktop-register-phone-only {
    display: none !important;
}
#auth-screen.auth-pc-register-tab .register-form-fields-wrap {
    display: none !important;
}
#auth-screen.auth-pc-register-tab .auth-desktop-register-phone-only {
    display: block !important;
    padding: 4px 2px 8px;
    margin: 0 0 8px;
}
#auth-screen.auth-pc-register-tab .auth-desktop-register-phone-only-icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 18px;
}
#auth-screen.auth-pc-register-tab .auth-desktop-register-phone-only-icon {
    width: 120px;
    height: auto;
    max-width: min(100%, 180px);
    object-fit: contain;
    display: block;
    user-select: none;
    pointer-events: none;
}
#auth-screen.auth-pc-register-tab .auth-desktop-register-phone-only-title {
    font-size: 17px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 12px;
    line-height: 1.3;
}
#auth-screen.auth-pc-register-tab .auth-desktop-register-phone-only-text {
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}
#auth-screen.auth-pc-register-tab .auth-desktop-register-phone-only-text strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.auth-pc-field-label,
.auth-pc-card-head,
.auth-pc-switch-link,
.auth-pc-qr-title,
.auth-pc-qr-steps {
    display: none;
}

/* ПК: фиксированные размеры панели — не прыгает при переключении Вход/Регистрация */
@media (min-width: 769px) {
    #auth-screen {
        --auth-pc-panel-h: 100vh;
        --auth-pc-purple: #9661F1;
        --auth-pc-purple-dark: #6b3fd4;
        --auth-pc-wallpaper: url('/assets/auth-pc-grid.svg');
        --auth-pc-wallpaper-fill: #000000;
        --auth-pc-wallpaper-size: 200px;
        --auth-spot-x: 50%;
        --auth-spot-y: 50%;
        --auth-spot-radius: 260px;
        --auth-spot-opacity: 0;
        --auth-wave-overlap: clamp(52px, 5.5vw, 88px);
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
        background: var(--auth-pc-wallpaper-fill);
    }

    #auth-screen .auth-wrapper {
        gap: 0;
        align-items: stretch;
        max-width: none;
        width: 100%;
        min-height: 100vh;
        padding: 0;
        overflow: hidden;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        border: none;
    }

    #auth-screen .auth-pc-left {
        flex: 1 1 58%;
        min-width: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        z-index: 1;
        isolation: isolate;
        margin-right: calc(-1 * var(--auth-wave-overlap));
        background-color: var(--auth-pc-wallpaper-fill);
        padding: clamp(72px, 14vh, 128px) 56px 48px;
        box-sizing: border-box;
    }

    #auth-screen .auth-pc-left::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: calc(-1 * var(--auth-wave-overlap));
        pointer-events: none;
        z-index: 0;
        background: #000000;
    }

    #auth-screen .auth-pc-left::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: calc(-1 * var(--auth-wave-overlap));
        pointer-events: none;
        z-index: 0;
        opacity: var(--auth-spot-opacity, 0);
        transition: opacity 0.28s ease;
        background-color: transparent;
        background-image: var(--auth-pc-wallpaper);
        background-repeat: repeat;
        background-size: var(--auth-pc-wallpaper-size) var(--auth-pc-wallpaper-size);
        -webkit-mask-image: radial-gradient(
            circle var(--auth-spot-radius, 260px) at var(--auth-spot-x, 50%) var(--auth-spot-y, 50%),
            #000 0%,
            rgba(0, 0, 0, 0.82) 38%,
            transparent 70%
        );
        mask-image: radial-gradient(
            circle var(--auth-spot-radius, 260px) at var(--auth-spot-x, 50%) var(--auth-spot-y, 50%),
            #000 0%,
            rgba(0, 0, 0, 0.82) 38%,
            transparent 70%
        );
    }

    #auth-screen .auth-pc-left.auth-pc-left--spot-active {
        --auth-spot-opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {
        #auth-screen .auth-pc-left::after {
            display: none;
        }

        #auth-screen .auth-pc-left::before {
            background: #000000;
        }
    }

    #auth-screen .auth-pc-left > * {
        position: relative;
        z-index: 1;
    }

    #auth-screen .auth-pc-method-tabs {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px;
        margin: 0 0 32px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        flex-shrink: 0;
    }

    #auth-screen .auth-pc-method-tab {
        appearance: none;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.72);
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        padding: 11px 22px;
        border-radius: 999px;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
    }

    #auth-screen .auth-pc-method-tab.active {
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff;
    }

    #auth-screen .auth-pc-method-tab:hover:not(.active) {
        color: rgba(255, 255, 255, 0.92);
    }

    #auth-screen .auth-container {
        position: relative;
        flex: 1 1 auto;
        align-self: stretch;
        width: 100%;
        max-width: 420px;
        min-height: 380px;
        margin: 0 auto;
        display: block;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        border: none;
        padding: 0;
    }

    #auth-screen .auth-back-btn {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 40 !important;
        pointer-events: auto !important;
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        padding: 10px 12px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.92) !important;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }
    #auth-screen .auth-back-btn.hidden {
        display: none !important;
    }
    #auth-screen .auth-back-btn:hover {
        background: rgba(255, 255, 255, 0.06) !important;
    }

    #auth-screen .auth-container .logo,
    #auth-screen .auth-container .logo-subtitle,
    #auth-screen .auth-container .auth-tabs {
        display: none !important;
    }

    #auth-screen .auth-pc-panel-title {
        margin: 0 0 28px;
        font-size: clamp(22px, 2.2vw, 28px);
        font-weight: 700;
        line-height: 1.25;
        color: #ffffff;
        text-align: center;
    }

    #auth-screen .auth-password-view,
    #auth-screen .auth-qr-view {
        position: absolute;
        inset: 0;
        width: 100%;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: clamp(56px, 10vh, 112px);
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.32s ease, visibility 0.32s ease;
    }

    #auth-screen .auth-password-view {
        align-items: stretch;
    }

    #auth-screen .auth-password-view.active,
    #auth-screen .auth-qr-view.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #auth-screen .auth-qr-view-inner {
        width: 100%;
        max-width: 360px;
        height: auto;
        min-height: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    #auth-screen .auth-qr-view-inner .qr-placeholder-box,
    #auth-screen .auth-qr-view-inner .qr-code {
        width: min(320px, 72vw);
        height: min(320px, 72vw);
        margin: 0 auto;
        border-radius: 0;
        background: transparent;
    }

    #auth-screen .auth-qr-view-inner .qr-placeholder-box {
        background: transparent;
    }

    #auth-screen .auth-qr-view-inner .qr-placeholder-text {
        color: rgba(255, 255, 255, 0.25);
        font-size: clamp(48px, 8vw, 72px);
    }

    #auth-screen .desktop-only-hidden {
        display: none !important;
    }

    #auth-screen .auth-pc-welcome {
        flex: 0 0 42%;
        max-width: 42%;
        min-width: 320px;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        min-height: 100vh;
        height: 100%;
        padding: 56px 48px;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
        overflow: hidden;
        background: #9661F1;
        border-radius: 0;
        margin: 0;
        pointer-events: none;
        clip-path: url(#auth-pc-welcome-wave);
        -webkit-clip-path: url(#auth-pc-welcome-wave);
    }

    #auth-screen .auth-pc-welcome::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.28;
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 180px 180px;
    }

    #auth-screen .auth-pc-welcome-inner {
        width: 100%;
        max-width: 360px;
        text-align: center;
        margin: 0 auto;
        position: relative;
        z-index: 1;
        pointer-events: auto;
    }

    #auth-screen .auth-pc-welcome-heading {
        position: relative;
        display: inline-block;
        max-width: 100%;
        margin: 0 auto 20px;
        text-align: center;
    }

    #auth-screen .auth-pc-sparkle {
        position: absolute;
        width: clamp(28px, 2.8vw, 38px);
        height: clamp(28px, 2.8vw, 38px);
        pointer-events: none;
        z-index: 0;
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.28));
    }

    #auth-screen .auth-pc-sparkle--tl {
        left: clamp(-34px, -3vw, -22px);
        top: clamp(-28px, -2.5vw, -18px);
        transform: rotate(-16deg);
    }

    #auth-screen .auth-pc-sparkle--br {
        right: clamp(-16px, -1.5vw, -8px);
        bottom: clamp(-20px, -2vw, -12px);
        transform: rotate(14deg);
    }

    #auth-screen .auth-pc-welcome-title {
        position: relative;
        z-index: 1;
        margin: 0;
        font-size: clamp(24px, 2.4vw, 34px);
        font-weight: 700;
        line-height: 1.2;
        color: #ffffff;
    }

    #auth-screen .auth-pc-welcome-sub-wrap {
        min-height: 3.2em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #auth-screen .auth-pc-welcome-sub {
        margin: 0;
        font-size: clamp(15px, 1.5vw, 18px);
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.92);
        transition: opacity 0.28s ease, transform 0.28s ease;
        will-change: opacity, transform;
    }

    #auth-screen .auth-pc-welcome-sub.auth-pc-welcome-sub--fade-out {
        opacity: 0;
        transform: translateY(10px);
    }

    #auth-screen .auth-container .auth-form {
        flex: 0 1 auto;
        min-height: 0;
        overflow: visible;
    }

    #auth-screen .form-group {
        margin-bottom: 18px;
    }

    #auth-screen #login-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #auth-screen #login-form .form-group {
        width: 100%;
        max-width: 300px;
        margin-bottom: 12px;
    }

    #auth-screen #login-form input[type="text"],
    #auth-screen #login-form input[type="email"],
    #auth-screen #login-form input[type="password"] {
        width: 100%;
        padding: 14px 22px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        font-size: 15px;
        text-align: center;
    }

    #auth-screen input[type="text"],
    #auth-screen input[type="email"],
    #auth-screen input[type="password"],
    #auth-screen input[type="url"] {
        padding: 16px 18px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        font-size: 16px;
    }

    #auth-screen #login-form .btn-primary {
        width: auto;
        min-width: 120px;
        max-width: 220px;
        margin-top: 8px;
        padding: 13px 32px;
        background: var(--auth-pc-purple);
        border-radius: 999px;
        font-size: 15px;
        font-weight: 600;
        align-self: center;
    }

    #auth-screen .btn-primary {
        margin-top: 12px;
        padding: 16px 24px;
        background: var(--auth-pc-purple);
        border-radius: 999px;
        font-size: 16px;
        font-weight: 600;
    }

    #auth-screen .btn-primary:hover {
        background: #a874ff;
    }

    #auth-screen.auth-pc-register-tab .auth-pc-panel-title {
        display: none;
    }

    #auth-screen.auth-pc-register-tab #login-form {
        display: none !important;
    }

    #auth-screen.auth-pc-register-tab #register-form {
        display: block !important;
    }

    #auth-screen .auth-qr-container.desktop-only {
        display: none !important;
    }
}

/* QR-экран в той же панели по форме и размерам */
#auth-screen .auth-qr-view-inner {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
#auth-screen .auth-qr-view-inner .qr-placeholder-box,
#auth-screen .auth-qr-view-inner .qr-code {
    width: 300px;
    height: 300px;
    flex-shrink: 0;
}
#auth-screen .auth-qr-view-inner .qr-instruction-short {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}
#auth-screen .auth-qr-view-inner .btn-auth-password {
    color: #ffffff;
    margin-top: 8px;
}
#auth-screen .auth-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 28px;
    gap: 0;
}
#auth-screen .tab-btn {
    padding: 12px 0;
    color: rgba(255, 255, 255, 0.7);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 15px;
}
#auth-screen .tab-btn.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
}
#auth-screen .form-group {
    margin-bottom: 20px;
}
#auth-screen .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 14px;
}
#auth-screen input[type="text"],
#auth-screen input[type="email"],
#auth-screen input[type="password"],
#auth-screen input[type="url"] {
    width: 100%;
    padding: 12px 16px;
    background: #232323;
    border: none;
    color: #ffffff;
    font-size: 15px;
    border-radius: 12px;
}
#auth-screen input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
#auth-screen input[type="text"]:focus,
#auth-screen input[type="email"]:focus,
#auth-screen input[type="password"]:focus {
    outline: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
#auth-screen .btn-primary {
    width: 100%;
    padding: 14px;
    background: #232323;
    border: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    border-radius: 12px;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 8px;
}
#auth-screen .btn-primary:hover {
    background: #333333;
    color: #ffffff;
    box-shadow: none;
}
#auth-screen #forgot-password-btn,
#auth-screen .btn-auth-qr {
    background: none;
    border: none;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    padding: 10px 0;
    margin-top: 12px;
    display: block;
    cursor: pointer;
}
#auth-screen #forgot-password-btn:hover,
#auth-screen .btn-auth-qr:hover {
    text-decoration: underline;
}
/* Кнопка «Войти по QR» только на вкладке Вход, на Регистрация скрыта */
#auth-screen .auth-container:has(#register-form.active) .btn-auth-qr {
    display: none !important;
}

/* Без анимаций на экране входа — только отключаем анимации, контент виден */
#auth-screen .tab-btn,
#auth-screen .tab-btn.active,
#auth-screen .auth-tabs {
    animation: none !important;
}
#auth-screen .auth-form,
#auth-screen .auth-form.active,
#auth-screen.active .auth-form.active {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
#auth-screen .auth-container .form-group,
#auth-screen .auth-container .form-group label,
#auth-screen.active .auth-form.active .form-group,
#auth-screen .auth-form.active .form-group,
#auth-screen .auth-form.active .form-group:nth-child(n) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
#auth-screen .auth-container #recaptcha-container,
#auth-screen .auth-form.active #recaptcha-container {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
#auth-screen .auth-container .btn-primary,
#auth-screen .auth-form.active .btn-primary {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
#auth-screen .auth-container #forgot-password-btn,
#auth-screen .auth-form.active #forgot-password-btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
#auth-screen .auth-container .error-message {
    opacity: 1 !important;
    transform: none !important;
}
#auth-screen .logo,
#auth-screen .logo-subtitle {
    display: none;
}
#auth-screen #recaptcha-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: visible;
    width: 100%;
    max-width: 100%;
}
#auth-screen #recaptcha-container .recaptcha-round-wrap {
    display: inline-block;
    line-height: 0;
    transform-origin: 0 0;
}
#auth-screen #recaptcha-container .g-recaptcha {
    overflow: visible;
}
@media (max-width: 768px) {
    #auth-screen #recaptcha-container {
        --recaptcha-scale: min(1, calc((100vw - 56px) / 304));
        width: calc(304px * var(--recaptcha-scale));
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
    }
    #auth-screen #recaptcha-container .recaptcha-round-wrap {
        transform: scale(var(--recaptcha-scale));
        margin: 0 calc((var(--recaptcha-scale) - 1) * 304px) calc((var(--recaptcha-scale) - 1) * 78px) 0;
    }
}
#auth-screen .error-message {
    color: #ff6b6b;
    font-size: 13px;
    margin-top: 8px;
}

.auth-qr-container {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border: 2px solid var(--white-border);
    background: var(--bg-dark);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    animation: authContainerFadeIn 0.6s ease-out;
}

/* ПК: два режима — сначала QR, по кнопке «Войти с паролем» форма */
.auth-qr-view {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.auth-qr-view-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.qr-instruction-short {
    color: var(--text-white);
    font-size: 16px;
    text-align: center;
    line-height: 1.5;
    margin: 0;
}
.btn-auth-password,
.btn-auth-qr {
    background: transparent;
    border: none;
    color: var(--gray-text);
    cursor: pointer;
    font-size: 15px;
    text-decoration: underline;
    padding: 8px 0;
    transition: color 0.2s;
}
.btn-auth-password:hover,
.btn-auth-qr:hover {
    color: var(--text-white);
}
.btn-auth-qr {
    margin-top: 16px;
}
@media (min-width: 769px) {
    #auth-screen .auth-qr-view:not(.active),
    #auth-screen .auth-password-view:not(.active) {
        display: flex !important;
    }
    #auth-screen .auth-qr-view.active,
    #auth-screen .auth-password-view.active {
        display: flex !important;
    }
}
@media (max-width: 768px) {
    .auth-password-view {
        display: flex;
        width: 100%;
    }
}

.qr-placeholder-box {
    width: 300px;
    height: 300px;
    background: transparent;
    border: none;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-placeholder-text {
    font-size: 64px;
    font-weight: bold;
    color: var(--gray-text);
}

.qr-code {
    width: 300px;
    height: 300px;
    padding: 0;
    background: transparent !important;
    border-radius: 0;
    overflow: visible;
    display: none;
    box-sizing: border-box;
}

.qr-code canvas {
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: block;
    background: transparent !important;
}
.qr-code img,
.qr-code table {
    display: none !important;
}

/* Сканер QR — отдельный полноэкранный экран */
#scan-qr-modal.modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    padding: 0;
    background: transparent;
    align-items: stretch;
    justify-content: stretch;
}

.modal-content.scan-qr-modal {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
    background: #000;
}

.scan-qr-fullscreen {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
    background: #000;
}

.scan-qr-fullscreen .qr-scanner-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

.scan-qr-tracker {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240px;
    height: 240px;
    transform: translate(-50%, -50%) rotate(0rad);
    transform-origin: center center;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-sizing: border-box;
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.25),
        0 0 24px rgba(0, 0, 0, 0.35);
    z-index: 2;
    pointer-events: none;
    opacity: 0.92;
    will-change: transform, width, height, left, top;
}

body.scan-qr-open .scan-qr-tracker {
    animation: scanQrPulse 1.25s ease-in-out infinite;
}

body.scan-qr-open .scan-qr-tracker.is-locked {
    animation: none;
    opacity: 1;
    border-color: rgba(130, 255, 170, 0.95);
    border-radius: 10px;
}

@keyframes scanQrPulse {
    0%, 100% { opacity: 0.78; }
    50% { opacity: 0.98; }
}

.scan-qr-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    margin: 0;
    padding: calc(max(10px, env(safe-area-inset-top, 0px)) + 10px) 20px 20px;
    text-align: center;
    color: #fff;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.2) 75%, transparent 100%);
}

.scan-qr-title {
    margin: 0;
    font-size: clamp(18px, 4.5vw, 22px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.scan-qr-error {
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(72px + env(safe-area-inset-top, 0px));
    z-index: 4;
    text-align: center;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 14px;
}

/* Пока открыт сканер — прячем нижнюю панель чатов */
body.scan-qr-open .chats-bottom-pill,
body.scan-qr-open #chats-bottom-pill {
    display: none !important;
}

.scan-qr-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px calc(16px + env(safe-area-inset-bottom, 0px)) max(20px, calc(12px + env(safe-area-inset-bottom, 0px)));
    pointer-events: none;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
}

.scan-qr-bottom .scan-qr-back {
    pointer-events: auto;
}

.scan-qr-account-wrapper,
.scan-qr-cancel,
.scan-qr-account {
    display: none !important;
}

.scan-qr-back {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.scan-qr-back:active {
    transform: scale(0.96);
}

.scan-qr-back svg {
    display: block;
}

.scan-qr-account {
    height: 52px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    padding: 0 16px 0 10px;
    gap: 12px;
    color: #ffffff;
    flex: 1;
    min-width: 0;
}

.scan-qr-account-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    overflow: hidden;
}

.scan-qr-account-name {
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.95;
}

.scan-qr-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scan-qr-account-menu {
    position: absolute;
    right: 0;
    bottom: 60px;
    min-width: 220px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
}

.scan-qr-account-menu.hidden {
    display: none;
}

.scan-qr-account-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    color: #ffffff;
}

.scan-qr-account-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.scan-qr-account-item-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 700;
}

.scan-qr-account-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scan-qr-account-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.scan-qr-account-item-text span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.qr-confirm-success {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

.qr-confirm-success.show {
    opacity: 1;
    pointer-events: all;
}

.qr-confirm-card {
    background: var(--bg-dark);
    border: 2px solid var(--white-border);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: qrConfirmPop 0.35s ease-out;
}

.qr-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #2bd36b;
    color: #0b1b10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
}

.qr-confirm-title {
    color: var(--text-white);
    font-size: 18px;
    font-weight: 600;
}

.qr-confirm-subtitle {
    color: var(--gray-text);
    font-size: 14px;
}

@keyframes qrConfirmPop {
    0% {
        transform: scale(0.92);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.qr-welcome-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-out;
}

.qr-welcome-overlay.show {
    opacity: 1;
    pointer-events: all;
}

.qr-welcome-card {
    background: rgba(10, 10, 16, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 28px 32px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    animation: qrWelcomeFadeIn 0.8s ease-out;
}

.qr-welcome-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--bg-gray-1);
    border: 2px solid rgba(43, 211, 107, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 auto 14px;
    position: relative;
    overflow: hidden;
}

.qr-welcome-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qr-welcome-avatar::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid rgba(43, 211, 107, 0.45);
    animation: qrWelcomeWave 2.2s ease-out infinite;
}

.qr-welcome-title {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}

.qr-welcome-name {
    color: var(--text-white);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.qr-welcome-username {
    color: var(--gray-text);
    font-size: 14px;
}

@keyframes qrWelcomeFadeIn {
    0% {
        transform: translateY(8px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes qrWelcomeWave {
    0% {
        transform: scale(0.8);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only {
        display: flex;
    }
}

.qr-instruction {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin: 0;
}

.qr-hint {
    color: var(--gray-text);
    font-size: 14px;
    text-align: center;
    margin: 0;
}

.desktop-only {
    display: none;
}

@media (min-width: 769px) {
    .desktop-only {
        display: flex;
    }
}

/* Герой мобильной авторизации — не показываем на ПК */
.auth-mobile-hero {
    display: none !important;
}


.auth-mobile-flow,
.auth-mobile-register-head,
.auth-mobile-brand {
    display: none;
}

@media (max-width: 768px) {
    .auth-wrapper {
        flex-direction: column;
        gap: 0;
    }
    .auth-qr-container {
        display: none !important;
    }

    /* ==================== MOBILE AUTH — карточка-пилюля как на ПК ==================== */
    #auth-screen {
        --auth-pc-purple: #8b7cf6;
        --auth-pc-purple-soft: #5e5a7a;
        --auth-pc-card: #1c1c1e;
        --auth-pc-muted: rgba(255, 255, 255, 0.55);
        --auth-pc-field: #7669C6;
        position: relative;
        justify-content: center;
        align-items: center;
        background: transparent;
        overflow: auto;
        min-height: 100vh;
        min-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        padding: max(12px, env(safe-area-inset-top, 0px)) 16px max(12px, env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    #auth-screen::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: var(--theme-bg-base, #0a0a0a);
    }

    #auth-screen::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background-color: transparent;
        background-image: var(--theme-bg-pattern-gradient);
        background-repeat: no-repeat;
        background-size: 260% 260%;
        opacity: var(--theme-bg-pattern-opacity, 0.38);
        animation: xamPatternGradientDrift 48s ease-in-out infinite;
        -webkit-mask-image: var(--theme-bg-pattern);
        mask-image: var(--theme-bg-pattern);
        -webkit-mask-repeat: repeat;
        mask-repeat: repeat;
        -webkit-mask-size: var(--theme-bg-pattern-size);
        mask-size: var(--theme-bg-pattern-size);
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
        pointer-events: none;
    }

    #auth-screen > * {
        position: relative;
        z-index: 2;
    }

    .auth-mobile-hero {
        display: none !important;
    }

    .auth-wrapper {
        max-width: none;
        position: relative;
        z-index: 1;
        width: 100%;
        height: auto;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    #auth-screen .auth-pc-left {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        padding: 0;
        background: transparent !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #auth-screen .auth-pc-left::before,
    #auth-screen .auth-pc-left::after {
        display: none !important;
        content: none !important;
    }

    #auth-screen .auth-password-view {
        width: 100%;
        display: block;
    }

    #auth-screen .auth-container {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: min(420px, calc(100vw - 28px));
        max-width: min(420px, calc(100vw - 28px));
        min-height: 0;
        max-height: calc(100dvh - 24px);
        border-radius: 28px;
        background: var(--auth-pc-card);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
        padding: 36px 32px 30px;
        border: none;
        animation: authPcCardAppear 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
        overflow: hidden;
        height: auto;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        will-change: height;
        transition: height 0.48s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @media (prefers-reduced-motion: reduce) {
        #auth-screen .auth-container {
            animation: none !important;
        }
        #auth-screen::after {
            animation: none !important;
        }
    }

    @keyframes authPcCardAppear {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    #auth-screen .auth-container .logo,
    #auth-screen .auth-container .logo-subtitle,
    #auth-screen .auth-tabs,
    #auth-screen .btn-auth-qr,
    #auth-screen #login-form {
        display: none !important;
    }

    #auth-screen .auth-mobile-brand {
        display: flex;
        justify-content: center;
        flex-shrink: 0;
        margin: 0 0 18px;
    }

    #auth-screen .auth-mobile-brand .auth-pc-logo {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        background: var(--auth-pc-purple);
        display: grid;
        place-items: center;
        margin: 0;
        overflow: hidden;
    }

    #auth-screen .auth-mobile-brand .auth-pc-logo-mark {
        width: 44px;
        height: 38px;
        display: block;
    }

    #auth-screen .auth-back-btn {
        position: absolute !important;
        top: 14px !important;
        left: 12px !important;
        padding: 8px 12px !important;
        color: rgba(255,255,255,0.92) !important;
        font-size: 14px;
        font-weight: 600;
        gap: 4px !important;
        z-index: 100;
        pointer-events: auto;
        background: rgba(255,255,255,0.08);
        border-radius: 999px;
        border: none;
    }
    #auth-screen .auth-back-btn svg {
        width: 18px;
        height: 18px;
    }

    .auth-mobile-flow {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        position: relative;
        z-index: 1;
        width: 100%;
        opacity: 1;
        transform: translateX(0);
        transition: opacity 0.32s ease, transform 0.32s ease;
    }

    .auth-mobile-step {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-top: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 1;
    }
    .auth-mobile-step--active {
        position: relative;
        inset: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 2;
        min-height: 0;
        width: 100%;
    }
    #auth-screen[data-mobile-auth-direction="forward"] .auth-mobile-step--active {
        animation: authMobileStepInForward 0.34s ease both;
    }
    #auth-screen[data-mobile-auth-direction="back"] .auth-mobile-step--active {
        animation: authMobileStepInBack 0.34s ease both;
    }
    #auth-screen:not(.auth-mobile-step-ready) .auth-mobile-step--active,
    #auth-screen:not(.auth-mobile-step-ready)[data-mobile-auth-step="register"] .auth-mobile-register-head,
    #auth-screen:not(.auth-mobile-step-ready)[data-mobile-auth-step="register"] #register-form {
        animation: none !important;
    }

    @keyframes authMobileStepInForward {
        from { opacity: 0; transform: translateX(18px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes authMobileStepInBack {
        from { opacity: 0; transform: translateX(-18px); }
        to { opacity: 1; transform: translateX(0); }
    }

    #auth-screen[data-mobile-auth-step="register"] .auth-mobile-flow {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        transform: translateX(-16px);
        flex: none;
    }
    #auth-screen[data-mobile-auth-direction="back"][data-mobile-auth-step="register"] .auth-mobile-flow {
        transform: translateX(16px);
    }
    #auth-mobile-step-welcome,
    #auth-mobile-step-email {
        justify-content: flex-start;
        padding-bottom: 0;
    }

    .auth-mobile-welcome-body,
    .auth-mobile-step-body {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        padding: 0;
        min-height: 0;
        width: 100%;
    }
    .auth-mobile-step-body--center {
        justify-content: flex-start;
        padding-top: 4px;
    }

    .auth-mobile-welcome-heading,
    .auth-mobile-sparkle,
    .auth-mobile-step-icon,
    .auth-mobile-register-icon {
        display: none !important;
    }

    .auth-mobile-welcome-title,
    .auth-mobile-step-title--email {
        margin: 0 0 10px;
        font-size: 24px;
        line-height: 1.25;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: #ffffff;
        -webkit-text-fill-color: #ffffff;
        background: none;
        max-width: 100%;
    }
    .auth-mobile-welcome-sub {
        margin: 0;
        max-width: 280px;
        font-size: 15px;
        line-height: 1.4;
        color: var(--auth-pc-muted);
        font-weight: 400;
    }

    .auth-mobile-step-desc--email {
        margin: 0 0 22px;
        font-size: 15px;
        color: var(--auth-pc-muted);
        font-weight: 400;
        max-width: none;
    }

    .auth-mobile-step-title {
        margin: 0 0 12px;
        max-width: 300px;
        font-size: 22px;
        line-height: 1.25;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: -0.01em;
        -webkit-text-fill-color: #ffffff;
        background: none;
    }
    .auth-mobile-step-desc {
        margin: 0;
        max-width: 280px;
        font-size: 15px;
        line-height: 1.45;
        color: var(--auth-pc-muted);
        font-weight: 400;
    }
    .auth-mobile-step-desc--sub {
        margin-top: 6px;
    }
    .auth-mobile-step-desc strong {
        color: rgba(255, 255, 255, 0.85);
        font-weight: 700;
    }

    #auth-screen .auth-mobile-outlined-field {
        position: relative;
        width: 100%;
        margin: 4px 0 0 !important;
        text-align: left;
    }

    #auth-screen .auth-mobile-outlined-field .auth-pc-field-label {
        display: block !important;
        position: absolute;
        left: 16px;
        top: -9px;
        transform: none;
        padding: 3px 8px;
        margin: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        color: var(--auth-pc-field);
        background: var(--auth-pc-card);
        border-radius: 8px;
        pointer-events: none;
        z-index: 2;
        white-space: nowrap;
    }

    .auth-mobile-input,
    #auth-screen .auth-mobile-outlined-field .auth-mobile-input,
    #auth-screen .auth-mobile-outlined-field .auth-register-field {
        width: 100% !important;
        height: 52px !important;
        margin-top: 0 !important;
        border-radius: 14px !important;
        padding: 0 18px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1.5px solid var(--auth-pc-field) !important;
        color: #ffffff !important;
        font-size: 15px !important;
        outline: none !important;
        box-sizing: border-box !important;
        text-align: left !important;
        box-shadow: none !important;
    }
    .auth-mobile-input::placeholder,
    #auth-screen .auth-mobile-outlined-field input::placeholder {
        color: transparent !important;
    }
    .auth-mobile-input:focus,
    #auth-screen .auth-mobile-outlined-field input:focus {
        background: transparent !important;
        border-color: var(--auth-pc-field) !important;
        box-shadow: none !important;
    }

    .auth-mobile-glow-btn,
    #auth-screen #register-form .btn-primary {
        position: relative;
        width: 100% !important;
        min-width: 0;
        max-width: none !important;
        height: 50px;
        margin-top: 28px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        padding: 0 20px;
        border: none;
        border-radius: 14px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.98);
        cursor: pointer;
        background: #7E6CD2;
        box-shadow: none;
        flex-shrink: 0;
        overflow: hidden;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        letter-spacing: 0;
        transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
        align-self: stretch;
    }
    .auth-mobile-glow-btn::before,
    #auth-screen #register-form .btn-primary::before {
        content: none;
        display: none;
    }
    .auth-mobile-glow-btn:disabled,
    #auth-screen #register-form .btn-primary:disabled {
        background: #3d3854;
        color: rgba(255, 255, 255, 0.52);
        cursor: not-allowed;
        opacity: 1;
    }
    .auth-mobile-glow-btn:active:not(:disabled),
    #auth-screen #register-form .btn-primary:active:not(:disabled) {
        background: #9080e0;
    }

    .auth-mobile-glow-btn-label {
        display: inline-block;
        position: relative;
        z-index: 1;
    }
    .auth-mobile-glow-btn-label--shake {
        animation: authMobileGlowBtnLabelShake 0.72s ease-in-out;
    }
    @keyframes authMobileGlowBtnLabelShake {
        0%, 100% { transform: translateX(0); }
        12% { transform: translateX(-7px); }
        24% { transform: translateX(7px); }
        36% { transform: translateX(-6px); }
        48% { transform: translateX(6px); }
        60% { transform: translateX(-4px); }
        72% { transform: translateX(4px); }
        84% { transform: translateX(-2px); }
    }

    #auth-screen #register-form .btn-primary {
        display: inline-flex;
    }

    .auth-mobile-step-error {
        margin-top: 10px;
        min-height: 18px;
        text-align: center;
        font-size: 13px;
        color: #f87171;
    }
    .auth-mobile-step-error:empty {
        display: none;
    }

    .auth-mobile-register-head {
        padding-top: 0;
        text-align: center;
        flex-shrink: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(18px);
        transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s ease;
    }
    .auth-mobile-register-title {
        margin: 0 auto 10px;
        max-width: 100%;
        font-size: 22px;
        line-height: 1.25;
        font-weight: 700;
        color: #ffffff;
        -webkit-text-fill-color: #ffffff;
        background: none;
    }
    .auth-mobile-register-title.auth-register-copy--anim,
    .auth-mobile-register-sub.auth-register-copy--anim {
        animation: authRegisterCopyInFwd 0.34s ease both;
    }
    #auth-screen[data-register-substep-dir="back"] .auth-mobile-register-title.auth-register-copy--anim,
    #auth-screen[data-register-substep-dir="back"] .auth-mobile-register-sub.auth-register-copy--anim {
        animation-name: authRegisterCopyInBack;
    }
    @keyframes authRegisterCopyInFwd {
        from { opacity: 0; transform: translateX(14px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes authRegisterCopyInBack {
        from { opacity: 0; transform: translateX(-14px); }
        to { opacity: 1; transform: translateX(0); }
    }

    #auth-screen[data-mobile-auth-step="register"] .auth-container {
        justify-content: flex-start;
    }
    #auth-screen[data-mobile-auth-step="register"] .auth-mobile-register-head {
        display: block !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }
    #auth-screen[data-mobile-auth-direction="forward"][data-mobile-auth-step="register"] .auth-mobile-register-head {
        animation: authMobileStepInForward 0.34s ease both;
    }
    #auth-screen[data-mobile-auth-direction="back"][data-mobile-auth-step="register"] .auth-mobile-register-head {
        animation: authMobileStepInBack 0.34s ease both;
    }
    #auth-screen[data-mobile-auth-step="register"] .auth-password-view {
        flex: 0 0 auto;
        width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    #auth-screen[data-mobile-auth-step="register"] #register-form {
        display: flex !important;
        opacity: 1;
        pointer-events: auto;
        flex: 0 0 auto;
        padding-top: 0;
        justify-content: flex-start;
        padding-bottom: 0;
        visibility: visible;
        transform: translateX(0);
        min-height: 0;
        overflow: visible;
        width: 100%;
    }
    #auth-screen[data-mobile-auth-direction="forward"][data-mobile-auth-step="register"] #register-form {
        animation: authMobileStepInForward 0.34s ease both;
    }
    #auth-screen[data-mobile-auth-direction="back"][data-mobile-auth-step="register"] #register-form {
        animation: authMobileStepInBack 0.34s ease both;
    }
    #auth-screen[data-mobile-auth-step="register"] #register-form-fields-wrap {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        min-height: 0;
        width: 100%;
        overflow: visible;
    }
    #auth-screen[data-mobile-auth-step="register"] #register-form .btn-primary {
        margin-top: 28px !important;
        margin-bottom: 0;
        align-self: stretch;
        flex-shrink: 0;
    }
    #auth-screen[data-mobile-auth-step="register"] .auth-mobile-outlined-field,
    #auth-screen[data-mobile-auth-step="register"] .register-substep--active {
        flex-shrink: 0;
    }
    #auth-screen[data-mobile-auth-step="register"] #register-form,
    #auth-screen[data-mobile-auth-step="register"] #register-form-fields-wrap,
    #auth-screen[data-mobile-auth-step="register"] #recaptcha-container {
        overflow: visible;
    }
    #auth-screen[data-mobile-auth-step="register"] #register-form .register-email-group {
        display: none;
    }
    #auth-screen[data-mobile-auth-step="register"] .auth-desktop-register-phone-only {
        display: none !important;
    }

    .auth-mobile-register-sub {
        margin: 0 auto 18px;
        max-width: 280px;
        min-height: 0;
        font-size: 14px;
        line-height: 1.4;
        color: var(--auth-pc-muted);
        font-weight: 400;
        text-align: center;
    }
    .auth-mobile-register-sub:empty {
        display: none;
        margin: 0 0 12px;
    }

    .register-substep {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }
    .register-substep--active {
        display: flex;
    }

    #auth-screen[data-mobile-auth-step="register"] .register-substep {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        flex: 0 0 auto;
        justify-content: flex-start;
        min-height: 0;
        padding-bottom: 0;
    }
    #auth-screen[data-mobile-auth-step="register"] .register-substep--active {
        display: flex;
        animation: authRegisterSubstepInFwd 0.34s ease both;
    }
    #auth-screen[data-register-substep-dir="back"][data-mobile-auth-step="register"] .register-substep--active {
        animation-name: authRegisterSubstepInBack;
    }
    @keyframes authRegisterSubstepInFwd {
        from { opacity: 0; transform: translateX(18px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes authRegisterSubstepInBack {
        from { opacity: 0; transform: translateX(-18px); }
        to { opacity: 1; transform: translateX(0); }
    }

    .auth-register-field {
        width: 100%;
    }

    #auth-screen[data-mobile-auth-step="register"] .register-substep-error {
        text-align: center;
        min-height: 0;
        margin: 10px 0 0;
    }
    #auth-screen[data-mobile-auth-step="register"] .register-substep-error:not(.show):empty {
        display: none;
    }

    #auth-screen[data-mobile-auth-step="register"] #register-substep-captcha {
        gap: 14px;
        align-items: center;
    }

    #auth-screen #recaptcha-container {
        margin-top: 4px;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #auth-screen #recaptcha-container .recaptcha-round-wrap {
        transform: scale(0.92);
        transform-origin: center top;
    }

    @media (prefers-reduced-motion: reduce) {
        #auth-screen[data-mobile-auth-step="register"] .register-substep--active,
        .auth-mobile-register-title.auth-register-copy--anim,
        .auth-mobile-register-sub.auth-register-copy--anim {
            animation: none !important;
        }
        .auth-mobile-glow-btn,
        #auth-screen #register-form .btn-primary {
            transition: background 0.15s ease, opacity 0.15s ease !important;
        }
    }

    #auth-screen .auth-form {
        padding-top: 0;
        flex: 1 1 auto;
        display: none !important;
        flex-direction: column;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(18px);
        transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s ease;
        animation: none !important;
    }
    #auth-screen .auth-form .form-group {
        margin-bottom: 10px;
        animation: none !important;
    }
    #auth-screen input[type="text"],
    #auth-screen input[type="email"],
    #auth-screen input[type="password"],
    #auth-screen input[type="url"] {
        height: 54px;
        border-radius: 16px;
        padding: 0 20px;
        background: transparent;
        border: 1.5px solid var(--auth-pc-field);
        color: rgba(255,255,255,0.95);
        font-size: 15px;
        outline: none;
    }
    #auth-screen input::placeholder {
        color: transparent;
    }

    #auth-screen[data-mobile-auth-step="welcome"] .auth-back-btn,
    #auth-screen[data-mobile-auth-step="email"] .auth-back-btn,
    #auth-screen:not([data-mobile-auth-step]) .auth-back-btn {
        display: none !important;
    }

    #auth-screen .auth-back-btn {
        transition: opacity 0.24s ease, transform 0.24s ease;
    }
    #auth-screen .auth-back-btn.hidden {
        opacity: 0;
        transform: translateX(-6px);
        pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .auth-mobile-flow,
        .auth-mobile-step,
        .auth-mobile-register-head,
        #auth-screen #register-form,
        .auth-mobile-glow-btn-label--shake {
            animation: none !important;
            transition: none !important;
        }
    }
}

@keyframes authContainerFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.logo {
    text-align: center;
    font-size: 48px;
    font-weight: bold;
    color: var(--white-border);
    margin-bottom: 0;
    animation: logoFadeIn 0.6s ease-out 0.1s both;
}

@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.logo-subtitle {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--white-border);
    margin-bottom: 30px;
    margin-top: -10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: logoSubtitleFadeIn 0.6s ease-out 0.2s both;
}

@keyframes logoSubtitleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--gray-border);
    animation: authTabsFadeIn 0.5s ease-out 0.3s both;
}

@keyframes authTabsFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-btn {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: none;
    color: var(--gray-text);
    cursor: pointer;
    font-size: 16px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
    position: relative;
}

.tab-btn.active {
    color: var(--white-border);
    border-bottom-color: var(--white-border);
    animation: tabActiveFadeIn 0.3s ease-out;
}

@keyframes tabActiveFadeIn {
    0% {
        opacity: 0.7;
        transform: translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-form {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.auth-form.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: authFormFadeIn 0.5s ease-out 0.4s both;
}

/* При переключении между формами - более быстрая анимация */
.auth-form.active:not(:first-child) {
    animation: authFormFadeInSwitch 0.25s ease-out both;
}

@keyframes authFormFadeInSwitch {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Анимация при переключении между формами */
.auth-form:not(.active) {
    display: none;
}

@keyframes authFormFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-group {
    margin-bottom: 20px;
    opacity: 0;
    transform: translateX(-20px);
    animation: formGroupFadeIn 0.4s ease-out both;
}

/* Анимация для контейнера reCAPTCHA */
#auth-screen.active .auth-form.active #recaptcha-container {
    opacity: 0;
    transform: translateY(10px);
    animation: recaptchaFadeIn 0.5s ease-out 1.2s both;
}

.auth-form.active #recaptcha-container {
    opacity: 0;
    transform: translateY(8px);
    animation: recaptchaFadeInSwitch 0.2s ease-out 0.2s both;
}

@keyframes recaptchaFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes recaptchaFadeInSwitch {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Каскадное появление полей формы при первой загрузке */
#auth-screen.active .auth-form.active .form-group {
    opacity: 0;
    transform: translateX(-20px);
    animation: formGroupFadeIn 0.4s ease-out both;
}

#auth-screen.active .auth-form.active .form-group:nth-child(1) {
    animation-delay: 0.5s;
}

#auth-screen.active .auth-form.active .form-group:nth-child(2) {
    animation-delay: 0.6s;
}

#auth-screen.active .auth-form.active .form-group:nth-child(3) {
    animation-delay: 0.7s;
}

#auth-screen.active .auth-form.active .form-group:nth-child(4) {
    animation-delay: 0.8s;
}

#auth-screen.active .auth-form.active .form-group:nth-child(5) {
    animation-delay: 0.9s;
}

/* При переключении между формами - более быстрая анимация */
.auth-form.active .form-group {
    opacity: 0;
    transform: translateX(-15px);
    animation: formGroupFadeInSwitch 0.2s ease-out both;
}

.auth-form.active .form-group:nth-child(1) {
    animation-delay: 0.02s;
}

.auth-form.active .form-group:nth-child(2) {
    animation-delay: 0.04s;
}

.auth-form.active .form-group:nth-child(3) {
    animation-delay: 0.06s;
}

.auth-form.active .form-group:nth-child(4) {
    animation-delay: 0.08s;
}

.auth-form.active .form-group:nth-child(5) {
    animation-delay: 0.1s;
}

.auth-form.active .form-group:nth-child(6) {
    animation-delay: 0.12s;
}

@keyframes formGroupFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes formGroupFadeInSwitch {
    0% {
        opacity: 0;
        transform: translateX(-15px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-light);
    font-size: 14px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"] {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-darker);
    border: 1px solid var(--gray-border);
    color: var(--text-white);
    font-size: 16px;
    border-radius: 12px;
    transition: all 0.3s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus {
    outline: none;
    border-color: var(--white-border);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

input[type="file"] {
    display: none;
}

.file-input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.file-input-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-darker);
    border: 2px dashed var(--gray-border);
    color: var(--text-light);
    font-size: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.file-input-label:hover {
    border-color: var(--white-border);
    background: var(--bg-gray-1);
    color: var(--text-white);
}

.file-input-label.has-file {
    border-color: var(--white-border);
    border-style: solid;
    color: var(--white-border);
}

.file-input-label svg {
    margin-right: 8px;
    width: 20px;
    height: 20px;
}

input[type="text"]:read-only,
input[type="email"]:read-only {
    background: var(--bg-black);
    color: var(--gray-text);
    cursor: not-allowed;
}

.btn-primary {
    width: 100%;
    padding: 12px;
    background: var(--bg-darker);
    border: 2px solid var(--white-border);
    color: var(--white-border);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Анимация кнопки при первой загрузке */
#auth-screen.active .auth-form.active .btn-primary {
    opacity: 0;
    transform: translateY(10px);
    animation: buttonFadeIn 0.5s ease-out 1s both;
}

/* При переключении между формами - более быстрая анимация */
.auth-form.active .btn-primary {
    opacity: 0;
    transform: translateY(8px);
    animation: buttonFadeInSwitch 0.2s ease-out 0.15s both;
}

@keyframes buttonFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes buttonFadeInSwitch {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-primary:hover {
    background: var(--white-border);
    color: var(--bg-black);
    box-shadow: 0 0 15px var(--white-border);
}

.btn-secondary {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 2px solid var(--gray-border);
    color: var(--gray-text);
    font-size: 16px;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s;
    margin-top: 10px;
}

/* Анимация для кнопки "Забыли пароль?" */
#auth-screen.active .auth-form.active #forgot-password-btn {
    opacity: 0;
    transform: translateY(5px);
    animation: forgotPasswordFadeIn 0.4s ease-out 1.1s both;
}

.auth-form.active #forgot-password-btn {
    opacity: 0;
    transform: translateY(5px);
    animation: forgotPasswordFadeInSwitch 0.2s ease-out 0.18s both;
}

@media (min-width: 769px) {
    #login-form .login-form-group--password,
    #login-form #forgot-password-btn {
        display: none !important;
    }
}

@keyframes forgotPasswordFadeIn {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes forgotPasswordFadeInSwitch {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-secondary:hover {
    border-color: var(--gray-text);
    color: var(--text-white);
}

.error-message {
    margin-top: 15px;
    padding: 10px;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.3);
    color: #ff4444;
    border-radius: 12px;
    font-size: 14px;
    display: none;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.error-message.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: errorMessageFadeIn 0.3s ease-out;
}

@keyframes errorMessageFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.messenger-container {
    display: flex;
    height: var(--app-height);
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.sidebar {
    width: 350px;
    background: var(--bg-dark);
    border-right: 2px solid var(--white-border);
    display: flex;
    flex-direction: column;
    position: relative;
}

.sidebar-header {
    padding: 16px;
    background: #16171a; /* сплошной фон, чтобы аватарка всегда читалась */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: none;
    max-width: 100%;
    width: 100%;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: sticky;
    top: 0;
    z-index: 10;
}

.sidebar-bottom-dock.desktop-only {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 10px auto 14px 8px;
}

.sidebar-bottom-panel.desktop-only {
    margin: 0;
    padding: 7px 10px;
    display: none !important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: fit-content;
    border-radius: 999px;
    background: #090b10;
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
}

.sidebar-bottom-panel--media.desktop-only {
    gap: 8px;
    padding: 7px 8px;
    border-radius: 20px;
}

@media (min-width: 769px) {
    .sidebar-bottom-dock.desktop-only {
        display: inline-flex !important;
    }

    .sidebar-bottom-dock .sidebar-bottom-panel.desktop-only {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: center;
    }

    body.layout-mobile-phone .sidebar-bottom-dock.desktop-only {
        margin-bottom: calc(14px + var(--xam-safe-bottom, env(safe-area-inset-bottom, 0px)));
    }
}

.sidebar-bottom-pill-btn {
    flex: 0 0 auto;
    display: inline-flex;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.95);
}

.sidebar-bottom-pill-btn svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-bottom-pill-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.sidebar-bottom-media-btn svg {
    fill: none;
}

.sidebar-bottom-media-btn.camera-btn.active,
.sidebar-bottom-media-btn.mic-btn.active {
    opacity: 0.45;
}

.sidebar-bottom-pill-btn:active {
    background: rgba(255, 255, 255, 0.14) !important;
    transform: scale(0.97);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-actions .btn-icon {
    background: transparent !important;
    border: none !important;
    color: var(--white-border);
}

.header-actions .btn-icon:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.sidebar-header .header-actions {
    filter: none;
}

.user-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--white-border);
    background: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--white-border);
    font-size: 18px;
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-weight: 600;
    color: var(--text-white);
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.support-name {
    color: #00ff00 !important; 
}

.support-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    /* Градиент внутри символа ✔ */
    background: linear-gradient(90deg, #36d1dc, #5b86e5, #8e54e9, #f39c12, #27ae60, #e74c3c, #36d1dc);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: supportBadgeHue 3s ease infinite;
}

@keyframes supportBadgeHue {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.user-username {
    font-size: 13px;
    color: var(--gray-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

/* Строка поиска в sidebar-header */
.sidebar-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    width: 100%;
}

.sidebar-search-bar.hidden {
    display: none;
}

.sidebar-header.search-mode .user-info,
.sidebar-header.search-mode .header-actions {
    display: none;
}

.sidebar-header.search-mode .floating-pill {
    display: none !important;
}

.sidebar-header.search-mode .sidebar-search-bar {
    display: flex;
}


.sidebar-search-back-btn {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-white);
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    border-radius: 8px;
}

.sidebar-search-back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-search-back-btn:active {
    transform: scale(0.95);
}

.sidebar-search-back-btn svg {
    width: 20px;
    height: 20px;
}

.sidebar-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

.btn-icon {
    background: transparent !important;
    border: none !important;
    color: var(--white-border);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    padding: 0;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.btn-icon:active {
    background: rgba(255, 255, 255, 0.15) !important;
}

.search-container {
    padding: 15px;
    position: relative;
    background: var(--bg-gray-2);
    display: none; 
    align-items: center;
    gap: 10px;
}

.search-container.active {
    display: flex; 
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    position: relative;
}

.search-input-wrapper.hidden {
    display: none;
}

.search-input {
    flex: 1;
    padding: 10px 15px;
    background: var(--bg-darker);
    border: 1px solid var(--gray-border);
    color: var(--text-white);
    border-radius: 12px;
    font-size: 14px;
}

.search-input:focus {
    border-color: var(--white-border);
    outline: none;
}

.btn-search-close {
    background: transparent;
    border: none;
    color: var(--gray-text);
    font-size: 24px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.btn-search-close:hover {
    color: var(--text-white);
    background: rgba(255, 255, 255, 0.1);
}

.search-results {
    position: relative;
    background: var(--bg-dark);
    /* border: 1px solid var(--white-border); */
    border-radius: 16px;
    margin: 12px 15px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.search-results.show {
    display: block;
}

.search-result-item {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-border);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.2s;
}

.search-result-item:hover {
    background: var(--bg-darker);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    /* border: 1px solid var(--white-border); */
    background: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--white-border);
    font-size: 14px;
    overflow: hidden;
}

.search-result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    font-weight: 600;
    color: var(--text-white);
    font-size: 14px;
}

.search-result-username {
    font-size: 12px;
    color: var(--gray-text);
}

.search-result-status {
    font-size: 10px;
    color: var(--white-border);
}

.xam-mobile-dialog {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.48);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 220ms ease, visibility 0ms linear 0ms;
    box-sizing: border-box;
}

.xam-mobile-dialog.hidden {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 0ms linear 220ms;
}

.xam-mobile-dialog-card {
    width: 300px;
    max-width: calc(100% - 32px);
    border-radius: 36px;
    background: #181818;
    border: none;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 20px 18px 12px;
    transform: translateY(0) scale(1);
    transition: transform 220ms ease, opacity 220ms ease;
    text-align: left;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .xam-mobile-dialog-card {
        width: 340px;
        min-width: min(340px, calc(100% - 28px));
        max-width: min(340px, calc(100% - 28px));
        padding: 22px 20px 14px;
    }
}

@media (min-width: 769px) {
    .xam-mobile-dialog-card {
        width: 300px;
        min-width: 300px;
        max-width: 300px;
    }
    .xam-mobile-dialog-actions--confirm {
        justify-content: flex-end;
        gap: 4px;
    }
}

.xam-mobile-dialog.hidden .xam-mobile-dialog-card {
    transform: translateY(8px) scale(0.97);
    opacity: 0.92;
}

.xam-mobile-dialog-icon {
    display: none;
    margin: 0 0 12px;
}

.xam-mobile-dialog--error .xam-mobile-dialog-icon,
.xam-mobile-dialog--info .xam-mobile-dialog-icon {
    display: flex;
    justify-content: flex-start;
}

.xam-mobile-dialog--confirm .xam-mobile-dialog-icon {
    display: none;
}

.xam-mobile-dialog-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--xam-ui-accent, #8774E1);
    box-shadow: none;
}

.xam-mobile-dialog--info .xam-mobile-dialog-icon-circle {
    background: linear-gradient(145deg, #9ec5ff 0%, #4f8cff 48%, #2f6fe0 100%);
    box-shadow: none;
}

.xam-mobile-dialog-icon-svg {
    display: block;
    width: 22px;
    height: 22px;
}

.xam-mobile-dialog-title {
    color: #ffffff;
    text-align: left;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
}

.xam-mobile-dialog-message {
    margin-top: 8px;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.88);
    text-align: left;
    font-size: 15px;
    line-height: 1.4;
    min-height: 1.2em;
    padding: 0;
}

.xam-mobile-dialog-message.hidden {
    display: none;
}

.xam-mobile-dialog-actions {
    margin-top: 12px;
}

.xam-mobile-dialog-actions--confirm {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 100%;
}

.xam-mobile-dialog-actions--single {
    display: flex;
    justify-content: flex-end;
}

.xam-mobile-dialog-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.xam-mobile-dialog-btn--cancel {
    color: var(--xam-ui-accent, #8774E1);
}

.xam-mobile-dialog-btn--confirm {
    color: #ff6b7a;
}

.xam-mobile-dialog-btn--ok {
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--xam-ui-accent, #8774E1);
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
}

.xam-mobile-dialog-btn--cancel:active,
.xam-mobile-dialog-btn--confirm:active,
.xam-mobile-dialog-btn--ok:active {
    filter: brightness(1.15);
}

/* Кастомный диалог ввода текста (без браузерного prompt/alert) */
/* Поле ввода в confirm-style bottom sheet */
.xam-confirm-sheet-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 22px;
    border: none;
    border-radius: 18px;
    background: #0a0a0c;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    padding: 16px 18px;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    -webkit-appearance: none;
    appearance: none;
}

.xam-confirm-sheet-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.xam-confirm-sheet-input:focus {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

#xam-text-input-sheet .xam-confirm-sheet-btn--primary {
    margin-top: 20px;
}

/* Панель ввода: влезает в visual viewport над клавиатурой */
#xam-text-input-sheet {
    align-items: flex-end;
}

#xam-text-input-sheet .xam-confirm-sheet-panel {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#xam-text-input-sheet.xam-sheet--keyboard .xam-confirm-sheet-panel {
    padding-top: 18px;
    padding-bottom: 14px;
}

#xam-text-input-sheet.xam-sheet--keyboard .xam-confirm-sheet-title {
    font-size: clamp(18px, 4.6vw, 22px);
}

#xam-text-input-sheet.xam-sheet--keyboard .xam-confirm-sheet-input {
    margin-top: 14px;
    padding: 14px 16px;
}

#xam-text-input-sheet.xam-sheet--keyboard .xam-confirm-sheet-btn {
    padding: 14px 18px;
}

#xam-text-input-sheet.xam-sheet--keyboard .xam-confirm-sheet-btn--primary {
    margin-top: 14px;
}

.chat-attachments-modal-content {
    width: min(94vw, 540px);
    max-height: min(82vh, 760px);
    border-radius: 24px;
    background: rgba(20, 20, 20, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-attachments-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 2px 8px;
}

.chat-attachments-title {
    color: rgba(255, 255, 255, 0.96);
    font-size: 18px;
    font-weight: 600;
}

.chat-attachments-back-btn {
    width: 38px;
    height: 38px;
}

.chat-attachments-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

.chat-attachments-tab {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.chat-attachments-tab.active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.chat-attachments-list {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px;
}

.chat-attachment-item {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.95);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
}

.chat-attachments-group-title {
    margin: 10px 2px 2px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.64);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chat-attachment-preview {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
}

.chat-attachment-preview img,
.chat-attachment-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-attachment-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chat-attachment-type {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.66);
}

.chat-attachment-name {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.chat-attachment-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.chat-attachment-empty {
    padding: 12px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

/* Подтверждения и системные шиты — выше профиля/настроек (70000) */
.xam-confirm-sheet,
.xam-mobile-dialog,
.xam-login-code-sheet,
.xam-create-group-sheet {
    z-index: 80000 !important;
}

/* Bottom sheet подтверждения (как на скрине) */
.xam-confirm-sheet {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.xam-confirm-sheet.hidden {
    display: flex !important;
}

.xam-confirm-sheet--open {
    pointer-events: auto;
}

.xam-confirm-sheet-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.32s ease;
}

.xam-confirm-sheet--open .xam-confirm-sheet-backdrop {
    opacity: 1;
}

.xam-confirm-sheet-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    background: #1c1c1e;
    border-radius: 32px 32px 0 0;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.xam-confirm-sheet--open .xam-confirm-sheet-panel {
    transform: translate3d(0, 0, 0);
}

.xam-confirm-sheet-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.xam-confirm-sheet-icon--delete,
.xam-confirm-sheet-icon--login {
    background: var(--xam-ui-accent, #8774E1);
    box-shadow: none;
}

.xam-confirm-sheet-icon.hidden {
    display: none !important;
}

.xam-confirm-sheet-title {
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: clamp(22px, 5.2vw, 28px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.xam-confirm-sheet-message {
    margin: 14px 0 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(15px, 3.8vw, 17px);
    line-height: 1.35;
    font-weight: 400;
}

.xam-confirm-sheet-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 999px;
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

.xam-confirm-sheet-btn:active {
    transform: scale(0.98);
}

.xam-confirm-sheet-btn--primary {
    margin-top: 28px;
    color: #fff;
    background: var(--xam-ui-accent, #8b5cf6);
    box-shadow: none;
}

.xam-confirm-sheet-btn--primary:hover {
    background: var(--xam-ui-accent-hover, #9a6df7);
}

.xam-confirm-sheet-btn--secondary {
    margin-top: 10px;
    color: #fff;
    background: #0a0a0c;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.xam-confirm-sheet-btn--secondary:hover {
    background: #141418;
}

#xam-confirm-sheet-cancel.hidden {
    display: none !important;
}

@media (min-width: 769px) {
    .xam-confirm-sheet-panel {
        max-width: min(440px, calc(100% - 24px));
        margin: 0 auto;
        border-radius: 28px 28px 0 0;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .xam-confirm-sheet-title {
        font-size: 24px;
    }

    .xam-confirm-sheet-message {
        font-size: 16px;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}

body.xam-confirm-sheet-open {
    overflow: hidden;
}

/* Фон за Material-шитом — лёгкое приближение */
#main-screen {
    transform: translate3d(0, 0, 0);
    transform-origin: center center;
    transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
body.xam-confirm-sheet-open #main-screen,
body.xam-sheet-bg-zoom #main-screen {
    transform: translate3d(0, 0, 0) scale(1.028);
    will-change: transform;
}
@media (max-width: 768px) {
    body.xam-confirm-sheet-open #main-screen,
    body.xam-sheet-bg-zoom #main-screen {
        transform: translate3d(0, 0, 0) scale(1.02);
    }
}
@media (prefers-reduced-motion: reduce) {
    #main-screen {
        transition: none;
    }
    body.xam-confirm-sheet-open #main-screen,
    body.xam-sheet-bg-zoom #main-screen {
        transform: translate3d(0, 0, 0);
        will-change: auto;
    }
}

/* Алерт подтверждения в стиле Telegram */
.xam-tg-alert {
    position: fixed;
    inset: 0;
    z-index: 81000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    pointer-events: none;
}

.xam-tg-alert.hidden {
    display: flex !important;
}

.xam-tg-alert--open {
    pointer-events: auto;
}

.xam-tg-alert-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.22s ease;
}

.xam-tg-alert--open .xam-tg-alert-backdrop {
    opacity: 1;
}

.xam-tg-alert-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 300px;
    padding: 20px 18px 14px;
    background: #2c2c2e;
    border-radius: 14px;
    text-align: center;
    transform: scale(0.94);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.xam-tg-alert--open .xam-tg-alert-box {
    transform: scale(1);
    opacity: 1;
}

.xam-tg-alert-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.xam-tg-alert-message {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.55);
}

.xam-tg-alert-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.xam-tg-alert-btn {
    border: none;
    background: transparent;
    padding: 8px 4px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.xam-tg-alert-btn:active {
    opacity: 0.65;
}

.xam-tg-alert-btn--cancel {
    color: #ff453a;
}

.xam-tg-alert-btn--confirm {
    color: #fff;
    font-weight: 500;
}

body.xam-tg-alert-open {
    overflow: hidden;
}

/* Счёт от бота (XamS) — как сообщение XAMBot */
.message.message--bot-invoice .bot-invoice-status-slot:empty {
    display: none;
}

.message.message--bot-invoice .bot-invoice-status {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
}

.message.message--bot-invoice .bot-invoice-status--paid {
    color: #34c759;
}

.message.message--bot-invoice .bot-invoice-status--cancelled {
    color: #ff8e8e;
}

.message.message--bot-invoice.bot-invoice--cancelled {
    opacity: 0.85;
}

.message.message--bot-invoice .bot-inline-keyboard.is-hidden {
    display: none;
}

body.theme-light .message.message--bot-invoice .bot-invoice-status {
    color: rgba(0, 0, 0, 0.45);
}

body.theme-light .message.message--bot-invoice .bot-invoice-status--paid {
    color: #1f9d4a;
}

body.theme-light .message.message--bot-invoice .bot-invoice-status--cancelled {
    color: #d64545;
}

/* Bottom sheet: код входа на другом устройстве */
.xam-login-code-sheet {
    position: fixed;
    inset: 0;
    z-index: 32600;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.xam-login-code-sheet.hidden {
    display: flex !important;
}

.xam-login-code-sheet--open {
    pointer-events: auto;
}

.xam-login-code-sheet--open .xam-login-code-sheet-panel,
.xam-login-code-sheet--open .xam-login-code-sheet-btn,
.xam-login-code-sheet--open .xam-login-code-sheet-backdrop {
    pointer-events: auto;
}

.xam-login-code-sheet-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.32s ease;
}

.xam-login-code-sheet--open .xam-login-code-sheet-backdrop {
    opacity: 1;
}

.xam-login-code-sheet-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    background: #1c1c1e;
    border-radius: 32px 32px 0 0;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.xam-login-code-sheet--open .xam-login-code-sheet-panel {
    transform: translate3d(0, 0, 0);
}

.xam-login-code-sheet-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    background: linear-gradient(180deg, #b565ff 0%, #7c3aed 55%, #6d28d9 100%);
}

.xam-login-code-sheet-title {
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: clamp(22px, 5.2vw, 28px);
    font-weight: 700;
    line-height: 1.15;
}

.xam-login-code-sheet-message {
    margin: 14px 0 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(15px, 3.8vw, 17px);
    line-height: 1.35;
}

.login-code-display-digits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 28px 0 16px;
}

@keyframes login-code-digit-pop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    65% {
        opacity: 1;
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes login-code-digit-type-pop {
    0% {
        transform: scale(0.82);
    }
    55% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
    }
}

.login-code-display-digit {
    width: 60px;
    height: 68px;
    border-radius: 16px;
    background: #2a2a2d;
    border: 1px solid #38383a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    transform: scale(0.5);
    animation: login-code-digit-pop 0.32s cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}

.login-code-display-digit:nth-child(1) { animation-delay: 0ms; }
.login-code-display-digit:nth-child(2) { animation-delay: 50ms; }
.login-code-display-digit:nth-child(3) { animation-delay: 100ms; }
.login-code-display-digit:nth-child(4) { animation-delay: 150ms; }
.login-code-display-digit:nth-child(5) { animation-delay: 200ms; }

.xam-login-code-sheet-hint {
    margin: 0 0 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    line-height: 1.35;
}

.xam-login-code-sheet-btn {
    display: block;
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: #2a2a2d;
    border: 1px solid #38383a;
    cursor: pointer;
}

body.xam-login-code-sheet-open {
    overflow: hidden;
}

#login-code-input-modal.modal {
    z-index: 10050;
}

#login-code-input-modal.modal:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

#login-code-input-modal .modal-content.login-code-input-modal {
    background: #1c1c1e;
    border: 1px solid #2a2a2d;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#login-code-input-modal #login-code-input-inputs .code-input {
    width: 58px;
    height: 68px;
    font-size: 34px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: #2a2a2d;
    border: 1px solid #38383a;
    border-radius: 14px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    transform: scale(1);
}

#login-code-input-modal:not(.hidden) #login-code-input-inputs .code-input {
    animation: login-code-digit-pop 0.32s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

#login-code-input-modal:not(.hidden) #login-code-input-inputs .code-input:nth-child(1) { animation-delay: 40ms; }
#login-code-input-modal:not(.hidden) #login-code-input-inputs .code-input:nth-child(2) { animation-delay: 80ms; }
#login-code-input-modal:not(.hidden) #login-code-input-inputs .code-input:nth-child(3) { animation-delay: 120ms; }
#login-code-input-modal:not(.hidden) #login-code-input-inputs .code-input:nth-child(4) { animation-delay: 160ms; }
#login-code-input-modal:not(.hidden) #login-code-input-inputs .code-input:nth-child(5) { animation-delay: 200ms; }

#login-code-input-modal #login-code-input-inputs .code-input.code-input--typed {
    animation: login-code-digit-type-pop 0.24s cubic-bezier(0.2, 0.9, 0.25, 1);
}

#login-code-input-modal #login-code-input-inputs .code-input:focus {
    background: #323235;
    border-color: #454548;
    box-shadow: none;
}

#login-code-input-modal #login-code-input-inputs .code-input:focus:not(.code-input--typed) {
    transform: scale(1);
}

#login-code-input-modal #login-code-verify-btn {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 14px;
    padding: 16px 20px;
    border: none;
    border-radius: 999px;
    background: #9661F1;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease, opacity 0.15s ease;
    box-shadow: none;
}

#login-code-input-modal #login-code-verify-btn:hover:not(:disabled) {
    background: #a675f3;
    color: #fff;
    box-shadow: none;
}

#login-code-input-modal #login-code-verify-btn:active:not(:disabled) {
    transform: scale(0.98);
    background: #8554db;
}

#login-code-input-modal #login-code-verify-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.login-code-input-modal .login-code-input-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    background: linear-gradient(180deg, #b565ff 0%, #7c3aed 55%, #6d28d9 100%);
}

@media (min-width: 769px) {
    .xam-login-code-sheet-panel {
        max-width: min(440px, calc(100% - 24px));
        margin: 0 auto;
        border-radius: 28px 28px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xam-confirm-sheet-backdrop,
    .xam-confirm-sheet-panel,
    .xam-login-code-sheet-backdrop,
    .xam-login-code-sheet-panel,
    .attach-modal-backdrop,
    .attach-modal {
        transition: none !important;
    }

    .login-code-display-digit,
    #login-code-input-modal #login-code-input-inputs .code-input {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #login-code-input-modal #login-code-input-inputs .code-input.code-input--typed {
        animation: none !important;
    }
}

/* Material dialog: base styles above apply on phone + PC */
.xam-mobile-dialog {
    z-index: 2147483646;
}
.xam-mobile-dialog-btn--cancel:hover,
.xam-mobile-dialog-btn--confirm:hover,
.xam-mobile-dialog-btn--ok:hover {
    background: rgba(255, 255, 255, 0.06);
}
body.theme-light .xam-mobile-dialog-card {
    background: #ffffff;
}
body.theme-light .xam-mobile-dialog-title {
    color: #1c1b22;
}
body.theme-light .xam-mobile-dialog-message {
    color: #5e7086;
}

/* Mobile profile: группа — компактный шит; пользователь — только полный экран (без сворачивания) */
@media (max-width: 768px) {
    #group-profile-modal {
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    /* Группы открываются сразу expanded (fullscreen). Базовый 62vh-шит
       оставляем только для каналов без sheet-expanded. */
    #group-profile-modal .modal-content.group-profile-modal,
    .modal-content.group-profile-modal {
        height: 62vh !important;
        max-height: 62vh !important;
        min-height: 0 !important;
        margin-top: auto !important;
        border-radius: 34px 34px 0 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transition: transform 260ms cubic-bezier(0.2, 0.85, 0.22, 1),
            opacity 240ms ease,
            height 260ms cubic-bezier(0.2, 0.85, 0.22, 1) !important;
        background: var(--bg-dark) !important;
        border: 1px solid var(--gray-border) !important;
        box-shadow: none !important;
    }

    #group-profile-modal.sheet-expanded .modal-content.group-profile-modal,
    #group-profile-modal.closing.sheet-expanded .modal-content.group-profile-modal {
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        align-self: stretch !important;
    }

    /* ===== Мобильный профиль пользователя: fullscreen по макету ===== */
    #user-profile-modal {
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: #181818 !important;
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #user-profile-modal .modal-content.user-profile-modal,
    #user-profile-modal.sheet-open .modal-content.user-profile-modal,
    #user-profile-modal.sheet-open:not(.sheet-expanded) .modal-content.user-profile-modal,
    #user-profile-modal.sheet-expanded .modal-content.user-profile-modal {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        margin-top: 0 !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        background: #181818 !important;
        box-shadow: none !important;
        padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
        display: flex !important;
        flex-direction: column !important;
        transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1) !important;
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    #user-profile-modal .modal-content.user-profile-modal::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    #user-profile-modal .profile-top-bar {
        display: none !important;
    }

    #user-profile-modal .profile-tg-nav {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 30;
        padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 4px;
        background: transparent !important;
        pointer-events: none;
    }

    #user-profile-modal .profile-tg-nav-btn,
    #user-profile-modal .profile-tg-nav-spacer {
        pointer-events: auto;
    }

    #user-profile-modal .profile-tg-nav-spacer {
        flex: 1;
        min-width: 0;
        pointer-events: none;
    }

    #user-profile-modal .profile-tg-nav-btn {
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    #user-profile-modal .profile-tg-nav-btn.hidden {
        visibility: hidden;
        pointer-events: none;
    }

    #user-profile-modal .profile-back {
        display: none !important;
    }

    #user-profile-modal .profile-hero-section {
        position: relative;
        flex-shrink: 0;
        background: transparent !important;
        overflow: visible !important;
        isolation: auto;
        padding-bottom: 2px;
        z-index: 2;
    }

    #user-profile-modal .profile-header,
    #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-header,
    #user-profile-modal.sheet-expanded .profile-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        padding: calc(52px + env(safe-area-inset-top, 0px)) 20px 14px !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        aspect-ratio: auto !important;
        gap: 10px !important;
        background: transparent !important;
        border: none !important;
        position: relative !important;
        overflow: visible !important;
        z-index: 1 !important;
    }

    #user-profile-modal .profile-header::after {
        display: none !important;
        content: none !important;
    }

    #user-profile-modal .profile-avatar-shell {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        min-width: 0;
        flex: 0 0 auto;
        z-index: 2;
        overflow: visible;
    }

    #user-profile-modal .profile-avatar-frame {
        overflow: visible;
    }

    /* Glow на весь лист (не внутри hero) — без чёрного обрыва у кнопок */
    #user-profile-modal .modal-content.user-profile-modal {
        isolation: auto;
    }

    #user-profile-modal .profile-avatar-glow:not(.hidden) {
        display: block !important;
    }

    #user-profile-modal .profile-avatar-glow {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        width: 180vw !important;
        max-width: none !important;
        height: 78% !important;
        min-height: 520px !important;
        margin-left: -90vw !important;
        border-radius: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        opacity: 1 !important;
        mix-blend-mode: normal;
        filter: blur(64px) saturate(1.5) brightness(1.12);
        transform: translateZ(0);
        will-change: transform, background-position;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        background:
            radial-gradient(circle at 30% 18%, var(--profile-glow-c1, #9a6fd8) 0%, transparent 58%),
            radial-gradient(circle at 72% 14%, var(--profile-glow-c2, #4da8d8) 0%, transparent 54%),
            radial-gradient(circle at 50% 42%, var(--profile-glow-c3, #d89a4d) 0%, transparent 62%),
            radial-gradient(circle at 50% 62%, var(--profile-glow-c1, #9a6fd8) 0%, transparent 70%);
        background-size: 150% 150%, 150% 150%, 160% 160%, 140% 140%;
        background-position: 10% 10%, 90% 8%, 50% 40%, 50% 70%;
        animation: profileAvatarGlowDrift 8s ease-in-out infinite alternate;
    }

    #user-profile-modal .profile-avatar-glow.hidden,
    #user-profile-modal.profile-is-deleted .profile-avatar-glow {
        display: none !important;
    }

    #user-profile-modal .profile-avatar-cluster,
    #user-profile-modal .profile-verif-slot,
    #user-profile-modal .profile-verif-badge {
        position: relative;
        z-index: 2;
        isolation: isolate;
    }

    @keyframes profileAvatarGlowDrift {
        0% { transform: scale(0.98); background-position: 0% 36%, 100% 14%, 50% 100%; }
        50% { transform: scale(1.06); background-position: 72% 18%, 14% 70%, 88% 92%; }
        100% { transform: scale(1.02); background-position: 30% 72%, 70% 24%, 10% 88%; }
    }

    #user-profile-modal .profile-avatar,
    #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-avatar,
    #user-profile-modal.sheet-expanded .profile-avatar {
        width: 118px !important;
        height: 118px !important;
        flex: 0 0 118px !important;
        font-size: 44px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        border: none !important;
        outline: none !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
        overflow: hidden !important;
        position: relative !important;
        z-index: 1 !important;
    }

    #user-profile-modal #profile-avatar img,
    #user-profile-modal .profile-avatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 50% !important;
    }

    #user-profile-modal .profile-header-text,
    #user-profile-modal.sheet-expanded .profile-header-text {
        align-items: center !important;
        justify-content: center !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    #user-profile-modal .profile-name,
    #user-profile-modal .profile-header-text .profile-name {
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-shadow: none !important;
        letter-spacing: -0.02em !important;
        max-width: 100% !important;
        width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
        color: #fff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    #user-profile-modal .profile-status {
        display: block !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
        color: rgba(255, 255, 255, 0.55) !important;
        text-align: center !important;
        max-width: 90% !important;
        margin: 0 auto !important;
    }

    #user-profile-modal .profile-menu-btn {
        display: none !important;
    }

    /* 4 тайла: чат / звонок / блок / удалить */
    #user-profile-modal .profile-actions,
    #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-actions,
    #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions,
    #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 2px 16px 14px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 4 !important;
    }

    #user-profile-modal .profile-actions::before,
    #user-profile-modal .profile-actions-row::before {
        display: none !important;
        content: none !important;
    }

    #user-profile-modal .profile-actions .profile-action-btn {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 58px !important;
        min-height: 58px !important;
        border-radius: 24px !important;
        background: #212121 !important;
        border: none !important;
        box-shadow: none !important;
        color: #fff !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    #user-profile-modal.profile-is-self .profile-actions #profile-call-btn,
    #user-profile-modal.profile-is-self .profile-actions #profile-block-btn-mobile,
    #user-profile-modal.profile-is-self .profile-actions #profile-clear-btn-mobile,
    #user-profile-modal .profile-actions #profile-mute-btn,
    #user-profile-modal .profile-actions #profile-rename-btn,
    #user-profile-modal .profile-actions #profile-media-btn-mobile {
        display: none !important;
    }

    #user-profile-modal.profile-is-self .profile-actions {
        max-width: 96px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #user-profile-modal .profile-actions .profile-action-primary-label {
        display: none !important;
    }

    #user-profile-modal .profile-actions .profile-action-btn svg {
        width: 26px !important;
        height: 26px !important;
    }

    #user-profile-modal .profile-hero-section,
    #user-profile-modal .profile-info,
    #user-profile-modal .profile-flow-bar,
    #user-profile-modal .profile-media-bar,
    #user-profile-modal .profile-gifts-bar,
    #user-profile-modal .profile-danger-pill,
    #user-profile-modal .profile-media {
        position: relative;
        z-index: 2;
        background: transparent !important;
    }

    #user-profile-modal .profile-info--user-pills {
        background: transparent !important;
    }

    #user-profile-modal .profile-info--user-pills {
        padding: 4px 16px 10px !important;
        border: none !important;
        background: transparent !important;
        flex-shrink: 0 !important;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill {
        background: #212121 !important;
        border-radius: 24px !important;
        padding: 2px 0 !important;
        isolation: isolate;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        position: relative;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 52px;
        right: 0;
        bottom: 0;
        height: 1px;
        background: rgba(255, 255, 255, 0.06);
    }

    #user-profile-modal .profile-info-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        color: rgba(255, 255, 255, 0.55);
    }

    #user-profile-modal .profile-info-icon svg {
        width: 22px;
        height: 22px;
    }

    #user-profile-modal .profile-info-body {
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
        gap: 2px !important;
        min-width: 0;
        flex: 1;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-label {
        font-size: 13px !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.45) !important;
        margin: 0 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-value {
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #fff !important;
        line-height: 1.25 !important;
        word-break: break-word;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-value:not(.profile-info-value--static) {
        display: flex !important;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    #user-profile-modal #profile-username {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #user-profile-modal .profile-copy-btn {
        margin-left: auto;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 10px;
        background: transparent;
        color: rgba(255, 255, 255, 0.55);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    #user-profile-modal .profile-copy-btn-icon {
        display: none !important;
    }

    #user-profile-modal .profile-copy-btn-qr {
        display: block !important;
    }

    /* Мобильная панель QR профиля — выше #user-profile-modal (z-index: 50000) */
    .profile-qr-sheet {
        position: fixed;
        inset: 0;
        z-index: 60000 !important;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        pointer-events: none;
    }
    .profile-qr-sheet.hidden {
        display: none !important;
    }
    .profile-qr-sheet.is-open {
        pointer-events: auto;
    }
    /* Быстрее открытие: короче и без лишнего GPU-шума */
    .profile-qr-sheet-backdrop {
        position: absolute;
        inset: 0;
        border: none;
        padding: 0;
        margin: 0;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        transition: opacity 0.18s ease;
        cursor: pointer;
    }
    .profile-qr-sheet.is-open .profile-qr-sheet-backdrop {
        opacity: 1;
    }
    .profile-qr-sheet-panel {
        position: relative;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
        border-radius: 32px 32px 0 0;
        background: #1a1a1a;
        background-color: #1a1a1a;
        box-sizing: border-box;
        transform: translate3d(0, 100%, 0);
        transition: transform 0.22s cubic-bezier(0.32, 0.72, 0.24, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        overflow: hidden;
        will-change: transform;
    }
    .profile-qr-sheet.is-open .profile-qr-sheet-panel {
        transform: translate3d(0, 0, 0);
    }
    .profile-qr-sheet:not(.is-open) .profile-qr-sheet-panel {
        will-change: auto;
    }
    .profile-qr-sheet-name {
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.01em;
        text-align: center;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 2px 8px 0;
    }
    .profile-qr-sheet-stage {
        position: relative;
        width: min(78vw, 280px);
        margin: 8px 0 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .profile-qr-sheet-card {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 28px;
        background: #2a2a2a;
        background-color: #2a2a2a;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px;
        box-sizing: border-box;
        overflow: hidden;
    }
    .profile-qr-sheet-code {
        width: 100%;
        height: 100%;
        border-radius: 18px;
        overflow: hidden;
        background: #2a2a2a;
        background-color: #2a2a2a;
    }
    .profile-qr-sheet-code canvas {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }
    .profile-qr-sheet-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 4px;
    }
    .profile-qr-sheet-btn {
        appearance: none;
        border: none;
        width: 100%;
        border-radius: 999px;
        padding: 15px 18px;
        font: inherit;
        font-size: 15px;
        font-weight: 650;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: opacity 0.15s ease;
    }
    .profile-qr-sheet-btn:active {
        opacity: 0.8;
    }
    .profile-qr-sheet-btn--primary {
        background: #8774E1;
        color: #fff;
    }
    .profile-qr-sheet-btn--ghost {
        background: #2a2a2a;
        color: #fff;
    }

    #user-profile-modal .profile-info-item--notify:not(.hidden) {
        display: flex !important;
    }

    #user-profile-modal .profile-info-item--thought:not(.hidden) {
        display: flex !important;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item.hidden,
    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item--notify.hidden,
    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item--thought.hidden,
    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item[hidden] {
        display: none !important;
    }

    #user-profile-modal .profile-info-item--notify .profile-info-body {
        flex-direction: row !important;
        align-items: center !important;
    }

    #user-profile-modal .profile-notify-switch {
        display: inline-block !important;
        width: 51px;
        height: 31px;
        border-radius: 999px;
        border: none;
        padding: 2px;
        background: rgba(120, 120, 128, 0.32);
        position: relative;
        flex-shrink: 0;
        margin-left: 8px;
        transition: background 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    #user-profile-modal .profile-notify-switch.is-on {
        background: #8774E1;
    }

    #user-profile-modal .profile-notify-switch-knob {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 27px;
        height: 27px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
        transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #user-profile-modal .profile-notify-switch.is-on .profile-notify-switch-knob {
        transform: translateX(20px);
    }

    #user-profile-modal .profile-media-bar,
    #user-profile-modal .profile-flow-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: calc(100% - 32px) !important;
        margin: 0 16px 10px !important;
        padding: 14px 16px !important;
        border: none !important;
        border-radius: 24px !important;
        background: #212121 !important;
        color: rgba(255, 255, 255, 0.92) !important;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    #user-profile-modal .profile-gifts-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: calc(100% - 32px) !important;
        margin: 0 16px 10px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 24px !important;
        background: #212121 !important;
        color: rgba(255, 255, 255, 0.92) !important;
        flex-shrink: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    #user-profile-modal .profile-gifts-bar-label,
    #user-profile-modal .profile-media-bar-label {
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    #user-profile-modal .profile-gifts-bar-meta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: rgba(255, 255, 255, 0.45);
    }

    #user-profile-modal .profile-gifts-bar-count {
        font-size: 15px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.45);
    }

    #user-profile-modal .profile-flow-bar {
        margin-bottom: 14px !important;
    }

    #user-profile-modal.profile-is-self .profile-flow-bar {
        margin-bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
    }


    #user-profile-modal .profile-gifts-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }

    #user-profile-modal .profile-gifts-bar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        margin: 0;
        padding: 14px 16px;
        border: none;
        background: transparent;
        color: inherit;
        cursor: pointer;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
    }

    #user-profile-modal .profile-gifts-chevron {
        transition: transform 0.22s ease;
    }

    #user-profile-modal .profile-gifts-bar.is-expanded .profile-gifts-chevron {
        transform: rotate(90deg);
    }

    #user-profile-modal .profile-gifts-strip {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        padding: 0 16px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-y: contain;
        transition:
            max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.28s ease,
            padding 0.28s ease;
    }

    #user-profile-modal .profile-gifts-strip::-webkit-scrollbar {
        display: none;
    }

    #user-profile-modal .profile-gifts-bar.is-expanded .profile-gifts-strip {
        display: flex;
        max-height: 280px;
        opacity: 1;
        padding: 0 16px 14px;
        overflow-x: hidden;
        overflow-y: auto;
        pointer-events: auto;
    }

    #user-profile-modal .profile-gifts-strip[hidden] {
        display: none !important;
        max-height: 0 !important;
        opacity: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #user-profile-modal.profile-is-self .profile-media-bar,
    #user-profile-modal.profile-is-self #profile-media-open-btn {
        display: none !important;
    }

    #user-profile-modal .profile-gifts-strip-item {
        flex: 0 0 auto;
        width: 88px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 10px 8px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
        text-align: center;
    }

    #user-profile-modal .profile-gifts-strip-icon {
        font-size: 36px;
        line-height: 1;
    }

    #user-profile-modal .profile-gifts-strip-name {
        font-size: 11px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.75);
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #user-profile-modal .profile-gifts-strip-empty,
    #user-profile-modal .profile-gifts-strip-loading {
        flex: 1 1 auto;
        padding: 8px 4px 4px;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.45);
    }

    #user-profile-modal .profile-danger-pill {
        display: none !important;
    }

    /* Медиа-сетка скрыта — вход через «Медиа» / «Подарки» */
    #user-profile-modal .profile-media,
    #user-profile-modal.sheet-expanded .profile-media,
    #user-profile-modal.profile-is-self .profile-media {
        display: none !important;
    }

    #user-profile-modal.profile-is-deleted .profile-gifts-bar {
        display: none !important;
    }

    #user-profile-modal.profile-media-open .profile-media {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 220px !important;
        padding: 0 0 24px !important;
        background: transparent !important;
        border: none !important;
    }

    #user-profile-modal.profile-media-open .profile-media-content {
        background: #212121 !important;
        border-radius: 16px !important;
        margin: 0 16px;
        min-height: 180px;
    }

    #group-profile-modal .profile-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px 12px !important;
    }

    #group-profile-modal .profile-actions .profile-action-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 0 !important;
        max-width: none !important;
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 12px !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    #group-profile-modal .profile-actions .profile-action-btn:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.35);
        outline-offset: 2px;
    }

    #user-profile-modal.sheet-expanded .profile-title {
        opacity: 1 !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    }

    #user-profile-modal .profile-header {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 18px;
        text-align: left !important;
        padding: 10px 20px 10px !important;
        background: var(--bg-dark) !important;
        border-bottom: none !important;
    }

    #user-profile-modal .profile-avatar {
        width: 86px !important;
        height: 86px !important;
        margin: 0 !important;
        flex: 0 0 86px;
    }

    #user-profile-modal .profile-header-text {
        min-width: 0;
        max-width: calc(100% - 104px);
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 220ms ease, transform 260ms ease;
    }

    #user-profile-modal .profile-name-mobile {
        font-size: 28px;
        line-height: 0.95;
        color: rgba(255, 255, 255, 0.97);
        font-family: 'Akony', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        letter-spacing: 0.2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        transform: translateX(0);
    }

    #user-profile-modal .profile-name-mobile.is-marquee,
    #user-profile-modal .profile-name.is-marquee,
    #user-profile-modal .profile-header-text .profile-name.is-marquee {
        text-overflow: clip;
        text-align: left;
        animation: profileNameMarquee var(--marquee-duration, 10s) linear infinite alternate;
    }

    @keyframes profileNameMarquee {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-1 * var(--marquee-distance, 0px))); }
    }

    #user-profile-modal .profile-status {
        margin-top: 2px !important;
        font-size: 18px !important;
        color: rgba(255, 255, 255, 0.72) !important;
    }

    #user-profile-modal .profile-info,
    #user-profile-modal .profile-info-card,
    #user-profile-modal .profile-media,
    #user-profile-modal .profile-media-card,
    #user-profile-modal .profile-media-content {
        background: var(--bg-dark) !important;
    }

    #user-profile-modal .profile-info-bio-value {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    #user-profile-modal #profile-bio-preview {
        display: inline-block;
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #user-profile-modal #profile-bio-full {
        display: none;
        margin-top: 8px;
        white-space: pre-wrap;
        word-break: break-word;
        color: rgba(255, 255, 255, 0.92);
        line-height: 1.35;
    }

    #user-profile-modal.sheet-expanded #profile-bio-full {
        display: block;
    }

    #user-profile-modal.sheet-expanded #profile-bio-more-btn {
        display: none !important;
    }

    #user-profile-modal .profile-actions .profile-action-btn,
    #user-profile-modal .profile-actions-row .profile-action-btn,
    #group-profile-modal .profile-actions .profile-action-btn {
        box-sizing: border-box;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.07);
        border: none !important;
        outline: none;
        box-shadow: none !important;
        color: var(--text-white);
    }

    #user-profile-modal .profile-actions .profile-action-btn:active,
    #user-profile-modal .profile-actions-row .profile-action-btn:active,
    #group-profile-modal .profile-actions .profile-action-btn:active {
        background: rgba(255, 255, 255, 0.12);
    }

    /* Профиль группы: тот же «мессенджерный» фон и вкладки медиа на телефоне */
    #group-profile-modal .profile-header,
    #group-profile-modal .profile-actions,
    #group-profile-modal .profile-info,
    #group-profile-modal .group-members-section {
        background: var(--bg-dark) !important;
    }

    #group-profile-modal .profile-media,
    #group-profile-modal .profile-media-tabs,
    #group-profile-modal .profile-media-content {
        background: var(--bg-dark) !important;
    }

    #group-profile-modal .profile-media-tabs {
        border-bottom: 1px solid var(--gray-border);
        padding: 0 16px 2px;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    #group-profile-modal .media-tab {
        padding: 12px 10px 10px;
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        background: transparent;
    }

    #group-profile-modal .media-tab.active {
        color: var(--text-white);
        border-bottom-color: rgba(255, 255, 255, 0.85);
    }

    #group-profile-modal .profile-action-btn {
        background: var(--bg-gray-2);
        border: 1px solid var(--gray-border);
        border-radius: 16px 16px 0 16px;
    }


}

/* Phone-only profile chrome (shown under max-width:768) */
.profile-tg-nav { display: none; }
.profile-info-icon { display: none; }
.profile-copy-btn-qr { display: none; }
.profile-notify-switch { display: none; }
.profile-info-item--notify { display: none; }
.profile-info-item--thought { display: none; }
.profile-gifts-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: calc(100% - 32px);
    margin: 0 16px 10px;
    padding: 0;
    border: none;
    border-radius: 18px;
    background: #212121;
    color: rgba(255, 255, 255, 0.92);
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
@media (min-width: 769px) {
    #user-profile-modal .profile-gifts-bar {
        display: flex !important;
    }
}
#user-profile-modal.profile-is-deleted .profile-gifts-bar {
    display: none !important;
}
@media (min-width: 769px) {
    #user-profile-modal .profile-info-body {
        display: block;
        min-width: 0;
        flex: 1;
    }
}

.chats-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.sidebar-tabs {
    flex: 1;
    min-height: 0;
    display: flex;
    width: 400%;
    transform: translateX(0);
    transition: none;
}

.sidebar-tab {
    width: 25%;
    flex: 0 0 25%;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chats-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: 120px; /* место под нижнюю пилюлю */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

.chats-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.calls-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0 14px 120px;
}

.search-screen-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0 10px 120px;
}


/* ПК + телефон: поиск — недавние/результаты в панели чатов (сайдбар) */
@media (min-width: 769px), (max-width: 768px) {
    #pc-search-view {
        display: none !important;
    }

    .pc-search-input--sync {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .pc-sidebar-search-panel {
        display: none;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        margin: 4px 12px 12px;
        padding: 10px 10px 12px;
        border-radius: 22px;
        background: #191919;
        box-sizing: border-box;
        overflow: hidden;
        opacity: 0;
        transform: translateY(10px) scale(0.985);
        transition:
            opacity 0.28s ease,
            transform 0.34s cubic-bezier(0.2, 0.9, 0.2, 1);
        z-index: 6;
    }

    .pc-sidebar-search-panel.is-open,
    .pc-sidebar-search-panel:not([hidden]) {
        display: flex;
    }

    .pc-sidebar-search-panel.is-open {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .pc-sidebar-search-panel[hidden] {
        display: none !important;
    }

    body.desktop-search-mode .pc-sidebar-search-panel:not([hidden]) {
        display: flex;
    }

    /* Список чатов уходит, пока открыт поиск */
    .chats-section {
        position: relative;
    }

    body.desktop-search-mode .chats-section > .chats-title,
    body.desktop-search-mode .chats-section > .sidebar-tabs,
    body.desktop-search-mode .chats-section > #sidebar-tabs,
    body.desktop-search-mode #mobile-top-nick-pill-wrap,
    body.desktop-search-mode #mobile-chats-search-panel {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        transition: opacity 0.22s ease;
    }

    body.desktop-search-mode .chats-section {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
    }

    /* Панель поиска вместо списка — растянуть на область чатов */
    body.desktop-search-mode .pc-sidebar-search-panel {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 4px;
        bottom: 12px;
        margin: 0;
        max-height: none;
    }

    .pc-search-recent {
        flex: 0 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .pc-search-recent.hidden,
    .pc-search-recent[hidden] {
        display: none !important;
    }

    .pc-search-recent-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 2px 6px 10px;
        flex: 0 0 auto;
    }

    .pc-search-recent-title {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: rgba(255, 255, 255, 0.5);
    }

    .pc-search-recent-clear {
        border: none;
        background: transparent;
        color: #8774E1;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        padding: 4px 6px;
        border-radius: 8px;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .pc-search-recent-clear:hover {
        background: rgba(135, 116, 225, 0.12);
        color: #a498eb;
    }

    .pc-search-recent-list,
    .pc-search-results {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-height: 0;
        overflow-y: auto;
        flex: 1 1 auto;
        scrollbar-width: thin;
    }

    .pc-search-results .search-result-item,
    .pc-search-recent-list .search-result-item {
        margin: 0;
        padding: 10px 12px;
        border-radius: 14px;
        border: none;
        background: transparent;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .pc-search-results .search-result-item:hover,
    .pc-search-recent-list .search-result-item:hover {
        background: rgba(255, 255, 255, 0.06);
        transform: none;
        border: none;
        box-shadow: none;
    }

    .pc-search-results .search-result-avatar,
    .pc-search-recent-list .search-result-avatar {
        width: 42px;
        height: 42px;
        font-size: 16px;
        border-radius: 50%;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.08);
        border: none;
        flex-shrink: 0;
    }

    .pc-search-results .search-result-avatar img,
    .pc-search-recent-list .search-result-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .pc-search-results .search-result-name,
    .pc-search-recent-list .search-result-name {
        font-size: 15px;
        font-weight: 500;
        color: #fff;
    }

    .pc-search-results .search-result-username,
    .pc-search-recent-list .search-result-username {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.45);
    }

    .pc-search-results .search-result-item.empty {
        cursor: default;
        justify-content: center;
        color: rgba(255, 255, 255, 0.45);
        padding: 20px 12px;
    }

    .pc-search-results .search-result-item.empty:hover {
        background: transparent;
    }

    /* Центр: пустой экран (чат уходит) */
    .chat-area > .chat-view {
        transition:
            opacity 0.32s ease,
            transform 0.38s cubic-bezier(0.2, 0.9, 0.2, 1);
    }

    body.desktop-search-mode .chat-area > .chat-view {
        opacity: 0 !important;
        transform: translateY(8px);
        pointer-events: none !important;
        visibility: hidden;
    }

    body.desktop-search-mode .chat-area > .no-chat {
        opacity: 1;
        visibility: visible;
    }

    /* Меню → крестик */
    .sidebar-menu-btn {
        position: relative;
    }

    .sidebar-menu-btn .sidebar-menu-icon,
    .sidebar-menu-btn .sidebar-menu-close-icon {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 22px;
        height: 22px;
        transition:
            opacity 0.22s ease,
            transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
    }

    .sidebar-menu-btn .sidebar-menu-icon {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }

    .sidebar-menu-btn .sidebar-menu-close-icon {
        opacity: 0;
        transform: rotate(-90deg) scale(0.7);
        pointer-events: none;
    }

    body.desktop-search-mode .sidebar-menu-btn .sidebar-menu-icon {
        opacity: 0;
        transform: rotate(90deg) scale(0.7);
    }

    body.desktop-search-mode .sidebar-menu-btn .sidebar-menu-close-icon {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }

    #sidebar-header-user-btn {
        transition: opacity 0.28s ease, filter 0.28s ease;
    }

    body.desktop-search-mode #sidebar-header-user-btn {
        opacity: 0.34;
        filter: brightness(0.55) saturate(0.85);
        pointer-events: none;
    }

    body.desktop-search-mode .sidebar-search-input-wrapper {
        box-shadow: 0 0 0 1px rgba(135, 116, 225, 0.28);
    }

    #search-btn .search-btn-icon--close {
        display: none;
    }

    body.desktop-search-mode #search-btn .search-btn-icon--search {
        display: none !important;
    }

    body.desktop-search-mode #search-btn .search-btn-icon--close {
        display: block !important;
    }

    /* В поиске прячем карандаш (ПК) */
    body.desktop-search-mode .sidebar-compose-fab-wrap,
    body.desktop-search-mode #fab-new-chat-desktop,
    body.desktop-search-mode #pc-compose-flyout {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}

@media (max-width: 768px) {
    #pc-search-view {
        display: none !important;
    }

    /* Панель управляется hidden/is-open; не форсим display:none */
    #pc-sidebar-search-panel[hidden] {
        display: none !important;
    }

    body.desktop-search-mode #pc-sidebar-search-panel:not([hidden]) {
        display: flex !important;
    }

    body.desktop-search-mode .pc-sidebar-search-panel {
        left: 10px;
        right: 10px;
        top: 2px;
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
        border-radius: 20px;
        background: #191919;
        z-index: 8;
    }

    /* В поиске прячем карандаш */
    body.desktop-search-mode .sidebar-compose-fab-wrap,
    body.desktop-search-mode #fab-new-chat-desktop,
    body.desktop-search-mode #pc-compose-flyout,
    body.desktop-search-mode #fab-new-chat,
    body.desktop-search-mode .chats-bottom-pill {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* На телефоне центр чата не трогаем поиском */
    body.desktop-search-mode .chat-area > .chat-view,
    body.desktop-search-mode .chat-area > .no-chat {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}


.hidden { display: none !important; }

/* ===== Голосовые сообщения: один цвет пузыря, компактный waveform ===== */
.message:has(.message-media-voice) .message-content {
    padding: 6px 8px 5px;
    max-width: min(280px, 100%);
}

.message.own:has(.message-media-voice) .message-content {
    max-width: min(280px, 100%);
}

.message:has(.message-media-voice) .message-bubble-body {
    margin-top: 2px;
    min-height: 0;
}

.message:has(.message-media-voice) .message-time {
    margin-top: 0;
    line-height: 1.1;
}

.message-media-voice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    background: transparent !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-width: 240px;
    width: 100%;
    position: relative;
    min-height: 36px;
}

.message-media-voice[data-uploading="1"] {
    opacity: 0.72;
    pointer-events: none;
}

.message-media-voice .voice-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    position: relative;
    background: rgba(255, 255, 255, 0.92);
    color: var(--msg-own-bg, #8774E1);
    transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.message:not(.own) .message-media-voice .voice-play-btn {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.message.own .message-media-voice .voice-play-btn {
    color: var(--msg-own-bg, #8774E1);
}

.message-media-voice .voice-play-btn:hover {
    transform: scale(1.04);
}

.message-media-voice .voice-play-btn:active {
    transform: scale(0.96);
}

.message-media-voice .voice-play-btn:disabled {
    opacity: 0.45;
    cursor: default;
    transform: none;
}

.message-media-voice .voice-play-btn .voice-play-icon,
.message-media-voice .voice-play-btn .voice-pause-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    display: block;
    pointer-events: none;
}

.message-media-voice .voice-play-btn .voice-play-icon {
    margin-left: auto; /* overridden by absolute centering */
    transform: translateX(1px);
}

.message-media-voice .voice-play-btn .voice-pause-icon,
.message-media-voice .voice-play-btn.is-playing .voice-play-icon {
    display: none !important;
    visibility: hidden;
    opacity: 0;
}

.message-media-voice .voice-play-btn.is-playing .voice-pause-icon {
    display: block !important;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.message-media-voice .voice-middle {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1px 0;
}

.message-media-voice .voice-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 0;
}

.message-media-voice .voice-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.message-media-voice .voice-panel.is-hidden {
    display: none;
}

.message-media-voice .voice-panel--audio.is-active {
    display: flex;
}

.message-media-voice .voice-panel--text.is-active {
    display: block;
}

.message-media-voice .voice-waveform {
    display: flex;
    align-items: center;
    gap: 1.5px;
    height: 26px;
    min-height: 26px;
    width: 100%;
    cursor: pointer;
    touch-action: manipulation;
}

.message-media-voice .voice-wave-bar {
    flex: 1 1 0;
    min-width: 2px;
    max-width: 3.5px;
    height: var(--vh, 4px);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
    transition: background 0.18s ease, height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    align-self: center;
}

.message.own .message-media-voice .voice-wave-bar {
    background: rgba(255, 255, 255, 0.38);
}

.message-media-voice .voice-wave-bar.is-played {
    background: rgba(255, 255, 255, 0.95);
}

.message:not(.own) .message-media-voice .voice-wave-bar.is-played {
    background: rgba(135, 116, 225, 0.95);
}

.message-media-voice.is-playing .voice-wave-bar.is-played {
    background: #fff;
}

.message-media-voice .voice-duration {
    font-size: 11px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.62);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    user-select: none;
}

.message.own .message-media-voice .voice-duration {
    color: rgba(255, 255, 255, 0.72);
}

.message-media-voice[data-voice-text-mode="1"] {
    max-width: 100%;
    align-items: flex-start;
}

.message:has(.message-media-voice[data-voice-text-mode="1"]) .message-content {
    max-width: min(320px, 100%);
}

.message-content.voice-bubble-resizing,
.voice-stage.voice-stage-resizing {
    will-change: width, height;
}

.voice-transcribe-btn {
    flex-shrink: 0;
    min-width: 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin-top: 4px;
}

.message-media-voice:not([data-voice-text-mode="1"]) .voice-transcribe-btn {
    margin-top: 0;
    align-self: center;
}

.voice-transcribe-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
}

.voice-transcribe-btn-disabled,
.voice-transcribe-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.voice-transcript-text {
    word-break: break-word;
    font-size: 13px;
    line-height: 1.35;
    color: inherit;
    max-height: 160px;
    overflow-y: auto;
}

body.theme-light .message:not(.own) .message-media-voice .voice-play-btn {
    background: rgba(0, 0, 0, 0.08);
    color: var(--msg-own-bg, #8774E1);
}

body.theme-light .message:not(.own) .message-media-voice .voice-wave-bar {
    background: rgba(0, 0, 0, 0.22);
}

body.theme-light .message:not(.own) .message-media-voice .voice-wave-bar.is-played {
    background: var(--msg-own-bg, #8774E1);
}

body.theme-light .message:not(.own) .message-media-voice .voice-duration {
    color: rgba(0, 0, 0, 0.45);
}

body.theme-light .message:not(.own) .voice-transcribe-btn {
    border-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.7);
}

.search-tab-search {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    padding: 0 16px;
    margin: 8px auto 12px;
    border-radius: 999px;
    background: #222222;
    border: none;
    width: 100%;
    max-width: min(300px, calc(100% - 28px));
    box-sizing: border-box;
    transition: background 0.15s ease;
}

.search-tab-search:focus-within {
    background: #2a2a2a;
}

.search-tab-search-icon {
    color: #ffffff;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.search-tab-recent-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-tab-recent-title {
    padding: 0 2px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 32px;
    font-weight: 500;
    text-align: center;
}

.search-tab-recent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    min-height: 0;
}

.search-tab-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    min-height: 0;
}

.search-tab-results.hidden {
    display: none !important;
}

.calls-search {
    margin: 8px auto 0;
    height: 48px;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    width: 100%;
    max-width: min(300px, calc(100% - 28px));
    box-sizing: border-box;
}

.calls-search-icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.75);
}

.calls-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.95);
    font-size: 16px;
}

.calls-search-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.calls-section-title {
    margin: 18px 2px 12px;
    font-size: 22px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.calls-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 2px 12px;
}

.call-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.call-item-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    font-size: 20px;
}

.call-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.call-item-main {
    flex: 1;
    min-width: 0;
}

.call-item-name {
    font-size: 26px;
    line-height: 1.05;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.call-item-sub {
    margin-top: 4px;
    display: flex;
    gap: 22px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    overflow: hidden;
}

.call-item-sub .call-item-status--missed {
    color: rgba(255, 255, 255, 0.85);
}

.calls-search-results {
    margin-top: 10px;
    border-radius: 22px;
    background: rgba(20, 20, 20, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    overflow: hidden;
}

.calls-search-results.hidden {
    display: none !important;
}

.calls-search-results .search-result-item {
    margin: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.calls-search-results .search-result-item:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    .chats-section::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 140px;
        z-index: 5;
        pointer-events: none;
        background: linear-gradient(
            to top,
            rgba(7, 7, 7, 0.96) 0%,
            rgba(7, 7, 7, 0.55) 42%,
            rgba(7, 7, 7, 0) 100%
        );
    }

    .chats-bottom-pill {
        background: rgba(14, 14, 16, 0.96);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    }
}

.chats-bottom-pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    z-index: 6;
    width: min(172px, calc(100% - 56px));
    padding: 5px 6px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    background: rgba(8, 8, 10, 0.82);
    border: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.52);
    pointer-events: auto;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    isolation: isolate;
}

.chats-bottom-pill-btn {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
    position: relative;
    z-index: 2;
}

.chats-bottom-pill-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.chats-bottom-pill-btn:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.98);
}

.chats-bottom-pill-btn svg {
    width: 26px;
    height: 26px;
}

.chats-bottom-pill-btn--home svg,
.chats-bottom-pill-btn--flow svg,
.chats-bottom-pill-btn--plus svg {
    fill: currentColor;
    stroke: none;
}

.chats-bottom-pill-btn.is-active,
.create-bottom-pill-btn.is-active {
    background: transparent;
    border: none;
    box-shadow: none;
}

.chats-bottom-pill-btn.is-active::before,
.create-bottom-pill-btn.is-active::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 38px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    z-index: -1;
    pointer-events: none;
    transition: none;
}

.chats-bottom-pill-btn--home.is-active:hover::before,
.create-bottom-pill-btn.is-active:hover::before {
    background: rgba(255, 255, 255, 0.1);
}

.chats-bottom-pill-btn--plus {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.chats-bottom-pill-btn--plus:hover {
    background: rgba(255, 255, 255, 0.08);
}

.chats-bottom-pill-btn--plus:active {
    background: rgba(255, 255, 255, 0.12);
}

.create-bottom-pill-btn--plus {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.create-bottom-pill-btn--plus:hover {
    background: rgba(255, 255, 255, 0.08);
}

.create-bottom-pill-btn--plus:active {
    background: rgba(255, 255, 255, 0.12);
}

/* Нижняя панель «Создать» — переносится в body поверх модалки (z-index 10000) */
@media (max-width: 768px) {
    body.create-menu-open #chats-bottom-pill {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        bottom: calc(18px + env(safe-area-inset-bottom)) !important;
        z-index: 10002 !important;
        display: flex !important;
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

.create-bottom-pill-btn {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
    position: relative;
    z-index: 2;
}

.create-bottom-pill-btn svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.create-bottom-pill-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.create-bottom-pill-btn:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.98);
}

@supports (padding: max(0px)) {
    .chats-bottom-pill {
        bottom: calc(18px + var(--xam-safe-bottom, env(safe-area-inset-bottom, 0px)));
    }
    .chats-list {
        padding-bottom: calc(120px + var(--xam-safe-bottom, env(safe-area-inset-bottom, 0px)));
    }
}

/* Индикатор загрузки списка чатов — анимация колёсика */
.chats-list-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 20px;
    min-height: 120px;
}

.chats-list-loading.hidden {
    display: none !important;
}

/* Дуга колёсика: угол растягивается при притормаживании (для анимации) */
@property --spinner-arc {
    syntax: '<angle>';
    initial-value: 65deg;
    inherits: false;
}

.chats-list-loading-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    --spinner-arc: 65deg;
    background: conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0.9) 0deg,
        rgba(255, 255, 255, 0.9) var(--spinner-arc),
        rgba(255, 255, 255, 0.2) var(--spinner-arc)
    );
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
    animation: chats-list-spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.chats-list-loading-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

@keyframes chats-list-spin {
    0%   { transform: rotate(0deg);   --spinner-arc: 65deg; }
    35%  { transform: rotate(140deg); --spinner-arc: 100deg; }
    70%  { transform: rotate(280deg); --spinner-arc: 75deg; }
    100% { transform: rotate(360deg); --spinner-arc: 65deg; }
}

/* Плавающая пилюлька под шапкой - скрыта на десктопе */
.floating-pill {
    display: none;
}

.fab-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--white-border);
    color: var(--bg-black);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    z-index: 10;
}

.fab-button:hover {
    background: var(--white-hover);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.fab-button:active {
    transform: scale(0.95);
}

.fab-button svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.chat-item {
    padding: 15px 20px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-gray-1);
    margin-bottom: 2px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow: visible;
}

.chat-info-top,
.chat-drum-head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
}

.chat-info-top .chat-name,
.chat-drum-head > .chat-name {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-unread-badge--nick {
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-left: 10px;
    position: relative;
    z-index: 5;
    transform: rotate(var(--badge-rotate, 0deg));
}

.chat-unread-badge--nick.unread-badge--circle {
    transform: none;
}

.chat-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
}

.chat-info-top + .chat-last-message,
.chat-info > .chat-last-message {
    margin-top: 4px;
}

.chat-item:nth-child(even) {
    background: var(--bg-gray-2);
}

.chat-item:hover {
    background: var(--bg-gray-3);
}

.chat-item.active {
    background: var(--xam-chat-active-bg, #503184);
    cursor: default;
    border-left: none;
}
.chat-item.active:hover {
    background: var(--xam-chat-active-bg, #503184);
    cursor: default;
}

.chat-pin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.72);
    margin-right: 4px;
    flex-shrink: 0;
}

.chat-pin-badge .chat-pin-icon {
    display: block;
    width: 16px;
    height: 16px;
}

.chat-item--pinned .chat-meta {
    align-items: center;
}

.chat-item.chat-item--pinned,
.chat-item-shell--pinned > .chat-item {
    position: relative;
    box-shadow: none;
}

.chat-item.chat-item--pinned::before,
.chat-item-shell--pinned > .chat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 3px;
    background: rgba(196, 168, 98, 0.92);
    border-radius: 2px;
    z-index: 4;
    pointer-events: none;
}

/* Разделитель закреплённых / обычных чатов — только мобилка */
.chats-pinned-divider {
    display: none;
}

@media (max-width: 768px) {
    .chat-item.chat-item--pinned::before,
    .chat-item-shell--pinned > .chat-item::before {
        display: none;
    }

    /*
     * Родитель списка шире экрана (shell + зона свайпа закрепа),
     * поэтому width:100%/margin в % уезжают за край.
     * Якорим полоску к ширине viewport.
     */
    .chats-pinned-divider {
        display: block;
        box-sizing: border-box;
        height: 1px;
        width: auto;
        margin: 10px 52px 12px;
        background: rgba(255, 255, 255, 0.16);
        border: 0;
        flex-shrink: 0;
        pointer-events: none;
        border-radius: 1px;
    }
}

@media (max-width: 768px) {
    .chat-item-shell {
        position: relative;
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        min-height: min-content;
        overflow-x: hidden;
        overflow-y: visible;
        margin-bottom: 2px;
        box-sizing: border-box;
        --chat-pin-progress: 0;
        --chat-peek-progress: 0;
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), margin 0.28s ease;
    }

    .chat-item-shell .chat-item {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
        box-sizing: border-box;
        touch-action: pan-y;
    }
    .chat-item-shell .chat-item.chat-item--pin-swiping,
    .chat-item-shell .chat-item.chat-item--peek-swiping,
    .chat-item-shell--swiping .chat-item,
    .chat-item-shell--peek-swiping .chat-item {
        will-change: transform;
    }

    .chat-item-shell {
        content-visibility: auto;
        contain-intrinsic-size: auto 76px;
    }

    .chat-item-pin-action {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, calc(var(--chat-pin-progress) * 0.18)) 0%,
            rgba(0, 0, 0, 0) 100%
        );
        pointer-events: none;
    }

    .chat-item-peek-action {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(
            270deg,
            rgba(0, 0, 0, calc(var(--chat-peek-progress) * 0.18)) 0%,
            rgba(0, 0, 0, 0) 100%
        );
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
    }

    .chat-item-shell--peek-swiping .chat-item-peek-action,
    .chat-item-shell--peek-ready .chat-item-peek-action {
        opacity: 1;
        visibility: visible;
    }

    .chat-item-pin-action-circle,
    .chat-item-peek-action-circle {
        --pin-circle-size: calc(28px + var(--chat-pin-progress) * 12px);
        width: var(--pin-circle-size);
        height: var(--pin-circle-size);
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: none;
        background: rgba(22, 22, 26, calc(0.48 + var(--chat-pin-progress) * 0.42));
        color: rgba(255, 255, 255, calc(0.42 + var(--chat-pin-progress) * 0.58));
        box-shadow: 0 2px 10px rgba(0, 0, 0, calc(0.08 + var(--chat-pin-progress) * 0.2));
        opacity: calc(0.45 + var(--chat-pin-progress) * 0.55);
        transform: none;
        transition: none;
    }

    .chat-item-peek-action-circle {
        --pin-circle-size: calc(28px + var(--chat-peek-progress) * 12px);
        background: rgba(22, 22, 26, calc(0.48 + var(--chat-peek-progress) * 0.42));
        color: rgba(255, 255, 255, calc(0.42 + var(--chat-peek-progress) * 0.58));
        box-shadow: 0 2px 10px rgba(0, 0, 0, calc(0.08 + var(--chat-peek-progress) * 0.2));
        /* В покое полностью скрыт; появляется только по progress свайпа */
        opacity: var(--chat-peek-progress);
    }

    .chat-item-shell:not(.chat-item-shell--swiping) .chat-item-pin-action-circle,
    .chat-item-shell:not(.chat-item-shell--peek-swiping) .chat-item-peek-action-circle {
        transition: opacity 0.22s ease, background 0.22s ease, width 0.22s ease, height 0.22s ease;
    }

    .chat-item-pin-action-circle .chat-pin-icon,
    .chat-item-peek-action-circle .chat-peek-icon {
        display: block;
        width: calc(12px + var(--chat-pin-progress) * 6px);
        height: calc(12px + var(--chat-pin-progress) * 6px);
        transition: none;
    }

    .chat-item-peek-action-circle .chat-peek-icon {
        width: calc(12px + var(--chat-peek-progress) * 6px);
        height: calc(12px + var(--chat-peek-progress) * 6px);
    }

    .chat-item-shell:not(.chat-item-shell--swiping) .chat-item-pin-action-circle .chat-pin-icon,
    .chat-item-shell:not(.chat-item-shell--peek-swiping) .chat-item-peek-action-circle .chat-peek-icon {
        transition: width 0.22s ease, height 0.22s ease;
    }

    .chat-item-shell--swiping .chat-item-pin-action-circle,
    .chat-item-shell--pin-ready .chat-item-pin-action-circle,
    .chat-item-shell--commit-pin .chat-item-pin-action-circle {
        background: rgba(80, 49, 132, calc(0.58 + var(--chat-pin-progress) * 0.38));
        color: #fff;
    }

    .chat-item-shell--peek-swiping .chat-item-peek-action-circle,
    .chat-item-shell--peek-ready .chat-item-peek-action-circle {
        background: rgba(80, 49, 132, calc(0.58 + var(--chat-peek-progress) * 0.38));
        color: #fff;
    }

    .chat-item-shell--swiping.chat-item-shell--unpin-action .chat-item-pin-action-circle,
    .chat-item-shell--pin-ready.chat-item-shell--unpin-action .chat-item-pin-action-circle,
    .chat-item-shell--commit-unpin .chat-item-pin-action-circle {
        background: rgba(176, 52, 52, calc(0.58 + var(--chat-pin-progress) * 0.34));
        color: #fff;
    }

    .chat-item-shell--commit-pin {
        z-index: 3;
    }

    .chat-item-shell--enter-from-left .chat-item {
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .chat-item-shell--reordering {
        transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }
}

/* Плавный бамп / reorder на ПК (FLIP задаёт transition inline) */
.chat-item-shell--reordering {
    will-change: transform;
    pointer-events: none;
    z-index: 4;
}

@media (min-width: 769px) {
    .chat-item-shell .chat-item-pin-action,
    .chat-item-shell .chat-item-peek-action {
        display: none;
    }
}

.chat-avatar-wrap {
    position: relative;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    overflow: visible;
}

.chat-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--white-border);
    background: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--white-border);
    font-size: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.deleted-account-avatar,
.chat-avatar.deleted-account-avatar,
.message-avatar.deleted-account-avatar,
#user-profile-modal #profile-avatar.deleted-account-avatar,
#user-profile-modal .profile-avatar.deleted-account-avatar {
    font-size: 0 !important;
    line-height: 0 !important;
    color: #f4f4f5 !important;
    background: rgba(58, 58, 62, 0.92) !important;
    overflow: hidden;
}

.chat-avatar .deleted-account-ghost,
.avatar .deleted-account-ghost,
.message-avatar .deleted-account-ghost,
#user-profile-modal .deleted-account-ghost,
.deleted-account-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #f4f4f5;
    position: relative;
    z-index: 1;
}

.deleted-account-ghost svg {
    width: 58%;
    height: 58%;
    opacity: 1;
    display: block;
}

.chat-avatar .ephemeral-lock-list {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.chat-user-avatar .ephemeral-lock-list,
.chat-user-avatar svg[stroke="#22c55e"] {
    width: 24px;
    height: 24px;
}

.chat-avatar--favorites {
    color: #fff !important;
    background: linear-gradient(135deg, #555555 0%, #2a2a2a 45%, #1a1a1a 100%) !important;
}

.chat-avatar--favorites .favorites-bookmark-icon {
    display: block;
    flex-shrink: 0;
}

.ephemeral-delete-btn.hidden {
    display: none !important;
}

/* Анимация «рассыпания» приватного чата при удалении / встряхивании */
.chat-view.ephemeral-disappearing {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.4s ease, transform 0.5s ease;
    pointer-events: none;
}

.chat-view.ephemeral-disappearing .message.ephemeral-message-fly {
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.chat-view.ephemeral-disappearing .message.ephemeral-message-fly:nth-child(odd) {
    transform: translate(-8px, -12px) scale(0.92);
}

.chat-view.ephemeral-disappearing .message.ephemeral-message-fly:nth-child(even) {
    transform: translate(10px, 8px) scale(0.88);
}

.chat-view.ephemeral-disappearing .message.ephemeral-message-fly:nth-child(3n) {
    transform: translate(6px, -15px) scale(0.9);
}

.chat-view.ephemeral-disappearing .message.ephemeral-message-fly:nth-child(5n) {
    transform: translate(-12px, 6px) scale(0.85);
}

.chat-online-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0ac630;
    bottom: 1px;
    right: 1px;
    display: none;
    box-sizing: border-box;
    border: 2px solid #0a0a0a;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* Зелёная точка онлайна — только телефон */
.chat-online-dot.show {
    display: none;
}

@media (max-width: 768px) {
    .chat-online-dot.show {
        display: block;
    }

    .chat-online-dot {
        width: 15px;
        height: 15px;
        bottom: -1px;
        right: -1px;
        border-width: 2.5px;
        border-color: #0a0a0a;
    }

    #chats-list.chats-list--drum .chat-avatar-wrap {
        position: relative;
        overflow: visible;
    }

    #chats-list.chats-list--drum .chat-item {
        overflow: visible !important;
    }

    #chats-list.chats-list--drum .chat-online-dot {
        width: 16px;
        height: 16px;
        bottom: -2px;
        right: -2px;
        border-width: 2.5px;
        border-color: #050505;
    }
}

.chat-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
}

.chat-name {
    font-weight: 600;
    color: var(--text-white);
    font-size: 14px;
    font-family: 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.chat-unread-inline {
    color: var(--text-white);
    font-weight: 700;
    margin-left: 4px;
    flex-shrink: 0;
}

.chat-name {
    display: flex;
    align-items: baseline;
}

.chat-name .chat-name-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-name .chat-name-text.is-marquee {
    text-overflow: clip;
    animation: chatListNameMarquee var(--chat-marquee-duration, 8s) linear infinite alternate;
}

/* Пока листают список — пауза marquee + без transition на строках (телефон) */
body.chats-list-scrolling .chat-name .chat-name-text.is-marquee {
    animation-play-state: paused;
}

body.chats-list-scrolling #chats-list .chat-item,
body.chats-list-scrolling #chats-list .chat-item-shell {
    transition: none !important;
}

@keyframes chatListNameMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--chat-marquee-distance, 0px))); }
}

.chat-last-message {
    font-size: 12px;
    color: var(--gray-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    min-width: 0;
}

.chat-last-message-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list-time-row,
.chat-drum-time-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

.chat-list-read,
.chat-list-read-status {
    flex: 0 0 auto;
    margin-left: 0 !important;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.chat-list-read[hidden],
.chat-list-read-status[hidden] {
    display: none !important;
}

.chat-list-read-status svg,
.chat-list-read svg {
    width: 15px;
    height: 15px;
}

.chat-list-read-status.unread-icon,
.chat-list-read--unread {
    color: rgba(255, 255, 255, 0.38);
}

.chat-list-read-status.read-icon,
.chat-list-read--read {
    color: #8774E1;
}

body.theme-light .chat-list-read-status.unread-icon,
body.theme-light .chat-list-read--unread {
    color: rgba(0, 0, 0, 0.35);
}

.chat-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.chat-list-time {
    display: none;
}

.chat-list-time-row {
    display: none;
}

/* Пилюля непрочитанных — показывается в mobile media и в drum (ПК) */
.chat-unread-pill {
    display: none;
}

.chat-unread-badge {
    display: none !important;
}

.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-black);
    position: relative;
    min-width: 0;
    overflow-x: hidden;
}

.no-chat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-chat-content {
    text-align: center;
    color: var(--gray-text);
}

.no-chat-content h2 {
    color: var(--text-white);
    margin-bottom: 10px;
}

.hidden {
    display: none !important;
}

.xam-chat-empty-context-menu {
    position: fixed;
    z-index: 1200;
    min-width: 168px;
    padding: 4px;
    border-radius: 16px;
    background: rgba(22, 22, 24, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    display: flex;
    flex-direction: column;
    gap: 1px;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 140ms ease, transform 140ms ease;
    -webkit-tap-highlight-color: transparent;
}

.xam-chat-empty-context-menu.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.xam-chat-empty-context-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: rgba(255, 255, 255, 0.96);
    text-align: left;
    font-size: 13px;
    line-height: 1.15;
    padding: 7px 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.xam-chat-empty-context-menu__item:hover:not(:disabled),
.xam-chat-empty-context-menu__item:active:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
}

.xam-chat-empty-context-menu__item:disabled {
    opacity: 0.65;
    cursor: default;
}

.xam-chat-empty-context-menu__item--active {
    background: rgba(255, 255, 255, 0.06);
}

.xam-chat-empty-context-menu__item--active .xam-chat-empty-context-menu__label {
    color: rgba(190, 170, 255, 0.98);
}

.xam-chat-empty-context-menu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.92);
}

.xam-chat-empty-context-menu__icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.xam-chat-empty-context-menu__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

body.theme-light .xam-chat-empty-context-menu {
    background: rgba(36, 36, 40, 0.82);
    border-color: rgba(255, 255, 255, 0.16);
}

body.theme-light .xam-chat-empty-context-menu__item {
    color: rgba(255, 255, 255, 0.98);
}

.chat-view .xam-chat-empty-context-menu {
    border: none !important;
}

body.xam-empty-ctx-armed #messages-container,
body.xam-empty-ctx-armed #messages-container * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

@media (max-width: 768px) {
    .chat-view #empty-chat-message,
    .chat-view #empty-chat-message .empty-chat-text,
    .chat-view .date-separator {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
}

.chat-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    min-width: 0;
    overflow-x: hidden;
    touch-action: pan-y;
}

/* Плавное появление чата на ПК: целиком «поднимается» снизу, без сдвига сбоку и без лишних рассинхронов шапка/лента/ввод */
@media (min-width: 769px) {
    .chat-view.hidden {
        display: none;
    }
    .chat-view:not(.hidden) {
        animation: chatViewRiseIn 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes chatViewRiseIn {
        0% {
            opacity: 0;
            transform: translate3d(0, 22px, 0) scale(0.992);
        }
        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
        }
    }
    /* Раньше шапка/лента/поле ввода анимировались отдельно — визуально «дёргалось»; движение только у корня .chat-view */
    .chat-view:not(.hidden) .chat-header,
    .chat-view:not(.hidden) .messages-container,
    .chat-view:not(.hidden) .message-input-container {
        animation: none !important;
    }
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
    .chat-view:not(.hidden) {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.chat-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--white-border);
    background: var(--bg-gray-1);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    border-radius: 0;
    border: none;
    width: 100%;
    max-width: 100%;
}

/* ПК-кнопки поиска/меню — только в десктопной пилюле */
.chat-header-actions {
    display: none;
}

/* Слот раскрытия шапки используется только на ПК (см. @media min-width 769 в блоке чата) */
.chat-header-expand {
    display: none !important;
}

@media (min-width: 769px) {
    /* ПК: шапка — пилюля, чуть уже; ширина общая с закрепом */
    .chat-view > .chat-header.desktop-only,
    .chat-header.desktop-only {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        align-self: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: var(--desktop-chat-chrome-width, min(680px, calc(100% - 32px))) !important;
        margin: 12px auto 10px !important;
        padding: 4px 8px 4px 5px !important;
        min-height: 44px !important;
        border-radius: 999px !important;
        border: none !important;
        border-bottom: none !important;
        background: #212121 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        justify-content: space-between !important;
    }

    body.theme-style-glass .chat-header.desktop-only {
        display: flex !important;
        flex-direction: row !important;
        align-self: center !important;
        margin: 12px auto 10px !important;
        width: 100% !important;
        max-width: var(--desktop-chat-chrome-width, min(680px, calc(100% - 32px))) !important;
        padding: 4px 8px 4px 5px !important;
        border-radius: 999px !important;
        border: none !important;
        border-bottom: none !important;
        background: #212121 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    .chat-header.desktop-only .chat-user-info {
        flex: 1 1 auto !important;
        max-width: none !important;
        min-width: 0 !important;
        gap: 10px !important;
        margin-right: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        box-shadow: none !important;
    }

    .chat-header.desktop-only .chat-header-actions {
        display: inline-flex !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        margin-left: 0 !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
        box-shadow: none !important;
    }

    /* если все кнопки скрыты — капсулу не показываем */
    .chat-header.desktop-only .chat-header-actions:has(.btn-icon:not(.hidden)) {
        display: inline-flex;
    }
    .chat-header.desktop-only .chat-header-actions:not(:has(.btn-icon:not(.hidden))) {
        display: none;
    }

    .chat-header.desktop-only .btn-icon {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        margin-left: 0 !important;
    }

    .chat-header.desktop-only .btn-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .chat-header.desktop-only .chat-user-avatar {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        border: none !important;
    }

    .chat-header.desktop-only .chat-user-name {
        font-size: 15px !important;
        line-height: 1.1 !important;
    }

    .chat-header.desktop-only .chat-user-status {
        font-size: 12px !important;
        line-height: 1.1 !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* ПК: ник в одну строку + "по кругу" если не влезает */
@media (min-width: 769px) {
    #chat-user-name-desktop {
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        max-width: 100%;
    }
    #chat-user-name-desktop .chat-user-name-track {
        display: inline-flex;
        align-items: center;
        gap: 28px;
        transform: translateX(0);
        will-change: transform;
    }
    #chat-user-name-desktop .chat-user-name-text {
        display: inline-block;
        white-space: nowrap;
    }
    #chat-user-name-desktop .chat-user-name-text-clone {
        display: none;
    }
    #chat-user-name-desktop.is-desktop-marquee .chat-user-name-text-clone {
        display: inline-block;
    }
    #chat-user-name-desktop.is-desktop-marquee .chat-user-name-track {
        animation: desktopNameMarquee var(--desktop-marquee-duration, 10s) linear infinite;
    }
    @keyframes desktopNameMarquee {
        0%   { transform: translateX(0); }
        100% { transform: translateX(calc(-1 * var(--desktop-marquee-distance, 0px))); }
    }
}

.chat-header .btn-icon {
    background: transparent;
    border: none;
    margin-left: 0;
}

.chat-header .btn-icon:hover {
    background: transparent;
    border-color: transparent;
}

.chat-header .btn-icon + .btn-icon {
    margin-left: 0;
}

.btn-back {
    background: transparent;
    border: none;
    color: var(--white-border);
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: none; 
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}

.btn-back:hover {
    opacity: 0.7;
}

.chat-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

/* Только обёртка с ником/статусом (не аватар — он тоже div и ломался бы от flex:1) */
.chat-user-info > div:not(.chat-user-avatar) {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.chat-user-avatar {
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    align-self: center;
    border-radius: 50%;
    border: 2px solid var(--white-border);
    background: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--white-border);
    font-size: 20px;
    overflow: hidden;
}

.chat-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-user-name {
    font-weight: 600;
    color: var(--text-white);
    font-size: 16px;
    font-family: 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    max-width: 100%;
}

.chat-user-status {
    font-size: 13px;
    color: var(--gray-text);
}

.chat-user-status.online {
    color: var(--white-border);
}

.chat-user-status--typing,
.chat-top-overlay-status.chat-user-status--typing {
    color: rgba(150, 97, 241, 0.95);
}

/* Секция закрепленных сообщений (полоска под шапкой чата, как в Telegram) */
.pinned-messages-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 0;
    min-height: 42px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
    transform: none !important;
    transition: none;
}

.pinned-messages-bar:hover,
.pinned-messages-bar:active,
.pinned-messages-bar:focus {
    transform: none !important;
}

.pinned-messages-bar.hidden {
    display: none !important;
}

.pinned-messages-bar-accent {
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--xam-ui-accent, #9661F1);
}

.pinned-messages-bar-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    color: var(--xam-ui-accent, #9661F1);
    margin-left: 10px;
}

.pinned-messages-bar-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pinned-messages-bar-title {
    color: #9661F1;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pinned-messages-bar-text {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pinned-messages-bar-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    padding-right: 4px;
}

.pinned-messages-bar-count.hidden {
    display: none !important;
}

/* Плавающая панель «Автоперевод включен» под шапкой чата */
.chat-auto-translate-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

.chat-auto-translate-bar.hidden {
    display: none !important;
}

.chat-auto-translate-bar__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9661F1;
}

.chat-auto-translate-bar__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.chat-auto-translate-bar__text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
}

body.theme-light .chat-auto-translate-bar__text {
    color: rgba(255, 255, 255, 0.95);
}

@media (min-width: 769px) {
    .chat-auto-translate-bar:not(.hidden) {
        align-self: center;
        width: max-content;
        max-width: min(680px, calc(100% - 32px));
        margin: 0 auto 8px;
        padding: 7px 16px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(15, 15, 17, 0.94);
        box-shadow:
            0 4px 18px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        z-index: 24;
        animation: chatAutoTranslateBarIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .chat-view.chat-view--has-pinned > .chat-auto-translate-bar:not(.hidden) {
        margin-top: 0;
        margin-bottom: 0;
    }

    .chat-view.chat-view--has-pinned > .messages-container {
        scroll-padding-top: calc(var(--desktop-chat-header-offset, 70px) + var(--desktop-pinned-bar-h, 48px) + 8px);
    }

    .chat-view.chat-view--auto-translate:not(.chat-view--has-pinned) > .messages-container {
        scroll-padding-top: calc(var(--desktop-chat-header-offset, 70px) + 44px);
    }

    .chat-view.chat-view--auto-translate.chat-view--has-pinned > .messages-container {
        scroll-padding-top: calc(var(--desktop-chat-header-offset, 70px) + var(--desktop-pinned-bar-h, 48px) + 8px + 44px);
    }
}

@keyframes chatAutoTranslateBarIn {
    from {
        opacity: 0;
        transform: translate3d(0, -6px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 768px) {
    .chat-auto-translate-bar:not(.hidden) {
        position: fixed;
        top: calc(44px + var(--mobile-top-btn-size, 46px) + 14px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 11;
        padding: 8px 18px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(26, 26, 30, 0.58);
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        animation: chatAutoTranslateBarInMobile 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .chat-view.chat-view--has-pinned .chat-auto-translate-bar:not(.hidden) {
        top: calc(44px + var(--mobile-top-btn-size, 46px) + 14px + 58px);
    }

    .chat-view.chat-view--auto-translate:not(.chat-view--has-pinned) > .messages-container {
        padding-top: calc(104px + 48px) !important;
        scroll-padding-top: calc(104px + 48px);
    }

    .chat-view.chat-view--auto-translate.chat-view--has-pinned > .messages-container {
        padding-top: calc(104px + 48px + 58px) !important;
        scroll-padding-top: calc(104px + 48px + 58px);
    }
}

@keyframes chatAutoTranslateBarInMobile {
    from {
        opacity: 0;
        transform: translate3d(-50%, -6px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(-50%, 0, 0);
    }
}

@media (min-width: 769px) {
    /* ПК: закреп — та же ширина/пилюля, что у шапки с ником */
    body:not(.layout-tablet) .chat-view > .pinned-messages-bar {
        align-self: center;
        width: 100% !important;
        max-width: var(--desktop-chat-chrome-width, min(680px, calc(100% - 32px))) !important;
        min-height: 44px;
        height: 44px;
        margin: 0 auto !important;
        padding: 4px 12px 4px 10px !important;
        gap: 8px !important;
        position: absolute !important;
        top: var(--desktop-chat-header-offset, 60px) !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--desktop-chat-chrome-bg, #212121) !important;
        border: none !important;
        border-bottom: none !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 24;
        pointer-events: auto;
        overflow: hidden;
        transition: background 0.18s ease, transform 0.15s ease, border-radius 0.18s ease !important;
        box-sizing: border-box !important;
    }

    /* Стык: закреп только под info-пилюлей (не под кнопками справа) */
    body:not(.layout-tablet) .chat-view.chat-view--has-pinned {
        --desktop-chat-chrome-gap: 0px;
        --desktop-pinned-bar-h: 40px;
        --desktop-pinned-join-radius: 16px;
    }

    body:not(.layout-tablet) .chat-view.chat-view--has-pinned > .chat-header .chat-header-info-pill {
        border-radius: var(--desktop-pinned-join-radius, 16px) var(--desktop-pinned-join-radius, 16px) 0 0 !important;
        transition: background 0.2s ease, border-radius 0.18s ease !important;
    }

    body:not(.layout-tablet) .chat-view.chat-view--has-pinned > .pinned-messages-bar {
        left: var(--desktop-pinned-join-left, 16px) !important;
        right: auto !important;
        width: var(--desktop-pinned-join-width, 280px) !important;
        max-width: none !important;
        margin: 0 !important;
        top: var(--desktop-pinned-join-top, var(--desktop-chat-header-offset, 60px)) !important;
        height: var(--desktop-pinned-bar-h, 40px) !important;
        min-height: var(--desktop-pinned-bar-h, 40px) !important;
        border-radius: 0 0 var(--desktop-pinned-join-radius, 16px) var(--desktop-pinned-join-radius, 16px) !important;
    }

    body:not(.layout-tablet) .chat-view.chat-view--has-pinned > .chat-header .chat-header-info-pill:hover,
    body:not(.layout-tablet) .chat-view.chat-view--has-pinned > .pinned-messages-bar:hover {
        background: #242424 !important;
    }

    body:not(.layout-tablet) .chat-view > .pinned-messages-bar:hover {
        background: #262626 !important;
        border-color: transparent !important;
    }

    body:not(.layout-tablet) .chat-view > .pinned-messages-bar:active {
        transform: scale(0.985) !important;
    }

    body:not(.layout-tablet) .chat-view > .pinned-messages-bar .pinned-messages-bar-accent {
        display: block !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 2px !important;
        height: auto !important;
        align-self: stretch !important;
        margin: 3px 2px 3px 0 !important;
        border-radius: 2px !important;
        background: var(--xam-ui-accent, #8774E1) !important;
        order: 2 !important;
        flex-shrink: 0 !important;
    }

    body:not(.layout-tablet) .chat-view > .pinned-messages-bar .pinned-messages-bar-icon {
        width: 24px !important;
        height: 24px !important;
        margin-left: 0 !important;
        color: #ffffff !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.06) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        order: 1 !important;
    }

    body:not(.layout-tablet) .chat-view > .pinned-messages-bar .pinned-messages-bar-icon svg {
        width: 14px !important;
        height: 14px !important;
    }

    body:not(.layout-tablet) .chat-view > .pinned-messages-bar .pinned-messages-bar-title {
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0.01em;
        color: var(--xam-pinned-accent, var(--xam-ui-accent, #a78bfa)) !important;
        line-height: 1.15 !important;
    }

    body:not(.layout-tablet) .chat-view > .pinned-messages-bar .pinned-messages-bar-text {
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.88) !important;
        line-height: 1.15 !important;
    }

    body:not(.layout-tablet) .chat-view > .pinned-messages-bar .pinned-messages-bar-body {
        order: 3 !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    body:not(.layout-tablet) .chat-view > .pinned-messages-bar .pinned-messages-bar-count {
        order: 4 !important;
    }

    body:not(.layout-tablet) .chat-view.chat-view--has-pinned > .chat-header {
        margin: 0 auto !important;
    }

    /* Автоперевод — той же ширины, что шапка */
    body:not(.layout-tablet) .chat-view > .chat-auto-translate-bar:not(.hidden) {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--desktop-chat-header-offset, 60px) !important;
        width: 100% !important;
        max-width: var(--desktop-chat-chrome-width, min(680px, calc(100% - 32px))) !important;
        margin: 0 auto !important;
        border-radius: 999px !important;
        z-index: 23;
        background: var(--desktop-chat-chrome-bg, #212121) !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-sizing: border-box !important;
    }

    body:not(.layout-tablet) .chat-view.chat-view--has-pinned > .chat-auto-translate-bar:not(.hidden) {
        top: calc(var(--desktop-chat-header-offset, 60px) + var(--desktop-pinned-bar-h, 44px) + var(--desktop-chat-chrome-gap, 8px)) !important;
    }
}

@media (max-width: 768px) {
    .pinned-messages-bar {
        position: fixed;
        top: calc(44px + var(--mobile-top-btn-size, 46px) + 6px);
        left: 16px;
        right: 16px;
        z-index: 11;
        background: rgba(10, 10, 12, 0.94) !important;
        border: none !important;
        border-radius: 999px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
    }

    .chat-view.chat-view--has-pinned .messages-container {
        padding-top: 56px;
        scroll-padding-top: calc(44px + var(--mobile-top-btn-size, 46px) + 58px);
    }
}

/* Legacy pinned section (modal list items) */
.pinned-messages-section {
    padding: 12px 20px;
    background: var(--bg-gray-1);
    border-bottom: 1px solid var(--gray-border);
}

.pinned-messages-section.hidden {
    display: none;
}

.pinned-messages-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.pinned-messages-label {
    color: var(--text-white);
    font-size: 12px;
    font-weight: 500;
}

.pinned-messages-toggle {
    display: none;
}

.pinned-messages-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pinned-messages-list.collapsed {
    display: none;
}

.pinned-message-item {
    padding: 10px 12px;
    padding-right: 36px;
    background: var(--bg-dark);
    border-left: 3px solid var(--white-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    display: flex;
    align-items: center;
}

.pinned-message-item:hover {
    background: var(--bg-gray-2);
}

.pinned-message-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.pinned-message-text {
    color: var(--text-white);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.pinned-message-time {
    color: var(--text-white);
    font-size: 14px;
}

.pinned-message-unpin-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.pinned-message-unpin-btn:hover {
    opacity: 1;
}

.pinned-message-item:hover .pinned-message-unpin-btn {
    opacity: 0.8;
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    min-width: 0;
    /* Скрываем боковую полосу прокрутки во всех типах чатов */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

.messages-container.xam-scroll-anchor-lock,
.messages-container.xam-scroll-anchor-lock .message,
.messages-container.xam-scroll-anchor-lock .date-separator {
    overflow-anchor: none;
}

/* Во время подгрузки старых сообщений — визуально «стоп», без overscroll-борьбы */
.messages-container.xam-messages-scroll-frozen {
    overscroll-behavior-y: none;
}

.messages-container::-webkit-scrollbar,
#messages-container::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}

/* ПК: отправка / новое сообщение — мягче, короче, с лёгким scale */
@keyframes xamPcMessageSendEnter {
    0% {
        opacity: 0;
        transform: translate3d(0, 12px, 0) scale(0.965);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes xamPcDateSendEnter {
    0% {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

body:not(.layout-tablet) .message.message-enter-pc .message-content,
body:not(.layout-tablet) .message.message-enter-pc .gift-message-content,
body:not(.layout-tablet) .message.message-enter-pc .call-message-card,
body:not(.layout-tablet) .message.message-enter-pc .system-message-text {
    will-change: transform, opacity;
    transform-origin: bottom center;
    animation: xamPcMessageSendEnter 0.36s cubic-bezier(0.22, 1, 0.32, 1) both;
}

body:not(.layout-tablet) .message.own.message-enter-pc .message-content,
body:not(.layout-tablet) .message.own.message-enter-pc .gift-message-content,
body:not(.layout-tablet) .message.own.message-enter-pc .call-message-card {
    transform-origin: bottom right;
}

body:not(.layout-tablet) .message:not(.own).message-enter-pc .message-content,
body:not(.layout-tablet) .message:not(.own).message-enter-pc .gift-message-content,
body:not(.layout-tablet) .message:not(.own).message-enter-pc .call-message-card {
    transform-origin: bottom left;
}

body:not(.layout-tablet) .date-separator.date-separator-enter-pc {
    will-change: transform, opacity;
    transform-origin: center bottom;
    animation: xamPcDateSendEnter 0.32s cubic-bezier(0.22, 1, 0.32, 1) both;
}

body:not(.layout-tablet) .message.message-enter-pc .message-content,
body:not(.layout-tablet) .message.message-enter-pc .gift-message-content {
    animation-duration: 0.36s;
}

/* Плавное появление новых сообщений снизу (мобилка / fallback) */
@keyframes xamMessageEnterFromBottom {
    0% {
        opacity: 0;
        transform: translate3d(0, 36px, 0);
    }
    55% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Открытие чата: каскад снизу вверх — мягче */
@keyframes xamChatOpenCascade {
    0% {
        opacity: 0;
        transform: translate3d(0, 6px, 0) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.message.message-enter .message-content,
.message.message-enter .gift-message-content {
    will-change: transform, opacity;
    animation: xamMessageEnterFromBottom 0.44s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.date-separator.date-separator-enter {
    animation: xamMessageEnterFromBottom 0.38s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.message.message-cascade-enter .message-content,
.message.message-cascade-enter .gift-message-content,
.message.message-cascade-enter .call-message-card,
.message.message-cascade-enter .system-message-text {
    will-change: transform, opacity;
    transform-origin: bottom center;
    animation: xamChatOpenCascade 0.48s cubic-bezier(0.18, 1, 0.28, 1) both;
    animation-delay: var(--msg-cascade-delay, 0ms);
}

.message.own.message-cascade-enter .message-content,
.message.own.message-cascade-enter .gift-message-content,
.message.own.message-cascade-enter .call-message-card {
    transform-origin: bottom right;
}

.message:not(.own).message-cascade-enter .message-content,
.message:not(.own).message-cascade-enter .gift-message-content,
.message:not(.own).message-cascade-enter .call-message-card {
    transform-origin: bottom left;
}

.date-separator.message-cascade-enter {
    will-change: transform, opacity;
    transform-origin: center bottom;
    animation: xamChatOpenCascade 0.42s cubic-bezier(0.18, 1, 0.28, 1) both;
    animation-delay: var(--msg-cascade-delay, 0ms);
}

/* ПК: вход в чат — плавный программный скролл, без scroll-behavior: smooth (конфликтует с JS) */
body:not(.layout-tablet) .messages-container.xam-chat-open-scroll-anim {
    scroll-behavior: auto !important;
}

body:not(.layout-tablet) .messages-container.xam-chat-open-reveal {
    overflow-anchor: none;
}

.message.message-lift-shift,
.date-separator.message-lift-shift,
.unread-divider.message-lift-shift {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .message.message-enter .message-content,
    .message.message-enter .gift-message-content,
    .message.message-enter-pc .message-content,
    .message.message-enter-pc .gift-message-content,
    .date-separator.date-separator-enter,
    .date-separator.date-separator-enter-pc,
    .message.message-cascade-enter .message-content,
    .message.message-cascade-enter .gift-message-content,
    .message.message-cascade-enter .call-message-card,
    .message.message-cascade-enter .system-message-text,
    .date-separator.message-cascade-enter,
    .message.message-lift-shift,
    .date-separator.message-lift-shift,
    .unread-divider.message-lift-shift {
        animation: none;
        transition: none !important;
        transform: none !important;
    }
}

/* Телефоны: без каскада появления сообщений при входе в чат */
@media (max-width: 768px) {
    .message.message-cascade-enter .message-content,
    .message.message-cascade-enter .gift-message-content,
    .message.message-cascade-enter .call-message-card,
    .message.message-cascade-enter .system-message-text,
    .date-separator.message-cascade-enter {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

body.layout-mobile-phone .message.message-cascade-enter .message-content,
body.layout-mobile-phone .message.message-cascade-enter .gift-message-content,
body.layout-mobile-phone .message.message-cascade-enter .call-message-card,
body.layout-mobile-phone .message.message-cascade-enter .system-message-text,
body.layout-mobile-phone .date-separator.message-cascade-enter {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Полноэкранный сплэш при первой загрузке / F5 (пока не готов мессенджер) */
.app-boot-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1c1c20;
    isolation: isolate;
}

/* Полноэкранный/списочный индикатор чатов не нужен — «Обновление» в поиске */
#chats-list-loading {
    display: none !important;
}

/* Загрузочный экран не показываем (ПК и телефон) — вместо него «Обновление» в поиске */
.app-boot-splash,
html.xam-no-boot-splash .app-boot-splash {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.app-boot-splash.hidden {
    display: none !important;
    pointer-events: none;
}

.app-boot-splash-mark {
    position: relative;
    width: min(108px, 30vw);
    aspect-ratio: 1;
    flex: 0 0 auto;
}

.app-boot-splash-spin,
.app-boot-splash-logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.app-boot-splash-spin {
    z-index: 1;
    /* лёгкий разгон / торможение, без резких рывков */
    animation: app-boot-splash-spin 1.7s infinite;
}

.app-boot-splash-logo {
    z-index: 2;
    width: 56%;
    height: 56%;
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: app-boot-splash-logo-breathe 1.4s ease-in-out infinite;
}

@keyframes app-boot-splash-spin {
    0% {
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.42, 0.2, 0.58, 0.8);
    }
    50% {
        transform: rotate(180deg);
        animation-timing-function: cubic-bezier(0.42, 0.2, 0.58, 0.8);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes app-boot-splash-logo-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

/* Индикатор загрузки чата — как boot splash (spin + лого), без серого фона */
.messages-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    z-index: 2;
    pointer-events: none;
    background: transparent;
}

.messages-loading.hidden {
    display: none !important;
}

.messages-loading-mark {
    position: relative;
    width: min(88px, 26vw);
    aspect-ratio: 1;
    flex: 0 0 auto;
}

.messages-loading-spin,
.messages-loading-logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.messages-loading-spin {
    z-index: 1;
    opacity: 0.72;
    animation: app-boot-splash-spin 1.7s infinite;
}

.messages-loading-logo {
    z-index: 2;
    width: 56%;
    height: 56%;
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: app-boot-splash-logo-breathe 1.4s ease-in-out infinite;
}

/* legacy — если где-то остался старый спиннер */
.messages-loading-pill,
.messages-loading-spinner {
    display: none !important;
}

.messages-loading-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.unread-divider {
    display: none !important;
}

.empty-chat-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--gray-text);
    font-size: 16px;
    pointer-events: none;
}

.empty-chat-text {
    padding: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.bot-empty-welcome {
    width: clamp(200px, 30vw, 340px);
    border-radius: 18px;
    overflow: hidden;
    background: #262a30;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.34);
    pointer-events: none;
}

.bot-empty-welcome-image {
    width: 100%;
    height: clamp(62px, 11vh, 92px);
    object-fit: cover;
    display: block;
    background: #19ff21;
}

.bot-empty-welcome-text {
    color: #f2f4f8;
    padding: 10px 12px 12px;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: left;
}

.bot-empty-welcome.no-image .bot-empty-welcome-text {
    text-align: center;
    font-weight: 600;
    padding: 12px 14px;
}

@media (max-width: 900px) {
    .bot-empty-welcome {
        width: clamp(180px, 66vw, 290px);
        border-radius: 16px;
    }
    .bot-empty-welcome-image {
        height: clamp(56px, 10.5vh, 84px);
    }
    .bot-empty-welcome-text {
        font-size: 14.5px;
        padding: 9px 11px 11px;
    }
}

@media (max-width: 520px) {
    .bot-empty-welcome {
        width: clamp(168px, 70vw, 252px);
        border-radius: 14px;
    }
    .bot-empty-welcome-image {
        height: clamp(48px, 9.5vh, 72px);
    }
    .bot-empty-welcome-text {
        font-size: 14px;
        padding: 8px 10px 10px;
    }
}

.message {
    display: flex;
    gap: 10px;
    max-width: 70%;
    /* pan-y + manipulation: вертикальный скролл и горизонтальные свайпы (ответ/назад) стабильнее */
    touch-action: pan-y;
}

.message.swipe-reply-tracking,
.message.swipe-reply-active {
    touch-action: none;
    will-change: transform;
}

.message.own {
    align-self: flex-end;
    flex-direction: row-reverse;
    align-items: flex-end;
}

/* Пузырь «свой» — по ширине текста, без растягивания на весь max-width ряда */
.message.own .message-content {
    flex: 0 1 auto;
    width: fit-content;
    max-width: min(30ch, 100%);
    min-width: 0;
    background: var(--msg-own-bg);
}

/* На больших экранах (ПК) все сообщения друг под другом, но аватарки сбоку */
@media (min-width: 1200px) {
    .message {
        align-self: flex-start;
        max-width: 60%;
        flex-direction: row;
    }
    .message.own {
        flex-direction: row;
        align-self: flex-start;
    }
}

.message.system-message {
    align-self: center;
    max-width: 100%;
    margin: 10px 0;
}

.system-message-text {
    text-align: center;
    color: var(--gray-text);
    font-size: 13px;
    font-style: italic;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.system-message-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: min(100%, 420px);
}

.system-message--deletable .system-message-text {
    flex: 1 1 auto;
    min-width: 0;
}

.system-message-dismiss {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.system-message-dismiss:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* border: 1px solid var(--white-border); */
    background: var(--bg-darker);
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--white-border);
    font-size: 12px;
    flex-shrink: 0;
    overflow: hidden;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Личные чаты: аватарки только в группах; в каналах — без аватарок */
.chat-view:not(.chat-view--group) .message-avatar {
    display: none !important;
}

.chat-view--channel .message-avatar {
    display: none !important;
}

.message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-content {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    width: fit-content;
    max-width: min(42ch, 100%);
    background: var(--msg-peer-bg);
    padding: 6px 10px;
    border-radius: var(--xam-message-radius, 14px);
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}
.message-sender,
.message-reply,
.message-media,
.invite-link-message,
.message-forwarded-label,
.flow-share-message {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.message-body-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
}

.message.own .message-body-stack {
    align-items: flex-end;
}
.message-bubble-body {
    display: block;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
}
.message-bubble-body::after {
    content: '';
    display: table;
    clear: both;
}
.message.own .message-text {
    color: #ffffff !important;
}

.message.own .message-text::selection,
.message.own .message-text::-moz-selection,
.message.own .message-content::selection,
.message.own .message-content::-moz-selection,
.message.own .message-bubble-body::selection,
.message.own .message-bubble-body::-moz-selection,
.message.own .message-time::selection,
.message.own .message-time::-moz-selection {
    background: #ffffff !important;
    color: #5a24c4 !important;
}

.message.own .message-time {
    color: rgba(255, 255, 255, 0.7) !important;
}

.message-sender {
    display: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 4px;
    opacity: 0.9;
}

/* Показываем имя отправителя только для чужих сообщений */
.message:not(.own) .message-sender {
    display: block;
}

/* В приватных чатах имя не показываем (скрыто по умолчанию) */
.message.own .message-sender {
    display: none !important;
}

/* Стили для кликабельных элементов в группах */
.message-avatar.clickable-avatar {
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.message-avatar.clickable-avatar:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.message-sender.clickable-sender {
    cursor: pointer;
    transition: opacity 0.2s;
}

.message-sender.clickable-sender:hover {
    opacity: 1;
    text-decoration: underline;
}

.message-content .message-text {
    display: inline;
    min-width: 0;
    max-width: 100%;
    color: var(--text-white);
    font-size: 15.5px;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    white-space: pre-wrap;
}

.message.message--bot .message-text,
.message.message--bot .message-text * {
    -webkit-user-select: text;
    user-select: text;
}

.message-line-break {
    display: inline-flex;
    align-items: center;
    color: var(--gray-text);
    opacity: 0.9;
    font-size: 12px;
    margin-inline: 3px;
}

.message-time {
    float: right;
    font-size: 11px;
    color: var(--gray-text);
    margin: 5px 0 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 500;
    opacity: 0.72;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: 0.01em;
    position: relative;
    top: 0.15em;
}

/* ПК: «вниз» над панелью ввода справа (позиция bottom задаётся из JS по высоте composer) */
.scroll-to-bottom-btn {
    position: absolute;
    right: calc((100% - min(680px, 100% - 32px)) / 2 + 6px);
    bottom: 12px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(28, 28, 34, 0.86);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: none;
    color: var(--text-white);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 35;
    transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

@media (min-width: 769px) {
    .scroll-to-bottom-btn {
        display: flex;
        background: #212121;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }
}

.scroll-to-bottom-btn.show {
    opacity: 1;
    pointer-events: auto;
}

.scroll-to-bottom-btn:hover {
    background: rgba(38, 38, 44, 0.92);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.scroll-to-bottom-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .scroll-to-bottom-btn {
        display: flex;
        right: 16px;
        width: 40px;
        height: 40px;
        z-index: 40 !important;
        touch-action: manipulation;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    }
}

.date-separator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 6px;
    padding: 0;
    position: relative;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.date-separator::before,
.date-separator::after {
    display: none;
}

.chat-view {
    --xam-date-pill-bg: rgba(33, 33, 33, 0.52);
    --xam-date-pill-color: rgba(255, 255, 255, 0.9);
    --xam-floating-date-top: 6px;
}

@media (min-width: 769px) {
    .chat-view {
        --xam-floating-date-top: calc(var(--desktop-chat-header-offset, 60px) + 6px);
    }

    .chat-view.chat-view--has-pinned {
        --xam-floating-date-top: calc(var(--desktop-chat-header-offset, 60px) + var(--desktop-pinned-bar-h, 44px) + var(--desktop-chat-chrome-gap, 8px) + 6px);
    }
}

.date-separator-label,
.date-separator > span,
.chat-floating-date__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 11px;
    border-radius: 11px;
    background: var(--xam-date-pill-bg);
    color: var(--xam-date-pill-color);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.chat-floating-date {
    position: absolute;
    top: var(--xam-floating-date-top);
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.chat-floating-date.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.read-status-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    opacity: 1;
    transition: opacity 0.2s;
    vertical-align: middle;
}

.message-pin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #9661F1;
    opacity: 0.95;
    line-height: 1;
    vertical-align: middle;
}

.message-pin-badge-icon {
    display: block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    fill: currentColor;
    stroke: none;
}

.message.own .message-pin-badge {
    margin-left: 2px;
    margin-right: 1px;
    color: rgba(255, 255, 255, 0.92);
}

.read-status-icon svg {
    display: block;
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.read-status-icon.read-icon,
.read-status-icon.unread-icon,
.read-icon,
.unread-icon {
    color: rgba(255, 255, 255, 0.92);
    opacity: 1;
}

.message.own .read-status-icon.read-icon,
.message.own .read-status-icon.unread-icon {
    color: rgba(255, 255, 255, 0.92);
}

.message.message--sticker .read-status-icon.read-icon,
.message.message--sticker .read-status-icon.unread-icon {
    color: rgba(255, 255, 255, 0.92) !important;
}

.message.own:hover .read-status-icon {
    opacity: 1;
}

.message.own .read-status-icon {
    margin-left: 8px;
}

/* ПК: две полупрозрачные кнопки у сообщения при наведении (меню + быстрый ответ) */
.message-hover-actions {
    display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    /*
     * Кнопки рядом с пузырём + «мост» hover:
     * padding расширяет hit-box .message, margin компенсирует визуально —
     * иначе курсор уходит с сообщения в зазор и кнопки пропадают.
     */
    .message:not(.system-message) {
        position: relative;
        width: fit-content;
        max-width: min(70%, 100%);
        box-sizing: border-box;
    }

    .message.own:not(.system-message) {
        /* зона под кнопки слева от пузыря */
        padding-left: 78px;
        margin-left: -78px;
    }

    .message:not(.own):not(.system-message) {
        /* зона под кнопки справа от пузыря */
        padding-right: 78px;
        margin-right: -78px;
    }

    .message-hover-actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
        flex-shrink: 0;
        position: absolute;
        top: 50%;
        z-index: 4;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%) scale(0.96);
        transition: opacity 0.16s ease, transform 0.16s ease;
    }

    /* Свои — слева вплотную к пузырю */
    .message.own .message-hover-actions {
        left: 4px;
        right: auto;
        margin: 0;
    }

    /* Чужие — справа вплотную к пузырю */
    .message:not(.own):not(.system-message) .message-hover-actions {
        right: 4px;
        left: auto;
        margin: 0;
    }

    .message:not(.system-message):hover .message-hover-actions,
    .message:not(.system-message):focus-within .message-hover-actions {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%) scale(1);
    }

    .message-hover-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: #2E3056;
        color: rgba(255, 255, 255, 0.92);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
        transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
    }

    .message-hover-btn:hover {
        background: #3a3e6e;
        color: #fff;
    }

    .message-hover-btn:active {
        transform: scale(0.96);
    }

    .message-hover-btn svg {
        display: block;
        width: 16px;
        height: 16px;
    }
}

.message-input-container {
    padding: 0;
    border-top: none;
    background: transparent !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    transition: background-color 0.3s;
}

.bot-reply-keyboard-panel {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px 12px;
}

.bot-reply-keyboard-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bot-reply-keyboard-row {
    display: grid;
    gap: 8px;
}

.bot-reply-keyboard-btn {
    min-height: 46px;
    border: none;
    border-radius: 14px;
    background: #212121;
    color: rgba(255, 255, 255, 0.97);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 10px 12px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.16s ease, transform 0.12s ease;
}

.bot-reply-keyboard-btn:hover {
    background: #262626;
}

.bot-reply-keyboard-btn:active {
    transform: translateY(1px) scale(0.99);
}

.bot-reply-keyboard-btn--start {
    min-height: 48px;
    font-weight: 800;
    font-size: 15px;
    border-radius: 999px;
}

.bot-reply-keyboard-btn--start:disabled {
    opacity: 0.7;
    cursor: default;
}

.bot-inline-keyboard {
    --bot-kb-radius: 14px;
    --bot-kb-gap: 6px;
    --bot-kb-glass-bg: rgba(26, 26, 30, 0.72);
    --bot-kb-glass-border: rgba(255, 255, 255, 0.08);
    --bot-kb-glass-hover: rgba(32, 32, 36, 0.78);
    --bot-kb-glass-active: rgba(36, 36, 40, 0.84);
    --bot-kb-text: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
    margin: var(--bot-kb-gap) 0 0;
    width: max-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--bot-kb-gap);
    overflow: visible;
}

.message--has-inline-keyboard .message-content {
    overflow: visible;
}

.message--has-inline-keyboard {
    margin-bottom: 10px;
}

.messages-container .message--has-inline-keyboard + .message:not(.system-message) {
    margin-top: 0;
}

.message--has-inline-keyboard:not(.own) .message-content {
    border-bottom-right-radius: 0 !important;
}

.message--has-inline-keyboard.own .message-content {
    border-bottom-left-radius: 0 !important;
}

.bot-inline-keyboard-row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--bot-kb-gap);
    min-height: 0;
}

.bot-inline-keyboard-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 32px;
    position: relative;
    isolation: isolate;
    border: 1px solid var(--bot-kb-glass-border);
    border-radius: 0;
    background: transparent;
    color: var(--bot-kb-text);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    padding: 6px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.12s ease, opacity 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}

.bot-inline-keyboard-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--bot-kb-glass-bg);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: -1;
    pointer-events: none;
    transition: background 0.12s ease;
}

.bot-inline-keyboard-btn-label {
    position: relative;
    z-index: 1;
}

.bot-inline-keyboard-btn.is-corner-tl {
    border-top-left-radius: var(--bot-kb-radius);
}

.bot-inline-keyboard-btn.is-corner-tr {
    border-top-right-radius: var(--bot-kb-radius);
}

.bot-inline-keyboard-btn.is-corner-bl {
    border-bottom-left-radius: var(--bot-kb-radius);
}

.bot-inline-keyboard-btn.is-corner-br {
    border-bottom-right-radius: var(--bot-kb-radius);
}

.bot-inline-keyboard-btn:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.09);
}

.bot-inline-keyboard-btn:hover:not(:disabled)::before {
    background: var(--bot-kb-glass-hover);
}

.bot-inline-keyboard-btn:active:not(:disabled) {
    transform: none;
}

.bot-inline-keyboard-btn:active:not(:disabled)::before {
    background: var(--bot-kb-glass-active);
}

.bot-inline-keyboard-btn--url::after {
    content: '';
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    opacity: 0.72;
    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='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%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='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bot-inline-keyboard-btn--webapp::after {
    content: '';
    position: relative;
    z-index: 1;
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    opacity: 0.78;
    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='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18'/%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='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.desktop-browser-modal.is-webapp .desktop-browser-url {
    font-weight: 600;
}

.bot-inline-keyboard-btn:disabled,
.bot-inline-keyboard-btn.is-loading {
    opacity: 0.55;
    cursor: default;
}

body.theme-light .bot-inline-keyboard {
    --bot-kb-glass-bg: rgba(255, 255, 255, 0.5);
    --bot-kb-glass-border: rgba(0, 0, 0, 0.08);
    --bot-kb-glass-hover: rgba(255, 255, 255, 0.58);
    --bot-kb-glass-active: rgba(255, 255, 255, 0.64);
    --bot-kb-text: rgba(20, 30, 40, 0.92);
}

body.theme-style-glass .bot-inline-keyboard {
    --bot-kb-glass-bg: rgba(22, 22, 28, 0.68);
    --bot-kb-glass-border: rgba(255, 255, 255, 0.08);
    --bot-kb-glass-hover: rgba(28, 28, 34, 0.74);
    --bot-kb-glass-active: rgba(32, 32, 38, 0.8);
}

/* Без liquid glass: blur-слой + плотнее на ПК, где obои часто не попадают в backdrop */
body:not(.xam-liquid-glass-enabled) .bot-inline-keyboard-btn {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

body:not(.xam-liquid-glass-enabled) .bot-inline-keyboard-btn::before {
    background: rgba(26, 26, 30, 0.78) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

body:not(.xam-liquid-glass-enabled) .bot-inline-keyboard-btn:hover:not(:disabled)::before {
    background: rgba(32, 32, 36, 0.84) !important;
}

body:not(.xam-liquid-glass-enabled) .bot-inline-keyboard-btn:active:not(:disabled)::before {
    background: rgba(36, 36, 40, 0.9) !important;
}

@media (min-width: 769px) {
    body:not(.xam-liquid-glass-enabled) .bot-inline-keyboard-btn::before {
        background: rgba(24, 24, 28, 0.88) !important;
        backdrop-filter: blur(20px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    }

    body:not(.xam-liquid-glass-enabled) .bot-inline-keyboard-btn:hover:not(:disabled)::before {
        background: rgba(30, 30, 34, 0.92) !important;
    }
}

body.theme-light:not(.xam-liquid-glass-enabled) .bot-inline-keyboard-btn::before {
    background: rgba(255, 255, 255, 0.56) !important;
}

body.theme-light:not(.xam-liquid-glass-enabled) .bot-inline-keyboard-btn {
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body:not(.xam-liquid-glass-enabled) .bot-inline-keyboard-btn::before {
        background: rgba(26, 26, 30, 0.94) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light:not(.xam-liquid-glass-enabled) .bot-inline-keyboard-btn::before {
        background: rgba(240, 242, 246, 0.96) !important;
    }
}

/* Liquid glass на Android: стекло на самой кнопке, без ::before */
body.xam-liquid-glass-enabled .bot-inline-keyboard-btn::before {
    display: none !important;
}

@media (max-width: 900px) {
    .bot-reply-keyboard-panel {
        padding: 8px 10px 10px;
    }

    .bot-reply-keyboard-grid,
    .bot-reply-keyboard-row {
        gap: 7px;
    }

    .bot-reply-keyboard-btn {
        min-height: 44px;
        border-radius: 999px;
        font-size: 14px;
        padding: 10px 10px;
    }

    .bot-inline-keyboard {
        --bot-kb-radius: 13px;
        --bot-kb-gap: 6px;
        margin-top: var(--bot-kb-gap);
        width: max-content;
        max-width: 100%;
    }

    .bot-inline-keyboard-btn {
        min-height: 34px;
        font-size: 13px;
        padding: 6px 8px;
    }
}

/* Только ПК: подпись «ник печатает…» над полем ввода — по центру колонки чата, светлый текст */
.peer-typing-indicator {
    box-sizing: border-box;
    min-height: 0;
    width: 100%;
    padding: 4px 20px 8px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex-shrink: 0;
}

.peer-typing-indicator.hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .peer-typing-indicator {
        display: none !important;
    }

    /* Бот: при фокусе в поле — лента над строкой ввода; без фокуса кнопки остаются под ней (порядок в DOM) */
    .message-input-container.composer-focused.has-bot-reply-keyboard .bot-reply-keyboard-panel:not(.hidden),
    .message-input-container.keyboard-open.has-bot-reply-keyboard .bot-reply-keyboard-panel:not(.hidden) {
        order: -1;
        width: 100%;
        padding: 2px 0 6px;
        margin: 0;
        flex-shrink: 0;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .message-input-container.composer-focused.has-bot-reply-keyboard .bot-reply-keyboard-grid,
    .message-input-container.keyboard-open.has-bot-reply-keyboard .bot-reply-keyboard-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        scroll-snap-type: x proximity;
        padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
        scrollbar-width: none;
    }

    .message-input-container.has-bot-reply-keyboard .bot-reply-keyboard-panel:not(.hidden) {
        touch-action: pan-x;
    }

    .message-input-container.composer-focused.has-bot-reply-keyboard .bot-reply-keyboard-grid::-webkit-scrollbar,
    .message-input-container.keyboard-open.has-bot-reply-keyboard .bot-reply-keyboard-grid::-webkit-scrollbar {
        display: none;
    }

    .message-input-container.composer-focused.has-bot-reply-keyboard .bot-reply-keyboard-row,
    .message-input-container.keyboard-open.has-bot-reply-keyboard .bot-reply-keyboard-row {
        display: contents;
    }

    .message-input-container.composer-focused.has-bot-reply-keyboard .bot-reply-keyboard-btn,
    .message-input-container.keyboard-open.has-bot-reply-keyboard .bot-reply-keyboard-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-height: 32px;
        height: 32px;
        padding: 0 14px;
        font-size: 13px;
        font-weight: 600;
        line-height: 32px;
        border-radius: 999px;
        white-space: nowrap;
        max-width: min(240px, 72vw);
        border: none;
        background: #212121;
        box-shadow: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }

    .message-input-container.composer-focused.has-bot-reply-keyboard .bot-reply-keyboard-btn--start,
    .message-input-container.keyboard-open.has-bot-reply-keyboard .bot-reply-keyboard-btn--start {
        min-height: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 13px;
        font-weight: 700;
    }

    body.theme-light .message-input-container.composer-focused.has-bot-reply-keyboard .bot-reply-keyboard-btn,
    body.theme-light .message-input-container.keyboard-open.has-bot-reply-keyboard .bot-reply-keyboard-btn {
        background: #212121;
        color: rgba(255, 255, 255, 0.96);
        border: none;
    }
}

@media (min-width: 769px) {
    .bot-reply-keyboard-panel {
        width: 100%;
        max-width: min(680px, calc(100% - 32px));
        margin: 0 auto;
        padding: 8px 0 12px;
    }

    .bot-reply-keyboard-btn {
        border-radius: 999px;
    }

    .message-input-container {
        background: transparent !important;
        border: none !important;
    }
}

.message-input-container.drag-over {
    background: var(--bg-gray-1);
    border-top-color: var(--white-hover);
}

/* Overlay для блюра */
.message-blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9998;
    pointer-events: auto;
}

/* Блюр для других сообщений (не выбранного) — legacy per-message filter */
.message.blurred-message {
    filter: blur(5px);
    opacity: 1;
    transition: filter 0.3s, opacity 0.3s;
}

.message.message-selected {
    filter: none !important;
    opacity: 1 !important;
    z-index: 9999;
    position: relative;
}

/* Выделение: без blur — только притемнение остальных */
#messages-container .message,
#messages-container .date-separator,
#messages-container .unread-divider {
    transition: opacity 0.18s ease;
}

#messages-container.messages-focus-dim {
    position: relative;
}

#messages-container.messages-focus-dim .message:not(.message-selected),
#messages-container.messages-focus-dim .date-separator,
#messages-container.messages-focus-dim .unread-divider {
    filter: none !important;
    opacity: 0.38;
}

#messages-container.messages-focus-dim .message.message-selected {
    position: relative;
    z-index: 220;
    isolation: isolate;
    filter: none !important;
    opacity: 1 !important;
}

#messages-container.messages-focus-dim .message.message-selected .message-content,
#messages-container.messages-focus-dim .message.message-selected .message-text,
#messages-container.messages-focus-dim .message.message-selected .message-media,
#messages-container.messages-focus-dim .message.message-selected .gift-message-content {
    filter: none !important;
    opacity: 1 !important;
}

.message-selection-blur-layer {
    display: none !important;
}

body.message-selection-blur-active #message-control-panel,
body.message-selection-blur-active #message-reaction-panel {
    z-index: 12030 !important;
    filter: none !important;
    opacity: 1 !important;
}

@media (min-width: 769px) {
    #messages-container.messages-focus-dim .message:not(.message-selected),
    #messages-container.messages-focus-dim .date-separator,
    #messages-container.messages-focus-dim .unread-divider {
        opacity: 0.4;
    }
}

@media (max-width: 768px) {
    #messages-container.messages-focus-dim .message:not(.message-selected),
    #messages-container.messages-focus-dim .date-separator,
    #messages-container.messages-focus-dim .unread-divider {
        opacity: 0.36;
    }

    body.message-selection-blur-active #messages-container {
        position: relative !important;
        z-index: 2 !important;
    }

    /* Панель действий: компактная «карточка» у места нажатия (не на всю ширину) */
    body:not(.layout-tablet) .message-control-panel.show {
        width: auto !important;
        max-width: min(200px, calc(100vw - 20px)) !important;
        transform: none !important;
    }
    body:not(.layout-tablet) .message-control-panel .message-control-actions {
        width: 176px !important;
        max-width: min(176px, calc(100vw - 24px)) !important;
        justify-content: flex-start !important;
        border-radius: 14px !important;
        background: #181818 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Массовое выделение сообщений */
.message.message-bulk-selected {
    position: relative;
    z-index: 12;
}

.message.message-bulk-selected .message-content,
.message.message-bulk-selected .call-message-card,
.message.message-bulk-selected .gift-message-content {
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.95);
    background-color: rgba(59, 130, 246, 0.12);
}

.message-username-link {
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: #60a5fa;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    text-decoration: none;
    vertical-align: baseline;
    pointer-events: auto;
    position: relative;
    z-index: 2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.message-username-link:hover {
    text-decoration: underline;
}

body.theme-light .message-username-link {
    color: #2563eb;
}

body.xam-bulk-longpress-armed #messages-container,
body.xam-bulk-message-select-active #messages-container {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

body.xam-bulk-longpress-armed .message .message-text,
body.xam-bulk-message-select-active .message .message-text {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
}

body.xam-bulk-message-select-active .chat-view--bulk-select #messages-container {
    user-select: none;
    -webkit-user-select: none;
}

.xam-bulk-top-action-icon {
    display: block;
    flex-shrink: 0;
}

.xam-bulk-top-action-icon--delete {
    color: #ef4444;
}

.xam-bulk-top-icon-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.xam-bulk-top-icon-slot .xam-bulk-top-action-icon {
    width: 20px;
    height: 20px;
}

.xam-bulk-top-icon-slot--delete .xam-bulk-top-action-icon {
    width: 19px;
    height: 19px;
}

#chat-back-btn-mobile.xam-bulk-top-action,
#chat-top-avatar-btn.xam-bulk-top-action--delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}

#chat-top-avatar-btn.xam-bulk-top-action--delete {
    color: #ef4444;
}

#chat-top-avatar-btn.xam-bulk-top-action--delete svg {
    stroke: none;
    fill: currentColor;
}

#chat-back-btn-mobile.xam-bulk-top-action svg {
    fill: none;
}

#chat-top-overlay-info-pill .mobile-top-nick-pill-text {
    transition: none;
}

/* ПК: отдельная панель массового выделения — оверлей как шапка (без сдвига ленты) */
.chat-bulk-select-bar {
    display: none;
    width: 100%;
    max-width: min(680px, calc(100% - 32px));
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

@media (min-width: 769px) {
    body:not(.layout-tablet) .chat-view > .chat-bulk-select-bar:not(.hidden) {
        display: block;
        position: absolute;
        top: 12px;
        left: 0;
        right: 0;
        z-index: 26;
        margin: 0 auto;
        pointer-events: auto;
    }

    body:not(.layout-tablet) .chat-view > .chat-bulk-select-bar .chat-bulk-select-bar-inner {
        min-height: 52px;
        padding: 5px 10px;
        background: var(--desktop-chat-chrome-bg, rgba(15, 15, 17, 0.82));
        border: 1px solid var(--desktop-chat-chrome-border, rgba(255, 255, 255, 0.14));
        box-shadow: var(--desktop-chat-chrome-shadow,
            0 8px 28px rgba(0, 0, 0, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.08));
        backdrop-filter: blur(18px) saturate(150%);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
    }
}

.chat-bulk-select-bar:not(.hidden) {
    display: block;
}

.chat-bulk-select-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    padding: 8px 12px;
    border-radius: 999px;
    border: none;
    background: #181818;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.chat-bulk-select-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
    white-space: nowrap;
}

.chat-bulk-select-action:hover {
    background: rgba(255, 255, 255, 0.1);
}

.chat-bulk-select-action:active {
    transform: scale(0.98);
}

.chat-bulk-select-action svg {
    flex-shrink: 0;
}

.chat-bulk-select-action--danger {
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
}

.chat-bulk-select-action--danger:hover {
    background: rgba(239, 68, 68, 0.18);
}

.chat-bulk-select-center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}

.chat-bulk-select-count {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: -0.01em;
}

.chat-bulk-select-cancel {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: rgba(147, 197, 253, 0.95);
    cursor: pointer;
}

.chat-bulk-select-cancel:hover {
    color: #bfdbfe;
}

#chat-view > .chat-header.xam-bulk-header-hidden {
    display: none !important;
}

body.theme-light .chat-bulk-select-bar-inner {
    border-color: var(--desktop-chat-chrome-border, rgba(42, 64, 88, 0.12));
    background: var(--desktop-chat-chrome-bg, rgba(255, 255, 255, 0.78));
    box-shadow: var(--desktop-chat-chrome-shadow,
        0 8px 24px rgba(42, 64, 88, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

body.theme-light .chat-bulk-select-action {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(15, 23, 42, 0.92);
}

body.theme-light .chat-bulk-select-action:hover {
    background: rgba(0, 0, 0, 0.08);
}

body.theme-light .chat-bulk-select-count {
    color: rgba(15, 23, 42, 0.82);
}

body.theme-light .chat-bulk-select-cancel {
    color: #2563eb;
}

@media (max-width: 768px) {
    /* Телефон: та же пилюля, что composer — цвет/размер без подмены */
    body.xam-bulk-message-select-active .chat-view > .message-input-container {
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    .chat-view > .chat-bulk-select-bar:not(.hidden),
    body.xam-bulk-message-select-active .chat-view > .chat-bulk-select-bar:not(.hidden) {
        display: block !important;
        /* как .message-input-container: fixed + тот же bottom */
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--composer-keyboard-inset, 0px) !important;
        top: auto !important;
        z-index: 14 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        /* container safe-bottom + margin 8px у .input-panel — без лишних 24px */
        padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + var(--xam-safe-bottom, env(safe-area-inset-bottom, 0px))) max(10px, env(safe-area-inset-left, 0px)) !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
        background: transparent !important;
    }

    body.xam-bulk-message-select-active .chat-view > .chat-bulk-select-bar .chat-bulk-select-bar-inner {
        min-height: 48px !important;
        height: 48px !important;
        padding: 3px 6px 3px 6px !important;
        gap: 4px !important;
        border-radius: var(--composer-bar-radius, 999px) !important;
        background: #212121 !important;
        background-color: #212121 !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Только иконки; текст «Отмена» оставляем */
    body.xam-bulk-message-select-active .chat-bulk-select-action > span {
        display: none !important;
    }

    body.xam-bulk-message-select-active .chat-bulk-select-action {
        width: 42px;
        height: 42px;
        min-width: 42px;
        padding: 0;
        gap: 0;
        justify-content: center;
        background: transparent !important;
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.95);
    }

    body.xam-bulk-message-select-active .chat-bulk-select-action:hover,
    body.xam-bulk-message-select-active .chat-bulk-select-action:active {
        background: rgba(255, 255, 255, 0.06) !important;
    }

    body.xam-bulk-message-select-active .chat-bulk-select-action--danger {
        background: transparent !important;
        color: #f87171;
    }

    body.xam-bulk-message-select-active .chat-bulk-select-action--danger:hover,
    body.xam-bulk-message-select-active .chat-bulk-select-action--danger:active {
        background: rgba(239, 68, 68, 0.12) !important;
    }

    body.xam-bulk-message-select-active .chat-bulk-select-action svg {
        width: 22px;
        height: 22px;
    }

    body.xam-bulk-message-select-active .chat-bulk-select-center {
        min-width: 0;
        flex: 1 1 auto;
        gap: 0;
    }

    body.xam-bulk-message-select-active .chat-bulk-select-count {
        display: none !important;
    }

    body.xam-bulk-message-select-active .chat-bulk-select-cancel {
        font-size: 15px;
        font-weight: 600;
        color: #60a5fa;
        line-height: 1.2;
    }
}

@media (min-width: 769px) {
    body.xam-bulk-message-select-active .chat-top-overlay {
        display: none !important;
    }
}

/* Панель сообщения: действия (TG-like) — целиком, без каскада */
.message-control-panel {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 10001;
    pointer-events: auto;
    opacity: 0;
    transform: none;
    transition: opacity 0.09s ease;
}

.message-control-panel.hidden {
    display: none !important;
}

.message-control-panel.show {
    opacity: 1;
    transform: none;
}

.message-control-actions {
    width: 176px;
    max-width: min(176px, calc(100vw - 24px));
    min-width: 0;
    padding: 4px 0;
    border-radius: 14px;
    background: #181818;
    border: none;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    box-sizing: border-box;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ПК: оболочка меню раскатывается вслед за пунктами — отключено (появление целиком) */
@media (min-width: 769px) {
    body:not(.layout-tablet) .message-control-panel.control-anim-expanding .message-control-actions {
        will-change: auto;
        transition: none !important;
        height: auto !important;
    }
}

.message-control-read-at {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    background: transparent;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}

.message-control-read-at.hidden {
    display: none !important;
}

.message-control-read-at-icon {
    flex-shrink: 0;
    opacity: 0.88;
}

#message-control-read-at-time {
    font-variant-numeric: tabular-nums;
}

.message-control-panel .control-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: #f2f2f4;
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
    transform-origin: center center;
}

@keyframes controlItemPopIn {
    from {
        opacity: 0;
        transform: scale(0.72) translateY(var(--control-pop-y, 0px));
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Каскад пунктов отключён — меню появляется целиком */
@media (min-width: 769px) {
    body:not(.layout-tablet) .message-control-panel.show:not(.controls-settled) .message-control-read-at:not(.hidden),
    body:not(.layout-tablet) .message-control-panel.show:not(.controls-settled) .control-item.control-item--animating {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    body:not(.layout-tablet) .message-control-panel.control-anim-down {
        --control-pop-y: 0px;
    }

    body:not(.layout-tablet) .message-control-panel.control-anim-up {
        --control-pop-y: 0px;
    }
}

.message-control-panel .control-item:hover {
    background: #221e26;
}

.message-control-panel .control-item-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #ffffff;
}

.message-control-panel .control-item-icon--filled {
    fill: currentColor;
    stroke: none;
}

.message-control-panel .control-item-icon--outline {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.message-control-panel .control-item--danger .control-item-icon--filled {
    fill: currentColor;
    stroke: none;
}

.message-control-panel .control-item-label {
    flex: 1;
    line-height: 1.25;
}

.message-control-panel .control-item--danger,
.message-control-panel .control-item--danger .control-item-icon {
    color: #ff5c52;
}

.message-control-panel .control-item--danger:hover {
    background: #2a1c22;
}

/* Компактная «пилюля» только с иконками — когда полное меню не влезает по высоте.
   Горизонтальная, с прокруткой как у панели реакций, если иконки не влезают. */
.message-control-panel.control-panel--compact .message-control-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: calc(100vw - 24px);
    padding: 5px;
    gap: 2px;
    border-radius: 999px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
}

.message-control-panel.control-panel--compact .message-control-actions::-webkit-scrollbar {
    display: none;
}

.message-control-panel.control-panel--compact .message-control-read-at {
    display: none !important;
}

.message-control-panel.control-panel--compact .control-item {
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
}

.message-control-panel.control-panel--compact .control-item-label {
    display: none;
}

.message-control-panel.control-panel--compact .control-item-icon {
    width: 24px;
    height: 24px;
}

.message-forwarded-label {
    font-size: 12px;
    line-height: 1.15;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}

.message-forward-picker {
    position: fixed;
    inset: 0;
    z-index: 12020;
}

.message-forward-picker.hidden {
    display: none !important;
}

.message-forward-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.message-forward-picker-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -46%) scale(0.97);
    width: min(420px, calc(100vw - 28px));
    max-height: min(78vh, 620px);
    background: #1a1b1f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.44);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.message-forward-picker.open .message-forward-picker-backdrop {
    opacity: 1;
}

.message-forward-picker.open .message-forward-picker-panel {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.message-forward-picker-head {
    padding: 12px 16px 6px;
    text-align: center;
    position: relative;
}

.message-forward-cancel-btn {
    position: absolute;
    left: 14px;
    top: 10px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
}

.message-forward-title {
    font-size: 20px;
    line-height: 1.15;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 10px;
}

.message-forward-subtitle {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
}

.message-forward-list {
    margin: 6px 0 0;
    padding: 0 8px 6px;
    overflow: auto;
    min-height: 140px;
}

.message-forward-item {
    width: 100%;
    border: none;
    background: transparent;
    color: #fff;
    display: grid;
    grid-template-columns: 42px 1fr 24px;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
}

.message-forward-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.message-forward-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--white-border);
    background: var(--bg-darker);
    color: var(--white-border);
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.message-forward-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.message-forward-name {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-forward-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-forward-check > span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
}

.message-forward-item.is-selected .message-forward-check > span {
    background: #8c5ce5;
    border: 2px solid rgba(255, 255, 255, 0.95);
}

.message-forward-send-btn {
    margin: 6px 12px 12px;
    width: calc(100% - 24px);
    border: none;
    border-radius: 999px;
    min-height: 48px;
    background: linear-gradient(180deg, #9562f0 0%, #8252dd 100%);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
}

.message-forward-send-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.message-forward-empty {
    padding: 20px 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    font-weight: 400;
}

@media (max-width: 768px) {
    .message-forward-picker-panel {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        transform: translateY(100%);
        width: 100%;
        max-height: min(82dvh, 640px);
        border-radius: 22px 22px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .message-forward-picker.open .message-forward-picker-panel {
        transform: translateY(0);
    }

    .message-forward-title {
        font-size: 22px;
    }

    .message-forward-name {
        font-size: 17px;
    }

    .message-forward-send-btn {
        min-height: 50px;
        font-size: 17px;
        margin-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
}

.message-reaction-panel {
    --reaction-btn-size: 36px;
    --reaction-btn-gap: 4px;
    --reaction-visible-count: 7;
    --reaction-viewport-width: calc(
        var(--reaction-btn-size) * var(--reaction-visible-count)
        + var(--reaction-btn-gap) * (var(--reaction-visible-count) - 1)
    );
    position: fixed;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    padding: 6px 8px;
    width: calc(var(--reaction-viewport-width) + 16px);
    max-width: calc(var(--reaction-viewport-width) + 16px);
    border-radius: 22px;
    background: #181818;
    border: none;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    z-index: 10002;
    opacity: 0;
    transform: none;
    transition: opacity 0.09s ease, box-shadow 0.28s ease;
    pointer-events: auto;
    overflow: hidden;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.message-reaction-panel-compact {
    display: flex;
    align-items: center;
    gap: var(--reaction-btn-gap);
    flex: 0 0 auto;
    min-width: 0;
}

.message-reaction-panel-extra {
    flex: 0 0 auto;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height 0.34s cubic-bezier(0.22, 1, 0.32, 1),
        opacity 0.28s ease,
        padding 0.34s cubic-bezier(0.22, 1, 0.32, 1);
    padding: 0;
}

.message-reaction-panel.is-expanding .message-reaction-panel-extra {
    transition: opacity 0.08s ease, padding 0.06s linear;
}

.message-reaction-panel-extra-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--reaction-btn-gap);
    width: calc(
        var(--reaction-viewport-width)
        + var(--reaction-btn-gap)
        + var(--reaction-btn-size)
    );
    max-width: 100%;
}

.message-reaction-panel-extra-grid .reaction-option {
    opacity: 0;
    transform: translate3d(0, -6px, 0) scale(0.94);
    transition:
        background 0.14s ease,
        transform 0.24s cubic-bezier(0.22, 1, 0.32, 1),
        opacity 0.24s ease;
}

.message-reaction-panel.is-expanded .message-reaction-panel-extra {
    opacity: 1;
    padding: 6px 0 2px;
}

.message-reaction-panel.is-expanding .message-reaction-panel-extra-grid .reaction-option {
    opacity: calc(clamp(0, (var(--reaction-expand-progress, 0) - 0.12) * 2.4, 1));
    transform:
        translate3d(0, calc(-6px * (1 - min(1, var(--reaction-expand-progress, 0) * 1.15))), 0)
        scale(calc(0.94 + 0.06 * min(1, var(--reaction-expand-progress, 0) * 1.15)));
    transition-delay: 0s;
}

body:not(.layout-tablet) .message-control-panel.is-reaction-expand-chrome {
    opacity: var(--reaction-expand-fade, 1) !important;
    pointer-events: none !important;
    transform:
        translate3d(0, calc(-14px * var(--reaction-expand-progress, 0)), 0)
        scale3d(
            calc(1 - 0.05 * var(--reaction-expand-progress, 0)),
            calc(1 - 0.12 * var(--reaction-expand-progress, 0)),
            1
        ) !important;
    transform-origin: center center;
    transition: none;
    will-change: opacity, transform;
}

.message-reaction-panel.is-expanded .message-reaction-panel-extra-grid .reaction-option {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.message-reaction-panel.is-expanded .message-reaction-panel-extra-grid .reaction-option:nth-child(1) { transition-delay: 0.02s; }
.message-reaction-panel.is-expanded .message-reaction-panel-extra-grid .reaction-option:nth-child(2) { transition-delay: 0.04s; }
.message-reaction-panel.is-expanded .message-reaction-panel-extra-grid .reaction-option:nth-child(3) { transition-delay: 0.06s; }
.message-reaction-panel.is-expanded .message-reaction-panel-extra-grid .reaction-option:nth-child(4) { transition-delay: 0.08s; }
.message-reaction-panel.is-expanded .message-reaction-panel-extra-grid .reaction-option:nth-child(5) { transition-delay: 0.10s; }
.message-reaction-panel.is-expanded .message-reaction-panel-extra-grid .reaction-option:nth-child(n+6) { transition-delay: 0.12s; }

.message-reaction-panel-scroll {
    display: flex;
    align-items: center;
    gap: var(--reaction-btn-gap);
    overflow-x: auto;
    overflow-y: hidden;
    width: var(--reaction-viewport-width);
    max-width: var(--reaction-viewport-width);
    flex-shrink: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
}

.message-reaction-panel-scroll::-webkit-scrollbar {
    display: none;
}

.message-reaction-panel.hidden {
    display: none !important;
}

.message-reaction-panel.show {
    opacity: 1;
    transform: none;
}

.message-reaction-panel .reaction-option {
    width: var(--reaction-btn-size, 36px);
    height: var(--reaction-btn-size, 36px);
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.14s ease, transform 0.12s ease;
}

.message-reaction-panel .reaction-option:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.reaction-picker-more {
    display: none;
}

@keyframes reactionOptionPopIn {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Реакции появляются целиком — без поштучного pop */
@media (min-width: 769px) {
    body:not(.layout-tablet) .message-reaction-panel {
        --reaction-visible-count: 6;
        --reaction-viewport-width: calc(
            var(--reaction-btn-size) * var(--reaction-visible-count)
            + var(--reaction-btn-gap) * (var(--reaction-visible-count) - 1)
        );
        width: calc(
            var(--reaction-viewport-width)
            + var(--reaction-btn-size)
            + var(--reaction-btn-gap)
            + 16px
        );
        max-width: calc(
            var(--reaction-viewport-width)
            + var(--reaction-btn-size)
            + var(--reaction-btn-gap)
            + 16px
        );
    }

    body:not(.layout-tablet) .message-reaction-panel-scroll {
        width: var(--reaction-viewport-width);
        max-width: var(--reaction-viewport-width);
        flex: 0 0 auto;
        overflow: hidden;
    }

    body:not(.layout-tablet) .reaction-picker-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 var(--reaction-btn-size);
        width: var(--reaction-btn-size);
        height: var(--reaction-btn-size);
        min-width: var(--reaction-btn-size);
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.52);
        cursor: pointer;
        transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
    }

    body:not(.layout-tablet) .reaction-picker-more:hover {
        background: rgba(255, 255, 255, 0.16);
        color: rgba(255, 255, 255, 0.78);
    }

    body:not(.layout-tablet) .reaction-picker-more svg {
        display: block;
        width: 18px;
        height: 18px;
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.32, 1);
    }

    body:not(.layout-tablet) .message-reaction-panel.is-expanded .reaction-picker-more svg {
        transform: rotate(180deg);
    }

    body:not(.layout-tablet) .message-reaction-panel.show:not(.reactions-settled) .reaction-option:nth-child(-n+6),
    body:not(.layout-tablet) .message-reaction-panel.show .reaction-option {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 768px) {
    .message-control-actions {
        width: 176px;
        max-width: min(176px, calc(100vw - 24px));
        border: none;
        background: #181818;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .message-control-read-at {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .message-control-panel .control-item:hover,
    .message-control-panel .control-item:active {
        background: rgba(255, 255, 255, 0.08);
    }

    .message-reaction-panel-extra {
        display: none !important;
    }

    .message-reaction-panel-compact {
        display: contents;
    }

    .message-reaction-panel {
        border: none;
        background: #181818;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 6px 8px;
    }

    .message-reaction-panel-scroll {
        padding: 2px 4px;
        border-radius: 999px;
        border: none;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .message-reaction-panel .reaction-option:hover,
    .message-reaction-panel .reaction-option:active {
        background: rgba(255, 255, 255, 0.1);
    }
}

.message-like-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    font-size: 54px;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    transition: opacity 0.16s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
}

.message-like-burst.is-visible {
    opacity: 1;
    transform: translate(-50%, -78%) scale(1.12);
}

.message.has-reactions .message-content {
    margin-bottom: var(--reaction-stack-space, 18px);
}

.message-reactions {
    --reaction-row-width: 156px; /* ~3 бейджа в ряд */
    position: absolute;
    top: calc(100% - 12px);
    bottom: auto;
    left: -6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 4px;
    max-width: var(--reaction-row-width);
    width: max-content;
    z-index: 6;
}

.message.own .message-reactions {
    left: -6px;
    right: auto;
    justify-content: flex-start;
}

.message:not(.own) .message-reactions {
    left: auto;
    right: -6px;
    justify-content: flex-end;
}

.message-reaction-badge {
    border: none;
    border-radius: 999px;
    background: #3b82f6;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 24px;
    padding: 2px 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(21, 42, 88, 0.28);
}

.message-reaction-badge.is-reacted {
    background: #ffffff;
    color: #1a1d23;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

.message-reaction-badge .emoji {
    font-size: 15px;
    line-height: 1;
}

.message-reaction-badge .count {
    font-size: 12px;
    line-height: 1;
    min-width: 6px;
}


/* =========================
   Text formatting toolbar (TG-like)
   ========================= */
.text-format-toolbar {
    position: fixed;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(28, 28, 30, 0.86);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 10050;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
}

.text-format-toolbar.hidden {
    display: none;
}

.text-format-toolbar.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.text-format-btn {
    height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.06s ease;
    font: inherit;
    font-size: 14px;
    line-height: 1;
}

.text-format-btn .tft-icon {
    width: 18px;
    text-align: center;
}

.text-format-btn .tft-label {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.95;
    letter-spacing: 0.1px;
}

.text-format-toolbar {
    max-width: calc(100vw - 16px);
    overflow: hidden;
}

@media (max-width: 420px) {
    .text-format-btn {
        padding: 0 8px;
        gap: 6px;
    }
    .text-format-btn .tft-label {
        font-size: 12px;
    }
}

.text-format-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.16);
}

.text-format-btn:active {
    transform: translateY(1px);
}

.text-format-btn .tft-b {
    font-weight: 800;
}
.text-format-btn .tft-i {
    font-style: italic;
    font-weight: 650;
}
.text-format-btn .tft-m {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 650;
    letter-spacing: 0.2px;
}

.input-attach-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
    position: relative;
    padding: 0 4px;
    min-height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(20, 20, 20, 0.55);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.input-attach-buttons .btn-file,
.input-attach-buttons .btn-emoji,
.input-attach-buttons .btn-webapp,
.input-attach-buttons .btn-scheduled {
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.input-attach-buttons .btn-file:hover,
.input-attach-buttons .btn-emoji:hover,
.input-attach-buttons .btn-webapp:hover,
.input-attach-buttons .btn-scheduled:hover,
.input-attach-buttons .btn-file:active,
.input-attach-buttons .btn-emoji:active,
.input-attach-buttons .btn-webapp:active,
.input-attach-buttons .btn-scheduled:active {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: none;
}

.input-attach-buttons .btn-emoji.is-emoji-open {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Иконки нижней панели ввода — всегда белые (ПК и телефон) */
.message-input-container .input-attach-buttons .btn-file,
.message-input-container .input-attach-buttons .btn-emoji,
.message-input-container .input-attach-buttons .btn-webapp,
.message-input-container .input-attach-buttons .btn-scheduled,
.message-input-container .voice-send-slot .btn-voice,
.message-input-container .voice-send-slot .btn-send {
    color: #ffffff !important;
}

.message-input-container .input-attach-buttons .btn-file svg,
.message-input-container .input-attach-buttons .btn-emoji svg,
.message-input-container .input-attach-buttons .btn-webapp svg,
.message-input-container .input-attach-buttons .btn-scheduled svg,
.message-input-container .voice-send-slot .btn-voice svg,
.message-input-container .voice-send-slot .btn-send svg {
    color: #ffffff !important;
    stroke: currentColor;
    fill: currentColor;
}

.message-input-container .input-attach-buttons .btn-file svg[fill="none"],
.message-input-container .input-attach-buttons .btn-emoji svg[fill="none"],
.message-input-container .input-attach-buttons .btn-webapp svg[fill="none"],
.message-input-container .input-attach-buttons .btn-scheduled svg[fill="none"] {
    fill: none;
}

.message-input-container .input-attach-buttons .btn-file:hover,
.message-input-container .input-attach-buttons .btn-emoji:hover,
.message-input-container .input-attach-buttons .btn-webapp:hover,
.message-input-container .input-attach-buttons .btn-scheduled:hover,
.message-input-container .voice-send-slot .btn-voice:hover,
.message-input-container .voice-send-slot .btn-send:hover {
    color: #ffffff !important;
}

.message-input-container .voice-send-slot .btn-voice.recording {
    color: #ff4444 !important;
}

.input-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: calc(100% - 32px); /* чуть уже на телефонах */
    padding: 3px 6px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    outline: none;
    border-radius: 18px;
    margin: 8px auto;
}

/* Строка с полем ввода и кнопками (превью ответа — отдельный блок над ней внутри .input-panel) */
.composer-main-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
}

/* Обёртка поля: на мобилке — отдельная «пилюля», на ПК — только flex-растяжение без второго фона */
.composer-main-row .message-input-pill {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* Обёртки кластеров: на мобилке прозрачны для flex, на ПК — отдельные блоки */
.composer-input-cluster,
.composer-send-cluster {
    display: contents;
    min-width: 0;
}

/* ПК: превью вложения — отдельная строка над полем ввода (как ответ/редактирование), миниатюра 1:1 */
@media (max-width: 768px) {
    .composer-desktop-attachment-strip {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .composer-desktop-attachment-strip:not(.hidden) {
        display: block;
        width: 100%;
        flex-shrink: 0;
    }

    .composer-desktop-attachment-strip-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        gap: 12px;
    }

    .composer-desktop-attach-thumbs-scroller {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .composer-desktop-attach-thumbs-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 4px;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        flex: 1 1 auto;
        padding: 2px 0 4px;
        scrollbar-width: thin;
    }

    .composer-desktop-attach-cell {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    .composer-desktop-attach-cell-inner {
        width: 100%;
        height: 100%;
    }

    .composer-desktop-attach-cell-img,
    .composer-desktop-attach-cell-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .composer-desktop-attach-cell-fallback {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
        background: rgba(36, 38, 44, 0.98);
    }

    .composer-desktop-attach-more {
        flex: 0 0 auto;
        min-width: 36px;
        height: 44px;
        padding: 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.45);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .composer-desktop-attach-remove {
        position: relative;
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 50%;
        background: #fff;
        color: rgba(80, 80, 90, 0.95);
        font-size: 13px;
        line-height: 1;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
        z-index: 4;
        transition: transform 0.12s ease, background 0.12s ease;
    }

    .composer-desktop-attach-remove:hover {
        background: #f5f5f7;
        transform: scale(1.05);
    }
}

.composer-desktop-attachment-strip.hidden {
    display: none !important;
}

.input-panel > .reply-preview {
    padding: 0;
    margin: 0;
    border: none;
    display: flex;
    max-height: 120px;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    transform: none;
    transition: none;
}

.input-panel > .reply-preview:not(.hidden) {
    padding: 8px 10px 8px 12px;
    border: 1px solid var(--composer-chip-border, rgba(255, 255, 255, 0.14));
    border-radius: 18px;
    background: var(--composer-chip-bg, rgba(20, 20, 20, 0.55));
    box-shadow: var(--composer-chip-shadow, 0 12px 28px rgba(0, 0, 0, 0.35));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-sizing: border-box;
}

.input-panel > .reply-preview.hidden {
    display: flex !important;
    max-height: 0 !important;
    min-height: 0 !important;
    /* На ПК .input-panel — row: скрытый превью иначе держит min-width по контенту и отодвигает поле ввода */
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    align-self: auto;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
    transform: none;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.message-input-container.has-active-reply .input-panel > .reply-preview:not(.hidden),
.message-input-container.has-active-edit .input-panel > .reply-preview:not(.hidden),
.message-input-container.has-composer-attachments .input-panel > .composer-desktop-attachment-strip:not(.hidden) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    align-self: stretch;
}

/* Превью режима правки — та же «пилюля», другой акцент */
.reply-preview.edit-preview:not(.hidden) .reply-preview-label {
    color: rgba(140, 210, 255, 0.92);
}

.input-panel > .reply-preview:not(.hidden) .reply-preview-info {
    position: relative;
    padding-left: 11px;
}

.input-panel > .reply-preview:not(.hidden) .reply-preview-info::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    bottom: 1px;
    width: 2px;
    border-radius: 2px;
    background: rgba(150, 97, 241, 0.95);
}

.input-panel > .reply-preview.edit-preview:not(.hidden) .reply-preview-info::before {
    background: rgba(110, 200, 255, 0.9);
}

.input-panel > .reply-preview:not(.hidden) .reply-preview-label {
    color: rgba(180, 150, 255, 0.92);
    font-weight: 600;
}

.input-panel > .reply-preview .reply-preview-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-height: 0;
}

/* Contenteditable composer placeholder */
.message-input-ce:empty:before {
    content: attr(data-placeholder);
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

.message-input-ce {
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 27px;
    max-height: calc(27px * 3);
    overflow-y: auto;
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
}

.message-input-ce strong {
    font-weight: 800;
}
.message-input-ce em {
    font-style: italic;
}
.message-input-ce code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95em;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.message-input-ce *,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"] {
    user-select: text;
    -webkit-user-select: text;
}

@media (min-width: 769px) {
    .chat-view > .messages-container {
        padding-bottom: calc(var(--desktop-composer-inset, 54px) + 10px) !important;
    }

    /* ПК: composer поверх ленты — низ как у floating sidebar (--sidebar-float-gap: 12px) */
    .message-input-container {
        background: transparent !important;
        border: none !important;
        padding: 0 24px 12px !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 12 !important;
        pointer-events: none !important;
    }
    
    /* Убираем старую полоску клавиатуры */
    .message-input-container::before,
    .message-input-container::after {
        display: none !important;
    }

    .message-input-container .input-panel {
        pointer-events: none !important;
    }

    .message-input-container .composer-main-row,
    .message-input-container .composer-input-cluster,
    .message-input-container .composer-send-cluster,
    .message-input-container .input-attach-buttons,
    .message-input-container .message-input-pill,
    .message-input-container .voice-send-slot,
    .message-input-container .voice-recording-ui,
    .message-input-container .reply-preview:not(.hidden),
    .message-input-container .edit-preview:not(.hidden),
    .message-input-container .composer-desktop-attachment-strip:not(.hidden),
    .message-input-container .bot-reply-keyboard-panel:not(.hidden),
    .message-input-container .channel-composer-actions:not(.hidden),
    .message-input-container .blocked-composer-actions:not(.hidden) {
        pointer-events: auto !important;
    }

    /* ПК: затухание ленты в прозрачность (не затемнение поверх) */
    body:not(.layout-tablet) .chat-view::before,
    body:not(.layout-tablet) .chat-view::after {
        display: none !important;
    }

    body:not(.layout-tablet) .chat-view > .messages-container {
        --xam-msg-fade-min: 0.5;
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, var(--xam-msg-fade-min)) 0,
            rgba(0, 0, 0, 0.62) 14px,
            rgba(0, 0, 0, 0.82) 28px,
            #000 44px,
            #000 calc(100% - 48px),
            rgba(0, 0, 0, 0.82) calc(100% - 28px),
            rgba(0, 0, 0, 0.62) calc(100% - 14px),
            rgba(0, 0, 0, var(--xam-msg-fade-min)) 100%
        );
        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, var(--xam-msg-fade-min)) 0,
            rgba(0, 0, 0, 0.62) 14px,
            rgba(0, 0, 0, 0.82) 28px,
            #000 44px,
            #000 calc(100% - 48px),
            rgba(0, 0, 0, 0.82) calc(100% - 28px),
            rgba(0, 0, 0, 0.62) calc(100% - 14px),
            rgba(0, 0, 0, var(--xam-msg-fade-min)) 100%
        );
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    body:not(.layout-tablet) .chat-view.chat-view--has-pinned > .messages-container {
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, var(--xam-msg-fade-min, 0.5)) 0,
            rgba(0, 0, 0, 0.62) 18px,
            rgba(0, 0, 0, 0.82) 36px,
            #000 56px,
            #000 calc(100% - 48px),
            rgba(0, 0, 0, 0.82) calc(100% - 28px),
            rgba(0, 0, 0, 0.62) calc(100% - 14px),
            rgba(0, 0, 0, var(--xam-msg-fade-min, 0.5)) 100%
        );
        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, var(--xam-msg-fade-min, 0.5)) 0,
            rgba(0, 0, 0, 0.62) 18px,
            rgba(0, 0, 0, 0.82) 36px,
            #000 56px,
            #000 calc(100% - 48px),
            rgba(0, 0, 0, 0.82) calc(100% - 28px),
            rgba(0, 0, 0, 0.62) calc(100% - 14px),
            rgba(0, 0, 0, var(--xam-msg-fade-min, 0.5)) 100%
        );
    }
    
    /* Вёрстка без .input-row: дети панели — в один горизонтальный ряд; цвет как у шапки чата */
    .input-panel {
        width: 100%;
        max-width: min(680px, calc(100% - 32px));
        min-width: 0;
        margin: 0 auto !important;
        padding: 0;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        display: flex;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 0 !important;
        box-sizing: border-box;
    }

    .input-panel > .reply-preview.hidden,
    .input-panel > .edit-preview.hidden,
    .input-panel > .composer-desktop-attachment-strip.hidden {
        display: none !important;
    }

    .message-input-container.has-active-reply .input-panel,
    .message-input-container.has-active-edit .input-panel,
    .message-input-container.has-composer-attachments .input-panel {
        gap: 8px !important;
    }

    body.theme-style-glass .input-panel {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
    }
    
    .input-panel .input-row {
        gap: 24px;
        align-items: flex-end;
    }
    
    .input-attach-buttons {
        gap: 0;
        align-items: center;
        align-self: center;
        padding: 0 2px;
        height: 42px;
        min-height: 42px;
        max-height: 42px;
        border-radius: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    .input-attach-buttons .btn-file,
    .input-attach-buttons .btn-emoji,
    .input-attach-buttons .btn-webapp,
    .input-attach-buttons .btn-scheduled {
        width: 36px;
        height: 36px;
        min-width: 36px;
        background: transparent !important;
        border: none !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: #AAAAAA;
    }
    
    .input-attach-buttons .btn-file:hover,
    .input-attach-buttons .btn-emoji:hover,
    .input-attach-buttons .btn-webapp:hover,
    .input-attach-buttons .btn-scheduled:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #CCCCCC;
    }

    .input-attach-buttons .btn-file svg,
    .input-attach-buttons .btn-emoji svg,
    .input-attach-buttons .btn-webapp svg,
    .input-attach-buttons .btn-scheduled svg {
        width: 24px;
        height: 24px;
        stroke: currentColor;
    }

    .input-attach-buttons #emoji-hover-panel {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
    }
    
    /* Контейнер для кнопок голосового сообщения и отправки */
    .voice-send-slot {
        position: relative;
        width: 52px;
        height: 42px;
        flex: 0 0 52px;
        flex-shrink: 0;
        align-self: center;
        background: transparent;
    }
    
    .voice-send-slot .btn-voice,
    .voice-send-slot .btn-send {
        position: absolute;
        top: 0;
        left: 0;
        width: 52px;
        height: 42px;
        background: var(--xam-ui-accent, #8774E1);
        border: none;
        border-radius: 999px;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: #ffffff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: background 0.2s, color 0.2s;
    }
    
    .voice-send-slot .btn-voice:hover,
    .voice-send-slot .btn-send:hover {
        background: var(--xam-ui-accent-hover, #9585e6);
        color: #ffffff;
    }
    
    .voice-send-slot .btn-voice svg,
    .voice-send-slot .btn-send svg {
        width: 22px;
        height: 22px;
        stroke: none;
        fill: currentColor;
    }
    
    .voice-send-slot .btn-voice.btn-hidden,
    .voice-send-slot .btn-send.btn-hidden {
        display: flex !important;
        visibility: visible !important;
    }
    
    .message-input {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 8px;
        background: transparent;
        border: none;
        border-radius: 0;
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
        outline: none;
        min-height: 0;
        max-height: 4.5em;
        resize: none;
        overflow-y: auto;
        line-height: 1.35;
        font-family: inherit;
    }
    
    .message-input::placeholder {
        color: #AAAAAA;
        font-weight: 500;
    }
    
    .message-input:focus {
        outline: none;
    }

    .input-panel > .composer-main-row {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-sizing: border-box;
        overflow: visible;
        transition: none;
    }

    .composer-input-cluster {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0;
        height: 42px;
        min-height: 42px;
        max-height: 42px;
        padding: 0 4px 0 5px;
        border-radius: var(--composer-bar-radius, 999px) var(--composer-bar-radius, 999px) 0 var(--composer-bar-radius, 999px);
        background: #212121;
        box-sizing: border-box;
        overflow: visible;
        position: relative;
        isolation: isolate;
        transition: border-radius 0.18s ease, max-height 0.18s ease;
    }

    .composer-input-cluster .message-input-pill {
        max-height: 100%;
        overflow: hidden;
    }

    .composer-input-cluster .message-input-pill .message-input {
        min-height: 0 !important;
        max-height: 42px !important;
        padding: 0 4px !important;
        line-height: 42px !important;
        box-sizing: border-box !important;
    }

    .composer-input-cluster::after {
        content: '';
        position: absolute;
        left: calc(100% - 2px);
        right: auto;
        bottom: -3px;
        width: 11px;
        height: 20px;
        box-sizing: border-box;
        pointer-events: none;
        z-index: 3;
        background-color: #212121;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: left bottom;
        mask-position: left bottom;
    }

    .composer-main-row.composer-main-row--multiline .composer-input-cluster,
    .message-input-container.voice-recording-mode .composer-input-cluster,
    .message-input-container.voice-preview-mode .composer-input-cluster {
        height: auto;
        max-height: none;
        border-radius: var(--composer-bar-radius, 999px);
    }

    .composer-main-row.composer-main-row--multiline .composer-input-cluster .message-input-pill,
    .message-input-container.voice-recording-mode .composer-input-cluster .message-input-pill,
    .message-input-container.voice-preview-mode .composer-input-cluster .message-input-pill {
        max-height: none;
        overflow: visible;
    }

    .composer-main-row.composer-main-row--multiline .composer-input-cluster .message-input-pill .message-input,
    .message-input-container.voice-recording-mode .composer-input-cluster .message-input-pill .message-input,
    .message-input-container.voice-preview-mode .composer-input-cluster .message-input-pill .message-input {
        max-height: 4.5em !important;
        line-height: 1.35 !important;
        padding: 0 8px !important;
    }

    .composer-main-row.composer-main-row--multiline .composer-input-cluster::after,
    .message-input-container.voice-recording-mode .composer-input-cluster::after,
    .message-input-container.voice-preview-mode .composer-input-cluster::after {
        content: none;
        display: none;
    }

    .composer-send-cluster {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        align-self: center;
        height: 42px;
        min-height: 42px;
    }

    .composer-main-row.composer-main-row--multiline .composer-input-cluster {
        align-items: flex-end;
    }

    /* Эмодзи справа от поля (как в Telegram) */
    .message-input-container:not(.voice-inline-mode):not(.voice-recording-mode):not(.voice-preview-mode) .input-attach-buttons {
        display: contents;
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .input-attach-buttons .btn-file,
    .input-attach-buttons .btn-webapp,
    .input-attach-buttons .btn-scheduled {
        order: 1;
    }

    .composer-main-row .message-input-pill {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 0 4px !important;
        align-self: stretch;
        display: flex;
        align-items: center;
    }

    .composer-main-row.composer-main-row--multiline .message-input-pill {
        align-items: flex-end;
        padding-top: 8px !important;
        padding-bottom: 6px !important;
    }

    .input-attach-buttons .btn-file,
    .input-attach-buttons .btn-emoji,
    .input-attach-buttons .btn-webapp,
    .input-attach-buttons .btn-scheduled,
    .voice-send-slot {
        align-self: center;
    }

    .input-attach-buttons .btn-emoji {
        order: 3;
    }

    .voice-send-slot {
        order: 5;
    }

    .message-input-container.voice-recording-mode:not(.voice-inline-mode) .composer-main-row > :not(.voice-recording-ui),
    .message-input-container.voice-preview-mode:not(.voice-inline-mode) .composer-main-row > :not(.voice-recording-ui) {
        display: none !important;
    }

    /* Мобильная запись/предпрослушивание: сохраняем layout композера */
    .message-input-container.voice-inline-mode .composer-main-row .input-attach-buttons,
    .message-input-container.voice-inline-mode .composer-main-row .message-input-pill,
    .message-input-container.voice-inline-mode .composer-main-row .voice-send-slot {
        display: flex !important;
    }

    .message-input-container.voice-inline-mode .composer-main-row {
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }

    .message-input-container.voice-inline-mode .input-attach-buttons,
    .input-attach-buttons.is-voice-rec-timer {
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        /* ширину/высоту фиксируем из JS по замеру «до записи» */
        width: auto;
        min-width: 0;
        padding: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    /* Иконки убраны из потока (JS), поэтому таймер центрируется по пилюле */
    .input-attach-buttons.is-voice-rec-timer > .voice-rec-slot-ghost {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .input-attach-buttons.is-voice-rec-timer > #emoji-hover-panel {
        display: none !important;
    }

    .message-input-container.voice-inline-mode .message-input-pill,
    .message-input-pill.is-voice-rec-eq,
    .message-input-pill.is-voice-rec-actions {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .message-input-container.voice-inline-mode .message-input-pill #message-input,
    .message-input-container.voice-inline-mode .message-input-pill .message-input,
    .message-input-pill.is-voice-rec-eq > #message-input,
    .message-input-pill.is-voice-rec-eq > .message-input,
    .message-input-pill.is-voice-rec-eq > .message-input-ce,
    .message-input-pill.is-voice-rec-actions > #message-input,
    .message-input-pill.is-voice-rec-actions > .message-input,
    .message-input-pill.is-voice-rec-actions > .message-input-ce {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Предпрослушивание: слева «прослушать», справа «отменить отправку» */
    .voice-preview-actions {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 6px !important;
        z-index: 6 !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    .voice-preview-action-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.96);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease, transform 0.15s ease;
    }

    .voice-preview-action-btn:active {
        background: rgba(255, 255, 255, 0.16);
        transform: scale(0.94);
    }

    .voice-preview-action-btn--delete {
        color: #ff5a66;
    }

    .voice-preview-action-btn svg {
        display: block;
        pointer-events: none;
    }

    .voice-preview-action-btn .hidden {
        display: none !important;
    }

    .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-send {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .message-input-container.voice-preview-mode.voice-inline-mode .voice-send-slot .btn-send {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .message-input-container.voice-preview-mode.voice-inline-mode .voice-send-slot .btn-voice {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: #ff3b4a !important;
        border-color: rgba(255, 255, 255, 0.28) !important;
        color: #ffffff !important;
        box-shadow: none !important;
        animation: xam-voice-rec-pulse 1.35s ease-in-out infinite;
    }

    .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice svg {
        stroke: #ffffff !important;
        color: #ffffff !important;
    }

    .voice-rec-timer--inline {
        position: absolute !important;
        inset: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 15px !important;
        font-weight: 650 !important;
        letter-spacing: 0.01em;
        color: rgba(255, 255, 255, 0.98) !important;
        font-variant-numeric: tabular-nums;
        white-space: nowrap !important;
        line-height: 1 !important;
        user-select: none;
        z-index: 3 !important;
        pointer-events: none;
        overflow: visible !important;
        padding: 0 4px !important;
        box-sizing: border-box;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .voice-rec-timer--inline .voice-rec-timer-text {
        display: inline-block !important;
        min-width: 2.7em;
        text-align: center;
        font-variant-numeric: tabular-nums;
        color: inherit !important;
    }

    /* Узкая пилюля (мало кнопок в чате) — таймер без точки, чтобы влезть */
    .voice-rec-timer--inline.voice-rec-timer--no-dot {
        gap: 0 !important;
    }

    .voice-rec-timer--inline.voice-rec-timer--no-dot .voice-rec-dot {
        display: none !important;
    }

    .message-input-pill.is-voice-rec-eq > .voice-live-eq-canvas,
    .voice-live-eq-canvas {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 8 !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .voice-rec-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff3b4a;
        box-shadow: 0 0 0 0 rgba(255, 59, 74, 0.45);
        animation: xam-voice-rec-dot 1.2s ease-out infinite;
        flex-shrink: 0;
    }

    /* Живой эквалайзер — те же полоски, что у голосовых в чате */
    .voice-live-eq,
    .message-input-pill.is-voice-rec-eq > .voice-live-eq {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.5px !important;
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 14px !important;
        pointer-events: none !important;
        position: relative !important;
        z-index: 5 !important;
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
    }

    .voice-live-eq-bar,
    .message-input-pill.is-voice-rec-eq .voice-live-eq-bar {
        flex: 1 1 0 !important;
        max-width: 3.5px !important;
        min-width: 2px !important;
        width: 2.5px !important;
        height: 4px;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.88) !important;
        align-self: center !important;
        transition: height 0.05s linear !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    @keyframes xam-voice-rec-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.04); }
    }

    @keyframes xam-voice-rec-dot {
        0% { box-shadow: 0 0 0 0 rgba(255, 59, 74, 0.5); opacity: 1; }
        70% { box-shadow: 0 0 0 8px rgba(255, 59, 74, 0); opacity: 0.85; }
        100% { box-shadow: 0 0 0 0 rgba(255, 59, 74, 0); opacity: 1; }
    }

    .message-input-container.voice-recording-mode .input-panel,
    .message-input-container.voice-preview-mode .input-panel {
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .message-input-container.voice-recording-mode .composer-main-row,
    .message-input-container.voice-preview-mode .composer-main-row {
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .voice-recording-ui {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .voice-rec-track {
        width: 100%;
        height: 52px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(15, 15, 17, 0.94);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        padding: 0 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .voice-rec-track--recording {
        justify-content: space-between;
    }

    .voice-rec-track--preview {
        justify-content: flex-start;
        gap: 8px;
    }

    .voice-rec-timer {
        font-size: 24px;
        line-height: 1;
        font-weight: 400;
        letter-spacing: 0.2px;
        color: rgba(255, 255, 255, 0.97);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .voice-rec-timer--preview {
        font-size: 22px;
    }

    .voice-rec-icon-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.94);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
        cursor: pointer;
    }

    .voice-rec-icon-btn:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .voice-rec-icon-btn:active {
        transform: scale(0.97);
    }

    .voice-rec-icon-btn--stop,
    .voice-rec-icon-btn--delete {
        color: #ff4d5a;
    }

    .voice-rec-icon-btn--send {
        color: rgba(255, 255, 255, 0.98);
    }

    /* Ответ, правка или вложение: панель — колонка, сверху превью, снизу строка ввода как обычно */
    .message-input-container.has-active-reply .input-panel,
    .message-input-container.has-active-edit .input-panel,
    .message-input-container.has-composer-attachments .input-panel {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .message-input-container.has-active-reply .composer-input-cluster .message-input-pill,
    .message-input-container.has-active-edit .composer-input-cluster .message-input-pill,
    .message-input-container.has-composer-attachments .composer-input-cluster .message-input-pill {
        border: 1px solid var(--composer-chip-border) !important;
        background: var(--composer-chip-bg) !important;
        box-shadow: var(--composer-chip-shadow) !important;
        border-radius: 999px !important;
    }

    .message-input-container.has-active-reply .input-panel > .reply-preview,
    .message-input-container.has-active-edit .input-panel > .reply-preview,
    .message-input-container.has-composer-attachments .input-panel > .composer-desktop-attachment-strip:not(.hidden) {
        padding: 10px 12px 10px 14px;
        margin: 0;
        border: 1px solid var(--composer-chip-border) !important;
        border-radius: 999px !important;
        background: var(--composer-chip-bg) !important;
        box-shadow: var(--composer-chip-shadow) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        align-self: stretch !important;
        box-sizing: border-box;
    }
}

.input-panel.hidden {
    display: none;
}

/* Кнопки .control-btn — для других панелей; панель сообщений использует .control-item */
.control-btn {
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, background 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.control-btn:hover {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.control-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    opacity: 0.9;
}

/* Перевод сообщения — компактная карточка (как на скрине) */
.xam-translate-card {
    position: fixed;
    inset: 0;
    z-index: 80000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: none;
}

.xam-translate-card.hidden {
    display: none !important;
}

.xam-translate-card.xam-translate-card--open {
    pointer-events: auto;
}

.xam-translate-card-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.xam-translate-card--open .xam-translate-card-backdrop {
    opacity: 1;
}

.xam-translate-card-panel {
    position: relative;
    z-index: 1;
    width: min(340px, calc(100vw - 40px));
    max-width: 340px;
    box-sizing: border-box;
    padding: 22px 22px 16px;
    background: #181818;
    border-radius: 28px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    color: #fff;
    opacity: 0;
    transform: scale(0.96);
    overflow: hidden;
    transition:
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.xam-translate-card--open .xam-translate-card-panel {
    opacity: 1;
    transform: scale(1);
}

.xam-translate-card-title {
    margin: 0 0 14px;
    padding: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-align: left;
}

.xam-translate-card-source {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    min-width: 0;
}

.xam-translate-card-source-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-height: 120px;
    overflow-y: auto;
}

.xam-translate-card-enter {
    flex-shrink: 0;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.88);
    opacity: 0.9;
}

.xam-translate-card-result {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #fff;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-height: 180px;
    overflow-y: auto;
    margin-bottom: 14px;
    min-height: 1.2em;
    transition: opacity 0.2s ease;
}

.xam-translate-card-result.is-loading {
    opacity: 0.45;
}

.xam-translate-card-error {
    margin: -4px 0 12px;
    font-size: 13px;
    line-height: 1.35;
    color: #ff8a82;
}

.xam-translate-card-error.hidden {
    display: none !important;
}

.xam-translate-card-lang-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    margin: 0 0 4px;
}

.xam-translate-card-lang-wrap.is-open {
    grid-template-rows: 1fr;
    margin-bottom: 12px;
}

.xam-translate-card-lang-list {
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    max-height: 160px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 4px;
    border-radius: 14px;
    background: transparent;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.22s ease, padding 0.32s ease, background 0.22s ease;
}

.xam-translate-card-lang-wrap.is-open .xam-translate-card-lang-list {
    opacity: 1;
    padding: 6px;
    background: #212121;
}

.xam-translate-card-lang-list .translate-language-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 13px;
    color: #f2f2f4;
    cursor: pointer;
    user-select: none;
}

.xam-translate-card-lang-list .translate-language-item:hover,
.xam-translate-card-lang-list .translate-language-item:active {
    background: rgba(255, 255, 255, 0.06);
}

.xam-translate-card-lang-list .translate-language-item.is-selected,
.xam-translate-card-lang-list .translate-language-item:has(input:checked) {
    background: rgba(135, 116, 225, 0.22);
    color: #fff;
}

.xam-translate-card-lang-list .translate-language-item input[type="radio"] {
    accent-color: #8774E1;
    width: 14px;
    height: 14px;
    margin: 0;
    flex-shrink: 0;
}

.xam-translate-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 4px;
}

.xam-translate-card-lang-btn,
.xam-translate-card-close {
    border: none;
    background: transparent;
    padding: 6px 2px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.xam-translate-card-lang-btn {
    color: rgba(255, 255, 255, 0.72);
}

.xam-translate-card-lang-btn[aria-expanded="true"] {
    color: #fff;
}

.xam-translate-card-lang-hint {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.38);
}

.xam-translate-card-close {
    color: #e8958a;
}

.xam-translate-card-lang-btn:active,
.xam-translate-card-close:active {
    opacity: 0.75;
}

.control-btn.control-cancel {
    display: none;
}

.btn-voice {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-voice:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.btn-voice.recording {
    color: #ff4444;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Стили для камеры */
.camera-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 10000;
    display: flex;
    flex-direction: column;
}

.camera-viewport {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
}

.camera-circle-container {
    position: relative;
    width: 60vw;
    max-width: 400px;
    height: 60vw;
    max-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-circle-border {
    width: 100%;
    height: 100%;
    border: 3px solid white;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #000;
}

.camera-circle-border #camera-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.camera-flash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
}

.camera-flash-overlay.active {
    opacity: 1;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
    box-shadow: 
        inset 0 0 20px 5px rgba(255,255,255,0.5),
        0 0 30px 10px rgba(255,255,255,0.3);
}

.camera-side-controls {
    position: absolute;
    left: 20px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 10001;
}

.camera-flip-btn,
.camera-flash-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid white;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.camera-flip-btn:hover,
.camera-flash-btn:hover {
    background: rgba(255,255,255,0.1);
}

.camera-flash-btn.active {
    background: rgba(255,255,255,0.2);
}

.camera-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 10001;
}

.camera-cancel-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.camera-cancel-btn:hover {
    opacity: 0.7;
}

.camera-timer {
    color: white;
    font-size: 16px;
    font-weight: 500;
    min-width: 60px;
}

.camera-send-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.camera-send-btn:hover {
    opacity: 0.7;
}

.camera-send-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-emoji {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.btn-emoji:hover {
    color: rgba(255, 255, 255, 0.9);
}

.btn-file {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.btn-file:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.file-btn-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.file-type-menu {
    position: absolute;
    left: 0;
    bottom: 48px;
    background: var(--bg-dark);
    /* border: 1px solid var(--white-border); */
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
    z-index: 1002;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
    transform-origin: left bottom;
}

.file-type-menu.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.file-type-option {
    background: transparent;
    border: none;
    color: var(--text-white);
    padding: 8px 10px;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.file-type-option:hover {
    background: var(--bg-gray-2);
}

.message-input {
    flex: 1;
    padding: 4px 6px;
    background: transparent;
    border: none;
    color: var(--text-white);
    border-radius: 0;
    font-size: 16px;
    line-height: 1.4;
    min-height: 16px;
    outline: none;
    resize: none;
    overflow-x: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
}

.message-input::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.message-input:focus {
    outline: none;
    border-color: transparent;
}

.message-input::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.btn-send {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.btn-send:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.btn-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-hidden {
    visibility: hidden;
    pointer-events: none;
}

.voice-send-slot {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.voice-send-slot .btn-voice,
.voice-send-slot .btn-send {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    transition: opacity 0.2s ease-in-out;
}

.voice-send-slot:not(.composer-has-text) .btn-send {
    opacity: 0;
    pointer-events: none;
}

.voice-send-slot:not(.composer-has-text) .btn-voice {
    opacity: 1;
    pointer-events: auto;
}

.voice-send-slot.composer-has-text .btn-voice {
    opacity: 0;
    pointer-events: none;
}

.voice-send-slot.composer-has-text .btn-send {
    opacity: 1;
    pointer-events: auto;
}

.voice-send-slot.is-morphing.is-morphing-to-send:not(.composer-has-text) .btn-voice svg {
    animation: xam-composer-half-out 0.2s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.voice-send-slot.is-morphing.is-morphing-to-send.composer-has-text .btn-send svg {
    animation: xam-composer-half-in 0.2s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.voice-send-slot.is-morphing.is-morphing-to-mic.composer-has-text .btn-send svg {
    animation: xam-composer-half-out 0.2s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.voice-send-slot.is-morphing.is-morphing-to-mic:not(.composer-has-text) .btn-voice svg {
    animation: xam-composer-half-in 0.2s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

/* Плавная смена иконки голосового ↔ отправки: сначала одна плавно
   ужимается до нуля, затем вторая так же плавно вырастает. Без переворотов. */
@keyframes xam-composer-half-out {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0); opacity: 0; }
}

@keyframes xam-composer-half-in {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.voice-send-slot.is-morphing .btn-voice,
.voice-send-slot.is-morphing .btn-send {
    transform: none;
}

.voice-send-slot .btn-voice.btn-hidden,
.voice-send-slot .btn-send.btn-hidden {
    display: flex !important;
}

@media (prefers-reduced-motion: reduce) {
    .voice-send-slot.is-morphing.is-morphing-to-send:not(.composer-has-text) .btn-voice svg,
    .voice-send-slot.is-morphing.is-morphing-to-send.composer-has-text .btn-send svg,
    .voice-send-slot.is-morphing.is-morphing-to-mic.composer-has-text .btn-send svg,
    .voice-send-slot.is-morphing.is-morphing-to-mic:not(.composer-has-text) .btn-voice svg {
        animation: none;
    }

    .voice-send-slot .btn-voice,
    .voice-send-slot .btn-send {
        transition: none;
    }
}

/* Модальное окно для отправки медиа/файлов */
/* Панель выбранных медиа — bottom sheet в стиле xam-confirm-sheet */
.attach-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}
.attach-modal-overlay.hidden {
    display: flex !important;
    visibility: hidden;
}
.attach-modal-overlay.attach-modal-overlay--open {
    pointer-events: auto;
    visibility: visible;
}
.attach-modal-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.32s ease;
}
.attach-modal-overlay--open .attach-modal-backdrop {
    opacity: 1;
}
.attach-modal {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    max-height: min(88vh, 720px);
    box-sizing: border-box;
    padding: 22px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #1c1c1e;
    border-radius: 32px 32px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.attach-modal-overlay--open .attach-modal {
    transform: translate3d(0, 0, 0);
}
.attach-modal-title {
    margin: 0 0 16px;
    text-align: center;
    color: #fff;
    font-size: clamp(20px, 5vw, 26px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.attach-modal-preview {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 18px;
    border-radius: 14px;
    background: transparent;
}
.attach-modal-grid {
    column-count: 2;
    column-gap: 3px;
    width: 100%;
}
.attach-modal-grid.attach-modal-grid--single {
    column-count: 1;
}
.attach-modal-grid-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 3px;
    border-radius: 0;
    overflow: hidden;
    background: #c8c8c8;
    position: relative;
}
.attach-modal-grid-item img,
.attach-modal-grid-item video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    background: #c8c8c8;
}
.attach-modal-grid-item--file {
    background: rgba(255, 255, 255, 0.08);
    padding: 14px 12px;
    color: #fff;
    font-size: 13px;
    line-height: 1.3;
    word-break: break-word;
}
.attach-modal-grid-item--file .attach-modal-file-name {
    font-weight: 600;
    margin-bottom: 4px;
}
.attach-modal-grid-item--file .attach-modal-file-size {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}
.attach-modal-grid-item--video::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
    pointer-events: none;
}
.attach-modal-grid-item--video::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 0;
    height: 0;
    margin: -6px 0 0 -4px;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #fff;
    pointer-events: none;
}
.attach-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 0 2px;
}
.attach-modal-close {
    width: 48px;
    height: 48px;
    background: #0a0a0c;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease;
}
.attach-modal-close:active {
    transform: scale(0.96);
}
.attach-modal-close:hover {
    background: #141418;
}
.attach-modal-add {
    width: 44px;
    height: 44px;
    background: #0a0a0c;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease;
}
.attach-modal-add:active {
    transform: scale(0.96);
}
.attach-modal-add:hover {
    background: #141418;
}
.attach-modal-composer {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 6px 16px;
    background: #0a0a0c;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    box-sizing: border-box;
}
.attach-modal-message {
    flex: 1;
    min-width: 0;
    padding: 8px 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #fff;
    font-family: 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.25;
    resize: none;
    min-height: 24px;
    max-height: 96px;
    outline: none;
    box-shadow: none;
    field-sizing: content;
    -webkit-appearance: none;
    appearance: none;
}
.attach-modal-message:focus,
.attach-modal-message:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
.attach-modal-message::placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-family: 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.attach-modal-send {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.attach-modal-send:active {
    transform: scale(0.96);
}
.attach-modal-send:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
body.attach-modal-open {
    overflow: hidden;
}

/* WebView: sheet поверх shell, без clip у fixed body */
html.xam-embedded-host #attach-modal.attach-modal-overlay,
html.xam-embedded-host #attach-modal.attach-modal-overlay.attach-modal-overlay--open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    visibility: visible;
}
html.xam-embedded-host #attach-modal.attach-modal-overlay.hidden {
    visibility: hidden !important;
    pointer-events: none !important;
}
html.xam-embedded-host #attach-modal.attach-modal-overlay--open .attach-modal {
    transform: translate3d(0, 0, 0) !important;
}
@media (min-width: 769px) {
    .attach-modal {
        max-width: min(440px, calc(100% - 24px));
        margin: 0 auto;
        border-radius: 28px 28px 0 0;
    }
}
body.theme-light .attach-modal-backdrop {
    background: rgba(0, 0, 0, 0.45);
}
body.theme-light .attach-modal {
    background: #f2f2f7;
}
body.theme-light .attach-modal-title {
    color: #111;
}
body.theme-light .attach-modal-close,
body.theme-light .attach-modal-add,
body.theme-light .attach-modal-composer {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.08);
    color: #111;
}
body.theme-light .attach-modal-message {
    color: #111;
}
body.theme-light .attach-modal-message::placeholder {
    color: rgba(0, 0, 0, 0.4);
}
body.theme-light .attach-modal-send {
    color: rgba(0, 0, 0, 0.75);
    background: rgba(0, 0, 0, 0.08);
    border: none;
}
body.theme-light .attach-modal-send:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #111;
}
body.theme-light .attach-modal-grid-item--file {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
}
body.theme-light .attach-modal-grid-item--file .attach-modal-file-size {
    color: rgba(0, 0, 0, 0.45);
}

.file-preview {
    padding: 10px 20px;
    background: var(--bg-gray-1);
    border-top: 1px solid var(--gray-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.file-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-darker);
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    font-size: 14px;
}

.file-preview-name {
    flex: 1;
    color: var(--text-white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-preview-size {
    color: var(--gray-text);
    font-size: 12px;
}

.file-preview-remove {
    background: transparent;
    border: none;
    color: var(--gray-text);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
}

.file-preview-remove:hover {
    color: var(--text-white);
}

.message-media {
    margin: 8px 0;
    border-radius: 12px;
    overflow: hidden;
}

.message-media.camera-video {
    margin: 0 !important;
    border-radius: 20px;
    background: transparent !important;
    padding: 0 !important;
}

.message-media-image img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s;
}

.message-media-image img:hover {
    transform: scale(1.02);
}

/* Круглое фото из камеры */
.message-media-image.camera-photo {
    width: 300px;
    height: 300px;
    max-width: 300px;
    max-height: 300px;
    margin: 0 auto;
}

.message-media-image.camera-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    max-width: 100%;
    max-height: 100%;
}

/* Альбом из нескольких фото (как в Telegram) */
.message-media-album {
    max-width: min(280px, 100%);
}
.message-media-album-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.12);
}
.message-media-album-cell {
    position: relative;
    min-width: 0;
    min-height: 0;
}
.message-media-album-cell .message-media-image {
    margin: 0;
    border-radius: 0;
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}
.message-media-album-cell .message-media-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    object-fit: cover;
    display: block;
}
.message-media-album-grid.album-cells-3 .message-media-album-cell:nth-child(3) {
    grid-column: 1 / -1;
}
.message-media-album-grid.album-cells-3 .message-media-album-cell:nth-child(3) .message-media-image {
    aspect-ratio: 2 / 1;
}
.message-media-album-cell .upload-progress {
    border-radius: 0;
}

/* Квадратное видео из камеры 1:1 (как Telegram Stories) */
.message-media-video.camera-video {
    width: 300px;
    height: 300px;
    max-width: 300px;
    max-height: 300px;
    margin: 0;
    padding: 0;
    background: #000 !important;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.camera-video-player {
    width: 300px !important;
    height: 300px !important;
    min-width: 300px !important;
    min-height: 300px !important;
    max-width: 300px !important;
    max-height: 300px !important;
    object-fit: cover;
    border-radius: 20px;
    cursor: pointer;
    background: #000 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
}

.message-media-video:not(.camera-video) {
    width: 100%;
    max-width: 500px;
    position: relative;
}

.message-media-video:not(.camera-video) video {
    width: 100%;
    max-height: 400px;
    border-radius: 12px;
    background: var(--bg-darker);
}

.message-media-image {
    position: relative;
}

/* Тест: фото с подписью :/рамка — золотая рама (9-slice stretch) */
.message-media--gold-frame {
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.message-media--gold-frame .xam-gold-frame-wrap {
    display: block;
    line-height: 0;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent;
    border-width: 30px 22px;
    border-image-source: url('/assets/xam-gold-frame.png');
    border-image-slice: 121 113 119 116;
    border-image-width: 30px 22px;
    border-image-repeat: stretch;
    background: #0a0a0a;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.message-media--gold-frame .xam-gold-frame-wrap img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 0 !important;
    transform: none !important;
}

.message.message--gold-frame.message--media-card .message-media--gold-frame,
.message.message--gold-frame.message--media-card .message-media-image.message-media--gold-frame {
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    max-width: min(300px, 82vw);
}

.message.message--gold-frame.message--media-card .message-media--gold-frame .xam-gold-frame-wrap img {
    max-height: min(440px, 64vh);
    object-fit: cover;
    border-radius: 0 !important;
}

.message.message--gold-frame.message--media-card .message-media-card-shell {
    overflow: visible;
    background: transparent !important;
}

.message.message--gold-frame.message--media-card.own .message-media-card-shell {
    background: transparent !important;
}

@media (max-width: 768px) {
    .message-media--gold-frame .xam-gold-frame-wrap {
        border-width: 26px 18px;
        border-image-width: 26px 18px;
    }
}


.message-media-audio {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 999px;
    width: fit-content;
    max-width: min(322px, 66vw);
    position: relative;
    color: #ffffff;
    background: #9661F1;
    border: none;
    box-shadow: none;
}

.message-media-audio--music {
    min-height: 66px;
    flex-wrap: nowrap;
}

.music-play-btn {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    border: none;
    background: #f2f2f5;
    color: #885ce7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.music-play-btn:hover {
    background: #ffffff;
}

.music-play-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.music-play-btn svg {
    display: block;
}

.music-audio-meta {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.music-audio-time {
    font-size: 15px;
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}

.music-audio-author,
.music-audio-title {
    color: rgba(255, 255, 255, 0.95);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-audio-el {
    display: none;
}

.message.message--music-audio,
.message.message--music-audio.own {
    max-width: 100% !important;
}

.message.message--music-audio .message-content,
.message.message--music-audio.own .message-content {
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    border: none !important;
    padding: 6px 7px 4px !important;
    border-radius: var(--xam-message-radius, 18px) !important;
    background: #1F1F1F !important;
}

.message.message--music-audio.own .message-content {
    background: transparent !important;
    padding: 0 !important;
}

.message.message--music-audio .message-bubble-body {
    align-self: stretch;
    width: 100%;
}

.message.message--music-audio .message-time,
.message.message--music-audio.own .message-time {
    margin-top: 2px;
    margin-left: auto;
    margin-right: 6px;
    transform: none;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 11px;
}

.message.message--music-audio.own .message-time {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Входящие: серая пилюля внутри серого пузыря */
.message.message--music-audio:not(.own) .message-media-audio {
    background: #2d2d31;
    color: #ffffff;
}

.message.message--music-audio:not(.own) .music-play-btn {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.message.message--music-audio:not(.own) .music-play-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.message.message--music-audio:not(.own) .music-audio-author,
.message.message--music-audio:not(.own) .music-audio-title {
    color: rgba(255, 255, 255, 0.82);
}

/* Свои: фиолетовая пилюля */
.message.message--music-audio.own .message-media-audio {
    background: #9661F1;
}

.message.message--music-audio.own .music-play-btn {
    background: #f2f2f5;
    color: #885ce7;
}

.message.message--music-audio.own .music-play-btn:hover {
    background: #ffffff;
}

.audio-filename {
    color: var(--gray-text);
    font-size: 12px;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .message-media-audio--music {
        width: fit-content;
        max-width: min(286px, calc(100vw - 72px));
        min-height: 62px;
        padding: 6px 9px;
        gap: 8px;
    }

    .music-audio-meta {
        max-width: 190px;
    }

    .music-play-btn {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }

    .music-audio-time {
        font-size: 14px;
    }

    .music-audio-author,
    .music-audio-title {
        font-size: 10px;
    }

    .message.message--music-audio .message-time,
    .message.message--music-audio.own .message-time {
        margin-top: 2px;
        transform: none;
    }
}

@media (min-width: 769px) {
    .xam-desktop-music-player {
        --xam-music-c1: #8f63ea;
        --xam-music-c2: #6a8dff;
        --xam-music-c3: #6fe8ff;
        --xam-dmp-seek-fill: 0%;
        --xam-flow-audio-s: 1;
        --xam-flow-audio-o: 0.86;
        --xam-flow-audio-b: 70px;
        --xam-flow-audio-b1: 1;
        --xam-flow-audio-b2: 1;
        --xam-flow-audio-b3: 1;
        --xam-flow-hue: 0deg;
        --xam-flow-burst-live: 0;
        --xam-flow-burst-s: 1;
        --xam-flow-burst-o: 0;
        --xam-flow-burst-x: 0vw;
        --xam-flow-burst-y: 0vh;
        --xam-flow-speed-ms: 2400ms;
        position: fixed;
        inset: 0;
        transform: translate3d(0, 100%, 0);
        opacity: 0;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        padding: 0;
        background: #141418;
        border: none;
        box-shadow: none;
        z-index: 11500;
        transition: transform 420ms cubic-bezier(0.18, 0.86, 0.2, 1), opacity 360ms ease;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding-bottom: 220px;
        will-change: transform, opacity;
        isolation: isolate;
        contain: paint;
    }

    .xam-desktop-music-player::before {
        content: '';
        position: absolute;
        inset: -20%;
        z-index: 0;
        pointer-events: none;
        background:
            linear-gradient(135deg, #18131c 0%, #141418 52%, #15151b 100%);
        filter: none;
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.06);
    }

    .xam-dmp__flow {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(72vw, 980px);
        height: min(64vh, 760px);
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
        opacity: 0;
        filter: blur(var(--xam-flow-audio-b)) saturate(150%);
        transition:
            opacity 260ms ease,
            transform var(--xam-flow-speed-ms) cubic-bezier(0.22, 0.78, 0.18, 1),
            filter 300ms ease;
        will-change: transform, opacity;
        mix-blend-mode: screen;
        transform-origin: center center;
        z-index: 0;
    }

    .xam-dmp__flow--1 {
        background: radial-gradient(circle at 50% 50%, var(--xam-music-c1) 0%, transparent 72%);
        transform: translate(var(--xam-flow-1-x, 0vw), var(--xam-flow-1-y, 0vh))
            scale(calc(var(--xam-flow-1-s, 1) * var(--xam-flow-audio-s) * var(--xam-flow-audio-b1)));
    }

    .xam-dmp__flow--2 {
        background: radial-gradient(circle at 50% 50%, var(--xam-music-c2) 0%, transparent 72%);
        transform: translate(var(--xam-flow-2-x, 0vw), var(--xam-flow-2-y, 0vh))
            scale(calc(var(--xam-flow-2-s, 1) * var(--xam-flow-audio-s) * var(--xam-flow-audio-b2)));
    }

    .xam-dmp__flow--3 {
        background: radial-gradient(circle at 50% 50%, var(--xam-music-c3) 0%, transparent 72%);
        transform: translate(var(--xam-flow-3-x, 0vw), var(--xam-flow-3-y, 0vh))
            scale(calc(var(--xam-flow-3-s, 1) * var(--xam-flow-audio-s) * var(--xam-flow-audio-b3)));
    }

    .xam-desktop-music-player.is-playing .xam-dmp__flow {
        opacity: var(--xam-flow-audio-o);
        filter: blur(var(--xam-flow-audio-b)) saturate(165%) hue-rotate(var(--xam-flow-hue));
    }

    .xam-desktop-music-player::after {
        content: '';
        position: absolute;
        inset: -35%;
        z-index: 0;
        pointer-events: none;
        opacity: var(--xam-flow-burst-o);
        background:
            radial-gradient(34% 24% at 50% 50%, var(--xam-music-c1) 0%, transparent 76%),
            radial-gradient(28% 20% at 50% 50%, var(--xam-music-c2) 0%, transparent 78%);
        filter: blur(calc(var(--xam-flow-audio-b) * 0.65)) saturate(190%) hue-rotate(var(--xam-flow-hue));
        transform: translate(var(--xam-flow-burst-x), var(--xam-flow-burst-y))
            scale(calc(var(--xam-flow-burst-s) + var(--xam-flow-burst-live) * 0.14));
        transition: opacity 240ms ease, transform 520ms ease, filter 460ms ease;
    }

    .xam-desktop-music-player.hidden {
        display: none !important;
    }

    .xam-desktop-music-player.is-visible {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    .xam-dmp__collapse {
        position: absolute;
        left: 16px;
        top: 28px;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.9);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 12;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .xam-dmp__collapse svg {
        width: 22px;
        height: 22px;
    }

    .xam-dmp__inner {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding-top: 0;
        width: min(700px, calc(100vw - 48px));
        margin-bottom: 28px;
        isolation: isolate;
        transform: translateZ(0);
        backface-visibility: hidden;
        contain: layout;
    }

    .xam-dmp__art-wrap {
        width: clamp(176px, 24vh, 236px);
        height: clamp(176px, 24vh, 236px);
        border-radius: 34px;
        position: relative;
        display: grid;
        place-items: center;
        overflow: visible;
        margin-top: -22px;
        transform: translateY(clamp(-82px, -10vh, -48px));
    }

    .xam-dmp__glow {
        position: absolute;
        inset: -40px;
        border-radius: 64px;
        background:
            radial-gradient(170px 170px at 30% 25%, var(--xam-music-c1), transparent 70%),
            radial-gradient(170px 170px at 75% 35%, var(--xam-music-c2), transparent 72%),
            radial-gradient(170px 170px at 50% 80%, var(--xam-music-c3), transparent 70%);
        filter: blur(34px) saturate(138%);
        opacity: 0;
        transition: opacity 220ms ease;
        pointer-events: none;
        display: none;
    }

    .xam-desktop-music-player.is-playing .xam-dmp__glow {
        opacity: 0;
        animation: none;
    }

    .xam-dmp__art,
    .xam-dmp__art-fallback {
        width: clamp(176px, 24vh, 236px);
        height: clamp(176px, 24vh, 236px);
        border-radius: 28px;
        position: relative;
        z-index: 1;
    }

    .xam-dmp__art {
        object-fit: cover;
        display: block;
    }

    .xam-dmp__art.hidden {
        display: none !important;
    }

    .xam-dmp__art-fallback {
        background: var(--xam-dmp-fallback-avatar-bg, #4a3c82);
        color: rgba(255, 255, 255, 0.96);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .xam-dmp__art-fallback.hidden {
        display: none !important;
    }

    .xam-dmp__title {
        max-width: 92%;
        color: rgba(255, 255, 255, 0.94);
        font-size: clamp(22px, 2.4vw, 27px);
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 40px;
        margin-bottom: 14px;
        text-shadow: none;
        position: relative;
        z-index: 12;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .xam-dmp__progress-row {
        width: min(480px, 86%);
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 8px;
        margin-top: 20px;
        position: relative;
        z-index: 12;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .xam-dmp__time {
        color: rgba(255, 255, 255, 0.82);
        font-size: clamp(15px, 1.55vw, 18px);
        font-weight: 600;
        min-width: 2.8em;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    }

    .xam-dmp__seek {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 11px;
        border-radius: 999px;
        background: linear-gradient(
            to right,
            #fff21f 0%,
            #fff21f var(--xam-dmp-seek-fill),
            #ffffff var(--xam-dmp-seek-fill),
            #ffffff 100%
        );
        outline: none;
        border: none;
        box-shadow: none;
    }

    .xam-dmp__seek::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #ffffff;
        border: none;
    }

    .xam-dmp__seek::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #ffffff;
        border: none;
    }

    .xam-dmp__controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin-top: 34px;
        position: relative;
        z-index: 12;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .xam-dmp__repeat {
        width: clamp(56px, 6.2vw, 64px);
        height: clamp(56px, 6.2vw, 64px);
        border: none;
        border-radius: 50%;
        background: #7c7c82;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 180ms ease, color 180ms ease;
    }

    .xam-dmp__repeat.is-active {
        background: #fff21f;
        color: #19191b;
    }

    .xam-dmp__speed {
        width: clamp(56px, 6.2vw, 64px);
        height: clamp(56px, 6.2vw, 64px);
        border: none;
        border-radius: 50%;
        background: #7c7c82;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 180ms ease, color 180ms ease;
    }

    .xam-dmp__speed.is-active {
        background: #fff21f;
        color: #19191b;
    }

    .xam-dmp__speed-label {
        font-size: clamp(18px, 1.85vw, 21px);
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .xam-dmp__speed-popover {
        position: absolute;
        right: 0;
        top: 0;
        transform: translate3d(0, calc(-100% - 14px), 0) scale(0.97);
        min-width: 126px;
        padding: 10px;
        border-radius: 16px;
        background: #292929;
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.36);
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
        gap: 7px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease, transform 250ms ease;
        z-index: 16;
    }

    .xam-desktop-music-player.xam-dmp-speed-open-desktop .xam-dmp__speed-popover {
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(0, calc(-100% - 14px), 0) scale(1);
    }

    .xam-dmp__speed-option {
        border: none;
        border-radius: 999px;
        background: #1f2025;
        color: rgba(255, 255, 255, 0.94);
        font-size: clamp(15px, 1.35vw, 21px);
        font-weight: 700;
        line-height: 1;
        padding: 10px 14px;
        min-width: 0;
        cursor: pointer;
        transition: background 170ms ease, color 170ms ease;
    }

    .xam-dmp__speed-option.is-active {
        background: #fff21f;
        color: #141418;
    }

    .xam-dmp__speed-sheet-backdrop,
    .xam-dmp__speed-sheet {
        display: none;
    }

    .xam-dmp__play {
        width: clamp(120px, 15vw, 146px);
        height: clamp(56px, 8vh, 66px);
        border: none;
        border-radius: 999px;
        background: #7c7c82;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 180ms ease;
        margin-top: 0;
        position: relative;
        z-index: 12;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .xam-desktop-music-player.is-playing .xam-dmp__play {
        background: #fff21f;
        color: #19191b;
    }

    .xam-dmp__play-ico.hidden,
    .xam-dmp__pause-ico.hidden {
        display: none !important;
    }

    .xam-dmp__play svg {
        width: clamp(26px, 3vw, 32px);
        height: clamp(26px, 3vw, 32px);
    }

    .xam-dmp__repeat svg {
        width: clamp(24px, 2.4vw, 28px);
        height: clamp(24px, 2.4vw, 28px);
    }

    @keyframes xam-dmp-glow-move {
        0% {
            transform: translate3d(-2px, 1px, 0) scale(1);
            filter: blur(17px) saturate(120%);
        }
        100% {
            transform: translate3d(3px, -2px, 0) scale(1.06);
            filter: blur(21px) saturate(130%);
        }
    }
}

@media (max-width: 768px) {
    .xam-desktop-music-player {
        --xam-music-c1: #8f63ea;
        --xam-music-c2: #6a8dff;
        --xam-music-c3: #6fe8ff;
        --xam-dmp-seek-fill: 0%;
        --xam-flow-audio-s: 1;
        --xam-flow-audio-o: 0.84;
        --xam-flow-audio-b: 58px;
        --xam-flow-audio-b1: 1;
        --xam-flow-audio-b2: 1;
        --xam-flow-audio-b3: 1;
        --xam-flow-hue: 0deg;
        --xam-flow-burst-live: 0;
        --xam-flow-burst-s: 1;
        --xam-flow-burst-o: 0;
        --xam-flow-burst-x: 0vw;
        --xam-flow-burst-y: 0vh;
        --xam-flow-speed-ms: 2200ms;
        position: fixed;
        inset: 0;
        transform: translate3d(0, 100%, 0);
        opacity: 0;
        width: 100vw;
        height: 100vh;
        background: #141418;
        border: none;
        z-index: 11500;
        transition: transform 420ms cubic-bezier(0.18, 0.86, 0.2, 1), opacity 360ms ease;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
        will-change: transform, opacity;
        isolation: isolate;
        contain: paint;
    }

    .xam-desktop-music-player.hidden { display: none !important; }
    .xam-desktop-music-player.is-visible { transform: translate3d(0, 0, 0); opacity: 1; }

    .xam-desktop-music-player::before {
        content: '';
        position: absolute;
        inset: -20%;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(135deg, #18131c 0%, #141418 52%, #15151b 100%);
        opacity: 1;
    }

    .xam-dmp__flow {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(96vw, 760px);
        height: min(76vh, 620px);
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
        opacity: 0;
        filter: blur(var(--xam-flow-audio-b)) saturate(150%);
        transition: opacity 220ms ease, transform var(--xam-flow-speed-ms) cubic-bezier(0.22, 0.78, 0.18, 1), filter 260ms ease;
        will-change: transform, opacity;
        mix-blend-mode: screen;
        transform-origin: center center;
        z-index: 0;
    }

    .xam-dmp__flow--1 { background: radial-gradient(circle at 50% 50%, var(--xam-music-c1) 0%, transparent 72%); transform: translate(var(--xam-flow-1-x, 0vw), var(--xam-flow-1-y, 0vh)) scale(calc(var(--xam-flow-1-s, 1) * var(--xam-flow-audio-s) * var(--xam-flow-audio-b1))); }
    .xam-dmp__flow--2 { background: radial-gradient(circle at 50% 50%, var(--xam-music-c2) 0%, transparent 72%); transform: translate(var(--xam-flow-2-x, 0vw), var(--xam-flow-2-y, 0vh)) scale(calc(var(--xam-flow-2-s, 1) * var(--xam-flow-audio-s) * var(--xam-flow-audio-b2))); }
    .xam-dmp__flow--3 { background: radial-gradient(circle at 50% 50%, var(--xam-music-c3) 0%, transparent 72%); transform: translate(var(--xam-flow-3-x, 0vw), var(--xam-flow-3-y, 0vh)) scale(calc(var(--xam-flow-3-s, 1) * var(--xam-flow-audio-s) * var(--xam-flow-audio-b3))); }
    .xam-desktop-music-player.is-playing .xam-dmp__flow { opacity: var(--xam-flow-audio-o); filter: blur(var(--xam-flow-audio-b)) saturate(160%) hue-rotate(var(--xam-flow-hue)); }

    .xam-desktop-music-player::after {
        content: '';
        position: absolute;
        inset: -35%;
        z-index: 0;
        pointer-events: none;
        opacity: var(--xam-flow-burst-o);
        background: radial-gradient(34% 24% at 50% 50%, var(--xam-music-c1) 0%, transparent 76%), radial-gradient(28% 20% at 50% 50%, var(--xam-music-c2) 0%, transparent 78%);
        filter: blur(calc(var(--xam-flow-audio-b) * 0.65)) saturate(185%) hue-rotate(var(--xam-flow-hue));
        transform: translate(var(--xam-flow-burst-x), var(--xam-flow-burst-y)) scale(calc(var(--xam-flow-burst-s) + var(--xam-flow-burst-live) * 0.12));
        transition: opacity 240ms ease, transform 520ms ease, filter 460ms ease;
    }

    .xam-dmp__collapse {
        position: absolute;
        left: 14px;
        top: 24px;
        width: 46px;
        height: 46px;
        border: none;
        border-radius: 14px;
        background: rgba(255,255,255,0.06);
        color: rgba(255,255,255,0.9);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 12;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .xam-dmp__collapse svg { width: 22px; height: 22px; }

    .xam-dmp__inner {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: min(92vw, 430px);
        margin-bottom: 10px;
        isolation: isolate;
        transform: translateZ(0);
        backface-visibility: hidden;
        contain: layout;
    }

    .xam-dmp__art-wrap {
        width: clamp(128px, 22vh, 178px);
        height: clamp(128px, 22vh, 178px);
        border-radius: 26px;
        position: relative;
        display: grid;
        place-items: center;
        overflow: visible;
        margin-top: -6px;
        transform: translateY(clamp(-50px, -8vh, -24px));
    }

    .xam-dmp__glow { display: none; opacity: 0; }
    .xam-desktop-music-player.is-playing .xam-dmp__glow { opacity: 0; animation: none; }

    .xam-dmp__art,
    .xam-dmp__art-fallback {
        width: clamp(128px, 22vh, 178px);
        height: clamp(128px, 22vh, 178px);
        border-radius: 22px;
        position: relative;
        z-index: 1;
    }

    .xam-dmp__art { object-fit: cover; display: block; }
    .xam-dmp__art.hidden { display: none !important; }
    .xam-dmp__art-fallback { background: var(--xam-dmp-fallback-avatar-bg, #4a3c82); color: rgba(255, 255, 255, 0.96); display: flex; align-items: center; justify-content: center; }
    .xam-dmp__art-fallback.hidden { display: none !important; }

    .xam-dmp__title {
        max-width: 95%;
        color: rgba(255, 255, 255, 0.95);
        font-size: clamp(18px, 4.8vw, 24px);
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 14px;
        margin-bottom: 10px;
        text-shadow: none;
        position: relative;
        z-index: 12;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .xam-dmp__progress-row {
        width: min(86vw, 340px);
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 8px;
        margin-top: 6px;
        position: relative;
        z-index: 12;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .xam-dmp__controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 18px;
        position: relative;
        z-index: 12;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
    .xam-dmp__repeat {
        width: clamp(42px, 12vw, 50px);
        height: clamp(42px, 12vw, 50px);
        border: none;
        border-radius: 50%;
        background: #7c7c82;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 180ms ease, color 180ms ease;
    }
    .xam-dmp__repeat.is-active { background: #fff21f; color: #19191b; }
    .xam-dmp__speed {
        width: clamp(42px, 12vw, 50px);
        height: clamp(42px, 12vw, 50px);
        border: none;
        border-radius: 50%;
        background: #7c7c82;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 180ms ease, color 180ms ease;
    }
    .xam-dmp__speed.is-active { background: #fff21f; color: #19191b; }
    .xam-dmp__speed-label { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
    .xam-dmp__speed-popover { display: none; }
    .xam-dmp__speed-sheet-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        border: 0;
        margin: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.34);
        opacity: 0;
        pointer-events: none;
        transition: opacity 230ms ease;
        z-index: 28;
    }
    .xam-dmp__speed-sheet {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        padding: 12px;
        border-radius: 20px;
        background: rgba(44, 45, 50, 0.98);
        box-shadow: 0 -12px 38px rgba(0, 0, 0, 0.36);
        transform: translate3d(0, 115%, 0);
        opacity: 0;
        pointer-events: none;
        transition: transform 300ms cubic-bezier(0.22, 0.78, 0.18, 1), opacity 220ms ease;
        z-index: 30;
    }
    .xam-desktop-music-player.xam-dmp-speed-open-mobile .xam-dmp__speed-sheet-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    .xam-desktop-music-player.xam-dmp-speed-open-mobile .xam-dmp__speed-sheet {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        pointer-events: auto;
    }
    .xam-desktop-music-player.xam-dmp-speed-immediate .xam-dmp__speed-sheet,
    .xam-desktop-music-player.xam-dmp-speed-immediate .xam-dmp__speed-sheet-backdrop {
        transition-duration: 0ms !important;
    }
    .xam-dmp__speed-sheet .xam-dmp__speed-option {
        border: none;
        border-radius: 999px;
        background: #1f2025;
        color: rgba(255, 255, 255, 0.96);
        font-size: clamp(15px, 5vw, 31px);
        font-weight: 700;
        line-height: 1;
        padding: 11px 14px;
    }
    .xam-dmp__speed-sheet .xam-dmp__speed-option.is-active {
        background: #fff21f;
        color: #141418;
    }
    .xam-dmp__speed-sheet-close {
        margin-top: 8px;
        border: none;
        border-radius: 999px;
        background: #fff21f;
        color: #141418;
        font-size: clamp(16px, 5vw, 31px);
        font-weight: 700;
        line-height: 1.1;
        padding: 12px 14px;
    }
    .xam-dmp__time { color: rgba(255,255,255,0.84); font-size: clamp(12px, 3.1vw, 15px); font-weight: 600; min-width: 2.8em; }
    .xam-dmp__time { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }

    .xam-dmp__seek {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 8px;
        border-radius: 999px;
        background: linear-gradient(to right, #fff21f 0%, #fff21f var(--xam-dmp-seek-fill), #ffffff var(--xam-dmp-seek-fill), #ffffff 100%);
        outline: none;
        border: none;
        box-shadow: none;
    }

    .xam-dmp__seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; border: none; }
    .xam-dmp__seek::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #ffffff; border: none; }

    .xam-dmp__play {
        width: clamp(104px, 30vw, 132px);
        height: clamp(46px, 12vw, 58px);
        border: none;
        border-radius: 999px;
        background: #7c7c82;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 180ms ease;
        margin-top: 0;
        position: relative;
        z-index: 12;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
    .xam-desktop-music-player.is-playing .xam-dmp__play { background: #fff21f; color: #19191b; }
    .xam-dmp__play-ico.hidden, .xam-dmp__pause-ico.hidden { display: none !important; }
    .xam-dmp__play svg { width: 26px; height: 26px; }
    .xam-dmp__repeat svg { width: 20px; height: 20px; }
}

.message-media-file {
    padding: 12px;
    background: var(--bg-gray-1);
    border: 1px solid var(--gray-border);
    border-radius: 12px;
    max-width: 400px;
    position: relative;
}

/* Индикатор прогресса загрузки */
.upload-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-ring-circle {
    transition: stroke-dashoffset 0.1s linear;
}

.progress-circle {
    transition: stroke-dashoffset 0.1s linear;
    stroke-linecap: round;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.upload-error {
    margin-top: 8px;
    padding: 8px;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 8px;
    color: #ff4444;
    font-size: 12px;
    text-align: center;
}

.file-download-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-white);
    text-decoration: none;
    transition: color 0.3s;
}

.file-download-link:hover {
    color: var(--white-hover);
}

.file-download-link svg {
    flex-shrink: 0;
}

.file-download-link span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-size {
    color: var(--gray-text);
    font-size: 12px;
    margin-left: auto;
}

.media-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: pointer;
}

.media-viewer-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-viewer-content img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.media-viewer-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: var(--bg-gray-2);
    /* border: 1px solid var(--white-border); */
    color: var(--text-white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    transition: all 0.3s;
}

.media-viewer-close:hover {
    background: var(--white-border);
    color: var(--bg-black);
}

/* Плавное открытие фото от места клика к центру по прямой (ПК) */
@media (min-width: 769px) {
    .media-viewer-image-wrap {
        position: fixed;
        z-index: 10001;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        transition: left 0.35s linear,
                    top 0.35s linear,
                    width 0.35s linear,
                    height 0.35s linear,
                    transform 0.35s linear;
    }
    .media-viewer-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
    .media-viewer-image-wrap--open {
        left: 50% !important;
        top: 50% !important;
        width: 85vw !important;
        height: 85vh !important;
        max-width: 90vw;
        max-height: 90vh;
        transform: translate(-50%, -50%);
    }
    .media-viewer-modal--expand .media-viewer-close {
        z-index: 10002;
    }
}

/* ===== Унифицированный просмотр фото/видео (ПК + мобилка) ===== */
.xam-media-view {
    position: fixed;
    inset: 0;
    z-index: 10050;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.xam-media-view__backdrop {
    position: absolute;
    inset: 0;
    background: #000;
    cursor: pointer;
}

.xam-media-view__layer {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

.xam-media-view__layer > * {
    pointer-events: auto;
}

.xam-media-view__gallery-counter {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 12050;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.46);
    color: rgba(255, 255, 255, 0.96);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
    white-space: nowrap;
}

.xam-media-view__gallery-counter.hidden {
    display: none !important;
}

.xam-media-view--open .xam-media-view__gallery-counter:not(.hidden) {
    opacity: 1;
}

.xam-media-view--carousel .xam-media-view__gallery-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.xam-media-view--carousel .xam-media-view__gallery-track {
    display: flex;
    height: 100%;
    will-change: transform;
    touch-action: pan-y;
}

.xam-media-view--carousel .xam-media-view__gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.xam-media-view--carousel .xam-media-view__gallery-slide .xam-media-view__img-shell,
.xam-media-view--carousel .xam-media-view__gallery-slide .xam-media-view__img-stage {
    width: 100%;
    height: 100%;
}

.xam-media-view--carousel .xam-media-view__dock-row--image,
.xam-media-view--carousel .xam-media-view__dock-row--video-mobile-pills {
    display: none !important;
}

.xam-media-view--carousel.xam-media-view--active-slide-image .xam-media-view__dock-row--image {
    display: flex !important;
}

.xam-media-view--carousel.xam-media-view--active-slide-video .xam-media-view__dock-row--video-mobile-pills {
    display: flex !important;
}

.xam-media-view--mobile.xam-media-view--gallery-drag .xam-media-view__fly {
    opacity: 1 !important;
}

.xam-media-view__x {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(30, 30, 30, 0.85);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.xam-media-view__stage {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 12px 12px;
    box-sizing: border-box;
}

.xam-media-view__img-shell {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 100%;
    min-height: 0;
    gap: 10px;
}

.xam-media-view__img-stage {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.xam-media-view__zoom-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(30, 30, 30, 0.88);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.xam-media-view__zoom-btn:hover {
    background: rgba(50, 50, 50, 0.95);
}

.xam-media-view__dock-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.xam-media-view__goto-xam {
    font-family: 'Akony', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    display: inline-block;
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.07);
}

.xam-media-view__goto-xam:hover {
    background: rgba(255, 255, 255, 0.14);
}

.xam-media-view__video,
.xam-media-view__image {
    max-width: 100%;
    max-height: calc(100dvh - 200px);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
    background: #000;
}

.xam-media-view__video {
    width: auto;
    height: auto;
    max-height: calc(100dvh - 200px);
}

.xam-media-view__dock {
    position: relative;
    z-index: 5;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

.xam-media-view__dock-card {
    width: 100%;
    max-width: 720px;
    background: rgba(22, 22, 22, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 14px 16px 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.xam-media-view__seek {
    width: 100%;
    margin: 0 0 10px;
    accent-color: #fff;
    cursor: pointer;
}

.xam-media-view__dock-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.xam-media-view__dock-row--video-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.xam-media-view__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #1f1f1f;
    border: none;
    box-shadow: none;
}

.xam-media-view__pill-btn {
    min-width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 19px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.xam-media-view__pill-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.xam-media-view__pill--meta {
    gap: 6px;
    padding-left: 12px;
    padding-right: 10px;
}

.xam-media-view__time--elapsed {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    min-width: 64px;
    text-align: center;
}

.xam-media-view__dock-row--video .xam-media-view__time {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
    min-width: 7em;
}

.xam-media-view__center-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.xam-media-view__dock-row--video-minimal {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    padding-top: 2px;
}

.xam-media-view__speed {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 6px 8px;
    font-size: 13px;
}

.xam-media-view__btn {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.xam-media-view__btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.xam-media-view__pill .xam-media-view__btn {
    min-width: 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    font-size: 19px;
    line-height: 1;
}

.xam-media-view__pill .xam-media-view__btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    display: block;
}

.xam-media-view__pill .xam-media-view__btn--play .xam-media-view__play-ico,
.xam-media-view__pill .xam-media-view__btn--play .xam-media-view__pause-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.xam-media-view__pill .xam-media-view__btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.xam-media-view__pill--files-compact {
    gap: 16px;
    padding: 10px 18px;
}

.xam-media-view__pill--files-compact .xam-media-view__btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
    background: transparent;
}

.xam-media-view__pill--files-compact .xam-media-view__btn svg {
    width: 30px;
    height: 30px;
    stroke-width: 2.6;
}

.xam-media-view__pill--files-compact .xam-media-view__btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.xam-media-view__pill .xam-media-view__btn--speed {
    width: 42px;
    min-width: 42px;
    border-radius: 50%;
    padding: 0;
    font-size: 0;
    font-weight: 700;
}

.xam-media-view__vol-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.xam-media-view__vol-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.xam-media-view__vol-pop {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 16px);
    transform: translateX(-50%) translateY(6px);
    width: 46px;
    height: 170px;
    border-radius: 999px;
    background: #1f1f1f;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.36);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}

.xam-media-view__vol-pop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.xam-media-view__speed-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.xam-media-view__speed-pop {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 16px);
    transform: translateX(-50%) translateY(6px);
    width: 164px;
    padding: 10px;
    border-radius: 28px;
    background: #1f1f1f;
    border: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 12;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}

.xam-media-view__speed-pop.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.xam-media-view__speed-pop:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.xam-media-view__speed-item {
    width: 100%;
    border: none;
    border-radius: 999px;
    background: #000000;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    padding: 10px 12px;
    cursor: pointer;
}

.xam-media-view__speed-item:hover,
.xam-media-view__speed-item.is-active {
    background: #0b0b0b;
}

.xam-media-view__vol-range {
    -webkit-appearance: none;
    appearance: none;
    width: 124px;
    height: 8px;
    transform: rotate(-90deg);
    border-radius: 999px;
    --vol-fill: 100%;
    background: linear-gradient(to right, #ffffff 0%, #ffffff var(--vol-fill), #000000 var(--vol-fill), #000000 100%);
    outline: none;
}

.xam-media-view__vol-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    box-shadow: none;
    cursor: pointer;
}

.xam-media-view__vol-range::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, #ffffff 0%, #ffffff var(--vol-fill), #000000 var(--vol-fill), #000000 100%);
}

.xam-media-view__vol-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    cursor: pointer;
}

body.theme-light .xam-media-view__pill .xam-media-view__btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 769px) {
    .xam-media-view--desktop .xam-media-view__backdrop {
        opacity: 0;
        transition: opacity 0.38s ease;
    }

    .xam-media-view--desktop.xam-media-view--open .xam-media-view__backdrop {
        opacity: 1;
    }

    .xam-media-view--desktop.xam-media-view--closing .xam-media-view__backdrop {
        opacity: 0;
        transition-duration: 0.3s;
    }

    .xam-media-view--desktop .xam-media-view__x {
        opacity: 0;
        transform: scale(0.88);
        transition: opacity 0.28s ease 0.1s, transform 0.28s cubic-bezier(0.33, 1, 0.68, 1) 0.1s;
    }

    .xam-media-view--desktop.xam-media-view--open .xam-media-view__x {
        opacity: 1;
        transform: scale(1);
    }

    .xam-media-view--desktop.xam-media-view--closing .xam-media-view__x {
        opacity: 0;
        transform: scale(0.88);
        transition-delay: 0s;
    }

    .xam-media-view--desktop .xam-media-view__fly {
        position: fixed;
        z-index: 3;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
        transition:
            left 0.42s cubic-bezier(0.33, 1, 0.68, 1),
            top 0.42s cubic-bezier(0.33, 1, 0.68, 1),
            width 0.42s cubic-bezier(0.33, 1, 0.68, 1),
            height 0.42s cubic-bezier(0.33, 1, 0.68, 1),
            border-radius 0.42s cubic-bezier(0.33, 1, 0.68, 1);
        will-change: left, top, width, height;
    }

    .xam-media-view--desktop.xam-media-view--closing .xam-media-view__fly {
        transition-duration: 0.36s;
    }

    .xam-media-view--desktop .xam-media-view__fly-inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .xam-media-view--desktop .xam-media-view__fly-inner .xam-media-view__img-shell {
        width: 100%;
        height: 100%;
        max-height: 100%;
        gap: 0;
    }

    .xam-media-view--desktop .xam-media-view__fly-inner .xam-media-view__img-stage {
        flex: 1;
        min-width: 0;
        min-height: 0;
    }

    .xam-media-view--desktop .xam-media-view__fly-inner .xam-media-view__image,
    .xam-media-view--desktop .xam-media-view__fly-inner .xam-media-view__video {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 0;
        box-shadow: none;
    }

    .xam-media-view--desktop.xam-media-view--entering .xam-media-view__zoom-btn {
        opacity: 0;
        pointer-events: none;
    }

    .xam-media-view--desktop.xam-media-view--open .xam-media-view__zoom-btn {
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.24s ease 0.14s;
    }

    .xam-media-view--desktop .xam-media-view__stage {
        padding: 0;
        pointer-events: none;
        flex: 0 0 auto;
        min-height: 0;
    }

    .xam-media-view--desktop .xam-media-view__fly,
    .xam-media-view--desktop .xam-media-view__fly-inner {
        pointer-events: auto;
    }

    .xam-media-view--desktop .xam-media-view__dock {
        transform: translateY(calc(100% + 32px));
        opacity: 0;
        transition:
            transform 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.1s,
            opacity 0.32s ease 0.1s;
    }

    .xam-media-view--desktop.xam-media-view--open .xam-media-view__dock {
        transform: translateY(0);
        opacity: 1;
    }

    .xam-media-view--desktop.xam-media-view--closing .xam-media-view__dock {
        transform: translateY(calc(100% + 32px));
        opacity: 0;
        transition-delay: 0s;
        transition-duration: 0.28s;
    }

    .xam-media-view--desktop .xam-media-view__dock-card {
        width: auto;
        max-width: none;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 0;
        padding: 0;
    }

    /* Просмотр аватарки из профиля: плавное появление из затемнения */
    .xam-media-view--desktop.xam-media-view--avatar-fade .xam-media-view__fly {
        transition: none;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    }

    .xam-media-view--desktop.xam-media-view--avatar-fade .xam-media-view__fly-inner {
        opacity: 0;
        transform: scale(0.92);
        transition:
            opacity 0.42s ease,
            transform 0.42s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .xam-media-view--desktop.xam-media-view--avatar-fade.xam-media-view--open .xam-media-view__fly-inner {
        opacity: 1;
        transform: scale(1);
    }

    .xam-media-view--desktop.xam-media-view--avatar-fade.xam-media-view--closing .xam-media-view__fly-inner {
        opacity: 0;
        transform: scale(0.94);
        transition-duration: 0.32s;
    }

    .xam-media-view--desktop.xam-media-view--avatar-fade .xam-media-view__dock {
        display: none;
    }
}

@media (max-width: 768px) {
    .xam-media-view--mobile .xam-media-view__backdrop {
        opacity: 0;
        background: #000;
        transition: opacity 0.38s ease;
    }

    .xam-media-view--mobile.xam-media-view--open .xam-media-view__backdrop {
        opacity: 1;
    }

    .xam-media-view--mobile.xam-media-view--swipe-dismiss .xam-media-view__backdrop {
        transition: none !important;
    }

    .xam-media-view--mobile.xam-media-view--closing .xam-media-view__backdrop {
        opacity: 0;
        transition-duration: 0.3s;
    }

    .xam-media-view--mobile .xam-media-view__layer {
        justify-content: stretch;
    }

    .xam-media-view--mobile .xam-media-view__x {
        opacity: 0;
        transform: scale(0.88);
        transition: opacity 0.28s ease 0.1s, transform 0.28s cubic-bezier(0.33, 1, 0.68, 1) 0.1s;
    }

    .xam-media-view--mobile.xam-media-view--open .xam-media-view__x {
        opacity: 1;
        transform: scale(1);
    }

    .xam-media-view--mobile.xam-media-view--closing .xam-media-view__x {
        opacity: 0;
        transform: scale(0.88);
        transition-delay: 0s;
    }

    .xam-media-view--mobile .xam-media-view__fly {
        position: fixed;
        z-index: 3;
        overflow: hidden;
        border-radius: 0 !important;
        box-shadow: none;
        transition:
            left 0.42s cubic-bezier(0.33, 1, 0.68, 1),
            top 0.42s cubic-bezier(0.33, 1, 0.68, 1),
            width 0.42s cubic-bezier(0.33, 1, 0.68, 1),
            height 0.42s cubic-bezier(0.33, 1, 0.68, 1),
            opacity 0.22s ease;
        will-change: left, top, width, height, transform;
    }

    .xam-media-view--mobile.xam-media-view--open .xam-media-view__fly {
        border-radius: 0 !important;
        box-shadow: none;
    }

    .xam-media-view--mobile.xam-media-view--swipe-dismiss .xam-media-view__fly {
        transition: none !important;
    }

    .xam-media-view--mobile.xam-media-view--closing .xam-media-view__fly {
        transition-duration: 0.36s;
    }

    .xam-media-view--mobile .xam-media-view__fly-inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 !important;
    }

    .xam-media-view--mobile .xam-media-view__fly-inner .xam-media-view__img-shell {
        width: 100%;
        height: 100%;
        max-height: 100%;
        gap: 0;
        border-radius: 0 !important;
    }

    .xam-media-view--mobile .xam-media-view__fly-inner .xam-media-view__img-stage {
        flex: 1;
        min-width: 0;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 !important;
    }

    .xam-media-view--mobile .xam-media-view__fly-inner .xam-media-view__image,
    .xam-media-view--mobile .xam-media-view__fly-inner .xam-media-view__video {
        display: block;
        max-width: 100vw;
        max-height: 100dvh;
        width: auto;
        height: auto;
        object-fit: contain;
        object-position: center center;
        border-radius: 0 !important;
        box-shadow: none;
        background: transparent;
    }

    .xam-media-view--mobile .xam-media-view__stage {
        position: fixed;
        inset: 0;
        padding: 0;
        pointer-events: none;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .xam-media-view--mobile .xam-media-view__fly,
    .xam-media-view--mobile .xam-media-view__fly-inner {
        pointer-events: auto;
    }

    .xam-media-view--mobile .xam-media-view__dock {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 6;
        transform: translateY(calc(100% + 24px));
        opacity: 0;
        transition:
            transform 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.1s,
            opacity 0.32s ease 0.1s;
    }

    .xam-media-view--mobile.xam-media-view--swipe-dismiss .xam-media-view__dock,
    .xam-media-view--mobile.xam-media-view--swipe-dismiss .xam-media-view__x {
        transition: none !important;
    }

    .xam-media-view--mobile.xam-media-view--open .xam-media-view__dock {
        transform: translateY(0);
        opacity: 1;
    }

    .xam-media-view--mobile.xam-media-view--closing .xam-media-view__dock {
        transform: translateY(calc(100% + 24px));
        opacity: 0;
        transition-delay: 0s;
        transition-duration: 0.28s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xam-media-view .xam-media-view__fly,
    .xam-media-view .xam-media-view__backdrop,
    .xam-media-view .xam-media-view__x,
    .xam-media-view .xam-media-view__dock {
        transition: none !important;
    }
}

.xam-media-view--zoomed .xam-media-view__layer,
.xam-media-view--zoomed .xam-media-view__stage {
    overflow: hidden !important;
}

.xam-media-view--zoomed .xam-media-view__fly,
.xam-media-view--zoomed .xam-media-view__fly-inner,
.xam-media-view--zoomed .xam-media-view__img-shell,
.xam-media-view--zoomed .xam-media-view__img-stage {
    overflow: hidden !important;
}

/* Карусель: при зуме клипируем слайд и прячем соседей — иначе их край перекрывает увеличенную фотку */
.xam-media-view--zoomed.xam-media-view--carousel .xam-media-view__gallery-viewport,
.xam-media-view--zoomed.xam-media-view--carousel .xam-media-view__gallery-slide {
    overflow: hidden !important;
}

.xam-media-view--zoomed.xam-media-view--carousel .xam-media-view__gallery-slide.is-active {
    z-index: 2;
    position: relative;
}

.xam-media-view--zoomed.xam-media-view--carousel .xam-media-view__gallery-slide:not(.is-active) {
    visibility: hidden;
    pointer-events: none;
}

.xam-media-view--zoomed .xam-media-view__fly {
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 4;
}

.xam-media-view--zoomed .xam-media-view__image {
    max-width: none !important;
    max-height: none !important;
}

.xam-media-view__dock-row--image {
    justify-content: center;
    gap: 10px;
}

.xam-media-view__dock-row--image .xam-media-view__btn {
    min-width: 0;
}

.xam-media-view__dock-card:has(.xam-media-view__dock-row--image) {
    width: auto;
    max-width: none;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0;
}

body.theme-light .xam-media-view__pill {
    background: #1f1f1f;
    border: none;
    box-shadow: none;
}

body.theme-light .xam-media-view__vol-pop {
    background: #1f1f1f;
    border: none;
}

body.theme-light .xam-media-view__pill-btn {
    color: #ffffff;
}

body.theme-light .xam-media-view__pill-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.theme-light .xam-media-view__time--elapsed {
    color: rgba(255, 255, 255, 0.95);
}

.xam-media-view--mobile .xam-media-view__dock-card {
    max-width: none;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

.xam-media-view--mobile .xam-media-view__video,
.xam-media-view--mobile .xam-media-view__image {
    border-radius: 0 !important;
    box-shadow: none;
    max-width: 100vw;
    max-height: 100dvh;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center center;
    background: transparent;
    touch-action: none;
}

.xam-media-view--mobile .xam-media-view__image {
    will-change: transform;
}

.xam-media-view--mobile .xam-media-view__img-shell {
    gap: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 !important;
}

.xam-media-view--mobile .xam-media-view__zoom-btn {
    display: none !important;
}

.xam-media-view--mobile .xam-media-view__img-stage {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 !important;
}

.xam-media-view.xam-media-view--mobile:has(.xam-media-view__dock-row--video-minimal) .xam-media-view__video,
.xam-media-view.xam-media-view--mobile:has(.xam-media-view__dock-row--video-mobile-pills) .xam-media-view__video {
    max-height: 100dvh;
}

.xam-media-view--mobile .xam-media-view__pill--files-compact {
    padding: 9px 16px;
    gap: 14px;
}

.xam-media-view--mobile .xam-media-view__dock-row--video-minimal .xam-media-view__btn--play {
    min-width: 52px;
    min-height: 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    padding: 0;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.xam-media-view--mobile .xam-media-view__dock-card:has(.xam-media-view__dock-row--video-minimal),
.xam-media-view--mobile .xam-media-view__dock-card:has(.xam-media-view__dock-row--video-mobile-pills) {
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

.xam-media-view--mobile .xam-media-view__dock-card:has(.xam-media-view__dock-row--video-mobile-pills) {
    width: auto;
    max-width: none;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0;
}

.xam-media-view--mobile .xam-media-view__dock-card:has(.xam-media-view__dock-row--video-minimal) .xam-media-view__seek {
    margin-bottom: 6px;
}

.xam-media-view--mobile .xam-media-view__dock-row--video {
    flex-direction: column;
    align-items: stretch;
}

.xam-media-view--mobile .xam-media-view__center-btns {
    order: 2;
}

.xam-media-view--mobile .xam-media-view__dock-row--video-mobile-pills {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 6px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.xam-media-view--mobile .xam-media-view__pill--transport-mobile {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: space-between;
    padding: 8px 10px;
    gap: 4px;
}

.xam-media-view--mobile .xam-media-view__pill--transport-mobile .xam-media-view__btn {
    width: clamp(34px, 9vw, 40px);
    min-width: clamp(34px, 9vw, 40px);
    height: clamp(34px, 9vw, 40px);
    min-height: clamp(34px, 9vw, 40px);
    flex: 0 0 auto;
}

.xam-media-view--mobile .xam-media-view__pill--transport-mobile .xam-media-view__time--elapsed {
    min-width: clamp(56px, 20vw, 92px);
    font-size: clamp(14px, 5vw, 18px);
    text-align: center;
}

@media (max-width: 768px) {
    .xam-media-view--mobile .xam-media-view__btn--rew,
    .xam-media-view--mobile .xam-media-view__btn--ff {
        flex: 1;
    }
    .xam-media-view--mobile .xam-media-view__btn--play {
        flex: 1.2;
        min-height: 48px;
        font-size: 18px;
    }
    .xam-media-view--mobile .xam-media-view__pill--transport-mobile .xam-media-view__btn--rew,
    .xam-media-view--mobile .xam-media-view__pill--transport-mobile .xam-media-view__btn--ff,
    .xam-media-view--mobile .xam-media-view__pill--transport-mobile .xam-media-view__btn--play {
        flex: 0 0 auto;
    }
    .xam-media-view--mobile .xam-media-view__pill--transport-mobile .xam-media-view__btn--play {
        min-height: clamp(34px, 9vw, 40px);
        font-size: 0;
    }
}

@media (max-width: 420px) {
    .xam-media-view--mobile .xam-media-view__dock-row--video-mobile-pills {
        padding: 0 4px;
        gap: 6px;
    }
    .xam-media-view--mobile .xam-media-view__pill--files-compact {
        padding: 7px 10px;
        gap: 8px;
    }
    .xam-media-view--mobile .xam-media-view__pill--files-compact .xam-media-view__btn {
        width: 30px;
        min-width: 30px;
        height: 30px;
    }
    .xam-media-view--mobile .xam-media-view__pill--files-compact .xam-media-view__btn svg {
        width: 24px;
        height: 24px;
    }
    .xam-media-view--mobile .xam-media-view__pill--transport-mobile {
        padding: 7px 8px;
        gap: 2px;
    }
}

@media (max-width: 360px) {
    .xam-media-view--mobile .xam-media-view__pill--transport-mobile .xam-media-view__time--elapsed {
        min-width: 50px;
        font-size: 13px;
    }
}

/* Превью видео в чате: открытие просмотра */
.message-media-video.message-media-video--viewer-launch {
    cursor: pointer;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.message-media-video.message-media-video--viewer-launch video {
    display: block;
    width: 100%;
    max-height: 400px;
    border-radius: 12px;
    vertical-align: middle;
}

@media (min-width: 769px) {
    .message-media-video.message-media-video--viewer-launch video {
        pointer-events: none;
    }
}

.message-video-play-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.95);
    transition: opacity 0.2s ease;
}

.message-media-video.message-media-video--viewer-launch:hover .message-video-play-badge {
    opacity: 0.92;
    background: rgba(0, 0, 0, 0.35);
}

.media-item-video-wrap {
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
}

.media-item-video-wrap video {
    display: block;
    width: 100%;
    max-height: 200px;
    border-radius: 10px;
}

.media-item-video-wrap .message-video-play-badge {
    background: rgba(0, 0, 0, 0.35);
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    pointer-events: none;
}

/* Явно включаем клики по интерактиву в оверлеях */
#sidebar-menu-modal.open .sidebar-menu-item,
#sidebar-menu-modal.open button,
#sidebar-menu-modal.open a,
#user-profile-modal:not(.hidden) button,
#user-profile-modal:not(.hidden) .media-tab,
#user-profile-modal:not(.hidden) .profile-action-btn,
#user-profile-modal:not(.hidden) .profile-back,
#user-profile-modal:not(.hidden) #copy-username-btn,
#settings-modal:not(.hidden) button,
#account-settings-modal:not(.hidden) button,
#account-delete-sheet:not(.hidden) button,
#privacy-settings-modal:not(.hidden) button,
#personalization-modal:not(.hidden) button,
#xams-modal:not(.hidden) button,
#activate-code-modal:not(.hidden) button,
#settings-modal:not(.hidden) .settings-profile-avatar-hit,
#account-settings-modal:not(.hidden) .account-settings-avatar-hit,
.desktop-settings-tab {
    pointer-events: auto !important;
    cursor: pointer;
    touch-action: manipulation;
}

.account-settings-modal {
    background: rgba(0, 0, 0, 0.5);
}

.modal:not(.hidden):not(.closing) {
    opacity: 1;
    pointer-events: auto;
}

.modal:not(.hidden):not(.closing) > .settings-screen,
.modal:not(.hidden):not(.closing) > .account-settings-screen,
.modal:not(.hidden):not(.closing) > .privacy-settings-screen,
.modal:not(.hidden):not(.closing) > .personalization-screen,
.modal:not(.hidden):not(.closing) > .xams-screen,
.modal:not(.hidden):not(.closing) > .xams-transactions-screen,
.modal:not(.hidden):not(.closing) > .modal-content,
.modal:not(.hidden):not(.closing) > .sidebar-menu-content,
.modal:not(.hidden):not(.closing) > .desktop-settings-sidebar {
    pointer-events: auto;
}

.modal.closing {
    opacity: 0;
    pointer-events: none;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: var(--bg-dark);
    border: 2px solid var(--white-border);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--gray-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    color: var(--text-white);
    font-size: 20px;
}

.btn-close {
    background: transparent;
    border: none;
    color: var(--gray-text);
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s;
}

.btn-close:hover {
    color: var(--text-white);
}

.modal-body {
    padding: 20px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-darker);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-border);
    border-radius: 12px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--white-border);
}

.context-menu {
    position: fixed;
    background: var(--bg-gray-2);
    /* border: 1px solid var(--white-border); */
    border-radius: 12px;
    padding: 8px 0;
    z-index: 1000;
    min-width: 150px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.context-menu-item {
    padding: 10px 20px;
    cursor: pointer;
    color: var(--text-white);
    font-size: 14px;
    transition: background 0.2s;
}

.context-menu-item:hover {
    background: var(--bg-gray-3);
}

.reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    margin-bottom: 0;
    min-height: 0;
    position: relative;
}
.reply-preview.hidden {
    display: none !important;
}

.reply-preview-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.reply-preview-icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.9);
    width: 14px;
    height: 14px;
}

.reply-preview-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.reply-preview-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    line-height: 1.2;
}

.reply-preview-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-preview-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 2px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
    border-radius: 50%;
}

.reply-preview-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.message-reply {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 7px 10px 7px 9px;
    margin-bottom: 7px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.72);
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.message-reply .message-reply__icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    display: block;
    opacity: 0.88;
}

.message-reply .message-reply__text {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-reply:hover {
    background: rgba(255, 255, 255, 0.11);
    color: rgba(255, 255, 255, 0.88);
}

/* В своих фиолетовых пузырях — светлая стеклянная пилюля */
.message.own .message-reply {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
}

.message.own .message-reply:hover {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

.message.swipe-reply-active .message-reply {
    position: relative;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

.edited-mark {
    color: var(--gray-text);
    font-size: 11px;
    font-style: italic;
}

.message-highlight {
    animation: messageHighlight 3s ease-in-out;
}

.message-jump-highlight {
    box-shadow: 0 0 0 2px rgba(150, 97, 241, 0.75), 0 0 18px rgba(150, 97, 241, 0.35);
    transition: box-shadow 0.25s ease;
}

.message.message--thanos-dusting {
    pointer-events: none !important;
}

.message-thanos-canvas {
    pointer-events: none;
    z-index: 12040;
}

@keyframes messageHighlight {
    0% {
        transform: scale(1.05);
        background: rgba(255, 255, 255, 0.1);
    }
    50% {
        transform: scale(1.08);
        background: rgba(255, 255, 255, 0.15);
    }
    100% {
        transform: scale(1);
        background: transparent;
    }
}

.message-reply {
    cursor: pointer;
}

.reply-preview {
    cursor: pointer;
}

@media (max-width: 768px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }
    .screen {
        margin: 0 !important;
        padding: 0 !important;
    }
    .messenger-container {
        flex-direction: row;
        position: relative;
        overflow: hidden;
        margin: 0 !important;
        padding: 0 !important;
        /* Чтобы при сдвиге чат↔список не просвечивал синий --bg-black */
        background: #070707 !important;
    }
    .messenger-container,
    .sidebar,
    .chat-area,
    .chat-view {
        height: var(--app-height) !important;
        min-height: var(--app-height) !important;
        max-height: var(--app-height) !important;
    }
    .sidebar {
        width: 100%;
        border-right: none;
        position: absolute;
        top: 0 !important;
        left: 0;
        z-index: 1;
        /* Та же длительность/кривая, что у .chat-area — иначе между ними щель */
        transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
        border-radius: 0 !important;
        margin: 0 !important;
        padding-top: 0 !important;
        background: transparent;
        overflow: hidden;
    }
    /* Фон списка чатов на мобильных — сплошной тёмный, без обоев */
    .sidebar {
        background: #070707 !important;
    }
    .sidebar::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: #070707;
        pointer-events: none;
    }
    .chats-section,
    .sidebar-tabs,
    .sidebar-tab,
    .chats-list,
    #calls-screen,
    #search-screen-tab {
        background: #070707 !important;
    }
    .sidebar > * {
        position: relative;
        z-index: 1;
    }
    .sidebar.hidden {
        /* Не display:none — только за экраном, чтобы при свайпе назад был виден список чатов */
        display: flex !important;
        flex-direction: column;
        /* +2px overlap со стыком чата — без голубой щели на субпикселях */
        transform: translate3d(calc(-100% + 2px), 0, 0);
        visibility: visible;
        pointer-events: none;
    }
    .sidebar.hidden.sidebar-swipe-reveal,
    .messenger-container.chat-swipe-active .sidebar.hidden {
        pointer-events: auto;
    }
    /* На мобильных отключаем анимацию для chat-view, используем стандартную */
    /* Передизайн шапки для мобильных - упрощённая панель с мини-превью аккаунта */
    .sidebar-header {
        display: none !important;
        padding: 14px 14px 8px;
        margin: 0 !important;
        margin-top: 0 !important;
        max-width: 100%;
        width: 100%;
        border-radius: 0 !important;
        border-bottom: none;
        border-top: none;
        background: transparent;
        top: 0 !important;
        position: sticky;
        z-index: 10;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 14px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .chats-list {
        padding-top: 0 !important;
    }
    .sidebar-header::after {
        display: none;
    }
    .sidebar-header .header-actions {
        display: contents;
        transform: none !important;
    }
    .sidebar-header #search-btn { margin-top: 0; order: 1; }
    .sidebar-header .user-info { order: 2; }
    .sidebar-header #settings-btn { margin-top: 0; order: 3; }
    .sidebar-header .user-info {
        flex: 1;
        max-width: none;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 0 22px;
        height: 56px;
        border-radius: 999px;
        background: #000;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: hidden;
        transform: none !important;
    }
    .sidebar-header .user-details {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }
    .sidebar-header .user-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .sidebar-header .user-username {
        display: none !important;
    }
    .sidebar-header .btn-icon {
        width: 56px;
        height: 56px;
        border-radius: 999px;
        background: #000 !important;
        border: none !important;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transform: none !important;
    }

    /* Поиск — небольшая вытянутая пилюля */
    .sidebar-header #search-btn.btn-icon {
        width: 96px;
        justify-content: center;
        padding: 0;
    }

    /* Меню — круглая кнопка */
    .sidebar-header #settings-btn.btn-icon {
        width: 56px;
        border-radius: 50%;
    }
    .sidebar-header .btn-icon:hover {
        background: rgba(20, 20, 20, 0.68) !important;
    }
    .sidebar-header .btn-icon svg {
        width: 22px;
        height: 22px;
    }
    .sidebar-header .btn-icon svg line,
    .sidebar-header .btn-icon svg path,
    .sidebar-header .btn-icon svg circle {
        stroke: rgba(255, 255, 255, 0.95);
    }
    .floating-pill {
        display: none !important;
    }

    #chats-list {
        padding-top: 96px !important;
    }

    #calls-screen {
        padding: 42px 8px 120px 26px !important;
    }

    #search-screen-tab {
        padding: 42px 14px 120px !important;
    }

    .search-tab-search {
        max-width: 100%;
        margin: 8px 0 12px;
    }

    .sidebar-header.search-mode .sidebar-search-bar {
        background: #222222 !important;
        border: none !important;
        border-radius: 999px !important;
        height: 50px !important;
        padding: 0 12px 0 14px !important;
        box-sizing: border-box;
    }

    .sidebar-header.search-mode .sidebar-search-input {
        font-size: 16px !important;
        font-weight: 400 !important;
    }

    .sidebar-header.search-mode .sidebar-search-input::placeholder {
        color: #ffffff !important;
        opacity: 1 !important;
    }

    .sidebar-header.search-mode .sidebar-search-back-btn {
        color: #ffffff;
    }

    .create-menu-content {
        padding: 42px 14px calc(140px + env(safe-area-inset-bottom)) !important;
        gap: 28px;
    }

    .mobile-top-nick-pill-wrap {
        position: fixed;
        top: 44px;
        left: 0;
        right: 0;
        z-index: 9;
        display: grid !important;
        grid-template-columns: var(--mobile-top-btn-size) minmax(0, 1fr) var(--mobile-top-btn-size);
        align-items: center;
        column-gap: 10px;
        padding: 0 16px;
        background: transparent !important;
        pointer-events: none;
        --mobile-top-btn-size: 46px;
        --mobile-top-nick-min-w: clamp(148px, 50vw, 208px);
    }

    #mobile-top-menu-btn,
    #chat-back-btn-mobile {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    #mobile-top-nick-pill,
    .chat-top-overlay-nick-pill {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        width: max-content;
        min-width: var(--mobile-top-nick-min-w);
        max-width: 100%;
    }

    #mobile-top-search-btn,
    #chat-top-avatar-btn {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .mobile-top-pill-btn {
        flex: 0 0 var(--mobile-top-btn-size);
        width: var(--mobile-top-btn-size);
        height: var(--mobile-top-btn-size);
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(26, 26, 30, 0.62);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: rgba(255, 255, 255, 0.95);
        cursor: pointer;
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-top-pill-btn:active {
        transform: scale(0.98);
    }

    .mobile-top-pill-btn svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
    }

    .mobile-top-nick-pill {
        position: relative;
        box-sizing: border-box;
        height: 42px;
        padding: 0 18px;
        border-radius: 999px;
        background: rgba(26, 26, 30, 0.62);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        pointer-events: auto;
        font: inherit;
        color: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-top-nick-pill:active {
        transform: scale(0.98);
    }

    .mobile-top-nick-pill-chevron {
        position: absolute;
        right: 11px;
        top: 50%;
        transform: translateY(-50%);
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 0;
        color: rgba(255, 255, 255, 0.82);
        pointer-events: none;
        stroke-width: 3.2;
        z-index: 1;
    }

    .mobile-top-nick-pill-track {
        display: block;
        width: auto;
        min-width: 0;
        max-width: calc(100% - 28px);
        overflow: hidden;
        text-align: center;
        transform: none;
        will-change: auto;
    }

    .mobile-top-nick-pill-text {
        color: rgba(255, 255, 255, 0.95);
        font-size: 17px;
        font-weight: 600;
        font-family: 'TikTok Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        letter-spacing: 0.2px;
        white-space: nowrap;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .mobile-top-nick-pill-text-clone {
        display: none !important;
    }

    .mobile-top-nick-pill.is-marquee {
        justify-content: center;
    }

    .mobile-top-nick-pill.is-marquee .mobile-top-nick-pill-track {
        animation: none;
    }

    .mobile-top-nick-pill.is-marquee .mobile-top-nick-pill-text-clone {
        display: none !important;
    }
    /* Скрываем аватар и username на мобильных - упрощённый дизайн */
    .user-avatar {
        display: none !important;
    }
    .user-username {
        display: none !important;
    }
    .user-info {
        gap: 0;
        transform: translateY(10px);
    }
    .user-name {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-white);
    }
    .btn-icon {
        width: 36px;
        height: 36px;
    }
    .search-container {
        padding: 12px;
    }
    .header-actions {
        gap: 6px;
        transform: translateY(10px);
    }
    .chats-title {
        display: none;
        padding: 15px 15px 12px 15px;
        font-size: 20px;
        letter-spacing: 1px;
        text-align: center;
    }
    .chats-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }
    .chats-list {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .floating-pill {
        display: none !important;
        position: static;
        z-index: auto;
        width: 100%;
        max-width: 100%;
        min-height: auto;
        height: auto;
        margin: 2px 0 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        pointer-events: auto;
        transform: translateY(8px);
    }
    .floating-pill-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: auto;
        padding: 0;
        position: relative;
    }
    .fab-button svg {
        width: 22px;
        height: 22px;
    }
    .chat-item {
        padding: 12px 15px;
        padding-right: 58px; /* место под время справа */
        background: transparent !important;
        margin-bottom: 0 !important;
        border-bottom: none !important;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }

    /*
     * ВАЖНО: #chats-list/.sidebar-tab НЕльзя ставить width:100% —
     * они живут в ленте .sidebar-tabs { width:400% }, вкладка = 25%.
     * width:100% раздувает список на 4 экрана → время/полоска уезжают вправо.
     */
    .sidebar-tab {
        width: 25%;
        flex: 0 0 25%;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
    }

    .chat-item-shell {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .chat-info {
        flex: 1;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .chat-info-top,
    .chat-drum-head {
        flex-wrap: nowrap;
    }

    .chat-drum-time {
        display: none;
    }

    /* Если строка уже в aside-раскладке (телефон flat list) — время справа, не скрываем */
    .chat-item-aside .chat-drum-time {
        display: block !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }

    /* Telegram-like: время в правом верхнем углу строки */
    .chat-list-time-row {
        display: inline-flex !important;
        position: absolute;
        top: 14px;
        right: 16px;
        z-index: 2;
        margin: 0;
        padding: 0;
        gap: 3px;
        align-items: center;
        pointer-events: none;
    }

    .chat-list-time {
        display: block !important;
        position: static;
        top: auto;
        right: auto;
        z-index: auto;
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.5);
        white-space: nowrap;
        letter-spacing: 0.01em;
        pointer-events: none;
    }

    /* Непрочитанные — пилюля под временем (вместо (N) у ника) */
    .chat-unread-inline {
        display: none !important;
    }
    .chat-unread-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #8774E1;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        box-sizing: border-box;
        flex-shrink: 0;
        pointer-events: none;
    }
    .chat-item--has-unread .chat-last-message {
        padding-right: 30px; /* место под пилюлю */
    }
    .chat-item--pinned.chat-item--has-unread .chat-last-message,
    .chat-item-shell--pinned .chat-item--has-unread .chat-last-message {
        padding-right: 52px; /* булавка + пилюля */
    }
    .chat-info-top {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: baseline;
        gap: 8px;
        width: 100%;
        min-width: 0;
        margin-bottom: 2px;
    }
    .chat-info-top .chat-name {
        flex: 1 1 auto;
        min-width: 0;
        margin-bottom: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .chat-info-top + .chat-last-message {
        margin-top: 2px;
        max-width: 100%;
    }
    .chat-last-message {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        font-size: 13px;
        line-height: 1.25;
        color: rgba(255, 255, 255, 0.48);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .chat-item--pinned .chat-last-message,
    .chat-item-shell--pinned .chat-last-message {
        padding-right: 22px; /* место под булавку снизу справа */
    }

    .chat-meta {
        position: absolute;
        right: 14px;
        bottom: 12px;
        margin: 0;
        z-index: 2;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
    }

    .chat-unread-badge--nick {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .chat-unread-badge--nick.wide {
        width: 30px;
        height: 30px;
    }
    .chat-item:nth-child(even) {
        background: transparent !important;
    }
    .chat-item-shell {
        margin-bottom: 0 !important;
    }
    body.theme-style-glass .chat-item,
    body.theme-style-glass .chat-item:nth-child(even) {
        background: transparent !important;
        border-bottom: none !important;
    }
    body.theme-style-glass .sidebar {
        background: #070707 !important;
    }
    body.theme-style-glass .sidebar::before,
    body.theme-style-glass .sidebar::after {
        display: none !important;
        content: none !important;
        background: none !important;
    }
    body.theme-light .chat-item,
    body.theme-light .chat-item:nth-child(even) {
        background: transparent !important;
        border-bottom: none !important;
    }
    .chat-avatar {
        width: 45px;
        height: 45px;
        font-size: 16px;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    .chat-name {
        font-size: 14px;
        font-family: 'Arteks', 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    }

    .chat-name .chat-name-text {
        font-family: 'Arteks', 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    }
    .chat-area {
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 2;
        transform: translate3d(100%, 0, 0);
        transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
        background: transparent;
        overflow: hidden;
    }
    .chat-area.active {
        transform: translate3d(0, 0, 0);
    }
    .chat-area.chat-area-swiping {
        transition: none !important;
        will-change: transform;
    }
    .sidebar.sidebar-swipe-reveal {
        will-change: transform;
    }
    /* Мобильный фон чата: такие же обои, как на ПК */
    .chat-area::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background-color: #050505;
        background-image: var(--theme-bg-image);
        background-repeat: repeat;
        background-size: 260px;
        opacity: 0.9;
        pointer-events: none;
    }
    .chat-area > * {
        position: relative;
        z-index: 1;
    }
    .chat-view {
        height: var(--app-height);
    }
    .btn-back {
        display: flex; 
    }
    .chat-header {
        padding: 14px 14px 8px;
        background: transparent;
        border: none;
        border-radius: 0;
        margin: 0;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .chat-header-extra {
        display: none !important;
    }

    .chat-top-pill-btn {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(26, 26, 30, 0.62);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.95);
        cursor: pointer;
        padding: 0;
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }

    .chat-top-pill-btn:active {
        transform: scale(0.98);
    }

    .chat-top-pill {
        flex: 1;
        min-width: 0;
        max-width: 420px;
        height: 56px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(26, 26, 30, 0.62);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 6px 18px;
        overflow: hidden;
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
    }

    .chat-top-pill-title {
        font-size: 28px;
        font-weight: 700;
        line-height: 1.05;
        color: rgba(255, 255, 255, 0.95);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        text-align: center;
    }

    .chat-top-pill-subtitle {
        margin-top: 2px;
        font-size: 16px;
        line-height: 1;
        color: rgba(255, 255, 255, 0.72);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        text-align: center;
    }
    .chat-user-avatar {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    .chat-user-name {
        font-size: 15px;
        font-weight: 600;
        font-family: 'Arteks', 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    }
    .chat-user-status {
        font-size: 12px;
    }
    .messages-container {
        padding: 12px;
        gap: 3px;
    }
    .message {
        margin-bottom: 0;
        max-width: 75%;
    }

    .messages-container .message--has-inline-keyboard {
        margin-bottom: 14px !important;
    }

    .messages-container .message--has-inline-keyboard + .message:not(.system-message) {
        margin-top: 0 !important;
    }
    .message-avatar {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .message-content {
        background: var(--msg-peer-bg);
        /* border: 1px solid var(--white-border); */
        padding: 6px 10px;
        border-radius: 14px;
    }
    .message.own .message-content {
        background: var(--msg-own-bg);
        /* border: 1px solid var(--white-border); */
    }
    .message-text {
        font-size: 15.5px;
        line-height: 1.3;
        padding: 0;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        max-width: 100%;
    }
    .message-content {
        max-width: 100%;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .message {
        max-width: 85%;
        min-width: 0;
    }
    .message-input-container {
        padding: 0;
        background: transparent;
        border-top: none;
        display: flex;
        gap: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .input-panel {
        padding: 2px 5px;
        margin: 6px;
        width: calc(100% - 12px);
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
    }
    .message-input {
        font-size: 16px;
        padding: 4px 5px;
        min-height: 24px;
        max-height: 132px;
        height: auto;
        resize: none;
        overflow-x: hidden;
        overflow-y: auto;
        white-space: pre-wrap;
        word-break: break-word;
        line-height: 1.35;
        background: transparent;
        border: none;
        border-radius: 0;
    }
    .btn-send {
        width: 26px;
        height: 26px;
        background: transparent;
        border: none;
        border-radius: 999px;
    }

    .btn-file,
    .btn-emoji {
        width: 26px;
        height: 26px;
    }

    .btn-voice {
        width: 26px;
        height: 26px;
        padding: 0;
    }

    .voice-send-slot {
        width: 26px;
        height: 26px;
    }
    .modal-content {
        width: 95%;
        max-width: none;
    }
    .modal-header {
        padding: 15px;
    }
    .modal-body {
        padding: 15px;
    }
    .form-group {
        margin-bottom: 15px;
    }
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"] {
        padding: 10px 14px;
        font-size: 14px;
    }
    .btn-primary,
    .btn-secondary {
        padding: 10px;
        font-size: 14px;
    }
}

/* Inline formatting styles in messages (HTML tags like bots: b/i/u/s/code/pre/spoiler/a) */
.message-text b,
.message-text strong {
    font-weight: 800;
}

.message-text i,
.message-text em {
    font-style: italic;
}

.message-text u {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.message-text s,
.message-text strike,
.message-text del {
    text-decoration: line-through;
}

.message-text a,
.message-text .message-inline-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255, 255, 255, 0.45);
}

.message-text .msg-inline-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95em;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.message-text .message-code-block {
    display: block;
    margin: 6px 0;
    padding: 8px 10px;
    border-radius: 10px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.message-text .message-code-block__code,
.message-text .message-code-block code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.92em;
    background: none;
    border: 0;
    padding: 0;
}

.message-spoiler {
    --spoiler-dot: rgba(168, 170, 178, 0.46);
    --spoiler-dot-dim: rgba(132, 134, 142, 0.26);
    --spoiler-dur: 1.7s;
    --spoiler-delay: 0s;
    --spoiler-dir: normal;
    --spoiler-ox: 0px;
    --spoiler-oy: 0px;
    display: inline;
    border-radius: 3px;
    cursor: pointer;
    color: inherit;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    user-select: none;
    -webkit-user-select: none;
}

.message-spoiler:not(.is-revealed) {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    text-shadow: none !important;
    caret-color: transparent;
    background-color: transparent;
    background-image:
        radial-gradient(circle, var(--spoiler-dot) 0.72px, transparent 0.9px),
        radial-gradient(circle, var(--spoiler-dot-dim) 0.5px, transparent 0.68px),
        radial-gradient(circle, var(--spoiler-dot) 0.62px, transparent 0.8px),
        radial-gradient(circle, var(--spoiler-dot-dim) 0.42px, transparent 0.58px);
    background-size: 7px 7px, 10px 8px, 12px 11px, 9px 13px;
    background-position:
        var(--spoiler-ox) var(--spoiler-oy),
        calc(3px + var(--spoiler-ox)) calc(4px + var(--spoiler-oy)),
        calc(7px + var(--spoiler-ox)) calc(1px + var(--spoiler-oy)),
        calc(1px + var(--spoiler-ox)) calc(8px + var(--spoiler-oy));
    animation: xam-spoiler-float-0 var(--spoiler-dur) linear var(--spoiler-delay) infinite var(--spoiler-dir);
}

.message-spoiler--m1:not(.is-revealed) { animation-name: xam-spoiler-float-1; }
.message-spoiler--m2:not(.is-revealed) { animation-name: xam-spoiler-float-2; }
.message-spoiler--m3:not(.is-revealed) { animation-name: xam-spoiler-float-3; }
.message-spoiler--m4:not(.is-revealed) { animation-name: xam-spoiler-float-4; }
.message-spoiler--m5:not(.is-revealed) { animation-name: xam-spoiler-float-5; }

.message-spoiler:not(.is-revealed) .message-spoiler__body,
.message-spoiler:not(.is-revealed) * {
    visibility: hidden;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background: none !important;
    text-shadow: none !important;
}

.message-spoiler:not(.is-revealed)::selection,
.message-spoiler:not(.is-revealed) *::selection {
    color: transparent;
    background: transparent;
}

@keyframes xam-spoiler-float-0 {
    to {
        background-position:
            calc(7px + var(--spoiler-ox)) calc(6px + var(--spoiler-oy)),
            calc(-5px + var(--spoiler-ox)) calc(11px + var(--spoiler-oy)),
            calc(12px + var(--spoiler-ox)) calc(-4px + var(--spoiler-oy)),
            calc(-8px + var(--spoiler-ox)) calc(-5px + var(--spoiler-oy));
    }
}
@keyframes xam-spoiler-float-1 {
    to {
        background-position:
            calc(-8px + var(--spoiler-ox)) calc(5px + var(--spoiler-oy)),
            calc(10px + var(--spoiler-ox)) calc(-7px + var(--spoiler-oy)),
            calc(-6px + var(--spoiler-ox)) calc(12px + var(--spoiler-oy)),
            calc(9px + var(--spoiler-ox)) calc(8px + var(--spoiler-oy));
    }
}
@keyframes xam-spoiler-float-2 {
    to {
        background-position:
            calc(5px + var(--spoiler-ox)) calc(-8px + var(--spoiler-oy)),
            calc(-9px + var(--spoiler-ox)) calc(-4px + var(--spoiler-oy)),
            calc(8px + var(--spoiler-ox)) calc(9px + var(--spoiler-oy)),
            calc(-4px + var(--spoiler-ox)) calc(11px + var(--spoiler-oy));
    }
}
@keyframes xam-spoiler-float-3 {
    to {
        background-position:
            calc(-6px + var(--spoiler-ox)) calc(-7px + var(--spoiler-oy)),
            calc(8px + var(--spoiler-ox)) calc(10px + var(--spoiler-oy)),
            calc(-11px + var(--spoiler-ox)) calc(-3px + var(--spoiler-oy)),
            calc(4px + var(--spoiler-ox)) calc(-9px + var(--spoiler-oy));
    }
}
@keyframes xam-spoiler-float-4 {
    to {
        background-position:
            calc(9px + var(--spoiler-ox)) calc(3px + var(--spoiler-oy)),
            calc(4px + var(--spoiler-ox)) calc(-10px + var(--spoiler-oy)),
            calc(-8px + var(--spoiler-ox)) calc(7px + var(--spoiler-oy)),
            calc(11px + var(--spoiler-ox)) calc(-6px + var(--spoiler-oy));
    }
}
@keyframes xam-spoiler-float-5 {
    to {
        background-position:
            calc(-4px + var(--spoiler-ox)) calc(10px + var(--spoiler-oy)),
            calc(-11px + var(--spoiler-ox)) calc(6px + var(--spoiler-oy)),
            calc(6px + var(--spoiler-ox)) calc(-9px + var(--spoiler-oy)),
            calc(-7px + var(--spoiler-ox)) calc(-8px + var(--spoiler-oy));
    }
}

@media (prefers-reduced-motion: reduce) {
    .message-spoiler:not(.is-revealed) {
        animation: none;
    }
}

.message-spoiler.is-revealed {
    background: none;
    animation: none;
    color: inherit;
    -webkit-text-fill-color: unset;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}

.message-spoiler.is-revealed .message-spoiler__body,
.message-spoiler.is-revealed * {
    visibility: visible;
}

.activation-modal {
    text-align: center;
    padding: 38px 32px 34px;
    max-width: 430px;
    position: relative;
    overflow: hidden;
}

#activation-modal.modal {
    background: #1d1d1d;
    align-items: stretch;
    justify-content: stretch;
}

#activation-modal .modal-content.activation-modal {
    width: 100vw !important;
    max-width: none !important;
    height: 100vh;
    max-height: 100vh !important;
    margin: 0;
    border: none !important;
    border-radius: 0 !important;
    background: #1d1d1d !important;
    padding-top: max(40px, env(safe-area-inset-top, 0px));
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: calc(max(40px, env(safe-area-inset-top, 0px)) + 22px);
    overflow-y: auto;
}

.user-profile-modal {
    max-width: 600px;
    padding: 0;
    position: relative;
    border: none !important;
    background: var(--bg-dark);
    box-shadow: none !important;
}

.user-profile-modal .modal-content {
    border: none !important;
    box-shadow: none !important;
}

/* Палитра панели профиля — как в чате (тёмный мессенджер) */
#user-profile-modal .user-profile-modal {
    background: var(--bg-dark);
}
#user-profile-modal .profile-header {
    background: var(--bg-dark);
    border-bottom: none;
}
#user-profile-modal .profile-hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
#user-profile-modal .profile-avatar {
    background: var(--bg-gray-2);
    border-color: var(--gray-border);
}
#user-profile-modal .profile-name {
    color: var(--text-white);
}
#user-profile-modal .profile-status {
    color: rgba(255, 255, 255, 0.55);
}
#user-profile-modal .profile-menu-btn,
#user-profile-modal .profile-back {
    color: var(--text-white);
}
#user-profile-modal .profile-menu-btn:hover,
#user-profile-modal .profile-back:hover {
    background: var(--bg-gray-2);
}
#user-profile-modal .profile-menu-dropdown {
    background: var(--bg-gray-1);
    border: 1px solid var(--gray-border);
}
#user-profile-modal .profile-menu-item:hover {
    background: var(--bg-gray-2);
}
#user-profile-modal .profile-actions {
    background: var(--bg-dark);
    border-bottom: 1px solid var(--gray-border);
}
#user-profile-modal .profile-action-btn {
    background: var(--bg-gray-2);
    border: 1px solid var(--gray-border);
    color: var(--text-white);
}
#user-profile-modal .profile-action-btn:hover {
    background: var(--bg-gray-3);
}
#user-profile-modal .profile-info {
    background: var(--bg-dark);
    border-bottom: 1px solid var(--gray-border);
}

/* Юзернейм + почта — одна светло-серая пилюля, без обводок */
#user-profile-modal .profile-info--user-pills {
    display: block;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--gray-border);
    background: var(--bg-dark);
}

#user-profile-modal .profile-info--user-pills .profile-info-merged-pill {
    border-radius: 22px;
    padding: 16px 18px;
    box-sizing: border-box;
    background: #171717;
    border: none;
    outline: none;
    box-shadow: none;
}

#user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item {
    margin-bottom: 18px;
}

#user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item:last-child {
    margin-bottom: 0;
}

#user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-label {
    margin-bottom: 6px;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 12px;
}

#user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-value {
    font-size: 16px;
    font-weight: 600;
    min-width: 0;
}

#user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item > span.profile-info-value {
    display: block;
    word-break: break-word;
}

#user-profile-modal .profile-info-label {
    color: rgba(255, 255, 255, 0.5);
}
#user-profile-modal .profile-info-value {
    color: var(--text-white);
}
#user-profile-modal .profile-copy-btn {
    color: rgba(255, 255, 255, 0.45);
}
#user-profile-modal .profile-copy-btn:hover {
    color: var(--text-white);
}
#user-profile-modal .profile-media {
    background: var(--bg-dark);
    padding: 12px 0 20px;
}

/* Свой профиль («Мой профиль»): без табов и сетки — только пустая зона */
#user-profile-modal.profile-is-self .profile-media {
    min-height: min(32vh, 320px);
    padding: 16px 0 32px;
    box-sizing: border-box;
}
#user-profile-modal.profile-is-self .profile-media > * {
    display: none !important;
}

#user-profile-modal.sheet-expanded.profile-is-self .profile-media {
    min-height: min(32vh, 320px) !important;
}

/* Photo / Video / … — пилюля #171717; на ПК — sticky; на телефоне в полном экране — pin через JS */
#user-profile-modal {
    --profile-tabs-pin-y: max(4px, env(safe-area-inset-top, 0px));
}

#user-profile-modal .profile-media-tabs-pill-spacer {
    flex-shrink: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
    box-sizing: border-box;
}

#user-profile-modal .profile-media-tabs-pill {
    position: relative;
    z-index: 10;
    margin: 0 16px 14px;
    padding: 4px;
    border-radius: 22px;
    background: #171717;
    border: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

@media (min-width: 769px) {
    #user-profile-modal .profile-media-tabs-pill {
        position: sticky;
        top: max(4px, env(safe-area-inset-top, 0px));
    }
}

@media (max-width: 768px) {
    /* Пилюля при pin вешается на #user-profile-modal (вне .modal-content с transform), fixed относится к модалке на весь экран */
    #user-profile-modal.sheet-expanded .profile-media-tabs-pill.profile-media-tabs-pill--pinned {
        position: fixed;
        top: var(--profile-tabs-pin-y);
        left: 16px;
        right: 16px;
        width: auto;
        max-width: calc(100vw - 32px);
        margin: 0 0 14px;
        z-index: 2500;
        box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
    }
}

#user-profile-modal .profile-media-tabs-pill .profile-media-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
    padding: 0;
    margin: 0;
    border: none;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    background: transparent;
}

#user-profile-modal .profile-media-tabs-pill .media-tab {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 10px 4px;
    border: none !important;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.42);
    background: transparent;
    border-bottom: none !important;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

#user-profile-modal .profile-media-tabs-pill .media-tab.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: none !important;
}

#user-profile-modal .profile-media-tabs-pill .media-tab:hover:not(.active) {
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.05);
}

#user-profile-modal .profile-media-content {
    background: var(--bg-dark);
    padding: 0 16px;
}

/* Верхняя строка профиля: назад | имя | звонок + меню */
.profile-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px 14px;
    min-height: 56px;
    flex-shrink: 0;
    background: var(--bg-dark);
}
#user-profile-modal .profile-top-bar .profile-back {
    position: static;
    margin: 0;
    flex-shrink: 0;
}
.profile-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-white);
    margin: 0;
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
}
.profile-top-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.profile-header-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-white);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.profile-header-btn:hover,
#user-profile-modal .profile-menu-btn:hover {
    background: var(--bg-gray-2);
}
#user-profile-modal .profile-menu-btn {
    position: static;
    margin: 0;
}
/* На ПК скрываем ряд круглых кнопок — только шапка */
@media (min-width: 769px) {
    #user-profile-modal .profile-actions-row {
        display: none;
    }
}
@media (max-width: 768px) {
    #user-profile-modal .profile-top-bar .profile-call-btn {
        display: none;
    }
}
/* Карточки: блок почты/username и блок медиа */
.profile-info-card {
    margin: 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-gray-1);
    border: 1px solid var(--gray-border);
}
.profile-info-card .profile-info-item {
    margin-bottom: 16px;
}
.profile-info-card .profile-info-item:last-child {
    margin-bottom: 0;
}
.profile-info-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-media-card {
    flex: 1;
    margin: 0 16px 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-gray-1);
    border: 1px solid var(--gray-border);
    min-height: 200px;
    display: flex;
    flex-direction: column;
}
#user-profile-modal .profile-header {
    padding: 20px 20px 16px;
    border-bottom: none !important;
    background: var(--bg-dark);
}
#user-profile-modal .profile-avatar {
    background: var(--bg-gray-2);
    border-color: var(--gray-border);
    margin-bottom: 8px;
}
#user-profile-modal .profile-status {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

/* Профиль: danger-pill только на ПК */
#user-profile-modal .profile-danger-pill {
    display: none;
}

/* Старая отдельная кнопка переименования на телефоне больше не нужна */
.profile-rename-mobile-btn {
    display: none !important;
}

@media (max-width: 768px) {
    /* Старая сетка 2 капсулы + кружки отключена — см. fullscreen mockup выше */
}

/* Профиль на ПК: плавающая панель по центру + blur/dim фон */
@media (min-width: 769px) {
    @keyframes profileFloatInDesktop {
        0% {
            opacity: 0;
            transform: translateY(14px) scale(0.94);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    @keyframes profileFloatOutDesktop {
        0% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        100% {
            opacity: 0;
            transform: translateY(10px) scale(0.96);
        }
    }
    @keyframes profileSlideInDesktop {
        0% {
            opacity: 0;
            transform: translateY(14px) scale(0.94);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    @keyframes profileSlideOutDesktop {
        0% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        100% {
            opacity: 0;
            transform: translateY(10px) scale(0.96);
        }
    }

    body:not(.layout-tablet) {
        --desktop-profile-float-w: min(420px, calc(100vw - 48px));
        --desktop-profile-float-max-h: min(88vh, 900px);
    }

    body:not(.layout-tablet) #user-profile-modal {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none;
        min-height: 100vh;
        padding: 24px !important;
        box-sizing: border-box;
        opacity: 1;
        z-index: 12000 !important;
        overflow: hidden;
    }
    body:not(.layout-tablet) #user-profile-modal:not(.user-profile-panel-visible):not(.closing) {
        opacity: 0;
    }
    body:not(.layout-tablet) #user-profile-modal.user-profile-panel-visible {
        opacity: 1;
        pointer-events: auto;
    }
    body:not(.layout-tablet) #user-profile-modal.closing {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }
    body:not(.layout-tablet) #user-profile-modal .xam-profile-modal-backdrop {
        display: block !important;
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: auto;
        background: rgba(0, 0, 0, 0.46) !important;
        backdrop-filter: blur(0px) saturate(118%) !important;
        -webkit-backdrop-filter: blur(0px) saturate(118%) !important;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            backdrop-filter 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            -webkit-backdrop-filter 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0.34s;
    }
    body:not(.layout-tablet) #user-profile-modal.user-profile-panel-visible .xam-profile-modal-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
        backdrop-filter: blur(16px) saturate(118%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(118%) !important;
        transition:
            opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            backdrop-filter 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            -webkit-backdrop-filter 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s;
    }
    body:not(.layout-tablet) #user-profile-modal .modal-content.user-profile-modal {
        pointer-events: auto;
        position: relative !important;
        z-index: 1;
        width: var(--desktop-profile-float-w) !important;
        max-width: 420px;
        min-height: 0;
        height: auto;
        max-height: var(--desktop-profile-float-max-h);
        border-radius: 32px;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow:
            0 28px 80px rgba(0, 0, 0, 0.58),
            0 0 0 1px rgba(255, 255, 255, 0.03) inset;
        background: #181818 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: translateY(14px) scale(0.94);
        opacity: 0;
        transform-origin: center center;
        transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
        animation: none;
        display: flex;
        flex-direction: column;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #user-profile-modal .modal-content.user-profile-modal::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    #user-profile-modal .profile-hero-section,
    #user-profile-modal .profile-info,
    #user-profile-modal .profile-info--user-pills,
    #user-profile-modal .profile-flow-bar,
    #user-profile-modal .profile-media-bar {
        background: #141414 !important;
        border-color: rgba(255, 255, 255, 0.06) !important;
    }

    /* Без сплошного фона у hero/инфо — иначе обрыв градиента под кнопками */
    #user-profile-modal .profile-hero-section,
    #user-profile-modal .profile-info,
    #user-profile-modal .profile-info--user-pills {
        background: transparent !important;
    }

    #user-profile-modal .profile-media-open-btn {
        display: none !important;
    }

    #user-profile-modal .profile-media-bar {
        display: flex !important;
        width: calc(100% - 32px);
        margin: 0 16px 6px;
        padding: 12px 16px;
        border-radius: 20px;
        background: #0F0F0F !important;
        color: rgba(255, 255, 255, 0.92);
    }

    #user-profile-modal .profile-media-bar:hover {
        background: #161616 !important;
    }

    #user-profile-modal .profile-media {
        display: none !important;
    }

    #user-profile-modal .profile-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        padding: 44px 20px 4px;
        gap: 0;
        background: transparent !important;
        border-bottom: none !important;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    /* ПК: живой градиент за аватаром — отключён, см. body:not(.layout-tablet) */
    #user-profile-modal .profile-hero-section {
        overflow: hidden !important;
        isolation: isolate;
        position: relative;
        z-index: auto;
        background: transparent !important;
        flex-shrink: 0;
    }

    /* ПК: градиент только внутри панели, в верхней части */
    body:not(.layout-tablet) #user-profile-modal .profile-avatar-glow:not(.hidden) {
        display: block !important;
    }

    body:not(.layout-tablet) #user-profile-modal .profile-avatar-glow {
        top: -32px;
        left: 50%;
        width: 130%;
        height: 360px;
        margin-left: -65%;
        border-radius: 32px 32px 0 0;
        z-index: 0;
        opacity: 0.96;
        filter: blur(68px) saturate(1.65) brightness(1.14);
        background:
            radial-gradient(circle at 32% 36%, var(--profile-glow-c1, #9a6fd8) 0%, transparent 52%),
            radial-gradient(circle at 70% 32%, var(--profile-glow-c2, #4da8d8) 0%, transparent 50%),
            radial-gradient(circle at 50% 58%, var(--profile-glow-c3, #d89a4d) 0%, transparent 54%);
        background-size: 160% 160%, 160% 160%, 170% 170%;
        background-position: 8% 28%, 92% 18%, 50% 55%;
        animation: profileAvatarGlowDrift 8s ease-in-out infinite alternate;
    }

    #user-profile-modal .profile-avatar-glow:not(.hidden) {
        display: block;
    }

    #user-profile-modal .profile-avatar-glow {
        position: absolute;
        pointer-events: none;
        mix-blend-mode: normal;
        transform: translateZ(0);
        will-change: transform, background-position;
        -webkit-mask-image: none;
        mask-image: none;
    }

    #user-profile-modal .profile-avatar-glow.hidden,
    #user-profile-modal.profile-is-deleted .profile-avatar-glow {
        display: none !important;
    }

    #user-profile-modal .profile-avatar-shell,
    #user-profile-modal .profile-avatar-cluster,
    #user-profile-modal .profile-verif-slot,
    #user-profile-modal .profile-verif-badge,
    #user-profile-modal .profile-header-text,
    #user-profile-modal .profile-name,
    #user-profile-modal .profile-status,
    #user-profile-modal .profile-actions,
    #user-profile-modal .profile-actions-row {
        position: relative;
        z-index: 2;
        isolation: isolate;
    }

    /* Панели ниже аватара — поверх хвоста градиента */
    #user-profile-modal .profile-info,
    #user-profile-modal .profile-info--user-pills,
    #user-profile-modal .profile-flow-bar,
    #user-profile-modal .profile-media-bar,
    #user-profile-modal .profile-gifts-bar,
    #user-profile-modal .profile-danger-pill,
    #user-profile-modal .profile-media {
        position: relative;
        z-index: 4;
        isolation: isolate;
        background: transparent !important;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill {
        isolation: isolate;
        background: #0F0F0F !important;
        border: none !important;
        box-shadow: none !important;
    }

    #user-profile-modal .profile-media-bar,
    #user-profile-modal .profile-flow-bar,
    #user-profile-modal .profile-danger-pill {
        background: #0F0F0F !important;
        border: none !important;
        box-shadow: none !important;
    }

    #user-profile-modal .profile-info--user-pills {
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
        padding: 0 16px 4px !important;
    }

    #user-profile-modal .profile-info--user-pills::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    #user-profile-modal .profile-media-bar,
    #user-profile-modal .profile-gifts-bar,
    #user-profile-modal .profile-danger-pill {
        flex-shrink: 0 !important;
    }

    #user-profile-modal .profile-gifts-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: calc(100% - 32px) !important;
        margin: 0 16px 6px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 20px !important;
        background: #0F0F0F !important;
        color: rgba(255, 255, 255, 0.92) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        appearance: none !important;
    }

    #user-profile-modal .profile-gifts-bar-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: inherit !important;
        cursor: pointer !important;
        text-align: left !important;
        font: inherit !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    #user-profile-modal .profile-gifts-bar-head:hover {
        background: rgba(255, 255, 255, 0.03) !important;
    }

    #user-profile-modal .profile-gifts-bar-label {
        font-size: 15px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.92) !important;
    }

    #user-profile-modal .profile-gifts-bar-meta {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: rgba(255, 255, 255, 0.45) !important;
    }

    #user-profile-modal .profile-gifts-bar-count {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.45) !important;
    }

    #user-profile-modal .profile-gifts-chevron {
        transition: transform 0.22s ease;
        color: rgba(255, 255, 255, 0.45);
    }

    #user-profile-modal .profile-gifts-bar.is-expanded .profile-gifts-chevron {
        transform: rotate(90deg);
    }

    #user-profile-modal .profile-gifts-strip {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        padding: 0 16px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transition:
            max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.28s ease,
            padding 0.28s ease;
    }

    #user-profile-modal .profile-gifts-bar.is-expanded .profile-gifts-strip {
        max-height: 420px;
        opacity: 1;
        padding: 0 16px 14px;
        pointer-events: auto;
        overflow-y: auto;
    }

    #user-profile-modal .profile-gifts-strip[hidden] {
        display: none !important;
    }

    #user-profile-modal .profile-gifts-strip-item {
        display: grid !important;
        grid-template-columns: 36px 1fr auto;
        grid-template-areas:
            "icon name actions"
            ". sender actions";
        align-items: center;
        column-gap: 10px;
        row-gap: 2px;
        width: 100%;
        padding: 10px 12px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.04);
        box-sizing: border-box;
    }

    #user-profile-modal .profile-gifts-strip-item.is-hidden-gift {
        opacity: 0.55;
    }

    #user-profile-modal .profile-gifts-strip-icon {
        grid-area: icon;
        font-size: 28px;
    }

    #user-profile-modal .profile-gifts-strip-name {
        grid-area: name;
        font-size: 14px;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #user-profile-modal .profile-gifts-strip-sender {
        grid-area: sender;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
        line-height: 1.2;
    }

    #user-profile-modal .profile-gifts-strip-actions {
        grid-area: actions;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    #user-profile-modal .profile-gifts-strip-btn {
        border: none;
        border-radius: 10px;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
    }

    #user-profile-modal .profile-gifts-strip-btn--sell {
        background: var(--xam-ui-accent, #8774E1);
    }

    #user-profile-modal .profile-gifts-strip-empty,
    #user-profile-modal .profile-gifts-strip-loading {
        padding: 8px 0 4px;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.45);
        text-align: center;
    }

    #user-profile-modal .profile-header-text {
        display: contents;
    }

    #user-profile-modal .profile-name {
        order: 1;
        width: 100%;
        margin: 0 0 10px;
        padding: 0 52px;
        box-sizing: border-box;
        font-size: 26px;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.01em;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        transform: none;
        animation: none;
    }

    #user-profile-modal .profile-name.is-marquee {
        text-overflow: clip;
        text-align: left;
        animation: profileNameMarquee var(--marquee-duration, 10s) linear infinite alternate;
    }

    #user-profile-modal .profile-avatar-shell {
        order: 2;
        margin: 0 0 6px;
    }

    #user-profile-modal .profile-avatar-frame {
        --profile-avatar-size: 128px;
    }

    #user-profile-modal .profile-avatar {
        margin-bottom: 0;
        border: none !important;
        font-size: 52px;
    }

    #user-profile-modal #profile-avatar.profile-avatar--photo-open {
        cursor: zoom-in;
    }

    #user-profile-modal #profile-avatar.profile-avatar--photo-open img {
        pointer-events: none;
    }

    #user-profile-modal .profile-status {
        order: 3;
        width: 100%;
        margin: 2px 0 4px;
        font-size: 13px;
        text-align: center;
        color: rgba(255, 255, 255, 0.52);
    }

    #user-profile-modal .profile-music-card:not(.hidden):not([hidden]) {
        width: calc(100% - 32px);
        margin: 0 16px 8px;
        flex-shrink: 0;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill {
        background: #0F0F0F !important;
        border: none !important;
        border-radius: 20px !important;
        padding: 0 !important;
        overflow: hidden;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 8px 16px !important;
        position: relative;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item--thought {
        padding: 9px 16px 4px !important;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item--username {
        padding: 4px 16px 5px !important;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item--notify {
        padding: 8px 16px !important;
        align-items: center !important;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 0;
        height: 1px;
        background: rgba(255, 255, 255, 0.06);
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item--username::after {
        display: none !important;
    }

    body:not(.layout-tablet) #user-profile-modal .profile-info-item--notify .profile-info-body {
        display: none !important;
    }

    body:not(.layout-tablet) #user-profile-modal .profile-info-item--notify {
        justify-content: space-between !important;
    }

    body:not(.layout-tablet) #user-profile-modal .profile-info-item--notify .profile-notify-switch {
        margin-left: auto !important;
    }

    #user-profile-modal .profile-info-body {
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
        gap: 1px !important;
        min-width: 0;
        flex: 1;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-label {
        font-size: 11px !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.38) !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-value {
        font-size: 15px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.96) !important;
        line-height: 1.22 !important;
        word-break: break-word;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-icon {
        display: none !important;
    }

    #user-profile-modal .profile-back {
        top: 14px;
        right: 14px;
        left: auto;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    #user-profile-modal .profile-back:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    #user-profile-modal .profile-back-icon {
        transform: rotate(0deg);
    }

    #user-profile-modal .profile-menu-btn {
        display: none !important;
    }

    #user-profile-modal .profile-actions {
        background: transparent !important;
        border-bottom: none !important;
        padding: 8px 16px 4px;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }

    #user-profile-modal .profile-action-btn {
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
        border-radius: 50%;
        background: #0F0F0F !important;
        border: none !important;
        box-shadow: none !important;
    }

    #user-profile-modal .profile-action-btn svg {
        width: 26px;
        height: 26px;
    }

    #user-profile-modal .profile-action-btn:hover {
        background: #161616 !important;
        transform: none;
    }

    #user-profile-modal .profile-info--user-pills {
        padding: 0 16px 4px !important;
        border-bottom: none !important;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill {
        background: #0F0F0F !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body:not(.layout-tablet) #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item {
        margin-bottom: 0 !important;
    }

    body:not(.layout-tablet) #user-profile-modal .profile-info-item--username .profile-info-value {
        min-height: 0 !important;
        line-height: 1.2 !important;
    }

    body:not(.layout-tablet) #user-profile-modal .profile-info-item--username .profile-copy-btn {
        width: 30px !important;
        height: 30px !important;
    }

    #user-profile-modal .profile-flow-bar {
        background: #0F0F0F !important;
    }

    #user-profile-modal .profile-media-tabs-pill {
        background: #0F0F0F !important;
    }

    #user-profile-modal .profile-media-tabs-pill .media-tab.active {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    #user-profile-modal .profile-action-btn--mobile-only {
        display: none !important;
    }

    #user-profile-modal .profile-danger-pill {
        display: flex;
        flex-direction: column;
        margin: 0 16px 12px;
        padding: 2px;
        border-radius: 20px;
        background: #0F0F0F !important;
        gap: 0;
    }

    #user-profile-modal .profile-danger-pill.hidden {
        display: none !important;
    }

    #user-profile-modal .profile-danger-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 12px 14px;
        border: none;
        background: transparent;
        color: #fff;
        border-radius: 16px;
        cursor: pointer;
        text-align: left;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
        font-family: inherit;
        transition: background 0.15s ease;
    }

    #user-profile-modal .profile-danger-item:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    #user-profile-modal .profile-danger-item:active {
        background: rgba(255, 255, 255, 0.1);
    }

    #user-profile-modal .profile-danger-item-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    #user-profile-modal .profile-danger-item-icon svg {
        width: 22px;
        height: 22px;
    }

    #user-profile-modal .profile-danger-item-label {
        flex: 1;
        min-width: 0;
    }

    /* ПК: летающие подарки вокруг профиля */
    body:not(.layout-tablet) #user-profile-modal .profile-floating-gifts {
        position: fixed;
        inset: 0;
        z-index: 12002;
        pointer-events: none;
        overflow: visible;
    }

    body:not(.layout-tablet) #user-profile-modal .profile-floating-gifts:not(.hidden) {
        display: block;
    }

    body:not(.layout-tablet) #user-profile-modal .profile-floating-gifts.hidden {
        display: none !important;
    }

    body:not(.layout-tablet) .profile-floating-gift {
        position: fixed;
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        pointer-events: auto;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transform: translate(-50%, -50%) translate(var(--gift-x, 0px), var(--gift-y, 0px));
        animation: profileFloatingGiftDrift var(--gift-float-dur, 26s) ease-in-out infinite;
        animation-delay: var(--gift-float-delay, 0s);
        will-change: transform;
    }

    body:not(.layout-tablet) .profile-floating-gift-icon {
        display: block;
        font-size: 34px;
        line-height: 1;
        filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
        transform: scale(1);
        transform-origin: center center;
        transition:
            transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.26s ease;
        will-change: transform;
    }

    body:not(.layout-tablet) .profile-floating-gift:hover {
        z-index: 2;
    }

    body:not(.layout-tablet) .profile-floating-gift:hover .profile-floating-gift-icon {
        transform: scale(1.62);
        filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.42));
    }

    @keyframes profileFloatingGiftDrift {
        0%, 100% {
            transform: translate(-50%, -50%) translate(var(--gift-x, 0px), var(--gift-y, 0px)) rotate(0deg);
        }
        33% {
            transform: translate(-50%, -50%) translate(calc(var(--gift-x, 0px) + 4px), calc(var(--gift-y, 0px) - 5px)) rotate(3deg);
        }
        66% {
            transform: translate(-50%, -50%) translate(calc(var(--gift-x, 0px) - 3px), calc(var(--gift-y, 0px) + 4px)) rotate(-2deg);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        body:not(.layout-tablet) .profile-floating-gift {
            animation: none !important;
        }
    }

    #user-profile-modal .profile-gifts-strip-item {
        cursor: pointer;
    }

    #user-profile-modal .profile-gifts-strip-item:hover {
        background: rgba(255, 255, 255, 0.04);
    }

    #user-profile-modal .profile-gift-item {
        cursor: pointer;
    }

    #user-profile-modal .profile-gift-item:hover {
        background: rgba(255, 255, 255, 0.04);
    }

    /* ПК: профиль по центру — чат не сдвигаем */
    body:not(.layout-tablet).user-profile-panel-open .chat-area {
        margin-right: 0 !important;
        padding-right: 0 !important;
        transition: none !important;
    }
    body:not(.layout-tablet) #user-profile-modal.user-profile-panel-visible .modal-content.user-profile-modal {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    body:not(.layout-tablet) #user-profile-modal.closing .modal-content.user-profile-modal {
        transform: translateY(10px) scale(0.96);
        opacity: 0;
        animation: none;
    }

    /* ПК: профиль группы/канала — такая же центральная панель */
    body:not(.layout-tablet) #group-profile-modal:not(.hidden) {
        background: rgba(0, 0, 0, 0.46) !important;
        backdrop-filter: blur(16px) saturate(118%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(118%) !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
        z-index: 12000 !important;
        pointer-events: auto !important;
        opacity: 1;
        transition:
            opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            backdrop-filter 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            -webkit-backdrop-filter 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body:not(.layout-tablet) #group-profile-modal.hidden {
        opacity: 0;
        backdrop-filter: blur(0px) saturate(118%) !important;
        -webkit-backdrop-filter: blur(0px) saturate(118%) !important;
    }
    body:not(.layout-tablet) #group-profile-modal .group-profile-sheet-handle {
        display: none !important;
    }
    body:not(.layout-tablet) #group-profile-modal .group-profile-modal {
        width: min(440px, calc(100vw - 48px)) !important;
        max-width: 440px !important;
        border-radius: 32px !important;
        background: #181818 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow:
            0 28px 80px rgba(0, 0, 0, 0.58),
            0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    }
    body:not(.layout-tablet) #group-profile-modal .profile-back {
        top: 14px;
        right: 14px;
        left: auto;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    body:not(.layout-tablet) #group-profile-modal .profile-info-merged-pill,
    body:not(.layout-tablet) #group-profile-modal .group-member-item {
        background: #1a1a1a !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Длинная почта — перенос по строкам, не обрезать */
    #user-profile-modal .profile-info-item--email .profile-info-body {
        min-width: 0;
        max-width: 100%;
    }

    #user-profile-modal .profile-info-item--email #profile-email,
    #user-profile-modal #profile-email {
        display: block !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.35 !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* Анимация открытия профиля на мобильных */
@media (max-width: 768px) {
    #user-profile-modal:not(.hidden):not(.closing) .modal-content {
        animation: none;
    }
    /* Закрытие — side-slide через mobile-motion / transform */
    #user-profile-modal.closing .modal-content {
        animation: none;
    }
    @keyframes profileSlideOutMobile {
        0% {
            opacity: 1;
            transform: translateY(0);
        }
        100% {
            opacity: 0;
            transform: translateY(100%);
        }
    }
    @keyframes profileSlideInMobile {
        0% {
            opacity: 0;
            transform: translateY(100%);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* Каскадное появление элементов профиля на мобильных */
    #user-profile-modal:not(.hidden):not(.closing) .profile-header {
        animation: profileHeaderFadeInMobile 0.4s ease-out 0.1s both;
    }
    #user-profile-modal:not(.hidden):not(.closing) .profile-actions {
        animation: profileActionsFadeInMobile 0.4s ease-out 0.15s both;
    }
    #user-profile-modal:not(.hidden):not(.closing) .profile-info {
        animation: profileInfoFadeInMobile 0.4s ease-out 0.2s both;
    }
    #user-profile-modal:not(.hidden):not(.closing) .profile-media {
        animation: profileMediaFadeInMobile 0.4s ease-out 0.25s both;
    }
    @keyframes profileHeaderFadeInMobile {
        0% {
            opacity: 0;
            transform: translateY(-15px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes profileActionsFadeInMobile {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes profileInfoFadeInMobile {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes profileMediaFadeInMobile {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

.profile-back {
    position: absolute;
    top: 15px;
    left: 15px;
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s;
    padding: 0;
}

/* Анимация кнопки закрытия профиля */
@media (min-width: 769px) {
    #user-profile-modal:not(.hidden):not(.closing) .profile-back,
    #group-profile-modal:not(.hidden):not(.closing) .profile-back {
        animation: profileButtonFadeIn 0.4s ease-out 0.1s both;
    }
    @keyframes profileButtonFadeIn {
        0% {
            opacity: 0;
            transform: translateX(-10px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

@media (max-width: 768px) {
    #user-profile-modal:not(.hidden):not(.closing) .profile-back,
    #group-profile-modal:not(.hidden):not(.closing) .profile-back {
        animation: profileButtonFadeInMobile 0.3s ease-out 0.1s both;
    }
    @keyframes profileButtonFadeInMobile {
        0% {
            opacity: 0;
            transform: translateX(-10px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

.profile-back:hover {
    background: var(--bg-gray-2);
}

.profile-back svg {
    width: 24px;
    height: 24px;
}

.profile-sheet-handle {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    z-index: 20;
}

@media (max-width: 768px) {
    #user-profile-modal {
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    #group-profile-modal {
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    #user-profile-modal {
        background: #181818 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #user-profile-modal .modal-content.user-profile-modal {
        position: relative;
        z-index: 1;
    }

    #group-profile-modal .modal-content.group-profile-modal {
        width: 100% !important;
        max-width: 100% !important;
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--bg-dark);
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        position: relative;
        will-change: transform, opacity;
    }

    /* Канал (компакт): нижний шит. Группа (expanded): fullscreen — см. правила ниже / sheet-expanded */
    #group-profile-modal:not(.sheet-expanded):not(.closing) .modal-content.group-profile-modal {
        height: 58vh;
        max-height: 58vh;
        border-radius: 34px 34px 0 0;
        border: 1px solid var(--gray-border);
        transform: translateY(110%);
        transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
        margin-top: auto;
        align-self: flex-end;
    }

    #group-profile-modal.sheet-open:not(.sheet-expanded) .modal-content.group-profile-modal {
        transform: translateY(0);
    }

    #user-profile-modal .modal-content.user-profile-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        overflow: hidden;
        overflow-x: hidden;
        background: #181818 !important;
        border: none !important;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: translate3d(100%, 0, 0);
        transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        display: flex;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        margin: 0 !important;
    }

    #user-profile-modal.sheet-open .modal-content.user-profile-modal {
        transform: translate3d(0, 0, 0);
    }

    #user-profile-modal.closing .modal-content.user-profile-modal {
        transform: translate3d(100%, 0, 0);
    }

    /* Убираем “крестики” на мобилках — закрытие жестом/тапом по фону */
    #group-profile-modal .profile-close {
        display: none !important;
    }

    /* В профиле группы скрываем старый медиа-блок и показываем отдельный экран вложений */
    #group-profile-modal .profile-media {
        display: none !important;
    }

    #group-profile-modal.attachments-open .profile-header,
    #group-profile-modal.attachments-open .profile-actions,
    #group-profile-modal.attachments-open .profile-info,
    #group-profile-modal.attachments-open .group-edit-section,
    #group-profile-modal.attachments-open .group-members-section,
    #group-profile-modal.attachments-open .group-attachments-entry {
        display: none !important;
    }

    #group-profile-modal.attachments-open .group-attachments-view {
        display: flex !important;
    }
}

.profile-header {
    text-align: center;
    padding: 40px 20px 20px;
    border-bottom: 1px solid var(--gray-border);
    position: relative;
}

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 20px;
    background: var(--bg-gray-2);
    border: 3px solid var(--white-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--text-white);
    overflow: hidden;
}

/* Анимация аватара при открытии профиля группы на ПК */
@media (min-width: 769px) {
    #group-profile-modal:not(.hidden):not(.closing) .profile-avatar {
        animation: profileAvatarScale 0.5s ease-out 0.05s both;
    }
    @keyframes profileAvatarScale {
        0% {
            opacity: 0;
            transform: scale(0.8);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
}

@media (max-width: 768px) {
    #user-profile-modal:not(.hidden):not(.closing) .profile-avatar,
    #group-profile-modal:not(.hidden):not(.closing) .profile-avatar {
        animation: profileAvatarScaleMobile 0.4s ease-out 0.05s both;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    @keyframes profileAvatarScaleMobile {
        0% {
            opacity: 0;
            transform: scale(0.9);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-name {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-white);
    margin: 0;
}

.profile-status {
    font-size: 14px;
    color: var(--gray-text);
    margin-top: 6px;
}

.profile-menu-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s;
    padding: 0;
}

.profile-menu-btn:hover {
    background: var(--bg-gray-2);
}

.profile-menu-btn svg {
    width: 24px;
    height: 24px;
}

.profile-menu-dropdown {
    position: absolute;
    top: 60px;
    right: 15px;
    background: var(--bg-dark);
    border: 2px solid var(--white-border);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 200px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: none;
}

.profile-menu-dropdown:not(.hidden) {
    display: block;
}

.profile-menu-item {
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    text-align: left;
    transition: background 0.2s;
}

.profile-menu-item:hover {
    background: var(--bg-gray-2);
}

.profile-menu-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Кнопка меню видна везде */
.profile-menu-btn {
    display: flex !important;
}

.profile-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid var(--gray-border);
}

.profile-action-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--white-border);
    background: var(--bg-gray-2);
    color: var(--text-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.profile-action-btn:hover {
    background: var(--bg-gray-3);
    transform: scale(1.1);
}

/* Подпись у кнопки «Чат» — только на мобильном профиле (на ПК скрыта) */
.profile-action-primary-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (min-width: 769px) {
    .profile-action-primary-label {
        display: none !important;
    }
}

.profile-info {
    padding: 20px;
    border-bottom: 1px solid var(--gray-border);
}

.profile-info-item {
    margin-bottom: 20px;
}

.profile-info-item:last-child {
    margin-bottom: 0;
}

.profile-info-label {
    display: block;
    font-size: 12px;
    color: var(--gray-text);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-info-value {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: var(--text-white);
}

.profile-copy-btn {
    background: transparent;
    border: none;
    color: var(--gray-text);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
}

.profile-copy-btn:hover {
    color: var(--text-white);
}

.profile-media {
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.profile-media-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--gray-border);
}

.media-tab {
    background: transparent;
    border: none;
    color: var(--gray-text);
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
    margin-bottom: -1px;
}

.media-tab.active {
    color: var(--text-white);
    border-bottom-color: var(--white-border);
}

.media-tab:hover {
    color: var(--text-white);
}

.profile-media-content {
    min-height: 200px;
}

.media-loading,
.media-error,
.media-empty {
    text-align: center;
    padding: 40px;
    color: var(--gray-text);
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.media-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-gray-2);
    border: 1px solid var(--gray-border);
    cursor: pointer;
    transition: transform 0.3s;
}

.media-item:hover {
    transform: scale(1.05);
}

.media-item img,
.media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-audio-item,
.media-file-item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-white);
    padding: 10px;
}

.media-audio-item svg,
.media-file-item svg {
    flex-shrink: 0;
}

.media-audio-item span,
.media-file-item span {
    font-size: 12px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

@media (max-width: 768px) {
    .user-profile-modal {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    .user-profile-modal .modal-content {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: none !important;
        background: var(--bg-dark);
    }
    #user-profile-modal .modal-content.user-profile-modal {
        background: var(--bg-dark) !important;
        min-height: 100vh;
    }
    .profile-back {
        top: 10px;
        left: 10px;
        width: 44px;
        height: 44px;
    }
    .profile-header {
        padding: 60px 20px 20px;
        flex-shrink: 0;
    }
    .profile-avatar {
        width: 100px;
        height: 100px;
        font-size: 40px;
    }
    .profile-name {
        font-size: 20px;
    }
    .profile-actions {
        flex-shrink: 0;
        padding: 15px;
        gap: 15px;
    }
    .profile-action-btn {
        width: 50px;
        height: 50px;
    }
    .profile-info {
        flex-shrink: 0;
        padding: 15px;
    }
    .profile-media {
        flex: 1;
        overflow-y: auto;
        padding: 15px;
        min-height: 0;
    }
    .profile-back {
        top: 10px;
        left: 10px;
        width: 44px;
        height: 44px;
    }
    .media-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .profile-header {
        padding: 50px 15px 15px;
    }
    .profile-back {
        top: 8px;
        left: 8px;
        width: 40px;
        height: 40px;
    }
    .profile-avatar {
        width: 80px;
        height: 80px;
        font-size: 32px;
    }
    .profile-name {
        font-size: 18px;
    }
    .profile-actions {
        padding: 12px;
        gap: 12px;
    }
    .profile-action-btn {
        width: 48px;
        height: 48px;
    }
    .profile-info {
        padding: 12px;
    }
    .profile-info-value {
        font-size: 14px;
    }
    .profile-media {
        padding: 12px;
    }
    .media-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .media-tab {
        padding: 8px 12px;
        font-size: 12px;
    }
}

.activation-title {
    font-size: 28px;
    font-weight: 600;
    color: #f7f7f7;
    background: linear-gradient(180deg, #ffffff 0%, #d9d9d9 45%, #8f8f8f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
    line-height: 1.08;
}

.activation-description {
    font-size: 18px;
    color: var(--gray-text);
    margin-bottom: 12px;
    line-height: 1.28;
}

.activation-subline {
    min-height: 1.4em;
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.74);
}

.activation-state-icon {
    width: 108px;
    height: 108px;
    margin: 0 auto 20px;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(145deg, #66686c 0%, #4f5156 46%, #2f3237 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f1f1f1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -12px 26px rgba(0, 0, 0, 0.18);
}

.activation-icon {
    width: 54px;
    height: 54px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    transform-origin: center center;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.activation-icon--idle {
    width: 82px;
    height: 82px;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    margin-top: 0;
}

.activation-modal.activation-modal--waiting .activation-icon--idle {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
}

.activation-modal.activation-modal--waiting .activation-icon--waiting {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.activation-email {
    font-size: 24px;
    color: var(--text-white);
    font-weight: 600;
    margin-bottom: 26px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    text-align: center;
    letter-spacing: 0.01em;
    word-break: break-all;
}

.activation-code-inputs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 30px;
}

.activation-code-inputs.hidden {
    display: none;
}

.code-input {
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    background: var(--bg-black);
    border: 2px solid var(--white-border);
    border-radius: 8px;
    color: var(--text-white);
    outline: none;
    transition: all 0.3s;
}

.code-input:focus {
    border-color: var(--white-hover);
    background: var(--bg-gray-1);
}

.code-input:invalid {
    border-color: #ff4444;
}

.activation-btn {
    width: 100%;
    margin-bottom: 18px;
    border-radius: 999px;
    min-height: 52px;
    font-size: 21px;
    font-weight: 600;
    background: #111418 !important;
    border: none !important;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.activation-modal.activation-modal--waiting .activation-btn {
    opacity: 0;
    transform: translateY(-20px) scale(0.72);
    pointer-events: none;
}

.activation-wait-dots {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: -70px 0 26px;
    opacity: 0;
    transform: translateY(26px) scale(0.78);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.activation-wait-dots span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #111418;
    transform: scale(0.85);
    animation: activation-dot-pulse 1.2s ease-in-out infinite;
}

.activation-wait-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.activation-wait-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

.activation-modal.activation-modal--waiting .activation-wait-dots {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.activation-resend {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 15px;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.activation-modal.activation-modal--waiting .activation-resend {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.activation-resend.hidden {
    display: none;
}

.activation-resend[disabled] {
    opacity: 0.45 !important;
    pointer-events: none;
}

.activation-status-info {
    min-height: 1.25em;
    margin: 0 0 14px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.76);
}

@keyframes activation-dot-pulse {
    0%, 100% {
        transform: scale(0.74);
    }
    50% {
        transform: scale(1);
    }
}

.activation-logout {
    background: transparent;
    border: none;
    color: var(--text-white);
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.activation-logout:hover {
    color: var(--white-hover);
}

@media (max-width: 768px) {
    .activation-modal {
        max-width: 360px;
        padding: 30px 22px 24px;
    }

    .activation-state-icon {
        width: 88px;
        height: 88px;
        margin: 0 auto 18px;
    }

    .activation-icon {
        width: 40px;
        height: 40px;
        transform: translate(-50%, -50%) scale(0.85);
    }

    .activation-icon--idle {
        width: 66px;
        height: 66px;
        transform: translate(-50%, -50%) scale(1);
        margin-top: 0;
    }

    .activation-title {
        font-size: 24px;
    }

    .activation-description {
        font-size: 16px;
    }

    .activation-email {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .activation-btn {
        min-height: 48px;
        font-size: 18px;
    }

    .activation-resend {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .sidebar-header {
        padding: 10px 12px 0;
    }
    .user-info {
        transform: translateY(8px);
    }
    .header-actions {
        transform: translateY(8px);
    }
    /* Аватар и username уже скрыты в основном мобильном медиа-запросе */
    .user-name {
        font-size: 16px;
    }
    /* Адаптация пилюльки для маленьких экранов */
    .floating-pill {
        width: 100%;
        max-width: 100%;
        min-height: 32px;
        height: auto;
        margin-top: 2px;
        transform: translateY(6px);
    }
    .search-container {
        padding: 10px;
    }
    .chat-item {
        padding: 10px 12px;
    }
    .chat-avatar {
        width: 40px;
        height: 40px;
        font-size: 14px;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    .messages-container {
        padding: 12px;
    }
    .message-input-container {
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .input-panel {
        padding: 12px 16px;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
} 

.admin-panel-btn {
    margin-left: 0;
}

.admin-panel-btn svg {
    stroke: rgba(255, 255, 255, 0.95);
}

.admin-panel-btn:hover svg {
    stroke: #ffffff;
}

.admin-code-inputs {
    margin: 20px 0;
}

.admin-info-item {
    margin-bottom: 15px;
    padding: 10px;
    background: var(--bg-gray-1);
    /* border: 1px solid var(--white-border); */
    border-radius: 8px;
}

.admin-info-item strong {
    color: var(--text-white);
    display: block;
    margin-bottom: 5px;
}

.admin-info-item span {
    color: var(--gray-text);
}

.admin-map-container {
    margin-top: 15px;
}

.admin-ban-status {
    margin-bottom: 15px;
}

.admin-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.admin-actions button {
    flex: 1;
}

#ban-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-black);
}

.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    pointer-events: none;
}

.side-menu.hidden {
    display: none;
}

.side-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: all;
}

.side-menu:not(.hidden) .side-menu-overlay {
    opacity: 1;
}

.side-menu-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 400px;
    height: 100%;
    background: var(--bg-dark);
    border-left: 2px solid var(--white-border);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    pointer-events: all;
    overflow-y: auto;
}

.side-menu:not(.hidden) .side-menu-content {
    transform: translateX(0);
}

.side-menu-header {
    padding: 20px;
    background: #16171a; /* сплошной фон, чтобы аватар не терялся */
    border-bottom: 2px solid var(--white-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    position: sticky;
    top: 0;
    z-index: 5;
}

.side-menu-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.side-menu-avatar {
    display: none; /* скрываем большую аватарку в правой выезжающей панели */
}

.side-menu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.side-menu-user-details {
    flex: 1;
    min-width: 0;
}

.side-menu-user-name {
    font-weight: 600;
    color: var(--text-white);
    font-size: 18px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.side-menu-user-username {
    color: var(--gray-text);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.side-menu-close {
    background: transparent;
    border: none;
    color: var(--white-border);
    font-size: 32px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.side-menu-close:hover {
    background: var(--bg-gray-2);
}

.side-menu-items {
    flex: 1;
    padding: 10px 0;
}

.side-menu-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--bg-gray-2);
}

.side-menu-item:hover {
    background: var(--bg-gray-1);
}

.side-menu-item-icon {
    font-size: 24px;
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.side-menu-item-text {
    flex: 1;
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
}

.side-menu-item-arrow {
    color: var(--gray-text);
    font-size: 24px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .side-menu-content {
        width: 90%;
        max-width: none;
    }
    .side-menu-header {
        padding: 15px;
    }
    .side-menu-avatar {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    .side-menu-user-name {
        font-size: 16px;
    }
    .side-menu-user-username {
        font-size: 13px;
    }
    .side-menu-item {
        padding: 12px 15px;
    }
    .side-menu-item-icon {
        font-size: 20px;
        width: 25px;
    }
    .side-menu-item-text {
        font-size: 15px;
    }
}

.call-header-status {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-white);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
}

.call-active-top-row .call-timer {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    opacity: 1;
}

.call-active-top-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
    z-index: 11;
    flex-wrap: wrap;
}

.call-connection-status {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.94);
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    max-width: 90vw;
    text-align: center;
}

.call-connection-status.hidden {
    display: none !important;
}

.call-connection-status--centered {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10002;
    font-size: 15px;
    padding: 10px 18px;
}

.call-connection-status--fs {
    font-size: 12px;
    padding: 4px 10px;
}

.fullscreen-call-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

@media (min-width: 769px) {
    .fullscreen-call-header-left {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
}

.call-screen {
    --call-glass-bg: rgba(16, 18, 28, 0.55);
    --call-glass-border: rgba(255, 255, 255, 0.12);
    --call-radius-lg: 28px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding-top: max(0px, env(safe-area-inset-top));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    padding-left: max(0px, env(safe-area-inset-left));
    box-sizing: border-box;
}

.call-screen.hidden {
    display: none !important;
}

.call-drag-handle {
    display: none;
}

.call-tools-group {
    display: flex;
    align-items: center;
}

/* Верхняя «таблетка» (таймер + индикатор) поверх видео — ПК */
.call-top-pill {
    display: none;
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 125;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(12, 12, 18, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.call-top-pill .call-timer {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    opacity: 1;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: #fff;
}

.call-signal-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 14px;
}

.call-signal-bars i {
    display: block;
    width: 4px;
    border-radius: 1px;
    background: #34c759;
}

.call-signal-bars i:nth-child(1) {
    height: 5px;
}

.call-signal-bars i:nth-child(2) {
    height: 8px;
}

.call-signal-bars i:nth-child(3) {
    height: 11px;
}

.call-signal-bars i:nth-child(4) {
    height: 14px;
}

.call-connection-status--in-pill {
    font-size: 11px;
    padding: 3px 8px;
    max-width: min(200px, 38vw);
}

.call-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
}

.call-container.active-call {
    justify-content: space-between;
}

.call-container.waiting-call {
    background: var(--bg-dark);
    justify-content: space-between;
    padding: 0;
}

.you-waiting-call-container .caller-info {
    gap: 14px;
}

.you-waiting-call-container .call-timer {
    opacity: 1;
    color: #d7d8de;
    top: 34px;
    font-size: 20px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.you-waiting-call-container .caller-avatar {
    width: 132px;
    height: 132px;
    border: 4px solid rgba(255, 255, 255, 0.76);
    background: #c7c7ca;
}

.you-waiting-call-container .caller-name {
    font-size: 48px;
    font-weight: 500;
}

.rejected-status-text {
    color: #dfe2e7;
}

.rejected-caller-avatar {
    border-color: #ff3b30;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.2);
}

.rejected-controls {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
}

.rejected-close-btn {
    min-width: 170px;
    height: 52px;
    border-radius: 14px;
    border: 0;
    background: #ff3b30;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0 24px;
}

.rejected-close-btn:hover {
    background: #df271d;
}

@media (min-width: 769px) {
    /* На ПК звонки всегда как окно внутри мессенджера */
    .call-desktop-window {
        background: transparent;
        align-items: flex-start;
        justify-content: flex-start;
        pointer-events: none;
        z-index: 10050 !important;
    }
    .call-desktop-window .call-container,
    .call-desktop-window .fullscreen-call-container {
        pointer-events: auto;
        width: min(820px, calc(100vw - 420px));
        height: min(560px, calc(100vh - 110px));
        min-width: 560px;
        min-height: 360px;
        border-radius: 28px;
        overflow: hidden;
        background: #0c0c12;
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
        margin: 72px 0 0 382px;
        justify-content: space-between;
        padding: 14px 20px 18px;
        position: fixed;
        cursor: default;
        resize: both;
    }
    .call-desktop-window .call-drag-handle {
        display: block;
        width: 62px;
        height: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        margin: 0;
        cursor: grab;
        flex-shrink: 0;
        position: absolute;
        top: 12px;
        left: 14px;
        z-index: 130;
    }
    .call-desktop-window .call-drag-handle:active {
        cursor: grabbing;
    }
    #active-call-screen .call-container,
    #fullscreen-call-screen .fullscreen-call-container {
        padding: 0;
    }
    #active-call-screen .call-top-pill {
        display: flex;
    }
    #active-call-screen .call-video-container {
        background: #000;
        animation: none;
    }
    #active-call-screen.call-desktop-window #remote-video.pc-remote-portrait,
    #fullscreen-call-screen.call-desktop-window #fullscreen-remote-video.pc-remote-portrait {
        object-fit: contain;
    }
    #active-call-screen.call-desktop-window #remote-video.pc-remote-landscape,
    #fullscreen-call-screen.call-desktop-window #fullscreen-remote-video.pc-remote-landscape {
        object-fit: cover;
    }
    #active-call-screen .call-controls,
    #fullscreen-call-screen .fullscreen-call-controls {
        left: 50%;
        right: auto;
        bottom: 22px;
        transform: translateX(-50%);
        width: auto;
        justify-content: center;
        align-items: center;
        gap: 16px;
        padding: 0;
        background: none;
        z-index: 120;
    }
    /* Нижняя панель ПК: тёмная пилюля (#333) + отдельная красная кнопка с обводкой */
    #active-call-screen .call-tools-group,
    #fullscreen-call-screen .call-tools-group {
        background: #333333;
        border-radius: 999px;
        border: 0;
        padding: 6px 10px;
        gap: 2px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.42);
    }
    #active-call-screen .call-tools-group .call-btn,
    #fullscreen-call-screen .call-tools-group .call-btn {
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #ffffff;
    }
    #active-call-screen .call-tools-group .call-btn svg,
    #fullscreen-call-screen .call-tools-group .call-btn svg {
        stroke-width: 1.5;
    }
    #active-call-screen .call-tools-group .call-btn:hover,
    #fullscreen-call-screen .call-tools-group .call-btn:hover {
        transform: none;
        background: rgba(255, 255, 255, 0.12);
    }
    #active-call-screen .end-call-btn,
    #fullscreen-call-screen .end-call-btn:not(.pc-call-dock-end) {
        width: 54px;
        height: 54px;
        flex-shrink: 0;
        border-radius: 50%;
        border: 3px solid #b30000;
        background: #ff0000;
        color: #fff;
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38);
        box-sizing: border-box;
    }
    #active-call-screen .end-call-btn svg,
    #fullscreen-call-screen .end-call-btn svg {
        stroke-width: 1.5;
    }
    #active-call-screen .end-call-btn:hover,
    #fullscreen-call-screen .end-call-btn:hover {
        background: #e60000;
        border-color: #8f0000;
        transform: none;
    }
    #active-call-screen .call-top-pill .call-timer {
        top: auto;
        left: auto;
    }
    /* Экран «ТЫ ОЖИДАЕШЬ»: старая мобильная доска — только не v2 */
    #call-you-waiting-screen .call-controls-bottom:not(.pc-call-dock-bar--v2) {
        position: absolute;
        left: 50%;
        right: auto;
        bottom: 22px;
        transform: translateX(-50%);
        width: auto;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 8px 10px;
        background: rgba(40, 40, 40, 0.88);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 18px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
        transition: left 0.32s ease, bottom 0.32s ease, transform 0.32s ease, gap 0.32s ease;
    }
    #call-you-waiting-screen .call-control-btn {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        border: 0;
        background: rgba(55, 55, 55, 0.96);
        color: #ffffff;
        transition: width 0.32s ease, height 0.32s ease, background 0.2s ease, border-radius 0.2s ease;
    }
    #call-you-waiting-screen .call-control-btn svg {
        stroke-width: 1.5;
    }
    #call-you-waiting-screen .call-control-btn:hover {
        transform: none;
        background: rgba(72, 72, 72, 0.98);
    }
    #call-you-waiting-screen .call-control-btn.end-call-btn:not(.pc-call-dock-end) {
        background: #ff4b4b;
    }
    #call-you-waiting-screen .call-control-btn.end-call-btn:not(.pc-call-dock-end):hover {
        background: #e63e3e;
    }
    #call-you-waiting-screen.transition-to-active .call-controls-bottom {
        left: 18px;
        bottom: 18px;
        transform: none;
        gap: 6px;
        justify-content: flex-start;
    }
    #call-you-waiting-screen.transition-to-active .call-control-btn {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }
    #call-you-waiting-screen.transition-to-active .call-control-btn.end-call-btn {
        width: 48px;
        height: 48px;
    }

    /* ——— ПК: полноэкранный звонок (макет) ——— */
    .pc-call-mobile-only {
        display: none !important;
    }

    #call-waiting-for-you-screen,
    #call-you-waiting-screen,
    #fullscreen-call-screen,
    #call-rejected-screen {
        position: fixed;
        inset: 0;
        z-index: 10050 !important;
        background: #141517;
        align-items: stretch;
        justify-content: stretch;
        pointer-events: auto;
        margin: 0 !important;
        transition: padding 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.35s ease;
    }

    #call-waiting-for-you-screen .call-container,
    #call-you-waiting-screen .call-container,
    #call-rejected-screen .call-container,
    #fullscreen-call-screen .fullscreen-call-container {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        resize: none !important;
        background: #141517 !important;
        position: relative !important;
        overflow: hidden;
        align-items: stretch !important;
        transition: border-radius 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    #call-waiting-for-you-screen.call-desktop-window:not(.hidden),
    #call-you-waiting-screen.call-desktop-window:not(.hidden),
    #fullscreen-call-screen.call-desktop-window:not(.hidden),
    #call-rejected-screen.call-desktop-window:not(.hidden) {
        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        pointer-events: auto;
        padding: 0 !important;
        transition: padding 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.35s ease;
    }

    #call-waiting-for-you-screen.call-screen.hidden,
    #call-you-waiting-screen.call-screen.hidden,
    #fullscreen-call-screen.call-screen.hidden,
    #call-rejected-screen.call-screen.hidden,
    #active-call-screen.call-screen.hidden {
        display: none !important;
        pointer-events: none !important;
    }

    .pc-call-desktop-only {
        display: none !important;
    }

    .pc-call-top-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 180;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 18px 20px 0;
        pointer-events: none;
    }

    .pc-call-top-minimize {
        position: absolute;
        left: 20px;
        top: 18px;
        pointer-events: auto;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 0;
        background: #202225;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: none;
        transition: background 0.22s ease;
    }

    .pc-call-top-minimize:hover {
        background: #2a2d31;
    }

    .pc-call-top-info {
        pointer-events: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 132px;
        padding: 10px 22px 11px;
        border-radius: 999px;
        background: #202225;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .pc-call-top-name {
        color: rgba(255, 255, 255, 0.62);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }

    .pc-call-top-timer {
        color: #fff;
        font-size: 22px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
        letter-spacing: 0.01em;
    }

    #call-you-waiting-screen .pc-call-dock-bar--v2,
    #fullscreen-call-screen .pc-call-dock-bar--v2 {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        gap: 16px !important;
        z-index: 220;
    }

    .pc-call-dock-bar--v2 {
        gap: 16px !important;
        bottom: max(28px, env(safe-area-inset-bottom)) !important;
    }

    .pc-call-dock-group {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 0 4px 0 0;
        border-radius: 999px;
        background: #202225;
        box-shadow: none;
    }

    .pc-call-dock-toggle {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 0;
        background: transparent !important;
        color: #fff !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        position: relative;
        overflow: hidden;
        transition: background 0.28s ease, color 0.28s ease;
    }

    .pc-call-dock-toggle.active {
        background: #fff !important;
        color: #202225 !important;
    }

    .pc-call-dock-toggle:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    .pc-call-dock-toggle.active:hover {
        background: #f2f2f2 !important;
    }

    .pc-call-dock-bar--v2 .pc-call-dock-toggle .pc-call-icon,
    .pc-call-dock-bar--v2 .pc-call-dock-round.screen-share-btn .pc-call-icon,
    .pc-call-dock-bar--v2 .pc-call-dock-round.pc-call-dock-record .pc-call-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: 0;
        flex-shrink: 0;
        pointer-events: none;
        transition:
            opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.26s cubic-bezier(0.34, 1.28, 0.64, 1);
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }

    .pc-call-dock-bar--v2 .pc-call-dock-toggle .pc-call-icon--on,
    .pc-call-dock-bar--v2 .pc-call-dock-round.screen-share-btn .pc-call-icon--on,
    .pc-call-dock-bar--v2 .pc-call-dock-round.pc-call-dock-record .pc-call-icon--on {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }

    .pc-call-dock-bar--v2 .pc-call-dock-toggle.active .pc-call-icon--on,
    .pc-call-dock-bar--v2 .pc-call-dock-round.screen-share-btn.active .pc-call-icon--on,
    .pc-call-dock-bar--v2 .pc-call-dock-round.pc-call-dock-record.active .pc-call-icon--on {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.82);
    }

    .pc-call-dock-bar--v2 .pc-call-dock-toggle.active .pc-call-icon--off,
    .pc-call-dock-bar--v2 .pc-call-dock-round.screen-share-btn.active .pc-call-icon--off,
    .pc-call-dock-bar--v2 .pc-call-dock-round.pc-call-dock-record.active .pc-call-icon--off {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }

    .pc-call-dock-bar--v2 .pc-call-dock-round > svg:not(.pc-call-icon),
    .pc-call-dock-bar--v2 .pc-call-dock-end > svg {
        transform: scale(1.15);
    }

    @media (prefers-reduced-motion: reduce) {
        .pc-call-dock-bar--v2 .pc-call-dock-toggle .pc-call-icon,
        .pc-call-dock-bar--v2 .pc-call-dock-round.screen-share-btn .pc-call-icon,
        .pc-call-dock-bar--v2 .pc-call-dock-round.pc-call-dock-record .pc-call-icon,
        .pc-call-dock-toggle,
        .pc-call-dock-round {
            transition: none !important;
        }
    }

    .pc-call-dock-chevron {
        width: 24px;
        height: 56px;
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.72);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
    }

    .pc-call-dock-chevron:hover,
    .pc-call-dock-chevron[aria-expanded="true"] {
        color: #fff;
    }

    .pc-call-dock-round {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 0;
        background: #202225 !important;
        color: #fff !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        position: relative;
        transition: background 0.28s ease, color 0.28s ease;
    }

    .pc-call-dock-round:hover {
        background: #2a2d31 !important;
    }

    .pc-call-dock-round.screen-share-btn:not(.active),
    .pc-call-dock-round.pc-call-dock-record:not(.active) {
        background: #202225 !important;
        color: #fff !important;
    }

    .pc-call-dock-round.pc-call-dock-end {
        background: #ff0000 !important;
        color: #fff !important;
    }

    .pc-call-dock-round.screen-share-btn:not(.active):hover,
    .pc-call-dock-round.pc-call-dock-record:not(.active):hover {
        background: #2a2d31 !important;
    }

    .pc-call-dock-round.pc-call-dock-end:hover {
        background: #e60000 !important;
    }

    .pc-call-dock-round.screen-share-btn.active {
        background: #ff3b30 !important;
        color: #fff !important;
    }

    .pc-call-dock-round.screen-share-btn.active:hover {
        background: #ff5549 !important;
    }

    .pc-call-dock-round.pc-call-dock-record.active {
        background: #fff !important;
        color: #202225 !important;
        overflow: hidden;
    }

    .pc-call-dock-round.pc-call-dock-record.active:hover {
        background: #f2f2f2 !important;
    }

    .pc-call-dock-round.screen-share-btn {
        overflow: hidden;
    }

    .pc-call-dock-bar--v2 .pc-call-dock-record.active .pc-call-icon--off * {
        fill: #ff3b30 !important;
        stroke: none !important;
    }

    #call-you-waiting-screen .pc-call-hero-glow,
    #call-waiting-for-you-screen .pc-call-hero-glow,
    #fullscreen-call-screen .pc-call-hero-glow {
        display: none !important;
    }

    #call-you-waiting-screen .pc-call-top-timer {
        font-size: 18px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.88);
    }

    #call-you-waiting-screen.is-call-active .pc-call-top-timer {
        font-size: 22px;
        font-weight: 600;
        color: #fff;
    }

    .pc-call-dock-record.active {
        box-shadow: none !important;
    }

    .pc-call-dock-bar--v2 .pc-call-dock-chevron svg {
        width: 14px;
        height: 14px;
    }

    .pc-call-dock-bar--v2 .pc-call-dock-round.screen-share-btn:not(.active) .pc-call-icon--on *,
    .pc-call-dock-bar--v2 .pc-call-dock-round.pc-call-dock-record:not(.active) .pc-call-icon--on *,
    .pc-call-dock-bar--v2 .pc-call-dock-end svg,
    .pc-call-dock-bar--v2 .pc-call-dock-end svg path {
        fill: #fff !important;
        stroke: #fff !important;
    }

    .pc-call-dock-end {
        background: #ff0000 !important;
        color: #fff !important;
    }

    .pc-call-dock-end:hover {
        background: #e60000 !important;
    }

    .pc-call-device-menu {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 10px);
        transform: translateX(-50%);
        min-width: 220px;
        max-width: min(320px, calc(100vw - 32px));
        max-height: 240px;
        overflow-y: auto;
        padding: 6px;
        border-radius: 14px;
        background: #202225;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
        z-index: 200;
    }

    .pc-call-device-menu.hidden {
        display: none !important;
    }

    .pc-call-device-menu-item {
        display: block;
        width: 100%;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: rgba(255, 255, 255, 0.88);
        text-align: left;
        padding: 10px 12px;
        font-size: 13px;
        line-height: 1.25;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pc-call-device-menu-item:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    .pc-call-device-menu-item.is-selected {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    #call-you-waiting-screen .call-local-pip,
    #fullscreen-call-screen .call-local-pip {
        top: 18px;
        right: 20px;
        width: auto;
        height: auto;
        max-width: 280px;
        max-height: 190px;
        min-width: 150px;
        min-height: 100px;
        border-radius: 18px;
        border: none;
        box-shadow: none;
        background: #202225;
        object-fit: cover;
    }

    #call-you-waiting-screen .call-local-pip-shell,
    #fullscreen-call-screen .call-local-pip-shell {
        position: absolute;
        top: 18px;
        right: 20px;
        width: auto;
        height: auto;
        max-width: 280px;
        max-height: 190px;
        min-width: 150px;
        min-height: 100px;
        border-radius: 18px;
        overflow: hidden;
        z-index: 200;
        pointer-events: none;
        box-shadow: none;
    }

    #call-you-waiting-screen .call-local-pip-shell.hidden,
    #fullscreen-call-screen .call-local-pip-shell.hidden {
        display: none !important;
    }

    #call-you-waiting-screen .call-local-pip-shell .call-local-pip,
    #fullscreen-call-screen .call-local-pip-shell .call-local-pip {
        position: absolute;
        inset: 0;
        top: auto;
        right: auto;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        min-width: 0;
        min-height: 0;
        border-radius: 0;
        object-fit: cover;
    }

    .pc-call-camera-off-fallback {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: inherit;
        overflow: hidden;
    }

    .pc-call-camera-off-fallback.hidden {
        display: none !important;
    }

    .pc-call-camera-off-avatar {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 600;
        color: #fff;
        flex-shrink: 0;
        box-shadow: none;
    }

    .pc-call-camera-off-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
    }

    #fullscreen-call-screen.pc-call-no-video .pc-call-stage,
    #call-you-waiting-screen.pc-call-no-video .pc-call-stage,
    #call-waiting-for-you-screen .pc-call-stage {
        background: #141517 !important;
    }

    #fullscreen-call-screen.pc-call-no-video .pc-call-hero-avatar,
    #call-you-waiting-screen.pc-call-no-video .pc-call-hero-avatar,
    #call-waiting-for-you-screen .pc-call-hero-avatar {
        box-shadow: none;
    }
    #fullscreen-call-screen.group-call-mode .pc-call-dock-record,
    #fullscreen-call-screen.group-call-mode .pc-call-dock-bar--v2 .pc-call-dock-group {
        display: none !important;
    }

    body:not(.layout-tablet) .pc-call-desktop-only.pc-call-top-bar,
    body:not(.layout-tablet) .pc-call-dock-bar.pc-call-dock-bar--v2.pc-call-desktop-only {
        display: flex !important;
    }

    #fullscreen-call-screen .pc-call-hero-name,
    #call-you-waiting-screen .pc-call-hero-name {
        display: none;
    }

    .pc-call-layout {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        align-items: stretch !important;
        width: 100%;
    }

    .pc-call-stage {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        min-width: 0;
        width: 100%;
        align-self: stretch;
        padding: 72px 16px 110px;
        background-size: cover;
        background-position: center;
    }

    .pc-call-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        position: relative;
        z-index: 2;
        text-align: center;
        width: 100%;
        max-width: 520px;
    }

    .pc-call-has-video .pc-call-hero {
        display: none;
    }

    .pc-call-hero-glow {
        position: absolute;
        width: min(500px, 82vw);
        height: min(500px, 82vw);
        top: 42%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: radial-gradient(circle at 42% 38%, rgba(118, 118, 124, 0.55) 0%, rgba(88, 88, 94, 0.28) 45%, transparent 72%);
        filter: blur(40px);
        pointer-events: none;
        z-index: 0;
        transition: background 0.45s ease;
    }

    .pc-call-hero-glow--rejected {
        background: radial-gradient(circle at 42% 38%, rgba(255, 59, 48, 0.65) 0%, rgba(220, 40, 32, 0.28) 45%, transparent 72%);
    }

    .pc-call-hero-avatar {
        position: relative;
        z-index: 1;
        width: 164px;
        height: 164px;
        border-radius: 50%;
        background: #5c5c66;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 62px;
        font-weight: 600;
        color: #fff;
        overflow: hidden;
        box-shadow: none;
    }

    .pc-call-hero-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .pc-call-hero-name {
        position: relative;
        z-index: 1;
        color: #fff;
        font-size: clamp(26px, 3.8vw, 38px);
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.15;
    }

    .pc-call-hero-status {
        position: relative;
        z-index: 1;
        color: rgba(255, 255, 255, 0.52);
        font-size: 15px;
        font-weight: 500;
        margin-top: -6px;
    }

    .pc-call-video-column {
        display: none;
        position: relative;
        height: min(78vh, 720px);
        aspect-ratio: 9 / 16;
        max-width: min(36vw, 300px);
        width: auto;
        overflow: hidden;
        background: #0f3d18;
        z-index: 3;
        align-items: stretch;
        justify-content: flex-end;
    }

    .pc-call-has-video .pc-call-video-column {
        display: flex;
        flex-direction: column;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        aspect-ratio: auto;
        background: #000;
        z-index: 1;
    }

    .pc-call-video-column #fullscreen-remote-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000;
        z-index: 1;
    }

    .pc-call-video-name {
        position: absolute;
        left: 50%;
        bottom: 108px;
        transform: translateX(-50%);
        z-index: 4;
        padding: 0 12px;
        text-align: center;
        color: #fff;
        font-size: clamp(24px, 3.2vw, 34px);
        font-weight: 600;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
        pointer-events: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: min(90vw, 480px);
    }

    #call-you-waiting-screen .call-local-pip,
    #fullscreen-call-screen .call-local-pip {
        position: absolute;
        top: 22px;
        right: 22px;
        width: auto;
        height: auto;
        max-width: 280px;
        max-height: 190px;
        min-width: 150px;
        min-height: 100px;
        border-radius: 18px;
        border: none;
        object-fit: cover;
        background: #202225;
        z-index: 200;
        box-shadow: none;
        pointer-events: none;
    }

    #call-you-waiting-screen .call-local-pip.hidden,
    #fullscreen-call-screen .call-local-pip.hidden {
        display: none !important;
    }

    .pc-call-dock-bar {
        position: absolute;
        left: 50%;
        bottom: max(22px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: 130;
        display: flex;
        align-items: center;
        gap: 28px;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        width: auto;
        right: auto;
    }

    .pc-call-dock-pill {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        border-radius: 999px;
        background: rgba(12, 12, 12, 0.98);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .pc-call-dock-pill--tools {
        gap: 0;
        padding: 3px 6px;
    }

    .pc-call-dock-pill--end {
        gap: 8px;
        padding: 3px 8px 3px 14px;
    }

    .pc-call-dock-settings-btn,
    .pc-call-dock-pill .call-btn,
    .pc-call-dock-pill .call-control-btn {
        width: 36px;
        height: 36px;
        border-radius: 0;
        border: 0;
        background: transparent !important;
        color: #fff;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: none !important;
        transform: none;
        opacity: 1;
    }

    .pc-call-dock-settings-btn:hover,
    .pc-call-dock-pill .call-btn:hover,
    .pc-call-dock-pill .call-control-btn:hover {
        background: transparent !important;
        opacity: 0.82;
        transform: none;
    }

    .pc-call-dock-pill .call-btn.active,
    .pc-call-dock-pill .call-control-btn.active,
    .pc-call-dock-pill .call-btn.camera-btn.active,
    .pc-call-dock-pill .call-control-btn.camera-btn.active,
    .pc-call-dock-pill .call-btn.mic-btn.active,
    .pc-call-dock-pill .call-control-btn.mic-btn.active,
    .pc-call-dock-pill .call-btn.screen-share-btn.active,
    .pc-call-dock-pill .call-control-btn.screen-share-btn.active {
        background: transparent !important;
        opacity: 0.45;
        transform: none;
    }

    .pc-call-dock-timer {
        font-size: 14px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: #fff;
        min-width: 44px;
        text-align: center;
        padding: 0 2px;
        white-space: nowrap;
    }

    .pc-call-dock .call-signal-bars {
        margin: 0 4px;
    }

    #fullscreen-call-screen .fullscreen-call-controls:not(.pc-call-dock-bar),
    #call-you-waiting-screen .call-controls-bottom:not(.pc-call-dock-bar),
    #call-waiting-for-you-screen .call-controls,
    #call-waiting-for-you-screen .pc-call-dock,
    #call-waiting-for-you-screen .pc-call-dock--incoming {
        left: 50%;
        right: auto;
        bottom: max(28px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        width: auto;
        max-width: none;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        gap: 56px;
        justify-content: center;
    }

    #fullscreen-call-screen .pc-call-dock-bar,
    #call-you-waiting-screen .pc-call-dock-bar {
        gap: 28px;
    }

    #fullscreen-call-screen .pc-call-dock-pill .call-btn,
    #call-you-waiting-screen .pc-call-dock-pill .call-control-btn {
        width: 36px;
        height: 36px;
    }

    #fullscreen-call-screen .end-call-btn.pc-call-dock-end:not(.pc-call-dock-round),
    #call-you-waiting-screen .end-call-btn.pc-call-dock-end:not(.pc-call-dock-round),
    #fullscreen-call-screen .call-control-btn.end-call-btn.pc-call-dock-end:not(.pc-call-dock-round),
    #call-you-waiting-screen .call-control-btn.end-call-btn.pc-call-dock-end:not(.pc-call-dock-round) {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        border-radius: 0;
        border: none !important;
        background: transparent !important;
        color: #ff3b30 !important;
        margin-left: 0;
        box-shadow: none !important;
        outline: none;
    }

    #fullscreen-call-screen .end-call-btn.pc-call-dock-end:not(.pc-call-dock-round) svg,
    #call-you-waiting-screen .end-call-btn.pc-call-dock-end:not(.pc-call-dock-round) svg,
    #fullscreen-call-screen .call-control-btn.end-call-btn.pc-call-dock-end:not(.pc-call-dock-round) svg,
    #call-you-waiting-screen .call-control-btn.end-call-btn.pc-call-dock-end:not(.pc-call-dock-round) svg {
        stroke: #ff3b30 !important;
        color: #ff3b30 !important;
    }

    #fullscreen-call-screen .end-call-btn.pc-call-dock-end:not(.pc-call-dock-round):hover,
    #call-you-waiting-screen .end-call-btn.pc-call-dock-end:not(.pc-call-dock-round):hover,
    #fullscreen-call-screen .call-control-btn.end-call-btn.pc-call-dock-end:not(.pc-call-dock-round):hover,
    #call-you-waiting-screen .call-control-btn.end-call-btn.pc-call-dock-end:not(.pc-call-dock-round):hover {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #ff5549 !important;
        transform: none;
    }

    #fullscreen-call-screen .end-call-btn.pc-call-dock-end:not(.pc-call-dock-round):hover svg,
    #call-you-waiting-screen .end-call-btn.pc-call-dock-end:not(.pc-call-dock-round):hover svg,
    #fullscreen-call-screen .call-control-btn.end-call-btn.pc-call-dock-end:not(.pc-call-dock-round):hover svg,
    #call-you-waiting-screen .call-control-btn.end-call-btn.pc-call-dock-end:not(.pc-call-dock-round):hover svg {
        stroke: #ff5549 !important;
    }

    #fullscreen-call-screen .fullscreen-call-header {
        display: none;
    }

    .pc-call-dock {
        position: absolute;
        left: 50%;
        bottom: max(22px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: 130;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 20px 10px 16px;
        border-radius: 999px;
        background: rgba(12, 12, 12, 0.98);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.08);
        width: auto;
        right: auto;
        margin: 0;
    }

    .pc-call-dock--incoming {
        gap: 56px;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        width: auto;
    }

    .pc-call-dock--incoming .call-btn {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }

    .pc-call-dock-decline {
        background: #ff3b30;
    }

    .pc-call-dock-decline:hover {
        background: #e6342a;
    }

    .pc-call-dock-accept {
        background: #34c759;
    }

    .pc-call-dock-accept:hover {
        background: #2fb350;
    }

    .pc-call-dock--rejected {
        padding: 8px 14px;
    }

    .pc-call-dock--rejected .rejected-close-btn {
        min-width: 140px;
        height: 48px;
        border-radius: 999px;
        font-size: 16px;
    }

    #active-call-screen.call-desktop-window {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* ——— Мобильный звонок (макет) ——— */
    #call-waiting-for-you-screen,
    #call-you-waiting-screen,
    #fullscreen-call-screen {
        position: fixed;
        inset: 0;
        z-index: 10050 !important;
        background: #000;
        align-items: stretch;
        justify-content: stretch;
    }

    #call-waiting-for-you-screen .call-container,
    #call-you-waiting-screen .call-container,
    #fullscreen-call-screen .fullscreen-call-container {
        width: 100% !important;
        height: 100% !important;
        min-height: 100dvh;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 0 !important;
        background: #000 !important;
        box-shadow: none !important;
    }

    .mobile-call-top-timer {
        display: block;
        position: absolute;
        top: calc(14px + env(safe-area-inset-top, 0px));
        left: 50%;
        transform: translateX(-50%);
        z-index: 150;
        font-size: 17px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: #fff;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
        pointer-events: none;
        letter-spacing: 0.02em;
    }

    #call-you-waiting-screen .call-participants-container,
    #call-you-waiting-screen .call-header-status,
    #call-you-waiting-screen .call-drag-handle,
    #call-you-waiting-screen .fullscreen-toggle-btn {
        display: none !important;
    }

    #call-waiting-for-you-screen .call-header-status {
        display: none !important;
    }

    #call-you-waiting-screen .call-container,
    #call-waiting-for-you-screen .call-container,
    #fullscreen-call-screen .fullscreen-call-container {
        position: relative;
    }

    #call-you-waiting-screen .pc-call-stage,
    #call-waiting-for-you-screen .pc-call-stage,
    #fullscreen-call-screen .pc-call-stage {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: calc(52px + env(safe-area-inset-top, 0px)) 16px calc(120px + env(safe-area-inset-bottom, 0px));
    }

    #call-you-waiting-screen .pc-call-hero,
    #call-waiting-for-you-screen .pc-call-hero,
    #fullscreen-call-screen .pc-call-hero {
        position: static;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 112px;
        height: 112px;
        max-width: none;
        margin: 0 auto;
        flex-shrink: 0;
    }

    /* Входящий / исходящий без видео: аватар + ник + статус по центру */
    #call-waiting-for-you-screen .pc-call-hero,
    #call-you-waiting-screen.pc-call-no-video .pc-call-hero {
        width: min(92vw, 320px);
        height: auto;
        min-height: 0;
        gap: 12px;
        overflow: visible;
    }

    #call-you-waiting-screen .pc-call-hero-glow,
    #call-waiting-for-you-screen .pc-call-hero-glow,
    #fullscreen-call-screen .pc-call-hero-glow {
        position: absolute;
        width: min(220px, 72vw);
        height: min(220px, 72vw);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        filter: blur(36px);
        pointer-events: none;
        z-index: 0;
    }

    #call-you-waiting-screen .pc-call-hero-avatar,
    #call-waiting-for-you-screen .pc-call-hero-avatar,
    #fullscreen-call-screen .pc-call-hero-avatar {
        position: relative;
        z-index: 1;
        width: 112px;
        height: 112px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        font-weight: 600;
        color: #fff;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
    }

    #call-waiting-for-you-screen .pc-call-hero-avatar,
    #call-you-waiting-screen.pc-call-no-video .pc-call-hero-avatar {
        width: 128px;
        height: 128px;
        font-size: 46px;
        margin: 0 auto;
    }

    #call-you-waiting-screen .pc-call-hero-avatar img,
    #call-waiting-for-you-screen .pc-call-hero-avatar img,
    #fullscreen-call-screen .pc-call-hero-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
    }

    #fullscreen-call-screen.pc-call-no-video .pc-call-hero,
    #call-you-waiting-screen.pc-call-no-video .pc-call-hero {
        display: flex;
    }

    #fullscreen-call-screen.pc-call-has-video .pc-call-hero,
    #call-you-waiting-screen.pc-call-has-video .pc-call-hero {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #fullscreen-call-screen.pc-call-has-video .call-container .pc-call-hero-name,
    #fullscreen-call-screen.pc-call-has-video .fullscreen-call-container .pc-call-hero-name {
        display: none !important;
    }

    #fullscreen-call-screen .pc-call-video-column,
    #call-you-waiting-screen .pc-call-video-column {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: auto;
        background: #000;
        z-index: 8;
    }

    #fullscreen-call-screen.pc-call-has-video .pc-call-video-column {
        z-index: 20;
    }

    #fullscreen-call-screen.pc-call-no-video .pc-call-video-column,
    #call-you-waiting-screen.pc-call-no-video .pc-call-video-column {
        /* Не прячем полностью колонку, чтобы видео-элемент мог продолжать
           пробовать декодировать и мы могли детектить восстановление. */
        display: block;
        opacity: 0;
        pointer-events: none;
    }

    #fullscreen-call-screen .pc-call-video-name {
        display: none;
    }

    /* Статус под ником на экранах ожидания — оставляем видимым */
    #call-you-waiting-screen .pc-call-hero-status,
    #call-waiting-for-you-screen .pc-call-hero-status {
        display: block;
        position: static;
        margin: 0;
        width: 100%;
        text-align: center;
        color: rgba(255, 255, 255, 0.62);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 0.01em;
    }

    /* Мобильный звонок без видео собеседника — макет с аватаром и волнами */
    #fullscreen-call-screen.pc-call-no-video .fullscreen-call-container {
        background: #1a1a1a !important;
    }

    #fullscreen-call-screen.pc-call-no-video .mobile-call-top-timer {
        display: none !important;
    }

    .mobile-call-hero-timer {
        display: none;
    }

    #fullscreen-call-screen.pc-call-no-video .mobile-call-hero-timer {
        display: block;
        position: static;
        transform: none;
        margin-top: 10px;
        font-size: 15px;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        color: rgba(255, 255, 255, 0.72);
        text-shadow: none;
        letter-spacing: 0.04em;
    }

    #fullscreen-call-screen.pc-call-no-video .pc-call-stage {
        padding: calc(40px + env(safe-area-inset-top, 0px)) 20px calc(148px + env(safe-area-inset-bottom, 0px));
    }

    #fullscreen-call-screen.pc-call-no-video .pc-call-hero {
        width: auto;
        height: auto;
        gap: 0;
    }

    #fullscreen-call-screen.pc-call-no-video .pc-call-hero-glow {
        display: none;
    }

    #fullscreen-call-screen.pc-call-no-video .pc-call-hero-avatar {
        width: 120px;
        height: 120px;
        font-size: 44px;
        background: rgba(180, 180, 188, 0.35);
        box-shadow: none;
    }

    #fullscreen-call-screen.pc-call-no-video .fullscreen-call-container .pc-call-hero-name {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        width: auto;
        max-width: min(88vw, 320px);
        margin-top: 18px;
        font-size: clamp(22px, 6vw, 30px);
        font-weight: 700;
        color: #fff;
        text-align: center;
    }

    .mobile-call-audio-waves {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 34%;
        min-height: 140px;
        max-height: 280px;
        pointer-events: none;
        z-index: 42;
        overflow: hidden;
    }

    .mobile-call-audio-wave {
        position: absolute;
        left: -8%;
        right: -8%;
        bottom: -6%;
        width: 116%;
        height: 100%;
        transform: none;
        transition: opacity 0.16s ease, color 0.4s ease;
        will-change: opacity;
    }

    .mobile-call-audio-wave path {
        fill: currentColor;
    }

    .mobile-call-audio-wave--remote {
        color: rgba(72, 72, 80, var(--wave-opacity, 0.55));
        z-index: 1;
        filter: blur(0.2px);
    }

    .mobile-call-audio-wave--remote.mobile-call-audio-wave--mic-muted {
        color: rgba(198, 72, 72, var(--wave-opacity, 0.68));
        filter: blur(0.2px);
    }

    .mobile-call-audio-wave--local {
        color: rgba(148, 148, 156, var(--wave-opacity, 0.62));
        z-index: 2;
    }

    .mobile-call-audio-wave--local.mobile-call-audio-wave--mic-muted {
        color: rgba(228, 92, 92, var(--wave-opacity, 0.74));
    }

    #fullscreen-call-screen .fullscreen-call-controls.pc-call-dock-bar {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        gap: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 130;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #fullscreen-call-screen .pc-call-dock-bar .pc-call-dock-pill {
        gap: 12px;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    #fullscreen-call-screen .pc-call-dock-bar .pc-call-dock-pill--tools {
        order: 1;
    }

    #fullscreen-call-screen .pc-call-dock-bar .pc-call-dock-pill--end {
        order: 2;
        gap: 0;
    }

    #fullscreen-call-screen .mic-btn {
        order: 1;
    }

    #fullscreen-call-screen .camera-btn {
        order: 2;
    }

    #fullscreen-call-screen.pc-call-no-video .pc-call-dock-pill .call-btn:not(.pc-call-dock-end) {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(18, 18, 22, 0.82);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }

    #fullscreen-call-screen.pc-call-no-video .pc-call-dock-pill .call-btn:not(.pc-call-dock-end).active {
        background: rgba(255, 255, 255, 0.16);
    }

    #fullscreen-call-screen.pc-call-no-video .pc-call-dock-end,
    #fullscreen-call-screen.pc-call-no-video .call-control-btn.end-call-btn.pc-call-dock-end {
        width: auto;
        min-width: 124px;
        height: 64px;
        padding: 0 26px;
        border-radius: 9999px !important;
        border: none !important;
        background: linear-gradient(180deg, rgba(239, 83, 80, 0.96) 0%, rgba(198, 40, 40, 0.96) 100%) !important;
        box-shadow: 0 10px 28px rgba(198, 40, 40, 0.45) !important;
        color: #fff !important;
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
    }

    #fullscreen-call-screen.pc-call-no-video .pc-call-dock-end svg,
    #fullscreen-call-screen.pc-call-no-video .call-control-btn.end-call-btn.pc-call-dock-end svg {
        stroke: #fff !important;
        color: #fff !important;
    }

    #call-you-waiting-screen .call-container .pc-call-hero-name,
    #call-waiting-for-you-screen .call-container .pc-call-hero-name {
        display: block !important;
        position: static;
        left: auto;
        transform: none;
        bottom: auto;
        z-index: 1;
        margin: 0;
        width: 100%;
        max-width: min(92vw, 320px);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(22px, 6vw, 28px);
        font-weight: 650;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: #fff;
        pointer-events: none;
    }

    #fullscreen-call-screen .fullscreen-call-container .pc-call-hero-name {
        display: none !important;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        z-index: 125;
        margin: 0;
        width: min(92vw, 360px);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(20px, 5.5vw, 28px);
        font-weight: 600;
        pointer-events: none;
    }

    #call-you-waiting-screen .call-local-pip,
    #fullscreen-call-screen .call-local-pip {
        display: block;
        position: absolute;
        top: calc(56px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        width: 106px;
        height: 164px;
        border-radius: 14px;
        border: none;
        object-fit: cover;
        z-index: 160;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        pointer-events: none;
    }

    #call-you-waiting-screen .call-local-pip.hidden,
    #fullscreen-call-screen .call-local-pip.hidden {
        display: none !important;
    }

  /* Нижняя панель: камера · мик · сброс — один ряд (мобильный) */
    #fullscreen-call-screen .fullscreen-call-controls.pc-call-dock-bar,
    #call-you-waiting-screen .call-controls-bottom.pc-call-dock-bar,
    #call-waiting-for-you-screen .call-controls,
    #call-waiting-for-you-screen .pc-call-dock,
    #call-waiting-for-you-screen .pc-call-dock--incoming {
        position: absolute;
        left: 50%;
        right: auto;
        bottom: calc(28px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: calc(100vw - 32px);
        padding: 0;
        gap: 64px;
        background: transparent;
        border-radius: 0;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        z-index: 130;
    }

    #fullscreen-call-screen .pc-call-dock-bar .pc-call-dock-pill,
    #call-you-waiting-screen .pc-call-dock-bar .pc-call-dock-pill {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        gap: 8px;
    }

    #fullscreen-call-screen .pc-call-dock-bar .pc-call-dock-pill--end,
    #call-you-waiting-screen .pc-call-dock-bar .pc-call-dock-pill--end {
        gap: 12px;
        padding: 0;
    }

    /* Разделяем кнопки микрофон/камера внутри «tools» */
    #fullscreen-call-screen .pc-call-dock-bar .pc-call-dock-pill--tools,
    #call-you-waiting-screen .pc-call-dock-bar .pc-call-dock-pill--tools {
        gap: 12px !important;
        padding: 0 !important;
    }

    #fullscreen-call-screen .pc-call-dock-minimize,
    #call-you-waiting-screen .pc-call-dock-minimize,
    #fullscreen-call-screen .pc-call-dock-settings-btn,
    #call-you-waiting-screen .pc-call-dock-settings-btn {
        display: none !important;
    }

    #fullscreen-call-screen .screen-share-btn:not(.pc-call-dock-round),
    #call-you-waiting-screen .screen-share-btn:not(.pc-call-dock-round),
    #fullscreen-call-screen .pc-call-dock-timer,
    #call-you-waiting-screen .pc-call-dock-timer,
    #fullscreen-call-screen .call-signal-bars,
    #call-you-waiting-screen .call-signal-bars {
        display: none !important;
    }

    #fullscreen-call-screen .pc-call-dock-pill .call-btn,
    #call-you-waiting-screen .pc-call-dock-pill .call-control-btn {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(18, 18, 22, 0.82);
        color: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
    }

    #call-waiting-for-you-screen .pc-call-dock--incoming .call-btn {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        border: none;
        color: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #call-waiting-for-you-screen .pc-call-dock-decline,
    #call-waiting-for-you-screen .pc-call-dock-accept {
        width: 68px;
        height: 68px;
    }

    #call-waiting-for-you-screen .pc-call-dock-decline {
        background: #ff3b30;
    }

    #call-waiting-for-you-screen .pc-call-dock-accept {
        background: #34c759;
    }

    #fullscreen-call-screen .pc-call-dock-end:not(.pc-call-dock-round),
    #call-you-waiting-screen .pc-call-dock-end:not(.pc-call-dock-round),
    #fullscreen-call-screen .call-control-btn.end-call-btn.pc-call-dock-end:not(.pc-call-dock-round),
    #call-you-waiting-screen .call-control-btn.end-call-btn.pc-call-dock-end:not(.pc-call-dock-round) {
        width: auto;
        min-width: 124px;
        height: 64px;
        padding: 0 26px;
        border-radius: 9999px !important;
        border: none !important;
        background: linear-gradient(180deg, rgba(239, 83, 80, 0.96) 0%, rgba(198, 40, 40, 0.96) 100%) !important;
        box-shadow: 0 10px 28px rgba(198, 40, 40, 0.45) !important;
        margin: 0;
        color: #fff !important;
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
    }

    #fullscreen-call-screen .pc-call-dock-end:not(.pc-call-dock-round) svg,
    #call-you-waiting-screen .pc-call-dock-end:not(.pc-call-dock-round) svg,
    #fullscreen-call-screen .call-control-btn.end-call-btn.pc-call-dock-end:not(.pc-call-dock-round) svg,
    #call-you-waiting-screen .call-control-btn.end-call-btn.pc-call-dock-end:not(.pc-call-dock-round) svg {
        stroke: #fff !important;
        color: #fff !important;
    }

    #fullscreen-call-screen .pc-call-dock-bar--v2 .pc-call-dock-end,
    #call-you-waiting-screen .pc-call-dock-bar--v2 .pc-call-dock-end {
        width: 56px !important;
        min-width: 56px !important;
        height: 56px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: #ff0000 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        color: #fff !important;
    }

    #fullscreen-call-screen .pc-call-dock-bar--v2 .pc-call-dock-end:hover,
    #call-you-waiting-screen .pc-call-dock-bar--v2 .pc-call-dock-end:hover {
        background: #e60000 !important;
        color: #fff !important;
    }

    #fullscreen-call-screen .pc-call-dock-bar--v2 .pc-call-dock-end svg,
    #call-you-waiting-screen .pc-call-dock-bar--v2 .pc-call-dock-end svg {
        width: 22px;
        height: 24px;
        stroke: #fff !important;
        color: #fff !important;
    }

    #fullscreen-call-screen .pc-call-dock-bar--v2 .pc-call-dock-end svg path,
    #call-you-waiting-screen .pc-call-dock-bar--v2 .pc-call-dock-end svg path {
        fill: #fff !important;
    }

    #fullscreen-call-screen .pc-call-dock-pill .call-btn:not(.pc-call-dock-end).active {
        background: rgba(255, 255, 255, 0.16);
    }

    /* Плавное появление UI при старте звонка (только мобильный) */
    @keyframes mobile-call-enter-top {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-22px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    @keyframes mobile-call-enter-stage {
        from {
            opacity: 0;
            transform: scale(1.14);
            filter: blur(3px);
        }
        to {
            opacity: 1;
            transform: scale(1);
            filter: blur(0);
        }
    }

    @keyframes mobile-call-enter-dock {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(calc(100% + 28px));
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    @keyframes mobile-call-enter-pip {
        from {
            opacity: 0;
            transform: translateX(calc(100% + 20px));
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes mobile-call-enter-name {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(16px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    @keyframes mobile-call-enter-name-inline {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .pc-call-layout.mobile-call-enter-play .mobile-call-top-timer {
        animation: mobile-call-enter-top 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .pc-call-layout.mobile-call-enter-play .pc-call-stage,
    .pc-call-layout.mobile-call-enter-play .pc-call-video-column {
        animation: mobile-call-enter-stage 0.68s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both;
        transform-origin: center center;
    }

    .pc-call-layout.mobile-call-enter-play .call-local-pip:not(.hidden) {
        animation: mobile-call-enter-pip 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
    }

    .pc-call-layout.mobile-call-enter-play .pc-call-dock,
    .pc-call-layout.mobile-call-enter-play .call-controls-bottom,
    .pc-call-layout.mobile-call-enter-play .fullscreen-call-controls,
    .pc-call-layout.mobile-call-enter-play .call-controls.pc-call-dock--incoming {
        animation: mobile-call-enter-dock 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
    }

    .pc-call-layout.mobile-call-enter-play .call-container .pc-call-hero-name,
    .pc-call-layout.mobile-call-enter-play .fullscreen-call-container .pc-call-hero-name {
        animation: mobile-call-enter-name 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
    }

    #call-waiting-for-you-screen.pc-call-layout.mobile-call-enter-play .pc-call-hero-name,
    #call-you-waiting-screen.pc-call-layout.mobile-call-enter-play .pc-call-hero-name,
    #call-waiting-for-you-screen .pc-call-layout.mobile-call-enter-play .pc-call-hero-name,
    #call-you-waiting-screen .pc-call-layout.mobile-call-enter-play .pc-call-hero-name {
        animation: mobile-call-enter-name-inline 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
    }

    @media (prefers-reduced-motion: reduce) {
        .pc-call-layout.mobile-call-enter-play .mobile-call-top-timer,
        .pc-call-layout.mobile-call-enter-play .pc-call-stage,
        .pc-call-layout.mobile-call-enter-play .pc-call-video-column,
        .pc-call-layout.mobile-call-enter-play .call-local-pip,
        .pc-call-layout.mobile-call-enter-play .pc-call-dock,
        .pc-call-layout.mobile-call-enter-play .call-controls-bottom,
        .pc-call-layout.mobile-call-enter-play .fullscreen-call-controls,
        .pc-call-layout.mobile-call-enter-play .call-controls,
        .pc-call-layout.mobile-call-enter-play .call-container .pc-call-hero-name,
        .pc-call-layout.mobile-call-enter-play .fullscreen-call-container .pc-call-hero-name {
            animation: none !important;
        }
    }

    .compact-call-bar {
        display: none !important;
    }
}

/* Контейнер для участников звонка */
.call-participants-container {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px 20px;
}

.call-participant {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.participant-avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 4px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    background: var(--bg-gray-2);
    overflow: hidden;
    position: relative;
}

.participant-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.active-participant .participant-avatar {
    border-color: transparent;
    background: var(--bg-gray-3);
    transition: border-color 0.2s ease;
}

.active-participant .participant-avatar.speaking {
    border-color: #00ff00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
}

.waiting-participant .participant-avatar {
    border-color: transparent;
    background: var(--bg-gray-1);
    opacity: 0.6;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.waiting-participant .participant-avatar.speaking {
    border-color: #00ff00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
    opacity: 1;
}

.participant-status-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00ff00;
    margin-top: 10px;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.participant-status-indicator.inactive {
    background: #666;
    box-shadow: none;
}

/* Кнопка полноэкранного режима */
.fullscreen-toggle-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-white);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 100;
}

.fullscreen-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Кнопки управления внизу */
.call-controls-bottom {
    display: flex;
    gap: 16px;
    padding: 24px;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    box-sizing: border-box;
}

.call-control-btn {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.call-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.call-control-btn.end-call-btn {
    background: #ff4444;
}

.call-control-btn.end-call-btn:hover {
    background: #ff6666;
}

.call-control-btn.camera-btn.active,
.call-control-btn.mic-btn.active {
    background: rgba(255, 255, 255, 0.2);
    opacity: 0.7;
}

.call-control-btn.screen-share-btn.active {
    background: rgba(0, 150, 255, 0.3);
}

/* Компактная плашка звонка в чате */
.compact-call-bar {
    background: var(--bg-gray-2);
    border-bottom: 1px solid var(--gray-border);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
}

.compact-call-bar.hidden {
    display: none;
}

.compact-call-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.compact-call-participants {
    display: flex;
    gap: 16px;
    align-items: center;
}

.compact-participant {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.compact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--bg-gray-3);
    overflow: hidden;
}

.compact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compact-participant.active .compact-avatar {
    border-color: transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.compact-participant.active .compact-avatar.speaking {
    border-color: #00ff00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.compact-participant .compact-avatar.speaking {
    border-color: #00ff00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.compact-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff00;
    margin-top: 4px;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.5);
}

.compact-status-indicator.inactive {
    background: #666;
    box-shadow: none;
}

.compact-call-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.compact-call-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.compact-call-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.compact-call-btn.end-call-btn {
    background: #ff4444;
}

.compact-call-btn.end-call-btn:hover {
    background: #ff6666;
}

.compact-call-btn.camera-btn.active,
.compact-call-btn.mic-btn.active {
    background: rgba(255, 255, 255, 0.2);
    opacity: 0.7;
}

.compact-call-btn.screen-share-btn.active {
    background: rgba(0, 150, 255, 0.3);
}

.call-timer {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-white);
    font-size: 18px;
    font-weight: 500;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s;
}

.call-timer.active {
    opacity: 1;
}

.call-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
    overflow: hidden;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#remote-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

#local-video {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 120px;
    height: 160px;
    border-radius: 12px;
    border: 2px solid var(--white-border);
    object-fit: cover;
    background: var(--bg-gray-2);
    z-index: 5;
}

/* Индикатор трансляции экрана (мигающая красная рамка поверх локального превью) */
.screen-share-indicator {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 120px;
    height: 160px;
    border-radius: 12px;
    box-sizing: border-box;
    border: 3px solid rgba(255, 0, 0, 0.85);
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.9);
    animation: screenShareBlink 1s ease-in-out infinite;
    cursor: pointer;
    z-index: 6;
}

@keyframes screenShareBlink {
    0% { opacity: 1; box-shadow: 0 0 6px rgba(255,0,0,0.6); }
    50% { opacity: 0.35; box-shadow: 0 0 16px rgba(255,0,0,1); }
    100% { opacity: 1; box-shadow: 0 0 6px rgba(255,0,0,0.6); }
}

.caller-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 1;
    justify-content: center;
}

.caller-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid var(--white-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    background: var(--bg-gray-2);
    overflow: hidden;
}

.caller-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.call-status-text {
    color: var(--gray-text);
    font-size: 16px;
}

.caller-name {
    color: var(--text-white);
    font-size: 28px;
    font-weight: 600;
}

.caller-info-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 3;
}

.caller-avatar-large {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 3px solid var(--white-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    background: var(--bg-gray-2);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.caller-avatar-large.speaking {
    border-color: #00ff00;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6);
}

.caller-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caller-name-large {
    color: var(--text-white);
    font-size: 32px;
    font-weight: 600;
}

.call-status-text {
    color: var(--gray-text);
    font-size: 18px;
    margin-top: 10px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Полноэкранный режим звонка */
.fullscreen-call {
    background: #000;
}

.fullscreen-call-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.fullscreen-call-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: max(16px, env(safe-area-inset-top)) 20px 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.fullscreen-call-timer {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
}

.fullscreen-exit-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--text-white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.fullscreen-exit-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fullscreen-video-container {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#fullscreen-remote-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

#fullscreen-local-video {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 180px;
    height: 240px;
    border-radius: 12px;
    border: 3px solid var(--white-border);
    object-fit: cover;
    background: var(--bg-gray-2);
    z-index: 5;
}

/* Адаптация индикатора для полноэкранного режима */
#fullscreen-call-screen .screen-share-indicator {
    width: 180px;
    height: 240px;
    top: 20px;
    right: 20px;
}

.fullscreen-call-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    display: flex;
    gap: 20px;
    justify-content: center;
    z-index: 100;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
}

@media (min-width: 769px) {
    #call-you-waiting-screen .call-controls-bottom.pc-call-dock-bar,
    #fullscreen-call-screen .fullscreen-call-controls.pc-call-dock-bar {
        background: none !important;
        background-image: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: auto !important;
        max-width: none !important;
        left: 50%;
        right: auto;
        bottom: max(22px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
    }
}

.call-controls {
    display: flex;
    gap: 20px;
    padding: 20px;
    z-index: 10;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

/* Входящий звонок: без растянутой «таблетки», кнопки разнесены */
#call-waiting-for-you-screen .call-controls,
#call-waiting-for-you-screen .pc-call-dock,
#call-waiting-for-you-screen .pc-call-dock--incoming {
    width: auto;
    max-width: none;
    padding: 0;
    gap: 56px;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    justify-content: center;
}

.call-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--white-border);
    background: var(--bg-gray-2);
    color: var(--text-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.call-btn:hover {
    background: var(--bg-gray-3);
    transform: scale(1.1);
}

.accept-btn {
    background: #00ff00;
    border-color: #00ff00;
}

.accept-btn:hover {
    background: #00cc00;
    border-color: #00cc00;
}

.decline-btn {
    background: #ff0000;
    border-color: #ff0000;
}

.decline-btn:hover {
    background: #cc0000;
    border-color: #cc0000;
}

.end-call-btn {
    background: #ff0000;
    border-color: #ff0000;
}

.end-call-btn:hover {
    background: #cc0000;
    border-color: #cc0000;
}

.camera-btn.active,
.mic-btn.active {
    background: var(--bg-gray-3);
    opacity: 0.7;
}

.minimized-call {
    position: fixed;
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    right: max(20px, env(safe-area-inset-right, 0px));
    width: 300px;
    max-width: calc(100vw - 32px);
    background: rgba(22, 24, 32, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 15px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
}

.minimized-call.hidden {
    display: none;
}

.minimized-call-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.minimized-call-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.minimized-call-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--white-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--bg-gray-3);
    overflow: hidden;
    flex-shrink: 0;
}

.minimized-call-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.minimized-call-details {
    flex: 1;
    min-width: 0;
}

.minimized-call-name {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.minimized-call-timer {
    color: var(--gray-text);
    font-size: 14px;
}

/* Мобильные стили для звонков */
@media (max-width: 768px) {
    #active-call-screen,
    #fullscreen-call-screen {
        background: #000;
        align-items: stretch;
        justify-content: stretch;
        width: 100%;
        height: 100%;
        padding: 0;
    }
    #active-call-screen .call-container,
    #fullscreen-call-screen .fullscreen-call-container {
        width: 100%;
        height: 100svh;
        height: 100dvh;
        min-height: 100svh;
        min-height: 100dvh;
        margin: 0;
        border-radius: 0;
        overflow: hidden;
        padding: 0;
        background: #000 !important;
        position: relative;
    }
    #active-call-screen .call-video-container,
    #fullscreen-call-screen .fullscreen-video-container {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: #000 !important;
        animation: none;
    }
    #active-call-screen #remote-video,
    #fullscreen-remote-video,
    #active-call-screen #local-video,
    #fullscreen-local-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain !important;
        background: #000 !important;
        border: none;
        border-radius: 0;
    }
    #active-call-screen #local-video,
    #fullscreen-local-video {
        width: 106px;
        height: 164px;
        inset: auto;
        top: calc(16px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        border-radius: 14px;
        border: none;
        object-fit: cover !important;
        background: #000;
        z-index: 26;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        cursor: grab;
        touch-action: none;
    }
    #active-call-screen.mobile-video-swapped #local-video,
    #fullscreen-call-screen.mobile-video-swapped #fullscreen-local-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        object-fit: contain !important;
        z-index: 6;
        box-shadow: none;
        cursor: default;
    }
    #active-call-screen.mobile-video-swapped #remote-video,
    #fullscreen-call-screen.mobile-video-swapped #fullscreen-remote-video {
        position: absolute;
        inset: auto;
        width: 106px;
        height: 164px;
        top: calc(16px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        left: auto;
        bottom: auto;
        border-radius: 14px;
        object-fit: cover !important;
        z-index: 26;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        touch-action: none;
    }
    #active-call-screen .call-timer,
    #active-call-screen .call-top-pill,
    #fullscreen-call-screen .fullscreen-call-header {
        display: none;
    }
    #active-call-screen .call-controls,
    #fullscreen-call-screen .fullscreen-call-controls {
        left: 50%;
        right: auto;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        width: auto;
        padding: 0;
        gap: 16px;
        justify-content: center;
        background: none;
    }
    #active-call-screen .call-drag-handle,
    #fullscreen-call-screen .call-drag-handle {
        display: none !important;
    }
    #active-call-screen .call-tools-group,
    #fullscreen-call-screen .call-tools-group {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        gap: 16px;
    }
    #active-call-screen .call-tools-group .call-btn,
    #fullscreen-call-screen .call-tools-group .call-btn {
        width: 64px;
        height: 64px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 50%;
        background: rgba(18, 18, 22, 0.82);
        color: #ffffff;
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
    }
    #active-call-screen .call-tools-group .call-btn:hover,
    #fullscreen-call-screen .call-tools-group .call-btn:hover {
        transform: none;
        background: rgba(28, 28, 34, 0.9);
    }
    #active-call-screen .end-call-btn,
    #fullscreen-call-screen .end-call-btn {
        width: auto;
        min-width: 124px;
        height: 64px;
        padding: 0 26px;
        border: none;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(239, 83, 80, 0.96) 0%, rgba(198, 40, 40, 0.96) 100%);
        border-color: transparent;
        color: #fff;
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
    }
    #active-call-screen .end-call-btn:hover,
    #fullscreen-call-screen .end-call-btn:hover {
        transform: none;
        background: linear-gradient(180deg, rgba(228, 40, 29, 0.96) 0%, rgba(198, 40, 40, 0.96) 100%);
        border-color: transparent;
    }
    .call-header-status {
        top: 10px;
        font-size: 12px;
    }
    .call-timer {
        top: 40px;
        font-size: 16px;
    }
    .caller-avatar {
        width: 120px;
        height: 120px;
        font-size: 50px;
    }
    .caller-name {
        font-size: 24px;
    }
    .call-controls {
        padding: 15px;
        gap: 15px;
    }
    .call-btn {
        width: 50px;
        height: 50px;
    }
    .fullscreen-call-header {
        padding: 15px;
    }
    .fullscreen-call-timer {
        font-size: 14px;
    }
    .fullscreen-call-controls {
        padding: 20px;
        gap: 15px;
    }
    .minimized-call {
        width: calc(100% - 40px);
        bottom: 10px;
        right: 20px;
        left: 20px;
    }
    .caller-avatar-large {
        width: 150px;
        height: 150px;
        font-size: 60px;
    }
    .caller-name-large {
        font-size: 24px;
    }
    /* Мобильные стили для нового дизайна ожидания */
    .call-participants-container {
        gap: 20px;
        padding: 20px 10px;
    }
    .participant-avatar {
        width: 150px;
        height: 150px;
        font-size: 60px;
    }
    .call-controls-bottom {
        padding: 16px;
        gap: 12px;
    }
    .you-waiting-call-container .call-timer {
        top: 16px;
        font-size: 16px;
    }
    .you-waiting-call-container .caller-avatar {
        width: 110px;
        height: 110px;
    }
    .you-waiting-call-container .caller-name {
        font-size: 40px;
    }
    .rejected-close-btn {
        min-width: 150px;
        height: 48px;
        font-size: 17px;
    }
    .call-control-btn {
        width: 48px;
        height: 48px;
    }
    .fullscreen-toggle-btn {
        top: 10px;
        left: 10px;
        width: 36px;
        height: 36px;
    }
}

.minimized-call-expand,
.minimized-call-end {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--white-border);
    background: var(--bg-gray-3);
    color: var(--text-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}

.minimized-call-expand:hover {
    background: var(--bg-gray-1);
    transform: scale(1.1);
}

.minimized-call-end {
    background: #ff0000;
    border-color: #ff0000;
}

.minimized-call-end:hover {
    background: #cc0000;
    border-color: #cc0000;
}

.call-user-btn {
    margin-left: auto;
}

.call-user-btn.hidden {
    display: none;
}

@keyframes pcCallMinimizedPop {
    from {
        transform: scale(0.9);
        opacity: 0.75;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.pc-call-minimize-ghost {
    position: fixed;
    z-index: 10060;
    pointer-events: none;
    overflow: hidden;
    box-shadow: none;
    opacity: 1;
    will-change: left, top, width, height, border-radius, background-color, opacity;
    transition: opacity 0.2s ease;
}

@media (min-width: 769px) {
    #call-you-waiting-screen .pc-call-stage,
    #call-you-waiting-screen .pc-call-dock-bar,
    #call-you-waiting-screen .pc-call-dock-minimize,
    #call-you-waiting-screen .call-local-pip,
    #fullscreen-call-screen .pc-call-stage,
    #fullscreen-call-screen .pc-call-dock-bar,
    #fullscreen-call-screen .pc-call-dock-minimize,
    #fullscreen-call-screen .call-local-pip,
    #call-waiting-for-you-screen .pc-call-stage,
    #call-waiting-for-you-screen .pc-call-dock {
        transition: opacity 0.24s cubic-bezier(0.32, 0.72, 0, 1),
            transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
    }

    #call-you-waiting-screen.pc-call-screen-ui-fade-out .pc-call-stage,
    #call-you-waiting-screen.pc-call-screen-ui-fade-out .pc-call-dock-bar,
    #call-you-waiting-screen.pc-call-screen-ui-fade-out .pc-call-dock-minimize,
    #call-you-waiting-screen.pc-call-screen-ui-fade-out .call-local-pip,
    #fullscreen-call-screen.pc-call-screen-ui-fade-out .pc-call-stage,
    #fullscreen-call-screen.pc-call-screen-ui-fade-out .pc-call-dock-bar,
    #fullscreen-call-screen.pc-call-screen-ui-fade-out .pc-call-dock-minimize,
    #fullscreen-call-screen.pc-call-screen-ui-fade-out .call-local-pip,
    #call-waiting-for-you-screen.pc-call-screen-ui-fade-out .pc-call-stage,
    #call-waiting-for-you-screen.pc-call-screen-ui-fade-out .pc-call-dock {
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
    }

    #call-you-waiting-screen.pc-call-screen-ui-fade-in .pc-call-stage,
    #call-you-waiting-screen.pc-call-screen-ui-fade-in .pc-call-dock-bar,
    #call-you-waiting-screen.pc-call-screen-ui-fade-in .pc-call-dock-minimize,
    #call-you-waiting-screen.pc-call-screen-ui-fade-in .call-local-pip,
    #fullscreen-call-screen.pc-call-screen-ui-fade-in .pc-call-stage,
    #fullscreen-call-screen.pc-call-screen-ui-fade-in .pc-call-dock-bar,
    #fullscreen-call-screen.pc-call-screen-ui-fade-in .pc-call-dock-minimize,
    #fullscreen-call-screen.pc-call-screen-ui-fade-in .call-local-pip,
    #call-waiting-for-you-screen.pc-call-screen-ui-fade-in .pc-call-stage,
    #call-waiting-for-you-screen.pc-call-screen-ui-fade-in .pc-call-dock {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* ПК: свёрнутый звонок — orb с аватаром и статусным кольцом */
.pc-call-minimized-orb {
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.34);
    transition: box-shadow 0.18s ease;
    overflow: visible;
}

.pc-call-minimized-bar.pc-call-minimized-orb {
    display: none !important;
    width: 40px;
    height: 40px;
    margin-left: auto;
    align-self: center;
    box-shadow: none;
}

.pc-call-minimized-orb__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #34c759;
    box-shadow: 0 0 0 2px #202225;
    pointer-events: none;
    animation: pcCallOrbRingPulse 2.4s ease-in-out infinite;
}

.pc-call-minimized-orb--waiting .pc-call-minimized-orb__ring {
    border-color: #ff9f0a;
    animation: pcCallOrbRingWaiting 1.35s ease-in-out infinite;
}

.pc-call-minimized-orb--incoming .pc-call-minimized-orb__ring {
    border-color: #0a84ff;
    animation: pcCallOrbRingIncoming 1.6s ease-in-out infinite;
}

.pc-call-minimized-orb__avatar {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5c5c66;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.pc-call-minimized-bar.pc-call-minimized-orb .pc-call-minimized-orb__avatar {
    inset: 3px;
    font-size: 14px;
}

.pc-call-minimized-orb__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-call-minimized-orb__dots {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 8px;
    padding: 1px 4px;
    border-radius: 999px;
    background: rgba(20, 21, 23, 0.88);
    pointer-events: none;
}

.pc-call-minimized-bar.pc-call-minimized-orb .pc-call-minimized-orb__dots {
    bottom: 3px;
    padding: 1px 3px;
}

.pc-call-minimized-orb__dots.hidden {
    display: none !important;
}

.pc-call-minimized-orb__dots i {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    animation: pcCallMinimizedDot 1.05s ease-in-out infinite;
}

.pc-call-minimized-orb__dots i:nth-child(2) {
    animation-delay: 0.14s;
}

.pc-call-minimized-orb__dots i:nth-child(3) {
    animation-delay: 0.28s;
}

@keyframes pcCallMinimizedDot {
    0%, 70%, 100% {
        transform: translateY(0);
        opacity: 0.45;
    }
    35% {
        transform: translateY(-2px);
        opacity: 1;
    }
}

@keyframes pcCallOrbRingPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.72;
    }
}

@keyframes pcCallOrbRingWaiting {
    0%, 100% {
        opacity: 0.68;
    }
    50% {
        opacity: 1;
    }
}

@keyframes pcCallOrbRingIncoming {
    0%, 100% {
        opacity: 0.78;
        box-shadow: 0 0 0 2px #202225;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 0 2px #202225, 0 0 0 5px rgba(10, 132, 255, 0.18);
    }
}

.pc-call-minimized-dock .pc-call-minimized-orb:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
}

.pc-call-minimized-bar.pc-call-minimized-orb:hover,
.pc-call-minimized-bar.pc-call-minimized-orb:active {
    transform: none;
    box-shadow: none;
}

.pc-call-minimized-dock .pc-call-minimized-orb:active {
    transform: scale(0.96);
}

.pc-call-minimized-bar.hidden,
.pc-call-minimized-bar[hidden] {
    display: none !important;
}

@media (min-width: 769px) {
    .pc-call-minimized-bar.is-active {
        display: inline-flex !important;
    }

    .pc-call-minimized-bar.is-active.pc-call-minimized-bar--enter {
        animation: pcCallMinimizedBarIn 0.22s ease-out;
    }

    .pc-call-minimized-bar.is-active.pc-call-minimized-bar--fade-in {
        animation: pcCallMinimizedBarIn 0.22s ease-out;
    }
}

@keyframes pcCallMinimizedBarIn {
    from {
        opacity: 0.55;
    }
    to {
        opacity: 1;
    }
}

@keyframes pcCallMinimizedBarFadeIn {
    from {
        opacity: 0.55;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .pc-call-minimized-bar,
    .pc-call-minimize-btn {
        display: none !important;
    }

    .pc-call-minimized-dock {
        display: none !important;
    }
}

.pc-call-minimized-dock {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: auto;
    z-index: 10055;
    padding: 0;
    pointer-events: none;
}

.pc-call-minimized-orb-stack {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.pc-call-minimized-orb-action--end {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid #141517;
    border-radius: 50%;
    background: #ff0000;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.82);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.pc-call-minimized-orb-stack:hover .pc-call-minimized-orb-action--end,
.pc-call-minimized-orb-stack:focus-within .pc-call-minimized-orb-action--end {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.pc-call-minimized-orb-action--end:hover {
    background: #e60000;
}

.pc-call-minimized-orb-action--end:active {
    transform: scale(0.92);
}

@media (min-width: 769px) {
    .pc-call-minimized-dock.is-active {
        display: block;
        pointer-events: auto;
    }

    .pc-call-minimized-dock.is-active.pc-call-minimized-dock--enter {
        animation: pcCallMinimizedDockRise 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .pc-call-minimized-dock.is-active.pc-call-minimized-dock--fade-in {
        animation: pcCallMinimizedDockFadeIn 0.24s ease-out;
    }
}

@keyframes pcCallMinimizedDockRise {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.88);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pcCallMinimizedDockFadeIn {
    from {
        opacity: 0.5;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pc-call-minimized-dock.hidden,
.pc-call-minimized-dock[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .pc-call-minimized-orb__ring,
    .pc-call-minimized-orb__dots i,
    .pc-call-minimized-bar.is-active,
    .pc-call-minimized-dock.is-active {
        animation: none !important;
    }
}

/* ПК: плавающее окно камеры собеседника (только перетаскивание) */
.pc-call-minimized-float {
    display: none;
    position: fixed;
    z-index: 10055;
    touch-action: none;
    user-select: none;
}

@media (min-width: 769px) {
    .pc-call-minimized-float.is-active {
        display: block;
    }

    .pc-call-minimized-float.is-active.pc-call-minimized-float--enter {
        animation: pcCallMinimizedFloatPop 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@keyframes pcCallMinimizedFloatPop {
    from {
        opacity: 0;
        transform: scale(0.88);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pc-call-minimized-float.hidden,
.pc-call-minimized-float[hidden] {
    display: none !important;
}

.pc-call-minimized-float__shell {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #000;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
    cursor: grab;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.pc-call-minimized-float__shell:hover {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.62);
}

.pc-call-minimized-float__shell.is-dragging {
    cursor: grabbing;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.7);
}

.pc-call-minimized-float__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    background: #000;
}

@media (max-width: 768px) {
    .pc-call-minimized-float {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .pc-call-minimize-btn,
    .pc-call-dock-minimize,
    .pc-call-top-minimize {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 0;
        background: #202225;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        box-shadow: none;
        transition: background 0.22s ease, transform 0.15s ease;
    }

    .pc-call-minimize-btn svg,
    .pc-call-dock-minimize svg,
    .pc-call-top-minimize svg {
        width: 18px;
        height: 18px;
    }

    .pc-call-minimize-btn:hover,
    .pc-call-dock-minimize:hover,
    .pc-call-top-minimize:hover {
        background: #2a2d31;
    }

    .pc-call-minimize-btn:active,
    .pc-call-dock-minimize:active,
    .pc-call-top-minimize:active {
        transform: scale(0.96);
    }

    .minimized-call {
        display: none !important;
    }
}

/* Настройки камеры/микрофона во время звонка */
.call-media-settings-modal {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.call-media-settings-modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.call-media-settings-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.call-media-settings-sheet {
    position: relative;
    width: min(420px, calc(100vw - 32px));
    border-radius: 18px;
    background: rgba(20, 20, 24, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.call-media-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.call-media-settings-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

.call-media-settings-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.call-media-settings-close:hover {
    background: rgba(255, 255, 255, 0.14);
}

.call-media-settings-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.call-media-settings-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.call-media-settings-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
}

.call-media-settings-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 14px;
    outline: none;
}

.call-media-settings-select:focus {
    border-color: rgba(255, 255, 255, 0.28);
}

.call-prejoin-panel {
    position: fixed;
    inset: 0;
    z-index: 12070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.call-prejoin-panel.hidden {
    display: none !important;
}

.call-prejoin-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.call-prejoin-panel.is-closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.call-prejoin-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    transition:
        opacity 0.32s ease,
        background 0.32s ease,
        backdrop-filter 0.32s ease,
        -webkit-backdrop-filter 0.32s ease;
}

.call-prejoin-panel.is-open .call-prejoin-backdrop {
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 1;
}

.call-prejoin-panel.is-closing .call-prejoin-backdrop {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
}

.call-prejoin-sheet {
    position: relative;
    width: min(420px, calc(100vw - 32px));
    padding: 22px 22px 20px;
    border-radius: 48px;
    background: #2c2c2e;
    border: none;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48);
    opacity: 0;
    transform: translateY(20px) scale(0.94);
    transition: transform 0.36s cubic-bezier(0.34, 1.22, 0.64, 1), opacity 0.28s ease;
    will-change: transform, opacity;
}

.call-prejoin-panel.is-open .call-prejoin-sheet {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.call-prejoin-panel.is-closing .call-prejoin-sheet {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
}

@keyframes call-prejoin-part-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.call-prejoin-panel.is-open .call-prejoin-header {
    animation: call-prejoin-part-in 0.38s cubic-bezier(0.34, 1.12, 0.64, 1) both;
    animation-delay: 0.05s;
}

.call-prejoin-panel.is-open .call-prejoin-toggles {
    animation: call-prejoin-part-in 0.38s cubic-bezier(0.34, 1.12, 0.64, 1) both;
    animation-delay: 0.11s;
}

.call-prejoin-panel.is-open .call-prejoin-start {
    animation: call-prejoin-part-in 0.38s cubic-bezier(0.34, 1.12, 0.64, 1) both;
    animation-delay: 0.17s;
}

@media (prefers-reduced-motion: reduce) {
    .call-prejoin-panel,
    .call-prejoin-backdrop,
    .call-prejoin-sheet,
    .call-prejoin-panel.is-open .call-prejoin-header,
    .call-prejoin-panel.is-open .call-prejoin-toggles,
    .call-prejoin-panel.is-open .call-prejoin-start {
        animation: none !important;
        transition: none !important;
    }
}

.call-prejoin-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.call-prejoin-peer {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
    padding-right: 8px;
}

.call-prejoin-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #252527;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
}

.call-prejoin-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.call-prejoin-peer-text {
    min-width: 0;
}

.call-prejoin-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 2px;
}

.call-prejoin-name {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-prejoin-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease;
}

.call-prejoin-close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.call-prejoin-preview {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
    border-radius: 24px;
    overflow: hidden;
    background: #141517;
    aspect-ratio: 16 / 9;
}

.call-prejoin-preview-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    overflow: hidden;
}

.call-prejoin-preview-fallback.hidden {
    display: none !important;
}

.call-prejoin-preview-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    box-shadow: none;
}

.call-prejoin-preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.call-prejoin-preview-video.hidden {
    display: none !important;
}

.call-prejoin-preview.hidden {
    display: none !important;
}

.call-prejoin-preview-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 24px;
    background: #1a1a1c;
    transform: scaleX(-1);
}

.call-prejoin-preview.is-portrait {
    width: auto;
    max-width: min(220px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.call-prejoin-panel.is-open .call-prejoin-preview:not(.hidden) {
    animation: call-prejoin-part-in 0.38s cubic-bezier(0.34, 1.12, 0.64, 1) both;
    animation-delay: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
    .call-prejoin-panel.is-open .call-prejoin-preview:not(.hidden) {
        animation: none !important;
    }
}

.call-prejoin-toggles {
    margin-bottom: 14px;
}

.call-prejoin-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.call-prejoin-panel .pc-call-dock-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    width: auto;
    padding: 0 4px 0 0;
    border-radius: 999px;
    background: #141517;
    box-shadow: none;
}

.call-prejoin-panel .pc-call-dock-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    transition: background 0.28s ease, color 0.28s ease;
}

.call-prejoin-panel .pc-call-dock-toggle.active {
    background: #fff;
    color: #202225;
}

.call-prejoin-panel .pc-call-dock-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

.call-prejoin-panel .pc-call-dock-toggle.active:hover {
    background: #f2f2f2;
}

.call-prejoin-panel .pc-call-dock-toggle .pc-call-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    flex-shrink: 0;
    pointer-events: none;
    transition:
        opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.26s cubic-bezier(0.34, 1.28, 0.64, 1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
}

.call-prejoin-panel .pc-call-dock-toggle .pc-call-icon--on {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
}

.call-prejoin-panel .pc-call-dock-toggle.active .pc-call-icon--on {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
}

.call-prejoin-panel .pc-call-dock-toggle.active .pc-call-icon--off {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
}

.call-prejoin-panel .pc-call-dock-chevron {
    width: 24px;
    height: 56px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.call-prejoin-panel .pc-call-dock-chevron:hover,
.call-prejoin-panel .pc-call-dock-chevron[aria-expanded="true"] {
    color: #fff;
}

.call-prejoin-panel .pc-call-dock-group .pc-call-device-menu {
    left: 50%;
    right: auto;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    min-width: min(280px, calc(100vw - 48px));
}

@media (prefers-reduced-motion: reduce) {
    .call-prejoin-panel .pc-call-dock-toggle,
    .call-prejoin-panel .pc-call-dock-toggle .pc-call-icon {
        transition: none !important;
    }
}

.call-prejoin-start {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 999px;
    background: #9381ff;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.16s ease;
}

.call-prejoin-start:hover {
    background: #a593ff;
}

.call-prejoin-start:active {
    transform: scale(0.985);
}

.call-recording-save-modal {
    position: fixed;
    inset: 0;
    z-index: 12060;
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-recording-save-modal.hidden {
    display: none !important;
}

.call-recording-save-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.call-recording-save-sheet {
    position: relative;
    width: min(400px, calc(100vw - 32px));
    padding: 22px 20px 18px;
    border-radius: 16px;
    background: #202225;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.call-recording-save-sheet h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.call-recording-save-hint {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    line-height: 1.45;
}

.call-recording-save-actions {
    display: flex;
    gap: 10px;
}

.call-recording-save-download,
.call-recording-save-discard {
    flex: 1;
    height: 42px;
    border-radius: 12px;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.call-recording-save-download {
    background: #fff;
    color: #111;
}

.call-recording-save-discard {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* ===== Call recordings library (PC) ===== */
.call-recordings-library {
    --call-rec-lib-width: 220px;
    --call-rec-lib-anim: 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    position: fixed;
    top: 18px;
    right: 18px;
    bottom: 18px;
    width: var(--call-rec-lib-width);
    z-index: 10055;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    box-sizing: border-box;
    background: #1F2024;
    border: 0;
    box-shadow: none;
    border-radius: 22px;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(calc(100% + 40px), 0, 0);
    transition: opacity var(--call-rec-lib-anim), transform var(--call-rec-lib-anim);
    will-change: transform, opacity;
}

.call-recordings-library.hidden {
    display: none !important;
}

.call-recordings-library.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

.call-recordings-library.is-closing {
    opacity: 0;
    transform: translate3d(calc(100% + 40px), 0, 0);
    pointer-events: none;
}

body.pc-call-recordings-lib-solo .call-recordings-library,
body.pc-call-recordings-lib-solo .call-recordings-library.is-open {
    top: 24px;
    right: 24px;
    bottom: 24px;
    left: 24px;
    width: auto;
    --call-rec-lib-width: auto;
    transform: translate3d(0, 0, 0);
    border-radius: 24px;
}

body.pc-call-recordings-lib-solo .call-recordings-library.is-closing {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.985);
}

.call-recordings-library-live {
    pointer-events: auto;
    flex: 0 0 auto;
    height: 56px;
    border: 0;
    border-radius: 999px;
    background: #E44040;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    cursor: pointer;
    box-shadow: none !important;
    filter: none;
    transition: background 0.2s ease;
}

.call-recordings-library-live:hover {
    background: #ed5555;
    box-shadow: none !important;
}

.call-recordings-library-live.is-idle {
    background: #2a2d31;
    box-shadow: none !important;
}

.call-recordings-library-live.is-idle:hover {
    background: #35383d;
    box-shadow: none !important;
}

.call-recordings-library-live.is-solo-hidden {
    display: none !important;
}

.call-recordings-library-live-icon {
    display: inline-flex;
    color: #fff;
}

.call-recordings-library-live-timer {
    font-size: 22px;
    font-weight: 650;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.call-recordings-library-grid {
    pointer-events: auto;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-content: start;
    overflow: auto;
    padding-right: 2px;
}

body.pc-call-recordings-lib-solo .call-recordings-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.call-recordings-library-card {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    border: 2px solid transparent;
    background: #2a2d31;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    color: #fff;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.call-recordings-library-card:hover {
    transform: translateY(-1px);
}

.call-recordings-library-card.is-active,
.call-recordings-library-card.is-selected {
    border-color: #ff3b30;
    background: #1b1d20;
}

.call-recordings-library-card-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #1b1d20;
}

.call-recordings-library-card-meta {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(20, 21, 23, 0.28);
    pointer-events: none;
}

.call-recordings-library-card.is-active .call-recordings-library-card-meta,
.call-recordings-library-card:not(.has-thumb) .call-recordings-library-card-meta {
    background: rgba(20, 21, 23, 0.72);
}

.call-recordings-library-card-icon {
    width: 28px;
    height: 28px;
    color: #fff;
    opacity: 0.95;
}

.call-recordings-library-card-time {
    font-size: 15px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.call-recordings-library-card-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
}

.call-recordings-library-card:hover .call-recordings-library-card-delete {
    opacity: 1;
}

.call-recordings-library-slot {
    display: none !important;
}

.call-recordings-library-footer {
    pointer-events: auto;
    flex: 0 0 auto;
    display: flex;
    justify-content: stretch;
}

.call-recordings-library-close {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: #2a2d31;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.call-recordings-library-close:hover {
    background: #35383d;
}

.call-recording-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 12070;
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-recording-preview-modal.hidden {
    display: none !important;
}

.call-recording-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
}

.call-recording-preview-sheet {
    position: relative;
    width: min(860px, calc(100vw - 48px));
    padding: 14px;
    border-radius: 18px;
    background: #202225;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

.call-recording-preview-sheet video {
    width: 100%;
    max-height: min(68vh, 560px);
    border-radius: 12px;
    background: #000;
    display: block;
}

.call-recording-preview-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.call-recording-preview-download,
.call-recording-preview-delete,
.call-recording-preview-close {
    flex: 1;
    height: 42px;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.call-recording-preview-download {
    background: #fff;
    color: #111;
}

.call-recording-preview-delete {
    background: rgba(255, 59, 48, 0.18);
    color: #ff8a82;
}

.call-recording-preview-close {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

@media (min-width: 769px) {
    body.pc-call-recordings-lib-open #call-you-waiting-screen.call-desktop-window:not(.hidden),
    body.pc-call-recordings-lib-open #fullscreen-call-screen.call-desktop-window:not(.hidden),
    body.pc-call-recordings-lib-open #call-waiting-for-you-screen.call-desktop-window:not(.hidden),
    body.pc-call-recordings-lib-open #call-rejected-screen.call-desktop-window:not(.hidden),
    body.pc-call-recordings-lib-open #call-you-waiting-screen:not(.hidden),
    body.pc-call-recordings-lib-open #fullscreen-call-screen:not(.hidden),
    body.pc-call-recordings-lib-open #call-waiting-for-you-screen:not(.hidden),
    body.pc-call-recordings-lib-open #call-rejected-screen:not(.hidden) {
        background: #1F2024 !important;
        /* left inset + right room for sidebar (220) + gaps */
        padding: 18px 252px 18px 18px !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    body.pc-call-recordings-lib-open #call-you-waiting-screen .call-container,
    body.pc-call-recordings-lib-open #fullscreen-call-screen .fullscreen-call-container,
    body.pc-call-recordings-lib-open #call-waiting-for-you-screen .call-container,
    body.pc-call-recordings-lib-open #call-rejected-screen .call-container,
    body.pc-call-recordings-lib-open #call-you-waiting-screen.call-desktop-window .call-container,
    body.pc-call-recordings-lib-open #fullscreen-call-screen.call-desktop-window .fullscreen-call-container,
    body.pc-call-recordings-lib-open #call-waiting-for-you-screen.call-desktop-window .call-container,
    body.pc-call-recordings-lib-open #call-rejected-screen.call-desktop-window .call-container {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        margin-right: 0 !important;
        border-radius: 28px !important;
        overflow: hidden !important;
        background: #141517 !important;
        flex: 1 1 auto !important;
        align-self: stretch !important;
    }

    body.pc-call-recordings-lib-solo #call-you-waiting-screen,
    body.pc-call-recordings-lib-solo #fullscreen-call-screen,
    body.pc-call-recordings-lib-solo #call-waiting-for-you-screen,
    body.pc-call-recordings-lib-solo #active-call-screen,
    body.pc-call-recordings-lib-solo #call-rejected-screen {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        transition: opacity 0.32s ease, visibility 0.32s ease;
    }

    body.pc-call-recordings-lib-solo {
        background: #1F2024;
    }
}

@media (max-width: 768px) {
    .call-recordings-library {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .call-controls {
        gap: 15px;
        padding: 15px;
    }

    .call-btn {
        width: 50px;
        height: 50px;
    }

    .caller-avatar {
        width: 120px;
        height: 120px;
        font-size: 50px;
    }

    .caller-name {
        font-size: 24px;
    }

    #local-video {
        width: 100px;
        height: 133px;
        top: 15px;
        right: 15px;
    }

    .minimized-call {
        width: calc(100% - 40px);
        max-width: 350px;
    }
}

/* Унифицированные мобильные кнопки звонка во всех исходящих состояниях:
   ожидание ответа, активный звонок, полноэкранный звонок.
   Входящий экран (принять/отклонить) НЕ трогаем. */
@media (max-width: 768px) {
    #call-you-waiting-screen .call-controls-bottom,
    #active-call-screen .call-controls,
    #fullscreen-call-screen .fullscreen-call-controls,
    #call-you-waiting-screen .pc-call-dock-bar,
    #fullscreen-call-screen .pc-call-dock-bar {
        left: 50% !important;
        right: auto !important;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        padding: 0 !important;
        gap: 16px !important;
        justify-content: center !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    #call-you-waiting-screen .call-controls-bottom,
    #fullscreen-call-screen .fullscreen-call-controls {
        position: absolute !important;
    }

    #call-you-waiting-screen .pc-call-dock-pill,
    #fullscreen-call-screen .pc-call-dock-pill,
    #call-you-waiting-screen .pc-call-dock-tools,
    #fullscreen-call-screen .pc-call-dock-tools {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    #active-call-screen .call-tools-group,
    #fullscreen-call-screen .call-tools-group {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        gap: 16px !important;
    }

    #call-you-waiting-screen .pc-call-dock-pill .call-control-btn:not(.end-call-btn),
    #fullscreen-call-screen .pc-call-dock-pill .call-btn:not(.end-call-btn),
    #call-you-waiting-screen .pc-call-dock-tools .call-control-btn:not(.end-call-btn),
    #fullscreen-call-screen .pc-call-dock-tools .call-btn:not(.end-call-btn),
    #active-call-screen .call-tools-group .call-btn:not(.end-call-btn) {
        width: 60px !important;
        height: 60px !important;
        border: none !important;
        border-radius: 50% !important;
        background: rgba(18, 18, 22, 0.82) !important;
        backdrop-filter: blur(18px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        color: #ffffff !important;
    }

    #call-you-waiting-screen .call-control-btn.end-call-btn.pc-call-dock-end,
    #fullscreen-call-screen .end-call-btn.pc-call-dock-end,
    #fullscreen-call-screen .call-control-btn.end-call-btn.pc-call-dock-end {
        width: auto !important;
        min-width: 112px !important;
        height: 60px !important;
        padding: 0 24px !important;
        border: 1px solid rgba(255, 59, 48, 0.45) !important;
        border-radius: 9999px !important;
        background: rgba(239, 83, 80, 0.22) !important;
        color: #ffffff !important;
        box-shadow: none !important;
        backdrop-filter: blur(14px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    }

    #call-you-waiting-screen .call-control-btn.end-call-btn.pc-call-dock-end svg,
    #fullscreen-call-screen .end-call-btn.pc-call-dock-end svg,
    #fullscreen-call-screen .call-control-btn.end-call-btn.pc-call-dock-end svg {
        stroke: #ffffff !important;
        color: #ffffff !important;
    }

    #active-call-screen .end-call-btn:not(.pc-call-dock-end) {
        width: auto !important;
        min-width: 112px !important;
        height: 60px !important;
        padding: 0 24px !important;
        border: 1px solid rgba(255, 59, 48, 0.45) !important;
        border-radius: 9999px !important;
        background: rgba(239, 83, 80, 0.34) !important;
        color: #ffffff !important;
        backdrop-filter: blur(14px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
        box-shadow: 0 8px 18px rgba(198, 40, 40, 0.14) !important;
    }

    #active-call-screen .end-call-btn:not(.pc-call-dock-end) svg {
        stroke: #ffffff !important;
        color: #ffffff !important;
    }
}

.create-menu-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-black);
    z-index: 10000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

@media (max-width: 768px) {
    .create-menu-modal {
        background: var(--bg-dark);
    }
    .create-menu-modal > .create-menu-shell,
    .create-menu-modal > div {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
    }

    .create-menu-header {
        display: none !important;
    }

    .create-menu-content {
        padding-bottom: calc(140px + env(safe-area-inset-bottom));
    }
}

.create-menu-modal.hidden {
    display: none;
}

.create-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
}

.create-menu-back {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.create-menu-back svg {
    width: 20px;
    height: 20px;
    display: block;
}

.create-menu-title {
    color: var(--text-white);
    font-size: 18px;
    font-weight: 600;
    flex: 1;
}

.create-menu-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-height: 0;
}

.create-bottom-pill-btn--plus.is-active {
    background: transparent;
}

@media (min-width: 769px) {
    .create-menu-modal {
        justify-content: center;
        align-items: center;
        padding: 24px;
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        opacity: 0;
        transition:
            opacity 0.34s ease,
            background 0.4s ease,
            backdrop-filter 0.4s ease,
            -webkit-backdrop-filter 0.4s ease;
    }

    .create-menu-modal.is-open {
        opacity: 1;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
    }

    .create-menu-modal.is-closing {
        opacity: 0;
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        pointer-events: none;
        transition:
            opacity 0.28s ease,
            background 0.28s ease,
            backdrop-filter 0.28s ease,
            -webkit-backdrop-filter 0.28s ease;
    }

    .create-menu-modal > .create-menu-shell,
    .create-menu-modal > div {
        background: #161618;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        max-width: 420px;
        width: min(420px, 100%);
        max-height: min(80vh, 640px);
        display: flex;
        flex-direction: column;
        box-shadow: none;
        overflow: hidden;
        opacity: 0;
        transform: scale(1.12) translateY(10px);
        transform-origin: center center;
        will-change: transform, opacity;
        transition:
            transform 0.52s cubic-bezier(0.32, 0.72, 0, 1),
            opacity 0.28s ease;
    }

    .create-menu-modal.is-open > .create-menu-shell,
    .create-menu-modal.is-open > div {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    .create-menu-modal.is-closing > .create-menu-shell,
    .create-menu-modal.is-closing > div {
        opacity: 0;
        transform: scale(0.94) translateY(14px);
        transition:
            transform 0.3s cubic-bezier(0.4, 0, 1, 1),
            opacity 0.22s ease;
    }

    .create-menu-modal.is-open .create-menu-section {
        animation: createMenuSectionIn 0.46s cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    .create-menu-modal.is-open .create-menu-section:nth-child(1) { animation-delay: 0.06s; }
    .create-menu-modal.is-open .create-menu-section:nth-child(2) { animation-delay: 0.11s; }
    .create-menu-modal.is-open .create-menu-section:nth-child(3) { animation-delay: 0.16s; }

    @keyframes createMenuSectionIn {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .create-menu-modal,
        .create-menu-modal > .create-menu-shell,
        .create-menu-modal > div,
        .create-menu-modal.is-open .create-menu-section {
            transition: none !important;
            animation: none !important;
            transform: none !important;
            opacity: 1 !important;
        }
    }

    body.theme-light .create-menu-modal.is-open {
        background: rgba(20, 20, 24, 0.35);
    }

    body.theme-light .create-menu-modal > .create-menu-shell,
    body.theme-light .create-menu-modal > div {
        background: #f7f7f8;
        border-color: rgba(0, 0, 0, 0.08);
    }

    .create-menu-header {
        padding: 18px 18px 12px;
        background: transparent;
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 0;
        margin: 0;
        max-width: 100%;
        width: 100%;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    body.theme-light .create-menu-header {
        border-bottom-color: rgba(0, 0, 0, 0.08);
    }

    .create-menu-title {
        font-family: 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: rgba(255, 255, 255, 0.95);
        order: 0;
        flex: 1;
    }

    body.theme-light .create-menu-title {
        color: #111;
    }

    .create-menu-back {
        order: 1;
        width: 36px;
        height: 36px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.72);
        transition: background 0.15s ease, color 0.15s ease;
        flex-shrink: 0;
    }

    .create-menu-back:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .create-menu-back svg {
        width: 18px;
        height: 18px;
    }

    body.theme-light .create-menu-back {
        background: rgba(0, 0, 0, 0.05);
        color: rgba(0, 0, 0, 0.55);
    }

    body.theme-light .create-menu-back:hover {
        background: rgba(0, 0, 0, 0.08);
        color: #111;
    }

    .create-menu-content {
        padding: 18px 16px 20px;
        gap: 22px;
        max-height: none;
        overflow-y: auto;
    }

    .create-menu-section {
        gap: 10px;
    }

    .create-menu-option--group-pill {
        min-height: 46px;
        height: 46px;
    }
}

@media (max-width: 768px) {
    .create-menu-content {
        padding: 28px 14px calc(140px + env(safe-area-inset-bottom));
        gap: 28px;
    }
}

/* Разделы меню «Создать» */
.create-menu-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.create-menu-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 2px;
}

.create-menu-section-title {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}

.create-menu-section-line {
    flex: 1 1 auto;
    min-width: 24px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.create-menu-section-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.theme-light .create-menu-section-title {
    color: rgba(0, 0, 0, 0.45);
}

body.theme-light .create-menu-section-line {
    background: rgba(0, 0, 0, 0.1);
}

@media (min-width: 769px) {
    .create-menu-section {
        gap: 12px;
    }

    .create-menu-section-title {
        font-size: 12.5px;
    }
}

.create-menu-option {
    background: var(--bg-gray-1);
    /* border: 1px solid var(--white-border); */
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.3s;
    color: var(--text-white);
    width: 100%;
    text-align: left;
    border: none;
    font: inherit;
}

.create-menu-option--group-pill {
    border-radius: 16px;
    justify-content: flex-start;
    align-items: center;
    padding: 0 12px 0 8px;
    min-height: 48px;
    height: 48px;
    gap: 12px;
    background: #232326;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.create-menu-option--group-pill:hover:not(:disabled) {
    background: #2b2b2f;
    border-color: rgba(255, 255, 255, 0.1);
    transform: none;
    box-shadow: none;
}

.create-menu-option--group-pill:active:not(:disabled) {
    transform: none;
    background: #303036;
    box-shadow: none;
}

.create-menu-option--group-pill .create-menu-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
}

.create-menu-option--group-pill .create-menu-icon svg {
    width: 18px;
    height: 18px;
}

.create-menu-option--group-pill .create-menu-option-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.92);
}

.create-menu-option-chevron {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.28);
}

.create-menu-option-chevron svg {
    width: 16px;
    height: 16px;
    display: block;
}

body.theme-light .create-menu-option--group-pill {
    background: #f2f2f4;
    border-color: rgba(0, 0, 0, 0.06);
    color: #111;
}

body.theme-light .create-menu-option--group-pill:hover:not(:disabled) {
    background: #ebebef;
    border-color: rgba(0, 0, 0, 0.1);
}

body.theme-light .create-menu-option--group-pill:active:not(:disabled) {
    background: #e4e4e9;
}

body.theme-light .create-menu-option--group-pill .create-menu-icon {
    background: rgba(0, 0, 0, 0.05);
    color: #111;
}

body.theme-light .create-menu-option--group-pill .create-menu-option-text {
    color: #111;
}

body.theme-light .create-menu-option-chevron {
    color: rgba(0, 0, 0, 0.28);
}

.create-menu-options-card {
    width: 100%;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.create-menu-option--card-item {
    border-radius: 0;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}

.create-menu-option--card-item + .create-menu-option--card-item { border-top: none; }

.create-menu-option:hover:not(:disabled) {
    background: var(--bg-gray-2);
    border-color: var(--white-hover);
    transform: translateY(-2px);
}

.create-menu-option--card-item:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    transform: none;
}

.create-menu-option--card-item:focus,
.create-menu-option--card-item:focus-visible {
    outline: none;
    box-shadow: none;
}

.create-menu-option:active:not(:disabled) {
    transform: translateY(0);
}

.create-menu-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.create-menu-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.create-menu-icon svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
}

.create-menu-icon-group,
.create-menu-icon-channel,
.create-menu-icon-wallet,
.create-menu-icon-developer {
    color: #ffffff;
}

.channel-profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 20px 16px;
}

.channel-profile-actions.hidden {
    display: none !important;
}

.channel-profile-actions .btn-primary,
.channel-profile-actions .btn-secondary {
    width: 100%;
}

.channel-profile-actions .channel-subscribe-btn,
.channel-composer-actions .channel-composer-subscribe-btn,
.channel-profile-actions .channel-unsubscribe-btn,
.channel-composer-actions .channel-composer-unsubscribe-btn {
    border-radius: 999px;
}

.channel-profile-actions .channel-subscribe-btn,
.channel-composer-actions .channel-composer-subscribe-btn {
    background: #8b5cf6;
    border: none;
    color: #ffffff;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    outline: none;
}

.channel-profile-actions .channel-subscribe-btn:hover,
.channel-composer-actions .channel-composer-subscribe-btn:hover {
    background: #7c3aed;
    color: #ffffff;
    box-shadow: none;
}

.channel-profile-actions .channel-subscribe-btn:focus,
.channel-profile-actions .channel-subscribe-btn:focus-visible,
.channel-composer-actions .channel-composer-subscribe-btn:focus,
.channel-composer-actions .channel-composer-subscribe-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

.channel-profile-actions .channel-unsubscribe-btn,
.channel-composer-actions .channel-composer-unsubscribe-btn {
    background: #ffffff;
    border: none;
    color: #8b5cf6;
    margin-top: 0;
    box-shadow: none;
    outline: none;
    text-transform: none;
    letter-spacing: normal;
}

.channel-profile-actions .channel-unsubscribe-btn:hover,
.channel-composer-actions .channel-composer-unsubscribe-btn:hover {
    background: #f5f3ff;
    color: #7c3aed;
    box-shadow: none;
}

.channel-profile-actions .channel-unsubscribe-btn:focus,
.channel-profile-actions .channel-unsubscribe-btn:focus-visible,
.channel-composer-actions .channel-composer-unsubscribe-btn:focus,
.channel-composer-actions .channel-composer-unsubscribe-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

.channel-text {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

.channel-composer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 16px;
    align-items: center;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.channel-composer-actions.hidden {
    display: none !important;
}

.channel-composer-actions .btn-primary,
.channel-composer-actions .btn-secondary {
    width: auto;
    min-width: 156px;
    max-width: min(220px, 72vw);
    padding-left: 24px;
    padding-right: 24px;
    text-transform: none;
    letter-spacing: normal;
}

/* DM: вместо ввода — кнопка «Разблокировать» */
.blocked-composer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 16px;
    align-items: center;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.blocked-composer-actions.hidden {
    display: none !important;
}

.blocked-composer-actions .blocked-composer-unblock-btn {
    width: auto;
    min-width: 180px;
    max-width: min(280px, 80vw);
    min-height: 48px;
    padding: 12px 28px;
    border-radius: 999px;
    border: none;
    outline: none;
    background: rgba(26, 26, 30, 0.62);
    color: rgba(255, 255, 255, 0.96);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.blocked-composer-actions .blocked-composer-unblock-btn:hover {
    background: rgba(26, 26, 30, 0.72);
    color: #fff;
}

.blocked-composer-actions .blocked-composer-unblock-btn:active {
    transform: scale(0.98);
}

body.theme-light .blocked-composer-actions .blocked-composer-unblock-btn {
    background: rgba(255, 255, 255, 0.72);
    border: none;
    color: #1a2330;
    box-shadow: 0 12px 28px rgba(42, 64, 88, 0.16);
}

body.theme-light .blocked-composer-actions .blocked-composer-unblock-btn:hover {
    background: rgba(255, 255, 255, 0.86);
    color: #1a2330;
}

.create-channel-error {
    color: #f87171;
    font-size: 14px;
    min-height: 1.2em;
    margin-top: 8px;
}

.search-result-kind {
    flex-shrink: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    padding-left: 8px;
}

.search-result-item--community .search-result-avatar--community {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* XAMWallet sheet (из меню «Создать») */
.xam-wallet-sheet {
    position: fixed;
    inset: 0;
    z-index: 10150;
    pointer-events: none;
}

.xam-wallet-sheet.hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.xam-wallet-sheet--open {
    pointer-events: auto;
}

.xam-wallet-sheet-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    background:
        radial-gradient(120% 80% at 88% 6%, rgba(72, 92, 255, 0.88) 0%, rgba(72, 92, 255, 0.46) 28%, rgba(72, 92, 255, 0) 62%),
        linear-gradient(180deg, #1f2344 0%, #252a4c 48%, #252a45 100%);
    transform: translate3d(0, 100%, 0);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.xam-wallet-sheet-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
    background:
        radial-gradient(120% 80% at 88% 6%, rgba(255, 196, 72, 0.9) 0%, rgba(255, 178, 48, 0.5) 28%, rgba(255, 178, 48, 0) 62%),
        linear-gradient(180deg, #2c2612 0%, #3d3618 48%, #383218 100%);
}

.xam-wallet-sheet-panel.xam-wallet-sheet-panel--summer::before {
    opacity: 1;
}

.xam-wallet-sheet-panel > * {
    position: relative;
    z-index: 1;
}

.xam-wallet-sheet--open .xam-wallet-sheet-panel {
    transform: translate3d(0, 0, 0);
}

body.xam-wallet-sheet-open {
    overflow: hidden;
}

.xam-wallet-sheet-top {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: calc(max(10px, env(safe-area-inset-top, 0px)) + 26px) 16px 12px;
}

.xam-wallet-sheet-top-balance {
    display: none;
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(max(10px, env(safe-area-inset-top, 0px)) + 26px);
    bottom: 12px;
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    pointer-events: none;
    text-align: center;
}

.xam-wallet-sheet-top-balance-label {
    opacity: 0.92;
}

.xam-wallet-sheet-top-balance-value {
    font-weight: 700;
}

.xam-wallet-sheet-panel--market-open .xam-wallet-sheet-top-balance {
    display: flex;
}

.xam-wallet-sheet-back {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: #171717;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.xam-wallet-sheet-back:active {
    background: #1f1f1f;
}

.xam-wallet-views-stage {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.xam-wallet-view {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.xam-wallet-view.hidden {
    display: none !important;
}

.xam-wallet-view--overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    visibility: hidden;
}

.xam-wallet-view--overlay.is-active {
    visibility: visible;
}

.xam-wallet-view--overlay.is-visible {
    pointer-events: auto;
}

.xam-wallet-view--overlay .xam-wallet-subview {
    transform: translate3d(0, 108%, 0);
    opacity: 0;
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.34s ease;
}

.xam-wallet-view--overlay.is-visible .xam-wallet-subview {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.xam-wallet-view--main.is-hiding-art .xam-wallet-art {
    transform: translate3d(0, -108%, 0) scale(0.94);
    opacity: 0;
    pointer-events: none;
}

.xam-wallet-view--main.is-hiding-art .xam-wallet-card {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.98);
    pointer-events: none;
}

.xam-wallet-view--main > .xam-wallet-card {
    transition:
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease;
}

.xam-wallet-sheet-panel.xam-wallet-views--instant .xam-wallet-art,
.xam-wallet-sheet-panel.xam-wallet-views--instant .xam-wallet-view--main > .xam-wallet-card,
.xam-wallet-sheet-panel.xam-wallet-views--instant .xam-wallet-view--overlay .xam-wallet-subview {
    transition: none !important;
}

.xam-wallet-subview {
    flex: 1 1 0;
    min-height: 0;
    margin: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 28px 20px 24px;
    background: #090909;
    border-radius: 44px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.xam-wallet-subview--fill {
    margin-top: 0;
}

.xam-wallet-subview--market {
    position: relative;
    overflow: hidden;
}

.xam-wallet-market-main {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.xam-wallet-market-ultra-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 8px;
}

.xam-wallet-market-ultra-btn {
    flex: 1 1 0;
    min-width: 0;
    font-size: 16px;
    padding: 16px 14px;
}

.xam-wallet-market-ultra-btn.is-active {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    opacity: 0.92;
    cursor: default;
}

.xam-wallet-market-ultra-help-btn {
    flex-shrink: 0;
    width: 52px;
    min-width: 52px;
    height: 52px;
    border: none;
    border-radius: 999px;
    background: #171717;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.xam-wallet-market-ultra-help-btn:active {
    background: #1f1f1f;
}

.xam-wallet-market-info-sheet {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    background: #090909;
    border-radius: 44px;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.xam-wallet-market-info-sheet.is-open {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

.xam-wallet-market-info-close {
    align-self: flex-start;
    border: none;
    border-radius: 999px;
    background: #171717;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1;
    padding: 11px 18px;
    cursor: pointer;
}

.xam-wallet-market-info-close:active {
    background: #1f1f1f;
}

.xam-wallet-market-info-title {
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: clamp(22px, 5.5vw, 28px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.xam-wallet-market-info-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.xam-wallet-market-info-scroll .xam-wallet-subview-hint {
    text-align: left;
}

.xam-wallet-market-premium-gift-btn {
    margin-top: 10px;
    flex-shrink: 0;
}

.xam-wallet-market-gifts-label {
    margin-top: 18px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.xam-wallet-market-gifts-scroll {
    flex: 1 1 0;
    min-height: 0;
    margin-top: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.xam-wallet-market-gifts-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-bottom: 8px;
}

.xam-wallet-market-gift-card {
    border: none;
    border-radius: 18px;
    background: #171717;
    padding: 16px 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.xam-wallet-market-gift-card:active {
    background: #1f1f1f;
    transform: scale(0.98);
}

.xam-wallet-market-gift-card-icon {
    font-size: 40px;
    line-height: 1;
}

.xam-wallet-market-gift-card-name {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-style: italic;
    line-height: 1.2;
}

.xam-wallet-market-gift-card-price {
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    font-weight: 700;
}

.xam-wallet-market-gift-sheet.is-stacked {
    z-index: 3;
}

.xam-wallet-market-gift-sheet {
    overflow: hidden;
    min-height: 0;
}

.xam-wallet-market-gift-sheet-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.xam-wallet-market-gift-sheet-footer {
    flex-shrink: 0;
    padding-top: 12px;
    background: #090909;
}

.xam-wallet-market-gift-sheet--send {
    gap: 12px;
    min-height: 0;
}

.xam-wallet-market-gift-send-top {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
}

.xam-wallet-market-gift-send-top .xam-wallet-market-info-close {
    grid-column: 1;
    justify-self: start;
    position: relative;
    z-index: 1;
}

.xam-wallet-market-gift-send-top .xam-wallet-market-info-title {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    pointer-events: none;
}

.xam-wallet-market-gift-send-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.xam-wallet-market-gift-send-chats {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xam-wallet-market-gift-send-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xam-wallet-market-gift-sheet--send .xam-wallet-market-gift-display--compact {
    flex-shrink: 0;
}

.xam-wallet-market-gift-sheet--send .xam-wallet-market-info-title {
    margin: 0;
    flex-shrink: 0;
}

.xam-wallet-market-gift-sheet--send .xam-wallet-market-gift-label {
    margin: 0;
    flex-shrink: 0;
}

.xam-wallet-market-gift-sheet--send .xam-wallet-market-gift-input--compact {
    flex-shrink: 0;
    min-height: 44px;
    resize: none;
}

.xam-wallet-market-gift-sheet--send .xam-wallet-market-gift-sheet-footer {
    margin-top: 0;
    padding-top: 0;
}

.xam-wallet-market-gift-display--compact {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 18px;
    background: #141414;
    flex-shrink: 0;
}

.xam-wallet-market-gift-display--compact .xam-wallet-market-gift-icon {
    font-size: 40px;
    line-height: 1;
}

.xam-wallet-market-gift-display-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.xam-wallet-market-gift-display--compact .xam-wallet-market-gift-name {
    font-size: 18px;
    text-align: left;
    line-height: 1.2;
}

.xam-wallet-market-gift-display--compact .xam-wallet-market-gift-price {
    font-size: 15px;
}

.xam-wallet-market-gift-chats-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.xam-wallet-market-gift-chats-head .xam-wallet-market-gift-label {
    margin: 0;
}

.xam-wallet-market-gift-chats-hint {
    color: rgba(255, 255, 255, 0.38);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.xam-wallet-market-gift-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 0 4px;
}

.xam-wallet-market-gift-icon {
    font-size: 56px;
    line-height: 1;
}

.xam-wallet-market-gift-name {
    color: #fff;
    font-size: clamp(20px, 5vw, 24px);
    font-weight: 700;
    font-style: italic;
    text-align: center;
}

.xam-wallet-market-gift-price {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    font-weight: 700;
}

.xam-wallet-market-gift-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}

.xam-wallet-market-gift-label {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 600;
    margin: 10px 0 8px;
}

.xam-wallet-market-gift-input,
.xam-wallet-market-gift-search {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 16px;
    background: #171717;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
    padding: 14px 16px;
    resize: vertical;
    min-height: 48px;
}

.xam-wallet-market-gift-input::placeholder,
.xam-wallet-market-gift-search::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.xam-wallet-market-gift-input:focus,
.xam-wallet-market-gift-search:focus {
    outline: none;
    background: #1f1f1f;
}

.xam-wallet-market-gift-chats-scroll {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: min(42vh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 4px;
}

.xam-wallet-market-gift-sheet--send .xam-wallet-market-gift-chats-scroll {
    position: relative;
    flex: 1 1 0;
    min-height: 140px;
    max-height: none;
    margin: 0;
    padding: 8px;
    border-radius: 20px;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overscroll-behavior: contain;
}

.xam-wallet-market-gift-sheet--send .xam-wallet-market-gift-chats-scroll::after {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 44px;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(to bottom, rgba(17, 17, 17, 0), #111 70%);
}

.xam-wallet-market-gift-sheet--send .xam-wallet-market-gift-chats {
    padding-bottom: 28px;
}

.xam-wallet-market-gift-sheet--send:not(.is-scrollable-chats) .xam-wallet-market-gift-chats-hint,
.xam-wallet-market-gift-sheet--send:not(.is-scrollable-chats) .xam-wallet-market-gift-chats-scroll::after {
    opacity: 0;
}

.xam-wallet-market-gift-sheet .xam-wallet-market-gift-display {
    flex-shrink: 0;
}

.xam-wallet-market-gift-sheet .xam-wallet-market-info-title {
    flex-shrink: 0;
}

.xam-wallet-market-gift-chats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xam-wallet-market-gift-chat-item {
    border: none;
    border-radius: 16px;
    background: #171717;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    text-align: left;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.xam-wallet-market-gift-chat-item:active,
.xam-wallet-market-gift-chat-item.is-selected {
    background: #262626;
}

.xam-wallet-market-gift-chat-item.is-empty {
    cursor: default;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    justify-content: center;
}

.xam-wallet-market-gift-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #2a2a2a;
}

.xam-wallet-market-gift-chat-avatar.is-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    background: #2a2a2a;
}

.xam-wallet-market-gift-chat-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xam-wallet-market-gift-purchase-btn {
    margin-top: 0;
    flex-shrink: 0;
    width: 100%;
}

.xam-wallet-market-gift-purchase-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.xam-wallet-market-premium-gift-hint {
    margin: -4px 0 0;
    text-align: center;
}

.mobile-account-switch-sheet {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
}

.mobile-account-switch-sheet.is-open {
    pointer-events: auto;
}

.mobile-account-switch-sheet.hidden {
    display: none !important;
}

.mobile-account-switch-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.32s ease;
    padding: 0;
    cursor: pointer;
}

.mobile-account-switch-sheet.is-open .mobile-account-switch-backdrop {
    opacity: 1;
}

.mobile-account-switch-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: min(78vh, 640px);
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    background: #090909;
    border-radius: 28px 28px 0 0;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-account-switch-sheet.is-open .mobile-account-switch-panel {
    transform: translate3d(0, 0, 0);
}

.mobile-account-switch-close {
    align-self: flex-start;
    border: none;
    border-radius: 999px;
    background: #171717;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1;
    padding: 11px 18px;
    cursor: pointer;
}

.mobile-account-switch-close:active {
    background: #1f1f1f;
}

.mobile-account-switch-title {
    margin: -4px 0 0;
    text-align: center;
    color: #fff;
    font-size: clamp(22px, 5.5vw, 28px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.mobile-account-switch-hint {
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    line-height: 1.35;
}

.mobile-account-switch-list {
    flex: 0 1 auto;
    min-height: 72px;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-account-switch-item {
    border: none;
    border-radius: 16px;
    background: #171717;
    color: #fff;
    font-family: inherit;
    text-align: left;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mobile-account-switch-item:active {
    background: #1f1f1f;
}

.mobile-account-switch-item.is-current {
    background: #222;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    cursor: default;
}

.mobile-account-switch-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2a2a2a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    overflow: hidden;
}

.mobile-account-switch-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-account-switch-info {
    flex: 1 1 0;
    min-width: 0;
}

.mobile-account-switch-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-account-switch-username {
    margin-top: 2px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-account-switch-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.mobile-account-switch-add-btn {
    flex-shrink: 0;
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 16px 20px;
    background: #171717;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.mobile-account-switch-add-btn:active {
    background: #1f1f1f;
}

.mobile-account-switch-add-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.xam-wallet-subview--shop {
    padding: 0;
    overflow: hidden;
    background: #4a4a4a;
}

.xam-wallet-shop-iframe {
    display: block;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    border: none;
    border-radius: 44px;
    background: #4a4a4a;
}

.xam-wallet-subview-title {
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: clamp(22px, 5.5vw, 28px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.xam-wallet-subview-hint {
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.62);
    font-size: 15px;
    line-height: 1.4;
}

.xam-wallet-activate-form {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xam-wallet-activate-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 999px;
    padding: 16px 20px;
    background: #171717;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
    outline: none;
}

.xam-wallet-activate-input::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.xam-wallet-activate-message {
    min-height: 20px;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
}

.xam-wallet-transactions-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}

.xam-wallet-transactions-scroll .xams-transaction-item {
    border-color: rgba(255, 255, 255, 0.14);
}

.xam-wallet-view--main .xam-wallet-art {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 30px 16px 12px;
    overflow: hidden;
    transform-origin: center top;
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.34s ease;
}

.xam-wallet-cards-viewport {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.xam-wallet-cards-viewport.is-dragging {
    cursor: grabbing;
}

.xam-wallet-cards-track {
    height: 100%;
    display: flex;
    align-items: center;
    transition: transform 0.28s ease;
}

.xam-wallet-card-slide {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xam-wallet-card-image {
    display: block;
    width: 100%;
    max-width: min(430px, 100%);
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

.xam-wallet-card-dots {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 10px;
}

.xam-wallet-card-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
}

.xam-wallet-card-dot.is-active {
    background: rgba(255, 255, 255, 0.98);
}

.xam-wallet-card {
    flex-shrink: 0;
    margin-top: auto;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 28px 20px 24px;
    background: #090909;
    border-radius: 44px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: min(52vh, 420px);
}

.xam-wallet-card-title {
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: clamp(24px, 6vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.xam-wallet-balance-line {
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
}

.xam-wallet-actions-stack {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.xam-wallet-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.xam-wallet-market-btn {
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 14px 20px;
    background: #171717;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.25;
    cursor: pointer;
    text-align: center;
}

.xam-wallet-market-btn:active {
    background: #1f1f1f;
}

.xam-wallet-action-btn {
    border: none;
    border-radius: 999px;
    padding: 14px 12px;
    background: #171717;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.25;
    cursor: pointer;
    text-align: center;
}

.xam-wallet-action-btn:active {
    background: #1f1f1f;
}

.xam-wallet-transactions-btn {
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 16px 20px;
    background: #171717;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.xam-wallet-transactions-btn:active {
    background: #1f1f1f;
}

@media (prefers-reduced-motion: reduce) {
    .xam-wallet-view--main .xam-wallet-art,
    .xam-wallet-view--main > .xam-wallet-card,
    .xam-wallet-view--overlay .xam-wallet-subview {
        transition: none !important;
    }

    .xam-wallet-sheet-panel {
        transition: none !important;
    }
}

@media (min-width: 769px) {
    .xam-wallet-sheet:not(.hidden) {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.52);
    }

    .xam-wallet-sheet-panel {
        position: relative;
        inset: auto;
        width: min(860px, 100%);
        height: min(560px, calc(100vh - 48px));
        max-height: calc(100vh - 48px);
        border-radius: 28px;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
        transform: translate3d(0, 0, 0) scale(0.96);
        opacity: 0;
        transition:
            transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.32s ease;
    }

    .xam-wallet-sheet--open .xam-wallet-sheet-panel {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }

    .xam-wallet-sheet-top {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 6;
        min-height: 0;
        padding: 0;
    }

    .xam-wallet-sheet-top-balance {
        left: auto;
        right: 14px;
        top: 12px;
        bottom: auto;
        width: auto;
        justify-content: flex-end;
    }

    .xam-wallet-sheet-panel--market-open .xam-wallet-sheet-top-balance {
        right: 22px;
    }

    .xam-wallet-views-stage {
        flex: 1;
        min-height: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 14px;
        box-sizing: border-box;
    }

    .xam-wallet-view--main {
        flex: 1;
        min-height: 0;
        flex-direction: row;
        align-items: stretch;
        gap: 14px;
    }

    .xam-wallet-view--main .xam-wallet-art {
        flex: 0 0 38%;
        max-width: 38%;
        min-width: 220px;
        min-height: 0;
        margin: 0;
        padding: 8px 10px 10px;
        background: transparent;
        border-radius: 0;
        box-sizing: border-box;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .xam-wallet-view--main .xam-wallet-card {
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 22px 20px 20px;
        border-radius: 22px;
        background: #090909;
        box-sizing: border-box;
    }

    .xam-wallet-view--main.is-hiding-art .xam-wallet-art {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .xam-wallet-view--main.is-hiding-art .xam-wallet-card {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.98);
        pointer-events: none;
    }

    .xam-wallet-card-image {
        max-width: 100%;
    }

    .xam-wallet-card-title {
        text-align: left;
        font-size: 26px;
    }

    .xam-wallet-balance-line {
        font-size: 16px;
    }

    .xam-wallet-view--overlay {
        position: absolute;
        top: 14px;
        right: 14px;
        bottom: 14px;
        left: calc(14px + 38% + 14px);
        z-index: 4;
        visibility: hidden;
        pointer-events: none;
    }

    .xam-wallet-view--overlay.is-active {
        visibility: visible;
    }

    .xam-wallet-view--overlay.is-visible {
        pointer-events: auto;
    }

    .xam-wallet-view--overlay .xam-wallet-subview {
        margin: 0;
        height: 100%;
        max-height: 100%;
        border-radius: 22px;
        transform: translate3d(16px, 0, 0);
        opacity: 0;
    }

    .xam-wallet-view--overlay.is-visible .xam-wallet-subview {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    .xam-wallet-subview--shop,
    .xam-wallet-subview--market {
        padding: 18px 16px 16px;
    }

    .xam-wallet-subview-title {
        text-align: left;
        font-size: 22px;
    }

    /* Подарить кому-то: на ПК две колонки, кнопка всегда видна */
    .xam-wallet-view--overlay:has(#xam-wallet-market-gift-send-sheet.is-open),
    .xam-wallet-view--overlay:has(#xam-wallet-market-gift-self-sheet.is-open) {
        left: 14px;
    }

    .xam-wallet-market-gift-sheet--send {
        padding: 16px 16px 14px;
        gap: 10px;
    }

    .xam-wallet-market-gift-send-top .xam-wallet-market-info-title {
        font-size: 22px;
    }

    .xam-wallet-market-gift-send-body {
        display: grid;
        grid-template-columns: minmax(210px, 0.9fr) minmax(260px, 1.2fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 12px 18px;
        align-items: stretch;
    }

    .xam-wallet-market-gift-sheet--send .xam-wallet-market-gift-display--compact {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
    }

    .xam-wallet-market-gift-send-chats {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-height: 0;
    }

    .xam-wallet-market-gift-send-actions {
        grid-column: 1;
        grid-row: 2;
        align-self: end;
        gap: 8px;
    }

    .xam-wallet-market-gift-sheet--send .xam-wallet-market-gift-chats-scroll {
        min-height: 0;
    }

    .xam-wallet-market-gift-sheet--send .xam-wallet-market-gift-input--compact {
        min-height: 40px;
        padding: 10px 14px;
        font-size: 15px;
    }
}

.create-menu-icon-channel {
    color: inherit;
}

.create-menu-option--group-pill .create-menu-icon-group,
.create-menu-option--group-pill .create-menu-icon-channel,
.create-menu-option--group-pill .create-menu-icon-wallet,
.create-menu-option--group-pill .create-menu-icon-developer {
    color: inherit;
}

.create-menu-option-text {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-white);
}

@media (max-width: 768px) {
    .create-menu-option {
        padding: 14px 16px;
        gap: 15px;
        border-radius: 14px;
    }
    .create-menu-option--group-pill {
        border-radius: 15px;
        padding: 0 10px 0 7px;
        min-height: 48px;
        height: 48px;
        gap: 11px;
        box-shadow: none;
    }
    .create-menu-option--group-pill .create-menu-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }
    .create-menu-option--group-pill .create-menu-icon svg {
        width: 17px;
        height: 17px;
    }
    .create-menu-option--group-pill .create-menu-option-text {
        font-size: 15px;
        font-weight: 500;
    }
    .create-menu-icon {
        width: 40px;
        height: 40px;
    }
    .create-menu-icon svg {
        width: 26px;
        height: 26px;
    }
    .create-menu-option-text {
        font-size: 16px;
    }

    .create-menu-section-body {
        gap: 6px;
    }

    .create-menu-content {
        gap: 22px;
    }
}

/* Поиск в меню «Создать» — строка и результаты сразу под ней */
.create-menu-search-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
    flex: 1;
    min-height: 0;
}

.create-menu-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #222222;
    border: none;
    border-radius: 999px;
    padding: 0 16px;
    height: 50px;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.create-menu-search-bar.is-focused,
.create-menu-search-bar:focus-within {
    background: #2a2a2a;
}

.create-menu-search-icon {
    color: #ffffff;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.create-menu-search-input,
.search-tab-input,
.sidebar-search-bar .sidebar-search-input {
    flex: 1;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    -webkit-appearance: none;
    appearance: none;
}

.create-menu-search-input:focus,
.search-tab-input:focus,
.sidebar-search-bar .sidebar-search-input:focus {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.create-menu-search-input::placeholder,
.search-tab-input::placeholder,
.sidebar-search-bar .sidebar-search-input::placeholder {
    color: #ffffff;
    opacity: 1;
}

.create-menu-search-input:-webkit-autofill,
.create-menu-search-input:-webkit-autofill:hover,
.create-menu-search-input:-webkit-autofill:focus,
.search-tab-input:-webkit-autofill,
.search-tab-input:-webkit-autofill:hover,
.search-tab-input:-webkit-autofill:focus,
.sidebar-search-bar .sidebar-search-input:-webkit-autofill,
.sidebar-search-bar .sidebar-search-input:-webkit-autofill:hover,
.sidebar-search-bar .sidebar-search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    transition: background-color 99999s ease-out;
    box-shadow: 0 0 0 1000px #222222 inset !important;
}

.create-menu-search-bar:focus-within .create-menu-search-input:-webkit-autofill,
.search-tab-search:focus-within .search-tab-input:-webkit-autofill,
.sidebar-header.search-mode .sidebar-search-bar .sidebar-search-input:-webkit-autofill {
    box-shadow: 0 0 0 1000px #2a2a2a inset !important;
}

.create-menu-results {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 0;
    flex: 1;
    min-height: 80px;
}

.create-menu-results:empty {
    min-height: 0;
}

.create-menu-results .search-result-item {
    border-radius: 12px;
    padding: 12px 14px;
}

.create-menu-results .search-result-item.empty {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* Звонок — компактная карточка в стиле пузыря сообщения */
.message.call-message {
    align-items: flex-end;
}

.call-message-card {
    max-width: min(280px, calc(100vw - 96px));
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 0;
    box-sizing: border-box;
    border: none !important;
    color: #ffffff;
    width: fit-content;
    background: var(--msg-peer-bg);
    border-radius: var(--xam-message-radius, 16px);
}

.message.call-message.own .call-message-card {
    color: #ffffff;
    background: var(--msg-own-bg);
}

.call-message-icon-square,
.call-card-phone-svg {
    display: none !important;
}

.call-message-text-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding-right: 2px;
}

.call-message-title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.call-message-sub {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.78;
    font-variant-numeric: tabular-nums;
    color: inherit;
    flex-wrap: nowrap;
    min-width: 0;
}

.call-message-duration {
    font-size: 12px;
    line-height: 1.15;
    font-weight: 650;
    letter-spacing: 0.01em;
    opacity: 1;
    flex-shrink: 0;
}

.call-message-sub-dot {
    opacity: 0.55;
    flex-shrink: 0;
}

.call-message-range {
    font-size: 12px;
    line-height: 1.15;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Сообщения с подарками в чате — по центру */
.message.gift-message {
    display: flex !important;
    justify-content: center !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0;
    padding: 0;
}

.gift-message-content {
    background: rgba(42, 42, 42, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    max-width: 280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 24px 20px;
    text-align: center;
}

.gift-message-label {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
}

.gift-sale-number {
    color: rgba(255, 200, 80, 0.95);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.gift-icon-large {
    font-size: 64px;
    line-height: 1;
    margin: 8px 0;
}

.gift-name-large {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 8px;
}

.gift-message-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 16px;
}

.gift-message-bottom {
    padding-top: 8px;
    display: flex;
    justify-content: center;
}

.gift-details-btn {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 20px;
    padding: 10px 32px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.gift-details-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
}

.gift-details-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gift-price-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
}

.gift-exchange-btn {
    background: var(--white-border);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.gift-exchange-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.gift-exchange-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Модальное окно уведомления о получении подарка */
#gift-received-modal.gift-received-sheet {
    z-index: 80000 !important;
}

.gift-received-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    line-height: 1;
}

.gift-received-desc {
    color: rgba(255, 255, 255, 0.55) !important;
    font-style: normal;
    margin-top: 10px !important;
}

#gift-received-exchange-btn.hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .gift-received-icon {
        font-size: 46px;
        width: 64px;
        height: 64px;
    }
}

/* Старые классы звонка — заменены карточкой .call-message-card; оставляем совместимость */
.call-message-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-gray-2);
    border-radius: 20px;
    color: var(--gray-text);
    font-size: 14px;
}

.call-icon {
    font-size: 16px;
}

.call-text {
    color: var(--text-white);
}

.call-time {
    color: var(--gray-text);
    font-size: 12px;
}

/* Bottom sheet: создание группы */
.xam-create-group-sheet {
    position: fixed;
    inset: 0;
    z-index: 32500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.xam-create-group-sheet.hidden {
    display: flex !important;
}

.xam-create-group-sheet--open {
    pointer-events: auto;
}

.xam-create-group-sheet--open .xam-create-group-sheet-panel,
.xam-create-group-sheet--open .xam-create-group-sheet-backdrop,
.xam-create-group-sheet--open .xam-create-group-sheet-collapse,
.xam-create-group-sheet--open .xam-create-group-submit-btn,
.xam-create-group-sheet--open .create-group-avatar-container,
.xam-create-group-sheet--open .create-group-type-pill {
    pointer-events: auto;
}

.xam-create-group-sheet-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.32s ease;
}

.xam-create-group-sheet--open .xam-create-group-sheet-backdrop {
    opacity: 1;
}

.xam-create-group-sheet-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    max-height: min(92dvh, 720px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #1c1c1e;
    border-radius: 32px 32px 0 0;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
}

.xam-create-group-sheet--open .xam-create-group-sheet-panel {
    transform: translate3d(0, 0, 0);
}

body.xam-create-group-sheet-open {
    overflow: hidden;
}

.xam-create-group-sheet-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
    flex-shrink: 0;
}

.xam-create-group-sheet-collapse {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.xam-create-group-sheet-collapse:active {
    background: rgba(255, 255, 255, 0.08);
}

.xam-create-group-sheet-title {
    margin: 0;
    flex: 1;
    color: #fff;
    font-size: clamp(20px, 4.8vw, 24px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.xam-create-group-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.create-group-main-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.create-group-avatar-container {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: var(--xam-ui-accent, #8774E1);
    color: #fff;
}

.create-group-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.create-group-avatar-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.create-group-avatar-preview.hidden {
    display: none;
}

.create-group-avatar-placeholder.hidden {
    display: none;
}

.create-group-name-field {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

.create-group-field-label {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

.create-group-pill-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 9999px;
    padding: 14px 18px;
    background: #2c2c2e;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
    outline: none;
}

.create-group-pill-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.create-group-pill-input:focus {
    background: #333335;
}

.create-group-type-pill {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 9999px;
    padding: 14px 18px;
    background: #2c2c2e;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.create-group-type-pill:active {
    background: #333335;
}

.create-group-field-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.create-group-desc-area {
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    border: none;
    border-radius: 20px;
    padding: 14px 16px;
    background: #2c2c2e;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.4;
    resize: vertical;
    outline: none;
}

.create-group-desc-area::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.create-group-desc-area:focus {
    background: #333335;
}

.create-group-field-hint {
    margin: 4px 0 0;
    padding: 0 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.35;
}

.create-group-error {
    display: none;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(220, 38, 38, 0.15);
    color: #fca5a5;
    font-size: 14px;
    line-height: 1.35;
}

.create-group-error.show {
    display: block;
}

.xam-create-group-sheet-footer {
    flex-shrink: 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

.xam-create-group-submit-btn {
    display: block;
    width: 100%;
    border: none;
    border-radius: 9999px;
    padding: 16px 24px;
    background: var(--xam-ui-accent, #8774E1);
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.xam-create-group-submit-btn:hover:not(:disabled) {
    background: var(--xam-ui-accent-hover, #a675f3);
}

.xam-create-group-submit-btn:active:not(:disabled) {
    background: var(--xam-ui-accent-hover, #8550e0);
    filter: brightness(0.92);
}

.xam-create-group-submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (min-width: 769px) {
    .xam-create-group-sheet-panel {
        max-width: min(480px, calc(100% - 24px));
        margin: 0 auto;
        border-radius: 28px 28px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xam-create-group-sheet-backdrop,
    .xam-create-group-sheet-panel {
        transition: none !important;
    }
}

.form-hint {
    font-size: 12px;
    color: var(--gray-text);
    margin-top: 4px;
}

textarea:focus {
    outline: none;
    border-color: var(--white-border);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

/* Профиль группы */
.group-profile-modal {
    max-width: 600px;
    padding: 0;
    position: relative;
    border: none !important;
    background: var(--bg-dark);
    box-shadow: none !important;
}

.group-profile-modal .modal-content {
    border: none !important;
    box-shadow: none !important;
    position: relative;
}

.group-attachments-view {
    display: none;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.group-attachments-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.group-attachments-title {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 600;
}

.group-attachments-back {
    position: static;
    width: 40px;
    height: 40px;
}

.group-attachments-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.group-attachments-entry {
    padding: 14px 12px 14px;
}

.group-attachments-entry-btn {
    width: 100%;
    height: 52px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(20, 20, 20, 0.55);
    color: rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: none;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.group-attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.group-attachment-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.group-attachment-type {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.66);
}

.group-attachment-name {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.group-attachment-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

/* Анимация открытия профиля группы на ПК */
@media (min-width: 769px) {
    @keyframes profileHeaderFadeIn {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes profileActionsFadeIn {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes profileInfoFadeIn {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes profileMediaFadeIn {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    #group-profile-modal:not(.hidden):not(.closing) .modal-content {
        animation: profileSlideInDesktop 0.4s ease-out;
    }
    /* Анимация закрытия профиля группы на ПК */
    #group-profile-modal.closing .modal-content {
        animation: profileSlideOutDesktop 0.3s ease-in;
    }
    /* Каскадное появление элементов профиля группы на ПК */
    #group-profile-modal:not(.hidden):not(.closing) .profile-header {
        animation: profileHeaderFadeIn 0.5s ease-out 0.1s both;
    }
    #group-profile-modal:not(.hidden):not(.closing) .profile-actions {
        animation: profileActionsFadeIn 0.5s ease-out 0.2s both;
    }
    #group-profile-modal:not(.hidden):not(.closing) .profile-info {
        animation: profileInfoFadeIn 0.5s ease-out 0.3s both;
    }
    #group-profile-modal:not(.hidden):not(.closing) .group-members-section {
        animation: profileInfoFadeIn 0.5s ease-out 0.35s both;
    }
    #group-profile-modal:not(.hidden):not(.closing) .group-edit-section {
        animation: profileInfoFadeIn 0.5s ease-out 0.38s both;
    }
    #group-profile-modal:not(.hidden):not(.closing) .profile-media {
        animation: profileMediaFadeIn 0.5s ease-out 0.4s both;
    }
}

/* Анимация открытия профиля группы на мобильных */
@media (max-width: 768px) {
    /* Для нижнего шита группы отключаем старые анимации, чтобы не было
       "размытия/пропадания" после открытия */
    #group-profile-modal:not(.hidden):not(.closing) .modal-content,
    #group-profile-modal.closing .modal-content,
    #group-profile-modal:not(.hidden):not(.closing) .profile-header,
    #group-profile-modal:not(.hidden):not(.closing) .profile-actions,
    #group-profile-modal:not(.hidden):not(.closing) .profile-info,
    #group-profile-modal:not(.hidden):not(.closing) .group-members-section,
    #group-profile-modal:not(.hidden):not(.closing) .profile-media {
        animation: none !important;
    }
}

.profile-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s;
    font-size: 28px;
    line-height: 1;
}

.profile-close:hover {
    background: var(--bg-gray-2);
}

@media (min-width: 769px) {
    .group-profile-modal {
        max-width: 440px;
        border-radius: 32px;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow:
            0 28px 80px rgba(0, 0, 0, 0.58),
            0 0 0 1px rgba(255, 255, 255, 0.03) inset;
        overflow-x: hidden;
        max-height: min(88vh, 900px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: #181818 !important;
    }
}

.group-members-section {
    padding: 20px;
    border-top: 1px solid var(--gray-border);
}

.group-members-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 15px;
}

.group-members-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.group-member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-gray-1);
    /* border: 1px solid var(--white-border); */
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.group-member-item:hover {
    background: var(--bg-gray-2);
}

.group-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--white-border);
    background: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--white-border);
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
}

.group-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-member-info {
    flex: 1;
    min-width: 0;
}

.group-member-name {
    font-weight: 500;
    color: var(--text-white);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.group-member-creator-star {
    color: #ffd700;
    font-size: 16px;
}

.group-member-actions {
    display: flex;
    gap: 8px;
}

.group-member-action-btn {
    background: transparent;
    border: 1px solid var(--gray-border);
    color: var(--text-white);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.group-member-action-btn:hover {
    background: var(--bg-gray-2);
    border-color: var(--white-border);
}

.group-member-action-btn.danger:hover {
    background: #ff0000;
    border-color: #ff0000;
}

/* Сообщение с ссылкой приглашения */
.invite-link-message {
    background: var(--bg-gray-1);
    /* border: 1px solid var(--white-border); */
    border-radius: 12px;
    padding: 16px;
    margin: 10px 0;
    display: flex;
    gap: 12px;
    align-items: center;
}

.invite-link-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--white-border);
    background: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--white-border);
    font-size: 24px;
    flex-shrink: 0;
    overflow: hidden;
}

.invite-link-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.invite-link-info {
    flex: 1;
    min-width: 0;
}

.invite-link-name {
    font-weight: 600;
    color: var(--text-white);
    font-size: 16px;
    margin-bottom: 4px;
}

.invite-link-participants {
    font-size: 14px;
    color: var(--gray-text);
    margin-bottom: 8px;
}

.invite-link-btn {
    background: var(--white-border);
    color: var(--bg-black);
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.invite-link-btn:hover {
    background: var(--white-hover);
}

/* XAMFlow share card in chat */
.flow-share-message {
    background: var(--bg-gray-1);
    border-radius: 12px;
    padding: 8px 10px 10px;
    margin: 6px 0;
    overflow: hidden;
    cursor: pointer;
    max-width: 188px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.flow-share-source {
    font-size: 12px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.52);
    font-weight: 500;
    margin-bottom: 8px;
}

.flow-share-media {
    border-radius: 10px;
    overflow: hidden;
    background: #111;
}

.flow-share-thumb,
.flow-share-thumb--video {
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 132px;
    object-fit: cover;
    display: block;
    background: #111;
}

.flow-share-thumb--video {
    pointer-events: none;
}

.flow-share-thumb--placeholder {
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 24px;
    background: #111;
}

.flow-share-caption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-white);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.flow-share-info,
.flow-share-label {
    display: none;
}

body.xam-flow-open .chats-bottom-pill,
body.xam-flow-open #chats-bottom-pill,
body.xam-flow-open .sidebar-bottom-dock.desktop-only,
body.xam-flow-open .sidebar-bottom-panel.desktop-only {
    display: none !important;
}

/* Редактирование группы / канала */
.group-edit-section {
    padding: 0 16px 20px;
}

.group-edit-toggle-btn {
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 13px 18px;
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.group-edit-toggle-btn:hover {
    background: rgba(139, 92, 246, 0.28);
}

.group-edit-form {
    margin-top: 14px;
}

.group-edit-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.group-edit-avatar-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.group-edit-avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 28px;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
}

.group-edit-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-edit-avatar-btn,
.group-type-selector,
.group-edit-save-btn,
.group-edit-cancel-btn {
    border: none;
    border-radius: 999px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.group-edit-avatar-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.group-type-selector {
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.group-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.group-edit-field-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.group-edit-field input,
.group-edit-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
    padding: 12px 14px;
    font-size: 15px;
    resize: vertical;
}

.group-edit-field input:focus,
.group-edit-field textarea:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.55);
}

.group-edit-field-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.group-edit-actions {
    display: flex;
    gap: 10px;
}

.group-edit-save-btn {
    flex: 1;
    background: #8b5cf6;
    color: #fff;
}

.group-edit-cancel-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.group-edit-delete-btn {
    width: 100%;
    margin-top: 4px;
    border: none;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(239, 68, 68, 0.16);
    color: #ff8e8e;
    transition: background 0.15s ease, transform 0.12s ease;
}

.group-edit-delete-btn:active {
    transform: scale(0.98);
    background: rgba(239, 68, 68, 0.24);
}

.group-edit-delete-btn.hidden {
    display: none !important;
}

.group-edit-cancel-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.group-profile-hero {
    position: relative;
}

.group-profile-handle {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
}

.group-profile-status {
    color: rgba(255, 255, 255, 0.62);
}

.group-profile-description {
    white-space: pre-wrap;
    word-break: break-word;
}

#group-profile-modal.group-profile--channel .group-members-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

#group-profile-modal .group-profile-info.profile-info--user-pills {
    display: block;
    padding: 16px 20px 14px;
    border-bottom: none;
    background: var(--bg-dark);
}

#group-profile-modal .group-profile-info .profile-info-merged-pill {
    border-radius: 18px;
    padding: 16px 18px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

#group-profile-modal .group-profile-info .profile-info-item {
    margin-bottom: 16px;
}

#group-profile-modal .group-profile-info .profile-info-item:last-child {
    margin-bottom: 0;
}

#group-profile-modal .group-profile-info .profile-info-label {
    margin-bottom: 5px;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
}

#group-profile-modal .group-profile-info .profile-info-value {
    font-size: 16px;
    font-weight: 600;
    min-width: 0;
    word-break: break-word;
    color: rgba(255, 255, 255, 0.92);
}

#group-profile-modal .group-members-section {
    padding: 8px 20px 24px;
    border-top: none;
}

#group-profile-modal .group-members-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    margin: 4px 2px 12px;
}

#group-profile-modal .group-members-list {
    gap: 8px;
}

#group-profile-modal .group-member-item {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease, border-color 0.15s ease;
}

#group-profile-modal .group-member-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.08);
}

#group-profile-modal .group-member-avatar {
    width: 44px;
    height: 44px;
    border: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#group-profile-modal .group-member-name {
    font-size: 15px;
    font-weight: 600;
}

#group-profile-modal .group-member-creator-star {
    font-size: 13px;
    filter: grayscale(0.15);
}

#group-profile-modal .channel-profile-actions {
    padding: 0 20px 14px;
    display: flex;
    gap: 10px;
}

#group-profile-modal .channel-profile-actions .channel-subscribe-btn,
#group-profile-modal .channel-profile-actions .channel-unsubscribe-btn {
    flex: 1;
}

#group-profile-modal .group-profile-hero .profile-back {
    position: absolute;
    z-index: 5;
}

@media (min-width: 769px) {
    #group-profile-modal.group-profile--channel .group-profile-clear-btn,
    #group-profile-modal.group-profile--channel #group-profile-clear-btn {
        display: none !important;
    }

    .group-edit-section {
        padding: 0 20px 20px;
    }
}

@media (max-width: 768px) {
    #group-profile-modal {
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: rgba(0, 0, 0, 0.45) !important;
    }

    #group-profile-modal .modal-content.group-profile-modal {
        width: 100% !important;
        max-width: 100% !important;
        /* expanded / closing.expanded перекрывают на 100dvh */
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        will-change: transform, opacity;
    }

    #group-profile-modal.sheet-open.sheet-expanded .modal-content.group-profile-modal {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    /* Закрытие: сохраняем fullscreen-хром, только мягко уезжаем/гасим */
    #group-profile-modal.closing.sheet-expanded .modal-content.group-profile-modal {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        margin-top: 0 !important;
        transform: translateY(10%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: transform 240ms cubic-bezier(0.33, 0.1, 0.25, 1),
            opacity 220ms ease !important;
    }

    /* Каналы (без expanded) — классический нижний шит */
    #group-profile-modal.closing:not(.sheet-expanded) .modal-content.group-profile-modal {
        transform: translateY(110%) !important;
        opacity: 1 !important;
    }

    #group-profile-modal .group-profile-sheet-handle {
        display: none;
    }

    #group-profile-modal .group-profile-hero {
        position: relative;
        padding: 0;
        background: var(--bg-dark);
        border-bottom: none;
    }

    /* Во время closing тоже держим expanded-hero, иначе вспышка старого аватара */
    #group-profile-modal.sheet-expanded .group-profile-header,
    #group-profile-modal.closing.sheet-expanded .group-profile-header {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr) !important;
        overflow: hidden !important;
        background: var(--bg-dark) !important;
        border-bottom: none !important;
        text-align: left !important;
        gap: 0 !important;
    }

    #group-profile-modal.sheet-expanded .group-profile-header::after,
    #group-profile-modal.closing.sheet-expanded .group-profile-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 38%;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.03) 32%,
            rgba(0, 0, 0, 0.18) 58%,
            rgba(0, 0, 0, 0.42) 82%,
            rgba(0, 0, 0, 0.68) 100%
        );
    }

    #group-profile-modal.sheet-expanded .group-profile-header .profile-avatar-shell,
    #group-profile-modal.sheet-expanded .group-profile-header .profile-avatar-frame,
    #group-profile-modal.closing.sheet-expanded .group-profile-header .profile-avatar-shell,
    #group-profile-modal.closing.sheet-expanded .group-profile-header .profile-avatar-frame {
        grid-column: 1;
        grid-row: 1;
        width: 100% !important;
        height: 100% !important;
        flex: 0 0 auto !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        z-index: 0;
    }

    #group-profile-modal.sheet-expanded .group-profile-header .profile-avatar,
    #group-profile-modal.closing.sheet-expanded .group-profile-header .profile-avatar {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        font-size: 72px !important;
        overflow: hidden !important;
        animation: none !important;
        background: #121214 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #group-profile-modal.sheet-expanded .group-profile-header .profile-avatar img,
    #group-profile-modal.closing.sheet-expanded .group-profile-header .profile-avatar img {
        width: 100% !important;
        height: 100% !important;
        /* Показываем аватар целиком, без обрезки «лица сверху» */
        object-fit: contain !important;
        object-position: center center !important;
        background: #121214;
    }

    #group-profile-modal.sheet-expanded .group-profile-header .profile-header-text,
    #group-profile-modal.closing.sheet-expanded .group-profile-header .profile-header-text {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        justify-self: start;
        z-index: 2;
        max-width: calc(100% - 24px);
        padding: 32px 16px 22px;
        margin: 0;
        min-width: 0;
        flex: none;
        pointer-events: none;
    }

    #group-profile-modal.sheet-expanded .group-profile-header .profile-name,
    #group-profile-modal.closing.sheet-expanded .group-profile-header .profile-name {
        font-size: 30px;
        line-height: 1.05;
        color: rgba(255, 255, 255, 0.97);
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    #group-profile-modal.sheet-expanded .group-profile-header .group-profile-handle {
        margin-top: 4px;
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.72);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    }

    #group-profile-modal.sheet-expanded .group-profile-header .group-profile-status,
    #group-profile-modal.closing.sheet-expanded .group-profile-header .group-profile-status {
        margin-top: 4px;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.88);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    }

    #group-profile-modal.sheet-expanded .group-profile-hero .profile-back,
    #group-profile-modal.closing.sheet-expanded .group-profile-hero .profile-back {
        top: calc(28px + env(safe-area-inset-top, 0px)) !important;
        left: calc(10px + env(safe-area-inset-left, 0px)) !important;
        z-index: 6 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: rgba(10, 10, 12, 0.52) !important;
        backdrop-filter: blur(16px) saturate(1.05) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
        color: #fff !important;
        justify-content: center !important;
    }

    #group-profile-modal .profile-back-text {
        display: none;
    }

    #group-profile-modal.sheet-expanded .group-profile-toolbar,
    #group-profile-modal.closing.sheet-expanded .group-profile-toolbar {
        position: absolute !important;
        top: calc(28px + env(safe-area-inset-top, 0px)) !important;
        right: calc(12px + env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: calc(100% - 76px) !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        gap: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 999px !important;
        background: rgba(10, 10, 12, 0.52) !important;
        backdrop-filter: blur(16px) saturate(1.05) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
        z-index: 30 !important;
    }

    #group-profile-modal.sheet-expanded .group-profile-toolbar .profile-action-btn,
    #group-profile-modal.closing.sheet-expanded .group-profile-toolbar .profile-action-btn {
        flex: 0 0 auto !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: transparent !important;
        flex-direction: row !important;
        gap: 0 !important;
    }

    #group-profile-modal.sheet-expanded .group-profile-toolbar .profile-action-label,
    #group-profile-modal.closing.sheet-expanded .group-profile-toolbar .profile-action-label {
        display: none !important;
    }

    #group-profile-modal .profile-close {
        display: none !important;
    }

    #group-profile-modal .group-profile-info.profile-info--user-pills {
        display: block;
        padding: 14px 16px 10px;
        border-bottom: none;
        background: var(--bg-dark);
    }

    #group-profile-modal .group-profile-info .profile-info-merged-pill {
        border-radius: 18px;
        padding: 14px 16px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    #group-profile-modal .group-profile-info .profile-info-item {
        margin-bottom: 14px;
    }

    #group-profile-modal .group-profile-info .profile-info-item:last-child {
        margin-bottom: 0;
    }

    #group-profile-modal .group-profile-info .profile-info-label {
        margin-bottom: 4px;
        text-transform: none;
        letter-spacing: 0.02em;
        font-size: 12px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.45);
    }

    #group-profile-modal .group-profile-info .profile-info-value {
        font-size: 15px;
        font-weight: 600;
        min-width: 0;
        word-break: break-word;
        color: rgba(255, 255, 255, 0.92);
    }

    #group-profile-modal .group-profile-call-banner {
        margin: 0 16px 12px;
        border-radius: 14px;
        padding: 11px 12px;
    }

    #group-profile-modal .channel-profile-actions {
        padding: 0 16px 12px;
        display: flex;
        gap: 10px;
    }

    #group-profile-modal .channel-profile-actions .channel-subscribe-btn,
    #group-profile-modal .channel-profile-actions .channel-unsubscribe-btn {
        flex: 1;
    }

    #group-profile-modal .group-members-section {
        padding: 4px 16px 20px;
        border-top: none;
    }

    #group-profile-modal .group-members-title {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.45);
        margin: 8px 4px 12px;
    }

    #group-profile-modal .group-members-list {
        gap: 8px;
    }

    #group-profile-modal .group-member-item {
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    #group-profile-modal .group-member-item:active {
        background: rgba(255, 255, 255, 0.07);
    }

    #group-profile-modal .group-member-avatar {
        width: 44px;
        height: 44px;
        border: none;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    #group-profile-modal .group-member-name {
        font-size: 15px;
        font-weight: 600;
    }

    #group-profile-modal .group-edit-section {
        padding: 0 16px 16px;
    }

    #group-profile-modal.group-profile--channel #group-profile-clear-btn {
        display: none !important;
    }
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-light);
    font-size: 14px;
    font-weight: 500;
}

/* Sidebar Menu Modal — выезжающая сбоку панель */
#sidebar-menu-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    padding: 0;
    background: transparent !important; /* не затемняем весь экран (базовый .modal затемняет) */
}

#sidebar-menu-modal.hidden {
    display: none;
    pointer-events: none !important;
}



.sidebar-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

#sidebar-menu-modal.open .sidebar-menu-overlay {
    opacity: 0;
}

.sidebar-menu-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 85vw;
    height: 100%;
    background: #16171a; /* убрали прозрачность */
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    border-radius: 0 24px 24px 0;
    transform: translateX(-100%) scale(0.98);
    transition:
        transform 280ms cubic-bezier(0.2, 0.85, 0.22, 1),
        left 380ms cubic-bezier(0.2, 0.85, 0.22, 1),
        right 380ms cubic-bezier(0.2, 0.85, 0.22, 1),
        top 380ms cubic-bezier(0.2, 0.85, 0.22, 1),
        bottom 380ms cubic-bezier(0.2, 0.85, 0.22, 1),
        height 380ms cubic-bezier(0.2, 0.85, 0.22, 1),
        min-height 380ms cubic-bezier(0.2, 0.85, 0.22, 1),
        border-radius 340ms cubic-bezier(0.2, 0.85, 0.22, 1),
        background-color 340ms cubic-bezier(0.2, 0.85, 0.22, 1),
        padding 340ms cubic-bezier(0.2, 0.85, 0.22, 1),
        opacity 220ms ease-out;
    overflow: hidden;
}

#sidebar-menu-modal.open .sidebar-menu-content {
    transform: translateX(0) scale(1);
}

/* Mobile: меню ☰ — полноэкранная панель + затемнение фона */
@media (max-width: 768px) {
    #sidebar-menu-modal {
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #sidebar-menu-modal .sidebar-menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.52);
        opacity: 0;
        z-index: 0;
        pointer-events: none;
        transition:
            opacity 300ms cubic-bezier(0.2, 0.85, 0.22, 1),
            backdrop-filter 300ms cubic-bezier(0.2, 0.85, 0.22, 1),
            -webkit-backdrop-filter 300ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }

    #sidebar-menu-modal.open .sidebar-menu-overlay {
        opacity: 1;
        pointer-events: none !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    #sidebar-menu-modal .sidebar-menu-content {
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 0 calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: #0a0a0a !important;
        transform: translateY(105%);
        transition:
            transform 380ms cubic-bezier(0.2, 0.85, 0.22, 1),
            left 420ms cubic-bezier(0.2, 0.85, 0.22, 1),
            right 420ms cubic-bezier(0.2, 0.85, 0.22, 1),
            top 420ms cubic-bezier(0.2, 0.85, 0.22, 1),
            bottom 420ms cubic-bezier(0.2, 0.85, 0.22, 1),
            width 420ms cubic-bezier(0.2, 0.85, 0.22, 1),
            height 420ms cubic-bezier(0.2, 0.85, 0.22, 1),
            min-height 420ms cubic-bezier(0.2, 0.85, 0.22, 1),
            border-radius 380ms cubic-bezier(0.2, 0.85, 0.22, 1),
            padding 360ms cubic-bezier(0.2, 0.85, 0.22, 1),
            background-color 360ms cubic-bezier(0.2, 0.85, 0.22, 1),
            box-shadow 320ms cubic-bezier(0.2, 0.85, 0.22, 1);
        will-change: transform, top, left, right, bottom, height, min-height, border-radius;
        z-index: 2;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        display: flex;
        flex-direction: column;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-sizing: border-box !important;
    }

    #sidebar-menu-modal .sidebar-menu-content.sidebar-menu-content--sheet-expanded {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #sidebar-menu-modal .sidebar-menu-content::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    #sidebar-menu-modal.open .sidebar-menu-content {
        transform: translateY(0);
    }

    #sidebar-menu-modal .sidebar-menu-content::before {
        display: none;
    }

    #sidebar-menu-modal .sidebar-menu-profile {
        padding: 6px 20px 14px;
        border-bottom: none !important;
        background: #0a0a0a;
        position: relative;
        flex-shrink: 0;
    }

    #sidebar-menu-modal .sidebar-menu-items {
        flex: 0 0 auto;
        overflow: visible;
        margin: 10px 18px 14px;
        padding: 6px 0;
        background: #141414;
        border-radius: 22px;
        border: none;
        box-shadow: none;
    }

    #sidebar-menu-modal .sidebar-menu-items-secondary {
        margin: 0 18px 14px;
    }

    #sidebar-menu-modal .sidebar-menu-item {
        font-size: 17px;
        padding: 13px 16px;
    }

    #sidebar-menu-modal .sidebar-menu-item-icon {
        display: flex !important;
    }

    #sidebar-menu-modal .sidebar-menu-profile-label,
    #sidebar-menu-modal .sidebar-menu-profile-link {
        display: none;
    }

    #sidebar-menu-modal .sidebar-menu-mobile-loading {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        min-height: 220px;
        border-radius: 0;
        background: transparent;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 4;
        box-shadow: none;
        padding: 26px 18px 26px;
        box-sizing: border-box;
        height: 100%;
    }

    #sidebar-menu-modal.mobile-settings-loading .sidebar-menu-mobile-loading {
        display: flex;
    }

    #sidebar-menu-modal .sidebar-menu-mobile-loading-icon {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.92);
        margin-bottom: 14px;
    }

    #sidebar-menu-modal.mobile-settings-loading .sidebar-menu-mobile-loading-icon svg {
        animation: sidebarSettingsGearSpin 2.2s linear infinite;
    }

    #sidebar-menu-modal .sidebar-menu-mobile-loading-title {
        font-size: 34px;
        line-height: 1.14;
        font-weight: 600;
        color: #f3f3f3;
        margin-bottom: 8px;
        letter-spacing: -0.02em;
    }

    #sidebar-menu-modal .sidebar-menu-mobile-loading-subtitle {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.58);
    }

    #sidebar-menu-modal.mobile-settings-loading .sidebar-menu-content {
        top: calc(100dvh - 250px - (26px + env(safe-area-inset-bottom, 0px))) !important;
        left: 14px !important;
        right: 14px !important;
        width: auto !important;
        max-width: none !important;
        bottom: calc(26px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: 250px !important;
        height: 250px !important;
        border-radius: 30px !important;
        background: #232323 !important;
        transform: translateY(106%) !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #sidebar-menu-modal.open.mobile-settings-loading .sidebar-menu-content {
        transform: translateY(0) !important;
    }

    #sidebar-menu-modal.mobile-settings-rising .sidebar-menu-content {
        top: calc(18px + env(safe-area-inset-top, 0px)) !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: calc(100dvh - (18px + env(safe-area-inset-top, 0px)) - (10px + env(safe-area-inset-bottom, 0px))) !important;
        height: calc(100dvh - (18px + env(safe-area-inset-top, 0px)) - (10px + env(safe-area-inset-bottom, 0px))) !important;
        border-radius: 26px !important;
        background: #232323 !important;
        transform: translateY(0) !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #sidebar-menu-modal.mobile-settings-loading .sidebar-menu-profile,
    #sidebar-menu-modal.mobile-settings-loading .sidebar-menu-items,
    #sidebar-menu-modal.mobile-settings-loading .sidebar-menu-items-secondary,
    #sidebar-menu-modal.mobile-settings-loading .sidebar-menu-mobile-header {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #sidebar-menu-modal.mobile-settings-rising .sidebar-menu-profile,
    #sidebar-menu-modal.mobile-settings-rising .sidebar-menu-items,
    #sidebar-menu-modal.mobile-settings-rising .sidebar-menu-items-secondary,
    #sidebar-menu-modal.mobile-settings-rising .sidebar-menu-mobile-header {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #sidebar-menu-modal.mobile-settings-loading .sidebar-menu-overlay {
        opacity: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #sidebar-menu-modal.mobile-settings-rising .sidebar-menu-overlay {
        opacity: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #sidebar-menu-modal.mobile-settings-full {
        align-items: flex-end !important;
        justify-content: center !important;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-overlay {
        pointer-events: none !important;
        opacity: 1 !important;
        background: rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-content {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: min(78dvh, 640px) !important;
        border-radius: 34px 34px 0 0 !important;
        background: #1c1c1e !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.38) !important;
        transform: translateY(105%) !important;
        padding: 18px 0 calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 3 !important;
        pointer-events: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #sidebar-menu-modal.mobile-settings-full.open .sidebar-menu-content {
        transform: translateY(0) !important;
    }

    #sidebar-menu-modal.mobile-settings-instant.mobile-settings-full .sidebar-menu-content,
    #sidebar-menu-modal.mobile-settings-instant.mobile-settings-full .sidebar-menu-overlay {
        transition: none !important;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-items,
    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-items-secondary,
    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-item,
    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-mobile-header,
    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-mobile-close-pill,
    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-mobile-qr-btn {
        pointer-events: auto !important;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 22px 18px;
        flex-shrink: 0;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-mobile-title {
        display: none !important;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-mobile-close-pill {
        border: none;
        border-radius: 999px;
        background: #2a2a2e;
        color: #ffffff;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        padding: 11px 18px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-mobile-close-pill:active {
        background: #34343a;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-mobile-qr-btn {
        width: 46px;
        height: 46px;
        border: none;
        border-radius: 12px;
        background: transparent;
        color: rgba(255, 255, 255, 0.95);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-mobile-qr-icon {
        display: block;
        width: 26px;
        height: 26px;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-mobile-qr-btn:active {
        opacity: 0.72;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-mobile-settings-quick-menu {
        display: none !important;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-profile {
        display: none !important;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-items {
        margin: 0 !important;
        padding: 0 26px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-items-secondary {
        margin: 18px 0 0 !important;
        padding: 0 26px 4px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-item {
        padding: 11px 0 !important;
        font-size: inherit !important;
        border-bottom: none !important;
        gap: 0 !important;
        border-radius: 999px !important;
        background: #181818 !important;
        justify-content: flex-start;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-item:active {
        opacity: 0.72;
        background: #181818 !important;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-item:hover {
        background: #181818 !important;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-item-icon.sidemenu-ico {
        display: none !important;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-icon-img,
    #sidebar-menu-modal.mobile-settings-full .favorites-bookmark-icon {
        display: none !important;
    }

    #sidebar-menu-modal.mobile-settings-full #sidebar-menu-scan-qr,
    #sidebar-menu-modal.mobile-settings-full #sidebar-menu-about-shop {
        display: none !important;
    }

    #sidebar-menu-modal.mobile-settings-full #sidebar-menu-my-profile { order: 1; }
    #sidebar-menu-modal.mobile-settings-full #sidebar-menu-account { order: 2; }
    #sidebar-menu-modal.mobile-settings-full #sidebar-menu-privacy { order: 3; }
    #sidebar-menu-modal.mobile-settings-full #sidebar-menu-personalization { order: 4; }
    #sidebar-menu-modal.mobile-settings-full #sidebar-menu-favorites { order: 5; }
    #sidebar-menu-modal.mobile-settings-full #sidebar-menu-xams { order: 6; }
    #sidebar-menu-modal.mobile-settings-full #sidebar-menu-activate { order: 7; }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-item-text {
        font-size: 24px;
        font-weight: 400;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.96);
        letter-spacing: -0.01em;
    }

    #sidebar-menu-modal.mobile-settings-full .xam-settings-version--menu {
        margin-top: 8px;
        padding: 8px 26px 0;
        font-size: 11px;
        text-align: left;
        color: rgba(255, 255, 255, 0.32);
    }

    #sidebar-menu-modal.sidebar-menu-closing.mobile-settings-full .sidebar-menu-content {
        transform: translateY(105%) !important;
    }
}

/* Цветные квадраты иконок в боковом меню (моб. шит и ПК) */
.sidemenu-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.95);
}

.sidemenu-ico--qr { background: rgba(59, 130, 246, 0.38); }
.sidemenu-ico--account { background: rgba(234, 179, 8, 0.35); }
.sidemenu-ico--profile { background: rgba(34, 197, 94, 0.32); }
.sidemenu-ico--flow { background: rgba(168, 85, 247, 0.36); }
.sidemenu-ico--privacy { background: rgba(239, 68, 68, 0.3); }
.sidemenu-ico--personal { background: rgba(59, 130, 246, 0.35); }
.sidemenu-ico--fav {
    background: linear-gradient(135deg, #555555 0%, #2a2a2a 45%, #1a1a1a 100%) !important;
}
.sidemenu-ico--xams { background: rgba(249, 115, 22, 0.38); }
.sidemenu-ico--activate { background: rgba(168, 85, 247, 0.32); }
.sidemenu-ico--about { background: rgba(45, 212, 191, 0.28); }
.sidemenu-ico--support { background: rgba(30, 64, 175, 0.45); }
.sidemenu-ico--buy { background: rgba(244, 63, 94, 0.32); }

.sidemenu-ico .sidebar-menu-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

.sidemenu-ico .favorites-bookmark-icon {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

.sidebar-menu-items-secondary {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    flex: 0 0 auto;
}

.sidebar-menu-profile {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    position: sticky; /* держим аватар и ник наверху */
    top: 0;
    z-index: 2;
    background: #16171a; /* как у панели, без прозрачности */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-menu-mobile-loading,
.sidebar-menu-mobile-header {
    display: none;
}

.sidebar-menu-close-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

@keyframes sidebarSettingsGearSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sidebar-menu-close-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.sidebar-menu-close-btn:active {
    transform: scale(0.96);
}

.sidebar-menu-close-btn svg {
    display: block;
}

.sidebar-menu-avatar {
    display: none; /* скрываем большую аватарку в меню */
}

.sidebar-menu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-menu-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-menu-name {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-menu-username {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-menu-profile-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    margin-top: 2px;
}

.sidebar-menu-profile-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    padding: 0;
    cursor: pointer;
    text-align: left;
    margin-top: 4px;
}

.sidebar-menu-profile-link:hover {
    text-decoration: underline;
}

.sidebar-menu-add-account {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Desktop-only account list inside sidebar profile */
#sidebar-accounts-list {
    display: none;
    margin-top: 6px;
}
@media (min-width: 769px) {
    #sidebar-accounts-list {
        display: block;
    }
}

.desktop-only { display: none; }
@media (hover: hover) and (pointer: fine) {
    .desktop-only { display: block; }
}

.sidebar-accounts-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.95);
    font-size: 13px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    transition: background 0.2s ease, transform 0.1s ease;
}
.sidebar-accounts-more:hover {
    background: rgba(255,255,255,0.12);
}
.sidebar-accounts-item {
    display: flex;
    align-items: center;
    padding: 8px 6px;
    border-radius: 8px;
    cursor: pointer;
}
.sidebar-accounts-item:hover {
    background: rgba(255,255,255,0.06);
}
.sidebar-accounts-item.is-current {
    background: rgba(255,255,255,0.08);
}
.sidebar-accounts-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.sidebar-accounts-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sidebar-accounts-info {
    flex: 1;
    min-width: 0;
}
.sidebar-accounts-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-accounts-username {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}
.sidebar-accounts-current {
    font-size: 11px;
    color: white;
    background: var(--primary-color);
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: 8px;
}

.sidebar-menu-items {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 110px; /* место под нижнюю пилюлю */
}

.sidebar-menu-item {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 15px;
    padding: 14px 20px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-menu-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-menu-item-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

.sidebar-menu-item-text {
    flex: 1;
}

.sidebar-menu-bottom-pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 96px; /* по середине и повыше */
    z-index: 4;
    width: min(320px, calc(100% - 32px));
    margin: 0;
    padding: 8px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.sidebar-menu-bottom-pill-btn {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    flex: 1;
    height: 48px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

.sidebar-menu-bottom-pill-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-menu-bottom-pill-btn:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.98);
}

.sidebar-menu-bottom-pill-btn svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@supports (padding: max(0px)) {
    .sidebar-menu-bottom-pill {
        bottom: calc(96px + env(safe-area-inset-bottom));
    }
}

/* ==================== НОВЫЕ НАСТРОЙКИ ==================== */
.settings-screen {
    background: #000000;
    border: 2px solid var(--white-border);
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: settingsSlideIn 0.3s ease-out;
}

@keyframes settingsSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.settings-back-btn,
.settings-close-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 12px;
}

.settings-back-btn:hover,
.settings-close-btn:hover {
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.05);
}

.settings-title {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    flex: 1;
    text-align: center;
}

.settings-quick-menu {
    position: absolute;
    top: 76px;
    right: 20px;
    min-width: 210px;
    background: #2b2b2b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 8;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.settings-quick-menu.hidden {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    visibility: hidden;
    pointer-events: none;
}

.settings-quick-menu-item {
    border: none;
    background: transparent;
    color: #f1f1f1;
    font-size: 15px;
    text-align: left;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
}

.settings-quick-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ==================== НАСТРОЙКИ — НОВЫЙ ДИЗАЙН ==================== */

.settings-screen {
    background: #0a0a0a;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    width: 92%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: settingsSlideIn 0.28s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

@keyframes settingsSlideIn {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
}

.settings-back-btn {
    visibility: hidden;
    pointer-events: none;
    width: 40px;
}

/* ==================== МОБИЛЬНАЯ ВЕРСИЯ НАСТРОЕК (bottom-sheet с пиллами) ==================== */
@media (max-width: 768px) {
    /* Контент прижат к низу, затемнённый фон сверху */
    body #settings-modal.modal {
        align-items: flex-end !important;
        justify-content: center !important;
        background: rgba(0,0,0,0.6) !important;
    }

    #settings-modal .settings-screen {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        max-height: 88vh !important;
        min-height: 58vh;
        border-radius: 28px 28px 0 0 !important;
        border: none !important;
        border-top: 1px solid rgba(255,255,255,0.06);
        background: #16171d !important;
        box-shadow: 0 -12px 40px rgba(0,0,0,0.6);
        animation: settingsSheetUp 0.32s cubic-bezier(0.23, 1, 0.32, 1);
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }

    @keyframes settingsSheetUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    #settings-modal .settings-header {
        padding: 16px 18px 4px;
        display: block;
        position: relative;
        background: transparent;
    }

    /* Скрываем стрелку назад на мобильном — есть «Закрыть» */
    #settings-modal .settings-back-btn {
        display: none !important;
    }

    /* Кнопка «Закрыть» в виде пиллы слева */
    #settings-modal .settings-close-btn {
        background: #3a3a3c;
        color: #fff;
        border: none;
        border-radius: 999px;
        padding: 8px 18px;
        font-size: 15px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        transition: background .2s ease;
        width: auto;
        height: auto;
    }
    #settings-modal .settings-close-btn:hover,
    #settings-modal .settings-close-btn:active {
        background: #48484a;
    }
    #settings-modal .settings-close-text { display: inline; }
    #settings-modal .settings-close-icon { display: none; }

    /* Заголовок по центру под «Закрыть» */
    #settings-modal .settings-title {
        display: block;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        color: #fff;
        margin: 14px 0 6px;
        position: static;
        transform: none;
    }

    /* Скрываем профиль, футер и заголовки секций на мобильном */
    #settings-modal .settings-profile-card,
    #settings-modal .settings-update-avatar-btn,
    #settings-modal .settings-section-title,
    #settings-modal .settings-footer {
        display: none !important;
    }

    #settings-modal .settings-quick-menu {
        top: 60px;
        right: 18px;
    }

    /* Секции без отступов — единый поток пилл */
    #settings-modal .settings-section {
        margin: 0;
    }

    #settings-modal .settings-menu-items {
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
        padding: 6px 0 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    /* Каждый пункт — отдельная пилла по центру */
    #settings-modal .settings-menu-item {
        width: auto;
        min-width: 0;
        background: #181818;
        border: none;
        border-radius: 999px;
        padding: 13px 30px;
        justify-content: center;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        margin: 0;
        text-align: center;
        box-shadow: none;
        transition: background .15s ease, transform .12s ease;
    }
    #settings-modal .settings-menu-item:hover {
        background: #181818;
    }
    #settings-modal .settings-menu-item:active {
        background: #181818;
        transform: scale(0.96);
    }

    #settings-modal .settings-menu-item-icon,
    #settings-modal .settings-menu-item-arrow {
        display: none !important;
    }
    #settings-modal .settings-menu-item-text {
        flex: none;
    }

    /* Доп. отступ перед «Сканировать QR» */
    #settings-modal #settings-scan-qr-btn {
        display: inline-flex;
        margin-top: 12px;
    }
}

/* ПК: пункты настроек тоже как пилюльки-кнопки */
@media (min-width: 769px) {
    #settings-modal .settings-menu-items {
        /* держим вертикальный список, но без "коробок" */
        padding: 0 20px 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #settings-modal .settings-menu-item {
        background: #181818 !important;
        border: none !important;
        border-radius: 999px !important;
        padding: 13px 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        cursor: pointer;
        transition: background 0.15s ease, transform 0.12s ease !important;
        color: #fff !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        min-width: 0 !important;
    }

    #settings-modal .settings-menu-item:hover {
        background: #181818 !important;
        transform: none !important;
    }

    #settings-modal .settings-menu-item:active {
        background: #181818 !important;
        transform: scale(0.96) !important;
    }

    /* На ПК в этой панели хотим только текст (как в твоём скрине) */
    #settings-modal .settings-menu-item-icon,
    #settings-modal .settings-menu-item-arrow {
        display: none !important;
    }

    #settings-modal .settings-menu-item-text {
        flex: none !important;
        text-align: center !important;
    }
}

.settings-title {
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.2px;
}

.settings-close-btn {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all .2s ease;
}
.settings-close-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
}

/* На десктопе показываем иконку (⋮), текст «Закрыть» скрыт */
.settings-close-text { display: none; }
.settings-close-icon { display: inline-flex; }

/* Профиль-карточка */
.settings-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 18px 6px;
    padding: 14px 16px;
    background: #181818;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    cursor: pointer;
    transition: all .2s ease;
}
.settings-profile-card:hover {
    background: #181818;
    border-color: rgba(255,255,255,0.09);
}
.settings-profile-card:active {
    transform: scale(0.985);
}

.settings-profile-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: #1f1f1f;
    flex-shrink: 0;
    position: relative;
    border: 1px solid rgba(255,255,255,0.08);
}
.settings-profile-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.settings-profile-card-info {
    flex: 1;
    min-width: 0;
}
.settings-profile-card-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}
.settings-profile-card-name svg { opacity: .5; }
.settings-profile-card-email {
    font-size: 13px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.settings-profile-card-arrow {
    color: #555;
    flex-shrink: 0;
}

.settings-profile-avatar-camera {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity .2s ease;
}
.settings-profile-card:hover .settings-profile-avatar-camera {
    opacity: 1;
}

/* Кнопка смены аватара */
.settings-update-avatar-btn {
    margin: 0 18px 14px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: #aaa;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s ease;
}
.settings-update-avatar-btn:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.18);
    color: #ddd;
}

/* Секции */
.settings-section {
    margin: 8px 18px;
}
.settings-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #555;
    text-transform: uppercase;
    padding: 0 4px 8px;
}

/* Пункты меню */
.settings-menu-items {
    background: #181818;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
    overflow: hidden;
}
.settings-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background .12s ease;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.settings-menu-item:last-child {
    border-bottom: none;
}
.settings-menu-item:hover {
    background: #181818;
}
.settings-menu-item:active {
    background: #222;
}

.settings-menu-item-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    flex-shrink: 0;
}
.settings-menu-item-text {
    flex: 1;
}
.settings-menu-item-arrow {
    color: #444;
    flex-shrink: 0;
    margin-left: auto;
}

.settings-profile-avatar-wrap,
.account-settings-avatar-container {
    position: relative;
    display: inline-flex;
}

label.account-settings-avatar-container,
label.account-settings-avatar-hit,
div.account-settings-avatar-hit[role="button"] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.xam-hidden-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    opacity: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    display: block !important;
    pointer-events: none;
    font-size: 0;
}

.settings-profile-avatar-hit,
.account-settings-avatar-hit {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}

.settings-profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid var(--white-border);
    background: var(--bg-gray-2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-size: 40px;
    color: var(--text-white);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.settings-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-profile-avatar-camera {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.settings-profile-avatar-wrap:hover .settings-profile-avatar-camera,
.settings-profile-avatar:hover .settings-profile-avatar-camera {
    opacity: 1;
}

.settings-profile-avatar-wrap:hover .settings-profile-avatar,
.settings-profile-avatar:hover {
    transform: scale(1.05);
}

.settings-profile-username {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
}

.settings-profile-email {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-white);
    font-size: 14px;
}

.settings-profile-email svg {
    width: 16px;
    height: 16px;
}

.settings-menu-items {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-menu-item {
    background: transparent;
    border: 2px solid var(--white-border);
    border-radius: 20px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-white);
    font-size: 16px;
}

.settings-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.settings-menu-item-text {
    flex: 1;
    text-align: left;
}

.settings-menu-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.settings-menu-item-icon svg {
    width: 100%;
    height: 100%;
}

.settings-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-top: auto;
    gap: 20px;
}

.settings-footer-link {
    color: var(--text-white);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.settings-footer-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}

.settings-footer-text {
    color: var(--text-white);
    font-size: 14px;
}

/* Версия сборки в настройках */
.xam-settings-version {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.36);
    letter-spacing: 0.02em;
    user-select: none;
    pointer-events: none;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .xam-settings-version--sidebar {
        position: fixed;
        left: 22px;
        bottom: max(18px, env(safe-area-inset-bottom, 0px));
        z-index: 50002;
    }

    .xam-settings-version--screen,
    .xam-settings-version--menu {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .xam-settings-version--sidebar {
        display: none !important;
    }

    .desktop-settings-modal .xam-settings-version--sidebar {
        display: block !important;
    }

    .xam-settings-version--menu {
        margin-top: auto;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
        text-align: center;
    }

    .xam-settings-version--screen {
        margin-top: auto;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
        text-align: center;
        position: relative;
        z-index: 2;
    }

    #sidebar-menu-modal.mobile-settings-full .sidebar-menu-content {
        display: flex;
        flex-direction: column;
    }
}

body.theme-light .xam-settings-version {
    color: rgba(0, 0, 0, 0.42);
}

/* Экран приватности */
.privacy-settings-screen {
    background: rgba(10, 10, 10, 0.72);
    border: 2px solid var(--white-border);
    border-radius: 20px;
    width: 90%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    color: var(--text-white);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.privacy-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.privacy-settings-back-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.privacy-settings-more-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.privacy-settings-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    flex: 1;
}

.privacy-settings-header-spacer {
    width: 40px;
    height: 40px;
}

.privacy-settings-content {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.privacy-biometric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 12px;
    border: 2px solid var(--white-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.privacy-biometric-status {
    font-size: 14px;
    opacity: 0.85;
}

.privacy-biometric-toggle-btn {
    border: 2px solid var(--white-border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-white);
    padding: 10px 14px;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 600;
}

.privacy-biometric-toggle-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.privacy-section-title {
    font-size: 18px;
    font-weight: 600;
}

.privacy-section-subtitle {
    font-size: 13px;
    opacity: 0.75;
}

.privacy-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.privacy-session-item {
    border: 2px solid var(--white-border);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.privacy-session-left {
    min-width: 0;
}

.privacy-session-title {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.privacy-session-subtitle {
    font-size: 13px;
    opacity: 0.75;
    margin-top: 2px;
}

.privacy-session-terminate-btn {
    border: 1px solid var(--white-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-white);
    border-radius: 12px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}

.privacy-session-terminate-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.privacy-session-current-badge {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #5fd653;
    white-space: nowrap;
}

.privacy-sessions-empty {
    opacity: 0.8;
    font-size: 14px;
}

.privacy-more-btn,
.privacy-terminate-all-btn {
    border: 2px solid var(--white-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-white);
    border-radius: 16px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

.privacy-info-text {
    font-size: 12px;
    opacity: 0.7;
    line-height: 1.4;
}

.privacy-settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.privacy-section-heading {
    font-size: 18px;
    font-weight: 600;
    margin-top: 8px;
}

.privacy-section-hint {
    font-size: 13px;
    opacity: 0.75;
    line-height: 1.35;
}

.privacy-sessions-card {
    width: 100%;
}

/* Экран настроек аккаунта */
.account-settings-screen {
    background: transparent;
    border: none !important;
    border-radius: 20px;
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: accountSettingsSlideIn 0.3s ease-out;
}

/* Фон-картинка как в списке чатов: размытая обоина */
.account-settings-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #050505;
    background-image: var(--theme-bg-image);
    background-repeat: repeat;
    background-size: 260px;
    filter: blur(6px);
    transform: scale(1.05);
    pointer-events: none;
}

.account-settings-screen > * {
    position: relative;
    z-index: 1;
}

@keyframes accountSettingsSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.account-settings-header {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.account-settings-title {
    margin: 0;
    color: var(--text-white);
    font-size: 22px;
    font-weight: 600;
}

.account-settings-back-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 12px;
}

.account-settings-more-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 12px;
}

.account-settings-more-btn:hover {
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.05);
}

.account-settings-back-btn:hover {
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.05);
}

.account-settings-quick-menu {
    position: absolute;
    top: 92px;
    right: 20px;
    min-width: 210px;
    background: #2b2b2b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 8;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.account-settings-quick-menu.hidden {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    visibility: hidden;
    pointer-events: none;
}

.account-settings-quick-menu-item {
    border: none;
    background: transparent;
    color: #f1f1f1;
    font-size: 15px;
    text-align: left;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
}

.account-settings-quick-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.account-settings-quick-menu-item-danger {
    color: #ff6565;
}

.account-settings-profile-section {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 20px 14px;
    justify-content: center;
    flex-direction: column;
}

.account-settings-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--white-border);
    background: var(--bg-gray-2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-size: 32px;
    color: var(--text-white);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.account-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-settings-avatar-camera {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.account-settings-avatar-container:hover .account-settings-avatar,
.account-settings-avatar:hover {
    transform: scale(1.05);
}

#account-settings-modal .account-settings-avatar-container {
    overflow: visible;
}

#account-settings-modal .account-settings-avatar-container:hover .account-settings-avatar,
#account-settings-modal .account-settings-avatar:hover {
    transform: none;
}

#account-settings-modal .account-settings-avatar-camera {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 46px;
    height: 46px;
    transform: translate(22%, 22%);
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #111111;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
    z-index: 101;
    color: #111111;
}

#account-settings-modal .account-settings-avatar-camera svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

#account-settings-modal #account-settings-update-avatar-btn {
    display: none !important;
}

.account-settings-user-info {
    display: none;
}

.account-settings-name {
    color: var(--text-white);
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
}

.account-settings-username {
    color: var(--gray-text);
    font-size: 18px;
}

.account-settings-status {
    display: none;
}

.account-settings-fields {
    padding: 10px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.account-settings-field-group {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    background: #181818;
    border: none;
    border-radius: 18px;
    padding: 8px 16px;
    gap: 0;
    transition: background 0.15s ease;
}

.account-settings-field-group:hover {
    background: #181818;
}

.account-settings-field-group--identity {
    border-radius: 18px;
}

.account-settings-field-group--thought {
    border-radius: 18px;
}

.account-settings-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 6px 4px;
    width: 100%;
    max-width: 320px;
    min-height: 0;
}

.account-settings-field--row {
    max-width: none;
}

.account-settings-field--row + .account-settings-field--row {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.account-settings-glow-row {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 6px 4px;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.account-settings-glow-row:hover {
    background: transparent;
}

.account-settings-glow-value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.account-settings-glow-preview {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: 0 0 28px;
    background: radial-gradient(circle at 30% 30%, #9a6fd8, #4da8d8 55%, #d89a4d);
    box-shadow: 0 0 12px rgba(154, 111, 216, 0.45);
}

.account-settings-glow-hint {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.account-settings-glow-ultra-pill {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f3e8ff;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
}

.account-settings-glow-chevron {
    opacity: 0.45;
    flex: 0 0 auto;
}

.xam-profile-glow-sheet-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch !important;
    min-height: min(78vh, 720px);
    padding-top: 22px !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden;
    isolation: isolate;
}

#xam-profile-glow-sheet {
    align-items: flex-end;
}

#xam-profile-glow-sheet .xam-confirm-sheet-title {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    flex: 0 0 auto;
}

.xam-profile-glow-stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 8px 8px;
    overflow: visible;
}

.xam-profile-glow-stage-aura {
    position: absolute;
    top: -18%;
    left: -35%;
    width: 170%;
    height: 95%;
    z-index: 0;
    pointer-events: none;
    border-radius: 0;
    opacity: 0.95;
    mix-blend-mode: normal;
    filter: blur(88px) saturate(1.5) brightness(1.12);
    transform: translateZ(0);
    will-change: transform, background-position;
    background:
        radial-gradient(circle at 32% 36%, var(--glow-pick-c1, #9a6fd8) 0%, transparent 58%),
        radial-gradient(circle at 70% 32%, var(--glow-pick-c2, #4da8d8) 0%, transparent 55%),
        radial-gradient(circle at 50% 58%, var(--glow-pick-c3, #d89a4d) 0%, transparent 60%);
    background-size: 160% 160%, 160% 160%, 170% 170%;
    background-position: 8% 28%, 92% 18%, 50% 55%;
    animation: profileAvatarGlowDrift 8s ease-in-out infinite alternate;
}

.xam-profile-glow-options {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
}

.xam-profile-glow-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 8px;
}

.xam-profile-glow-option {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    background: #2a2a2a;
    color: #111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-radius 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.xam-profile-glow-option--custom {
    background: #f4f4f5;
    color: #111;
}

.xam-profile-glow-option.is-selected {
    border-radius: 16px;
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
    transform: scale(1.04);
}

.xam-profile-glow-stops {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 52px;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.92);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.xam-profile-glow-stops.is-locked .xam-profile-glow-stop {
    cursor: default;
}

.xam-profile-glow-stop {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.12);
    padding: 0;
    cursor: pointer;
    background: #666;
    transition: transform 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.xam-profile-glow-stop:hover,
.xam-profile-glow-stop.is-active {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.85);
}

.xam-profile-glow-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.xam-profile-glow-reset-btn {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border: none;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.xam-profile-glow-save-btn {
    flex: 1;
    min-height: 52px;
    border: none;
    border-radius: 999px;
    background: #7c3aed;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.xam-profile-glow-save-btn:active {
    filter: brightness(0.95);
}

.xam-color-picker-panel {
    gap: 20px !important;
    padding: 32px 24px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}

#xam-color-picker-sheet .xam-confirm-sheet-title {
    margin: 0 0 4px;
    font-size: 22px;
}

.xam-color-picker-sv {
    position: relative;
    width: 100%;
    aspect-ratio: 1.2 / 1;
    max-height: min(42vh, 320px);
    border-radius: 22px;
    overflow: hidden;
    background: hsl(270, 100%, 50%);
    touch-action: none;
    cursor: crosshair;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    margin-top: 4px;
}

.xam-color-picker-sv-white,
.xam-color-picker-sv-black {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.xam-color-picker-sv-white {
    background: linear-gradient(to right, #fff, transparent);
}

.xam-color-picker-sv-black {
    background: linear-gradient(to top, #000, transparent);
}

.xam-color-picker-sv-thumb {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    left: 100%;
    top: 0;
}

.xam-color-picker-hue {
    position: relative;
    width: 100%;
    height: 22px;
    margin-top: 2px;
    border-radius: 999px;
    background: linear-gradient(to right,
        #ff0000 0%,
        #ffff00 17%,
        #00ff00 33%,
        #00ffff 50%,
        #0000ff 67%,
        #ff00ff 83%,
        #ff0000 100%);
    touch-action: none;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.xam-color-picker-hue-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #ff0000;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.xam-color-picker-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    min-height: 44px;
    margin: 4px 0 6px;
}

.xam-color-picker-swatch {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: #9a6fd8;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.xam-color-picker-hex {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.88);
}

.xam-color-picker-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 8px;
    padding: 0 2px;
}

.xam-color-picker-btn {
    flex: 1 1 0;
    min-height: 48px;
    border: none;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 650;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.xam-color-picker-btn--cancel {
    background: #2c2c2c;
    color: #fff;
}

.xam-color-picker-btn--ok {
    background: #7b5ee6;
    color: #fff;
}

.xam-color-picker-btn:active {
    filter: brightness(0.95);
}

.account-settings-field-label {
    flex: 0 0 72px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
    padding: 0;
}

.account-settings-field-value {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    min-height: 0;
}

.account-settings-field-value:hover {
    background: transparent;
}

.account-settings-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none !important;
    color: var(--text-white);
    font-size: 15px;
    line-height: 1.15;
    outline: none;
    padding: 0;
    font-weight: 500;
    pointer-events: none;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    max-width: 100%;
}

.account-settings-input:read-only {
    color: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.account-settings-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.account-settings-input:focus,
.account-settings-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.account-settings-edit-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    border-radius: 0;
    opacity: 0.92;
    width: 18px;
    height: 18px;
}

.account-settings-edit-btn:hover {
    opacity: 0.7;
    background: transparent;
    transform: none;
}

.account-settings-edit-btn svg {
    width: 15px;
    height: 15px;
    opacity: 0.5;
}

.account-settings-edit-btn:hover svg {
    opacity: 0.9;
}

.account-settings-field-group--accounts {
    display: none;
    padding: 10px 12px 8px;
    gap: 6px;
}
@media (min-width: 769px) {
    .account-settings-field-group--accounts {
        display: flex;
    }
}
.account-settings-accounts-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 6px 4px;
}
.account-settings-accounts-title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.account-settings-accounts-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
}
.account-settings-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
}
.account-settings-accounts-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 6px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.account-settings-accounts-item + .account-settings-accounts-item {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0;
}
.account-settings-accounts-item:first-child {
    border-radius: 10px 10px 0 0;
}
.account-settings-accounts-item:last-child {
    border-radius: 0 0 10px 10px;
}
.account-settings-accounts-item:only-child {
    border-radius: 10px;
}
.account-settings-accounts-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.account-settings-accounts-item.is-current {
    background: rgba(255, 255, 255, 0.06);
    cursor: default;
}
.account-settings-accounts-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    overflow: hidden;
    flex-shrink: 0;
}
.account-settings-accounts-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.account-settings-accounts-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.account-settings-accounts-name {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-settings-accounts-username {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-settings-accounts-badge {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(139, 92, 246, 0.45);
    border-radius: 6px;
    padding: 3px 7px;
    flex-shrink: 0;
}
.account-settings-accounts-add {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 9px 6px 6px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: none;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: 0 0 10px 10px;
}
.account-settings-accounts-add:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.account-settings-actions {
    padding: 20px 20px 34px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}

.account-settings-action-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    background: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.account-settings-action-pill:hover {
    background: #181818;
}

.account-settings-action-pill:active {
    opacity: 0.85;
}

.account-settings-action-pill--danger {
    color: #f08a8a;
}

.account-settings-action-pill--logout {
    color: #ffffff;
}

.account-settings-action-pill-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.account-settings-action-pill-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.account-settings-action-pill-text {
    display: inline-block;
}

@media (max-width: 768px) {
    .settings-screen,
    .account-settings-screen {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: min(92dvh, 860px);
        border-radius: 32px 32px 0 0;
        border: none;
    }

    /* Вкладки настроек (Аккаунт и др.) — высокий шит, как confirm sheet */
    #account-settings-modal.modal {
        background: rgba(0, 0, 0, 0.72) !important;
        align-items: flex-end !important;
        justify-content: center !important;
        transition: background 0.28s ease !important;
        opacity: 1 !important;
    }

    #account-settings-modal.account-settings-open .account-settings-screen {
        transform: translate3d(0, 0, 0);
    }

    #account-settings-modal.account-settings-closing .account-settings-screen {
        animation: settingsSectionSheetDown 360ms cubic-bezier(0.32, 0.72, 0, 1) forwards !important;
        transition: none !important;
        transform: translate3d(0, 105%, 0);
    }

    #account-settings-modal .account-settings-screen {
        background: #1c1c1e !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: min(92dvh, 860px) !important;
        min-height: min(72dvh, 560px) !important;
        border-radius: 32px 32px 0 0 !important;
        border: none !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.38) !important;
        transform: translate3d(0, 105%, 0);
        transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
        animation: none !important;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 10px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        will-change: transform;
    }

    #account-settings-modal .account-settings-screen::before {
        content: '';
        display: block !important;
        width: 40px;
        height: 4px;
        margin: 2px auto 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        flex-shrink: 0;
    }

    #account-settings-modal .account-settings-header {
        padding: 4px 18px 16px;
    }

    #settings-modal .settings-quick-menu {
        top: calc(76px + env(safe-area-inset-top, 0px));
        right: 16px;
        min-width: 214px;
        background: #2e2e2e;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
    }

    #settings-modal .settings-quick-menu-item {
        font-size: 16px;
    }

    #account-settings-modal .account-settings-back-btn,
    #account-settings-modal .account-settings-more-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: #2a2a2e;
        color: rgba(255, 255, 255, 0.92);
        padding: 0;
        flex-shrink: 0;
    }

    #account-settings-modal .account-settings-title {
        font-size: clamp(22px, 5.2vw, 28px);
        line-height: 1.15;
        letter-spacing: -0.02em;
        font-weight: 700;
        color: #fff;
    }

    #account-settings-modal .account-settings-profile-section {
        padding: 6px 16px 12px;
        gap: 10px;
    }

    #account-settings-modal .account-settings-quick-menu {
        top: 64px;
        right: 16px;
        min-width: 214px;
        background: #2e2e2e;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
    }

    #account-settings-modal .account-settings-quick-menu-item {
        font-size: 16px;
    }

    #account-settings-modal .account-settings-avatar {
        width: 138px;
        height: 138px;
        border: none;
        background: #d0d0d0;
        color: #222;
    }

    #account-settings-modal .account-settings-field-group--email {
        max-width: 320px;
        border-radius: 14px;
    }

    #account-settings-modal .account-settings-fields {
        padding: 10px 16px 0;
        gap: 8px;
        align-items: center;
    }

    #account-settings-modal .account-settings-field-group {
        max-width: 320px;
        border-radius: 18px;
        padding: 8px 16px;
        gap: 0;
    }

    #account-settings-modal .account-settings-field {
        flex-direction: row;
        align-items: center;
        padding: 6px 4px;
        max-width: none;
    }

    #account-settings-modal .account-settings-field-value {
        gap: 6px;
        min-height: 0;
    }

    #account-settings-modal .account-settings-field-label {
        flex: 0 0 72px;
        font-size: 11px;
        line-height: 1.1;
        margin-bottom: 0;
    }

    #account-settings-modal .account-settings-input {
        font-size: 15px;
        line-height: 1.15;
    }

    #account-settings-modal .account-settings-edit-btn svg {
        width: 15px;
        height: 15px;
    }

    #account-settings-modal .account-settings-actions {
        display: none;
    }

    #account-settings-modal .account-settings-avatar-camera-static {
        opacity: 1;
        background: transparent;
        color: #222;
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==================== ПЕРСОНАЛИЗАЦИЯ ==================== */
.personalization-screen {
    background: #000000;
    border: 2px solid var(--white-border);
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: settingsSlideIn 0.3s ease-out;
}

.personalization-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
}

.personalization-back-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 12px;
}

.personalization-back-btn:hover {
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.05);
}

.personalization-more-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.personalization-quick-menu {
    position: absolute;
    top: 86px;
    right: 20px;
    min-width: 176px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(20, 20, 22, 0.95);
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.36);
    z-index: 60;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    opacity: 1;
    transform: translateY(0);
}

.personalization-quick-menu.hidden {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    visibility: hidden;
}

.personalization-quick-menu-item {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 11px 13px;
    text-align: left;
    background: transparent;
    color: #f2f2f2;
    font-size: 15px;
    cursor: pointer;
}

.personalization-quick-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.personalization-title {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

/* Превью чата */
.personalization-preview {
    margin: 0 20px 20px;
    border: 2px solid var(--white-border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-dark);
}

.personalization-preview-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--white-border);
    background: var(--bg-gray-1);
}

.personalization-preview-back-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.personalization-preview-back-btn:hover {
    opacity: 0.7;
}

.personalization-preview-title {
    color: var(--text-white);
    font-size: 14px;
    font-weight: 600;
    flex: 1;
    text-align: center;
}

.personalization-preview-messages {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 150px;
    position: relative;
    background: transparent;
}

/* Превью = те же классы, что в чате (.message / .message-content) */
.personalization-preview-messages .message {
    display: flex;
    gap: 10px;
    max-width: 85%;
}

.personalization-preview-messages .message.own {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.personalization-preview-messages .message-content {
    transition: border-radius 0.2s ease, background 0.2s ease;
    width: fit-content;
    max-width: min(42ch, 100%);
}

/* Настройки */
.personalization-settings {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.personalization-setting {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Персонализация на телефоне: только скруглённость и секунды под сообщениями */
@media (max-width: 768px) {
    .personalization-setting--desktop-only {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .personalization-setting--mobile-only {
        display: none !important;
    }
}

.personalization-setting-label {
    color: var(--text-white);
    font-size: 14px;
    font-weight: 500;
}

.personalization-color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.color-swatch {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
}

.color-swatch:hover {
    transform: scale(1.06);
    border-color: rgba(255, 255, 255, 0.55);
}

.color-swatch.selected {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.color-swatch.selected::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.personalization-setting--elements-color .personalization-setting-hint {
    margin: 0;
}

.personalization-slider-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.personalization-slider {
    flex: 1;
    height: 6px;
    background: var(--bg-gray-2);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.personalization-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--white-border);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.personalization-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.personalization-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--white-border);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.personalization-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
}

.personalization-slider-value {
    color: var(--text-white);
    font-size: 14px;
    min-width: 50px;
    text-align: right;
}

.personalization-toggle-container {
    display: flex;
    align-items: center;
}

.personalization-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    cursor: pointer;
}

.personalization-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.personalization-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-gray-2);
    border: 2px solid var(--white-border);
    border-radius: 26px;
    transition: all 0.3s ease;
}

.personalization-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: var(--white-border);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.personalization-toggle input:checked + .personalization-toggle-slider {
    background-color: var(--xam-ui-accent, #8774E1);
    border-color: var(--xam-ui-accent, #8774E1);
}

.personalization-toggle input:checked + .personalization-toggle-slider:before {
    transform: translateX(24px);
}

.personalization-theme-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.personalization-theme-label {
    color: var(--text-white);
    font-size: 14px;
    font-weight: 500;
    min-width: 60px;
}

.personalization-theme-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.personalization-theme-item {
    background: var(--bg-gray-2);
    color: var(--text-white);
    border: 1px solid var(--gray-border);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.personalization-theme-item.is-active {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--white-border);
}

.theme-card-preview {
    width: min(200px, 54vw);
    aspect-ratio: 2 / 3;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    padding: 8px;
    background: #0a0a0a;
}

.theme-card-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.theme-card-preview-glass {
    background: linear-gradient(160deg, #87CEEB 0%, #5FA8D3 40%, #4A9BC6 100%);
    border-color: rgba(255, 255, 255, 0.9);
}

.theme-card-screen-glass {
    background: linear-gradient(160deg, rgba(135, 206, 235, 0.85), rgba(95, 168, 211, 0.85));
    border-color: rgba(255, 255, 255, 0.45);
}

.theme-card-screen-glass .theme-card-header {
    background: rgba(255, 255, 255, 0.2);
}

.theme-card-screen-glass .theme-card-bubble {
    border-color: rgba(255, 255, 255, 0.6);
}

.theme-card-screen-glass .theme-card-input {
    border-color: rgba(255, 255, 255, 0.6);
}

.theme-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 12px;
}

.theme-card-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
}

.theme-card-title {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
}

.theme-card-bubble {
    height: 22px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: transparent;
}

.theme-card-bubble-left {
    width: 55%;
    align-self: flex-start;
}

.theme-card-bubble-right {
    width: 50%;
    align-self: flex-end;
}

.theme-card-bubble-lg {
    width: 70%;
}

.theme-card-bubble-sm {
    width: 42%;
}

.theme-card-input {
    margin-top: auto;
    height: 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.theme-card-text {
    text-align: center;
}

.theme-card-name {
    font-size: 18px;
    font-weight: 700;
}

.theme-card-status {
    font-size: 13px;
    color: var(--gray-text);
}

.personalization-blur-container {
    margin-top: 12px;
}

.personalization-background-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.personalization-upload-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: 2px solid var(--white-border);
    border-radius: 20px;
    color: var(--text-white);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.personalization-upload-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.personalization-upload-btn svg {
    width: 20px;
    height: 20px;
}

.personalization-reset-btn {
    padding: 12px 20px;
    background: transparent;
    border: 2px solid #E74C3C;
    border-radius: 20px;
    color: #E74C3C;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.personalization-reset-btn:hover {
    background: rgba(231, 76, 60, 0.1);
    transform: translateY(-2px);
}

.personalization-background-preview {
    margin-top: 12px;
    width: 100%;
    height: 100px;
    border: 2px solid var(--white-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-gray-2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Светлая тема */
body.theme-light {
    --bg-black: #1F6B45;
    --bg-dark: #FFFFFF;
    --bg-darker: #F5F5F5;
    --bg-gray-1: #FFFFFF;
    --bg-gray-2: #F0F0F0;
    --bg-gray-3: #E8E8E8;
    --text-white: #1a1a1a;
    --text-light: #1a1a1a;
    --gray-text: #666666;
    --white-border: rgba(26, 26, 26, 0.12);
    --gray-border: rgba(26, 26, 26, 0.10);
    --msg-own-bg: #8774E1;
    --msg-peer-bg: #FFFFFF;
    --xam-accent: #AE22FF;
    --xam-accent-soft: rgba(174, 34, 255, 0.14);
    --theme-bg-base: #1E6B48;
    --theme-bg-image: none;
    --theme-bg-pattern-opacity: 0.38;
    --theme-bg-pattern-gradient: linear-gradient(
        125deg,
        #6EE7A8 0%,
        #34D399 18%,
        #10B981 38%,
        #059669 58%,
        #047857 78%,
        #34D399 100%
    );
    --xam-selection-bg: rgba(174, 34, 255, 0.42);
    --xam-selection-color: #ffffff;
    --xam-selection-bg-on-accent: #ffffff;
    --xam-selection-color-on-accent: #6B00B8;
    background: var(--theme-bg-base);
    color: #1a1a1a;
    color-scheme: light;
}

body.theme-light .message-content {
    background: var(--msg-peer-bg) !important;
    border-color: transparent !important;
    color: #1a1a1a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.theme-light .message.own .message-content {
    background: var(--msg-own-bg) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(135, 116, 225, 0.28);
}

body.theme-light .message.call-message .call-message-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #1a1a1a !important;
}

body.theme-light .message.call-message.own .call-message-card {
    background: var(--msg-own-bg) !important;
    border: none !important;
    color: #ffffff !important;
}

body.theme-light .message-text {
    color: #1a1a1a !important;
    white-space: pre-wrap !important;
}

body.theme-light .message.own .message-text {
    color: #ffffff !important;
}

body.theme-light .message-line-break {
    color: inherit;
}

body.theme-light .message-time {
    color: rgba(26, 26, 26, 0.45) !important;
}

body.theme-light .message.own .message-time,
body.theme-light .message.own .read-status-icon {
    color: rgba(255, 255, 255, 0.82) !important;
}

body.theme-light .message-sender {
    color: #1a1a1a !important;
}

body.theme-light .personalization-preview-messages .message-content {
    background: #FFFFFF;
    border-color: transparent;
    color: #1a1a1a;
}

body.theme-light .personalization-preview-messages .message.own .message-content {
    background: var(--msg-own-bg);
    color: #ffffff;
}

body.theme-light .chat-header,
body.theme-light .settings-screen,
body.theme-light .account-settings-screen,
body.theme-light .personalization-screen {
    background: #FFFFFF;
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .chat-user-name,
body.theme-light .settings-title,
body.theme-light .account-settings-title,
body.theme-light .personalization-title {
    color: #1a1a1a;
}

body.theme-light .settings-menu-item,
body.theme-light .account-settings-field-group,
body.theme-light .account-settings-field-group--email {
    background: rgba(0, 0, 0, 0.04);
    border: none;
    color: #1a1a1a;
}

body.theme-light .settings-menu-item:hover,
body.theme-light .account-settings-field-group:hover,
body.theme-light .account-settings-field-group--email:hover {
    background: rgba(0, 0, 0, 0.07);
}

body.theme-light .account-settings-field-label {
    color: rgba(0, 0, 0, 0.45);
}

body.theme-light input,
body.theme-light textarea {
    background: #FFFFFF;
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.12);
}

body.theme-light .message-input {
    background: #FFFFFF;
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.08);
}

/* Акцент кнопок/элементов светлой темы */
body.theme-light .personalization-theme-option.is-active,
body.theme-light .btn-primary,
body.theme-light .personalization-toggle input:checked + .personalization-toggle-slider {
    background: #AE22FF !important;
    color: #fff !important;
}
body.theme-light .personalization-theme-switch {
    background: rgba(0, 0, 0, 0.06);
}
body.theme-light .personalization-theme-option {
    color: rgba(0, 0, 0, 0.45);
}

/* Панели + зелёный фон чата */
body.theme-light .messenger-container {
    background: var(--theme-bg-base) !important;
}
body.theme-light .sidebar,
body.theme-light .chats-section,
body.theme-light .pc-sidebar-settings,
body.theme-light .pc-sidebar-settings-card,
body.theme-light .sidebar-menu,
body.theme-light .sidebar-menu-mobile,
body.theme-light #calls-screen,
body.theme-light #search-screen-tab {
    background: #FFFFFF !important;
    color: #1a1a1a;
}
body.theme-light .chat-area,
body.theme-light .chat-view,
body.theme-light .messages-container,
body.theme-light .no-chat {
    background: transparent !important;
}
body.theme-light .chat-name,
body.theme-light .pc-sidebar-settings-title,
body.theme-light .pc-sidebar-settings-value,
body.theme-light .pc-sidebar-settings-item-text,
body.theme-light .sidebar-menu-item,
body.theme-light .sidebar-menu-mobile-title {
    color: #1a1a1a !important;
}
body.theme-light .chat-last-message,
body.theme-light .chat-list-time,
body.theme-light .chat-drum-time,
body.theme-light .pc-sidebar-settings-label,
body.theme-light .pc-sidebar-settings-accounts-hint,
body.theme-light .personalization-setting-hint {
    color: #666666 !important;
}
body.theme-light .chat-item:hover,
body.theme-light .chat-item.active {
    background: rgba(0, 0, 0, 0.05) !important;
}
body.theme-light .chat-unread-pill {
    background: #AE22FF !important;
    color: #fff !important;
}
body.theme-light .chat-list-read-status.read-icon,
body.theme-light .chat-list-read--read {
    color: #AE22FF !important;
}

/* Стеклянная тема */
body.theme-style-glass {
    /* Однородный фоновый цвет под макет */
    background: #30516D;
    background-size: auto;
    animation: none;
    color: #FFFFFF;
}

@keyframes glassBackgroundShift {
    0% {
        background-position: 0% 20%;
    }
    50% {
        background-position: 100% 80%;
    }
    100% {
        background-position: 0% 20%;
    }
}

body.theme-style-glass .sidebar,
body.theme-style-glass .chat-area,
body.theme-style-glass .chat-view,
body.theme-style-glass .messages-container {
    background: transparent;
}

body.theme-style-glass .sidebar-header,
body.theme-style-glass .chat-header,
body.theme-style-glass .message-input-container,
body.theme-style-glass .settings-screen,
body.theme-style-glass .account-settings-screen,
body.theme-style-glass .personalization-screen,
body.theme-style-glass .modal-content {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
}

/* Аккаунт: используем свой размытый фон-картинку, поэтому гасим backdrop-filter */
body.theme-style-glass .account-settings-screen {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Аккаунт: как в списке чатов (стеклянный размытый фон) */

body.theme-style-glass .sidebar-header {
    background: rgba(20, 20, 20, 0.55);
    border: none;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

body.theme-style-glass .chat-header {
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

body.theme-style-glass .chat-item {
    /* Плоский список как в Telegram: без капсул, во всю ширину */
    padding: 15px 20px;
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.20);
}

body.theme-style-glass .chat-item:hover,
body.theme-style-glass .chat-item.active {
    background: rgba(0, 0, 0, 0.32);
    border-left: 3px solid rgba(255, 255, 255, 0.85);
}

body.theme-style-glass .chat-avatar {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
    body.theme-style-glass .chat-avatar,
    body.theme-style-glass #user-profile-modal .profile-avatar,
    body.theme-style-glass #group-profile-modal .profile-avatar {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    body.theme-style-glass .chat-item:hover,
    body.theme-style-glass .chat-item.active {
        border-left: none !important;
        background: transparent !important;
    }
}

body.theme-style-glass .message-content {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
}

body.theme-style-glass .message.own .message-content {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.theme-style-glass .message.call-message .call-message-card {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

body.theme-style-glass .message.call-message.own .call-message-card {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

body.theme-style-glass .message-input {
    background: transparent;
    color: #ffffff;
    border: none;
    outline: none;
    box-shadow: none;
}

body.theme-style-glass .personalization-preview {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.4);
}

body.theme-style-glass .personalization-preview-header {
    background: rgba(255, 255, 255, 0.12);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

body.theme-style-glass .personalization-preview-messages .message-content {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #f3f6f7;
}

body.theme-style-glass .message-input-container {
    padding: 0;
    border-radius: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (min-width: 769px) {
    body.theme-style-glass .message-input-container {
        padding: 8px 24px 12px !important;
    }
}

body.theme-style-glass .input-panel {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (min-width: 769px) {
    body.theme-style-glass .input-panel {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

body.theme-style-glass .message-input {
    font-size: 15px;
    letter-spacing: 0;
    padding: 4px 8px;
}

body.theme-style-glass .message-input-container .message-input {
    padding: 4px 8px;
}

body.theme-style-glass #send-btn,
body.theme-style-glass #file-btn,
body.theme-style-glass #voice-btn,
body.theme-style-glass #emoji-btn {
    color: rgba(255, 255, 255, 0.7);
}

body.theme-style-glass #send-btn {
    background: transparent;
    border: none;
}

body.theme-style-glass .btn-file {
    background: transparent;
    border: none;
}

body.theme-style-glass .btn-file:hover {
    background: transparent;
    border-color: transparent;
}

body.theme-style-glass .sidebar-header {
    border-radius: 24px;
    margin: 12px 12px 0;
}

body.theme-style-glass .settings-menu-item,
body.theme-style-glass .account-settings-field-group,
body.theme-style-glass .account-settings-field-group--email {
    background: #181818;
    border: none;
    color: #eaf1f3;
}

body.theme-style-glass .settings-menu-item:hover,
body.theme-style-glass .account-settings-field-group:hover,
body.theme-style-glass .account-settings-field-group--email:hover {
    background: #181818;
}

/* Аккаунт: компактные пилюли на десктопе */
@media (min-width: 769px) {
    #account-settings-modal .account-settings-field-group,
    #account-settings-modal .account-settings-field-group:hover {
        background: #181818 !important;
        border: none !important;
        border-radius: 18px !important;
    }

    #account-settings-modal .account-settings-field-group:hover {
        background: #181818 !important;
    }

    #account-settings-modal .account-settings-field--row {
        background: transparent !important;
        border: none !important;
    }

    #account-settings-modal .account-settings-field-group--email,
    #account-settings-modal .account-settings-field-group--email:hover {
        background: #181818 !important;
        border: none !important;
        border-radius: 14px !important;
    }

    #account-settings-modal .account-settings-field-group--email:hover {
        background: #181818 !important;
    }

    body.theme-style-glass #account-settings-modal .account-settings-field-group,
    body.theme-style-glass #account-settings-modal .account-settings-field-group--email {
        background: #181818 !important;
        border: none !important;
    }
}

body.theme-style-glass .pinned-messages-section {
    background: rgba(255, 255, 255, 0.06);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

body.theme-style-glass .pinned-messages-bar {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

@media (min-width: 769px) {
    body.theme-light .pinned-messages-bar {
        background: rgba(15, 15, 17, 0.94);
        border-color: rgba(255, 255, 255, 0.12);
    }
}

@media (max-width: 768px) {
    body.theme-light .pinned-messages-bar {
        background: rgba(10, 10, 12, 0.94) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }
}

body.theme-style-glass .pinned-message-item {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: rgba(255, 255, 255, 0.5);
}

body.theme-style-glass .pinned-message-item:hover {
    background: rgba(255, 255, 255, 0.16);
}

body.theme-style-glass .pinned-messages-modal-content,
body.theme-style-glass .pinned-message-modal-content {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
}

body.theme-style-glass .pinned-message-modal-item {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

body.theme-style-glass .pinned-message-modal-item:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Улучшенная видимость переключателя секунд */
.personalization-toggle input:checked + .personalization-toggle-slider {
    background-color: var(--xam-ui-accent, #8774E1);
    border-color: var(--xam-ui-accent, #8774E1);
}

.personalization-toggle input:checked + .personalization-toggle-slider:before {
    background-color: #ffffff;
}

@media (max-width: 768px) {
    html {
        touch-action: manipulation;
    }
    #scan-qr-modal.modal:not(.hidden) {
        z-index: 51000 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        background: #000 !important;
    }
    #settings-modal.modal,
    #user-profile-modal.modal,
    #group-profile-modal.modal,
    #sidebar-menu-modal.modal {
        z-index: 50000 !important;
        background: transparent !important;
        align-items: stretch;
        justify-content: stretch;
        pointer-events: auto !important;
    }

    #account-settings-modal.modal,
    #privacy-settings-modal.modal,
    #personalization-modal.modal,
    #xams-modal.modal,
    #activate-code-modal.modal {
        z-index: 50000 !important;
        background: rgba(0, 0, 0, 0.72) !important;
        align-items: flex-end !important;
        justify-content: center !important;
        pointer-events: auto !important;
    }

    #settings-modal:not(.hidden) .settings-screen,
    #account-settings-modal:not(.hidden) .account-settings-screen,
    #privacy-settings-modal:not(.hidden) .privacy-settings-screen,
    #personalization-modal:not(.hidden) .personalization-screen,
    #xams-modal:not(.hidden) .xams-screen,
    #activate-code-modal:not(.hidden) .modal-content.activation-modal,
    #user-profile-modal:not(.hidden) .modal-content,
    #group-profile-modal:not(.hidden) .modal-content,
    #sidebar-menu-modal.open .sidebar-menu-content,
    #sidebar-menu-modal.open .sidebar-menu-content button,
    #sidebar-menu-modal.open .sidebar-menu-content .sidebar-menu-item {
        touch-action: manipulation;
    }

    #xams-transactions-modal.modal {
        z-index: 10040 !important;
        background: transparent !important;
        align-items: stretch;
        justify-content: stretch;
    }

    #privacy-settings-modal.modal,
    #personalization-modal.modal,
    #xams-modal.modal,
    #activate-code-modal.modal {
        background: rgba(0, 0, 0, 0.72) !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }

    #privacy-settings-modal .privacy-settings-screen,
    #personalization-modal .personalization-screen,
    #xams-modal .xams-screen,
    #activate-code-modal .modal-content.activation-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: min(92dvh, 860px) !important;
        min-height: min(68dvh, 520px) !important;
        margin: 0 !important;
        border-radius: 32px 32px 0 0 !important;
        border: none !important;
        background: #1c1c1e !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.38) !important;
        transform: translate3d(0, 0, 0);
        transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 10px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        will-change: transform;
    }

    #xams-transactions-modal .xams-transactions-screen {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: min(92dvh, 860px) !important;
        margin: 0 !important;
        border-radius: 32px 32px 0 0 !important;
        border: none !important;
        background: #1c1c1e !important;
    }

    #privacy-settings-modal .privacy-settings-screen,
    #personalization-modal .personalization-screen,
    #xams-modal .xams-screen,
    #activate-code-modal .modal-content.activation-modal {
        color: #f2f2f2;
    }

    #privacy-settings-modal .privacy-settings-screen::before,
    #personalization-modal .personalization-screen::before,
    #xams-modal .xams-screen::before,
    #activate-code-modal .modal-content.activation-modal::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        margin: 2px auto 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        flex-shrink: 0;
    }

    #privacy-settings-modal .privacy-settings-header {
        padding: 4px 18px 16px;
    }

    #privacy-settings-modal .privacy-settings-back-btn,
    #privacy-settings-modal .privacy-settings-header-spacer {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    #privacy-settings-modal .privacy-settings-back-btn {
        border-radius: 50%;
        border: none;
        background: #2a2a2e;
        color: rgba(255, 255, 255, 0.92);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    #privacy-settings-modal .privacy-settings-title {
        font-size: clamp(22px, 5.2vw, 28px);
        line-height: 1.15;
        letter-spacing: -0.02em;
        font-weight: 700;
        color: #fff;
        margin: 0;
        flex: 1;
        text-align: center;
    }

    #privacy-settings-modal .privacy-settings-content {
        padding: 8px 16px 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    #privacy-settings-modal .privacy-status-row {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        border: none;
        border-radius: 18px;
        background: rgba(0, 0, 0, 0.32);
        color: #ffffff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        gap: 10px;
        min-height: 44px;
        box-sizing: border-box;
        font-size: inherit;
        line-height: 1.1;
    }

    #privacy-settings-modal .privacy-status-row-label {
        flex: 0 0 96px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.45);
    }

    #privacy-settings-modal .privacy-status-row-value {
        flex: 1;
        min-width: 0;
        text-align: right;
        font-size: 15px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.55);
    }

    #privacy-settings-modal .privacy-status-row-value.is-open {
        color: #5fd653;
    }

    #privacy-settings-modal .privacy-settings-section {
        max-width: 320px;
        margin: 0 auto;
        width: 100%;
    }

    #privacy-settings-modal .privacy-section-heading {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.38);
        margin-top: 14px;
    }

    #privacy-settings-modal .privacy-section-hint {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.42);
        opacity: 1;
    }

    #privacy-settings-modal .privacy-sessions-card {
        background: rgba(0, 0, 0, 0.32);
        border-radius: 18px;
        padding: 4px 16px;
    }

    #privacy-settings-modal .privacy-sessions-list {
        gap: 0;
    }

    #privacy-settings-modal .privacy-session-item {
        border: none;
        border-radius: 0;
        background: transparent;
        padding: 10px 0;
    }

    #privacy-settings-modal .privacy-session-item + .privacy-session-item {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    #privacy-settings-modal .privacy-session-terminate-btn {
        border: none;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.88);
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 600;
    }

    #privacy-settings-modal .privacy-more-btn,
    #privacy-settings-modal .privacy-terminate-all-btn {
        width: 100%;
        border: none;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.32);
        color: rgba(255, 255, 255, 0.88);
        padding: 9px 16px;
        font-size: 13px;
        font-weight: 600;
        min-height: 38px;
    }

    #privacy-settings-modal .privacy-info-text {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.38);
        opacity: 1;
        text-align: center;
    }

    #personalization-modal .personalization-screen {
        color: #f2f2f2;
    }

    #personalization-modal .personalization-header {
        padding: 4px 18px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    #personalization-modal .personalization-back-btn,
    #personalization-modal .personalization-more-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: #2a2a2e;
        color: rgba(255, 255, 255, 0.92);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
    }

    #personalization-modal .personalization-quick-menu {
        top: 64px;
        right: 18px;
        min-width: 168px;
        border-radius: 16px;
        background: #2e2e2e;
        border: 1px solid rgba(255, 255, 255, 0.14);
    }

    #personalization-modal .personalization-quick-menu-item {
        font-size: 17px;
        padding: 13px 14px;
    }

    #personalization-modal .personalization-title {
        font-size: clamp(22px, 5.2vw, 28px);
        line-height: 1.15;
        letter-spacing: -0.02em;
        font-weight: 700;
        color: #fff;
        margin: 0;
        flex: 1;
        text-align: center;
    }

    #personalization-modal .personalization-preview {
        margin: 0 16px;
        border: none;
        border-radius: 20px;
        background: rgba(0, 0, 0, 0.32);
        overflow: hidden;
    }

    #personalization-modal .personalization-preview-header {
        background: rgba(0, 0, 0, 0.2);
    }

    #personalization-modal .personalization-preview-messages {
        background: rgba(0, 0, 0, 0.32);
    }

    #personalization-modal .personalization-settings {
        padding: 12px 16px 18px;
    }

    #personalization-modal .personalization-setting {
        background: rgba(0, 0, 0, 0.32);
        border-radius: 18px;
        padding: 12px 14px;
        border: none;
    }

    #personalization-modal .personalization-setting + .personalization-setting {
        margin-top: 10px;
    }

    #xams-modal .xams-screen {
        background: #1c1c1e !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #xams-modal .xams-header {
        padding: 4px 18px 16px;
        border-bottom: none;
        background: transparent;
    }

    #xams-modal .xams-back-btn,
    #xams-modal .xams-transactions-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: #2a2a2e;
        color: rgba(255, 255, 255, 0.92);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
    }

    #xams-modal .xams-title {
        font-size: clamp(22px, 5.2vw, 28px);
        line-height: 1.15;
        letter-spacing: -0.02em;
        font-weight: 700;
        color: #fff;
        margin: 0;
        flex: 1;
        text-align: center;
    }

    #xams-modal .xams-content,
    #xams-modal .xams-tab-content,
    #xams-modal #xams-tab-content-shop,
    #xams-modal #xams-tab-content-purchase {
        display: none !important;
    }

    #xams-modal .xams-transactions-btn {
        visibility: hidden;
        pointer-events: none;
    }

    #xams-modal .xams-moved-notice {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        padding: 8px 20px calc(18px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    #xams-modal .xams-moved-notice-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 24px 8px 32px;
        gap: 12px;
    }

    #xams-modal .xams-moved-notice-icon {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: linear-gradient(180deg, #b565ff 0%, #7c3aed 55%, #6d28d9 100%);
        margin-bottom: 8px;
    }

    #xams-modal .xams-moved-notice-title {
        margin: 0;
        color: #fff;
        font-size: clamp(22px, 5.2vw, 28px);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }

    #xams-modal .xams-moved-notice-text {
        margin: 0;
        max-width: 280px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 15px;
        line-height: 1.4;
        font-weight: 400;
    }

    #xams-modal .xams-moved-notice-btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
        border-radius: 999px;
        padding: 16px 20px;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
        color: #fff;
        background: #8b5cf6;
        transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
    }

    #xams-modal .xams-moved-notice-btn:active {
        transform: scale(0.98);
        filter: brightness(1.06);
    }

    #xams-modal .xams-balance,
    #xams-modal .xams-tabs,
    #xams-modal .xams-purchase-section,
    #xams-modal .xams-shop-section {
        border-radius: 18px;
        background: rgba(0, 0, 0, 0.32);
        border: none;
    }

    #xams-modal .xams-tabs {
        display: none;
    }

    #xams-modal #xams-tab-content-purchase,
    #xams-modal #xams-tab-content-shop {
        display: none !important;
    }

    #xams-gift-modal.modal,
    #xams-gift-self-modal.modal,
    #xams-gift-send-modal.modal {
        z-index: 10060 !important;
        background: rgba(0, 0, 0, 0.88) !important;
        align-items: stretch;
        justify-content: stretch;
    }

    #activate-code-modal .modal-content.activation-modal {
        background: #1c1c1e !important;
    }

    #activate-code-modal .activate-code-header {
        padding: 4px 18px 16px;
        border-bottom: none;
    }

    #activate-code-modal .activate-code-back-btn,
    #activate-code-modal .activate-code-header-spacer {
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }

    #activate-code-modal .activate-code-back-btn {
        border: none;
        background: #2a2a2e;
        color: rgba(255, 255, 255, 0.92);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
    }

    #activate-code-modal .activate-code-title {
        font-size: clamp(22px, 5.2vw, 28px);
        line-height: 1.15;
        letter-spacing: -0.02em;
        font-weight: 700;
        color: #f2f2f2;
    }

    #activate-code-modal .modal-body {
        padding: 8px 16px 18px;
    }

    #activate-code-modal .activation-description {
        background: rgba(0, 0, 0, 0.32);
        border-radius: 18px;
        padding: 12px 14px;
    }

    #activate-code-modal #activate-code-input {
        background: rgba(0, 0, 0, 0.32);
        border: none;
        border-radius: 16px;
        color: #f3f3f3;
        padding: 12px 14px;
    }

    #activate-code-modal #activate-code-submit-btn {
        border-radius: 16px;
    }

    .personalization-screen {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: min(92dvh, 860px);
        border-radius: 32px 32px 0 0;
        border: none;
    }

    #privacy-settings-modal .privacy-settings-screen,
    #personalization-modal .personalization-screen,
    #xams-modal .xams-screen,
    #activate-code-modal .modal-content.activation-modal {
        transform: translate3d(0, 0, 0);
        transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
        animation: settingsSectionSheetUp 380ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    #privacy-settings-modal.settings-section-closing .privacy-settings-screen,
    #personalization-modal.settings-section-closing .personalization-screen,
    #xams-modal.settings-section-closing .xams-screen,
    #activate-code-modal.settings-section-closing .modal-content.activation-modal {
        animation: settingsSectionSheetDown 360ms cubic-bezier(0.32, 0.72, 0, 1) forwards !important;
        transition: none !important;
        transform: translate3d(0, 105%, 0);
    }

    @keyframes settingsSectionSheetUp {
        from { transform: translate3d(0, 105%, 0); }
        to   { transform: translate3d(0, 0, 0); }
    }

    @keyframes settingsSectionSheetDown {
        from { transform: translate3d(0, 0, 0); }
        to   { transform: translate3d(0, 105%, 0); }
    }

    #privacy-settings-modal.settings-section-closing,
    #personalization-modal.settings-section-closing,
    #xams-modal.settings-section-closing,
    #activate-code-modal.settings-section-closing,
    #account-settings-modal.account-settings-closing {
        background: rgba(0, 0, 0, 0) !important;
        transition: background 0.34s ease !important;
    }

    /* Мобильная панель вкладок настроек — стеклянная скруглённая, как у профиля */
    #account-settings-modal.desktop-settings-modal:not(.hidden),
    #privacy-settings-modal.desktop-settings-modal:not(.hidden),
    #personalization-modal.desktop-settings-modal:not(.hidden),
    #xams-modal.desktop-settings-modal:not(.hidden),
    #activate-code-modal.desktop-settings-modal:not(.hidden) {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: transparent !important;
    }

    .desktop-settings-modal .desktop-settings-sidebar {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: max(10px, env(safe-area-inset-bottom, 0px));
        top: auto;
        width: auto;
        min-width: 0;
        transform: none;
        z-index: 50012;
        pointer-events: none;
        display: block;
        background: transparent;
        border: none;
        padding: 0;
    }

    .desktop-settings-modal .desktop-settings-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        pointer-events: none;
    }

    .desktop-settings-modal .desktop-settings-pill {
        pointer-events: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 8px 10px;
        border-radius: 26px;
        background: rgba(10, 10, 12, 0.72);
        backdrop-filter: blur(20px) saturate(1.08);
        -webkit-backdrop-filter: blur(20px) saturate(1.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        box-sizing: border-box;
    }

    .desktop-settings-modal .desktop-settings-pill::-webkit-scrollbar {
        display: none;
    }

    .desktop-settings-modal .desktop-settings-pill-divider,
    .desktop-settings-modal .desktop-settings-tab-close {
        display: none !important;
    }

    .desktop-settings-modal .desktop-settings-sidebar-list {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        width: 100%;
        min-width: min-content;
    }

    .desktop-settings-modal .desktop-settings-labels {
        display: none !important;
    }

    .desktop-settings-modal .desktop-settings-tab {
        width: 46px;
        height: 46px;
        min-width: 46px;
        border-radius: 16px;
        flex-shrink: 0;
        transform: none;
        transition: background-color 0.18s ease, transform 0.12s ease;
    }

    .desktop-settings-modal .desktop-settings-tab:active {
        transform: scale(0.94);
    }

    .desktop-settings-modal .desktop-settings-tab.active {
        background: rgba(255, 255, 255, 0.12);
        transform: none;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    .desktop-settings-modal .desktop-settings-tab-icon {
        width: 32px;
        height: 32px;
    }

    .desktop-settings-modal .desktop-settings-tab-icon .sidebar-menu-icon-img {
        width: 28px;
        height: 28px;
    }

    .desktop-settings-modal > .account-settings-screen,
    .desktop-settings-modal > .privacy-settings-screen,
    .desktop-settings-modal > .personalization-screen,
    .desktop-settings-modal > .xams-screen,
    .desktop-settings-modal > .activation-modal,
    .desktop-settings-modal > .modal-content {
        position: relative;
        z-index: 1;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box;
    }

    .desktop-settings-modal .desktop-settings-content-barrier {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        padding: 0;
        grid-column: auto;
    }

    .desktop-settings-modal .xam-settings-version--sidebar {
        display: block !important;
        position: static;
        transform: none;
        left: auto;
        bottom: auto;
        text-align: center;
        padding: 0 4px 2px;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.32);
        pointer-events: none;
    }

    .desktop-settings-modal .xam-settings-version--screen {
        display: none !important;
    }
}

@keyframes settingsSectionSlideFromRight {
    from {
        transform: translateX(100%);
        opacity: 1;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* XamS стили */
.xams-moved-notice {
    display: none;
}

.xams-screen {
    background: #000000;
    border: 2px solid var(--white-border);
    border-radius: 20px;
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Desktop settings layout — floating icon pill */
@media (min-width: 769px) {
    #account-settings-modal:not(.hidden),
    #privacy-settings-modal:not(.hidden),
    #personalization-modal:not(.hidden),
    #xams-modal:not(.hidden),
    #activate-code-modal:not(.hidden) {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 50000 !important;
        position: fixed !important;
        inset: 0 !important;
        pointer-events: auto !important;
        background: transparent !important;
    }

    #account-settings-modal:not(.hidden) .account-settings-screen {
        transform: none !important;
    }

    .desktop-settings-modal {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0;
        position: relative;
    }

    .desktop-settings-modal:not(.hidden) {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 50000 !important;
        background: transparent !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        pointer-events: auto !important;
    }

    .desktop-settings-modal .desktop-settings-sidebar {
        position: absolute;
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        min-width: 0;
        flex: none;
        background: transparent;
        border: none;
        padding: 0;
        display: block;
        z-index: 30 !important;
        pointer-events: none !important;
        isolation: isolate;
    }

    .desktop-settings-pill {
        pointer-events: auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px;
        border-radius: 999px;
        background: rgba(14, 15, 20, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.48);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
    }

    .desktop-settings-pill-divider {
        width: 28px;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
        margin: 2px 0;
        flex-shrink: 0;
    }

    .desktop-settings-nav {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        pointer-events: auto !important;
    }

    .desktop-settings-labels {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-top: 65px;
        pointer-events: none;
        user-select: none;
    }

    .desktop-settings-tab-label {
        display: flex;
        align-items: center;
        height: 44px;
        color: rgba(255, 255, 255, 0.38);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
        transition: color 0.18s ease, font-size 0.18s ease, font-weight 0.18s ease;
    }

    .desktop-settings-tab-label.active {
        color: #ffffff;
        font-size: 17px;
        font-weight: 600;
    }

    .desktop-settings-modal:not(.hidden) .desktop-settings-tab {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .desktop-settings-sidebar-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .desktop-settings-tab {
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.92);
        border-radius: 999px;
        width: 44px;
        height: 44px;
        padding: 0;
        cursor: pointer;
        position: relative;
        z-index: 6;
        pointer-events: auto !important;
        touch-action: manipulation;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.15s ease;
        box-shadow: none;
    }

    .desktop-settings-tab:hover {
        background: transparent;
        transform: scale(1.1);
    }

    .desktop-settings-tab:active {
        transform: scale(1.05);
    }

    .desktop-settings-tab.active {
        background: transparent;
        box-shadow: none;
        transform: scale(1.12);
    }

    .desktop-settings-tab-close {
        color: rgba(255, 255, 255, 0.72);
    }

    .desktop-settings-tab-close:hover {
        color: rgba(255, 255, 255, 0.95);
        background: transparent;
        transform: scale(1.1);
    }

    .desktop-settings-tab-icon {
        width: 36px;
        height: 36px;
        border-radius: 0;
        background: transparent !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        overflow: hidden;
        flex-shrink: 0;
    }

    .desktop-settings-tab-icon .sidebar-menu-icon-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .desktop-settings-modal {
        --desktop-settings-barrier-max-width: 680px;
        --desktop-settings-barrier-inline-padding: 24px;
        --desktop-settings-sidebar-reserve: 260px;
    }

    .desktop-settings-modal .account-settings-screen,
    .desktop-settings-modal .privacy-settings-screen,
    .desktop-settings-modal .personalization-screen,
    .desktop-settings-modal .xams-screen,
    .desktop-settings-modal .activation-modal {
        flex: 1 1 auto;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        height: 100vh;
        max-height: 100vh;
        min-height: 100vh;
        border-radius: 0;
        border: none;
        margin: 0;
        animation: none;
        position: relative !important;
        z-index: 1 !important;
        pointer-events: auto !important;
        background: #16171d !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        padding-left: 0;
        box-sizing: border-box;
        display: grid;
        grid-template-columns:
            minmax(var(--desktop-settings-sidebar-reserve), 1fr)
            min(var(--desktop-settings-barrier-max-width), calc(100vw - var(--desktop-settings-sidebar-reserve) - var(--desktop-settings-barrier-inline-padding)))
            minmax(var(--desktop-settings-barrier-inline-padding), 1fr);
        align-items: stretch;
    }

    /* Центральный барьер: весь контент вкладок (кроме боковой панели) — только внутри этой колонки */
    .desktop-settings-content-barrier {
        grid-column: 2;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 0 var(--desktop-settings-barrier-inline-padding);
    }

    .desktop-settings-modal > .account-settings-screen,
    .desktop-settings-modal > .privacy-settings-screen,
    .desktop-settings-modal > .personalization-screen,
    .desktop-settings-modal > .xams-screen,
    .desktop-settings-modal > .activation-modal,
    .desktop-settings-modal > .modal-content {
        left: auto !important;
        right: auto !important;
        inset: auto !important;
    }

    /* Единый тёмный фон контента (без обоев) на всех вкладках */
    .desktop-settings-modal .account-settings-screen::before,
    .desktop-settings-modal .privacy-settings-screen::before,
    .desktop-settings-modal .personalization-screen::before,
    .desktop-settings-modal .xams-screen::before,
    .desktop-settings-modal .activation-modal::before {
        display: none !important;
    }

    .desktop-settings-modal .xams-header {
        background: #16171d;
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .desktop-settings-modal .account-settings-back-btn,
    .desktop-settings-modal .privacy-settings-back-btn,
    .desktop-settings-modal .personalization-back-btn,
    .desktop-settings-modal .xams-back-btn,
    .desktop-settings-modal #activate-code-close-btn {
        display: none !important;
    }

    .desktop-settings-modal .account-settings-title,
    .desktop-settings-modal .privacy-settings-title,
    .desktop-settings-modal .personalization-title,
    .desktop-settings-modal .xams-title,
    .desktop-settings-modal .activate-code-title {
        display: none !important;
    }

    .desktop-settings-modal .privacy-settings-header,
    .desktop-settings-modal .activate-code-header {
        display: none !important;
    }

    .desktop-settings-modal .account-settings-header {
        position: absolute;
        top: 14px;
        right: var(--desktop-settings-barrier-inline-padding);
        left: auto;
        z-index: 10;
        width: auto;
        padding: 14px 0 0;
        min-height: 0;
        justify-content: flex-end;
        border: none;
        background: transparent;
    }

    .desktop-settings-modal .personalization-header {
        padding: 14px 20px 0;
        min-height: 0;
        justify-content: flex-end;
        border: none;
        background: transparent;
    }

    .desktop-settings-modal .xams-header {
        padding: 14px 20px 8px;
        border-bottom: none;
        background: transparent;
        justify-content: flex-end;
    }

    /* Аккаунт: перебиваем theme-style-glass (transparent !important + ::before обои) */
    body.theme-style-glass #account-settings-modal.desktop-settings-modal .account-settings-screen,
    #account-settings-modal.desktop-settings-modal .account-settings-screen {
        background: #16171d !important;
        border: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #account-settings-modal.desktop-settings-modal .account-settings-screen::before {
        display: none !important;
    }

    .desktop-settings-modal .account-settings-profile-section {
        padding: 28px 20px 18px;
        gap: 14px;
    }

    .desktop-settings-modal .account-settings-avatar {
        width: 156px;
        height: 156px;
        font-size: 52px;
        border: none;
        background: #d0d0d0;
        color: #222;
    }

    .desktop-settings-modal .account-settings-fields {
        max-width: 320px;
        width: 100%;
        margin: 8px auto 0;
        padding: 0;
        gap: 8px;
        align-items: center;
    }

    .desktop-settings-modal .account-settings-field-group {
        max-width: 320px;
        background: rgba(0, 0, 0, 0.32);
        border: none;
        border-radius: 18px;
        padding: 8px 16px;
        gap: 0;
    }

    .desktop-settings-modal .account-settings-field-group:hover {
        background: rgba(0, 0, 0, 0.38);
    }

    .desktop-settings-modal .account-settings-field {
        flex-direction: row;
        align-items: center;
        padding: 6px 4px;
        gap: 10px;
        max-width: none;
    }

    .desktop-settings-modal .account-settings-field-group--email {
        max-width: 320px;
        border-radius: 14px;
    }

    .desktop-settings-modal .account-settings-field-label {
        flex: 0 0 72px;
        font-size: 11px;
        line-height: 1.1;
    }

    .desktop-settings-modal .account-settings-input {
        font-size: 15px;
        line-height: 1.15;
    }

    .desktop-settings-modal .account-settings-edit-btn svg {
        width: 15px;
        height: 15px;
    }

    .desktop-settings-modal .account-settings-actions {
        max-width: none;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 18px 0 34px;
    }

    .desktop-settings-modal .account-settings-action-pill {
        font-size: 15px;
        min-height: 46px;
        padding: 11px 20px;
    }

    .desktop-settings-modal .privacy-settings-content {
        width: 100%;
        max-width: 320px;
        margin: 32px auto 0;
        padding: 0;
        gap: 8px;
        align-items: center;
        align-self: center;
    }

    .desktop-settings-modal .privacy-status-row {
        width: 100%;
        max-width: 320px;
        border: none;
        border-radius: 18px;
        background: rgba(0, 0, 0, 0.32);
        color: #ffffff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        gap: 10px;
        min-height: 44px;
        box-sizing: border-box;
        cursor: pointer;
        transition: background 0.15s ease, opacity 0.15s ease;
        text-align: left;
    }

    .desktop-settings-modal .privacy-status-row:hover {
        background: rgba(0, 0, 0, 0.38);
    }

    .desktop-settings-modal .privacy-status-row:active {
        opacity: 0.88;
    }

    .desktop-settings-modal .privacy-status-row-label {
        flex: 0 0 96px;
        color: rgba(255, 255, 255, 0.45);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        line-height: 1.1;
    }

    .desktop-settings-modal .privacy-status-row-value {
        flex: 1;
        min-width: 0;
        text-align: right;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.15;
        color: rgba(255, 255, 255, 0.55);
    }

    .desktop-settings-modal .privacy-status-row-value.is-open {
        color: #5fd653;
    }

    .desktop-settings-modal .privacy-settings-section {
        max-width: 320px;
        gap: 8px;
    }

    .desktop-settings-modal .privacy-section-heading {
        margin-top: 14px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.38);
    }

    .desktop-settings-modal .privacy-section-hint {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.42);
        opacity: 1;
        margin-top: -4px;
    }

    .desktop-settings-modal .privacy-sessions-card {
        background: rgba(0, 0, 0, 0.32);
        border-radius: 18px;
        padding: 4px 16px;
    }

    .desktop-settings-modal .privacy-sessions-list {
        gap: 0;
    }

    .desktop-settings-modal .privacy-session-item {
        border: none;
        border-radius: 0;
        background: transparent;
        padding: 8px 0;
    }

    .desktop-settings-modal .privacy-session-item + .privacy-session-item {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .desktop-settings-modal .privacy-session-title {
        font-size: 14px;
        font-weight: 500;
    }

    .desktop-settings-modal .privacy-session-subtitle {
        font-size: 12px;
        opacity: 0.55;
    }

    .desktop-settings-modal .privacy-session-terminate-btn {
        border: none;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.88);
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 600;
    }

    .desktop-settings-modal .privacy-session-current-badge {
        font-size: 12px;
    }

    .desktop-settings-modal .privacy-session-terminate-btn:not(:disabled):hover {
        background: rgba(255, 255, 255, 0.14);
    }

    .desktop-settings-modal .privacy-more-btn,
    .desktop-settings-modal .privacy-terminate-all-btn {
        width: 100%;
        border: none;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.32);
        color: rgba(255, 255, 255, 0.88);
        padding: 9px 16px;
        font-size: 13px;
        font-weight: 600;
        min-height: 38px;
    }

    .desktop-settings-modal .privacy-more-btn:hover,
    .desktop-settings-modal .privacy-terminate-all-btn:hover {
        background: rgba(0, 0, 0, 0.4);
    }

    .desktop-settings-modal .privacy-info-text {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.38);
        opacity: 1;
        line-height: 1.35;
        text-align: center;
    }

    .desktop-settings-modal .privacy-sessions-empty {
        padding: 10px 0;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.45);
        opacity: 1;
    }
}

.xams-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--gray-border);
    position: sticky;
    top: 0;
    background: #000000;
    z-index: 10;
}

.xams-back-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.xams-back-btn:hover {
    opacity: 0.7;
}

@media (hover: none) and (pointer: coarse) {
    #sidebar-mobile-settings-back-btn,
    .settings-back-btn,
    .account-settings-back-btn,
    .privacy-settings-back-btn,
    .personalization-back-btn,
    .xams-back-btn {
        transition: transform 120ms ease, filter 120ms ease, background-color 120ms ease;
        will-change: transform;
        -webkit-tap-highlight-color: transparent;
    }

    #sidebar-mobile-settings-back-btn:active,
    .settings-back-btn:active,
    .account-settings-back-btn:active,
    .privacy-settings-back-btn:active,
    .personalization-back-btn:active,
    .xams-back-btn:active {
        transform: scale(0.9);
        filter: brightness(0.78);
    }
}

.xams-transactions-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.xams-transactions-btn:hover {
    opacity: 0.7;
}

.xams-title {
    flex: 1;
    text-align: center;
    color: var(--text-white);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

#activate-code-modal .activate-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#activate-code-modal .activate-code-title {
    margin: 0;
    color: var(--text-white);
    font-size: 20px;
    font-weight: 600;
    flex: 1;
    text-align: center;
}

#activate-code-modal .activate-code-back-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#activate-code-modal .activate-code-header-spacer {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.xams-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.xams-balance {
    text-align: center;
    padding: 20px;
    background: var(--bg-gray-1);
    border-radius: 12px;
    border: 1px solid var(--gray-border);
}

.xams-balance-label {
    color: var(--gray-text);
    font-size: 14px;
    margin-bottom: 8px;
}

.xams-balance-value {
    color: var(--text-white);
    font-size: 32px;
    font-weight: 600;
}

.xams-purchase-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xams-purchase-label {
    color: var(--text-white);
    font-size: 14px;
    margin-bottom: 8px;
}

.xams-purchase-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xams-purchase-option {
    background: transparent;
    border: 2px solid var(--white-border);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-white);
}

.xams-purchase-option:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.xams-purchase-option-featured {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6) !important;
}

.xams-purchase-option-featured:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.8) !important;
}

.xams-option-amount {
    font-size: 16px;
    font-weight: 500;
}

.xams-option-price {
    font-size: 16px;
    font-weight: 500;
}

/* Вкладки XamS */
.xams-tabs {
    display: flex;
    gap: 10px;
    margin: 20px 0;
    border-bottom: 1px solid var(--gray-border);
}

.xams-tab {
    background: transparent;
    border: none;
    color: var(--gray-text);
    font-size: 16px;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.xams-tab:hover {
    color: var(--text-white);
}

.xams-tab.active {
    color: var(--text-white);
    border-bottom-color: var(--white-border);
}

.xams-tab-content {
    display: none;
}

.xams-tab-content.active {
    display: block;
}

.xams-terms {
    color: var(--gray-text);
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
    margin-top: 20px;
}

.xams-terms-link {
    color: #4A9EFF;
    text-decoration: none;
}

.xams-terms-link:hover {
    text-decoration: underline;
}

.xams-transactions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xams-transactions-separator {
    height: 1px;
    background: var(--gray-border);
    margin: 8px 0;
}

.xams-transactions-title {
    text-align: center;
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
}

.xams-transactions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xams-transaction-item {
    background: transparent;
    border: 2px solid var(--white-border);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-white);
    font-size: 14px;
}

.xams-transaction-amount {
    font-weight: 500;
}

.xams-transaction-amount.positive {
    color: #4CAF50;
}

.xams-transaction-amount.negative {
    color: #F44336;
}

/* Модальное окно транзакций */
.xams-transactions-screen {
    background: #000000;
    border: 2px solid var(--white-border);
    border-radius: 20px;
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

.xams-transactions-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--gray-border);
    position: sticky;
    top: 0;
    background: #000000;
    z-index: 10;
}

.xams-transactions-content {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Модальное окно подтверждения покупки */
.xams-purchase-screen {
    background: #000000;
    border: 2px solid var(--white-border);
    border-radius: 20px;
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

.xams-purchase-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--gray-border);
    position: sticky;
    top: 0;
    background: #000000;
    z-index: 10;
}

.xams-purchase-back-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.xams-purchase-back-btn:hover {
    opacity: 0.7;
}

.xams-purchase-title {
    flex: 1;
    text-align: center;
    color: var(--text-white);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.xams-purchase-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.xams-purchase-amount {
    text-align: center;
    color: var(--text-white);
    font-size: 18px;
    font-weight: 500;
    padding: 16px;
    background: var(--bg-gray-1);
    border-radius: 12px;
    border: 1px solid var(--gray-border);
}

.xams-purchase-description {
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.xams-purchase-description strong {
    color: var(--text-white);
    font-weight: 600;
}

.xams-purchase-agreement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-white);
    font-size: 14px;
    line-height: 1.5;
}

.xams-purchase-agreement input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-top: 2px;
    flex-shrink: 0;
}

.xams-purchase-agreement label {
    cursor: pointer;
    flex: 1;
}

.xams-purchase-pay-btn {
    background: var(--white-border);
    border: none;
    border-radius: 12px;
    padding: 16px 20px;
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.xams-purchase-pay-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.xams-purchase-pay-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Магазин предметов */
.xams-shop-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xams-shop-label {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    text-align: center;
}

/* Кнопка премиум статуса */
.xams-premium-btn {
    background: transparent;
    border: 2px solid var(--white-border);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    width: auto;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-white);
}

.xams-premium-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.xams-premium-icon {
    font-size: 24px;
    flex-shrink: 0;
    margin-right: 12px;
}

.xams-premium-info {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.xams-premium-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-white);
}

.xams-premium-description {
    font-size: 14px;
    color: var(--gray-text);
}

.xams-premium-price {
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
    color: var(--text-white);
}

.xams-premium-expires {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}

/* Секция подарков */
.xams-gifts-section {
    margin-bottom: 20px;
}

.xams-gifts-label {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
    text-align: center;
}

.xams-gifts-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.xams-gift-card {
    background: transparent;
    border: 2px solid var(--white-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.xams-gift-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.xams-gift-icon {
    font-size: 48px;
}

.xams-gift-name {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
}

.xams-gift-price {
    color: var(--text-white);
    font-size: 18px;
    font-weight: 600;
}

.xams-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xams-item-card {
    background: transparent;
    border: 2px solid var(--white-border);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.xams-item-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

.xams-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.xams-item-name {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
}

.xams-item-description {
    color: var(--gray-text);
    font-size: 14px;
}

.xams-item-price-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.xams-item-price {
    color: var(--text-white);
    font-size: 18px;
    font-weight: 600;
}

.xams-item-buy-btn {
    background: var(--white-border);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.xams-item-buy-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.xams-item-buy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xams-item-owned {
    color: var(--gray-text);
    font-size: 12px;
    font-style: italic;
}

/* Модальные окна подарков */
.xams-gift-screen {
    background: #000000;
    border: 2px solid var(--white-border);
    border-radius: 20px;
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.xams-gift-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--gray-border);
    position: sticky;
    top: 0;
    background: #000000;
    z-index: 10;
}

.xams-gift-back-btn {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.xams-gift-back-btn:hover {
    opacity: 0.7;
}

.xams-gift-title {
    flex: 1;
    text-align: center;
    color: var(--text-white);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.xams-gift-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.xams-gift-footer {
    flex-shrink: 0;
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #000000;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.xams-gift-footer .xams-gift-purchase-btn {
    width: 100%;
    margin: 0;
}

.xams-gift-display {
    text-align: center;
    padding: 30px 20px;
    background: var(--bg-gray-1);
    border-radius: 12px;
    border: 1px solid var(--gray-border);
}

.xams-gift-display-icon {
    font-size: 64px;
    margin-bottom: 12px;
}

.xams-gift-display-name {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 600;
    font-style: italic;
    margin-bottom: 8px;
}

.xams-gift-display-price {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 600;
}

.xams-gift-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xams-gift-option-btn {
    background: transparent;
    border: 2px solid var(--white-border);
    border-radius: 12px;
    padding: 16px 20px;
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.xams-gift-option-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.xams-gift-message-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xams-gift-message-label {
    color: var(--text-white);
    font-size: 14px;
    font-weight: 500;
}

.xams-gift-message-input {
    background: var(--bg-gray-1);
    border: 2px solid var(--white-border);
    border-radius: 8px;
    padding: 12px;
    color: var(--text-white);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
}

.xams-gift-message-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.8);
}

.xams-gift-chat-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xams-gift-chat-list {
    max-height: min(45vh, 360px);
    min-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.xams-gift-chat-item {
    background: transparent;
    border: 2px solid var(--white-border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--text-white);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.xams-gift-chat-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.xams-gift-chat-item.selected {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
}

.xams-gift-anonymous-section {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-white);
    font-size: 14px;
}

.xams-gift-anonymous-section input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.xams-gift-purchase-btn {
    background: var(--white-border);
    border: none;
    border-radius: 12px;
    padding: 16px 20px;
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.xams-gift-purchase-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.xams-gift-purchase-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .xams-screen,
    .xams-purchase-screen,
    .xams-gift-screen {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }
    .xams-item-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .xams-item-price-section {
        width: 100%;
        justify-content: space-between;
    }
    .xams-gifts-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Модальное окно закреплённых сообщений */
#pinned-messages-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-black);
    z-index: 10000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

@media (min-width: 769px) {
    #pinned-messages-modal {
        justify-content: center;
    }
}

#pinned-messages-modal.hidden {
    display: none;
}

@media (min-width: 769px) {
    #pinned-messages-modal {
        background: rgba(0, 0, 0, 0.7);
    }
    #pinned-messages-modal .pinned-messages-modal-content {
        background: var(--bg-dark);
        border: 2px solid var(--white-border);
        border-radius: 20px;
        max-width: 600px;
        width: 90%;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }
}

.pinned-messages-modal-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
}

@media (min-width: 769px) {
    .pinned-messages-modal-content {
        height: auto;
    }
}

.pinned-messages-modal-header {
    padding: 10px 14px;
    background: var(--bg-gray-1);
    display: flex;
    align-items: center;
    gap: 12px;
    /* border: 1px solid var(--white-border); */
    border-radius: 14px;
    margin-top: 35px;
    margin-left: -2px;
    margin-right: -2px;
    max-width: calc(100% + 4px);
    width: calc(100% + 4px);
}

@media (min-width: 769px) {
    .pinned-messages-modal-header {
        padding: 12px 16px;
        border-radius: 18px 18px 0 0;
        margin: 0;
        max-width: 100%;
        border: none;
        border-bottom: 1px solid var(--gray-border);
    }
}

.pinned-messages-modal-back {
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s;
    padding: 0;
}

.pinned-messages-modal-back:hover {
    background: var(--bg-gray-2);
}

.pinned-messages-modal-back svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .pinned-messages-modal-back {
        width: 36px;
        height: 36px;
    }
    .pinned-messages-modal-back svg {
        width: 20px;
        height: 20px;
    }
}

.pinned-messages-modal-title {
    color: var(--text-white);
    font-size: 18px;
    font-weight: 600;
    flex: 1;
}

.pinned-messages-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

@media (min-width: 769px) {
    .pinned-messages-modal-body {
        padding: 20px;
    }
}

.pinned-messages-modal-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pinned-messages-empty {
    text-align: center;
    color: var(--gray-text);
    font-size: 16px;
    padding: 40px 20px;
}

.pinned-message-modal-item {
    padding: 12px 16px;
    padding-right: 48px;
    background: var(--bg-dark);
    border-left: 3px solid var(--white-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    display: flex;
    align-items: center;
}

.pinned-message-modal-item:hover {
    background: var(--bg-gray-2);
}

.pinned-message-modal-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.pinned-message-modal-text {
    color: var(--text-white);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.pinned-message-modal-time {
    color: var(--text-white);
    font-size: 14px;
}

.pinned-message-modal-unpin-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.pinned-message-modal-unpin-btn:hover {
    opacity: 1;
}

.pinned-message-modal-item:hover .pinned-message-modal-unpin-btn {
    opacity: 0.8;
}
/* Модальное окно поиска */
#search-modal {
    z-index: 10000;
    background: linear-gradient(180deg, rgba(15, 35, 45, 0.98) 0%, rgba(25, 45, 55, 0.98) 50%, rgba(30, 50, 60, 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.search-modal-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Строка поиска в одном контейнере с кнопкой закрытия */
.search-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(60, 60, 60, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 12px 16px;
    height: 56px;
}

.search-close-btn {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.search-close-btn:hover {
    color: var(--text-white);
    transform: scale(1.1);
}

.search-close-btn:active {
    transform: scale(0.95);
}

.search-close-btn svg {
    width: 24px;
    height: 24px;
}

.search-input-container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    height: 100%;
}

.search-modal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-white);
    font-size: 16px;
    font-weight: 600;
    padding: 0;
    height: 100%;
}

.search-modal-input::placeholder {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

.search-icon {
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
    margin-left: 12px;
    width: 20px;
    height: 20px;
}

/* Секция недавних поисков */
.search-recent-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search-recent-title {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 600;
    padding: 0 4px;
}

.search-recent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 12px;
}

.search-recent-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.search-recent-item:active {
    transform: scale(0.98);
}

/* Контейнер результатов */
.search-results-container {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.search-result-item:active {
    transform: translateY(0) scale(0.98);
}

.search-result-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
    border: none;
}

.search-result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-username {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-item.empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    border: none;
    cursor: default;
}

.search-result-item.empty:hover {
    transform: none;
    background: transparent;
}

/* Оптимизация для ПК */
@media (min-width: 769px) {
    .search-modal-container {
        max-width: 700px;
        padding: 30px;
        gap: 24px;
    }
    .search-modal-header {
        padding: 16px 20px;
        height: 64px;
        border-radius: 24px;
    }
    .search-back-btn {
        width: 36px;
        height: 36px;
    }
    .search-back-btn svg {
        width: 28px;
        height: 28px;
    }
    .search-modal-input {
        font-size: 18px;
    }
    .search-icon {
        width: 24px;
        height: 24px;
    }
    .search-results-container {
        padding: 20px;
        gap: 16px;
        border-radius: 24px;
    }
    .search-result-item {
        padding: 16px 20px;
        border-radius: 20px;
    }
    .search-result-avatar {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
    .search-result-name {
        font-size: 18px;
    }
    .search-result-username {
        font-size: 15px;
    }
}

/* Мобильная оптимизация */
@media (max-width: 768px) {
    .search-modal-container {
        padding: 16px;
        gap: 16px;
    }
    .search-modal-header {
        padding: 10px 14px;
        height: 52px;
        border-radius: 18px;
    }
    .search-back-btn {
        width: 28px;
        height: 28px;
    }
    .search-back-btn svg {
        width: 20px;
        height: 20px;
    }
    .search-modal-input {
        font-size: 15px;
    }
    .search-icon {
        width: 18px;
        height: 18px;
    }
    .search-results-container {
        padding: 12px;
        gap: 10px;
        border-radius: 18px;
    }
    .search-result-item {
        padding: 10px 14px;
        border-radius: 14px;
    }
    .search-result-avatar {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    .search-result-name {
        font-size: 15px;
    }
    .search-result-username {
        font-size: 13px;
    }
}

/* ==================== ПЕРЕДИЗАЙН ДЛЯ ПК (ТОЛЬКО ДЕСКТОП) ==================== */
/* Анимация медленно переливающегося градиента для фона */
@keyframes desktopBgGradient {
    0%, 100% { background-position: 0% 0%, 100% 0%, 0% 100%, 50% 50%; }
    25% { background-position: 100% 30%, 0% 80%, 60% 20%, 10% 90%; }
    50% { background-position: 50% 100%, 80% 50%, 20% 60%, 90% 10%; }
    75% { background-position: 20% 50%, 100% 20%, 80% 80%, 50% 50%; }
}

@media (min-width: 769px) {
    /* ПК: Tab не переключает фокус по интерфейсу */
    #main-screen,
    #main-screen * {
        outline: none !important;
    }

    #main-screen *:focus,
    #main-screen *:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Экран входа/регистрации — тот же фон, что в мессенджере */
    #auth-screen {
        background: transparent !important;
        position: relative;
    }
    #auth-screen::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: var(--theme-bg-base);
    }
    #auth-screen::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background-color: transparent;
        background-image: var(--theme-bg-pattern-gradient);
        background-repeat: no-repeat;
        background-size: 260% 260%;
        opacity: var(--theme-bg-pattern-opacity);
        animation: xamPatternGradientDrift 48s ease-in-out infinite;
        -webkit-mask-image: var(--theme-bg-pattern);
        mask-image: var(--theme-bg-pattern);
        -webkit-mask-repeat: repeat;
        mask-repeat: repeat;
        -webkit-mask-size: var(--theme-bg-pattern-size);
        mask-size: var(--theme-bg-pattern-size);
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
        pointer-events: none;
    }
    #auth-screen > * {
        position: relative;
        z-index: 2;
    }

    /* ===== ПК вход: центрированная карточка на обоях-паттерне ===== */
    #auth-screen {
        --auth-pc-purple: #8b7cf6;
        --auth-pc-purple-soft: #5e5a7a;
        --auth-pc-card: #1c1c1e;
        --auth-pc-muted: rgba(255, 255, 255, 0.55);
        --auth-pc-field: #7669C6;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: 24px 20px !important;
        box-sizing: border-box !important;
        overflow: auto !important;
    }

    #auth-screen.active {
        display: flex !important;
    }

    #auth-screen .auth-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        flex: 0 0 auto !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: auto !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }

    #auth-screen .auth-pc-left {
        flex: none !important;
        width: 100% !important;
        max-width: 380px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        align-items: center !important;
        justify-content: center !important;
        isolation: auto !important;
    }

    #auth-screen .auth-pc-left::before,
    #auth-screen .auth-pc-left::after {
        display: none !important;
        content: none !important;
    }

    #auth-screen .auth-pc-method-tabs,
    #auth-screen .auth-pc-welcome,
    #auth-screen .auth-pc-wave-clip-defs {
        display: none !important;
    }

    #auth-screen .auth-container {
        position: relative !important;
        flex: none !important;
        align-self: center !important;
        width: 380px !important;
        max-width: min(380px, calc(100vw - 40px)) !important;
        min-width: 0 !important;
        min-height: 560px !important;
        margin: 0 auto !important;
        padding: 44px 36px 32px !important;
        display: block !important;
        background: var(--auth-pc-card) !important;
        border: none !important;
        border-radius: 36px !important;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        animation: authPcCardAppear 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes authPcCardAppear {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #auth-screen .auth-container {
            animation: none !important;
        }
    }

    #auth-screen .auth-container .logo,
    #auth-screen .auth-container .logo-subtitle,
    #auth-screen .auth-container .auth-tabs {
        display: none !important;
    }

    #auth-screen .auth-password-view,
    #auth-screen .auth-qr-view,
    #auth-screen .auth-password-view:not(.active),
    #auth-screen .auth-qr-view:not(.active) {
        position: absolute !important;
        top: 44px !important;
        left: 36px !important;
        right: 36px !important;
        bottom: 32px !important;
        width: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, 0, 0) !important;
        transition: none !important;
        box-sizing: border-box !important;
        z-index: 1;
    }

    #auth-screen .auth-password-view.active,
    #auth-screen .auth-qr-view.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
        z-index: 2;
    }

    /* Слайд + fade в прозрачность */
    #auth-screen .auth-password-view.auth-pc-view--switching,
    #auth-screen .auth-qr-view.auth-pc-view--switching {
        visibility: visible !important;
        pointer-events: none !important;
        transition:
            transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
            opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    #auth-screen .auth-password-view.auth-pc-view--from-right,
    #auth-screen .auth-qr-view.auth-pc-view--from-right {
        transform: translate3d(100%, 0, 0) !important;
        opacity: 0 !important;
        z-index: 2;
    }

    #auth-screen .auth-password-view.auth-pc-view--from-left,
    #auth-screen .auth-qr-view.auth-pc-view--from-left {
        transform: translate3d(-100%, 0, 0) !important;
        opacity: 0 !important;
        z-index: 2;
    }

    #auth-screen .auth-password-view.auth-pc-view--to-left,
    #auth-screen .auth-qr-view.auth-pc-view--to-left {
        transform: translate3d(-100%, 0, 0) !important;
        opacity: 0 !important;
        z-index: 1;
    }

    #auth-screen .auth-password-view.auth-pc-view--to-right,
    #auth-screen .auth-qr-view.auth-pc-view--to-right {
        transform: translate3d(100%, 0, 0) !important;
        opacity: 0 !important;
        z-index: 1;
    }

    #auth-screen .auth-password-view.auth-pc-view--center,
    #auth-screen .auth-qr-view.auth-pc-view--center {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
        z-index: 2;
    }

    @media (prefers-reduced-motion: reduce) {
        #auth-screen .auth-password-view,
        #auth-screen .auth-qr-view,
        #auth-screen .auth-password-view.auth-pc-view--switching,
        #auth-screen .auth-qr-view.auth-pc-view--switching {
            transition: none !important;
            transform: none !important;
        }
    }

    /* Заголовок по буквам: из большего → нормальный */
    #auth-screen .auth-pc-title-char {
        display: inline-block;
        opacity: 0;
        transform: scale(1.55) translateY(0);
        will-change: transform, opacity;
        transform-origin: 50% 60%;
    }

    #auth-screen .auth-pc-title--play .auth-pc-title-char {
        animation: authPcCharIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: calc(var(--i, 0) * 22ms);
    }

    @keyframes authPcCharIn {
        from {
            opacity: 0;
            transform: scale(1.55) translateY(0);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #auth-screen .auth-pc-title-char {
            opacity: 1 !important;
            transform: none !important;
            animation: none !important;
        }
    }

    #auth-screen .auth-pc-card-head {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: -6px 0 28px;
        gap: 0;
        flex-shrink: 0;
    }

    #auth-screen .auth-pc-logo {
        width: 108px;
        height: 108px;
        border-radius: 50%;
        background: var(--auth-pc-purple);
        display: grid;
        place-items: center;
        margin: 0 0 20px;
        flex-shrink: 0;
        overflow: hidden;
    }

    #auth-screen .auth-pc-logo-mark {
        width: 56px;
        height: 49px;
        display: block;
    }

    #auth-screen .auth-pc-card-title,
    #auth-screen #auth-pc-panel-title {
        display: block !important;
        margin: 0 0 10px !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        color: #ffffff !important;
        text-align: center !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }

    #auth-screen .auth-pc-card-sub {
        margin: 0;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.4;
        color: var(--auth-pc-muted);
        text-align: center;
        max-width: none;
        white-space: normal;
    }

    #auth-screen #login-form {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        flex: 0 0 auto;
    }

    #auth-screen #login-form .form-group {
        width: 100% !important;
        max-width: none !important;
        margin-bottom: 16px !important;
    }

    #auth-screen .auth-pc-outlined-field {
        position: relative;
        margin-top: 10px !important;
        margin-bottom: 18px !important;
    }

    #auth-screen .auth-pc-outlined-field .auth-pc-field-label {
        display: block !important;
        position: absolute;
        left: 16px;
        top: -9px;
        transform: translateY(-50%);
        padding: 3px 8px;
        margin: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        color: var(--auth-pc-field);
        background: var(--auth-pc-card);
        border-radius: 8px;
        pointer-events: none;
        z-index: 2;
        white-space: nowrap;
        user-select: none;
        -webkit-user-select: none;
    }

    #auth-screen #login-form input[type="text"],
    #auth-screen #login-form input[type="email"],
    #auth-screen #login-form input[type="password"],
    #auth-screen .auth-pc-outlined-field input {
        width: 100% !important;
        height: 54px !important;
        padding: 0 20px !important;
        background: transparent !important;
        border: 1.5px solid var(--auth-pc-field) !important;
        border-radius: 16px !important;
        font-size: 15px !important;
        text-align: left !important;
        color: #ffffff !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        outline: none !important;
    }

    #auth-screen #login-form input:focus,
    #auth-screen .auth-pc-outlined-field input:focus {
        outline: none !important;
        border-color: var(--auth-pc-field) !important;
        box-shadow: none !important;
    }

    #auth-screen #login-form input::placeholder {
        color: transparent !important;
    }

    #auth-screen #login-form .btn-primary,
    #auth-screen .auth-password-view .btn-primary {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 52px !important;
        margin-top: 4px !important;
        padding: 0 20px !important;
        background: #7E6CD2 !important;
        border-radius: 16px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        align-self: stretch !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
        cursor: pointer !important;
    }

    #auth-screen #login-form .btn-primary:hover:not(:disabled),
    #auth-screen .auth-password-view .btn-primary:hover:not(:disabled) {
        background: #8f7ddd !important;
        color: #ffffff !important;
    }

    #auth-screen #login-form .btn-primary:disabled,
    #auth-screen .auth-password-view .btn-primary:disabled,
    #auth-screen #login-form .btn-primary.is-disabled,
    #auth-screen .auth-password-view .btn-primary.is-disabled {
        background: #403A5B !important;
        color: rgba(255, 255, 255, 0.55) !important;
        cursor: not-allowed !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }

    #auth-screen .auth-pc-switch-link {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin: auto auto 0;
        padding: 8px 4px;
        border: none;
        background: none;
        color: var(--auth-pc-purple);
        font-size: 15px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        text-decoration: none;
        line-height: 1.2;
        transition: color 0.2s ease, opacity 0.2s ease;
        flex-shrink: 0;
    }

    #auth-screen .auth-pc-switch-link:hover {
        color: #a874ff;
        text-decoration: none;
    }

    #auth-screen .auth-pc-switch-link span {
        font-size: 18px;
        line-height: 1;
        transform: translateY(-0.5px);
    }

    #auth-screen #login-error {
        margin-top: 12px;
        text-align: center;
        width: 100%;
    }

    #auth-screen.auth-pc-register-tab .auth-pc-card-head {
        display: none !important;
    }

    #auth-screen.auth-pc-register-tab .auth-pc-switch-link {
        display: none !important;
    }

    #auth-screen .auth-qr-view-inner {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    #auth-screen .auth-pc-qr-title {
        display: block !important;
        margin: 4px 0 24px !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        color: #ffffff !important;
        text-align: center !important;
        flex-shrink: 0;
    }

    #auth-screen .auth-pc-qr-frame {
        width: min(220px, 70%);
        aspect-ratio: 1;
        margin: 0 auto 28px;
        border-radius: 16px;
        background: transparent;
        border: none;
        outline: none;
        box-shadow: none;
        display: grid;
        place-items: center;
        overflow: visible;
        position: relative;
        flex-shrink: 0;
    }

    #auth-screen .auth-qr-view-inner .qr-placeholder-box,
    #auth-screen .auth-qr-view-inner .qr-code {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #auth-screen .auth-qr-view-inner .qr-placeholder-box {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
    }

    #auth-screen .auth-qr-view-inner .qr-placeholder-text {
        color: rgba(255, 255, 255, 0.28) !important;
        font-size: 42px !important;
        font-weight: 700;
    }

    #auth-screen .auth-qr-view-inner .qr-code {
        position: absolute;
        inset: 0;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 12px !important;
        overflow: hidden;
        box-sizing: border-box !important;
    }

    #auth-screen .auth-qr-view-inner .qr-code canvas {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0;
        display: block;
        background: transparent !important;
    }

    #auth-screen .auth-pc-qr-steps {
        list-style: none;
        margin: 0 0 8px;
        padding: 0;
        width: 100%;
        max-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 22px;
        flex-shrink: 0;
    }

    #auth-screen .auth-pc-qr-steps li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    #auth-screen .auth-pc-qr-step-num {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--auth-pc-purple);
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        display: grid;
        place-items: center;
        line-height: 1;
        margin-top: 1px;
    }

    #auth-screen .auth-pc-qr-step-text {
        color: rgba(255, 255, 255, 0.92);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.4;
    }

    #auth-screen .auth-pc-qr-menu {
        font-size: 15px;
        letter-spacing: 0;
    }

    #auth-screen .auth-qr-view .auth-pc-switch-link {
        margin-top: auto;
    }

    /* ===== ПК: ожидание подтверждения входа ===== */
    #auth-screen .auth-pc-pending-view {
        position: absolute !important;
        top: 44px !important;
        left: 36px !important;
        right: 36px !important;
        bottom: 32px !important;
        display: none !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(12px) scale(0.985);
        transition:
            opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0.34s;
        z-index: 3;
        box-sizing: border-box;
    }

    #auth-screen.auth-pc-pending .auth-pc-pending-view {
        display: flex !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    #auth-screen.auth-pc-pending .auth-password-view,
    #auth-screen.auth-pc-pending .auth-qr-view {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #auth-screen .auth-pc-pending-title {
        margin: 0 0 14px;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.25;
        color: #ffffff;
    }

    #auth-screen .auth-pc-pending-text {
        margin: 0;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.55);
        max-width: 280px;
    }

    #auth-screen .auth-pc-pending-text--sub {
        margin-top: 6px;
    }

    #auth-screen .auth-pc-pending-text strong {
        color: rgba(255, 255, 255, 0.85);
        font-weight: 700;
    }

    #auth-screen .auth-pc-pending-actions {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        width: 100%;
    }

    #auth-screen .auth-pc-pending-resend {
        margin-top: 0;
        padding: 8px 4px;
        border: none;
        background: none;
        color: rgba(255, 255, 255, 0.45);
        font-size: 14px;
        font-weight: 500;
        font-family: inherit;
        cursor: not-allowed;
        transition: color 0.2s ease;
    }

    #auth-screen .auth-pc-pending-resend:not(:disabled) {
        color: var(--auth-pc-purple);
        cursor: pointer;
    }

    #auth-screen .auth-pc-pending-resend:not(:disabled):hover {
        color: #a874ff;
    }

    #auth-screen .auth-pc-pending-cancel {
        padding: 8px 4px;
        border: none;
        background: none;
        color: rgba(255, 255, 255, 0.4);
        font-size: 14px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        transition: color 0.2s ease;
    }

    #auth-screen .auth-pc-pending-cancel:hover {
        color: rgba(255, 255, 255, 0.75);
    }

    /* Sidebar — прозрачный, фон рисует messenger-container */
    .sidebar {
        background: transparent !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-right: none !important;
        border-radius: 0;
        margin: 0;
        width: min(460px, 34vw);
        min-width: 400px;
        height: 100vh;
        border-radius: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .sidebar::before,
    .sidebar::after {
        display: none !important;
    }
    .sidebar > * {
        position: relative;
        z-index: 2;
    }
    
    /* Скрываем мобильные элементы на ПК */
    .mobile-only {
        display: none !important;
    }

    /* Планшет: шапка чата — три отдельные фиксированные пилюли (как на телефоне) */
    body.layout-tablet .chat-view > .chat-header {
        display: none !important;
    }

    body.layout-tablet #chat-top-overlay .chat-top-overlay-actions-pill,
    body.layout-tablet #chat-top-overlay .chat-top-menu {
        display: none !important;
    }

    body.layout-tablet #chat-top-overlay.mobile-only.tablet-chips-layout[aria-hidden="false"] {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 0 !important;
        overflow: visible !important;
        pointer-events: none !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.layout-tablet #chat-top-overlay.tablet-chips-layout .chat-top-overlay-nick-pill:active {
        transform: translateX(-50%) scale(0.98) !important;
    }

    body.layout-tablet #chat-top-overlay.chat-top-overlay {
        position: fixed !important;
        top: 12px;
        left: var(--tablet-chat-area-left, 350px) !important;
        width: var(--tablet-chat-area-width, calc(100vw - 350px)) !important;
        right: auto !important;
        z-index: 12;
        box-sizing: border-box;
        max-width: none;
        margin: 0;
        padding: 0 8px 0 0;
        background: transparent !important;
        pointer-events: none;
        --tablet-chat-top-btn-size: 52px;
        --tablet-chat-top-nick-min-w: clamp(120px, 24vw, 260px);
    }

    body.layout-tablet #chat-top-overlay[aria-hidden="true"] {
        display: none !important;
    }

    body.layout-tablet #chat-top-overlay[aria-hidden="false"] {
        display: grid !important;
        grid-template-columns: var(--tablet-chat-top-btn-size) minmax(0, 1fr) var(--tablet-chat-top-btn-size);
        align-items: center;
        column-gap: 8px;
        min-height: var(--tablet-chat-top-btn-size);
    }

    body.layout-tablet #chat-top-overlay #chat-back-btn-mobile {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        align-self: center;
        position: static !important;
        margin: 0 !important;
    }

    body.layout-tablet #chat-top-overlay .chat-top-overlay-nick-pill {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        align-self: center;
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: max-content;
        min-width: var(--tablet-chat-top-nick-min-w);
        max-width: calc(100% - 8px);
    }

    body.layout-tablet #chat-top-overlay #chat-top-avatar-btn {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        position: static !important;
        margin: 0 !important;
    }

    body.layout-tablet #chat-top-overlay #chat-back-btn-mobile,
    body.layout-tablet #chat-top-overlay #chat-top-avatar-btn {
        flex: 0 0 var(--tablet-chat-top-btn-size);
        width: var(--tablet-chat-top-btn-size);
        height: var(--tablet-chat-top-btn-size);
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(26, 26, 30, 0.62);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: rgba(255, 255, 255, 0.95);
        cursor: pointer;
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
    }

    body.layout-tablet #chat-top-overlay #chat-back-btn-mobile:active,
    body.layout-tablet #chat-top-overlay #chat-top-avatar-btn:active {
        transform: scale(0.98);
    }

    body.layout-tablet #chat-top-overlay #chat-back-btn-mobile svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
    }

    body.layout-tablet #chat-top-overlay .chat-top-overlay-nick-pill {
        box-sizing: border-box;
        min-height: 46px;
        padding: 4px 22px 5px;
        border-radius: 999px;
        background: rgba(26, 26, 30, 0.62);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        pointer-events: auto;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    body.layout-tablet #chat-top-overlay .chat-top-overlay-nick-pill:active {
        transform: scale(0.98) !important;
    }

    body.layout-tablet.xam-liquid-glass-enabled #chat-top-overlay #chat-back-btn-mobile,
    body.layout-tablet.xam-liquid-glass-enabled #chat-top-overlay .chat-top-overlay-nick-pill,
    body.layout-tablet.xam-liquid-glass-enabled #chat-top-overlay #chat-top-avatar-btn {
        background: rgba(18, 18, 22, 0.82) !important;
        border: none !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
        -webkit-backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
    }

    body.layout-tablet.theme-light.xam-liquid-glass-enabled #chat-top-overlay #chat-back-btn-mobile,
    body.layout-tablet.theme-light.xam-liquid-glass-enabled #chat-top-overlay .chat-top-overlay-nick-pill,
    body.layout-tablet.theme-light.xam-liquid-glass-enabled #chat-top-overlay #chat-top-avatar-btn {
        background: rgba(40, 40, 46, 0.58) !important;
    }

    body.layout-tablet .chat-view #chat-top-overlay #chat-back-btn-mobile,
    body.layout-tablet .chat-view #chat-top-overlay .chat-top-overlay-nick-pill,
    body.layout-tablet .chat-view #chat-top-overlay #chat-top-avatar-btn {
        border: none !important;
        border-color: transparent !important;
    }

    body.layout-tablet.xam-liquid-glass-enabled .chat-view #chat-top-overlay #chat-back-btn-mobile,
    body.layout-tablet.xam-liquid-glass-enabled .chat-view #chat-top-overlay .chat-top-overlay-nick-pill,
    body.layout-tablet.xam-liquid-glass-enabled .chat-view #chat-top-overlay #chat-top-avatar-btn {
        border: none !important;
    }

    body.layout-tablet #chat-top-overlay .chat-top-overlay-nick-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 0;
        max-width: 100%;
        width: auto;
        gap: 1px;
    }

    body.layout-tablet #chat-top-overlay .mobile-top-nick-pill-text {
        color: rgba(255, 255, 255, 0.95);
        font-size: 17px;
        font-weight: 600;
        font-family: 'TikTok Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        letter-spacing: 0.2px;
        white-space: nowrap;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    body.layout-tablet #chat-top-overlay .chat-top-overlay-status {
        display: block;
        width: auto;
        max-width: 100%;
        margin-top: 0;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.1;
        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        color: rgba(255, 255, 255, 0.62);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    body.layout-tablet #chat-top-overlay .chat-top-overlay-status.online {
        color: rgba(134, 239, 172, 0.95);
    }

    body.layout-tablet #chat-top-overlay .chat-top-overlay-status:empty {
        display: none;
    }

    body.layout-tablet #chat-top-overlay .chat-top-overlay-avatar-btn {
        padding: 0 !important;
        overflow: visible !important;
        touch-action: manipulation;
    }

    body.layout-tablet #chat-top-overlay .chat-top-overlay-avatar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.2);
        font-weight: 700;
        color: rgba(255, 255, 255, 0.95);
        font-size: 16px;
        overflow: hidden;
        pointer-events: none;
    }

    body.layout-tablet #chat-top-overlay .chat-top-overlay-avatar > img,
    body.layout-tablet #chat-top-overlay .chat-top-overlay-avatar > video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    body.layout-tablet #chat-top-overlay .chat-top-overlay-ultra-badge {
        position: absolute;
        left: 50%;
        bottom: -1px;
        transform: translate(-50%, 24%);
        z-index: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    body.layout-tablet #chat-top-overlay .chat-top-overlay-ultra-badge[hidden] {
        display: none !important;
    }

    body.layout-tablet #chat-top-overlay .mobile-top-pill-btn,
    body.layout-tablet #chat-top-overlay .chat-top-overlay-nick-pill,
    body.layout-tablet #chat-top-overlay #chat-top-avatar-btn {
        pointer-events: auto !important;
    }

    body.layout-tablet .chat-view > .pinned-messages-bar:not(.hidden) {
        position: fixed !important;
        top: calc(12px + var(--tablet-chat-top-btn-size, 52px) + 8px);
        left: var(--tablet-chat-area-left, 350px) !important;
        right: var(--tablet-chat-area-right-inset, 0px) !important;
        width: fit-content !important;
        max-width: min(520px, calc(var(--tablet-chat-area-width, 500px) - 24px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: auto !important;
        z-index: 11;
        border-radius: 999px;
        border: none !important;
        border-top: none !important;
        background: rgba(10, 10, 12, 0.94) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        transform: none !important;
    }

    body.layout-tablet .chat-view > .chat-auto-translate-bar:not(.hidden) {
        position: fixed !important;
        top: calc(12px + var(--tablet-chat-top-btn-size, 52px) + 8px);
        left: var(--tablet-chat-area-left, 350px) !important;
        right: var(--tablet-chat-area-right-inset, 0px) !important;
        width: fit-content !important;
        max-width: min(520px, calc(var(--tablet-chat-area-width, 500px) - 24px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: auto !important;
        z-index: 11;
        padding: 6px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(10, 10, 12, 0.94) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        transform: none !important;
    }

    body.layout-tablet .chat-view.chat-view--has-pinned > .chat-auto-translate-bar:not(.hidden) {
        top: calc(12px + var(--tablet-chat-top-btn-size, 52px) + 8px + 50px);
    }

    body.layout-tablet .chat-view.chat-view--auto-translate:not(.chat-view--has-pinned) > .messages-container {
        padding-top: calc(12px + var(--tablet-chat-top-btn-size, 52px) + 14px + 38px) !important;
        scroll-padding-top: calc(12px + var(--tablet-chat-top-btn-size, 52px) + 14px + 38px);
    }

    body.layout-tablet .chat-view.chat-view--auto-translate.chat-view--has-pinned > .messages-container {
        padding-top: calc(12px + var(--tablet-chat-top-btn-size, 52px) + 8px + 50px + 38px) !important;
        scroll-padding-top: calc(12px + var(--tablet-chat-top-btn-size, 52px) + 8px + 50px + 38px);
    }

    body.layout-tablet .chat-view > .pinned-messages-bar:not(.hidden):hover,
    body.layout-tablet .chat-view > .pinned-messages-bar:not(.hidden):active,
    body.layout-tablet .chat-view > .pinned-messages-bar:not(.hidden):focus {
        transform: none !important;
    }

    body.layout-tablet.xam-liquid-glass-enabled .chat-view > .pinned-messages-bar:not(.hidden) {
        background: rgba(18, 18, 22, 0.82) !important;
        border: none !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
        -webkit-backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
    }

    body.layout-tablet.xam-liquid-glass-enabled .bot-inline-keyboard-btn {
        background: rgba(18, 18, 22, 0.82) !important;
        border: none !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
        -webkit-backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
    }

    body.layout-tablet.theme-light.xam-liquid-glass-enabled .bot-inline-keyboard-btn {
        background: rgba(40, 40, 46, 0.58) !important;
    }

    body.layout-tablet .chat-view {
        align-items: flex-start !important;
    }

    body.layout-tablet .chat-view > .messages-container {
        padding-top: calc(12px + var(--tablet-chat-top-btn-size, 52px) + 14px) !important;
        scroll-padding-top: calc(12px + var(--tablet-chat-top-btn-size, 52px) + 14px);
        margin-left: 12px !important;
        margin-right: auto !important;
        align-self: flex-start !important;
        max-width: min(680px, calc(100% - 24px)) !important;
        width: calc(100% - 24px) !important;
        box-sizing: border-box;
    }

    body.layout-tablet .chat-view.chat-view--has-pinned > .messages-container {
        padding-top: calc(12px + var(--tablet-chat-top-btn-size, 52px) + 8px + 50px) !important;
        scroll-padding-top: calc(12px + var(--tablet-chat-top-btn-size, 52px) + 8px + 50px);
    }

    body.layout-tablet .chat-view > .message-input-container {
        align-items: flex-start !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.layout-tablet .chat-view > .message-input-container .input-panel {
        width: 100% !important;
        max-width: min(680px, calc(100% - 24px)) !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    /* Показываем десктопные элементы */
    .desktop-only {
        display: block !important;
    }
    
    /* ПК: шапка — меню · поиск · мой аватар */
    .sidebar-header {
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 14px 16px 12px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        position: relative;
        z-index: 12;
        flex: 0 0 auto;
    }

    .sidebar-header > .user-info,
    .sidebar-header > .header-actions {
        display: none !important;
    }

    .sidebar-top-bar {
        display: flex !important;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 0;
        background: transparent;
        border: none;
        position: relative;
    }

    .sidebar-menu-btn {
        position: relative;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: rgba(255, 255, 255, 0.88);
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .sidebar-menu-btn:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .sidebar-menu-btn[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.1);
    }

    .sidebar-menu-btn svg {
        width: 22px;
        height: 22px;
    }

    .sidebar-menu-btn .sidebar-menu-icon,
    .sidebar-menu-btn .sidebar-menu-close-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
        pointer-events: none;
        transition:
            opacity 0.22s ease,
            transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
    }

    .sidebar-menu-btn .sidebar-menu-close-icon {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-90deg) scale(0.7);
    }

    body.desktop-search-mode .sidebar-menu-btn .sidebar-menu-icon {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(90deg) scale(0.7);
    }

    body.desktop-search-mode .sidebar-menu-btn .sidebar-menu-close-icon {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }

    body.desktop-search-mode #sidebar-header-user-btn {
        opacity: 0.34;
        filter: brightness(0.55) saturate(0.85);
        pointer-events: none;
    }

    #sidebar-header-user-btn {
        transition: opacity 0.28s ease, filter 0.28s ease;
    }

    /* ПК: Telegram-подобная панелька у гамбургера */
    .pc-sidebar-flyout {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        z-index: 80;
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
        width: 176px;
        padding: 4px;
        border-radius: 24px;
        background: #212121;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
        border: none;
        opacity: 0;
        transform: translateY(-8px) scale(0.94);
        transform-origin: top left;
        transition:
            opacity 0.18s ease,
            transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0.2s;
        pointer-events: none;
        visibility: hidden;
    }

    .pc-sidebar-flyout.hidden {
        display: flex !important;
        opacity: 0;
        transform: translateY(-8px) scale(0.94);
        pointer-events: none;
        visibility: hidden;
    }

    .pc-sidebar-flyout.is-open {
        display: flex !important;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        visibility: visible;
        transition:
            opacity 0.18s ease,
            transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0s;
    }

    .pc-sidebar-flyout-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 36px;
        padding: 0 10px;
        border: none;
        border-radius: 14px;
        background: transparent;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-align: left;
        cursor: pointer;
        transition: background 0.12s ease;
    }

    .pc-sidebar-flyout-item:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .pc-sidebar-flyout-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        color: rgba(255, 255, 255, 0.72);
    }

    .pc-sidebar-flyout-icon svg {
        width: 17px;
        height: 17px;
    }

    .pc-sidebar-flyout-text {
        flex: 1 1 auto;
        line-height: 1.15;
    }

    /* FAB compose — как на телефоне: тёмная пилюля Flow + карандаш */
    .sidebar-compose-fab-wrap,
    .sidebar-compose-fab-wrap.desktop-only {
        position: absolute !important;
        right: 22px !important;
        bottom: 22px !important;
        z-index: 25 !important;
        width: auto !important;
        height: 56px !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    .sidebar-compose-duo {
        display: inline-flex !important;
        align-items: center !important;
        height: 56px !important;
        padding: 0 0 0 4px !important;
        border-radius: 999px !important;
        background: #171717 !important;
        box-shadow: none !important;
        border: none !important;
        box-sizing: border-box !important;
    }

    .sidebar-compose-duo-flow {
        appearance: none !important;
        width: 48px !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.92) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    .sidebar-compose-duo-flow:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    .sidebar-compose-duo-flow svg {
        width: 22px !important;
        height: 22px !important;
        fill: currentColor !important;
        stroke: none !important;
    }

    .sidebar-compose-fab.desktop-only,
    #fab-new-chat-desktop {
        display: inline-flex !important;
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 2 !important;
        width: 56px !important;
        height: 56px !important;
        border: none !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: #fff !important;
        background: var(--xam-ui-accent, #8774E1) !important;
        box-shadow: none !important;
        filter: none !important;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    .sidebar-compose-fab-wrap .sidebar-compose-fab.desktop-only {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 1;
    }

    .sidebar-compose-fab.desktop-only:hover,
    #fab-new-chat-desktop:hover {
        background: var(--xam-ui-accent-hover, #9585e8) !important;
        transform: scale(1.04);
        box-shadow: none !important;
        filter: none !important;
    }

    .sidebar-compose-fab.desktop-only:active,
    #fab-new-chat-desktop:active {
        transform: scale(0.96);
        box-shadow: none !important;
    }

    .sidebar-compose-fab svg,
    #fab-new-chat-desktop svg {
        width: 24px;
        height: 24px;
    }

    .pc-compose-flyout {
        top: auto;
        bottom: calc(100% + 10px);
        left: auto;
        right: 0;
        width: 196px;
        transform: translateY(8px) scale(0.94);
        transform-origin: bottom right;
    }

    .pc-compose-flyout.hidden {
        transform: translateY(8px) scale(0.94);
    }

    .pc-compose-flyout.is-open {
        transform: translateY(0) scale(1);
    }

    @media (prefers-reduced-motion: reduce) {
        .pc-sidebar-flyout {
            transition: opacity 0.12s ease;
            transform: none;
        }
        .pc-sidebar-flyout.hidden,
        .pc-sidebar-flyout.is-open,
        .pc-compose-flyout.hidden,
        .pc-compose-flyout.is-open {
            transform: none;
        }
    }

    .sidebar-search-input-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        position: relative;
        display: flex !important;
        align-items: center;
        background: #181818 !important;
        border-radius: 999px !important;
        padding: 0 16px !important;
        gap: 10px;
        height: 42px;
        box-sizing: border-box;
        border: none !important;
        box-shadow: none !important;
        overflow: hidden;
        transition: background 0.15s ease;
    }

    .sidebar-search-input-wrapper:hover {
        background: #1c1c1c !important;
    }

    .sidebar-search-input-wrapper:focus-within {
        background: #1c1c1c !important;
        border: none !important;
        box-shadow: none !important;
    }

    .sidebar-search-icon {
        color: #aaaaaa !important;
        flex-shrink: 0;
        width: 18px !important;
        height: 18px !important;
        stroke: currentColor;
        pointer-events: none;
    }

    .sidebar-search-input-wrapper:focus-within .sidebar-search-icon {
        color: #c8c8c8 !important;
    }

    /* Сброс глобальных input[type=text] — иначе внутри пилюли «старое» поле */
    .sidebar-search-input-desktop,
    input.sidebar-search-input-desktop[type="text"] {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        color: #ffffff !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
        font-family: 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
        font-weight: 400 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .sidebar-search-input-desktop:focus,
    input.sidebar-search-input-desktop[type="text"]:focus {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .sidebar-search-input-desktop::placeholder,
    input.sidebar-search-input-desktop[type="text"]::placeholder {
        color: #aaaaaa !important;
        font-weight: 400 !important;
        opacity: 1 !important;
    }

    .sidebar-header-stories {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        margin-left: 2px;
    }

    .sidebar-stories-avatar {
        width: 36px;
        height: 36px;
        padding: 0;
        border: none;
        border-radius: 50%;
        overflow: hidden;
        background: #ffffff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #212121;
        font-size: 14px;
        font-weight: 700;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        position: relative;
        margin-left: 0;
    }

    .sidebar-stories-avatar--peer {
        display: none !important;
    }

    .sidebar-stories-avatar:hover {
        transform: scale(1.05);
        box-shadow: 0 0 0 2px rgba(135, 116, 225, 0.5);
    }

    .sidebar-stories-avatar-inner,
    .sidebar-stories-avatar-inner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 50%;
    }

    .sidebar-stories-avatar-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: inherit;
    }

    /* Режим поиска в sidebar-search-bar на ПК не нужен — поле всегда видно */
    .sidebar-header.search-mode .sidebar-search-bar {
        display: none !important;
    }

    /* ПК: бейдж непрочитанных на кнопке меню — скрыт */
    .pc-unread-badge,
    .pc-unread-badge.show {
        display: none !important;
    }

    /* FAB внутри duo-пилюли — не absolute, иначе тёмная пилюля пропадает */
    .sidebar-compose-fab.desktop-only,
    #fab-new-chat-desktop {
        display: inline-flex !important;
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 2;
        width: 56px;
        height: 56px;
        border: none;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #fff;
        background: var(--xam-ui-accent, #8774E1);
        box-shadow: none !important;
        filter: none !important;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    .sidebar-compose-fab-wrap.desktop-only {
        display: block !important;
        overflow: visible !important;
        width: auto !important;
        height: 56px !important;
    }

    .sidebar-compose-fab-wrap .sidebar-compose-fab.desktop-only {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 1;
    }

    .sidebar-compose-fab.desktop-only:hover {
        background: var(--xam-ui-accent-hover, #9585e8);
        transform: scale(1.05);
        box-shadow: none !important;
        filter: none !important;
    }

    .sidebar-compose-fab.desktop-only:active {
        transform: scale(0.96);
        box-shadow: none !important;
    }

    .sidebar-compose-fab svg {
        width: 24px;
        height: 24px;
    }

    .sidebar-bottom-dock.desktop-only,
    .sidebar-bottom-dock--legacy {
        display: none !important;
    }
    
    /* Список чатов — внутри плавающей панели */
    .chats-section {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin: 0 !important;
        padding: 0;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    .chats-title {
        display: none;
    }
    
    .chats-list {
        flex: 1;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 0 80px;
    }

    /* ПК: плавающая скруглённая панель (не касается краёв) — заметно шире */
    .sidebar.sidebar--chats-drum {
        --chats-drum-panel: #212121;
        --chats-drum-panel-rgb: 33, 33, 33;
        --chats-drum-pill: #181818;
        --sidebar-float-gap: 12px;
        --sidebar-panel-width: min(460px, 34vw);
        z-index: 8;
        overflow: hidden !important;
        background: var(--chats-drum-panel) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
        border-right: none !important;
        border-radius: 32px !important;
        margin: var(--sidebar-float-gap) 10px var(--sidebar-float-gap) var(--sidebar-float-gap) !important;
        width: var(--sidebar-panel-width) !important;
        min-width: 400px;
        max-width: calc(100% - var(--sidebar-float-gap) - 10px);
        height: calc(100% - (var(--sidebar-float-gap) * 2)) !important;
        align-self: stretch;
        box-sizing: border-box;
        flex: 0 0 auto;
        transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
            min-width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
            max-width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Настройки внутри той же floating-панели */
    .pc-sidebar-settings {
        display: none;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        padding: 8px 14px 18px;
        box-sizing: border-box;
        background: transparent;
        color: #fff;
        position: relative;
        overflow: hidden;
    }

    .sidebar.sidebar--settings-open > .sidebar-main-stack > .sidebar-header,
    .sidebar.sidebar--settings-open > .sidebar-main-stack > .chats-section,
    .sidebar.sidebar--settings-open > .sidebar-main-stack > .sidebar-chats-row,
    .sidebar.sidebar--settings-open > .sidebar-main-stack > #search-results,
    .sidebar.sidebar--settings-open > .sidebar-main-stack > .sidebar-compose-fab-wrap,
    .sidebar.sidebar--settings-open > .sidebar-main-stack > .mobile-top-nick-pill-wrap,
    .sidebar.sidebar--settings-open > .sidebar-main-stack > .mobile-chats-top-row,
    .sidebar.sidebar--settings-open > .sidebar-main-stack > .sidebar-bottom-dock,
    .sidebar.sidebar--settings-open > #chat-folders-bar,
    .sidebar.sidebar--settings-open > .chat-folders-bar {
        display: none !important;
    }

    .sidebar.sidebar--settings-open > .sidebar-main-stack > .pc-sidebar-settings {
        display: flex !important;
        animation: xamPcSettingsIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes xamPcSettingsIn {
        from {
            opacity: 0;
            transform: translateX(12px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Папки: схлопывание колонки при входе в настройки */
    body.xam-chat-folders-bar-on .sidebar.sidebar--folders-collapse.sidebar--chats-drum,
    body.xam-chat-folders-bar-on .sidebar.sidebar--settings-open.sidebar--chats-drum {
        --sidebar-panel-width: min(460px, 34vw);
        min-width: 400px;
    }

    body.xam-chat-folders-bar-on .sidebar.sidebar--folders-collapse > #chat-folders-bar,
    body.xam-chat-folders-bar-on .sidebar.sidebar--folders-collapse > .chat-folders-bar:not(.hidden) {
        flex: 0 0 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        opacity: 0;
        padding: 0 !important;
        border-right-width: 0 !important;
        overflow: hidden;
        pointer-events: none;
    }

    body.xam-chat-folders-bar-on .sidebar > #chat-folders-bar,
    body.xam-chat-folders-bar-on .sidebar > .chat-folders-bar {
        transition: flex-basis 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            max-width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.28s ease,
            padding 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            border-right-width 0.36s ease;
    }

    .pc-sidebar-settings.hidden {
        display: none !important;
    }

    .pc-sidebar-settings-header {
        display: grid;
        grid-template-columns: 40px 1fr 40px;
        align-items: center;
        min-height: 48px;
        margin-bottom: 8px;
        flex: 0 0 auto;
        transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.32s ease;
        will-change: transform, opacity;
    }

    .pc-sidebar-settings-close {
        width: 40px;
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #fff;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .pc-sidebar-settings-close:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .pc-sidebar-settings-title {
        margin: 0;
        text-align: center;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.01em;
    }

    .pc-sidebar-settings-header-spacer {
        width: 40px;
        height: 40px;
    }

    .pc-sidebar-settings-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 4px 2px 8px;
        scrollbar-width: thin;
    }

    .pc-sidebar-settings-avatar {
        width: 112px;
        height: 112px;
        margin: 6px auto 2px;
        border-radius: 50%;
        background: #3a3a3a;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 42px;
        font-weight: 700;
        color: #fff;
        flex: 0 0 auto;
    }

    .pc-sidebar-settings-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .pc-sidebar-settings-card {
        background: #181818;
        border-radius: 22px;
        padding: 14px 16px;
        box-sizing: border-box;
    }

    .pc-sidebar-settings-card--profile {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border-radius: 28px;
    }

    .pc-sidebar-settings-card--accounts {
        display: flex;
        flex-direction: column;
        gap: 6px;
        border-radius: 28px;
        padding: 12px 14px 10px;
    }

    .pc-sidebar-settings-accounts-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        padding: 0 2px 2px;
    }

    .pc-sidebar-settings-accounts-title {
        font-size: 12px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.55);
        line-height: 1.2;
    }

    .pc-sidebar-settings-accounts-hint {
        font-size: 11px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.32);
    }

    .pc-sidebar-settings-accounts-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .pc-sidebar-settings-card--accounts .account-settings-accounts-item {
        padding: 10px 4px;
        border-radius: 0;
        gap: 10px;
    }

    .pc-sidebar-settings-card--accounts .account-settings-accounts-item + .account-settings-accounts-item {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .pc-sidebar-settings-card--accounts .account-settings-accounts-item.is-current {
        background: transparent;
    }

    .pc-sidebar-settings-card--accounts .account-settings-accounts-item:hover:not(.is-current) {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
    }

    .pc-sidebar-settings-card--accounts .account-settings-accounts-name {
        font-size: 14px;
        font-weight: 700;
    }

    .pc-sidebar-settings-card--accounts .account-settings-accounts-username {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
    }

    .pc-sidebar-settings-card--accounts .account-settings-accounts-badge {
        margin-left: auto;
        font-size: 10px;
        font-weight: 700;
        color: #5fd653;
        background: rgba(95, 214, 83, 0.12);
        border-radius: 999px;
        padding: 3px 8px;
    }

    .pc-sidebar-settings-accounts-add {
        margin-top: 2px;
        width: 100%;
        border: none;
        border-radius: 14px;
        background: transparent;
        color: rgba(255, 255, 255, 0.72);
        font-size: 13px;
        font-weight: 600;
        font-family: inherit;
        text-align: left;
        padding: 10px 6px 6px;
        cursor: pointer;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .pc-sidebar-settings-accounts-add:hover {
        color: #fff;
    }

    .pc-sidebar-settings-field {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .pc-sidebar-settings-label {
        font-size: 12px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.55);
        line-height: 1.2;
    }

    .pc-sidebar-settings-value {
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        line-height: 1.25;
        word-break: break-word;
    }

    .pc-sidebar-settings-card--nav {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 8px 12px;
        border-radius: 28px;
    }

    .pc-sidebar-settings-item {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 44px;
        padding: 12px 10px;
        border: none;
        border-radius: 0;
        background: transparent;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
        transition: background 0.12s ease;
    }

    .pc-sidebar-settings-item-icon {
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.9);
        flex: 0 0 auto;
        margin-right: 12px;
    }

    .pc-sidebar-settings-item-icon svg {
        width: 24px;
        height: 24px;
        display: block;
    }

    .pc-sidebar-settings-item-text {
        flex: 1;
        min-width: 0;
    }

    .pc-sidebar-settings-item + .pc-sidebar-settings-item {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .pc-sidebar-settings-item:hover {
        background: transparent;
    }

    .pc-sidebar-settings-item:active {
        background: transparent;
    }

    .pc-sidebar-settings-home {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.32s ease;
        will-change: transform, opacity;
    }

    .pc-sidebar-settings-home.hidden {
        display: none !important;
    }

    .pc-sidebar-settings-header.hidden {
        display: none !important;
    }

    /* Home уезжает влево, пока секция выезжает справа */
    .pc-sidebar-settings.is-section-open > .pc-sidebar-settings-header,
    .pc-sidebar-settings.is-section-open > .pc-sidebar-settings-home {
        transform: translate3d(-18%, 0, 0);
        opacity: 0;
        pointer-events: none;
    }

    .pc-sidebar-settings-section {
        position: absolute;
        inset: 0;
        z-index: 6;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 0;
        overflow: hidden;
        box-sizing: border-box;
        padding: 8px 14px 18px;
        /* Как у главного экрана настроек — без отдельного «тёмного листа» */
        background: transparent;
        transform: translate3d(100%, 0, 0);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0.36s;
        will-change: transform;
    }

    .pc-sidebar-settings-section.is-open {
        transform: translate3d(0, 0, 0);
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0s;
    }

    .pc-sidebar-settings-section.hidden {
        display: none !important;
    }

    .pc-sidebar-settings--section {
        padding-top: 4px;
    }

    @media (prefers-reduced-motion: reduce) {
        .pc-sidebar-settings-header,
        .pc-sidebar-settings-home,
        .pc-sidebar-settings-section,
        .pc-sidebar-settings-section.is-open {
            transition: none !important;
        }

        .pc-sidebar-settings.is-section-open > .pc-sidebar-settings-header,
        .pc-sidebar-settings.is-section-open > .pc-sidebar-settings-home {
            transform: none;
            opacity: 0;
        }
    }

    /* Экраны настроек внутри боковой панели */
    .pc-sidebar-settings-section > .pc-sidebar-embed-screen,
    .pc-sidebar-settings-section > .account-settings-screen.pc-sidebar-embed-screen,
    .pc-sidebar-settings-section > .privacy-settings-screen.pc-sidebar-embed-screen,
    .pc-sidebar-settings-section > .personalization-screen.pc-sidebar-embed-screen,
    .pc-sidebar-settings-section > .xams-screen.pc-sidebar-embed-screen,
    .pc-sidebar-settings-section > .activation-modal.pc-sidebar-embed-screen,
    .pc-sidebar-settings-section > .modal-content.pc-sidebar-embed-screen {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        animation: none !important;
        transform: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 2px 10px !important;
        box-sizing: border-box;
        pointer-events: auto !important;
    }

    .pc-sidebar-settings-section > .pc-sidebar-embed-screen::before,
    .pc-sidebar-settings-section > .account-settings-screen.pc-sidebar-embed-screen::before {
        display: none !important;
        content: none !important;
    }

    .pc-sidebar-settings-section .account-settings-header,
    .pc-sidebar-settings-section .privacy-settings-header,
    .pc-sidebar-settings-section .personalization-header,
    .pc-sidebar-settings-section .xams-header,
    .pc-sidebar-settings-section .activate-code-header {
        padding: 4px 4px 12px !important;
        flex: 0 0 auto;
    }

    .pc-sidebar-settings-section .account-settings-back-btn,
    .pc-sidebar-settings-section .privacy-settings-back-btn,
    .pc-sidebar-settings-section .personalization-back-btn,
    .pc-sidebar-settings-section .xams-back-btn,
    .pc-sidebar-settings-section .activate-code-back-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        color: #fff !important;
    }

    .pc-sidebar-settings-section .account-settings-title,
    .pc-sidebar-settings-section .privacy-settings-title,
    .pc-sidebar-settings-section .personalization-title,
    .pc-sidebar-settings-section .xams-title,
    .pc-sidebar-settings-section .activate-code-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #fff !important;
    }

    .pc-sidebar-settings-section .account-settings-profile-section {
        padding: 4px 8px 12px !important;
        gap: 10px !important;
    }

    .pc-sidebar-settings-section .account-settings-avatar {
        width: 120px !important;
        height: 120px !important;
        border: none !important;
        background: #d0d0d0 !important;
        color: #222 !important;
    }

    .pc-sidebar-settings-section .account-settings-fields {
        width: 100% !important;
        max-width: none !important;
        padding: 0 4px !important;
        gap: 10px !important;
        align-items: stretch !important;
        flex: 1 1 auto;
    }

    .pc-sidebar-settings-section .account-settings-field-group,
    .pc-sidebar-settings-section .account-settings-field-group--identity,
    .pc-sidebar-settings-section .account-settings-field-group--thought,
    .pc-sidebar-settings-section .account-settings-field-group--music,
    .pc-sidebar-settings-section .account-settings-field-group--email,
    .pc-sidebar-settings-section .account-settings-field-group--accounts {
        width: 100% !important;
        max-width: none !important;
        background: #181818 !important;
        border: none !important;
        border-radius: 22px !important;
        padding: 12px 16px !important;
    }

    .pc-sidebar-settings-section .account-settings-field-group:hover,
    .pc-sidebar-settings-section .account-settings-field-group--email:hover {
        background: #181818 !important;
    }

    .pc-sidebar-settings-section .account-settings-field {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        padding: 8px 2px !important;
        max-width: none !important;
    }

    .pc-sidebar-settings-section .account-settings-field-label {
        flex: none !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.55) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        margin: 0 !important;
    }

    .pc-sidebar-settings-section .account-settings-field-value {
        width: 100%;
        justify-content: flex-start !important;
    }

    .pc-sidebar-settings-section .account-settings-input {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #fff !important;
        line-height: 1.25 !important;
        pointer-events: none;
    }

    .pc-sidebar-settings-section .account-settings-edit-btn {
        margin-left: auto;
    }

    .pc-sidebar-settings-section .account-settings-glow-row {
        flex-direction: row !important;
        align-items: center !important;
    }

    .pc-sidebar-settings-section .account-settings-glow-value {
        justify-content: flex-end !important;
    }

    .pc-sidebar-settings-section .account-settings-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding: 14px 4px 8px !important;
        margin-top: auto !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .pc-sidebar-settings-section .account-settings-action-pill {
        flex: 1 1 0;
        min-width: 0;
        background: #181818 !important;
        border-radius: 18px !important;
        min-height: 48px !important;
        padding: 12px 14px !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        justify-content: center;
    }

    .pc-sidebar-settings-section .account-settings-action-pill--danger {
        color: #fff !important;
        order: 2;
    }

    .pc-sidebar-settings-section .account-settings-action-pill--logout {
        order: 1;
    }

    .pc-sidebar-settings-section .account-settings-action-pill-icon {
        display: none !important;
    }

    .pc-sidebar-settings-section .account-settings-action-pill--danger .account-settings-action-pill-text {
        font-size: 0;
    }

    .pc-sidebar-settings-section .account-settings-action-pill--danger .account-settings-action-pill-text::after {
        content: 'Удалить';
        font-size: 14px;
        font-weight: 600;
    }

    .pc-sidebar-settings-section .account-settings-field-group--accounts {
        display: none !important;
    }

    .pc-sidebar-settings-section .privacy-settings-content,
    .pc-sidebar-settings-section .personalization-settings,
    .pc-sidebar-settings-section .xams-content {
        padding: 0 4px 12px !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    /* —— Приватность: стиль как у Аккаунта —— */
    .pc-sidebar-settings-section .privacy-settings-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        flex: 1 1 auto;
        min-height: 0;
    }

    .pc-sidebar-settings-section .privacy-status-row {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        background: #181818 !important;
        border: none !important;
        border-radius: 22px !important;
        padding: 14px 16px !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        cursor: pointer;
        transition: background 0.12s ease, opacity 0.12s ease;
        text-align: left;
        box-sizing: border-box;
    }

    .pc-sidebar-settings-section .privacy-status-row:hover {
        background: #181818 !important;
    }

    .pc-sidebar-settings-section .privacy-status-row:active {
        opacity: 0.88;
    }

    .pc-sidebar-settings-section .privacy-status-row-label {
        flex: none !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.55) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
    }

    .pc-sidebar-settings-section .privacy-status-row-value {
        flex: none !important;
        text-align: left !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #fff !important;
        line-height: 1.25 !important;
    }

    .pc-sidebar-settings-section .privacy-status-row-value.is-open {
        color: #5fd653 !important;
    }

    .pc-sidebar-settings-section .privacy-settings-section {
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    .pc-sidebar-settings-section .privacy-section-heading {
        margin: 6px 4px 0 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: rgba(255, 255, 255, 0.55) !important;
    }

    .pc-sidebar-settings-section .privacy-section-hint {
        margin: -4px 4px 0 !important;
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.38) !important;
        opacity: 1 !important;
        line-height: 1.35 !important;
    }

    .pc-sidebar-settings-section .privacy-sessions-card {
        background: #181818 !important;
        border: none !important;
        border-radius: 22px !important;
        padding: 6px 16px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .pc-sidebar-settings-section .privacy-sessions-list {
        gap: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .pc-sidebar-settings-section .privacy-session-item {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 12px 0 !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .pc-sidebar-settings-section .privacy-session-item + .privacy-session-item {
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .pc-sidebar-settings-section .privacy-session-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #fff !important;
    }

    .pc-sidebar-settings-section .privacy-session-subtitle {
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.45) !important;
        opacity: 1 !important;
        margin-top: 2px !important;
    }

    .pc-sidebar-settings-section .privacy-session-current-badge {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #5fd653 !important;
        background: rgba(95, 214, 83, 0.12);
        border-radius: 999px;
        padding: 4px 10px;
    }

    .pc-sidebar-settings-section .privacy-session-terminate-btn {
        border: none !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 7px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        white-space: nowrap;
    }

    .pc-sidebar-settings-section .privacy-session-terminate-btn:not(:disabled):hover {
        background: rgba(255, 255, 255, 0.14) !important;
    }

    .pc-sidebar-settings-section .privacy-sessions-empty {
        padding: 14px 0 !important;
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.45) !important;
        opacity: 1 !important;
        text-align: left;
    }

    .pc-sidebar-settings-section .privacy-more-btn,
    .pc-sidebar-settings-section .privacy-terminate-all-btn {
        width: 100% !important;
        border: none !important;
        border-radius: 18px !important;
        background: #181818 !important;
        color: #fff !important;
        padding: 14px 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        min-height: 48px !important;
        cursor: pointer;
        transition: opacity 0.12s ease;
    }

    .pc-sidebar-settings-section .privacy-more-btn:hover,
    .pc-sidebar-settings-section .privacy-terminate-all-btn:hover {
        background: #181818 !important;
        opacity: 0.92;
    }

    .pc-sidebar-settings-section .privacy-info-text {
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.38) !important;
        opacity: 1 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        padding: 0 4px !important;
    }

    .pc-sidebar-settings-section .privacy-biometric-row {
        background: #181818 !important;
        border: none !important;
        border-radius: 22px !important;
    }

    /* —— Персонализация —— */
    .pc-sidebar-settings-section .personalization-preview {
        margin: 0 4px 10px !important;
        border-radius: 22px !important;
        background: #181818 !important;
        border: none !important;
        overflow: hidden;
        flex: 0 0 auto;
    }

    .pc-sidebar-settings-section .personalization-preview-header {
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        padding: 10px 12px !important;
    }

    .pc-sidebar-settings-section .personalization-preview-messages {
        padding: 12px !important;
        min-height: 120px;
        background: transparent !important;
    }

    .pc-sidebar-settings-section .personalization-settings {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 4px 12px !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        flex: 1 1 auto;
    }

    .pc-sidebar-settings-section .personalization-setting {
        background: #181818 !important;
        border: none !important;
        border-radius: 22px !important;
        padding: 14px 16px !important;
        gap: 12px !important;
        box-sizing: border-box;
    }

    .pc-sidebar-settings-section .personalization-setting-label {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.55) !important;
        line-height: 1.2 !important;
    }

    .pc-sidebar-settings-section .personalization-setting-hint {
        margin: 0 !important;
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.38) !important;
        line-height: 1.35 !important;
    }

    .pc-sidebar-settings-section .personalization-slider-container {
        gap: 12px !important;
    }

    .pc-sidebar-settings-section .personalization-slider {
        background: rgba(255, 255, 255, 0.12) !important;
        height: 6px !important;
        border-radius: 999px !important;
    }

    .pc-sidebar-settings-section .personalization-slider::-webkit-slider-thumb {
        background: #fff !important;
        width: 18px !important;
        height: 18px !important;
    }

    .pc-sidebar-settings-section .personalization-slider::-moz-range-thumb {
        background: #fff !important;
        width: 18px !important;
        height: 18px !important;
    }

    .pc-sidebar-settings-section .personalization-slider-value {
        min-width: 42px;
        text-align: right;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #fff !important;
    }

    .pc-sidebar-settings-section .personalization-toggle-container {
        display: flex;
        justify-content: flex-start;
    }

    .pc-sidebar-settings-section .personalization-toggle-slider {
        background: rgba(255, 255, 255, 0.14) !important;
    }

    .pc-sidebar-settings-section .personalization-toggle input:checked + .personalization-toggle-slider {
        background: var(--xam-ui-accent, #8774E1) !important;
        border-color: var(--xam-ui-accent, #8774E1) !important;
    }

    .pc-sidebar-settings-section .personalization-color-palette {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .pc-sidebar-settings-section .color-swatch {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
        box-sizing: border-box;
    }

    .pc-sidebar-settings-section .personalization-more-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        color: #fff !important;
    }

    .pc-sidebar-settings-section .personalization-quick-menu {
        background: #181818 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important;
        right: 8px !important;
        top: 52px !important;
    }

    /* —— Активация кода —— */
    .pc-sidebar-settings-section .activate-code-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #fff !important;
        margin: 0 !important;
        flex: 1;
        text-align: center;
    }

    .pc-sidebar-settings-section .activate-code-header {
        display: grid !important;
        grid-template-columns: 40px 1fr 40px;
        align-items: center;
        border-bottom: none !important;
    }

    .pc-sidebar-settings-section .activate-code-header-spacer {
        width: 40px;
        height: 40px;
    }

    .pc-sidebar-settings-section .activation-modal .modal-body,
    .pc-sidebar-settings-section .modal-content.activation-modal .modal-body {
        padding: 0 4px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .pc-sidebar-settings-section .activation-description {
        margin: 0 !important;
        background: #181818 !important;
        border-radius: 22px !important;
        padding: 14px 16px !important;
        color: rgba(255, 255, 255, 0.72) !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }

    .pc-sidebar-settings-section #activate-code-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0;
    }

    .pc-sidebar-settings-section #activate-code-form .form-group {
        margin: 0 !important;
    }

    .pc-sidebar-settings-section #activate-code-input {
        width: 100% !important;
        box-sizing: border-box !important;
        background: #181818 !important;
        border: none !important;
        border-radius: 18px !important;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 14px 16px !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .pc-sidebar-settings-section #activate-code-input::placeholder {
        color: rgba(255, 255, 255, 0.38) !important;
        font-weight: 500 !important;
    }

    .pc-sidebar-settings-section #activate-code-submit-btn,
    .pc-sidebar-settings-section .activation-modal .btn-primary {
        width: 100% !important;
        border: none !important;
        border-radius: 18px !important;
        background: #181818 !important;
        color: #fff !important;
        min-height: 48px !important;
        padding: 14px 16px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        cursor: pointer;
        transition: opacity 0.12s ease;
    }

    .pc-sidebar-settings-section #activate-code-submit-btn:hover,
    .pc-sidebar-settings-section .activation-modal .btn-primary:hover {
        background: #181818 !important;
        opacity: 0.92;
    }

    .pc-sidebar-settings-section #activate-code-message {
        margin: 0 !important;
        text-align: left !important;
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        padding: 0 4px;
    }

    .pc-sidebar-settings-section .activation-modal .modal-body > div:last-child {
        margin-top: 4px !important;
        text-align: left !important;
        padding: 0 4px;
    }

    .pc-sidebar-settings-section .activation-modal .modal-body a {
        color: rgba(255, 255, 255, 0.72) !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .pc-sidebar-settings-section .activation-modal .modal-body a:hover {
        color: #fff !important;
    }

    .sidebar.sidebar--chats-drum::before {
        display: none !important;
    }

  /* Градиент только справа от панели */
    .sidebar.sidebar--chats-drum::after {
        opacity: 1 !important;
        inset: auto;
        top: var(--sidebar-float-gap);
        bottom: var(--sidebar-float-gap);
        left: 100%;
        right: auto;
        width: 100px;
        z-index: 5;
        pointer-events: none;
        background-color: transparent;
        background-image: linear-gradient(
            to right,
            rgba(var(--chats-drum-panel-rgb), 0.55) 0%,
            rgba(var(--chats-drum-panel-rgb), 0.28) 40%,
            transparent 100%
        );
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 0;
    }

    .sidebar.sidebar--chats-drum .sidebar-header {
        background: transparent !important;
        border: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        position: relative;
        z-index: 40;
        overflow: visible !important;
    }

    .sidebar.sidebar--chats-drum .sidebar-bottom-dock .sidebar-bottom-panel.desktop-only {
        background: var(--chats-drum-pill) !important;
        border: none !important;
        box-shadow: none !important;
    }

    .sidebar.sidebar--chats-drum #search-results {
        background: var(--chats-drum-panel);
        margin: 0 8px 6px;
        border-radius: 12px;
    }

  /* Барабан чатов: без старой «пилюли»-панели, тёмно-серый фон */
    .chats-section.chats-section--drum {
        margin: 0 !important;
        padding: 0 !important;
        background: var(--chats-drum-panel) !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        flex: 1;
        min-height: 0;
        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    /* Свечение панели цветами аватарки выбранного чата */
    .chats-section--drum .chats-drum-glow {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.55s ease;
        --glow-y: 42%;
        --glow-x1: 16%;
        --glow-x2: 34%;
        --glow-x3: 8%;
        --glow-y1: var(--glow-y);
        --glow-y2: var(--glow-y);
        --glow-y3: calc(var(--glow-y) + 10%);
        --glow-c1: 150, 97, 241;
        --glow-c2: 120, 80, 200;
        --glow-c3: 90, 60, 160;
        background:
            radial-gradient(ellipse 88% 52% at var(--glow-x1) var(--glow-y1), rgba(var(--glow-c1), 0.52) 0%, transparent 68%),
            radial-gradient(ellipse 72% 46% at var(--glow-x2) var(--glow-y2), rgba(var(--glow-c2), 0.38) 0%, transparent 64%),
            radial-gradient(ellipse 58% 40% at var(--glow-x3) var(--glow-y3), rgba(var(--glow-c3), 0.24) 0%, transparent 62%);
        filter: blur(34px);
        transform: translateZ(0);
    }

    .chats-section--drum.chats-drum-glow--on .chats-drum-glow {
        opacity: 1;
    }

    .chats-section.chats-section--drum .sidebar-tabs {
        background: transparent !important;
        position: relative;
        z-index: 1;
    }

    body.theme-style-glass .chats-section.chats-section--drum {
        background: var(--chats-drum-panel) !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-style-glass .sidebar.sidebar--chats-drum {
        background: var(--chats-drum-panel) !important;
    }

    body.theme-style-glass .sidebar.sidebar--chats-drum .sidebar-header {
        background: transparent !important;
        border: none !important;
        border-bottom: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* ПК: «барабан» чатов — refresh 2026-07-18b (клип по ширине сайдбара) */
    .chats-section.chats-section--drum {
        overflow-x: hidden !important;
        max-width: 100%;
    }

    #chats-list.chats-list--drum {
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
        overflow-x: hidden !important;
        max-width: 100%;
        width: 100%;
        padding: 0 !important;
        background: var(--chats-drum-panel);
        mask-image: none;
        -webkit-mask-image: none;
    }

    #chats-list.chats-list--drum .chats-drum-viewport {
        flex: 1;
        min-height: 0;
        height: 100%;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        overflow-y: auto;
        position: relative;
        z-index: 1;
        /* flat list: без 3D — иначе compositor лагает на каждой строке */
        perspective: none;
        scroll-behavior: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        contain: layout style;
    }

    #chats-list.chats-list--drum .chats-drum-viewport::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    #chats-list.chats-list--drum .chats-drum-track {
        transform-style: flat;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        contain: layout style;
    }

    #chats-list.chats-list--drum .chats-drum-spacer {
        pointer-events: none;
        flex-shrink: 0;
    }

    #chats-list.chats-list--drum .chat-item {
        position: relative;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        margin: 0;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 12px !important;
        gap: 12px;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        transform-style: flat;
        backface-visibility: visible;
        will-change: auto;
        min-height: 70px;
        box-sizing: border-box !important;
        border-radius: 0;
        overflow: hidden !important;
        contain: layout style paint;
        content-visibility: auto;
        contain-intrinsic-size: 70px;
    }

    #chats-list.chats-list--drum .chat-avatar-wrap {
        flex: 0 0 auto;
        width: 54px;
    }

    /* Текст + правая колонка meta внутри info — дуга барабана их двигает вместе */
    #chats-list.chats-list--drum .chat-info {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        align-items: center;
        overflow: hidden !important;
    }

    #chats-list.chats-list--drum .chat-info-main {
        min-width: 0;
        overflow: hidden;
    }

    #chats-list.chats-list--drum .chat-item-aside {
        display: flex !important;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 5px;
        flex: 0 0 auto !important;
        min-width: 52px;
        margin: 0 !important;
        transform: translateZ(12px);
        pointer-events: none;
        z-index: 6;
    }

    /* Без фиолетовых полос у закрепов — только иконка + общий divider */
    #chats-list.chats-list--drum .chat-item.chat-item--pinned::before,
    #chats-list.chats-list--drum .chat-item-shell--pinned > .chat-item::before {
        display: none !important;
        content: none !important;
    }

    #chats-list.chats-list--drum .chat-item:nth-child(even) {
        background: transparent !important;
    }

    #chats-list.chats-list--drum .chat-item:hover {
        background: rgba(255, 255, 255, 0.04) !important;
    }

    /* Active: цвет элементов */
    #chats-list.chats-list--drum .chat-item.active {
        background: var(--xam-ui-accent, #8774E1) !important;
        box-shadow: none !important;
    }

    #chats-list.chats-list--drum .chat-item.active:hover {
        background: var(--xam-ui-accent, #8774E1) !important;
    }

    /* Пилюля / пин — в aside под временем */
    #chats-list.chats-list--drum .chat-meta {
        display: flex !important;
        position: static;
        margin: 0;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        pointer-events: none;
    }

    /* Серый разделитель закреплённых / обычных — как на телефоне */
    #chats-list.chats-list--drum .chats-pinned-divider {
        display: block;
        box-sizing: border-box;
        height: 1px;
        width: auto;
        margin: 8px 20px 10px;
        background: rgba(255, 255, 255, 0.14);
        border: 0;
        flex-shrink: 0;
        pointer-events: none;
        border-radius: 1px;
        transform: translateZ(1px);
    }

    #chats-list.chats-list--drum .chat-unread-inline {
        display: none !important;
    }

    #chats-list.chats-list--drum .chat-unread-pill {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        border-radius: 11px;
        background: #c4c4c4;
        color: #212121;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        box-sizing: border-box;
        flex-shrink: 0;
        box-shadow: none;
    }

    #chats-list.chats-list--drum .chat-item.active .chat-unread-pill {
        background: rgba(255, 255, 255, 0.95);
        color: #8774E1;
    }

    #chats-list.chats-list--drum .chat-pin-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.45);
        margin-right: 0;
    }
    #chats-list.chats-list--drum .chat-item.active .chat-pin-badge {
        background: rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.9);
    }
    #chats-list.chats-list--drum .chat-pin-badge .chat-pin-icon {
        width: 14px;
        height: 14px;
    }

    #chats-list.chats-list--drum .chat-item--has-unread .chat-last-message,
    #chats-list.chats-list--drum .chat-item--pinned .chat-last-message {
        /* место уже в padding-right строки */
        padding-right: 0;
    }

    #chats-list.chats-list--drum .chat-drum-head {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: baseline;
        gap: 8px;
        width: 100%;
        min-width: 0;
        margin-bottom: 2px;
        padding-right: 0;
    }

    #chats-list.chats-list--drum .chat-drum-head > .chat-name {
        flex: 1 1 auto;
        min-width: 0;
        margin-bottom: 0;
        max-width: none; /* не сжимать время, если оно ещё в head */
    }

    /* Fallback: время всё ещё в head (старый кэш JS) — не дать нику его вытолкнуть */
    #chats-list.chats-list--drum .chat-drum-head > .chat-drum-time {
        flex: 0 0 auto !important;
        position: static !important;
        display: block !important;
        margin-left: 8px;
        color: rgba(255, 255, 255, 0.42);
        font-size: 12px;
        font-weight: 500;
    }

    #chats-list.chats-list--drum .chat-drum-head .chat-unread-badge--nick {
        display: none !important;
    }

    /* Время — в aside внутри info */
    #chats-list.chats-list--drum .chat-drum-time-row {
        display: inline-flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
        max-width: 100%;
    }

    #chats-list.chats-list--drum .chat-drum-time {
        position: static !important;
        display: block !important;
        flex: none;
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.55) !important;
        white-space: nowrap;
        letter-spacing: 0.01em;
        pointer-events: none;
        min-height: 1.2em;
        opacity: 1 !important;
        visibility: visible !important;
    }
    #chats-list.chats-list--drum .chat-drum-time:empty::before {
        content: attr(data-time);
    }

    #chats-list.chats-list--drum .chat-item.active .chat-drum-time {
        color: rgba(255, 255, 255, 0.55);
    }

    #chats-list.chats-list--drum .chat-item--has-unread .chat-drum-time {
        color: #8774E1;
    }

    #chats-list.chats-list--drum .chat-item.active .chat-drum-time,
    #chats-list.chats-list--drum .chat-item.active.chat-item--has-unread .chat-drum-time {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    #chats-list.chats-list--drum .chat-last-message {
        display: block !important;
        margin-top: 2px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.3;
        color: #aaaaaa;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #chats-list.chats-list--drum .chat-item.active .chat-last-message {
        color: rgba(255, 255, 255, 0.88);
    }

    #chats-list.chats-list--drum .chat-name {
        font-size: 15px;
        font-weight: 600;
        font-family: 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
        line-height: 1.25;
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #chats-list.chats-list--drum .chat-item.active .chat-name {
        color: #ffffff;
    }

    #chats-list.chats-list--drum .chat-name .chat-name-text {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #chats-list.chats-list--drum .chat-avatar {
        width: 54px;
        height: 54px;
        min-width: 54px;
        border-radius: 50%;
        border: 2px solid transparent !important;
        box-sizing: border-box;
        font-size: 19px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    #chats-list.chats-list--drum .chat-item.active .chat-avatar {
        box-shadow: none;
    }

    /* Результаты поиска в сайдбаре — те же отступы, что у шапки и списка */
    .sidebar .search-results {
        margin-left: 12px;
        margin-right: 12px;
        margin-top: 0;
        margin-bottom: 6px;
        border-radius: 18px;
    }
    
    /* Элемент чата */
    .chat-item {
        padding: 12px 16px;
        border: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        outline: none !important;
        transition: background 0.2s;
    }

    .chat-meta {
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
    }

    .chat-unread-badge.wide {
        width: 32px;
        height: 32px;
    }

    .chat-unread-badge.unread-badge--circle.wide {
        width: 34px;
        height: 34px;
    }

    .chat-unread-badge.show {
        display: inline-flex !important;
    }
    
    .chat-item:hover {
        background: rgba(255, 255, 255, 0.05);
    }
    
    .chat-item.active {
        background: #503184 !important;
        cursor: default !important;
        border: none !important;
        border-left: none !important;
        border-bottom: none !important;
        border-right: none !important;
        border-top: none !important;
        outline: none !important;
    }
    
    /* Убираем обводку у аватара чата */
    .chat-avatar {
        border: none !important;
        outline: none !important;
    }
    
    /* FAB кнопка скрыта на ПК (используем кнопку в верхней панели) */
    .fab-button {
        display: none !important;
    }
    
    /* Messenger container — чёрный фон + SVG-паттерн с TG-переливом */
    .messenger-container {
        display: flex;
        height: 100vh;
        width: 100%;
        position: relative;
        background: var(--theme-bg-base);
        align-items: stretch;
        gap: 0;
        overflow: hidden;
    }

    .messenger-container::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: var(--theme-bg-base);
    }

    .messenger-container::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-color: transparent;
        background-image: var(--theme-bg-pattern-gradient);
        background-repeat: no-repeat;
        background-size: 260% 260%;
        opacity: var(--theme-bg-pattern-opacity);
        animation: xamPatternGradientDrift 48s ease-in-out infinite;
        -webkit-mask-image: var(--theme-bg-pattern);
        mask-image: var(--theme-bg-pattern);
        -webkit-mask-repeat: repeat;
        mask-repeat: repeat;
        -webkit-mask-size: var(--theme-bg-pattern-size);
        mask-size: var(--theme-bg-pattern-size);
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }

    .messenger-container > .sidebar,
    .messenger-container > .chat-area {
        position: relative;
        z-index: 1;
    }
    /* Chat area — тот же фон, что и у messenger-container */
    .chat-area {
        position: relative;
        background: transparent !important;
    }
    /* Фон рисует messenger-container одним непрерывным слоем — здесь только прозрачность */
    .chat-area::before,
    .chat-area::after {
        content: none;
    }
    .chat-area > * {
        position: relative;
        z-index: 10;
    }
    .chat-view {
        position: relative;
        z-index: 10;
        background: transparent;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    /* Шапка + закреп = ширина строки ввода; по высоте чуть компактнее */
    .chat-view {
        --desktop-chat-header-offset: 68px; /* top 12 + ~48 + зазор */
        --desktop-pinned-bar-h: 44px;
        --desktop-chat-chrome-bg: #1c1c1c;
        --desktop-chat-chrome-border: transparent;
        --desktop-chat-chrome-shadow: none;
        --desktop-chat-chrome-width: min(680px, calc(100% - 32px));
        --desktop-chat-chrome-gap: 8px;
    }

    .chat-view > .chat-header {
        display: flex !important;
        align-self: center !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: var(--desktop-chat-chrome-width) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        min-height: 48px !important;
        height: auto !important;
        position: absolute !important;
        top: 12px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 25 !important;
        overflow: visible !important;
        background: transparent !important;
        border: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition: none !important;
        pointer-events: none !important;
    }

    .chat-view > .chat-header > * {
        pointer-events: auto;
    }

    .chat-view > .chat-header .chat-header-pc-chrome {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .chat-view > .chat-header .chat-header-info-pill,
    .chat-view > .chat-header .chat-header-actions-pill {
        background: var(--desktop-chat-chrome-bg) !important;
        border: none !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        min-height: 48px;
        height: 48px;
        box-sizing: border-box;
        transition: background 0.2s ease;
    }

    .chat-view > .chat-header .chat-header-info-pill {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 140px);
        display: flex;
        align-items: center;
        padding: 4px 16px 4px 4px;
    }

    .chat-view > .chat-header .chat-header-info-pill:hover {
        background: #242424 !important;
    }

    .chat-view > .chat-header .chat-header-actions-pill {
        flex: 0 0 auto;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 4px 8px;
        overflow: visible;
        position: relative;
        z-index: 3;
        pointer-events: auto !important;
        width: auto;
        min-width: max-content;
        box-sizing: border-box;
        transition: background 0.2s ease, padding 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .chat-view > .chat-header .chat-header-actions-pill:hover {
        background: #242424 !important;
    }

    .chat-view > .chat-header .chat-header-actions-pill-slots {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        flex: 0 0 auto;
        flex-shrink: 0;
        min-width: 0;
        width: var(--pill-slots-w, 0px);
        max-width: var(--pill-slots-w, 0px);
        overflow: hidden;
        pointer-events: auto;
        opacity: 1;
        transition:
            width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
            max-width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: width, max-width;
    }

    .chat-view > .chat-header .chat-header-actions-pill-slots .btn-icon,
    .chat-view > .chat-header .chat-header-actions-pill-slots button,
    .chat-view > .chat-header .chat-header-actions .btn-icon,
    .chat-view > .chat-header .chat-header-actions button {
        pointer-events: auto !important;
        position: relative;
        z-index: 1;
    }

    .chat-view > .chat-header .chat-header-actions-pill-slots.is-expanded + .chat-header-actions {
        margin-left: 0;
    }

    .chat-view > .chat-header .call-user-btn {
        margin-left: 0 !important;
    }

    .chat-view > .chat-header .chat-header-actions-pill-slots > .call-user-btn:not(.hidden),
    .chat-view > .chat-header .chat-header-actions-pill-slots > .group-call-header-pills:not(.hidden),
    .chat-view > .chat-header .chat-header-actions-pill-slots > .pc-call-minimized-bar.is-active {
        opacity: 1;
        transform: scale(1);
        transition:
            opacity 0.28s ease,
            transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .chat-view > .chat-header .chat-header-actions-pill-slots > .call-user-btn,
    .chat-view > .chat-header .chat-header-actions-pill-slots > .group-call-header-pills,
    .chat-view > .chat-header .chat-header-actions-pill-slots > .pc-call-minimized-bar {
        flex: 0 0 auto;
        margin-left: 0 !important;
    }

    .chat-view > .chat-header .chat-header-actions-pill-slots > .call-user-btn.hidden,
    .chat-view > .chat-header .chat-header-actions-pill-slots > .group-call-header-pills.hidden,
    .chat-view > .chat-header .chat-header-actions-pill-slots > .pc-call-minimized-bar.hidden,
    .chat-view > .chat-header .chat-header-actions-pill-slots > .pc-call-minimized-bar[hidden] {
        display: none !important;
    }

    .chat-view > .chat-header .chat-header-actions-pill-slots > .pc-call-minimized-bar.is-active {
        display: inline-flex !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .chat-view > .chat-header .chat-header-actions-pill,
        .chat-view > .chat-header .chat-header-actions-pill-slots {
            transition: none !important;
            will-change: auto !important;
        }
    }

    .chat-view > .chat-header:hover {
        background: transparent !important;
        border-color: transparent !important;
    }

    /* На ПК профиль — центрированная модалка, не раскрытие шапки чата */
    .chat-view > .chat-header .chat-header-expand,
    .chat-view.chat-header-profile-expanded > .chat-header .chat-header-expand {
        display: none !important;
        max-height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .chat-view.chat-header-profile-expanded > .chat-header {
        border-radius: 999px !important;
    }

    .chat-header-expand-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        max-width: 100%;
        position: relative;
    }

    .chat-header-expand-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 4px 0 6px;
        overflow: visible;
    }

    .chat-header-expand-display {
        font-size: 15px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.95);
        text-align: center;
        max-width: 100%;
        padding: 0 8px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-header-expand-display.hidden {
        display: none !important;
    }

    .chat-header-expand-hero .profile-avatar-cluster {
        overflow: visible;
    }

    .chat-header-expand-hero-avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        font-weight: 600;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.06);
    }

    .chat-header-expand-hero-avatar img,
    .chat-header-expand-hero-avatar video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .chat-header-expand-handle {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.88);
        text-align: center;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-header-expand-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 8px;
        margin-top: 2px;
    }

    .chat-header-expand-action {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        padding: 10px 6px 8px;
        border: none;
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.28);
        color: rgba(255, 255, 255, 0.92);
        cursor: pointer;
        transition: background 0.12s ease;
        font: inherit;
    }

    .chat-header-expand-action:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.1);
    }

    .chat-header-expand-action:disabled,
    .chat-header-expand-action.chat-header-expand-action--soon {
        opacity: 0.42;
        cursor: default;
        pointer-events: none;
    }

    .chat-header-expand-action-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .chat-header-expand-action-icon svg {
        display: block;
    }

    .chat-header-expand-action-label {
        font-size: 11px;
        line-height: 1.15;
        text-align: center;
        color: rgba(255, 255, 255, 0.88);
        word-break: break-word;
    }

    .chat-header-expand-action.hidden {
        display: none !important;
    }

    .chat-header-expand-notify-icon-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .chat-header-expand-notify-hrs {
        position: absolute;
        right: -6px;
        bottom: -4px;
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.92);
        color: #111;
        font-size: 9px;
        font-weight: 700;
        line-height: 14px;
        text-align: center;
        pointer-events: none;
    }

    /* Рядом с кнопкой; absolute от .chat-header (у шапки backdrop-filter — fixed даёт неверный containing block) */
    .chat-header-expand-notify-menu {
        position: absolute;
        left: 0;
        top: 0;
        width: min(200px, calc(100vw - 24px));
        box-sizing: border-box;
        padding: 6px;
        border-radius: 14px;
        background: rgba(22, 22, 26, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
        z-index: 200;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .chat-header-expand-notify-menu.hidden {
        display: none !important;
    }

    .chat-header-expand-notify-menu-item {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        border: none;
        border-radius: 10px;
        background: transparent;
        color: rgba(255, 255, 255, 0.92);
        font-size: 14px;
        font: inherit;
        cursor: pointer;
    }

    .chat-header-expand-notify-menu-item:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .chat-header-expand-notify-menu-item--accent {
        color: #f87171;
        font-weight: 600;
    }

    .chat-view > .chat-header .chat-user-info {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        gap: 10px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        cursor: pointer;
        border-radius: 999px;
    }

    .chat-view > .chat-header .chat-user-avatar {
        width: 40px !important;
        height: 40px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border: none !important;
        box-shadow: none !important;
        flex-shrink: 0 !important;
    }

    .chat-view > .chat-header .chat-user-name {
        font-size: 15px !important;
        font-weight: 650 !important;
        letter-spacing: 0.01em !important;
        line-height: 1.15 !important;
        color: rgba(255, 255, 255, 0.96) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        max-width: 100% !important;
    }

    .chat-view > .chat-header .chat-user-status {
        font-size: 12px !important;
        font-weight: 450 !important;
        line-height: 1.1 !important;
        margin-top: 2px !important;
        color: rgba(255, 255, 255, 0.55) !important;
    }

    .chat-view > .chat-header .chat-user-status.online,
    .chat-view > .chat-header .chat-user-status.chat-user-status--typing {
        color: rgba(150, 97, 241, 0.95) !important;
        font-weight: 500 !important;
    }

    .chat-view > .chat-header .btn-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 999px !important;
        flex-shrink: 0 !important;
        color: rgba(255, 255, 255, 0.92) !important;
        background: transparent !important;
        border: none !important;
        transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
    }

    .chat-view > .chat-header .btn-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    .chat-view > .chat-header #call-user-btn svg {
        width: 22px !important;
        height: 22px !important;
    }

    .chat-view > .chat-header .btn-icon:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #fff !important;
    }

    .chat-view > .chat-header .btn-icon:active {
        transform: scale(0.94) !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .chat-view > .chat-header #call-user-btn:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #fff !important;
    }

    /* На ПК список закреплённых — через пилюлю под шапкой, не кнопку в панели */
    .chat-view > .chat-header #pinned-messages-btn {
        display: none !important;
    }

    /* ПК: поиск + ⋯ справа во второй пилюле */
    .chat-view > .chat-header .chat-header-actions {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0 !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        min-width: max-content !important;
        margin-left: 0 !important;
        position: relative !important;
        z-index: 4 !important;
        pointer-events: auto !important;
    }

    .chat-view > .chat-header .group-call-header-pills {
        margin-left: 0 !important;
    }

    .chat-view > .chat-header .pc-call-minimized-bar {
        margin-left: 0 !important;
    }

    .chat-view > .chat-header .chat-header-more-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        flex-shrink: 0;
        pointer-events: auto;
    }

    .chat-view > .chat-header #chat-header-search-btn,
    .chat-view > .chat-header #chat-header-more-btn {
        flex: 0 0 auto;
        flex-shrink: 0;
        pointer-events: auto !important;
        cursor: pointer;
    }

    .chat-view > .chat-header .chat-header-more-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 168px;
        padding: 6px 0;
        border-radius: 14px;
        background: #212121;
        border: none;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        z-index: 40;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0) scale(1);
        transform-origin: top right;
        transition: opacity 180ms ease, transform 180ms ease;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .chat-view > .chat-header .chat-header-more-menu.hidden {
        display: block !important;
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
        pointer-events: none;
    }

    .chat-view > .chat-header .chat-header-more-menu-item {
        display: block;
        width: 100%;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.94);
        text-align: left;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        padding: 10px 14px;
        cursor: pointer;
        white-space: nowrap;
    }

    .chat-view > .chat-header .chat-header-more-menu-item:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .chat-view > .chat-header .chat-header-more-menu-item:active {
        background: rgba(255, 255, 255, 0.12);
    }

    .chat-view > .chat-header .chat-header-more-menu-item--danger {
        color: #f87171;
    }

    .chat-view > .chat-header .chat-header-more-menu-item--danger:hover {
        background: rgba(248, 113, 113, 0.12);
    }

    /* Мобилка: убираем прямоугольный фон шапки, оставляем только пилюли */
        @media (max-width: 768px) {
        .chat-header {
            padding: 32px 14px 8px !important;
            background: transparent !important;
            border: none !important;
            border-bottom: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 12px !important;
        }
        body.theme-style-glass .chat-header,
        body.theme-light .chat-header {
            background: transparent !important;
            border: none !important;
            border-bottom: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        .chat-header .chat-header-actions {
            display: none !important;
        }
    }
    /* Лента сообщений — та же ширина, что у шапки и строки ввода (как Telegram Desktop) */
    .messages-container {
        background: transparent !important;
        padding: 20px 16px !important;
        width: 100%;
        max-width: min(680px, calc(100% - 32px));
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
        align-self: center;
        gap: 4px !important;
    }

    /* Лента на всю высоту — уходит под шапку/закреп как под composer снизу */
    .chat-view > .messages-container {
        position: relative;
        z-index: 0;
        scroll-padding-top: var(--desktop-chat-header-offset, 60px);
        padding-top: var(--desktop-chat-header-offset, 60px) !important;
        padding-bottom: calc(var(--desktop-composer-inset, 54px) + 10px) !important;
    }

    .chat-view.chat-view--has-pinned > .messages-container {
        scroll-padding-top: calc(var(--desktop-chat-header-offset, 60px) + var(--desktop-pinned-bar-h, 44px) + var(--desktop-chat-chrome-gap, 8px));
        padding-top: calc(var(--desktop-chat-header-offset, 60px) + var(--desktop-pinned-bar-h, 44px) + var(--desktop-chat-chrome-gap, 8px)) !important;
    }

    .chat-view.chat-view--auto-translate:not(.chat-view--has-pinned) > .messages-container {
        scroll-padding-top: calc(var(--desktop-chat-header-offset, 60px) + 40px);
        padding-top: calc(var(--desktop-chat-header-offset, 60px) + 40px) !important;
    }

    .chat-view.chat-view--auto-translate.chat-view--has-pinned > .messages-container {
        scroll-padding-top: calc(var(--desktop-chat-header-offset, 60px) + var(--desktop-pinned-bar-h, 44px) + var(--desktop-chat-chrome-gap, 8px) + 40px);
        padding-top: calc(var(--desktop-chat-header-offset, 60px) + var(--desktop-pinned-bar-h, 44px) + var(--desktop-chat-chrome-gap, 8px) + 40px) !important;
    }

    /* Сообщения - белые слева, серые справа */
    .message {
        max-width: 70% !important;
        width: fit-content !important;
        align-self: flex-start !important;
        flex-direction: row !important;
    }
    .message.own {
        align-self: flex-end !important;
        flex-direction: row-reverse !important;
    }
    .message-content {
        background: var(--msg-peer-bg) !important; /* пузырь собеседника */
        border: none !important;
        border-radius: var(--xam-message-radius, 14px) !important;
        padding: 6px 10px !important;
        color: #ffffff !important; /* текст собеседника белый, как на ПК */
    }
    .message.own .message-content {
        background: var(--msg-own-bg) !important; /* пузырь моих сообщений */
        border: none !important;
        border-radius: var(--xam-message-radius, 14px) !important;
        color: #ffffff !important; /* текст моих сообщений белый */
        flex: 0 1 auto !important;
        width: fit-content !important;
        max-width: min(30ch, 100%) !important;
        min-width: 0 !important;
    }
    .message.emoji-only .message-content,
    .message.own.emoji-only .message-content {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        max-width: none !important;
        padding: 2px 6px !important;
    }
    .message-text {
        color: #ffffff !important;
        font-size: 15.5px !important;
        line-height: 1.3 !important;
    }
    /* 1–2 эмодзи: не даём общему !important сжать big emoji на ПК */
    .message.emoji-only.big-1 .message-text {
        font-size: 84px !important;
        line-height: 1 !important;
    }
    .message.emoji-only.big-2 .message-text {
        font-size: 64px !important;
        line-height: 1 !important;
    }
    .message.emoji-only.big-1 .message-text img.twemoji,
    .message.emoji-only.big-1 .message-text .tg-emoji,
    .message.emoji-only.big-1 .message-text .tg-emoji--animated {
        width: 84px !important;
        height: 84px !important;
    }
    .message.emoji-only.big-2 .message-text img.twemoji,
    .message.emoji-only.big-2 .message-text .tg-emoji,
    .message.emoji-only.big-2 .message-text .tg-emoji--animated {
        width: 64px !important;
        height: 64px !important;
    }
    .message.own .message-text {
        color: #ffffff !important;
    }
    .message.own .message-time {
        color: rgba(255, 255, 255, 0.7) !important;
    }
    /* Message input container - плавающий composer поверх ленты */
    .message-input-container {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-top: none !important;
        border-radius: 0 !important;
        padding: 0 0 24px 0 !important;
        margin: 0 !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--composer-keyboard-inset, 0px) !important;
        z-index: 12 !important;
        pointer-events: none !important;
    }
    .message-input::placeholder {
        color: rgba(255, 255, 255, 0.8) !important;
    }
    /* Список чатов: фон панели уже у .chats-section, лента прозрачная */
    .chats-section {
        background: var(--chats-drum-panel, #212121) !important;
    }
    .chats-list {
        background: transparent !important;
    }
    /* Chat items - без фона, только аватарки как на скрине */
    .chat-item,
    .chat-item:nth-child(even) {
        background: transparent !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 12px 16px !important;
    }
    .chat-item:hover {
        background: rgba(255, 255, 255, 0.04) !important;
    }
    /* Выбранный чат — цвет элементов */
    .chat-item.active,
    .chat-item.active:nth-child(even),
    .chat-item.active:hover {
        background: var(--xam-chat-active-bg, #503184) !important;
        cursor: default !important;
    }
    /* Search bar в sidebar */
    .sidebar-search-bar {
        background: #222222 !important;
        border: none !important;
        border-radius: 999px !important;
        height: 50px !important;
        padding: 0 12px 0 14px !important;
        box-sizing: border-box;
    }
    .sidebar-search-input {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 400 !important;
    }
    .sidebar-search-input:focus {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }
    .sidebar-search-input::placeholder {
        color: #ffffff !important;
        opacity: 1 !important;
    }
    /* No chat screen */
    .no-chat {
        background: transparent !important;
    }
    .no-chat .no-chat-content {
        display: none !important;
    }
    /* Messenger container */
    .messenger-container {
        background: #000000 !important;
        padding: 0 !important;
    }
    /* Переопределение для theme-style-glass и theme-light — непрозрачные сообщения, свои фиолетовые */
    body.theme-style-glass .message-content,
    body.theme-light .message-content {
        background: var(--msg-peer-bg) !important;
        border: none !important;
    }
    body.theme-style-glass .message.own .message-content,
    body.theme-light .message.own .message-content {
        background: var(--msg-own-bg) !important;
        border: none !important;
    }
    body.theme-style-glass .message.call-message .call-message-card,
    body.theme-light .message.call-message .call-message-card {
        background: var(--msg-peer-bg) !important;
        border: none !important;
        color: #ffffff !important;
    }
    body.theme-style-glass .message.call-message.own .call-message-card,
    body.theme-light .message.call-message.own .call-message-card {
        background: var(--msg-own-bg) !important;
        border: none !important;
        color: #ffffff !important;
    }
    body.theme-style-glass .message.own .message-text,
    body.theme-light .message.own .message-text {
        color: #ffffff !important;
    }
    body.theme-style-glass .message.own .message-time,
    body.theme-light .message.own .message-time {
        color: rgba(255, 255, 255, 0.9) !important;
    }
}


@media (max-width: 768px) {
    .sidebar-header {
        display: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 0 !important;
        border: 0 !important;
    }

    /* Список чатов: без выделения текста (ник / превью / время) */
    .sidebar,
    .sidebar .chats-section,
    #chats-list,
    #chats-list .chat-item,
    #chats-list .chat-item *,
    #chats-list .chat-item-shell,
    #chats-list .chat-name,
    #chats-list .chat-name-text,
    #chats-list .chat-last-message,
    #chats-list .chat-drum-time,
    #chats-list .chat-meta {
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
    }

    /* Убрать белую полоску active (border-left) — сдвигает аватар */
    .chat-item.active,
    .chat-item.active:hover,
    .chat-item:hover,
    body.theme-style-glass .chat-item.active,
    body.theme-style-glass .chat-item.active:hover,
    body.theme-style-glass .chat-item:hover,
    #chats-list.chats-list--drum .chat-item.active,
    #chats-list.chats-list--drum .chat-item.active:hover {
        border-left: none !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* На телефоне не подсвечиваем «последний открытый» чат */
    .chat-item.active,
    .chat-item.active:nth-child(even),
    .chat-item.active:hover,
    body.theme-style-glass .chat-item.active,
    body.theme-style-glass .chat-item.active:hover,
    #chats-list.chats-list--drum .chat-item.active,
    #chats-list.chats-list--drum .chat-item.active:hover {
        background: transparent !important;
        cursor: pointer !important;
    }

    .sidebar.calls-open #mobile-top-nick-pill-wrap {
        display: none !important;
    }

    .sidebar.search-open #mobile-top-nick-pill-wrap {
        display: none !important;
    }

    /* Чат (мобилка): верхняя панель как в списке чатов — назад · ник · аватар */
    .chat-header {
        display: none !important;
    }

    .xam-visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    #chat-top-overlay.chat-top-overlay {
        z-index: 12;
        pointer-events: none !important;
    }

    #chat-top-overlay .mobile-top-pill-btn,
    #chat-top-overlay .mobile-top-nick-pill,
    #chat-top-overlay .chat-top-overlay-nick-pill,
    #chat-top-overlay #chat-top-end-pill,
    #chat-top-overlay .chat-top-overlay-end-pill,
    #chat-top-overlay #chat-top-call-btn,
    #chat-top-overlay .chat-top-end-pill-call {
        pointer-events: auto !important;
    }

    #chat-top-overlay[aria-hidden="true"] {
        display: none !important;
    }

    #chat-top-overlay[aria-hidden="false"] {
        display: grid !important;
    }

    .chat-top-overlay-nick-pill {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
        min-height: 42px;
        padding: 4px 20px 5px;
        gap: 0;
        /* Как в iOS Telegram: плашка сужается под ширину ника/статуса,
           а не растягивается до минимальной ширины */
        min-width: 0;
    }

    .chat-top-overlay-nick-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 0;
        max-width: 100%;
        width: auto;
        gap: 1px;
    }

    .chat-top-overlay-nick-pill .mobile-top-nick-pill-track {
        width: auto;
        max-width: 100%;
        text-align: center;
    }

    .chat-top-overlay-nick-pill .mobile-top-nick-pill-text,
    #chat-user-name-mobile-text {
        font-family: 'Arteks', 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
        /* Фиксируем высоту строки, чтобы подгрузка Arteks (иные метрики шрифта)
           не меняла высоту плашки ника на ~1px после полной загрузки страницы */
        line-height: 20px;
    }

    .chat-top-overlay-status {
        display: block;
        width: auto;
        max-width: 100%;
        margin-top: 0;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.1;
        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        color: rgba(255, 255, 255, 0.62);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    .chat-top-overlay-status.online {
        color: rgba(134, 239, 172, 0.95);
    }

    .chat-top-overlay-status:empty {
        display: none;
    }

    .chat-top-overlay-avatar-btn {
        padding: 0 !important;
        overflow: visible !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .chat-top-overlay-avatar-btn .chat-top-overlay-avatar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.2);
        font-weight: 700;
        color: rgba(255, 255, 255, 0.95);
        font-size: 16px;
        overflow: hidden;
        pointer-events: none;
    }

    .chat-top-overlay-ultra-badge {
        position: absolute;
        left: 50%;
        bottom: -1px;
        transform: translate(-50%, 24%);
        z-index: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
        pointer-events: none;
    }

    .chat-top-overlay-ultra-badge[hidden] {
        display: none !important;
    }

    .chat-top-overlay-ultra-badge::before {
        content: '';
        position: absolute;
        inset: 1px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.72);
        filter: blur(4px);
        z-index: -1;
        pointer-events: none;
    }

    .chat-top-overlay-ultra-badge img,
    .chat-top-overlay-ultra-badge svg {
        width: 18px;
        height: 18px;
        object-fit: contain;
        color: #ffffff;
        display: block;
        filter:
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.95))
            drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85))
            drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
        pointer-events: none;
    }

    .chat-top-overlay-avatar > img,
    .chat-top-overlay-avatar > video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
    }

    .chat-top-overlay-avatar > svg {
        position: relative;
        z-index: 1;
    }

    .chat-top-overlay-nick-pill .mobile-top-nick-pill-text.support-name {
        color: rgba(255, 255, 255, 0.95);
    }

    /* Чат (мобилка): без mask на ленте — давал тёмную полосу на пол-экрана */
    .chat-view::before,
    .chat-view::after {
        display: none !important;
    }

    .chat-view-top-blur {
        display: none !important;
    }

    .chat-view > .messages-container {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .chat-top-menu {
        position: fixed;
        top: 100px;
        right: 14px;
        width: min(66vw, 248px);
        max-width: 248px;
        border-radius: 20px;
        background: rgba(20, 20, 20, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        padding: 6px 0;
        z-index: 30;
        pointer-events: auto;
        opacity: 1;
        transform: translateY(0) scale(1);
        transform-origin: top right;
        transition: opacity 180ms ease, transform 180ms ease;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .chat-top-menu.hidden {
        display: block !important;
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
        pointer-events: none;
    }

    .chat-top-menu-item {
        width: 100%;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.96);
        text-align: left;
        font-size: 15px;
        line-height: 1.2;
        padding: 10px 16px;
        cursor: pointer;
    }

    .chat-top-menu-item:active {
        background: rgba(255, 255, 255, 0.09);
    }

    .messages-container {
        padding-top: 104px !important;
        /* Лента уходит под плавающий composer (как Telegram Web) */
        padding-bottom: calc(var(--mobile-composer-inset, 68px) + var(--xam-safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
    }

    /* Ввод (мобилка): composer поверх ленты, без flex-«полосы» снизу */
    .message-input-container {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        padding-bottom: var(--xam-safe-bottom, env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--composer-keyboard-inset, 0px) !important;
        margin: 0 !important;
        z-index: 12 !important;
        pointer-events: none !important;
        --composer-btn-size: 40px;
        /* Кнопка mic/send чуть шире круга (мягкая капсула) */
        --composer-send-w: 46px;
        --composer-pill-min-h: 40px;
        --composer-row-gap: 6px;
        transition: bottom 0.05s linear;
    }

    /* XAMChat WebView: shell follows visualViewport (--app-height / --app-top), no pan-offset hacks */
    html.xam-embedded-host,
    html.xam-embedded-host body {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--app-top, 0px) !important;
        width: 100% !important;
        height: var(--app-height) !important;
        max-height: var(--app-height) !important;
        min-height: var(--app-height) !important;
        overflow: hidden !important;
    }

    html.xam-embedded-host .messenger-container,
    html.xam-embedded-host .screen,
    html.xam-embedded-host .chat-area,
    html.xam-embedded-host .chat-view {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
    }

    body.android-app .message-input-container,
    html.xam-embedded-host .message-input-container {
        bottom: 0 !important;
        transition: none !important;
    }

    /* Header/pins stay in normal fixed positions inside the resized shell */
    html.xam-embedded-host #chat-top-overlay.mobile-top-nick-pill-wrap {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 44px !important;
        transition: none !important;
        will-change: auto;
        overflow: visible !important;
    }

    html.xam-embedded-host .mobile-top-nick-pill-wrap:not(#chat-top-overlay) {
        top: 44px !important;
    }

    html.xam-embedded-host .chat-view > .pinned-messages-bar:not(.hidden),
    html.xam-embedded-host #pinned-messages-bar:not(.hidden) {
        top: calc(44px + var(--mobile-top-btn-size, 46px) + 6px) !important;
        position: fixed !important;
        transition: none !important;
        will-change: auto;
    }

    /* Когда шапка монтируется в body, возвращаем верхний градиент/blur прямо на ней */
    html.xam-embedded-host #chat-top-overlay[aria-hidden="false"]::before {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: calc(104px + env(safe-area-inset-top, 0px));
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.62) 0%,
            rgba(0, 0, 0, 0.28) 42%,
            rgba(0, 0, 0, 0.08) 72%,
            rgba(0, 0, 0, 0) 100%
        );
    }

    html.xam-embedded-host #chat-top-overlay[aria-hidden="false"]::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: calc(80px + env(safe-area-inset-top, 0px));
        z-index: -1;
        pointer-events: none;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        background: none !important;
        -webkit-mask-image: linear-gradient(
            to bottom,
            #000 0%,
            rgba(0, 0, 0, 0.82) 36%,
            rgba(0, 0, 0, 0.34) 68%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            #000 0%,
            rgba(0, 0, 0, 0.82) 36%,
            rgba(0, 0, 0, 0.34) 68%,
            transparent 100%
        );
    }

    html.xam-embedded-host .chat-auto-translate-bar:not(.hidden) {
        top: calc(44px + var(--mobile-top-btn-size, 46px) + 14px) !important;
    }

    html.xam-embedded-host .chat-view.chat-view--has-pinned .chat-auto-translate-bar:not(.hidden) {
        top: calc(44px + var(--mobile-top-btn-size, 46px) + 14px + 58px) !important;
    }

    .message-input-container::after {
        display: none !important;
        content: none !important;
    }

    /* Чат (мобилка): как было до попыток вырезать фон — без клипа и без JS */
    .chat-area {
        background: transparent !important;
    }

    .chat-area::before,
    .chat-area::after {
        position: absolute !important;
        inset: 0 !important;
    }

    .scroll-to-bottom-btn {
        position: fixed !important;
    }

    .input-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 !important;
        padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)) !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .input-panel > .composer-main-row {
        align-items: flex-end !important;
        gap: var(--composer-row-gap) !important;
    }

    /* Хитбокс только у «чипов» (как mobile-top-nick-pill-wrap сверху), не у всей полосы */
    .message-input-container .input-panel,
    .message-input-container .composer-main-row {
        pointer-events: none !important;
    }

    .message-input-container .input-attach-buttons,
    .message-input-container .message-input-pill,
    .message-input-container .voice-send-slot,
    .message-input-container .voice-recording-ui,
    .message-input-container .reply-preview:not(.hidden),
    .message-input-container .edit-preview:not(.hidden),
    .message-input-container .bot-reply-keyboard-panel:not(.hidden),
    .message-input-container.emoji-open > .emoji-picker {
        pointer-events: auto !important;
    }

    .message-input-container.has-active-reply .input-panel,
    .message-input-container.has-active-edit .input-panel {
        gap: 0 !important;
        flex-direction: column !important;
    }

    .input-panel > .reply-preview:not(.hidden) {
        padding: 8px 10px 8px 12px !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 18px !important;
        background: rgba(20, 20, 20, 0.55) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: blur(14px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* С mobile-chat-pc-look превью стыкуется к пилюле — без отдельного чипа и без transform */
    body.mobile-chat-pc-look .message-input-container.has-active-reply .input-panel > .reply-preview:not(.hidden),
    body.mobile-chat-pc-look .message-input-container.has-active-edit .input-panel > .edit-preview:not(.hidden),
    body.mobile-chat-pc-look .message-input-container.has-active-reply .input-panel > .edit-preview:not(.hidden),
    body.mobile-chat-pc-look .message-input-container.has-active-edit .input-panel > .reply-preview:not(.hidden) {
        background: var(--mobile-chat-pc-chrome, #212121) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 26px 26px 0 0 !important;
        padding: 10px 14px 6px !important;
        transform: none !important;
        transition: none !important;
    }

    /* Перебиваем glass-тему для мобилки, чтобы ничего не рисовало прямоугольник снизу */
    body.theme-style-glass .message-input-container,
    body.theme-style-glass .input-panel {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light .message-input-container,
    body.theme-light .input-panel {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .input-panel .input-row {
        display: flex !important;
        align-items: center !important;
        gap: var(--composer-row-gap) !important;
        justify-content: space-between !important;
    }

    .btn-file,
    .btn-send,
    .btn-voice {
        width: var(--composer-btn-size) !important;
        height: var(--composer-btn-size) !important;
        border-radius: 50% !important;
        border: none !important;
        background: rgba(20, 20, 20, 0.55) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: blur(14px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        -webkit-tap-highlight-color: transparent;
    }

    .btn-send,
    .btn-voice {
        width: var(--composer-send-w) !important;
        border-radius: 999px !important;
    }

    /* При наборе текста: кнопка отправки — акцент */
    .voice-send-slot.composer-has-text .btn-send {
        background: var(--xam-ui-accent, #8774E1) !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: #ffffff !important;
    }

    .voice-send-slot.composer-has-text .btn-send:active {
        background: var(--xam-ui-accent-hover, #9585e6) !important;
    }

    .btn-file:active,
    .btn-send:active,
    .btn-voice:active {
        transform: scale(0.98);
    }

    .input-attach-buttons {
        min-height: var(--composer-btn-size) !important;
        height: var(--composer-btn-size) !important;
        padding: 0 2px !important;
        gap: 0 !important;
        flex-shrink: 0 !important;
        border-radius: 999px !important;
        border: none !important;
        background: rgba(20, 20, 20, 0.55) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: blur(14px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    }

    .input-attach-buttons .btn-file,
    .input-attach-buttons .btn-emoji,
    .input-attach-buttons .btn-webapp,
    .input-attach-buttons .btn-scheduled {
        width: 34px !important;
        height: calc(var(--composer-btn-size) - 2px) !important;
        min-width: 34px !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
    }

    .input-attach-buttons .btn-file:active,
    .input-attach-buttons .btn-emoji:active,
    .input-attach-buttons .btn-webapp:active,
    .input-attach-buttons .btn-scheduled:active {
        transform: none !important;
    }

    .input-attach-buttons .btn-file svg,
    .input-attach-buttons .btn-emoji svg,
    .input-attach-buttons .btn-webapp svg,
    .input-attach-buttons .btn-scheduled svg {
        width: 20px !important;
        height: 20px !important;
    }

    .btn-file svg,
    .btn-send svg {
        width: 18px !important;
        height: 18px !important;
    }

    .btn-voice svg {
        width: 23px !important;
        height: 23px !important;
    }

    .voice-send-slot {
        width: var(--composer-send-w) !important;
        height: var(--composer-btn-size) !important;
        flex-shrink: 0 !important;
        position: relative !important;
        overflow: visible !important;
        align-self: center !important;
    }

    .voice-send-slot .btn-voice,
    .voice-send-slot .btn-send {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 999px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .message-input-pill {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: var(--composer-pill-min-h) !important;
        height: auto !important;
        border-radius: var(--composer-pill-radius, 999px) !important;
        border: none !important;
        background: rgba(26, 26, 30, 0.62) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: blur(14px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
        display: flex !important;
        align-items: flex-end !important;
        gap: 8px !important;
        padding: 4px 10px 4px 6px !important;
        overflow: visible !important;
        transition: height 0.18s ease, padding 0.18s ease, border-radius 0.18s ease;
    }

    .message-input-pill.message-input-pill--compact {
        height: var(--composer-pill-min-h) !important;
        align-items: center !important;
        padding: 0 10px 0 6px !important;
    }

    .message-input-pill.message-input-pill--compact .message-input {
        min-height: 0 !important;
        height: auto !important;
        padding: 7px 2px 7px 0 !important;
    }

    /* Android/Chrome: liquid glass (SVG displacement). iOS остаётся на blur выше. */
    body.xam-liquid-glass-enabled .message-input-container .message-input-pill,
    body.xam-liquid-glass-enabled .message-input-container .input-attach-buttons,
    body.xam-liquid-glass-enabled .message-input-container .voice-send-slot .btn-voice:not(.recording):not(.is-recording-active),
    body.xam-liquid-glass-enabled .message-input-container .voice-send-slot .btn-send,
    body.xam-liquid-glass-enabled .message-input-container .input-panel > .reply-preview:not(.hidden),
    body.xam-liquid-glass-enabled .message-input-container .input-panel > .edit-preview:not(.hidden),
    body.xam-liquid-glass-enabled .message-input-container .blocked-composer-unblock-btn,
    body.xam-liquid-glass-enabled #scroll-to-bottom-btn,
    body.xam-liquid-glass-enabled #chat-top-overlay #chat-back-btn-mobile,
    body.xam-liquid-glass-enabled #chat-top-overlay .chat-top-overlay-nick-pill,
    body.xam-liquid-glass-enabled #chat-top-overlay #chat-top-avatar-btn,
    body.xam-liquid-glass-enabled .chat-view #pinned-messages-bar:not(.hidden),
    body.xam-liquid-glass-enabled .chat-view .chat-auto-translate-bar:not(.hidden),
    body.xam-liquid-glass-enabled #mobile-top-nick-pill-wrap:not(.chat-top-overlay) .mobile-top-pill-btn,
    body.xam-liquid-glass-enabled #mobile-top-nick-pill-wrap:not(.chat-top-overlay) #mobile-top-nick-pill,
    body.xam-liquid-glass-enabled #chats-bottom-pill,
    body.xam-liquid-glass-enabled .bot-inline-keyboard-btn,
    body.xam-liquid-glass-enabled #fullscreen-call-screen .pc-call-dock-pill .call-btn:not(.pc-call-dock-end),
    body.xam-liquid-glass-enabled #xam-flow-screen .flow-bottom-nav,
    body.xam-liquid-glass-enabled #xam-flow-screen .flow-header-btn,
    body.xam-liquid-glass-enabled #xam-flow-screen .flow-top-pill,
    body.xam-liquid-glass-enabled #xam-flow-screen .flow-video-pause-icon,
    body.xam-liquid-glass-enabled #xam-flow-screen .flow-profile-grid-item-menu {
        background: rgba(18, 18, 22, 0.82) !important;
        border: none !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
        -webkit-backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
    }

    /* Android/Chrome: стекло и на кнопке «завершить», но только когда нет красного градиента */
    body.xam-liquid-glass-enabled #fullscreen-call-screen:not(.pc-call-no-video) .pc-call-dock-pill .call-btn.pc-call-dock-end {
        background: rgba(18, 18, 22, 0.82) !important;
        border: none !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
        -webkit-backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
    }

    /* Стекло и на «завершить» в том числе при выключенном видео */
    body.xam-liquid-glass-enabled #fullscreen-call-screen .pc-call-dock-pill .call-control-btn.end-call-btn.pc-call-dock-end,
    body.xam-liquid-glass-enabled #fullscreen-call-screen .pc-call-dock-pill .call-btn.end-call-btn.pc-call-dock-end,
    body.xam-liquid-glass-enabled #fullscreen-call-screen .pc-call-dock-pill .call-btn.pc-call-dock-end {
        background: rgba(18, 18, 22, 0.82) !important;
        border: none !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
        -webkit-backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
    }

    body.xam-liquid-glass-enabled .bot-inline-keyboard-btn:hover:not(:disabled) {
        background: rgba(24, 24, 30, 0.82) !important;
    }

    body.xam-liquid-glass-enabled .bot-inline-keyboard-btn:active:not(:disabled) {
        background: rgba(28, 28, 34, 0.88) !important;
    }

    body.xam-liquid-glass-enabled #scroll-to-bottom-btn:hover,
    body.xam-liquid-glass-enabled #scroll-to-bottom-btn:active {
        background: rgba(24, 24, 30, 0.82) !important;
    }

    /* Меню сообщения / реакции: сплошной #181818, без стекла */
    body.xam-liquid-glass-enabled .message-control-actions,
    body.xam-liquid-glass-enabled .message-reaction-panel,
    body.theme-light.xam-liquid-glass-enabled .message-control-actions,
    body.theme-light.xam-liquid-glass-enabled .message-reaction-panel {
        background: #181818 !important;
        background-color: #181818 !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.xam-liquid-glass-enabled .message-reaction-panel-scroll,
    body.theme-light.xam-liquid-glass-enabled .message-reaction-panel-scroll {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light.xam-liquid-glass-enabled .message-input-container .message-input-pill,
    body.theme-light.xam-liquid-glass-enabled .message-input-container .input-attach-buttons,
    body.theme-light.xam-liquid-glass-enabled .message-input-container .voice-send-slot .btn-voice:not(.recording):not(.is-recording-active),
    body.theme-light.xam-liquid-glass-enabled .message-input-container .voice-send-slot .btn-send,
    body.theme-light.xam-liquid-glass-enabled .message-input-container .input-panel > .reply-preview:not(.hidden),
    body.theme-light.xam-liquid-glass-enabled .message-input-container .input-panel > .edit-preview:not(.hidden),
    body.theme-light.xam-liquid-glass-enabled .message-input-container .blocked-composer-unblock-btn,
    body.theme-light.xam-liquid-glass-enabled #scroll-to-bottom-btn,
    body.theme-light.xam-liquid-glass-enabled #chat-top-overlay #chat-back-btn-mobile,
    body.theme-light.xam-liquid-glass-enabled #chat-top-overlay .chat-top-overlay-nick-pill,
    body.theme-light.xam-liquid-glass-enabled #chat-top-overlay #chat-top-avatar-btn,
    body.theme-light.xam-liquid-glass-enabled #chat-top-overlay .mobile-top-pill-btn,
    body.theme-light.xam-liquid-glass-enabled .chat-view #pinned-messages-bar:not(.hidden),
    body.theme-light.xam-liquid-glass-enabled .chat-view .chat-auto-translate-bar:not(.hidden),
    body.theme-light.xam-liquid-glass-enabled #mobile-top-nick-pill-wrap:not(.chat-top-overlay) .mobile-top-pill-btn,
    body.theme-light.xam-liquid-glass-enabled #mobile-top-nick-pill-wrap:not(.chat-top-overlay) #mobile-top-nick-pill,
    body.theme-light.xam-liquid-glass-enabled #chats-bottom-pill,
    body.theme-light.xam-liquid-glass-enabled .bot-inline-keyboard-btn,
    body.theme-light.xam-liquid-glass-enabled #fullscreen-call-screen .pc-call-dock-pill .call-btn:not(.pc-call-dock-end) {
        background: rgba(255, 255, 255, 0.78) !important;
        border: 1px solid rgba(28, 27, 34, 0.06) !important;
        box-shadow: 0 10px 28px rgba(28, 27, 34, 0.12) !important;
        color: #1C1B22 !important;
    }

    body.theme-light.xam-liquid-glass-enabled #fullscreen-call-screen:not(.pc-call-no-video) .pc-call-dock-pill .call-btn.pc-call-dock-end {
        background: rgba(255, 255, 255, 0.78) !important;
        border: 1px solid rgba(28, 27, 34, 0.06) !important;
        box-shadow: 0 10px 28px rgba(28, 27, 34, 0.12) !important;
    }

    body.theme-light.xam-liquid-glass-enabled .bot-inline-keyboard-btn:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.88) !important;
    }

    body.theme-light.xam-liquid-glass-enabled .bot-inline-keyboard-btn:active:not(:disabled) {
        background: rgba(255, 255, 255, 0.94) !important;
    }

    body.theme-light.xam-liquid-glass-enabled #scroll-to-bottom-btn:hover,
    body.theme-light.xam-liquid-glass-enabled #scroll-to-bottom-btn:active {
        background: rgba(255, 255, 255, 0.90) !important;
    }

    body.theme-light.xam-liquid-glass-enabled .message-input-container .voice-send-slot.composer-has-text .btn-send {
        background: rgba(150, 97, 241, 0.90) !important;
        color: #ffffff !important;
        border-color: rgba(150, 97, 241, 0.28) !important;
    }

    body.theme-light.xam-liquid-glass-enabled #mobile-top-nick-pill-wrap .mobile-top-nick-pill-text,
    body.theme-light.xam-liquid-glass-enabled #chat-top-overlay .mobile-top-nick-pill-text,
    body.theme-light.xam-liquid-glass-enabled #chat-top-overlay .chat-top-overlay-name,
    body.theme-light.xam-liquid-glass-enabled #chats-bottom-pill .chats-bottom-pill-btn {
        color: #1C1B22 !important;
    }
    body.theme-light.xam-liquid-glass-enabled #chats-bottom-pill .chats-bottom-pill-btn.is-active {
        color: #AE22FF !important;
    }
    body.theme-light.xam-liquid-glass-enabled #chat-top-overlay .mobile-top-pill-btn svg,
    body.theme-light.xam-liquid-glass-enabled #mobile-top-nick-pill-wrap .mobile-top-pill-btn svg,
    body.theme-light.xam-liquid-glass-enabled #chats-bottom-pill .chats-bottom-pill-btn svg {
        color: #1C1B22 !important;
        stroke: currentColor !important;
    }

    body.xam-liquid-glass-enabled .message-input-container.emoji-open > .emoji-picker .emoji-picker-pill {
        background: #212121 !important;
        background-color: #212121 !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 28px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Чат (мобилка): без светлой обводки у стеклянных панелей */
    .chat-view #scroll-to-bottom-btn,
    .chat-view #chat-top-overlay .mobile-top-pill-btn,
    .chat-view #chat-top-overlay .mobile-top-nick-pill,
    .chat-view #chat-top-overlay .chat-top-overlay-nick-pill,
    .chat-view #chat-top-overlay #chat-top-avatar-btn,
    .chat-view #pinned-messages-bar:not(.hidden),
    .chat-view .chat-top-menu,
    .chat-view .voice-rec-track,
    .message-control-actions,
    .message-reaction-panel-scroll,
    .chat-view .bot-inline-keyboard-btn {
        border: none !important;
        border-color: transparent !important;
    }

    body.theme-light.xam-liquid-glass-enabled .message-input-container.emoji-open > .emoji-picker .emoji-picker-pill {
        background: #212121 !important;
        background-color: #212121 !important;
        box-shadow: none !important;
        border-radius: 28px !important;
        color: #fff !important;
    }

    .btn-emoji {
        width: 34px !important;
        height: 34px !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        color: rgba(255, 255, 255, 0.92) !important;
        flex-shrink: 0 !important;
    }

/* Desktop: liquid glass только на строке ввода (composer) */
@media (min-width: 769px) {
    body.xam-liquid-glass-enabled-desktop .message-input-container .message-input-pill {
        background: rgba(18, 18, 22, 0.72) !important;
        border: none !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 0 rgba(0, 0, 0, 0.28),
            0 12px 32px rgba(0, 0, 0, 0.55) !important;

        /* Fallback для браузеров без url(#filter): меньше blur, чтобы стекло «читалось» */
        backdrop-filter: blur(6px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(6px) saturate(160%) !important;

        /* Если поддерживается — включаем displacement */
        backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
        -webkit-backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;

        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    /* Псевдо "жидкость" для десктоп-браузеров без backdrop-filter:url(...) */
    body.xam-liquid-glass-enabled-desktop .message-input-container .message-input-pill::before {
        content: '';
        position: absolute;
        inset: -18px;
        pointer-events: none;
        border-radius: inherit;
        z-index: 0;
        opacity: 0.58;
        background:
            radial-gradient(circle at 22% 18%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 14%, transparent 36%),
            radial-gradient(circle at 74% 82%, rgba(255,255,255,0.14) 0%, transparent 38%),
            url("/liquid-glass-noise.png");
        background-size: 140% 140%, 160% 160%, 380px 380px;
        background-position: 0% 0%, 100% 100%, 0px 0px;
        mix-blend-mode: soft-light;
        filter: blur(0.4px) saturate(120%);
        animation: xamDesktopGlassDrift 9s ease-in-out infinite;
    }

    body.xam-liquid-glass-enabled-desktop .message-input-container .message-input-pill::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        z-index: 1;
        background: radial-gradient(circle at 18% 10%, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.12) 10%, transparent 26%);
        opacity: 0.8;
        mix-blend-mode: screen;
    }

    /* Контент строки ввода поверх слоёв */
    body.xam-liquid-glass-enabled-desktop .message-input-container .message-input-pill > * {
        position: relative;
        z-index: 2;
    }

    @keyframes xamDesktopGlassDrift {
        0%, 100% {
            background-position: 0% 0%, 100% 100%, 0px 0px;
            transform: translate3d(0, 0, 0) scale(1);
        }
        50% {
            background-position: 100% 35%, 0% 65%, 140px 90px;
            transform: translate3d(0, -2px, 0) scale(1.02);
        }
    }

    body.theme-light.xam-liquid-glass-enabled-desktop .message-input-container .message-input-pill {
        background: rgba(40, 40, 46, 0.52) !important;
    }
}

    .input-attach-buttons .btn-file {
        width: 34px !important;
        height: calc(var(--composer-btn-size) - 2px) !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .message-input {
        min-height: 20px !important;
        max-height: 132px !important;
        height: auto !important;
        padding: 1px 2px 1px 0 !important;
        font-size: 16px !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: rgba(255, 255, 255, 0.95) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        resize: none !important;
        white-space: pre-wrap !important;
        word-break: break-word !important;
        line-height: 1.35 !important;
        flex: 1 1 auto !important;
        field-sizing: content;
    }

    .message-input::placeholder {
        color: rgba(255, 255, 255, 0.45) !important;
        font-family: 'Arteks', 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
    }

    .message-input-container .input-panel {
        transition: min-height 0.28s ease, padding-bottom 0.28s ease;
    }

    .message-input-container.voice-recording-mode:not(.voice-inline-mode) .composer-main-row > :not(.voice-recording-ui),
    .message-input-container.voice-preview-mode:not(.voice-inline-mode) .composer-main-row > :not(.voice-recording-ui) {
        display: none !important;
    }

    .message-input-container.voice-inline-mode .composer-main-row .input-attach-buttons,
    .message-input-container.voice-inline-mode .composer-main-row .message-input-pill,
    .message-input-container.voice-inline-mode .composer-main-row .voice-send-slot {
        display: flex !important;
    }

    .message-input-container.voice-inline-mode .input-attach-buttons.is-voice-rec-timer > .voice-rec-slot-ghost {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .message-input-container.voice-inline-mode .message-input-pill.is-voice-rec-eq > #message-input,
    .message-input-container.voice-inline-mode .message-input-pill.is-voice-rec-eq > .message-input,
    .message-input-container.voice-inline-mode .message-input-pill.is-voice-rec-actions > #message-input,
    .message-input-container.voice-inline-mode .message-input-pill.is-voice-rec-actions > .message-input {
        display: none !important;
    }

    .message-input-container.voice-inline-mode .message-input-pill.is-voice-rec-eq > .voice-live-eq {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .message-input-container.voice-inline-mode .message-input-pill.is-voice-rec-eq > .voice-live-eq-canvas {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 8 !important;
    }

    .message-input-container.voice-inline-mode .message-input-pill.is-voice-rec-actions > .voice-preview-actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.xam-liquid-glass-enabled .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice.recording,
    body.xam-liquid-glass-enabled .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice.is-recording-active,
    body.theme-light.xam-liquid-glass-enabled .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice.recording,
    body.theme-light.xam-liquid-glass-enabled .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice.is-recording-active {
        background: #ff3b4a !important;
        border: none !important;
        color: #ffffff !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .message-input-container.voice-recording-mode .input-panel,
    .message-input-container.voice-preview-mode .input-panel {
        padding-bottom: 0 !important;
    }

    .message-input-container.is-voice-expanded .input-panel {
        min-height: 0;
    }

    .message-input-container.voice-recording-mode .composer-main-row,
    .message-input-container.voice-preview-mode .composer-main-row {
        width: 100%;
        align-items: center;
    }

    .message-input-container.voice-inline-mode .composer-main-row {
        justify-content: flex-start;
        gap: 8px;
    }

    .voice-recording-ui {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        animation: none;
    }

    .voice-rec-track {
        width: min(98%, 760px);
        height: var(--composer-pill-min-h);
        border-radius: 999px;
        border: none;
        background: rgba(20, 20, 20, 0.55);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        padding: 0 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .voice-rec-track--recording {
        justify-content: space-between;
    }

    .voice-rec-track--preview {
        justify-content: flex-start;
        gap: 8px;
    }

    .voice-rec-timer {
        font-size: clamp(24px, 7vw, 34px);
        line-height: 1;
        font-weight: 400;
        letter-spacing: 0.2px;
        color: rgba(255, 255, 255, 0.97);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .voice-rec-timer--preview {
        font-size: clamp(22px, 6.6vw, 32px);
    }

    .voice-rec-icon-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.94);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .voice-rec-icon-btn:active {
        transform: scale(0.97);
    }

    .voice-rec-icon-btn--stop,
    .voice-rec-icon-btn--delete {
        color: #ff4d5a;
    }

    .voice-rec-icon-btn--send {
        color: rgba(255, 255, 255, 0.98);
    }

}

/* Мобильные цвета сообщений: собеседник серый, мои фиолетовые, без стекла и без прозрачности */
@media (max-width: 768px) {
    body:not(.theme-light) .messages-container .message .message-content {
        background: var(--msg-peer-bg) !important;
        border-radius: var(--xam-message-radius, 14px) !important;
        border: none !important;
        color: #ffffff !important;
        opacity: 1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body:not(.theme-light) .messages-container .message.own .message-content {
        background: var(--msg-own-bg) !important;
        border: none !important;
        border-radius: var(--xam-message-radius, 14px) !important;
        color: #ffffff !important;
        opacity: 1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body:not(.theme-light) .messages-container .message .message-text,
    body:not(.theme-light) .messages-container .message.own .message-text {
        color: #ffffff !important;
    }
    /* Перебиваем стеклянную тему на мобилках (тёмная), чтобы пузырь был полностью непрозрачный.
       Светлую тему не трогаем — у неё свои цвета ниже. */
    body.theme-style-glass:not(.theme-light) .messages-container .message .message-content {
        background: var(--msg-peer-bg) !important;
        border: none !important;
    }
    body.theme-style-glass:not(.theme-light) .messages-container .message.own .message-content {
        background: var(--msg-own-bg) !important;
        border: none !important;
    }

    body:not(.theme-light) .messages-container .message.call-message .call-message-card {
        background: var(--msg-peer-bg) !important;
        border: none !important;
        color: #ffffff !important;
        max-width: min(280px, calc(100vw - 72px)) !important;
        padding: 8px 12px !important;
        gap: 0 !important;
        border-radius: var(--xam-message-radius, 16px) !important;
    }

    body:not(.theme-light) .messages-container .message.call-message.own .call-message-card {
        background: var(--msg-own-bg) !important;
        border: none !important;
        color: #ffffff !important;
    }

    .messages-container .message.call-message .call-message-icon-square,
    .messages-container .message.call-message .call-card-phone-svg {
        display: none !important;
    }

    .messages-container .message.call-message .call-message-title {
        font-size: 14px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }

    .messages-container .message.call-message .call-message-sub {
        gap: 5px !important;
    }

    .messages-container .message.call-message .call-message-duration,
    .messages-container .message.call-message .call-message-range {
        font-size: 12px !important;
        line-height: 1.15 !important;
    }

    body.theme-style-glass .messages-container .message.call-message .call-message-card,
    body.theme-light .messages-container .message.call-message .call-message-card {
        background: var(--msg-peer-bg) !important;
        border: none !important;
        color: #ffffff !important;
    }

    body.theme-style-glass .messages-container .message.call-message.own .call-message-card,
    body.theme-light .messages-container .message.call-message.own .call-message-card {
        background: var(--msg-own-bg) !important;
        border: none !important;
        color: #ffffff !important;
    }
}

/* Цепочка пузырей от одного автора: скругления как в референсе (свои справа сливаются, чужие — слева) */
:root {
    --msg-bubble-r: 18px;
    --msg-bubble-s: 9px;
}

.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-middle,
.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-last {
    margin-top: -2px;
}

/* Пауза ≥5 мин между сообщениями — чуть больше обычного отступа смены автора */
.messages-container .message.message-time-gap {
    margin-top: 10px !important;
}

/* У своих не ужимаем вертикально — иначе накладка и «перевёрнутый» вид */
.messages-container .message.own.message-bubble-middle:not(.emoji-only),
.messages-container .message.own.message-bubble-last:not(.emoji-only) {
    margin-top: 0 !important;
}

.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-single.own .message-content,
.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-first.own .message-content {
    border-radius: var(--msg-bubble-r) var(--msg-bubble-r) var(--msg-bubble-s) var(--msg-bubble-r) !important;
}

.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-middle.own .message-content {
    border-radius: var(--msg-bubble-r) var(--msg-bubble-s) var(--msg-bubble-s) var(--msg-bubble-r) !important;
}

.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-last.own .message-content {
    border-radius: var(--msg-bubble-r) var(--msg-bubble-s) 0 var(--msg-bubble-r) !important;
}

.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-single:not(.own) .message-content,
.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-first:not(.own) .message-content {
    border-radius: var(--msg-bubble-r) var(--msg-bubble-r) var(--msg-bubble-r) var(--msg-bubble-s) !important;
}

.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-middle:not(.own) .message-content {
    border-radius: var(--msg-bubble-s) var(--msg-bubble-r) var(--msg-bubble-r) var(--msg-bubble-s) !important;
}

.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-last:not(.own) .message-content {
    border-radius: var(--msg-bubble-s) var(--msg-bubble-r) var(--msg-bubble-r) 0 !important;
}

/* Свои: в группе подряд аватар только у последнего — !important перебивает .message-avatar { visibility: visible !important } */
.messages-container .message.own.message-bubble-first .message-avatar,
.messages-container .message.own.message-bubble-middle .message-avatar {
    visibility: hidden !important;
    pointer-events: none;
}

/* ПК: текст сообщений всегда белый (финальное переопределение, чтобы не перебивалось темами/стилями) */
@media (min-width: 1024px) {
    .messages-container .message .message-content,
    .messages-container .message .message-text,
    .messages-container .message .message-text *,
    .messages-container .message.call-message .call-message-card,
    .messages-container .message.call-message .call-message-title,
    .messages-container .message.call-message .call-message-sub,
    .messages-container .message.call-message .call-message-icon-square {
        color: #ffffff !important;
    }
}

/* ПК: компактный и аккуратный блок ввода сообщений */
@media (min-width: 1024px) {
    .message-input-container {
        padding: 0 12px 12px !important;
        align-items: stretch !important;
    }

    .input-panel {
        width: 100% !important;
        max-width: min(680px, calc(100% - 32px)) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    body.theme-style-glass .input-panel {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .input-panel > .composer-main-row {
        width: 100% !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        transition: none !important;
    }

    .composer-input-cluster {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 4px 0 5px !important;
        border-radius: var(--composer-bar-radius, 999px) var(--composer-bar-radius, 999px) 0 var(--composer-bar-radius, 999px) !important;
        background: #212121 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
        isolation: isolate !important;
        transition: border-radius 0.18s ease, max-height 0.18s ease !important;
    }

    .composer-input-cluster::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: calc(100% - 2px) !important;
        right: auto !important;
        bottom: -3px !important;
        width: 11px !important;
        height: 20px !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
        z-index: 3 !important;
        background-color: #212121 !important;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") !important;
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") !important;
        -webkit-mask-size: 100% 100% !important;
        mask-size: 100% 100% !important;
        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
        -webkit-mask-position: left bottom !important;
        mask-position: left bottom !important;
    }

    .composer-main-row.composer-main-row--multiline .composer-input-cluster::after,
    .message-input-container.voice-recording-mode .composer-input-cluster::after,
    .message-input-container.voice-preview-mode .composer-input-cluster::after {
        content: none !important;
        display: none !important;
    }

    .composer-input-cluster .message-input-pill {
        max-height: 100% !important;
        overflow: hidden !important;
    }

    .composer-input-cluster .message-input-pill .message-input {
        min-height: 0 !important;
        max-height: 42px !important;
        padding: 0 4px !important;
        line-height: 42px !important;
        box-sizing: border-box !important;
    }

    .composer-send-cluster {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    .composer-main-row .message-input-pill {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 0 4px !important;
        align-self: stretch !important;
    }

    .input-panel .input-row {
        align-items: center !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
    }

    .input-attach-buttons {
        display: contents !important;
    }

    .input-attach-buttons .btn-file,
    .input-attach-buttons .btn-emoji,
    .input-attach-buttons .btn-webapp,
    .input-attach-buttons .btn-scheduled {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .input-attach-buttons .btn-file { order: 1 !important; }
    .input-attach-buttons .btn-webapp,
    .input-attach-buttons .btn-scheduled { order: 1 !important; }
    .composer-main-row .message-input-pill { order: 2 !important; }
    .input-attach-buttons .btn-emoji { order: 3 !important; }
    .voice-send-slot { order: 5 !important; }

    .input-attach-buttons .btn-file:hover,
    .input-attach-buttons .btn-emoji:hover,
    .input-attach-buttons .btn-webapp:hover,
    .input-attach-buttons .btn-emoji.is-emoji-open {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .input-attach-buttons #emoji-hover-panel {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
    }

    .voice-send-slot {
        flex: 0 0 auto !important;
    }

    .message-input-pill {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        padding: 0 4px !important;
    }

    .voice-send-slot {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        border-radius: 999px !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        aspect-ratio: auto !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        transform: none !important;
    }

    .voice-send-slot .btn-voice,
    .voice-send-slot .btn-send {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        border-radius: 999px !important;
        border: none !important;
        background: var(--xam-ui-accent, #8774E1) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        aspect-ratio: auto !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        transform: none !important;
    }

    .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice.recording,
    .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice.is-recording-active {
        background: #ff3b4a !important;
        background-color: #ff3b4a !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        color: #ffffff !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .message-input {
        min-height: 0 !important;
        max-height: 42px !important;
        padding: 0 4px !important;
        font-size: 16px !important;
        line-height: 42px !important;
        box-sizing: border-box !important;
    }
}
/* Snackbar — системные уведомления слева снизу (в области чата, не в списке) */
.snackbar-notification {
    position: fixed;
    bottom: 24px;
    left: 24px;
    transform: translateY(100px);
    background: rgba(50, 50, 55, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    z-index: 10002;
    max-width: min(400px, calc(100vw - 48px));
    width: auto;
    min-width: 260px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
    user-select: none;
}

.snackbar-notification:active {
    cursor: grabbing;
}

.snackbar-notification.show {
    transform: translateY(0);
    opacity: 1;
}

.snackbar-notification.hide {
    transform: translateY(100px);
    opacity: 0;
}

.desktop-browser-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    pointer-events: none;
}

.desktop-browser-window {
    position: fixed;
    top: 34px;
    left: 56px;
    width: min(1120px, calc(100vw - 96px));
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 72px);
    min-height: 520px;
    background: #0d0d0d;
    border: 2px solid rgba(255, 255, 255, 0.78);
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
}

.desktop-browser-topbar {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: rgba(22, 22, 22, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    flex: 0 0 auto;
}

.desktop-browser-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.desktop-browser-control {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: #dedede;
    color: #242424;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.desktop-browser-control-collapse {
    background: #8b5cf6;
    color: #ffffff;
}

.desktop-browser-control-collapse svg {
    display: block;
}

.desktop-browser-control-close {
    font-size: 40px;
    background: transparent !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

.desktop-browser-url {
    min-width: 0;
    flex: 1 1 auto;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 10px 16px;
}

.desktop-browser-frame {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border: none;
    background: #f3f4f6;
    display: block;
}

.desktop-browser-frame-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #f3f4f6;
    overflow: hidden;
}

.desktop-browser-fallback {
    position: absolute;
    left: 0;
    right: 0;
    top: 56px;
    bottom: 0;
    background: #0f0f0f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
}

.desktop-browser-fallback-title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
}

.desktop-browser-fallback-text {
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    max-width: 700px;
}

.desktop-browser-window.is-minimized {
    height: 56px;
    width: 340px;
}

.desktop-browser-window.is-minimized .desktop-browser-frame {
    display: none;
}

@media (max-width: 768px) {
    .desktop-browser-modal {
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 0.28s ease;
        pointer-events: none;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .desktop-browser-modal.mobile-mode {
        pointer-events: auto;
    }

    .desktop-browser-modal.mobile-mode.is-open {
        opacity: 1;
    }

    .desktop-browser-window {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: 0;
        width: min(100vw, 520px) !important;
        height: min(92vh, calc(var(--app-height, 100vh) - 12px));
        max-height: 92vh;
        min-height: min(72vh, calc(var(--app-height, 100vh) - 48px));
        border-radius: 28px 28px 0 0;
        border: none;
        background: #2b2b2b;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
        transform: translateY(110%);
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .desktop-browser-modal.mobile-mode.is-open .desktop-browser-window {
        transform: translateY(0);
    }

    .desktop-browser-modal.mobile-mode.is-closing .desktop-browser-window {
        transform: translateY(110%);
    }

    .desktop-browser-topbar {
        height: 52px;
        padding: 8px 12px 6px;
        cursor: default;
        background: #2b2b2b;
        border-bottom: none;
        gap: 10px;
        position: relative;
        z-index: 3;
    }

    .desktop-browser-fallback {
        top: 52px;
        padding: 16px;
    }

    .desktop-browser-fallback-title {
        font-size: 18px;
    }

    .desktop-browser-fallback-text {
        font-size: 14px;
    }

    .desktop-browser-controls {
        gap: 0;
    }

    .desktop-browser-control {
        width: 38px;
        height: 38px;
    }

    .desktop-browser-control-collapse {
        background: #8b5cf6;
    }

    .desktop-browser-control-collapse svg {
        width: 18px;
        height: 18px;
    }

    .desktop-browser-url {
        background: #1f1f1f;
        color: #ffffff;
        border-radius: 999px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 600;
        min-height: 38px;
        display: flex;
        align-items: center;
    }

    .desktop-browser-frame {
        background: #f3f4f6;
    }
}

.snackbar-text {
    flex: 1;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.snackbar-timer {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Final mobile override: единый фон с чатом */
@media (max-width: 768px) {
    #user-profile-modal .modal-content.user-profile-modal,
    #user-profile-modal .user-profile-modal,
    #user-profile-modal .profile-header,
    #user-profile-modal .profile-actions,
    #user-profile-modal .profile-actions-row,
    #user-profile-modal .profile-info,
    #user-profile-modal .profile-info-card,
    #user-profile-modal .profile-info-card .profile-info-item,
    #user-profile-modal .profile-media,
    #user-profile-modal .profile-media-card,
    #user-profile-modal .profile-media-content {
        background: var(--bg-dark) !important;
        background-color: var(--bg-dark) !important;
    }

    #user-profile-modal .profile-media-tabs-pill {
        background: #171717 !important;
        background-color: #171717 !important;
    }
}

.snackbar-timer-text {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

/* ПК: уведомление в левом нижнем углу области чата (не в списке) */
@media (min-width: 769px) {
    .snackbar-notification {
        left: 374px;
        bottom: 24px;
        max-width: min(420px, calc(100vw - 398px));
    }
}

@media (max-width: 768px) {
    .snackbar-notification {
        display: none !important;
    }
}

/* Desktop light theme: цвета/обои отданы в /light-theme.css (единый слой) */
@media (min-width: 769px) {
    body.theme-light {
        /* legacy blue-gray palette disabled — see light-theme.css */
    }
}

/* DISABLED legacy orphaned light rules — see /light-theme.css */
@media (min-width: 99999px) {
    body.theme-light .sidebar {
        background: #f4f8fd !important;
        border-right: 1px solid #d7e1ec !important;
    }

    body.theme-light .sidebar::before,
    body.theme-light .sidebar::after {
        content: none !important;
        background: none !important;
        animation: none !important;
        opacity: 0 !important;
    }

    body.theme-light .sidebar-header,
    body.theme-light .chat-header,
    body.theme-light .input-panel {
        background: #ffffff !important;
        border-color: #d8e2ee !important;
    }

    body.theme-light .message-input-container {
        background: transparent !important;
        border: none !important;
    }

    body.theme-light .chat-item.active,
    body.theme-light .chat-item.active:hover {
        background: #dfeaf8 !important;
    }

    body.theme-light .chat-item.active .chat-name,
    body.theme-light .chat-item.active .chat-last-message {
        color: #18314d !important;
    }

    body.theme-light .chat-view,
    body.theme-light .chat-area,
    body.theme-light .messages-container {
        background: #edf3fa !important;
    }

    body.theme-light .message-content {
        background: #ffffff !important;
        border: 1px solid #dbe5f1 !important;
        color: #243447 !important;
    }

    body.theme-light .message.own .message-content {
        background: #EFFDDE !important;
        border: 1px solid #D8EFC2 !important;
        color: #2A3A1D !important;
    }

    body.theme-light .message-time {
        color: #6f8093 !important;
    }

    body.theme-light .sidebar-bottom-panel.desktop-only {
        background: #ffffff;
        border: 1px solid #c5d0dd;
        box-shadow: 0 8px 18px rgba(100, 126, 155, 0.22);
    }

    body.theme-light .sidebar-bottom-pill-btn {
        color: #3b4f66;
    }

    body.theme-light .sidebar-bottom-pill-btn:hover {
        background: rgba(64, 90, 119, 0.1) !important;
    }
}

/* DISABLED: legacy Desktop light telegram palette — superseded by /light-theme.css */
@media (min-width: 99999px) {
    body.theme-light,
    body.theme-light.theme-style-glass {
        background: #e9edf3 !important;
        color: #1f2a36 !important;
    }

    body.theme-light .messenger-container,
    body.theme-light .chat-area,
    body.theme-light .chat-view,
    body.theme-light .messages-container {
        background:
            radial-gradient(120% 95% at 50% 50%, rgba(102, 176, 162, 0.52) 0%, rgba(132, 190, 170, 0.4) 38%, rgba(177, 211, 180, 0.38) 70%, rgba(198, 220, 183, 0.42) 100%),
            linear-gradient(90deg, #c8daa6 0%, #90bfad 48%, #c2d7ba 100%) !important;
        color: #1f2a36 !important;
    }

    body.theme-light .sidebar {
        background: #ffffff !important;
        border-right: none !important;
    }

    body.theme-light .chats-section,
    body.theme-light .sidebar-tabs,
    body.theme-light .sidebar-tab,
    body.theme-light .chats-list {
        background: #ffffff !important;
    }

    body.theme-light .chats-section.list-avatar-glow {
        position: relative;
        isolation: isolate;
    }

    body.theme-light .chats-section.list-avatar-glow::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.35s ease;
        background:
            radial-gradient(ellipse 95% 56% at 18% 42%, rgba(var(--list-glow-c1, 233, 169, 95), 0.62) 0%, transparent 67%),
            radial-gradient(ellipse 78% 50% at 34% 46%, rgba(var(--list-glow-c2, 212, 140, 72), 0.44) 0%, transparent 63%),
            radial-gradient(ellipse 62% 44% at 12% 54%, rgba(var(--list-glow-c3, 173, 111, 58), 0.30) 0%, transparent 62%);
        filter: blur(22px) saturate(135%);
    }

    body.theme-light .chats-section.list-avatar-glow.list-avatar-glow-on::before {
        opacity: 1;
    }

    body.theme-light .chats-section.list-avatar-glow > * {
        position: relative;
        z-index: 1;
    }

    body.theme-light .sidebar-header {
        background: #ffffff !important;
        border: 1px solid #d8e2ec !important;
        border-bottom: 1px solid #d8e2ec !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light .sidebar-header .user-info {
        background: transparent !important;
    }

    body.theme-light .sidebar-header .btn-icon,
    body.theme-light .sidebar-header .header-actions .btn-icon,
    body.theme-light .sidebar-header #search-btn.btn-icon,
    body.theme-light .sidebar-header #settings-btn.btn-icon {
        background: transparent !important;
        color: #506176 !important;
    }

    body.theme-light .sidebar-header .btn-icon:hover,
    body.theme-light .sidebar-header .header-actions .btn-icon:hover {
        background: #f2f6fb !important;
    }

    /* Перебиваем тёмный drum/glass стиль шапки списка чатов */
    body.theme-light .sidebar.sidebar--chats-drum .sidebar-header,
    body.theme-light.theme-style-glass .sidebar.sidebar--chats-drum .sidebar-header {
        background: #eef1f5 !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light .sidebar.sidebar--chats-drum .sidebar-bottom-dock .sidebar-bottom-panel.desktop-only {
        background: #eef1f5 !important;
        border: none !important;
        box-shadow: none !important;
    }

    body.theme-light .sidebar.sidebar--chats-drum::after,
    body.theme-light.theme-style-glass .sidebar.sidebar--chats-drum::after {
        opacity: 1 !important;
        background-image: linear-gradient(
            to right,
            #ffffff 0%,
            rgba(255, 255, 255, 0.96) 22%,
            rgba(255, 255, 255, 0.78) 44%,
            rgba(255, 255, 255, 0.48) 66%,
            rgba(255, 255, 255, 0.18) 84%,
            transparent 100%
        ) !important;
        background-color: transparent !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

    /* В светлой теме делаем glow от аватарки заметным, как в тёмной */
    body.theme-light .chats-section.chats-section--drum {
        background: #ffffff !important;
    }

    body.theme-light .chats-section--drum .chats-drum-glow {
        opacity: 0 !important;
        filter: blur(34px) saturate(145%) !important;
        mix-blend-mode: normal !important;
        background:
            radial-gradient(ellipse 98% 58% at var(--glow-x1) var(--glow-y1), rgba(var(--glow-c1), 0.78) 0%, transparent 68%),
            radial-gradient(ellipse 82% 52% at var(--glow-x2) var(--glow-y2), rgba(var(--glow-c2), 0.56) 0%, transparent 64%),
            radial-gradient(ellipse 66% 46% at var(--glow-x3) var(--glow-y3), rgba(var(--glow-c3), 0.38) 0%, transparent 62%) !important;
    }

    body.theme-light .chats-section--drum.chats-drum-glow--on .chats-drum-glow {
        opacity: 1 !important;
    }

    body.theme-light .user-name,
    body.theme-light .chat-name,
    body.theme-light .chat-user-name,
    body.theme-light .chat-user-status,
    body.theme-light .chats-title {
        color: #1f2a36 !important;
    }

    body.theme-light .user-username,
    body.theme-light .chat-last-message {
        color: #6c7a89 !important;
    }

    body.theme-light .chat-item,
    body.theme-light .chat-item:nth-child(even) {
        background: #ffffff !important;
    }

    body.theme-light .chat-item:hover {
        background: #f2f6fb !important;
    }

    body.theme-light .chat-item.active,
    body.theme-light .chat-item.active:nth-child(even),
    body.theme-light .chat-item.active:hover {
        background: #dfe9f5 !important;
    }

    body.theme-light .chat-item.active .chat-name,
    body.theme-light .chat-item.active .chat-last-message {
        color: #213a53 !important;
    }

    /* ПК drum — светлая тема: иерархия + пилюля */
    body.theme-light #chats-list.chats-list--drum .chat-item:hover {
        background: rgba(0, 0, 0, 0.04) !important;
    }
    body.theme-light #chats-list.chats-list--drum .chat-item.active,
    body.theme-light #chats-list.chats-list--drum .chat-item.active:hover {
        background: rgba(0, 0, 0, 0.08) !important;
        box-shadow: none !important;
    }
    body.theme-light #chats-list.chats-list--drum .chats-pinned-divider {
        background: rgba(0, 0, 0, 0.12);
    }
    body.theme-light #chats-list.chats-list--drum .chat-name {
        color: #1f2a36 !important;
    }
    body.theme-light #chats-list.chats-list--drum .chat-last-message,
    body.theme-light #chats-list.chats-list--drum .chat-item.active .chat-last-message {
        color: #6c7a89 !important;
    }
    body.theme-light #chats-list.chats-list--drum .chat-drum-time,
    body.theme-light #chats-list.chats-list--drum .chat-item.active .chat-drum-time {
        color: #8a97a6 !important;
    }
    body.theme-light #chats-list.chats-list--drum .chat-item--has-unread .chat-drum-time {
        color: #8774E1 !important;
    }
    body.theme-light #chats-list.chats-list--drum {
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #ffffff 5%,
            #ffffff 95%,
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #ffffff 5%,
            #ffffff 95%,
            transparent 100%
        );
    }

    body.theme-light .chat-header {
        background: #ffffff !important;
        border-bottom: 1px solid #d9e1ea !important;
        box-shadow: none !important;
    }

    body.theme-light .messages-container {
        background:
            radial-gradient(120% 95% at 50% 50%, rgba(102, 176, 162, 0.52) 0%, rgba(132, 190, 170, 0.4) 38%, rgba(177, 211, 180, 0.38) 70%, rgba(198, 220, 183, 0.42) 100%),
            linear-gradient(90deg, #c8daa6 0%, #90bfad 48%, #c2d7ba 100%) !important;
    }

    body.theme-light .message-content,
    body.theme-light .messages-container .message .message-content {
        background: #ffffff !important;
        border: 1px solid #d9e2ec !important;
        color: #1f2a36 !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }

    body.theme-light .message.own .message-content,
    body.theme-light .messages-container .message.own .message-content {
        background: #EFFDDE !important;
        border: 1px solid #D8EFC2 !important;
        color: #2A3A1D !important;
        opacity: 1 !important;
    }

    body.theme-light .message-text,
    body.theme-light .message.own .message-text,
    body.theme-light .messages-container .message .message-text {
        color: inherit !important;
        opacity: 1 !important;
    }

    body.theme-light .message-time,
    body.theme-light .message.own .message-time {
        color: #75879a !important;
        opacity: 1 !important;
    }

    body.theme-light .message-text .msg-inline-code {
        background: rgba(0, 0, 0, 0.06);
        border-color: rgba(0, 0, 0, 0.08);
    }

    body.theme-light .message-text .message-code-block {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.08);
    }

    body.theme-light .message:not(.own) .message-spoiler {
        --spoiler-dot: rgba(72, 74, 80, 0.48);
        --spoiler-dot-dim: rgba(72, 74, 80, 0.24);
    }

    body.theme-light .message-content a,
    body.theme-light .message-text a {
        color: #2f9e44 !important;
        text-decoration-color: rgba(47, 158, 68, 0.45) !important;
    }

    body.theme-light .message-content a:visited,
    body.theme-light .message-text a:visited {
        color: #2b8a3e !important;
    }

    body.theme-light .message-content a:hover,
    body.theme-light .message-text a:hover {
        color: #37b24d !important;
    }

    body.theme-light .message-input-container {
        background: transparent !important;
        border: none !important;
        border-top: none !important;
        box-shadow: none !important;
    }

    body.theme-light .input-panel {
        background: #ffffff !important;
        border-top: 1px solid #d9e1ea !important;
        box-shadow: none !important;
    }

    body.theme-light .message-input {
        background: #ffffff !important;
        border: none !important;
        box-shadow: none !important;
        color: #1f2a36 !important;
    }

    body.theme-light .message-input::placeholder {
        color: #8a9bad !important;
    }

    body.theme-light .btn-file,
    body.theme-light .btn-emoji,
    body.theme-light .btn-webapp,
    body.theme-light .voice-send-slot .btn-voice,
    body.theme-light .voice-send-slot .btn-send {
        background: transparent !important;
        color: #ffffff !important;
        border: none !important;
    }

    body.theme-light .btn-file:hover,
    body.theme-light .btn-emoji:hover,
    body.theme-light .btn-webapp:hover,
    body.theme-light .voice-send-slot .btn-voice:hover,
    body.theme-light .voice-send-slot .btn-send:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    body.theme-light .message-input-container .input-attach-buttons .btn-file,
    body.theme-light .message-input-container .input-attach-buttons .btn-emoji,
    body.theme-light .message-input-container .input-attach-buttons .btn-webapp,
    body.theme-light .message-input-container .voice-send-slot .btn-voice,
    body.theme-light .message-input-container .voice-send-slot .btn-send {
        color: #ffffff !important;
    }

    body.theme-light .scroll-to-bottom-btn {
        background: #ffffff !important;
        border: 1px solid #d8e2ec !important;
        color: #4f6277 !important;
        box-shadow: 0 4px 12px rgba(42, 64, 88, 0.16) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light .scroll-to-bottom-btn:hover {
        background: #f2f6fb !important;
        color: #3f556d !important;
    }

    body.theme-light .btn-icon,
    body.theme-light .header-actions .btn-icon,
    body.theme-light .chat-header .btn-icon {
        color: #506176 !important;
    }

    body.theme-light .message-hover-btn {
        background: #ffffff !important;
        color: #5f7287 !important;
        box-shadow: 0 2px 8px rgba(46, 66, 86, 0.18) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light .message-hover-btn:hover {
        background: #f2f6fb !important;
        color: #40566f !important;
    }

    body.theme-light .message-control-panel {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light .message-control-actions {
        background: #181818 !important;
        border: none !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light .message-control-read-at {
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.72) !important;
        box-shadow: none !important;
    }

    body.theme-light .message-control-panel .control-item {
        color: #f2f2f4 !important;
    }

    body.theme-light .message-control-panel .control-item:hover,
    body.theme-light .message-control-panel .control-item:active {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    body.theme-light .message-control-panel .control-item-icon {
        color: #ffffff !important;
    }

    body.theme-light .message-reaction-panel {
        background: #181818 !important;
        border: none !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 6px 8px !important;
    }

    body.theme-light .message-reaction-panel-scroll {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light .message-reaction-panel .reaction-option:hover,
    body.theme-light .message-reaction-panel .reaction-option:active {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    body.theme-light .message-reaction-badge {
        background: #4b8cf7 !important;
        color: #ffffff !important;
        box-shadow: 0 6px 14px rgba(41, 75, 132, 0.2) !important;
    }

    body.theme-light .message-reaction-badge.is-reacted {
        background: #ffffff !important;
        color: #1a1d23 !important;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18) !important;
    }

    body.theme-light .sidebar-bottom-panel.desktop-only {
        background: #ffffff !important;
        border: 1px solid #cfd8e2 !important;
    }

    /* Светлая тема: фон чата только через messenger-container pattern — без fon/sage */
    body.theme-light .chat-area {
        background: transparent !important;
        background-image: none !important;
        background-blend-mode: normal !important;
        border-left: none !important;
    }

    body.theme-light .chat-area::before {
        content: none !important;
        display: none !important;
        background: none !important;
        background-image: none !important;
        animation: none !important;
    }

    body.theme-light .chat-area::after {
        content: none !important;
        display: none !important;
    }

    body.theme-light .chat-view,
    body.theme-light .messages-container {
        background: transparent !important;
    }

    body.theme-light .chat-view {
        --xam-date-pill-bg: rgba(255, 255, 255, 0.58);
        --xam-date-pill-color: rgba(28, 27, 34, 0.82);
        --desktop-chat-chrome-bg: rgba(255, 255, 255, 0.78);
        --desktop-chat-chrome-border: rgba(42, 64, 88, 0.12);
        --desktop-chat-chrome-shadow:
            0 8px 24px rgba(42, 64, 88, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }

    body.theme-light .chat-view.chat-header-profile-expanded > .chat-header,
    body.theme-light .chat-view > .chat-header,
    body.theme-light .chat-view > .chat-header.desktop-only,
    body.theme-light .chat-header.desktop-only {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light .chat-view > .chat-header .chat-header-info-pill,
    body.theme-light .chat-view > .chat-header .chat-header-actions-pill {
        background: var(--desktop-chat-chrome-bg) !important;
        border: 1px solid var(--desktop-chat-chrome-border) !important;
        box-shadow: var(--desktop-chat-chrome-shadow) !important;
        backdrop-filter: blur(18px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    }

    body.theme-light .chat-view > .chat-header .chat-header-info-pill:hover,
    body.theme-light .chat-view > .chat-header .chat-header-actions-pill:hover {
        background: rgba(255, 255, 255, 0.9) !important;
    }

    body.theme-light .chat-view > .chat-header:hover {
        background: transparent !important;
    }

    body.theme-light .chat-view > .chat-header .chat-user-name {
        color: #1a2330 !important;
    }

    body.theme-light .chat-view > .chat-header .chat-user-status {
        color: rgba(42, 64, 88, 0.55) !important;
    }

    body.theme-light .chat-view > .chat-header .btn-icon {
        color: rgba(42, 64, 88, 0.82) !important;
    }

    body.theme-light .chat-view > .chat-header .btn-icon:hover {
        background: rgba(42, 64, 88, 0.08) !important;
        color: #1a2330 !important;
    }

    body.theme-light .chat-view > .pinned-messages-bar {
        background: var(--desktop-chat-chrome-bg) !important;
        border-color: var(--desktop-chat-chrome-border) !important;
        box-shadow: var(--desktop-chat-chrome-shadow) !important;
    }

    body.theme-light .chat-view > .chat-header .chat-header-expand {
        background: #ffffff !important;
        border: 1px solid #d8e2ec !important;
        box-shadow: 0 10px 24px rgba(42, 64, 88, 0.14) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light .chat-header-expand-action {
        background: #f7fbff !important;
        border: 1px solid #d8e2ec !important;
        color: #2a3a4d !important;
    }

    body.theme-light .chat-header-expand-action:hover {
        background: #edf4fb !important;
    }

    body.theme-light .chat-header-expand-action-label,
    body.theme-light .chat-user-name,
    body.theme-light .chat-user-status {
        color: #2a3a4d !important;
    }

    /* Light theme: user/group profile side panels */
    body.theme-light #user-profile-modal .modal-content.user-profile-modal,
    body.theme-light #group-profile-modal .modal-content.group-profile-modal {
        background: #ffffff !important;
        border-left: 1px solid #d8e2ec !important;
        box-shadow: none !important;
    }

    body.theme-light #user-profile-modal .profile-top-bar,
    body.theme-light #user-profile-modal .profile-header,
    body.theme-light #group-profile-modal .profile-header,
    body.theme-light #user-profile-modal .profile-actions,
    body.theme-light #group-profile-modal .profile-actions,
    body.theme-light #user-profile-modal .profile-info,
    body.theme-light #group-profile-modal .profile-info,
    body.theme-light #user-profile-modal .profile-media,
    body.theme-light #group-profile-modal .profile-media,
    body.theme-light #group-profile-modal .group-members-section {
        background: #ffffff !important;
        border-color: #d8e2ec !important;
    }

    body.theme-light #user-profile-modal .profile-name,
    body.theme-light #group-profile-modal .profile-name,
    body.theme-light #user-profile-modal .profile-title,
    body.theme-light #group-profile-modal .profile-title,
    body.theme-light #user-profile-modal .profile-info-value,
    body.theme-light #group-profile-modal .profile-info-value {
        color: #243447 !important;
    }

    body.theme-light #user-profile-modal .profile-status,
    body.theme-light #group-profile-modal .profile-status,
    body.theme-light #user-profile-modal .profile-info-label,
    body.theme-light #group-profile-modal .profile-info-label {
        color: #6b7d92 !important;
    }

    body.theme-light #user-profile-modal .profile-action-btn,
    body.theme-light #group-profile-modal .profile-action-btn {
        background: #f4f8fd !important;
        border: 1px solid #d8e2ec !important;
        color: #4f6277 !important;
    }

    body.theme-light #user-profile-modal .profile-action-btn:hover,
    body.theme-light #group-profile-modal .profile-action-btn:hover {
        background: #eaf1f9 !important;
    }

    /* Light theme confirmations */
    body.theme-light .xam-confirm-sheet-backdrop {
        background:
            radial-gradient(130% 100% at 50% 50%, rgba(96, 178, 128, 0.52) 0%, rgba(126, 194, 145, 0.44) 36%, rgba(166, 212, 162, 0.38) 68%, rgba(190, 224, 175, 0.44) 100%),
            linear-gradient(90deg, rgba(184, 220, 146, 0.58) 0%, rgba(121, 189, 142, 0.52) 48%, rgba(171, 216, 160, 0.56) 100%) !important;
    }

    body.theme-light .xam-mobile-dialog {
        background: rgba(0, 0, 0, 0.5) !important;
    }

    body.theme-light .xam-confirm-sheet-panel {
        background: #ffffff !important;
        border: 1px solid #d8e2ec !important;
        box-shadow: 0 14px 36px rgba(44, 67, 92, 0.22) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light .xam-mobile-dialog-card {
        background: #232327 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.theme-light .xam-confirm-sheet-title {
        color: #243447 !important;
    }

    body.theme-light .xam-mobile-dialog-title {
        color: #ffffff !important;
    }

    body.theme-light .xam-confirm-sheet-message {
        color: #5e7086 !important;
    }

    body.theme-light .xam-mobile-dialog-message {
        color: rgba(255, 255, 255, 0.78) !important;
    }

    body.theme-light .xam-confirm-sheet-btn--secondary {
        background: #f3f7fb !important;
        border: 1px solid #d8e2ec !important;
        color: #2a3a4d !important;
    }

    body.theme-light .xam-confirm-sheet-btn--primary {
        background: #7bcf7a !important;
        color: #17351d !important;
        border: 1px solid #66bb67 !important;
        box-shadow: none !important;
    }

    body.theme-light .xam-confirm-sheet-btn--primary:hover {
        background: #8ad887 !important;
    }

    body.theme-light .xam-confirm-sheet-input {
        background: #f3f7fb !important;
        color: #243447 !important;
        box-shadow: inset 0 0 0 1px #d8e2ec !important;
    }

    body.theme-light .xam-confirm-sheet-input::placeholder {
        color: rgba(36, 52, 71, 0.4) !important;
    }

    body.theme-light .xam-confirm-sheet-input:focus {
        box-shadow: inset 0 0 0 1px #b7c7d8 !important;
    }

    body.theme-light .xam-confirm-sheet-icon--delete,
    body.theme-light .xam-confirm-sheet-icon--login {
        background: linear-gradient(180deg, #9be08f 0%, #66c96f 55%, #4caf58 100%) !important;
        color: #17351d !important;
    }

    /* Light theme: create group sheet */
    body.theme-light .xam-create-group-sheet-backdrop {
        background:
            radial-gradient(130% 100% at 50% 50%, rgba(96, 178, 128, 0.52) 0%, rgba(126, 194, 145, 0.44) 36%, rgba(166, 212, 162, 0.38) 68%, rgba(190, 224, 175, 0.44) 100%),
            linear-gradient(90deg, rgba(184, 220, 146, 0.58) 0%, rgba(121, 189, 142, 0.52) 48%, rgba(171, 216, 160, 0.56) 100%) !important;
    }

    body.theme-light .xam-create-group-sheet-panel {
        background: #ffffff !important;
        border: 1px solid #d8e2ec !important;
    }

    body.theme-light .xam-create-group-sheet-title {
        color: #243447 !important;
    }

    body.theme-light .xam-create-group-sheet-collapse {
        color: #5f7287 !important;
    }

    body.theme-light .create-group-avatar-container {
        background: var(--xam-ui-accent, #8774E1) !important;
        color: #fff !important;
    }

    body.theme-light .create-group-field-label,
    body.theme-light .create-group-field-hint {
        color: #6b7d92 !important;
    }

    body.theme-light .create-group-pill-input,
    body.theme-light .create-group-type-pill,
    body.theme-light .create-group-desc-area {
        background: #ffffff !important;
        color: #1f2a36 !important;
        border: 1px solid #d8e2ec !important;
    }

    body.theme-light .create-group-pill-input::placeholder,
    body.theme-light .create-group-desc-area::placeholder {
        color: #97a7b9 !important;
    }

    body.theme-light .create-group-pill-input:focus,
    body.theme-light .create-group-type-pill:active,
    body.theme-light .create-group-desc-area:focus {
        background: #f7fbff !important;
    }

    body.theme-light .xam-create-group-submit-btn {
        background: var(--xam-ui-accent, #8774E1) !important;
        color: #fff !important;
        border: none !important;
    }

    body.theme-light .xam-create-group-submit-btn:hover:not(:disabled) {
        background: var(--xam-ui-accent-hover, #a675f3) !important;
    }

    body.theme-light .xam-create-group-submit-btn:active:not(:disabled) {
        background: var(--xam-ui-accent-hover, #8550e0) !important;
        filter: brightness(0.92);
    }
}

/* ── Mobile user profile: нижний шит по макету (компактно, ~пол-экрана) ── */
.profile-avatar-glow {
    display: none;
}

.profile-back-text {
    display: none;
}

.profile-flow-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 28px);
    margin: 0 14px 14px;
    padding: 11px 14px;
    border: none;
    border-radius: 24px;
    background: #0D0D0D;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.profile-flow-bar.hidden {
    display: none !important;
}

/* ПК: пилюля «Медиа» рядом с блоком почта/ник/Flow */
.profile-media-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: calc(100% - 32px);
    margin: 0 16px 14px;
    padding: 14px 18px;
    border: none;
    border-radius: 22px;
    background: #0F0F0F;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.profile-media-bar-label {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Телефон: пилюля «Медиа» справа сверху (пара к «Закрыть») */
.profile-media-open-btn {
    display: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#user-profile-modal.profile-is-deleted .profile-info--user-pills,
#user-profile-modal.profile-is-deleted .profile-flow-bar,
#user-profile-modal.profile-is-deleted .profile-media-bar,
#user-profile-modal.profile-is-deleted .profile-media-open-btn,
#user-profile-modal.profile-is-deleted .profile-media {
    display: none !important;
}

.profile-flow-brand {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.92);
}

.profile-flow-brand-f {
    background: linear-gradient(135deg, #c4b5fd 0%, #a855f7 48%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.profile-flow-stats {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.72);
}

.profile-flow-stat {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-flow-chevron {
    flex-shrink: 0;
    opacity: 0.55;
}

@media (max-width: 768px) {
    /* Финальный оверрайд: профиль юзера — fullscreen сверху, не нижний шит */
    #user-profile-modal {
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: #181818 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        position: fixed !important;
        inset: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #user-profile-modal .modal-content.user-profile-modal,
    #user-profile-modal.sheet-open .modal-content.user-profile-modal,
    #user-profile-modal.sheet-open:not(.sheet-expanded) .modal-content.user-profile-modal,
    #user-profile-modal.sheet-expanded .modal-content.user-profile-modal {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #181818 !important;
        box-shadow: none !important;
        padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #user-profile-modal .profile-avatar-glow:not(.hidden) {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        width: 180vw !important;
        height: 78% !important;
        min-height: 520px !important;
        margin-left: -90vw !important;
        z-index: 0 !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        pointer-events: none !important;
    }


    #user-profile-modal .profile-avatar-cluster {
        gap: 28px !important;
        width: 100%;
        max-width: 100%;
        padding: 0 8px;
        box-sizing: border-box;
    }

    #user-profile-modal .profile-avatar-frame {
        --profile-avatar-size: 118px;
        width: 118px !important;
        height: 118px !important;
    }

    #user-profile-modal .profile-verif-slot {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
    }

    #user-profile-modal .profile-verif-badge {
        width: 42px !important;
        height: 42px !important;
    }

    /* Username + label: QR не раздувает высоту строки */
    #user-profile-modal .profile-info-item--username .profile-info-body {
        position: relative !important;
        padding-right: 40px !important;
        gap: 2px !important;
    }

    #user-profile-modal .profile-info-item--username .profile-info-value {
        display: block !important;
        width: auto !important;
        max-width: 100%;
        line-height: 1.25 !important;
        min-height: 0 !important;
    }

    #user-profile-modal .profile-info-item--username .profile-info-value #profile-username {
        display: inline !important;
    }

    #user-profile-modal .profile-info-item--username .profile-copy-btn {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    #user-profile-modal .profile-info-body {
        gap: 2px !important;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-label {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1.15 !important;
    }

    /* Gifts strip: sender + own actions (высота анимируется через is-expanded) */
    #user-profile-modal .profile-gifts-strip {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        overflow-x: hidden !important;
    }

    #user-profile-modal.profile-is-self .profile-media-bar,
    #user-profile-modal.profile-is-self #profile-media-open-btn {
        display: none !important;
    }

    #user-profile-modal .profile-gifts-strip-item {
        width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
        text-align: left !important;
        flex-wrap: wrap;
    }

    #user-profile-modal .profile-gifts-strip-item.is-hidden-gift {
        opacity: 0.55;
    }

    #user-profile-modal .profile-gifts-strip-icon {
        font-size: 28px !important;
        flex: 0 0 auto;
    }

    #user-profile-modal .profile-gifts-strip-name {
        font-size: 14px !important;
        color: #fff !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: none;
    }

    #user-profile-modal .profile-gifts-strip-sender {
        width: 100%;
        margin-left: 40px;
        margin-top: -4px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
        line-height: 1.2;
    }

    #user-profile-modal .profile-gifts-strip-item {
        display: grid !important;
        grid-template-columns: 36px 1fr auto;
        grid-template-areas:
            "icon name actions"
            ". sender actions";
        align-items: center;
        column-gap: 10px;
        row-gap: 2px;
    }

    #user-profile-modal .profile-gifts-strip-icon { grid-area: icon; }
    #user-profile-modal .profile-gifts-strip-name { grid-area: name; }
    #user-profile-modal .profile-gifts-strip-sender {
        grid-area: sender;
        margin: 0 !important;
        width: auto !important;
    }
    #user-profile-modal .profile-gifts-strip-actions {
        grid-area: actions;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }

    #user-profile-modal .profile-gifts-strip-btn {
        border: none;
        border-radius: 10px;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
    }

    #user-profile-modal .profile-gifts-strip-btn--sell {
        background: rgba(135, 116, 225, 0.35);
        color: #fff;
    }

    /* Пока уезжает — не сжимать аватар и не гасить glow */
    #user-profile-modal.closing .profile-avatar-glow:not(.hidden) {
        display: block !important;
        opacity: 1 !important;
    }

    #user-profile-modal.closing .profile-avatar,
    #user-profile-modal.closing #profile-avatar {
        width: 118px !important;
        height: 118px !important;
        flex: 0 0 118px !important;
        font-size: 44px !important;
        transform: none !important;
        animation: none !important;
    }


    #user-profile-modal .profile-hero-section,
    #user-profile-modal .profile-info,
    #user-profile-modal .profile-info--user-pills {
        background: transparent !important;
    }

    #user-profile-modal .profile-tg-nav {
        display: flex !important;
        background: transparent !important;
    }

    #user-profile-modal .profile-back {
        display: none !important;
    }

    #user-profile-modal .profile-media-bar {
        display: flex !important;
    }

    #user-profile-modal .profile-gifts-bar {
        display: flex !important;
        flex-direction: column !important;
    }

    #user-profile-modal .profile-actions,
    #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-actions,
    #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        margin: 2px 16px 14px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: auto !important;
        max-width: none !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    #user-profile-modal .profile-actions .profile-action-btn,
    #user-profile-modal .profile-actions #profile-chat-btn,
    #user-profile-modal .profile-actions #profile-call-btn,
    #user-profile-modal .profile-actions #profile-block-btn-mobile,
    #user-profile-modal .profile-actions #profile-clear-btn-mobile {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 58px !important;
        min-height: 58px !important;
        border-radius: 24px !important;
        background: #212121 !important;
        border: none !important;
        box-shadow: none !important;
        grid-column: auto !important;
    }

    #user-profile-modal .profile-actions .profile-action-primary-label {
        display: none !important;
    }

    #user-profile-modal .profile-actions #profile-mute-btn,
    #user-profile-modal .profile-actions #profile-rename-btn,
    #user-profile-modal .profile-actions #profile-media-btn-mobile {
        display: none !important;
    }

    #user-profile-modal .profile-info--user-pills .profile-info-merged-pill,
    #user-profile-modal .profile-media-bar,
    #user-profile-modal .profile-gifts-bar,
    #user-profile-modal .profile-flow-bar {
        background: #212121 !important;
        border-radius: 24px !important;
    }

    #user-profile-modal .profile-media {
        display: none !important;
    }

    #user-profile-modal .profile-danger-pill {
        display: none !important;
    }

    #user-profile-modal .profile-menu-btn {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Мобильный поиск пользователей в шапке списка чатов (как in-chat search) */
    #mobile-top-menu-btn {
        position: relative;
    }

    .mobile-top-menu-icon {
        display: block;
        transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
        transform-origin: center;
    }

    #mobile-top-nick-pill {
        position: relative;
    }

    #mobile-top-nick-pill-track {
        transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .mobile-top-nick-pill-wrap.search-active,
    body.xam-mobile-chats-search-active #mobile-top-nick-pill-wrap {
        z-index: 12050 !important;
        pointer-events: auto !important;
    }

    body.xam-mobile-chats-search-active .mobile-top-menu-icon {
        opacity: 0;
        transform: scale(0.55) rotate(45deg);
    }

    body.xam-mobile-chats-search-active #mobile-top-menu-btn .mobile-top-search-close-icon {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        pointer-events: auto;
    }

    body.xam-mobile-chats-search-active #mobile-top-nick-pill-track {
        opacity: 0;
        transform: scale(0.94);
        pointer-events: none;
    }

    body.xam-mobile-chats-search-active #mobile-top-nick-pill .mobile-top-nick-pill-chevron {
        display: none !important;
    }

    body.xam-mobile-chats-search-active #mobile-chats-search-input {
        opacity: 1;
        transform: translateY(-50%) scale(1);
        pointer-events: auto;
        -webkit-user-select: text;
        user-select: text;
        font-size: 16px;
    }

    body.xam-mobile-chats-search-active #mobile-top-nick-pill {
        cursor: text;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        justify-content: stretch;
        align-items: center;
        padding-left: 14px;
        padding-right: 14px;
    }

    body.xam-mobile-chats-search-active #mobile-top-nick-pill:active {
        transform: none;
    }

    .mobile-chats-search-panel {
        z-index: 12040;
    }

    body.xam-mobile-chats-search-active .chats-bottom-pill,
    body.xam-mobile-chats-search-active #chats-bottom-pill {
        pointer-events: none;
        opacity: 0.35;
    }

    .mobile-chats-search-panel .search-result-item {
        border-radius: 16px;
        margin: 2px 0;
        padding: 10px 12px;
        background: transparent;
    }

    .mobile-chats-search-panel .search-result-item:active {
        background: rgba(255, 255, 255, 0.06);
    }

    body.theme-light .mobile-chats-search-panel .search-result-item:active {
        background: rgba(0, 0, 0, 0.05);
    }
}

/* ==================== Удаление аккаунта (bottom-sheet) ==================== */
.account-delete-sheet {
    z-index: 51000 !important;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: auto !important;
}

.account-delete-sheet-panel {
    width: 100%;
    max-width: 520px;
    background: #1c1d22;
    border-radius: 28px 28px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 28px 22px calc(28px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
    animation: accountDeleteSheetUp 0.32s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: auto;
    position: relative;
    z-index: 51001;
}

@keyframes accountDeleteSheetUp {
    from { transform: translateY(100%); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
}

.account-delete-sheet-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-delete-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.account-delete-step.hidden {
    display: none !important;
}

.account-delete-title {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #f08a8a;
}

.account-delete-desc {
    margin: 0 0 22px;
    max-width: 320px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
}

.account-delete-desc--spaced {
    margin-bottom: 28px;
}

.account-delete-accent {
    color: #f08a8a;
    font-weight: 700;
}

.account-delete-btn {
    width: 100%;
    max-width: 340px;
    border: none;
    border-radius: 999px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.account-delete-btn:active {
    transform: scale(0.98);
}

.account-delete-btn--primary {
    background: linear-gradient(145deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
    margin-bottom: 12px;
}

.account-delete-btn--primary:disabled {
    opacity: 0.65;
    cursor: wait;
}

.account-delete-btn--ghost {
    background: #111214;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.account-delete-error {
    margin-top: 12px;
    min-height: 18px;
    font-size: 13px;
    color: #f87171;
}

.account-delete-waiting-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding-top: 8px;
}

.account-delete-waiting-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    animation: accountDeleteDotPulse 1.2s ease-in-out infinite;
}

.account-delete-waiting-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.account-delete-waiting-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes accountDeleteDotPulse {
    0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

@media (min-width: 769px) {
    .account-delete-sheet {
        align-items: flex-end;
    }

    .account-delete-sheet-panel {
        border-radius: 28px 28px 0 0;
        max-width: 440px;
    }
}

/* =============================================================================
   Планшет: центральный hub + полноэкранный чат (телефон и ПК не затрагиваются)
   ============================================================================= */

body.layout-tablet .messenger-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--app-height, 100dvh) !important;
    min-height: var(--app-height, 100dvh) !important;
    max-height: var(--app-height, 100dvh) !important;
    overflow: hidden !important;
}

body.layout-tablet .messenger-container > .sidebar {
    display: none !important;
}

body.layout-tablet .messenger-container > .chat-area {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.layout-tablet #no-chat-selected {
    display: none !important;
}

body.layout-tablet:not(.tablet-chat-open) .messenger-container > .chat-area {
    visibility: hidden !important;
    pointer-events: none !important;
}

body.layout-tablet:not(.tablet-chat-open) #chat-view {
    display: none !important;
}

body.layout-tablet #tablet-chat-hub {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    z-index: 20;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding:
        calc(10px + var(--xam-safe-top, env(safe-area-inset-top, 0px)))
        16px
        calc(14px + var(--xam-safe-bottom, env(safe-area-inset-bottom, 0px)));
    box-sizing: border-box;
    pointer-events: auto;
    background: #070707;
    overflow: hidden;
}

body.layout-tablet .tablet-hub-preview-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    overflow: hidden;
    --preview-c1: 150, 97, 241;
    --preview-c2: 120, 80, 200;
    --preview-c3: 90, 60, 160;
}

body.layout-tablet .tablet-hub-preview-glow.is-visible {
    opacity: 1;
    animation: tabletPreviewGlowBreath 7.5s ease-in-out infinite;
}

body.layout-tablet .tablet-hub-glow-blob {
    position: absolute;
    width: min(96vw, 760px);
    height: min(96vw, 760px);
    pointer-events: none;
    --blob-c: var(--preview-c1);
    --blob-alpha: 0.62;
    background:
        radial-gradient(circle at 40% 36%, rgba(var(--blob-c), calc(var(--blob-alpha) + 0.12)) 0%, rgba(var(--blob-c), calc(var(--blob-alpha) * 0.42)) 36%, transparent 68%),
        radial-gradient(circle at 64% 62%, rgba(var(--blob-c), calc(var(--blob-alpha) * 0.55)) 0%, transparent 58%);
    filter: blur(50px) saturate(1.08);
    will-change: left, top, transform, filter;
    animation: tabletGlowBlobMorph 15s ease-in-out infinite;
}

body.layout-tablet .tablet-hub-glow-blob:nth-child(1) {
    width: min(104vw, 820px);
    height: min(104vw, 820px);
    animation-duration: 13s;
}

body.layout-tablet .tablet-hub-glow-blob:nth-child(2) {
    width: min(88vw, 680px);
    height: min(88vw, 680px);
    animation-duration: 17s;
    animation-delay: -5s;
    opacity: 0.94;
}

body.layout-tablet .tablet-hub-glow-blob:nth-child(3) {
    width: min(92vw, 720px);
    height: min(92vw, 720px);
    animation-duration: 19s;
    animation-delay: -9s;
    opacity: 0.88;
}

body.layout-tablet .tablet-hub-glow-blob:nth-child(4) {
    width: min(80vw, 640px);
    height: min(80vw, 640px);
    animation-duration: 14s;
    animation-delay: -3s;
    opacity: 0.82;
}

@keyframes tabletPreviewGlowBreath {
    0%, 100% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(1.06) saturate(1.1);
    }
}

@keyframes tabletGlowBlobMorph {
    0%, 100% {
        border-radius: 58% 42% 54% 46% / 48% 56% 44% 52%;
        filter: blur(50px) saturate(1.08);
    }
    33% {
        border-radius: 44% 56% 48% 52% / 54% 44% 58% 42%;
        filter: blur(58px) saturate(1.16);
    }
    66% {
        border-radius: 52% 48% 42% 58% / 42% 58% 48% 52%;
        filter: blur(44px) saturate(1.12);
    }
}

body.layout-tablet .tablet-hub-top-slot,
body.layout-tablet .tablet-hub-preview-slot,
body.layout-tablet .tablet-hub-main-slot,
body.layout-tablet .tablet-hub-bottom-slot {
    position: relative;
    z-index: 1;
}

body.layout-tablet .tablet-hub-top-slot,
body.layout-tablet .tablet-hub-bottom-slot {
    z-index: 2;
}

body.layout-tablet:not(.tablet-chat-open) #tablet-chat-hub:not([hidden]) {
    display: flex !important;
}

body.layout-tablet.tablet-chat-open #tablet-chat-hub {
    display: none !important;
}

body.layout-tablet .tablet-hub-top-slot,
body.layout-tablet .tablet-hub-bottom-slot {
    width: min(392px, calc(100vw - 28px));
    max-width: 100%;
    box-sizing: border-box;
}

body.layout-tablet .tablet-hub-main-slot {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
}

body.layout-tablet .tablet-hub-top-slot {
    flex: 0 0 auto;
    margin-top: 2px;
}

body.layout-tablet .tablet-hub-preview-slot {
    flex: 0 0 auto;
    width: min(392px, calc(100vw - 28px));
    max-width: 100%;
    min-height: 136px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 8px 0 4px;
    box-sizing: border-box;
}

body.layout-tablet .tablet-hub-preview {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    background: transparent;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.22s ease;
}

body.layout-tablet .tablet-hub-preview.is-visible {
    opacity: 1;
}

body.layout-tablet .tablet-hub-preview-content {
    position: relative;
    z-index: 1;
    height: auto;
    min-height: min-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 20px 16px;
    box-sizing: border-box;
    text-align: center;
    pointer-events: none;
}

body.layout-tablet .tablet-hub-preview-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-height: 1.25em;
    padding: 4px 0 2px;
    font-size: clamp(28px, 5.2vw, 40px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.98);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.layout-tablet .tablet-hub-preview-title .support-badge,
body.layout-tablet .tablet-hub-preview-title .xam-ultra-badge-trigger {
    flex: 0 0 auto;
}

body.layout-tablet .tablet-hub-preview-time {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.82);
}

body.layout-tablet .tablet-hub-preview-username {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.62);
}

body.layout-tablet .tablet-hub-preview-username.is-hidden {
    display: none;
}

body.layout-tablet .tablet-hub-top-slot .sidebar-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 8px 6px 10px !important;
    background: rgba(15, 15, 17, 0.98) !important;
    border: 1px solid #3d3d42 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.layout-tablet .tablet-hub-main-slot .chats-section {
    display: none !important;
}

/* Планшет: круговой барабан — видна только верхняя дуга */
body.layout-tablet.tablet-hub-wheel-mode .tablet-hub-wheel {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
}

body.layout-tablet .tablet-hub-wheel-stage {
    position: relative;
    width: min(100%, 540px);
    height: min(50vh, 360px);
    min-height: 260px;
    overflow: hidden;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 14%,
        #000 86%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 14%,
        #000 86%,
        transparent 100%
    );
}

body.layout-tablet .tablet-wheel-center-nick {
    position: absolute;
    left: 50%;
    bottom: calc(var(--tablet-wheel-r, 290px) - 54px);
    transform: translateX(-50%);
    max-width: min(280px, 72vw);
    padding: 0 12px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
    z-index: 3;
}

body.layout-tablet .tablet-wheel-center-nick.is-visible {
    opacity: 1;
}

body.layout-tablet .tablet-hub-wheel-ring {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: calc(var(--tablet-wheel-r, 248px) * 2);
    height: calc(var(--tablet-wheel-r, 248px) * 2);
    transform: translate(-50%, 50%);
    border: 2px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 0;
}

body.layout-tablet .tablet-hub-wheel-rotor {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

body.layout-tablet .tablet-wheel-item {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 80px;
    margin-left: -40px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: auto;
    transform: translateY(50%);
    will-change: left, bottom, visibility;
}

body.layout-tablet .tablet-wheel-item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transform-origin: center center;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, opacity;
}

body.layout-tablet .tablet-wheel-item--pin-pull .tablet-wheel-item-inner {
    transform: translateY(var(--pin-pull, 0px)) !important;
    transition: transform 0.08s ease-out;
}

body.layout-tablet .tablet-wheel-avatar-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 2px;
    box-sizing: border-box;
    background: transparent;
}

body.layout-tablet .tablet-wheel-item.is-pinned .tablet-wheel-avatar-wrap {
    background: linear-gradient(135deg, #f0d78c 0%, #c9a227 45%, #e8c547 100%);
    box-shadow:
        0 0 0 1px rgba(212, 168, 83, 0.55),
        0 0 18px rgba(212, 168, 83, 0.28);
}

body.layout-tablet .tablet-wheel-avatar-wrap .tablet-wheel-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    font-size: 22px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    flex-shrink: 0;
}

body.layout-tablet .tablet-wheel-avatar-wrap .tablet-wheel-avatar img,
body.layout-tablet .tablet-wheel-avatar-wrap .tablet-wheel-avatar video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

body.layout-tablet .tablet-wheel-nick {
    max-width: 92px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.layout-tablet .tablet-wheel-item.is-centered .tablet-wheel-nick {
    color: rgba(255, 255, 255, 0.98);
}

body.layout-tablet .tablet-wheel-item.is-centered .tablet-wheel-avatar-wrap {
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}

body.layout-tablet .tablet-hub-bottom-slot {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding-bottom: calc(2px + var(--xam-safe-bottom, env(safe-area-inset-bottom, 0px)));
}

body.layout-tablet .tablet-hub-bottom-slot .sidebar-bottom-dock {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0 !important;
}

body.layout-tablet .tablet-hub-bottom-slot .sidebar-bottom-panel {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    margin: 0 !important;
    padding: 6px 10px !important;
    background: rgba(15, 15, 17, 0.98) !important;
    border: 1px solid #3d3d42 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

body.layout-tablet .tablet-hub-bottom-slot .sidebar-bottom-pill-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.95);
}

body.layout-tablet.tablet-chat-open .chat-area {
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: var(--app-height, 100dvh) !important;
    min-height: var(--app-height, 100dvh) !important;
    max-height: var(--app-height, 100dvh) !important;
    z-index: 25 !important;
    transform: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

body.layout-tablet.tablet-chat-open #chat-view {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

body.layout-tablet.tablet-chat-open .chat-view {
    align-items: center !important;
}

body.layout-tablet.tablet-chat-open .chat-view > .messages-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: stretch !important;
    width: min(680px, calc(100% - 24px)) !important;
    max-width: min(680px, calc(100% - 24px)) !important;
    box-sizing: border-box !important;
    padding-top: calc(var(--xam-safe-top, env(safe-area-inset-top, 0px)) + 12px + var(--tablet-chat-top-btn-size, 52px) + 14px) !important;
    padding-bottom: calc(var(--desktop-composer-inset, 54px) + var(--xam-safe-bottom, env(safe-area-inset-bottom, 0px)) + 10px) !important;
    scroll-padding-top: calc(var(--xam-safe-top, env(safe-area-inset-top, 0px)) + 12px + var(--tablet-chat-top-btn-size, 52px) + 14px);
    scroll-padding-bottom: calc(var(--desktop-composer-inset, 54px) + var(--xam-safe-bottom, env(safe-area-inset-bottom, 0px)) + 10px);
}

body.layout-tablet.tablet-chat-open .chat-view.chat-view--has-pinned > .messages-container {
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px + var(--tablet-chat-top-btn-size, 52px) + 8px + 50px) !important;
    scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 12px + var(--tablet-chat-top-btn-size, 52px) + 8px + 50px);
}

body.layout-tablet.tablet-chat-open .chat-view.chat-view--auto-translate:not(.chat-view--has-pinned) > .messages-container {
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px + var(--tablet-chat-top-btn-size, 52px) + 14px + 38px) !important;
    scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 12px + var(--tablet-chat-top-btn-size, 52px) + 14px + 38px);
}

body.layout-tablet.tablet-chat-open .chat-view.chat-view--auto-translate.chat-view--has-pinned > .messages-container {
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px + var(--tablet-chat-top-btn-size, 52px) + 8px + 50px + 38px) !important;
    scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 12px + var(--tablet-chat-top-btn-size, 52px) + 8px + 50px + 38px);
}

body.layout-tablet.tablet-chat-open .chat-view > .message-input-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 30 !important;
    align-items: center !important;
    padding:
        0 12px
        calc(12px + var(--xam-safe-bottom, env(safe-area-inset-bottom, 0px)))
        12px !important;
    margin: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
}

body.layout-tablet.tablet-chat-open .chat-view > .message-input-container .input-panel,
body.layout-tablet.tablet-chat-open .chat-view > .message-input-container .composer-main-row,
body.layout-tablet.tablet-chat-open .chat-view > .message-input-container .input-attach-buttons,
body.layout-tablet.tablet-chat-open .chat-view > .message-input-container .message-input-pill,
body.layout-tablet.tablet-chat-open .chat-view > .message-input-container .voice-send-slot,
body.layout-tablet.tablet-chat-open .chat-view > .message-input-container .voice-recording-ui,
body.layout-tablet.tablet-chat-open .chat-view > .message-input-container .reply-preview:not(.hidden),
body.layout-tablet.tablet-chat-open .chat-view > .message-input-container .edit-preview:not(.hidden),
body.layout-tablet.tablet-chat-open .chat-view > .message-input-container .composer-desktop-attachment-strip:not(.hidden),
body.layout-tablet.tablet-chat-open .chat-view > .message-input-container .bot-reply-keyboard-panel:not(.hidden) {
    pointer-events: auto !important;
}

body.layout-tablet.tablet-chat-open .chat-view > .message-input-container .input-panel {
    margin-left: auto !important;
    margin-right: auto !important;
    width: min(680px, calc(100% - 24px)) !important;
    max-width: min(680px, calc(100% - 24px)) !important;
}

body.layout-tablet.tablet-chat-open #chat-top-overlay.mobile-only.tablet-chips-layout[aria-hidden="false"] {
    display: block !important;
    z-index: 40 !important;
}

body.layout-tablet.tablet-chat-open #chat-top-overlay.chat-top-overlay {
    left: 0 !important;
    width: 100% !important;
    right: auto !important;
}

body.layout-tablet.tablet-chat-open .chat-view > .pinned-messages-bar:not(.hidden) {
    z-index: 35 !important;
}

/* Tablet: мобильный профиль (как на телефоне, скрин) */
@media (min-width: 769px) {
    /* актуальный мобильный layout */
    body.layout-tablet #user-profile-modal {

        align-items: flex-end !important;
        justify-content: flex-end !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    
    }

    body.layout-tablet #user-profile-modal .modal-content.user-profile-modal,
    body.layout-tablet #user-profile-modal.sheet-open .modal-content.user-profile-modal,
    body.layout-tablet #user-profile-modal.sheet-open:not(.sheet-expanded) .modal-content.user-profile-modal,
    body.layout-tablet #user-profile-modal.sheet-expanded .modal-content.user-profile-modal {

        height: 58vh !important;
        max-height: 58vh !important;
        min-height: 0 !important;
        margin-top: auto !important;
        align-self: stretch !important;
        width: 100% !important;
        border-radius: 40px 40px 0 0 !important;
        border: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        background: #1E1E1E !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    
    }

    body.layout-tablet #user-profile-modal .modal-content.user-profile-modal::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    body.layout-tablet #user-profile-modal .profile-top-bar {

        display: none !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-hero-section {

        position: relative;
        flex-shrink: 0;
        background: transparent !important;
        overflow: visible !important;
        isolation: isolate;
    
    }

    body.layout-tablet #user-profile-modal .profile-back {

        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 7px 14px !important;
        border-radius: 999px !important;
        background: #0D0D0D !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        z-index: 12 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        filter: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-media-open-btn {
        display: none !important;
    }

    body.layout-tablet #user-profile-modal .profile-media-bar {
        display: none !important;
    }

    body.layout-tablet #user-profile-modal .profile-back-text {

        display: inline !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-back-icon,
    body.layout-tablet #user-profile-modal .profile-back svg.profile-back-icon {

        display: none !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-header,
    body.layout-tablet #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-header,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-header {

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        padding: 44px 16px 10px !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        aspect-ratio: auto !important;
        gap: 12px !important;
        background: transparent !important;
        border: none !important;
        position: relative !important;
        overflow: visible !important;
        z-index: 1 !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-header::after {

        display: none !important;
        content: none !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-avatar-shell {

        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        min-width: 0;
        flex: 0 0 auto;
        z-index: 2;
        overflow: visible;
    
    }

    body.layout-tablet #user-profile-modal .profile-avatar-frame {

        overflow: visible;
    
    }

    body.layout-tablet #user-profile-modal .profile-header-text,
    body.layout-tablet #user-profile-modal .profile-menu-btn {

        position: relative;
        z-index: 2;
    
    }

    body.layout-tablet #user-profile-modal .profile-avatar-glow:not(.hidden) {

        display: block;
    
    }

    body.layout-tablet #user-profile-modal .profile-avatar-glow {

        position: absolute;
        top: 16px;
        left: 50%;
        width: min(120vw, 440px);
        height: 340px;
        margin-left: min(-60vw, -220px);
        border-radius: 0;
        z-index: -1;
        pointer-events: none;
        opacity: 0.85;
        mix-blend-mode: normal;
        filter: blur(52px) saturate(1.55) brightness(1.08);
        transform: translateZ(0);
        will-change: transform, background-position;
        -webkit-mask-image: none;
        mask-image: none;
        background:
            radial-gradient(ellipse 70% 58% at 30% 38%, var(--profile-glow-c1, #9a6fd8) 0%, transparent 70%),
            radial-gradient(ellipse 68% 56% at 72% 34%, var(--profile-glow-c2, #4da8d8) 0%, transparent 68%),
            radial-gradient(ellipse 74% 62% at 50% 62%, var(--profile-glow-c3, #d89a4d) 0%, transparent 72%);
        background-size: 180% 180%, 180% 180%, 190% 190%;
        background-position: 10% 30%, 90% 20%, 50% 70%;
        animation: profileAvatarGlowDrift 8s ease-in-out infinite alternate;
    
    }

    body.layout-tablet #user-profile-modal .profile-avatar-glow.hidden {

        display: none !important;
    
    }

    body.layout-tablet #user-profile-modal.profile-is-deleted .profile-avatar-glow {

        display: none !important;
    
    }

@keyframes profileAvatarGlowDrift {
        0% {
            transform: scale(0.98);
            background-position: 0% 36%, 100% 14%, 50% 100%, 50% 100%;
        }
        50% {
            transform: scale(1.06);
            background-position: 72% 18%, 14% 70%, 88% 92%, 50% 88%;
        }
        100% {
            transform: scale(1.02);
            background-position: 30% 72%, 70% 24%, 10% 88%, 50% 100%;
        }
    }

    body.layout-tablet #user-profile-modal .profile-avatar,
    body.layout-tablet #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-avatar,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-avatar,
    body.layout-tablet #group-profile-modal:not(.sheet-expanded) .profile-avatar {

        width: 92px !important;
        height: 92px !important;
        flex: 0 0 92px !important;
        font-size: 34px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: center !important;
        justify-self: center !important;
        overflow: hidden !important;
        position: relative !important;
        z-index: 1 !important;
    
    }

    body.layout-tablet #user-profile-modal #profile-avatar img,
    body.layout-tablet #user-profile-modal .profile-avatar img {

        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 50% !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-header-text,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-header-text {

        align-items: center !important;
        justify-content: center !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: center !important;
        justify-self: center !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-name,
    body.layout-tablet #user-profile-modal .profile-header-text .profile-name,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-header-text .profile-name {

        font-size: 17px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        text-shadow: none !important;
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
        letter-spacing: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
        transform: none;
        animation: none;
    
    }

    body.layout-tablet #user-profile-modal .profile-name.is-marquee,
    body.layout-tablet #user-profile-modal .profile-header-text .profile-name.is-marquee,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-header-text .profile-name.is-marquee {
        text-overflow: clip !important;
        text-align: left !important;
        animation: profileNameMarquee var(--marquee-duration, 10s) linear infinite alternate !important;
    }

    body.layout-tablet #user-profile-modal .profile-status,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-header-text .profile-status {

        display: none !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-menu-btn {

        display: none !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-actions,
    body.layout-tablet #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-actions,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions-row {
        position: relative !important;
        z-index: 1 !important;
        display: grid !important;
        grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto !important;
        gap: 10px 10px !important;
        justify-items: stretch !important;
        align-items: center !important;
        padding: 6px 14px 14px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    body.layout-tablet #user-profile-modal .profile-actions #profile-mute-btn,
    body.layout-tablet #user-profile-modal .profile-actions #profile-block-btn-mobile,
    body.layout-tablet #user-profile-modal .profile-actions #profile-clear-btn-mobile,
    body.layout-tablet #user-profile-modal .profile-actions #profile-rename-btn,
    body.layout-tablet #user-profile-modal .profile-actions #profile-media-btn-mobile,
    body.layout-tablet #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-actions #profile-mute-btn,
    body.layout-tablet #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-actions #profile-block-btn-mobile,
    body.layout-tablet #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-actions #profile-clear-btn-mobile,
    body.layout-tablet #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-actions #profile-rename-btn,
    body.layout-tablet #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-actions #profile-media-btn-mobile,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions #profile-mute-btn,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions #profile-block-btn-mobile,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions #profile-clear-btn-mobile,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions #profile-rename-btn,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions #profile-media-btn-mobile {
        flex: unset !important;
        grid-column: span 2 !important;
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        border-radius: 50% !important;
        background: #0D0D0D !important;
        border: none !important;
        box-shadow: none !important;
        justify-self: center !important;
    }

    body.layout-tablet #user-profile-modal .profile-actions #profile-chat-btn,
    body.layout-tablet #user-profile-modal .profile-actions #profile-call-btn,
    body.layout-tablet #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-actions #profile-chat-btn,
    body.layout-tablet #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-actions #profile-call-btn,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions #profile-chat-btn,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions #profile-call-btn {
        grid-column: span 5 !important;
        flex: unset !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 52px !important;
        min-height: 52px !important;
        border-radius: 999px !important;
        background: #0D0D0D !important;
        border: none !important;
        box-shadow: none !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    body.layout-tablet #user-profile-modal #profile-chat-btn {
        display: inline-flex !important;
    }

    body.layout-tablet #user-profile-modal .profile-actions #profile-call-btn .profile-action-primary-label,
    body.layout-tablet #user-profile-modal .profile-actions #profile-chat-btn .profile-action-primary-label {
        display: inline !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #fff !important;
    }

    body.layout-tablet #user-profile-modal .profile-actions .profile-action-btn--mobile-only {
        display: flex !important;
    }


    body.layout-tablet #user-profile-modal .profile-actions #profile-mute-btn,
    body.layout-tablet #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-actions #profile-mute-btn,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions #profile-mute-btn {
        justify-self: start !important;
    }
    body.layout-tablet #user-profile-modal .profile-actions #profile-media-btn-mobile,
    body.layout-tablet #user-profile-modal.sheet-open:not(.sheet-expanded) .profile-actions #profile-media-btn-mobile,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-hero-section .profile-actions #profile-media-btn-mobile {
        justify-self: end !important;
    }

    body.layout-tablet #user-profile-modal .profile-actions .profile-action-btn svg {
        width: 24px !important;
        height: 24px !important;
    }

    body.layout-tablet #user-profile-modal .profile-info--user-pills {

        padding: 0 14px 10px !important;
        border: none !important;
        background: transparent !important;
        flex-shrink: 0 !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-info--user-pills .profile-info-merged-pill {

        background: #0D0D0D !important;
        border-radius: 24px !important;
        padding: 12px 14px !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item {

        margin-bottom: 12px !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-item:last-child {

        margin-bottom: 0 !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-label {

        font-size: 11px !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.45) !important;
        margin-bottom: 4px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-info--user-pills .profile-info-merged-pill .profile-info-value {

        font-size: 14px !important;
        font-weight: 500 !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-media,
    body.layout-tablet #user-profile-modal.sheet-expanded .profile-media {

        display: none !important;
    
    }

    body.layout-tablet #user-profile-modal .profile-flow-bar {

        flex-shrink: 0;
        background: #0D0D0D !important;
        border-radius: 24px !important;
        margin-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    
    }

    body.layout-tablet #user-profile-modal.profile-is-self .profile-flow-bar {

        margin-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    
    }

    /* анимация шита */
    body.layout-tablet #user-profile-modal {

        align-items: stretch !important;
        justify-content: flex-start !important;
    
    }

    body.layout-tablet #group-profile-modal {

        align-items: flex-end !important;
        justify-content: flex-end !important;
        background: rgba(0, 0, 0, 0.22) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    
    }

    body.layout-tablet #user-profile-modal {

        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    
    }

    body.layout-tablet #group-profile-modal .modal-content.group-profile-modal {

        width: 100% !important;
        max-width: 100% !important;
        height: 58vh;
        max-height: 58vh;
        border-radius: 34px 34px 0 0;
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--bg-dark);
        border: 1px solid var(--gray-border);
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: translateY(110%);
        transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
        will-change: transform;
        position: relative;
    
    }

    body.layout-tablet #user-profile-modal .modal-content.user-profile-modal {

        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        overflow: hidden;
        overflow-x: hidden;
        background: var(--bg-dark);
        border: none !important;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: translateY(110%);
        transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
        will-change: transform;
        position: relative;
        display: flex;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    
    }

    body.layout-tablet #user-profile-modal.sheet-open .modal-content.user-profile-modal,
    body.layout-tablet #group-profile-modal.sheet-open .modal-content.group-profile-modal {

        transform: translateY(0);
    
    }

    body.layout-tablet #user-profile-modal.closing .modal-content.user-profile-modal,
    body.layout-tablet #group-profile-modal.closing .modal-content.group-profile-modal {

        transform: translateY(110%);
    
    }
}

/* Отмена ПК-панели на планшете */
body.layout-tablet #user-profile-modal {
    pointer-events: auto !important;
}
body.layout-tablet.user-profile-panel-open .chat-area,
body.layout-tablet.user-profile-panel-open .input-panel {
    margin-right: 0 !important;
}
body.layout-tablet #user-profile-modal.user-profile-panel-visible .modal-content.user-profile-modal {
    transform: translateY(0) !important;
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
}

/* ——— Профиль канала (компактный bottom sheet) ——— */
#group-profile-modal.group-profile--channel .modal-content.group-profile-modal {
    background: #242424 !important;
}

#group-profile-modal.group-profile--channel .group-profile-hero,
#group-profile-modal.group-profile--channel .channel-profile-footer,
#group-profile-modal.group-profile--channel .group-edit-section,
#group-profile-modal.group-profile--channel .group-profile-header,
#group-profile-modal.group-profile--channel .profile-info {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

.group-profile-handle {
    font-size: 14px;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
}

#group-profile-modal.group-profile--channel .group-profile-status {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
}

#group-profile-modal.group-profile--channel .group-profile-header .profile-name {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.channel-profile-footer {
    display: flex;
    gap: 10px;
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
}

#group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 0;
    background: transparent;
    border: none;
}

#group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-header {
    flex: 1 1 auto;
    min-width: 0;
}

#group-profile-modal.group-profile--channel .channel-profile-toolbar--compact {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

#group-profile-modal.group-profile--channel .channel-profile-toolbar--compact .profile-action-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    background: #333333 !important;
    border: none !important;
}

#group-profile-modal.group-profile--channel .channel-profile-toolbar--compact .profile-action-btn svg {
    width: 17px;
    height: 17px;
}

#group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-header .profile-avatar-shell,
#group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-header .profile-avatar-frame {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    max-width: 72px;
    max-height: 72px;
    flex: 0 0 72px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
}

#group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-header .profile-avatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    flex: 0 0 72px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

#group-profile-modal.group-profile--channel .group-profile-header .profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

#group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-avatar-preview {
    cursor: pointer;
}

#group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-avatar-actions {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

#group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-avatar-btn {
    display: none;
}

.channel-profile-btn {
    flex: 1;
    border: none;
    border-radius: 999px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
}

.channel-profile-btn--primary {
    background: #ffffff;
    color: #0a0a0a;
}

.channel-profile-btn--secondary {
    background: #2a2a2e;
    color: #ffffff;
}

.channel-edit-delete-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
}

.channel-edit-delete-btn svg {
    display: block;
}

#group-profile-modal.group-profile--channel .group-profile-sheet-handle {
    display: block;
    margin: 10px auto 0;
}

@media (min-width: 769px) {
    #group-profile-modal.group-profile--channel {
        align-items: center !important;
        justify-content: center !important;
    }

    #group-profile-modal.group-profile--channel .modal-content.group-profile-modal {
        width: 100% !important;
        max-width: 420px !important;
        height: auto !important;
        max-height: 90vh !important;
        margin: auto !important;
        border-radius: 24px !important;
        border: none !important;
        transform: none !important;
        background: #242424 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    #group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-hero {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 20px 20px 0;
    }

    #group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-header {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 !important;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .modal-content.group-profile-modal {
        overflow-y: auto !important;
    }

    #group-profile-modal.group-profile--channel .group-profile-sheet-handle {
        display: none;
    }

    #group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 20px 20px 0 !important;
        text-align: left !important;
    }

    #group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-header .profile-avatar-shell,
    #group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-header .profile-avatar-frame {
        width: 72px;
        height: 72px;
        min-width: 72px;
        min-height: 72px;
        max-width: 72px;
        max-height: 72px;
        flex: 0 0 72px;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 50%;
    }

    #group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-header .profile-avatar {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
        flex: 0 0 72px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        margin: 0 !important;
        font-size: 28px !important;
        overflow: hidden !important;
    }

    #group-profile-modal.group-profile--channel .profile-back,
    #group-profile-modal.group-profile--channel .profile-close {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #group-profile-modal.group-profile--channel {
        align-items: flex-end !important;
        justify-content: flex-end !important;
        background: rgba(0, 0, 0, 0.45) !important;
    }

    #group-profile-modal.group-profile--channel .modal-content.group-profile-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: min(46vh, 340px) !important;
        min-height: 0 !important;
        margin-top: auto !important;
        border-radius: 28px 28px 0 0 !important;
        border: none !important;
        transform: translateY(0) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 0 !important;
        background: #242424 !important;
    }

    #group-profile-modal.group-profile--channel.sheet-open .modal-content.group-profile-modal,
    #group-profile-modal.group-profile--channel.closing .modal-content.group-profile-modal {
        transform: translateY(0) !important;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .modal-content.group-profile-modal {
        max-height: min(88vh, 680px) !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    #group-profile-modal.group-profile--channel .group-profile-hero {
        padding: 0;
        background: transparent;
        border: none;
    }

    #group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 0 !important;
        aspect-ratio: auto !important;
        text-align: left !important;
        background: transparent !important;
    }

    #group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-header::after {
        display: none !important;
    }

    #group-profile-modal.group-profile--channel:not(.channel-profile--editing) .group-profile-header .profile-header-text {
        position: static !important;
        padding: 0 !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        pointer-events: auto !important;
        align-items: flex-start !important;
    }

    #group-profile-modal.group-profile--channel .profile-back,
    #group-profile-modal.group-profile--channel .profile-close {
        display: none !important;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-profile-hero,
    #group-profile-modal.group-profile--channel.channel-profile--editing .channel-profile-footer {
        display: none !important;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-section {
        padding: 20px 20px calc(16px + env(safe-area-inset-bottom, 0px));
        flex: none;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-form {
        margin-top: 0;
        position: relative;
        height: auto;
        min-height: 0;
        padding-top: 44px;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-card {
        background: transparent;
        border: none;
        padding: 0;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-avatar-row {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-avatar-preview {
        width: 88px;
        height: 88px;
        min-width: 88px;
        min-height: 88px;
        aspect-ratio: 1 / 1;
        font-size: 34px;
        cursor: pointer;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-avatar-preview:focus-visible {
        outline: 2px solid rgba(139, 92, 246, 0.55);
        outline-offset: 3px;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-avatar-actions {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-avatar-btn {
        display: none;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-fields {
        width: 100%;
        align-items: center;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-field {
        width: 100%;
        text-align: left;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin-top: 12px;
        padding: 10px 0 calc(4px + env(safe-area-inset-bottom, 0px));
        background: #242424;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-save-btn {
        background: #ffffff;
        color: #0a0a0a;
        border-radius: 999px;
    }

    #group-profile-modal.group-profile--channel.channel-profile--editing .group-edit-cancel-btn {
        background: #2a2a2e;
        color: #ffffff;
        border-radius: 999px;
    }
}

/* Профиль: отдельный GPU-слой блюра (вешается на body через JS) */
.xam-profile-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(28px) saturate(125%);
    -webkit-backdrop-filter: blur(28px) saturate(125%);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}

.xam-profile-modal-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.32s ease, visibility 0s;
}

@media (max-width: 768px) {
    .xam-profile-modal-backdrop {
        display: block;
    }
}

@media (min-width: 769px) {
    body.layout-tablet .xam-profile-modal-backdrop {
        display: block;
    }

    body:not(.layout-tablet) .xam-profile-modal-backdrop {
        display: block;
    }

    body:not(.layout-tablet) .xam-profile-modal-backdrop.xam-profile-modal-backdrop--desktop {
        background: rgba(0, 0, 0, 0.46) !important;
        backdrop-filter: blur(0px) saturate(118%) !important;
        -webkit-backdrop-filter: blur(0px) saturate(118%) !important;
        transition:
            opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            backdrop-filter 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            -webkit-backdrop-filter 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0.34s;
    }
    body:not(.layout-tablet) .xam-profile-modal-backdrop.xam-profile-modal-backdrop--desktop.is-visible {
        backdrop-filter: blur(16px) saturate(118%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(118%) !important;
        transition:
            opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            backdrop-filter 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            -webkit-backdrop-filter 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s;
    }
}

/* ПК: центральный профиль — blur через backdrop внутри модалки (см. блок user-profile-modal) */
@media (min-width: 769px) {
    body:not(.layout-tablet).user-profile-panel-open .xam-profile-modal-backdrop:not(.is-visible) {
        opacity: 0 !important;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .xam-profile-modal-backdrop {
        backdrop-filter: blur(12px) saturate(115%);
        -webkit-backdrop-filter: blur(12px) saturate(115%);
    }
}

/* ===== Group call header pills / mobile join ===== */
.group-call-header-pills {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
    flex-shrink: 0;
}
.group-call-header-pills.hidden { display: none !important; }

.group-call-join-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px 0 10px;
    border: none;
    border-radius: 999px;
    background: #23a559;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(35, 165, 89, 0.35);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.group-call-join-pill:hover { filter: brightness(1.06); }
.group-call-join-pill:active { transform: scale(0.97); }
.group-call-join-pill--return { background: #3ba55d; }
.group-call-join-pill__plus {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
}
.group-call-join-pill__count {
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.group-call-mobile-join {
    display: none !important;
}

/* Плавающая панель «идёт групповой звонок» под шапкой (мобилка) */
.group-call-chat-bar {
    display: none;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
}
.group-call-chat-bar.hidden {
    display: none !important;
}
.group-call-chat-bar__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.group-call-chat-bar__title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.group-call-chat-bar__meta {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.group-call-chat-bar__action {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
}
.group-call-chat-bar__action svg {
    display: block;
}

@media (max-width: 768px) {
    .group-call-chat-bar:not(.hidden) {
        position: fixed;
        top: calc(44px + var(--mobile-top-btn-size, 46px) + 14px);
        left: 50%;
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        z-index: 11;
        display: flex;
        padding: 12px 14px;
        border-radius: 18px;
        border: none;
        background: rgba(18, 18, 22, 0.72);
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        transform: translateX(-50%);
        animation: groupCallChatBarInMobile 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
        pointer-events: auto;
    }
    .group-call-chat-bar:not(.hidden):active {
        transform: translateX(-50%) scale(0.985);
    }
    .chat-view.chat-view--auto-translate .group-call-chat-bar:not(.hidden) {
        top: calc(44px + var(--mobile-top-btn-size, 46px) + 14px + 48px);
    }
    .chat-view.chat-view--has-pinned .group-call-chat-bar:not(.hidden) {
        top: calc(44px + var(--mobile-top-btn-size, 46px) + 14px + 58px);
    }
    .chat-view.chat-view--auto-translate.chat-view--has-pinned .group-call-chat-bar:not(.hidden) {
        top: calc(44px + var(--mobile-top-btn-size, 46px) + 14px + 58px + 48px);
    }

    .chat-view.chat-view--group-call-bar:not(.chat-view--has-pinned):not(.chat-view--auto-translate) > .messages-container {
        padding-top: calc(104px + 64px) !important;
        scroll-padding-top: calc(104px + 64px);
    }
    .chat-view.chat-view--group-call-bar.chat-view--auto-translate:not(.chat-view--has-pinned) > .messages-container {
        padding-top: calc(104px + 48px + 64px) !important;
        scroll-padding-top: calc(104px + 48px + 64px);
    }
    .chat-view.chat-view--group-call-bar.chat-view--has-pinned:not(.chat-view--auto-translate) > .messages-container {
        padding-top: calc(104px + 58px + 64px) !important;
        scroll-padding-top: calc(104px + 58px + 64px);
    }
    .chat-view.chat-view--group-call-bar.chat-view--auto-translate.chat-view--has-pinned > .messages-container {
        padding-top: calc(104px + 58px + 48px + 64px) !important;
        scroll-padding-top: calc(104px + 58px + 48px + 64px);
    }
}

@keyframes groupCallChatBarInMobile {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (min-width: 769px) {
    .group-call-chat-bar {
        display: none !important;
    }
}

.chat-user-status--group-call,
.chat-top-overlay-status.chat-user-status--group-call {
    color: #23a559 !important;
    font-weight: 600;
}

@keyframes group-call-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.85); opacity: 0.65; }
}

/* ===== Discord-style group call tiles ===== */
#fullscreen-call-screen.group-call-mode .pc-call-stage {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0 !important;
}
#fullscreen-call-screen.group-call-mode .pc-call-hero,
#fullscreen-call-screen.group-call-mode #mobile-call-audio-waves,
#fullscreen-call-screen.group-call-mode #fullscreen-remote-video,
#fullscreen-call-screen.group-call-mode #fullscreen-local-video,
#fullscreen-call-screen.group-call-mode .pc-call-video-name {
    display: none !important;
}
/* ПК: .pc-call-video-column по умолчанию display:none без has-video — в группе всегда показываем */
#fullscreen-call-screen.group-call-mode #fullscreen-video-stage,
#fullscreen-call-screen.group-call-mode #fullscreen-video-stage.group-call-stage-active,
#fullscreen-call-screen.group-call-mode .pc-call-video-column,
#fullscreen-call-screen.group-call-mode .fullscreen-video-container {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    background: #1e1f22 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    z-index: 5 !important;
    overflow: hidden !important;
}
#fullscreen-call-screen.group-call-mode .group-call-tiles--fullscreen {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid !important;
    gap: 12px;
    padding: 28px 20px 118px;
    box-sizing: border-box;
    overflow: hidden;
    align-content: stretch;
    justify-content: stretch;
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    height: 100%;
    grid-auto-rows: minmax(0, 1fr);
}
#fullscreen-call-screen.group-call-mode .group-call-tiles--fullscreen.hidden {
    display: none !important;
}
#fullscreen-call-screen.group-call-mode .pc-call-layout,
#fullscreen-call-screen.group-call-mode .fullscreen-call-container {
    background: #1e1f22 !important;
}
.group-call-tiles {
    display: grid;
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
    align-content: stretch;
    justify-content: stretch;
    align-items: stretch;
    justify-items: stretch;
    grid-auto-rows: minmax(0, 1fr);
}
.group-call-tiles.hidden { display: none !important; }

/* Равномерная сетка без наложений: ячейки делят доступную площадь */
.group-call-tiles[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    max-width: min(920px, 100%);
    margin-inline: auto;
}
.group-call-tiles[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
}
.group-call-tiles[data-count="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}
.group-call-tiles[data-count="3"] .group-call-tile:last-child {
    grid-column: 1 / -1;
    max-width: 56%;
    justify-self: center;
    width: 100%;
}
.group-call-tiles[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}
.group-call-tiles[data-count="5"],
.group-call-tiles[data-count="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}
.group-call-tiles[data-count="7"],
.group-call-tiles[data-count="8"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.group-call-tile {
    position: relative;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    border-radius: 12px;
    overflow: hidden;
    background: #2b2d31;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.group-call-tile--self {
    border-color: rgba(35, 165, 89, 0.35);
}
.group-call-tile__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background: #111214;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.18s ease;
}
/* Вертикальная камера: целиком в контейнере, без обрезки по бокам */
.group-call-tile.has-video.is-portrait .group-call-tile__video {
    object-fit: contain;
    background: #111214;
}
/* Горизонтальная — тоже целиком, без «наезда» кропом */
.group-call-tile.has-video.is-landscape .group-call-tile__video {
    object-fit: contain;
}
.group-call-tile.has-video .group-call-tile__video {
    opacity: 1;
    z-index: 3;
}
.group-call-tile.has-video .group-call-tile__fallback {
    opacity: 0;
    pointer-events: none;
}

.group-call-tile__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #313338 0%, #2b2d31 100%);
    transition: opacity 0.15s ease;
}
.group-call-tile__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #5865f2;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 28px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.group-call-tile__meta {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 16px);
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    z-index: 4;
}
.group-call-tile__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.group-call-tile__badge {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
    background: #23a559;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Фокус: выбранный тайл крупно по центру, остальные — полоска сверху */
.group-call-tiles.has-focus {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
    grid-template-rows: minmax(88px, 18vh) minmax(0, 1fr) !important;
    align-content: stretch !important;
    justify-content: stretch !important;
    gap: 10px !important;
    max-width: none !important;
    margin-inline: 0 !important;
}
.group-call-tiles.has-focus .group-call-tile {
    cursor: pointer;
}
.group-call-tiles.has-focus .group-call-tile.is-unfocused {
    grid-row: 1;
    min-height: 0;
    height: 100%;
    max-width: none !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    justify-self: stretch;
    align-self: stretch;
    border-color: transparent;
    opacity: 0.92;
}
.group-call-tiles.has-focus .group-call-tile.is-unfocused:hover {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.22);
}
.group-call-tiles.has-focus .group-call-tile.is-focused {
    grid-row: 2;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: min(980px, 100%) !important;
    height: 100% !important;
    min-height: 0;
    justify-self: center;
    align-self: stretch;
    aspect-ratio: auto !important;
    border-color: rgba(35, 165, 89, 0.55);
    box-shadow: 0 0 0 1px rgba(35, 165, 89, 0.25), 0 12px 40px rgba(0, 0, 0, 0.35);
    z-index: 2;
}
.group-call-tiles.has-focus[data-count] .group-call-tile:last-child {
    /* сброс спец-правила для 3 участников */
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
    width: 100%;
}
.group-call-tiles.has-focus .group-call-tile.is-focused:last-child {
    grid-column: 1 / -1 !important;
    max-width: min(980px, 100%) !important;
    justify-self: center;
}
.group-call-tile {
    cursor: pointer;
}
.group-call-tile:focus-visible {
    outline: 2px solid rgba(35, 165, 89, 0.7);
    outline-offset: 2px;
}

/* Один участник с вертикальной камерой — портретный кадр по центру */
.group-call-tiles[data-count="1"] .group-call-tile.has-video.is-portrait {
    max-width: min(420px, 100%);
    max-height: 100%;
    aspect-ratio: 9 / 16;
    width: auto;
    height: 100%;
    justify-self: center;
    align-self: center;
}
.group-call-tiles[data-count="1"] .group-call-tile.has-video.is-portrait .group-call-tile__video {
    object-fit: cover;
}

@media (max-width: 768px) {
    #fullscreen-call-screen.group-call-mode .group-call-tiles--fullscreen {
        padding: 52px 10px 120px;
        gap: 8px;
        overflow: auto;
        align-content: start;
        grid-auto-rows: minmax(140px, auto);
    }
    .group-call-tiles[data-count="1"] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(220px, 48vh);
        max-width: none;
    }
    .group-call-tiles[data-count="2"] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(160px, 36vh));
    }
    .group-call-tiles[data-count="3"],
    .group-call-tiles[data-count="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(140px, 30vh));
    }
    .group-call-tiles[data-count="3"] .group-call-tile:last-child {
        grid-column: auto;
        max-width: none;
        justify-self: stretch;
    }
    .group-call-tiles[data-count="5"],
    .group-call-tiles[data-count="6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(120px, 26vh));
    }
    .group-call-tiles[data-count="7"],
    .group-call-tiles[data-count="8"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(110px, 22vh));
    }
    .group-call-tile {
        min-height: 120px;
        height: 100%;
    }
    .group-call-tiles[data-count="1"] .group-call-tile.has-video.is-portrait {
        max-width: min(280px, 72vw);
        height: min(68vh, 100%);
    }
    .group-call-tile__avatar { width: 64px; height: 64px; font-size: 24px; }
    .group-call-header-pills { display: none !important; }
    .group-call-tiles.has-focus {
        grid-template-rows: minmax(76px, 16vh) minmax(0, 1fr) !important;
        gap: 8px !important;
    }
    .group-call-tiles.has-focus .group-call-tile.is-focused {
        max-width: 100% !important;
    }
}

/* Group profile call actions */
.group-profile-toolbar .profile-action-btn {
    flex-direction: column;
    gap: 4px;
    min-width: 64px;
}
.group-profile-toolbar .profile-action-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    color: inherit;
    opacity: 0.85;
}
.group-profile-call-btn.is-live {
    color: #23a559;
}
.group-profile-call-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 16px 12px;
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(35, 165, 89, 0.12);
    border: 1px solid rgba(35, 165, 89, 0.28);
    color: #d7f5e3;
}
.group-profile-call-banner.is-joinable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.group-profile-call-banner.is-joinable:active {
    transform: scale(0.99);
}
.group-profile-call-banner.hidden { display: none !important; }
.group-profile-call-banner__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #23a559;
    box-shadow: 0 0 0 4px rgba(35, 165, 89, 0.18);
    flex-shrink: 0;
    animation: groupCallBannerPulse 1.6s ease-in-out infinite;
}
@keyframes groupCallBannerPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.85); opacity: 0.65; }
}
.group-profile-call-banner__text {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #e8fff1;
}
.group-profile-call-banner__btn {
    border: none;
    border-radius: 999px;
    padding: 7px 12px;
    background: #23a559;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* ===== Панель участника группового звонка ===== */
.group-call-participant-sheet {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}
.group-call-participant-sheet.hidden {
    display: none !important;
}
.group-call-participant-sheet.is-open {
    pointer-events: auto;
}
.group-call-participant-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 280ms ease;
}
.group-call-participant-sheet.is-open .group-call-participant-sheet__backdrop {
    opacity: 1;
}
.group-call-participant-sheet__panel {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    min-height: min(52vh, 420px);
    max-height: min(82vh, 640px);
    background: #2b2d31;
    border-radius: 36px 36px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
    transform: translate3d(0, 110%, 0);
    transition: transform 320ms cubic-bezier(0.22, 0.9, 0.28, 1);
    will-change: transform;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.group-call-participant-sheet.is-open .group-call-participant-sheet__panel {
    transform: translate3d(0, 0, 0);
}
.group-call-participant-sheet__scroll {
    min-height: min(52vh, 420px);
    max-height: min(82vh, 640px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 22px 20px 28px;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.group-call-participant-sheet__scroll::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}
.group-call-participant-sheet__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.group-call-participant-sheet__close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.group-call-participant-sheet__close:hover {
    background: rgba(255, 255, 255, 0.12);
}
.group-call-participant-sheet__title-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}
.group-call-participant-sheet__name {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.group-call-participant-sheet__role-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.group-call-participant-sheet__role-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}
.group-call-participant-sheet__role-icon.is-host {
    color: #fff;
}
.group-call-participant-sheet__role-icon.is-member {
    color: rgba(255, 255, 255, 0.92);
}
.group-call-participant-sheet__volume {
    margin-bottom: 22px;
}
.group-call-participant-sheet__volume.hidden {
    display: none !important;
}
.group-call-participant-sheet__volume-label {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 14px;
}
.group-call-participant-sheet__volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    outline: none;
    cursor: pointer;
}
.group-call-participant-sheet__volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #5865f2;
    border: none;
    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.45);
    cursor: pointer;
}
.group-call-participant-sheet__volume-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #5865f2;
    border: none;
    cursor: pointer;
}
.group-call-participant-sheet__volume-slider::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
}
.group-call-participant-sheet__role-line {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 16px;
}
.group-call-participant-sheet__kick {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 14px 16px;
    background: rgba(237, 66, 69, 0.16);
    color: #ff6b6e;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.group-call-participant-sheet__kick:hover {
    background: rgba(237, 66, 69, 0.24);
}
.group-call-participant-sheet__kick.hidden {
    display: none !important;
}

@media (min-width: 769px) {
    .group-call-participant-sheet {
        align-items: center;
    }
    .group-call-participant-sheet__panel {
        border-radius: 22px;
        margin: 0 16px;
        min-height: 0;
        max-height: min(70vh, 480px);
        transform: translateY(16px) scale(0.98);
        opacity: 0;
        transition: transform 200ms ease, opacity 180ms ease;
    }
    .group-call-participant-sheet.is-open .group-call-participant-sheet__panel {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    .group-call-participant-sheet__scroll {
        min-height: 0;
        max-height: min(70vh, 480px);
        padding: 20px 22px 24px;
    }
}

@media (max-width: 768px) {
    .group-call-participant-sheet__panel {
        width: 100%;
        min-height: min(56vh, 460px);
        max-height: min(86vh, 680px);
        border-radius: 40px 40px 0 0;
        transition: transform 340ms cubic-bezier(0.22, 0.9, 0.28, 1);
    }
    .group-call-participant-sheet__scroll {
        min-height: min(56vh, 460px);
        max-height: min(86vh, 680px);
        padding: 24px 20px 32px;
    }
    .group-call-participant-sheet__header {
        margin-bottom: 28px;
    }
    .group-call-participant-sheet__volume {
        margin-bottom: 28px;
    }
    .group-call-participant-sheet__backdrop {
        transition: opacity 300ms ease;
    }
}
.group-profile--group .group-profile-handle:not(.hidden) {
    margin-top: 2px;
    color: rgba(255,255,255,0.55);
    font-size: 14px;
}

/* ===== Group profile (groups) — desktop action grid ===== */
@media (min-width: 769px) {
#group-profile-modal.group-profile--group .group-profile-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
    padding: 4px 16px 14px;
    width: 100%;
    box-sizing: border-box;
}
#group-profile-modal.group-profile--group .group-profile-toolbar .profile-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f3f4f6;
    width: 100%;
    min-width: 0;
    padding: 10px 8px;
}
#group-profile-modal.group-profile--group .group-profile-toolbar .profile-action-btn svg {
    width: 22px;
    height: 22px;
}
#group-profile-modal.group-profile--group .group-profile-toolbar .profile-action-label {
    font-size: 12px;
    font-weight: 650;
    opacity: 0.9;
}
#group-profile-modal.group-profile--group .group-profile-call-btn.is-live,
#group-profile-modal.group-profile--group .group-profile-call-btn.is-live .profile-action-label {
    color: #3dd68c;
}
}
#group-profile-modal.group-profile--group .group-profile-call-banner {
    margin: 0 16px 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(35, 165, 89, 0.18), rgba(35, 165, 89, 0.08));
    border: 1px solid rgba(35, 165, 89, 0.4);
}
#group-profile-modal.group-profile--group .group-profile-status {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}
#group-profile-modal.group-profile--group .group-profile-handle:not(.hidden) {
    margin-top: 4px;
    color: #8b9bb4;
    font-size: 14px;
    font-weight: 600;
}
#group-profile-modal.group-profile--group .group-members-section {
    padding: 8px 16px 18px;
}
#group-profile-modal.group-profile--group .group-members-title {
    font-size: 15px;
    font-weight: 700;
    margin: 8px 0 12px;
    letter-spacing: 0.01em;
}
#group-profile-modal.group-profile--group .group-profile-info.profile-info--user-pills {
    padding-top: 8px;
}
#group-profile-modal.group-profile--group .group-profile-info .profile-info-merged-pill {
    background: #141414;
    border: 1px solid rgba(255,255,255,0.06);
}

@media (min-width: 769px) {
    #group-profile-modal.group-profile--group .modal-content.group-profile-modal {
        width: min(440px, calc(100vw - 48px));
        max-height: min(860px, calc(100vh - 48px));
        border-radius: 22px;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    #group-profile-modal.group-profile--group .group-profile-hero {
        padding-bottom: 6px;
    }
    #group-profile-modal.group-profile--group .profile-name {
        font-size: 26px;
        font-weight: 750;
    }
    #group-profile-modal.group-profile--group .profile-avatar {
        background: #1a1a1c;
    }
    #group-profile-modal.group-profile--group .profile-avatar img {
        object-fit: contain !important;
        object-position: center center !important;
    }
}

@media (max-width: 768px) {
    #group-profile-modal.group-profile--group.sheet-expanded .group-profile-header .profile-avatar img,
    #group-profile-modal.group-profile--group.closing.sheet-expanded .group-profile-header .profile-avatar img {
        object-fit: contain !important;
        object-position: center center !important;
    }
    #group-profile-modal.group-profile--group .group-profile-toolbar {
        padding: 2px 14px 12px;
        gap: 8px;
    }
    #group-profile-modal.group-profile--group .group-profile-toolbar .profile-action-btn {
        min-height: 58px;
        border-radius: 14px;
    }
    #group-profile-modal.group-profile--group .group-profile-call-banner {
        margin: 0 14px 12px;
        padding: 14px 14px;
        border-radius: 18px;
        gap: 12px;
        background: linear-gradient(135deg, rgba(35, 165, 89, 0.22), rgba(35, 165, 89, 0.1));
        border: 1px solid rgba(61, 214, 140, 0.4);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    }
    #group-profile-modal.group-profile--group .group-profile-call-banner__text {
        font-size: 14px;
        font-weight: 700;
    }
    #group-profile-modal.group-profile--group .group-profile-call-banner__btn {
        padding: 9px 14px;
        border-radius: 999px;
        font-size: 13px;
    }
}

/* ===== XAM_CHAT_PERF_P1/P4 — мобильная виртуализация paint + lazy media =====
 * Откат P1: удалить этот блок ИЛИ XAM_CHAT_PERF.p1_virtualCss / p1_softWindow = false
 * Откат P4: XAM_CHAT_PERF.p4_lazyMedia = false (классы .xam-media-lazy перестанут ставиться)
 *
 * Важно: .has-reactions НЕ получают content-visibility — реакции absolute торчат
 * за пузырь и иначе обрезаются paint-containment'ом.
 */
@media (max-width: 768px) {
    #messages-container.xam-perf-p1 > .message:not(.has-reactions),
    #messages-container.xam-perf-p1 > .date-separator {
        content-visibility: auto;
        contain-intrinsic-size: auto 36px;
    }

    #messages-container.xam-perf-p1 > .message.has-reactions {
        content-visibility: visible;
    }

    #messages-container .message.message--perf-collapsed {
        content-visibility: hidden;
        contain: strict;
        height: var(--xam-h, 72px) !important;
        min-height: var(--xam-h, 72px);
        max-height: var(--xam-h, 72px);
        overflow: hidden !important;
        pointer-events: none;
    }

    #messages-container .message.message--perf-collapsed > * {
        display: none !important;
    }

    #messages-container img.xam-media-lazy,
    #messages-container video.xam-media-lazy {
        background: rgba(255, 255, 255, 0.05);
        min-height: 120px;
        width: 100%;
        max-width: 100%;
        object-fit: cover;
    }

    #messages-container .message--sticker img.xam-media-lazy {
        min-height: 96px;
        width: 120px;
        background: transparent;
    }
}

/* ===== Media card (фото/видео) — оверлеи как на макете ===== */
.message.message--media-card {
    max-width: min(280px, 78vw);
}
.message.message--media-card .message-content.message-content--media-card {
    background: transparent !important;
    padding: 0 !important;
    max-width: min(280px, 78vw);
    width: fit-content;
    gap: 8px;
    box-shadow: none !important;
    border: none !important;
}
.message.message--media-card.own .message-content.message-content--media-card {
    background: transparent !important;
    max-width: min(280px, 78vw);
}
.message.message--media-card.has-reactions .message-content {
    margin-bottom: 0;
}

.message-media-card-shell {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 2px;
    box-sizing: border-box;
    background: var(--msg-peer-bg);
}

.message.message--media-card.own .message-media-card-shell {
    background: var(--msg-own-bg);
}

.message.message--media-card .message-media,
.message.message--media-card .message-media-image,
.message.message--media-card .message-media-video,
.message.message--media-card .message-media-album {
    margin: 0 !important;
    width: 100%;
    max-width: min(280px, 78vw);
    border-radius: 14px;
    overflow: hidden;
    background: #1a1a1c;
}

.message.message--media-card .message-media-image img,
.message.message--media-card .message-media-video video,
.message.message--media-card .message-media-album img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: min(440px, 64vh);
    height: auto;
    object-fit: cover;
    border-radius: 14px;
    transform: none !important;
}

.message.message--media-card .message-media-image img:hover {
    transform: none !important;
}

.message.message--media-card .message-media-album-grid {
    border-radius: 14px;
}

/* Альбом в media-card: ячейки не схлопывать общим правилом img { height:auto; max-height } */
.message.message--media-card .message-media-album-cell .message-media-image {
    aspect-ratio: 1;
    max-height: none !important;
}
.message.message--media-card .message-media-album-cell .message-media-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}
.message.message--media-card .message-media-album-grid.album-cells-3 .message-media-album-cell:nth-child(3) .message-media-image {
    aspect-ratio: 2 / 1;
}

.message.message--media-card .message-media-video.message-media-video--viewer-launch video {
    max-height: min(440px, 64vh);
    background: #111;
}

.message-media-card-meta {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: auto;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 16px);
    transform: none;
    pointer-events: auto;
}

.message-media-card-meta .message-time {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    float: none;
    top: auto;
    opacity: 1;
}

.message.message--media-card.own .message-media-card-meta .message-time {
    background: rgba(0, 0, 0, 0.45);
}

.message.message--media-card .message-time .edited-mark {
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
}

.message.message--media-card .read-status-icon {
    color: #ffffff !important;
    font-size: 12px;
    margin-left: 1px;
}

.message.message--media-card .message-reply.message-reply--media-card {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    max-width: calc(100% - 16px);
    margin: 0;
    padding: 6px 12px 6px 10px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transform: none;
}

.message.message--media-card.own .message-reply.message-reply--media-card {
    background: rgba(0, 0, 0, 0.4);
}

.message.message--media-card .message-reply.message-reply--media-card:hover,
.message.message--media-card .message-reply.message-reply--media-card:active {
    filter: brightness(1.06);
    transform: scale(0.98);
}

.message.message--media-card .message-reply__icon {
    flex-shrink: 0;
    display: block;
}

.message.message--media-card .message-reply__text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    mask-image: linear-gradient(90deg, #000 72%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent);
}

.message.message--media-card .message-media-card-meta .message-reactions {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 4px;
    max-width: var(--reaction-row-width, 156px);
    width: max-content;
    pointer-events: auto;
}

.message.message--media-card .message-reaction-badge {
    background: #4a76f8;
    color: #ffffff;
    min-height: 26px;
    padding: 4px 8px;
    box-shadow: 0 6px 14px rgba(21, 42, 88, 0.3);
}

.message.message--media-card .message-reaction-badge.is-reacted {
    background: #4a76f8;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 6px 14px rgba(21, 42, 88, 0.3);
}

.message.message--media-card .message-bubble-body--media-caption {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 16px;
    background: var(--msg-peer-bg);
}

.message.message--media-card.own .message-bubble-body--media-caption {
    background: var(--msg-own-bg);
}

.message.message--media-card .message-bubble-body--media-caption .message-text {
    margin: 0;
}

/* Медиа + подпись: подпись внутри той же тонкой рамки */
.message.message--media-card-caption .message-media-card-shell {
    width: 100%;
    max-width: min(280px, 78vw);
    padding: 2px 2px 6px;
}

.message.message--media-card-caption .message-media,
.message.message--media-card-caption .message-media-image,
.message.message--media-card-caption .message-media-video,
.message.message--media-card-caption .message-media-album {
    max-width: 100%;
}

.message.message--media-card-caption .message-bubble-body--media-caption {
    background: transparent;
    padding: 6px 8px 2px;
    border-radius: 0;
    width: 100%;
}

.message.message--media-card-caption .message-bubble-body--media-caption .message-time {
    float: right;
    clear: both;
    margin: 2px 0 0 8px !important;
    padding: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    position: static;
    top: auto;
    opacity: 0.85;
}

.message.message--media-card-caption.own .message-bubble-body--media-caption .message-time {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

.message.message--media-card-caption .message-bubble-body--media-caption .read-status-icon {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Reply chip icon for stickers too */
.message.message--sticker .message-reply--chip {
    gap: 6px;
}
.message.message--sticker .message-reply__icon {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}
.message.message--sticker .message-reply__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .message.message--media-card,
    .message.message--media-card .message-content.message-content--media-card,
    .message.message--media-card.own .message-content.message-content--media-card {
        max-width: min(260px, 74vw);
    }
    .message.message--media-card .message-media,
    .message.message--media-card .message-media-image,
    .message.message--media-card .message-media-video,
    .message.message--media-card .message-media-album {
        max-width: min(260px, 74vw);
    }
}

/* Media-card: перебить фон/радиусы обычных пузырей */
.messages-container .message.message--media-card .message-content.message-content--media-card,
.messages-container .message.message--media-card.own .message-content.message-content--media-card,
.messages-container .message.message--media-card.message-bubble-single.own .message-content,
.messages-container .message.message--media-card.message-bubble-first.own .message-content,
.messages-container .message.message--media-card.message-bubble-middle.own .message-content,
.messages-container .message.message--media-card.message-bubble-last.own .message-content,
.messages-container .message.message--media-card.message-bubble-single:not(.own) .message-content,
.messages-container .message.message--media-card.message-bubble-first:not(.own) .message-content,
.messages-container .message.message--media-card.message-bubble-middle:not(.own) .message-content,
.messages-container .message.message--media-card.message-bubble-last:not(.own) .message-content {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ========== ПК: обозреватель медиа профиля ========== */
.profile-media-browser {
    position: fixed;
    inset: 0;
    z-index: 34000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.profile-media-browser.hidden {
    display: none !important;
}

.profile-media-browser.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.28s ease, visibility 0s linear 0s;
}

.profile-media-browser-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.profile-media-browser.is-open .profile-media-browser-backdrop {
    opacity: 1;
}

.profile-media-browser-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: min(980px, calc(100vw - 48px));
    height: min(620px, calc(100vh - 56px));
    background: #0F0F0F;
    border-radius: 44px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transform: translateY(16px) scale(0.97);
    opacity: 0.92;
    transition:
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease;
}

.profile-media-browser.is-open .profile-media-browser-panel {
    transform: none;
    opacity: 1;
}

.profile-media-browser-nav {
    flex: 0 0 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 14px 20px;
    box-sizing: border-box;
}

.profile-media-browser-close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    border-radius: 12px;
    padding: 0;
}

.profile-media-browser-close:hover {
    background: rgba(255, 255, 255, 0.06);
}

.profile-media-browser-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.profile-media-browser-tab {
    width: 82px;
    min-height: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 6px;
    border-radius: 16px;
    border: 1.5px solid transparent;
    background: #1a1a1a;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.profile-media-browser-tab span {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
}

.profile-media-browser-tab.is-active {
    border-color: #9661F1;
}

.profile-media-browser-tab:hover:not(.is-active) {
    background: #222;
}

.profile-media-browser-main {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    margin: 18px 18px 18px 4px;
    border-radius: 18px;
    overflow: auto;
    background: #0F0F0F;
}

.profile-media-browser-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

.profile-media-browser-date {
    grid-column: 1 / -1;
    padding: 8px 4px 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.profile-media-browser-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    align-content: start;
    background: #0F0F0F;
}

.profile-media-browser-cell {
    position: relative;
    aspect-ratio: 1.05 / 1;
    background: #d9d9d9;
    overflow: hidden;
    cursor: pointer;
    min-height: 0;
}

.profile-media-browser-cell img,
.profile-media-browser-cell video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #d9d9d9;
}

.profile-media-browser-cell-file,
.profile-media-browser-cell-audio {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    box-sizing: border-box;
    color: #222;
    text-align: center;
    background: #d9d9d9;
}

.profile-media-browser-cell-file span,
.profile-media-browser-cell-audio span {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.profile-media-browser-cell-video-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.profile-media-browser-empty,
.profile-media-browser-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    pointer-events: none;
}

.profile-media-browser-empty.hidden,
.profile-media-browser-loading.hidden {
    display: none !important;
}

/* Мобилка / телефонный layout: нижний шит + пилюли вкладок */
@media (max-width: 768px) {
    .profile-media-browser {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
    }

    .profile-media-browser-panel {
        flex-direction: column;
        width: 100%;
        height: min(78vh, 720px);
        max-height: calc(100dvh - 12px);
        border-radius: 32px 32px 0 0;
        border: none;
        transform: translateY(24px);
    }

    .profile-media-browser.is-open .profile-media-browser-panel {
        transform: translateY(0);
    }

    .profile-media-browser-nav {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 8px;
        padding: 14px 14px 10px;
    }

    .profile-media-browser-close {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 18px;
        background: #9661F1;
        color: #fff;
    }

    .profile-media-browser-close:hover,
    .profile-media-browser-close:active {
        background: #8554e0;
    }

    .profile-media-browser-tabs {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        gap: 8px;
    }

    .profile-media-browser-tab {
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 18px;
        border: none;
        background: #2a2a2c;
        color: #fff;
        flex-direction: row;
        gap: 0;
        overflow: hidden;
        transition:
            max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            background 0.2s ease,
            padding 0.28s ease;
    }

    .profile-media-browser-tab svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .profile-media-browser-tab span {
        display: none;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }

    .profile-media-browser-tab.is-active {
        width: auto;
        min-width: 0;
        max-width: 180px;
        padding: 0 14px 0 12px;
        gap: 8px;
        background: #9661F1;
        border: none;
        color: #fff;
    }

    .profile-media-browser-tab.is-active span {
        display: inline;
    }

    .profile-media-browser-tab:hover:not(.is-active) {
        background: #353538;
    }

    .profile-media-browser-main {
        margin: 0 12px 12px;
        border-radius: 16px;
        flex: 1 1 auto;
    }

    .profile-media-browser-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Планшет в телефонном режиме профиля — тот же мобильный шит */
@media (min-width: 769px) {
    body.layout-tablet .profile-media-browser {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
    }

    body.layout-tablet .profile-media-browser-panel {
        flex-direction: column;
        width: 100%;
        height: min(78vh, 720px);
        max-height: calc(100dvh - 12px);
        border-radius: 32px 32px 0 0;
        border: none;
        transform: translateY(24px);
    }

    body.layout-tablet .profile-media-browser.is-open .profile-media-browser-panel {
        transform: translateY(0);
    }

    body.layout-tablet .profile-media-browser-nav {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 8px;
        padding: 14px 14px 10px;
    }

    body.layout-tablet .profile-media-browser-close {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 18px;
        background: #9661F1;
        color: #fff;
    }

    body.layout-tablet .profile-media-browser-tabs {
        flex-direction: row;
        flex: 1 1 auto;
        width: auto;
        gap: 8px;
    }

    body.layout-tablet .profile-media-browser-tab {
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 18px;
        border: none;
        background: #2a2a2c;
        color: #fff;
        flex-direction: row;
        gap: 0;
        overflow: hidden;
    }

    body.layout-tablet .profile-media-browser-tab svg {
        width: 20px;
        height: 20px;
    }

    body.layout-tablet .profile-media-browser-tab span {
        display: none;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }

    body.layout-tablet .profile-media-browser-tab.is-active {
        width: auto;
        max-width: 180px;
        padding: 0 14px 0 12px;
        gap: 8px;
        background: #9661F1;
        border: none;
    }

    body.layout-tablet .profile-media-browser-tab.is-active span {
        display: inline;
    }

    body.layout-tablet .profile-media-browser-main {
        margin: 0 12px 12px;
        border-radius: 16px;
        flex: 1 1 auto;
    }

    body.layout-tablet .profile-media-browser-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ===== Chat peek panel (mobile swipe / long-press) — bottom sheet ===== */
.xam-chat-peek {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    pointer-events: none;
}

.xam-chat-peek.hidden {
    display: flex !important;
    pointer-events: none;
}

.xam-chat-peek--open {
    pointer-events: auto;
}

.xam-chat-peek-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.32s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.xam-chat-peek--open .xam-chat-peek-backdrop {
    opacity: 1;
}

.xam-chat-peek-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    height: min(84dvh, 780px);
    max-height: min(92dvh, 840px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #161618;
    border: none;
    border-radius: 44px 44px 0 0;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.45);
    transform: translate3d(0, 100%, 0);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    overflow: hidden;
    min-height: 0;
}

.xam-chat-peek--open .xam-chat-peek-panel {
    transform: translate3d(0, 0, 0);
}

.xam-chat-peek-handle {
    display: none !important;
}

.xam-chat-peek-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-shrink: 0;
    min-height: 34px;
}

.xam-chat-peek-hint {
    display: none !important;
}

.xam-chat-peek-icon-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.12s ease;
}

.xam-chat-peek-icon-btn:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.14);
}

.xam-chat-peek-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex-shrink: 0;
    padding: 2px 2px 4px;
}

.xam-chat-peek-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: #2e2e32;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.xam-chat-peek-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.xam-chat-peek-identity {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xam-chat-peek-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.xam-chat-peek-name {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.xam-chat-peek-unread {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #8774E1;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px rgba(135, 116, 225, 0.35);
}

.xam-chat-peek-unread.hidden {
    display: none !important;
}

.xam-chat-peek-status {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 16px;
}

.xam-chat-peek-status.is-online {
    color: #6ee7a8;
}

.xam-chat-peek-username {
    align-self: flex-start;
    margin: 2px 0 0;
    border: none;
    padding: 0;
    background: transparent;
    color: rgba(180, 160, 255, 0.9);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: left;
}

.xam-chat-peek-username:active {
    opacity: 0.7;
}

.xam-chat-peek-username[hidden] {
    display: none !important;
}

/* Сообщения занимают только оставшееся место — кнопки не наезжают */
.xam-chat-peek-messages-wrap {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    max-height: none;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.xam-chat-peek-messages-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 28px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(12, 12, 14, 0.85) 0%,
        rgba(12, 12, 14, 0) 100%
    );
    border-radius: 18px 18px 0 0;
}

.xam-chat-peek-messages-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(12, 12, 14, 0.85) 0%,
        rgba(12, 12, 14, 0) 100%
    );
    border-radius: 0 0 18px 18px;
}

.xam-chat-peek-messages {
    position: absolute;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 10px 12px;
    scrollbar-width: none;
    box-sizing: border-box;
}

.xam-chat-peek-messages::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.xam-chat-peek-msg {
    display: flex;
    max-width: 100%;
}

.xam-chat-peek-msg--own {
    justify-content: flex-end;
}

.xam-chat-peek-msg--peer {
    justify-content: flex-start;
}

.xam-chat-peek-msg--system {
    justify-content: center;
}

.xam-chat-peek-system {
    max-width: 90%;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    text-align: center;
}

.xam-chat-peek-bubble {
    position: relative;
    max-width: min(78%, 280px);
    padding: 7px 10px;
    border-radius: 14px;
    color: #fff;
    font-size: 14.5px;
    line-height: 1.3;
    word-break: break-word;
}

.xam-chat-peek-bubble::after {
    content: '';
    display: table;
    clear: both;
}

.xam-chat-peek-msg--own .xam-chat-peek-bubble {
    background: #8774E1;
    border-bottom-right-radius: 9px;
}

.xam-chat-peek-msg--peer .xam-chat-peek-bubble {
    background: #212121;
    border-bottom-left-radius: 9px;
}

.xam-chat-peek-bubble--media {
    padding: 2px;
    overflow: hidden;
}

.xam-chat-peek-bubble--media-caption {
    padding: 2px 2px 6px;
}

.xam-chat-peek-media-caption {
    display: block;
    padding: 6px 8px 2px;
}

.xam-chat-peek-bubble--media-caption .xam-chat-peek-bubble-text {
    padding: 0;
    display: inline;
}

.xam-chat-peek-bubble--media .xam-chat-peek-bubble-meta {
    position: absolute;
    right: 8px;
    bottom: 6px;
    margin-top: 0;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    opacity: 1;
}

.xam-chat-peek-bubble--media-caption .xam-chat-peek-bubble-meta {
    position: static;
    float: right;
    clear: both;
    margin-top: 2px;
    margin-left: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    opacity: 0.72;
}

.xam-chat-peek-bubble--sticker {
    background: transparent !important;
    padding: 0;
    max-width: min(42%, 148px);
}

.xam-chat-peek-bubble--sticker .xam-chat-peek-bubble-meta {
    justify-content: flex-end;
    margin-top: 4px;
    opacity: 0.72;
}

.xam-chat-peek-media {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.xam-chat-peek-bubble--media-caption .xam-chat-peek-media {
    border-radius: 12px;
}

.xam-chat-peek-media-el {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    vertical-align: middle;
}

.xam-chat-peek-bubble--sticker .xam-chat-peek-media-el {
    max-height: 120px;
    object-fit: contain;
    background: transparent;
}

.xam-chat-peek-media-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.xam-chat-peek-media-play svg {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}

.xam-chat-peek-bubble--call {
    min-width: 160px;
    padding: 8px 12px;
}

.xam-chat-peek-call-title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
}

.xam-chat-peek-call-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    opacity: 0.78;
    font-size: 12px;
}

.xam-chat-peek-call-sub .xam-chat-peek-bubble-meta {
    margin-top: 0;
    opacity: 1;
}

.xam-chat-peek-msg--call-missed .xam-chat-peek-call-title,
.xam-chat-peek-msg--call-rejected .xam-chat-peek-call-title,
.xam-chat-peek-msg--call-busy .xam-chat-peek-call-title {
    color: #ff8e8e;
}

.xam-chat-peek-voice,
.xam-chat-peek-file {
    display: flex;
    align-items: center;
    gap: 8px;
}

.xam-chat-peek-voice-icon,
.xam-chat-peek-file-icon {
    display: inline-flex;
    flex-shrink: 0;
    opacity: 0.9;
}

.xam-chat-peek-bubble-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    float: right;
    margin: 4px 0 0 8px;
    opacity: 0.72;
    font-size: 11px;
    clear: none;
}

.xam-chat-peek-bubble-text {
    white-space: pre-wrap;
}

.xam-chat-peek-read {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: rgba(255, 255, 255, 0.92);
}

.xam-chat-peek-read svg {
    display: block;
    width: 15px;
    height: 15px;
}

.xam-chat-peek-read.read-icon {
    color: #dff7ff;
}

.xam-chat-peek-empty,
.xam-chat-peek-loading {
    margin: auto;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    text-align: center;
    padding: 24px 12px;
}

.xam-chat-peek-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
}

.xam-chat-peek-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 68px;
    box-sizing: border-box;
    border: none;
    border-radius: 20px;
    padding: 10px 6px 9px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.15;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: transform 0.15s ease, background 0.15s ease;
}

.xam-chat-peek-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #d6d6dc;
}

.xam-chat-peek-btn-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.xam-chat-peek-btn-label {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.88);
}

.xam-chat-peek-btn:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.1);
}

.xam-chat-peek-btn.is-active {
    background: rgba(135, 116, 225, 0.18);
}

.xam-chat-peek-btn.is-active .xam-chat-peek-btn-icon {
    background: rgba(135, 116, 225, 0.28);
    color: #e8e0ff;
}

.xam-chat-peek-btn--danger .xam-chat-peek-btn-icon {
    color: #ff9b9b;
}

.xam-chat-peek-btn--danger.is-active {
    background: rgba(220, 80, 80, 0.16);
}

.xam-chat-peek-btn--danger.is-active .xam-chat-peek-btn-icon {
    background: rgba(220, 80, 80, 0.22);
    color: #ffb4b4;
}

.xam-chat-peek-btn:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
}

.xam-chat-peek-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    flex-shrink: 0;
    border: none;
    border-radius: 20px;
    padding: 14px 16px;
    background: #8774E1;
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.xam-chat-peek-open-btn:active {
    transform: scale(0.985);
    filter: brightness(1.05);
}

body.xam-chat-peek-open {
    overflow: hidden;
}

/* Короткие экраны: компактнее шапка и кнопки, больше места ленте */
@media (max-height: 720px) {
    .xam-chat-peek-panel {
        gap: 10px;
        padding: 14px 14px calc(12px + env(safe-area-inset-bottom, 0px));
        height: min(90dvh, 760px);
        max-height: min(94dvh, 820px);
    }

    .xam-chat-peek-avatar {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .xam-chat-peek-name {
        font-size: 18px;
    }

    .xam-chat-peek-username {
        font-size: 13px;
    }

    .xam-chat-peek-btn {
        padding: 11px 18px;
        font-size: 14px;
        gap: 9px;
    }

    .xam-chat-peek-actions {
        gap: 6px;
    }
}

@media (max-height: 600px) {
    .xam-chat-peek-panel {
        gap: 8px;
        height: min(96dvh, 760px);
        max-height: 98dvh;
    }

    .xam-chat-peek-close {
        padding: 6px 12px;
        font-size: 13px;
    }

    .xam-chat-peek-avatar {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .xam-chat-peek-btn {
        padding: 10px 16px;
        font-size: 14px;
        gap: 8px;
    }

    .xam-chat-peek-messages-wrap::before,
    .xam-chat-peek-messages-wrap::after {
        height: 28px;
    }
}

@media (min-width: 769px) {
    .xam-chat-peek {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 28px;
        box-sizing: border-box;
    }

    .xam-chat-peek.hidden {
        display: flex !important;
        pointer-events: none;
    }

    .xam-chat-peek-backdrop {
        background: rgba(0, 0, 0, 0.62);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: opacity 0.3s ease;
    }

    .xam-chat-peek-panel {
        --peek-bg: #0c0c0e;
        --peek-btn: #161618;
        --peek-btn-hover: #1e1e22;
        --peek-accent: #8774E1;
        width: min(820px, calc(100vw - 48px));
        height: min(500px, calc(100dvh - 64px));
        max-height: min(560px, calc(100dvh - 48px));
        border-radius: 36px;
        padding: 16px;
        background: var(--peek-bg);
        border: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(200px, 220px);
        grid-template-rows: auto auto minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 10px;
        transform: translate3d(0, 14px, 0) scale(0.97);
        opacity: 0;
        transition:
            transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.28s ease;
        will-change: transform, opacity;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
        font-family: 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    }

    .xam-chat-peek--open .xam-chat-peek-panel {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }

    .xam-chat-peek-handle {
        display: none;
    }

    .xam-chat-peek-topbar {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        min-height: 32px;
    }

    .xam-chat-peek-hint {
        background: transparent;
        padding: 0;
        color: rgba(255, 255, 255, 0.38);
        font-size: 12px;
    }

    .xam-chat-peek-icon-btn {
        width: 32px;
        height: 32px;
        background: transparent;
        color: rgba(255, 255, 255, 0.55);
    }

    .xam-chat-peek-icon-btn:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.06);
    }

    .xam-chat-peek-header {
        grid-column: 1;
        grid-row: 2;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 0 2px;
        background: transparent;
        border: none;
        min-width: 0;
    }

    .xam-chat-peek-avatar {
        width: 48px;
        height: 48px;
        font-size: 18px;
        font-weight: 700;
        background: #2a2a2e;
        color: rgba(255, 255, 255, 0.85);
        box-shadow: none;
        margin: 0;
        flex-shrink: 0;
    }

    .xam-chat-peek-identity {
        text-align: left;
        padding: 0;
        margin: 0;
        min-width: 0;
        flex: 1 1 auto;
        width: auto;
    }

    .xam-chat-peek-name {
        font-size: 17px;
        font-weight: 650;
        letter-spacing: -0.02em;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.94);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .xam-chat-peek-status {
        font-size: 12.5px;
        color: rgba(255, 255, 255, 0.4);
    }

    .xam-chat-peek-username {
        margin-top: 2px;
        font-size: 13px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.38);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .xam-chat-peek-messages-wrap {
        grid-column: 1;
        grid-row: 3;
        min-height: 0;
        border-radius: 22px;
        background: #080809;
        border: none;
        overflow: hidden;
        box-shadow: none;
    }

    .xam-chat-peek-messages-wrap::before,
    .xam-chat-peek-messages-wrap::after {
        height: 24px;
        background: linear-gradient(
            to bottom,
            rgba(8, 8, 9, 0.95) 0%,
            rgba(8, 8, 9, 0) 100%
        );
    }

    .xam-chat-peek-messages-wrap::after {
        background: linear-gradient(
            to top,
            rgba(8, 8, 9, 0.95) 0%,
            rgba(8, 8, 9, 0) 100%
        );
    }

    .xam-chat-peek-messages {
        padding: 14px 12px;
        gap: 8px;
    }

    .xam-chat-peek-bubble {
        max-width: min(82%, 280px);
        border-radius: 16px;
        padding: 8px 11px;
        font-size: 14px;
        line-height: 1.35;
        box-shadow: none;
    }

    .xam-chat-peek-msg--own .xam-chat-peek-bubble {
        background: var(--peek-accent);
        border-bottom-right-radius: 9px;
    }

    .xam-chat-peek-msg--peer .xam-chat-peek-bubble {
        background: #1a1a1c;
        border-bottom-left-radius: 9px;
    }

    .xam-chat-peek-empty,
    .xam-chat-peek-loading {
        color: rgba(255, 255, 255, 0.32);
    }

    .xam-chat-peek-actions {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        min-height: 0;
        align-self: start;
    }

    .xam-chat-peek-btn {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;
        background: var(--peek-btn);
        border: none;
        border-radius: 999px;
        font-size: 13.5px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: rgba(255, 255, 255, 0.82);
        text-align: left;
        box-shadow: none;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .xam-chat-peek-btn-icon {
        width: 18px;
        height: 18px;
        border-radius: 0;
        background: transparent;
    }

    .xam-chat-peek-btn-label {
        text-align: left;
    }

    .xam-chat-peek-open-btn {
        grid-column: 2;
        grid-row: 3;
        align-self: end;
        border-radius: 999px;
        min-height: 44px;
        box-shadow: none;
    }

    .xam-chat-peek-btn-label {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .xam-chat-peek-btn:hover:not(:disabled) {
        background: var(--peek-btn-hover);
        color: #fff;
        transform: none;
        box-shadow: none;
        border-color: transparent;
    }

    .xam-chat-peek-btn:active:not(:disabled) {
        background: #222226;
        transform: none;
    }

    #xam-chat-peek-read-all,
    #xam-chat-peek-read-all:hover:not(:disabled),
    #xam-chat-peek-block:hover:not(:disabled) {
        background: var(--peek-btn);
        border-color: transparent;
        color: rgba(255, 255, 255, 0.82);
    }

    #xam-chat-peek-read-all:hover:not(:disabled),
    #xam-chat-peek-block:hover:not(:disabled) {
        background: var(--peek-btn-hover);
        color: #fff;
    }

    .xam-chat-peek--open .xam-chat-peek-btn {
        animation: none;
    }

    body.theme-light .xam-chat-peek-panel {
        --peek-bg: #f2f2f4;
        --peek-btn: #ffffff;
        --peek-btn-hover: #e8e8ec;
        border: none;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
    }

    body.theme-light .xam-chat-peek-close {
        color: rgba(0, 0, 0, 0.45);
    }

    body.theme-light .xam-chat-peek-close:hover {
        color: #111;
        background: rgba(0, 0, 0, 0.05);
    }

    body.theme-light .xam-chat-peek-name {
        color: #111;
    }

    body.theme-light .xam-chat-peek-username {
        color: rgba(0, 0, 0, 0.4);
    }

    body.theme-light .xam-chat-peek-avatar {
        background: #dddde2;
        color: #333;
    }

    body.theme-light .xam-chat-peek-messages-wrap {
        background: #ffffff;
    }

    body.theme-light .xam-chat-peek-messages-wrap::before,
    body.theme-light .xam-chat-peek-messages-wrap::after {
        background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0));
    }

    body.theme-light .xam-chat-peek-messages-wrap::after {
        background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0));
    }

    body.theme-light .xam-chat-peek-msg--peer .xam-chat-peek-bubble {
        background: #ececf0;
        color: #111;
    }

    body.theme-light .xam-chat-peek-btn {
        color: #222;
    }

    body.theme-light .xam-chat-peek-btn:hover:not(:disabled) {
        color: #000;
    }

    body.theme-light .xam-chat-peek-backdrop {
        background: rgba(0, 0, 0, 0.35);
    }

    body.theme-light #xam-chat-peek-read-all,
    body.theme-light #xam-chat-peek-read-all:hover:not(:disabled),
    body.theme-light #xam-chat-peek-block:hover:not(:disabled) {
        background: var(--peek-btn);
        color: #222;
    }

    body.theme-light #xam-chat-peek-read-all:hover:not(:disabled),
    body.theme-light #xam-chat-peek-block:hover:not(:disabled) {
        background: var(--peek-btn-hover);
        color: #000;
    }
}

/* ===== In-chat message search (hold on name) ===== */
#chat-back-btn-mobile,
#chat-back-btn,
#chat-top-avatar-btn {
    position: relative;
}

.chat-top-back-icon,
.chat-top-search-close-icon {
    display: block;
    transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
}

.chat-top-search-close-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0;
    transform: scale(0.55) rotate(-55deg);
    pointer-events: none;
}

.chat-top-overlay-avatar,
.chat-top-overlay-search-icon,
.chat-header-search-icon,
#chat-user-avatar {
    transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-top-overlay-search-icon,
.chat-header-search-icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.55) rotate(-40deg);
    pointer-events: none;
    color: inherit;
}

.chat-header-search-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}

#chat-top-overlay-nick-stack,
#chat-header-title-block {
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-inchat-search-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    padding: 0 4px;
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-inchat-search-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.chat-inchat-search-input::-webkit-search-decoration,
.chat-inchat-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.chat-inchat-search-input--desktop {
    text-align: left;
    font-size: 16px;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: scale(0.96);
    flex: 1 1 auto;
    min-width: 0;
    display: none;
}

body.theme-light .chat-inchat-search-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

#chat-top-overlay-info-pill {
    position: relative;
}

/* Active: icons / nick / input crossfade */
body.xam-chat-inchat-search-active .chat-top-back-icon {
    opacity: 0;
    transform: scale(0.55) rotate(45deg);
}

body.xam-chat-inchat-search-active .chat-top-search-close-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    pointer-events: auto;
}

body.xam-chat-inchat-search-active #chat-top-overlay-nick-stack {
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
}

body.xam-chat-inchat-search-active #chat-inchat-search-input {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

body.xam-chat-inchat-search-active #chat-user-avatar-mobile,
body.xam-chat-inchat-search-active #chat-top-ultra-badge-mobile {
    opacity: 0 !important;
    transform: scale(0.55);
    pointer-events: none !important;
}

body.xam-chat-inchat-search-active .chat-top-overlay-search-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    pointer-events: auto;
}

body.xam-chat-inchat-search-active #chat-top-overlay-info-pill {
    cursor: text;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body.xam-chat-inchat-search-active #chat-top-avatar-btn {
    cursor: default;
}

body.xam-chat-inchat-search-active #chat-header-title-block {
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

body.xam-chat-inchat-search-active #chat-user-avatar {
    opacity: 0;
    transform: scale(0.55);
    pointer-events: none;
}

body.xam-chat-inchat-search-active .chat-header-search-icon {
    position: relative;
    opacity: 1;
    transform: scale(1) rotate(0deg);
    pointer-events: auto;
    color: var(--text-primary, #fff);
}

body.xam-chat-inchat-search-active #chat-inchat-search-input-desktop {
    display: block;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

body.xam-chat-inchat-search-active .chat-header .btn-back {
    display: inline-flex !important;
}

body.xam-chat-inchat-search-active .chat-header #call-user-btn,
body.xam-chat-inchat-search-active .chat-header #admin-panel-btn,
body.xam-chat-inchat-search-active .chat-header #pinned-messages-btn,
body.xam-chat-inchat-search-active .chat-header #pc-call-minimized-bar,
body.xam-chat-inchat-search-active .chat-header #group-call-header-pills,
body.xam-chat-inchat-search-active .chat-header .chat-header-actions,
body.xam-chat-inchat-search-active .chat-header .chat-header-actions-pill {
    display: none !important;
}

body.xam-chat-inchat-search-active .chat-header .chat-header-pc-chrome {
    flex: 1 1 auto;
    min-width: 0;
}

body.xam-chat-inchat-search-active .chat-header .chat-header-info-pill {
    flex: 1 1 auto;
    min-width: 0;
}

.chat-inchat-search-panel {
    position: fixed;
    left: 14px;
    right: 14px;
    top: 0;
    z-index: 12040;
    height: auto;
    max-height: none;
    pointer-events: none;
    margin: 0;
    transform: none;
    box-sizing: border-box;
    transition: none !important;
    will-change: top, left, width, height, border-radius;
}

.chat-inchat-search-panel:not(.hidden) {
    pointer-events: auto;
}

.chat-inchat-search-panel.hidden {
    display: none !important;
}

.chat-inchat-search-panel.is-from-pill .chat-inchat-search-results {
    opacity: 0;
}

.chat-inchat-search-panel-inner {
    position: relative;
    height: 100%;
    border-radius: 28px;
    background: #212121;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.chat-inchat-search-panel-inner::before {
    display: none;
}

body.theme-light .chat-inchat-search-panel-inner {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Liquid glass — тот же рецепт, что у шапки/composer */
body.xam-liquid-glass-enabled .chat-inchat-search-panel-inner {
    background: rgba(18, 18, 22, 0.82) !important;
    border: none !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
    -webkit-backdrop-filter: url(#xamLiquidGlassDisplacement) blur(0px) saturate(150%) !important;
}

body.theme-light.xam-liquid-glass-enabled .chat-inchat-search-panel-inner {
    background: rgba(40, 40, 46, 0.58) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28) !important;
}

/* Пока поиск открыт — composer недоступен (панель его перекрывает) */
body.xam-chat-inchat-search-active #message-input-container {
    pointer-events: none !important;
}

body.xam-chat-inchat-search-active #message-input-container .message-input,
body.xam-chat-inchat-search-active #message-input-container button,
body.xam-chat-inchat-search-active #message-input-container textarea {
    pointer-events: none !important;
}

.chat-inchat-search-results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    max-height: none;
    padding: 10px 8px;
    background: #212121;
    display: flex;
    flex-direction: column;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.chat-inchat-search-empty {
    padding: 28px 18px;
    text-align: center;
    color: rgba(255, 255, 255, 0.48);
    font-size: 15px;
    line-height: 1.4;
    margin: auto;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    pointer-events: none;
}

body.theme-light .chat-inchat-search-empty {
    color: rgba(0, 0, 0, 0.42);
}

.chat-inchat-search-row {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 12px 14px;
    border-radius: 16px;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.chat-inchat-search-row:hover,
.chat-inchat-search-row:active {
    background: rgba(255, 255, 255, 0.08);
}

.chat-inchat-search-panel,
.chat-inchat-search-panel-inner,
.chat-inchat-search-results,
.chat-inchat-search-input,
.chat-top-back-icon,
.chat-top-search-close-icon,
.chat-header-search-icon,
.chat-top-overlay-search-icon,
#chat-top-overlay-nick-stack,
#chat-header-title-block,
#chat-user-avatar,
#chat-inchat-search-input-desktop {
    transition: none !important;
}

body.theme-light .chat-inchat-search-row:hover,
body.theme-light .chat-inchat-search-row:active {
    background: rgba(0, 0, 0, 0.05);
}

.chat-inchat-search-row-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.chat-inchat-search-sender {
    font-size: 13px;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.92);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.theme-light .chat-inchat-search-sender {
    color: rgba(0, 0, 0, 0.88);
}

.chat-inchat-search-time {
    flex: 0 0 auto;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.42);
}

body.theme-light .chat-inchat-search-time {
    color: rgba(0, 0, 0, 0.4);
}

.chat-inchat-search-snippet {
    font-size: 13.5px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.68);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

body.theme-light .chat-inchat-search-snippet {
    color: rgba(0, 0, 0, 0.62);
}

.chat-inchat-search-snippet mark {
    background: rgba(88, 166, 255, 0.35);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

@media (max-width: 768px) {
    body.xam-chat-inchat-search-active #chat-top-overlay .chat-top-overlay-nick-pill {
        justify-content: stretch;
        align-items: center;
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* В активном поиске: делаем верхнюю панель поиска сплошной и аккуратной */
body.xam-chat-inchat-search-active #chat-top-overlay .chat-top-overlay-nick-pill,
body.xam-chat-inchat-search-active #chat-top-overlay-info-pill {
    background: #212121 !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.xam-chat-inchat-search-active #chat-inchat-search-input,
body.xam-chat-inchat-search-active #chat-inchat-search-input-desktop {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600 !important;
}

@media (min-width: 769px) {
    .chat-inchat-search-panel {
        left: 50%;
        right: auto;
        width: min(680px, calc(100% - 40px));
        transform: translateX(-50%);
    }

    body.xam-chat-inchat-search-active .chat-inchat-search-panel.is-anchored {
        left: 20px !important;
        right: 20px !important;
        width: auto !important;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-top-back-icon,
    .chat-top-search-close-icon,
    .chat-top-overlay-avatar,
    .chat-top-overlay-search-icon,
    .chat-header-search-icon,
    #chat-user-avatar,
    #chat-top-overlay-nick-stack,
    #chat-header-title-block,
    .chat-inchat-search-input,
    #chat-top-overlay-info-pill,
    .chat-inchat-search-panel,
    .chat-inchat-search-panel-inner,
    .chat-inchat-search-results {
        transition: none !important;
    }
}

/* ===== PC register bridge (QR → email confirm) ===== */
.pc-register-bridge {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: #0c0c0e;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-register-bridge:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}
.pc-register-bridge.hidden {
    display: flex !important;
    visibility: hidden;
}
.pc-register-bridge.is-open {
    visibility: visible;
}

.pc-register-bridge-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.pc-register-bridge-glow {
    position: absolute;
    left: max(-18%, -120px);
    top: 42%;
    width: min(92vw, 1100px);
    height: min(92vw, 1100px);
    transform: translateY(-50%);
    background:
        radial-gradient(ellipse 58% 52% at 42% 48%, rgba(130, 78, 255, 0.72) 0%, rgba(110, 65, 226, 0.38) 38%, rgba(88, 40, 200, 0.12) 62%, transparent 76%);
    filter: blur(70px);
    border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
    animation: pcRegBridgeGlowLive 11s ease-in-out infinite;
    will-change: transform, border-radius, opacity, filter;
}
.pc-register-bridge-bg::before,
.pc-register-bridge-bg::after {
    content: '';
    position: absolute;
    pointer-events: none;
    filter: blur(64px);
    will-change: transform, border-radius, opacity;
}
.pc-register-bridge-bg::before {
    left: 4%;
    top: 28%;
    width: min(48vw, 560px);
    height: min(48vw, 560px);
    background: radial-gradient(circle, rgba(160, 110, 255, 0.45) 0%, rgba(110, 65, 226, 0.12) 55%, transparent 72%);
    border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
    animation: pcRegBridgeGlowOrbA 8.5s ease-in-out infinite;
}
.pc-register-bridge-bg::after {
    left: 18%;
    top: 52%;
    width: min(40vw, 460px);
    height: min(40vw, 460px);
    background: radial-gradient(circle, rgba(90, 40, 220, 0.4) 0%, rgba(70, 30, 180, 0.1) 55%, transparent 74%);
    border-radius: 40% 60% 48% 52% / 58% 42% 58% 42%;
    animation: pcRegBridgeGlowOrbB 9.8s ease-in-out infinite reverse;
}
@keyframes pcRegBridgeGlowLive {
    0% {
        opacity: 0.88;
        transform: translateY(-50%) translateX(0) scale(1) rotate(0deg);
        border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
        filter: blur(70px);
    }
    25% {
        opacity: 1;
        transform: translateY(-48%) translateX(3%) scale(1.08) rotate(4deg);
        border-radius: 58% 42% 60% 40% / 42% 58% 42% 58%;
        filter: blur(76px);
    }
    50% {
        opacity: 0.92;
        transform: translateY(-52%) translateX(-2%) scale(1.12) rotate(-3deg);
        border-radius: 40% 60% 42% 58% / 58% 40% 60% 42%;
        filter: blur(82px);
    }
    75% {
        opacity: 1;
        transform: translateY(-47%) translateX(4%) scale(1.05) rotate(2deg);
        border-radius: 55% 45% 52% 48% / 48% 52% 45% 55%;
        filter: blur(72px);
    }
    100% {
        opacity: 0.88;
        transform: translateY(-50%) translateX(0) scale(1) rotate(0deg);
        border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
        filter: blur(70px);
    }
}
@keyframes pcRegBridgeGlowOrbA {
    0%, 100% { transform: translate(0, 0) scale(1); border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%; opacity: 0.75; }
    33% { transform: translate(8%, 6%) scale(1.15); border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; opacity: 1; }
    66% { transform: translate(-6%, 10%) scale(0.92); border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%; opacity: 0.85; }
}
@keyframes pcRegBridgeGlowOrbB {
    0%, 100% { transform: translate(0, 0) scale(1); border-radius: 40% 60% 48% 52% / 58% 42% 58% 42%; opacity: 0.7; }
    40% { transform: translate(-10%, -8%) scale(1.2); border-radius: 55% 45% 40% 60% / 42% 58% 45% 55%; opacity: 1; }
    70% { transform: translate(7%, 5%) scale(0.9); border-radius: 48% 52% 58% 42% / 52% 48% 40% 60%; opacity: 0.8; }
}

.pc-register-bridge-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100%;
    align-items: center;
    padding: clamp(24px, 4vw, 64px) clamp(28px, 5vw, 80px);
    box-sizing: border-box;
    gap: clamp(20px, 4vw, 48px);
}

.pc-register-bridge-left {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    position: relative;
}
.pc-register-bridge-hint {
    margin: 0;
    max-width: 420px;
    text-align: center;
    font-family: 'TikTok Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #fff;
    position: relative;
    z-index: 1;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.55s ease;
}
.pc-register-bridge-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.86) translateY(12px);
    pointer-events: none;
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.pc-register-bridge-mail-field {
    position: absolute;
    inset: -20%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}
.pc-register-bridge-mail-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    color: rgba(255, 255, 255, 0.92);
    opacity: 0;
    will-change: transform, opacity, filter;
    filter: drop-shadow(0 0 10px rgba(180, 140, 255, 0.35));
}
.pc-register-bridge-mail-particle svg {
    width: 100%;
    height: 100%;
    display: block;
}
.pc-register-bridge-logo-mark {
    position: relative;
    z-index: 1;
    width: min(42vw, 280px);
    height: auto;
    filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.18));
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-register-bridge.is-confirm .pc-register-bridge-logo-mark {
    width: min(22vw, 140px);
}
.pc-register-bridge-mail-particle svg {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    filter: none !important;
}

.pc-register-bridge-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.pc-register-bridge-card {
    width: min(100%, 360px);
    background: #1a1a1e;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    position: relative;
    transition:
        width 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        min-height 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.45s ease,
        box-shadow 0.45s ease;
    min-height: 360px;
}

.pc-register-bridge-panel {
    width: 100%;
    box-sizing: border-box;
}
.pc-register-bridge-panel--qr {
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    opacity: 1;
    transform: scale(1);
    transition:
        opacity 0.45s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-register-bridge-panel--confirm {
    padding: 36px 28px 28px;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    pointer-events: none;
    position: absolute;
    inset: 0;
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.pc-register-bridge-panel--confirm[hidden] {
    display: flex !important;
    visibility: hidden;
}

.pc-register-bridge-qr-frame {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 18px;
    background: #1a1a1e;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
    box-sizing: border-box;
}
.pc-register-bridge-qr {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pc-register-bridge-qr canvas,
.pc-register-bridge-qr img,
.pc-register-bridge-qr svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: transparent !important;
}

.pc-register-bridge-confirm-title {
    margin: 8px 0 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.pc-register-bridge-confirm-text {
    margin: auto 0;
    font-size: 16px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
}
.pc-register-bridge-confirm-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

.pc-register-bridge-btn {
    appearance: none;
    border: none;
    cursor: pointer;
    width: min(100%, 360px);
    height: 52px;
    border-radius: 999px;
    background: #2a2a30;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition:
        background 0.25s ease,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
}
.pc-register-bridge-btn:hover {
    background: #34343c;
    transform: translateY(-1px);
}
.pc-register-bridge-btn:active {
    transform: translateY(0) scale(0.98);
}
.pc-register-bridge-btn:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
}
.pc-register-bridge-cancel {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.4s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.25s ease;
}

/* State: email confirm */
.pc-register-bridge.is-confirm .pc-register-bridge-hint {
    opacity: 0;
    transform: translateY(-14px);
    filter: blur(4px);
    pointer-events: none;
}
.pc-register-bridge.is-confirm .pc-register-bridge-logo {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.pc-register-bridge.is-confirm .pc-register-bridge-card {
    width: min(100%, 380px);
    min-height: 460px;
}
.pc-register-bridge.is-confirm .pc-register-bridge-panel--qr {
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
}
.pc-register-bridge.is-confirm .pc-register-bridge-panel--confirm {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
}
.pc-register-bridge.is-confirm .pc-register-bridge-cancel {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Enter animation */
.pc-register-bridge.is-open:not(.is-confirm) .pc-register-bridge-hint {
    animation: pcRegBridgeHintIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pc-register-bridge.is-open:not(.is-confirm) .pc-register-bridge-card,
.pc-register-bridge.is-open:not(.is-confirm) .pc-register-bridge-cancel {
    animation: pcRegBridgeCardIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}
@keyframes pcRegBridgeHintIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pcRegBridgeCardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
    .pc-register-bridge-layout {
        grid-template-columns: 1fr;
        justify-items: center;
        padding-top: 48px;
        padding-bottom: 40px;
        overflow: auto;
    }
    .pc-register-bridge-left {
        min-height: auto;
        width: 100%;
    }
    .pc-register-bridge-hint {
        font-size: 22px;
    }
    .pc-register-bridge-logo-mark {
        width: min(56vw, 200px);
    }
    .pc-register-bridge.is-confirm .pc-register-bridge-logo-mark {
        width: min(28vw, 110px);
    }
    .pc-register-bridge.is-confirm .pc-register-bridge-left {
        min-height: 120px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-register-bridge,
    .pc-register-bridge-hint,
    .pc-register-bridge-logo,
    .pc-register-bridge-card,
    .pc-register-bridge-panel,
    .pc-register-bridge-btn,
    .pc-register-bridge-cancel,
    .pc-register-bridge-glow,
    .pc-register-bridge-bg::before,
    .pc-register-bridge-bg::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ===== Отложенные сообщения: панель выбора и список ===== */
.btn-scheduled {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}
.btn-scheduled:not(.hidden) {
    display: inline-flex;
}
.message-input-container .input-attach-buttons .btn-scheduled {
    color: #ffffff !important;
}
.message-input-container .input-attach-buttons .btn-scheduled svg {
    color: #ffffff !important;
    stroke: currentColor;
    fill: none;
}

.xam-schedule-sheet {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
}
.xam-schedule-sheet.hidden {
    display: flex !important;
    visibility: hidden;
}
.xam-schedule-sheet.xam-schedule-sheet--open {
    pointer-events: auto;
    visibility: visible;
}
.xam-schedule-sheet-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.32s ease;
}
.xam-schedule-sheet--open .xam-schedule-sheet-backdrop {
    opacity: 1;
}
.xam-schedule-sheet-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 20px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: #1c1c1e;
    border-radius: 32px 32px 0 0;
    transform: translate3d(0, 100%, 0);
    opacity: 1;
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.xam-schedule-sheet--open .xam-schedule-sheet-panel {
    transform: translate3d(0, 0, 0);
}
.xam-schedule-close-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    margin: 0 0 16px;
    border: none;
    border-radius: 999px;
    background: #0a0a0c;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.xam-schedule-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
}
.xam-schedule-card-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 18px;
}
.xam-schedule-fields {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.xam-schedule-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 10px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    text-align: left;
}
.xam-schedule-field.is-active {
    background: rgba(255, 255, 255, 0.06);
}
.xam-schedule-field-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}
.xam-schedule-field-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
}
.xam-schedule-wheels {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.1fr;
    gap: 8px;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    opacity: 0;
    pointer-events: none;
    transition:
        height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        margin 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease;
}
.xam-schedule-wheels.hidden {
    /* оставляем в потоке для анимации; скрытие через height/opacity */
    display: grid !important;
}
.xam-schedule-wheels.is-open {
    height: 148px;
    margin: 0 0 14px;
    opacity: 1;
    pointer-events: auto;
}
.xam-schedule-wheel-col {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 0;
}
.xam-schedule-wheel-list {
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 56px 0;
    scrollbar-width: none;
}
.xam-schedule-wheel-list::-webkit-scrollbar {
    display: none;
}
.xam-schedule-wheel-item {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    user-select: none;
    width: 100%;
    border: none;
    background: transparent;
}
.xam-schedule-wheel-item.is-selected {
    color: #fff;
    font-size: 20px;
}
.xam-schedule-wheel-center {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 36px;
    margin-top: -18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}
.xam-schedule-wheel-fade {
    position: absolute;
    left: 0;
    right: 0;
    height: 48px;
    pointer-events: none;
    z-index: 1;
}
.xam-schedule-wheel-fade--top {
    top: 0;
    background: linear-gradient(to bottom, #1c1c1e 10%, transparent);
}
.xam-schedule-wheel-fade--bottom {
    bottom: 0;
    background: linear-gradient(to top, #1c1c1e 10%, transparent);
}
.xam-schedule-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.xam-schedule-reset-btn {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: #0a0a0c;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.xam-schedule-send-btn {
    flex: 1;
    height: 52px;
    border: none;
    border-radius: 999px;
    background: #8b5cf6;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}
.xam-schedule-send-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.xam-schedule-send-btn:active:not(:disabled),
.xam-schedule-reset-btn:active {
    transform: scale(0.98);
}

.xam-scheduled-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(52vh, 360px);
    overflow-y: auto;
    margin-top: 4px;
}
.xam-scheduled-list-empty {
    padding: 18px 8px 8px;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
}
.xam-scheduled-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}
.xam-scheduled-item-body {
    flex: 1;
    min-width: 0;
}
.xam-scheduled-item-when {
    font-size: 12px;
    color: rgba(150, 97, 241, 0.95);
    font-weight: 600;
    margin-bottom: 4px;
}
.xam-scheduled-item-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.35;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xam-scheduled-item-delete {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (min-width: 769px) {
    .xam-schedule-sheet-panel {
        max-width: min(440px, calc(100% - 24px));
        margin: 0 auto;
        border-radius: 28px 28px 0 0;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
    .xam-schedule-sheet-panel--list {
        max-width: min(440px, calc(100% - 24px));
    }
}

body.theme-light .xam-schedule-sheet-panel {
    background: #f4f4f7;
}
body.theme-light .xam-schedule-close-pill {
    background: #fff;
    color: #111;
    border-color: rgba(0, 0, 0, 0.08);
}
body.theme-light .xam-schedule-card {
    background: transparent;
}
body.theme-light .xam-schedule-card-title,
body.theme-light .xam-schedule-field-value,
body.theme-light .xam-scheduled-item-text {
    color: #111;
}
body.theme-light .xam-schedule-field-label {
    color: rgba(0, 0, 0, 0.45);
}
body.theme-light .xam-schedule-reset-btn {
    background: #fff;
    color: #111;
    border-color: rgba(0, 0, 0, 0.08);
}
body.theme-light .xam-schedule-wheels {
    background: rgba(0, 0, 0, 0.04);
}
body.theme-light .xam-schedule-wheel-item {
    color: rgba(0, 0, 0, 0.35);
}
body.theme-light .xam-schedule-wheel-item.is-selected {
    color: #111;
}
body.theme-light .xam-schedule-wheel-fade--top {
    background: linear-gradient(to bottom, #f4f4f7 10%, transparent);
}
body.theme-light .xam-schedule-wheel-fade--bottom {
    background: linear-gradient(to top, #f4f4f7 10%, transparent);
}
body.theme-light .xam-scheduled-item {
    background: rgba(0, 0, 0, 0.04);
}


/* ===== Персонализация: переключатель темы (телефоны) ===== */
.personalization-theme-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
}
.personalization-theme-option {
    border: none;
    border-radius: 11px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    transition: background 0.18s ease, color 0.18s ease;
}
.personalization-theme-option.is-active {
    background: rgba(150, 97, 241, 0.95);
    color: #fff;
}

/* ===== Светлая тема на телефонах: legacy — финальные цвета в /light-theme.css ===== */
@media (min-width: 99999px) {
    body.theme-light {
        --bg-black: #1F6B45;
        --bg-dark: #FFFFFF;
        --bg-darker: #F5F5F5;
        --bg-gray-1: #FFFFFF;
        --bg-gray-2: #F0F0F0;
        --bg-gray-3: #E8E8E8;
        --white-border: rgba(28, 27, 34, 0.10);
        --gray-text: #6B6578;
        --gray-border: rgba(28, 27, 34, 0.10);
        --text-white: #1C1B22;
        --text-light: #1C1B22;
        --msg-own-bg: #8774E1;
        --msg-peer-bg: #FFFFFF;
        --xam-accent: #AE22FF;
        --composer-chip-bg: rgba(255, 255, 255, 0.92);
        --composer-chip-border: rgba(28, 27, 34, 0.08);
        --composer-chip-shadow: 0 8px 24px rgba(28, 27, 34, 0.10);
        background: #1F6B45 !important;
        color: #1C1B22;
    }

    body.theme-light .messenger-container {
        background: #1F6B45 !important;
    }

    body.theme-light .sidebar,
    body.theme-light .sidebar::before,
    body.theme-light .chats-section,
    body.theme-light .sidebar-tabs,
    body.theme-light .sidebar-tab,
    body.theme-light .chats-list,
    body.theme-light #calls-screen,
    body.theme-light #search-screen-tab {
        background: #FFFFFF !important;
    }

    body.theme-light .chat-item:active,
    body.theme-light .chat-item.active {
        background: #E8E4F0 !important;
    }
    body.theme-light .chat-name,
    body.theme-light .mobile-top-nick-text,
    body.theme-light .chat-top-overlay-name,
    body.theme-light .settings-title,
    body.theme-light .personalization-title,
    body.theme-light .sidebar-menu-mobile-title {
        color: #1C1B22 !important;
    }
    body.theme-light .chat-last-message,
    body.theme-light .chat-time,
    body.theme-light .chat-top-overlay-status,
    body.theme-light .personalization-setting-hint,
    body.theme-light .gray-text {
        color: #6B6578 !important;
    }

    body.theme-light .mobile-top-pill-btn,
    body.theme-light .mobile-top-nick-pill,
    body.theme-light .chat-top-overlay .mobile-top-pill-btn,
    body.theme-light .chat-top-overlay-nick-pill,
    body.theme-light #chat-top-overlay #chat-back-btn-mobile,
    body.theme-light #chat-top-overlay #chat-top-avatar-btn,
    body.theme-light #mobile-top-nick-pill-wrap .mobile-top-pill-btn,
    body.theme-light #mobile-top-nick-pill-wrap #mobile-top-nick-pill {
        background: rgba(255, 255, 255, 0.88) !important;
        color: #1C1B22 !important;
        box-shadow: 0 8px 22px rgba(28, 27, 34, 0.10) !important;
        border: 1px solid rgba(28, 27, 34, 0.06) !important;
        backdrop-filter: blur(14px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    }
    body.theme-light .mobile-top-pill-btn svg,
    body.theme-light .chat-top-overlay .mobile-top-pill-btn svg,
    body.theme-light #chat-top-overlay #chat-back-btn-mobile svg,
    body.theme-light #mobile-top-nick-pill-wrap .mobile-top-pill-btn svg {
        color: #1C1B22 !important;
        stroke: currentColor !important;
    }
    body.theme-light .mobile-top-nick-pill-text,
    body.theme-light .chat-top-overlay .mobile-top-nick-pill-text {
        color: #1C1B22 !important;
    }

    body.theme-light .chats-bottom-pill,
    body.theme-light #chats-bottom-pill {
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: 0 12px 28px rgba(28, 27, 34, 0.12) !important;
        border: 1px solid rgba(28, 27, 34, 0.06) !important;
        backdrop-filter: blur(14px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    }
    body.theme-light .chats-bottom-pill-btn {
        color: #1C1B22 !important;
    }
    body.theme-light .chats-bottom-pill-btn svg {
        color: #1C1B22 !important;
        stroke: currentColor !important;
    }
    body.theme-light .chats-bottom-pill-btn.is-active {
        color: #AE22FF !important;
    }
    body.theme-light .chats-bottom-pill-btn.is-active svg {
        color: #AE22FF !important;
        stroke: currentColor !important;
    }

    /* Верх/низ чата: затухание через mask на ленте (см. .messages-container) */

    body.theme-light .chat-area {
        background: transparent !important;
    }
    body.theme-light .chat-area::before {
        background-color: #1F6B45 !important;
        background-image: var(--theme-bg-pattern-gradient), var(--theme-bg-image) !important;
        opacity: 0.55 !important;
    }
    body.theme-light .messages-container {
        background: transparent !important;
    }

    body.theme-light .messages-container .message .message-content {
        background: #FFFFFF !important;
        color: #1C1B22 !important;
        border: none !important;
        box-shadow: 0 1px 3px rgba(28, 27, 34, 0.08) !important;
        border-radius: var(--xam-message-radius, 14px) !important;
    }
    body.theme-light .messages-container .message.own .message-content {
        background: var(--msg-own-bg, #8774E1) !important;
        color: #FFFFFF !important;
        border: none !important;
        box-shadow: 0 1px 3px rgba(135, 116, 225, 0.28) !important;
    }
    body.theme-light .messages-container .message .message-text {
        color: #1C1B22 !important;
    }
    body.theme-light .messages-container .message.own .message-text {
        color: #FFFFFF !important;
    }
    body.theme-light .messages-container .message .message-time {
        color: rgba(28, 27, 34, 0.45) !important;
    }
    body.theme-light .messages-container .message.own .message-time {
        color: rgba(255, 255, 255, 0.78) !important;
    }
    body.theme-light .messages-container .message.call-message .call-message-card {
        background: #FFFFFF !important;
        color: #1C1B22 !important;
        border: none !important;
        box-shadow: 0 1px 3px rgba(28, 27, 34, 0.08) !important;
    }
    body.theme-light .messages-container .message.call-message.own .call-message-card {
        background: var(--msg-own-bg, #8774E1) !important;
        color: #FFFFFF !important;
    }

    body.theme-light .message-input-container .message-input-pill,
    body.theme-light .message-input-container .input-attach-buttons,
    body.theme-light .message-input-container .voice-send-slot .btn-voice,
    body.theme-light .message-input-container .voice-send-slot .btn-send,
    body.theme-light .btn-file,
    body.theme-light .btn-voice,
    body.theme-light .btn-send {
        background: rgba(255, 255, 255, 0.88) !important;
        color: #1C1B22 !important;
        box-shadow: 0 8px 22px rgba(28, 27, 34, 0.10) !important;
        border: 1px solid rgba(28, 27, 34, 0.06) !important;
        backdrop-filter: blur(14px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    }
    body.theme-light .message-input-pill,
    body.theme-light .message-input {
        color: #1C1B22 !important;
    }
    body.theme-light .message-input::placeholder {
        color: rgba(28, 27, 34, 0.42) !important;
    }
    body.theme-light .message-input-container .input-attach-buttons .btn-file,
    body.theme-light .message-input-container .input-attach-buttons .btn-emoji,
    body.theme-light .message-input-container .input-attach-buttons .btn-webapp,
    body.theme-light .message-input-container .input-attach-buttons .btn-scheduled,
    body.theme-light .message-input-container .voice-send-slot .btn-voice,
    body.theme-light .message-input-container .voice-send-slot .btn-send {
        color: #1C1B22 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    body.theme-light .message-input-container .voice-send-slot .btn-voice,
    body.theme-light .message-input-container .voice-send-slot .btn-send {
        background: rgba(255, 255, 255, 0.88) !important;
        border: 1px solid rgba(28, 27, 34, 0.06) !important;
        box-shadow: 0 8px 22px rgba(28, 27, 34, 0.10) !important;
    }
    body.theme-light .message-input-container .input-attach-buttons .btn-file svg,
    body.theme-light .message-input-container .input-attach-buttons .btn-emoji svg,
    body.theme-light .message-input-container .input-attach-buttons .btn-webapp svg,
    body.theme-light .message-input-container .input-attach-buttons .btn-scheduled svg,
    body.theme-light .message-input-container .voice-send-slot .btn-voice svg,
    body.theme-light .message-input-container .voice-send-slot .btn-send svg {
        color: #1C1B22 !important;
        stroke: currentColor !important;
    }
    body.theme-light .voice-send-slot.composer-has-text .btn-send {
        background: rgba(150, 97, 241, 0.92) !important;
        color: #fff !important;
        border-color: rgba(150, 97, 241, 0.35) !important;
    }
    body.theme-light .voice-send-slot.composer-has-text .btn-send svg {
        color: #fff !important;
        stroke: currentColor !important;
    }

    body.theme-light .chat-top-menu {
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(28, 27, 34, 0.08) !important;
        box-shadow: 0 12px 28px rgba(28, 27, 34, 0.12) !important;
        color: #1C1B22 !important;
    }
    body.theme-light .chat-top-menu-item {
        color: #1C1B22 !important;
    }

    body.theme-light .personalization-theme-switch {
        background: rgba(28, 27, 34, 0.06);
    }
    body.theme-light .personalization-theme-option {
        color: rgba(28, 27, 34, 0.45);
    }
    body.theme-light .personalization-theme-option.is-active {
        background: #AE22FF;
        color: #fff;
    }

    body.theme-light .personalization-screen,
    body.theme-light .settings-screen,
    body.theme-light .sidebar-menu-mobile,
    body.theme-light #settings-modal .settings-screen {
        background: #FFFFFF !important;
        color: #1C1B22 !important;
    }
    body.theme-light .personalization-setting-label,
    body.theme-light .settings-menu-item-text,
    body.theme-light .sidebar-menu-item {
        color: #1C1B22 !important;
    }
    body.theme-light .settings-menu-item,
    body.theme-light .sidebar-menu-item {
        background: #FFFFFF !important;
        border-color: rgba(28, 27, 34, 0.06) !important;
    }
    body.theme-light .personalization-preview {
        background: #1F6B45 !important;
        border-color: rgba(28, 27, 34, 0.08) !important;
    }
    body.theme-light .personalization-preview-incoming .message-content {
        background: #FFFFFF !important;
        color: #1C1B22 !important;
    }
    body.theme-light .personalization-preview-own .message-content {
        background: #8774E1 !important;
        color: #FFFFFF !important;
    }

    body.theme-light .xam-confirm-sheet-panel,
    body.theme-light .xam-schedule-sheet-panel {
        background: #F4F4F7 !important;
        color: #1C1B22 !important;
    }
    body.theme-light .xam-confirm-sheet-title,
    body.theme-light .xam-confirm-sheet-message,
    body.theme-light .xam-schedule-card-title,
    body.theme-light .xam-schedule-field-value {
        color: #1C1B22 !important;
    }
    body.theme-light .xam-confirm-sheet-btn--secondary,
    body.theme-light .xam-schedule-close-pill,
    body.theme-light .xam-schedule-reset-btn {
        background: #FFFFFF !important;
        color: #1C1B22 !important;
        border-color: rgba(28, 27, 34, 0.08) !important;
    }

    body.theme-light .system-message-text {
        color: rgba(28, 27, 34, 0.78) !important;
        background: rgba(255, 255, 255, 0.82) !important;
    }

    body.theme-light .pinned-messages-bar {
        background: rgba(255, 255, 255, 0.92) !important;
        color: #1C1B22 !important;
        border-color: rgba(28, 27, 34, 0.08) !important;
    }

    body.theme-light .scroll-to-bottom-btn {
        background: rgba(255, 255, 255, 0.92) !important;
        color: #1C1B22 !important;
        box-shadow: 0 8px 22px rgba(28, 27, 34, 0.12) !important;
    }
}

/* =========================================================================
   Голосовое в композере (инлайн-режим: запись и предпрослушивание).
   Вне media-запросов: классы навешиваются только на узких экранах из JS,
   поэтому на ПК эти правила ни на что не влияют.
   ========================================================================= */

.input-attach-buttons.is-voice-rec-timer {
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
}

.input-attach-buttons.is-voice-rec-timer > .voice-rec-slot-ghost {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.input-attach-buttons.is-voice-rec-timer > #emoji-hover-panel {
    display: none !important;
}

.voice-rec-timer--inline {
    position: absolute !important;
    inset: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.98) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
    line-height: 1 !important;
    user-select: none;
    z-index: 3 !important;
    pointer-events: none;
    overflow: visible !important;
    padding: 0 4px !important;
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.voice-rec-timer--inline .voice-rec-timer-text {
    display: inline-block !important;
    min-width: 2.7em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: inherit !important;
}

.voice-rec-timer--inline.voice-rec-timer--no-dot {
    gap: 0 !important;
}

.voice-rec-timer--inline.voice-rec-timer--no-dot .voice-rec-dot {
    display: none !important;
}

.voice-rec-timer--inline .voice-rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3b4a;
    animation: xam-voice-rec-dot 1.2s ease-out infinite;
    flex-shrink: 0;
}

.message-input-pill.is-voice-rec-eq,
.message-input-pill.is-voice-rec-actions {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.message-input-pill.is-voice-rec-eq > #message-input,
.message-input-pill.is-voice-rec-eq > .message-input,
.message-input-pill.is-voice-rec-eq > .message-input-ce,
.message-input-pill.is-voice-rec-actions > #message-input,
.message-input-pill.is-voice-rec-actions > .message-input,
.message-input-pill.is-voice-rec-actions > .message-input-ce {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.message-input-pill.is-voice-rec-eq > .voice-live-eq-canvas,
.voice-live-eq-canvas {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 8 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Предпрослушивание: слева «прослушать», справа «отменить отправку» */
.message-input-pill.is-voice-rec-actions > .voice-preview-actions,
.voice-preview-actions {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 6px !important;
    z-index: 6 !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.voice-preview-actions .voice-preview-action-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 auto !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.96) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.voice-preview-actions .voice-preview-action-btn:active {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: scale(0.94);
}

.voice-preview-actions .voice-preview-action-btn--delete {
    color: #ff5a66 !important;
}

.voice-preview-actions .voice-preview-action-btn svg {
    display: block;
    pointer-events: none;
    width: 20px;
    height: 20px;
}

.voice-preview-actions .voice-preview-action-btn svg.hidden {
    display: none !important;
}

/* Справа: во время записи — микрофон, в предпрослушивании — обычная отправка */
.message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-send {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.message-input-container.voice-preview-mode.voice-inline-mode .voice-send-slot .btn-send {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.message-input-container.voice-preview-mode.voice-inline-mode .voice-send-slot .btn-voice {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: #ff3b4a !important;
    background-color: #ff3b4a !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: xam-voice-rec-pulse 1.35s ease-in-out infinite;
}

.message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
}

@keyframes xam-voice-rec-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@keyframes xam-voice-rec-dot {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 74, 0.5); opacity: 1; }
    70% { box-shadow: 0 0 0 8px rgba(255, 59, 74, 0); opacity: 0.85; }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 74, 0); opacity: 1; }
}

/* ПК: без blur — только сплошной цвет как у панели списка (#212121) */
@media (min-width: 769px) {
    body:not(.layout-tablet) .sidebar,
    body:not(.layout-tablet) .sidebar *,
    body:not(.layout-tablet) .sidebar *::before,
    body:not(.layout-tablet) .sidebar *::after,
    body:not(.layout-tablet) .chat-view,
    body:not(.layout-tablet) .chat-view *,
    body:not(.layout-tablet) .chat-view *::before,
    body:not(.layout-tablet) .chat-view *::after,
    body:not(.layout-tablet) .pc-sidebar-flyout,
    body:not(.layout-tablet) .pc-sidebar-flyout *,
    body:not(.layout-tablet) .pc-compose-flyout,
    body:not(.layout-tablet) .pc-sidebar-settings,
    body:not(.layout-tablet) .pc-sidebar-settings * {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body:not(.layout-tablet) .chat-view {
        --desktop-chat-chrome-bg: #1c1c1c;
        --desktop-chat-chrome-border: transparent;
        --desktop-chat-chrome-shadow: none;
    }

    body:not(.layout-tablet) .message-input-container {
        --composer-chip-bg: #212121;
        --composer-chip-border: transparent;
        --composer-chip-shadow: none;
    }

    body:not(.layout-tablet) .chat-view > .chat-header .chat-header-info-pill,
    body:not(.layout-tablet) .chat-view > .chat-header .chat-header-actions-pill,
    body:not(.layout-tablet) .chat-view > .pinned-messages-bar,
    body:not(.layout-tablet) .chat-view > .chat-auto-translate-bar:not(.hidden) {
        background: #1c1c1c !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* ПК: низ композера = низ floating sidebar */
    body:not(.layout-tablet) .message-input-container {
        padding-bottom: 12px !important;
    }

    /* ПК: composer — две пилюли: [📎 | текст | 🙂]  [🎙/➤] */
    body:not(.layout-tablet) .message-input-container .input-panel {
        pointer-events: none !important;
        gap: 0 !important;
        margin: 0 auto !important;
    }

    body:not(.layout-tablet) .message-input-container.has-active-reply .input-panel,
    body:not(.layout-tablet) .message-input-container.has-active-edit .input-panel,
    body:not(.layout-tablet) .message-input-container.has-composer-attachments .input-panel {
        gap: 8px !important;
    }

    body:not(.layout-tablet) .message-input-container .input-panel > .reply-preview.hidden,
    body:not(.layout-tablet) .message-input-container .input-panel > .edit-preview.hidden,
    body:not(.layout-tablet) .message-input-container .input-panel > .composer-desktop-attachment-strip.hidden {
        display: none !important;
    }

    body:not(.layout-tablet) .message-input-container .input-panel > .composer-main-row {
        gap: 8px !important;
        align-items: center !important;
        min-height: 42px !important;
        height: auto !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        transition: none !important;
    }

    body:not(.layout-tablet) .message-input-container .composer-input-cluster {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 0 !important;
        align-items: center !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 4px 0 5px !important;
        border-radius: var(--composer-bar-radius, 999px) var(--composer-bar-radius, 999px) 0 var(--composer-bar-radius, 999px) !important;
        background: #212121 !important;
        background-color: #212121 !important;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
        isolation: isolate !important;
        transition: border-radius 0.18s ease, max-height 0.18s ease !important;
    }

    body:not(.layout-tablet) .message-input-container .composer-input-cluster .message-input-pill {
        max-height: 100% !important;
        overflow: hidden !important;
    }

    body:not(.layout-tablet) .message-input-container .composer-input-cluster .message-input-pill .message-input {
        min-height: 0 !important;
        max-height: 42px !important;
        padding: 0 4px !important;
        line-height: 42px !important;
        box-sizing: border-box !important;
    }

    body:not(.layout-tablet) .message-input-container .composer-input-cluster::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: calc(100% - 2px) !important;
        right: auto !important;
        bottom: -3px !important;
        width: 11px !important;
        height: 20px !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
        z-index: 3 !important;
        background-color: #212121 !important;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") !important;
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") !important;
        -webkit-mask-size: 100% 100% !important;
        mask-size: 100% 100% !important;
        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
        -webkit-mask-position: left bottom !important;
        mask-position: left bottom !important;
    }

    body:not(.layout-tablet) .message-input-container .composer-main-row.composer-main-row--multiline .composer-input-cluster {
        height: auto !important;
        max-height: none !important;
        border-radius: var(--composer-bar-radius, 999px) !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-recording-mode .composer-input-cluster,
    body:not(.layout-tablet) .message-input-container.voice-preview-mode .composer-input-cluster {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        border-radius: 999px !important;
    }

    body:not(.layout-tablet) .message-input-container .composer-main-row.composer-main-row--multiline .composer-input-cluster .message-input-pill {
        max-height: none !important;
        overflow: visible !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-recording-mode .composer-input-cluster .message-input-pill,
    body:not(.layout-tablet) .message-input-container.voice-preview-mode .composer-input-cluster .message-input-pill {
        max-height: 100% !important;
        overflow: hidden !important;
    }

    body:not(.layout-tablet) .message-input-container .composer-main-row.composer-main-row--multiline .composer-input-cluster .message-input-pill .message-input {
        max-height: 4.5em !important;
        line-height: 1.35 !important;
        padding: 0 8px !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-recording-mode .composer-input-cluster .message-input-pill .message-input,
    body:not(.layout-tablet) .message-input-container.voice-preview-mode .composer-input-cluster .message-input-pill .message-input {
        display: none !important;
    }

    body:not(.layout-tablet) .message-input-container .composer-main-row.composer-main-row--multiline .composer-input-cluster::after,
    body:not(.layout-tablet) .message-input-container.voice-recording-mode .composer-input-cluster::after,
    body:not(.layout-tablet) .message-input-container.voice-preview-mode .composer-input-cluster::after {
        content: none !important;
        display: none !important;
    }

    body:not(.layout-tablet) .message-input-container .composer-send-cluster {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    /* Дети attach становятся элементами ряда внутри input-cluster: эмодзи уезжает вправо от поля */
    body:not(.layout-tablet) .message-input-container:not(.voice-inline-mode):not(.voice-recording-mode):not(.voice-preview-mode) .input-attach-buttons {
        display: contents !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    body:not(.layout-tablet) .message-input-container .input-attach-buttons,
    body:not(.layout-tablet) .message-input-container .message-input-pill,
    body:not(.layout-tablet) .message-input-container .composer-desktop-attachment-strip:not(.hidden) {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    body:not(.layout-tablet) #emoji-picker.emoji-picker--float .emoji-picker-pill,
    body:not(.layout-tablet) .message-input-container.emoji-open > .emoji-picker .emoji-picker-pill {
        background: #212121 !important;
        background-color: #212121 !important;
        border: none !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
        border-radius: var(--emoji-float-radius-tl, 16px) var(--emoji-float-radius-tr, 16px) var(--emoji-float-radius-bl, 16px) var(--emoji-float-radius-br, 16px) !important;
        overflow: visible !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body:not(.layout-tablet) #emoji-picker.emoji-picker--float {
        z-index: 200 !important;
    }

    body:not(.layout-tablet) #emoji-picker.emoji-picker--float .emoji-picker-body,
    body:not(.layout-tablet) #emoji-picker.emoji-picker--float .emoji-picker-sections-scroll {
        max-height: none !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body:not(.layout-tablet) #emoji-picker.emoji-picker--float .emoji-picker-body::-webkit-scrollbar,
    body:not(.layout-tablet) #emoji-picker.emoji-picker--float .emoji-picker-sections-scroll::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-file {
        order: 1 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex: 0 0 36px !important;
        border-radius: 50% !important;
        color: #AAAAAA !important;
        align-self: center !important;
    }

    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-webapp,
    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-scheduled {
        order: 1 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex: 0 0 36px !important;
        border-radius: 50% !important;
        color: #AAAAAA !important;
        align-self: center !important;
    }

    body:not(.layout-tablet) .message-input-container .message-input-pill {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 0 4px !important;
        border-radius: 0 !important;
        align-self: stretch !important;
        display: flex !important;
        align-items: center !important;
    }

    body:not(.layout-tablet) .message-input-container .composer-main-row.composer-main-row--multiline .message-input-pill {
        align-items: flex-end !important;
        padding-top: 8px !important;
        padding-bottom: 6px !important;
    }

    body:not(.layout-tablet) .message-input-container .message-input-pill .message-input {
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
        padding: 0 4px !important;
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.92) !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

    body:not(.layout-tablet) .message-input-container .message-input-pill .message-input::placeholder {
        color: #AAAAAA !important;
        opacity: 1 !important;
        font-weight: 500 !important;
        line-height: inherit !important;
        position: relative !important;
        top: 1px !important;
    }

    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-emoji {
        order: 3 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex: 0 0 36px !important;
        border-radius: 50% !important;
        color: #AAAAAA !important;
        margin-right: 2px !important;
        align-self: center !important;
    }

    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-file svg,
    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-emoji svg,
    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-webapp svg,
    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-scheduled svg {
        width: 22px !important;
        height: 22px !important;
        color: #AAAAAA !important;
        stroke: currentColor !important;
    }

    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-file:hover,
    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-emoji:hover,
    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-webapp:hover,
    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-scheduled:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #CCCCCC !important;
    }

    body:not(.layout-tablet) .message-input-container .input-attach-buttons #emoji-hover-panel {
        display: none !important;
        order: 4 !important;
    }

    body:not(.layout-tablet) .message-input-container .voice-send-slot {
        order: 5 !important;
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        flex: 0 0 52px !important;
        align-self: center !important;
        aspect-ratio: auto !important;
    }

    body:not(.layout-tablet) .message-input-container .voice-send-slot .btn-voice,
    body:not(.layout-tablet) .message-input-container .voice-send-slot .btn-send {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        background: var(--xam-ui-accent, #8774E1) !important;
        background-color: var(--xam-ui-accent, #8774E1) !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 999px !important;
        color: #fff !important;
        aspect-ratio: auto !important;
        inset: auto !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
    }

    body:not(.layout-tablet) .message-input-container .voice-send-slot .btn-voice svg,
    body:not(.layout-tablet) .message-input-container .voice-send-slot .btn-send svg {
        color: #fff !important;
        fill: currentColor !important;
        stroke: none !important;
        width: 20px !important;
        height: 20px !important;
    }

    body:not(.layout-tablet) .message-input-container .voice-send-slot .btn-send svg {
        fill: currentColor !important;
    }

    body:not(.layout-tablet) .message-input-container .voice-send-slot .btn-voice:hover,
    body:not(.layout-tablet) .message-input-container .voice-send-slot .btn-send:hover {
        background: var(--xam-ui-accent-hover, #9585e6) !important;
        background-color: var(--xam-ui-accent-hover, #9585e6) !important;
    }

    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-file:hover,
    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-emoji:hover,
    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-webapp:hover,
    body:not(.layout-tablet) .message-input-container .input-attach-buttons .btn-scheduled:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.95) !important;
    }

    body:not(.layout-tablet) .message-input-container .voice-send-slot.composer-has-text .btn-send {
        background: var(--xam-ui-accent, #8774E1) !important;
        background-color: var(--xam-ui-accent, #8774E1) !important;
        border: none !important;
        box-shadow: none !important;
        color: #fff !important;
    }

    /* ПК: запись/превью — две пилюли: [● таймер | EQ]  [■ стоп / ➤] */
    body:not(.layout-tablet) .message-input-container.voice-recording-mode .input-panel,
    body:not(.layout-tablet) .message-input-container.voice-preview-mode .input-panel {
        padding: 0 !important;
        gap: 0 !important;
        background: transparent !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-inline-mode .composer-main-row,
    body:not(.layout-tablet) .message-input-container.voice-recording-mode .composer-main-row,
    body:not(.layout-tablet) .message-input-container.voice-preview-mode .composer-main-row {
        min-height: 42px !important;
        height: auto !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        align-items: center !important;
        gap: 8px !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-inline-mode .composer-input-cluster,
    body:not(.layout-tablet) .message-input-container.voice-recording-mode .composer-input-cluster,
    body:not(.layout-tablet) .message-input-container.voice-preview-mode .composer-input-cluster {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 12px 0 14px !important;
        border-radius: 999px !important;
        background: #212121 !important;
        background-color: #212121 !important;
        border: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
        align-items: center !important;
        gap: 10px !important;
        position: relative !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-inline-mode .composer-input-cluster::after,
    body:not(.layout-tablet) .message-input-container.voice-recording-mode .composer-input-cluster::after,
    body:not(.layout-tablet) .message-input-container.voice-preview-mode .composer-input-cluster::after {
        content: none !important;
        display: none !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-inline-mode .composer-send-cluster,
    body:not(.layout-tablet) .message-input-container.voice-recording-mode .composer-send-cluster,
    body:not(.layout-tablet) .message-input-container.voice-preview-mode .composer-send-cluster {
        display: flex !important;
        flex: 0 0 auto !important;
        height: 42px !important;
        min-height: 42px !important;
        align-items: center !important;
    }

    /* ПК: dedicated voice strip — скрываем attach/input */
    body:not(.layout-tablet) .message-input-container.voice-pc-rec .composer-input-cluster > .input-attach-buttons,
    body:not(.layout-tablet) .message-input-container.voice-pc-rec .composer-input-cluster > .message-input-pill {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        flex: 0 0 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-pc-rec .voice-pc-rec-inner {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-pc-rec .voice-pc-rec-timer {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
        min-width: 54px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        font-variant-numeric: tabular-nums !important;
        letter-spacing: 0.02em;
        color: rgba(255, 255, 255, 0.95) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-pc-rec .voice-pc-rec-timer .voice-rec-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: #ff3b4a !important;
        flex-shrink: 0 !important;
        box-shadow: 0 0 0 0 rgba(255, 59, 74, 0.45);
        animation: xam-voice-rec-dot 1.25s ease-out infinite !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-pc-rec .voice-pc-rec-eq {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        height: 28px !important;
        max-height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        position: static !important;
        inset: auto !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-pc-preview .voice-pc-preview-play,
    body:not(.layout-tablet) .message-input-container.voice-pc-preview .voice-pc-preview-delete {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.92) !important;
        cursor: pointer !important;
        flex: 0 0 auto !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-pc-preview .voice-pc-preview-play:hover {
        background: rgba(255, 255, 255, 0.14) !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-pc-preview .voice-pc-preview-delete {
        color: #ff6b75 !important;
        background: rgba(255, 59, 74, 0.12) !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-pc-preview .voice-pc-preview-delete:hover {
        background: rgba(255, 59, 74, 0.22) !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-pc-preview .voice-pc-preview-wave {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 2px !important;
        min-width: 0 !important;
        height: 28px !important;
        padding: 0 4px !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-pc-preview .voice-pc-preview-wave > i {
        display: block !important;
        flex: 1 1 0 !important;
        min-width: 2px !important;
        max-width: 3px !important;
        height: 30% !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.32) !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-pc-preview .voice-pc-preview-wave > i:nth-child(3n) { height: 55% !important; }
    body:not(.layout-tablet) .message-input-container.voice-pc-preview .voice-pc-preview-wave > i:nth-child(4n) { height: 78% !important; }
    body:not(.layout-tablet) .message-input-container.voice-pc-preview .voice-pc-preview-wave > i:nth-child(5n) { height: 42% !important; }
    body:not(.layout-tablet) .message-input-container.voice-pc-preview .voice-pc-preview-wave > i:nth-child(7n) { height: 92% !important; }

    /* мобильный inline на ПК больше не основной путь — оставляем fallback */
    body:not(.layout-tablet) .message-input-container.voice-inline-mode:not(.voice-pc-rec) .input-attach-buttons,
    body:not(.layout-tablet) .message-input-container.voice-inline-mode:not(.voice-pc-rec) .input-attach-buttons.is-voice-rec-timer {
        display: flex !important;
        flex: 0 0 auto !important;
        position: relative !important;
        min-width: 64px !important;
        width: auto !important;
        height: 42px !important;
        max-height: 42px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 4px 0 2px !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-inline-mode:not(.voice-pc-rec) .message-input-pill,
    body:not(.layout-tablet) .message-input-container.voice-inline-mode:not(.voice-pc-rec) .message-input-pill.is-voice-rec-eq,
    body:not(.layout-tablet) .message-input-container.voice-inline-mode:not(.voice-pc-rec) .message-input-pill.is-voice-rec-actions {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 6px 0 2px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-recording-mode .voice-send-slot,
    body:not(.layout-tablet) .message-input-container.voice-preview-mode .voice-send-slot {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        flex: 0 0 52px !important;
        background: transparent !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice,
    body:not(.layout-tablet) .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice.recording,
    body:not(.layout-tablet) .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice.is-recording-active {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        border-radius: 999px !important;
        background: #ff3b4a !important;
        background-color: #ff3b4a !important;
        border: none !important;
        box-shadow: none !important;
        color: #ffffff !important;
        animation: none !important;
        transform: none !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice:hover,
    body:not(.layout-tablet) .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice.recording:hover {
        background: #ff5160 !important;
        background-color: #ff5160 !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-recording-mode:not(.voice-preview-mode) .voice-send-slot .btn-voice svg {
        width: 16px !important;
        height: 16px !important;
        color: #ffffff !important;
        fill: currentColor !important;
        stroke: none !important;
    }

    body:not(.layout-tablet) .message-input-container.voice-preview-mode .voice-send-slot .btn-send {
        width: 52px !important;
        min-width: 52px !important;
        height: 42px !important;
        border-radius: 999px !important;
        background: var(--xam-ui-accent, #8774E1) !important;
        background-color: var(--xam-ui-accent, #8774E1) !important;
    }

    body:not(.layout-tablet) .message-input-container .voice-recording-ui:not(.voice-pc-rec-inner),
    body:not(.layout-tablet) .message-input-container .voice-rec-track {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
    }

    /* ПК: голосовые в ленте — компактнее, как TG */
    body:not(.layout-tablet) .message:has(.message-media-voice) .message-content {
        max-width: min(280px, 100%) !important;
        padding: 6px 10px 5px !important;
    }

    body:not(.layout-tablet) .message.own:has(.message-media-voice) .message-content {
        max-width: min(260px, 100%) !important;
    }

    body:not(.layout-tablet) .message-media-voice {
        max-width: 240px !important;
        gap: 8px !important;
        min-height: 36px !important;
        align-items: center !important;
    }

    body:not(.layout-tablet) .message-media-voice .voice-play-btn {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        transition: transform 0.16s ease, background 0.16s ease, opacity 0.16s ease !important;
    }

    body:not(.layout-tablet) .message.own .message-media-voice .voice-play-btn {
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--msg-own-bg, #8774E1) !important;
    }

    body:not(.layout-tablet) .message:not(.own) .message-media-voice .voice-play-btn {
        background: rgba(255, 255, 255, 0.14) !important;
        color: #fff !important;
    }

    body:not(.layout-tablet) .message-media-voice .voice-play-btn .voice-play-icon,
    body:not(.layout-tablet) .message-media-voice .voice-play-btn .voice-pause-icon {
        width: 14px !important;
        height: 14px !important;
    }

    body:not(.layout-tablet) .message-media-voice .voice-middle {
        gap: 0 !important;
        padding: 0 !important;
    }

    body:not(.layout-tablet) .message-media-voice .voice-panel--audio {
        gap: 2px !important;
    }

    body:not(.layout-tablet) .message-media-voice .voice-waveform {
        height: 24px !important;
        min-height: 24px !important;
        gap: 1.5px !important;
        align-items: center !important;
    }

    body:not(.layout-tablet) .message-media-voice .voice-wave-bar {
        min-width: 2px !important;
        max-width: 2.5px !important;
        border-radius: 999px !important;
        transition:
            background 0.18s ease,
            height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.18s ease !important;
    }

    body:not(.layout-tablet) .message.own .message-media-voice .voice-wave-bar {
        background: rgba(255, 255, 255, 0.32) !important;
    }

    body:not(.layout-tablet) .message:not(.own) .message-media-voice .voice-wave-bar {
        background: rgba(255, 255, 255, 0.26) !important;
    }

    body:not(.layout-tablet) .message.own .message-media-voice .voice-wave-bar.is-played {
        background: rgba(255, 255, 255, 0.98) !important;
    }

    body:not(.layout-tablet) .message:not(.own) .message-media-voice .voice-wave-bar.is-played {
        background: rgba(167, 139, 250, 0.98) !important;
    }

    body:not(.layout-tablet) .message-media-voice.is-playing .voice-wave-bar.is-played {
        background: #fff !important;
    }

    body:not(.layout-tablet) .message:not(.own) .message-media-voice.is-playing .voice-wave-bar.is-played {
        background: #c4b5fd !important;
    }

    body:not(.layout-tablet) .message-media-voice .voice-duration {
        font-size: 12px !important;
        font-weight: 500 !important;
        letter-spacing: 0.02em !important;
        color: rgba(255, 255, 255, 0.55) !important;
    }

    body:not(.layout-tablet) .message.own .message-media-voice .voice-duration {
        color: rgba(255, 255, 255, 0.68) !important;
    }

    body:not(.layout-tablet) .message-media-voice .voice-transcribe-btn {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        font-size: 11px !important;
        opacity: 0.85;
        transition: background 0.15s ease, opacity 0.15s ease, border-color 0.15s ease !important;
    }

    body:not(.layout-tablet) .message-media-voice .voice-transcribe-btn:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.35) !important;
    }

    /* ПК: кнопка «вниз» — по центру строки ввода, справа от пилюль */
    body:not(.layout-tablet) .chat-view > .scroll-to-bottom-btn,
    body:not(.layout-tablet) #scroll-to-bottom-btn {
        width: 42px !important;
        height: 42px !important;
        background: #212121 !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body:not(.layout-tablet) .chat-view > .scroll-to-bottom-btn:hover,
    body:not(.layout-tablet) #scroll-to-bottom-btn:hover {
        background: #2a2a2a !important;
        transform: none !important;
        box-shadow: none !important;
    }

    body:not(.layout-tablet) .message-input-container .input-panel > .reply-preview:not(.hidden),
    body:not(.layout-tablet) .message-input-container .input-panel > .edit-preview:not(.hidden) {
        background: #212121 !important;
        background-color: #212121 !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 22px !important;
        pointer-events: auto !important;
    }

    body:not(.layout-tablet) .pc-sidebar-flyout,
    body:not(.layout-tablet) .pc-compose-flyout {
        background: #212121 !important;
        background-color: #212121 !important;
    }

    body:not(.layout-tablet) .pc-sidebar-settings-card {
        background: #181818 !important;
        background-color: #181818 !important;
    }

    body:not(.layout-tablet).xam-liquid-glass-enabled .message-input-container .composer-input-cluster,
    body:not(.layout-tablet).xam-liquid-glass-enabled-desktop .message-input-container .composer-input-cluster {
        background: #212121 !important;
        filter: none !important;
    }

    body:not(.layout-tablet).xam-liquid-glass-enabled .message-input-container .input-panel > .composer-main-row,
    body:not(.layout-tablet).xam-liquid-glass-enabled-desktop .message-input-container .input-panel > .composer-main-row {
        background: transparent !important;
        filter: none !important;
    }

    body:not(.layout-tablet).xam-liquid-glass-enabled .message-input-container .message-input-pill,
    body:not(.layout-tablet).xam-liquid-glass-enabled .message-input-container .input-attach-buttons,
    body:not(.layout-tablet).xam-liquid-glass-enabled-desktop .message-input-container .message-input-pill {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    body:not(.layout-tablet).xam-liquid-glass-enabled .message-input-container .voice-send-slot .btn-voice:not(.recording):not(.is-recording-active),
    body:not(.layout-tablet).xam-liquid-glass-enabled .message-input-container .voice-send-slot .btn-send,
    body:not(.layout-tablet).xam-liquid-glass-enabled-desktop .message-input-container .voice-send-slot .btn-voice:not(.recording):not(.is-recording-active),
    body:not(.layout-tablet).xam-liquid-glass-enabled-desktop .message-input-container .voice-send-slot .btn-send {
        background: var(--xam-ui-accent, #8774E1) !important;
        background-color: var(--xam-ui-accent, #8774E1) !important;
        border: none !important;
        box-shadow: none !important;
        filter: none !important;
        color: #fff !important;
    }

    body:not(.layout-tablet).xam-liquid-glass-enabled-desktop .message-input-container .message-input-pill::before,
    body:not(.layout-tablet).xam-liquid-glass-enabled-desktop .message-input-container .message-input-pill::after {
        display: none !important;
        content: none !important;
    }
}


/* restore: hide email in profiles */
#user-profile-modal .profile-info-item--email,
.profile-info-item--email {
    display: none !important;
}


/* restore: no strip/gap between pinned and unpinned */
.chats-pinned-divider,
.chats-pinned-divider-restore-hide {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}






/* ========== TG Web message tails (user SVG) ========== */
@media (min-width: 769px) {
    .messages-container {
        overflow-x: visible;
    }
}

.messages-container .message .message-content {
    position: relative;
    isolation: isolate;
}

.messages-container .message.own.message-bubble-single:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content,
.messages-container .message.own.message-bubble-last:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content,
.messages-container .message:not(.own).message-bubble-single:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content,
.messages-container .message:not(.own).message-bubble-last:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content {
    overflow: visible !important;
}

.messages-container .message .message-content::before,
.messages-container .message .message-content::after {
    content: none;
    display: none;
    -webkit-mask: none;
    mask: none;
    background: none;
    transform: none;
}

.messages-container .message.own.message-bubble-single:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content,
.messages-container .message.own.message-bubble-last:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content {
    border-bottom-right-radius: 0 !important;
}

.messages-container .message.own.message-bubble-single:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content::after,
.messages-container .message.own.message-bubble-last:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: calc(100% - 2px) !important;
    right: auto !important;
    bottom: -3px !important;
    width: 11px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background-color: var(--msg-own-bg, #8774E1) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: left bottom !important;
    mask-position: left bottom !important;
}

.messages-container .message:not(.own).message-bubble-single:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content,
.messages-container .message:not(.own).message-bubble-last:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content {
    border-bottom-left-radius: 0 !important;
}

.messages-container .message:not(.own).message-bubble-single:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content::before,
.messages-container .message:not(.own).message-bubble-last:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    right: calc(100% - 2px) !important;
    left: auto !important;
    bottom: -3px !important;
    width: 11px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background-color: var(--msg-peer-bg, #212121) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate(72%200)%20scale(-1%201)%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate(72%200)%20scale(-1%201)%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: right bottom !important;
    mask-position: right bottom !important;
}

.message.message-tail-hidden .message-content::after,
.message.message-tail-hidden .message-content::before {
    content: none !important;
    display: none !important;
}

.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-last.own .message-content,
.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-single.own .message-content {
    border-bottom-right-radius: 0 !important;
}
.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-last:not(.own) .message-content,
.messages-container .message:not(.system-message):not(.emoji-only).message-bubble-single:not(.own) .message-content {
    border-bottom-left-radius: 0 !important;
}

.messages-container .message.message-bubble-single .message-content,
.messages-container .message.message-bubble-last .message-content,
.messages-container .message.own.message-bubble-single .message-content,
.messages-container .message.own.message-bubble-last .message-content,
.messages-container .message:not(.own).message-bubble-single .message-content,
.messages-container .message:not(.own).message-bubble-last .message-content {
    overflow: visible !important;
}

/* Телефон: subpixel/isolation — чуть плотнее стыкуем хвост к пузырю */
@media (max-width: 768px) {
    .messages-container .message.own.message-bubble-single:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content::after,
    .messages-container .message.own.message-bubble-last:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content::after {
        left: calc(100% - 1.25px) !important;
        bottom: -3px !important;
        width: 10px !important;
        height: 18px !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .messages-container .message:not(.own).message-bubble-single:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content::before,
    .messages-container .message:not(.own).message-bubble-last:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content::before {
        right: calc(100% - 1.25px) !important;
        bottom: -3px !important;
        width: 10px !important;
        height: 18px !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    body.theme-light .messages-container .message:not(.own).message-bubble-single:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content::before,
    body.theme-light .messages-container .message:not(.own).message-bubble-last:not(.emoji-only):not(.system-message):not(.message--media-card):not(.message--sticker) .message-content::before {
        background-color: var(--msg-peer-bg, #FFFFFF) !important;
    }
}


/* restore media topbar (phones) */
.xam-media-view--mobile .xam-media-view__topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
    pointer-events: none;
}
.xam-media-view--mobile .xam-media-view__top-back,
.xam-media-view--mobile .xam-media-view__top-actions {
    pointer-events: auto;
}
.xam-media-view--mobile .xam-media-view__top-back {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 999px;
    background: rgba(28,28,30,0.88);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xam-media-view--mobile .xam-media-view__author {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
    pointer-events: none;
}
.xam-media-view--mobile .xam-media-view__author-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xam-media-view--mobile .xam-media-view__author-stamp {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255,255,255,0.62);
}
.xam-media-view--mobile .xam-media-view__top-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(28,28,30,0.88);
}
.xam-media-view--mobile .xam-media-view__top-pill-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xam-media-view--mobile .xam-media-view__dock-row--video-mobile-pills {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(420px, calc(100vw - 24px));
    margin: 0 auto;
}
.xam-media-view--mobile .xam-media-view__pill--transport-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    background: rgba(28,28,30,0.9);
    padding: 6px 14px;
}


/* ========== Папки чатов (телефон + ПК) ========== */
.sidebar-chats-row {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    position: relative;
}

.chat-folders-bar {
    display: none;
}

body.xam-chat-folders-bar-on .chat-folders-bar:not(.hidden) {
    display: block;
}

.chat-folders-bar-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    pointer-events: auto;
    padding: 2px 0 4px;
    position: relative;
}

.chat-folders-bar-scroll::-webkit-scrollbar {
    display: none;
}

.chat-folders-chip {
    appearance: none;
    flex: 0 0 auto;
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: rgba(23, 23, 23, 0.92);
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease,
        opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-folders-chip.is-enter {
    opacity: 0;
    transform: scale(0.88) translateY(4px);
}

.chat-folders-chip.is-leave {
    opacity: 0;
    transform: scale(0.88) translateY(-4px);
    pointer-events: none;
}

.chat-folders-chip.is-active {
    background: var(--xam-ui-accent, #8774E1);
    color: #ffffff;
}

#chats-list .chat-item.xam-folder-filtered-out,
#chats-list .chat-item-shell.xam-folder-filtered-out,
#chats-list.chats-list--drum .chat-item.xam-folder-filtered-out,
#chats-list.chats-list--drum .chat-item-shell.xam-folder-filtered-out {
    display: none !important;
}

body.xam-archive-folder-open .chat-folders-bar {
    display: none !important;
}

@media (max-width: 768px) {
    .chat-folders-bar {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        z-index: 8;
        padding: 0 8px 2px;
        pointer-events: none;
        flex: 0 0 auto;
    }

    body.xam-chat-folders-bar-on .chat-folders-bar:not(.hidden) {
        display: block;
        pointer-events: none;
    }

    body.xam-chat-folders-bar-on .chat-folders-bar:not(.hidden) .chat-folders-bar-scroll {
        pointer-events: auto;
    }

    body.xam-chat-folders-bar-on #chats-list {
        padding-top: 2px !important;
    }
}

/* ПК: папки — левая колонка внутри панели на всю высоту (как на макете) */
@media (min-width: 769px) {
    .sidebar-main-stack {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .sidebar-chats-row {
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
    }

    body.xam-chat-folders-bar-on .sidebar.sidebar--chats-drum {
        --xam-folders-rail-w: 76px;
        /* Панель шире на рейку — список справа той же ширины, не сжимается */
        --sidebar-panel-width: min(536px, 40vw);
        min-width: 476px;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        overflow: hidden !important;
        transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
            min-width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
            max-width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }

    body.xam-chat-folders-bar-on .sidebar.sidebar--chats-drum > .sidebar-main-stack {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        width: auto;
        height: auto;
        align-self: stretch;
    }

    body.xam-chat-folders-bar-on .sidebar.sidebar--chats-drum > #chat-folders-bar:not(.hidden),
    body.xam-chat-folders-bar-on .sidebar.sidebar--chats-drum > .chat-folders-bar:not(.hidden) {
        display: flex;
        flex: 0 0 var(--xam-folders-rail-w);
        width: var(--xam-folders-rail-w);
        max-width: var(--xam-folders-rail-w);
        flex-direction: column;
        align-self: stretch;
        min-height: 0;
        height: auto;
        padding: 12px 8px 14px;
        box-sizing: border-box;
        z-index: 6;
        pointer-events: auto;
        background: transparent;
        border-right: none;
        position: relative;
        /* С самого верха панели — «три полоски» только в правой колонке */
    }

    /* Разделитель чуть короче по высоте (не на всю колонку) */
    body.xam-chat-folders-bar-on .sidebar.sidebar--chats-drum > #chat-folders-bar:not(.hidden)::after,
    body.xam-chat-folders-bar-on .sidebar.sidebar--chats-drum > .chat-folders-bar:not(.hidden)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 14%;
        bottom: 14%;
        width: 1px;
        background: rgba(255, 255, 255, 0.08);
        pointer-events: none;
    }

    body.theme-light.xam-chat-folders-bar-on .sidebar.sidebar--chats-drum > #chat-folders-bar:not(.hidden)::after,
    body.theme-light.xam-chat-folders-bar-on .sidebar.sidebar--chats-drum > .chat-folders-bar:not(.hidden)::after {
        background: rgba(0, 0, 0, 0.08);
    }

    body.xam-chat-folders-bar-on .chat-folders-chip.is-enter {
        opacity: 0;
        transform: scale(0.82) translateY(6px);
    }

    body.xam-chat-folders-bar-on .chat-folders-chip.is-leave {
        opacity: 0;
        transform: scale(0.82) translateY(-4px);
        pointer-events: none;
    }

    body.xam-chat-folders-bar-on .chat-folders-bar-scroll {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
        max-height: 100%;
        padding: 0;
        scrollbar-width: none;
    }

    body.xam-chat-folders-bar-on .chat-folders-chip {
        width: 100%;
        height: auto;
        min-height: 56px;
        padding: 8px 5px;
        border-radius: 16px;
        font-size: 11px;
        font-weight: 650;
        line-height: 1.15;
        letter-spacing: 0.01em;
        white-space: normal;
        word-break: break-word;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
        transition: background 0.15s ease, color 0.15s ease,
            opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    body.xam-chat-folders-bar-on .chat-folders-chip.is-active {
        background: var(--xam-ui-accent, #8774E1);
        color: #fff;
        box-shadow: none;
    }

    body.xam-chat-folders-bar-on .chat-folders-indicator {
        display: none !important;
    }

    body.xam-chat-folders-bar-on .sidebar-chats-row > .chats-section {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        width: 100%;
    }

    body.theme-light.xam-chat-folders-bar-on .chat-folders-chip {
        background: rgba(0, 0, 0, 0.06);
        color: #2a2a32;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    }

    body.theme-light.xam-chat-folders-bar-on .chat-folders-chip.is-active {
        background: var(--xam-ui-accent, #8774E1);
        color: #fff;
        box-shadow: none;
    }
}

/* Телефон: папки под шапкой (order), обёртка прозрачна для flex */
@media (max-width: 768px) {
    .sidebar-main-stack {
        display: contents;
    }

    .sidebar-main-stack > .sidebar-header { order: 1; }
    .sidebar-main-stack > #search-results { order: 2; }
    .sidebar-main-stack > .mobile-top-nick-pill-wrap,
    .sidebar-main-stack > #mobile-top-nick-pill-wrap { order: 3; }
    .sidebar-main-stack > #mobile-chats-search-panel { order: 4; }
    .sidebar > #chat-folders-bar { order: 5; }
    .sidebar-main-stack > .sidebar-chats-row,
    .sidebar-main-stack > #sidebar-chats-row { order: 6; }
    .sidebar-main-stack > #pc-sidebar-settings { order: 7; }
    .sidebar-main-stack > .sidebar-compose-fab-wrap { order: 8; }
    .sidebar-main-stack > .sidebar-bottom-dock { order: 9; }
}

.chat-folders-screen {
    background: rgba(10, 10, 10, 0.92);
    border: none;
    border-radius: 20px;
    width: 100%;
    max-width: 460px;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--text-white, #fff);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.chat-folders-header {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 16px 14px 10px;
    flex: 0 0 auto;
}

.chat-folders-back-btn,
.chat-folders-header-action {
    appearance: none;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.chat-folders-header-action {
    font-size: 15px;
    font-weight: 650;
    color: var(--xam-ui-accent, #8774E1);
    padding: 8px 10px;
}

.chat-folders-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.chat-folders-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 16px 28px;
    -webkit-overflow-scrolling: touch;
}

.chat-folders-hint {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
}

.chat-folders-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.chat-folders-empty {
    padding: 18px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    line-height: 1.4;
}

.chat-folders-row {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    border: none;
    border-radius: 14px;
    background: #171717;
    color: #fff;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.chat-folders-row:active {
    background: #1f1f1f;
}

.chat-folders-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-folders-row-name {
    font-size: 16px;
    font-weight: 650;
}

.chat-folders-row-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.chat-folders-row-arrow {
    color: rgba(255, 255, 255, 0.35);
    display: inline-flex;
}

.chat-folders-create-btn {
    appearance: none;
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 14px;
    background: var(--xam-ui-accent, #8774E1);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.chat-folders-create-btn.is-disabled,
.chat-folders-create-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.chat-folders-field-label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.chat-folders-field-label--spaced {
    margin-top: 18px;
}

.chat-folders-name-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: none;
    border-radius: 14px;
    background: #171717;
    color: #fff;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
}

.chat-folders-name-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.chat-folders-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.chat-folders-picker-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #171717;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.chat-folders-picker-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #2a2a2e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
}

.chat-folders-picker-avatar img,
.chat-folders-picker-avatar svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-folders-picker-avatar-letter {
    font-size: 15px;
    font-weight: 700;
}

.chat-folders-picker-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-folders-picker-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chat-folders-picker-box {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    flex: 0 0 auto;
    position: relative;
    background: transparent;
}

.chat-folders-picker-check:checked + .chat-folders-picker-box {
    background: var(--xam-ui-accent, #8774E1);
    border-color: var(--xam-ui-accent, #8774E1);
}

.chat-folders-picker-check:checked + .chat-folders-picker-box::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.chat-folders-delete-btn {
    appearance: none;
    width: 100%;
    height: 46px;
    margin-top: 18px;
    border: none;
    border-radius: 14px;
    background: rgba(231, 76, 60, 0.16);
    color: #ff6b6b;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 768px) {
    #chat-folders-modal.modal:not(.hidden) {
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
        background: rgba(0, 0, 0, 0.45);
    }

    #chat-folders-modal .chat-folders-screen {
        width: 100%;
        max-width: none;
        max-height: none;
        height: 100%;
        border-radius: 0;
        background: #0e0e10;
        box-shadow: none;
    }
}

body.theme-light .chat-folders-chip {
    background: rgba(255, 255, 255, 0.88);
    color: #1c1b22;
}

body.theme-light .chat-folders-chip.is-active {
    background: var(--xam-ui-accent, #8774E1);
    color: #fff;
}

body.theme-light .chat-folders-screen,
body.theme-light #chat-folders-modal .chat-folders-screen {
    background: #f4f4f6;
    color: #1c1b22;
}

body.theme-light .chat-folders-back-btn,
body.theme-light .chat-folders-title {
    color: #1c1b22;
}

body.theme-light .chat-folders-hint,
body.theme-light .chat-folders-row-meta,
body.theme-light .chat-folders-field-label {
    color: rgba(28, 27, 34, 0.55);
}

body.theme-light .chat-folders-row,
body.theme-light .chat-folders-name-input,
body.theme-light .chat-folders-picker-row,
body.theme-light .chat-folders-empty {
    background: #ffffff;
    color: #1c1b22;
}

body.theme-light .chat-folders-name-input::placeholder {
    color: rgba(28, 27, 34, 0.35);
}

body.theme-light .chat-folders-picker-box {
    border-color: rgba(28, 27, 34, 0.25);
}


/* Загрузка чатов — в строке поиска (лупа → орбита, «Обновление») */
.sidebar-search-loading-spinner {
    display: none;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: #aaaaaa;
    line-height: 0;
    animation: none;
    background: none;
    border-radius: 0;
    mask: none;
    -webkit-mask: none;
}

.sidebar-search-loading-spinner svg {
    width: 22px;
    height: 22px;
    display: block;
    overflow: visible;
}

.sidebar-search-input-wrapper.is-chats-loading .sidebar-search-icon {
    display: none !important;
}

.sidebar-search-input-wrapper.is-chats-loading .sidebar-search-loading-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* После показа — лёгкий пинок на случай задержки SMIL в WebView */
.sidebar-search-input-wrapper.is-chats-loading .sidebar-search-loading-spinner svg {
    transform: translateZ(0);
}

/* restore: never show email in profiles / settings card */
#user-profile-modal .profile-info-item--email,
#user-profile-modal #profile-email,
.settings-profile-card-email,
#settings-profile-email-text {
    display: none !important;
}


/* media-card SVG tails — тот же TG-хвост, что у текстовых пузырей */
.messages-container .message.message--media-card.message-bubble-single .message-media-card-shell,
.messages-container .message.message--media-card.message-bubble-last .message-media-card-shell {
    overflow: visible !important;
}

.messages-container .message.message--media-card.own.message-bubble-single .message-media-card-shell,
.messages-container .message.message--media-card.own.message-bubble-last .message-media-card-shell {
    border-bottom-right-radius: 0 !important;
}

.messages-container .message.message--media-card:not(.own).message-bubble-single .message-media-card-shell,
.messages-container .message.message--media-card:not(.own).message-bubble-last .message-media-card-shell {
    border-bottom-left-radius: 0 !important;
}

.messages-container .message.message--media-card.message-bubble-single .message-media-card-shell::after,
.messages-container .message.message--media-card.message-bubble-last .message-media-card-shell::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: -3px !important;
    width: 11px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    z-index: 6 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 0 !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
}

.messages-container .message.message--media-card.own.message-bubble-single .message-media-card-shell::after,
.messages-container .message.message--media-card.own.message-bubble-last .message-media-card-shell::after {
    left: calc(100% - 2px) !important;
    right: auto !important;
    background-color: var(--msg-own-bg, #8774E1) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") !important;
    -webkit-mask-position: left bottom !important;
    mask-position: left bottom !important;
}

.messages-container .message.message--media-card:not(.own).message-bubble-single .message-media-card-shell::after,
.messages-container .message.message--media-card:not(.own).message-bubble-last .message-media-card-shell::after {
    right: calc(100% - 2px) !important;
    left: auto !important;
    background-color: var(--msg-peer-bg, #212121) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate(72%200)%20scale(-1%201)%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2090%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate(72%200)%20scale(-1%201)%22%3E%3Cpath%20d%3D%22M0.496094%2089.7085C0.22062%2089.7085%20-0.00205713%2089.484%200.00021267%2089.2085L0.191378%2066L0.164981%2044L0.112293%200.0625194C0.112252%200.0280092%200.140217%201.46008e-05%200.174729%201.61205e-05C0.200597%201.35483e-05%200.224021%200.0165749%200.233268%200.0407396C15.1614%2039.0418%2030.8661%2059.1191%2068.0848%2078.194C73.3405%2080.8876%2071.9911%2089.1879%2066.1122%2089.75L0.496094%2089.7085Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
    -webkit-mask-position: right bottom !important;
    mask-position: right bottom !important;
}

.message.message-tail-hidden .message-media-card-shell::after {
    content: none !important;
    display: none !important;
}

/* Телефон: хвостик медиа — плотнее стык к рамке */
@media (max-width: 768px) {
    .messages-container .message.message--media-card.message-bubble-single .message-media-card-shell,
    .messages-container .message.message--media-card.message-bubble-last .message-media-card-shell {
        isolation: auto;
    }

    .messages-container .message.message--media-card.message-bubble-single .message-media-card-shell::after,
    .messages-container .message.message--media-card.message-bubble-last .message-media-card-shell::after {
        bottom: -3px !important;
        width: 10px !important;
        height: 18px !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .messages-container .message.message--media-card.own.message-bubble-single .message-media-card-shell::after,
    .messages-container .message.message--media-card.own.message-bubble-last .message-media-card-shell::after {
        left: calc(100% - 1.25px) !important;
    }

    .messages-container .message.message--media-card:not(.own).message-bubble-single .message-media-card-shell::after,
    .messages-container .message.message--media-card:not(.own).message-bubble-last .message-media-card-shell::after {
        right: calc(100% - 1.25px) !important;
        background-color: var(--msg-peer-bg, #212121) !important;
    }

    body.theme-light .messages-container .message.message--media-card:not(.own).message-bubble-single .message-media-card-shell::after,
    body.theme-light .messages-container .message.message--media-card:not(.own).message-bubble-last .message-media-card-shell::after {
        background-color: var(--msg-peer-bg, #FFFFFF) !important;
    }
}

/* ensure tails not clipped — правила перенесены в блок @media (min-width: 769px) выше */


/* ========== Mobile video-note (кружок) center orb ========== */
.xam-vnote-overlay {
    position: fixed;
    inset: 0;
    z-index: 12050;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.xam-vnote-overlay.is-active {
    opacity: 1;
}
.xam-vnote-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    pointer-events: none;
}
.xam-vnote-orb {
    position: fixed;
    left: 50%;
    top: 42%;
    width: min(84vw, 52vh, 380px);
    height: min(84vw, 52vh, 380px);
    border-radius: 50%;
    overflow: hidden;
    background: #000;
    z-index: 12051;
    pointer-events: none;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.42);
    transform: translate(-50%, -50%);
    will-change: transform, box-shadow;
}
.xam-vnote-orb.is-flying {
    /* transform set inline for FLIP animation */
}
.xam-vnote-live,
.xam-vnote-preview,
.xam-vnote-freeze {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #000;
}
.xam-vnote-live:not(.is-rear-camera),
.xam-vnote-preview:not(.is-rear-camera),
.xam-vnote-freeze.is-mirrored {
    transform: scaleX(-1);
}
.xam-vnote-live.is-rear-camera,
.xam-vnote-preview.is-rear-camera,
.xam-vnote-freeze:not(.is-mirrored) {
    transform: none;
}
.xam-vnote-live.hidden,
.xam-vnote-preview.hidden,
.xam-vnote-freeze.hidden {
    display: none !important;
}
.xam-vnote-shake-hint {
    position: fixed;
    left: 50%;
    bottom: calc(118px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 12052;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(92vw, 360px);
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(28, 28, 30, 0.92);
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.25;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.xam-vnote-overlay.is-active .xam-vnote-shake-hint.is-visible,
.xam-vnote-shake-hint.is-visible {
    opacity: 1;
}
.xam-vnote-shake-hint-icon {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.88);
    flex: 0 0 auto;
}
.xam-vnote-shake-hint-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* voice btn in circle mode */
.btn-voice.is-vnote-mode {
    color: #fff !important;
}
.btn-voice.is-vnote-ghost {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Never keep full-screen boot splash when main UI is up (PC + phone) */
body.xam-main-ready .app-boot-splash,
body.mobile-chat-pc-look.xam-main-ready .app-boot-splash {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* ===== Цвет элементов (персонализация): единый акцент ПК + телефон ===== */
.message.own .message-content {
    background: var(--msg-own-bg, #8774E1) !important;
    background-color: var(--msg-own-bg, #8774E1) !important;
}
.message.own .call-message-card {
    background: var(--msg-own-bg, #8774E1) !important;
}
.chat-folders-indicator {
    background: var(--xam-ui-accent, #8774E1) !important;
}
.sidebar-compose-fab,
.sidebar-compose-fab.desktop-only,
#fab-new-chat-desktop {
    background: var(--xam-ui-accent, #8774E1) !important;
    background-color: var(--xam-ui-accent, #8774E1) !important;
}
.sidebar-compose-fab:hover,
.sidebar-compose-fab.desktop-only:hover,
#fab-new-chat-desktop:hover {
    background: var(--xam-ui-accent-hover, #9585e6) !important;
}
.chat-header-expand-notify-menu-item--accent {
    color: var(--xam-ui-accent, #8774E1) !important;
}
.personalization-preview-own .message-content {
    background: var(--msg-own-bg, #8774E1) !important;
}
/* Отправка и ГС — одна акцентная пилюля (следует за цветом элементов) */
.voice-send-slot .btn-send,
.voice-send-slot .btn-voice:not(.recording):not(.is-recording-active),
.message-input-container .voice-send-slot .btn-send,
.message-input-container .voice-send-slot .btn-voice:not(.recording):not(.is-recording-active),
.voice-send-slot.composer-has-text .btn-send,
.message-input-container .voice-send-slot.composer-has-text .btn-send {
    background: var(--xam-ui-accent, #8774E1) !important;
    background-color: var(--xam-ui-accent, #8774E1) !important;
    border-color: transparent !important;
}
.voice-send-slot .btn-send:hover,
.voice-send-slot .btn-voice:not(.recording):not(.is-recording-active):hover {
    background: var(--xam-ui-accent-hover, #9585e6) !important;
    background-color: var(--xam-ui-accent-hover, #9585e6) !important;
}
.chat-item.active,
.chat-item.active:hover,
.chat-item.active:nth-child(even) {
    background: var(--xam-chat-active-bg, #503184) !important;
}
#chats-list.chats-list--drum .chat-item.active,
#chats-list.chats-list--drum .chat-item.active:hover {
    background: var(--xam-ui-accent, #8774E1) !important;
}
.pinned-messages-bar-accent {
    background: var(--xam-ui-accent, #8774E1) !important;
}
.pinned-messages-bar-title {
    color: var(--xam-pinned-accent, var(--xam-ui-accent, #a78bfa)) !important;
}
.xam-confirm-sheet-icon--delete,
.xam-confirm-sheet-icon--login {
    background: var(--xam-ui-accent, #8774E1) !important;
    box-shadow: none !important;
}
.xam-confirm-sheet-btn--primary {
    background: var(--xam-ui-accent, #8774E1) !important;
}
.xam-confirm-sheet-btn--primary:hover {
    background: var(--xam-ui-accent-hover, #9585e6) !important;
}

/* Material-шиты: ПК + телефон (#xam-confirm-sheet, #xam-text-input-sheet) */
#xam-confirm-sheet,
#xam-text-input-sheet {
    align-items: center !important;
    padding: 24px !important;
}
#xam-confirm-sheet .xam-confirm-sheet-panel,
#xam-text-input-sheet .xam-confirm-sheet-panel {
    transform: translate3d(0, 12px, 0) scale(0.98);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease !important;
}
#xam-confirm-sheet.xam-confirm-sheet--open .xam-confirm-sheet-panel,
#xam-text-input-sheet.xam-confirm-sheet--open .xam-confirm-sheet-panel {
    transform: translate3d(0, 0, 0) scale(1) !important;
    opacity: 1 !important;
}

/* confirm sheet — Material-диалог */
#xam-confirm-sheet .xam-confirm-sheet-panel {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    grid-template-areas:
        "icon title title title"
        "message message message message"
        ". . cancel confirm" !important;
    align-items: center !important;
    justify-items: start !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    width: 268px !important;
    min-width: 268px !important;
    max-width: min(268px, calc(100% - 32px)) !important;
    padding: 20px 14px 12px !important;
    border-radius: 32px !important;
    background: #181818 !important;
    box-sizing: border-box !important;
}
#xam-confirm-sheet .xam-confirm-sheet-panel:has(.xam-confirm-sheet-icon.hidden) {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas:
        "title title title"
        "message message message"
        ". cancel confirm" !important;
}
#xam-confirm-sheet .xam-confirm-sheet-panel:has(#xam-confirm-sheet-cancel.hidden) {
    grid-template-areas:
        "icon title title title"
        "message message message message"
        ". . . confirm" !important;
}
#xam-confirm-sheet .xam-confirm-sheet-panel:has(.xam-confirm-sheet-icon.hidden):has(#xam-confirm-sheet-cancel.hidden) {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "title title"
        "message message"
        ". confirm" !important;
}
#xam-confirm-sheet .xam-confirm-sheet-icon {
    grid-area: icon !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    overflow: hidden !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 36px !important;
    text-align: center !important;
}
#xam-confirm-sheet .xam-confirm-sheet-icon svg {
    width: 16px !important;
    height: 16px !important;
}
#xam-confirm-sheet .xam-confirm-sheet-icon--avatar {
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    padding: 0 !important;
}
#xam-confirm-sheet .xam-confirm-sheet-icon--avatar img,
#xam-confirm-sheet .xam-confirm-sheet-icon--avatar video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}
#xam-confirm-sheet .xam-confirm-sheet-title {
    grid-area: title !important;
    text-align: left !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    justify-self: start !important;
    align-self: center !important;
}
#xam-confirm-sheet .xam-confirm-sheet-message {
    grid-area: message !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 4px 0 8px !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    color: rgba(255, 255, 255, 0.88) !important;
    justify-self: stretch !important;
}
#xam-confirm-sheet .xam-confirm-sheet-btn {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    transform: none !important;
}
#xam-confirm-sheet .xam-confirm-sheet-btn:active {
    transform: none !important;
    filter: brightness(1.15);
}
#xam-confirm-sheet .xam-confirm-sheet-btn--secondary {
    grid-area: cancel !important;
    justify-self: end !important;
    color: var(--xam-ui-accent, #8774E1) !important;
}
#xam-confirm-sheet .xam-confirm-sheet-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}
#xam-confirm-sheet .xam-confirm-sheet-btn--primary {
    grid-area: confirm !important;
    justify-self: end !important;
    color: var(--xam-ui-accent, #8774E1) !important;
    background: transparent !important;
    background-color: transparent !important;
}
#xam-confirm-sheet .xam-confirm-sheet-btn--primary:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}
#xam-confirm-sheet:has(.xam-confirm-sheet-icon--delete) .xam-confirm-sheet-btn--primary,
#xam-confirm-sheet:has(.xam-confirm-sheet-icon--avatar) .xam-confirm-sheet-btn--primary {
    color: #ff6b7a !important;
}
body.theme-light #xam-confirm-sheet .xam-confirm-sheet-panel {
    background: #ffffff !important;
}
body.theme-light #xam-confirm-sheet .xam-confirm-sheet-title {
    color: #1c1b22 !important;
}
body.theme-light #xam-confirm-sheet .xam-confirm-sheet-message {
    color: #5e7086 !important;
}
body.theme-light #xam-confirm-sheet .xam-confirm-sheet-btn--secondary:hover,
body.theme-light #xam-confirm-sheet .xam-confirm-sheet-btn--primary:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

@media (min-width: 769px) {
    #xam-confirm-sheet .xam-confirm-sheet-panel {
        width: 268px !important;
        min-width: 268px !important;
        max-width: 268px !important;
    }
}

@media (max-width: 768px) {
    #xam-confirm-sheet .xam-confirm-sheet-panel {
        width: 288px !important;
        min-width: min(288px, calc(100% - 28px)) !important;
        max-width: min(288px, calc(100% - 28px)) !important;
        padding: 22px 14px 14px !important;
        column-gap: 10px !important;
        row-gap: 6px !important;
    }
    #xam-confirm-sheet .xam-confirm-sheet-icon {
        width: 36px !important;
        height: 36px !important;
    }
    #xam-confirm-sheet .xam-confirm-sheet-title {
        font-size: 18px !important;
    }
    #xam-confirm-sheet .xam-confirm-sheet-message {
        font-size: 15px !important;
        margin: 4px 0 8px !important;
        padding: 0 !important;
    }
    #xam-text-input-sheet .xam-confirm-sheet-panel {
        width: 340px !important;
        min-width: min(340px, calc(100% - 28px)) !important;
        max-width: min(340px, calc(100% - 28px)) !important;
        padding: 22px 20px 14px !important;
    }
}

/* «Как отображать» — тот же Material-диалог */
#xam-text-input-sheet {
    align-items: center !important;
}
#xam-text-input-sheet .xam-confirm-sheet-panel {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    grid-template-areas:
        "title title title"
        "input input input"
        ". cancel confirm" !important;
    align-items: center !important;
    column-gap: 4px !important;
    row-gap: 6px !important;
    width: 300px !important;
    min-width: min(300px, calc(100% - 32px)) !important;
    max-width: min(300px, calc(100% - 32px)) !important;
    padding: 20px 18px 12px !important;
    border-radius: 36px !important;
    background: #181818 !important;
    box-sizing: border-box !important;
}
#xam-text-input-sheet .xam-confirm-sheet-title {
    grid-area: title !important;
    text-align: left !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}
#xam-text-input-sheet .xam-confirm-sheet-input {
    grid-area: input !important;
    margin: 10px 0 8px !important;
    padding: 8px 16px !important;
    height: 36px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    background: #2a2a2c !important;
    box-shadow: none !important;
    outline: none !important;
}
#xam-text-input-sheet .xam-confirm-sheet-input::placeholder {
    color: rgba(255, 255, 255, 0.38) !important;
}
#xam-text-input-sheet .xam-confirm-sheet-input:focus {
    background: #323234 !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--xam-ui-accent, #8774E1) 45%, transparent) !important;
    outline: none !important;
}
#xam-text-input-sheet .xam-confirm-sheet-btn {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    transform: none !important;
}
#xam-text-input-sheet .xam-confirm-sheet-btn--secondary {
    grid-area: cancel !important;
    justify-self: end !important;
    color: var(--xam-ui-accent, #8774E1) !important;
}
#xam-text-input-sheet .xam-confirm-sheet-btn--primary {
    grid-area: confirm !important;
    justify-self: end !important;
    color: var(--xam-ui-accent, #8774E1) !important;
    background: transparent !important;
    background-color: transparent !important;
}
#xam-text-input-sheet .xam-confirm-sheet-btn--secondary:hover,
#xam-text-input-sheet .xam-confirm-sheet-btn--primary:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}
body.theme-light #xam-text-input-sheet .xam-confirm-sheet-panel {
    background: #ffffff !important;
}
body.theme-light #xam-text-input-sheet .xam-confirm-sheet-title {
    color: #1c1b22 !important;
}
body.theme-light #xam-text-input-sheet .xam-confirm-sheet-input {
    background: #f0f1f3 !important;
    color: #1c1b22 !important;
    box-shadow: none !important;
}
body.theme-light #xam-text-input-sheet .xam-confirm-sheet-input:focus {
    background: #e8e9eb !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--xam-ui-accent, #8774E1) 40%, transparent) !important;
}

/* ПК: прочие confirm-sheets — компактная карточка по центру */
@media (min-width: 769px) {
    .xam-confirm-sheet {
        align-items: center !important;
        padding: 24px !important;
    }
    .xam-confirm-sheet-panel {
        max-width: 380px !important;
        width: 100% !important;
        margin: 0 auto !important;
        border-radius: 22px !important;
        padding: 22px 20px 18px !important;
        transform: translate3d(0, 12px, 0) scale(0.98);
        opacity: 0;
        transition: transform 0.22s ease, opacity 0.22s ease !important;
    }
    .xam-confirm-sheet--open .xam-confirm-sheet-panel {
        transform: translate3d(0, 0, 0) scale(1) !important;
        opacity: 1 !important;
    }

    /* FAB: пилюля Flow+карандаш как на телефоне */
    .sidebar-compose-fab-wrap,
    .sidebar-compose-fab-wrap.desktop-only {
        overflow: visible !important;
        width: auto !important;
        height: 56px !important;
    }
    .sidebar-compose-duo {
        display: inline-flex !important;
        align-items: center !important;
        height: 56px !important;
        padding: 0 0 0 4px !important;
        border-radius: 999px !important;
        background: #171717 !important;
    }
    .sidebar-compose-duo-flow {
        display: inline-flex !important;
    }
    .sidebar-compose-fab.desktop-only,
    #fab-new-chat-desktop {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        background: var(--xam-ui-accent, #8774E1) !important;
    }
}

/* ===== Музыка в профиле ===== */
.profile-music-card {
    --profile-music-accent: #8a8a8a;
    --profile-music-play: 40px;
    --profile-music-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    display: block;
    width: calc(100% - 32px);
    max-width: 100%;
    margin: 0 16px 14px;
    padding: 8px 112px 8px 8px;
    box-sizing: border-box;
    border-radius: 16px;
    background: #212121;
    border: none;
    height: 56px;
    flex-shrink: 0;
    overflow: hidden;
    transition: height 0.46s var(--profile-music-ease), padding 0.46s var(--profile-music-ease);
}
.profile-music-card.hidden,
.profile-music-card[hidden] {
    display: none !important;
}
.profile-music-card.is-expanded {
    height: 110px;
    padding-right: 56px;
}
.profile-music-cover {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-music-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-music-cover--empty {
    background: #2a2a2a;
}
.profile-music-meta {
    margin-left: 56px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: 40px;
}
.profile-music-title {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-music-duration {
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}
.profile-music-like {
    position: absolute;
    top: 8px;
    right: 56px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    min-width: 56px;
    padding: 0 14px;
    border: none;
    border-radius: 12px;
    background: #454545;
    color: #d8d8d8;
    cursor: pointer;
    font-size: 15px;
    font-weight: 650;
    transition: right 0.46s var(--profile-music-ease) 0.05s;
}
.profile-music-card.is-expanded .profile-music-like {
    right: 8px;
}
.profile-music-like.is-liked {
    background: #c45c5c;
    color: #fff;
}
.profile-music-like-count {
    line-height: 1;
}
.profile-music-like-icon {
    display: block;
    width: 18px;
    height: 18px;
}
.profile-music-like-shatter-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 60050;
}
.profile-music-like-shard {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    padding: 0 14px;
    border-radius: 12px;
    background: #454545;
    color: #d8d8d8;
    font-size: 15px;
    font-weight: 650;
    overflow: hidden;
    will-change: transform, opacity;
}
.profile-music-like-shard .profile-music-like-icon {
    display: block;
    width: 18px;
    height: 18px;
}
.profile-music-play {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: var(--profile-music-play);
    height: var(--profile-music-play);
    border: none;
    border-radius: 50%;
    background: #2a2a2a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: top 0.46s var(--profile-music-ease);
}
.profile-music-card.is-expanded .profile-music-play {
    top: 62px;
}
.profile-music-play .profile-music-play-icon {
    margin-left: 2px;
}
.profile-music-play.is-playing .profile-music-play-icon {
    display: none;
}
.profile-music-play.is-playing .profile-music-pause-icon {
    display: block !important;
}
.profile-music-pause-icon.hidden {
    display: none;
}
.profile-music-progress {
    position: absolute;
    left: 8px;
    right: 56px;
    top: 74px;
    height: 22px;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    transition: opacity 0.32s ease 0.1s, transform 0.46s var(--profile-music-ease);
}
.profile-music-card.is-expanded .profile-music-progress {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.profile-music-progress-track {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 99px;
    background: rgba(232, 232, 232, 0.88);
    cursor: pointer;
    touch-action: none;
}
.profile-music-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: 99px;
    background: var(--profile-music-accent);
    transition: width 0.12s linear;
}
.profile-music-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 8px;
    height: 16px;
    margin-left: -4px;
    transform: translateY(-50%);
    border-radius: 99px;
    background: var(--profile-music-accent);
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    transition: width 0.18s ease, height 0.18s ease, margin-left 0.18s ease;
}
.profile-music-card.is-seeking .profile-music-progress-fill {
    transition: none;
}
.profile-music-card.is-seeking .profile-music-progress-thumb {
    width: 13px;
    height: 18px;
    margin-left: -6.5px;
    transition: width 0.18s ease, height 0.18s ease, margin-left 0.18s ease;
}
#chat-header-expand .profile-music-card {
    width: 100%;
    margin: 8px 0 0;
}
#user-profile-modal .profile-actions:has(+ .profile-music-card:not(.hidden):not([hidden])) {
    margin-bottom: 8px !important;
}
#user-profile-modal .profile-music-card {
    position: relative;
    z-index: 4;
}
@media (max-width: 768px) {
    #user-profile-modal .profile-music-card {
        width: calc(100% - 32px) !important;
        margin: 0 16px 14px !important;
    }
}
.account-settings-music-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
}
.account-settings-field-group--music {
    border-radius: 18px;
}
.account-settings-music-row {
    cursor: pointer;
}
.account-settings-music-value {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.account-settings-music-choose {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: #8774E1;
    color: #fff;
    font-size: 13px;
    font-weight: 650;
    line-height: 32px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.account-settings-music-choose input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 24px;
    border: 0;
    pointer-events: auto;
}
.account-settings-music-choose:hover {
    filter: brightness(1.08);
}
.account-settings-music-choose--ghost {
    background: #2a2a2a;
    color: rgba(255, 255, 255, 0.92);
}
#user-profile-modal.profile-is-deleted .profile-music-card {
    display: none !important;
}





/* === chat-list aside fix 20260827: время/галочки справа, не под превью === */
#chats-list .chat-info:has(> .chat-item-aside) {
    display: block !important;
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: 56px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#chats-list .chat-info:has(> .chat-item-aside) > .chat-info-main {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

#chats-list .chat-item-aside {
    position: absolute !important;
    top: 2px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 70px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 4 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#chats-list .chat-item-aside .chat-drum-time-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
}

#chats-list .chat-item-aside .chat-drum-time {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    max-width: 70px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#chats-list .chat-item-aside .chat-list-read,
#chats-list .chat-item-aside .chat-list-read-status {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
}

#chats-list .chat-item-aside .chat-list-read[hidden],
#chats-list .chat-item-aside .chat-list-read-status[hidden] {
    display: none !important;
}

#chats-list .chat-item-aside .chat-list-read svg,
#chats-list .chat-item-aside .chat-list-read-status svg,
#chats-list .chat-list-time-row .chat-list-read svg,
#chats-list .chat-list-time-row .chat-list-read-status svg {
    width: 15px !important;
    height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
    flex: 0 0 15px !important;
}

#chats-list .chat-item-aside .chat-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    position: static !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    #chats-list .chat-item:has(.chat-item-aside),
    #chats-list .chat-item-shell > .chat-item:has(.chat-item-aside) {
        padding-right: 58px !important;
    }

    #chats-list .chat-info:has(> .chat-item-aside) {
        padding-right: 52px !important;
    }

    #chats-list .chat-item-aside {
        top: 12px !important;
        right: 2px !important;
        max-width: 64px !important;
    }

    #chats-list .chat-item-aside .chat-drum-time {
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }

    #chats-list .chat-info-main,
    #chats-list .chat-info-top,
    #chats-list .chat-last-message,
    #chats-list .chat-name {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}