/* Аккуратная точечная кастомизация Element */

/* Не ломаем обычные сообщения */
.mx_EventTile,
.mx_EventTile_line,
.mx_EventTile_content,
.mx_MessageBubble,
.mx_BaseAvatar,
.mx_DisambiguatedProfile,
.mx_MessageTimestamp {
}

/* Карточки звонков компактнее */
.mx_EventTile.mx_EventTile_call {
    margin: 6px 0 !important;
    padding: 0 !important;
}

.mx_EventTile.mx_EventTile_call .mx_EventTile_content {
    margin: 0 !important;
    padding: 0 !important;
}

.mx_CallEvent,
.mx_VoIPCard,
.mx_GroupCallTile,
.mx_EventTile_call .mx_MessageActionBar_mask {
    max-width: 260px !important;
}

.mx_EventTile.mx_EventTile_call .mx_CallEvent,
.mx_EventTile.mx_EventTile_call .mx_VoIPCard,
.mx_EventTile.mx_EventTile_call .mx_GroupCallTile,
.mx_EventTile.mx_EventTile_call > div,
.mx_EventTile.mx_EventTile_call .mx_EventTile_line {
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}

.mx_EventTile.mx_EventTile_call .mx_BaseAvatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
}

.mx_EventTile.mx_EventTile_call .mx_DisambiguatedProfile {
    font-size: 13px !important;
    margin-bottom: 2px !important;
}

.mx_EventTile.mx_EventTile_call .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_call time,
.mx_EventTile.mx_EventTile_call .mx_EventTile_status {
    font-size: 11px !important;
    opacity: 0.75 !important;
}

.mx_EventTile.mx_EventTile_call svg,
.mx_EventTile.mx_EventTile_call .mx_ImageView,
.mx_EventTile.mx_EventTile_call .mx_E2EIcon {
    transform: scale(0.9);
}

/* Системные сообщения чуть тише */
.mx_EventTile_info {
    opacity: 0.72 !important;
}

.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile_info .mx_EventTile_content {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

/* Encryption блок компактнее */
.mx_EncryptionPanel,
.mx_EventTile.mx_EventTile_info.mx_EventTile_crypto {
    max-width: 420px !important;
    font-size: 12px !important;
}

/* Комнаты компактнее */
.mx_RoomTile {
    min-height: 42px !important;
}

/* Уменьшаем карточки звонков */
.mx_CallTile,
.mx_GroupCallTile,
.mx_VoIPCard,
.mx_EventTile_call {
    max-width: 260px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

.mx_CallTile .mx_BaseAvatar,
.mx_GroupCallTile .mx_BaseAvatar,
.mx_VoIPCard .mx_BaseAvatar,
.mx_EventTile_call .mx_BaseAvatar {
    width: 26px !important;
    height: 26px !important;
}

.mx_CallTile .mx_DisambiguatedProfile,
.mx_GroupCallTile .mx_DisambiguatedProfile,
.mx_VoIPCard .mx_DisambiguatedProfile {
    font-size: 13px !important;
}

.mx_CallTile .mx_MessageTimestamp,
.mx_GroupCallTile .mx_MessageTimestamp,
.mx_VoIPCard .mx_MessageTimestamp {
    font-size: 11px !important;
    opacity: .75 !important;
}

.mx_CallTile svg,
.mx_GroupCallTile svg,
.mx_VoIPCard svg {
    transform: scale(0.85);
}

/* Мобильные пузыри */
@media (max-width: 768px) {
    .mx_MessageBubble {
        padding: 6px 8px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
    }

    .mx_BaseAvatar {
        width: 28px !important;
        height: 28px !important;
    }

    .mx_DisambiguatedProfile {
        font-size: 13px !important;
    }

    .mx_CallTile,
    .mx_GroupCallTile,
    .mx_VoIPCard,
    .mx_EventTile_call {
        max-width: 220px !important;
        padding: 8px !important;
        font-size: 13px !important;
    }

    .mx_CallTile .mx_BaseAvatar,
    .mx_EventTile_call .mx_BaseAvatar {
        width: 30px !important;
        height: 30px !important;
    }

    .mx_CallTile .mx_DisambiguatedProfile,
    .mx_EventTile_call .mx_DisambiguatedProfile {
        font-size: 14px !important;
    }

    .mx_CallTile .mx_MessageTimestamp,
    .mx_EventTile_call .mx_MessageTimestamp {
        font-size: 12px !important;
        opacity: 0.8 !important;
    }

    .mx_CallTile svg,
    .mx_EventTile_call svg {
        transform: scale(0.8);
    }

    .mx_EventTile[data-layout="bubble"][data-owns-event="true"] .mx_MessageBubble {
        background: #dcf8c6 !important;
        border-radius: 16px !important;
        padding: 8px 12px !important;
        max-width: 75% !important;
    }

    .mx_EventTile[data-layout="bubble"]:not([data-owns-event="true"]) .mx_MessageBubble {
        background: #f1f3f4 !important;
        border-radius: 16px !important;
        padding: 8px 12px !important;
        max-width: 75% !important;
    }

    .mx_MessageBubble {
        box-shadow: none !important;
        border: none !important;
    }
}

/* Стартовый экран - скрываем лишнее */
footer,
.mx_AuthFooter,
.mx_HomePage_footer,
.mx_AuthPage_footer {
    display: none !important;
}

.mx_HomePage,
.mx_AuthPage,
.mx_AuthBody {
    background: #ffffff !important;
}

.mx_AuthBody .mx_AuthHeader,
.mx_AuthBody h1,
.mx_AuthBody h2,
.mx_HomePage_header,
.mx_HomePage_login {
    display: none !important;
}

/* Кнопка входа */
.mx_AuthPage .mx_AccessibleButton,
.mx_AuthPage .mx_Button,
.mx_AuthBody .mx_Button {
    position: relative !important;
    z-index: 5 !important;
}

.mx_HomePage_default_buttons,
.mx_HomePage_guest_signup,
.mx_HomePage_sign_in {
    margin-bottom: 0 !important;
}

/* Замена текстов */
.mx_AuthFooter {
    display: none !important;
}

.mx_Header_title {
    font-size: 0 !important;
    line-height: 0 !important;
}

.mx_Header_title::after {
    content: "Добро пожаловать в АБВГДейка Chat";
    display: block;
    font-size: 16px !important;
    line-height: 1.18 !important;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
    white-space: normal;
    max-width: 210px;
    margin: 0 auto;
}

.mx_Header_subtitle {
    font-size: 0 !important;
    line-height: 0 !important;
    text-align: center;
}

.mx_Header_subtitle::after {
    content: "Владейте своими разговорами.";
    display: block;
    font-size: 10px !important;
    line-height: 1.28 !important;
    font-weight: 500;
    color: #6b7a90;
    text-align: center;
    white-space: normal;
    max-width: 150px;
    margin: 8px auto 0;
}

/* Убираем стандартные логотипы */
.mx_Header_subtitle a,
.mx_WelcomePage_logo,
.mx_AuthHeader_logo,
.mx_Header_logo {
    display: none !important;
}

/* Кнопка входа */
.mx_ButtonLabel {
    font-size: 0 !important;
}

.mx_ButtonLabel::before {
    content: "Вход";
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    color: #ffffff;
}

.mx_Parent {
    gap: 10px;
}

/* Прячем unsupported browser toast */
.mx_ToastContainer,
.mx_Toast_toast,
.mx_Toast_title,
.mx_Toast_body,
.mx_Toast,
.mx_Toast_buttons,
.mx_Toast_icon {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ===== Финальная мобильная компоновка ===== */
@media (max-width: 900px) {
    html,
    body,
    #matrixchat,
    .mx_MatrixChat,
    .mx_MatrixChat_wrapper,
    .mx_MatrixChat_main,
    .mx_MatrixChat_middlePanel,
    .mx_MainSplit_content,
    .mx_RoomView,
    .mx_RoomView_wrapper,
    .mx_RoomView_body,
    .mx_HomePage,
    .mx_HomePage_default,
    .mx_HomePage_default_wrapper {
        background: #ffffff !important;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #matrixchat,
    .mx_MatrixChat,
    .mx_MatrixChat_wrapper,
    .mx_MatrixChat .mx_MatrixChat_wrapper,
    .mx_MatrixChat .mx_MatrixChat_SplitWrapper,
    .mx_MatrixChat .mx_MatrixChat_main,
    .mx_MatrixChat .mx_MatrixChat_middlePanel,
    .mx_RoomView,
    .mx_RoomView_body,
    .mx_RoomView_wrapper,
    .mx_MainSplit,
    .mx_MainSplit_content,
    .mx_HomePage,
    .mx_AuthPage,
    .mx_AuthBody,
    .mx_Login,
    .mx_Register,
    .mx_ServerPicker,
    .mx_ServerPicker_body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Скрываем лишние правые панели */
    .mx_RightPanel,
    .mx_RoomSummaryCard,
    .mx_ThreadPanel,
    .mx_MemberList,
    .mx_ResizeHandle {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        overflow: hidden !important;
    }

    /* Левая узкая полоса с иконками */
    .mx_SpacePanel {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        flex: 0 0 46px !important;
        overflow: hidden !important;
        padding-top: 54px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
    }

    .mx_LeftPanel_outerWrapper {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        flex: 0 0 46px !important;
        background: #ffffff !important;
        border-right: 1px solid #ececec !important;
    }

    .mx_SpaceButton,
    .mx_SpaceButton_home,
    .mx_SpaceButton_active {
        transform: scale(0.92) !important;
        margin: 6px auto !important;
    }

    .mx_UserMenu,
    .mx_SpacePanel .mx_AccessibleButton,
    .mx_SpacePanel button,
    .mx_LeftPanel_outerWrapper .mx_AccessibleButton,
    .mx_LeftPanel_outerWrapper button {
        transform: scale(0.92) !important;
    }

    /* Возвращаем список чатов */
    .mx_LeftPanel_wrapper,
    .mx_LeftPanel {
        display: block !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        flex: 0 0 150px !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    .mx_RoomList {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .mx_RoomTile {
        min-height: 38px !important;
        padding: 6px 8px !important;
    }

    .mx_RoomTile .mx_BaseAvatar {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }

    .mx_RoomTile_name,
    .mx_RoomTile_title,
    .mx_RoomTile h4 {
        font-size: 12px !important;
    }

    /* Правая часть */
    .mx_MatrixChat_main,
    .mx_MatrixChat_middlePanel,
    .mx_MainSplit_content,
    .mx_RoomView,
    .mx_RoomView_wrapper,
    .mx_RoomView_body {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        background: #ffffff !important;
    }

    .mx_RoomHeader,
    .mx_RoomHeader_wrapper,
    .mx_MessagePanel,
    .mx_TimelinePanel,
    .mx_AutoHideScrollbar,
    .mx_ScrollPanel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .mx_HomePage,
    .mx_AuthPage,
    .mx_AuthBody {
        padding: 8px !important;
        gap: 6px !important;
    }

    .mx_MessageBubble,
    .mx_EventTile,
    .mx_EventTile_content {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    * {
        -webkit-text-size-adjust: 100% !important;
    }

    /* Welcome компактный */
    .mx_HomePage,
    .mx_HomePage_default,
    .mx_HomePage_default_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .mx_HomePage_default_wrapper {
        padding: 16px 8px 12px 8px !important;
    }

    /* Логотип */
    .mx_HomePage_default_wrapper > img,
    .mx_HomePage img,
    .mx_Header img,
    .mx_Logo,
    .mx_Logo img {
        display: block !important;
        max-width: 110px !important;
        height: auto !important;
        margin: 0 auto 10px !important;
    }

    /* Заголовок */
    .mx_HomePage_default_wrapper > h1,
    .mx_Header_title::after {
        font-size: 14px !important;
        line-height: 1.16 !important;
        max-width: 170px !important;
        margin: 0 auto !important;
        text-align: center !important;
        color: #1f2937 !important;
    }

    /* Подзаголовок */
    .mx_HomePage_default_wrapper > h2,
    .mx_Header_subtitle::after {
        font-size: 10px !important;
        line-height: 1.28 !important;
        max-width: 145px !important;
        margin: 7px auto 0 !important;
        text-align: center !important;
        color: #6b7a90 !important;
    }

    /* Маленькие кнопки в ряд */
    .mx_HomePage_default_buttons {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 250px !important;
        margin: 14px auto 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .mx_HomePage_default_buttons > .mx_AccessibleButton,
    .mx_HomePage_button_sendDm,
    .mx_HomePage_button_explore,
    .mx_HomePage_button_createGroup {
        position: relative !important;
        width: 78px !important;
        height: 46px !important;
        min-width: 78px !important;
        min-height: 46px !important;
        border-radius: 12px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 0 !important;
        line-height: 0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
        transition: transform .2s ease !important;
        overflow: hidden !important;
    }

    .mx_HomePage_default_buttons > *:active {
        transform: scale(0.97) !important;
    }

    .mx_HomePage_button_sendDm {
        background: linear-gradient(135deg, #36a9ff, #1e88e5) !important;
    }

    .mx_HomePage_button_explore {
        background: linear-gradient(135deg, #ff9f2e, #ff7043) !important;
    }

    .mx_HomePage_button_createGroup {
        background: linear-gradient(135deg, #4caf50, #2e7d32) !important;
    }

    /* Иконки внутри трёх кнопок скрываем */
    .mx_HomePage_button_sendDm svg,
    .mx_HomePage_button_explore svg,
    .mx_HomePage_button_createGroup svg,
    .mx_HomePage_default_buttons > .mx_AccessibleButton svg {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
    }

    /* Подписи кнопок */
    .mx_HomePage_button_sendDm::after {
        content: "Личное";
    }

    .mx_HomePage_button_explore::after {
        content: "Комнаты";
    }

    .mx_HomePage_button_createGroup::after {
        content: "Создать";
    }

    .mx_HomePage_button_sendDm::after,
    .mx_HomePage_button_explore::after,
    .mx_HomePage_button_createGroup::after {
        display: block !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        text-align: center !important;
        margin: 0 !important;
    }
}