@import url("base.css");
@import url("auth.css");
@import url("settings.css?v=settingscontrols1");
@import url("contacts.css");
@import url("calls.css");
@import url("chat.css");
@import url("dialogs.css");

.is-hidden {
    display: none !important;
}

/* Profile photo circle fix. */
.profile-photo,
#profileInitials {
    width: 92px;
    height: 92px;
    min-width: 92px;
    max-width: 92px;
    aspect-ratio: 1 / 1;
    flex: 0 0 92px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.profile-photo img,
#profileInitials img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

@media (max-width: 420px) {
    .profile-photo,
    #profileInitials {
        width: 82px;
        height: 82px;
        min-width: 82px;
        max-width: 82px;
        flex-basis: 82px;
    }
}

/* Language selector + Arabic RTL foundation. */
.language-select-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.language-select-row select {
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0 34px 0 12px;
    color: var(--text);
    background: var(--surface);
    font: inherit;
    cursor: pointer;
}

.auth-language-shell {
    width: min(420px, calc(100% - 32px));
    margin: 0 auto 12px;
    display: flex;
    justify-content: flex-end;
}

.auth-language-select-row {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 10px 28px var(--shadow);
}

.language-settings-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.settings-language-select-row {
    flex: 0 0 auto;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .screen-header,
html[dir="rtl"] .settings-section-heading,
html[dir="rtl"] .settings-preference-copy,
html[dir="rtl"] .group-member-picker-header,
html[dir="rtl"] .contact-card,
html[dir="rtl"] .conversation-details,
html[dir="rtl"] .conversation-details h2,
html[dir="rtl"] .conversation-details p,
html[dir="rtl"] #chatThreadTitle,
html[dir="rtl"] #chatThreadSubtitle {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .chat-header {
    direction: rtl;
}

html[dir="rtl"] .chat-back-button i,
html[dir="rtl"] #backToChatsButton i {
    transform: rotate(180deg);
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[name="alias"],
html[dir="rtl"] input[name="identifier"],
html[dir="rtl"] input[name="phone"],
html[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] .bottom-nav,
html[dir="rtl"] .nav-style-segmented,
html[dir="rtl"] .call-overlay,
html[dir="rtl"] .call-overlay-card,
html[dir="rtl"] .message-composer,
html[dir="rtl"] .upload-progress-copy,
html[dir="rtl"] .composer-retry-panel {
    direction: ltr;
}

html[dir="rtl"] .message-composer textarea {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .auth-language-shell {
    justify-content: flex-start;
}

@media (max-width: 520px) {
    .language-settings-card {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-language-select-row,
    .settings-language-select-row select {
        width: 100%;
    }
}

/* Stellar neon theme accents. */
:root {
    --stellar-neon: #008cff;
    --stellar-neon-2: #00c8ff;
    --stellar-neon-rgb: 0, 140, 255;
    --stellar-neon-soft: rgba(0, 140, 255, 0.18);
    --stellar-neon-glow: rgba(0, 140, 255, 0.46);
    --stellar-neon-line: rgba(0, 140, 255, 0.56);
}

html[data-theme="dark"],
body[data-theme="dark"],
html.theme-dark,
body.theme-dark,
.dark-theme,
html:not([data-theme="light"]) {
    --stellar-neon: #39d5ff;
    --stellar-neon-2: #0078ff;
    --stellar-neon-rgb: 57, 213, 255;
    --stellar-neon-soft: rgba(57, 213, 255, 0.22);
    --stellar-neon-glow: rgba(57, 213, 255, 0.62);
    --stellar-neon-line: rgba(57, 213, 255, 0.68);
}

html[data-theme="light"],
body[data-theme="light"],
html.theme-light,
body.theme-light,
.light-theme,
html.light-mode,
body.light-mode {
    --accent: #0078ff;
    --accent-2: #00b8ff;
    --primary: #0078ff;
    --button-gradient: linear-gradient(135deg, #0078ff, #00b8ff);
    --stellar-neon: #0078ff;
    --stellar-neon-2: #00b8ff;
    --stellar-neon-rgb: 0, 120, 255;
    --stellar-neon-soft: rgba(0, 120, 255, 0.16);
    --stellar-neon-glow: rgba(0, 120, 255, 0.42);
    --stellar-neon-line: rgba(0, 120, 255, 0.50);
}

#authLanguageSelect,
#settingsLanguageSelect,
#authLanguageSelect option,
#settingsLanguageSelect option {
    transition: none !important;
    animation: none !important;
}

.app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 8%, var(--stellar-neon-soft), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(var(--stellar-neon-rgb), 0.14), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(var(--stellar-neon-rgb), 0.10), transparent 42%);
}

.auth-card,
.settings-card,
.conversation-item,
.contact-card,
.group-card,
.message-composer,
.bottom-nav,
.stellar-drawer-panel,
.call-overlay-card {
    border-color: color-mix(in srgb, var(--stellar-neon-line) 58%, var(--border)) !important;
    box-shadow:
        0 18px 44px var(--shadow),
        0 0 0 1px rgba(var(--stellar-neon-rgb), 0.12),
        0 0 30px rgba(var(--stellar-neon-rgb), 0.18),
        0 0 70px rgba(var(--stellar-neon-rgb), 0.09) !important;
}

.primary-button,
.auth-submit-button,
.send-button,
.fab-button,
.nav-item.is-active,
.bottom-nav button.is-active,
.stellar-nav-item.is-active,
.nav-style-option.is-active,
.messaging-tab.is-active,
.tab-button.is-active,
button.is-active,
html[data-theme="light"] button[class*="primary"],
html[data-theme="light"] .settings-card button.is-active,
html[data-theme="light"] .nav-style-option.is-active,
html[data-theme="light"] .bottom-nav button.is-active,
html[data-theme="light"] .nav-item.is-active,
body[data-theme="light"] button[class*="primary"],
body[data-theme="light"] .settings-card button.is-active,
body[data-theme="light"] .nav-style-option.is-active,
body[data-theme="light"] .bottom-nav button.is-active,
body[data-theme="light"] .nav-item.is-active,
html.light-mode button[class*="primary"],
body.light-mode button[class*="primary"] {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.50) !important;
    box-shadow:
        0 14px 36px var(--stellar-neon-glow),
        0 0 20px rgba(var(--stellar-neon-rgb), 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.24) inset !important;
}

.primary-button i,
.auth-submit-button i,
.send-button i,
.fab-button i,
.nav-item.is-active i,
.bottom-nav button.is-active i,
.stellar-nav-item.is-active i,
.nav-style-option.is-active i,
.messaging-tab.is-active i,
.tab-button.is-active i,
button.is-active i {
    color: #ffffff !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.72));
}

html[data-theme="light"] i[class*="fa-"],
body[data-theme="light"] i[class*="fa-"],
html.theme-light i[class*="fa-"],
body.theme-light i[class*="fa-"],
.light-theme i[class*="fa-"],
html.light-mode i[class*="fa-"],
body.light-mode i[class*="fa-"] {
    color: var(--stellar-neon) !important;
}

html[data-theme="light"] .primary-button i,
html[data-theme="light"] .auth-submit-button i,
html[data-theme="light"] .send-button i,
html[data-theme="light"] .fab-button i,
html[data-theme="light"] .nav-item.is-active i,
html[data-theme="light"] .bottom-nav button.is-active i,
html[data-theme="light"] .stellar-nav-item.is-active i,
html[data-theme="light"] .nav-style-option.is-active i,
html[data-theme="light"] .messaging-tab.is-active i,
html[data-theme="light"] .tab-button.is-active i,
html[data-theme="light"] button.is-active i,
body[data-theme="light"] .primary-button i,
body[data-theme="light"] .auth-submit-button i,
body[data-theme="light"] .send-button i,
body[data-theme="light"] .fab-button i,
body[data-theme="light"] .nav-item.is-active i,
body[data-theme="light"] .bottom-nav button.is-active i,
body[data-theme="light"] .stellar-nav-item.is-active i,
body[data-theme="light"] .nav-style-option.is-active i,
body[data-theme="light"] .messaging-tab.is-active i,
body[data-theme="light"] .tab-button.is-active i,
body[data-theme="light"] button.is-active i,
html.light-mode button.is-active i,
body.light-mode button.is-active i {
    color: #ffffff !important;
}

html[data-theme="light"] .chat-header-action,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .settings-preference-icon,
html[data-theme="light"] .message-options-button,
html[data-theme="light"] .attachment-button,
html[data-theme="light"] .voice-record-button,
body[data-theme="light"] .chat-header-action,
body[data-theme="light"] .icon-button,
body[data-theme="light"] .settings-preference-icon,
body[data-theme="light"] .message-options-button,
body[data-theme="light"] .attachment-button,
body[data-theme="light"] .voice-record-button,
html.light-mode .chat-header-action,
html.light-mode .icon-button,
html.light-mode .settings-preference-icon,
html.light-mode .message-options-button,
html.light-mode .attachment-button,
html.light-mode .voice-record-button,
body.light-mode .chat-header-action,
body.light-mode .icon-button,
body.light-mode .settings-preference-icon,
body.light-mode .message-options-button,
body.light-mode .attachment-button,
body.light-mode .voice-record-button {
    color: var(--stellar-neon) !important;
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible {
    outline: none;
    border-color: var(--stellar-neon) !important;
    box-shadow:
        0 0 0 3px rgba(var(--stellar-neon-rgb), 0.18),
        0 0 28px rgba(var(--stellar-neon-rgb), 0.26) !important;
}

.screen-header h1,
.chat-header h1,
.settings-section-heading,
.auth-card h1 {
    text-shadow:
        0 0 18px rgba(var(--stellar-neon-rgb), 0.26),
        0 0 40px rgba(var(--stellar-neon-rgb), 0.13);
}

/* Remove the ghosty semi-transparent wrapper behind chat/group listings. */
#chatsScreen :is(
    .messaging-list-panel,
    .chat-list-panel,
    .conversations-panel,
    .conversation-list-shell,
    .groups-list-shell,
    .combined-chat-list,
    .combined-groups-list,
    .conversations-list,
    .groups-list
),
.chats-screen :is(
    .messaging-list-panel,
    .chat-list-panel,
    .conversations-panel,
    .conversation-list-shell,
    .groups-list-shell,
    .combined-chat-list,
    .combined-groups-list,
    .conversations-list,
    .groups-list
) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Keep actual chat/group cards styled after wrapper cleanup. */
#chatsScreen :is(.conversation-item, .group-item, .group-card),
.chats-screen :is(.conversation-item, .group-item, .group-card) {
    background: var(--card-gradient) !important;
    box-shadow:
        0 18px 44px var(--shadow),
        0 0 0 1px rgba(var(--stellar-neon-rgb), 0.12),
        0 0 30px rgba(var(--stellar-neon-rgb), 0.18),
        0 0 70px rgba(var(--stellar-neon-rgb), 0.09) !important;
}

/* Classic/Stellar setting: text on top, buttons below, centered. */
:is(.settings-card, .settings-preference-card):has(.nav-style-segmented),
.nav-style-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 16px !important;
    text-align: center !important;
}

:is(.settings-card, .settings-preference-card):has(.nav-style-segmented) .settings-preference-copy,
.nav-style-card .settings-preference-copy {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
}

:is(.settings-card, .settings-preference-card):has(.nav-style-segmented) .settings-preference-copy > span:last-child,
.nav-style-card .settings-preference-copy > span:last-child {
    min-width: 0 !important;
    max-width: min(440px, 100%) !important;
}

:is(.settings-card, .settings-preference-card):has(.nav-style-segmented) .settings-preference-copy strong,
:is(.settings-card, .settings-preference-card):has(.nav-style-segmented) .settings-preference-copy small,
.nav-style-card .settings-preference-copy strong,
.nav-style-card .settings-preference-copy small {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

:is(.settings-card, .settings-preference-card):has(.nav-style-segmented) .settings-preference-icon,
.nav-style-card .settings-preference-icon {
    margin: 0 auto !important;
}

.nav-style-segmented {
    width: min(380px, 100%) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    justify-self: center !important;
    align-self: center !important;
}

/* Light mode call history icons: white icons inside blue circles. */
:is(
    html[data-theme="light"],
    body[data-theme="light"],
    html.theme-light,
    body.theme-light,
    .light-theme,
    html.light-mode,
    body.light-mode
) :is(.calls-list, .call-history-list, .call-history-item, .call-item, [data-call-type])
:is(.call-icon, .call-type-icon, .call-row-icon) {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.42) !important;
    box-shadow:
        0 12px 30px rgba(var(--stellar-neon-rgb), 0.34),
        0 0 18px rgba(var(--stellar-neon-rgb), 0.22) !important;
}

:is(
    html[data-theme="light"],
    body[data-theme="light"],
    html.theme-light,
    body.theme-light,
    .light-theme,
    html.light-mode,
    body.light-mode
) :is(.calls-list, .call-history-list, .call-history-item, .call-item, [data-call-type])
:is(.call-icon, .call-type-icon, .call-row-icon) :is(i, svg) {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.70));
}

/* Dark mode bottom navigation icons use the neon color. */
:is(
    html[data-theme="dark"],
    body[data-theme="dark"],
    html.theme-dark,
    body.theme-dark,
    .dark-theme,
    html:not([data-theme="light"])
) .bottom-nav :is(button, .nav-item, .nav-button, .tab-button) i {
    color: var(--stellar-neon) !important;
    filter:
        drop-shadow(0 0 8px rgba(var(--stellar-neon-rgb), 0.58))
        drop-shadow(0 0 18px rgba(var(--stellar-neon-rgb), 0.26)) !important;
}

/* Blue/outgoing message bubbles get the same gradient in both themes. */
:is(
    .message-row.is-own,
    .message-row.is-mine,
    .message-row.is-outgoing,
    .message-row.outgoing,
    .message-row.sent,
    .chat-message.is-own,
    .chat-message.is-mine,
    .chat-message.is-outgoing,
    .chat-message.outgoing,
    .chat-message.sent,
    .message.is-own,
    .message.is-mine,
    .message.is-outgoing,
    .message.outgoing,
    .message.sent,
    [data-message-direction="outgoing"],
    [data-message-owner="self"],
    [data-is-own="true"]
) .message-bubble,
:is(
    .message-bubble.is-own,
    .message-bubble.is-mine,
    .message-bubble.is-outgoing,
    .message-bubble.outgoing,
    .message-bubble.sent
) {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.42) !important;
    box-shadow:
        0 12px 28px rgba(var(--stellar-neon-rgb), 0.22),
        0 0 18px rgba(var(--stellar-neon-rgb), 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.16) inset !important;
}

:is(
    .message-row.is-own,
    .message-row.is-mine,
    .message-row.is-outgoing,
    .message-row.outgoing,
    .message-row.sent,
    .chat-message.is-own,
    .chat-message.is-mine,
    .chat-message.is-outgoing,
    .chat-message.outgoing,
    .chat-message.sent,
    .message.is-own,
    .message.is-mine,
    .message.is-outgoing,
    .message.outgoing,
    .message.sent,
    [data-message-direction="outgoing"],
    [data-message-owner="self"],
    [data-is-own="true"]
) .message-bubble *,
:is(
    .message-bubble.is-own,
    .message-bubble.is-mine,
    .message-bubble.is-outgoing,
    .message-bubble.outgoing,
    .message-bubble.sent
) * {
    color: inherit !important;
}

/*
 * Chats screen ghost border/line fix.
 * This targets the large wrapper/panel around the Chats tabs/list, not the actual
 * chat cards. The previous line looked like a transparent filing cabinet.
 */
#chatsScreen,
#chatsScreen .screen-content,
#chatsScreen .screen-body,
#chatsScreen .content-panel,
#chatsScreen .screen-panel,
#chatsScreen .screen-card,
#chatsScreen .messaging-shell,
#chatsScreen .messaging-panel,
#chatsScreen .messaging-home,
#chatsScreen .messaging-list-panel,
#chatsScreen .chat-list-panel,
#chatsScreen .conversation-list-shell,
#chatsScreen .groups-list-shell,
#chatsScreen .combined-chat-list,
#chatsScreen .combined-groups-list,
.chats-screen,
.chats-screen .screen-content,
.chats-screen .screen-body,
.chats-screen .content-panel,
.chats-screen .screen-panel,
.chats-screen .screen-card,
.chats-screen .messaging-shell,
.chats-screen .messaging-panel,
.chats-screen .messaging-home,
.chats-screen .messaging-list-panel,
.chats-screen .chat-list-panel,
.chats-screen .conversation-list-shell,
.chats-screen .groups-list-shell,
.chats-screen .combined-chat-list,
.chats-screen .combined-groups-list {
    background: transparent !important;
    background-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

/*
 * Keep the actual segmented tabs and rows/cards visible.
 */
#chatsScreen :is(
    .messaging-tabs,
    .messaging-tab,
    .chat-tabs,
    .chat-tab,
    .conversation-item,
    .group-item,
    .group-card,
    .conversation-card
),
.chats-screen :is(
    .messaging-tabs,
    .messaging-tab,
    .chat-tabs,
    .chat-tab,
    .conversation-item,
    .group-item,
    .group-card,
    .conversation-card
) {
    border-color: color-mix(in srgb, var(--stellar-neon-line, rgba(0, 140, 255, 0.52)) 44%, var(--border)) !important;
}

#chatsScreen :is(.conversation-item, .group-item, .group-card, .conversation-card),
.chats-screen :is(.conversation-item, .group-item, .group-card, .conversation-card) {
    background: var(--card-gradient) !important;
    box-shadow:
        0 18px 44px var(--shadow),
        0 0 0 1px rgba(var(--stellar-neon-rgb), 0.10),
        0 0 28px rgba(var(--stellar-neon-rgb), 0.13) !important;
}

/*
 * Light mode FAB plus icon fix.
 * General light-mode icon rules turn icons blue. The plus button is filled blue,
 * so its icon must stay white unless we enjoy invisible UI treasure hunts.
 */
:is(
    html[data-theme="light"],
    body[data-theme="light"],
    html.theme-light,
    body.theme-light,
    .light-theme,
    html.light-mode,
    body.light-mode
) :is(
    .fab-button,
    .floating-action-button,
    .create-group-button,
    .new-chat-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton
) {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
}

:is(
    html[data-theme="light"],
    body[data-theme="light"],
    html.theme-light,
    body.theme-light,
    .light-theme,
    html.light-mode,
    body.light-mode
) :is(
    .fab-button,
    .floating-action-button,
    .create-group-button,
    .new-chat-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton
) :is(i, svg, .fa, .fa-solid, .plus-icon),
:is(
    html[data-theme="light"],
    body[data-theme="light"],
    html.theme-light,
    body.theme-light,
    .light-theme,
    html.light-mode,
    body.light-mode
) :is(
    .fab-button,
    .floating-action-button,
    .create-group-button,
    .new-chat-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton
)::before,
:is(
    html[data-theme="light"],
    body[data-theme="light"],
    html.theme-light,
    body.theme-light,
    .light-theme,
    html.light-mode,
    body.light-mode
) :is(
    .fab-button,
    .floating-action-button,
    .create-group-button,
    .new-chat-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton
)::after {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.72)) !important;
}

/* If the plus is plain text inside the button. */
:is(
    .fab-button,
    .floating-action-button,
    .create-group-button,
    .new-chat-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton
) {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.48) !important;
}

/*
 * Runtime marks the actual chats wrapper with .stellar-chat-shell-clean.
 * Kill the wrapper line/box, including pseudo-elements, while preserving cards.
 */
.stellar-chat-shell-clean {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.stellar-chat-shell-clean::before,
.stellar-chat-shell-clean::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* But keep actual list cards alive. We are removing the wrapper, not the furniture. */
.stellar-chat-shell-clean :is(.conversation-item, .conversation-card, .group-card, .group-item) {
    background: var(--card-gradient) !important;
    border-color: color-mix(in srgb, var(--stellar-neon-line, rgba(0, 140, 255, 0.52)) 44%, var(--border)) !important;
    box-shadow:
        0 18px 44px var(--shadow),
        0 0 0 1px rgba(var(--stellar-neon-rgb), 0.10),
        0 0 28px rgba(var(--stellar-neon-rgb), 0.13) !important;
}

/*
 * Extra brute force for the exact Chats tab/list area.
 * Some wrappers are apparently wearing fake moustaches.
 */
:is(section, main, div):has(> :is(.messaging-tabs, .chat-tabs, .chats-tabs)):has(:is(.conversation-item, .conversation-card, .group-card, .group-item)) {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

:is(section, main, div):has(> :is(.messaging-tabs, .chat-tabs, .chats-tabs)):has(:is(.conversation-item, .conversation-card, .group-card, .group-item))::before,
:is(section, main, div):has(> :is(.messaging-tabs, .chat-tabs, .chats-tabs)):has(:is(.conversation-item, .conversation-card, .group-card, .group-item))::after {
    content: none !important;
    display: none !important;
}

/* Light mode FAB plus stays white inside the blue circle. */
:is(
    html[data-theme="light"],
    body[data-theme="light"],
    html.theme-light,
    body.theme-light,
    .light-theme,
    html.light-mode,
    body.light-mode
) .stellar-fab-force-white {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
}

:is(
    html[data-theme="light"],
    body[data-theme="light"],
    html.theme-light,
    body.theme-light,
    .light-theme,
    html.light-mode,
    body.light-mode
) .stellar-fab-force-white :is(i, svg, .fa, .fa-solid),
:is(
    html[data-theme="light"],
    body[data-theme="light"],
    html.theme-light,
    body.theme-light,
    .light-theme,
    html.light-mode,
    body.light-mode
) .stellar-fab-force-white::before,
:is(
    html[data-theme="light"],
    body[data-theme="light"],
    html.theme-light,
    body.theme-light,
    .light-theme,
    html.light-mode,
    body.light-mode
) .stellar-fab-force-white::after {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Keep Chats containers clean without touching other screens. */
.app-screen[data-screen="chats"] #chatsListView,
.app-screen[data-screen="chats"] #messagingChatsPanel,
.app-screen[data-screen="chats"] #messagingGroupsPanel,
.app-screen[data-screen="chats"] #conversationsList,
.app-screen[data-screen="chats"] #groupsList {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* The visible "box" was caused by external shadows being clipped at the screen edge. */
.app-screen[data-screen="chats"] #chatsListView :is(
    .messaging-tabs,
    .conversation-item,
    .conversation-card,
    .group-conversation-item,
    .group-item,
    .group-card
) {
    box-shadow: none !important;
}

/* Restore the Chats/Groups pill without outside glow that makes the fake square. */
.app-screen[data-screen="chats"] #chatsListView .messaging-tabs {
    background: color-mix(in srgb, var(--surface-soft) 86%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--stellar-neon-line, rgba(0, 140, 255, 0.52)) 30%, var(--border)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--stellar-neon-rgb), 0.06) !important;
}

/* Active Chats/Groups tab keeps gradient, but no outside shadow bleeding into a rectangle. */
.app-screen[data-screen="chats"] #chatsListView .messaging-tab-button.is-active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.42) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        inset 0 -8px 20px rgba(0, 0, 0, 0.08) !important;
}

.app-screen[data-screen="chats"] #chatsListView .messaging-tab-button.is-active :is(i, svg, span) {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Restore real chat/group cards with border/inset only, no big outside shadow wall. */
.app-screen[data-screen="chats"] #chatsListView :is(
    .conversation-item,
    .conversation-card,
    .group-conversation-item,
    .group-item,
    .group-card
) {
    background: var(--card-gradient) !important;
    border: 1px solid color-mix(in srgb, var(--stellar-neon-line, rgba(0, 140, 255, 0.52)) 36%, var(--border)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--stellar-neon-rgb), 0.05) !important;
}

/* Keep some separation between list cards without a huge shadow column. */
.app-screen[data-screen="chats"] #chatsListView :is(.conversations-list, .groups-list) {
    gap: 14px !important;
}

/* Floating plus button, both light and dark: same gradient as primary buttons, white plus. */
:is(
    .groups-create-button,
    .fab-button,
    .floating-action-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton,
    button[aria-label*="create" i],
    button[aria-label*="add" i],
    button[title*="create" i],
    button[title*="add" i]
) {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    background-color: var(--stellar-neon) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.48) !important;
    box-shadow:
        0 16px 38px rgba(var(--stellar-neon-rgb), 0.36),
        0 0 24px rgba(var(--stellar-neon-rgb), 0.20),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
}

:is(
    .groups-create-button,
    .fab-button,
    .floating-action-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton,
    button[aria-label*="create" i],
    button[aria-label*="add" i],
    button[title*="create" i],
    button[title*="add" i]
),
:is(
    .groups-create-button,
    .fab-button,
    .floating-action-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton,
    button[aria-label*="create" i],
    button[aria-label*="add" i],
    button[title*="create" i],
    button[title*="add" i]
) :is(i, svg, span, .fa, .fa-solid),
:is(
    .groups-create-button,
    .fab-button,
    .floating-action-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton,
    button[aria-label*="create" i],
    button[aria-label*="add" i],
    button[title*="create" i],
    button[title*="add" i]
)::before,
:is(
    .groups-create-button,
    .fab-button,
    .floating-action-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton,
    button[aria-label*="create" i],
    button[aria-label*="add" i],
    button[title*="create" i],
    button[title*="add" i]
)::after {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Calls history icons: gradient circles in dark mode too, white icons. */
html[data-theme="dark"] .calls-list .call-icon,
body[data-theme="dark"] .calls-list .call-icon,
html.theme-dark .calls-list .call-icon,
body.theme-dark .calls-list .call-icon,
.dark-theme .calls-list .call-icon,
html:not([data-theme="light"]) .calls-list .call-icon {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.42) !important;
    box-shadow:
        0 12px 30px rgba(var(--stellar-neon-rgb), 0.28),
        0 0 18px rgba(var(--stellar-neon-rgb), 0.18) !important;
}

html[data-theme="dark"] .calls-list .call-icon :is(i, svg),
body[data-theme="dark"] .calls-list .call-icon :is(i, svg),
html.theme-dark .calls-list .call-icon :is(i, svg),
body.theme-dark .calls-list .call-icon :is(i, svg),
.dark-theme .calls-list .call-icon :is(i, svg),
html:not([data-theme="light"]) .calls-list .call-icon :is(i, svg) {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Clean the chat thread wrappers only. */
:is(
    #chatThreadView,
    #chatThread,
    #chatMessagesPanel,
    #messagesPanel,
    #messagesList,
    #chatMessages,
    .chat-thread-view,
    .chat-thread,
    .messages-list,
    .chat-messages,
    .messages-panel
) {
    background-color: transparent !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

:is(
    #chatThreadView,
    #chatThread,
    #chatMessagesPanel,
    #messagesPanel,
    #messagesList,
    #chatMessages,
    .chat-thread-view,
    .chat-thread,
    .messages-list,
    .chat-messages,
    .messages-panel
)::before,
:is(
    #chatThreadView,
    #chatThread,
    #chatMessagesPanel,
    #messagesPanel,
    #messagesList,
    #chatMessages,
    .chat-thread-view,
    .chat-thread,
    .messages-list,
    .chat-messages,
    .messages-panel
)::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Remove external glow/shadow from message rows and bubbles so it does not draw a fake box at the screen edge. */
:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-row,
    .chat-message,
    .message,
    .message-bubble,
    .message-content,
    .attachment-message,
    .voice-message,
    .location-message
) {
    box-shadow: none !important;
}

/* Incoming bubbles/cards keep shape and border, but use inset only. */
:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-bubble,
    .message-content
):not(.is-own):not(.is-mine):not(.is-outgoing):not(.outgoing):not(.sent) {
    border-color: color-mix(in srgb, var(--stellar-neon-line, rgba(0, 140, 255, 0.52)) 24%, var(--border)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--stellar-neon-rgb), 0.04) !important;
}

/* Outgoing blue bubbles keep the gradient, but lose the external glow that makes the square. */
:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-row.is-own,
    .message-row.is-mine,
    .message-row.is-outgoing,
    .message-row.outgoing,
    .message-row.sent,
    .chat-message.is-own,
    .chat-message.is-mine,
    .chat-message.is-outgoing,
    .chat-message.outgoing,
    .chat-message.sent,
    .message.is-own,
    .message.is-mine,
    .message.is-outgoing,
    .message.outgoing,
    .message.sent,
    [data-message-direction="outgoing"],
    [data-message-owner="self"],
    [data-is-own="true"]
) :is(.message-bubble, .message-content),
:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-bubble.is-own,
    .message-bubble.is-mine,
    .message-bubble.is-outgoing,
    .message-bubble.outgoing,
    .message-bubble.sent
) {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.42) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        inset 0 -8px 20px rgba(0, 0, 0, 0.08) !important;
}

:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-row.is-own,
    .message-row.is-mine,
    .message-row.is-outgoing,
    .message-row.outgoing,
    .message-row.sent,
    .chat-message.is-own,
    .chat-message.is-mine,
    .chat-message.is-outgoing,
    .chat-message.outgoing,
    .chat-message.sent,
    .message.is-own,
    .message.is-mine,
    .message.is-outgoing,
    .message.outgoing,
    .message.sent,
    [data-message-direction="outgoing"],
    [data-message-owner="self"],
    [data-is-own="true"]
) :is(.message-bubble, .message-content) *,
:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-bubble.is-own,
    .message-bubble.is-mine,
    .message-bubble.is-outgoing,
    .message-bubble.outgoing,
    .message-bubble.sent
) * {
    color: inherit !important;
}

/* Composer keeps shape, but no big outer glow clipping into a rectangular edge. */
:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-composer,
    .chat-composer,
    .composer,
    .input-composer,
    .message-input-bar
) {
    border-color: color-mix(in srgb, var(--stellar-neon-line, rgba(0, 140, 255, 0.52)) 28%, var(--border)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--stellar-neon-rgb), 0.05) !important;
}

/* Keep send/voice/attach buttons pretty and readable after shadow cleanup. */
:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .send-button,
    .voice-record-button.is-recording,
    .composer-send-button
) {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.42) !important;
    box-shadow:
        0 10px 24px rgba(var(--stellar-neon-rgb), 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}

:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .send-button,
    .voice-record-button.is-recording,
    .composer-send-button
) :is(i, svg) {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Stellar visual canonical cleanup 14.
   Keep only the working visual fixes:
   - Chats list clipped shadow fix
   - Open chat clipped shadow fix
   - FAB plus gradient
   - Calls history icon gradient
   No runtime box-hunting scripts. No screen-wide vandalism. */

/* --- Chats list exact shadow fix --- */

.app-screen[data-screen="chats"] #chatsListView,
.app-screen[data-screen="chats"] #messagingChatsPanel,
.app-screen[data-screen="chats"] #messagingGroupsPanel,
.app-screen[data-screen="chats"] #conversationsList,
.app-screen[data-screen="chats"] #groupsList {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.app-screen[data-screen="chats"] #chatsListView :is(
    .messaging-tabs,
    .conversation-item,
    .conversation-card,
    .group-conversation-item,
    .group-item,
    .group-card
) {
    box-shadow: none !important;
}

.app-screen[data-screen="chats"] #chatsListView .messaging-tabs {
    background: color-mix(in srgb, var(--surface-soft) 86%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--stellar-neon-line, rgba(0, 140, 255, 0.52)) 30%, var(--border)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--stellar-neon-rgb), 0.06) !important;
}

.app-screen[data-screen="chats"] #chatsListView .messaging-tab-button.is-active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.42) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        inset 0 -8px 20px rgba(0, 0, 0, 0.08) !important;
}

.app-screen[data-screen="chats"] #chatsListView .messaging-tab-button.is-active :is(i, svg, span) {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.app-screen[data-screen="chats"] #chatsListView :is(
    .conversation-item,
    .conversation-card,
    .group-conversation-item,
    .group-item,
    .group-card
) {
    background: var(--card-gradient) !important;
    border: 1px solid color-mix(in srgb, var(--stellar-neon-line, rgba(0, 140, 255, 0.52)) 36%, var(--border)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--stellar-neon-rgb), 0.05) !important;
}

.app-screen[data-screen="chats"] #chatsListView :is(.conversations-list, .groups-list) {
    gap: 14px !important;
}

/* --- Open chat exact shadow fix --- */

:is(
    #chatThreadView,
    #chatThread,
    #chatMessagesPanel,
    #messagesPanel,
    #messagesList,
    #chatMessages,
    .chat-thread-view,
    .chat-thread,
    .messages-list,
    .chat-messages,
    .messages-panel
) {
    background-color: transparent !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

:is(
    #chatThreadView,
    #chatThread,
    #chatMessagesPanel,
    #messagesPanel,
    #messagesList,
    #chatMessages,
    .chat-thread-view,
    .chat-thread,
    .messages-list,
    .chat-messages,
    .messages-panel
)::before,
:is(
    #chatThreadView,
    #chatThread,
    #chatMessagesPanel,
    #messagesPanel,
    #messagesList,
    #chatMessages,
    .chat-thread-view,
    .chat-thread,
    .messages-list,
    .chat-messages,
    .messages-panel
)::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-row,
    .chat-message,
    .message,
    .message-bubble,
    .message-content,
    .attachment-message,
    .voice-message,
    .location-message
) {
    box-shadow: none !important;
}

:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-bubble,
    .message-content
):not(.is-own):not(.is-mine):not(.is-outgoing):not(.outgoing):not(.sent) {
    border-color: color-mix(in srgb, var(--stellar-neon-line, rgba(0, 140, 255, 0.52)) 24%, var(--border)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--stellar-neon-rgb), 0.04) !important;
}

:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-row.is-own,
    .message-row.is-mine,
    .message-row.is-outgoing,
    .message-row.outgoing,
    .message-row.sent,
    .chat-message.is-own,
    .chat-message.is-mine,
    .chat-message.is-outgoing,
    .chat-message.outgoing,
    .chat-message.sent,
    .message.is-own,
    .message.is-mine,
    .message.is-outgoing,
    .message.outgoing,
    .message.sent,
    [data-message-direction="outgoing"],
    [data-message-owner="self"],
    [data-is-own="true"]
) :is(.message-bubble, .message-content),
:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-bubble.is-own,
    .message-bubble.is-mine,
    .message-bubble.is-outgoing,
    .message-bubble.outgoing,
    .message-bubble.sent
) {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.42) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        inset 0 -8px 20px rgba(0, 0, 0, 0.08) !important;
}

:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-row.is-own,
    .message-row.is-mine,
    .message-row.is-outgoing,
    .message-row.outgoing,
    .message-row.sent,
    .chat-message.is-own,
    .chat-message.is-mine,
    .chat-message.is-outgoing,
    .chat-message.outgoing,
    .chat-message.sent,
    .message.is-own,
    .message.is-mine,
    .message.is-outgoing,
    .message.outgoing,
    .message.sent,
    [data-message-direction="outgoing"],
    [data-message-owner="self"],
    [data-is-own="true"]
) :is(.message-bubble, .message-content) *,
:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-bubble.is-own,
    .message-bubble.is-mine,
    .message-bubble.is-outgoing,
    .message-bubble.outgoing,
    .message-bubble.sent
) * {
    color: inherit !important;
}

:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .message-composer,
    .chat-composer,
    .composer,
    .input-composer,
    .message-input-bar
) {
    border-color: color-mix(in srgb, var(--stellar-neon-line, rgba(0, 140, 255, 0.52)) 28%, var(--border)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--stellar-neon-rgb), 0.05) !important;
}

:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .send-button,
    .voice-record-button.is-recording,
    .composer-send-button
) {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.42) !important;
    box-shadow:
        0 10px 24px rgba(var(--stellar-neon-rgb), 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}

:is(
    #chatThreadView,
    #chatThread,
    .chat-thread-view,
    .chat-thread
) :is(
    .send-button,
    .voice-record-button.is-recording,
    .composer-send-button
) :is(i, svg) {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* --- Floating plus button: gradient both themes, white plus --- */

:is(
    .groups-create-button,
    .fab-button,
    .floating-action-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton,
    button[aria-label*="create" i],
    button[aria-label*="add" i],
    button[title*="create" i],
    button[title*="add" i]
) {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    background-color: var(--stellar-neon) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.48) !important;
    box-shadow:
        0 16px 38px rgba(var(--stellar-neon-rgb), 0.36),
        0 0 24px rgba(var(--stellar-neon-rgb), 0.20),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
}

:is(
    .groups-create-button,
    .fab-button,
    .floating-action-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton,
    button[aria-label*="create" i],
    button[aria-label*="add" i],
    button[title*="create" i],
    button[title*="add" i]
),
:is(
    .groups-create-button,
    .fab-button,
    .floating-action-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton,
    button[aria-label*="create" i],
    button[aria-label*="add" i],
    button[title*="create" i],
    button[title*="add" i]
) :is(i, svg, span, .fa, .fa-solid),
:is(
    .groups-create-button,
    .fab-button,
    .floating-action-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton,
    button[aria-label*="create" i],
    button[aria-label*="add" i],
    button[title*="create" i],
    button[title*="add" i]
)::before,
:is(
    .groups-create-button,
    .fab-button,
    .floating-action-button,
    #createGroupButton,
    #newChatButton,
    #addContactButton,
    button[aria-label*="create" i],
    button[aria-label*="add" i],
    button[title*="create" i],
    button[title*="add" i]
)::after {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* --- Calls history icons: gradient both themes, white icons --- */

.calls-list .call-icon {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.42) !important;
    box-shadow:
        0 12px 30px rgba(var(--stellar-neon-rgb), 0.28),
        0 0 18px rgba(var(--stellar-neon-rgb), 0.18) !important;
}

.calls-list .call-icon :is(i, svg) {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Stellar dark-mode avatar initials + toggle gradient pass 21.
   Scope:
   - Contact fallback initials circles in dark mode
   - Toggle switches in dark mode
   No JS. No layout damage. Miracles may vary because CSS is still CSS. */

/* Contact initials / fallback avatar circles: dark mode gradient. */
:is(
    html[data-theme="dark"],
    body[data-theme="dark"],
    html.theme-dark,
    body.theme-dark,
    .dark-theme,
    html:not([data-theme="light"])
) :is(
    #contactsScreen,
    .app-screen[data-screen="contacts"],
    [data-screen="contacts"],
    .contacts-screen,
    .contacts-list,
    .contact-list
) :is(
    .contact-avatar:not(:has(img)),
    .contact-photo:not(:has(img)),
    .contact-initials,
    .avatar-initials,
    .user-initials,
    .initials-avatar,
    .profile-initials,
    .fallback-avatar,
    .avatar-fallback
) {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    background-color: var(--stellar-neon) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.45) !important;
    box-shadow:
        0 12px 28px rgba(var(--stellar-neon-rgb), 0.28),
        0 0 18px rgba(var(--stellar-neon-rgb), 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.38) !important;
}

/* Some avatars render initials as child spans inside the avatar circle. */
:is(
    html[data-theme="dark"],
    body[data-theme="dark"],
    html.theme-dark,
    body.theme-dark,
    .dark-theme,
    html:not([data-theme="light"])
) :is(
    #contactsScreen,
    .app-screen[data-screen="contacts"],
    [data-screen="contacts"],
    .contacts-screen,
    .contacts-list,
    .contact-list
) :is(
    .contact-avatar:not(:has(img)),
    .contact-photo:not(:has(img)),
    .contact-initials,
    .avatar-initials,
    .user-initials,
    .initials-avatar,
    .profile-initials,
    .fallback-avatar,
    .avatar-fallback
) :is(span, strong, b) {
    color: #ffffff !important;
}

/* If an image exists, do not paint over it like a vandal. */
:is(
    html[data-theme="dark"],
    body[data-theme="dark"],
    html.theme-dark,
    body.theme-dark,
    .dark-theme,
    html:not([data-theme="light"])
) :is(
    #contactsScreen,
    .app-screen[data-screen="contacts"],
    [data-screen="contacts"],
    .contacts-screen,
    .contacts-list,
    .contact-list
) :is(
    .contact-avatar:has(img),
    .contact-photo:has(img)
) {
    background: transparent !important;
    box-shadow: none !important;
}

/* Toggle tracks: dark mode gradient when enabled/active. */
:is(
    html[data-theme="dark"],
    body[data-theme="dark"],
    html.theme-dark,
    body.theme-dark,
    .dark-theme,
    html:not([data-theme="light"])
) :is(
    .toggle-switch input:checked + .slider,
    .toggle-switch input:checked + .toggle-slider,
    .toggle-switch input:checked + .switch-slider,
    .switch input:checked + .slider,
    .switch input:checked + .toggle-slider,
    .switch input:checked + .switch-slider,
    .settings-toggle input:checked + .slider,
    .settings-toggle input:checked + .toggle-slider,
    .settings-toggle input:checked + .switch-slider,
    .preference-toggle input:checked + .slider,
    .preference-toggle input:checked + .toggle-slider,
    .preference-toggle input:checked + .switch-slider,
    input[type="checkbox"]:checked + .slider,
    input[type="checkbox"]:checked + .toggle-slider,
    input[type="checkbox"]:checked + .switch-slider,
    .toggle-switch.is-active,
    .toggle-switch.active,
    .toggle-switch[aria-checked="true"],
    .switch.is-active,
    .switch.active,
    .switch[aria-checked="true"],
    .settings-toggle.is-active,
    .settings-toggle.active,
    .settings-toggle[aria-checked="true"],
    button[role="switch"][aria-checked="true"],
    [role="switch"][aria-checked="true"] .slider,
    [role="switch"][aria-checked="true"] .toggle-slider,
    [role="switch"][aria-checked="true"] .switch-slider
) {
    background:
        linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2)) !important;
    background-color: var(--stellar-neon) !important;
    border-color: rgba(var(--stellar-neon-rgb), 0.52) !important;
    box-shadow:
        0 10px 24px rgba(var(--stellar-neon-rgb), 0.28),
        0 0 18px rgba(var(--stellar-neon-rgb), 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

/* Toggle thumbs stay white/readable. */
:is(
    html[data-theme="dark"],
    body[data-theme="dark"],
    html.theme-dark,
    body.theme-dark,
    .dark-theme,
    html:not([data-theme="light"])
) :is(
    .toggle-switch input:checked + .slider::before,
    .toggle-switch input:checked + .toggle-slider::before,
    .toggle-switch input:checked + .switch-slider::before,
    .switch input:checked + .slider::before,
    .switch input:checked + .toggle-slider::before,
    .switch input:checked + .switch-slider::before,
    .settings-toggle input:checked + .slider::before,
    .settings-toggle input:checked + .toggle-slider::before,
    .settings-toggle input:checked + .switch-slider::before,
    .preference-toggle input:checked + .slider::before,
    .preference-toggle input:checked + .toggle-slider::before,
    .preference-toggle input:checked + .switch-slider::before,
    input[type="checkbox"]:checked + .slider::before,
    input[type="checkbox"]:checked + .toggle-slider::before,
    input[type="checkbox"]:checked + .switch-slider::before,
    .toggle-switch.is-active::before,
    .toggle-switch.active::before,
    .switch.is-active::before,
    .switch.active::before,
    .settings-toggle.is-active::before,
    .settings-toggle.active::before,
    button[role="switch"][aria-checked="true"]::before,
    [role="switch"][aria-checked="true"] .slider::before,
    [role="switch"][aria-checked="true"] .toggle-slider::before,
    [role="switch"][aria-checked="true"] .switch-slider::before
) {
    background: #ffffff !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.28),
        0 0 8px rgba(255, 255, 255, 0.42) !important;
}

/* Toggle icons/text inside active switch controls stay readable. */
:is(
    html[data-theme="dark"],
    body[data-theme="dark"],
    html.theme-dark,
    body.theme-dark,
    .dark-theme,
    html:not([data-theme="light"])
) :is(
    .toggle-switch.is-active,
    .toggle-switch.active,
    .toggle-switch[aria-checked="true"],
    .switch.is-active,
    .switch.active,
    .switch[aria-checked="true"],
    .settings-toggle.is-active,
    .settings-toggle.active,
    .settings-toggle[aria-checked="true"],
    button[role="switch"][aria-checked="true"]
) :is(i, svg, span) {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Hard-kill leftovers from the previous wrong helper layer. */
#stellarBrandSplash,
.stellar-loading-logo-img,
.stellar-loading-icon-img {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Stellar composer ghost-rectangle fix pass 25.
   Removes clipped external glow/shadow from the open-chat composer/input area only.
   Keeps the composer visible with border/inset styling. */

:is(
    #chatThreadView,
    #chatThread,
    #chatMessagesPanel,
    #messagesPanel,
    .chat-thread-view,
    .chat-thread,
    .messages-panel,
    .thread-screen,
    .conversation-screen
) :is(
    #chatComposer,
    #messageComposer,
    #composer,
    .chat-composer,
    .message-composer,
    .composer,
    .composer-bar,
    .composer-wrap,
    .composer-wrapper,
    .chat-input-bar,
    .message-input-bar,
    .message-input-row,
    .message-input-area,
    .chat-reply-bar,
    .reply-composer,
    .input-composer,
    .send-message-bar
) {
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
    background-clip: padding-box !important;
}

/* Remove pseudo-element glow rectangles if the composer uses before/after layers. */
:is(
    #chatThreadView,
    #chatThread,
    #chatMessagesPanel,
    #messagesPanel,
    .chat-thread-view,
    .chat-thread,
    .messages-panel,
    .thread-screen,
    .conversation-screen
) :is(
    #chatComposer,
    #messageComposer,
    #composer,
    .chat-composer,
    .message-composer,
    .composer,
    .composer-bar,
    .composer-wrap,
    .composer-wrapper,
    .chat-input-bar,
    .message-input-bar,
    .message-input-row,
    .message-input-area,
    .chat-reply-bar,
    .reply-composer,
    .input-composer,
    .send-message-bar
)::before,
:is(
    #chatThreadView,
    #chatThread,
    #chatMessagesPanel,
    #messagesPanel,
    .chat-thread-view,
    .chat-thread,
    .messages-panel,
    .thread-screen,
    .conversation-screen
) :is(
    #chatComposer,
    #messageComposer,
    #composer,
    .chat-composer,
    .message-composer,
    .composer,
    .composer-bar,
    .composer-wrap,
    .composer-wrapper,
    .chat-input-bar,
    .message-input-bar,
    .message-input-row,
    .message-input-area,
    .chat-reply-bar,
    .reply-composer,
    .input-composer,
    .send-message-bar
)::after {
    box-shadow: none !important;
    filter: none !important;
}

/* Inner composer surfaces get a clean contained look instead of an outside glow. */
:is(
    #chatThreadView,
    #chatThread,
    #chatMessagesPanel,
    #messagesPanel,
    .chat-thread-view,
    .chat-thread,
    .messages-panel,
    .thread-screen,
    .conversation-screen
) :is(
    .composer-inner,
    .composer-content,
    .composer-surface,
    .chat-composer-inner,
    .message-composer-inner,
    .input-wrapper,
    .input-area,
    .message-input-wrapper,
    .chat-input-wrapper,
    textarea,
    input[type="text"]
) {
    box-shadow:
        inset 0 0 0 1px rgba(var(--stellar-neon-rgb), 0.12) !important;
    filter: none !important;
    background-clip: padding-box !important;
}

/* Keep send/voice/attach buttons styled, but remove any huge rectangular glow around them. */
:is(
    #chatThreadView,
    #chatThread,
    #chatMessagesPanel,
    #messagesPanel,
    .chat-thread-view,
    .chat-thread,
    .messages-panel,
    .thread-screen,
    .conversation-screen
) :is(
    #sendMessageBtn,
    #voiceRecordBtn,
    #attachBtn,
    .send-btn,
    .send-button,
    .voice-btn,
    .record-btn,
    .attach-btn,
    .composer-action,
    .composer-btn
) {
    box-shadow:
        0 8px 18px rgba(var(--stellar-neon-rgb), 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    filter: none !important;
}

/* Kill leftovers from previous bad helper layers. */
#stellarBrandSplash,
.stellar-loading-logo-img,
.stellar-loading-icon-img {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* If the original mark container is a flex/grid child, stop baseline weirdness. */
.stellar-loading-mark-fixed img {
    vertical-align: middle !important;
}

/* Hard-kill leftovers from the previous wrong helper layers. */
#stellarBrandSplash,
.stellar-loading-logo-img,
.stellar-loading-icon-img {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Stellar stale loading helper cleanup.
   Prevents retired loading helper elements from appearing if old DOM/cache tries nonsense. */
#stellarBrandSplash,
.stellar-loading-logo-img,
.stellar-loading-icon-img,
.stellar-loading-real-icon,
.stellar-loading-direct-icon {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Avoid leaving will-change permanently active like a tiny GPU tax collector. */
html:not(.stellar-screen-switching) :is(.app-screen, .screen, .page, .view, [data-screen], [data-view]) {
    will-change: auto;
}

/* Avoid leaving will-change permanently active like a tiny GPU tax collector. */
html:not(.stellar-screen-switching) :is(.app-screen, .screen, .page, .view, [data-screen], [data-view]) {
    will-change: auto;
}

/* Stellar message residual guard pass 35.
   Small loading placeholder used after clearing stale messages. */
.stellar-messages-loading {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    opacity: 0.72;
}

.stellar-messages-loading-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--stellar-neon), var(--stellar-neon-2));
    animation: stellarMessagesLoadingPulse 900ms ease-in-out infinite;
}

.stellar-messages-loading-dot:nth-child(2) {
    animation-delay: 120ms;
}

.stellar-messages-loading-dot:nth-child(3) {
    animation-delay: 240ms;
}

@keyframes stellarMessagesLoadingPulse {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.45;
    }

    50% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* Important: open drawer state must NOT move the handle rightward. */
#stellarDrawerHandle.is-open {
    left: 0 !important;
    transform: translateY(-50%) !important;
    opacity: 0.86 !important;
}

#stellarDrawerHandle:active {
    transform: translateY(-50%) scale(0.96) !important;
}

html:not(.stellar-nav-mode-stellar) #stellarDrawerHandle,
body:not(.stellar-nav-mode-stellar) #stellarDrawerHandle,
html.stellar-nav-mode-classic #stellarDrawerHandle,
body.stellar-nav-mode-classic #stellarDrawerHandle {
    display: none !important;
}

@media (min-width: 769px) {
    #stellarDrawerHandle {
        display: none !important;
    }
}

/* Stellar drawer handle sync pass 37.
   Hide in Classic.
   In Stellar, handle follows the drawer edge instead of staying pinned or flying blindly. */

#stellarDrawerHandle {
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    z-index: 10020 !important;
    width: 24px !important;
    height: 74px !important;
    border: 1px solid rgba(var(--stellar-neon-rgb), 0.36) !important;
    border-left: 0 !important;
    border-radius: 0 18px 18px 0 !important;
    background:
        linear-gradient(135deg, rgba(var(--stellar-neon-rgb), 0.96), rgba(var(--stellar-neon-2-rgb, var(--stellar-neon-rgb)), 0.88)) !important;
    box-shadow:
        0 10px 24px rgba(var(--stellar-neon-rgb), 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
    transform: translateY(-50%) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: manipulation !important;
    opacity: 0.94 !important;
    transition: opacity 160ms ease, transform 160ms ease !important;
}

#stellarDrawerHandle::before {
    content: "" !important;
    width: 4px !important;
    height: 38px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow:
        7px 0 0 rgba(255, 255, 255, 0.62),
        0 0 10px rgba(255, 255, 255, 0.30) !important;
}

#stellarDrawerHandle.is-visible {
    display: flex !important;
}

#stellarDrawerHandle.is-open {
    opacity: 0.90 !important;
}

#stellarDrawerHandle:active {
    transform: translateY(-50%) scale(0.96) !important;
}

html:not(.stellar-nav-mode-stellar) #stellarDrawerHandle,
body:not(.stellar-nav-mode-stellar) #stellarDrawerHandle,
html.stellar-nav-mode-classic #stellarDrawerHandle,
body.stellar-nav-mode-classic #stellarDrawerHandle {
    display: none !important;
}

@media (min-width: 769px) {
    #stellarDrawerHandle {
        display: none !important;
    }
}