/* This shell is only loaded on the chat application host. Shared chat styles
   and the embedded homepage retain their existing layout and resize controls. */
html[data-chat-app] {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

html[data-chat-app] body {
    position: fixed;
    inset-inline: 0;
    top: var(--chat-app-viewport-top, 0px);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: var(--chat-app-viewport-height, 100dvh);
    min-height: 0;
    margin: 0;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    box-sizing: border-box;
    overflow: hidden;
    background: var(--chat-surface-card, #fff);
    color: var(--chat-text, #2e3a48);
    box-shadow: none;
}

html[data-chat-app] .chat-app-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: 12px;
    min-height: 42px;
    padding: 4px 20px;
    border-bottom: 1px solid var(--chat-border-soft, #e7f2fd);
    background: var(--chat-surface-card, #fff);
    font-size: 12px;
}

html[data-chat-app] .chat-app-site-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--chat-text-muted, #697c90);
    text-decoration: none;
    white-space: nowrap;
}

html[data-chat-app] .chat-app-site-link:hover {
    color: var(--chat-primary, #2f9bf4);
}

html[data-chat-app] .chat-app-title {
    margin: 0;
    font: inherit;
    font-weight: 700;
}

html[data-chat-app] .chat-app-locale {
    position: relative;
    flex: 0 1 auto;
    margin: 0;
    min-width: 0;
}

html[data-chat-app] .chat-app-locale-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 210px;
    min-width: 0;
    min-height: 33px;
    padding: 4px 10px 4px 7px;
    border: 1px solid var(--chat-border-soft, #e0eefb);
    border-radius: 11px;
    background: var(--chat-surface-card, #fff);
    color: var(--chat-text, #364866);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

html[data-chat-app] .chat-app-locale-trigger:hover,
html[data-chat-app] .chat-app-locale-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--chat-primary, #2f9bf4) 38%, transparent);
    background: var(--chat-surface-2, #f2f7fd);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--chat-primary, #2f9bf4) 9%, transparent);
}

html[data-chat-app] .chat-app-locale-globe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 7px;
    background: var(--chat-surface-2, #f2f7fd);
    color: var(--chat-primary, #2f9bf4);
}

html[data-chat-app] .chat-app-locale-current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-chat-app] .chat-app-locale-chevron {
    flex-shrink: 0;
    color: var(--chat-text-muted, #8394ad);
    transition: transform 120ms ease;
}

html[data-chat-app] .chat-app-locale-trigger[aria-expanded="true"] .chat-app-locale-chevron {
    transform: rotate(180deg);
}

html[data-chat-app] .chat-app-locale-panel {
    position: fixed;
    z-index: 10050;
    top: 50px;
    right: 12px;
    display: flex;
    flex-direction: column;
    width: min(336px, calc(100vw - 24px));
    max-height: min(448px, calc(var(--chat-app-viewport-height, 100dvh) - 62px));
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--chat-border-soft, #dfeafa);
    border-radius: 18px;
    background: var(--chat-surface-card, #fff);
    color: var(--chat-text, #364866);
    box-shadow: 0 16px 48px color-mix(in srgb, var(--chat-text, #364866) 16%, transparent),
                0 2px 8px color-mix(in srgb, var(--chat-primary, #2f9bf4) 7%, transparent);
    font-family: 'Nunito', 'Inter', sans-serif;
}

html[data-chat-app] .chat-app-locale-panel[hidden],
html[data-chat-app] .chat-app-locale-option[hidden],
html[data-chat-app] .chat-app-locale-empty[hidden] {
    display: none !important;
}

html[data-chat-app] .chat-app-locale-heading {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    padding: 12px 12px 8px 16px;
    font-size: 13px;
    font-weight: 800;
}

html[data-chat-app] .chat-app-locale-count {
    min-width: 23px;
    padding: 2px 6px;
    border-radius: 7px;
    background: var(--chat-surface-2, #f2f7fd);
    color: var(--chat-text-muted, #8394ad);
    font-size: 10px;
    text-align: center;
}

html[data-chat-app] .chat-app-locale-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--chat-text-muted, #8394ad);
    cursor: pointer;
}

html[data-chat-app] .chat-app-locale-close:hover {
    background: var(--chat-surface-2, #f2f7fd);
    color: var(--chat-text, #364866);
}

html[data-chat-app] .chat-app-locale-search-wrap {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    margin: 0 12px 10px;
    padding: 0 11px;
    border: 1px solid var(--chat-border-soft, #e7f2fd);
    border-radius: 11px;
    background: var(--chat-surface-2, #f2f7fd);
    color: var(--chat-text-muted, #8394ad);
}

html[data-chat-app] .chat-app-locale-search-wrap:focus-within {
    border-color: color-mix(in srgb, var(--chat-primary, #2f9bf4) 48%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-primary, #2f9bf4) 9%, transparent);
}

html[data-chat-app] .chat-app-locale-search-wrap > svg {
    flex-shrink: 0;
}

html[data-chat-app] #chatAppLocaleSearch {
    width: 100%;
    min-width: 0;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 0;
    background: transparent;
    color: var(--chat-text, #364866);
    font: inherit;
    font-size: 14px;
    box-shadow: none;
}

html[data-chat-app] #chatAppLocaleSearch::placeholder {
    color: var(--chat-text-muted, #8394ad);
}

html[data-chat-app] .chat-app-locale-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 8px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--chat-border-soft, #d7e5f7) transparent;
}

html[data-chat-app] .chat-app-locale-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 43px;
    margin: 2px 0;
    padding: 9px 11px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--chat-text, #364866);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

html[data-chat-app] .chat-app-locale-option:hover,
html[data-chat-app] .chat-app-locale-option.is-focused {
    background: var(--chat-surface-2, #f2f7fd);
}

html[data-chat-app] .chat-app-locale-option[aria-selected="true"] {
    background: color-mix(in srgb, var(--chat-primary, #2f9bf4) 10%, var(--chat-surface-card, #fff));
    color: var(--chat-primary, #2f9bf4);
    font-weight: 800;
}

html[data-chat-app] .chat-app-locale-name {
    flex: 1 1 auto;
    min-width: 0;
}

html[data-chat-app] .chat-app-locale-code {
    color: var(--chat-text-muted, #8394ad);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

html[data-chat-app] .chat-app-locale-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--chat-primary, #2f9bf4);
    color: #fff;
    visibility: hidden;
}

html[data-chat-app] .chat-app-locale-option[aria-selected="true"] .chat-app-locale-check {
    visibility: visible;
}

html[data-chat-app] .chat-app-locale-empty {
    padding: 20px 16px 28px;
    color: var(--chat-text-muted, #8394ad);
    font-size: 13px;
    text-align: center;
}

html[data-chat-app] .chat-app-toolbar :focus-visible {
    outline: 2px solid var(--chat-primary, #2f9bf4);
    outline-offset: 2px;
}

html[data-chat-app] .chat-app-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html[data-chat-app] .chat-app-content {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    width: 100%;
}

/* The shared partial renders a saved inline pixel height and the mobile CSS
   sets 80svh !important. Both must yield to the available viewport here. */
html[data-chat-app] #chatV2 {
    flex: 1 1 0;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    resize: none !important;
}

html[data-chat-app] #chatV2 .chat-header {
    flex-shrink: 0;
    border-radius: 0;
}

html[data-chat-app] #chatV2 .center-section,
html[data-chat-app] #chatV2 .messages-wrapper {
    min-height: 0;
    min-width: 0;
}

/* Full width through 1600px, then grow the side margins without a width jump. */
@media (min-width: 1280px) {
    html[data-chat-app] #chatV2 {
        background: var(--sk-wash-deep, #eef6fe);
    }

    html[data-chat-app] #chatV2 > .center-section {
        width: min(100%, max(1600px, 80%));
        margin-inline: auto;
    }

    html[data-chat-app] .chat-app-content > .mus-player:not(.is-floating):not(.is-collapsed) {
        width: calc(min(100%, max(1600px, 80%)) - 28px);
    }
}

/* Allow for the center section's 28px padding at the feed's rail breakpoint. */
@media (max-width: 1208px) {
    html[data-chat-app] #chatHome .chom-side--right { display: none; }
    html[data-chat-app] #chatHome .chom-scroll { padding-right: 14px; }
}

/* Home occupies the page instead of covering a still-interactive chat. The
   room/sidebar state stays intact for the next explicit navigation to Chat. */
html[data-chat-app] #chatHome {
    position: relative;
    inset: auto;
    z-index: auto;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
}

html[data-chat-app] #chatHome:not(.hidden) ~ #leftSidebar,
html[data-chat-app] #chatHome:not(.hidden) ~ .messages-wrapper {
    display: none !important;
}

html[data-chat-app] #chatAlbums:not(.hidden) ~ .messages-wrapper,
html[data-chat-app] #chatMusic:not(.hidden) ~ .messages-wrapper {
    display: none !important;
}

html[data-chat-app] #chatAlbums a.alb-card,
html[data-chat-app] #chatAlbums a.alb-btn,
html[data-chat-app] #chatAlbums a.alb-view-tab {
    color: inherit;
    text-decoration: none;
}
html[data-chat-app] #albTitle { margin: 0; }
html[data-chat-app] #chatAlbums .alb-photo > a {
    display: block;
    width: 100%;
    height: 100%;
}

html[data-chat-app] :is(#chatAlbumsList, #chatMusicList) :is(a, div).room-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 12px;
    color: var(--chat-text);
    text-decoration: none;
}
html[data-chat-app] :is(#chatAlbumsList, #chatMusicList) :is(a, div).room-item:hover {
    background: var(--chat-sidebar-bg);
}
html[data-chat-app] :is(#chatAlbumsList, #chatMusicList) :is(a, div).room-item.active {
    color: var(--chat-sidebar-text-active);
    background: var(--chat-sidebar-bg-active);
}
html[data-chat-app] :is(#chatAlbumsList, #chatMusicList) a:focus-visible {
    outline: 2px solid var(--chat-primary, #2f9bf4);
    outline-offset: -2px;
}
html[data-chat-app] :is(#chatAlbumsList, #chatMusicList) a.room-item img.room-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}
html[data-chat-app][data-chat-skin="sky"] :is(#chatAlbumsList, #chatMusicList) :is(a, div).room-item {
    padding: 7px 12px;
    gap: 12px;
    margin: 3px 10px;
    border: 1.5px solid transparent;
    border-radius: 16px;
}
html[data-chat-app][data-chat-skin="sky"] :is(#chatAlbumsList, #chatMusicList) :is(a, div).room-item:hover,
html[data-chat-app][data-chat-skin="sky"] :is(#chatAlbumsList, #chatMusicList) :is(a, div).room-item.active {
    background: rgba(var(--sk-primary-rgb, 47, 155, 244), 0.07);
}
html[data-chat-app] #chatMusicList :is(a.room-meta, a.mus-genre),
html[data-chat-app] #chatMusic a.mus-feed-end {
    color: inherit;
    text-decoration: none;
}
html[data-chat-app] .mus-playlist-entry { position: relative; }
html[data-chat-app] #chatMusicList .mus-playlist-entry > a.room-item { padding-right: 36px; }
html[data-chat-app] .mus-playlist-entry > .mus-plist-del {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}
html[data-chat-app] .mus-playlist-entry:hover > .mus-plist-del,
html[data-chat-app] .mus-playlist-entry:focus-within > .mus-plist-del { opacity: 1; }
html[data-chat-app] .mus-page-heading { margin: 0; font: inherit; min-width: 0; }
html[data-chat-app] .mus-search-submit {
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    padding: 8px 14px;
    background: var(--chat-primary-subtle);
    color: var(--chat-primary);
    font: inherit;
    cursor: pointer;
}

@media (max-width: 640px) {
    /* Initial HTML must show the requested page before mobile scripts bind. */
    html[data-chat-app] #leftSidebar[data-chat-media-sidebar] { display: none !important; }
}

html[data-chat-app] #chatSettings {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--pedit-border);
    border-radius: 18px;
    background: var(--chat-surface-2, #f4f8ff);
    color: var(--chat-text);
}
html[data-chat-app] #chatSettings.hidden,
html[data-chat-app] #chatSettings:not(.hidden) ~ .messages-wrapper,
html[data-chat-app] #chatInputArea[data-chat-can-send="false"] { display: none !important; }
html[data-chat-app] #chatSettings > header {
    flex: 0 0 auto;
    margin: 0;
    padding: 18px 24px;
    border-bottom: 1px solid var(--pedit-border);
    background: var(--chat-surface-card, #fff);
}
html[data-chat-app] #chatSettingsTitle { margin: 0; font-size: 19px; font-weight: 800; }
html[data-chat-app] #chatSettingsBody { flex: 1 1 auto; min-height: 0; overflow: auto; }
html[data-chat-app] #chatSettings .pedit-tab { animation: none; }
html[data-chat-app] #chatSettings .pedit-footer { background: var(--chat-surface-card, #fff); }
html[data-chat-app] #chatSettingsList {
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    min-height: 0;
    overflow: auto;
    border: 0;
    border-radius: 0;
    padding: 24px 16px;
}
html[data-chat-app] #chatSettingsList .pedit-nav { width: 100%; }
html[data-chat-app] #chatSettingsList a.pedit-nav-item { text-decoration: none; }
html[data-chat-app] #avatarMenu li > a[data-chat-nav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
html[data-chat-app] #chatSettingsList a:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: 2px; }
html[data-chat-app] #chatSettings .chat-page-state { padding: 24px; }
html[data-chat-app] #chatSettingsMessage[hidden] { display: none; }
html[data-chat-app] .messages-wrapper[data-chat-runtime-page="messages"] #dmViewNeutral:has(.chat-conversation-notice) > :not(.chat-conversation-notice) { display: none; }
html[data-chat-app] .chat-conversation-notice { width: min(100%, 760px); padding: 24px; min-height: 0; overflow: auto; }
html[data-chat-app] #chatConversationHeading { margin: 0 0 12px; font-size: 22px; font-weight: 800; }
html[data-chat-app] .chat-conversation-page-list { width: 100%; text-align: left; }
html[data-chat-app] #chatFriends,
html[data-chat-app] #chatSearch {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: var(--chat-text);
}
html[data-chat-app] #chatFriends.hidden,
html[data-chat-app] #chatSearch.hidden,
html[data-chat-app] #chatFriends:not(.hidden) ~ .messages-wrapper,
html[data-chat-app] #chatSearch:not(.hidden) ~ .messages-wrapper { display: none !important; }
html[data-chat-app] #chatFriendsBody,
html[data-chat-app] #chatSearchBody { flex: 1 1 auto; min-height: 0; overflow: auto; }
html[data-chat-app] #chatFriends #friendsViewNeutral { overflow: visible; height: auto; min-height: 0; }
html[data-chat-app] #chatFriends .fh-title { margin: 0; }
html[data-chat-app] #chatFriends a,
html[data-chat-app] #chatFriendsList a { color: inherit; text-decoration: none; }
html[data-chat-app] #chatFriends .fh-row { cursor: default; }
html[data-chat-app] #chatFriends .fh-msg { display: inline-flex; align-items: center; justify-content: center; color: var(--chat-primary, #2f9bf4); }
/* The website FAQ styles apply to every details/summary element. A native
   sort disclosure must retain its labels and let its menu escape the header. */
html[data-chat-app] #chatFriends .fh-sort {
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    transition: none;
}
html[data-chat-app] #chatFriends .fh-sort-btn { padding: 0; list-style: none; transition: none; }
html[data-chat-app] #chatFriends .fh-sort-btn span { display: inline !important; }
html[data-chat-app] #chatFriends .fh-sort-btn::before,
html[data-chat-app] #chatFriends .fh-sort-btn::after { content: none; }
html[data-chat-app] #chatFriends .fh-sort-btn::-webkit-details-marker { display: none; }
html[data-chat-app] #chatFriends .fh-sort:not([open]) .fh-sort-pop { display: none; }
html[data-chat-app] #chatFriends .fh-sort-pop { width: max-content; padding: 6px; max-height: none; overflow: visible; opacity: 1; transition: none; }
html[data-chat-app] #chatFriends .fh-sort-pop a {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}
html[data-chat-app] #chatFriends .fh-sort-pop a:hover,
html[data-chat-app] #chatFriends .fh-sort-pop a[aria-current] { background: var(--chat-surface-2, #f2f7fd); }
html[data-chat-app] #chatFriends .fh-viewtoggle a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    border-radius: 9px;
    color: var(--chat-text-muted, #99a6b5);
}
html[data-chat-app] #chatFriends .fh-viewtoggle a.active {
    background: var(--chat-surface-card, #fff);
    color: var(--chat-primary, #2f9bf4);
    box-shadow: 0 2px 6px rgba(20, 45, 75, .1);
}
html[data-chat-app] #chatFriends .fh-list.is-grid .fh-sec-head { grid-column: 1 / -1; }
html[data-chat-app] #chatFriends .chat-friends-request-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
html[data-chat-app] #chatFriends .chat-friends-request-tabs a,
html[data-chat-app] #chatFriends .chat-friends-next { display: inline-flex; padding: 9px 12px; border-radius: 10px; background: var(--chat-surface-2, #f2f7fd); }
html[data-chat-app] #chatFriends .chat-friends-request-tabs a[aria-current] { color: var(--chat-primary, #2f9bf4); font-weight: 700; }
html[data-chat-app] #chatFriends .chat-friends-next { margin-top: 12px; }
html[data-chat-app] #chatFriendsNotice[hidden] { display: none; }
html[data-chat-app] #chatFriends a:focus-visible,
html[data-chat-app] #chatFriends summary:focus-visible,
html[data-chat-app] #chatFriendsList a:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: 2px; }
html[data-chat-app] .chat-friends-pop a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--chat-text, #2e3a48);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
html[data-chat-app] .chat-friends-pop a i { width: 15px; text-align: center; color: var(--chat-text-muted, #8a97a8); font-size: 12px; }
html[data-chat-app] .chat-friends-pop a:hover { background: var(--chat-surface-2, #f2f7fd); }
html[data-chat-app] .chat-friends-pop a:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: -2px; }
html[data-chat-app] #chatSearch > .gsv-main { min-height: 0; }
html[data-chat-app] #chatSearch .gsv-title { margin: 0; }
html[data-chat-app] #chatSearch .gsv-head,
html[data-chat-app] #chatSearch .gsv-pills,
html[data-chat-app] #chatSearch .chat-search-form { flex-shrink: 0; }
html[data-chat-app] #chatSearch .gsv-pills { padding: 12px 18px; justify-content: flex-start; }
html[data-chat-app] #chatSearch .chat-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 18px;
    border-bottom: 1px solid var(--chat-border-soft, rgba(0, 0, 0, .06));
}
html[data-chat-app] #chatSearchQuery {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid var(--chat-border-soft, rgba(0, 0, 0, .06));
    border-radius: 12px;
    color: inherit;
    background: var(--chat-surface-soft, #f4f8ff);
    font: inherit;
}
html[data-chat-app] #chatSearch .gsr-person-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 180px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
html[data-chat-app] #chatSearch .gsr-row { flex-wrap: wrap; cursor: default; }
html[data-chat-app] #chatSearch .gsr-row .gsr-acts {
    position: static;
    transform: none;
    padding: 0;
    margin-left: auto;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    opacity: 1;
    pointer-events: auto;
    background: none;
}
html[data-chat-app] #chatSearch a.gsr-btn,
html[data-chat-app] #chatSearchList a,
html[data-chat-app] #chatSearch a.gsv-pill { text-decoration: none; }
html[data-chat-app] #chatSearchSidebar { min-height: 0; }
html[data-chat-app] #chatSearch a:focus-visible,
html[data-chat-app] #chatSearchList a:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: 2px; }
@media (max-width: 640px) {
    html[data-chat-app] #chatSettings > header { padding: 14px 16px; }
    html[data-chat-app] #chatSettingsBody { padding: 14px 12px; }
    html[data-chat-app] #chatSettings .pedit-footer { padding: 12px; }
    html[data-chat-app] #chatSettingsList .pedit-nav { display: flex; flex-direction: column; overflow: visible; }
    html[data-chat-app] #chatSettingsList .pedit-nav-item { width: 100%; justify-content: flex-start; }
    html[data-chat-app] #chatSearch .chat-search-form { padding: 10px 12px; gap: 8px; }
    html[data-chat-app] #chatSearch .gsv-head { padding: 14px 12px; }
    html[data-chat-app] #chatFriends #friendsViewNeutral { padding: 6px 10px 18px; }
    html[data-chat-app] #chatFriends .fh-list:not(.is-grid) .fh-row[data-friend-type="request"] { flex-wrap: wrap; }
    html[data-chat-app] #chatFriends .fh-list:not(.is-grid) .fh-row[data-friend-type="request"] .fh-main { flex-basis: calc(100% - 60px); }
    html[data-chat-app] .chat-friends-pop a { padding: 11px 12px; font-size: 14px; }
}

html[data-chat-app] a.header-nav-btn,
html[data-chat-app] #chatHome a.room-item,
html[data-chat-app] #chatHome a.chom-more,
html[data-chat-app] #chatHome a.chom-person,
html[data-chat-app] #chatHome a.chom-face-btn {
    text-decoration: none;
}

html[data-chat-app] #chatHome .chom-composer.hidden { display: none; }
html[data-chat-app] #chatPageHeading { margin: 0; font: inherit; font-size: 17px; font-weight: 800; }
html[data-chat-app] #chatHome .chom-meta a { color: inherit; text-decoration: none; }
html[data-chat-app] #chatHome .chom-meta a:hover { text-decoration: underline; }
html[data-chat-app] #chatHome .chat-page-state { padding: 24px; }
html[data-chat-app] #chatHome .chat-page-state .chom-post { display: inline-flex; }
html[data-chat-app] #chatHome .chom-side a.room-item .room-icon-ico {
    color: var(--chat-primary, #568fe8);
    background: var(--chat-primary-subtle, #edf5ff);
}

/* The original room rows are li elements. Real page links keep their layout. */
html[data-chat-app] #chatHome .chom-side a.room-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 12px;
    color: var(--chat-text);
}
html[data-chat-app] #chatHome .chom-side a.room-item:hover {
    background: var(--chat-sidebar-bg);
}
html[data-chat-app] #chatHome .chom-side a.room-item.active {
    color: var(--chat-sidebar-text-active);
    background: var(--chat-sidebar-bg-active);
}
html[data-chat-app] #chatHome .chom-side a.room-item:focus-visible {
    outline: 2px solid var(--chat-primary, #2f9bf4);
    outline-offset: -2px;
}
html[data-chat-app] #chatHome .chom-side a.room-item img.room-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}
html[data-chat-app] #chatHome .chom-side a.room-item .room-name-text {
    font-size: 13px;
    font-weight: 500;
    color: inherit;
}
html[data-chat-app][data-chat-skin="sky"] #chatHome .chom-side a.room-item {
    padding: 7px 12px;
    gap: 12px;
    margin: 3px 10px;
    border: 1.5px solid transparent;
    border-radius: 16px;
}
html[data-chat-app][data-chat-skin="sky"] #chatHome .chom-side a.room-item:hover,
html[data-chat-app][data-chat-skin="sky"] #chatHome .chom-side a.room-item.active {
    background: rgba(var(--sk-primary-rgb, 47, 155, 244), 0.07);
}
html[data-chat-app][data-chat-skin="sky"] #chatHome .chom-side a.room-item .room-name-text {
    font-size: 15px;
    font-weight: 800;
}

/* iOS keeps fixed overlays in the layout viewport when its keyboard opens.
   Constrain the login form to the same visible area as the chat, retaining
   the shared modal's internal scrolling for the rest of the form. */
html[data-chat-app] #chatHistoryLoader.chat-app-history-loader {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: min(280px, calc(100% - 40px));
    max-width: none;
    padding: 28px 22px;
    border: 1px solid var(--chat-border-soft, #e0eefb);
    border-radius: 26px;
    background: var(--chat-surface-card, #fff);
    box-shadow: 0 14px 48px rgba(62, 133, 196, .10);
    opacity: 1;
    animation: chatAppLoaderEnter 180ms ease-out;
}
html[data-chat-app] #chatHistoryLoader.hidden { display: none !important; }
html[data-chat-app] #chatHistoryLoader::before { content: none; }
html[data-chat-app] .chat-app-loading-orb {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 23px;
    background: linear-gradient(145deg, #6bc8ff, #8b87ed);
    box-shadow: 0 8px 24px rgba(105, 158, 236, .24);
    color: #fff;
    font-size: 28px;
    animation: chatAppLoaderFloat 2.4s ease-in-out infinite;
}
html[data-chat-app] .chat-app-loading-orb > span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8ccffa;
    top: -5px;
    right: -10px;
    animation: chatAppLoaderSpark 1.8s ease-in-out infinite;
}
html[data-chat-app] .chat-app-loading-orb > span:nth-of-type(2) { top: 42px; right: -16px; width: 4px; height: 4px; animation-delay: .4s; }
html[data-chat-app] .chat-app-loading-orb > span:nth-of-type(3) { top: 16px; right: 76px; background: #b4a2ee; animation-delay: .8s; }
html[data-chat-app] .chat-app-loading-label { color: var(--chat-text, #364866); font-weight: 700; }
html[data-chat-app] .chat-app-loading-preview { display: grid; gap: 13px; width: 100%; }
html[data-chat-app] .chat-app-loading-preview > div { display: flex; gap: 10px; align-items: center; }
html[data-chat-app] .chat-app-loading-preview > div:nth-child(2) { flex-direction: row-reverse; opacity: .7; }
html[data-chat-app] .chat-app-loading-preview > div:nth-child(3) { opacity: .4; }
html[data-chat-app] .chat-app-loading-preview b,
html[data-chat-app] .chat-app-loading-preview i {
    display: block;
    background: linear-gradient(100deg, var(--chat-surface-soft, #edf4fc) 25%, color-mix(in srgb, var(--chat-primary, #2f9bf4) 18%, var(--chat-surface-card, #fff)) 50%, var(--chat-surface-soft, #edf4fc) 75%);
    background-size: 220% 100%;
    animation: chatAppLoaderShimmer 1.8s ease-in-out infinite;
}
html[data-chat-app] .chat-app-loading-preview b { width: 30px; height: 30px; border-radius: 11px; flex: none; }
html[data-chat-app] .chat-app-loading-preview span { flex: 1; display: grid; gap: 6px; }
html[data-chat-app] .chat-app-loading-preview i { height: 8px; border-radius: 8px; }
html[data-chat-app] .chat-app-loading-preview i + i { width: 65%; }
@keyframes chatAppLoaderEnter { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
@keyframes chatAppLoaderFloat { 50% { transform: translateY(-5px) rotate(-4deg); } }
@keyframes chatAppLoaderSpark { 50% { opacity: .35; transform: translateY(-6px) scale(.7); } }
@keyframes chatAppLoaderShimmer { from { background-position: 120% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
    html[data-chat-app] #chatHistoryLoader,
    html[data-chat-app] #chatHistoryLoader * { animation: none !important; }
}

html[data-chat-app] #chatPanelSignin.is-recovering > :not(#chatAppRecovery) { display: none !important; }
html[data-chat-app] #chatPanelSignin.is-resetting > :not(#chatAppReset) { display: none !important; }
html[data-chat-app] #chatAppReset[hidden],
html[data-chat-app] #chatAppReset [hidden] { display: none !important; }
html[data-chat-app] #chatAppResetSaved > i { color: var(--chat-success, #39a887); }
html[data-chat-app] #chatAppResetForm[aria-busy="true"] { opacity: .75; }
html[data-chat-app] #chatAppRecovery[hidden],
html[data-chat-app] #chatAppRecovery [hidden] { display: none !important; }
html[data-chat-app] #chatAppRecovery,
html[data-chat-app] #chatAppReset,
html[data-chat-app] #chatAppResetSaved { animation: chatAppLoaderEnter 180ms ease-out; }
html[data-chat-app] #chatAppRecovery h3,
html[data-chat-app] #chatAppReset h3 { margin: 14px 0 8px; font-size: 23px; color: var(--chat-text, #364866); }
html[data-chat-app] #chatAppRecoveryForm,
html[data-chat-app] #chatAppResetForm { margin-top: 22px; }
html[data-chat-app] .chat-app-recovery-back { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; border: 0; padding: 0; background: none; color: var(--chat-primary, #2f9bf4); font: inherit; font-weight: 800; cursor: pointer; }
html[data-chat-app] .chat-app-recovery-icon { display: grid; place-items: center; width: 60px; height: 60px; margin-top: 14px; border-radius: 20px; background: linear-gradient(145deg, #6bc8ff, #8b87ed); color: white; font-size: 24px; box-shadow: 0 8px 24px rgba(105, 158, 236, .2); }
html[data-chat-app] .chat-app-recovery-sent {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin-top: 22px;
    padding: 20px;
    border: 1px solid var(--chat-border-soft, #e0eefb);
    border-radius: 18px;
    background: var(--chat-surface-soft, #edf4fc);
    color: var(--chat-text, #364866);
    font-size: 15px;
    line-height: 1.55;
}
html[data-chat-app] .chat-app-recovery-sent > i {
    grid-column: 1;
    grid-row: 1;
    color: var(--chat-primary, #2f9bf4);
    font-size: 24px;
    line-height: 1;
    text-align: center;
}
html[data-chat-app] .chat-app-recovery-sent > p {
    grid-column: 2;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
html[data-chat-app] .chat-app-recovery-sent > .chat-app-auth-hint { font-size: 13px; }
html[data-chat-app] .chat-app-recovery-sent > button,
html[data-chat-app] .chat-app-recovery-sent > a {
    grid-column: 1 / -1;
    margin: 2px 0 0;
}
html[data-chat-app] .chat-app-recovery-sent:focus { outline: none; }
html[data-chat-app] .chat-app-recovery-sent:focus-visible { outline: 2px solid var(--chat-primary, #2f9bf4); outline-offset: 4px; }
html[data-chat-app] .chat-app-recovery-back:focus-visible { outline: 2px solid var(--chat-primary, #2f9bf4); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    html[data-chat-app] #chatAppRecovery,
    html[data-chat-app] #chatAppReset,
    html[data-chat-app] #chatAppResetSaved { animation: none; }
}

html[data-chat-app] .chat-app-forgot-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 40px;
    color: var(--chat-primary, #2f9bf4);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}
html[data-chat-app] .chat-app-forgot-link:hover { text-decoration: underline; }
html[data-chat-app] .chat-app-email-recovery { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
html[data-chat-app] .chat-app-email-recovery[hidden] { display: none; }
html[data-chat-app] .chat-app-email-recovery > * { color: var(--chat-primary, #2f9bf4); font: inherit; font-size: 13px; font-weight: 800; }
html[data-chat-app] .chat-app-email-recovery button { border: 0; padding: 0; background: none; cursor: pointer; }
html[data-chat-app] .chat-app-auth-hint { color: var(--chat-text-muted, #6d7b91); font-size: 12px; line-height: 1.5; margin: 6px 0 0; }
html[data-chat-app] .jn2-eye:focus-visible { outline: 2px solid var(--chat-primary, #2f9bf4); outline-offset: 2px; }

html[data-chat-app] .chat-app-guest-header {
    display: none !important;
}

html[data-chat-app] #chatAppRoomsToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    font-size: 17px;
    color: var(--chat-primary, #2f9bf4);
}

html[data-chat-app] #chatAppRoomsToggle[aria-expanded="true"] {
    background: var(--sk-active, #e3f2ff);
}

html[data-chat-app] #chatJoinOverlay {
    top: var(--chat-app-viewport-top, 0px);
    bottom: auto;
    height: var(--chat-app-viewport-height, 100dvh);
    box-sizing: border-box;
}

html[data-chat-app] #chatJoinModal {
    max-height: calc(var(--chat-app-viewport-height, 100dvh) * 0.94);
}

/* Music inserts a player immediately after #chatV2. Keep it in the flex
   layout so starting playback reserves space instead of covering the input. */
html[data-chat-app] .chat-app-content > .mus-player:not(.is-floating) {
    flex-shrink: 0;
    width: calc(100% - 24px);
    margin: 6px auto;
    box-sizing: border-box;
}

html[data-chat-app] .chat-app-content > .mus-player.is-collapsed:not(.is-floating) {
    width: max-content;
    max-width: calc(100% - 24px);
}

@media (max-width: 640px) {
    html[data-chat-app] .chat-app-toolbar {
        gap: 8px;
        padding-inline: 10px;
    }

    html[data-chat-app] .chat-app-title {
        display: none;
    }

    html[data-chat-app] .chat-app-locale-trigger {
        max-width: 185px;
    }

    html[data-chat-app] #chatAppLocaleSearch {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-chat-app] .chat-app-locale-trigger,
    html[data-chat-app] .chat-app-locale-chevron {
        transition: none;
    }
}

/* Account logout belongs to this app's menus and confirmation only. */
html[data-chat-app] .chat-app-logout-menu-row,
html[data-chat-app] #avatarMenu .chat-app-logout-menu-row {
    display: block;
    margin: 6px 0 0;
    padding: 0;
    border-top: 1px solid var(--chat-border-soft, #e0eefb);
    list-style: none;
}

html[data-chat-app] #avatarMenu .chat-app-logout-menu-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 7px 15px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    text-align: start;
    cursor: pointer;
}

html[data-chat-app] .chat-app-logout-menu-button.chat-nav-burger-item {
    margin-top: 6px;
    width: 100%;
}

html[data-chat-app] .chat-app-logout-menu-button.chat-nav-burger-item > i {
    order: -1;
}

html[data-chat-app] .chat-app-logout-overlay {
    --chat-app-logout-accent: #c84155;
    --chat-app-logout-danger: #c84155;
    --chat-app-logout-danger-hover: #b62f44;
    position: fixed;
    z-index: 10100;
    inset-inline: 0;
    top: var(--chat-app-viewport-top, 0px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--chat-app-viewport-height, 100dvh);
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(42, 57, 88, 0.30);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

html[data-chat-app] .chat-app-logout-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

html[data-chat-app] .chat-app-logout-overlay[hidden],
html[data-chat-app] .chat-app-logout-menu-row[hidden],
html[data-chat-app] #avatarMenu .chat-app-logout-menu-row[hidden],
html[data-chat-app] .chat-app-logout-menu-button[hidden],
html[data-chat-app] .chat-app-logout-warning[hidden],
html[data-chat-app] .chat-app-logout-error[hidden],
html[data-chat-app] .chat-app-logout-spinner[hidden] {
    display: none !important;
}

html[data-chat-app] .chat-app-logout-dialog {
    position: relative;
    width: 388px;
    max-width: 100%;
    max-height: 100%;
    padding: 28px 26px 24px;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--chat-border-soft, #e0eefb);
    border-radius: 24px;
    outline: 0;
    background: var(--chat-surface-card, #fff);
    color: var(--chat-text, #364866);
    box-shadow: 0 24px 70px rgba(36, 54, 83, 0.20), 0 4px 16px rgba(36, 54, 83, 0.07);
    scrollbar-width: thin;
    transform: translateY(10px) scale(0.97);
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html[data-chat-app] .chat-app-logout-overlay.is-open .chat-app-logout-dialog {
    transform: translateY(0) scale(1);
}

html[data-chat-app][data-chat-mode="dark"] .chat-app-logout-overlay {
    --chat-app-logout-accent: #ff9caa;
    background: rgba(6, 12, 22, 0.58);
}

html[data-chat-app][data-chat-mode="dark"] .chat-app-logout-dialog {
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38), 0 4px 16px rgba(0, 0, 0, 0.20);
}

html[data-chat-app] .chat-app-logout-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--chat-text-muted, #8394ad);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

html[data-chat-app] .chat-app-logout-close > svg {
    width: 18px;
    height: 18px;
}

html[data-chat-app] .chat-app-logout-close:hover {
    background: var(--chat-surface-2, #f2f7fd);
    color: var(--chat-text, #364866);
}

html[data-chat-app] .chat-app-logout-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border: 1px solid color-mix(in srgb, var(--chat-app-logout-accent) 15%, transparent);
    border-radius: 22px;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--chat-app-logout-accent) 12%, var(--chat-surface-card, #fff)),
        color-mix(in srgb, var(--chat-app-logout-accent) 5%, var(--chat-surface-card, #fff)));
    color: var(--chat-app-logout-accent);
}

html[data-chat-app] .chat-app-logout-symbol > svg {
    width: 44px;
    height: 44px;
    overflow: visible;
}

html[data-chat-app] .chat-app-logout-arrow {
    opacity: 0.5;
    transform: translateX(-3px);
    transition: transform 230ms ease 70ms, opacity 180ms ease 70ms;
}

html[data-chat-app] .chat-app-logout-overlay.is-open .chat-app-logout-arrow {
    opacity: 1;
    transform: translateX(0);
}

html[data-chat-app] #chatAppLogoutTitle {
    margin: 0;
    padding: 0;
    color: var(--chat-text, #364866);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
}

html[data-chat-app] .chat-app-logout-account {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 12px 14px;
    border: 1px solid var(--chat-border-soft, #e0eefb);
    border-radius: 15px;
    background: var(--chat-surface-2, #f2f7fd);
}

html[data-chat-app] #chatAppLogoutAvatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 2px solid var(--chat-surface-card, #fff);
    border-radius: 50%;
    object-fit: cover;
    image-rendering: auto;
}

html[data-chat-app] #chatAppLogoutName {
    min-width: 0;
    overflow: hidden;
    color: var(--chat-text, #364866);
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-chat-app] .chat-app-logout-warning,
html[data-chat-app] .chat-app-logout-error {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, #c88a20 24%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, #e9a52f 10%, var(--chat-surface-card, #fff));
    color: var(--chat-text, #364866);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

html[data-chat-app] .chat-app-logout-error {
    border-color: color-mix(in srgb, var(--chat-app-logout-accent) 24%, transparent);
    background: color-mix(in srgb, var(--chat-app-logout-accent) 8%, var(--chat-surface-card, #fff));
    color: var(--chat-app-logout-accent);
}

html[data-chat-app] .chat-app-logout-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 22px;
}

html[data-chat-app] .chat-app-logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid var(--chat-border-soft, #e0eefb);
    border-radius: 12px;
    background: var(--chat-surface-card, #fff);
    color: var(--chat-text, #364866);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

html[data-chat-app] .chat-app-logout-button.is-cancel:hover {
    background: var(--chat-surface-2, #f2f7fd);
}

html[data-chat-app] .chat-app-logout-button.is-confirm {
    border-color: var(--chat-app-logout-danger);
    background: var(--chat-app-logout-danger);
    color: #fff;
    box-shadow: 0 3px 9px color-mix(in srgb, var(--chat-app-logout-danger) 18%, transparent);
}

html[data-chat-app] .chat-app-logout-button.is-confirm:hover {
    border-color: var(--chat-app-logout-danger-hover);
    background: var(--chat-app-logout-danger-hover);
}

html[data-chat-app] .chat-app-logout-menu-button:focus-visible,
html[data-chat-app] .chat-app-logout-close:focus-visible,
html[data-chat-app] .chat-app-logout-button:focus-visible {
    outline: 2px solid var(--chat-primary, #2f9bf4);
    outline-offset: 3px;
}

html[data-chat-app] .chat-app-logout-button:disabled,
html[data-chat-app] .chat-app-logout-close:disabled {
    opacity: 0.58;
    cursor: default;
    box-shadow: none;
}

html[data-chat-app] .chat-app-logout-dialog[aria-busy="true"] .chat-app-logout-button.is-confirm {
    opacity: 0.85;
    cursor: progress;
}

html[data-chat-app] .chat-app-logout-dialog[aria-busy="true"] #chatAppLogoutConfirmLabel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-chat-app] .chat-app-logout-spinner {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: chatAppLogoutSpin 650ms linear infinite;
}

@keyframes chatAppLogoutSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
    html[data-chat-app] .chat-app-logout-overlay {
        padding: 16px;
    }

    html[data-chat-app] .chat-app-logout-dialog {
        padding: 26px 20px 20px;
        border-radius: 22px;
    }

    html[data-chat-app] #chatAppLogoutTitle {
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-chat-app] .chat-app-logout-overlay,
    html[data-chat-app] .chat-app-logout-dialog,
    html[data-chat-app] .chat-app-logout-arrow,
    html[data-chat-app] .chat-app-logout-menu-button,
    html[data-chat-app] .chat-app-logout-button,
    html[data-chat-app] .chat-app-logout-close {
        transition: none;
    }

    html[data-chat-app] .chat-app-logout-spinner {
        animation: none;
    }
}

/* Recent-photo menus escape the album panel's scrolling/clipping ancestors.
   Their labels determine the width; only the viewport can force wrapping. */
html[data-chat-app] .alb-recent-menu.alb-recent-menu-portal {
    position: fixed;
    z-index: 10060;
    inset: auto;
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 24px);
    max-height: calc(var(--chat-app-viewport-height, 100dvh) - 24px);
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
}

html[data-chat-app] .alb-recent-menu-portal .pav-menu-item > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

html[data-chat-app] .alb-recent-menu-portal .pav-menu-item > i {
    flex-shrink: 0;
}
/* Menus can live in a portal and cannot inherit their text colour from a card. */
html[data-chat-app] .chom-menu { color: var(--chat-text, #2e3a48); }
html[data-chat-app] .chom-menu [data-drop-comment] { color: var(--chat-danger, #dc2626); }
html[data-chat-app] .chat-sound-actions,
html[data-chat-app] .chat-sound-categories { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
html[data-chat-app] .chat-sounds-page a { text-decoration: none; color: var(--chat-text); padding: 10px 14px; width: auto; }
html[data-chat-app] .chat-sound-items { display: grid; gap: 8px; }
html[data-chat-app] .chat-sound-select { flex: 1; border: 0; background: transparent; text-align: left; color: var(--chat-text); padding: 14px; cursor: pointer; font: inherit; }
html[data-chat-app] .chat-sound-footer { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
html[data-chat-app] .chat-sounds-page button:disabled { opacity: .6; cursor: wait; }
html[data-chat-app] #chatPhoto { display: flex; flex: 1; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; }
html[data-chat-app] #chatPhoto.hidden,
html[data-chat-app] #chatPhoto:not(.hidden) ~ .messages-wrapper,
html[data-chat-app] #roomCreateView:not(.hidden) ~ .messages-wrapper { display: none !important; }
html[data-chat-app] #chatPhotoBody.pav-root { position: relative; inset: auto; z-index: auto; display: flex; flex: 1; width: 100%; min-height: 0; padding: 0; overflow: auto; background: transparent; backdrop-filter: none; }
html[data-chat-app] #chatPhotoBody > .pav-shell { width: 100%; max-width: none; max-height: none; min-height: 0; border-radius: 0; }
html[data-chat-app] #chatPhoto .pav-stage { min-width: 0; }
html[data-chat-app] #chatPhoto .pav-side { min-height: 0; }
html[data-chat-app] #chatPhoto a.pav-round,
html[data-chat-app] #chatPhoto a.pav-nav { display: flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 640px) {
    html[data-chat-app] .chat-sound-actions,
    html[data-chat-app] .chat-sound-categories { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
    html[data-chat-app] .chat-sounds-page nav a { flex-shrink: 0; white-space: nowrap; }
}
html[data-chat-app] a.new-room-btn { display: block; text-align: center; text-decoration: none; }
@media (max-width: 1000px) {
    html[data-chat-app] #chatPhotoBody { align-items: flex-start; }
    html[data-chat-app] #chatPhotoBody > .pav-shell { height: auto; min-height: 100%; flex-shrink: 0; }
    html[data-chat-app] #chatPhoto .pav-stage { flex: 0 0 auto; }
    html[data-chat-app] #chatPhoto .pav-frame { flex: none; height: clamp(180px, 40dvh, 460px); }
    html[data-chat-app] #chatPhoto .pav-side { flex: none; min-height: 360px; }
    html[data-chat-app] #chatPhoto .pav-comments { min-height: 300px; }
}