header.navbar {
    position: relative;
    min-height: 64px;
    background:
        linear-gradient(135deg, rgba(139,92,246,.20) 0%, rgba(236,72,153,.16) 100%),
        rgba(20,21,29,.82) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
}

header.navbar .fw-semibold {
    color: var(--text-main);
    letter-spacing: .2px;
}

.brand-mark__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: 0 10px 24px rgba(139,92,246,.28);
    flex: 0 0 auto;
}

.brand-mark__icon i {
    font-size: 18px;
    line-height: 1;
}

.brand-mark__title {
    color: #fff;
    letter-spacing: .2px;
}

.brand-mark__subtitle {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

main {
    background: transparent;
}

main > section,
main > aside {
    min-width: 0;
}

section.flex-grow-1.overflow-hidden {
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
        rgba(20,21,29,.58) !important;
    backdrop-filter: blur(10px);
}

/* Desktop layout: keep the right sidebar at a fixed width.
   Without flex-basis/min-width the message area can squeeze the sidebar,
   especially when messages contain long text or media. */
.sidebar-fixed {
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
    flex: 0 0 var(--sidebar-width) !important;
}

main > section.flex-grow-1.overflow-hidden {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.min-w-0 {
    min-width: 0;
}

.gallery-files-input {
    max-width: 420px;
}

.gallery-dropzone {
    border-style: dashed !important;
    cursor: pointer;
}

.image-view-full {
    display: block;
    max-width: 100%;
    max-height: 85vh;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    animation: galleryZoom .22s ease;
}

@keyframes galleryZoom {
    from {
        opacity: 0;
        transform: scale(.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.p-2.border-bottom .input-group,
aside .p-2.border-bottom .input-group {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,.03);
}

.input-group > * {
    border: none !important;
    background: transparent !important;
}

.input-group-text {
    padding: 0 10px !important;
    color: var(--text-muted) !important;
}

.input-group .form-control {
    border: none !important;
    background: transparent !important;
}

.input-group-text:hover {
    color: #fff !important;
}

#chatTabs {
    position: relative;
    z-index: 2;
    gap: 10px;
    padding-top: 14px !important;
    padding-bottom: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
        rgba(17,18,25,.88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line) !important;
}

#chatTabs .nav-item {
    min-width: 0;
}

#chatTabs .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 42px;
    padding: .62rem .95rem;
    color: var(--text-soft);
    border-radius: 999px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.06) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 8px 20px rgba(0,0,0,.10);
    transition: .2s ease;
}

#chatTabs .nav-link:hover {
    color: var(--text-main);
    transform: translateY(-1px);
    background:
        linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.028));
    border-color: rgba(139,92,246,.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 12px 28px rgba(0,0,0,.14);
}

#chatTabs .nav-link.active {
    color: #fff;
    background:
        linear-gradient(135deg, rgba(139,92,246,.95), rgba(236,72,153,.92));
    box-shadow:
        0 16px 36px rgba(139,92,246,.28),
        0 0 12px rgba(236,72,153,.18);
}

#chatTabs .tab-title,
#chatTabs .dm-tab-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: .15px;
}

#chatTabs .dm-tab-close {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    padding: 0;
    margin-left: .35rem;
    line-height: 1;
    color: inherit;
    opacity: .78;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: .2s ease;
    border-radius: 50%;
}

#chatTabs .dm-tab-close i {
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

#chatTabs .dm-tab-close:hover {
    opacity: 1;
    background: rgba(255,255,255,.14);
    transform: scale(1.05);
}

#chatTabs .nav-link.active .dm-tab-close:hover {
    background: rgba(255,255,255,.18);
}

#chatTabContent {
    position: relative;
    background:
        radial-gradient(circle at top center, rgba(139,92,246,.06), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.01));
}

#chatTabContent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(18,19,27,0), rgba(18,19,27,.18));
}

#messages,
.tab-pane > .h-100.overflow-auto,
.chat-messages,
#online,
#onlineMobile,
#galleryModal .modal-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}

#messages::-webkit-scrollbar,
.tab-pane > .h-100.overflow-auto::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
#online::-webkit-scrollbar,
#onlineMobile::-webkit-scrollbar,
#galleryModal .modal-body::-webkit-scrollbar {
    width: 10px;
}

#messages::-webkit-scrollbar-thumb,
.tab-pane > .h-100.overflow-auto::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
#online::-webkit-scrollbar-thumb,
#onlineMobile::-webkit-scrollbar-thumb,
#galleryModal .modal-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

#messages::-webkit-scrollbar-track,
.tab-pane > .h-100.overflow-auto::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

#messages {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

#messages::before,
#messages::after {
    content: "";
    position: sticky;
    left: 0;
    right: 0;
    height: 16px;
    z-index: 1;
    pointer-events: none;
}

#messages::before {
    top: 0;
    background: linear-gradient(180deg, rgba(18,19,27,.9), rgba(18,19,27,0));
}

#messages::after {
    bottom: 0;
    background: linear-gradient(180deg, rgba(18,19,27,0), rgba(18,19,27,.9));
}

.chat-card {
    height: calc(100vh - 120px);
}

.chat-messages {
    height: calc(100% - 70px);
    overflow: auto;
    white-space: pre-wrap;
}

.msg {
    position: relative;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.06);
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
    box-shadow:
        0 10px 26px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter: blur(6px);
    transition: .2s ease;
    transform-origin: bottom;
}

.msg::before {
    display: none;
}

.msg:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow:
        0 14px 34px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.msg:last-child {
    margin-bottom: 0;
}

.msg .meta {
    display: none;
    font-size: 12px;
    color: var(--text-muted);
}

.msg-line {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: nowrap;
    min-width: 0;
}

.msg-time,
.msg-name,
.msg-text {
    display: inline;
}

.msg-time {
    font-size: 11px;
    color: #8f96aa;
    min-width: 44px;
    white-space: nowrap;
    flex: 0 0 auto;
    letter-spacing: .2px;
}

.msg-name {
    position: relative;
    top: -1px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    flex: 0 0 auto;
    letter-spacing: .1px;
    text-decoration: none;
    cursor: pointer;
}

.msg-name:hover {
    text-decoration: none !important;
    color: #7c9cff;
    text-shadow: 0 0 6px rgba(124,156,255,.4);
}

.msg .msg-name.msg-name--male {
    color: #4da3ff !important;
    text-shadow: 0 0 8px rgba(77, 163, 255, .28);
}

.msg .msg-name.msg-name--female {
    color: #ff5fb7 !important;
    text-shadow: 0 0 8px rgba(255, 95, 183, .3);
}

.msg .msg-name.msg-name--male:hover {
    color: #7dbdff !important;
    text-shadow: 0 0 10px rgba(125, 189, 255, .45);
}

.msg .msg-name.msg-name--female:hover {
    color: #ff86c9 !important;
    text-shadow: 0 0 10px rgba(255, 134, 201, .45);
}

.msg-text {
    color: #eef1f8;
    white-space: pre-wrap;
    word-break: break-word;
    min-width: 0;
    line-height: 1.5;
}

.msg a {
    color: #d7c8ff;
    text-decoration: none;
}

.msg a:hover {
    color: #fff;
    text-decoration: underline;
}

.msg--pending {
    opacity: .72;
    filter: saturate(.9);
}

.msg--pending::before {
    display: none;
}

.msg--failed {
    opacity: .78;
    border-color: rgba(255, 193, 7, .45);
}

.msg--failed::before {
    display: none;
}

.msg-send-status {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(255, 193, 7, .12);
    border: 1px solid rgba(255, 193, 7, .26);
    color: #ffd86b;
    font-size: 12px;
    line-height: 1.35;
}

.msg--system {
    padding-left: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
    border-style: dashed;
    color: var(--text-soft);
    font-style: italic;
}

.msg--system::before {
    display: none;
}

.msg--me {
    background:
        linear-gradient(135deg, rgba(139,92,246,.20), rgba(236,72,153,.14)),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border-color: rgba(236,72,153,.16);
}

.msg--other {
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
}

.msg--new {
    animation: msgAppear .12s ease-out;
}

@keyframes msgAppear {
    from { opacity: .72; }
    to { opacity: 1; }
}

.chat-image-thumb,
.message-image-thumb,
.msg-thumb,
.chat-message img[data-full],
.chat-message a.image-thumb,
.msg img,
.img-thumbnail.chat-thumb {
    cursor: pointer;
    max-width: min(240px, 100%);
    max-height: 240px;
    display: block;
    margin-top: 6px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.img-thumbnail.chat-thumb {
    max-width: 160px;
}

.msg img:hover,
.gallery-thumb:hover {
    transform: scale(1.04);
}

.gallery-grid {
    gap: 14px;
}

.gallery-thumb {
    position: relative;
    height: 130px;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    background: #111827;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.gallery-thumb-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .25s ease;
}

.gallery-thumb-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.62) 100%);
    opacity: .95;
    transition: opacity .18s ease;
    pointer-events: none;
}

.gallery-thumb-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: .18s ease;
    z-index: 3;
}

.gallery-action-btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(17,24,39,.72);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: .18s ease;
}

.gallery-action-btn:hover {
    background: rgba(31,41,55,.92);
    color: #fff;
    transform: scale(1.06);
}

.gallery-action-btn--danger:hover {
    background: rgba(220,53,69,.92);
}

.gallery-thumb-caption {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    z-index: 2;
    pointer-events: none;
}

.gallery-thumb-name {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-thumb:hover {
    transform: translateY(-3px);
    border-color: rgba(139,92,246,.38);
    box-shadow:
        0 14px 32px rgba(0,0,0,.28),
        0 0 0 1px rgba(139,92,246,.16);
}

.gallery-thumb:hover .gallery-thumb-img {
    transform: scale(1.04);
}

.gallery-thumb:hover .gallery-thumb-actions {
    opacity: 1;
    transform: translateY(0);
}

.gallery-thumb.selected {
    border-color: #8b5cf6;
    box-shadow:
        0 0 0 2px rgba(139,92,246,.30),
        0 14px 34px rgba(0,0,0,.30);
    transform: translateY(-2px);
}

.gallery-thumb.selected::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid rgba(139,92,246,.9);
    border-radius: 16px;
    pointer-events: none;
    z-index: 4;
}

.gallery-thumb.selected::after {
    content: "✓";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8b5cf6;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(139,92,246,.45);
    z-index: 5;
    pointer-events: none;
}

#galleryDropzone {
    position: relative;
    border-radius: 16px !important;
    border: 2px dashed rgba(255,255,255,.15) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    transition: .2s ease;
    text-align: center;
}

#galleryDropzone:hover {
    border-color: rgba(139,92,246,.45) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

#galleryDropzone.dragover {
    border-color: rgba(236,72,153,.7) !important;
    background:
        linear-gradient(180deg, rgba(236,72,153,.12), rgba(139,92,246,.08));
    box-shadow: 0 0 20px rgba(236,72,153,.25);
}

#galleryUploadBtn {
    min-height: 44px;
    font-weight: 500;
    letter-spacing: .2px;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(139,92,246,.25);
}

#galleryUploadBtn:hover {
    transform: translateY(-1px) scale(1.02);
}

#galleryModal .modal-content,
#galleryModal .modal-content * {
    color: #e5e7eb !important;
}

#galleryModal .text-muted {
    color: #9ca3af !important;
}

#galleryModal input,
#galleryModal .form-control,
#galleryModal .btn {
    color: #fff !important;
}

#galleryModal .modal-header {
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    backdrop-filter: blur(12px);
}

#galleryModal .modal-title {
    font-weight: 600;
    letter-spacing: .3px;
}

#galleryModal .btn-close {
    opacity: .7;
    transition: .2s ease;
}

#galleryModal .btn-close:hover {
    opacity: 1;
    transform: scale(1.08);
}

#imageViewModal .modal-content {
    background:
        radial-gradient(circle at top, rgba(255,255,255,.05), rgba(10,10,14,.98));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
}

#imageViewModal .modal-header {
    padding-top: 10px;
    padding-bottom: 0;
}

#imageViewModal .modal-body {
    padding: 12px 12px 18px;
}

.sex-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border-radius: 6px;
    opacity: .95;
}

.sex-badge.m {
    color: #60a5fa;
}

.sex-badge.f {
    color: #f472b6;
}

.sex-ic {
    width: 16px;
    height: 16px;
    fill: currentColor;
    display: block;
}

.typing-indicator {
    min-height: 38px;
    font-size: .875rem;
    color: #bcc3d6;
    padding: .55rem 1rem .8rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
        rgba(16,17,24,.82);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.typing-indicator:empty {
    display: none;
}

.dm-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
}

.dm-typing-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .25;
    display: inline-block;
    animation: dmTypingBlink 1s infinite;
}

.dm-typing-dots i:nth-child(2) { animation-delay: .15s; }
.dm-typing-dots i:nth-child(3) { animation-delay: .3s; }

@keyframes dmTypingBlink {
    0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-1px); }
}

aside.d-none.d-lg-flex.flex-column.border-start {
    width: var(--sidebar-width) !important;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015)),
        rgba(20,21,29,.72) !important;
    backdrop-filter: blur(12px);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}

aside.d-none.d-lg-flex.flex-column.border-start::-webkit-scrollbar {
    width: 10px;
}

aside.d-none.d-lg-flex.flex-column.border-start::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

#online,
#onlineMobile {
    padding: 10px;
}

/* Desktop sidebar scroll policy: one scrollbar for the whole right sidebar,
   not separate scrollbars inside the rooms or online lists. */
aside.sidebar-fixed #online.main-sidebar-mode {
    overflow: visible !important;
    flex: 0 0 auto !important;
}


#online .list-group-item,
#onlineMobile .list-group-item,
#online > button,
#onlineMobile > button,
#online > a,
#onlineMobile > a,
#online > div,
#onlineMobile > div {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 8px;
    padding: 12px 14px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
    color: var(--text-main);
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    backdrop-filter: blur(10px);
    text-align: left;
    overflow: hidden;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

#online .list-group-item:hover,
#onlineMobile .list-group-item:hover,
#online > button:hover,
#onlineMobile > button:hover,
#online > a:hover,
#onlineMobile > a:hover,
#online > div:hover,
#onlineMobile > div:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
    border-color: rgba(139,92,246,.26) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.2);
}

#online > .active,
#onlineMobile > .active,
#online > .list-group-item.active,
#onlineMobile > .list-group-item.active {
    background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(236,72,153,.16)) !important;
    border-color: rgba(236,72,153,.22) !important;
    color: #fff !important;
    box-shadow:
        0 0 0 1px rgba(236,72,153,.25),
        0 0 20px rgba(236,72,153,.18),
        0 0 40px rgba(139,92,246,.12);
}

#online > .list-group-item::before,
#onlineMobile > .list-group-item::before,
#online > button::before,
#onlineMobile > button::before,
#online > a::before,
#onlineMobile > a::before,
#online > div::before,
#onlineMobile > div::before {
    content: "";
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(34,197,94,.12), 0 0 10px rgba(34,197,94,.35);
}

#online > *,
#onlineMobile > * {
    position: relative;
}

#online > *::after,
#onlineMobile > *::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 20% 20%, rgba(139,92,246,.18), transparent 60%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

#online > *:hover::after,
#onlineMobile > *:hover::after {
    opacity: 1;
}

#online .sex-badge,
#onlineMobile .sex-badge {
    margin-right: 2px;
}

#online .badge,
#onlineMobile .badge {
    margin-left: auto;
    flex: 0 0 auto;
}

#online .fw-semibold,
#onlineMobile .fw-semibold,
#online strong,
#onlineMobile strong {
    color: #fff;
    letter-spacing: .1px;
}

#online small,
#onlineMobile small,
#online .text-muted,
#onlineMobile .text-muted {
    color: var(--text-muted) !important;
}

#online .list-group-item > *,
#onlineMobile .list-group-item > *,
#online > button > *,
#onlineMobile > button > *,
#online > a > *,
#onlineMobile > a > *,
#online > div > *,
#onlineMobile > div > * {
    min-width: 0;
}

.mobile-users-panel__header .fw-semibold,
aside .px-3.py-2 .fw-semibold {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #fff;
    letter-spacing: .2px;
}

.mobile-users-panel__header .badge,
aside .px-3.py-2 .badge,
.badge.text-bg-secondary,
.badge.bg-secondary {
    flex: 0 0 auto;
    background: rgba(255,255,255,.10) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(255,255,255,.08);
    font-weight: 600;
}

footer {
    position: relative;
    z-index: 3;
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
        rgba(14,15,22,.92) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    backdrop-filter: blur(20px);
    box-shadow:
        0 -12px 30px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.03);
}

footer .d-flex {
    align-items: center;
}

footer .flex-grow-1.d-flex.align-items-center.gap-2.pe-2 {
    position: relative;
    padding: 8px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
    border: 1px solid rgba(255,255,255,.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 10px 26px rgba(0,0,0,.12);
}

footer .flex-grow-1.d-flex.align-items-center.gap-2.pe-2:focus-within {
    border-color: rgba(139,92,246,.35);
    box-shadow:
        0 0 0 2px rgba(139,92,246,.14),
        0 12px 28px rgba(139,92,246,.12);
}

footer .form-control#msgInput {
    height: 50px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 16px !important;
    border: 1px solid transparent !important;
    background: rgba(255,255,255,.03) !important;
    box-shadow: none !important;
    font-size: 15px;
    line-height: 1.2;
}

footer .form-control#msgInput:hover {
    background: rgba(255,255,255,.045) !important;
    border-color: rgba(255,255,255,.05) !important;
}

footer .form-control#msgInput:focus {
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(139,92,246,.26) !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,.10) !important;
}

#sendBtn,
#galleryBtn {
    position: relative;
    overflow: hidden;
}

#galleryBtn::before,
#sendBtn::before,
#autoScrollBtn::before,
#settingsBtn::before,
#logoutBtn::before,
#autoScrollBtnMobile::before,
#settingsBtnMobile::before,
#logoutBtnMobile::before,
#mobileUsersToggleFooter::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}

#galleryBtn:hover::before,
#sendBtn:hover::before,
#autoScrollBtn:hover::before,
#settingsBtn:hover::before,
#logoutBtn:hover::before,
#autoScrollBtnMobile:hover::before,
#settingsBtnMobile:hover::before,
#logoutBtnMobile:hover::before,
#mobileUsersToggleFooter:hover::before {
    opacity: .9;
}

#galleryBtn {
    width: 48px;
    height: 48px;
    border-radius: 16px !important;
    flex: 0 0 auto;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)) !important;
    border-color: rgba(255,255,255,.06) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 10px 22px rgba(0,0,0,.10);
}

#galleryBtn:hover {
    border-color: rgba(139,92,246,.18) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
}

#sendBtn {
    min-width: 52px;
    height: 50px;
    border-radius: 16px !important;
    padding-inline: 1rem;
    box-shadow:
        0 14px 28px rgba(139,92,246,.22),
        inset 0 1px 0 rgba(255,255,255,.12);
}

#sendBtn i {
    position: relative;
    left: 1px;
}

#sendBtn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 18px 40px rgba(139,92,246,.28),
        0 0 20px rgba(236,72,153,.18);
}

footer .d-none.d-lg-flex.align-items-center.gap-2.ps-2 {
    width: var(--sidebar-width) !important;
    justify-content: flex-end;
    padding-left: 14px !important;
}

#autoScrollBtn,
#settingsBtn,
#logoutBtn {
    min-width: 42px;
    height: 42px;
    border-radius: 14px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 8px 18px rgba(0,0,0,.10);
}

.d-flex.d-lg-none.align-items-center.gap-2 {
    padding: 2px 0 0;
}

#mobileUsersToggleFooter,
#autoScrollBtnMobile,
#settingsBtnMobile,
#logoutBtnMobile {
    min-width: 44px;
    height: 40px;
    border-radius: 14px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 8px 18px rgba(0,0,0,.10);
}

.mobile-users-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 1040;
    backdrop-filter: blur(4px);
}

.mobile-users-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 88vw);
    height: 100vh;
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
        rgba(19,20,28,.96);
    border-left: 1px solid var(--line);
    box-shadow: -16px 0 40px rgba(0,0,0,.34);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

.mobile-users-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid var(--line);
    color: var(--text-main);
}

body.mobile-users-open .mobile-users-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.mobile-users-open .mobile-users-panel {
    transform: translateX(0);
}

body.mobile-users-open {
    overflow: hidden;
}

.modal-header.py-2 {
    padding-top: .85rem !important;
    padding-bottom: .85rem !important;
}

#galleryDropzone {
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    border-color: rgba(255,255,255,.10) !important;
}

#galleryDropzone:hover {
    border-color: rgba(139,92,246,.24) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

.user-link {
    color: #e5e7eb;
    text-decoration: none !important;
    transition: .15s ease;
}

.user-link:hover {
    color: #8b5cf6;
    text-decoration: none !important;
    text-shadow: 0 0 6px rgba(139,92,246,.4);
}

.user-link:focus,
.user-link:active {
    text-decoration: none !important;
    outline: none;
    box-shadow: none;
}

* {
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        color .18s ease;
}

button:active,
.nav-link:active,
.list-group-item:active {
    transform: scale(0.97);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 10%, rgba(139,92,246,.08), transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(236,72,153,.06), transparent 40%);
    z-index: 0;
}

@media (min-width: 992px) {
    .mobile-users-backdrop,
    .mobile-users-panel {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    header.navbar {
        min-height: 60px;
    }

    #chatTabs {
        gap: 8px;
        padding-top: 12px !important;
        padding-bottom: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    #chatTabs::-webkit-scrollbar {
        display: none;
    }

    #chatTabs .nav-link {
        flex: 0 0 auto;
    }

    #messages,
    .tab-pane > .h-100.overflow-auto {
        padding: 14px !important;
    }

    .msg {
        padding: 10px 12px;
        border-radius: 16px;
    }

    .msg-line {
        gap: .45rem;
    }

    .msg-time {
        min-width: 42px;
        font-size: 11px;
    }

    footer {
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }

    footer .d-flex {
        min-width: 0;
    }

    footer .flex-grow-1.d-flex.align-items-center.gap-2.pe-2 {
        padding: 7px;
        border-radius: 18px;
    }

    footer .form-control#msgInput {
        height: 46px;
        border-radius: 14px !important;
    }

    #galleryBtn,
    #sendBtn {
        width: 46px;
        min-width: 46px;
        height: 46px;
        border-radius: 14px !important;
        padding-inline: 0;
    }

    #autoScrollBtnMobile,
    #settingsBtnMobile,
    #logoutBtnMobile,
    #mobileUsersToggleFooter {
        min-width: 42px;
        min-height: 38px;
    }

    button:active,
    .nav-link:active {
        transform: scale(0.95);
    }

    .msg:hover {
        transform: none;
    }
}

@media (max-width: 575.98px) {
    header.navbar {
        padding-left: .85rem !important;
        padding-right: .85rem !important;
    }

    #messages,
    .tab-pane > .h-100.overflow-auto {
        padding: 12px !important;
    }

    .msg {
        margin-bottom: 8px;
        padding: 11px 12px;
        border-radius: 16px;
    }

    .msg::before {
        border-radius: 6px;
    }

    .msg-line {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .msg-name {
        max-width: 100%;
    }

    .msg-text {
        flex-basis: 100%;
        padding-left: calc(42px + .45rem);
        font-size: 14px;
    }

    footer {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    footer .flex-grow-1.d-flex.align-items-center.gap-2.pe-2,
    footer .flex-grow-1.d-flex.align-items-center.gap-2.pe-2 .d-flex,
    footer .flex-grow-1.d-flex.align-items-center.gap-2.pe-2 .flex-grow-1 {
        min-width: 0;
    }

    footer .flex-grow-1.d-flex.align-items-center.gap-2.pe-2 {
        gap: .5rem !important;
    }

    #galleryBtn,
    #sendBtn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding-inline: 0;
    }

    footer .form-control#msgInput {
        height: 44px;
        font-size: 14px;
    }

    .d-flex.d-lg-none.align-items-center.gap-2 {
        gap: .45rem !important;
    }

    #mobileUsersToggleFooter,
    #autoScrollBtnMobile,
    #settingsBtnMobile,
    #logoutBtnMobile {
        min-width: 40px;
        height: 38px;
        border-radius: 12px !important;
    }

    #online,
    #onlineMobile {
        padding: 8px;
    }

    #online > .list-group-item,
    #onlineMobile > .list-group-item,
    #online > button,
    #onlineMobile > button,
    #online > a,
    #onlineMobile > a,
    #online > div,
    #onlineMobile > div {
        padding: 11px 12px !important;
        border-radius: 14px !important;
    }
}

.message-highlight {
  animation: highlightFade 1.2s ease-out;
  background: rgba(250, 204, 21, 0.08);
  box-shadow: none;
}

@keyframes highlightFade {
  from { background: rgba(250, 204, 21, 0.14); }
  to { background: transparent; }
}

.new-messages-btn {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: #0d6efd;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* === Sprint 3: app header + global actions === */
.app-header {
    z-index: 1030;
}

.app-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    min-width: 0;
    flex-wrap: wrap;
}

.app-header__actions .btn,
.app-header__actions .dropdown-toggle {
    min-height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.app-header__actions .btn-outline-light {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: var(--text-main);
}

.app-header__actions .btn-outline-light:hover,
.app-header__actions .btn-outline-light:focus-visible {
    border-color: rgba(255,255,255,.24);
    background: rgba(255,255,255,.10);
    color: #fff;
}

.app-header__telegram {
    text-decoration: none;
}

.app-header__unread .badge {
    min-width: 24px;
    font-size: 12px;
}

.app-header__profile-menu {
    min-width: 240px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 44px rgba(0,0,0,.28);
    overflow: hidden;
}

.dm-tab-status {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    margin-inline: .2rem;
    background: rgba(148, 163, 184, .8);
    box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

.dm-tab-status.is-online {
    background: #22c55e;
    box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 0 0 4px rgba(34,197,94,.14);
}

.gallery-pending-wrap {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
}

.gallery-pending-item {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(15,23,42,.55);
    min-height: 104px;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.gallery-pending-item img {
    width: 100%;
    height: 104px;
    object-fit: cover;
    display: block;
}

.gallery-pending-meta {
    padding: 8px 10px;
}

.gallery-pending-name {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-pending-size {
    font-size: 11px;
    color: #9ca3af;
}

.gallery-pending-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,.78);
    color: #fff;
    backdrop-filter: blur(8px);
}

.gallery-pending-remove:hover {
    background: rgba(220,53,69,.95);
}

.chat-composer {
    width: 100%;
}

.chat-composer > .btn,
.chat-composer > .form-control {
    min-height: 46px;
    border-radius: 14px;
}

.chat-composer > .form-control {
    flex: 1 1 auto;
}

.chat-composer #sendBtn {
    padding-inline: 1rem;
}

footer.flex-shrink-0 {
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
        rgba(17,18,25,.86) !important;
    backdrop-filter: blur(14px);
}

@media (max-width: 991.98px) {
    .app-header__actions {
        gap: .4rem;
    }

    .chat-composer {
        gap: .5rem !important;
        flex-wrap: wrap;
    }

    .chat-composer > .form-control {
        order: 2;
        width: 100%;
        flex-basis: 100%;
    }

    .chat-composer #sendBtn {
        margin-left: auto;
    }
}

@media (max-width: 575.98px) {
    .brand-mark__subtitle {
        display: none;
    }

    .app-header {
        padding-top: .65rem !important;
        padding-bottom: .65rem !important;
    }

    .app-header__actions {
        gap: .35rem;
    }

    .app-header__actions .btn,
    .app-header__actions .dropdown-toggle {
        min-width: 38px;
        padding-inline: .7rem;
    }

    .chat-composer > .btn {
        flex: 0 0 auto;
    }
}


/* === Sprint 3 fixes: DM auto-open, header unread, composer layout === */
.app-header__unread {
    position: relative;
}

.app-header__unread .badge {
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 .45rem;
}

.app-header__unread.has-unread {
    border-color: rgba(236,72,153,.38);
    background: rgba(236,72,153,.12);
}

.chat-footer {
    position: relative;
    z-index: 1020;
}

.chat-footer__inner {
    width: 100%;
    min-width: 0;
}

.chat-composer__tools .btn,
.chat-composer__input-row .btn,
.chat-composer__input-row .form-control {
    min-height: 46px;
    border-radius: 14px;
}

.chat-composer__tools {
    flex-wrap: nowrap;
}

.chat-composer__input-row {
    width: 100%;
}

.chat-composer__input-row #msgInput {
    flex: 1 1 auto;
}

.chat-composer__input-row #sendBtn {
    flex: 0 0 auto;
}

@media (min-width: 992px) {
    .chat-footer__inner {
        max-width: calc(100% - var(--sidebar-width));
        padding-right: 12px;
    }

    .chat-composer {
        flex-direction: row !important;
        align-items: center;
    }

    .chat-composer__tools {
        flex: 0 0 auto;
    }

    .chat-composer__input-row {
        flex: 1 1 auto;
    }
}

@media (max-width: 991.98px) {
    .chat-composer__tools {
        width: 100%;
    }

    .chat-composer__input-row {
        width: 100%;
    }
}
.mention {
    color: #8b5cf6;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(139,92,246,.12);
}

.mention--me {
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    box-shadow: 0 0 8px rgba(236,72,153,.4);
}


/* === Mobile Safari + swipe reply polish === */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    overscroll-behavior-x: none;
}

.app-shell {
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.app-shell > header,
.app-shell > main,
.app-shell > footer,
.app-shell section,
.app-shell aside,
#chatTabContent,
#tab-main,
#messages,
.chat-footer__inner,
.chat-composer,
.chat-composer__tools,
.chat-composer__input-row {
    min-width: 0;
    max-width: 100%;
}

.chat-footer {
    padding-bottom: max(.5rem, env(safe-area-inset-bottom)) !important;
}

@supports (padding: max(0px)) {
    .app-header {
        padding-top: max(.5rem, env(safe-area-inset-top)) !important;
    }
}

.msg--swipe-reply {
    position: relative;
    touch-action: pan-y;
    will-change: transform;
}

.msg--swipe-reply::after {
    content: "\F4CA";
    font-family: "bootstrap-icons";
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%) scale(.8);
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(139,92,246,.16);
    color: rgba(255,255,255,.85);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, background .18s ease;
}

.msg--swiping::after {
    opacity: .82;
}

.msg--reply-ready::after,
.msg--reply-flash::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    background: linear-gradient(135deg, rgba(139,92,246,.9), rgba(236,72,153,.88));
    color: #fff;
}

.msg--reply-flash {
    box-shadow:
        0 0 0 1px rgba(139,92,246,.32),
        0 14px 32px rgba(139,92,246,.16);
}

@media (max-width: 991.98px) {
    .app-header {
        position: relative;
        padding-left: max(.75rem, env(safe-area-inset-left)) !important;
        padding-right: max(.75rem, env(safe-area-inset-right)) !important;
    }

    .brand-mark {
        min-width: 0;
        flex: 1 1 auto;
    }

    .brand-mark__icon {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }

    .brand-mark__title {
        font-size: 15px;
    }

    .app-header__actions {
        flex: 0 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        gap: .35rem;
    }

    .app-header__actions .btn,
    .app-header__actions .dropdown > .btn {
        padding-inline: .72rem;
    }

    main {
        min-width: 0;
        overflow-x: hidden;
    }

    section.flex-grow-1.overflow-hidden {
        min-width: 0;
        width: 100%;
    }

    #chatTabs {
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    #messages,
    .tab-pane > .h-100.overflow-auto {
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .msg {
        overflow: hidden;
    }

    .msg-line,
    .msg-name-wrap,
    .msg-text {
        min-width: 0;
    }

    .chat-footer {
        padding-left: max(.75rem, env(safe-area-inset-left)) !important;
        padding-right: max(.75rem, env(safe-area-inset-right)) !important;
        padding-bottom: max(.75rem, env(safe-area-inset-bottom)) !important;
    }

    .chat-footer__inner {
        padding-right: 0;
    }

    .chat-composer {
        gap: .65rem !important;
    }

    .chat-composer__tools {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .chat-composer__tools::-webkit-scrollbar {
        display: none;
    }

    .chat-composer__input-row {
        width: 100%;
        align-items: stretch;
    }

    .chat-composer__input-row #msgInput {
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .app-shell {
        min-height: 100svh;
        min-height: 100dvh;
    }

    .app-header {
        gap: .5rem;
    }

    .brand-mark__title {
        font-size: 14px;
    }

    .app-header__actions .btn,
    .app-header__actions .dropdown > .btn {
        min-width: 38px;
        padding-inline: .65rem;
    }

    .app-header__unread .badge {
        min-width: 20px;
        height: 20px;
        font-size: 11px;
    }

    #messages,
    .tab-pane > .h-100.overflow-auto {
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }

    .chat-composer__tools .btn,
    .chat-composer__input-row .btn,
    .chat-composer__input-row .form-control {
        min-height: 44px;
    }
}


/* === Mobile layout fix: keep header/footer visible on iPhone Safari === */
.app-shell,
.app-shell > main,
.app-shell > main > section,
.app-shell > main > section > .d-flex,
#chatTabContent,
#chatTabContent > .tab-pane,
#chatTabContent > .tab-pane > .position-relative {
    min-height: 0;
}

#chatTabContent > .tab-pane > .position-relative {
    display: flex;
    flex-direction: column;
}

#messages {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 991.98px) {
    .app-shell {
        height: 100svh;
        height: 100dvh;
    }

    .app-shell > main {
        flex: 1 1 auto;
        min-height: 0;
    }

    .app-header {
        position: sticky;
        top: 0;
        z-index: 1040;
    }

    .chat-footer {
        position: sticky;
        bottom: 0;
        z-index: 1040;
        margin-top: auto;
    }

    .chat-footer__inner {
        width: 100%;
        max-width: 100%;
    }

    #chatTabContent::after {
        display: none;
    }

    #messages {
        padding-bottom: 22px !important;
        scroll-padding-bottom: 22px;
    }
}

@media (max-width: 575.98px) {
    .app-header > .d-flex {
        gap: .5rem !important;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .brand-mark {
        gap: .75rem !important;
        min-width: 0;
        overflow: hidden;
    }

    .brand-mark > .d-flex {
        min-width: 0;
        overflow: hidden;
    }

    .brand-mark__title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-header__actions {
        flex: 0 0 auto;
        gap: .3rem !important;
    }

    .app-header__actions .btn,
    .app-header__actions .dropdown > .btn {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0 !important;
        justify-content: center;
    }

    .app-header__actions .btn span,
    .app-header__actions .dropdown > .btn span {
        display: none !important;
    }

    #chatTabs {
        padding-top: 10px !important;
        padding-bottom: 8px !important;
    }

    .chat-composer {
        gap: .55rem !important;
    }

    .chat-composer__tools {
        gap: .45rem !important;
        padding-right: 0;
    }

    .chat-composer__input-row {
        gap: .5rem !important;
        min-width: 0;
    }

    .chat-composer__input-row #msgInput {
        flex: 1 1 0%;
        width: 100%;
    }

    .chat-composer__input-row #sendBtn {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0 !important;
    }

    .msg {
        scroll-margin-top: 74px;
    }
}
:root {
    --mobile-composer-height: 120px;
}

@media (max-width: 991.98px) {
    html,
    body {
        overflow-x: hidden;
        height: 100%;
    }

    body {
        min-height: 100dvh;
    }

    main,
    #chatTabContent,
    .tab-pane,
    .tab-pane > .h-100.overflow-auto,
    #messages {
        min-height: 0;
    }

    .chat-footer {
        position: sticky;
        bottom: 0;
        z-index: 1035;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    #messages,
    .tab-pane > .h-100.overflow-auto,
    .chat-messages {
        padding-bottom: calc(var(--mobile-composer-height) + env(safe-area-inset-bottom) + 18px) !important;
        scroll-padding-bottom: calc(var(--mobile-composer-height) + env(safe-area-inset-bottom) + 18px);
    }

    .chat-footer__inner {
        padding-bottom: 0;
    }

    .chat-composer {
        width: 100%;
        max-width: 100%;
    }

    .chat-composer__input-row {
        min-width: 0;
        width: 100%;
    }

    .chat-composer__input-row #msgInput {
        min-width: 0;
        width: 100%;
    }

    .chat-composer__input-row #sendBtn {
        flex: 0 0 52px;
        width: 52px;
        min-width: 52px;
        max-width: 52px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --mobile-composer-height: 132px;
    }

    .chat-footer {
        padding-left: max(.75rem, env(safe-area-inset-left));
        padding-right: max(.75rem, env(safe-area-inset-right));
    }

    #messages,
    .tab-pane > .h-100.overflow-auto,
    .chat-messages {
        padding-bottom: calc(var(--mobile-composer-height) + env(safe-area-inset-bottom) + 22px) !important;
        scroll-padding-bottom: calc(var(--mobile-composer-height) + env(safe-area-inset-bottom) + 22px);
    }
}


/* === Mobile viewport lock: keep header/footer visible and messages above composer === */
:root {
    --app-vh: 100dvh;
}

@media (max-width: 991.98px) {
    html,
    body {
        height: 100%;
        overflow: hidden !important;
    }

    body {
        position: relative;
    }

    .app-shell {
        position: fixed;
        inset: 0;
        height: var(--app-vh, 100dvh) !important;
        min-height: var(--app-vh, 100dvh) !important;
        overflow: hidden;
    }

    .app-shell > main {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .app-header {
        position: relative !important;
        top: auto !important;
        flex: 0 0 auto;
    }

    .chat-footer {
        position: relative !important;
        bottom: auto !important;
        flex: 0 0 auto;
        margin-top: 0;
    }

    #chatTabContent,
    #chatTabContent > .tab-pane,
    #chatTabContent > .tab-pane > .position-relative,
    #messages {
        min-height: 0;
    }

    #messages,
    .tab-pane > .h-100.overflow-auto,
    .chat-messages {
        padding-bottom: calc(var(--mobile-composer-height, 120px) + 30px) !important;
        scroll-padding-bottom: calc(var(--mobile-composer-height, 120px) + 30px);
        overscroll-behavior: contain;
    }

    .chat-footer__inner {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .chat-composer {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .chat-composer__input-row {
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .chat-composer__input-row #msgInput {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .chat-composer__input-row #sendBtn {
        flex: 0 0 46px;
        width: 46px;
        min-width: 46px;
        max-width: 46px;
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .chat-footer {
        padding-left: max(.75rem, env(safe-area-inset-left)) !important;
        padding-right: max(.75rem, env(safe-area-inset-right)) !important;
        padding-bottom: max(.75rem, env(safe-area-inset-bottom)) !important;
    }

    #messages,
    .tab-pane > .h-100.overflow-auto,
    .chat-messages {
        padding-bottom: calc(var(--mobile-composer-height, 132px) + 34px) !important;
        scroll-padding-bottom: calc(var(--mobile-composer-height, 132px) + 34px);
    }

    .chat-composer__input-row #sendBtn {
        flex-basis: 44px;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
    }
}

/* === Sprint 4 hotfix: mobile composer/tabs viewport stability === */
@media (max-width: 991.98px) {
    .app-shell,
    .app-shell > main,
    #chatTabContent,
    #chatTabContent > .tab-pane,
    #chatTabContent > .tab-pane > .position-relative,
    #messages,
    .tab-pane > .h-100.overflow-auto,
    .chat-footer,
    .chat-footer__inner,
    .chat-composer,
    .chat-composer__tools,
    .chat-composer__input-row {
        box-sizing: border-box;
        max-width: 100vw !important;
        min-width: 0 !important;
    }

    #chatTabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 10px 12px !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    #chatTabs .nav-item {
        flex: 0 0 auto !important;
        max-width: min(74vw, 320px);
        scroll-snap-align: start;
    }

    #chatTabs .nav-link {
        max-width: min(74vw, 320px);
        min-width: 0;
    }

    #chatTabs .tab-title,
    #chatTabs .dm-tab-title {
        max-width: 46vw;
    }

    .chat-footer {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
    }

    .chat-footer__inner {
        width: 100% !important;
        overflow: hidden !important;
    }

    .chat-composer {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .chat-composer__tools {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 8px !important;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .chat-composer__tools .btn {
        flex: 0 0 48px !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }

    .chat-composer__input-row {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    .chat-composer__input-row #msgInput {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 1% !important;
    }

    .chat-composer__input-row #sendBtn {
        flex: 0 0 52px !important;
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
    }
}

@media (max-width: 575.98px) {
    #chatTabs .tab-title,
    #chatTabs .dm-tab-title {
        max-width: 42vw;
    }

    .chat-composer__tools .btn {
        flex-basis: 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }

    .chat-composer__input-row #sendBtn {
        flex-basis: 50px !important;
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
    }
}

/* === Sprint 4 verified polish: focus/unread/mobile tabs === */
#chatTabs .main-tab-unread,
#chatTabs .dm-tab-unread {
    align-content: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 .42rem;
    font-size: 11px;
    line-height: 1;
    flex: 0 0 auto;
}

#chatTabs .nav-link.has-unread {
    box-shadow:
        0 0 0 1px rgba(239, 68, 68, .32),
        0 12px 30px rgba(239, 68, 68, .12);
}

@media (max-width: 991.98px) {
    #chatTabs {
        position: relative !important;
        z-index: 20 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        min-height: 58px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 10px max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left)) !important;
        background: rgba(17, 18, 25, .96) !important;
        backdrop-filter: blur(14px);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-padding-inline: 10px;
    }

    #chatTabs::-webkit-scrollbar {
        display: none;
    }

    #chatTabs .nav-item {
        flex: 0 0 auto !important;
        min-width: 112px !important;
        max-width: 72vw !important;
    }

    #chatTabs .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 112px !important;
        max-width: 72vw !important;
        min-height: 42px !important;
        padding: .58rem .78rem !important;
        gap: .42rem !important;
        overflow: hidden !important;
    }

    #chatTabs .tab-title,
    #chatTabs .dm-tab-title {
        display: inline-block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #chatTabs .dm-tab-close {
        margin-left: .18rem !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
    }

    #chatTabContent {
        position: relative !important;
        z-index: 1 !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    .chat-footer,
    .chat-footer__inner,
    .chat-composer,
    .chat-composer__input-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .chat-composer__input-row #msgInput {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 1% !important;
    }
}

@media (max-width: 575.98px) {
    #chatTabs .nav-item,
    #chatTabs .nav-link {
        min-width: 118px !important;
        max-width: 76vw !important;
    }
}

/* === Sprint 4 room unread fix === */
#chatTabs .main-tab-unread {
    margin-left: .35rem;
}

#tabbtn-main.has-unread .tab-title,
#chatTabs .nav-link.has-unread .dm-tab-title {
    color: #fff;
}

.new-messages-btn {
    white-space: nowrap;
    max-width: calc(100vw - 32px);
}

/* === Sprint 4 mobile global unread badge fix ===
   On narrow screens header buttons hide inner spans to keep icons compact.
   The global unread counter is also a span, so it needs an explicit mobile override. */
@media (max-width: 575.98px) {
    .app-header__actions .app-header__unread {
        position: relative;
        overflow: visible;
    }

    .app-header__actions .app-header__unread.has-unread .badge,
    .app-header__actions .app-header__unread.has-unread #globalUnreadBadge {
        position: absolute;
        top: -7px;
        right: -7px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 19px;
        height: 19px;
        padding: 0 5px;
        font-size: 11px;
        line-height: 1;
        z-index: 2;
        pointer-events: none;
    }
}

.msg--deleted .msg-line,
.msg-line--deleted {
  opacity: .72;
  font-style: italic;
}

.msg-media-removed {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .55rem;
    border: 1px solid rgba(248, 113, 113, .35);
    border-radius: 999px;
    color: #fecaca;
    background: rgba(127, 29, 29, .32);
    font-size: .85rem;
}

.msg--media-removed .chat-thumb,
.msg--media-removed audio,
.msg--media-removed video {
    display: none !important;
}

/* === Sprint 7.1 Rooms sidebar preview === */
.chat-sidebar-section {
    padding: 10px;
}

.chat-sidebar-section--rooms {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 15% 0%, rgba(139,92,246,.12), transparent 35%),
        rgba(255,255,255,.015);
}

.chat-sidebar-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-main, #fff);
    font-weight: 700;
    letter-spacing: .1px;
    margin-bottom: 8px;
}

.rooms-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    min-height: 0;
    padding-right: 2px;
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.rooms-list::-webkit-scrollbar {
    width: 8px;
}

.rooms-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

.room-list-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 11px 12px;
    text-align: left;
    color: var(--text-main, #fff);
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
    box-shadow: 0 10px 24px rgba(0,0,0,.13);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.room-list-item:hover {
    transform: translateY(-1px);
    border-color: rgba(139,92,246,.28);
    background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.032));
    box-shadow: 0 14px 30px rgba(0,0,0,.2);
}

.room-list-item__icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, rgba(139,92,246,.55), rgba(236,72,153,.38));
    box-shadow: 0 8px 20px rgba(139,92,246,.18);
}

.room-list-item__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
}

.room-list-item__title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 700;
    line-height: 1.15;
}

.room-list-item__meta {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-muted, rgba(255,255,255,.62));
    font-size: 12px;
    line-height: 1.2;
}

.room-list-item__meta-icons {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 18px;
}

.room-list-item__access-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: var(--text-muted, rgba(255,255,255,.62));
    background: rgba(255,255,255,.045);
}

.room-list-item__access-icon--private {
    color: #fbbf24;
    background: rgba(251,191,36,.12);
}

.room-list-item__access-icon--male {
    color: #60a5fa;
    background: rgba(96,165,250,.11);
}

.room-list-item__access-icon--female {
    color: #f472b6;
    background: rgba(244,114,182,.11);
}

.room-list-item__access-icon--all {
    color: rgba(255,255,255,.72);
}

.room-list-item__count {
    min-width: 36px;
    height: 24px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 12px;
    font-weight: 700;
}

.rooms-empty {
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 14px 12px;
    text-align: center;
    color: var(--text-muted, rgba(255,255,255,.62));
    background: rgba(255,255,255,.025);
}

.rooms-empty__icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: rgba(139,92,246,.22);
}

.rooms-empty__title {
    color: var(--text-main, #fff);
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 3px;
}

.rooms-empty__text {
    font-size: 12px;
    line-height: 1.35;
}

#mobileUsersPanel .chat-sidebar-section--rooms {
    max-height: 42vh;
}

/* Sprint 7.2 — Create room modal */
.create-room-modal .modal-header {
    align-items: flex-start;
}

.create-room-modal .form-label {
    font-weight: 600;
    color: #243047;
}

.create-room-modal .form-text {
    color: #6c7890;
}

.create-room-modal .alert {
    font-size: .9rem;
}

.chat-sidebar-section--rooms .btn {
    border-radius: 12px;
}

#mobileUsersPanel .chat-sidebar-section--rooms .rooms-list {
    max-height: 34vh;
}

/* Sprint 7.4 — active room navigation */
.room-list-item.is-active {
    border-color: rgba(236, 72, 153, .45);
    background: linear-gradient(180deg, rgba(236,72,153,.14), rgba(139,92,246,.08));
    box-shadow: 0 16px 34px rgba(236,72,153,.18);
}

.room-list-item__unread {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    font-size: 11px;
}

.room-tab-title {
    display: inline-flex;
    align-items: center;
    max-width: 180px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sprint 7.4 final — sidebar mode for active rooms */
.chat-sidebar-section--active-room {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background:
        radial-gradient(circle at 15% 0%, rgba(236,72,153,.12), transparent 35%),
        rgba(255,255,255,.015);
}

.room-active-meta {
    color: var(--text-muted, rgba(255,255,255,.62));
    font-size: 12px;
    line-height: 1.35;
    margin: -2px 0 10px;
}

.room-members-list {
    min-height: 0;
    overflow: auto;
    border-radius: 16px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
}

.room-member-row {
    background: transparent !important;
    color: var(--text-main, #fff);
    border-color: rgba(255,255,255,.06) !important;
}

.room-member-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 700;
}

.chat-thumb.chat-thumb--placeholder {
    cursor: default;
    object-fit: cover;
}


/* Sprint 8.2 Theme Engine */
:root[data-theme="light"] header.navbar {
    background: rgba(255,255,255,.86) !important;
    border-bottom-color: var(--line) !important;
    box-shadow: 0 8px 28px rgba(15,23,42,.08);
}

:root[data-theme="light"] .brand-mark__title,
:root[data-theme="light"] header.navbar .fw-semibold {
    color: var(--text-main);
}

:root[data-theme="light"] section.flex-grow-1.overflow-hidden,
:root[data-theme="light"] aside.sidebar-fixed,
:root[data-theme="light"] .mobile-users-panel,
:root[data-theme="light"] .chat-footer,
:root[data-theme="light"] .modal-content {
    background: rgba(255,255,255,.92) !important;
    color: var(--text-main);
}

:root[data-theme="light"] #chatTabs {
    background: rgba(255,255,255,.86);
}

:root[data-theme="light"] #chatTabs .nav-link {
    color: var(--text-soft);
    background: rgba(15,23,42,.04);
    border-color: rgba(15,23,42,.08) !important;
}

:root[data-theme="light"] #chatTabs .nav-link:hover {
    color: var(--text-main);
    background: rgba(15,23,42,.06);
}

:root[data-theme="light"] #chatTabs .nav-link.active {
    color: #fff;
    background: var(--accent-gradient);
}

:root[data-theme="light"] .form-control,
:root[data-theme="light"] .form-select,
:root[data-theme="light"] .input-group-text,
:root[data-theme="light"] .list-group-item,
:root[data-theme="light"] .dropdown-menu {
    background-color: #fff !important;
    color: var(--text-main) !important;
    border-color: var(--line) !important;
}

:root[data-theme="light"] .text-muted,
:root[data-theme="light"] .text-secondary {
    color: var(--text-muted) !important;
}

:root[data-theme="light"] .bg-white,
:root[data-theme="light"] .bg-light {
    background-color: rgba(255,255,255,.92) !important;
}

/* === Sprint 8.2.1: Light theme polish === */
:root[data-theme="light"] body {
    background:
        radial-gradient(circle at top left, rgba(124,58,237,.10), transparent 28%),
        radial-gradient(circle at top right, rgba(219,39,119,.07), transparent 24%),
        linear-gradient(180deg, #f7f9fe 0%, #eef2f8 100%);
}

:root[data-theme="light"] header.navbar,
:root[data-theme="light"] footer,
:root[data-theme="light"] footer.flex-shrink-0,
:root[data-theme="light"] section.flex-grow-1.overflow-hidden,
:root[data-theme="light"] aside.d-none.d-lg-flex.flex-column.border-start,
:root[data-theme="light"] .mobile-users-panel,
:root[data-theme="light"] .typing-indicator {
    background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.66)),
        rgba(255,255,255,.84) !important;
    color: var(--text-main);
    border-color: var(--line) !important;
    box-shadow: var(--shadow-sm);
}

:root[data-theme="light"] .brand-mark__title,
:root[data-theme="light"] .mobile-users-panel__header .fw-semibold,
:root[data-theme="light"] aside .px-3.py-2 .fw-semibold,
:root[data-theme="light"] #online .fw-semibold,
:root[data-theme="light"] #onlineMobile .fw-semibold,
:root[data-theme="light"] #online strong,
:root[data-theme="light"] #onlineMobile strong,
:root[data-theme="light"] .msg-name,
:root[data-theme="light"] .user-link {
    color: var(--text-main) !important;
    text-shadow: none;
}

:root[data-theme="light"] .brand-mark__subtitle,
:root[data-theme="light"] .typing-indicator,
:root[data-theme="light"] .msg-time,
:root[data-theme="light"] .text-muted,
:root[data-theme="light"] .form-text,
:root[data-theme="light"] small {
    color: var(--text-muted) !important;
}

:root[data-theme="light"] .app-header__actions .btn-outline-light,
:root[data-theme="light"] .btn-outline-secondary,
:root[data-theme="light"] #galleryBtn,
:root[data-theme="light"] #autoScrollBtn,
:root[data-theme="light"] #settingsBtn,
:root[data-theme="light"] #logoutBtn,
:root[data-theme="light"] #mobileUsersToggleFooter,
:root[data-theme="light"] #autoScrollBtnMobile,
:root[data-theme="light"] #settingsBtnMobile,
:root[data-theme="light"] #logoutBtnMobile,
:root[data-theme="light"] #audioBtn {
    color: #334155 !important;
    background: rgba(255,255,255,.78) !important;
    border-color: rgba(15,23,42,.16) !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.08);
}

:root[data-theme="light"] .app-header__actions .btn-outline-light:hover,
:root[data-theme="light"] .btn-outline-secondary:hover,
:root[data-theme="light"] #galleryBtn:hover,
:root[data-theme="light"] #autoScrollBtn:hover,
:root[data-theme="light"] #settingsBtn:hover,
:root[data-theme="light"] #logoutBtn:hover,
:root[data-theme="light"] #mobileUsersToggleFooter:hover,
:root[data-theme="light"] #autoScrollBtnMobile:hover,
:root[data-theme="light"] #settingsBtnMobile:hover,
:root[data-theme="light"] #logoutBtnMobile:hover,
:root[data-theme="light"] #audioBtn:hover {
    color: #111827 !important;
    background: #fff !important;
    border-color: rgba(124,58,237,.32) !important;
    box-shadow: 0 12px 28px rgba(124,58,237,.14);
}

:root[data-theme="light"] .form-control,
:root[data-theme="light"] .form-select,
:root[data-theme="light"] textarea.form-control,
:root[data-theme="light"] footer .form-control#msgInput,
:root[data-theme="light"] .input-group .form-control {
    color: #111827 !important;
    background: #fff !important;
    border-color: rgba(15,23,42,.16) !important;
}

:root[data-theme="light"] .form-control:focus,
:root[data-theme="light"] .form-select:focus,
:root[data-theme="light"] textarea.form-control:focus,
:root[data-theme="light"] footer .form-control#msgInput:focus {
    background: #fff !important;
    border-color: rgba(124,58,237,.42) !important;
    box-shadow: 0 0 0 .22rem rgba(124,58,237,.14) !important;
}

:root[data-theme="light"] .p-2.border-bottom .input-group,
:root[data-theme="light"] aside .p-2.border-bottom .input-group,
:root[data-theme="light"] footer .flex-grow-1.d-flex.align-items-center.gap-2.pe-2,
:root[data-theme="light"] .chat-composer__input-row {
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(15,23,42,.14) !important;
}

:root[data-theme="light"] #chatTabs {
    background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72)),
        rgba(255,255,255,.86);
    border-bottom-color: var(--line) !important;
}

:root[data-theme="light"] #chatTabs .nav-link {
    color: #475569;
    background: rgba(255,255,255,.76);
    border-color: rgba(15,23,42,.12) !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.06);
}

:root[data-theme="light"] #chatTabs .nav-link:hover {
    color: #111827;
    background: #fff;
    border-color: rgba(124,58,237,.24) !important;
}

:root[data-theme="light"] #chatTabs .nav-link.active {
    color: #fff !important;
    background: var(--accent-gradient);
    border-color: transparent !important;
}

:root[data-theme="light"] #chatTabContent,
:root[data-theme="light"] #messages {
    background:
        radial-gradient(circle at top center, rgba(124,58,237,.06), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.70), rgba(248,250,252,.56));
}

:root[data-theme="light"] #chatTabContent::after,
:root[data-theme="light"] #messages::before,
:root[data-theme="light"] #messages::after {
    display: none;
}

:root[data-theme="light"] .msg,
:root[data-theme="light"] .msg--other,
:root[data-theme="light"] .msg--system {
    background: rgba(255,255,255,.86);
    border-color: rgba(15,23,42,.10);
    box-shadow: 0 10px 24px rgba(15,23,42,.07);
}

:root[data-theme="light"] .msg--me {
    background:
        linear-gradient(135deg, rgba(124,58,237,.12), rgba(219,39,119,.08)),
        rgba(255,255,255,.92);
    border-color: rgba(124,58,237,.20);
}

:root[data-theme="light"] .msg-text {
    color: #1f2937;
}

:root[data-theme="light"] .msg a,
:root[data-theme="light"] .msg-name:hover,
:root[data-theme="light"] .user-link:hover {
    color: #6d28d9 !important;
}

:root[data-theme="light"] #online .list-group-item,
:root[data-theme="light"] #onlineMobile .list-group-item,
:root[data-theme="light"] #online > button,
:root[data-theme="light"] #onlineMobile > button,
:root[data-theme="light"] #online > a,
:root[data-theme="light"] #onlineMobile > a,
:root[data-theme="light"] #online > div,
:root[data-theme="light"] #onlineMobile > div,
:root[data-theme="light"] .gallery-pending-wrap,
:root[data-theme="light"] .gallery-pending-item {
    color: var(--text-main) !important;
    background: rgba(255,255,255,.82) !important;
    border-color: rgba(15,23,42,.11) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.06);
}

:root[data-theme="light"] #online > .active,
:root[data-theme="light"] #onlineMobile > .active,
:root[data-theme="light"] #online > .list-group-item.active,
:root[data-theme="light"] #onlineMobile > .list-group-item.active {
    color: #111827 !important;
    background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(219,39,119,.09)) !important;
    border-color: rgba(124,58,237,.28) !important;
    box-shadow: 0 0 0 1px rgba(124,58,237,.16), 0 12px 28px rgba(124,58,237,.10);
}

:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .create-room-modal,
:root[data-theme="light"] .report-modal__content {
    color: var(--text-main) !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border-color: rgba(15,23,42,.12) !important;
    box-shadow: 0 28px 70px rgba(15,23,42,.18);
}

:root[data-theme="light"] .modal-header,
:root[data-theme="light"] .modal-footer,
:root[data-theme="light"] #galleryModal .modal-header,
:root[data-theme="light"] .mobile-users-panel__header {
    background: rgba(248,250,252,.88) !important;
    border-color: rgba(15,23,42,.10) !important;
}

:root[data-theme="light"] #galleryModal .modal-content,
:root[data-theme="light"] #galleryModal .modal-content * {
    color: var(--text-main) !important;
}

:root[data-theme="light"] #galleryModal .text-muted,
:root[data-theme="light"] #galleryModal small,
:root[data-theme="light"] .gallery-pending-size {
    color: var(--text-muted) !important;
}

:root[data-theme="light"] #galleryDropzone {
    background: rgba(248,250,252,.82) !important;
    border-color: rgba(15,23,42,.18) !important;
    color: var(--text-main);
}

:root[data-theme="light"] .badge.text-bg-secondary,
:root[data-theme="light"] .badge.bg-secondary {
    color: #334155 !important;
    background: rgba(15,23,42,.08) !important;
    border-color: rgba(15,23,42,.10) !important;
}

:root[data-theme="light"] .dropdown-menu,
:root[data-theme="light"] .app-header__profile-menu {
    background: #fff;
    color: var(--text-main);
    border-color: rgba(15,23,42,.12);
    box-shadow: 0 18px 44px rgba(15,23,42,.14);
}

:root[data-theme="light"] .dropdown-item {
    color: var(--text-main);
}

:root[data-theme="light"] .dropdown-item:hover,
:root[data-theme="light"] .dropdown-item:focus {
    background: rgba(124,58,237,.08);
    color: #111827;
}

:root[data-theme="light"] .btn-close {
    filter: none !important;
}

:root[data-theme="light"] .mobile-users-backdrop {
    background: rgba(15,23,42,.28);
}

:root[data-theme="light"] .mention {
    color: #6d28d9;
    background: rgba(124,58,237,.10);
}

:root[data-theme="light"] .mention--me {
    color: #fff;
    background: var(--accent-gradient);
}

/* === Sprint 8.2 Light Theme Polish v2 === */
:root[data-theme="light"] {
    --light-glass: rgba(255,255,255,.82);
    --light-glass-strong: rgba(255,255,255,.94);
    --light-surface: #ffffff;
    --light-surface-soft: #f8fafc;
    --light-border: rgba(15,23,42,.14);
    --light-border-strong: rgba(15,23,42,.22);
    --light-shadow-soft: 0 14px 34px rgba(15,23,42,.08);
    --light-shadow-modal: 0 30px 80px rgba(15,23,42,.22);
}

:root[data-theme="light"] body {
    background:
        radial-gradient(circle at 16% 8%, rgba(124,58,237,.12), transparent 28%),
        radial-gradient(circle at 88% 76%, rgba(219,39,119,.10), transparent 30%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 52%, #fdf7fb 100%) !important;
}

:root[data-theme="light"] header.navbar {
    background: rgba(255,255,255,.88) !important;
    border-bottom: 1px solid rgba(15,23,42,.10) !important;
    box-shadow: 0 12px 34px rgba(15,23,42,.08);
}

:root[data-theme="light"] .app-header__actions .btn,
:root[data-theme="light"] .app-header__actions .btn-outline-light,
:root[data-theme="light"] #mobileUsersToggleFooter {
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(15,23,42,.16) !important;
    color: #243047 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 22px rgba(15,23,42,.06) !important;
}

:root[data-theme="light"] .app-header__actions .btn:hover,
:root[data-theme="light"] #mobileUsersToggleFooter:hover {
    background: #fff !important;
    border-color: rgba(124,58,237,.32) !important;
    color: #111827 !important;
    transform: translateY(-1px);
}

:root[data-theme="light"] section.flex-grow-1.overflow-hidden.bg-white,
:root[data-theme="light"] section.flex-grow-1.overflow-hidden {
    background:
        radial-gradient(circle at 16% 14%, rgba(124,58,237,.055), transparent 34%),
        radial-gradient(circle at 92% 86%, rgba(219,39,119,.045), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92)) !important;
    border-color: rgba(15,23,42,.12) !important;
}

:root[data-theme="light"] #chatTabs {
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.86)) !important;
    border-top: 1px solid rgba(15,23,42,.06) !important;
    border-bottom: 1px solid rgba(15,23,42,.12) !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.75), 0 8px 20px rgba(15,23,42,.04) !important;
}

:root[data-theme="light"] #chatTabs .nav-link {
    color: #475569 !important;
    background: rgba(255,255,255,.78) !important;
    border-color: rgba(15,23,42,.14) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

:root[data-theme="light"] #chatTabs .nav-link.active {
    color: #fff !important;
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    box-shadow: 0 14px 34px rgba(124,58,237,.22), 0 8px 22px rgba(219,39,119,.13) !important;
}

:root[data-theme="light"] #chatTabContent,
:root[data-theme="light"] #tab-main,
:root[data-theme="light"] #messages {
    background:
        radial-gradient(circle at 18% 18%, rgba(124,58,237,.055), transparent 32%),
        radial-gradient(circle at 82% 88%, rgba(219,39,119,.045), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.68), rgba(248,250,252,.78)) !important;
    border-color: rgba(15,23,42,.11) !important;
}

:root[data-theme="light"] #messages:empty::after {
    content: "";
    position: absolute;
    inset: 14px;
    pointer-events: none;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(124,58,237,.025), rgba(219,39,119,.018)),
        rgba(255,255,255,.24);
    border: 1px solid rgba(15,23,42,.055);
}

:root[data-theme="light"] footer.flex-shrink-0,
:root[data-theme="light"] .chat-footer {
    background: rgba(255,255,255,.88) !important;
    border-top: 1px solid rgba(15,23,42,.10) !important;
    box-shadow: 0 -14px 36px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(16px);
}

:root[data-theme="light"] .chat-composer__tools .btn,
:root[data-theme="light"] .chat-composer__input-row .btn,
:root[data-theme="light"] .chat-composer > .btn,
:root[data-theme="light"] #galleryBtn,
:root[data-theme="light"] #audioBtn,
:root[data-theme="light"] #autoScrollBtn,
:root[data-theme="light"] #autoScrollBtnMobile {
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(15,23,42,.16) !important;
    color: #334155 !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.06) !important;
}

:root[data-theme="light"] .chat-composer__tools .btn:hover,
:root[data-theme="light"] .chat-composer__input-row .btn:hover,
:root[data-theme="light"] .chat-composer > .btn:hover {
    background: #fff !important;
    border-color: rgba(124,58,237,.32) !important;
    color: #111827 !important;
}

:root[data-theme="light"] .chat-composer__input-row #msgInput,
:root[data-theme="light"] footer .form-control#msgInput,
:root[data-theme="light"] #msgInput {
    color: #111827 !important;
    background: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(15,23,42,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 22px rgba(15,23,42,.05) !important;
}

:root[data-theme="light"] #msgInput::placeholder,
:root[data-theme="light"] .form-control::placeholder,
:root[data-theme="light"] textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

:root[data-theme="light"] .modal-content {
    color: #111827 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
    border: 1px solid rgba(15,23,42,.16) !important;
    box-shadow: var(--light-shadow-modal) !important;
}

:root[data-theme="light"] .modal-header,
:root[data-theme="light"] .modal-header.py-2,
:root[data-theme="light"] #settingsModal .modal-header,
:root[data-theme="light"] #galleryModal .modal-header,
:root[data-theme="light"] #audioModal .modal-header,
:root[data-theme="light"] #reportUserModal .modal-header {
    color: #111827 !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92)) !important;
    border-bottom: 1px solid rgba(15,23,42,.12) !important;
}

:root[data-theme="light"] .modal-title,
:root[data-theme="light"] #settingsModal .modal-title,
:root[data-theme="light"] #galleryModal .modal-title,
:root[data-theme="light"] #audioModal .modal-title,
:root[data-theme="light"] #reportUserModal .modal-title,
:root[data-theme="light"] #createRoomModal .modal-title,
:root[data-theme="light"] #sessionExpiredModal .modal-title {
    color: #111827 !important;
    text-shadow: none !important;
}

:root[data-theme="light"] .modal-body,
:root[data-theme="light"] #settingsModal .modal-body,
:root[data-theme="light"] #galleryModal .modal-body {
    color: #111827 !important;
    background: transparent !important;
}

:root[data-theme="light"] .modal-footer {
    background: rgba(248,250,252,.88) !important;
    border-top: 1px solid rgba(15,23,42,.12) !important;
}

:root[data-theme="light"] .form-check-label,
:root[data-theme="light"] #settingsModal .form-check-label {
    color: #111827 !important;
}

:root[data-theme="light"] .form-check-input {
    background-color: #cbd5e1 !important;
    border-color: #cbd5e1 !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.12) !important;
}

:root[data-theme="light"] .form-check-input:checked {
    background-color: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 .18rem rgba(139,92,246,.16) !important;
}

:root[data-theme="light"] .form-check-input:focus {
    border-color: rgba(124,58,237,.42) !important;
    box-shadow: 0 0 0 .2rem rgba(124,58,237,.14) !important;
}

:root[data-theme="light"] .form-label,
:root[data-theme="light"] .form-text,
:root[data-theme="light"] .text-muted,
:root[data-theme="light"] #settingsModal .small.text-muted,
:root[data-theme="light"] #settingsModal .form-label.text-muted {
    color: #64748b !important;
}

:root[data-theme="light"] hr {
    border-color: rgba(15,23,42,.18) !important;
    opacity: 1 !important;
}

:root[data-theme="light"] .form-select,
:root[data-theme="light"] .form-control,
:root[data-theme="light"] textarea.form-control {
    color: #111827 !important;
    background-color: rgba(255,255,255,.92) !important;
    border-color: rgba(15,23,42,.18) !important;
}

:root[data-theme="light"] .btn-close {
    opacity: .72 !important;
    filter: none !important;
}

:root[data-theme="light"] .btn-close:hover {
    opacity: 1 !important;
}

:root[data-theme="light"] #galleryDropzone {
    color: #111827 !important;
    background: rgba(248,250,252,.76) !important;
    border: 2px dashed rgba(15,23,42,.20) !important;
}

:root[data-theme="light"] #galleryDropzone:hover {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(124,58,237,.36) !important;
}

:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] #sendBtn,
:root[data-theme="light"] #gallerySendSelectedBtn,
:root[data-theme="light"] #uploadBtn {
    color: #fff !important;
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 30px rgba(124,58,237,.22) !important;
}

:root[data-theme="light"] .btn-outline-secondary,
:root[data-theme="light"] .btn-outline-light {
    color: #334155 !important;
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(15,23,42,.18) !important;
}

:root[data-theme="light"] .btn-outline-secondary:hover,
:root[data-theme="light"] .btn-outline-light:hover {
    color: #111827 !important;
    background: #fff !important;
    border-color: rgba(124,58,237,.34) !important;
}

/* === Sprint 8.2 Light Theme Gallery Modal Final Fix === */
:root[data-theme="light"] #galleryModal .modal-content,
:root[data-theme="light"] #galleryModal .modal-header,
:root[data-theme="light"] #galleryModal .modal-body {
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.97)) !important;
    color: #111827 !important;
}

:root[data-theme="light"] #galleryModal .modal-title,
:root[data-theme="light"] #galleryModal .fw-semibold,
:root[data-theme="light"] #galleryModal .small:not(.text-muted) {
    color: #111827 !important;
}

:root[data-theme="light"] #galleryModal .text-muted,
:root[data-theme="light"] #galleryModal .small.text-muted {
    color: #64748b !important;
}

:root[data-theme="light"] #galleryModal code {
    color: #0f172a !important;
    background: rgba(15,23,42,.06) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    border-radius: 8px;
    padding: .05rem .32rem;
}

:root[data-theme="light"] #galleryModal .gallery-files-input,
:root[data-theme="light"] #galleryModal input[type="file"].form-control {
    color: #111827 !important;
    background: rgba(255,255,255,.94) !important;
    border-color: rgba(15,23,42,.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(15,23,42,.045) !important;
}

:root[data-theme="light"] #galleryModal .gallery-files-input::file-selector-button,
:root[data-theme="light"] #galleryModal input[type="file"].form-control::file-selector-button {
    color: #111827 !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border-color: rgba(15,23,42,.16) !important;
}

:root[data-theme="light"] #galleryModal #galleryUploadBtn,
:root[data-theme="light"] #galleryModal #gallerySendBtn,
:root[data-theme="light"] #galleryModal button.btn-primary,
:root[data-theme="light"] #galleryUploadBtn.btn-primary,
:root[data-theme="light"] #gallerySendBtn.btn-primary {
    color: #ffffff !important;
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.18) !important;
    box-shadow: 0 14px 30px rgba(124,58,237,.22), 0 8px 18px rgba(219,39,119,.12) !important;
}

:root[data-theme="light"] #galleryModal #galleryUploadBtn i,
:root[data-theme="light"] #galleryModal #gallerySendBtn i,
:root[data-theme="light"] #galleryModal button.btn-primary i {
    color: #ffffff !important;
}

:root[data-theme="light"] #galleryModal #galleryUploadBtn:hover,
:root[data-theme="light"] #galleryModal #gallerySendBtn:hover {
    color: #ffffff !important;
    filter: brightness(1.03);
    transform: translateY(-1px);
}

:root[data-theme="light"] #galleryModal #galleryDropzone,
:root[data-theme="light"] #galleryDropzone.gallery-dropzone {
    color: #111827 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.64), rgba(248,250,252,.72)) !important;
    border-color: rgba(15,23,42,.20) !important;
}

:root[data-theme="light"] #galleryModal #galleryDropzone .fw-semibold,
:root[data-theme="light"] #galleryModal #galleryDropzone .small {
    color: #111827 !important;
}

:root[data-theme="light"] #galleryModal #galleryEmpty {
    color: #64748b !important;
}

/* Sprint 8.1 media preferences: video messages */
.chat-video-wrap {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(420px, 86vw);
    width: min(420px, 86vw);
    vertical-align: top;
    overflow: hidden;
    border-radius: 18px;
}

.chat-video {
    display: block;
    width: 100%;
    max-height: 360px;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 18px;
    border: 1px solid var(--app-border, rgba(255,255,255,.12));
    background: #000;
    box-shadow: 0 18px 50px rgba(0,0,0,.24);
}

.chat-media-error {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(248,113,113,.28);
    background: rgba(127,29,29,.24);
    color: #fecaca;
    font-size: .85rem;
}

.chat-thumb.chat-thumb--broken {
    opacity: .72;
    cursor: default !important;
}

.chat-media-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
    min-height: 150px;
    border-radius: 18px;
    border: 1px dashed var(--app-border, rgba(255,255,255,.18));
    background: var(--app-surface-soft, rgba(255,255,255,.06));
    color: var(--app-text, #fff);
    cursor: pointer;
}

.chat-media-placeholder i {
    font-size: 1.6rem;
    opacity: .8;
}

.chat-media-placeholder small {
    color: var(--app-muted, rgba(255,255,255,.62));
}

:root[data-theme="light"] .chat-video {
    border-color: rgba(148, 163, 184, .42);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
}

:root[data-theme="light"] .chat-media-placeholder {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-color: rgba(147, 51, 234, .28);
    color: #1e293b;
}

:root[data-theme="light"] .chat-media-placeholder small {
    color: #64748b;
}

@media (max-width: 576px) {
    .chat-video-wrap {
        width: min(330px, 82vw);
        max-width: min(330px, 82vw);
    }

    .chat-video {
        max-height: 280px;
    }
}


/* === Rooms/Reports polish: compact mobile header + selected report reason === */
#reportReasonList .btn-check:checked + .report-reason-option,
#reportReasonList .report-reason-option.is-active {
    border-color: rgba(168, 85, 247, .95) !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, .34), rgba(236, 72, 153, .26)) !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(168, 85, 247, .38), 0 12px 30px rgba(139, 92, 246, .22);
}

@media (max-width: 575.98px) {
    .app-header {
        min-height: 58px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .brand-mark__icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .brand-mark__title,
    .brand-mark__subtitle {
        display: none !important;
    }

    .app-header__actions {
        flex: 1 1 auto;
        justify-content: flex-end;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .app-header__actions::-webkit-scrollbar {
        display: none;
    }

    .language-switch {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .language-switch [data-lang-switch] {
        min-width: 35px;
        height: 40px;
        padding: 0 7px;
        font-size: 14px;
        line-height: 1;
    }

    .app-header__actions .btn,
    .app-header__actions .dropdown > .btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }
}

/* Chat header language switcher: same compact pill as public pages */
.app-header .language-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    flex: 0 0 auto;
}

.app-header .language-switch [data-lang-switch] {
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.72);
    border-radius: 999px;
    min-width: 42px;
    height: 30px;
    padding: 0 10px;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.app-header .language-switch [data-lang-switch]:hover,
.app-header .language-switch [data-lang-switch].is-active {
    background: rgba(255,255,255,.18);
    color: #fff;
}

:root[data-theme="light"] .app-header .language-switch {
    background: rgba(15,23,42,.06);
    border-color: rgba(15,23,42,.10);
}

:root[data-theme="light"] .app-header .language-switch [data-lang-switch] {
    color: rgba(15,23,42,.62);
}

:root[data-theme="light"] .app-header .language-switch [data-lang-switch]:hover,
:root[data-theme="light"] .app-header .language-switch [data-lang-switch].is-active {
    background: rgba(15,23,42,.10);
    color: var(--text-main);
}

/* Sprint 7.5 — rooms search and access filters */
.rooms-tools {
    flex: 0 0 auto;
}

.rooms-tools .input-group-text,
.rooms-tools .form-control,
.rooms-tools .form-select,
.rooms-tools .btn {
    border-color: rgba(255,255,255,.09);
    color: var(--text-main, #fff);
    background-color: rgba(255,255,255,.045);
}

.rooms-tools .input-group-text {
    color: var(--text-muted, rgba(255,255,255,.62));
}

.rooms-tools .form-control::placeholder {
    color: var(--text-muted, rgba(255,255,255,.55));
}

.rooms-tools .form-control:focus,
.rooms-tools .form-select:focus {
    border-color: rgba(139,92,246,.45);
    box-shadow: 0 0 0 .15rem rgba(139,92,246,.16);
    background-color: rgba(255,255,255,.065);
    color: var(--text-main, #fff);
}

.rooms-tools .form-select option {
    color: #111827;
}

.rooms-tools .btn.is-empty {
    opacity: .55;
}

@media (max-width: 991.98px) {
    .rooms-tools {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Sprint 7.6: room settings / Sprint 7.7: room reports */
.room-settings-btn,
.room-report-btn {
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}
.room-report-btn {
    color: #ff6b7a;
    border-color: rgba(255, 107, 122, .45);
}

.room-report-btn:hover,
.room-report-btn:focus {
    color: #fff;
    background: rgba(220, 53, 69, .22);
    border-color: rgba(255, 107, 122, .9);
}

.room-settings-modal .form-text,
.create-room-modal .form-text {
    font-size: .78rem;
}

/* === Emoji picker inside chat composer === */
.chat-composer__field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.chat-composer__field #msgInput {
    width: 100%;
    padding-right: 52px !important;
}

.chat-composer__emoji-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    color: rgba(255,255,255,.72);
    background: transparent;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.chat-composer__emoji-btn:hover,
.chat-composer__emoji-btn.is-active {
    color: #fff;
    background: rgba(139,92,246,.18);
}

.chat-composer__emoji-btn:active {
    transform: translateY(-50%) scale(.96);
}

.emoji-picker-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 1100;
    width: min(340px, calc(100vw - 28px));
    max-height: min(420px, 58vh);
    overflow: hidden;
    border: 1px solid rgba(139,92,246,.28);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(139,92,246,.20), transparent 36%),
        rgba(18,18,28,.98);
    box-shadow: 0 22px 55px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.04) inset;
    backdrop-filter: blur(16px);
}

.emoji-picker-panel[hidden] {
    display: none !important;
}

.emoji-picker__tabs {
    display: flex;
    gap: 4px;
    padding: 10px 10px 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    overflow-x: auto;
}

.emoji-picker__tab {
    flex: 0 0 auto;
    width: 34px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    color: rgba(255,255,255,.70);
    background: transparent;
    font-size: 18px;
    line-height: 1;
}

.emoji-picker__tab:hover,
.emoji-picker__tab.is-active {
    color: #fff;
    background: rgba(139,92,246,.20);
}

.emoji-picker__body {
    max-height: min(340px, 48vh);
    overflow-y: auto;
    padding: 10px;
}

.emoji-picker__title {
    margin: 2px 4px 8px;
    color: rgba(255,255,255,.56);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.emoji-picker__item {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    transition: background-color .12s ease, transform .12s ease;
}

.emoji-picker__item:hover {
    background: rgba(255,255,255,.09);
    transform: translateY(-1px);
}

.emoji-picker__empty {
    padding: 18px 8px;
    color: rgba(255,255,255,.55);
    font-size: 13px;
    text-align: center;
}

@media (max-width: 575.98px) {
    .emoji-picker-panel {
        position: fixed;
        right: auto;
        bottom: auto;
        z-index: 10050;
        width: min(356px, calc(100vw - 20px));
        max-height: min(360px, 48vh);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 20px;
    }

    .emoji-picker__tabs {
        flex: 0 0 auto;
    }

    .emoji-picker__body {
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .emoji-picker__grid {
        grid-template-columns: repeat(7, 1fr);
    }

    .emoji-picker__item {
        font-size: 21px;
        min-height: 38px;
    }
}

:root[data-theme="light"] .chat-composer__emoji-btn {
    color: rgba(30,30,42,.62);
}

:root[data-theme="light"] .chat-composer__emoji-btn:hover,
:root[data-theme="light"] .chat-composer__emoji-btn.is-active {
    color: #6d28d9;
    background: rgba(139,92,246,.12);
}

:root[data-theme="light"] .emoji-picker-panel {
    background: rgba(255,255,255,.98);
    border-color: rgba(139,92,246,.22);
    box-shadow: 0 20px 45px rgba(30,30,42,.16), 0 0 0 1px rgba(139,92,246,.05) inset;
}

:root[data-theme="light"] .emoji-picker__tabs {
    border-bottom-color: rgba(30,30,42,.08);
}

:root[data-theme="light"] .emoji-picker__tab {
    color: rgba(30,30,42,.62);
}

:root[data-theme="light"] .emoji-picker__tab:hover,
:root[data-theme="light"] .emoji-picker__tab.is-active {
    color: #6d28d9;
    background: rgba(139,92,246,.11);
}

:root[data-theme="light"] .emoji-picker__title,
:root[data-theme="light"] .emoji-picker__empty {
    color: rgba(30,30,42,.56);
}

:root[data-theme="light"] .emoji-picker__item:hover {
    background: rgba(139,92,246,.10);
}

/* Emoji picker must not be clipped by composer row overrides. */
.chat-composer__input-row {
    overflow: visible !important;
}

.chat-composer__input-row .chat-composer__field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

.chat-composer__input-row .chat-composer__field #msgInput {
    width: 100% !important;
    min-width: 0 !important;
}

/* === Message reactions === */
.msg-reactions {
    position: relative;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 100%;
    margin-top: 8px;
    min-height: 30px;
}

.msg-reaction-list {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
}

.msg-reaction-chip,
.msg-reaction-toggle,
.msg-reaction-option {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(23, 24, 36, .94);
    color: var(--text-main, #eef1f8);
    box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}

.msg-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 27px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
}

.msg-reaction-chip:hover,
.msg-reaction-toggle:hover,
.msg-reaction-option:hover {
    transform: translateY(-1px);
    border-color: rgba(168, 85, 247, .55);
    background: rgba(168, 85, 247, .18);
}

.msg-reaction-chip.is-mine {
    border-color: rgba(168, 85, 247, .65);
    background: rgba(168, 85, 247, .24);
    color: #fff;
}

.msg-reaction-count {
    color: var(--text-muted, #a2a8ba);
    font-size: 11px;
    font-weight: 700;
}

.msg-reaction-chip.is-mine .msg-reaction-count {
    color: #eadcff;
}

.msg-reaction-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    opacity: 1;
    cursor: pointer;
}

.msg-reaction-toggle i {
    font-size: 15px;
    line-height: 1;
}

.msg-reaction-picker {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(168, 85, 247, .26);
    border-radius: 18px;
    background: rgba(18, 19, 27, .97);
    box-shadow: 0 18px 46px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(12px);
}

.msg-reaction-picker[hidden] {
    display: none !important;
}

.msg-reaction-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 18px;
    cursor: pointer;
}

.msg:has(.msg-reactions) {
    margin-bottom: 12px;
}

[data-theme="light"] .msg-reaction-picker,
body[data-theme="light"] .msg-reaction-picker {
    background: rgba(255,255,255,.97);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255,255,255,.7);
}

[data-theme="light"] .msg-reaction-chip,
[data-theme="light"] .msg-reaction-toggle,
[data-theme="light"] .msg-reaction-option,
body[data-theme="light"] .msg-reaction-chip,
body[data-theme="light"] .msg-reaction-toggle,
body[data-theme="light"] .msg-reaction-option {
    background: rgba(255,255,255,.94);
    border-color: rgba(15, 23, 42, .12);
    color: #111827;
}

@media (max-width: 575.98px) {
    .msg-reactions {
        justify-content: flex-end;
        margin-top: 10px;
        max-width: 100%;
    }

    .msg-reaction-picker {
        right: 0;
        max-width: calc(100vw - 36px);
        overflow-x: auto;
    }
}


/* === Message reactions: own messages are read-only === */
.msg-reactions--readonly {
    pointer-events: auto;
}

.msg-reactions--readonly .msg-reaction-chip {
    cursor: default;
    opacity: .92;
}

.msg-reactions--readonly .msg-reaction-chip:hover {
    transform: none;
    border-color: rgba(255,255,255,.12);
    background: rgba(23, 24, 36, .94);
}

.msg-reaction-chip:disabled {
    pointer-events: none;
}


/* === Mobile hotfix: emoji picker above composer/keyboard === */
@media (max-width: 575.98px) {
    .emoji-picker-panel {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(var(--mobile-composer-height, 128px) + env(safe-area-inset-bottom) + 12px) !important;
        width: auto !important;
        max-height: min(42vh, 330px) !important;
        z-index: 3000 !important;
        overflow: hidden !important;
    }

    .emoji-picker__body {
        max-height: calc(min(42vh, 330px) - 54px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* === Mobile hotfix: sidebar sections should not overlap === */
@media (max-width: 991.98px) {
    .mobile-users-panel {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    #mobileUsersPanel .chat-sidebar-section--rooms {
        max-height: none !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
    }

    #mobileUsersPanel .chat-sidebar-section--rooms .rooms-list {
        max-height: none !important;
        overflow: visible !important;
    }

    #onlineMobile {
        flex: 0 0 auto !important;
        overflow: visible !important;
        min-height: auto !important;
    }
}

/* One global sidebar search. The search field is shown only above the rooms list/filter.
   Old online-user search blocks stay hidden so the sidebar does not get a second search field. */
aside .main-sidebar-mode:has(#onlineSearchInput),
aside .main-sidebar-mode:has(#onlineSearchMobile) {
    display: none !important;
}
.rooms-tools .input-group:has(#roomsSearchInput),
.rooms-tools .input-group:has(#roomsSearchMobile) {
    display: flex !important;
}


/* Mobile emoji picker: fixed overlay above composer, not inside the input flow. */
@media (max-width: 575.98px) {
    body > .emoji-picker-panel {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(42vh, 330px) !important;
        z-index: 2147483000 !important;
        display: flex;
        flex-direction: column;
    }

    body > .emoji-picker-panel[hidden] {
        display: none !important;
    }
}


/* === CRITICAL iOS/Safari keyboard fix v2 ===
   Prevent Safari input zoom, keep the chat shell bound to the visible viewport,
   and keep composer/messages inside the screen when the keyboard is open. */
:root {
    --app-vh: 100dvh;
    --vv-offset-top: 0px;
    --keyboard-height: 0px;
}

footer .form-control#msgInput,
.chat-composer__field #msgInput,
#msgInput {
    font-size: 16px !important;
    line-height: 1.25 !important;
    -webkit-text-size-adjust: 100%;
}

@media (max-width: 991.98px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        height: 100%;
        overflow: hidden !important;
        overscroll-behavior: none;
        -webkit-text-size-adjust: 100%;
    }

    body {
        position: fixed;
        inset: 0;
        margin: 0;
        touch-action: manipulation;
    }

    .app-shell {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--vv-offset-top, 0px) !important;
        bottom: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: var(--app-vh, 100dvh) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .app-shell > main {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .app-header,
    .chat-footer {
        flex: 0 0 auto !important;
        min-height: 0;
    }

    .app-header {
        will-change: transform;
        transition: transform .18s ease, opacity .18s ease;
    }

    .chat-footer {
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        z-index: 1050 !important;
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }

    .chat-footer__inner,
    .chat-composer,
    .chat-composer__field,
    .chat-composer__input-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .chat-composer__input-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    .chat-composer__field {
        flex: 1 1 auto !important;
        width: auto !important;
    }

    .chat-composer__field #msgInput {
        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
    }

    .chat-composer__input-row #sendBtn {
        flex: 0 0 48px !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }

    #chatTabContent,
    #chatTabContent > .tab-pane,
    #chatTabContent > .tab-pane > .position-relative,
    #messages,
    .tab-pane > .h-100.overflow-auto,
    .chat-messages {
        min-height: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #messages,
    .tab-pane > .h-100.overflow-auto,
    .chat-messages {
        padding-bottom: calc(var(--mobile-composer-height, 120px) + env(safe-area-inset-bottom) + 16px) !important;
        scroll-padding-bottom: calc(var(--mobile-composer-height, 120px) + env(safe-area-inset-bottom) + 16px) !important;
        -webkit-overflow-scrolling: touch;
    }

    html.dmflirt-keyboard-open .app-header {
        transform: translateY(calc(-100% - 8px));
        opacity: 0;
        pointer-events: none;
        transition: transform .18s ease, opacity .18s ease;
    }

    html.dmflirt-keyboard-open #chatTabs {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    html.dmflirt-keyboard-open .chat-composer__tools {
        display: none !important;
    }

    html.dmflirt-keyboard-open .chat-footer {
        padding-top: 8px !important;
    }
}

@media (max-width: 575.98px) {
    .chat-composer__input-row #sendBtn {
        flex-basis: 46px !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
    }

    .chat-composer__emoji-btn {
        width: 34px !important;
        height: 34px !important;
        right: 7px !important;
    }

    .chat-composer__field #msgInput {
        padding-left: 12px !important;
        padding-right: 46px !important;
    }
}

/* === Mobile users/rooms drawer scroll fix ===
   Keep the whole drawer scrollable on iOS/Android and prevent the bottom
   part of the rooms/users list from being hidden behind browser chrome/footer. */
@media (max-width: 991.98px) {
    body.mobile-users-open {
        overflow: hidden !important;
        touch-action: none;
    }

    body.mobile-users-open .mobile-users-panel {
        top: var(--vv-offset-top, 0px) !important;
        bottom: auto !important;
        height: var(--app-vh, 100dvh) !important;
        max-height: var(--app-vh, 100dvh) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain;
        touch-action: pan-y !important;
        z-index: 2147482000 !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px) !important;
        box-sizing: border-box !important;
    }

    body.mobile-users-open .mobile-users-backdrop {
        z-index: 2147481900 !important;
    }

    #mobileUsersPanel .mobile-users-panel__header {
        flex: 0 0 auto !important;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    #mobileUsersPanel .chat-sidebar-section,
    #mobileUsersPanel .chat-sidebar-section--rooms,
    #mobileUsersPanel .chat-sidebar-section--active-room,
    #mobileUsersPanel .chat-sidebar-section__head,
    #mobileUsersPanel .rooms-tools,
    #mobileUsersPanel .rooms-list,
    #mobileUsersPanel .room-members-list,
    #onlineMobile {
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    #onlineMobile::after {
        content: "";
        display: block;
        height: calc(env(safe-area-inset-bottom, 0px) + 28px);
        flex: 0 0 auto;
    }
}

/* === Mobile rooms drawer polish ===
   Fix transparent/overlapping top area while scrolling the rooms/users drawer
   and add breathing room above the Create room button. */
@media (max-width: 991.98px) {
    body.mobile-users-open .mobile-users-panel,
    #mobileUsersPanel.mobile-users-panel {
        background:
            linear-gradient(180deg, rgba(32, 28, 43, .99), rgba(22, 19, 30, .99)) !important;
        isolation: isolate;
    }

    #mobileUsersPanel .mobile-users-panel__header {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        background:
            linear-gradient(180deg, rgba(35, 31, 47, .99), rgba(27, 24, 37, .99)) !important;
        border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .22) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #mobileUsersPanel .chat-sidebar-section--rooms {
        background:
            linear-gradient(180deg, rgba(31, 28, 42, .98), rgba(24, 21, 33, .98)) !important;
        border-bottom-color: rgba(255, 255, 255, .10) !important;
    }

    #mobileUsersPanel .chat-sidebar-section--rooms > .chat-sidebar-section__head,
    #mobileUsersPanel > .chat-sidebar-section__head.main-sidebar-mode {
        position: sticky !important;
        z-index: 12 !important;
        background:
            linear-gradient(180deg, rgba(31, 28, 42, .99), rgba(25, 22, 34, .99)) !important;
        box-shadow: 0 10px 18px rgba(0, 0, 0, .18) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #mobileUsersPanel .chat-sidebar-section--rooms > .chat-sidebar-section__head {
        top: 57px !important;
        margin: -10px -10px 10px !important;
        padding: 12px 10px 10px !important;
    }

    #mobileUsersPanel > .chat-sidebar-section__head.main-sidebar-mode {
        top: 57px !important;
        margin: 0 !important;
        padding-top: 14px !important;
        padding-bottom: 12px !important;
        border-top: 1px solid rgba(255, 255, 255, .08) !important;
        border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    }

    #mobileUsersPanel .chat-sidebar-section--rooms .px-3.pb-3 {
        padding-top: 12px !important;
    }

    #mobileUsersPanel #createRoomBtnMobile {
        margin-top: 4px !important;
    }
}

/* Sprint rooms/moderation UX — staff badges, search borders, create button and main pin */
.msg-name-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.05;
    vertical-align: middle;
}

.msg-name-stack > small {
    display: block;
    font-size: .58rem;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .86;
}

.msg .msg-name.msg-name--admin {
    color: #ffd166 !important;
    font-weight: 800;
    text-shadow: 0 0 9px rgba(255, 209, 102, .52), 0 0 18px rgba(255, 77, 109, .24);
}

.msg-name-stack--admin > small {
    color: #ffe6a3;
}

.msg .msg-name.msg-name--moderator {
    color: #8be9fd !important;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(139, 233, 253, .42);
}

.msg-name-stack--moderator > small {
    color: #b8f3ff;
}

.online-user-row .user-link.user-link--admin,
.online-user-row .user-link.user-link--moderator {
    font-weight: 800;
}

.online-user-row .user-link.user-link--admin { color: #ffd166 !important; }
.online-user-row .user-link.user-link--moderator { color: #8be9fd !important; }

.online-role-label {
    display: block;
    margin-left: 30px;
    margin-top: -2px;
    font-size: .62rem;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .78;
}

.rooms-tools .input-group,
.chat-sidebar-section .input-group {
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.035);
}

.rooms-tools .input-group .input-group-text,
.rooms-tools .input-group .form-control,
.rooms-tools .input-group .btn,
.chat-sidebar-section .input-group .input-group-text,
.chat-sidebar-section .input-group .form-control,
.chat-sidebar-section .input-group .btn {
    border: 0 !important;
}

#createRoomBtn,
#createRoomBtnMobile {
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-pinned-message {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    z-index: 5;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 209, 102, .34);
    border-radius: 16px;
    background: rgba(29, 24, 35, .94);
    color: #fff7d6;
    box-shadow: 0 16px 35px rgba(0,0,0,.28);
    backdrop-filter: blur(12px);
}

.main-pinned-message__text {
    min-width: 0;
    font-size: .92rem;
    line-height: 1.35;
    word-break: break-word;
}

.main-pinned-message__text a {
    color: #8be9fd;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.main-pinned-message__close {
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.76);
    padding: 0;
    line-height: 1;
}

.main-pinned-message__close:hover { color: #fff; }

#messages.has-pinned-message {
    padding-top: 84px !important;
}

/* Hotfix 2026-05-17 — sidebar create button, compact role labels, improved pin and chat moderation actions */
.rooms-create-wrap {
    flex: 0 0 auto;
}

.online-user-name-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.12;
}

.online-user-name-wrap .badge,
.online-user-name-wrap .online-sub {
    display: inline-flex;
    margin-left: 0 !important;
    margin-top: 2px;
}

.online-role-label {
    margin-left: 0 !important;
    margin-top: 2px !important;
    padding-left: 0;
}

.online-role-label--admin {
    color: #ffe6a3;
}

.online-role-label--moderator {
    color: #b8f3ff;
}

.msg-admin-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.64);
    font-size: .72rem;
    opacity: .55;
    transition: .16s ease;
}

.msg:hover .msg-admin-action,
.msg-admin-action:focus-visible {
    opacity: 1;
    color: #fff;
    background: rgba(255,255,255,.12);
}

.msg-admin-action:disabled {
    opacity: .35;
    pointer-events: none;
}

.main-pinned-message {
    border-color: rgba(255, 209, 102, .42);
    background:
        linear-gradient(135deg, rgba(255, 209, 102, .18), rgba(139, 92, 246, .12)),
        rgba(22, 18, 30, .96);
}

.main-pinned-message__icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 209, 102, .16);
    color: #ffd166;
}

.main-pinned-message__body {
    min-width: 0;
}

.main-pinned-message__title {
    margin-bottom: 2px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffd166;
}

#imageViewFull {
    cursor: zoom-out;
}

#imageViewModal .modal-body {
    cursor: zoom-out;
}

.online-user-name-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}


/* === DMFlirt autosizing composer textarea === */
.chat-composer__input-row {
    align-items: flex-end !important;
}

.chat-composer__field #msgInput,
footer .form-control#msgInput,
#msgInput {
    display: block !important;
    min-height: 48px !important;
    height: 48px;
    max-height: 138px !important;
    resize: none !important;
    overflow-y: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-right: 52px !important;
    scrollbar-width: thin;
}

.chat-composer__field #msgInput::-webkit-scrollbar {
    width: 5px;
}

.chat-composer__emoji-btn {
    top: auto !important;
    bottom: 6px !important;
    transform: none !important;
}

.chat-composer__input-row #sendBtn,
.chat-composer__input-row #autoScrollBtn {
    align-self: flex-end !important;
}

@media (max-width: 991.98px) {
    .chat-composer__input-row {
        align-items: flex-end !important;
        overflow: visible !important;
    }

    .chat-composer__field #msgInput {
        height: 48px;
        min-height: 48px !important;
        max-height: 132px !important;
    }

    .chat-composer__input-row #sendBtn {
        height: 48px !important;
    }
}


/* DM sidebar mode: when a private dialog is active, keep the right sidebar focused on the two participants. */
.chat-sidebar-section--dm {
    background: var(--bs-light, #f8f9fa);
}

.dm-sidebar-meta {
    padding: .35rem .75rem .6rem;
    font-size: .78rem;
    color: var(--bs-secondary-color, #6c757d);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.dm-sidebar-members .list-group-item {
    background: transparent;
}

.dm-sidebar-members .online-user-row {
    align-items: flex-start;
}

/* Hotfix 2026-05-17c — polished dark DM sidebar */
aside.sidebar-fixed .chat-sidebar-section--dm,
#mobileUsersPanel .chat-sidebar-section--dm {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 12px 12px;
    background:
        radial-gradient(circle at 20% 0%, rgba(217, 70, 239, .16), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
        rgba(18, 18, 28, .96) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    color: var(--text-main, #f7f2ff) !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
}

.chat-sidebar-section--dm.d-none {
    display: none !important;
}

.chat-sidebar-section--dm .chat-sidebar-section__head {
    margin: 0 0 8px;
    padding: 0;
    color: #fff !important;
}

.chat-sidebar-section--dm .chat-sidebar-section__head > span:first-child {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.chat-sidebar-section--dm .chat-sidebar-section__head .badge {
    background: rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(255,255,255,.12);
}

.dm-sidebar-meta {
    padding: 0 0 10px !important;
    margin: 0 0 6px;
    font-size: .8rem;
    line-height: 1.35;
    color: rgba(255,255,255,.62) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.dm-sidebar-members {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
}

.dm-sidebar-members .list-group-item {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 9px 10px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.045) !important;
    color: rgba(255,255,255,.86) !important;
}

.dm-sidebar-members .list-group-item + .list-group-item {
    border-top-width: 1px !important;
}

.dm-sidebar-members .online-user-row {
    width: 100%;
    align-items: center !important;
    gap: 10px;
}

.dm-sidebar-members .online-user-name-wrap,
.dm-sidebar-members .online-user-name-line {
    min-width: 0;
}

.dm-sidebar-members .user-link {
    color: rgba(255,255,255,.88) !important;
    text-decoration: none;
}

.dm-sidebar-members .user-link--admin {
    color: #ffd166 !important;
}

.dm-sidebar-members .user-link--moderator {
    color: #8be9fd !important;
}

.dm-sidebar-members .online-role-label {
    margin-left: 0 !important;
    margin-top: 3px !important;
    font-size: .62rem;
    line-height: 1;
    opacity: .85;
}

.dm-sidebar-members .text-muted,
.dm-sidebar-members .small,
.dm-sidebar-members .online-sub {
    color: rgba(255,255,255,.55) !important;
}

.dm-sidebar-members .bi-gender-male {
    color: #5aa2ff !important;
}

.dm-sidebar-members .bi-gender-female {
    color: #ff79c6 !important;
}

@media (max-width: 991.98px) {
    #mobileUsersPanel .chat-sidebar-section--dm {
        padding: 14px 14px 12px;
    }
}

/* Room join requests in active room sidebar */
.room-join-requests {
    margin: .65rem .75rem .75rem;
    padding: .75rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.room-join-requests__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
    color: rgba(255,255,255,.86);
    font-size: .82rem;
    font-weight: 700;
}

.room-join-requests__list {
    display: grid;
    gap: .45rem;
}

.room-join-request {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .5rem .55rem;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 13px;
    background: rgba(8, 9, 18, .32);
}

.room-join-request__user {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: .45rem;
}

.room-join-request__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255,255,255,.9);
    font-weight: 650;
}

.room-join-request__actions {
    display: inline-flex;
    flex: 0 0 auto;
    gap: .35rem;
}

.room-join-request__actions .btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 10px;
}


/* Room members: keep global admin/moderator identity visible inside rooms. */
.room-member-row .online-user-row {
    align-items: flex-start;
    gap: 8px;
}

.room-member-name-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.room-member-name-line {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
}

.room-member-name.user-link--admin,
.room-member-name--admin {
    color: #ffd166 !important;
    font-weight: 800;
    text-shadow: 0 0 9px rgba(255, 209, 102, .52), 0 0 18px rgba(255, 77, 109, .24);
}

.room-member-name.user-link--moderator,
.room-member-name--moderator {
    color: #8be9fd !important;
    font-weight: 800;
    text-shadow: 0 0 8px rgba(139, 233, 253, .42);
}

.room-member-staff-label {
    margin-left: 0 !important;
    margin-top: 1px;
}

.room-member-badge {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 7px;
    font-size: .62rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .02em;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

.room-member-badge--owner {
    color: #ffe6a3;
    background: rgba(255, 209, 102, .12);
    border-color: rgba(255, 209, 102, .24);
}

.room-member-badge--moderator {
    color: #b8f3ff;
    background: rgba(139, 233, 253, .10);
    border-color: rgba(139, 233, 253, .22);
}


.room-member-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.room-member-action-btn,
.room-member-role-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.78);
}

.room-member-action-btn:hover,
.room-member-action-btn:focus,
.room-member-role-btn:hover,
.room-member-role-btn:focus {
    background: rgba(255,255,255,.12);
    color: #fff;
}

.room-member-role-btn--add {
    color: #b8f3ff;
    border-color: rgba(139, 233, 253, .24);
    background: rgba(139, 233, 253, .08);
}

.room-member-role-btn--remove {
    color: #ffd6dc;
    border-color: rgba(255, 77, 109, .24);
    background: rgba(255, 77, 109, .08);
}

.room-member-action-btn:disabled,
.room-member-role-btn:disabled {
    opacity: .55;
    pointer-events: none;
}


.room-member-action-btn--mute {
    color: #ffe6a3;
    border-color: rgba(255, 209, 102, .24);
    background: rgba(255, 209, 102, .08);
}

.room-member-action-btn--kick {
    color: #d7d9ff;
    border-color: rgba(155, 139, 253, .24);
    background: rgba(155, 139, 253, .08);
}

.room-member-action-btn--ban {
    color: #ffd6dc;
    border-color: rgba(255, 77, 109, .24);
    background: rgba(255, 77, 109, .08);
}

@media (max-width: 575.98px) {
    .room-member-actions {
        gap: 4px;
    }

    .room-member-action-btn,
    .room-member-role-btn {
        width: 26px;
        height: 26px;
        font-size: .78rem;
    }
}

/* === Mobile chat bottom gap hotfix ===
   The composer is part of the flex layout on mobile, not an overlay. Large
   composer-sized padding inside the scroll containers creates an empty area
   after the last message when the user is already at the bottom. Keep only a
   small breathing room so the last message sits naturally above the composer. */
@media (max-width: 991.98px) {
    #messages,
    .tab-pane > .h-100.overflow-auto,
    .chat-messages {
        padding-bottom: 12px !important;
        scroll-padding-bottom: 12px !important;
    }
}

@media (max-width: 575.98px) {
    #messages,
    .tab-pane > .h-100.overflow-auto,
    .chat-messages {
        padding-bottom: 10px !important;
        scroll-padding-bottom: 10px !important;
    }
}

/* Center the auto-scroll icon vertically inside both desktop and mobile buttons. */
#autoScrollBtn,
#autoScrollBtnMobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}

#autoScrollBtn > i,
#autoScrollBtnMobile > i {
    display: block;
    line-height: 1 !important;
}

/* Hotfix 2026-05-18 — pinned message is rendered inside the message feed, not as an overlay */
#messages.has-pinned-message {
    padding-top: 1rem !important;
}

.msg--pinned {
    margin: 0 0 12px 0;
}

.msg--pinned .msg-line--pinned {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 860px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 209, 102, .34);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 209, 102, .14), rgba(139, 92, 246, .10)),
        rgba(34, 28, 43, .88);
    color: #fff7d6;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.msg--pinned .main-pinned-message__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 209, 102, .18);
    color: #ffd166;
}

.msg--pinned .main-pinned-message__body {
    display: block;
    min-width: 0;
}

.msg--pinned .main-pinned-message__title {
    display: inline-block;
    margin: 0 8px 4px 0;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffd166;
}

.msg--pinned .main-pinned-message__text {
    display: block;
    min-width: 0;
    font-size: .95rem;
    line-height: 1.4;
    word-break: break-word;
}

.msg--pinned .main-pinned-message__text a {
    color: #8be9fd;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Rooms finalization: compact permissions badges in active room sidebar */
.room-active-meta__text {
    color: var(--text-muted, rgba(255,255,255,.62));
    font-size: 12px;
    line-height: 1.35;
    margin-bottom: 8px;
}

.room-permission-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.room-permission-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.78);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.room-permission-badge i {
    font-size: 12px;
    line-height: 1;
}

.room-permission-badge--public {
    color: #b8f3ff;
    border-color: rgba(139, 233, 253, .20);
    background: rgba(139, 233, 253, .08);
}

.room-permission-badge--private,
.room-permission-badge--password,
.room-permission-badge--approval {
    color: #ffe6a3;
    border-color: rgba(255, 209, 102, .24);
    background: rgba(255, 209, 102, .08);
}

.room-permission-badge--male {
    color: #b7d8ff;
    border-color: rgba(96,165,250,.24);
    background: rgba(96,165,250,.09);
}

.room-permission-badge--female {
    color: #ffd0e8;
    border-color: rgba(244,114,182,.24);
    background: rgba(244,114,182,.09);
}

.room-permission-badge--official {
    color: #d6ccff;
    border-color: rgba(139,92,246,.24);
    background: rgba(139,92,246,.10);
}

.room-permission-badge--limit {
    color: rgba(255,255,255,.82);
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.055);
}

@media (max-width: 575.98px) {
    .room-permission-badges {
        gap: 5px;
    }

    .room-permission-badge {
        min-height: 22px;
        padding: 4px 7px;
        font-size: 10px;
    }
}


/* === Room mobile polish patch === */
@media (max-width: 768px) {
  .room-item,
  .room-list-item {
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
  }

  .room-item.active,
  .room-list-item.active {
    box-shadow: 0 0 0 1px rgba(255,255,255,.12);
    transform: translateZ(0);
  }

  .room-header,
  .active-room-header {
    padding: 8px 12px;
    gap: 6px;
  }

  .room-owner-badge,
  .room-mod-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
  }

  .rooms-drawer,
  .rooms-sidebar {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  }
}


/* Rooms finalization polish */
.room-item.active,
.room-tab.active {
    box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}

.room-badges {
    gap: 4px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .room-item,
    .room-tab {
        border-radius: 14px;
    }

    .room-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}


/* Rooms Finish Sprint */
.room-item.active,
.room-tab.active {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 8px 24px rgba(0,0,0,.18);
}

.room-item {
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.room-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.room-header {
    backdrop-filter: blur(10px);
}

.room-drawer .btn,
.room-settings-modal .btn {
    border-radius: 12px;
}

.room-settings-section {
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 12px;
    background: rgba(255,255,255,.03);
}

.room-settings-section-title {
    font-size: .82rem;
    font-weight: 700;
    opacity: .85;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.room-password-input {
    letter-spacing: .04em;
}

@media (max-width: 768px) {
    .room-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .room-item,
    .room-tab {
        border-radius: 14px;
    }

    .room-drawer {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}


/* Rooms final finish: richer room type icons and member priority */
.room-list-item__access-icon--public {
    color: #86efac;
    background: rgba(134, 239, 172, .10);
}

.room-list-item__access-icon--password,
.room-list-item__access-icon--approval {
    color: #fbbf24;
    background: rgba(251,191,36,.13);
}

.room-list-item__access-icon--official {
    color: #c4b5fd;
    background: rgba(196,181,253,.12);
}

.room-list-item__access-icon--limit {
    color: #93c5fd;
    background: rgba(147,197,253,.11);
}

.room-member-row--admin {
    background: linear-gradient(90deg, rgba(239, 68, 68, .10), transparent 72%) !important;
}

.room-member-row .room-member-badge--owner {
    color: #fde68a;
    border-color: rgba(253,230,138,.24);
    background: rgba(253,230,138,.10);
}

.room-member-row .room-member-badge--moderator {
    color: #bfdbfe;
    border-color: rgba(191,219,254,.22);
    background: rgba(191,219,254,.08);
}

@media (max-width: 768px) {
    .room-list-item__meta-icons {
        gap: 5px;
    }

    .room-list-item__access-icon {
        width: 19px;
        height: 19px;
        font-size: 11px;
    }

    .room-member-actions {
        gap: 4px;
    }
}

/* Rooms final audit fixes */
.room-list-item.is-active,
.room-list-item.active,
.room-tab.is-active,
.room-tab.active {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.20);
}

.room-member-row--owner {
    background: linear-gradient(90deg, rgba(253, 230, 138, .09), transparent 72%);
}

.room-member-row--moderator {
    background: linear-gradient(90deg, rgba(147, 197, 253, .07), transparent 72%);
}

.room-member-row--admin .room-member-badge,
.room-member-row--owner .room-member-badge,
.room-member-row--moderator .room-member-badge {
    white-space: nowrap;
}

/* Rooms polish: visible loading state while joining/switching rooms */
.room-list-item.is-loading {
    opacity: .72;
    cursor: wait;
}

.room-list-item.is-loading .room-list-item__icon i {
    animation: room-spin .85s linear infinite;
}

@keyframes room-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Rooms polish: pending join request indicator */
.room-list-item__access-icon.is-pending {
    opacity: .95;
    box-shadow: 0 0 0 1px rgba(251,191,36,.22) inset;
}

/* Rooms final polish: avoid double actions and make pending states visible */
.room-member-action-btn.is-loading,
.room-join-request.is-loading button,
.room-list-item.is-loading {
    pointer-events: none;
    opacity: .72;
}

.room-join-request.is-loading {
    opacity: .78;
}

.room-member-action-btn.is-loading i,
.room-list-item.is-loading .room-list-item__icon i {
    animation: room-action-spin .8s linear infinite;
}

@keyframes room-action-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Tail cleanup before profiles: rooms modal/mobile polish */
.room-settings-modal .modal-body,
.create-room-modal .modal-body,
.report-modal .modal-body {
    overscroll-behavior: contain;
}

.room-settings-modal .form-control,
.room-settings-modal .form-select,
.create-room-modal .form-control,
.create-room-modal .form-select {
    min-height: 42px;
}

.room-settings-modal textarea,
.create-room-modal textarea,
.report-modal textarea {
    resize: vertical;
}

.room-list-item,
.room-member-row,
.room-join-request {
    backface-visibility: hidden;
}

.room-member-actions {
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    #createRoomModal .modal-dialog,
    #roomSettingsModal .modal-dialog,
    #reportRoomModal .modal-dialog {
        margin: .5rem;
    }

    #createRoomModal .modal-content,
    #roomSettingsModal .modal-content,
    #reportRoomModal .modal-content {
        max-height: calc(100dvh - 1rem);
        overflow: hidden;
    }

    #createRoomModal .modal-body,
    #roomSettingsModal .modal-body,
    #reportRoomModal .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .room-member-actions .btn {
        min-width: 34px;
        min-height: 34px;
    }
}

/* === Media layout stability: reserve space for external images/GIFs === */
.chat-media-frame {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(220px, 100%);
    max-width: 100%;
    aspect-ratio: 4 / 3;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(15, 23, 42, .72);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
    contain: layout paint;
}

.chat-media-frame--external {
    width: min(260px, 100%);
}

.chat-media-frame .img-thumbnail.chat-thumb,
.chat-media-frame .chat-thumb {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    object-fit: contain;
    background: transparent;
}

.chat-media-frame--loading::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.10), rgba(255,255,255,.04));
    background-size: 220% 100%;
    animation: chatMediaSkeleton 1.15s ease-in-out infinite;
    pointer-events: none;
}

.chat-media-frame--hidden,
.chat-media-frame--broken {
    background: rgba(15, 23, 42, .52);
}

@keyframes chatMediaSkeleton {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

@media (max-width: 576px) {
    .chat-media-frame,
    .chat-media-frame--external {
        width: min(260px, 76vw);
    }
}

:root[data-theme="light"] .chat-media-frame {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, .36);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .10);
}

/* Profiles MVP */
.profile-modal-open { overflow: hidden; }
.profile-modal { position: fixed; inset: 0; z-index: 2500; }
.profile-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); }
.profile-modal__dialog { position: relative; width: min(760px, calc(100vw - 24px)); max-height: min(820px, calc(100vh - 32px)); margin: 16px auto; overflow: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: linear-gradient(180deg, rgba(28, 24, 46, .98), rgba(14, 16, 29, .98)); box-shadow: 0 24px 80px rgba(0,0,0,.5); color: #fff; }
.profile-modal__close { position: sticky; top: 12px; float: right; z-index: 3; width: 38px; height: 38px; margin: 12px 12px 0 0; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; }
.profile-modal__content { padding: 28px; clear: both; }
.profile-loading, .profile-empty { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; color: rgba(255,255,255,.78); }
.profile-empty i { font-size: 34px; opacity: .8; }
.profile-head { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; padding: 18px; border-radius: 22px; background: radial-gradient(circle at top left, rgba(255,90,160,.26), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.1); }
.profile-avatar { width: 96px; height: 96px; border-radius: 28px; overflow: hidden; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.profile-avatar__img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar__fallback { width: 100%; height: 100%; display: grid; place-items: center; font-size: 38px; font-weight: 800; background: linear-gradient(135deg, rgba(255,90,160,.9), rgba(94,168,255,.85)); }
.profile-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.58); }
.profile-head h2 { margin: 4px 0 8px; font-size: clamp(24px, 4vw, 34px); line-height: 1.1; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); font-size: 13px; }
.profile-badge--staff { background: rgba(255, 209, 102, .18); color: #ffd166; }
.profile-badge--muted { color: rgba(255,255,255,.65); }
.profile-wallet { min-width: 126px; display: grid; justify-items: center; gap: 2px; padding: 12px; border-radius: 18px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.1); }
.profile-wallet strong { font-size: 24px; }
.profile-wallet small { color: rgba(255,255,255,.62); }
.profile-tabs { display: flex; gap: 8px; margin: 18px 0; overflow-x: auto; }
.profile-tab { border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 8px 14px; color: rgba(255,255,255,.74); background: rgba(255,255,255,.06); white-space: nowrap; }
.profile-tab.active { color: #fff; background: rgba(255,90,160,.24); }
.profile-tab:disabled { opacity: .48; }
.profile-tab-panel { display: none; }
.profile-tab-panel.active { display: block; }
.profile-tab-panel .profile-edit-form { margin-top: 0; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.profile-card { padding: 16px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); }
.profile-card--notice { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; color: rgba(255,255,255,.82); }
.profile-card--notice p { margin: 0; }
.profile-card__label { margin-bottom: 8px; color: rgba(255,255,255,.56); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.profile-card__text { white-space: pre-wrap; color: rgba(255,255,255,.9); }
.profile-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.profile-meta { padding: 12px; border-radius: 16px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.08); }
.profile-meta span { display: block; margin-bottom: 5px; color: rgba(255,255,255,.52); font-size: 12px; }
.profile-meta strong { font-size: 14px; color: rgba(255,255,255,.9); }
.profile-actions { display: flex; gap: 10px; margin-top: 16px; }
.profile-edit-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.profile-edit-form h3 { font-size: 18px; margin-bottom: 14px; }
.profile-edit-form .form-label { display: grid; gap: 6px; width: 100%; color: rgba(255,255,255,.7); }
.profile-edit-form .form-control, .profile-edit-form .form-select { background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.14); color: #fff; }
.profile-edit-form .form-control:focus, .profile-edit-form .form-select:focus { background: rgba(0,0,0,.25); color: #fff; border-color: rgba(255,90,160,.65); box-shadow: 0 0 0 .2rem rgba(255,90,160,.14); }
.profile-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profile-privacy-box { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.05); }
.profile-form-actions { margin-top: 14px; }

@media (max-width: 760px) {
  .profile-modal__dialog { width: 100vw; height: 100dvh; max-height: none; margin: 0; border-radius: 0; border: 0; }
  .profile-modal__content { padding: 18px 14px calc(24px + env(safe-area-inset-bottom)); }
  .profile-head { grid-template-columns: 74px 1fr; }
  .profile-avatar { width: 74px; height: 74px; border-radius: 22px; }
  .profile-wallet { grid-column: 1 / -1; grid-template-columns: auto auto 1fr auto; justify-items: start; align-items: center; width: 100%; }
  .profile-grid, .profile-form-row { grid-template-columns: 1fr; }
  .profile-meta-grid { grid-template-columns: 1fr 1fr; }
}

/* Profiles polish: info/about/activity/foundation tabs */
.profile-empty--compact {
  min-height: 190px;
  padding: 22px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
}
.profile-activity-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.profile-about-layout {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
}
.profile-card--wide {
  grid-row: span 2;
}
.profile-card__text--large {
  min-height: 88px;
  font-size: 15px;
  line-height: 1.55;
}
.profile-edit-avatar-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
}
.profile-avatar--edit {
  width: 74px;
  height: 74px;
  border-radius: 22px;
}
.profile-head--guest {
  grid-template-columns: 86px 1fr;
}
.profile-meta-grid--guest {
  grid-template-columns: 1fr 1fr;
}
.profile-tabs {
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.profile-tab:not(:disabled):hover {
  border-color: rgba(255,90,160,.34);
  background: rgba(255,90,160,.14);
  color: #fff;
}
@media (max-width: 760px) {
  .profile-modal__dialog {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .profile-modal__close {
    top: max(10px, env(safe-area-inset-top));
  }
  .profile-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-inline: -14px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(20,18,35,.96), rgba(20,18,35,.86));
    backdrop-filter: blur(12px);
  }
  .profile-activity-block,
  .profile-about-layout,
  .profile-edit-avatar-row {
    grid-template-columns: 1fr;
  }
  .profile-card--wide {
    grid-row: auto;
  }
  .profile-meta-grid--guest {
    grid-template-columns: 1fr;
  }
}


/* Profiles: avatar upload polish */
.profile-avatar--editable {
  position: relative;
  isolation: isolate;
}
.profile-avatar-edit-btn {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,90,160,.95), rgba(124,58,237,.95));
  box-shadow: 0 10px 24px rgba(0,0,0,.32);
}
.profile-avatar-edit-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.profile-avatar-edit-btn:disabled {
  opacity: .6;
  pointer-events: none;
}
.profile-edit-avatar-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  color: rgba(255,255,255,.74);
  background: rgba(255,255,255,.045);
}
.profile-edit-avatar-note i {
  color: rgba(255,90,160,.95);
}
@media (max-width: 760px) {
  .profile-avatar-edit-btn {
    right: 4px;
    bottom: 4px;
    width: 30px;
    height: 30px;
  }
}

/* Profiles premium overlay/header polish */
.app-header__actions {
  align-items: center;
  gap: .55rem;
}
.app-header__actions .btn {
  min-height: 42px;
  border-radius: 999px;
  padding-inline: 1rem;
  backdrop-filter: blur(12px);
}
.app-header__profile-btn {
  border-color: rgba(167,139,250,.55) !important;
  background: rgba(255,255,255,.92) !important;
  color: #14111f !important;
  box-shadow: 0 10px 28px rgba(167,139,250,.22), inset 0 1px 0 rgba(255,255,255,.75);
}
.app-header__profile-btn:hover,
.app-header__profile-btn:focus-visible {
  background: #fff !important;
  border-color: rgba(216,180,254,.88) !important;
  color: #0f0b19 !important;
  transform: translateY(-1px);
}
.profile-modal {
  animation: profileOverlayIn .18s ease-out both;
}
.profile-modal__backdrop {
  background: rgba(5, 5, 12, .38);
  backdrop-filter: blur(7px) saturate(1.15);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
}
.profile-modal__dialog {
  animation: profileDialogIn .22s cubic-bezier(.2,.8,.2,1) both;
  background: linear-gradient(180deg, rgba(28,24,46,.94), rgba(14,16,29,.94));
}
@keyframes profileOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes profileDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.profile-avatar.is-uploading .profile-avatar__img,
.profile-avatar.is-uploading .profile-avatar__fallback {
  filter: blur(1px);
  opacity: .45;
}
.profile-avatar-upload-state {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 8px;
  text-align: center;
  color: #fff;
  background: rgba(11, 9, 22, .46);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.profile-avatar-upload-state small {
  max-width: 86px;
  font-size: 11px;
  line-height: 1.1;
}
.profile-avatar.is-upload-success {
  animation: profileAvatarSaved .72s ease both;
}
@keyframes profileAvatarSaved {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.0); }
  35% { box-shadow: 0 0 0 6px rgba(34,197,94,.28); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,.0); }
}
@media (max-width: 760px) {
  .profile-modal__backdrop {
    background: rgba(5, 5, 12, .22);
    backdrop-filter: blur(4px) saturate(1.08);
    -webkit-backdrop-filter: blur(4px) saturate(1.08);
  }
  .app-header__actions {
    gap: .38rem;
  }
  .app-header__actions .btn {
    min-height: 38px;
    padding-inline: .8rem;
  }
}

/* Account hub / wallet dropdown */
.account-hub {
  position: relative;
  flex: 0 0 auto;
  z-index: 1040;
}

.account-hub__trigger {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
  box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.account-hub__trigger:hover,
.account-hub__trigger:focus-visible,
.account-hub.is-open .account-hub__trigger {
  border-color: rgba(236, 72, 153, .42);
  background: linear-gradient(135deg, rgba(236,72,153,.24), rgba(99,102,241,.18));
  box-shadow: 0 14px 38px rgba(236,72,153,.16), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.account-hub__avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  background: linear-gradient(135deg, rgba(255,90,160,.95), rgba(94,168,255,.90));
  box-shadow: 0 0 0 2px rgba(255,255,255,.14);
}

.account-hub__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-hub__avatar--large {
  width: 54px;
  height: 54px;
  font-size: 22px;
}

.account-hub__identity {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.05;
}

.account-hub__name {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
}

.account-hub__balance {
  margin-top: 3px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 700;
}

.account-hub__chevron {
  color: rgba(255,255,255,.65);
  font-size: 12px;
  transition: transform .16s ease;
}

.account-hub.is-open .account-hub__chevron {
  transform: rotate(180deg);
}

.account-hub__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(330px, calc(100vw - 18px));
  padding: 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(180deg, rgba(25,24,43,.98), rgba(13,15,28,.98));
  box-shadow: 0 24px 70px rgba(0,0,0,.46);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
  animation: accountHubMenuIn .16s ease-out both;
}

@keyframes accountHubMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.account-hub__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 12px;
}

.account-hub__card-user {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.account-hub__card-user strong {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}

.account-hub__card-user span {
  color: rgba(255,255,255,.62);
  font-size: 12px;
}

.account-hub__wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at 20% 10%, rgba(250,204,21,.18), transparent 36%), rgba(255,255,255,.06);
}

.account-hub__wallet span {
  display: block;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}

.account-hub__wallet strong {
  display: block;
  margin-top: 2px;
  font-size: 16px;
}

.account-hub__actions,
.account-hub__footer {
  display: grid;
  gap: 4px;
}

.account-hub__footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.account-hub__actions button,
.account-hub__footer button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  padding: 9px 10px;
  color: rgba(255,255,255,.88);
  background: transparent;
  text-align: left;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}

.account-hub__actions button:hover,
.account-hub__actions button:focus-visible,
.account-hub__footer button:hover,
.account-hub__footer button:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.08);
  transform: translateX(1px);
}

.account-hub__actions i,
.account-hub__footer i {
  width: 22px;
  color: rgba(255,255,255,.62);
  font-size: 16px;
}

.account-hub__actions span,
.account-hub__footer span {
  flex: 1 1 auto;
  font-weight: 700;
}

.account-hub__actions small {
  color: rgba(255,255,255,.46);
  font-size: 11px;
}

.account-hub__footer button {
  color: rgba(255,185,185,.92);
}

.account-hub__footer i {
  color: rgba(255,120,120,.9);
}

:root[data-theme="light"] .account-hub__trigger {
  color: #151827;
  border-color: rgba(15,23,42,.10);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 30px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.75);
}

:root[data-theme="light"] .account-hub__balance,
:root[data-theme="light"] .account-hub__chevron {
  color: rgba(15,23,42,.62);
}

:root[data-theme="light"] .account-hub__menu {
  color: #151827;
  border-color: rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,251,.98));
  box-shadow: 0 24px 70px rgba(15,23,42,.18);
}

:root[data-theme="light"] .account-hub__card-user span,
:root[data-theme="light"] .account-hub__wallet span,
:root[data-theme="light"] .account-hub__actions small {
  color: rgba(15,23,42,.55);
}

:root[data-theme="light"] .account-hub__wallet {
  border-color: rgba(15,23,42,.08);
  background: radial-gradient(circle at 20% 10%, rgba(250,204,21,.18), transparent 36%), rgba(15,23,42,.035);
}

:root[data-theme="light"] .account-hub__actions button,
:root[data-theme="light"] .account-hub__footer button {
  color: rgba(15,23,42,.82);
}

:root[data-theme="light"] .account-hub__actions button:hover,
:root[data-theme="light"] .account-hub__actions button:focus-visible,
:root[data-theme="light"] .account-hub__footer button:hover,
:root[data-theme="light"] .account-hub__footer button:focus-visible {
  color: #0f172a;
  background: rgba(15,23,42,.06);
}

@media (max-width: 760px) {
  .account-hub__trigger {
    min-height: 40px;
    padding: 4px 9px 4px 5px;
    gap: 7px;
  }

  .account-hub__avatar {
    width: 31px;
    height: 31px;
  }

  .account-hub__identity {
    max-width: 88px;
  }

  .account-hub__name,
  .account-hub__balance {
    max-width: 88px;
  }

  .account-hub__name {
    font-size: 12px;
  }

  .account-hub__balance {
    font-size: 10px;
  }

  .account-hub__menu {
    position: fixed;
    top: 62px;
    right: 9px;
    left: auto;
    width: min(330px, calc(100vw - 18px));
    max-height: calc(100dvh - 74px);
    overflow: auto;
  }
}

@media (max-width: 430px) {
  .account-hub__identity {
    display: none;
  }

  .account-hub__trigger {
    padding-right: 8px;
  }

  .account-hub__chevron {
    display: none;
  }
}

/* Profiles friends MVP */
.profile-friends {
  display: grid;
  gap: 16px;
}
.profile-loading--inline {
  min-height: 120px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.profile-friends-section {
  display: grid;
  gap: 10px;
}
.profile-friends-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  color: rgba(255,255,255,.86);
}
.profile-friends-section h3 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255,90,160,.2);
  color: #fff;
  font-size: 12px;
}
.profile-friend-list {
  display: grid;
  gap: 8px;
}
.profile-friend-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.085);
}
.profile-friend-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.profile-friend-main:hover strong,
.profile-friend-main:focus-visible strong {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.profile-friend-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,90,160,.28), rgba(110,168,254,.22));
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-weight: 800;
}
.profile-friend-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-friend-info {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.profile-friend-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.9);
  font-size: 14px;
}
.profile-friend-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.52);
  font-size: 12px;
}
.profile-friend-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.profile-friend-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.68);
  font-size: 12px;
}

@media (max-width: 575.98px) {
  .profile-friend-item {
    grid-template-columns: 1fr;
  }
  .profile-friend-actions {
    justify-content: flex-start;
    padding-left: 52px;
  }
  .profile-actions {
    flex-wrap: wrap;
  }
}

/* Profile gallery / main gallery showcase polish */
.gallery-profile-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  pointer-events: none;
}

.gallery-action-btn--profile.is-active {
  background: rgba(99, 102, 241, 0.95);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

.profile-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

.profile-gallery-head strong,
.profile-gallery-head span,
.profile-gallery-head em {
  display: block;
}

.profile-gallery-head span {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}

.profile-gallery-head em {
  min-width: 46px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.18);
  color: #fff;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.profile-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.profile-gallery-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.profile-gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.profile-gallery-photo:hover img {
  transform: scale(1.045);
  opacity: 0.95;
}

.profile-gallery-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

@media (max-width: 576px) {
  .profile-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .profile-gallery-photo {
    border-radius: 14px;
  }
}

/* Recovery: avatar fallback and profile gallery preview above profile modal */
#imageViewModal {
  z-index: 4000 !important;
}
.modal-backdrop.image-view-backdrop {
  z-index: 3990 !important;
}
.account-hub__avatar {
  position: relative;
}
.account-hub__avatar--with-img .account-hub__avatar-fallback {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
}
.account-hub__avatar--with-img.has-avatar-error .account-hub__avatar-fallback {
  display: grid;
}
.account-hub__avatar--with-img.has-avatar-error img {
  display: none;
}
.profile-avatar.has-avatar-error .profile-avatar__fallback--error {
  display: grid;
}
.profile-avatar__fallback--error {
  display: none;
}
.profile-avatar.has-avatar-error .profile-avatar__img {
  display: none;
}


/* Hotfix: DM/profile recovery after profile gallery/account hub patches */
.profile-modal { z-index: 2500 !important; }
#imageViewModal,
.image-view-modal,
.gallery-preview-modal,
.profile-gallery-lightbox,
.profile-gallery-viewer {
  z-index: 2147483000 !important;
}
.modal-backdrop.image-view-backdrop,
.image-view-backdrop,
.gallery-preview-backdrop,
.profile-gallery-lightbox-backdrop {
  z-index: 2147482990 !important;
}
.account-hub__actions button[data-account-action="gallery"] small,
.account-hub__actions button[data-account-action="gallery"] .soon,
.account-hub__actions button[data-account-action="gallery"] .badge {
  display: none !important;
}
.account-hub__avatar.has-avatar-error,
.account-hub__avatar:not(.account-hub__avatar--with-img) {
  display: inline-grid;
  place-items: center;
}
.account-hub__avatar-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.account-hub__avatar--with-img .account-hub__avatar-fallback {
  display: none;
}
.account-hub__avatar.has-avatar-error .account-hub__avatar-fallback {
  display: grid;
}
.profile-avatar.has-avatar-error .profile-avatar__fallback--error {
  display: grid;
}
.profile-avatar__fallback--error {
  display: none;
}


/* Mobile profile/account access polish */
.profile-modal__more {
  position: absolute;
  top: 14px;
  right: 58px;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  z-index: 5;
}
.profile-modal__more:hover,
.profile-modal__more:focus-visible,
.profile-modal__more[aria-expanded="true"] {
  background: rgba(236,72,153,.20);
  border-color: rgba(236,72,153,.36);
}
.profile-modal__more[hidden] { display: none !important; }
.profile-modal__menu {
  position: absolute;
  top: 62px;
  right: 18px;
  width: min(260px, calc(100vw - 36px));
  padding: 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(25,24,43,.98), rgba(13,15,28,.98));
  box-shadow: 0 24px 70px rgba(0,0,0,.46);
  z-index: 6;
}
.profile-modal__menu button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  padding: 9px 10px;
  color: rgba(255,255,255,.9);
  background: transparent;
  text-align: left;
}
.profile-modal__menu button:hover,
.profile-modal__menu button:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.profile-modal__menu i {
  width: 22px;
  color: rgba(255,255,255,.65);
}
.profile-modal__menu-logout {
  margin-top: 6px;
  color: rgba(255,185,185,.95) !important;
}
.profile-modal__menu-logout i { color: rgba(255,120,120,.92) !important; }

@media (max-width: 760px) {
  .account-hub__trigger {
    width: 48px;
    height: 48px;
    min-height: 48px;
    justify-content: center;
    padding: 0;
    border-radius: 18px;
  }
  .account-hub__avatar {
    width: 40px;
    height: 40px;
  }
  .account-hub__identity,
  .account-hub__chevron {
    display: none !important;
  }
  .profile-modal__dialog {
    padding-top: max(18px, env(safe-area-inset-top));
  }
  .profile-modal__close,
  .profile-modal__more {
    top: max(12px, env(safe-area-inset-top));
  }
  .profile-modal__more {
    right: 62px;
  }
  .profile-modal__menu {
    top: calc(max(12px, env(safe-area-inset-top)) + 50px);
    right: 12px;
  }
}

/* Mobile profile final polish: aligned actions + safe width */
@media (max-width: 760px) {
  html.profile-modal-open,
  body.profile-modal-open {
    overflow: hidden !important;
    width: 100%;
  }

  .profile-modal {
    overflow: hidden;
  }

  .profile-modal__dialog {
    width: 100%;
    max-width: 100vw;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding-top: 0;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .profile-modal__close,
  .profile-modal__more {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 18px);
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    margin: 0;
    float: none;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    line-height: 1;
    box-sizing: border-box;
  }

  .profile-modal__close {
    right: calc(env(safe-area-inset-right) + 18px);
  }

  .profile-modal__more {
    right: calc(env(safe-area-inset-right) + 88px);
  }

  .profile-modal__close i,
  .profile-modal__more i {
    display: block;
    font-size: 24px;
    line-height: 1;
  }

  .profile-modal__menu {
    top: calc(env(safe-area-inset-top) + 82px);
    right: calc(env(safe-area-inset-right) + 16px);
    max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
    box-sizing: border-box;
  }

  .profile-modal__content {
    width: 100%;
    max-width: 100vw;
    padding: calc(env(safe-area-inset-top) + 116px) calc(14px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .profile-head {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    box-sizing: border-box;
  }

  .profile-head > * {
    min-width: 0;
  }

  .profile-head h2 {
    max-width: 100%;
    font-size: clamp(28px, 8vw, 38px);
    overflow-wrap: anywhere;
  }

  .profile-avatar {
    width: 76px;
    height: 76px;
    border-radius: 24px;
  }

  .profile-badges {
    gap: 8px;
  }

  .profile-badge {
    min-height: 32px;
    padding-inline: 12px;
    font-size: 15px;
  }

  .profile-wallet {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .profile-tabs {
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .profile-tabs::-webkit-scrollbar {
    display: none;
  }

  .profile-tab {
    flex: 0 0 auto;
    padding: 8px 13px;
    font-size: 15px;
  }

  .profile-grid,
  .profile-meta-grid,
  .profile-activity-block,
  .profile-about-layout,
  .profile-form-row {
    max-width: 100%;
    box-sizing: border-box;
  }

  .profile-card,
  .profile-meta {
    min-width: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 390px) {
  .profile-modal__close,
  .profile-modal__more {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  .profile-modal__close {
    right: calc(env(safe-area-inset-right) + 14px);
  }

  .profile-modal__more {
    right: calc(env(safe-area-inset-right) + 74px);
  }

  .profile-modal__content {
    padding-top: calc(env(safe-area-inset-top) + 104px);
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }

  .profile-head {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .profile-avatar {
    width: 68px;
    height: 68px;
    border-radius: 22px;
  }

  .profile-head h2 {
    font-size: clamp(26px, 7.5vw, 34px);
  }

  .profile-badge {
    min-height: 30px;
    font-size: 14px;
  }
}

/* Mobile header avatar polish */
@media (max-width: 768px) {
  .app-header__profile-btn {
    padding: 0 !important;
    width: 56px;
    height: 56px;
    min-height: 56px;
    border-radius: 18px !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .app-header__profile-btn img,
  .app-header__profile-btn .avatar,
  .app-header__profile-btn .header-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }
}

/* Final mobile header avatar alignment: account hub must match other header buttons */
@media (max-width: 575.98px) {
  .app-header__actions {
    align-items: center !important;
  }

  .app-header__actions > .account-hub {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .account-hub__trigger,
  .account-hub.is-open .account-hub__trigger,
  .account-hub__trigger:hover,
  .account-hub__trigger:focus-visible {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
    line-height: 1 !important;
  }

  .account-hub__avatar,
  .account-hub__trigger .account-hub__avatar {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: linear-gradient(135deg, rgba(255,90,160,.95), rgba(94,168,255,.90)) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 4px 12px rgba(236,72,153,.18) !important;
    overflow: hidden !important;
    display: inline-grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
  }

  .account-hub__avatar img,
  .account-hub__trigger .account-hub__avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 999px !important;
  }

  .account-hub__avatar-fallback {
    width: 100% !important;
    height: 100% !important;
    border-radius: 999px !important;
  }

  .account-hub__identity,
  .account-hub__chevron {
    display: none !important;
  }
}


/* Profiles: privacy controls and action polish */
.profile-privacy-box__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  color: rgba(255,255,255,.88);
  font-weight: 700;
}
.profile-privacy-box__title i { color: rgba(255,90,160,.95); }
.profile-privacy-box .form-label { margin-bottom: 4px; }
.profile-privacy-box .form-check {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.profile-privacy-box .form-check-input { margin: 0; }
.profile-actions { flex-wrap: wrap; }
.profile-actions .btn { border-radius: 999px; }
.profile-actions [data-profile-block-action] {
  border-color: rgba(255, 118, 118, .34);
  color: rgba(255,255,255,.88);
}
.profile-actions [data-profile-block-action]:hover {
  border-color: rgba(255, 118, 118, .65);
  background: rgba(255, 118, 118, .12);
}
.profile-actions [data-profile-block-action][data-profile-block-action="unblock"] {
  border-color: rgba(76, 217, 144, .36);
}
.profile-actions [data-profile-block-action][data-profile-block-action="unblock"]:hover {
  border-color: rgba(76, 217, 144, .68);
  background: rgba(76, 217, 144, .12);
}

.profile-vip-locked { opacity: .58; }
.profile-vip-locked span::after {
  content: "";
}

/* Profiles: gallery fullscreen viewer + skeleton loading polish */
.profile-skeleton {
  display: grid;
  gap: 18px;
  padding: 2px;
}
.profile-skeleton-head {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}
.profile-skeleton-avatar,
.profile-skeleton-lines span,
.profile-skeleton-lines strong,
.profile-skeleton-lines em,
.profile-skeleton-tabs span,
.profile-skeleton-grid span {
  display: block;
  overflow: hidden;
  position: relative;
  background: rgba(255,255,255,.075);
}
.profile-skeleton-avatar::after,
.profile-skeleton-lines span::after,
.profile-skeleton-lines strong::after,
.profile-skeleton-lines em::after,
.profile-skeleton-tabs span::after,
.profile-skeleton-grid span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  animation: profileSkeletonShimmer 1.15s infinite;
}
.profile-skeleton-avatar {
  width: 96px;
  height: 96px;
  border-radius: 28px;
}
.profile-skeleton-lines {
  display: grid;
  gap: 10px;
}
.profile-skeleton-lines span { width: 110px; height: 12px; border-radius: 999px; }
.profile-skeleton-lines strong { width: min(280px, 76%); height: 30px; border-radius: 999px; }
.profile-skeleton-lines em { width: min(360px, 92%); height: 18px; border-radius: 999px; }
.profile-skeleton-tabs {
  display: flex;
  gap: 8px;
}
.profile-skeleton-tabs span {
  width: 92px;
  height: 38px;
  border-radius: 999px;
}
.profile-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.profile-skeleton-grid span {
  height: 76px;
  border-radius: 16px;
}
@keyframes profileSkeletonShimmer {
  to { transform: translateX(100%); }
}
.profile-tab-panel.is-entering {
  animation: profileTabPanelIn .18s ease-out both;
}
@keyframes profileTabPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.profile-gallery-photo__zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 10, 20, .58);
  border: 1px solid rgba(255,255,255,.18);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.profile-gallery-photo:hover .profile-gallery-photo__zoom,
.profile-gallery-photo:focus-visible .profile-gallery-photo__zoom {
  opacity: 1;
  transform: translateY(0);
}
.profile-gallery-viewer[hidden] { display: none !important; }
.profile-gallery-viewer {
  position: fixed;
  inset: 0;
  z-index: 2147483000 !important;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
}
.profile-gallery-viewer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 12, .78);
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
}
.profile-gallery-viewer__dialog {
  position: relative;
  width: min(1080px, 100%);
  height: min(82dvh, 760px);
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  gap: 12px;
  animation: profileGalleryViewerIn .2s ease-out both;
}
.profile-gallery-viewer__figure {
  min-width: 0;
  height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}
.profile-gallery-viewer__img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 24px;
  background: rgba(255,255,255,.055);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}
.profile-gallery-viewer__caption,
.profile-gallery-viewer__counter {
  justify-self: center;
  max-width: min(640px, 92vw);
  padding: 7px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
}
.profile-gallery-viewer__counter {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
}
.profile-gallery-viewer__close,
.profile-gallery-viewer__nav {
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
}
.profile-gallery-viewer__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
}
.profile-gallery-viewer__nav {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  font-size: 24px;
}
.profile-gallery-viewer__close:hover,
.profile-gallery-viewer__nav:hover {
  background: rgba(255,90,160,.22);
  border-color: rgba(255,90,160,.34);
}
@keyframes profileGalleryViewerIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
body.profile-gallery-viewer-open {
  overflow: hidden;
}
@media (max-width: 760px) {
  .profile-skeleton-head {
    grid-template-columns: 74px 1fr;
    padding: 14px;
  }
  .profile-skeleton-avatar {
    width: 74px;
    height: 74px;
    border-radius: 22px;
  }
  .profile-skeleton-grid {
    grid-template-columns: 1fr 1fr;
  }
  .profile-gallery-photo__zoom {
    opacity: 1;
    width: 28px;
    height: 28px;
    transform: none;
  }
  .profile-gallery-viewer {
    padding-inline: 0;
  }
  .profile-gallery-viewer__dialog {
    width: 100%;
    height: 100dvh;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .profile-gallery-viewer__figure {
    height: 100dvh;
    grid-template-rows: 1fr auto;
    padding: 54px 12px 50px;
  }
  .profile-gallery-viewer__img {
    border-radius: 18px;
  }
  .profile-gallery-viewer__close {
    top: max(10px, env(safe-area-inset-top));
    right: 12px;
  }
  .profile-gallery-viewer__nav {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 42px;
    height: 42px;
    font-size: 20px;
    transform: translateY(-50%);
  }
  .profile-gallery-viewer__nav--prev { left: 10px; }
  .profile-gallery-viewer__nav--next { right: 10px; }
  .profile-gallery-viewer__counter {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* Profile gallery separation/manage polish */
.profile-gallery-owner-actions {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 12px;
}
.profile-gallery-photo-wrap {
  position: relative;
  min-width: 0;
}
.profile-gallery-photo-wrap .profile-gallery-photo {
  width: 100%;
}
.profile-gallery-manage {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.profile-gallery-photo-wrap:hover .profile-gallery-manage,
.profile-gallery-photo-wrap:focus-within .profile-gallery-manage {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.profile-gallery-manage button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  background: rgba(10,10,20,.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.profile-gallery-manage button:hover:not(:disabled) {
  background: rgba(255,90,160,.24);
  border-color: rgba(255,90,160,.38);
}
.profile-gallery-manage button:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.profile-modal--behind-gallery {
  z-index: 2400 !important;
}
body.profile-main-gallery-open #galleryModal {
  z-index: 3100 !important;
}
body.profile-main-gallery-open .modal-backdrop {
  z-index: 3000 !important;
}
body.profile-main-gallery-open #galleryModal + .modal-backdrop,
body.profile-main-gallery-open .modal-backdrop.show {
  z-index: 3000 !important;
}
@media (max-width: 760px) {
  .profile-gallery-owner-actions {
    justify-content: stretch;
  }
  .profile-gallery-owner-actions .btn {
    width: 100%;
  }
  .profile-gallery-manage {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .profile-gallery-manage button {
    width: 32px;
    height: 32px;
  }
}

/* Profile gallery slots foundation */
.profile-gallery-slots {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  margin: 10px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
}
.profile-gallery-slots__bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
}
.profile-gallery-slots__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.95), rgba(236, 72, 153, 0.9));
  transition: width 0.25s ease;
}
.profile-gallery-slots__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.84rem;
}
.profile-gallery-slots__meta strong {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 700;
}
.profile-gallery-slots__meta small {
  color: rgba(255, 255, 255, 0.58);
  text-align: right;
}
@media (max-width: 575.98px) {
  .profile-gallery-slots__meta {
    align-items: flex-start;
    flex-direction: column;
  }
  .profile-gallery-slots__meta small {
    text-align: left;
  }
}


/* Profile modal controls/menu final fix
   Close and menu buttons stay fixed to the visible top-right of the profile dialog.
   The dropdown is positioned by JS from the three-dots button and never participates in layout. */
.profile-modal__dialog {
  position: relative !important;
}

.profile-modal__close,
.profile-modal__more {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 54px) !important;
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
  margin: 0 !important;
  float: none !important;
  display: inline-grid !important;
  place-items: center;
  border-radius: 999px;
  line-height: 1;
  box-sizing: border-box;
  z-index: 2570 !important;
}

.profile-modal__close {
  right: max(42px, calc((100vw - min(1040px, calc(100vw - 48px))) / 2 + 18px)) !important;
  left: auto !important;
}

.profile-modal__more {
  right: max(112px, calc((100vw - min(1040px, calc(100vw - 48px))) / 2 + 88px)) !important;
  left: auto !important;
}

.profile-modal__close i,
.profile-modal__more i {
  display: block;
  line-height: 1;
}

.profile-modal__more[hidden],
.profile-modal__menu[hidden] {
  display: none !important;
}

.profile-modal__menu,
.profile-modal__menu[role="menu"] {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 2580 !important;
  max-height: calc(100dvh - 120px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

body.profile-settings-modal-open .modal-backdrop.show {
  z-index: 2600 !important;
}
body.profile-settings-modal-open #settingsModal {
  z-index: 2700 !important;
}

@media (max-width: 760px) {
  .profile-modal__close,
  .profile-modal__more {
    top: calc(env(safe-area-inset-top) + 18px) !important;
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
  }

  .profile-modal__close {
    right: calc(env(safe-area-inset-right) + 18px) !important;
  }

  .profile-modal__more {
    right: calc(env(safe-area-inset-right) + 88px) !important;
  }

  .profile-modal__menu,
  .profile-modal__menu[role="menu"] {
    width: min(300px, calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - 96px) !important;
  }
}

@media (max-width: 390px) {
  .profile-modal__close,
  .profile-modal__more {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  .profile-modal__close {
    right: calc(env(safe-area-inset-right) + 14px) !important;
  }

  .profile-modal__more {
    right: calc(env(safe-area-inset-right) + 74px) !important;
  }
}


/* Profile floating controls: compact size + tighter owner menu placement */
.profile-modal__close,
.profile-modal__more {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  top: calc(env(safe-area-inset-top) + 48px) !important;
  font-size: 0.95rem !important;
}

.profile-modal__close i,
.profile-modal__more i {
  font-size: 0.95rem !important;
}

.profile-modal__close {
  right: max(40px, calc((100vw - min(1040px, calc(100vw - 48px))) / 2 + 20px)) !important;
}

.profile-modal__more {
  right: max(92px, calc((100vw - min(1040px, calc(100vw - 48px))) / 2 + 72px)) !important;
}

@media (max-width: 760px) {
  .profile-modal__close,
  .profile-modal__more {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    top: calc(env(safe-area-inset-top) + 14px) !important;
    font-size: 0.9rem !important;
  }

  .profile-modal__close i,
  .profile-modal__more i {
    font-size: 0.9rem !important;
  }

  .profile-modal__close {
    right: calc(env(safe-area-inset-right) + 14px) !important;
  }

  .profile-modal__more {
    right: calc(env(safe-area-inset-right) + 62px) !important;
  }
}

@media (max-width: 390px) {
  .profile-modal__close,
  .profile-modal__more {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .profile-modal__more {
    right: calc(env(safe-area-inset-right) + 58px) !important;
  }
}