:root {
    --rechat-accent: #ff244f;
    --rechat-accent-hover: #ff4068;
    --rechat-text: #f5f5f7;
    --rechat-muted: #9ea3ad;
    --rechat-border: rgba(255, 255, 255, 0.08);
    --rechat-panel: rgba(14, 14, 18, 0.78);
    --rechat-bg: #08090c;
}

@keyframes rechatGridShift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(8px, 4px, 0); }
}

@keyframes rechatWave {
    0%, 100% { transform: translateX(-4%) translateY(0) scale(1); }
    50% { transform: translateX(4%) translateY(-1%) scale(1.02); }
}

.rechat-inline-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 4px 0 10px;
}

.rechat-inline-brand img {
    width: 28px;
    height: 28px;
    display: block;
    object-fit: contain;
}

.rechat-inline-brand span {
    color: var(--rechat-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.mx_LeftPanel_userHeader > .rechat-inline-brand {
    padding: 0 2px 14px;
}

.mx_RoomHeader_infoWrapper > .rechat-inline-brand {
    margin-right: 12px;
    padding: 0;
    flex: 0 0 auto;
}

.mx_RoomHeader_infoWrapper > .rechat-inline-brand img {
    width: 22px;
    height: 22px;
}

.mx_RoomHeader_infoWrapper > .rechat-inline-brand span {
    font-size: 14px;
    font-weight: 700;
    color: var(--rechat-muted);
}


.rechat-auth-brand {
    display: flex;
    justify-content: center;
    margin: 0 auto 18px;
}

.rechat-auth-brand img {
    width: 172px;
    max-width: 78%;
    height: auto;
    display: block;
}

.mx_AuthPage_modal {
    width: min(100vw - 40px, 460px) !important;
    max-width: 460px !important;
    background: transparent !important;
    margin: auto !important;
    border-radius: 30px !important;
    border: 1px solid var(--rechat-border);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42);
}

.mx_AuthPage_modalContent {
    display: block !important;
    width: 100% !important;
    border-radius: inherit;
    overflow: hidden;
}

.mx_AuthBody {
    width: 100% !important;
    max-width: 460px !important;
    min-width: 0 !important;
    padding: 38px 28px 30px !important;
    background: rgba(14, 14, 18, 0.88) !important;
    border-radius: 30px !important;
    backdrop-filter: none !important;
    color: var(--rechat-text) !important;
    box-sizing: border-box !important;
}

.mx_AuthBody h1 {
    color: var(--rechat-text) !important;
    font-size: 22px !important;
    line-height: 1.14;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 0 14px !important;
}

.mx_AuthBody form,
.mx_AuthBody .mx_AuthBody_fieldRow,
.mx_AuthBody .mx_Field {
    width: 100% !important;
}

.mx_AuthBody .mx_AuthBody_fieldRow {
    display: block !important;
    margin-bottom: 12px !important;
}

.mx_AuthBody .mx_Field input,
.mx_AuthBody .mx_Field select,
.mx_AuthBody .mx_Field textarea {
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

.mx_AuthBody .mx_Login_submit,
.mx_AuthBody .mx_AccessibleButton_kind_primary,
.mx_AuthBody button.mx_AccessibleButton_kind_primary {
    width: 100% !important;
    min-height: 50px !important;
    margin-top: 10px !important;
    border-radius: 16px !important;
}

.mx_AuthBody .mx_AuthBody_changeFlow {
    margin-top: 16px !important;
    text-align: center !important;
}

@media (max-width: 520px) {
    .mx_AuthPage_modal {
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        border-radius: 24px !important;
    }

    .mx_AuthBody {
        padding: 28px 18px 22px !important;
        border-radius: 24px !important;
    }
}


.mx_AuthFooter,
.mx_AuthPage .mx_AuthFooter,
.mx_WelcomePage .mx_AuthFooter,
.mx_WelcomePage ~ .mx_AuthFooter {
    display: none !important;
}


.mx_AuthPage {
    position: fixed !important;
    inset: 0 !important;
    min-height: 100vh !important;
    width: 100vw !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 16% 30%, rgba(255, 36, 79, 0.12), transparent 30%),
        radial-gradient(circle at 84% 72%, rgba(255, 36, 79, 0.10), transparent 28%),
        linear-gradient(180deg, #090a0e 0%, #06070a 100%) !important;
}

.mx_AuthPage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.13) 1px, transparent 1.2px);
    background-size: 22px 22px;
    opacity: 0.22;
    animation: rechatGridShift 28s linear infinite;
    pointer-events: none;
}

.mx_AuthHeader,
.mx_AuthHeaderLogo,
.mx_AuthPage .mx_AuthHeader,
.mx_AuthPage aside.mx_AuthHeaderLogo,
.mx_AuthFooter,
.mx_AuthPage .mx_AuthFooter,
.mx_WelcomePage .mx_AuthFooter,
.mx_WelcomePage ~ .mx_AuthFooter {
    display: none !important;
}

.mx_AuthPage_modal {
    position: relative !important;
    z-index: 2 !important;
    width: min(100vw - 40px, 460px) !important;
    max-width: 460px !important;
    margin: auto !important;
    background: transparent !important;
    border-radius: 30px !important;
    border: 1px solid var(--rechat-border) !important;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42) !important;
}

.mx_AuthPage_modalContent {
    display: block !important;
    width: 100% !important;
    border-radius: inherit !important;
    overflow: hidden !important;
}

.mx_AuthBody {
    width: 100% !important;
    max-width: 460px !important;
    min-width: 0 !important;
    padding: 38px 28px 30px !important;
    background: rgba(14, 14, 18, 0.92) !important;
    border-radius: 30px !important;
    color: var(--rechat-text) !important;
    box-sizing: border-box !important;
}

.mx_AuthBody hr {
    border-color: rgba(255, 255, 255, 0.08) !important;
    opacity: 0.6;
}

.mx_AuthBody form,
.mx_AuthBody .mx_AuthBody_fieldRow,
.mx_AuthBody .mx_Field {
    width: 100% !important;
}

.mx_AuthBody .mx_AuthBody_fieldRow {
    display: block !important;
    margin-bottom: 12px !important;
}

.mx_AuthBody .mx_Field input,
.mx_AuthBody .mx_Field select,
.mx_AuthBody .mx_Field textarea {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

.mx_AuthBody [type="submit"],
.mx_AuthBody button[type="submit"],
.mx_AuthBody .mx_AccessibleButton_kind_primary,
.mx_AuthBody button.mx_AccessibleButton_kind_primary,
.mx_AuthBody .mx_Login_submit,
.mx_AuthBody .mx_Login_fullWidthButton {
    width: 100% !important;
    min-height: 50px !important;
    margin-top: 10px !important;
    background: var(--rechat-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.mx_AuthBody [type="submit"]:hover,
.mx_AuthBody button[type="submit"]:hover,
.mx_AuthBody .mx_AccessibleButton_kind_primary:hover,
.mx_AuthBody .mx_Login_submit:hover,
.mx_AuthBody .mx_Login_fullWidthButton:hover {
    background: var(--rechat-accent-hover) !important;
}

.mx_Login_underlinedServerName,
.mx_ServerPicker,
.mx_Login_type_container {
    display: none !important;
}

/* Rechat auth form stabilization: prevent stacked fields from overlapping */
.mx_AuthBody form {
    display: block !important;
}

.mx_AuthBody .mx_AuthBody_fieldRow {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 0 14px !important;
    width: 100% !important;
}

.mx_AuthBody .mx_AuthBody_fieldRow > .mx_Field,
.mx_AuthBody .mx_Field {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

.mx_AuthBody .mx_Field label,
.mx_AuthBody .mx_Field_labelAlwaysTopLeft label {
    display: none !important;
}

.mx_AuthBody .mx_Field input,
.mx_AuthBody .mx_Field select,
.mx_AuthBody .mx_Field textarea {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    line-height: 1.2 !important;
}

.mx_AuthBody .mx_Field input::placeholder,
.mx_AuthBody .mx_Field textarea::placeholder {
    color: rgba(255, 255, 255, 0.42) !important;
    opacity: 1 !important;
}

.mx_AuthBody .mx_Login_submit,
.mx_AuthBody [type=submit],
.mx_AuthBody button[type=submit] {
    margin-top: 6px !important;
}

/* Rechat auth field polish: single border and cleaner spacing */
.mx_AuthBody .mx_Field,
.mx_AuthBody .mx_AuthBody_fieldRow > .mx_Field {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.mx_AuthBody .mx_AuthBody_fieldRow {
    gap: 16px !important;
    margin: 0 0 16px !important;
}

.mx_AuthBody .mx_Field input,
.mx_AuthBody .mx_Field select,
.mx_AuthBody .mx_Field textarea {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    outline: none !important;
}

.mx_AuthBody .mx_Field input:focus,
.mx_AuthBody .mx_Field select:focus,
.mx_AuthBody .mx_Field textarea:focus {
    border-color: rgba(124, 180, 255, 0.72) !important;
    box-shadow: 0 0 0 1px rgba(124, 180, 255, 0.18) !important;
}

/* Final Rechat auth layout override */
.mx_AuthBody form {
    display: block !important;
}

.mx_AuthBody form > * {
    margin: 0 !important;
}

.mx_AuthBody form > * + * {
    margin-top: 18px !important;
}

.mx_AuthBody .mx_AuthBody_fieldRow {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin: 0 !important;
}

.mx_AuthBody .mx_AuthBody_fieldRow > * {
    margin: 0 !important;
}

.mx_AuthBody .mx_Field,
.mx_AuthBody .mx_AuthBody_fieldRow > .mx_Field {
    display: block !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.mx_AuthBody .mx_Field + .mx_Field,
.mx_AuthBody .mx_AuthBody_fieldRow + .mx_AuthBody_fieldRow,
.mx_AuthBody .mx_AuthBody_fieldRow + .mx_Field,
.mx_AuthBody .mx_Field + .mx_AuthBody_fieldRow {
    margin-top: 18px !important;
}

.mx_AuthBody .mx_Field input,
.mx_AuthBody .mx_Field select,
.mx_AuthBody .mx_Field textarea {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.mx_AuthBody .mx_Login_submit,
.mx_AuthBody [type=submit],
.mx_AuthBody button[type=submit] {
    margin-top: 8px !important;
}

/* Hard spacing fallback for auth inputs */
.mx_AuthBody .mx_Field {
    margin: 0 0 18px !important;
}

.mx_AuthBody .mx_Field:last-child {
    margin-bottom: 0 !important;
}

.mx_AuthBody .mx_Login_submit,
.mx_AuthBody [type=submit],
.mx_AuthBody button[type=submit] {
    margin-top: 12px !important;
}

/* Stronger auth spacing */
.mx_AuthBody .mx_Field {
    margin: 0 0 24px !important;
}

.mx_AuthBody .mx_Field:last-child {
    margin-bottom: 0 !important;
}

.mx_AuthBody form > * + * {
    margin-top: 24px !important;
}

.mx_AuthBody .mx_AuthBody_fieldRow,
.mx_AuthBody .mx_AuthBody_fieldRow + .mx_AuthBody_fieldRow,
.mx_AuthBody .mx_AuthBody_fieldRow + .mx_Field,
.mx_AuthBody .mx_Field + .mx_AuthBody_fieldRow {
    gap: 24px !important;
    margin-top: 24px !important;
}

/* Auth error cleanup and larger spacing */
.mx_AuthBody .mx_Login_smallError {
    display: none !important;
}

.mx_AuthBody .mx_Field {
    margin: 0 0 32px !important;
}

.mx_AuthBody .mx_Field:last-child {
    margin-bottom: 0 !important;
}

.mx_AuthBody form > * + * {
    margin-top: 32px !important;
}

.mx_AuthBody .mx_AuthBody_fieldRow,
.mx_AuthBody .mx_AuthBody_fieldRow + .mx_AuthBody_fieldRow,
.mx_AuthBody .mx_AuthBody_fieldRow + .mx_Field,
.mx_AuthBody .mx_Field + .mx_AuthBody_fieldRow {
    gap: 32px !important;
    margin-top: 32px !important;
}

/* Extra auth spacing requested */
.mx_AuthBody .mx_Field {
    margin: 0 0 40px !important;
}

.mx_AuthBody .mx_Field:last-child {
    margin-bottom: 0 !important;
}

.mx_AuthBody form > * + * {
    margin-top: 40px !important;
}

.mx_AuthBody .mx_AuthBody_fieldRow,
.mx_AuthBody .mx_AuthBody_fieldRow + .mx_AuthBody_fieldRow,
.mx_AuthBody .mx_AuthBody_fieldRow + .mx_Field,
.mx_AuthBody .mx_Field + .mx_AuthBody_fieldRow {
    gap: 40px !important;
    margin-top: 40px !important;
}
/* Rechat security verification dialog */
.mx_AuthPage_modal.rechat-security-active {
    width: min(100vw - 40px, 520px) !important;
    max-width: 520px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.mx_AuthPage_modal.rechat-security-active .mx_AuthPage_modalContent {
    overflow: visible !important;
}

.mx_AuthPage_modal.rechat-security-active .mx_Dialog_border {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 28px 28px 24px !important;
    border-radius: 30px !important;
    border: 1px solid var(--rechat-border) !important;
    background: rgba(14, 14, 18, 0.94) !important;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42) !important;
    overflow: hidden !important;
}

.mx_AuthPage_modal.rechat-security-active .mx_CompleteSecurity_header {
    position: relative !important;
    min-height: 24px !important;
    margin: 0 0 10px !important;
}

.mx_AuthPage_modal.rechat-security-active .mx_CompleteSecurity_skip {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}

.mx_AuthPage_modal.rechat-security-active .mx_CompleteSecurity_body,
.mx_AuthPage_modal.rechat-security-active .mx_SetupEncryptionBody,
.mx_AuthPage_modal.rechat-security-active .mx_EncryptionCard {
    width: 100% !important;
    max-width: none !important;
}

.mx_AuthPage_modal.rechat-security-active .mx_EncryptionCard_header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
    text-align: center !important;
}

.mx_AuthPage_modal.rechat-security-active .mx_EncryptionCard_header > div:first-child {
    display: grid !important;
    place-items: center !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.mx_AuthPage_modal.rechat-security-active .mx_EncryptionCard_header h2 {
    margin: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

.mx_AuthPage_modal.rechat-security-active .mx_EncryptionCard_emphasisedContent {
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 20px !important;
}

.mx_AuthPage_modal.rechat-security-active .mx_EncryptionCard_emphasisedContent span {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.mx_AuthPage_modal.rechat-security-active .mx_EncryptionCard_buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 8px !important;
}

.mx_AuthPage_modal.rechat-security-active .mx_EncryptionCard_buttons ._button_13vu4_8 {
    width: 100% !important;
    min-height: 50px !important;
    justify-content: center !important;
    border-radius: 999px !important;
}

@media (max-width: 520px) {
    .mx_AuthPage_modal.rechat-security-active {
        width: calc(100vw - 24px) !important;
        max-width: none !important;
    }

    .mx_AuthPage_modal.rechat-security-active .mx_Dialog_border {
        padding: 22px 18px 18px !important;
        border-radius: 24px !important;
    }
}
/* Rechat home screen brand pass */
.mx_HomePage_default {
    position: relative !important;
    overflow: hidden !important;
    color: var(--rechat-text) !important;
    background:
        radial-gradient(circle at 18% 28%, rgba(255, 36, 79, 0.16), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(255, 36, 79, 0.14), transparent 26%),
        linear-gradient(180deg, #090a0e 0%, #06070a 100%) !important;
}

.mx_HomePage_default::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.13) 1px, transparent 1.2px) !important;
    background-size: 22px 22px !important;
    opacity: 0.18 !important;
    animation: rechatGridShift 28s linear infinite !important;
    pointer-events: none !important;
}

.mx_HomePage_default_wrapper {
    position: relative !important;
    z-index: 1 !important;
    width: min(100%, 920px) !important;
    padding: 56px 28px 44px !important;
    text-align: center !important;
}

.mx_HomePage_default_wrapper > img {
    width: 108px !important;
    height: 108px !important;
    margin: 0 auto 16px !important;
    display: block !important;
    object-fit: contain !important;
    filter: drop-shadow(0 14px 34px rgba(255, 36, 79, 0.22)) !important;
}

.mx_HomePage_default_wrapper > h1 {
    margin: 0 0 12px !important;
    color: var(--rechat-text) !important;
    font-size: clamp(34px, 4vw, 56px) !important;
    font-weight: 800 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.04em !important;
}

.mx_HomePage_default_wrapper > h2 {
    margin: 0 0 36px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: clamp(18px, 1.8vw, 24px) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.mx_HomePage_default_buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(190px, 1fr)) !important;
    gap: 20px !important;
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
}

.mx_HomePage_default_buttons .mx_AccessibleButton {
    min-height: 152px !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(255, 36, 79, 0.30) !important;
    background:
        linear-gradient(180deg, rgba(255, 36, 79, 0.16) 0%, rgba(255, 36, 79, 0.10) 100%) !important;
    color: var(--rechat-text) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 34px rgba(0, 0, 0, 0.24) !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

.mx_HomePage_default_buttons .mx_AccessibleButton:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255, 64, 104, 0.55) !important;
    background:
        linear-gradient(180deg, rgba(255, 36, 79, 0.24) 0%, rgba(255, 36, 79, 0.14) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 20px 42px rgba(255, 36, 79, 0.10) !important;
}

.mx_HomePage_default_buttons .mx_AccessibleButton svg {
    width: 38px !important;
    height: 38px !important;
    color: #ffd5dd !important;
    flex: 0 0 auto !important;
}

@media (max-width: 900px) {
    .mx_HomePage_default_buttons {
        grid-template-columns: 1fr !important;
        width: min(100%, 420px) !important;
    }

    .mx_HomePage_default_buttons .mx_AccessibleButton {
        min-height: 88px !important;
        padding: 20px 18px !important;
        gap: 10px !important;
    }

    .mx_HomePage_default_wrapper > img {
        width: 92px !important;
        height: 92px !important;
    }
}
/* Rechat home full-width fix */
.mx_HomePage.mx_HomePage_default {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
}

.mx_RoomView_wrapper:has(.mx_HomePage.mx_HomePage_default) {
    background:
        radial-gradient(circle at 18% 28%, rgba(255, 36, 79, 0.16), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(255, 36, 79, 0.14), transparent 26%),
        linear-gradient(180deg, #090a0e 0%, #06070a 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}

.mx_RoomView_wrapper:has(.mx_HomePage.mx_HomePage_default)::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.13) 1px, transparent 1.2px) !important;
    background-size: 22px 22px !important;
    opacity: 0.18 !important;
    animation: rechatGridShift 28s linear infinite !important;
    pointer-events: none !important;
}

.mx_HomePage_default {
    background: transparent !important;
}

.mx_HomePage_default_wrapper {
    width: min(100%, 980px) !important;
    margin: 0 auto !important;
}

.mx_HomePage_default_wrapper > img {
    width: 132px !important;
    height: 132px !important;
    margin-bottom: 18px !important;
    filter: drop-shadow(0 18px 42px rgba(255, 36, 79, 0.28)) !important;
}

@media (max-width: 900px) {
    .mx_HomePage_default_wrapper > img {
        width: 104px !important;
        height: 104px !important;
    }
}